Merge branch 'release/submit-cash' into rlsmerge/develop-to-submit-cash-17-July

2023-07-17 12:34:36 +05:30 · 2023-07-17 12:34:36 +05:30 · 007de5cded
commit 007de5cded
parent 55e4623128 bc98d3f616
41 changed files with 1092 additions and 63 deletions
--- a/jest.config.js
+++ b/jest.config.js
@ -26,7 +26,7 @@ module.exports = {
  testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
  coverageThreshold: {
    global: {
-      statements: 76,
+      statements: 75,
      // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
    },
  },
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@ -27,6 +27,8 @@ const errorMessages = {
    VEHICLE_REQUIRED: "Please select a vehicle",
    MOBILE_LOCATION_REQUIRED: "Please enter your service address",
    DATE_REQUIRED: "Please select a date",
+    PHONE_REQUIRED: "Please enter your phone number",
+    PHONE_FORMAT: "Phone number must be 10 digits",
 };

 export { errorMessages };
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@ -84,6 +84,7 @@ const storeActions = {
    SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
        "saveSupportingItemsSuppressingStateResetting",
    SAVE_VAPS: "saveVaps",
+    SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
 };

 export { storeActions };
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@ -38,6 +38,9 @@ const storeMutations = {

    UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",

+    //CUSTOMER MUTATIONS
+    UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
+
    // ORDER MUTATIONS
    UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
    UPDATE_REFERRAL_DATE: "updateReferralDate",
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@ -189,7 +189,7 @@ export default {
                    classes = "d-flex flex-row p-0";
                    break;
                case "listCard":
-                    classes = "row g-2 justify-content-center";
+                    classes = "row g-2 justify-content-center mb-1";
                    if (this.isWide) {
                        classes += " flex-column";
                    }
--- a/src/digital-components/checkbox-question/checkbox-question.spec.js
+++ b/src/digital-components/checkbox-question/checkbox-question.spec.js
@ -1,14 +1,25 @@
 import { shallowMount } from "@vue/test-utils";
-import checkbox from "./checkbox";
+import checkboxQuestion from "./checkbox-question";
 import { nextTick } from "vue";

-describe("checkbox.vue", () => {
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => {
+            return questionText;
+        }),
+    },
+};
+
+describe("checkbox-question.vue", () => {
    it("Should return checkbox name", async () => {
        // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
            propsData: {
                checkboxName: "Checkbox",
            },
+            mixins: [mockMixin],
        });

        // Assert
@ -20,10 +31,11 @@ describe("checkbox.vue", () => {

    it("Should return checkbox id", async () => {
        // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
            propsData: {
                buttonID: "Checkbox ID",
            },
+            mixins: [mockMixin],
        });

        // Assert
@ -35,10 +47,11 @@ describe("checkbox.vue", () => {

    it("Should return tabindex value", async () => {
        // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
            propsData: {
                tabIndex: "1",
            },
+            mixins: [mockMixin],
        });

        // Assert
@ -50,24 +63,11 @@ describe("checkbox.vue", () => {

    it("Should return label text", async () => {
        // Act
-        const wrapper = shallowMount(checkbox, {
-            propsData: {
-                checkboxLabel: "label text",
-            },
-        });
-
-        // Assert
-        const paragraph = wrapper.find("p");
-
-        expect(paragraph.text()).toEqual("label text");
-    });
-
-    it("Should return label text", async () => {
-        // Act
-        const wrapper = shallowMount(checkbox, {
+        const wrapper = shallowMount(checkboxQuestion, {
            propsData: {
                screenReaderOnlyText: "screenreader text",
            },
+            mixins: [mockMixin],
        });

        // Assert
--- a/src/digital-components/checkbox-question/checkbox-question.vue
+++ b/src/digital-components/checkbox-question/checkbox-question.vue
@ -2,6 +2,7 @@
    <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
        <input
+            v-model="value"
            class="form-check-input"
            type="checkbox"
            aria-checked="false"
@ -10,7 +11,7 @@
            :tabindex="tabIndex"
            :aria-required="isRequired" />
        <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-html="checkboxLabelCopy" class="m-0"></p>
            <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
        </label>
    </div>
@ -18,15 +19,32 @@

 <script>
 export default {
-    name: "checkbox",
+    name: "checkboxQuestion",
+    computed: {
+        checkboxLabelCopy() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
    props: {
+        cmsWidgetName: String,
        checkboxName: String,
        buttonID: String,
        tabIndex: Number,
-        checkboxLabel: String,
        screenReaderOnlyText: String,
        isRequired: Boolean,
        hasError: Boolean,
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
    },
 };
 </script>
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@ -924,7 +924,8 @@ export default {
    .btn-link {
        font-weight: 500;
        text-underline-offset: 4px;
-        flex-grow: 0;
+        position: absolute;
+        bottom: 0;
    }

    .past {
@ -987,7 +988,7 @@ export default {
 .btn-link {
    display: block;
    position: relative;
-    height: 3rem;
+    height: 2rem;
    width: 100%;
    justify-content: center;
    background: transparent;
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@ -175,8 +175,7 @@ export default {
        }
        .modal-footer {
            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
+
            button {
                margin: 0;
            }
--- a/src/digital-components/phone-number-question/phone-number-question.spec.js
+++ b/src/digital-components/phone-number-question/phone-number-question.spec.js
@ -0,0 +1,64 @@
+// Components
+import phoneNumberQuestion from "./phone-number-question";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+
+describe("phone-number-question.vue", () => {
+    it("Should render phoneNumberQuestion sub-component (textbox-question)", async () => {
+        // Arrange
+        const wrapper = shallowMount(phoneNumberQuestion, {});
+
+        wrapper.getCmsContent = jest.fn();
+
+        // Act
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+
+        // Assert
+        expect(phoneNumber.exists()).toBe(true);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                modelValue: "val",
+            },
+        });
+
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        await phoneNumber.setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                modelValue: "val",
+            },
+        });
+
+        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
+        await phoneNumber.setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+
+    it("Should combine external and internal validation rules to pass to textbox-question", async () => {
+        // Act
+        const wrapper = shallowMount(phoneNumberQuestion, {
+            propsData: {
+                validationRules: "outsideValidation",
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual(
+            "outsideValidation|phone-number-format"
+        );
+    });
+});
--- a/src/digital-components/phone-number-question/phone-number-question.vue
+++ b/src/digital-components/phone-number-question/phone-number-question.vue
@ -0,0 +1,95 @@
+<template>
+    <div class="phone-number-question d-flex flex-column">
+        <textboxQuestion
+            ref="phoneNumber"
+            type="text"
+            :max-length="12"
+            v-model="selectedValue"
+            :mask="mask"
+            :isRequired="isRequired"
+            :validationRules="validationRulesForTextBoxQuestion"
+            cmsWidgetName="PhoneNumberQuestionWidget" />
+    </div>
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+// Supporting files
+import { errorMessages } from "@/constants/error-messages";
+import { regex } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+// Validation
+defineRule(
+    "phone-number-format",
+    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
+);
+
+export default {
+    name: "phoneNumberQuestion",
+    props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        validationRules: String,
+        hasError: Boolean,
+        centerErrorMessage: Boolean,
+        modelValue: String,
+    },
+    data() {
+        return {
+            phoneNumber: "",
+        };
+    },
+    computed: {
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        validationRulesForTextBoxQuestion() {
+            if (!this.validationRules || this.validationRules.length === 0) {
+                return "phone-number-format";
+            } else {
+                return this.validationRules + "|phone-number-format";
+            }
+        },
+        mask() {
+            return {
+                mask: "x##-###-####",
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/,
+                    },
+                },
+            };
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.phone-number-question {
+    label {
+        color: $black;
+    }
+    input {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 48px;
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+}
+</style>
--- a/src/digital-components/text-block/text-block.vue
+++ b/src/digital-components/text-block/text-block.vue
@ -91,5 +91,8 @@ export default {
    &.bold {
        font-weight: 500;
    }
+    &.dark {
+        color: $black;
+    }
 }
 </style>
--- a/src/digital-components/textarea-question/textarea-question.spec.js
+++ b/src/digital-components/textarea-question/textarea-question.spec.js
@ -0,0 +1,61 @@
+// Components
+import textareaQuestion from "./textarea-question";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+
+const maska = jest.fn();
+
+const questionText = "textareaQuestionText";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => {
+            return questionText;
+        }),
+    },
+};
+
+describe("textarea-question.vue", () => {
+    it("Should render a textarea", async () => {
+        // Arrange
+        const wrapper = shallowMount(textareaQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+            },
+            mixins: [mockMixin],
+        });
+
+        wrapper.getCmsContent = jest.fn();
+
+        // Act
+        const textarea = wrapper.find("textarea");
+
+        // Assert
+        expect(textarea.exists()).toBe(true);
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Act
+        const wrapper = shallowMount(textareaQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "val",
+            },
+            mixins: [mockMixin],
+        });
+
+        await wrapper.find("textarea").setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
+    });
+});
--- a/src/digital-components/textarea-question/textarea-question.vue
+++ b/src/digital-components/textarea-question/textarea-question.vue
@ -0,0 +1,112 @@
+<template>
+    <div class="textarea-question">
+        <div class="label-wrapper mb-1" :aria-label="questionText">
+            <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
+            <label for="textarea-question" class="fw-bold" v-html="questionText"></label>
+            <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
+        </div>
+        <textarea
+            id="textareaQuestion"
+            ref="textarea"
+            v-model="value"
+            v-maska="mask"
+            @keyup="updateCount"
+            class="p-4"
+            :maxlength="maxLength"
+            role="textbox"
+            aria-multiline="true"
+            :aria-required="isRequired">
+        </textarea>
+        <p
+            tabindex="0"
+            class="caption mt-2 mb-0"
+            id="charactersRemaining"
+            :class="[urgentCountdown ? 'urgent-countdown' : '']">
+            {{ remainingCount }}/{{ maxLength }} characters remaining
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "textareaQuestion",
+    props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        maxLength: {
+            type: Number,
+            default: 250,
+        },
+        modelValue: String,
+    },
+    // TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases
+    setup() {},
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        remainingCount() {
+            return this.maxLength - this.value.length;
+        },
+        urgentCountdown() {
+            return this.remainingCount <= this.maxLength * 0.1 ? true : false;
+        },
+        mask() {
+            // Allow any character but only the max length number of times.
+            return {
+                mask: `x*${this.maxLength}`,
+                tokens: {
+                    x: {
+                        pattern: /.|\n|\r/,
+                    },
+                },
+            };
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.textarea-question {
+    display: flex;
+    flex-direction: column;
+    label {
+        color: $black;
+    }
+    .label-wrapper {
+        display: flex;
+        align-items: center;
+        label {
+            span {
+                color: $gray-500;
+            }
+        }
+    }
+    textarea {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 88px;
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+    p {
+        color: $gray-500;
+        &.urgent-countdown {
+            color: $red;
+        }
+    }
+}
+</style>
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@ -44,7 +44,8 @@
                @change="handleChange"
                @blur="handleChange"
                :maxlength="maxLength ? maxLength : '999'"
-                @focus="$emit('focus', $event.target.value)" />
+                @focus="$emit('focus', $event.target.value)"
+                @keydown="keyDownHandler" />
            <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
            <template v-if="includeImageQuestion">
                <template v-if="!isDisabled">
@ -118,6 +119,7 @@ export default {
        maxFileSize: Number,
        hideInput: Boolean,
        centerErrorMessage: Boolean,
+        keyDownHandler: Function,
    },
    setup(props) {
        const uuid = uuidv4();
--- a/src/fmg-components/funnel-footer/funnel-footer.vue
+++ b/src/fmg-components/funnel-footer/funnel-footer.vue
@ -1,6 +1,6 @@
 <template>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
-    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
+    <div class="row"></div>
+    <footer class="footer container-fluid g-5 my-5 px-0" id="infoBox">
        <div class="row d-flex flex-row-reverse align-items-center vw-100">
            <div class="col button-col d-flex" id="stacked">
                <buttonMain
@ -46,19 +46,10 @@ export default {
    },
    data() {
        return {
-            paddingHeight: 0,
            customButtontext: "",
        };
    },
-    mounted() {
-        this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
-        this.$nextTick(() => {
-            window.addEventListener("resize", this.onResize);
-        });
-    },
-    beforeUnmount() {
-        window.removeEventListener("resize", this.onResize);
-    },
+
    unmounted() {
        document.onkeydown = null;
    },
@ -73,9 +64,6 @@ export default {
        },
    },
    methods: {
-        onResize() {
-            this.paddingHeight = this.getFooterInfoBoxHeight();
-        },
        updateButtonText(newText) {
            this.customButtontext = newText;
        },
@ -101,6 +89,7 @@ export default {

 <style lang="scss" scoped>
 .footer {
+    overflow: visible;
    display: flex;
    a {
        display: flex;
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@ -53,7 +53,7 @@
                    v-bind:isDismissible="false" />
                <transition name="fade" mode="out-in">
                    <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
-                        <div class="row mb-4">
+                        <div class="row mt-4 mb-1">
                            <div class="col">
                                <textboxQuestion
                                    cmsWidgetName="ServiceZipQuestionWidget"
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@ -30,7 +30,7 @@
                validationRules="email-address-required|email-address-format" />
        </div>
    </div>
-    <div class="row mb-4">
+    <div class="row mb-0">
        <div class="col">
            <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
        </div>
--- a/src/layouts/customer-details/customer-details.spec.js
+++ b/src/layouts/customer-details/customer-details.spec.js
@ -0,0 +1,58 @@
+// Components
+import customerDetails from "@/layouts/customer-details/customer-details.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
+
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+    navigateToHeritageFunnel: jest.fn(),
+}));
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+describe("customer-details.vue", () => {
+    describe("navigation", () => {
+        test("if the back button is clicked, navigate back", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+        });
+
+        test("if the continue button is clicked, navigate forward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(navigateToHeritage.navigateToHeritageFunnel).toHaveBeenCalled();
+        });
+    });
+});
+
+function setupMocks() {
+    const wrapper = shallowMount(
+        customerDetails,
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+                navigate: jest.fn(),
+                navigateWithSaving: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
+            },
+        })
+    );
+
+    return { wrapper };
+}
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@ -0,0 +1,144 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="FirstNameWidget"
+                v-model="firstName"
+                ref="firstName"
+                customInputId="firstName"
+                validationRules="first-name-required" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="LastNameWidget"
+                v-model="lastName"
+                ref="lastName"
+                customInputId="lastName"
+                validationRules="last-name-required" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="emailQuestionWidget"
+                v-model="emailAddress"
+                inputId="email"
+                validationRules="email-address-required|email-address-format" />
+            <phoneNumberQuestion
+                class="mb-4"
+                cmsWidgetName="phoneNumberQuestionWidget"
+                v-model="phoneNumber"
+                isRequired
+                validationRules="phone-number-required" />
+            <checkboxQuestion
+                class="mb-5"
+                cmsWidgetName="TextMeQuestionWidget"
+                v-model="textMeUpdates" />
+            <textareaQuestion
+                class="mb-4"
+                v-model="techNotes"
+                cmsWidgetName="TextAreaContentWidget"
+                maxLength="250" />
+            <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
+            <funnel-footer
+                cmsWidgetName="FunnelFooterWidget"
+                ref="funnelFooter"
+                :isForwardActionDisabled="!meta.valid"
+                @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 funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
+import textBlock from "@/digital-components/text-block/text-block";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { errorMessages } from "@/constants/error-messages";
+import { routerParams } from "@/router/router-constants/router-params";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+import { useField, validate } from "vee-validate";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+
+// DEFINE VALIDATION RULES
+defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
+defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+
+export default {
+    name: "customer-details",
+    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);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            techNotes: "",
+            firstName: "",
+            lastName: "",
+            emailAddress: "",
+            phoneNumber: "",
+            textMeUpdates: null,
+        };
+    },
+    computed: {
+        textAreaLabelCopy() {
+            return this.getCmsContent("TextAreaContentWidget", "QuestionText");
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelSubHeader,
+        textareaQuestion,
+        textboxQuestion,
+        funnelFooter,
+        Form,
+        textBlock,
+        phoneNumberQuestion,
+        checkboxQuestion,
+    },
+};
+</script>
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@ -54,10 +54,9 @@
                    :manualCopy="AlertNonServiceableZipBody"
                    alertClass="alert-danger"
                    v-bind:isDismissible="false" />
-                <div class="row my-2">
-                    <div class="col">
+                <div class="row mt-2" v-if="showServiceZipField">
+                    <div class="col mb-1">
                        <textboxQuestion
-                            v-if="showServiceZipField"
                            cmsWidgetName="ServiceZipQuestionWidget"
                            v-model="serviceZipCode"
                            inputId="serviceZipCode"
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@ -239,3 +239,8 @@ export default {
    },
 };
 </script>
+<style scoped>
+.text-block {
+    display: block;
+}
+</style>
--- a/src/layouts/review/review-block/review-block.spec.js
+++ b/src/layouts/review/review-block/review-block.spec.js
@ -0,0 +1,36 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+describe("Review Content Block", () => {
+    test("Displays one new line of content for each element in the content prop.", () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            propsData: {
+                headerCmsWidgetName: "TestWidget",
+                content: ["a", "b", "c", "d"],
+            },
+        });
+
+        // Act
+        const contentLines = wrapper.findAll("[data-test='contentLine']");
+
+        // Assert
+        expect(contentLines.length).toBe(4);
+    });
+});
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    mountOptions["attachTo"] = document.body;
+
+    const wrapper = shallowMount(reviewBlock, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
--- a/src/layouts/review/review-block/review-block.vue
+++ b/src/layouts/review/review-block/review-block.vue
@ -0,0 +1,41 @@
+<template>
+    <div class="py-3">
+        <div class="d-flex">
+            <textBlock
+                :cmsWidgetName="headerCmsWidgetName"
+                typeStyle="body small bold dark"
+                margin="mt-0" />
+            <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
+        </div>
+        <div class="small" v-for="item in content" :key="item" data-test="contentLine">
+            {{ item }}
+        </div>
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        headerCmsWidgetName: String,
+        // Specifically an array of strings.
+        content: Array,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        linkClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {},
+    components: {
+        textBlock,
+        textLink,
+    },
+};
+</script>
--- a/src/layouts/review/review-sections/damage-review/damage-review.spec.js
+++ b/src/layouts/review/review-sections/damage-review/damage-review.spec.js
@ -0,0 +1,72 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+describe("Damage Review Block", () => {
+    describe("Correctly assembles damage info into a display string", () => {
+        test("Basic Replace", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: false,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield crack"]);
+        });
+
+        test("Basic Repair", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: true,
+                        numberOfChips: 2,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 2 chips"]);
+        });
+
+        test("Basic Repair - no s with 1 chip", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: true,
+                        numberOfChips: 1,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 1 chip"]);
+        });
+    });
+});
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const wrapper = shallowMount(damageReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
--- a/src/layouts/review/review-sections/damage-review/damage-review.vue
+++ b/src/layouts/review/review-sections/damage-review/damage-review.vue
@ -0,0 +1,40 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "damage-review",
+    props: {
+        cmsWidgetName: String,
+        damage: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [
+                this.damage.isRepair
+                    ? `Windshield repair - ${this.damage.numberOfChips} chip${
+                          this.damage.numberOfChips !== 1 ? "s" : ""
+                      }`
+                    : "Windshield crack",
+            ];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
@ -0,0 +1,37 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+describe("Vehicle Review Block", () => {
+    test("Correctly assembles vehicle info into a display string", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            propsData: {
+                vehicle: {
+                    year: "2019",
+                    make: "Honda",
+                    model: "Odyssey",
+                },
+            },
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toStrictEqual(["2019 Honda Odyssey"]);
+    });
+});
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const wrapper = shallowMount(vehicleReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
@ -0,0 +1,34 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        cmsWidgetName: String,
+        vehicle: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [`${this.vehicle.year} ${this.vehicle.make} ${this.vehicle.model}`];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>
--- 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.");
+});
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@ -0,0 +1,151 @@
+<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="justify-content-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="justify-content-left"
+                margin="mt-0 mb-2" />
+
+            <buttonMain
+                ref="buttonMain"
+                isPrimary
+                :buttonText="forwardButtonText"
+                loaderColor="white"
+                class="mb-2"
+                @click-event="forwardButtonAction" />
+
+            <hr />
+
+            <textBlock
+                customText="Appointment Details"
+                typeStyle="label bold"
+                justifyText="justify-text-left"
+                margin="mt-0"
+                class="dark-header" />
+
+            <div class="px-4">
+                <vehicleReview
+                    cmsWidgetName="VehicleReviewWidget"
+                    :vehicle="vehicleInfo"
+                    @edit-clicked="editVehicle" />
+
+                <hr class="my-0" />
+
+                <damageReview
+                    cmsWidgetName="DamageReviewWidget"
+                    :damage="damageInfo"
+                    @edit-clicked="editDamage" />
+            </div>
+
+            <hr class="my-0" />
+
+            <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 vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
+import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
+
+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() {},
+        editVehicle() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_VEHICLE_EDIT,
+                this.$route
+            );
+        },
+        editDamage() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
+                this.$route
+            );
+        },
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        buttonMain,
+        textBlock,
+        vehicleReview,
+        damageReview,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+    line-height: 1.6;
+}
+</style>
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@ -413,7 +413,11 @@ export default {
                this.appointmentDateAndTime,
                false
            );
-            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+            //Temporary, still need to determine what needs to be saved before continuing.
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
        },

        updateSupportingItems() {
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@ -401,10 +401,7 @@ export default {
                false
            );

-            this.$router.navigateWithSaving(
-                this.navigationScenarios.SELECTED_LOCATION,
-                this.$route
-            );
+            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
        },
        openModalAction(modalName) {
            this.$refs[modalName].openModal();
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@ -3,7 +3,7 @@
        <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
    </div>
    <div class="nested-radio">
-        <div class="row my-2">
+        <div class="row mt-2">
            <div class="col">
                <buttonQuestion
                    v-model="selectedTint"
@ -14,7 +14,7 @@
                    isRequired
                    :groupName="`${glassLocation}-${glassName}`"
                    :validationRules="tintValidationRules">
-                    <div class="row my-2" aria-live="polite">
+                    <div class="row mt-2" aria-live="polite">
                        <div class="col">
                            <buttonQuestion
                                v-model="selectedPartNumber"
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@ -11,7 +11,7 @@
            <div class="fade-on-route-transition sub-container make-tall">
                <div class="prevent-squish my-5">
                    <div class="row">
-                        <div class="col">
+                        <div class="col pb-0">
                            <alert
                                class="rounded border-0 shadow-sm"
                                alertClass="alert-warning"
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@ -62,7 +62,7 @@
                            validationRules="email-address-required|email-address-format" />
                    </div>
                </div>
-                <div class="row mb-2">
+                <div class="row mb-0">
                    <div class="col">
                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
                    </div>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -28,7 +28,13 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";

+import review from "@/layouts/review/review";
 const routes = [
+    {
+        path: "/review", // This is a temporary route for testing.
+        name: "review",
+        component: review,
+    },
    {
        path: "/",
        name: "root",
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@ -17,6 +17,8 @@ const fmgPageValues = {
    SERVICE_LOCATION: "service-location",
    HERITAGE: "heritage",
    SCHEDULE: "schedule",
+    CUSTOMER_DETAILS: "customer-details",
+    REVIEW: "review",
 };

 export { fmgPageValues };
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@ -46,8 +46,9 @@ const navigationScenarios = {
    CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
    CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",

-    // Scheduling
-    SELECTED_LOCATION: "SELECTED_LOCATION",
+    // Review
+    CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
+    CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",
 };

 export { navigationScenarios };
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -421,7 +421,7 @@ const routingTable = function (store) {
                    destinationFmgPageValue: fmgPageValues.QUOTE,
                },
                {
-                    scenario: navigationScenarios.SELECTED_LOCATION,
+                    scenario: navigationScenarios.CLICKED_FORWARD,
                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
                },
            ],
@ -433,6 +433,40 @@ const routingTable = function (store) {
                    scenario: navigationScenarios.CLICKED_BACK,
                    destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.REVIEW,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.REVIEW,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_VEHICLE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+                },
            ],
        },
    ];
--- a/src/store/index.js
+++ b/src/store/index.js
@ -280,6 +280,16 @@ export const mutations = {
            state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
        }
    },
+    updateCustomerDetails(state, detailsInfo) {
+        if (detailsInfo) {
+            state.order.customerDetails.firstName = detailsInfo.firstName;
+            state.order.customerDetails.lastName = detailsInfo.lastName;
+            state.order.customerDetails.email = detailsInfo.email;
+            state.order.customerDetails.telephone = detailsInfo.telephone;
+            state.order.customerDetails.textUpdates = detailsInfo.textUpdates;
+            state.order.customerDetails.techNotes = detailsInfo.techNotes;
+        }
+    },

    // applicationUser MUTATIONS
    updateSaveSessionPromise(state, saveSessionPromise) {
@ -1924,6 +1934,10 @@ export const actions = {
        context.commit(storeMutations.UPDATE_SCHEDULE, scheduleInfo);
    },

+    saveDetails(context, scheduleInfo) {
+        context.commit(storeMutations.UPDATE_DETAILS, scheduleInfo);
+    },
+
    saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
        if (
            context.state.order.serviceLocation &&
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@ -102,7 +102,8 @@ html {
            }
        }
        &.textbox-question,
-        &.dropdown-question {
+        &.dropdown-question,
+        &.phone-number-question {
            p {
                color: $red;
            }