Initial blockout

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>

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>