Merge pull request #174 from ditdot-dev/test/components

Test/components

Author: phre1

examples/support-page/Example.vue

@@ -6,16 +6,22 @@
     <flow-form
       ref="flowform"
       v-on:complete="onComplete"
-      v-bind:questions="questions"
       v-bind:language="language"
       v-bind:progressbar="false"
       v-bind:standalone="true"
     >
+      <question 
+        v-for="(question, index) in questions" 
+        v-bind="question" 
+        v-bind:key="'m' + index" 
+        v-model="question.model"
+      >
+      </question>
+      
       <!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
-      <!-- We've overriden the default "complete" slot content -->
       <template v-slot:complete>
         <div class="f-section-wrap">
-          <div v-if="questions[0].answer === 'technical_issue'">
+          <div v-if="questions[0].model === 'technical_issue'">
             <span class="f-tagline">Submit issue &gt; Step 3/3</span>
             <div v-if="loading">
               <span class="fh2">Please wait, submitting...</span>
@@ -27,13 +33,17 @@
           </div>
           <div v-else>
             <span class="f-tagline">Support page &gt; Ticket status</span>
-            <span class="fh2">Good news - the wheels are turning, your ticket is being processed!😉</span>
-            <p class="f-description"><span>Have a great day!</span></p>
+            <div v-if="loading">
+              <span class="fh2">Please wait, checking...</span>
+            </div>
+            <div v-else>
+              <span  class="fh2">Good news - the wheels are turning, your ticket No. {{ formatTicket(questions[2].model) }} is being processed!😉</span>
+              <p class="f-description"><span>Have a great day!</span></p>
+            </div>
           </div>
         </div>  
       </template>
-
-      <!-- We've overriden the default "completeButton" slot content -->
+      <!-- We've overriden the default "complete" slot content -->
       <template v-slot:completeButton>
         <div class="f-submit">
           <!-- Leave empty to hide default submit button -->
@@ -51,94 +61,98 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
+  import Question from '../../src/components/Question.vue'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
-  // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LinkOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
+  // import FlowForm, Question, { LanguageModel } from '@ditdot-dev/vue-flow-form'
 
   export default {
     name: 'example',
     components: {
-      FlowForm
+      FlowForm,
+      Question
     },
     data() {
       return {
         loading: false,
         completed: false,
         language: new LanguageModel(),
-        // Create question list with QuestionModel instances
         questions: [
-          new QuestionModel({
+          {
+            type: 'multiplechoice',
             id: 'multiple_choice',
-            tagline: "Welcome to our demo support page!",
+            tagline: 'Welcome to our demo support page!',
             title: 'Hi 👋, how can we help you today?',
-            type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,
             helpTextShow: false,
             options: [
-              new ChoiceOption({
+              {
                 label: 'I have a technical issue',
                 value: 'technical_issue'
-              }),
-              new ChoiceOption({
+              },
+              {
                 label: 'I wish to check my ticket status',
                 value: 'enter_ticket'
-              }),
+              },
             ],
             jump: {
               technical_issue: 'technical_issue', 
               enter_ticket: 'enter_ticket'
-            }
-          }),
-          new QuestionModel({
+            },
+            model: '',
+          },
+          {
+            type: 'multiplechoice',
             id: 'technical_issue',
             tagline: 'Submit issue > Step 1/3',
             title: 'Have you read our technical FAQ?',
-            type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,
             helpTextShow: false,
             description: "Here you'll find answers to",
             descriptionLink: [
-              new LinkOption({
+              {
                 url: '#',
                 text: 'FAQs',
                 target: '_self'
-              })
+              }
             ],
             options: [          
-              new ChoiceOption({
+              {
                 label: 'Yes, but I couldn’t find the answer',
                 value: 'faq_no'
-              }),
+              }
             ],
             jump: {
               faq_no: 'faq_no'
-            }
-          }),
-          new QuestionModel({
+            },
+            model: '',
+          },
+          {
+            type: 'text',
             id: 'enter_ticket',
             tagline: 'Support page > Ticket status',
             title: 'Please enter your 6-digit code.',
             subtitle: 'You received this when you reported your problem.',
-            type: QuestionType.Text,
-            multiple: false,
+            multiple: false, 
             required: true,
             mask: '#-#-#-#-#-#',
             placeholder: '#-#-#-#-#-#',
             jump: {
               _other: '_submit'
-            }
-          }),
-          new QuestionModel({
-            id: 'faq_no',
+            },
+            model: ''
+          },
+          {
+            type: 'longtext',
+            id: "faq_no",
             tagline: 'Submit issue > Step 2/3',
             title: 'Please describe your problem.',
-            type: QuestionType.LongText,
             required: true,
             placeholder: 'Start typing here...',
-          })
+            model: ''
+          }
         ]
       }
     },
@@ -183,10 +197,10 @@
           questions: [],
           answers: []
         }
-
+    
         this.questions.forEach(question => {
           if (question.title) {
-            let answer = question.answer
+            let answer = question.model
             if (Array.isArray(answer)) {
               answer = answer.join(', ')
             }
@@ -195,10 +209,14 @@
             data.answers.push(answer)
           }
         })
-
+    
         return data
       },
 
+      formatTicket(ticket) {
+        return ticket && ticket.replace(/-/g, '')
+      },
+
       getTicket() {
         return Math.floor(Math.random() * (999999 - 100000) + 100000).toString()
       }