From 5559033c41a231daf3a23d4aa29a2a4b78c050f7 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 1 Feb 2024 13:40:30 -0500
Subject: [PATCH 01/10] SSR-1064 payment method pia options

---
 src/constants/payment-method-constants.js     |   7 +
 src/iss-components/nav-bar/nav-bar.spec.js    |  59 +++++++
 src/iss-components/nav-bar/nav-bar.vue        | 163 ++++++++++++++++++
 .../payment-method-list-button.spec.js        | 104 +++++++++++
 .../payment-method-list-button.vue            | 123 +++++++++++++
 .../payment-method-question.spec.js           | 130 ++++++++++++++
 .../payment-method-question.vue               |  82 +++++++++
 src/layouts/payment-method/payment-method.vue | 118 +++++++++++--
 src/store/index.js                            |  13 +-
 9 files changed, 785 insertions(+), 14 deletions(-)
 create mode 100644 src/constants/payment-method-constants.js
 create mode 100644 src/iss-components/nav-bar/nav-bar.spec.js
 create mode 100644 src/iss-components/nav-bar/nav-bar.vue
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-question.vue

diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js
new file mode 100644
index 00000000..0799f2b2
--- /dev/null
+++ b/src/constants/payment-method-constants.js
@@ -0,0 +1,7 @@
+export const paymentMethods = {
+    NONE: null,
+    LATER: "Later",
+    CREDIT_CARD: "CreditCard",
+    PAYPAL: "Paypal",
+    AFTERPAY: "Afterpay",
+};
diff --git a/src/iss-components/nav-bar/nav-bar.spec.js b/src/iss-components/nav-bar/nav-bar.spec.js
new file mode 100644
index 00000000..68b9f6c8
--- /dev/null
+++ b/src/iss-components/nav-bar/nav-bar.spec.js
@@ -0,0 +1,59 @@
+import { mount } from "@vue/test-utils";
+import navbar from "./nav-bar";
+
+describe("nav-bar.vue", () => {
+    test("Should emit ForwardClicked on button click", async () => {
+        // Act
+        const wrapper = mount(navbar, {
+            mixins: [mockMixin],
+        });
+        wrapper.vm.buttonClick();
+        // Assert
+        expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
+    });
+
+    test("Should emit BackClicked on link click", async () => {
+        // Act
+        const wrapper = mount(navbar, {
+            mixins: [mockMixin],
+        });
+        wrapper.vm.linkClick();
+        // Assert
+        expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
+    });
+
+    test("Should change button text when update button text is called", async () => {
+        // Act
+        const wrapper = mount(navbar, {
+            mixins: [mockMixin],
+        });
+        wrapper.vm.updateButtonText("newText");
+
+        // Assert
+        expect(wrapper.componentVM.customButtontext).toBe("newText");
+    });
+
+    test("should run removeLoader fn on buttonMain and return false for onkeydown fn", async () => {
+        // Arrange
+        const wrapper = mount(navbar, {
+            mixins: [mockMixin],
+        });
+
+        // Act
+        wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
+        wrapper.vm.removeLoader();
+        const spy = jest.spyOn(document, "onkeydown");
+        document.onkeydown();
+
+        // Assert
+        expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
+        expect(spy).toReturnWith(true);
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn(),
+        getFooterInfoBoxHeight: jest.fn(() => 80),
+    },
+};
diff --git a/src/iss-components/nav-bar/nav-bar.vue b/src/iss-components/nav-bar/nav-bar.vue
new file mode 100644
index 00000000..631e5c0e
--- /dev/null
+++ b/src/iss-components/nav-bar/nav-bar.vue
@@ -0,0 +1,163 @@
+<template>
+    <div class="row"></div>
+    <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
+        <div
+            class="row d-flex justify-content-between vw-100"
+            :class="[
+                buttonSize
+                    ? 'flex-column align-items-stretch'
+                    : 'flex-row-reverse align-items-center',
+            ]">
+            <div
+                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
+                id="stacked">
+                <buttonMain
+                    ref="buttonMain"
+                    isPrimary
+                    :buttonText="buttonText"
+                    loaderColor="white"
+                    :class="isForwardActionDisabled && 'form-test-invalid'"
+                    :aria-disabled="isForwardActionDisabled"
+                    :isDisabled="isForwardActionDisabled"
+                    @click-event="buttonClick"
+                    data-bs-target="#footerModal"
+                    data-test-id="nav-bar-main-button"
+                    data-bs-dismiss="modal"
+                    v-if="!isSubmitHidden" />
+            </div>
+            <div
+                v-if="!isBackButtonHidden"
+                class="col-auto link-col py-1 text-break"
+                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
+                <textLink
+                    linkType="navigation"
+                    :text="backLink"
+                    useLoadingModal
+                    @click-event="linkClick"
+                    href="javascript:void(0)"
+                    data-bs-target="#footerModal"
+                    data-bs-dismiss="modal" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+    name: "navbar",
+    emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
+    props: {
+        isForwardActionDisabled: Boolean,
+        isBackButtonHidden: { type: Boolean, default: false },
+        cmsWidgetName: String,
+        buttonSize: { type: Boolean, default: false },
+        isSubmitHidden: { type: Boolean, default: false },
+    },
+    components: {
+        textLink,
+        buttonMain,
+    },
+    data() {
+        return {
+            customButtontext: "",
+        };
+    },
+
+    unmounted() {
+        document.onkeydown = null;
+    },
+    computed: {
+        backLink() {
+            return this.getCmsContent(this.cmsWidgetName, "BackButtonText");
+        },
+        buttonText() {
+            return this.customButtontext
+                ? this.customButtontext
+                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
+        },
+    },
+    methods: {
+        updateButtonText(newText) {
+            this.customButtontext = newText;
+        },
+        removeLoader() {
+            this.$refs.buttonMain.removeLoader();
+            document.onkeydown = function (e) {
+                return true;
+            };
+        },
+        buttonClick() {
+            //prevent keyboard input after button click
+            document.onkeydown = function (e) {
+                return false;
+            };
+            this.$emit("ForwardClicked");
+        },
+        linkClick() {
+            this.$emit("BackClicked");
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+    overflow: visible;
+    display: flex;
+    padding: 0;
+    a {
+        display: flex;
+        justify-content: center;
+    }
+    .col,
+    .col-auto,
+    .col button {
+        width: 100%;
+    }
+
+    .back-centered-below {
+        display: flex;
+        justify-content: center;
+    }
+
+    @media only screen and (min-width: 340px) {
+        .col,
+        .col-auto,
+        .col button {
+            width: auto;
+            justify-content: flex-end;
+        }
+
+        .back-centered-below {
+            display: flex;
+            justify-content: center;
+        }
+
+        .btn-primary {
+            width: auto;
+        }
+        a {
+            display: flex;
+            justify-content: flex-start;
+        }
+    }
+    & > .container-fluid {
+        overflow-x: visible; // needed to fix hidden footer on some iphones
+    }
+    .medium-button {
+        // Define styles for a medium button (default size)
+        justify-content: flex-end;
+        width: auto;
+    }
+    .large-button {
+        justify-content: center;
+        .btn-primary {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
new file mode 100644
index 00000000..8cf6c55b
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
@@ -0,0 +1,104 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";
+
+const testConstants = {
+    images: {
+        A: "imageA",
+        B: "imageB",
+        NONE: null,
+    },
+    names: {
+        A: "nameA",
+        B: "nameB",
+    },
+    content: {
+        withInline: "Button text with {custom:inlineImage} inline.",
+        noInline: "Button text with no inline",
+    },
+};
+
+let cmsContent;
+
+describe("Payment Method Question", () => {
+    beforeEach(() => {
+        cmsContent = {};
+    });
+
+    describe("Side image", () => {
+        it("Renders side image if image is present and not inline", () => {
+            // Arrange
+            const props = generateDefaultProps();
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(true);
+        });
+
+        it("Does not render side image if no image is present", () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            props.buttonImage = testConstants.images.NONE;
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(false);
+        });
+
+        it("Does not render side image if inline", () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            props.buttonLabel = testConstants.content.withInline;
+            props.altText = testConstants.content.withInline;
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(false);
+        });
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        buttonLabel: testConstants.noInline,
+        altText: testConstants.noInline,
+        groupName: "payment-method",
+        value: testConstants.names.A,
+        buttonImage: testConstants.images.A,
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(paymentMethodListButton, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
new file mode 100644
index 00000000..2763f1af
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -0,0 +1,123 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+        v-model="selectedValue">
+        <div class="button-content list-button-content d-flex flex-row py-3 px-4">
+            <img
+                v-if="shouldDisplaySideImage"
+                :id="buttonImageId"
+                class="ms-auto order-3"
+                :src="buttonImage"
+                :alt="altText" />
+            <div class="order-2">
+                <p class="m-0">
+                    <span v-for="token in tokens" :key="token">
+                        <span v-if="isInlineImageToken(token)">
+                            <img
+                                v-if="hasImage"
+                                :src="buttonImage"
+                                :alt="getInlineAltText(token)" />
+                            <span v-else> {{ getInlineAltText(token) }}</span>
+                        </span>
+                        <span v-else>
+                            {{ token }}
+                        </span>
+                    </span>
+                </p>
+            </div>
+        </div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+
+const INLINE_IMAGE_TOKEN = "custom:inlineImage";
+
+function isInlineImageToken(token) {
+    return token.includes(INLINE_IMAGE_TOKEN);
+}
+
+function getInlineAltText(token) {
+    let innerTokens = token.split(",");
+
+    return innerTokens[1] ?? "";
+}
+
+export default {
+    name: "payment-method-list-button",
+    mixins: [inputButtonWrapperMixin],
+    components: {
+        baseInputButton,
+    },
+    methods: {
+        isInlineImageToken,
+        getInlineAltText,
+    },
+    computed: {
+        tokens() {
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
+        },
+        hasImage() {
+            return !!this.buttonImage;
+        },
+        shouldDisplaySideImage() {
+            return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
new file mode 100644
index 00000000..d3a486d5
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -0,0 +1,130 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
+
+const testConstants = {
+    cms: {
+        question: {
+            text: "Choose a payment option",
+        },
+        answers: {
+            optionA: {
+                name: "NameA",
+                text: "TextA",
+                subText: "SubTextA",
+                imageId: "idA",
+                image: "imageA",
+                subWidget: "subWidgetA",
+            },
+            optionB: {
+                name: "NameB",
+                text: "TextB",
+                subText: "SubTextB",
+                imageId: "idB",
+                image: "imageB",
+                subWidget: "subWidgetB",
+            },
+        },
+    },
+};
+
+let cmsContent;
+
+describe("Payment Method Question", () => {
+    beforeEach(() => {
+        cmsContent = {
+            PaymentMethodWidget: {
+                QuestionText: testConstants.cms.question,
+                Answers: [
+                    {
+                        Name: testConstants.cms.answers.optionA.name,
+                        Text: testConstants.cms.answers.optionA.text,
+                        SubText: testConstants.cms.answers.optionA.subText,
+                        ImageId: testConstants.cms.answers.optionA.imageId,
+                        AnswerImageUrl: testConstants.cms.answers.optionA.image,
+                        SubWidgetName: testConstants.cms.answers.optionA.subWidget,
+                    },
+                    {
+                        Name: testConstants.cms.answers.optionB.name,
+                        Text: testConstants.cms.answers.optionB.text,
+                        SubText: testConstants.cms.answers.optionB.subText,
+                        ImageId: testConstants.cms.answers.optionB.imageId,
+                        AnswerImageUrl: testConstants.cms.answers.optionB.image,
+                        SubWidgetName: testConstants.cms.answers.optionB.subWidget,
+                    },
+                ],
+            },
+        };
+    });
+
+    it("Should map cms content correctly", () => {
+        // Arrange
+        const props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        const mappedContent = wrapper.vm.paymentMethodAnswerData;
+
+        // Assert
+        expect(mappedContent).toEqual([
+            {
+                buttonLabel: testConstants.cms.answers.optionA.text,
+                altText: testConstants.cms.answers.optionA.text,
+                groupName: "payment-method",
+                value: testConstants.cms.answers.optionA.name,
+                buttonImage: testConstants.cms.answers.optionA.image,
+            },
+            {
+                buttonLabel: testConstants.cms.answers.optionB.text,
+                altText: testConstants.cms.answers.optionB.text,
+                groupName: "payment-method",
+                value: testConstants.cms.answers.optionB.name,
+                buttonImage: testConstants.cms.answers.optionB.image,
+            },
+        ]);
+    });
+
+    it("Handles null cms content gracefully", () => {
+        // Arrange
+        cmsContent = {};
+        const props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        const mappedContent = wrapper.vm.paymentMethodAnswerData;
+
+        // Assert
+        expect(mappedContent).toEqual([]);
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        modelValue: "modelValue",
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(paymentMethodQuestion, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
new file mode 100644
index 00000000..bbd0617b
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="payment-method-question">
+        <buttonQuestion
+            groupName="payment-method"
+            buttonTypeString="payment-method-list-button"
+            :buttonTypeObject="paymentMethodListButton"
+            isWide
+            :questionText="paymentMethodQuestionText"
+            :answers="paymentMethodAnswerData"
+            isRequired
+            :validationRules="validationRules"
+            v-model="selectedMethod"
+            textPosition="text-start" />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";
+
+export default {
+    name: "payment-method-question",
+    data() {
+        return {
+            paymentMethodListButton: paymentMethodListButton,
+        };
+    },
+    props: {
+        modelValue: String,
+        validationRules: String,
+    },
+    methods: {
+        getAnswersNullSafe(widgetName) {
+            const rawData = this.getCmsContent(widgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
+        },
+    },
+    computed: {
+        selectedMethod: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (selectedMethod) {
+                this.$emit("update:modelValue", selectedMethod);
+            },
+        },
+        paymentMethodQuestionText() {
+            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
+        },
+        paymentMethodAnswerData() {
+            const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+
+            return cmsData.map((answer) => {
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
+                    groupName: "payment-method",
+                    value: answer.Name,
+                    buttonImage: answer.AnswerImageUrl,
+                };
+            });
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.payment-method-question {
+    .question-text span {
+        text-align: left;
+        line-height: 24px;
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index a7ca3dba..190e82c5 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,6 +4,7 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
+        <loadingModal notFullScreen ref="loadingModal" />
         <div class="page-container-grouped-styles">
             <siteHeader
                 ref="siteHeader"
@@ -21,15 +22,18 @@
                 <div>Cart Placeholder</div>
                 <hr class="my-5" />
                 <div>Pia Alert Placeholder</div>
-                <div>Payment Method Question</div>
+                <paymentMethodQuestion
+                        v-if="!isPiaDisabled"
+                        v-model="paymentMethodInternalModel"
+                        validationRules="option-required" />
                 <div>Pia Disabled Placeholder</div>
-                <siteFooter
+                <navbar
                     ref="siteFooter"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
                     buttonSize
-                    @backClicked="navigateBack"
+                    @backClicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -39,14 +43,17 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import navbar from "@/iss-components/nav-bar/nav-bar.vue";
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
+import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question.vue";
+import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { paymentMethods } from "@/constants/payment-method-constants";
 
 import { Form, defineRule } from 'vee-validate';
 
@@ -63,8 +70,10 @@ export default {
         Form,
         siteHeader,
         siteSubHeader,
-        siteFooter,
-        reviewDropdown
+        navbar,
+        reviewDropdown,
+        paymentMethodQuestion,
+        loadingModal,
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -87,16 +96,51 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
 
+            vm.updateFooterButtonText(vm.customCtaCopy);
+
             vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
         });
     },
     data() {
-        return { };
+        return { 
+            paymentMethodInternalModel: this.getPaymentMethodFromStore(),
+        };
     },
     computed: {
         damageInfo() {
             return useMainStore().order.damage;
-        }
+        },
+        customCtaCopy() {
+            switch (this.paymentMethod) {
+                case paymentMethods.CREDIT_CARD:
+                    return "Continue to checkout";
+                case paymentMethods.PAYPAL:
+                    return "Continue to Paypal";
+                case paymentMethods.AFTERPAY:
+                    return "Continue to Afterpay";
+                default:
+                    return null;
+            }
+        },
+        isPiaDisabled() {
+            // do we have this experiment in NextGen ISS?
+
+            /*
+            const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
+
+            const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
+
+            return !isEnabled;
+            */
+            return false;
+        },
+        paymentMethod() {
+            if (this.isPiaDisabled) {
+                return paymentMethods.LATER;
+            }
+
+            return this.paymentMethodInternalModel;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -167,11 +211,61 @@ export default {
                 && customerReqs
             );
         },
+        getPaymentMethodFromStore() {
+            const piaType = useMainStore().order.payment.piaType;
+            const isPia = useMainStore().order.payment.isPia && !!piaType;
+
+            return isPia ? piaType : paymentMethods.LATER;
+        },
+        updateFooterButtonText(newValue) {
+            this.$refs.siteFooter.updateButtonText(newValue);
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
         async forwardButtonAction() {
-            // Multiple paths based on payment
-            console.log('forward button hit...');
-        }
-    }
+            await useMainStore().savePaymentMethodChoice(this.paymentMethod);
+
+            if (this.paymentMethod == paymentMethods.LATER) {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            } else {
+                this.setupPia();
+            }
+        },
+        async setupPia() {
+            this.$refs.loadingModal.showModal();
+
+            // if we don't have a work order in delete substatus, set the flag and submit.
+            // we need a work order number for pia so we can pass it to safeliteHop.
+            if (!store.getters.order.workOrderNumber) {
+                try {
+                    await submitWorkOrder({
+                        pageNameToLog: "payment-method",
+                        submitAfterSave: false,
+                        createDeleteStatusWorkOrderForPia: true,
+                    });
+                } catch (error) {
+                    console.log("error: response from pia submit work order:" + error.message);
+                    this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+                    this.$route.params[routerParams.DISPLAY_PIA_ALERT] = true;
+                    return;
+                }
+            }
+            this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_PAY_NOW,
+                this.$route
+            );
+        },
+    },
+    watch: {
+        customCtaCopy(newValue) {
+            this.updateFooterButtonText(newValue);
+        },
+    },
 };
 </script>
 
diff --git a/src/store/index.js b/src/store/index.js
index a4e9f04d..fe6538cd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,6 +13,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
+import { paymentMethods } from "@/constants/payment-method-constants";
 
 const storeId = 'main';
 
@@ -147,7 +148,9 @@ const getDefaultState = () => ({
                 coverageStatus: coverageStatuses.PENDING,
                 claimNumber: null
             },
-            parentAccountNumber: 0
+            parentAccountNumber: 0,
+            isPia: null,
+            piaType: null,
         },
         contactInfo: {
             firstName: null,
@@ -2127,7 +2130,13 @@ export const useMainStore = defineStore({
             this.resetVehicleState();
             this.resetDamageState();
             this.resetBailout();
-        }
+        },
+
+        savePaymentMethodChoice(paymentMethod) {
+            const isPia = paymentMethod !== paymentMethods.LATER;
+            this.order.payment.isPia = isPia;
+            this.order.payment.piaType = isPia ? paymentMethod : null;
+        },
 
     },
     persist: true

From 462e4f93376e5e490bd6ebb1d611f08da237358b Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 1 Feb 2024 15:17:16 -0500
Subject: [PATCH 02/10] SSR-1064 linting

---
 src/constants/payment-method-constants.js     |   8 +-
 src/iss-components/nav-bar/nav-bar.spec.js    |  46 +++---
 src/iss-components/nav-bar/nav-bar.vue        |  43 +++---
 .../payment-method-list-button.spec.js        | 139 +++++++++---------
 .../payment-method-list-button.vue            |  38 ++---
 .../payment-method-question.spec.js           | 101 +++++++------
 .../payment-method-question.vue               |  56 +++----
 src/layouts/payment-method/payment-method.vue |  58 +++-----
 src/store/index.js                            |   4 +-
 9 files changed, 241 insertions(+), 252 deletions(-)

diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js
index 0799f2b2..8f0ee825 100644
--- a/src/constants/payment-method-constants.js
+++ b/src/constants/payment-method-constants.js
@@ -1,7 +1,7 @@
 export const paymentMethods = {
     NONE: null,
-    LATER: "Later",
-    CREDIT_CARD: "CreditCard",
-    PAYPAL: "Paypal",
-    AFTERPAY: "Afterpay",
+    LATER: 'Later',
+    CREDIT_CARD: 'CreditCard',
+    PAYPAL: 'Paypal',
+    AFTERPAY: 'Afterpay'
 };
diff --git a/src/iss-components/nav-bar/nav-bar.spec.js b/src/iss-components/nav-bar/nav-bar.spec.js
index 68b9f6c8..bfd921a9 100644
--- a/src/iss-components/nav-bar/nav-bar.spec.js
+++ b/src/iss-components/nav-bar/nav-bar.spec.js
@@ -1,48 +1,55 @@
-import { mount } from "@vue/test-utils";
-import navbar from "./nav-bar";
+import { mount } from '@vue/test-utils';
+import navbar from './nav-bar';
 
-describe("nav-bar.vue", () => {
-    test("Should emit ForwardClicked on button click", async () => {
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn(),
+        getFooterInfoBoxHeight: jest.fn(() => 80)
+    }
+};
+
+describe('nav-bar.vue', () => {
+    test('Should emit ForwardClicked on button click', async () => {
         // Act
         const wrapper = mount(navbar, {
-            mixins: [mockMixin],
+            mixins: [mockMixin]
         });
         wrapper.vm.buttonClick();
         // Assert
-        expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
+        expect(wrapper.emitted()['ForwardClicked'][0]).toHaveBeenCalled;
     });
 
-    test("Should emit BackClicked on link click", async () => {
+    test('Should emit BackClicked on link click', async () => {
         // Act
         const wrapper = mount(navbar, {
-            mixins: [mockMixin],
+            mixins: [mockMixin]
         });
         wrapper.vm.linkClick();
         // Assert
-        expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
+        expect(wrapper.emitted()['BackClicked'][0]).toHaveBeenCalled;
     });
 
-    test("Should change button text when update button text is called", async () => {
+    test('Should change button text when update button text is called', async () => {
         // Act
         const wrapper = mount(navbar, {
-            mixins: [mockMixin],
+            mixins: [mockMixin]
         });
-        wrapper.vm.updateButtonText("newText");
+        wrapper.vm.updateButtonText('newText');
 
         // Assert
-        expect(wrapper.componentVM.customButtontext).toBe("newText");
+        expect(wrapper.componentVM.customButtontext).toBe('newText');
     });
 
-    test("should run removeLoader fn on buttonMain and return false for onkeydown fn", async () => {
+    test('should run removeLoader fn on buttonMain and return false for onkeydown fn', async () => {
         // Arrange
         const wrapper = mount(navbar, {
-            mixins: [mockMixin],
+            mixins: [mockMixin]
         });
 
         // Act
         wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
         wrapper.vm.removeLoader();
-        const spy = jest.spyOn(document, "onkeydown");
+        const spy = jest.spyOn(document, 'onkeydown');
         document.onkeydown();
 
         // Assert
@@ -50,10 +57,3 @@ describe("nav-bar.vue", () => {
         expect(spy).toReturnWith(true);
     });
 });
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn(),
-        getFooterInfoBoxHeight: jest.fn(() => 80),
-    },
-};
diff --git a/src/iss-components/nav-bar/nav-bar.vue b/src/iss-components/nav-bar/nav-bar.vue
index 631e5c0e..67b107ee 100644
--- a/src/iss-components/nav-bar/nav-bar.vue
+++ b/src/iss-components/nav-bar/nav-bar.vue
@@ -43,41 +43,40 @@
 </template>
 
 <script>
-import textLink from "@/ux-components/text-link/text-link";
-import buttonMain from "@/ux-components/button-main/button-main";
+import textLink from '@/ux-components/text-link/text-link.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
 
 export default {
-    name: "navbar",
-    emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
+    name: 'navbar',
+    components: {
+        textLink,
+        buttonMain
+    },
     props: {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
         buttonSize: { type: Boolean, default: false },
-        isSubmitHidden: { type: Boolean, default: false },
-    },
-    components: {
-        textLink,
-        buttonMain,
+        isSubmitHidden: { type: Boolean, default: false }
     },
+    emits: ['BackClicked', 'ForwardClicked'], // <--- should remove oodles of warnings in dev tools
     data() {
         return {
-            customButtontext: "",
+            customButtontext: ''
         };
     },
-
-    unmounted() {
-        document.onkeydown = null;
-    },
     computed: {
         backLink() {
-            return this.getCmsContent(this.cmsWidgetName, "BackButtonText");
+            return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
         },
         buttonText() {
             return this.customButtontext
                 ? this.customButtontext
-                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
-        },
+                : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
+        }
+    },
+    unmounted() {
+        document.onkeydown = null;
     },
     methods: {
         updateButtonText(newText) {
@@ -90,16 +89,16 @@ export default {
             };
         },
         buttonClick() {
-            //prevent keyboard input after button click
+            // prevent keyboard input after button click
             document.onkeydown = function (e) {
                 return false;
             };
-            this.$emit("ForwardClicked");
+            this.$emit('ForwardClicked');
         },
         linkClick() {
-            this.$emit("BackClicked");
-        },
-    },
+            this.$emit('BackClicked');
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
index 8cf6c55b..523e10ba 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
@@ -1,87 +1,34 @@
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
 
-import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";
+// eslint-disable-next-line max-len
+import paymentMethodListButton from '@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue';
 
 const testConstants = {
     images: {
-        A: "imageA",
-        B: "imageB",
-        NONE: null,
+        A: 'imageA',
+        B: 'imageB',
+        NONE: null
     },
     names: {
-        A: "nameA",
-        B: "nameB",
+        A: 'nameA',
+        B: 'nameB'
     },
     content: {
-        withInline: "Button text with {custom:inlineImage} inline.",
-        noInline: "Button text with no inline",
+        withInline: 'Button text with {custom:inlineImage} inline.',
+        noInline: 'Button text with no inline'
     },
 };
 
 let cmsContent;
 
-describe("Payment Method Question", () => {
-    beforeEach(() => {
-        cmsContent = {};
-    });
-
-    describe("Side image", () => {
-        it("Renders side image if image is present and not inline", () => {
-            // Arrange
-            const props = generateDefaultProps();
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            const showSideImage = wrapper.vm.shouldDisplaySideImage;
-
-            expect(showSideImage).toBe(true);
-        });
-
-        it("Does not render side image if no image is present", () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            props.buttonImage = testConstants.images.NONE;
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            const showSideImage = wrapper.vm.shouldDisplaySideImage;
-
-            expect(showSideImage).toBe(false);
-        });
-
-        it("Does not render side image if inline", () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            props.buttonLabel = testConstants.content.withInline;
-            props.altText = testConstants.content.withInline;
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            const showSideImage = wrapper.vm.shouldDisplaySideImage;
-
-            expect(showSideImage).toBe(false);
-        });
-    });
-});
-
 function generateDefaultProps() {
     return {
         buttonLabel: testConstants.noInline,
         altText: testConstants.noInline,
-        groupName: "payment-method",
+        groupName: 'payment-method',
         value: testConstants.names.A,
-        buttonImage: testConstants.images.A,
+        buttonImage: testConstants.images.A
     };
 }
 
@@ -91,9 +38,9 @@ function setupMocks(customMountOptions) {
     const mockMixin = {
         methods: {
             getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
-            }),
-        },
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? '';
+            })
+        }
     };
 
     mountOptions.global.mixins = [mockMixin];
@@ -102,3 +49,57 @@ function setupMocks(customMountOptions) {
     wrapper.vm.setCmsContent = jest.fn();
     return { wrapper };
 }
+
+describe('Payment Method Question', () => {
+    beforeEach(() => {
+        cmsContent = {};
+    });
+
+    describe('Side image', () => {
+        it('Renders side image if image is present and not inline', () => {
+            // Arrange
+            const props = generateDefaultProps();
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(true);
+        });
+
+        it('Does not render side image if no image is present', () => {
+            // Arrange
+            const props = generateDefaultProps();
+
+            props.buttonImage = testConstants.images.NONE;
+
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(false);
+        });
+
+        it('Does not render side image if inline', () => {
+            // Arrange
+            const props = generateDefaultProps();
+
+            props.buttonLabel = testConstants.content.withInline;
+            props.altText = testConstants.content.withInline;
+
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+
+            expect(showSideImage).toBe(false);
+        });
+    });
+});
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
index 2763f1af..871f8ba7 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -1,8 +1,8 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
-        v-model="selectedValue">
+        v-model="selectedValue"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
         <div class="button-content list-button-content d-flex flex-row py-3 px-4">
             <img
                 v-if="shouldDisplaySideImage"
@@ -12,7 +12,9 @@
                 :alt="altText" />
             <div class="order-2">
                 <p class="m-0">
-                    <span v-for="token in tokens" :key="token">
+                    <span
+                        v-for="token in tokens"
+                        :key="token">
                         <span v-if="isInlineImageToken(token)">
                             <img
                                 v-if="hasImage"
@@ -31,43 +33,43 @@
 </template>
 
 <script>
-import baseInputButton from "@/digital-components/base-input-button/base-input-button";
-import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
+import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin.js';
+import { splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper.js';
 
-const INLINE_IMAGE_TOKEN = "custom:inlineImage";
+const INLINE_IMAGE_TOKEN = 'custom:inlineImage';
 
 function isInlineImageToken(token) {
     return token.includes(INLINE_IMAGE_TOKEN);
 }
 
 function getInlineAltText(token) {
-    let innerTokens = token.split(",");
+    const innerTokens = token.split(',');
 
-    return innerTokens[1] ?? "";
+    return innerTokens[1] ?? '';
 }
 
 export default {
-    name: "payment-method-list-button",
-    mixins: [inputButtonWrapperMixin],
+    name: 'payment-method-list-button',
     components: {
-        baseInputButton,
-    },
-    methods: {
-        isInlineImageToken,
-        getInlineAltText,
+        baseInputButton
     },
+    mixins: [inputButtonWrapperMixin],
     computed: {
         tokens() {
-            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? '');
         },
         hasImage() {
             return !!this.buttonImage;
         },
         shouldDisplaySideImage() {
             return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
-        },
+        }
     },
+    methods: {
+        isInlineImageToken,
+        getInlineAltText
+    }
 };
 </script>
 
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
index d3a486d5..229823e4 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -1,29 +1,29 @@
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
 
-import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
+import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
 
 const testConstants = {
     cms: {
         question: {
-            text: "Choose a payment option",
+            text: 'Choose a payment option'
         },
         answers: {
             optionA: {
-                name: "NameA",
-                text: "TextA",
-                subText: "SubTextA",
-                imageId: "idA",
-                image: "imageA",
-                subWidget: "subWidgetA",
+                name: 'NameA',
+                text: 'TextA',
+                subText: 'SubTextA',
+                imageId: 'idA',
+                image: 'imageA',
+                subWidget: 'subWidgetA'
             },
             optionB: {
-                name: "NameB",
-                text: "TextB",
-                subText: "SubTextB",
-                imageId: "idB",
-                image: "imageB",
-                subWidget: "subWidgetB",
+                name: 'NameB',
+                text: 'TextB',
+                subText: 'SubTextB',
+                imageId: 'idB',
+                image: 'imageB',
+                subWidget: 'subWidgetB'
             },
         },
     },
@@ -31,7 +31,30 @@ const testConstants = {
 
 let cmsContent;
 
-describe("Payment Method Question", () => {
+function generateDefaultProps() {
+    return {
+        modelValue: 'modelValue'
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
+        }
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(paymentMethodQuestion, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
+
+
+describe('Payment Method Question', () => {
     beforeEach(() => {
         cmsContent = {
             PaymentMethodWidget: {
@@ -43,7 +66,7 @@ describe("Payment Method Question", () => {
                         SubText: testConstants.cms.answers.optionA.subText,
                         ImageId: testConstants.cms.answers.optionA.imageId,
                         AnswerImageUrl: testConstants.cms.answers.optionA.image,
-                        SubWidgetName: testConstants.cms.answers.optionA.subWidget,
+                        SubWidgetName: testConstants.cms.answers.optionA.subWidget
                     },
                     {
                         Name: testConstants.cms.answers.optionB.name,
@@ -51,19 +74,19 @@ describe("Payment Method Question", () => {
                         SubText: testConstants.cms.answers.optionB.subText,
                         ImageId: testConstants.cms.answers.optionB.imageId,
                         AnswerImageUrl: testConstants.cms.answers.optionB.image,
-                        SubWidgetName: testConstants.cms.answers.optionB.subWidget,
-                    },
-                ],
-            },
+                        SubWidgetName: testConstants.cms.answers.optionB.subWidget
+                    }
+                ]
+            }
         };
     });
 
-    it("Should map cms content correctly", () => {
+    it('Should map cms content correctly', () => {
         // Arrange
         const props = generateDefaultProps();
 
         const { wrapper } = setupMocks({
-            propsData: props,
+            propsData: props
         });
 
         // Act
@@ -74,21 +97,21 @@ describe("Payment Method Question", () => {
             {
                 buttonLabel: testConstants.cms.answers.optionA.text,
                 altText: testConstants.cms.answers.optionA.text,
-                groupName: "payment-method",
+                groupName: 'payment-method',
                 value: testConstants.cms.answers.optionA.name,
                 buttonImage: testConstants.cms.answers.optionA.image,
             },
             {
                 buttonLabel: testConstants.cms.answers.optionB.text,
                 altText: testConstants.cms.answers.optionB.text,
-                groupName: "payment-method",
+                groupName: 'payment-method',
                 value: testConstants.cms.answers.optionB.name,
                 buttonImage: testConstants.cms.answers.optionB.image,
             },
         ]);
     });
 
-    it("Handles null cms content gracefully", () => {
+    it('Handles null cms content gracefully', () => {
         // Arrange
         cmsContent = {};
         const props = generateDefaultProps();
@@ -104,27 +127,3 @@ describe("Payment Method Question", () => {
         expect(mappedContent).toEqual([]);
     });
 });
-
-function generateDefaultProps() {
-    return {
-        modelValue: "modelValue",
-    };
-}
-
-function setupMocks(customMountOptions) {
-    const mountOptions = getMountOptions(customMountOptions);
-
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
-            }),
-        },
-    };
-
-    mountOptions.global.mixins = [mockMixin];
-
-    const wrapper = shallowMount(paymentMethodQuestion, mountOptions);
-    wrapper.vm.setCmsContent = jest.fn();
-    return { wrapper };
-}
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
index bbd0617b..78767538 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="payment-method-question">
         <buttonQuestion
+            v-model="selectedMethod"
             groupName="payment-method"
             buttonTypeString="payment-method-list-button"
             :buttonTypeObject="paymentMethodListButton"
@@ -9,36 +10,27 @@
             :answers="paymentMethodAnswerData"
             isRequired
             :validationRules="validationRules"
-            v-model="selectedMethod"
             textPosition="text-start" />
     </div>
 </template>
 
 <script>
-import buttonQuestion from "@/digital-components/button-question/button-question";
-import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue';
 
 export default {
-    name: "payment-method-question",
-    data() {
-        return {
-            paymentMethodListButton: paymentMethodListButton,
-        };
+    name: 'payment-method-question',
+    components: {
+        buttonQuestion
     },
     props: {
         modelValue: String,
-        validationRules: String,
+        validationRules: String
     },
-    methods: {
-        getAnswersNullSafe(widgetName) {
-            const rawData = this.getCmsContent(widgetName, "Answers");
-
-            if (!rawData) {
-                return [];
-            } else {
-                return rawData;
-            }
-        },
+    data() {
+        return {
+            paymentMethodListButton
+        };
     },
     computed: {
         selectedMethod: {
@@ -46,29 +38,37 @@ export default {
                 return this.modelValue;
             },
             set: function (selectedMethod) {
-                this.$emit("update:modelValue", selectedMethod);
+                this.$emit('update:modelValue', selectedMethod);
             },
         },
         paymentMethodQuestionText() {
-            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
+            return this.getCmsContent('PaymentMethodWidget', 'QuestionText');
         },
         paymentMethodAnswerData() {
-            const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+            const cmsData = this.getAnswersNullSafe('PaymentMethodWidget');
 
             return cmsData.map((answer) => {
                 return {
                     buttonLabel: answer.Text,
                     altText: answer.Text,
-                    groupName: "payment-method",
+                    groupName: 'payment-method',
                     value: answer.Name,
-                    buttonImage: answer.AnswerImageUrl,
+                    buttonImage: answer.AnswerImageUrl
                 };
             });
-        },
-    },
-    components: {
-        buttonQuestion,
+        }
     },
+    methods: {
+        getAnswersNullSafe(widgetName) {
+            const rawData = this.getCmsContent(widgetName, 'Answers');
+
+            if (!rawData) {
+                return [];
+            }
+
+            return rawData;
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 190e82c5..c65cffd4 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,7 +4,9 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <loadingModal notFullScreen ref="loadingModal" />
+        <loadingModal
+            ref="loadingModal"
+            notFullScreen />
         <div class="page-container-grouped-styles">
             <siteHeader
                 ref="siteHeader"
@@ -43,17 +45,17 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import navbar from "@/iss-components/nav-bar/nav-bar.vue";
+import navbar from '@/iss-components/nav-bar/nav-bar.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
-import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question.vue";
+import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
 import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { paymentMethods } from "@/constants/payment-method-constants";
+import { paymentMethods } from '@/constants/payment-method-constants';
 
 import { Form, defineRule } from 'vee-validate';
 
@@ -73,7 +75,7 @@ export default {
         navbar,
         reviewDropdown,
         paymentMethodQuestion,
-        loadingModal,
+        loadingModal
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -102,8 +104,8 @@ export default {
         });
     },
     data() {
-        return { 
-            paymentMethodInternalModel: this.getPaymentMethodFromStore(),
+        return {
+            paymentMethodInternalModel: this.getPaymentMethodFromStore()
         };
     },
     computed: {
@@ -113,11 +115,11 @@ export default {
         customCtaCopy() {
             switch (this.paymentMethod) {
                 case paymentMethods.CREDIT_CARD:
-                    return "Continue to checkout";
+                    return 'Continue to checkout';
                 case paymentMethods.PAYPAL:
-                    return "Continue to Paypal";
+                    return 'Continue to Paypal';
                 case paymentMethods.AFTERPAY:
-                    return "Continue to Afterpay";
+                    return 'Continue to Afterpay';
                 default:
                     return null;
             }
@@ -140,7 +142,12 @@ export default {
             }
 
             return this.paymentMethodInternalModel;
-        },
+        }
+    },
+    watch: {
+        customCtaCopy(newValue) {
+            this.updateFooterButtonText(newValue);
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -212,7 +219,7 @@ export default {
             );
         },
         getPaymentMethodFromStore() {
-            const piaType = useMainStore().order.payment.piaType;
+            const { piaType } = useMainStore().order.payment;
             const isPia = useMainStore().order.payment.isPia && !!piaType;
 
             return isPia ? piaType : paymentMethods.LATER;
@@ -226,7 +233,7 @@ export default {
         async forwardButtonAction() {
             await useMainStore().savePaymentMethodChoice(this.paymentMethod);
 
-            if (this.paymentMethod == paymentMethods.LATER) {
+            if (this.paymentMethod === paymentMethods.LATER) {
                 this.$router.navigateWithoutSaving(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
@@ -240,32 +247,13 @@ export default {
 
             // if we don't have a work order in delete substatus, set the flag and submit.
             // we need a work order number for pia so we can pass it to safeliteHop.
-            if (!store.getters.order.workOrderNumber) {
-                try {
-                    await submitWorkOrder({
-                        pageNameToLog: "payment-method",
-                        submitAfterSave: false,
-                        createDeleteStatusWorkOrderForPia: true,
-                    });
-                } catch (error) {
-                    console.log("error: response from pia submit work order:" + error.message);
-                    this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-                    this.$route.params[routerParams.DISPLAY_PIA_ALERT] = true;
-                    return;
-                }
-            }
-            this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_PAY_NOW,
                 this.$route
             );
-        },
-    },
-    watch: {
-        customCtaCopy(newValue) {
-            this.updateFooterButtonText(newValue);
-        },
-    },
+        }
+    }
 };
 </script>
 
diff --git a/src/store/index.js b/src/store/index.js
index fe6538cd..88af31f8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
-import { paymentMethods } from "@/constants/payment-method-constants";
+import { paymentMethods } from '@/constants/payment-method-constants';
 
 const storeId = 'main';
 
@@ -150,7 +150,7 @@ const getDefaultState = () => ({
             },
             parentAccountNumber: 0,
             isPia: null,
-            piaType: null,
+            piaType: null
         },
         contactInfo: {
             firstName: null,

From 0ffebaf17e372cbca9fed5dc0c9db1fbcaec2977 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Fri, 2 Feb 2024 14:18:43 -0500
Subject: [PATCH 03/10] SSR-1064 restored sitefooter

---
 src/iss-components/nav-bar/nav-bar.spec.js    |  59 -------
 src/iss-components/nav-bar/nav-bar.vue        | 162 ------------------
 .../payment-method-list-button.spec.js        |  10 +-
 .../payment-method-question.spec.js           |  15 +-
 src/layouts/payment-method/payment-method.vue |  22 +--
 5 files changed, 18 insertions(+), 250 deletions(-)
 delete mode 100644 src/iss-components/nav-bar/nav-bar.spec.js
 delete mode 100644 src/iss-components/nav-bar/nav-bar.vue

diff --git a/src/iss-components/nav-bar/nav-bar.spec.js b/src/iss-components/nav-bar/nav-bar.spec.js
deleted file mode 100644
index bfd921a9..00000000
--- a/src/iss-components/nav-bar/nav-bar.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { mount } from '@vue/test-utils';
-import navbar from './nav-bar';
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn(),
-        getFooterInfoBoxHeight: jest.fn(() => 80)
-    }
-};
-
-describe('nav-bar.vue', () => {
-    test('Should emit ForwardClicked on button click', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.buttonClick();
-        // Assert
-        expect(wrapper.emitted()['ForwardClicked'][0]).toHaveBeenCalled;
-    });
-
-    test('Should emit BackClicked on link click', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.linkClick();
-        // Assert
-        expect(wrapper.emitted()['BackClicked'][0]).toHaveBeenCalled;
-    });
-
-    test('Should change button text when update button text is called', async () => {
-        // Act
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-        wrapper.vm.updateButtonText('newText');
-
-        // Assert
-        expect(wrapper.componentVM.customButtontext).toBe('newText');
-    });
-
-    test('should run removeLoader fn on buttonMain and return false for onkeydown fn', async () => {
-        // Arrange
-        const wrapper = mount(navbar, {
-            mixins: [mockMixin]
-        });
-
-        // Act
-        wrapper.vm.$refs.buttonMain.removeLoader = jest.fn();
-        wrapper.vm.removeLoader();
-        const spy = jest.spyOn(document, 'onkeydown');
-        document.onkeydown();
-
-        // Assert
-        expect(wrapper.vm.$refs.buttonMain.removeLoader).toHaveBeenCalled();
-        expect(spy).toReturnWith(true);
-    });
-});
diff --git a/src/iss-components/nav-bar/nav-bar.vue b/src/iss-components/nav-bar/nav-bar.vue
deleted file mode 100644
index 67b107ee..00000000
--- a/src/iss-components/nav-bar/nav-bar.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-    <div class="row"></div>
-    <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
-        <div
-            class="row d-flex justify-content-between vw-100"
-            :class="[
-                buttonSize
-                    ? 'flex-column align-items-stretch'
-                    : 'flex-row-reverse align-items-center',
-            ]">
-            <div
-                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
-                id="stacked">
-                <buttonMain
-                    ref="buttonMain"
-                    isPrimary
-                    :buttonText="buttonText"
-                    loaderColor="white"
-                    :class="isForwardActionDisabled && 'form-test-invalid'"
-                    :aria-disabled="isForwardActionDisabled"
-                    :isDisabled="isForwardActionDisabled"
-                    @click-event="buttonClick"
-                    data-bs-target="#footerModal"
-                    data-test-id="nav-bar-main-button"
-                    data-bs-dismiss="modal"
-                    v-if="!isSubmitHidden" />
-            </div>
-            <div
-                v-if="!isBackButtonHidden"
-                class="col-auto link-col py-1 text-break"
-                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
-                <textLink
-                    linkType="navigation"
-                    :text="backLink"
-                    useLoadingModal
-                    @click-event="linkClick"
-                    href="javascript:void(0)"
-                    data-bs-target="#footerModal"
-                    data-bs-dismiss="modal" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import textLink from '@/ux-components/text-link/text-link.vue';
-import buttonMain from '@/ux-components/button-main/button-main.vue';
-
-export default {
-    name: 'navbar',
-    components: {
-        textLink,
-        buttonMain
-    },
-    props: {
-        isForwardActionDisabled: Boolean,
-        isBackButtonHidden: { type: Boolean, default: false },
-        cmsWidgetName: String,
-        buttonSize: { type: Boolean, default: false },
-        isSubmitHidden: { type: Boolean, default: false }
-    },
-    emits: ['BackClicked', 'ForwardClicked'], // <--- should remove oodles of warnings in dev tools
-    data() {
-        return {
-            customButtontext: ''
-        };
-    },
-    computed: {
-        backLink() {
-            return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
-        },
-        buttonText() {
-            return this.customButtontext
-                ? this.customButtontext
-                : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
-        }
-    },
-    unmounted() {
-        document.onkeydown = null;
-    },
-    methods: {
-        updateButtonText(newText) {
-            this.customButtontext = newText;
-        },
-        removeLoader() {
-            this.$refs.buttonMain.removeLoader();
-            document.onkeydown = function (e) {
-                return true;
-            };
-        },
-        buttonClick() {
-            // prevent keyboard input after button click
-            document.onkeydown = function (e) {
-                return false;
-            };
-            this.$emit('ForwardClicked');
-        },
-        linkClick() {
-            this.$emit('BackClicked');
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.nav-bar {
-    overflow: visible;
-    display: flex;
-    padding: 0;
-    a {
-        display: flex;
-        justify-content: center;
-    }
-    .col,
-    .col-auto,
-    .col button {
-        width: 100%;
-    }
-
-    .back-centered-below {
-        display: flex;
-        justify-content: center;
-    }
-
-    @media only screen and (min-width: 340px) {
-        .col,
-        .col-auto,
-        .col button {
-            width: auto;
-            justify-content: flex-end;
-        }
-
-        .back-centered-below {
-            display: flex;
-            justify-content: center;
-        }
-
-        .btn-primary {
-            width: auto;
-        }
-        a {
-            display: flex;
-            justify-content: flex-start;
-        }
-    }
-    & > .container-fluid {
-        overflow-x: visible; // needed to fix hidden footer on some iphones
-    }
-    .medium-button {
-        // Define styles for a medium button (default size)
-        justify-content: flex-end;
-        width: auto;
-    }
-    .large-button {
-        justify-content: center;
-        .btn-primary {
-            width: 100%;
-            justify-content: center;
-        }
-    }
-}
-</style>
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
index 523e10ba..ec29f8cc 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
@@ -17,15 +17,15 @@ const testConstants = {
     content: {
         withInline: 'Button text with {custom:inlineImage} inline.',
         noInline: 'Button text with no inline'
-    },
+    }
 };
 
 let cmsContent;
 
 function generateDefaultProps() {
     return {
-        buttonLabel: testConstants.noInline,
-        altText: testConstants.noInline,
+        buttonLabel: testConstants.content.noInline,
+        altText: testConstants.content.noInline,
         groupName: 'payment-method',
         value: testConstants.names.A,
         buttonImage: testConstants.images.A
@@ -37,9 +37,7 @@ function setupMocks(customMountOptions) {
 
     const mockMixin = {
         methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return cmsContent?.[widgetName]?.[cmsFieldName] ?? '';
-            })
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
         }
     };
 
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
index 229823e4..4e869c3e 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -24,9 +24,9 @@ const testConstants = {
                 imageId: 'idB',
                 image: 'imageB',
                 subWidget: 'subWidgetB'
-            },
-        },
-    },
+            }
+        }
+    }
 };
 
 let cmsContent;
@@ -53,7 +53,6 @@ function setupMocks(customMountOptions) {
     return { wrapper };
 }
 
-
 describe('Payment Method Question', () => {
     beforeEach(() => {
         cmsContent = {
@@ -99,15 +98,15 @@ describe('Payment Method Question', () => {
                 altText: testConstants.cms.answers.optionA.text,
                 groupName: 'payment-method',
                 value: testConstants.cms.answers.optionA.name,
-                buttonImage: testConstants.cms.answers.optionA.image,
+                buttonImage: testConstants.cms.answers.optionA.image
             },
             {
                 buttonLabel: testConstants.cms.answers.optionB.text,
                 altText: testConstants.cms.answers.optionB.text,
                 groupName: 'payment-method',
                 value: testConstants.cms.answers.optionB.name,
-                buttonImage: testConstants.cms.answers.optionB.image,
-            },
+                buttonImage: testConstants.cms.answers.optionB.image
+            }
         ]);
     });
 
@@ -117,7 +116,7 @@ describe('Payment Method Question', () => {
         const props = generateDefaultProps();
 
         const { wrapper } = setupMocks({
-            propsData: props,
+            propsData: props
         });
 
         // Act
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index c65cffd4..e5ab8427 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,9 +4,6 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <loadingModal
-            ref="loadingModal"
-            notFullScreen />
         <div class="page-container-grouped-styles">
             <siteHeader
                 ref="siteHeader"
@@ -29,13 +26,13 @@
                         v-model="paymentMethodInternalModel"
                         validationRules="option-required" />
                 <div>Pia Disabled Placeholder</div>
-                <navbar
+                <siteFooter
                     ref="siteFooter"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
                     buttonSize
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -45,11 +42,10 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import navbar from '@/iss-components/nav-bar/nav-bar.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
@@ -72,10 +68,9 @@ export default {
         Form,
         siteHeader,
         siteSubHeader,
-        navbar,
+        siteFooter,
         reviewDropdown,
-        paymentMethodQuestion,
-        loadingModal
+        paymentMethodQuestion
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -227,14 +222,11 @@ export default {
         updateFooterButtonText(newValue) {
             this.$refs.siteFooter.updateButtonText(newValue);
         },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             await useMainStore().savePaymentMethodChoice(this.paymentMethod);
 
             if (this.paymentMethod === paymentMethods.LATER) {
-                this.$router.navigateWithoutSaving(
+                this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
                 );
@@ -248,7 +240,7 @@ export default {
             // if we don't have a work order in delete substatus, set the flag and submit.
             // we need a work order number for pia so we can pass it to safeliteHop.
 
-            this.$router.navigateWithoutSaving(
+            this.$router.navigate(
                 this.navigationScenarios.CLICKED_PAY_NOW,
                 this.$route
             );

From 63e8ed0d148bca84fc7d3eb28f542994a540a538 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 2 Feb 2024 15:55:16 -0500
Subject: [PATCH 04/10] allow footer to stack vertically

---
 .../site-footer/site-footer.vue               | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index 2c4a4cb0..e695f422 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -3,7 +3,13 @@
         <footer
             id="infoBox"
             class="footer container-fluid g-5 my-5 px-0">
-            <div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0">
+            <div
+                class="row d-flex vw-100 mx-0"
+                :class="[
+                    isStackedVertically
+                        ? 'flex-column align-items-stretch'
+                        : 'flex-row-reverse align-items-center'
+                ]">
                 <div
                     id="stacked"
                     class="col button-col d-flex px-0">
@@ -61,7 +67,8 @@ export default {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         isForwardButtonHidden: { type: Boolean, default: false },
-        cmsWidgetName: String
+        cmsWidgetName: String,
+        isStackedVertically: { type: Boolean, default: false }
     },
     emits: ['backClicked', 'forwardClicked'],
     data() {
@@ -161,6 +168,17 @@ export default {
     & > .container-fluid {
         overflow-x: visible; // needed to fix hidden footer on some iphones
     }
+    div.flex-column {
+        .btn-primary {
+            width: 100%;
+            justify-content: center;
+        }
+        div.link-col {
+            display: flex;
+            justify-content: center;
+            margin-top: 1.25rem;
+        }
+    }
 }
 .footerImage
 {

From b952cf20707804f781607b771726748607221747 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Mon, 5 Feb 2024 10:46:22 -0500
Subject: [PATCH 05/10] SSR-1064 stacked buttons in sitefooter

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

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index e5ab8427..1aa1d20b 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -31,7 +31,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
-                    buttonSize
+                    :isStackedVertically="true"
                     @backClicked="navigateBack"
                     @ForwardClicked="forwardButtonAction" />
             </div>

From aefadce025223c0a554df3473c04ab7a5a386751 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 5 Feb 2024 14:46:21 -0500
Subject: [PATCH 06/10] Update to what i believe is  our way to do setupMock

---
 .../payment-method-list-button.spec.js         | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
index ec29f8cc..8e95131d 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
@@ -27,13 +27,20 @@ function generateDefaultProps() {
         buttonLabel: testConstants.content.noInline,
         altText: testConstants.content.noInline,
         groupName: 'payment-method',
-        value: testConstants.names.A,
-        buttonImage: testConstants.images.A
+        value: testConstants.names.A
     };
 }
 
-function setupMocks(customMountOptions) {
-    const mountOptions = getMountOptions(customMountOptions);
+function setupMocks(initialData = {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    mountOptions.data = () => (
+        initialData
+    );
 
     const mockMixin = {
         methods: {
@@ -58,7 +65,8 @@ describe('Payment Method Question', () => {
             // Arrange
             const props = generateDefaultProps();
             const { wrapper } = setupMocks({
-                propsData: props
+                propsData: props,
+                hasImage: true
             });
 
             // Act

From 553e6c03f6277334845c9fa87541848173210e16 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 8 Feb 2024 11:12:18 -0500
Subject: [PATCH 07/10] SSR-1064 payment method updates

---
 src/constants/payment-method-constants.js     |  8 +-
 .../payment-method-question.spec.js           | 94 +++++++------------
 .../payment-method-question.vue               | 40 ++++----
 .../payment-method/payment-method.spec.js     | 43 +++++++++
 src/layouts/payment-method/payment-method.vue | 66 ++++---------
 src/store/index.js                            | 14 +--
 src/store/store.spec.js                       | 26 +++++
 7 files changed, 154 insertions(+), 137 deletions(-)
 create mode 100644 src/layouts/payment-method/payment-method.spec.js

diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js
index 8f0ee825..0af1a4de 100644
--- a/src/constants/payment-method-constants.js
+++ b/src/constants/payment-method-constants.js
@@ -1,7 +1,9 @@
-export const paymentMethods = {
+const paymentMethods = Object.freeze({
     NONE: null,
-    LATER: 'Later',
+    PAY_AT_TIME_OF_SERVICE: 'PayAtTimeOfService',
     CREDIT_CARD: 'CreditCard',
     PAYPAL: 'Paypal',
     AFTERPAY: 'Afterpay'
-};
+});
+
+export default paymentMethods;
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
index 4e869c3e..87630d13 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -3,37 +3,34 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js';
 
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
 
-const testConstants = {
-    cms: {
-        question: {
-            text: 'Choose a payment option'
-        },
-        answers: {
-            optionA: {
-                name: 'NameA',
-                text: 'TextA',
-                subText: 'SubTextA',
-                imageId: 'idA',
-                image: 'imageA',
-                subWidget: 'subWidgetA'
-            },
-            optionB: {
-                name: 'NameB',
-                text: 'TextB',
-                subText: 'SubTextB',
-                imageId: 'idB',
-                image: 'imageB',
-                subWidget: 'subWidgetB'
-            }
-        }
-    }
-};
-
 let cmsContent;
 
+const mockCmsContent = {
+    QuestionText: 'Choose a payment option',
+    Answers: [
+        {
+            Name: 'NameA',
+            Text: 'TextA',
+            SubText: 'SubTextA',
+            ImageId: 'idA',
+            AnswerImageUrl: 'imageA',
+            SubWidgetName: 'subWidgetA'
+        },
+        {
+            Name: 'NameB',
+            Text: 'TextB',
+            SubText: 'SubTextB',
+            ImageId: 'idB',
+            AnswerImageUrl: 'imageB',
+            SubWidgetName: 'subWidgetB'
+        }
+    ]
+};
+
 function generateDefaultProps() {
     return {
-        modelValue: 'modelValue'
+        modelValue: 'modelValue',
+        cmsWidgetName: 'PaymentMethodWidget'
     };
 }
 
@@ -42,7 +39,7 @@ function setupMocks(customMountOptions) {
 
     const mockMixin = {
         methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent[cmsFieldName])
         }
     };
 
@@ -55,31 +52,8 @@ function setupMocks(customMountOptions) {
 
 describe('Payment Method Question', () => {
     beforeEach(() => {
-        cmsContent = {
-            PaymentMethodWidget: {
-                QuestionText: testConstants.cms.question,
-                Answers: [
-                    {
-                        Name: testConstants.cms.answers.optionA.name,
-                        Text: testConstants.cms.answers.optionA.text,
-                        SubText: testConstants.cms.answers.optionA.subText,
-                        ImageId: testConstants.cms.answers.optionA.imageId,
-                        AnswerImageUrl: testConstants.cms.answers.optionA.image,
-                        SubWidgetName: testConstants.cms.answers.optionA.subWidget
-                    },
-                    {
-                        Name: testConstants.cms.answers.optionB.name,
-                        Text: testConstants.cms.answers.optionB.text,
-                        SubText: testConstants.cms.answers.optionB.subText,
-                        ImageId: testConstants.cms.answers.optionB.imageId,
-                        AnswerImageUrl: testConstants.cms.answers.optionB.image,
-                        SubWidgetName: testConstants.cms.answers.optionB.subWidget
-                    }
-                ]
-            }
-        };
+        cmsContent = mockCmsContent;
     });
-
     it('Should map cms content correctly', () => {
         // Arrange
         const props = generateDefaultProps();
@@ -94,18 +68,18 @@ describe('Payment Method Question', () => {
         // Assert
         expect(mappedContent).toEqual([
             {
-                buttonLabel: testConstants.cms.answers.optionA.text,
-                altText: testConstants.cms.answers.optionA.text,
+                buttonLabel: cmsContent.Answers[0].Text,
+                altText: cmsContent.Answers[0].Text,
                 groupName: 'payment-method',
-                value: testConstants.cms.answers.optionA.name,
-                buttonImage: testConstants.cms.answers.optionA.image
+                value: cmsContent.Answers[0].Name,
+                buttonImage: cmsContent.Answers[0].AnswerImageUrl
             },
             {
-                buttonLabel: testConstants.cms.answers.optionB.text,
-                altText: testConstants.cms.answers.optionB.text,
+                buttonLabel: cmsContent.Answers[1].Text,
+                altText: cmsContent.Answers[1].Text,
                 groupName: 'payment-method',
-                value: testConstants.cms.answers.optionB.name,
-                buttonImage: testConstants.cms.answers.optionB.image
+                value: cmsContent.Answers[1].Name,
+                buttonImage: cmsContent.Answers[1].AnswerImageUrl
             }
         ]);
     });
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
index 78767538..f793e3ea 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -15,7 +15,9 @@
 </template>
 
 <script>
+
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import widgetFields from '@/constants/cms-widget-fields.js';
 import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue';
 
 export default {
@@ -25,8 +27,10 @@ export default {
     },
     props: {
         modelValue: String,
-        validationRules: String
+        validationRules: String,
+        cmsWidgetName: String
     },
+    emits: ['update:modelValue'],
     data() {
         return {
             paymentMethodListButton
@@ -34,33 +38,31 @@ export default {
     },
     computed: {
         selectedMethod: {
-            get: function () {
+            get() {
                 return this.modelValue;
             },
-            set: function (selectedMethod) {
+            set(selectedMethod) {
                 this.$emit('update:modelValue', selectedMethod);
-            },
+            }
         },
         paymentMethodQuestionText() {
-            return this.getCmsContent('PaymentMethodWidget', 'QuestionText');
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
         },
         paymentMethodAnswerData() {
-            const cmsData = this.getAnswersNullSafe('PaymentMethodWidget');
+            const cmsData = this.getAnswersNullSafe(this.cmsWidgetName);
 
-            return cmsData.map((answer) => {
-                return {
-                    buttonLabel: answer.Text,
-                    altText: answer.Text,
-                    groupName: 'payment-method',
-                    value: answer.Name,
-                    buttonImage: answer.AnswerImageUrl
-                };
-            });
+            return cmsData.map((answer) => ({
+                buttonLabel: answer.Text,
+                altText: answer.Text,
+                groupName: 'payment-method',
+                value: answer.Name,
+                buttonImage: answer.AnswerImageUrl
+            }));
         }
     },
     methods: {
         getAnswersNullSafe(widgetName) {
-            const rawData = this.getCmsContent(widgetName, 'Answers');
+            const rawData = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS);
 
             if (!rawData) {
                 return [];
@@ -72,11 +74,11 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .payment-method-question {
-    .question-text span {
+    :deep(.question-text span) {
         text-align: left;
-        line-height: 24px;
+        line-height: 1.5rem;
     }
 }
 </style>
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
new file mode 100644
index 00000000..dc31f064
--- /dev/null
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -0,0 +1,43 @@
+// Components
+import paymentMethod from '@/layouts/payment-method/payment-method.vue';
+
+// Supporting Files
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+import paymentMethods from '@/constants/payment-method-constants';
+
+function setupMocks() {
+    const mountOptions = getMountOptions();
+
+    const wrapper = shallowMount(paymentMethod, mountOptions);
+
+    return { wrapper };
+}
+
+describe('payment-method.vue', () => {
+    test('getting payment method when method is pay later', async () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+        const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
+        useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
+
+        // Act
+        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+
+        // Assert
+        expect(paymethod).toBe(payLaterPaymentMethod);
+    });
+    test('getting payment method when method is pay in advance', async () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+        const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
+        useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
+
+        // Act
+        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+
+        // Assert
+        expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+    });
+});
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 1aa1d20b..57e425f3 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -22,9 +22,9 @@
                 <hr class="my-5" />
                 <div>Pia Alert Placeholder</div>
                 <paymentMethodQuestion
-                        v-if="!isPiaDisabled"
                         v-model="paymentMethodInternalModel"
-                        validationRules="option-required" />
+                        cmsWidgetName="PaymentMethodWidget"
+                        :validationRules="rules.optionRequired" />
                 <div>Pia Disabled Placeholder</div>
                 <siteFooter
                     ref="siteFooter"
@@ -51,15 +51,15 @@ import paymentMethodQuestion from '@/layouts/payment-method/payment-method-quest
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { paymentMethods } from '@/constants/payment-method-constants';
-
+import paymentMethods from '@/constants/payment-method-constants';
+import globalRules from '@/constants/global-rules';
 import { Form, defineRule } from 'vee-validate';
 
 import { required } from '@/helpers/validation-rules';
 import errorMessages from '@/constants/error-messages';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
-defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
+defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: 'payment-method',
@@ -93,21 +93,24 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
 
-            vm.updateFooterButtonText(vm.customCtaCopy);
+            vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
 
             vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
         });
     },
     data() {
         return {
-            paymentMethodInternalModel: this.getPaymentMethodFromStore()
+            paymentMethodInternalModel: this.getPaymentMethodFromStore(),
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     computed: {
         damageInfo() {
             return useMainStore().order.damage;
         },
-        customCtaCopy() {
+        customCallToActionButtonCopy() {
             switch (this.paymentMethod) {
                 case paymentMethods.CREDIT_CARD:
                     return 'Continue to checkout';
@@ -119,28 +122,12 @@ export default {
                     return null;
             }
         },
-        isPiaDisabled() {
-            // do we have this experiment in NextGen ISS?
-
-            /*
-            const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
-
-            const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
-
-            return !isEnabled;
-            */
-            return false;
-        },
         paymentMethod() {
-            if (this.isPiaDisabled) {
-                return paymentMethods.LATER;
-            }
-
             return this.paymentMethodInternalModel;
         }
     },
     watch: {
-        customCtaCopy(newValue) {
+        customCallToActionButtonCopy(newValue) {
             this.updateFooterButtonText(newValue);
         }
     },
@@ -214,36 +201,19 @@ export default {
             );
         },
         getPaymentMethodFromStore() {
-            const { piaType } = useMainStore().order.payment;
-            const isPia = useMainStore().order.payment.isPia && !!piaType;
+            const { payInAdvanceType } = useMainStore().order.payment;
+            const isPayInAdvance = useMainStore().order.payment.isPayInAdvance && !!payInAdvanceType;
 
-            return isPia ? piaType : paymentMethods.LATER;
+            return isPayInAdvance ? payInAdvanceType : paymentMethods.PAY_AT_TIME_OF_SERVICE;
         },
         updateFooterButtonText(newValue) {
             this.$refs.siteFooter.updateButtonText(newValue);
         },
         async forwardButtonAction() {
+            // Multiple paths based on payment
+            console.log('forward button hit...');
+
             await useMainStore().savePaymentMethodChoice(this.paymentMethod);
-
-            if (this.paymentMethod === paymentMethods.LATER) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
-            } else {
-                this.setupPia();
-            }
-        },
-        async setupPia() {
-            this.$refs.loadingModal.showModal();
-
-            // if we don't have a work order in delete substatus, set the flag and submit.
-            // we need a work order number for pia so we can pass it to safeliteHop.
-
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_PAY_NOW,
-                this.$route
-            );
         }
     }
 };
diff --git a/src/store/index.js b/src/store/index.js
index 44180935..c8623193 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
-import { paymentMethods } from '@/constants/payment-method-constants';
+import paymentMethods from '@/constants/payment-method-constants';
 
 const storeId = 'main';
 
@@ -149,8 +149,8 @@ const getDefaultState = () => ({
                 claimNumber: null
             },
             parentAccountNumber: 0,
-            isPia: null,
-            piaType: null
+            isPayInAdvance: null,
+            payInAdvanceType: null
         },
         contactInfo: {
             firstName: null,
@@ -2141,10 +2141,10 @@ export const useMainStore = defineStore({
         },
 
         savePaymentMethodChoice(paymentMethod) {
-            const isPia = paymentMethod !== paymentMethods.LATER;
-            this.order.payment.isPia = isPia;
-            this.order.payment.piaType = isPia ? paymentMethod : null;
-        },
+            const isPayInAdvance = paymentMethod !== paymentMethods.PAY_AT_TIME_OF_SERVICE;
+            this.order.payment.isPayInAdvance = isPayInAdvance;
+            this.order.payment.payInAdvanceType = isPayInAdvance ? paymentMethod : null;
+        }
 
     },
     persist: true
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 3c9599e5..108b5900 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -3,6 +3,7 @@ import { useMainStore } from '@/store/index.js';
 import globalMethods from '@/global-methods.js';
 import { getRandomString, getRandomGuid, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
 import coverageStatuses from '@/constants/coverage-statuses.js';
+import paymentMethods from '@/constants/payment-method-constants';
 import { endpoints } from '@/constants/endpoints';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
@@ -2083,4 +2084,29 @@ describe('Store', () => {
             expect(store.order.policy.policyLookupSuccessful).toBe(false);
         });
     });
+
+    describe('savePaymentMethodChoice method', () => {
+        it('isPayInAdvance saved as false when choice is to pay at time of servce', () => {
+            // Arrange
+            const paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
+
+            // Act
+            store.savePaymentMethodChoice(paymentMethod);
+
+            // Assert
+            expect(store.order.payment.isPayInAdvance).toEqual(false);
+            expect(store.order.payment.payInAdvanceType).toEqual(null);
+        });
+        it('isPayInAdvance saved as true when choice is other than to pay at time of servce', () => {
+            // Arrange
+            const paymentMethod = paymentMethods.CREDIT_CARD;
+
+            // Act
+            store.savePaymentMethodChoice(paymentMethod);
+
+            // Assert
+            expect(store.order.payment.isPayInAdvance).toEqual(true);
+            expect(store.order.payment.payInAdvanceType).toEqual(paymentMethod);
+        });
+    });
 });

From 57b61ac0bf9ce7062db52383f04910dbf4c11d3e Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 8 Feb 2024 14:37:56 -0500
Subject: [PATCH 08/10] SSR-1064 moved getInputQuestionWidgetAnswersNullSafe
 into base-mixin

---
 .../payment-method-question.spec.js           |  6 +-
 .../payment-method-question.vue               | 13 +---
 .../damage-review/damage-review.vue           | 12 +---
 src/layouts/tpa-submit/tpa-submit.vue         | 10 +---
 src/mixins/base-mixin.js                      |  5 ++
 src/mixins/base-mixin.spec.js                 | 60 +++++++++++++++++++
 6 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
index 87630d13..97194f10 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -1,13 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
-
+import widgetFields from '@/constants/cms-widget-fields.js';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
 
 let cmsContent;
 
 const mockCmsContent = {
-    QuestionText: 'Choose a payment option',
-    Answers: [
+    [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose a payment option',
+    [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [
         {
             Name: 'NameA',
             Text: 'TextA',
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
index f793e3ea..d8376879 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -49,7 +49,7 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
         },
         paymentMethodAnswerData() {
-            const cmsData = this.getAnswersNullSafe(this.cmsWidgetName);
+            const cmsData = this.getInputQuestionWidgetAnswersNullSafe(this.cmsWidgetName);
 
             return cmsData.map((answer) => ({
                 buttonLabel: answer.Text,
@@ -59,17 +59,6 @@ export default {
                 buttonImage: answer.AnswerImageUrl
             }));
         }
-    },
-    methods: {
-        getAnswersNullSafe(widgetName) {
-            const rawData = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS);
-
-            if (!rawData) {
-                return [];
-            }
-
-            return rawData;
-        }
     }
 };
 </script>
diff --git a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue
index ac93b4bf..532035b5 100644
--- a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue
+++ b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue
@@ -33,20 +33,14 @@ export default {
         },
         driverSideDamageAnswers() {
             const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
-            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         passengerSideDamageAnswers() {
             const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
-            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         locationAnswers() {
-            return this.getAnswersNullSafe(this.damageLocationsWidgetName);
-        }
-    },
-    methods: {
-        getAnswersNullSafe(widgetName) {
-            const rawAnswers = this.getCmsContent(widgetName, 'Answers');
-            return rawAnswers || [];
+            return this.getInputQuestionWidgetAnswersNullSafe(this.damageLocationsWidgetName);
         }
     }
 };
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 2d061854..590a4645 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -208,15 +208,15 @@ export default {
             return [line];
         },
         locationAnswers() {
-            return this.getAnswersNullSafe(this.widget.damageLocations);
+            return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
         },
         driverSideDamageAnswers() {
             const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
-            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         passengerSideDamageAnswers() {
             const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
-            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
         },
         getDamageLines() {
             const { glassToReplace, isRepair } = useMainStore().order.damage;
@@ -285,10 +285,6 @@ export default {
                         return null;
                 }
             },
-            getAnswersNullSafe(widgetName) {
-                const rawAnswers = this.getCmsContent(widgetName, 'Answers');
-                return rawAnswers || [];
-            },
             openContactDetailsModal() {
                 this.$refs.contactDetailsDrawer.openModal();
             }
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 49e1e936..957cc6a1 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -5,6 +5,7 @@ import vehicleCategories from '@/constants/vehicle-categories.js';
 import queryStrings from '@/constants/query-strings';
 import dynamicStrings from '@/constants/dynamic-strings';
 import routerParams from '@/router/router-constants/router-params';
+import widgetFields from '@/constants/cms-widget-fields.js';
 
 export default {
     data() {
@@ -19,6 +20,10 @@ export default {
         getCmsContent(widgetName, fieldName) {
             return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
         },
+        getInputQuestionWidgetAnswersNullSafe(widgetName) {
+            const rawAnswers = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS);
+            return rawAnswers || [];
+        },
         getFooterInfoBoxHeight() {
             const footerInfoBox = document.querySelector('.footer#infoBox');
             return footerInfoBox ? footerInfoBox.offsetHeight : 0;
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index 30f2ff0c..53f7f880 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -1,5 +1,6 @@
 import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
+import widgetFields from '@/constants/cms-widget-fields.js';
 
 describe('base-mixin', () => {
     it('should set and get cms content', () => {
@@ -20,4 +21,63 @@ describe('base-mixin', () => {
         const localThis = { cmsWidgetName: 'testWidget' };
         expect(baseMixin.computed.cssClassNameForCmsWidget.call(localThis)).toBe('widget-name-testWidget');
     });
+
+    it('getInputQuestionWidgetAnswersNullSafe returns an empty array when the input question widget has no answers', () => {
+        // Arrange
+        const widgetName = 'inputQuestionWidget';
+        const wrapper = shallowMount(baseMixin, {
+            propsData: {
+                cmsContentByWidget: {}
+            }
+        });
+        const cmsContent = {
+            [widgetName]: {
+                [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option',
+                [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: []
+            }
+        };
+        wrapper.componentVM.setCmsContent(cmsContent);
+
+        // Act
+        const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName);
+
+        // Assert
+        expect(answers).not.toBeNull(); // Check that answers is not null
+        expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array
+        expect(answers).toHaveLength(0); // Check that answers is empty
+    });
+
+    it('getInputQuestionWidgetAnswersNullSafe returns a non-empty array when the input question widget has answers', () => {
+        // Arrange
+        const widgetName = 'inputQuestionWidget';
+        const wrapper = shallowMount(baseMixin, {
+            propsData: {
+                cmsContentByWidget: {}
+            }
+        });
+        const cmsContent = {
+            [widgetName]: {
+                [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option',
+                [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [
+                    {
+                        Name: 'NameA',
+                        Text: 'TextA'
+                    },
+                    {
+                        Name: 'NameB',
+                        Text: 'TextB'
+                    }
+                ]
+            }
+        };
+        wrapper.componentVM.setCmsContent(cmsContent);
+
+        // Act
+        const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName);
+
+        // Assert
+        expect(answers).not.toBeNull(); // Check that answers is not null
+        expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array
+        expect(answers).not.toHaveLength(0); // Check that answers is not empty
+    });
 });

From 608668fb9f11b0a67f52525d213efef3b40cadd6 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 8 Feb 2024 15:39:02 -0500
Subject: [PATCH 09/10] SSR-1064 mock mixin updates in unit tests

---
 .../payment-method-question.spec.js                  |  2 ++
 .../damage-review/damage-review.spec.js              |  2 ++
 src/layouts/tpa-submit/tpa-submit.spec.js            | 12 ++++++++++--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
index 97194f10..6d671280 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
+import baseMixin from '@/mixins/base-mixin';
 
 let cmsContent;
 
@@ -39,6 +40,7 @@ function setupMocks(customMountOptions) {
 
     const mockMixin = {
         methods: {
+            ...baseMixin.methods,
             getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent[cmsFieldName])
         }
     };
diff --git a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js
index 5e369a72..1d5ec7b7 100644
--- a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js
+++ b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js
@@ -7,6 +7,7 @@ import { useMainStore } from '@/store';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { getDamageDisplayContent } from '@/helpers/damage-review-content-generator.js';
+import baseMixin from '@/mixins/base-mixin';
 
 jest.mock('@/helpers/damage-review-content-generator.js', () => ({
     getDamageDisplayContent: jest.fn(),
@@ -16,6 +17,7 @@ jest.mock('@/helpers/damage-review-content-generator.js', () => ({
 let cmsContent;
 const mockMixin = {
     methods: {
+        ...baseMixin.methods,
         getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
     }
 };
diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js
index 53ad8b54..aaadc048 100644
--- a/src/layouts/tpa-submit/tpa-submit.spec.js
+++ b/src/layouts/tpa-submit/tpa-submit.spec.js
@@ -11,6 +11,7 @@ import settleAllPromises from '@/helpers/layout-helper.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { toTitleCase, formatAddress, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
 import { getDamageDisplayContent } from '@/helpers/damage-review-content-generator.js';
+import baseMixin from '@/mixins/base-mixin';
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -35,6 +36,12 @@ jest.mock('@/helpers/damage-review-content-generator.js', () => ({
 // Mock our module for promises.
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
+const mockMixin = {
+    methods: {
+        ...baseMixin.methods
+    }
+};
+
 function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
     const mountOptions = getMountOptions({
         router: {
@@ -52,6 +59,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
 
     mountOptions.global.plugins = [testingPinia];
     mountOptions.data = () => (initialData);
+    mountOptions.mixins = [mockMixin];
 
     const apiResponses = { cmsContent: {} };
 
@@ -775,14 +783,14 @@ describe('tpa-submit', () => {
             [[], []],
             [undefined, []],
             [null, []]
-        ])('getAnswersNullSafe', (rawAnswers, expected) => {
+        ])('getInputQuestionWidgetAnswersNullSafe', (rawAnswers, expected) => {
             // Arrange
             const widgetName = 'WidgetName';
             const { wrapper } = getMountedComponent();
             wrapper.vm.getCmsContent = jest.fn().mockImplementationOnce(() => rawAnswers);
 
             // Act
-            const result = wrapper.vm.getAnswersNullSafe(widgetName);
+            const result = wrapper.vm.getInputQuestionWidgetAnswersNullSafe(widgetName);
 
             // Assert
             expect(result).toEqual(expected);

From 53393721c67927536023c411af705828411324c9 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Mon, 12 Feb 2024 13:39:11 -0500
Subject: [PATCH 10/10] SSR-1064 small updates

---
 .../payment-method-list-button.vue                       | 2 +-
 src/layouts/payment-method/payment-method.vue            | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
index 871f8ba7..0f834cbc 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -117,7 +117,7 @@ export default {
 
     span {
         &.small {
-            font-size: 0.75rem;
+            font-size: $font-size-xsm;
             color: $gray-550;
         }
     }
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 57e425f3..10ebc609 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -53,14 +53,10 @@ import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import paymentMethods from '@/constants/payment-method-constants';
 import globalRules from '@/constants/global-rules';
-import { Form, defineRule } from 'vee-validate';
+import { Form } from 'vee-validate';
 
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
-defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
-
 export default {
     name: 'payment-method',
     components: {
@@ -210,9 +206,6 @@ export default {
             this.$refs.siteFooter.updateButtonText(newValue);
         },
         async forwardButtonAction() {
-            // Multiple paths based on payment
-            console.log('forward button hit...');
-
             await useMainStore().savePaymentMethodChoice(this.paymentMethod);
         }
     }