V3 submit, provisional booking, credit card payments
This commit is contained in:
CarlNation 2023-10-17 22:51:44 -04:00
parent 6d948cf6c0
commit b8d5ecd08e
9 changed files with 193 additions and 91 deletions

View file

@ -11,12 +11,12 @@ const applicationConfig = {
SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
CASH_PARENT_ACCOUNT_NUMBER: 167132,
MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
PAYPAL_SUCCESS_URL:
PIA_RESPONSE_URL:
location.protocol +
"//" +
location.host +
"/fmg/?fmgPage=payment-pia-return&src=concept-funnel",
PAYPAL_CANCEL_URL:
PIA_CANCEL_URL:
location.protocol +
"//" +
location.host +

View file

@ -1,3 +1,4 @@
// Note: querystring-helper will change all keys to lowercase so make sure they are here as well
const queryStrings = {
FMG_PAGE: "fmgPage",
START_TYPE: "start_type",
@ -6,6 +7,18 @@ const queryStrings = {
ERROR: "error",
TOKEN: "token",
PAYERID: "payerid",
SUBSCRIPTIONID: "subscriptionid",
REFERRAL_SEQ_NUM: "referralseqnum",
CARD_EXPIRATION_MONTH: "card_expirationmonth",
CARD_EXPIRATION_YEAR: "card_expirationyear",
CARD_TYPE: "sgcardtype",
BILL_TO_POSTAL_CODE: "billto_postalcode",
BILL_TO_FIRST_NAME: "billto_firstname",
BILL_TO_LAST_NAME: "billto_lastname",
REFERENCE_NUMBER: "req_reference_number",
AUTH_CODE: "auth_code",
TRANSACTION_ID: "transaction_id",
TRANS_REFERENCE_NUMBER: "auth_trans_ref_no",
};
export { queryStrings };

View file

@ -92,6 +92,7 @@ const storeActions = {
SAVE_WORK_ORDER_FLAG: "saveWorkOrderFlag",
SAVE_PIA_ERROR_CODE: "savePiaErrorCode",
SAVE_PIA_WORK_ORDER: "savePiaWorkOrder",
SAVE_CCTOKEN: "saveCCToken",
};
export { storeActions };

View file

@ -1,7 +1,9 @@
const storeMutations = {
// PAYMENT MUTATIONS
UPDATE_WORK_ORDER_FLAG: "updateWorkOrderFlag",
UPDATE_PIA_ERROR_CODE: "updatePiaErrorCode",
UPDATE_PIA_WORK_ORDER: "updatePiaWorkOrder",
UPDATE_CCTOKEN: "updateCCToken",
// VEHICLE MUTATIONS
UPDATE_YEAR: "updateYear",

View file

@ -16,7 +16,8 @@
@click-event="buttonClick"
data-bs-target="#footerModal"
data-test-id="nav-bar-main-button"
data-bs-dismiss="modal" />
data-bs-dismiss="modal"
v-if="!isSubmitHidden" />
</div>
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
<textLink
@ -44,6 +45,7 @@ export default {
isBackButtonHidden: { type: Boolean, default: false },
cmsWidgetName: String,
buttonSize: { type: Boolean, default: false },
isSubmitHidden: { type: Boolean, default: false },
},
components: {
textLink,

View file

@ -33,10 +33,10 @@
<div>
<alert
ref="paypalErrorAlert"
ref="piaErrorAlert"
class="my-4"
v-if="displayPaypalAlert"
cmsWidgetName="PaypalErrorAlertWidget"
v-if="displayPiaAlert"
cmsWidgetName="PIAErrorAlertWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
</div>
@ -175,8 +175,8 @@ export default {
lineItems: [],
availableLineItems: [],
displayPaypalAlert: this.getPaypalAlert(),
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
displayPiaAlert: this.getPiaAlert(),
};
},
methods: {
@ -235,7 +235,7 @@ export default {
openModal(modalName) {
this.$refs[modalName].openModal();
},
getPaypalAlert() {
getPiaAlert() {
return store.getters.order.payment.piaErrorCode ? true : false;
},
getPaymentMethodFromStore() {
@ -338,7 +338,6 @@ export default {
},
computed: {
damageInfo() {
// console.log("this.$store.getters.damage ", this.$store.getters.damage)
return this.$store.getters.damage;
},
noPiaDisclaimer() {

View file

@ -9,6 +9,7 @@ import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js"
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
@ -17,11 +18,16 @@ export default {
name: "payment-pia-return",
async mounted() {
this.$refs.loadingModal.showModal();
// from paypal
const piaError = getQuerystringParameter(queryStrings.ERROR);
const token = getQuerystringParameter(queryStrings.TOKEN);
const payerId = getQuerystringParameter(queryStrings.PAYERID);
// from credit card
const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
if (piaError) {
console.log("Error during payment: " + piaError);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PIA_ERROR_CODE,
piaError,
@ -30,32 +36,24 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
} else {
if (token && payerId) {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PIA_ERROR_CODE,
null,
false
);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_WORK_ORDER_FLAG,
true,
false
);
// Final work order submit after returning from PIA.
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
this.$refs.loadingModal.isModalVisible = false;
this.$router.navigateWithoutSaving(
this.navigationScenarios.PIA_SUCCESS,
this.$route
);
await this.processPaypalResponse();
} else {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PIA_ERROR_CODE,
piaError,
false
);
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
if (subscriptionID) {
await this.processCreditCardResponse(subscriptionID);
} else {
console.log(
"Error during payment: " + token + " : " + payerId + " : " + subscriptionID
);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PIA_ERROR_CODE,
piaError,
false
);
this.$router.navigateWithoutSaving(
this.navigationScenarios.PIA_ERROR,
this.$route
);
}
}
}
},
@ -63,6 +61,68 @@ export default {
arePagePrerequisitesValid() {
return true;
},
async processPaypalResponse() {
baseMixin.methods.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
await this.saveAndSubmitWorkOrder();
},
async processCreditCardResponse(subscriptionID) {
baseMixin.methods.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);
if (referralSeqNum != store.getters.order.referralSequenceNumber) {
console.log(
"error: unknown ref:" +
referralSeqNum +
" " +
store.getters.order.referralSequenceNumber
);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PIA_ERROR_CODE,
"unknown error",
false
);
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
} else {
const expMonth = getQuerystringParameter(queryStrings.CARD_EXPIRATION_MONTH);
const expYear = getQuerystringParameter(queryStrings.CARD_EXPIRATION_YEAR);
const cardType = getQuerystringParameter(queryStrings.CARD_TYPE);
const billToPostalCode = getQuerystringParameter(queryStrings.BILL_TO_POSTAL_CODE);
const billToFirstName = getQuerystringParameter(queryStrings.BILL_TO_FIRST_NAME);
const billToLastName = getQuerystringParameter(queryStrings.BILL_TO_LAST_NAME);
const referenceNumber = getQuerystringParameter(queryStrings.REFERENCE_NUMBER);
const authCode = getQuerystringParameter(queryStrings.AUTH_CODE);
const transactionId = getQuerystringParameter(queryStrings.TRANSACTION_ID);
const transReferenceNumber = getQuerystringParameter(
queryStrings.TRANS_REFERENCE_NUMBER
);
var ccToken = {
subscriptionId: subscriptionID,
expMonth: expMonth,
expYear: expYear,
cardType: cardType,
billToPostalCode: billToPostalCode,
billToFirstName: billToFirstName,
billToLastName: billToLastName,
referenceNumber: referenceNumber,
authCode: authCode,
transactionId: transactionId,
transReferenceNumber: transReferenceNumber,
};
baseMixin.methods.dispatchStoreAction(storeActions.SAVE_CCTOKEN, ccToken, false);
await this.saveAndSubmitWorkOrder();
}
},
async saveAndSubmitWorkOrder() {
// Final work order submit after returning from PIA.
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
this.$refs.loadingModal.isModalVisible = false;
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
},
forwardButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
},

View file

@ -1,31 +1,35 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal notFullScreen ref="loadingModal" />
<div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" v-if="!isPaypal" />
<funnelSubHeader
class="mb-5"
cmsWidgetName="FunnelSubHeaderWidget"
leftAlignHeader
v-if="!isPaypal" />
<hr class="mt-0" />
<div id="card-container">
<iframe
ref="paymentFrame"
class="hop-iframe payment-iframe"
name="card-frame"
id="card-frame"
seamless
scrolling="no">
</iframe>
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="fade-on-route-transition sub-container make-tall">
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div id="card-container">
<iframe
ref="paymentFrame"
class="hop-iframe payment-iframe"
name="card-frame"
id="card-frame"
seamless
scrolling="no">
</iframe>
</div>
<div class="fade-on-route-transition sub-container make-tall">
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
isSubmitHidden="true"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</Form>
@ -54,18 +58,9 @@
<input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
<input type="hidden" name="styleSheetCode2" :value="dynamicCSSUrl" />
<input
type="hidden"
name="sgReceiptResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Success.aspx" />
<input
type="hidden"
name="sgDeclineResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Cancel.aspx" />
<input
type="hidden"
name="sgErrorResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Error.aspx" />
<input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
<input type="hidden" name="sgDeclineResponseURL" :value="piaResponseUrl" />
<input type="hidden" name="sgErrorResponseURL" :value="piaResponseUrl" />
<input type="hidden" name="sgheaderline1" :value="sgHeaderline1" />
<input type="hidden" name="sgHeader1subtitle" value="" />
@ -133,17 +128,11 @@
<input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
<input type="hidden" name="sgEmailAddress" :value="emailAddress" />
<input type="hidden" name="paypalInvoiceNumber" :value="invoiceNumber" />
<input type="hidden" name="payPalSuccessUrl" :value="payPalSuccessUrl" />
<input type="hidden" name="paypalCancelUrl" :value="payPalCancelUrl" />
<input type="hidden" name="paypalSuccessUrl" :value="piaResponseUrl" />
<input type="hidden" name="paypalCancelUrl" :value="piaCancelUrl" />
<input
type="hidden"
name="sgCCDeclineURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccDecline" />
<input
type="hidden"
name="sgCCTimeoutURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccTimeout" />
<input type="hidden" name="sgCCDeclineURL" :value="piaCancelUrl" />
<input type="hidden" name="sgCCTimeoutURL" :value="piaCancelUrl" />
<input type="hidden" name="sgTransactionType" value="authorization" />
<input type="hidden" name="amount" :value="amountDue" />
@ -171,7 +160,6 @@
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { storeActions } from "@/constants/store-actions";
@ -190,8 +178,8 @@ export default {
data() {
return {
checkoutUrl: externalUrls.SAFELITE_HOP,
payPalSuccessUrl: applicationConfig.PAYPAL_SUCCESS_URL,
payPalCancelUrl: applicationConfig.PAYPAL_CANCEL_URL,
piaResponseUrl: applicationConfig.PIA_RESPONSE_URL,
piaCancelUrl: applicationConfig.PIA_CANCEL_URL,
paymentType: this.getPaymentType(),
authToken: "",
authSignature: "",
@ -257,7 +245,7 @@ export default {
// no work order, set pia error and return
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
this.backButtonAction();
},
getInvoiceNumber() {
if (store.getters.order.workOrderNumber) {
@ -266,7 +254,7 @@ export default {
// no work order, set pia error and return
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
this.backButtonAction();
},
getAddress1() {
return store.getters.order.serviceLocation.address
@ -367,7 +355,6 @@ export default {
components: {
funnelHeader,
navbar,
funnelSubHeader,
Form,
loadingModal,
},
@ -375,13 +362,9 @@ export default {
</script>
<style lang="scss">
.payment-iframe {
height: 100%;
}
.hop-iframe {
position: relative;
min-height: 1300px;
min-height: 1350px;
width: 100%;
border: 0 none;
}

View file

@ -99,6 +99,19 @@ const getDefaultState = () => {
piaType: null,
piaErrorCode: null,
inactivePromos: null,
ccToken: {
subscriptionId: null,
expMonth: null,
expYear: null,
cardType: null,
billToPostalCode: null,
billToFirstName: null,
billToLastName: null,
referenceNumber: null,
authCode: null,
transactionId: null,
transReferenceNumber: null,
},
},
schedule: {
date: null,
@ -244,6 +257,19 @@ export const mutations = {
updateWorkOrderNumber(state, workOrderNumber) {
state.order.workOrderNumber = workOrderNumber;
},
updateCCToken(state, ccToken) {
state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
state.order.payment.ccToken.expMonth = ccToken.expMonth;
state.order.payment.ccToken.expYear = ccToken.expYear;
state.order.payment.ccToken.cardType = ccToken.cardType;
state.order.payment.ccToken.billToPostalCode = ccToken.billToPostalCode;
state.order.payment.ccToken.billToFirstName = ccToken.billToFirstName;
state.order.payment.ccToken.billToLastName = ccToken.billToLastName;
state.order.payment.ccToken.referenceNumber = ccToken.referenceNumber;
state.order.payment.ccToken.authCode = ccToken.authCode;
state.order.payment.ccToken.transactionId = ccToken.transactionId;
state.order.payment.ccToken.transReferenceNumber = ccToken.transReferenceNumber;
},
updateInsuranceVerifiedStatus(state, isVerified) {
state.order.payment.insuranceCoverage.isVerified = isVerified;
},
@ -1618,6 +1644,19 @@ export const actions = {
isInsurance: order.payment.isInsurance,
parentAccountNumber: order.payment.parentAccountNumber,
inactivePromos: order.payment.inactivePromos,
ccToken: {
subscriptionId: order.payment.ccToken.subscriptionId,
expMonth: order.payment.ccToken.expMonth,
expYear: order.payment.ccToken.expYear,
cardType: order.payment.ccToken.cardType,
billToPostalCode: order.payment.ccToken.billToPostalCode,
billToFirstName: order.payment.ccToken.billToFirstName,
billToLastName: order.payment.ccToken.billToLastName,
referenceNumber: order.payment.ccToken.referenceNumber,
authCode: order.payment.ccToken.authCode,
transactionId: order.payment.ccToken.transactionId,
transReferenceNumber: order.payment.ccToken.transReferenceNumber,
},
},
serviceLocation: {
streetAddress: order.serviceLocation.address,
@ -1735,6 +1774,9 @@ export const actions = {
savePiaWorkOrder(context, piaWorkOrder) {
context.commit(storeMutations.UPDATE_PIA_WORK_ORDER, piaWorkOrder);
},
saveCCToken(context, ccToken) {
context.commit(storeMutations.UPDATE_CCTOKEN, ccToken);
},
// Business domain actions