From 8e63abd08d16d47e5eec7687040d2d4af8654bd4 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 16 May 2023 17:39:30 -0400
Subject: [PATCH] Add initial iteration for review page

---
 src/layouts/review/review.spec.js |   0
 src/layouts/review/review.vue     | 104 ++++++++++++++++++++++++++++++
 src/router/index.js               |   6 ++
 3 files changed, 110 insertions(+)
 create mode 100644 src/layouts/review/review.spec.js
 create mode 100644 src/layouts/review/review.vue

diff --git a/src/layouts/review/review.spec.js b/src/layouts/review/review.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
new file mode 100644
index 000000000..b2fbd5f21
--- /dev/null
+++ b/src/layouts/review/review.vue
@@ -0,0 +1,104 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <!-- v-slot="{ meta }" -->
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="false" />
+
+            <!-- Based off of FunnelSubHeader component, but fed from -->
+            <!-- a content-group widget to handle bolded text. -->
+            <div class="funnel-sub-header">
+                <div
+                    class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+                    <h5 class="text-center fw-normal mb-2 dark-header">
+                        <span v-html="subHeaderTitle"></span>
+                    </h5>
+                </div>
+                <div class="d-flex align-items-center justify-content-center overflow-hidden">
+                    <p class="text-right small fw-normal sub-text my-2">
+                        <span v-html="subHeaderBody"></span>
+                    </p>
+                </div>
+            </div>
+
+            <buttonMain
+                ref="buttonMain"
+                isPrimary
+                :buttonText="forwardButtonText"
+                loaderColor="white"
+                @click-event="forwardButtonAction" />
+
+            <funnelFooter
+                cmsWidgetName="FunnelFooterWidget"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+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 buttonMain from "@/ux-components/button-main/button-main";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "review",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {},
+        forwardButtonAction() {},
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        buttonMain,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 3abfa058d..86c402187 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,6 +31,7 @@ import { applicationConfig } from "../constants/application-config";
 // Components
 import datePicker from "@/digital-components/date-picker/date-picker.vue";
 import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
+import review from "@/layouts/review/review";
 
 const routes = [
     {
@@ -43,6 +44,11 @@ const routes = [
         name: "date-picker",
         component: datePicker,
     },
+    {
+        path: "/review", // This is a temporary route for testing.
+        name: "review",
+        component: review,
+    },
     {
         path: "/",
         name: "root",