Fetch text from cms

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 [
+            const cmsData = this.getAnswersNullSafe("PaymentTimeWidget");
-                {
+
-                    buttonLabel: "Pay now",
+            return cmsData.map((answer) => {
-                    altText: "Pay now",
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
                     groupName: "payment-time",
-                    value: payTimes.ADVANCE,
+                    value: answer.Name,
-                },
+                };
-                {
+            });
-                    buttonLabel: "Pay during my appointment",
-                    altText: "Pay during my appointment",
-                    groupName: "payment-time",
-                    value: payTimes.LATER,
-                },
-            ];
         },
         paymentMethodAnswerData() {
-            return [
+            const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
-                {
+
-                    buttonLabel: "Credit or Debit",
+            return cmsData.map((answer) => {
-                    altText: "Credit or Debit",
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
                     groupName: "payment-method",
-                    value: paymentMethods.CREDIT_CARD,
+                    value: answer.Name,
-                },
+                };
-                {
+            });
-                    buttonLabel: "Paypal",
-                    altText: "Paypal",
-                    groupName: "payment-method",
-                    value: paymentMethods.PAYPAL,
-                },
-                {
-                    buttonLabel: "Afterpay",
-                    altText: "Afterpay",
-                    groupName: "payment-method",
-                    value: paymentMethods.AFTERPAY,
-                },
-            ];
         },
     },
     watch: {
@@ -127,7 +129,7 @@ export default {
 
 <style lang="scss">
 .payment-method-question {
-    span {
+    .question-text span {
         text-align: left;
     }
 }