chore: Add loader for email and csat submit buttons (#2569)

* fix the loader issue in submit button

* review fixes

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -29,8 +29,8 @@
         :disabled="isButtonDisabled"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
-        <spinner v-else />
+        <spinner v-if="isUpdating && feedback" />
+        <i v-else class="ion-ios-arrow-forward" />
       </button>
     </form>
   </div>
@@ -50,6 +50,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    messageId: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -84,10 +88,10 @@ export default {
   mounted() {
     if (this.isRatingSubmitted) {
       const {
-        csat_survey_response: { rating, feedback },
+        csat_survey_response: { rating, feedback_message },
       } = this.messageContentAttributes;
       this.selectedRating = rating;
-      this.feedback = feedback;
+      this.feedback = feedback_message;
     }
   },
 
@@ -100,11 +104,23 @@ export default {
         'emoji-button',
       ];
     },
-    onSubmit() {
-      this.$emit('submit', {
-        rating: this.selectedRating,
-        feedback: this.feedback,
-      });
+    async onSubmit() {
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('message/update', {
+          submittedValues: {
+            csat_survey_response: {
+              rating: this.selectedRating,
+              feedback_message: this.feedback,
+            },
+          },
+          messageId: this.messageId,
+        });
+      } catch (error) {
+        // Ignore error
+      } finally {
+        this.isUpdating = false;
+      }
     },
     selectRating(rating) {
       this.selectedRating = rating.value;

app/javascript/widget/components/AgentMessageBubble.vue

@@ -47,7 +47,7 @@
     <customer-satisfaction
       v-if="isCSAT"
       :message-content-attributes="messageContentAttributes.submitted_values"
-      @submit="onCSATSubmit"
+      :message-id="messageId"
     />
   </div>
 </template>
@@ -125,17 +125,6 @@ export default {
         messageId: this.messageId,
       });
     },
-    onCSATSubmit({ feedback, rating }) {
-      this.onResponse({
-        submittedValues: {
-          csat_survey_response: {
-            rating,
-            feedback_message: feedback,
-          },
-        },
-        messageId: this.messageId,
-      });
-    },
   },
 };
 </script>

app/javascript/widget/components/template/EmailInput.vue

@@ -18,7 +18,7 @@
         :disabled="$v.email.$invalid"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!uiFlags.isUpdating" class="ion-ios-arrow-forward" />
+        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
         <spinner v-else />
       </button>
     </form>
@@ -47,11 +47,11 @@ export default {
   data() {
     return {
       email: '',
+      isUpdating: false,
     };
   },
   computed: {
     ...mapGetters({
-      uiFlags: 'message/getUIFlags',
       widgetColor: 'appConfig/getWidgetColor',
     }),
     hasSubmitted() {
@@ -68,15 +68,21 @@ export default {
     },
   },
   methods: {
-    onSubmit() {
+    async onSubmit() {
       if (this.$v.$invalid) {
         return;
       }
-
-      this.$store.dispatch('message/update', {
-        email: this.email,
-        messageId: this.messageId,
-      });
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('message/update', {
+          email: this.email,
+          messageId: this.messageId,
+        });
+      } catch (error) {
+        // Ignore error
+      } finally {
+        this.isUpdating = false;
+      }
     },
   },
 };