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

Merge branch 'develop' into feature/SSR-683

Browse source
This commit is contained in:
Katie Kroell 2024-04-30 17:01:34 -04:00
commit fd8e56a4b2
2 changed files with 303 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/iss-components/cart-dropdown/cart-dropdown.vue
View file

@ -31,7 +31,7 @@
<div
v-if="showDeductibleCartItem"
id="cart-deductible"
class="d-flex justify-content-between align-items-center">
class="d-flex justify-content-between align-items-center py-2">
<span id="deductible-label">{{ deductibleLabel }}</span>
<span id="deductible-value">{{ getDisplayed(deductible) }}</span>
</div>
@ -50,7 +50,7 @@
class="px-5">
<div
id="service-package-name"
class="py-1 d-flex justify-content-between align-items-center">
class="py-2 d-flex justify-content-between align-items-center">
<textBlock
:cmsWidgetName="servicePackageLabelWidget"
class="force-no-top-margin" />
@ -62,7 +62,7 @@
<div
v-for="(item, i) in servicePackageCartItems"
:key="i">
<div class="py-1 d-flex justify-content-between align-items-center">
<div class="py-2 d-flex justify-content-between align-items-center">
<span>{{ item?.name ?? '' }}</span>
<textLink
v-if="!readOnly"
@ -84,7 +84,7 @@
<div
v-for="(item, i) in nonServicePackageCartItems"
:key="i"
class="px-5 py-1 non-packaged-cart-item">
class="px-5 py-2 non-packaged-cart-item">
<div class="d-flex justify-content-between align-items-center">
<span
v-if="item.cartItemType === cartItemType.RECYCLE_FEE"
@ -119,20 +119,20 @@
class="subtotal-and-tax">
<div
id="cart-subtotal"
class="col d-flex justify-content-between">
class="py-2 col d-flex justify-content-between">
<span id="subtotal-label">{{ subtotalLabel }}</span>
<span id="subtotal-value">{{ getDisplayed(subTotal) }}</span>
</div>
<div
id="cart-sales-tax"
class="pt-1 col d-flex justify-content-between">
class="py-2 col d-flex justify-content-between">
<span id="sales-tax-label">{{ salesTaxLabel }}</span>
<span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
</div>
<div
v-if="showAsPaid"
id="cart-amount-paid"
class="pt-1 col d-flex justify-content-between">
class="py-2 col d-flex justify-content-between">
<span id="amount-paid-label">{{ amountPaidLabel }}</span>
<span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
</div>
@ -556,7 +556,7 @@ export default {
.bottom-amount-due {
color: $white;
background-color: $green;
padding: 0.25rem 1.5rem;
padding: 0.5rem 1.5rem;
}
}

441
src/layouts/payment-page/payment-page.vue
View file

@ -37,7 +37,9 @@
</iframe>
</div>
<div v-if="isCreditCard || isAfterPay" class="px-2">
<div
v-if="isCreditCard || isAfterPay"
class="px-2">
<hr :class="{'my-0': isCreditCard}">
<cartDropdown
:readOnly="true"
@ -70,10 +72,22 @@
:target="isPaypal ? '_top' : 'card-frame'"
method="POST"
:action="checkoutUrl">
<input type="hidden" name="paymentType" :value="paymentType" />
<input type="hidden" name="sgSessionId" :value="authToken" />
<input type="hidden" name="sgAuthToken" :value="authToken" />
<input type="hidden" name="sgSignaturePublic" :value="authSignature" />
<input
type="hidden"
name="paymentType"
:value="paymentType" />
<input
type="hidden"
name="sgSessionId"
:value="authToken" />
<input
type="hidden"
name="sgAuthToken"
:value="authToken" />
<input
type="hidden"
name="sgSignaturePublic"
:value="authSignature" />
<input
type="hidden"
name="sgSignatureStartDate"
@ -86,13 +100,34 @@
type="hidden"
name="sge_commerce_indicator_isinternet"
value="true" />
<input type="hidden" name="sghopsource" value="Safelite.com" />
<input type="hidden" name="sgHtmlStyle" value="ResourceSafeliteHtml" />
<input type="hidden" name="sgErrorMessagesEmbedded" value="true" />
<input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
<input type="hidden" name="maskCharacter" value="*" />
<input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
<input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
<input
type="hidden"
name="sghopsource"
value="Safelite.com" />
<input
type="hidden"
name="sgHtmlStyle"
value="ResourceSafeliteHtml" />
<input
type="hidden"
name="sgErrorMessagesEmbedded"
value="true" />
<input
type="hidden"
name="sgNoKeystrokeProcessing"
value="false" />
<input
type="hidden"
name="maskCharacter"
value="*" />
<input
type="hidden"
name="styleSheetCode"
:value="dynamicCSSUrl" />
<input
type="hidden"
name="styleSheetCode2"
:value="dynamicHopCSSUrl" />
<input
type="hidden"
name="sgReceiptResponseURL"
@ -105,33 +140,102 @@
type="hidden"
name="sgErrorResponseURL"
:value="payInAdvanceResponseUrl" />
<input type="hidden" name="sgheaderline1" :value="getHeaderLine1" />
<input type="hidden" name="sgHeader1subtitle" value="" />
<input type="hidden" name="sgheaderline2" :value="getHeaderLine2" />
<input type="hidden" name="sgheaderline3" value="" />
<input type="hidden" name="sgheaderline4" value="" />
<input
type="hidden"
name="sgheaderline1"
:value="getHeaderLine1" />
<input
type="hidden"
name="sgHeader1subtitle"
value="" />
<input
type="hidden"
name="sgheaderline2"
:value="getHeaderLine2" />
<input
type="hidden"
name="sgheaderline3"
value="" />
<input
type="hidden"
name="sgheaderline4"
value="" />
<input
type="hidden"
name="sgheaderline5"
value="*Required information" />
<input type="hidden" name="billTo_firstName" :value="firstName" />
<input type="hidden" name="billTo_firstNameShow" value="true" />
<input type="hidden" name="sghopmiddleInitialShow" value="false" />
<input type="hidden" name="billTo_lastName" :value="lastName" />
<input type="hidden" name="billTo_lastNameShow" value="true" />
<input type="hidden" name="billTo_street1" value="" />
<input type="hidden" name="billTo_street2" value="" />
<input type="hidden" name="billTo_city" value="" />
<input type="hidden" name="billTo_state" value="" />
<input type="hidden" name="billTo_postalCode" value="" />
<input type="hidden" name="billTo_postalCodeShow" value="true" />
<input type="hidden" name="billTo_postalCodeEnable" value="true" />
<input type="hidden" name="sgLabelPostalCode" value="Billing ZIP" />
<input type="hidden" name="sgtotalamount" :value="displayAmount" />
<input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
<input type="hidden" name="lineItems" :value="payInAdvanceLineItems" />
<input type="hidden" name="sgdiscountstrikethruamount" value="" />
<input type="hidden" name="callerDisplayText" value="" />
<input
type="hidden"
name="billTo_firstName"
:value="firstName" />
<input
type="hidden"
name="billTo_firstNameShow"
value="true" />
<input
type="hidden"
name="sghopmiddleInitialShow"
value="false" />
<input
type="hidden"
name="billTo_lastName"
:value="lastName" />
<input
type="hidden"
name="billTo_lastNameShow"
value="true" />
<input
type="hidden"
name="billTo_street1"
value="" />
<input
type="hidden"
name="billTo_street2"
value="" />
<input
type="hidden"
name="billTo_city"
value="" />
<input
type="hidden"
name="billTo_state"
value="" />
<input
type="hidden"
name="billTo_postalCode"
value="" />
<input
type="hidden"
name="billTo_postalCodeShow"
value="true" />
<input
type="hidden"
name="billTo_postalCodeEnable"
value="true" />
<input
type="hidden"
name="sgLabelPostalCode"
value="Billing ZIP" />
<input
type="hidden"
name="sgtotalamount"
:value="displayAmount" />
<input
type="hidden"
name="totalAmountDecimal"
:value="totalAmount" />
<input
type="hidden"
name="lineItems"
:value="payInAdvanceLineItems" />
<input
type="hidden"
name="sgdiscountstrikethruamount"
value="" />
<input
type="hidden"
name="callerDisplayText"
value="" />
<input
type="hidden"
name="sgtermsofusedisplaytext"
@ -164,14 +268,38 @@
type="hidden"
name="sgErrorMessageTimeOut"
value="For your security, this transaction has been timed out." />
<input type="hidden" name="sgLabelCardNumber" value="" />
<input type="hidden" name="sgLabelAddressLine1" :value="address1" />
<input type="hidden" name="sgLabelAddressLine2" :value="address2" />
<input type="hidden" name="sgLabelCity" :value="city" />
<input type="hidden" name="sgLabelState" :value="state" />
<input type="hidden" name="sgCtu" :value="ctu" />
<input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
<input type="hidden" name="sgEmailAddress" :value="emailAddress" />
<input
type="hidden"
name="sgLabelCardNumber"
value="" />
<input
type="hidden"
name="sgLabelAddressLine1"
:value="address1" />
<input
type="hidden"
name="sgLabelAddressLine2"
:value="address2" />
<input
type="hidden"
name="sgLabelCity"
:value="city" />
<input
type="hidden"
name="sgLabelState"
:value="state" />
<input
type="hidden"
name="sgCtu"
:value="ctu" />
<input
type="hidden"
name="sgWorkOrder"
:value="workOrderNumber" />
<input
type="hidden"
name="sgEmailAddress"
:value="emailAddress" />
<input
type="hidden"
name="paypalInvoiceNumber"
@ -192,12 +320,30 @@
type="hidden"
name="sgCCTimeoutURL"
:value="payInAdvanceCancelUrl" />
<input type="hidden" name="sgTransactionType" value="authorization" />
<input type="hidden" name="amount" :value="totalAmount" />
<input type="hidden" name="ctu" :value="ctu" />
<input type="hidden" name="orderNumber" :value="workOrderNumber" />
<input type="hidden" name="billTo_email" :value="emailAddress" />
<input type="hidden" name="useDecisionManager" value="True" />
<input
type="hidden"
name="sgTransactionType"
value="authorization" />
<input
type="hidden"
name="amount"
:value="totalAmount" />
<input
type="hidden"
name="ctu"
:value="ctu" />
<input
type="hidden"
name="orderNumber"
:value="workOrderNumber" />
<input
type="hidden"
name="billTo_email"
:value="emailAddress" />
<input
type="hidden"
name="useDecisionManager"
value="True" />
<input
type="hidden"
name="correlationId"
@ -206,17 +352,38 @@
type="hidden"
name="sgErrorMessageCard_CVN"
value="Please enter a valid CVV" />
<input type="hidden" name="ship_to_address_line1" :value="address1" />
<input type="hidden" name="ship_to_address_line2" :value="address2" />
<input type="hidden" name="ship_to_address_city" :value="city" />
<input type="hidden" name="ship_to_address_state" :value="state" />
<input type="hidden" name="ship_to_address_country" value="US" />
<input
type="hidden"
name="ship_to_address_line1"
:value="address1" />
<input
type="hidden"
name="ship_to_address_line2"
:value="address2" />
<input
type="hidden"
name="ship_to_address_city"
:value="city" />
<input
type="hidden"
name="ship_to_address_state"
:value="state" />
<input
type="hidden"
name="ship_to_address_country"
value="US" />
<input
type="hidden"
name="ship_to_address_postal_code"
:value="zipCode" />
<input type="hidden" name="ship_to_phone" :value="phoneNumber" />
<input type="hidden" name="calling_application" value="ISSNextGen" />
<input
type="hidden"
name="ship_to_phone"
:value="phoneNumber" />
<input
type="hidden"
name="calling_application"
value="ISSNextGen" />
</form>
</template>
<script>
@ -237,7 +404,7 @@ import externalUrls from '@/router/router-constants/externalUrl-values.js';
import widgetFields from '@/constants/cms-widget-fields.js';
import {
hopPaymentMethods,
paymentMethods,
paymentMethods
} from '@/constants/payment-method-constants.js';
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import queryStrings from '@/constants/query-strings';
@ -252,7 +419,7 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
alert,
alert
},
directives: {
resize: {
@ -263,8 +430,8 @@ export default {
},
unmounted(el) {
el.iFrameResizer.removeListeners();
},
},
}
}
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -278,12 +445,12 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
promise: cmsContentPromise
},
{
resultKey: 'paymentSignature',
promise: paymentSignaturePromise,
},
promise: paymentSignaturePromise
}
];
// use resultMap to populate layout content.
@ -333,7 +500,7 @@ export default {
totalAmount: this.getAmountDue(),
displayAmount: this.getDisplayAmountDue(),
payInAdvanceLineItems: '',
shouldBlockInteraction: false,
shouldBlockInteraction: false
};
},
computed: {
@ -385,7 +552,7 @@ export default {
},
displayPayInAdvanceAfterPayAlert() {
return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
},
}
},
methods: {
arePagePrerequisitesValid() {
@ -396,25 +563,22 @@ export default {
// Service Location
const { serviceLocation } = useMainStore().order;
const mobileReqs = !!(
serviceLocation.address &&
serviceLocation.city &&
serviceLocation.state &&
serviceLocation.zipCode
serviceLocation.address
&& serviceLocation.city
&& serviceLocation.state
&& serviceLocation.zipCode
);
const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!(
providerLocation.streetAddress &&
providerLocation.city &&
providerLocation.state &&
providerLocation.zipCode
providerLocation.streetAddress
&& providerLocation.city
&& providerLocation.state
&& providerLocation.zipCode
);
const isMobile =
serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE ||
serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
@ -426,34 +590,34 @@ export default {
// Schedule
const { schedule } = useMainStore().order;
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
schedule.date
&& schedule.startTime
&& schedule.endTime
&& schedule.jobMaxMinutes
&& schedule.jobMinMinutes
);
// Contact Info
const { contactInfo } = useMainStore().order;
const contactInfoReqs = !!(
contactInfo.firstName &&
contactInfo.lastName &&
contactInfo.servicePhone &&
contactInfo.emailAddress
contactInfo.firstName
&& contactInfo.lastName
&& contactInfo.servicePhone
&& contactInfo.emailAddress
);
const paymentMethodReqs =
useMainStore().order.payment.isPayInAdvance !== null &&
(useMainStore().order.payment.isPayInAdvance ||
!!useMainStore().order.payment.payInAdvanceType);
useMainStore().order.payment.isPayInAdvance !== null
&& (useMainStore().order.payment.isPayInAdvance
|| !!useMainStore().order.payment.payInAdvanceType);
return (
packageReqs &&
serviceLocationReqs &&
isInsuranceSet &&
scheduleReqs &&
contactInfoReqs &&
paymentMethodReqs
packageReqs
&& serviceLocationReqs
&& isInsuranceSet
&& scheduleReqs
&& contactInfoReqs
&& paymentMethodReqs
);
},
getWorkOrderNumber() {
@ -475,8 +639,8 @@ export default {
},
getAddress1() {
return (
useMainStore().order.serviceLocation.address ??
useMainStore().order.serviceLocation.provider.address
useMainStore().order.serviceLocation.address
?? useMainStore().order.serviceLocation.provider.address
.streetAddress
);
},
@ -485,20 +649,20 @@ export default {
},
getCity() {
return (
useMainStore().order.serviceLocation.city ??
useMainStore().order.serviceLocation.provider.address.city
useMainStore().order.serviceLocation.city
?? useMainStore().order.serviceLocation.provider.address.city
);
},
getState() {
return (
useMainStore().order.serviceLocation.state ??
useMainStore().order.serviceLocation.provider.address.state
useMainStore().order.serviceLocation.state
?? useMainStore().order.serviceLocation.provider.address.state
);
},
getZipCode() {
return (
useMainStore().order.serviceLocation.zipCode ??
useMainStore().order.serviceLocation.provider.address.zipCode
useMainStore().order.serviceLocation.zipCode
?? useMainStore().order.serviceLocation.provider.address.zipCode
);
},
getPaymentType() {
@ -518,30 +682,20 @@ export default {
const lineItems =
glassParts === null
? [
this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
this.getPayInAdvanceFormattedLineItem(
'Repair supplies',
0,
1
),
]
this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
this.getPayInAdvanceFormattedLineItem('Repair supplies', 0, 1)
]
: [
this.getPayInAdvanceFormattedLineItem(
'Parts and labor',
0,
1
),
];
this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
];
cartItems.forEach((item) => {
if (item.name !== null && item.category !== 'promos') {
lineItems.push(
this.getPayInAdvanceFormattedLineItem(
item.name,
(item.salesTax + item.subTotal).toFixed(2),
1
)
);
lineItems.push(this.getPayInAdvanceFormattedLineItem(
item.name,
(item.salesTax + item.subTotal).toFixed(2),
1
));
}
});
@ -553,18 +707,10 @@ export default {
getMockPiaLineItems() {
let lineItems = [];
lineItems = [
this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1),
this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)
];
lineItems.push(
this.getPayInAdvanceFormattedLineItem(
'New wiper blades',
75.22,
1
)
);
lineItems.push(
this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1)
);
lineItems.push(this.getPayInAdvanceFormattedLineItem('New wiper blades', 75.22, 1));
lineItems.push(this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1));
this.payInAdvanceLineItems = lineItems.join('||');
},
@ -572,9 +718,7 @@ export default {
return baseMixin.methods.getAmountDue(useMainStore().lineItems);
},
getDisplayAmountDue() {
return baseMixin.methods.getDisplayAmountDue(
useMainStore().lineItems
);
return baseMixin.methods.getDisplayAmountDue(useMainStore().lineItems);
},
fetchSignatureInfo(signatureInfo) {
this.authToken = signatureInfo.token;
@ -592,8 +736,8 @@ export default {
iframe.onload = () => {
if (iframe.contentWindow) {
if (
this.paymentType ===
hopPaymentMethods.CREDIT_CARD
this.paymentType
=== hopPaymentMethods.CREDIT_CARD
) {
iframe.contentWindow.postMessage(
'CreditCardChosen',
@ -624,8 +768,7 @@ export default {
},
setIFrameListener() {
window.addEventListener('message', (event) =>
this.handleIFrameContentWindowMessage(event)
);
this.handleIFrameContentWindowMessage(event));
},
setUIBlock(val) {
this.shouldBlockInteraction = val;
@ -637,8 +780,8 @@ export default {
},
displayPayInAdvanceAlert(payMethod) {
return (
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] ===
payMethod
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
=== payMethod
);
},
paymentFailedPayLater() {
@ -656,11 +799,17 @@ export default {
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
},
}
}
};
</script>
<style lang="scss" scoped>
.container-fluid {
&.fade-on-route-transition {
height: unset;
}
}
.payment p {
margin-bottom: 0.75rem;
}