chore: Add a redirect link to the conversation in success toast message (#3711)

When creating a conversation from the contacts tab now we can go directly to the conversation by clicking the link in the success message

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/assets/scss/widgets/_snackbar.scss

@@ -15,7 +15,7 @@
   @include shadow;
   background-color: $woot-snackbar-bg;
   border-radius: $space-smaller;
-  display: inline-block;
+  display: inline-flex;
   margin-bottom: $space-small;
   max-width: 40rem;
   min-height: 3rem;

app/javascript/dashboard/components/Snackbar.vue

@@ -4,6 +4,11 @@
       <div class="ui-snackbar-text">
         {{ message }}
       </div>
+      <div v-if="action" class="ui-snackbar-action">
+        <router-link v-if="action.type == 'link'" :to="action.to">
+          {{ action.message }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -12,6 +17,10 @@
 export default {
   props: {
     message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => {},
+    },
     showButton: Boolean,
     duration: {
       type: [String, Number],

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -4,6 +4,7 @@
       v-for="snackMessage in snackMessages"
       :key="snackMessage.key"
       :message="snackMessage.message"
+      :action="snackMessage.action"
     />
   </transition-group>
 </template>
@@ -35,8 +36,12 @@ export default {
     bus.$off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage(message) {
-      this.snackMessages.push({ key: new Date().getTime(), message });
+    onNewToastMessage(message, action) {
+      this.snackMessages.push({
+        key: new Date().getTime(),
+        message,
+        action,
+      });
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
       }, this.duration);

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -84,7 +84,8 @@ describe('MoveActions', () => {
 
       expect(window.bus.$emit).toBeCalledWith(
         'newToastMessage',
-        'This conversation is muted for 6 hours'
+        'This conversation is muted for 6 hours',
+        undefined
       );
     });
   });
@@ -109,7 +110,8 @@ describe('MoveActions', () => {
 
       expect(window.bus.$emit).toBeCalledWith(
         'newToastMessage',
-        'This conversation is unmuted'
+        'This conversation is unmuted',
+        undefined
       );
     });
   });

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -169,6 +169,7 @@
       "SUBMIT": "Send message",
       "CANCEL": "Cancel",
       "SUCCESS_MESSAGE": "Message sent!",
+      "GO_TO_CONVERSATION": "View",
       "ERROR_MESSAGE": "Couldn't send! try again"
     }
   },

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -174,7 +174,6 @@ export default {
     onSuccess() {
       this.$emit('success');
     },
-
     async handleSubmit() {
       this.$v.$touch();
       if (this.$v.$invalid) {
@@ -182,9 +181,17 @@ export default {
       }
       try {
         const payload = this.getNewConversation;
-        await this.onSubmit(payload);
+        const data = await this.onSubmit(payload);
+        const action = {
+          type: 'link',
+          to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
+          message: this.$t('NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+        };
         this.onSuccess();
-        this.showAlert(this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'));
+        this.showAlert(
+          this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'),
+          action
+        );
       } catch (error) {
         if (error instanceof ExceptionWithMessage) {
           this.showAlert(error.data);

app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue

@@ -49,7 +49,11 @@ export default {
       this.$emit('cancel');
     },
     async onSubmit(contactItem) {
-      await this.$store.dispatch('contactConversations/create', contactItem);
+      const data = await this.$store.dispatch(
+        'contactConversations/create',
+        contactItem
+      );
+      return data;
     },
   },
 };

app/javascript/dashboard/store/modules/contactConversations.js

@@ -39,6 +39,7 @@ export const actions = {
         id: contactId,
         data,
       });
+      return data;
     } catch (error) {
       throw new Error(error);
     } finally {

app/javascript/shared/mixins/alertMixin.js

@@ -1,7 +1,7 @@
 export default {
   methods: {
-    showAlert(message) {
-      bus.$emit('newToastMessage', message);
+    showAlert(message, action) {
+      bus.$emit('newToastMessage', message, action);
     },
   },
 };