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

INSR-7759: More payment-method updates

Browse source
This commit is contained in:
Alex Humphries 2026-02-19 15:59:45 -05:00
parent e12ac95cc7
commit f0ef62597b
2 changed files with 189 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/iss-components/contact-details-drawer/contact-details-drawer.vue
View file

@ -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();

286
src/layouts/payment-method/payment-method.vue
View file

@ -10,8 +10,8 @@
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="iss-heritage-container-width">
<div class="payment-method-container iss-heritage-content-container-width">
<div class="iss-heritage-container-width payment-method-container row">
<div class="order-info-container col-md-7">
<alert
class=""
alertClass="alert-warning"
@ -89,11 +89,33 @@
</div>
</div>
</div>
<div class="offer-container col-lg-4 offset-lg-1 col-md-5 d-none d-md-flex">
<div
v-if="offerWipers"
class="wiper-offer-panel">
<div class="wiper-logo">
<img
:src="wiperOfferPanel.image"
alt="Wiper Offer Logo" />
</div>
<div class="panel-body">
<div class="wiper-header">{{ wiperOfferPanel.header }}</div>
<div class="wiper-body">{{ wiperOfferPanel.body }}</div>
</div>
<div class="panel-footer">
<buttonMain
class="edit-wiper-offer-button"
:buttonText="wiperOfferPanel.edit"
@click="handleEditClicked('wipers')" />
</div>
</div>
</div>
</div>
<contactDetailsDrawer
ref="contactDetailsDrawer"
class="contact-details-drawer"
@updateContactDetails="refreshContactDetails" />
@updateContactDetails="refreshContactDetails"
@closeWithoutSaving="closeContactDetailsWithoutSaving" />
</div>
</Form>
</template>
@ -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 {
<style lang="scss" scoped>
$page-side-padding: 1.5rem;
#app .iss-heritage-container-width {
.iss-heritage-content-container-width {
@include media-breakpoint-up(md) {
width: 58.33333333%;
#app .iss-heritage-container-width.payment-method-container {
.alert-warning {
margin-top: 1.25rem;
margin-bottom: 0rem;
}
.subheader {
margin-top: 1.25rem;
:deep(strong) {
color: $black;
font-weight: 600;
}
:deep(.subheader-secondary) {
margin-top: .625rem;
p {
margin-bottom: 0;
color: #4d4e53;
}
}
}
.payment-method-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
.alert-warning {
margin-top: 1.25rem;
margin-bottom: 0rem;
}
.section-divider {
margin-top: 1.5rem;
margin-bottom: 1.875rem;
}
.subheader {
margin-top: 1.25rem;
.cart-header {
display: flex;
align-items: center;
gap: .25rem;
margin-bottom: .625rem;
:deep(strong) {
color: $black;
font-weight: 600;
}
:deep(.subheader-secondary) {
margin-top: .625rem;
p {
margin-bottom: 0;
color: #4d4e53;
}
}
}
.section-divider {
margin-top: 1.5rem;
margin-bottom: 1.875rem;
}
.cart-header {
display: flex;
align-items: center;
gap: .25rem;
margin-bottom: 1rem;
.cart-label {
color: $black;
font-weight: $font-weight-bold;
}
.cart-value {
color: $green;
font-weight: $font-weight-bold;
font-size: 1.625rem;
}
}
.cart-dropdown-container {
margin-bottom: 1.25rem;
}
.pia-divider {
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 {
.cart-label {
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;
}
.cart-value {
color: $green;
font-weight: $font-weight-bold;
font-size: 1.625rem;
}
}
.disclaimer {
margin-bottom: 1.875rem;
font-weight: $font-weight-light;
font-size: .8125rem;
line-height: 1.54;
color: #4d4e53;
.cart-dropdown-container {
margin-bottom: 1.25rem;
}
:deep(a) {
color: $heritage-blue-primary;
text-decoration: none;
font-weight: $font-weight-bold;
.pia-divider {
margin-top: .5rem;
margin-bottom: 1.25rem;
}
&:hover,
&:focus {
color: $heritage-blue-secondary;
text-decoration: underline;
}
.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;
}
}
}
.contact-details-drawer {
:deep(strong) {
color: $black;
font-weight: 600;
}
}
.wiper-offer-panel {
margin-top: 1.25rem;
margin-bottom: 1.375rem;
box-shadow: 0 0 .625rem 1px #cacbcc;
border: 1px solid #ddd;
border-radius: .25rem;
max-height: fit-content;
.wiper-logo {
margin: 1.25rem 2.25rem 0 2.25rem;
img {
max-width: 100%;
height: auto;
}
}
.panel-body {
padding: 0 1rem 1.25rem 1rem;
.wiper-header {
margin: 1.25rem 0 .625rem 0;
color: $black;
font-weight: $font-weight-bold;
}
}
.panel-footer {
padding: 0 1rem 1.25rem 1rem;
.edit-wiper-offer-button {
width: 100%;
}
}
}
}
</style>