372 lines
14 KiB
Vue
372 lines
14 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
|
<!--
|
|
... Page code goes here.
|
|
-->
|
|
<div id="adyen-container"></div>
|
|
<navbar
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="navbar"
|
|
isForwardActionDisabled="true"
|
|
isSubmitHidden="true"
|
|
@back-clicked="backButtonAction" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<component
|
|
:is="'script'"
|
|
src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/6.21.0/adyen.js"
|
|
@load="initializeAdyen"></component>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/6.21.0/adyen.css" />
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
import Form from "vee-validate";
|
|
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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import globalMethods from "@/global-methods";
|
|
import { endpoints } from "../../constants/endpoints";
|
|
import { AppointmentTypeStrings } from "../../constants/schedule-constants";
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import { getAmountDue } from "@/helpers/pricing-helper.js";
|
|
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
|
|
|
export default {
|
|
name: "payment-adyen",
|
|
mixins: [],
|
|
data() {
|
|
return {
|
|
sessionId: String,
|
|
};
|
|
},
|
|
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.name);
|
|
|
|
// Settle API calls in parallel before handling results.
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
// Hydrate page with results
|
|
next(async (vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
async backButtonAction() {
|
|
// Stub, for navigating back via nav-bar.
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.CLICKED_BACK,
|
|
this.pageName
|
|
);
|
|
},
|
|
|
|
async forwardButtonAction() {
|
|
// Stub, for navigating forward via nav-bar
|
|
},
|
|
|
|
arePagePrerequisitesValid() {
|
|
// Stub, for checking if application is capable of entering this page
|
|
// And/or, is all information required for this page present?
|
|
// To prevent sequence-breaking from the end-user.
|
|
|
|
return true;
|
|
},
|
|
|
|
async initializeAdyen() {
|
|
console.log(`Price = ${this.amountDue}`);
|
|
console.log(`Adyen Price = ${this.adyenPriceTotal}`);
|
|
|
|
const requestBody = this.adyenInitRequestInfo;
|
|
|
|
console.log(`Calling with:`);
|
|
console.log(requestBody);
|
|
|
|
const response = await globalMethods.callHttpClient({
|
|
method: endpoints.InitializeAdyenPayment.method,
|
|
endpoint: endpoints.InitializeAdyenPayment.url,
|
|
payload: requestBody,
|
|
logApiCall: true,
|
|
pageNameToLog: "payment-adyen",
|
|
});
|
|
|
|
const responseJson = response?.data;
|
|
|
|
console.log(`Got data:`);
|
|
console.log(responseJson);
|
|
|
|
const session = {
|
|
id: responseJson.sessionId,
|
|
sessionData: responseJson.sessionData,
|
|
};
|
|
|
|
this.sessionId = responseJson.sessionId;
|
|
|
|
const configuration = {
|
|
session: session,
|
|
clientKey: "test_WYGT4F5ZT5BRRL5MPWHK6QLYOIXZXROD",
|
|
environment: "test",
|
|
amount: {
|
|
value: this.adyenPriceTotal,
|
|
currency: "USD",
|
|
},
|
|
locale: "en_US",
|
|
countryCode: "US",
|
|
showPayButton: true,
|
|
translations: {
|
|
"en_US": {
|
|
"creditCard.securityCode.label": "CVV/CVC",
|
|
},
|
|
},
|
|
|
|
onPaymentCompleted: (result, component) => {
|
|
console.log(`Payment completed from Adyen.`);
|
|
this.handleCompletedPayment(result);
|
|
},
|
|
onPaymentFailed: (result, component) => {
|
|
console.log(`Payment failed from Adyen`);
|
|
this.handleFailedPayment(result);
|
|
},
|
|
onError: (error, component) => {
|
|
console.log(`Error from Adyen`);
|
|
this.handleError(error);
|
|
},
|
|
};
|
|
|
|
console.log(`Configuration =`);
|
|
console.log(configuration);
|
|
|
|
// eslint-disable-next-line
|
|
const checkOut = await AdyenWeb.AdyenCheckout(configuration);
|
|
window.checkout = checkOut;
|
|
// eslint-disable-next-line
|
|
const dropin = new AdyenWeb.Dropin(checkOut, {
|
|
paymentMethodsConfiguration: {
|
|
ideal: {
|
|
showImage: true,
|
|
},
|
|
paypal: {
|
|
amount: {
|
|
value: this.adyenPriceTotal,
|
|
currency: "USD",
|
|
},
|
|
environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
|
|
countryCode: "US", // Only needed for test. This will be automatically retrieved when you are in production.
|
|
blockPayPalVenmoButton: false,
|
|
//blockPayPalPayLaterButton: true
|
|
},
|
|
card: {
|
|
hasHolderName: true,
|
|
holderNameRequired: true,
|
|
billingAddressRequired: true,
|
|
name: "Credit or debit card",
|
|
},
|
|
},
|
|
}).mount("#adyen-container");
|
|
},
|
|
|
|
async handleCompletedPayment(result) {
|
|
console.log(`Result =`);
|
|
console.log(result);
|
|
// Fetch session info
|
|
const paymentSessionRequest = {
|
|
zipCodeCtu: this.locationInfo.zipCodeCtu,
|
|
workOrderNumber: this.workOrderNumberLastSixDigits,
|
|
sourceSystem: this.sourceSystem,
|
|
sessionId: this.sessionId,
|
|
sessionResult: result?.sessionResult,
|
|
};
|
|
|
|
console.log(`Get session payload =`);
|
|
console.log(paymentSessionRequest);
|
|
|
|
const response = await globalMethods.callHttpClient({
|
|
method: endpoints.GetAdyenSessionResult.method,
|
|
endpoint: endpoints.GetAdyenSessionResult.url,
|
|
payload: paymentSessionRequest,
|
|
logApiCall: true,
|
|
pageNameToLog: "payment-adyen",
|
|
});
|
|
|
|
const responseJson = response?.data;
|
|
|
|
console.log(`Session response =`);
|
|
console.log(responseJson);
|
|
|
|
const ccToken = {
|
|
subscriptionId: responseJson?.storedToken,
|
|
expMonth: responseJson?.cardExpiryMonth,
|
|
expYear: responseJson?.cardExpiryYear,
|
|
cardType: responseJson?.cardType,
|
|
billToPostalCode: this.locationInfo.zipCode, // TODO
|
|
billToFirstName: this.$store.getters.order.customer.firstName, // TODO
|
|
billToLastName: this.$store.getters.order.customer.lastName, // TODO
|
|
referenceNumber: responseJson?.workOrderNumber,
|
|
authCode: responseJson?.authCode,
|
|
transactionId: responseJson?.transactionReference, // TODO
|
|
transReferenceNumber: responseJson?.transactionReference,
|
|
lastFour: responseJson?.last4DigitsOfCard,
|
|
};
|
|
|
|
console.log(`CC Token generated =`);
|
|
console.log(ccToken);
|
|
|
|
await baseMixin.methods.dispatchStoreAction(storeActions.SAVE_CCTOKEN, ccToken, false);
|
|
await baseMixin.methods.dispatchStoreAction(
|
|
storeActions.SAVE_NEXTGEN_SETTLED_AMOUNT,
|
|
this.amountDue,
|
|
false
|
|
);
|
|
|
|
await this.saveAndSubmitWorkOrder();
|
|
},
|
|
async handleFailedPayment(result) {
|
|
console.log(`Result =`);
|
|
console.log(result);
|
|
},
|
|
handleError(error) {},
|
|
|
|
async saveAndSubmitWorkOrder() {
|
|
// Work order submission after successful payment.
|
|
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
|
|
try {
|
|
await submitWorkOrder({
|
|
pageNameToLog: "payment-adyen",
|
|
submitAfterSave: true,
|
|
});
|
|
} catch (error) {
|
|
console.log(`error: response from submit work order: ${error.message}`);
|
|
|
|
// navigate to error page
|
|
|
|
//this.$refs.loadingModal.isModalVisible = false;
|
|
}
|
|
|
|
//this.$refs.loadingModal.isModalVisible = false;
|
|
// clear order
|
|
// navigate forward
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
adyenInitRequestInfo() {
|
|
return {
|
|
sourceSystem: this.sourceSystem,
|
|
referralSequenceNumber: this.$store.getters.order.referralSequenceNumber,
|
|
workOrderNumber: this.workOrderNumberLastSixDigits,
|
|
zipCodeCtu: this.locationInfo.zipCodeCtu,
|
|
amount: this.adyenPriceTotal, // TODO
|
|
city: this.locationInfo.city,
|
|
houseNumberOrName: this.splitStreetAddress.number,
|
|
street: this.splitStreetAddress.street,
|
|
zipCode: this.locationInfo.zipCode,
|
|
stateOrProvince: this.locationInfo.state,
|
|
returnUrl: "http://localhost:8080/fmg/confirmation",
|
|
email: this.$store.getters.order.customer.emailAddress,
|
|
IP: "127.0.0.1", // TODO
|
|
firstName: this.$store.getters.order.customer.firstName,
|
|
lastName: this.$store.getters.order.customer.lastName,
|
|
idempotencyKey: crypto.randomUUID(), // `${this.$store.getters.order.referralCorrelationId}-${this.sourceSystem}`,
|
|
};
|
|
},
|
|
|
|
workOrderNumberLastSixDigits() {
|
|
const workOrderNumber = this.$store.getters.order.workOrderNumber ?? "";
|
|
const tokens = workOrderNumber.split("-");
|
|
const lastSegment = tokens[tokens.length - 1] ?? "";
|
|
const numDigits = lastSegment.length;
|
|
const numZeroes = 6 - numDigits;
|
|
|
|
let result = "";
|
|
for (let i = 0; i < numZeroes; i++) {
|
|
result += "0";
|
|
}
|
|
|
|
result += lastSegment;
|
|
|
|
return result;
|
|
},
|
|
|
|
locationInfo() {
|
|
const serviceLocation = this.$store.getters.order.serviceLocation;
|
|
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
|
|
if (isMobile) {
|
|
return {
|
|
address: serviceLocation.address,
|
|
address2: serviceLocation.address2,
|
|
city: serviceLocation.city,
|
|
state: serviceLocation.state,
|
|
zipCode: serviceLocation.zipCode,
|
|
zipCodeCtu: serviceLocation.zipCodeCtu,
|
|
};
|
|
} else {
|
|
const providerInfo = serviceLocation.provider.address;
|
|
return {
|
|
address: providerInfo.streetAddress,
|
|
address2: "",
|
|
city: providerInfo.city,
|
|
state: providerInfo.state,
|
|
zipCode: providerInfo.zipCode,
|
|
zipCodeCtu: providerInfo.zipCodeCtu,
|
|
};
|
|
}
|
|
},
|
|
|
|
splitStreetAddress() {
|
|
const address = this.locationInfo.address;
|
|
const tokens = address.split(" ") ?? [""];
|
|
const number = tokens[0];
|
|
|
|
const street = tokens.slice(1).reduce((prev, next) => `${prev} ${next}`);
|
|
|
|
return {
|
|
number: number ?? "",
|
|
street: street ?? "",
|
|
};
|
|
},
|
|
|
|
sourceSystem() {
|
|
return "FMG-2.0";
|
|
},
|
|
|
|
amountDue() {
|
|
return getAmountDue(this.$store.getters.order.lineItems);
|
|
},
|
|
|
|
adyenPriceTotal() {
|
|
return this.amountDue * 100;
|
|
},
|
|
},
|
|
|
|
components: {
|
|
Form,
|
|
funnelHeader,
|
|
funnelSubHeader,
|
|
navbar,
|
|
},
|
|
};
|
|
</script>
|