From a212894a26d48d9fcfba15bf819363894e8851b0 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 10 Dec 2025 16:12:58 -0500
Subject: [PATCH] Adyen POC 0.0

---
 src/constants/endpoints.js                    |   8 +
 src/layouts/payment-adyen/payment-adyen.vue   | 319 ++++++++++++++++++
 .../payment-pia-return/payment-pia-return.vue |   3 +
 src/router/constants/routes.js                |   4 +
 src/router/constants/routing-table.js         |  15 +-
 src/router/methods/routes.js                  |   1 +
 6 files changed, 349 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/payment-adyen/payment-adyen.vue

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index c1771b3f5..214431e5c 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -216,6 +216,14 @@ const endpoints = {
         url: "/order/api/v1/order/add-donation-part",
         method: "POST",
     },
+    InitializeAdyenPayment: {
+        url: "/order/api/v1/order/payment/session/initialize-session",
+        method: "POST",
+    },
+    GetAdyenSessionResult: {
+        url: "/order/api/v1/order/payment/session/session-result",
+        method: "POST",
+    },
 };
 
 export { endpoints };
diff --git a/src/layouts/payment-adyen/payment-adyen.vue b/src/layouts/payment-adyen/payment-adyen.vue
new file mode 100644
index 000000000..d105382d6
--- /dev/null
+++ b/src/layouts/payment-adyen/payment-adyen.vue
@@ -0,0 +1,319 @@
+<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";
+
+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.
+        },
+
+        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() {
+            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: {
+                    card: {
+                        showBrandIcon: true, // when false not showing the brand logo
+                        hasHolderName: true, // show holder name
+                        holderNameRequired: true, // make holder name mandatory
+                        billingAddressRequired: true,
+                        billingAddressAllowedCountries: ["US"],
+                        // configure placeholders
+                        placeholders: {
+                            cardNumber: "1234 5678 9012 3456",
+                            expiryDate: "MM/YY",
+                            securityCodeThreeDigits: "123",
+                            securityCodeFourDigits: "1234",
+                            holderName: "J. Smith",
+                        },
+                    },
+                },
+            }).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);
+        },
+        handleFailedPayment(result) {},
+        handleError(error) {},
+    },
+
+    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: "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: `${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";
+        },
+
+        adyenPriceTotal() {
+            return 10000;
+        },
+    },
+
+    components: {
+        Form,
+        funnelHeader,
+        funnelSubHeader,
+        navbar,
+    },
+};
+</script>
diff --git a/src/layouts/payment-pia-return/payment-pia-return.vue b/src/layouts/payment-pia-return/payment-pia-return.vue
index b1ec2b120..c905f3d78 100644
--- a/src/layouts/payment-pia-return/payment-pia-return.vue
+++ b/src/layouts/payment-pia-return/payment-pia-return.vue
@@ -156,6 +156,9 @@ export default {
                     lastFour: lastFour,
                 };
 
+                console.log(`CCToken =`);
+                console.log(ccToken);
+
                 baseMixin.methods.dispatchStoreAction(storeActions.SAVE_CCTOKEN, ccToken, false);
                 baseMixin.methods.dispatchStoreAction(
                     storeActions.SAVE_NEXTGEN_SETTLED_AMOUNT,
diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 98d6c503a..4b51ff857 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -89,6 +89,10 @@ export const routeData = {
         name: "payment-pia-return",
         path: "/payment-pia-return",
     },
+    PAYMENT_ADYEN: {
+        name: "payment-adyen",
+        path: "/payment-adyen",
+    },
     CONFIRMATION: {
         name: "confirmation",
         path: "/confirmation",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index 02a0d9384..cd41e8fcf 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -535,7 +535,7 @@ const routingTable = function () {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_PAY_NOW,
-                    destinationPageData: routeData.PAYMENT,
+                    destinationPageData: routeData.PAYMENT_ADYEN,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_INSURANCE,
@@ -563,6 +563,19 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.PAYMENT_ADYEN.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.PAYMENT_METHOD,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.CONFIRMATION,
+                },
+            ],
+        },
         {
             pageName: routeData.PAYMENT_PIA_RETURN.name,
             maps: [
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index 97af04068..cf0392ccf 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -36,6 +36,7 @@ export const routes = [
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
     createRoute(routeData.PAYMENT, paymentBeforeEnter),
     createRoute(routeData.PAYMENT_PIA_RETURN),
+    createRoute(routeData.PAYMENT_ADYEN),
     createRoute(routeData.CONFIRMATION),
     createRoute(routeData.RETURN_USER),
     createRoute(routeData.MOBILE_DETAILS),