chore: update message bubble

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -36,6 +36,7 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { MESSAGE_TYPE } from 'shared/constants/messages';
 
 export default {
   components: {
@@ -244,6 +245,29 @@ export default {
 
       return { incoming, outgoing };
     },
+    hasSubmittedAppStoreResponse() {
+      const messages = this.currentChat.messages || [];
+      return messages.some(message => {
+        const appStoreAttributes =
+          message.content_attributes?.app_store ||
+          message.contentAttributes?.appStore ||
+          {};
+        const hasAppStoreResponse =
+          message.source_id || appStoreAttributes.response_id;
+
+        return (
+          message.message_type === MESSAGE_TYPE.OUTGOING && hasAppStoreResponse
+        );
+      });
+    },
+    appStoreReplyBannerMessage() {
+      return this.hasSubmittedAppStoreResponse
+        ? this.$t('CONVERSATION.REPLYBOX.APP_STORE_RESPONSE_UPDATE')
+        : this.$t('CONVERSATION.REPLYBOX.APP_STORE_RESPONSE_DELAY');
+    },
+    showAppStoreReplyBanner() {
+      return this.isAnAppStoreChannel;
+    },
   },
 
   watch: {
@@ -468,6 +492,12 @@ export default {
         class="mx-2 mt-2 overflow-hidden rounded-lg"
         :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
       />
+      <Banner
+        v-if="showAppStoreReplyBanner"
+        color-scheme="warning"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="appStoreReplyBannerMessage"
+      />
     </div>
     <MessageList
       ref="conversationPanelRef"