faq section adding logic completed

BiteSpeed-Dev · Dec 30, 2024 · ad47a8d · ad47a8d
1 parent 628bb42
commit ad47a8d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -69,6 +69,10 @@ export default {
       type: String,
       default: '',
     },
+    faqs: {
+      type: Array,
+      default: [],
+    },
     welcomeTagline: {
       type: String,
       default: '',
@@ -148,6 +152,7 @@ export default {
         replyTime: this.replyTimeText,
         color: this.color,
         logo: this.logo,
+        faqs: this.faqs,
       };
     },
     getWidgetFooterConfig() {

diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -5,6 +5,11 @@
         <div class="faq-card">
           <div class="faq-card-header">
             <h2>FAQs</h2>
+            <!-- map over faqs here -->
+            <div v-for="(faq, index) in this.config.faqs" :key="index">
+              <h3>{{ faq.question }}</h3>
+              <p>{{ faq.answer }}</p>
+            </div>
           </div>
         </div>
       </div>

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -55,6 +55,25 @@
                 )
               "
             />
+            <!-- there can be number of input for faq question and answer. -->
+            <div class="faq-section-header">
+              <label>
+                FAQs
+              </label>
+              <woot-button @click="addFaq" class="add-faq-button">Add FAQ</woot-button>
+            </div>
+            <div v-for="(faq, index) in faqs" :key="index" class="faq-container">
+              <woot-input
+                v-model.trim="faq.question"
+                :label="'FAQ Question'"
+                :placeholder="'FAQ Question'"
+              />
+              <woot-input
+                v-model.trim="faq.answer"
+                :label="'FAQ Answer'"
+                :placeholder="'FAQ Answer'"
+              />
+            </div>
             <label>
               {{
                 $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
@@ -142,6 +161,7 @@
             :widget-bubble-position="widgetBubblePosition"
             :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
             :widget-bubble-type="widgetBubbleType"
+            :faqs="faqs"
           />
         </div>
         <div v-else class="widget-script">
@@ -188,6 +208,7 @@ export default {
         'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.DEFAULT'
       ),
       widgetBubbleType: 'standard',
+      faqs: [],
       widgetBubblePositions: [
         {
           id: 'left',
@@ -411,6 +432,10 @@ export default {
     getSavedInboxInformation() {
       return LocalStorage.get(this.storageKey);
     },
+    addFaq(event) {
+      event.stopPropagation();
+      this.faqs.push({ question: '', answer: '' });
+    },
   },
 };
 </script>
@@ -459,4 +484,28 @@ export default {
     @apply mx-5 p-2.5 bg-slate-50 dark:bg-slate-700;
   }
 }
+
+.faq-container {
+  margin-bottom: var(--space-normal);
+  padding: var(--space-normal);
+  border: 1px solid #e0e0e0; // Light border for separation
+  border-radius: 4px; // Rounded corners
+  background-color: #f9f9f9; 
+}
+
+.faq-section-header {
+  display: flex;
+  align-items: center; // Aligns items vertically centered
+  justify-content: space-between; // Space between title and button
+  margin-bottom: var(--space-normal); // Space below the header
+}
+
+.add-faq-button {
+  margin-left: var(--space-normal);
+  background-color: transparent !important  ;
+  padding: 0;
+  cursor: pointer;
+  color: #1F93FF !important;
+
+}
 </style>