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

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>

src/layouts/payment-method/payment-method.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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>

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",

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 };