confirmation email

confirmation email placeholder

src/constants/application-config.js

@@ -10,6 +10,7 @@ const applicationConfig = {
     PAGE_QUERYSTRING: "fmgPage",
     SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
     CASH_PARENT_ACCOUNT_NUMBER: 167132,
+    MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
 };
 
 export { applicationConfig };

src/layouts/confirmation/confirmation.spec.js

@@ -6,6 +6,7 @@ import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
+import router from "@/router";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -54,6 +55,11 @@ beforeEach(() => {
                 isRepair: false,
             },
             referralNumber: "1234567",
+            vehicle: {
+                year: "2004",
+                make: "Ford",
+                model: "F Series F250",
+            },
         },
         payment: {
             isInsurance: true,
@@ -71,9 +77,19 @@ afterEach(() => {
 });
 
 describe("confirmation.vue", () => {
+    const realLocation = window.location;
+
+    beforeAll(() => {
+        delete window.location;
+        window.location = { ...realLocation, assign: jest.fn() };
+    });
+
+    afterAll(() => {
+        window.location = realLocation;
+    });
     test("arePagePrerequisitesValid should be true ", async () => {
         //Arrange
-        const { wrapper } = setupMocks();
+        const { wrapper } = setupMocks({});
 
         //Act
         let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
@@ -82,20 +98,33 @@ describe("confirmation.vue", () => {
         //Assert
         expect(arePagePrerequisitesValid).toBe(true);
     });
+    test("'Back to safelite.com' button should take user back to safelite.com", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({});
+
+        //Act
+        await wrapper.vm.forwardButtonAction();
+
+        //Assert
+        expect(window.location.assign).toHaveBeenCalled();
+    });
 });
 
-function setupMocks() {
-    const wrapper = shallowMount(
-        confirmation,
-        getMountOptions({
-            router: {
-                navigate: jest.fn(),
-                navigate: jest.fn(),
-                navigateWithSaving: jest.fn(),
-                navigateWithoutSaving: jest.fn(),
-            },
-        })
-    );
+const wordingText = "wording Text";
+function setupMocks({ customMountOptions }) {
+    const mountOptions = getMountOptions({
+        ...customMountOptions,
+    });
 
+    mountOptions.mixins = [
+        {
+            methods: {
+                getCmsContent: jest.fn().mockImplementation(() => {
+                    return wordingText;
+                }),
+            },
+        },
+    ];
+    const wrapper = shallowMount(confirmation, mountOptions);
     return { wrapper };
 }

src/layouts/confirmation/confirmation.vue

@@ -36,7 +36,7 @@
                             </div>
                             <div v-html="this.getAppointmentWordingText()"></div>
                         </div>
-
+                        <div v-html="this.getConfirmationEmailText()"></div>
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
@@ -58,6 +58,7 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { applicationConfig } from "@/constants/application-config.js";
 import store from "@/store";
 
 import {
@@ -94,6 +95,9 @@ export default {
         ScheduleConfirmationImage() {
             return this.getCmsContent("ScheduleConfirmationWidget", "Image");
         },
+        ConfirmationEmailText() {
+            return this.getCmsContent("ConfirmationEmailWidget", "BodyText");
+        },
         ScheduleDate() {
             return store.getters.order.schedule.date;
         },
@@ -151,6 +155,9 @@ export default {
         Model() {
             return store.getters.order.vehicle.model;
         },
+        Email() {
+            return store.getters.order.customer.emailAddress;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -182,7 +189,9 @@ export default {
 
             return serviceLocationReqs && scheduleReqs;
         },
-        forwardButtonAction() {},
+        forwardButtonAction() {
+            window.location.assign("//www.safelite.com/");
+        },
         getScheduleDate() {
             const scheduleDate = new Date(this.ScheduleDate);
             return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
@@ -218,6 +227,12 @@ export default {
                 return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
             }
         },
+        getConfirmationEmailText() {
+            return this.ConfirmationEmailText.replace("#EMAIL", this.Email)
+                .replace("#MY_ACCOUNT_URL", applicationConfig.MY_ACCOUNT)
+                .replace(/&lt;/g, "<")
+                .replace(/&gt;/g, ">");
+        },
     },
     components: {
         funnelHeader,
@@ -228,14 +243,13 @@ export default {
 </script>
 
 <style lang="scss">
-
-.main{
-    padding:1rem 0;
+.main {
+    padding: 1rem 0;
     box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
     border-radius: 5px;
 }
 .scheduleText {
-       text-align: center;
+    text-align: center;
 }
 
 .scheduleText P {
@@ -250,6 +264,18 @@ export default {
     }
 }
 
+.confirmationEmailText P {
+    margin: 0;
+    font-weight: 500;
+    font-size: 14px;
+    color: $black;
+
+    + p {
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+
 .calendar-section[data-v-8004c52c] {
     display: table;
     position: relative;
@@ -289,7 +315,7 @@ export default {
         font-weight: 400;
         font-size: 20px;
         padding: 5px;
-        color:$black;
+        color: $black;
     }
 }
 </style>

vue.config.js

@@ -5,6 +5,7 @@ process.env.VUE_APP_HERITAGE_FUNNEL =
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 
   "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
+process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');";

vue.release.config.js

@@ -2,6 +2,7 @@ process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
 process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
+process.env.VUE_APP_MY_ACCOUNT = "__VUE_APP_MY_ACCOUNT__";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";