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 1/5] 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",

From 548b7297453e27fef7a3c6645a7e6779a9c63aad Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 17 May 2023 08:20:57 -0400
Subject: [PATCH 2/5] Change to textblock implementation.

---
 src/layouts/review/review.vue | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index b2fbd5f21..cc6d3c56b 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -7,21 +7,8 @@
                 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>
+            <textBlock :customText="subHeaderTitle" typeStyle="h5" justifyText="text-center" class="dark-header" />
+            <textBlock :customText="subHeaderBody" typeStyle="body" justifyText="left" />
 
             <buttonMain
                 ref="buttonMain"
@@ -43,6 +30,7 @@ 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 textBlock from "@/digital-components/text-block/text-block";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -93,6 +81,7 @@ export default {
         funnelFooter,
         vehicleBanner,
         buttonMain,
+        textBlock,
     },
 };
 </script>

From eeb1ee50664cf24138aa87e5498b2b36afbc0a16 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 17 May 2023 08:44:31 -0400
Subject: [PATCH 3/5] Fiddling with margins

---
 src/digital-components/text-block/text-block.vue |  9 +++++++--
 src/layouts/review/review.vue                    | 13 +++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue
index 9e7df6312..e93e2e6c4 100644
--- a/src/digital-components/text-block/text-block.vue
+++ b/src/digital-components/text-block/text-block.vue
@@ -1,7 +1,7 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
-        :class="[justifyText, typeStyle, fontWeight]"
+        class="text-block w-100"
+        :class="[justifyText, typeStyle, fontWeight, margin]"
         v-html="this.TextBlockCopy"></div>
 </template>
 
@@ -11,6 +11,11 @@ export default {
     props: {
         customText: String, // used to allow the insert of token values into textblock
         justifyText: String, // left, right, center
+        margin: {
+            // bootstrap margin to apply to the block.
+            type: String,
+            default: "mt-2",
+        },
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index cc6d3c56b..7d059ac86 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -7,8 +7,17 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
 
-            <textBlock :customText="subHeaderTitle" typeStyle="h5" justifyText="text-center" class="dark-header" />
-            <textBlock :customText="subHeaderBody" typeStyle="body" justifyText="left" />
+            <textBlock
+                :customText="subHeaderTitle"
+                typeStyle="h5"
+                justifyText="text-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="left"
+                margin="mt-0 mb-2" />
 
             <buttonMain
                 ref="buttonMain"

From 511577cd43d39020705a624c3e4dab75e87f47b8 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 17 May 2023 09:16:07 -0400
Subject: [PATCH 4/5] Very basic test stub.

---
 src/layouts/review/review.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/layouts/review/review.spec.js b/src/layouts/review/review.spec.js
index e69de29bb..674dc71f7 100644
--- a/src/layouts/review/review.spec.js
+++ b/src/layouts/review/review.spec.js
@@ -0,0 +1,3 @@
+describe("Review Page", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

From f239631d050ab0cbfb20517455fd21201983b337 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 17 May 2023 11:23:45 -0400
Subject: [PATCH 5/5] Clarify todo

---
 src/layouts/review/review.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 7d059ac86..9bccb2014 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <!-- v-slot="{ meta }" -->
+        <!-- When customer-details is added: v-slot="{ meta }" -->
         <div class="page-container-grouped-styles">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner