Visual changes

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/layouts/payment-adyen/payment-adyen.vue

@@ -1,18 +1,34 @@
 <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>
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <div id="card-container">
+                        <div id="payment-container">
+                            <funnelSubHeader class="py-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                            <div id="adyen-container"></div>
+                        </div>
+
+                        <div id="cart-container">
+                            <cart
+                                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,10 @@ 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";
 
 export default {
     name: "payment-adyen",
@@ -162,8 +182,8 @@ export default {
                         },
                         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
+                        blockPayPalVenmoButton: true,
+                        blockPayPalPayLaterButton: true,
                     },
                     card: {
                         hasHolderName: true,
@@ -190,6 +210,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,
@@ -411,6 +433,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 +478,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>