diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 34ed6789..ab3d2bbe 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -94,6 +94,7 @@ diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8f7fa524..73079f0b 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -53,8 +53,9 @@ v-if="!isOptedInSMSPreviously" class="sms-opt-in-section">
- {{ smsOptInHeaderText }} +
{{ smsOptInHeaderText }}
+ +
+ +
@@ -111,6 +126,8 @@ import { formatAmountInDollars } from '@/helpers/text-helper'; import widgetFields from '@/constants/cms-widget-fields'; import errorMessages from '@/constants/error-messages'; import { required } from '@/helpers/validation-rules'; +import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue'; +import MaskaFormattedMasks from '@/constants/maska-masks'; defineRule('option-required', required(errorMessages.PAYMENT_METHOD_PAGE_OPTION_REQUIRED)); @@ -126,7 +143,8 @@ export default { paymentMethodQuestion, alert, textBlock, - buttonQuestion + buttonQuestion, + textboxQuestion }, mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { @@ -159,13 +177,16 @@ export default { amountDue: 'AmountDueCartHeaderTextWidget', payAtAppointment: 'PayAtAppointmentTextWidget', smsOptInHeader: 'SMSOptInHeaderWidget', - smsOptInQuestion: 'SMSOptInQuestionWidget' + smsOptInQuestion: 'SMSOptInQuestionWidget', + smsPhoneNumber: 'SMSPhoneNumberWidget', + smsDisclaimer: 'SMSDisclaimerWidget' }, rules: { - optionRequired: globalRules.OPTION_REQUIRED + optionRequired: globalRules.OPTION_REQUIRED, + phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}` }, smsOptIn: null, - smsPhoneNumber: this.mainStore.contactInfo?.alternativePhone + smsPhoneNumber: this.getSMSPhoneFromStore() }; }, computed: { @@ -192,8 +213,8 @@ export default { return supportsApplePay() ? this.widget.paymentMethodApplePay : this.widget.paymentMethod; }, showCartTotal() { - return this.mainStore.isITAC || this.mainStore.isNoComp - || this.mainStore.order.lineItems?.vaps?.length > 0; + return this.mainStore.isVerified && (this.mainStore.isITAC || this.mainStore.isNoComp + || this.mainStore.order.lineItems?.vaps?.length > 0); }, cartHeaderText() { if (this.isPayInAdvanceDisabled) { @@ -225,6 +246,9 @@ export default { }, smsOptinQuestionAnswers() { return this.getCmsContent(this.widget.smsOptInQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || []; + }, + phoneMask() { + return MaskaFormattedMasks.PHONE_NUMBER; } }, watch: { @@ -327,11 +351,11 @@ export default { this.$refs.siteFooter.updateButtonText(newValue); }, async forwardButtonAction() { - useMainStore().savePaymentMethodChoice(this.paymentMethod); - if (this.smsOptIn !== null) { - useMainStore().updateContactInfo({ - requestTextUpdates: this.smsOptIn === 'Yes' - }); + this.mainStore.savePaymentMethodChoice(this.paymentMethod); + const requestTextUpdates = this.smsOptIn === 'Yes'; + this.mainStore.updateContactInfo({ requestTextUpdates }); + if (requestTextUpdates) { + this.mainStore.updatePhoneNumbers({ alternative: this.smsPhoneNumber, service: this.smsPhoneNumber }); } if (this.paymentMethod === paymentMethods.PAY_AT_TIME_OF_SERVICE) { try { @@ -371,6 +395,9 @@ export default { scenario, this.$route ); + }, + getSMSPhoneFromStore() { + return useMainStore().contactInfo.servicePhone; } } }; @@ -408,6 +435,7 @@ $page-side-padding: 1.5rem; p { margin-bottom: 0; + color: #4d4e53; } } } @@ -425,8 +453,7 @@ $page-side-padding: 1.5rem; .cart-label { color: $black; - font-weight: 600; - line-height: 1.625rem; + font-weight: $font-weight-bold; } .cart-value { @@ -444,6 +471,49 @@ $page-side-padding: 1.5rem; margin-top: .5rem; margin-bottom: 1.25rem; } + + .sms-divider { + margin-top: 1.75rem; + margin-bottom: 1.875rem; + } + + .sms-opt-in-section { + margin-bottom: 1.875rem; + } + + .sms-opt-in-header { + color: $black; + font-weight: $font-weight-bold; + margin-bottom: 1.125rem; + } + + .sms-opt-in-question { + margin-bottom: 1.25rem; + + :deep(.question-text) { + margin-bottom: .625rem; + } + } + + .disclaimer { + margin-bottom: 1.875rem; + font-weight: $font-weight-light; + font-size: .8125rem; + line-height: 1.54; + color: #4d4e53; + + :deep(a) { + color: $heritage-blue-primary; + text-decoration: none; + font-weight: $font-weight-bold; + + &:hover, + &:focus { + color: $heritage-blue-secondary; + text-decoration: underline; + } + } + } } }