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_FORMAT: "Phone number must be 10 digits",
PHONE_EXTENSION_FORMAT: "The specified extension is invalid", PHONE_EXTENSION_FORMAT: "The specified extension is invalid",
SMS_CONSENT_REQUIRED_1: "Please select checkbox to receive text messages", 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", YEAR_REQUIRED: "Please select your vehicle year",
MAKE_REQUIRED: "Please select your vehicle make", MAKE_REQUIRED: "Please select your vehicle make",
MODEL_REQUIRED: "Please select your vehicle model", 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; transition: background 0s 0s ease-in-out;
} }
} }
.alert { .alert.alert-success {
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
border: 1px solid $green; border: 1px solid $green;
order: 2; order: 2;
margin: 0 0 1.5rem 0; 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 { .alert.alert-warning.text-center {
position: relative; .alert-heading {
font-weight: 600; color: $gray-650;
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;
} }
} }
.modal.modal-component .modal-dialog .modal-content { .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" }); const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(false); expect(checkboxes.at(0).props("hasError")).toBe(false);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_1); expect(wrapper.findComponent({ name: "alert" }).exists()).toBe(false);
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_2);
}); });
it("should show the transactional consent error when consent management is disabled", async () => { 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 }); await wrapper.setProps({ showConsentErrors: true });
expect(wrapper.text()).toContain(errorMessages.SMS_CONSENT_REQUIRED_1); const errorAlert = wrapper.findComponent({ name: "alert" });
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_2); 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" }); const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(true); 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, { const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
propsData: { propsData: {
modelValue: defaultSaveProgressSmsConsent(), modelValue: defaultSaveProgressSmsConsent(),
@ -121,8 +123,11 @@ describe("save-progress-popup-sms-consent-question", () => {
await wrapper.setProps({ showConsentErrors: true }); await wrapper.setProps({ showConsentErrors: true });
expect(wrapper.text()).toContain(errorMessages.SMS_CONSENT_REQUIRED_2); const errorAlert = wrapper.findComponent({ name: "alert" });
expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED_1); 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" }); const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
expect(checkboxes.at(0).props("hasError")).toBe(true); 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" :labelText="consentCopy.marketing"
:hasError="showConsentError" :hasError="showConsentError"
:isDisabled="isDisabled" /> :isDisabled="isDisabled" />
<span <alert
v-if="showConsentError" v-if="showConsentError"
class="save-progress-popup-sms-consent__error d-inline-flex small mt-1" class="mt-1"
role="alert" cmsWidgetName="SaveProgressSmsConsentErrorAlert"
aria-live="polite"> :manualHeadline="consentErrorMessage"
{{ consentErrorMessage }} alertClass="alert-warning"
</span> :hasBorder="true"
:isDismissible="false"
:shouldScrollToOnMount="false" />
</fieldset> </fieldset>
</template> </template>
<script> <script>
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question"; import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import alert from "@/ux-components/alert/alert";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import { import {
defaultSaveProgressSmsConsent, defaultSaveProgressSmsConsent,
@ -86,6 +89,7 @@ export default {
}, },
components: { components: {
checkboxQuestion, checkboxQuestion,
alert,
}, },
}; };
</script> </script>
@ -99,8 +103,10 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
&__error { .alert.alert-warning {
color: $red; :deep(.alert-heading) {
color: $gray-650;
}
} }
} }
</style> </style>