INSR-7759: Finish adding SMS Opt-In
This commit is contained in:
Alex Humphries
parent
b4977cd63c
commit
066362e0f7
2 changed files with 99 additions and 16 deletions
|
|
@ -94,6 +94,7 @@
|
|||
</div>
|
||||
<cartDropdown
|
||||
v-if="showCart"
|
||||
class="cart-dropdown"
|
||||
:showAsPaid="payment.isPayInAdvance"
|
||||
:readOnly="true"
|
||||
recyclingModalCmsWidgetName="RecycleModal"
|
||||
|
|
@ -230,7 +231,7 @@ export default {
|
|||
address: this.appointmentLocation,
|
||||
inShopDuration: this.inShopAppointmentDuration,
|
||||
email: this.customerEmail,
|
||||
phone: this.contactInfo.servicePhone,
|
||||
phone: this.contactPhone,
|
||||
workOrderNumber: this.workOrderNumber,
|
||||
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
|
||||
CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
|
||||
|
|
@ -492,6 +493,13 @@ export default {
|
|||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
}
|
||||
},
|
||||
contactPhone() {
|
||||
let phoneNumber = this.contactInfo.servicePhone;
|
||||
if (this.contactInfo.extension) {
|
||||
phoneNumber += `-${this.contactInfo.extension}`;
|
||||
}
|
||||
return phoneNumber;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -718,5 +726,10 @@ export default {
|
|||
color: $black;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.cart-dropdown:deep(.deductible-value) {
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -53,8 +53,9 @@
|
|||
v-if="!isOptedInSMSPreviously"
|
||||
class="sms-opt-in-section">
|
||||
<hr class="sms-divider" />
|
||||
<span class="sms-opt-in-header">{{ smsOptInHeaderText }}</span>
|
||||
<div class="sms-opt-in-header">{{ smsOptInHeaderText }}</div>
|
||||
<buttonQuestion
|
||||
class="sms-opt-in-question"
|
||||
v-model="smsOptIn"
|
||||
groupName="sms-opt-in"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
|
|
@ -62,14 +63,28 @@
|
|||
:answers="smsOptinQuestionAnswers"
|
||||
isRequired
|
||||
:validationRules="rules.optionRequired" />
|
||||
<textboxQuestion
|
||||
v-if="smsOptIn === 'Yes'"
|
||||
v-model="smsPhoneNumber"
|
||||
inputId="phoneNumber"
|
||||
:cmsWidgetName="widget.smsPhoneNumber"
|
||||
isRequired
|
||||
:mask="phoneMask"
|
||||
placeholderText="###-###-####"
|
||||
disableAutoFill
|
||||
:validationRules="rules.phoneNumber" />
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
:isStackedVertically="true"
|
||||
@backClicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
<div
|
||||
v-if="!isOptedInSMSPreviously"
|
||||
class="disclaimer">
|
||||
<textBlock :cmsWidgetName="widget.smsDisclaimer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue