From 0311588e3e4ff8ea5b4cc9ee7fe18e95ae56a842 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 23 May 2023 10:02:03 -0400
Subject: [PATCH 1/2] Re-add CSR-1367.

---
 .../text-block/text-block.vue                 |   9 +-
 src/layouts/review/review.spec.js             |   3 +
 src/layouts/review/review.vue                 | 102 ++++++++++++++++++
 src/router/index.js                           |   6 ++
 4 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/review/review.spec.js
 create mode 100644 src/layouts/review/review.vue

diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue
index 4f9c41599..3a608f3a0 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.spec.js b/src/layouts/review/review.spec.js
new file mode 100644
index 000000000..674dc71f7
--- /dev/null
+++ b/src/layouts/review/review.spec.js
@@ -0,0 +1,3 @@
+describe("Review Page", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
new file mode 100644
index 000000000..9bccb2014
--- /dev/null
+++ b/src/layouts/review/review.vue
@@ -0,0 +1,102 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <!-- When customer-details is added: v-slot="{ meta }" -->
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="false" />
+
+            <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"
+                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 textBlock from "@/digital-components/text-block/text-block";
+
+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,
+        textBlock,
+    },
+};
+</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 d92f87475c2465c1149868c2f1f9377dd52ac5b2 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 23 May 2023 11:55:44 -0400
Subject: [PATCH 2/2] Correct justify class tags.

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

diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 9bccb2014..3ff91a9af 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -10,13 +10,13 @@
             <textBlock
                 :customText="subHeaderTitle"
                 typeStyle="h5"
-                justifyText="text-center"
+                justifyText="justify-content-center"
                 margin="mt-1"
                 class="dark-header" />
             <textBlock
                 :customText="subHeaderBody"
                 typeStyle="body"
-                justifyText="left"
+                justifyText="justify-content-left"
                 margin="mt-0 mb-2" />
 
             <buttonMain