Merge branch 'develop' into feature/CASH-1936

environment-variables.js

@@ -13,6 +13,8 @@ const environmentVariables = {
   ['__VUE_APP_SAFELITE_HOP__']: "https://sv2-safelitehop-dev.safelite.com/fmgCheckoutShared.aspx",
   ['__VUE_APP_SESSION_TIMEOUT_MINUTES__']: 30,
   ['__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__']: "",
+  ['__VUE_APP_ADYEN_ENVIRONMENT__']: "test",
+  ['__VUE_APP_ADYEN_CLIENT_KEY__']: "test_WYGT4F5ZT5BRRL5MPWHK6QLYOIXZXROD",
 };
 
 const keysOnly = Object.keys(environmentVariables);

src/constants/application-config.js

@@ -32,6 +32,8 @@ const applicationConfig = {
     COOKIE_NAME_LENGTH_MAX_LIMIT: 44,
     SESSION_TIMEOUT_MINUTES: process.env.__VUE_APP_SESSION_TIMEOUT_MINUTES__,
     RETURN_USER_PAGE: "/fmg/return-user",
+    ADYEN_CLIENT_KEY: process.env.__VUE_APP_ADYEN_CLIENT_KEY__,
+    ADYEN_ENVIRONMENT: process.env.__VUE_APP_ADYEN_ENVIRONMENT__,
 };
 
 export { applicationConfig };

src/constants/progress-bar-mapper.js

@@ -80,6 +80,10 @@ export const pageProgressMapper = {
         percent: 98.5,
         step: 4,
     },
+    "payment-adyen": {
+        percent: 98.5,
+        step: 4,
+    },
     confirmation: {
         percent: 100,
         step: 4,

src/helpers/adyen-helper.js

@@ -4,6 +4,7 @@ import globalMethods from "@/global-methods";
 import { endpoints } from "@/constants/endpoints";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { paymentMethods } from "@/constants/payment-method-constants";
+import { applicationConfig } from "../constants/application-config";
 
 export async function getNewSession(sessionConfig) {}
 
@@ -42,8 +43,8 @@ export async function createAdyenCheckout({
             id: id,
             sessionData: sessionData,
         },
-        clientKey: "test_WYGT4F5ZT5BRRL5MPWHK6QLYOIXZXROD",
+        clientKey: applicationConfig.ADYEN_CLIENT_KEY,
-        environment: "test",
+        environment: applicationConfig.ADYEN_ENVIRONMENT,
         locale: "en_US",
         countryCode: "US",
         showPayButton: showPayButton,

src/layouts/payment-adyen/payment-adyen.vue

@@ -1,18 +1,34 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="container-fluid">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-            <div class="row justify-content-center">
+        <div class="container">
-                <div class="col-md-6">
+            <div class="row">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                <div class="col-12">
-                </div>
+                    <div id="card-container">
-            </div>
+                        <div id="payment-container">
-            <div class="row justify-content-center">
+                            <funnelSubHeader class="py-5" cmsWidgetName="FunnelSubHeaderWidget" />
-                <div class="col-md-6 col-xl-4">
+                            <div id="adyen-container"></div>
-                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                        </div>
-                    <!--
+
-            ... Page code goes here.
+                        <div id="cart-container">
-          -->
+                            <cart
-                    <div id="adyen-container"></div>
+                                ref="cart"
+                                :damage="damageInfo"
+                                :availableVaps="[]"
+                                :allowItemRemoval="false"
+                                v-model="lineItems"
+                                servicePackageOptionsCmsName="ServicePackageTitle"
+                                recyclingModalCmsWidgetName="RecycleModal"
+                                :isInsurance="isInsurance"
+                                :insuranceDeductible="currentDeductible"
+                                :insuranceCompanyName="insuranceCompanyName"
+                                :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                                :isItac="isItac"
+                                :isNoComp="isNoComp"
+                                :isCollapsible="false" />
+                        </div>
+                    </div>
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -46,6 +62,12 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 
 import "@adyen/adyen-web/styles/adyen.css";
 import { mapAdyenToFmgPaymentMethod } from "../../helpers/adyen-helper";
+import { showFmgLoadingModal } from "../../helpers/loading-modal-helper";
+import cart from "@/fmg-components/cart/cart";
+import { coverageStatus } from "@/constants/insurance";
+import { deepClone } from "@/helpers/object-helper";
+import store from "@/store";
+import { debugLog } from "@/helpers/debug-log-helper.js";
 
 export default {
     name: "payment-adyen",
@@ -90,11 +112,110 @@ export default {
         },
 
         arePagePrerequisitesValid() {
-            // Stub, for checking if application is capable of entering this page
+            // Service Location
-            // And/or, is all information required for this page present?
+            const serviceLocation = store.getters.order.serviceLocation;
-            // To prevent sequence-breaking from the end-user.
+            const mobileReqs = !!(
+                serviceLocation.address &&
+                serviceLocation.city &&
+                serviceLocation.state &&
+                serviceLocation.zipCode
+            );
 
-            return true;
+            const providerLocation = serviceLocation.provider.address;
+            const dropOffInshopReqs = !!(
+                providerLocation.streetAddress &&
+                providerLocation.city &&
+                providerLocation.state &&
+                providerLocation.zipCode
+            );
+
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            const serviceLocationReqs =
+                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
+
+            // Insurance
+            const isInsuranceSet = store.getters.order.payment.isInsurance !== null;
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(
+                schedule.date &&
+                schedule.startTime &&
+                schedule.endTime &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
+            );
+
+            // Customer
+            const customer = store.getters.order.customer;
+            const customerReqs = !!(
+                customer.firstName &&
+                customer.lastName &&
+                customer.phoneNumber &&
+                customer.emailAddress
+            );
+
+            const paymentMethodReqs =
+                store.getters.order.payment.isPia !== null &&
+                (store.getters.order.payment.isPia || !!store.getters.order.payment.piaType);
+
+            const preReqResult =
+                serviceLocationReqs &&
+                isInsuranceSet &&
+                scheduleReqs &&
+                customerReqs &&
+                paymentMethodReqs;
+
+            // prettier-ignore
+            {
+                debugLog("--- payment-adyen.vue pagePrereqs start ---", null, !preReqResult);
+                debugLog("mobileReqs:", mobileReqs, !preReqResult);
+                debugLog("serviceLocation.address:", serviceLocation.address, !preReqResult);
+                debugLog("serviceLocation.city:", serviceLocation.city, !preReqResult);
+                debugLog("serviceLocation.state:", serviceLocation.state, !preReqResult);
+                debugLog("serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
+
+                debugLog("", null, !preReqResult);
+
+                debugLog("dropOffInshopReqs:", dropOffInshopReqs, !preReqResult);
+                debugLog("serviceLocationReqs:", serviceLocationReqs, !preReqResult);
+                debugLog("providerLocation.streetAddress:", providerLocation.streetAddress, !preReqResult);
+                debugLog("providerLocation.city:", providerLocation.city, !preReqResult);
+                debugLog("providerLocation.state:", providerLocation.state, !preReqResult);
+                debugLog("providerLocation.zipCode:", providerLocation.zipCode, !preReqResult);
+                
+                debugLog("", null, !preReqResult);
+                
+                debugLog("isInsuranceSet:", isInsuranceSet, !preReqResult);
+
+                debugLog("", null, !preReqResult);
+
+                debugLog("scheduleReqs:", scheduleReqs, !preReqResult);
+                debugLog("schedule.date:", schedule.date, !preReqResult);
+                debugLog("schedule.startTime:", schedule.startTime, !preReqResult);
+                debugLog("schedule.endTime:", schedule.endTime, !preReqResult);
+                debugLog("schedule.jobMaxMinutes:", schedule.jobMaxMinutes, !preReqResult);
+                debugLog("schedule.jobMinMinutes:", schedule.jobMinMinutes, !preReqResult);
+                
+                debugLog("", null, !preReqResult);
+
+                debugLog("customerReqs:", customerReqs, !preReqResult);
+                debugLog("customer.firstName:", customer.firstName, !preReqResult);
+                debugLog("customer.lastName:", customer.lastName, !preReqResult);
+                debugLog("customer.phoneNumber:", customer.phoneNumber, !preReqResult);
+                debugLog("customer.emailAddress:", customer.emailAddress, !preReqResult);
+                
+                debugLog("", null, !preReqResult);
+
+                debugLog("paymentMethodReqs:", paymentMethodReqs, !preReqResult);
+                debugLog("store.getters.order.payment.isPia:", store.getters.order?.payment?.isPia, !preReqResult);
+                debugLog("store.getters.order.payment.piaType:", store.getters.order?.payment?.piaType, !preReqResult);
+
+                debugLog("--- payment-adyen.vue pagePrereqs end ---", null, !preReqResult);
+            }
+
+            return preReqResult;
         },
 
         async initializeAdyen() {
@@ -149,7 +270,6 @@ export default {
 
             console.log(checkout);
 
-            window.checkout = checkout;
             const dropin = new Dropin(checkout, {
                 paymentMethodsConfiguration: {
                     ideal: {
@@ -160,10 +280,10 @@ export default {
                             value: this.adyenPriceTotal,
                             currency: "USD",
                         },
-                        environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
+                        environment: applicationConfig.ADYEN_ENVIRONMENT,
                         countryCode: "US", // Only needed for test. This will be automatically retrieved when you are in production.
-                        blockPayPalVenmoButton: false,
+                        blockPayPalVenmoButton: true,
-                        //blockPayPalPayLaterButton: true
+                        blockPayPalPayLaterButton: true,
                     },
                     card: {
                         hasHolderName: true,
@@ -190,6 +310,8 @@ export default {
             console.log(`Get session payload =`);
             console.log(paymentSessionRequest);
 
+            showFmgLoadingModal(true);
+
             const response = await globalMethods.callHttpClient({
                 method: endpoints.GetAdyenSessionResult.method,
                 endpoint: endpoints.GetAdyenSessionResult.url,
@@ -308,6 +430,8 @@ export default {
                 };
 
                 this.$router.handleSoftError(errorPayload);
+
+                return;
             }
 
             // clear order
@@ -411,6 +535,40 @@ export default {
         adyenPriceTotal() {
             return this.amountDue * 100;
         },
+
+        // Cart info
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+        isInsurance() {
+            return this.$store.getters.payment.isInsurance;
+        },
+        isNoComp() {
+            return this.$store.getters.policy.isNoComp;
+        },
+        isItac() {
+            return this.$store.getters.policy.isItac;
+        },
+        showInsuranceCoverageAs() {
+            if (!this.isInsurance) {
+                return null;
+            }
+
+            if (this.isNoComp || this.isItac) {
+                return coverageStatus.NOCOMP;
+            } else {
+                return this.$store.getters.payment.insuranceCoverage.coverageStatus;
+            }
+        },
+        currentDeductible() {
+            return this.$store.getters.policy.currentDeductible;
+        },
+        insuranceCompanyName() {
+            return this.$store.getters.policy.insuranceCompanyName;
+        },
+        lineItems() {
+            return deepClone(this.$store.getters.lineItems);
+        },
     },
 
     mounted() {
@@ -422,6 +580,32 @@ export default {
         funnelHeader,
         funnelSubHeader,
         navbar,
+        cart,
     },
 };
 </script>
+<style lang="scss">
+#card-container {
+    display: flex;
+    & > #payment-container {
+        flex-basis: 55%;
+        margin-right: 9%;
+    }
+    & > #cart-container {
+        flex-basis: 36%;
+        margin-top: 2rem;
+    }
+
+    @include media-breakpoint-down(lg) {
+        flex-direction: column;
+        & > #payment-container {
+            flex-basis: auto;
+            margin-right: 0;
+        }
+        & > #cart-container {
+            flex-basis: auto;
+            margin: 0 0.5rem;
+        }
+    }
+}
+</style>