jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-3068: Transactional checkbox required updates

Browse source
This commit is contained in:
credelinghuys 2026-08-04 10:52:09 -04:00
parent a7085fef8c
commit 101d77f14f
4 changed files with 50 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/error-messages.js
View file

@ -34,7 +34,8 @@ const errorMessages = {
PHONE_FORMAT: "Phone number must be 10 digits",
PHONE_EXTENSION_FORMAT: "The specified extension is invalid",
SMS_CONSENT_REQUIRED_1: "Please select checkbox to receive text messages",
SMS_CONSENT_REQUIRED_2: "Please select at least one consent option",
SMS_CONSENT_REQUIRED_2:
"To receive communication about your saved progress, please check the first box. You can opt out at any time!",
YEAR_REQUIRED: "Please select your vehicle year",
MAKE_REQUIRED: "Please select your vehicle make",
MODEL_REQUIRED: "Please select your vehicle model",

38
src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
View file

@ -364,27 +364,33 @@ export default {
transition: background 0s 0s ease-in-out;
}
}
.alert {
.alert.alert-success {
border-radius: $border-radius-lg;
border: 1px solid $green;
order: 2;
margin: 0 0 1.5rem 0;
.alert-heading {
position: relative;
font-weight: 600;
font-size: 1rem;
color: $black;
text-align: left;
padding-left: 1.5rem;
&::before {
position: absolute;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
width: 1rem;
height: 1rem;
top: 6px;
left: 0;
}
}
}
.alert-heading {
position: relative;
font-weight: 600;
font-size: 1rem;
color: $black;
text-align: left;
padding-left: 1.5rem;
&::before {
position: absolute;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
width: 1rem;
height: 1rem;
top: 6px;
left: 0;
.alert.alert-warning.text-center {
.alert-heading {
color: $gray-650;
}
}
.modal.modal-component .modal-dialog .modal-content {

19
src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.spec.js
View file

@ -88,8 +88,7 @@ describe("save-progress-popup-sms-consent-question", () => {
const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(false);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_1);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_2);
expect(wrapper.findComponent({ name: "alert" }).exists()).toBe(false);
});
it("should show the transactional consent error when consent management is disabled", async () => {
@ -103,14 +102,17 @@ describe("save-progress-popup-sms-consent-question", () => {
await wrapper.setProps({ showConsentErrors: true });
expect(wrapper.text()).toContain(errorMessages.SMS_CONSENT_REQUIRED_1);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_2);
const errorAlert = wrapper.findComponent({ name: "alert" });
expect(errorAlert.exists()).toBe(true);
expect(errorAlert.props("manualHeadline")).toBe(errorMessages.SMS_CONSENT_REQUIRED_1);
expect(errorAlert.props("alertClass")).toBe("alert-warning");
expect(errorAlert.props("hasBorder")).toBe(true);
const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(true);
});
it("should show the multi-consent error when consent management is enabled", async () => {
it("should show the transactional consent error when consent management is enabled", async () => {
const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
propsData: {
modelValue: defaultSaveProgressSmsConsent(),
@ -121,8 +123,11 @@ describe("save-progress-popup-sms-consent-question", () => {
await wrapper.setProps({ showConsentErrors: true });
expect(wrapper.text()).toContain(errorMessages.SMS_CONSENT_REQUIRED_2);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_1);
const errorAlert = wrapper.findComponent({ name: "alert" });
expect(errorAlert.exists()).toBe(true);
expect(errorAlert.props("manualHeadline")).toBe(errorMessages.SMS_CONSENT_REQUIRED_2);
expect(errorAlert.props("alertClass")).toBe("alert-warning");
expect(errorAlert.props("hasBorder")).toBe(true);
const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(true);

22
src/fmg-components/save-progress-popup-question/save-progress-popup-sms-consent-question.vue
View file

@ -16,18 +16,21 @@
:labelText="consentCopy.marketing"
:hasError="showConsentError"
:isDisabled="isDisabled" />
<span
<alert
v-if="showConsentError"
class="save-progress-popup-sms-consent__error d-inline-flex small mt-1"
role="alert"
aria-live="polite">
{{ consentErrorMessage }}
</span>
class="mt-1"
cmsWidgetName="SaveProgressSmsConsentErrorAlert"
:manualHeadline="consentErrorMessage"
alertClass="alert-warning"
:hasBorder="true"
:isDismissible="false"
:shouldScrollToOnMount="false" />
</fieldset>
</template>
<script>
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import alert from "@/ux-components/alert/alert";
import { errorMessages } from "@/constants/error-messages";
import {
defaultSaveProgressSmsConsent,
@ -86,6 +89,7 @@ export default {
},
components: {
checkboxQuestion,
alert,
},
};
</script>
@ -99,8 +103,10 @@ export default {
margin: 0;
padding: 0;
&__error {
color: $red;
.alert.alert-warning {
:deep(.alert-heading) {
color: $gray-650;
}
}
}
</style>