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

Merge pull request #665 from Safelite/feature/richardson/SSR-1180

Browse source 
format only
This commit is contained in:
brich1212safe 2024-04-30 13:58:16 -04:00 committed by GitHub
commit 9eea6c18e8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 289 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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