From 91379ef2711246d59473c6d327305c5bcb849435 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 30 Aug 2023 17:20:26 -0400
Subject: [PATCH 01/16] Initial blockout

---
 .../payment-method-question.spec.js           |   0
 .../payment-method-question.vue               | 135 ++++++++++++++++++
 src/layouts/payment-method/payment-method.vue |   7 +-
 3 files changed, 141 insertions(+), 1 deletion(-)
 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/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 000000000..e69de29bb
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 000000000..6622837f1
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="payment-method-question">
+        <buttonQuestion
+            groupName="payment-time"
+            questionText="Time text"
+            :answers="paymentTimeAnswerData"
+            isRequired
+            v-model="paymentTime"
+            textPosition="text-start" />
+        <div>
+            <hr />
+            <buttonQuestion
+                v-if="shouldDisplaySecondaryQuestion"
+                groupName="payment-method"
+                questionText="Method Text"
+                :answers="paymentMethodAnswerData"
+                isRequired
+                v-model="selectedMethod" />
+        </div>
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
+const paymentMethods = {
+    NONE: null,
+    LATER: "Later",
+    CREDIT_CARD: "CreditCard",
+    PAYPAL: "Paypal",
+    AFTERPAY: "Afterpay",
+};
+
+const payTimes = {
+    NONE: null,
+    ADVANCE: "Advance",
+    LATER: "Later",
+};
+
+export default {
+    name: "payment-method-question",
+    data() {
+        return {
+            paymentTime: this.inferPayInAdvanceValue(),
+        };
+    },
+    props: {
+        modelValue: String,
+    },
+    methods: {
+        inferPayInAdvanceValue() {
+            if (this.modelValue === paymentMethods.NONE) {
+                return payTimes.NONE;
+            }
+
+            if (this.modelValue === paymentMethods.LATER) {
+                return payTimes.LATER;
+            }
+
+            return payTimes.ADVANCE;
+        },
+    },
+    computed: {
+        selectedMethod: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (selectedMethod) {
+                this.$emit("update:modelValue", selectedMethod);
+            },
+        },
+        shouldDisplaySecondaryQuestion() {
+            return this.paymentTime === payTimes.ADVANCE;
+        },
+        paymentTimeAnswerData() {
+            return [
+                {
+                    buttonLabel: "Pay now",
+                    altText: "Pay now",
+                    groupName: "payment-time",
+                    value: payTimes.ADVANCE,
+                },
+                {
+                    buttonLabel: "Pay during my appointment",
+                    altText: "Pay during my appointment",
+                    groupName: "payment-time",
+                    value: payTimes.LATER,
+                },
+            ];
+        },
+        paymentMethodAnswerData() {
+            return [
+                {
+                    buttonLabel: "Credit or Debit",
+                    altText: "Credit or Debit",
+                    groupName: "payment-method",
+                    value: paymentMethods.CREDIT_CARD,
+                },
+                {
+                    buttonLabel: "Paypal",
+                    altText: "Paypal",
+                    groupName: "payment-method",
+                    value: paymentMethods.PAYPAL,
+                },
+                {
+                    buttonLabel: "Afterpay",
+                    altText: "Afterpay",
+                    groupName: "payment-method",
+                    value: paymentMethods.AFTERPAY,
+                },
+            ];
+        },
+    },
+    watch: {
+        paymentTime(newValue) {
+            if (newValue === payTimes.LATER) {
+                this.selectedMethod = paymentMethods.LATER;
+            } else {
+                this.selectedMethod = paymentMethods.NONE;
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.payment-method-question {
+    span {
+        text-align: left;
+    }
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index ff5cb0e35..2cafd9a1d 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -5,6 +5,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
+            <paymentMethodQuestion v-model="test" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <funnel-footer
                     cmsWidgetName="FunnelFooterWidget"
@@ -22,6 +23,7 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -51,7 +53,9 @@ export default {
         });
     },
     data() {
-        return {};
+        return {
+            test: null,
+        };
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -66,6 +70,7 @@ export default {
         funnelFooter,
         funnelSubHeader,
         Form,
+        paymentMethodQuestion,
     },
 };
 </script>

From 0777a1ec578a82919e88a34f103f88503d26a405 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 31 Aug 2023 13:14:59 -0400
Subject: [PATCH 02/16] Shift conditional rendering order

---
 .../payment-method-question/payment-method-question.vue        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 6622837f1..116470041 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
@@ -7,10 +7,9 @@
             isRequired
             v-model="paymentTime"
             textPosition="text-start" />
-        <div>
+        <div v-if="shouldDisplaySecondaryQuestion">
             <hr />
             <buttonQuestion
-                v-if="shouldDisplaySecondaryQuestion"
                 groupName="payment-method"
                 questionText="Method Text"
                 :answers="paymentMethodAnswerData"

From f14c424d2340b64d5f043b90a658328757e8d0be Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 31 Aug 2023 15:38:12 -0400
Subject: [PATCH 03/16] Fetch text from cms

---
 .../payment-method-question.vue               | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)

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 116470041..72d1c7732 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
@@ -2,7 +2,7 @@
     <div class="payment-method-question">
         <buttonQuestion
             groupName="payment-time"
-            questionText="Time text"
+            :questionText="paymentTimeQuestionText"
             :answers="paymentTimeAnswerData"
             isRequired
             v-model="paymentTime"
@@ -11,10 +11,11 @@
             <hr />
             <buttonQuestion
                 groupName="payment-method"
-                questionText="Method Text"
+                :questionText="paymentMethodQuestionText"
                 :answers="paymentMethodAnswerData"
                 isRequired
-                v-model="selectedMethod" />
+                v-model="selectedMethod"
+                textPosition="text-start" />
         </div>
     </div>
 </template>
@@ -58,6 +59,15 @@ export default {
 
             return payTimes.ADVANCE;
         },
+        getAnswersNullSafe(widgetName) {
+            const rawData = this.getCmsContent(widgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
+        },
     },
     computed: {
         selectedMethod: {
@@ -71,43 +81,35 @@ export default {
         shouldDisplaySecondaryQuestion() {
             return this.paymentTime === payTimes.ADVANCE;
         },
+        paymentTimeQuestionText() {
+            return this.getCmsContent("PaymentTimeWidget", "QuestionText");
+        },
+        paymentMethodQuestionText() {
+            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
+        },
         paymentTimeAnswerData() {
-            return [
-                {
-                    buttonLabel: "Pay now",
-                    altText: "Pay now",
+            const cmsData = this.getAnswersNullSafe("PaymentTimeWidget");
+
+            return cmsData.map((answer) => {
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
                     groupName: "payment-time",
-                    value: payTimes.ADVANCE,
-                },
-                {
-                    buttonLabel: "Pay during my appointment",
-                    altText: "Pay during my appointment",
-                    groupName: "payment-time",
-                    value: payTimes.LATER,
-                },
-            ];
+                    value: answer.Name,
+                };
+            });
         },
         paymentMethodAnswerData() {
-            return [
-                {
-                    buttonLabel: "Credit or Debit",
-                    altText: "Credit or Debit",
+            const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+
+            return cmsData.map((answer) => {
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
                     groupName: "payment-method",
-                    value: paymentMethods.CREDIT_CARD,
-                },
-                {
-                    buttonLabel: "Paypal",
-                    altText: "Paypal",
-                    groupName: "payment-method",
-                    value: paymentMethods.PAYPAL,
-                },
-                {
-                    buttonLabel: "Afterpay",
-                    altText: "Afterpay",
-                    groupName: "payment-method",
-                    value: paymentMethods.AFTERPAY,
-                },
-            ];
+                    value: answer.Name,
+                };
+            });
         },
     },
     watch: {
@@ -127,7 +129,7 @@ export default {
 
 <style lang="scss">
 .payment-method-question {
-    span {
+    .question-text span {
         text-align: left;
     }
 }

From 604dda85266cd60baf24710929f5348b81147026 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 5 Sep 2023 10:07:46 -0400
Subject: [PATCH 04/16] Bind & compute CTA text

---
 src/layouts/payment-method/payment-method.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 2cafd9a1d..3d8486234 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -5,7 +5,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
-            <paymentMethodQuestion v-model="test" />
+            <paymentMethodQuestion v-model="paymentMethod" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <funnel-footer
                     cmsWidgetName="FunnelFooterWidget"
@@ -54,7 +54,7 @@ export default {
     },
     data() {
         return {
-            test: null,
+            paymentMethod: null,
         };
     },
     methods: {
@@ -65,6 +65,20 @@ export default {
         backButtonAction() {},
         forwardButtonAction() {},
     },
+    computed: {
+        customCtaCopy() {
+            switch (this.paymentMethod) {
+                case "CreditCard":
+                    return "Continue to checkout";
+                case "Paypal":
+                    return "Continue to Paypal";
+                case "Afterpay":
+                    return "Continue to Afterpay";
+                default:
+                    return null;
+            }
+        },
+    },
     components: {
         funnelHeader,
         funnelFooter,

From 57e520d2c45aa3d015f9e01bd108c17922b64e8d Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 7 Sep 2023 17:24:26 -0400
Subject: [PATCH 05/16] Move hard-coded values to constants file

---
 src/constants/payment-method-constants.js     | 13 ++++++++++
 .../payment-method-question.vue               | 24 +++++--------------
 src/layouts/payment-method/payment-method.vue |  7 +++---
 3 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 src/constants/payment-method-constants.js

diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js
new file mode 100644
index 000000000..807e44c0e
--- /dev/null
+++ b/src/constants/payment-method-constants.js
@@ -0,0 +1,13 @@
+export const paymentMethods = {
+    NONE: null,
+    LATER: "Later",
+    CREDIT_CARD: "CreditCard",
+    PAYPAL: "Paypal",
+    AFTERPAY: "Afterpay",
+};
+
+export const paymentTimes = {
+    NONE: null,
+    ADVANCE: "Advance",
+    LATER: "Later",
+};
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 72d1c7732..ecd461bec 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
@@ -23,19 +23,7 @@
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
-const paymentMethods = {
-    NONE: null,
-    LATER: "Later",
-    CREDIT_CARD: "CreditCard",
-    PAYPAL: "Paypal",
-    AFTERPAY: "Afterpay",
-};
-
-const payTimes = {
-    NONE: null,
-    ADVANCE: "Advance",
-    LATER: "Later",
-};
+import { paymentMethods, paymentTimes } from "@/constants/payment-method-constants";
 
 export default {
     name: "payment-method-question",
@@ -50,14 +38,14 @@ export default {
     methods: {
         inferPayInAdvanceValue() {
             if (this.modelValue === paymentMethods.NONE) {
-                return payTimes.NONE;
+                return paymentTimes.NONE;
             }
 
             if (this.modelValue === paymentMethods.LATER) {
-                return payTimes.LATER;
+                return paymentTimes.LATER;
             }
 
-            return payTimes.ADVANCE;
+            return paymentTimes.ADVANCE;
         },
         getAnswersNullSafe(widgetName) {
             const rawData = this.getCmsContent(widgetName, "Answers");
@@ -79,7 +67,7 @@ export default {
             },
         },
         shouldDisplaySecondaryQuestion() {
-            return this.paymentTime === payTimes.ADVANCE;
+            return this.paymentTime === paymentTimes.ADVANCE;
         },
         paymentTimeQuestionText() {
             return this.getCmsContent("PaymentTimeWidget", "QuestionText");
@@ -114,7 +102,7 @@ export default {
     },
     watch: {
         paymentTime(newValue) {
-            if (newValue === payTimes.LATER) {
+            if (newValue === paymentTimes.LATER) {
                 this.selectedMethod = paymentMethods.LATER;
             } else {
                 this.selectedMethod = paymentMethods.NONE;
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 3d8486234..b74e0b220 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -27,6 +27,7 @@ import paymentMethodQuestion from "@/layouts/payment-method/payment-method-quest
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { paymentMethods } from "@/constants/payment-method-constants";
 
 // Validation
 import { Form } from "vee-validate";
@@ -68,11 +69,11 @@ export default {
     computed: {
         customCtaCopy() {
             switch (this.paymentMethod) {
-                case "CreditCard":
+                case paymentMethods.CREDIT_CARD:
                     return "Continue to checkout";
-                case "Paypal":
+                case paymentMethods.PAYPAL:
                     return "Continue to Paypal";
-                case "Afterpay":
+                case paymentMethods.AFTERPAY:
                     return "Continue to Afterpay";
                 default:
                     return null;

From 2aec329c5c42b43fe6106a46be85cf4fea219853 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 7 Sep 2023 17:29:33 -0400
Subject: [PATCH 06/16] Update CTA when new method is selected

---
 src/layouts/payment-method/payment-method.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index b74e0b220..472e98ab6 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -8,6 +8,7 @@
             <paymentMethodQuestion v-model="paymentMethod" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <funnel-footer
+                    ref="funnelFooter"
                     cmsWidgetName="FunnelFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     :isBackButtonHidden="shouldHideBackButton"
@@ -80,6 +81,11 @@ export default {
             }
         },
     },
+    watch: {
+        customCtaCopy(newValue) {
+            this.$refs.funnelFooter.updateButtonText(newValue);
+        },
+    },
     components: {
         funnelHeader,
         funnelFooter,

From 32d26c728dde23d43d5cfe280f8cf8d28ed3a9d2 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 28 Sep 2023 12:35:49 -0400
Subject: [PATCH 07/16] Many changes

---
 .../payment-method-list-button.vue            | 125 ++++++++++++++++++
 .../payment-method-question.vue               |  64 ++-------
 src/layouts/payment-method/payment-method.vue |  14 +-
 3 files changed, 147 insertions(+), 56 deletions(-)
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

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 000000000..016b49ca2
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -0,0 +1,125 @@
+<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";
+import { getIn } from "yup/lib/util/reach";
+
+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>
\ No newline at end of file
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 ecd461bec..473e36114 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,52 +1,34 @@
 <template>
     <div class="payment-method-question">
         <buttonQuestion
-            groupName="payment-time"
-            :questionText="paymentTimeQuestionText"
-            :answers="paymentTimeAnswerData"
+            groupName="payment-method"
+            buttonTypeString="payment-method-list-button"
+            :buttonTypeObject="paymentMethodListButton"
+            isWide
+            :questionText="paymentMethodQuestionText"
+            :answers="paymentMethodAnswerData"
             isRequired
-            v-model="paymentTime"
+            v-model="selectedMethod"
             textPosition="text-start" />
-        <div v-if="shouldDisplaySecondaryQuestion">
-            <hr />
-            <buttonQuestion
-                groupName="payment-method"
-                :questionText="paymentMethodQuestionText"
-                :answers="paymentMethodAnswerData"
-                isRequired
-                v-model="selectedMethod"
-                textPosition="text-start" />
-        </div>
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
-
+import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";
 import { paymentMethods, paymentTimes } from "@/constants/payment-method-constants";
 
 export default {
     name: "payment-method-question",
     data() {
         return {
-            paymentTime: this.inferPayInAdvanceValue(),
+            paymentMethodListButton: paymentMethodListButton,
         };
     },
     props: {
         modelValue: String,
     },
     methods: {
-        inferPayInAdvanceValue() {
-            if (this.modelValue === paymentMethods.NONE) {
-                return paymentTimes.NONE;
-            }
-
-            if (this.modelValue === paymentMethods.LATER) {
-                return paymentTimes.LATER;
-            }
-
-            return paymentTimes.ADVANCE;
-        },
         getAnswersNullSafe(widgetName) {
             const rawData = this.getCmsContent(widgetName, "Answers");
 
@@ -66,27 +48,9 @@ export default {
                 this.$emit("update:modelValue", selectedMethod);
             },
         },
-        shouldDisplaySecondaryQuestion() {
-            return this.paymentTime === paymentTimes.ADVANCE;
-        },
-        paymentTimeQuestionText() {
-            return this.getCmsContent("PaymentTimeWidget", "QuestionText");
-        },
         paymentMethodQuestionText() {
             return this.getCmsContent("PaymentMethodWidget", "QuestionText");
         },
-        paymentTimeAnswerData() {
-            const cmsData = this.getAnswersNullSafe("PaymentTimeWidget");
-
-            return cmsData.map((answer) => {
-                return {
-                    buttonLabel: answer.Text,
-                    altText: answer.Text,
-                    groupName: "payment-time",
-                    value: answer.Name,
-                };
-            });
-        },
         paymentMethodAnswerData() {
             const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
 
@@ -96,19 +60,11 @@ export default {
                     altText: answer.Text,
                     groupName: "payment-method",
                     value: answer.Name,
+                    buttonImage: answer.AnswerImageUrl,
                 };
             });
         },
     },
-    watch: {
-        paymentTime(newValue) {
-            if (newValue === paymentTimes.LATER) {
-                this.selectedMethod = paymentMethods.LATER;
-            } else {
-                this.selectedMethod = paymentMethods.NONE;
-            }
-        },
-    },
     components: {
         buttonQuestion,
     },
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 2623b750c..6ada88476 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -5,7 +5,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
-            <paymentMethodQuestion v-model="paymentMethod" />
+            <paymentMethodQuestion v-model="paymentMethodInternalModel" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <navbar
                     ref="funnelFooter"
@@ -56,7 +56,7 @@ export default {
     },
     data() {
         return {
-            paymentMethod: null,
+            paymentMethodInternalModel: null,
         };
     },
     methods: {
@@ -82,6 +82,16 @@ export default {
                     return null;
             }
         },
+        isPiaDisabled() {
+            return false;
+        },
+        paymentMethod() {
+            if (this.isPiaDisabled) {
+                return paymentMethods.LATER;
+            }
+
+            return this.paymentMethodInternalModel;
+        },
     },
     watch: {
         customCtaCopy(newValue) {

From 61a83f4815cfda4c253c2881d598513a3aa8c56c Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 28 Sep 2023 15:26:43 -0400
Subject: [PATCH 08/16] Tests

---
 .../payment-method-list-button.spec.js        | 106 ++++++++++++++
 .../payment-method-list-button.vue            |   3 +-
 .../payment-method-question.spec.js           | 130 ++++++++++++++++++
 3 files changed, 237 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js

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 000000000..76d5326d9
--- /dev/null
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
@@ -0,0 +1,106 @@
+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
index 016b49ca2..a6b61125e 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
@@ -35,7 +35,6 @@
 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 { getIn } from "yup/lib/util/reach";
 
 const INLINE_IMAGE_TOKEN = "custom:inlineImage";
 
@@ -61,7 +60,7 @@ export default {
     },
     computed: {
         tokens() {
-            return splitCopyOnCMSPlaceHolder(this.buttonLabel);
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
         },
         hasImage() {
             return !!this.buttonImage;
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 e69de29bb..f8e48a0ad 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
@@ -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 };
+}

From 26f20b8d5a8108ebbe5df79a375156b9c2c05cf1 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 10 Oct 2023 09:50:33 -0400
Subject: [PATCH 09/16] Formatting

---
 .../payment-method-list-button.spec.js        | 30 +++++++++----------
 .../payment-method-list-button.vue            |  5 ++--
 .../payment-method-question.spec.js           |  8 ++---
 3 files changed, 20 insertions(+), 23 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 76d5326d9..8cf6c55bb 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
@@ -23,9 +23,7 @@ let cmsContent;
 
 describe("Payment Method Question", () => {
     beforeEach(() => {
-        cmsContent = {
-            
-        };
+        cmsContent = {};
     });
 
     describe("Side image", () => {
@@ -33,45 +31,45 @@ describe("Payment Method Question", () => {
             // Arrange
             const props = generateDefaultProps();
             const { wrapper } = setupMocks({
-                propsData: props
+                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
+                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
+                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 a6b61125e..2763f1af9 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
@@ -3,8 +3,7 @@
         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">
+        <div class="button-content list-button-content d-flex flex-row py-3 px-4">
             <img
                 v-if="shouldDisplaySideImage"
                 :id="buttonImageId"
@@ -121,4 +120,4 @@ export default {
         }
     }
 }
-</style>
\ No newline at end of file
+</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
index f8e48a0ad..d3a486d57 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
@@ -25,7 +25,7 @@ const testConstants = {
                 image: "imageB",
                 subWidget: "subWidgetB",
             },
-        }
+        },
     },
 };
 
@@ -83,8 +83,8 @@ describe("Payment Method Question", () => {
                 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,
+            },
         ]);
     });
 
@@ -107,7 +107,7 @@ describe("Payment Method Question", () => {
 
 function generateDefaultProps() {
     return {
-        modelValue: "modelValue"
+        modelValue: "modelValue",
     };
 }
 

From fcc3c5ab9554eb484e2efe62767b682a5977dd4f Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 10 Oct 2023 09:50:50 -0400
Subject: [PATCH 10/16] Initial changes for PIA experiments

---
 src/constants/experiments.js                  |  2 ++
 src/layouts/payment-method/payment-method.vue | 10 ++++++++--
 src/store/index.js                            |  3 +++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index f89aad963..b702b11bb 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -6,6 +6,8 @@ const experimentSettings = {
     GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
     SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
     DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
+    PIA_EXPERIENCE: "PIA Experience",
+    SUBMIT_ORDER_ENABLE_PIA: "SubmitOrder_Enable_PIA",
 };
 
 const experimentTriggers = {
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 6ada88476..f8c4cbb90 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -5,7 +5,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
             <hr class="mt-0" />
-            <paymentMethodQuestion v-model="paymentMethodInternalModel" />
+            <paymentMethodQuestion v-if="!isPiaDisabled" v-model="paymentMethodInternalModel" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <navbar
                     ref="funnelFooter"
@@ -29,6 +29,7 @@ import paymentMethodQuestion from "@/layouts/payment-method/payment-method-quest
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { paymentMethods } from "@/constants/payment-method-constants";
+import { experimentSettings } from "@/constants/experiments";
 
 // Validation
 import { Form } from "vee-validate";
@@ -83,7 +84,12 @@ export default {
             }
         },
         isPiaDisabled() {
-            return false;
+            const piaExperience =
+                this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
+            const enablePIA =
+                this.getSettingValue(experimentSettings.SUBMIT_ORDER_ENABLE_PIA) === "true";
+
+            return !(piaExperience && enablePIA);
         },
         paymentMethod() {
             if (this.isPiaDisabled) {
diff --git a/src/store/index.js b/src/store/index.js
index 0c9a55c41..f86d00058 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -581,7 +581,10 @@ export const getters = {
             funnelServiceCity: state.order.serviceLocation.city,
             funnelServiceState: state.order.serviceLocation.state,
             funnelServiceZipCode: state.order.serviceLocation.zipCode,
+            funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
+            funnelProviderNumber: state.order.serviceLocation.provider.ProviderNumber,
             funnelParentAccountNumber: state.order.payment.parentAccountNumber,
+            funnelReferralType: state.order.payment.isInsurance ? "value if true" : "value if false",
             funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
             funnelHasRecalibrationPart: getHasRecalibrationPart(state),
             funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1,

From e6fc6635c4c290cafc33a8c63da6a67a4a04f870 Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Wed, 11 Oct 2023 10:02:54 -0400
Subject: [PATCH 11/16] CSR-1392

do not pass null items to getTotalPrice logic
---
 src/fmg-components/cart/cart.vue | 4 ++--
 src/mixins/base-mixin.js         | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 3b454071c..67558c323 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -7,7 +7,7 @@
                 @click="toggleClass()">
                 <div class="col d-flex justify-content-between">
                     <span class="label">Amount Due</span
-                    ><span class="label amount-due">${{ amountDue }}</span>
+                    ><span class="label amount-due">{{ amountDue }}</span>
                 </div>
             </div>
             <div class="price-table">
@@ -123,7 +123,7 @@ export default {
             return price;
         },
         getAmountDue() {
-            return baseMixin.methods.getAmountDue(this.storeLineItems);
+            return baseMixin.methods.getDisplayAmountDue(this.storeLineItems);
         },
         removeItem(item) {
             this.$emit("cart-remove", item);
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 74b44c983..1755ee294 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -128,9 +128,11 @@ export default {
             const itemsClone = { ...lineItems };
             delete itemsClone.serverData;
             for (var propertyName in itemsClone) {
-                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
-                    itemsClone[propertyName]
-                );
+                if (itemsClone[propertyName]){
+                    amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
+                        itemsClone[propertyName]
+                    );
+                }
             }
             return amountDue;
         },

From f74d4d5a3bd6c1cce25c7dc96c32f2ac5634140e Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Wed, 11 Oct 2023 10:10:42 -0400
Subject: [PATCH 12/16] CSR-1392

prettier
---
 src/mixins/base-mixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 1755ee294..df03693ee 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -128,7 +128,7 @@ export default {
             const itemsClone = { ...lineItems };
             delete itemsClone.serverData;
             for (var propertyName in itemsClone) {
-                if (itemsClone[propertyName]){
+                if (itemsClone[propertyName]) {
                     amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
                         itemsClone[propertyName]
                     );

From 8134cc9a05376545a62dd78241c9e4c7fa960d6b Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 11 Oct 2023 10:47:37 -0400
Subject: [PATCH 13/16] Replace placeholder buttons with real buttons

---
 src/layouts/payment-method/payment-method.vue | 46 +++----------------
 1 file changed, 6 insertions(+), 40 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index ed9bcf346..e738dda43 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -6,7 +6,6 @@
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
-            <paymentMethodQuestion v-if="!isPiaDisabled" v-model="paymentMethodInternalModel" />
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
@@ -39,46 +38,13 @@
                         :rainDefenseItem="availableRainDefense"
                         vapsTilesCmsName="VapsProductTiles" />
 
-                    <div>
-                        <button v-on:click="ccdPayment">
-                            <img
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAcCAYAAAAjmez3AAAAAXNSR0IArs4c6QAABc5JREFUWAndV2lsVFUU/t42e6cznWmB0mnpwiKgpagsNRIQikECUWM0ERSXHyyaCOGX/BCixkiMBhOwStBEraZG4g8DyCagokLLolithXaYtsPQ6cLMtNPpbO+N575hGohpmZElradJ33v3nnvu+c75zrl3OKTk8V1F0OsKoJU1qaER+5QSPLqjHdAZ2vHFyl7mJ4ePTkl8u2fNotLcTcVWwxiNwMdGLICrjvH07ArFNCc8gcPO857VqF7hBF76alXVp/WJUExJjDY52h5MTH//8K94cVeOmF9geaGq2IqfnF2IyMpIT8agfxzHwSDxsBkNcyReXyjGFKXk3Z9b4PWFiGjcoOJoebFlaSOmcWaHSMgUkScAIjFvFAKhgJPzisLq5n8hIkNBZc7+qdhGGyrmOhOR0aoiPxt+qxGMYcMJYx5TuboWKSNsTWqOtQumk9JL6TDbPCkl6O9fPYXmmH5KUmtS30M92Z7d/dGEqzuSELN1IqqX3wNHtn4o/cHxmJyAJFy75eDUDV+Yc75wFCaNCDqrbqifrsLGfQ1478JlqNRKJwIKUa/O7cOOEy6KQgSTck3YtnQ69QgOjV1BbNjboDq4bek0HHX2oPZsG5ZOy8f6yhJ8WNeK2nNu9AzEkCUJmF9qx7rZE1BgTgbviLMbW4+dV1M9dVw23lg0WQWcDpgUO9IODU8OzyQKzhhnxqEGD/b87SVqJRAngFuONOHAb27kmrTI1kmornPhcKMXuQaNqvfyt+dwwu2Hhmw0U5uvOevGpUBY9TMQjmHrj8042NSJg40d2NvkRV9ETgfDdTpqRq4bGeZDT9GcV2wDtCIG4jLRjMduArXvzw7kUIY2PlACH0X9d08A1hwj5jis+ICyIUdiWFSWj/3PzUHLlX64CMxsmmOy73wSwFMzHfjmrw5E4grCZDtTSTsjKcMmjQCjXqLNFDjJqXeOtyBI3F8zawKm5mWh9o9LiEdlPDwxFw6LHhNtBqpyHsdauvDM12dg1kpYWJqrmvMNRLH5+yYYKIur7y+iORF+ylAodgeAGKlYbXqNSqnPiCJ1riuYnG/BBqoFmWj2XVOX2soXUh2wol5V4cAr88rUWqqpb8Wyz0+iPTCgAtlO9Xbhci+WTBmDBSV2GCnjQcpeOJb5VSnzjNBmNoOEUDiO7Sdd4MnZN6k47UYNTnv8VPh9sFr1uJfAMWF0ZE1h98pZKB1jxsmLV/DluUtoIzC7TrWxnoz+aBxv/9CM/lgcCoHoJTCZSkY1wowbKf0WogI7DHqI608Qtx+ZlKfue6i5G77eMCrL7JhkN+LVg41wU1E/O3M84tS61Usphc5OgWAF30agdQYtdUM/fmnzEaAkpTqpK2YqGQPR053MSjVCnsFEZ8/6ymIYiG5RAna8tUcdryy0qjXE2mrdxR7UUBdThdY+WV6AKfYsAlkPjrJVvexuzHJYEKWaW03drY5qqaPvvwLh0mcYuz6/9tBdWFFRhDyi09zCJIVANjbNn4J1c8tQMdZM9NNg99OzcYbo1uYfUFt1kcWIKmoCrOXufKyCruECqkptg6f6juUz4KGMTs0zZZCQ5AEtcohD6G+CAj5550rDRLlJQLmZDNA5IgfciNNTIIAP2ikg7N4gexH3K3BQ/TgK6buAji12cvEhJEJeUB/Do4WCOiYHLqsg2bb3mWnMwtZ3quvZ2HAiaHgIMWKBVgtRo/TB6KpBkH4C007DrbuJOXJOldQ5fBOmrllqEGIwBhdz0M3gkjXCUSTU19sF5Jrdb+UrxwKTDNIo83zoKFztWozDmR9CQ5u9QzOqz0m6igonxWWdA5JkpN1HV4JESUaUN/OIc1GxM6g9sEdYu3ZVRT4BubXFeLvzwi6Xp8/Wh3CxuVnsaO1+a/P+hnKOEyoXT7Cod6KRDoe1eifdKuiuphxp6Xod1gF3suSf/8SRM3n85rF6aUlCSWjoLBjpWPionGht8fZ9DEP2TmxZEP8H777k8QqWrnUAAAAASUVORK5CYII="
-                                alt="We accept Visa" />
-                        </button>
-                        <button v-on:click="ccdPayment">
-                            <img
-                                src="data:image/png;base64,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"
-                                alt="Mastercard" />
-                        </button>
-                        <button v-on:click="ccdPayment">
-                            <img
-                                src="data:image/png;base64,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"
-                                alt="American Express" />
-                        </button>
-                        <button v-on:click="ccdPayment">
-                            <img
-                                src="data:image/png;base64,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"
-                                alt="and Discover" />
-                        </button>
-                    </div>
-                    <div>
-                        <button v-on:click="paypal">
-                            <img
-                                src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"
-                                alt="PayPal" />
-                        </button>
-                    </div>
-                    <div>
-                        <button v-on:click="afterpay">
-                            <img
-                                src="https://business.afterpay.com/rs/539-RJA-633/images/AP_logo_badge_6328x2204_blackmint_png.png"
-                                width="100"
-                                height="26"
-                                alt="Afterpay" />
-                        </button>
-                    </div>
+                    <paymentMethodQuestion
+                        v-if="!isPiaDisabled"
+                        v-model="paymentMethodInternalModel" />
+                        
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
                         :isForwardActionDisabled="!meta.valid"
                         :isBackButtonHidden="shouldHideBackButton"
                         @back-clicked="backButtonAction"
@@ -354,7 +320,7 @@ export default {
     },
     watch: {
         customCtaCopy(newValue) {
-            this.$refs.funnelFooter.updateButtonText(newValue);
+            this.$refs.navbar.updateButtonText(newValue);
         },
     },
     components: {

From 3abdefe6cda7e056493b02194c5abe5c28646923 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 11 Oct 2023 10:48:15 -0400
Subject: [PATCH 14/16] Add non-placeholder values

---
 src/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index b43e85970..f16b71f11 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -601,7 +601,7 @@ export const getters = {
             funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
             funnelProviderNumber: state.order.serviceLocation.provider.ProviderNumber,
             funnelParentAccountNumber: state.order.payment.parentAccountNumber,
-            funnelReferralType: state.order.payment.isInsurance ? "value if true" : "value if false",
+            funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
             funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
             funnelHasRecalibrationPart: getHasRecalibrationPart(state),
             funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1,

From acd658eb14f9d2feaf368a4f80124c53be746fa5 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 11 Oct 2023 10:48:22 -0400
Subject: [PATCH 15/16] Formatting

---
 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 e738dda43..eac00fe15 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -41,7 +41,7 @@
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
                         v-model="paymentMethodInternalModel" />
-                        
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"

From ad2a1001e6a272f143e53fb5e14a198522d8ea3a Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 11 Oct 2023 13:22:49 -0400
Subject: [PATCH 16/16] Fix unit tests

---
 .../payment-method/payment-method.spec.js     | 47 ++++++++++++++-----
 src/store/index.js                            |  2 +-
 src/store/store.spec.js                       | 44 +++++++++++++++++
 3 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 130a2def4..803f10829 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -5,6 +5,7 @@ import customerDetails from "@/layouts/payment-method/payment-method.vue";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
+import { experimentSettings } from "@/constants/experiments";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -15,6 +16,8 @@ jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
     submitWorkOrder: jest.fn(),
 }));
 
+let piaDisabledFlag = false;
+
 describe("payment-method.vue", () => {
     describe("navigation", () => {
         test("if the back button is clicked, navigate back", async () => {
@@ -52,19 +55,37 @@ function setupMocks() {
         },
     };
 
-    const wrapper = shallowMount(
-        customerDetails,
-        getMountOptions({
-            router: {
-                navigate: jest.fn(),
-                navigateWithSaving: jest.fn(),
-                navigateWithoutSaving: jest.fn(),
-            },
-            store: {
-                getters: store.getters,
-            },
-        })
-    );
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+        store: {
+            getters: store.getters,
+        },
+    });
+
+    const mockMixin = {
+        methods: {
+            getSettingValue: jest.fn((settingName) => {
+                if (!piaDisabledFlag) {
+                    if (settingName === experimentSettings.PIA_EXPERIENCE) {
+                        return "PIA Optional";
+                    }
+                    if (settingName === experimentSettings.SUBMIT_ORDER_ENABLE_PIA) {
+                        return "true";
+                    }
+                }
+
+                return "false";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(customerDetails, mountOptions);
 
     return { wrapper };
 }
diff --git a/src/store/index.js b/src/store/index.js
index f16b71f11..2c2eb8492 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -599,7 +599,7 @@ export const getters = {
             funnelServiceState: state.order.serviceLocation.state,
             funnelServiceZipCode: state.order.serviceLocation.zipCode,
             funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
-            funnelProviderNumber: state.order.serviceLocation.provider.ProviderNumber,
+            funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
             funnelParentAccountNumber: state.order.payment.parentAccountNumber,
             funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
             funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index d55862e3e..9ae8065ae 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -2934,6 +2934,9 @@ describe("Getters", () => {
                 funnelSupportingItems: null,
                 funnelVaps: null,
                 funnelGlassToReplace: null,
+                funnelProviderNumber: "1",
+                funnelReferralType: "CASH QUOTE",
+                funnelServiceZipCodeCtu: "11111",
             };
 
             //Act
@@ -2948,12 +2951,17 @@ describe("Getters", () => {
                 city: mockStateValues.funnelServiceCity,
                 state: mockStateValues.funnelServiceState,
                 zipCode: mockStateValues.funnelServiceZipCode,
+                zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
+                provider: {
+                    providerNumber: mockStateValues.funnelProviderNumber,
+                },
             });
             mutations.updateParentAcctNumber(storeState, mockStateValues.funnelParentAccountNumber);
             mutations.updateInsuranceVerifiedStatus(
                 storeState,
                 mockStateValues.funnelIsCoverageVerified
             );
+            mutations.updateIsInsurance(storeState, false);
             mutations.updateGlassParts(storeState, mockStateValues.funnelGlassParts);
             mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
             mutations.updateVaps(storeState, mockStateValues.funnelVaps);
@@ -2981,6 +2989,9 @@ describe("Getters", () => {
                 funnelSelectedBackGlass: false,
                 funnelSelectedDriverSideGlass: false,
                 funnelSelectedPassengerSideGlass: false,
+                funnelProviderNumber: mockStateValues.funnelProviderNumber,
+                funnelReferralType: mockStateValues.funnelReferralType,
+                funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
             });
         });
 
@@ -3003,6 +3014,9 @@ describe("Getters", () => {
                 funnelGlassParts: [],
                 funnelOtherParts: [],
                 funnelGlassToReplace: [],
+                funnelProviderNumber: "1",
+                funnelReferralType: "CASH QUOTE",
+                funnelServiceZipCodeCtu: "11111",
             };
 
             //Act
@@ -3017,12 +3031,17 @@ describe("Getters", () => {
                 city: mockStateValues.funnelServiceCity,
                 state: mockStateValues.funnelServiceState,
                 zipCode: mockStateValues.funnelServiceZipCode,
+                zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
+                provider: {
+                    providerNumber: mockStateValues.funnelProviderNumber,
+                },
             });
             mutations.updateParentAcctNumber(storeState, mockStateValues.funnelParentAccountNumber);
             mutations.updateInsuranceVerifiedStatus(
                 storeState,
                 mockStateValues.funnelIsCoverageVerified
             );
+            mutations.updateIsInsurance(storeState, false);
             mutations.updateGlassParts(storeState, mockStateValues.funnelGlassParts);
             mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
             mutations.updateVaps(storeState, mockStateValues.funnelVaps);
@@ -3050,6 +3069,9 @@ describe("Getters", () => {
                 funnelSelectedBackGlass: false,
                 funnelSelectedDriverSideGlass: false,
                 funnelSelectedPassengerSideGlass: false,
+                funnelProviderNumber: mockStateValues.funnelProviderNumber,
+                funnelReferralType: mockStateValues.funnelReferralType,
+                funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
             });
         });
 
@@ -3085,6 +3107,9 @@ describe("Getters", () => {
                         glassName: "Single",
                     },
                 ],
+                funnelProviderNumber: "1",
+                funnelReferralType: "CASH QUOTE",
+                funnelServiceZipCodeCtu: "11111",
             };
 
             //Act
@@ -3099,9 +3124,14 @@ describe("Getters", () => {
                 city: mockStateValues.serviceCity,
                 state: mockStateValues.serviceState,
                 zipCode: mockStateValues.serviceZipCode,
+                zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
+                provider: {
+                    providerNumber: mockStateValues.funnelProviderNumber,
+                },
             });
             mutations.updateParentAcctNumber(storeState, mockStateValues.parentAccountNumber);
             mutations.updateInsuranceVerifiedStatus(storeState, mockStateValues.isCoverageVerified);
+            mutations.updateIsInsurance(storeState, false);
             mutations.updateGlassParts(storeState, mockStateValues.glassParts);
             mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
             mutations.updateVaps(storeState, mockStateValues.funnelVaps);
@@ -3129,6 +3159,9 @@ describe("Getters", () => {
                 funnelSelectedBackGlass: false,
                 funnelSelectedDriverSideGlass: false,
                 funnelSelectedPassengerSideGlass: false,
+                funnelProviderNumber: mockStateValues.funnelProviderNumber,
+                funnelReferralType: mockStateValues.funnelReferralType,
+                funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
             });
         });
 
@@ -3190,6 +3223,9 @@ describe("Getters", () => {
                         glassName: "Quarter",
                     },
                 ],
+                funnelProviderNumber: "1",
+                funnelReferralType: "CASH QUOTE",
+                funnelServiceZipCodeCtu: "11111",
             };
 
             //Act
@@ -3204,9 +3240,14 @@ describe("Getters", () => {
                 city: mockStateValues.serviceCity,
                 state: mockStateValues.serviceState,
                 zipCode: mockStateValues.serviceZipCode,
+                zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
+                provider: {
+                    providerNumber: mockStateValues.funnelProviderNumber,
+                },
             });
             mutations.updateParentAcctNumber(storeState, mockStateValues.parentAccountNumber);
             mutations.updateInsuranceVerifiedStatus(storeState, mockStateValues.isCoverageVerified);
+            mutations.updateIsInsurance(storeState, false);
             mutations.updateGlassParts(storeState, mockStateValues.glassParts);
             mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
             mutations.updateVaps(storeState, mockStateValues.funnelVaps);
@@ -3234,6 +3275,9 @@ describe("Getters", () => {
                 funnelSelectedBackGlass: true,
                 funnelSelectedDriverSideGlass: true,
                 funnelSelectedPassengerSideGlass: true,
+                funnelProviderNumber: mockStateValues.funnelProviderNumber,
+                funnelReferralType: mockStateValues.funnelReferralType,
+                funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
             });
         });
     });