From 503e6ab619d4dd3814e0de2b30f939dcd91210b3 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 4 Aug 2023 07:58:00 -0400
Subject: [PATCH 1/2] CSR-1381 - Created page for payment method

Initial stub for payment method page. Note: Styling around header may still be necessary. I got it to where I thought it was right
---
 .../funnel-sub-header/funnel-sub-header.vue   | 18 ++++-
 .../payment-method/payment-method.spec.js     |  1 +
 src/layouts/payment-method/payment-method.vue | 76 +++++++++++++++++++
 src/router/index.js                           |  6 ++
 src/router/router-constants/fmgPage-values.js |  1 +
 5 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 src/layouts/payment-method/payment-method.spec.js
 create mode 100644 src/layouts/payment-method/payment-method.vue

diff --git a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
index a5cdf5c0b..e81d465a8 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="funnel-sub-header">
         <div
-            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+            class="d-flex align-items-center container-fluid overflow-hidden"
+            :class="[textAlignment]">
             <h5 class="text-center fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
@@ -32,9 +33,13 @@ export default {
     props: {
         hasBackButton: Boolean,
         cmsWidgetName: String,
-        headerColor: {
+        headerVerticalAlignment: {
             type: String,
-            default: "dark-header",
+            default: "center",
+        },
+        leftAlignHeader: {
+            type: Boolean,
+            default: false,
         },
     },
     components: {
@@ -44,6 +49,9 @@ export default {
         text() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
+        textAlignment() {
+            return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
+        },
         subText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
         },
@@ -82,4 +90,8 @@ p.small {
 .sub-text {
     margin: 0;
 }
+
+.justify-content-start {
+    padding-left: 0;
+}
 </style>
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
new file mode 100644
index 000000000..66012402c
--- /dev/null
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
\ No newline at end of file
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
new file mode 100644
index 000000000..3f8357e7f
--- /dev/null
+++ b/src/layouts/payment-method/payment-method.vue
@@ -0,0 +1,76 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="page-container-grouped-styles">
+            <loadingModal ref="loadingModal" />
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
+            <hr class="mt-0" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <funnel-footer
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    :isBackButtonHidden="shouldHideBackButton"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Validation
+import { Form } from "vee-validate";
+
+export default {
+    name: "payment-method",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+        // TODO: Data fetching Promise declarations
+
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        openModalAction(modalName) {
+            this.$refs[modalName].openModal();
+        },
+        arePagePrerequisitesValid() {
+            // TODO
+            return true;
+        },
+        backButtonAction() {},
+        forwardButtonAction() {},
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        funnelSubHeader,
+        Form,
+    },
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/router/index.js b/src/router/index.js
index e3dc5ab2c..6d812f847 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,12 +29,18 @@ import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
 import review from "@/layouts/review/review";
+import paymentMethod from "@/layouts/payment-method/payment-method";
 const routes = [
     {
         path: "/review", // This is a temporary route for testing.
         name: "review",
         component: review,
     },
+    {
+        path: "/payment-method", // This is a temporary route for testing.
+        name: "payment-method",
+        component: paymentMethod,
+    },
     {
         path: "/",
         name: "root",
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index 1ce76d5e8..fc8841c13 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -20,6 +20,7 @@ const fmgPageValues = {
     SCHEDULE: "schedule",
     CUSTOMER_DETAILS: "customer-details",
     REVIEW: "review",
+    PAYMENT_METHOD: "payment-method",
 };
 
 export { fmgPageValues };

From dc3aab18a7405c2e6995274c542066c812727860 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 4 Aug 2023 08:05:06 -0400
Subject: [PATCH 2/2] CSR-1381 - Prettified

---
 src/layouts/payment-method/payment-method.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 66012402c..3d0843e10 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -1 +1 @@
-test.todo("some test to be written in the future");
\ No newline at end of file
+test.todo("some test to be written in the future");