diff --git a/src/iss-components/contact-details-drawer/contact-details-drawer.vue b/src/iss-components/contact-details-drawer/contact-details-drawer.vue index 99b97442..660ae1c3 100644 --- a/src/iss-components/contact-details-drawer/contact-details-drawer.vue +++ b/src/iss-components/contact-details-drawer/contact-details-drawer.vue @@ -79,7 +79,7 @@ export default { modal, textboxQuestion }, - emits: ['update-contact-details'], + emits: ['update-contact-details', 'close-without-saving'], data() { const { firstName, lastName, @@ -109,7 +109,8 @@ export default { phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, extension: `${globalRules.EXTENSION_FORMAT}` }, - modalPositions + modalPositions, + detailsSaved: false }; }, computed: { @@ -137,6 +138,7 @@ export default { this.isModalOpened = isOpened; }, clickFooterButtonEvent() { + this.detailsSaved = true; this.saveContactDetails(); this.closeModal(); }, @@ -155,6 +157,9 @@ export default { this.$emit('update-contact-details'); }, resetFormValues() { + if (!this.detailsSaved) { + this.$emit('close-without-saving'); + } const { firstName, lastName, emailAddress, @@ -165,6 +170,7 @@ export default { this.emailAddress = emailAddress; this.phoneNumber = servicePhone; this.extension = extension; + this.detailsSaved = false; }, openModal() { this.modal.openModal(); diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index b45fada5..2b40aabc 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -10,8 +10,8 @@ ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> -
-
+
+
+
+
+ +
+
{{ wiperOfferPanel.header }}
+
{{ wiperOfferPanel.body }}
+
+
+ +
+
+
+ @updateContactDetails="refreshContactDetails" + @closeWithoutSaving="closeContactDetailsWithoutSaving" />
@@ -112,6 +134,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue'; import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue'; import contactDetailsDrawer from '@/iss-components/contact-details-drawer/contact-details-drawer.vue'; +import buttonMain from '@/ux-components/button-main/button-main.vue'; // Supporting Items import settleAllPromises from '@/helpers/layout-helper'; @@ -148,7 +171,8 @@ export default { textBlock, buttonQuestion, textboxQuestion, - contactDetailsDrawer + contactDetailsDrawer, + buttonMain }, mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { @@ -183,14 +207,15 @@ export default { smsOptInHeader: 'SMSOptInHeaderWidget', smsOptInQuestion: 'SMSOptInQuestionWidget', smsPhoneNumber: 'SMSPhoneNumberWidget', - smsDisclaimer: 'SMSDisclaimerWidget' + smsDisclaimer: 'SMSDisclaimerWidget', + wiperOffer: 'WiperOfferPanelWidget' }, rules: { optionRequired: globalRules.OPTION_REQUIRED, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}` }, - smsOptIn: null, - smsPhoneNumber: this.getSMSPhoneFromStore() + smsOptIn: '', + smsPhoneNumber: '' }; }, computed: { @@ -250,9 +275,25 @@ export default { }, smsOptinQuestionAnswers() { return this.getCmsContent(this.widget.smsOptInQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || []; - }, + }, phoneMask() { return MaskaFormattedMasks.PHONE_NUMBER; + }, + offerWipers() { + return !this.mainStore.lineItems.vaps.some((part) => part.partType.toLowerCase().includes('wiper')); + }, + wiperOfferPanel() { + const wiperImage = this.getCmsContent(this.widget.wiperOffer, widgetFields.CONTENT_GROUP_WIDGET.IMAGE); + const wiperHeader = this.getCmsContent(this.widget.wiperOffer, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); + const wiperBody = this.getCmsContent(this.widget.wiperOffer, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); + const wiperEdit = this.getCmsContent(this.widget.wiperOffer, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT); + + return { + image: wiperImage, + header: wiperHeader, + body: wiperBody, + edit: wiperEdit + } } }, watch: { @@ -342,7 +383,12 @@ export default { && contactInfoReqs); }, initializeComponent() { - this.paymentMethod = this.getPaymentMethodFromStore(); + const paymentMethodFromStore = this.getPaymentMethodFromStore(); + // SMS Opt In defaults to 'no', but we don't actually want to use it if the user hasn't saved data form this page yet + if (paymentMethodFromStore) { + this.smsOptIn = this.getSMSOptInFromStore(); + } + this.smsPhoneNumber = this.getSMSPhoneFromStore(); }, getPaymentMethodFromStore() { if (this.isPayInAdvanceDisabled) { @@ -400,8 +446,11 @@ export default { this.$route ); }, + getSMSOptInFromStore() { + return this.mainStore.contactInfo.requestTextUpdates ? 'Yes' : 'No'; + }, getSMSPhoneFromStore() { - return useMainStore().contactInfo.servicePhone; + return this.mainStore.contactInfo.alternativePhone ?? this.mainStore.contactInfo.servicePhone; }, handleEditClicked(section) { switch (section) { @@ -438,7 +487,10 @@ export default { this.$refs.contactDetailsDrawer.openModal(); }, refreshContactDetails() { - this.smsPhoneNumber = this.getSMSPhoneFromStore(); + this.smsPhoneNumber = this.mainStore.contactInfo.servicePhone; + }, + closeContactDetailsWithoutSaving() { + this.smsOptIn = 'No'; } } }; @@ -446,121 +498,145 @@ export default {