From f2f791baef3689acefd0e7e25d14c8c9c255236e Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 9 Aug 2023 14:08:29 -0400
Subject: [PATCH] Add cart to payment-method.

---
 src/fmg-components/cart/cart.vue              | 131 ++++++++++++++++++
 .../funnel-header/funnel-header.vue           |   5 +-
 .../funnel-header/menu-modal/menu-modal.vue   |   6 +-
 src/layouts/payment-method/payment-method.vue |  55 ++++++--
 4 files changed, 178 insertions(+), 19 deletions(-)
 create mode 100644 src/fmg-components/cart/cart.vue

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
new file mode 100644
index 000000000..4c456a32b
--- /dev/null
+++ b/src/fmg-components/cart/cart.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="cart">
+        <h5 class="pb-5 mb-4">Submit payment information</h5>
+        <div class="container-fluid pe-0">
+            <div
+                class="row vin-toggle flex align-items-center"
+                :class="[isActive ? 'active' : '']"
+                @click="toggleClass()">
+                <div class="col d-flex justify-content-between">
+                    <span class="label">Amount Due</span
+                    ><span class="label amount-due">$321.00</span>
+                </div>
+            </div>
+            <div class="price-table">
+                <div class="service-type"><span>Premium service</span><span>$300</span></div>
+                <div class="small vaps">
+                    <span>Wiper blades</span><span><a href="#">Remove</a></span>
+                </div>
+                <div class="small vaps">
+                    <span>Rain defense</span><span><a href="#">Remove</a></span>
+                </div>
+                <div><span>Recycling</span><span>$10</span></div>
+                <div class="service-type"><span>Mobile service</span><span>$10</span></div>
+                <div class="align-items-center">
+                    <span>Rain Defense</span><a href="#">Remove</a><span>$10</span>
+                </div>
+                <div class="sub-total"><span>Subtotal</span><span>$320</span></div>
+                <div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
+                <div class="amount-due"><span>Amount due</span><span>$321</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import cart from "@/fmg-components/cart/cart";
+
+export default {
+    name: "modal",
+    data() {
+        return {
+            isActive: false,
+        };
+    },
+    methods: {
+        toggleClass: function (event) {
+            this.isActive = !this.isActive;
+        },
+    },
+    computed: {
+        lineItems() {
+            return this.$store.getters.lineItems;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.cart {
+    h5 {
+        border-bottom: 1px solid $gray-500;
+        color: $black;
+    }
+    .border-bottom {
+        color: $gray;
+    }
+    .label {
+        font-weight: 500;
+    }
+    .amount-due {
+        color: $green;
+    }
+    .price-table {
+        max-height: 0;
+        transition: all 350ms ease-in;
+        overflow: hidden;
+        div {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.5rem 1.5rem;
+            &:nth-last-child(-n + 3) {
+                background-color: #e3f2ea;
+            }
+            &:last-child {
+                background-color: #0c7e47;
+                color: #ffffff;
+            }
+        }
+        .vaps {
+            padding-left: 2.5rem;
+        }
+        .package-type,
+        .service-type,
+        .vaps {
+            background-color: #f5f5f5;
+        }
+        .sub-total,
+        .sales-tax,
+        .amount-due {
+            font-weight: 500;
+        }
+        .sub-total {
+            border-top: 1px solid #0c7e47;
+        }
+    }
+    .vin-toggle {
+        &:after {
+            content: "";
+            transition: all 0.5s ease;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right center;
+            width: 16px;
+            height: 9px;
+            display: inline-flex;
+            position: relative;
+            right: 0.75rem;
+            margin: 1rem 0 1rem 1rem;
+            cursor: pointer;
+        }
+        &.active:after {
+            transform: rotate(180deg);
+        }
+        &.active + .price-table {
+            max-height: 400px;
+            transition: all 350ms ease-in;
+            overflow: hidden;
+        }
+    }
+}
+</style>
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index acfacd709..aa1d5722a 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -63,11 +63,12 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
-    padding: 0.97rem 0;
+    padding: 1rem 0;
 }
 
 .logo-image {
-    max-width: 78px;
+    width: 100%;
+    max-width: 114px;
 }
 .alert {
     left: 0;
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index ffd3352ee..d340d040f 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -118,7 +118,7 @@ export default {
 <style lang="scss" scoped>
 .menu-modal-container {
     position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
+    padding: 1.5rem 1rem 1.5rem 1.5rem;
     right: 0;
     button {
         border: none;
@@ -186,9 +186,9 @@ export default {
         }
         .menu-modal-container {
             position: absolute;
-            padding: 1.47rem 1rem 1.47rem 1.47rem;
+            padding: 1.5rem 1rem 1.5rem 1.5rem;
             right: 0;
-            top: -4.5rem;
+            top: -4.25rem;
             button {
                 border: none;
                 &.menu-button {
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index a7a8ed89a..a3230cd3c 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -5,22 +5,16 @@
 
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
 
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-
-            <textBlock
-                :customText="subHeaderTitle"
+            <funnelSubHeader
                 typeStyle="h5"
-                justifyText="justify-content-center"
-                margin="mt-1"
-                class="dark-header" />
-
-            <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                class="mb-5 mt-4 dark-header"
+                leftAlignHeader
+                cmsWidgetName="FunnelSubHeaderWidget" />
 
             <div class="fade-on-route-transition sub-container make-tall">
 
-                <div class="px-4">
+                <div>
+                    <cart/>
                     <vehicleReview
                         cmsWidgetName="VehicleReviewWidget"
                         :vehicle="vehicleInfo"
@@ -68,9 +62,15 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+
+import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
+import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
+import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
+import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
+import cart from "@/fmg-components/cart/cart";
+
 import baseMixin from "@/mixins/base-mixin.js";
 import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -237,13 +237,40 @@ export default {
             }
         },
     },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+        lineItems() {
+            return this.$store.getters.lineItems;
+        },
+        serviceLocationInfo() {
+            return this.$store.getters.order.serviceLocation;
+        },
+    },
     components: {
         funnelHeader,
         funnelFooter,
-        vehicleBanner,
         funnelSubHeader,
         Form,
         loadingModal,
+        servicePackageReview,
+        serviceLocationReview,
+        vehicleReview,
+        damageReview,
+        cart,
     },
 };
 </script>