Feature: Send chat transcript via email (#1152)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -25,6 +25,11 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     head :ok
   end
 
+  def transcript
+    ConversationReplyMailer.conversation_transcript(@conversation, params[:email])&.deliver_later if params[:email].present?
+    head :ok
+  end
+
   def toggle_status
     if params[:status]
       @conversation.status = params[:status]

app/controllers/api/v1/widget/conversations_controller.rb

@@ -13,6 +13,16 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
     head :ok
   end
 
+  def transcript
+    if permitted_params[:email].present? && conversation.present?
+      ConversationReplyMailer.conversation_transcript(
+        conversation,
+        permitted_params[:email]
+      )&.deliver_later
+    end
+    head :ok
+  end
+
   def toggle_typing
     head :ok && return if conversation.nil?
 
@@ -32,6 +42,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def permitted_params
-    params.permit(:id, :typing_status, :website_token)
+    params.permit(:id, :typing_status, :website_token, :email)
   end
 end

app/javascript/dashboard/api/inbox/conversation.js

@@ -53,6 +53,10 @@ class ConversationApi extends ApiClient {
       },
     });
   }
+
+  sendEmailTranscript({ conversationId, email }) {
+    return axios.post(`${this.url}/${conversationId}/transcript`, { email });
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -15,5 +15,6 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('toggleTyping');
     expect(conversationAPI).toHaveProperty('mute');
     expect(conversationAPI).toHaveProperty('meta');
+    expect(conversationAPI).toHaveProperty('sendEmailTranscript');
   });
 });

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -235,3 +235,12 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -15,10 +15,9 @@
   .multiselect-box {
     @include flex;
     @include flex-align($x: justify, $y: middle);
-    @include margin(0 $space-small);
     @include border-light;
     border-radius: $space-smaller;
-    margin-right: $space-normal;
+    margin-right: var(--space-small);
 
     &::before {
       color: $medium-gray;

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -12,8 +12,6 @@
 </template>
 
 <script>
-/* eslint no-console: 0 */
-/* global bus */
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
 import wootConstants from '../../constants';
@@ -22,7 +20,7 @@ export default {
   components: {
     Spinner,
   },
-  props: ['conversationId'],
+  props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
       isLoading: false,
@@ -32,22 +30,19 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
     }),
+    isOpen() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
+    },
     currentStatus() {
-      const ButtonName =
+      return this.isOpen
-        this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+        ? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
-          ? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
+        : this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
-          : this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
-      return ButtonName;
     },
     buttonClass() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+      return this.isOpen ? 'success' : 'warning';
-        ? 'success'
-        : 'warning';
     },
     buttonIconClass() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+      return this.isOpen ? 'ion-checkmark' : 'ion-refresh';
-        ? 'ion-checkmark'
-        : 'ion-refresh';
     },
   },
   methods: {

app/javascript/dashboard/components/index.js

@@ -2,6 +2,7 @@
 /* eslint-env browser */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
+import Button from './widgets/Button';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
@@ -21,6 +22,7 @@ import Thumbnail from './widgets/Thumbnail.vue';
 const WootUIKit = {
   AvatarUploader,
   Bar,
+  Button,
   Code,
   ColorPicker,
   DeleteModal,

app/javascript/dashboard/components/widgets/Button.vue

@@ -0,0 +1,49 @@
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <i
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass + ' ' + icon"
+    />
+    <spinner v-if="isLoading" />
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    buttonIconClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'button',
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon {
+  font-size: var(--font-size-large) !important;
+}
+</style>

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

@@ -4,7 +4,7 @@
       v-if="currentChat.id"
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
-      @contactPanelToggle="onToggleContactPanel"
+      @contact-panel-toggle="onToggleContactPanel"
     />
     <empty-state v-else />
   </div>
@@ -43,7 +43,7 @@ export default {
   },
   methods: {
     onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
+      this.$emit('contact-panel-toggle');
     },
   },
 };

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

@@ -1,6 +1,6 @@
 <template>
   <div class="conv-header">
-    <div class="user">
+    <div v-if="!isContactPanelOpen" class="user">
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
@@ -14,13 +14,20 @@
         </h3>
         <button
           class="user--profile__button clear button small"
-          @click="$emit('contactPanelToggle')"
+          @click="$emit('contact-panel-toggle')"
         >
-          {{ viewProfileButtonLabel }}
+          {{
+            `${$t('CONVERSATION.HEADER.OPEN')} ${$t(
+              'CONVERSATION.HEADER.DETAILS'
+            )}`
+          }}
         </button>
       </div>
     </div>
-    <div class="flex-container">
+    <div
+      class="flex-container"
+      :class="{ 'justify-space-between w-100': isContactPanelOpen }"
+    >
       <div class="multiselect-box ion-headphone">
         <multiselect
           v-model="currentChat.meta.assignee"
@@ -38,24 +45,20 @@
           <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
         </multiselect>
       </div>
-      <ResolveButton />
+
+      <more-actions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
 <script>
-/* eslint no-console: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
-/* global bus */
-
 import { mapGetters } from 'vuex';
+import MoreActions from './MoreActions';
 import Thumbnail from '../Thumbnail';
-import ResolveButton from '../../buttons/ResolveButton';
 
 export default {
   components: {
+    MoreActions,
     Thumbnail,
-    ResolveButton,
   },
 
   props: {
@@ -104,13 +107,6 @@ export default {
         ...this.agents,
       ];
     },
-    viewProfileButtonLabel() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
   },
 
   methods: {

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

@@ -0,0 +1,153 @@
+<template>
+  <woot-modal :show.sync="show" :on-close="onCancel">
+    <div class="column content-box">
+      <woot-modal-header
+        :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
+        :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
+      />
+      <form @submit.prevent="onSubmit">
+        <div class="medium-12 columns">
+          <div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
+            <input
+              id="contact"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="contact"
+            />
+            <label for="contact">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
+            }}</label>
+          </div>
+          <div v-if="currentChat.meta.assignee">
+            <input
+              id="assignee"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="assignee"
+            />
+            <label for="assignee">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
+            }}</label>
+          </div>
+          <div>
+            <input
+              id="other_email_address"
+              v-model="selectedType"
+              type="radio"
+              name="selectedType"
+              value="other_email_address"
+            />
+            <label for="other_email_address">{{
+              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
+            }}</label>
+          </div>
+          <div v-if="sentToOtherEmailAddress" class="medium-6 columns">
+            <label :class="{ error: $v.email.$error }">
+              <input
+                v-model.trim="email"
+                type="text"
+                :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
+                @input="$v.email.$touch"
+              />
+              <span v-if="$v.email.$error" class="message">
+                {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <div class="medium-12 row">
+            <woot-submit-button
+              :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+              :disabled="!isFormValid"
+            />
+            <button class="button clear" @click.prevent="onCancel">
+              {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
+
+<script>
+import { required, minLength, email } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    currentChat: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      email: '',
+      selectedType: '',
+      isSubmitting: false,
+    };
+  },
+  validations: {
+    email: {
+      required,
+      email,
+      minLength: minLength(4),
+    },
+  },
+  computed: {
+    sentToOtherEmailAddress() {
+      return this.selectedType === 'other_email_address';
+    },
+    isFormValid() {
+      if (this.selectedType) {
+        if (this.sentToOtherEmailAddress) {
+          return !!this.email && !this.$v.email.$error;
+        }
+        return true;
+      }
+      return false;
+    },
+    selectedEmailAddress() {
+      const { meta } = this.currentChat;
+      switch (this.selectedType) {
+        case 'contact':
+          return meta.sender.email;
+        case 'assignee':
+          return meta.assignee.email;
+        case 'other_email_address':
+          return this.email;
+        default:
+          return '';
+      }
+    },
+  },
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+    async onSubmit() {
+      this.isSubmitting = false;
+      try {
+        await this.$store.dispatch('sendEmailTranscript', {
+          email: this.selectedEmailAddress,
+          conversationId: this.currentChat.id,
+        });
+        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
+        this.onCancel();
+      } catch (error) {
+        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+  },
+};
+</script>

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

@@ -3,7 +3,7 @@
     <conversation-header
       :chat="currentChat"
       :is-contact-panel-open="isContactPanelOpen"
-      @contactPanelToggle="onToggleContactPanel"
+      @contact-panel-toggle="onToggleContactPanel"
     />
     <div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
       <span>
@@ -238,7 +238,7 @@ export default {
       this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight;
     },
     onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
+      this.$emit('contact-panel-toggle');
     },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="flex-container actions--container">
+    <resolve-action
+      :conversation-id="currentChat.id"
+      :status="currentChat.status"
+    />
+    <woot-button
+      class="success hollow more--button"
+      icon="ion-more"
+      :class="buttonClass"
+      @click="toggleConversationActions"
+    />
+    <div
+      v-if="showConversationActions"
+      v-on-clickaway="hideConversationActions"
+      class="dropdown-pane"
+      :class="{ 'dropdown-pane--open': showConversationActions }"
+    >
+      <button
+        v-if="!currentChat.muted"
+        class="button small clear row nice alert small-6 action--button"
+        @click="mute"
+      >
+        <i class="icon ion-volume-mute" />
+        <span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
+      </button>
+      <button
+        class="button small clear row nice small-6 action--button"
+        @click="toggleEmailActionsModal"
+      >
+        <i class="icon ion-ios-copy" />
+        {{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
+      </button>
+    </div>
+    <email-transcript-modal
+      v-if="showEmailActionsModal"
+      :show="showEmailActionsModal"
+      :current-chat="currentChat"
+      @cancel="toggleEmailActionsModal"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
+import alertMixin from 'shared/mixins/alertMixin';
+import EmailTranscriptModal from './EmailTranscriptModal';
+import ResolveAction from '../../buttons/ResolveAction';
+import wootConstants from '../../../constants';
+
+export default {
+  components: {
+    EmailTranscriptModal,
+    ResolveAction,
+  },
+  mixins: [alertMixin, clickaway],
+  data() {
+    return {
+      showConversationActions: false,
+      showEmailActionsModal: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+    }),
+
+    buttonClass() {
+      return this.currentChat.status !== wootConstants.STATUS_TYPE.OPEN
+        ? 'warning'
+        : 'success';
+    },
+  },
+  methods: {
+    mute() {
+      this.$store.dispatch('muteConversation', this.currentChat.id);
+      this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
+      this.toggleConversationActions();
+    },
+    toggleEmailActionsModal() {
+      this.showEmailActionsModal = !this.showEmailActionsModal;
+      this.hideConversationActions();
+    },
+    toggleConversationActions() {
+      this.showConversationActions = !this.showConversationActions;
+    },
+    hideConversationActions() {
+      this.showConversationActions = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.more--button {
+  align-items: center;
+  display: flex;
+  margin-left: var(--space-small);
+  padding: var(--space-small);
+}
+
+.actions--container {
+  position: relative;
+}
+
+.dropdown-pane {
+  right: 0;
+  top: 48px;
+  border: 1px solid var(--s-100);
+  border-radius: var(--space-smaller);
+  width: auto;
+}
+
+.dropdown-pane--open {
+  display: block;
+  visibility: visible;
+}
+
+.action--button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--space-small) 0;
+
+  .icon {
+    margin-right: var(--space-small);
+    min-width: var(--space-normal);
+  }
+}
+</style>

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

@@ -23,7 +23,9 @@
       "NO_LABELS_TO_ADD": "There are no more labels defined in the account.",
       "NO_AVAILABLE_LABELS": "There are no labels added to this conversation."
     },
-    "MUTE_CONTACT": "Mute Contact",
+    "MUTE_CONTACT": "Mute Conversation",
+    "MUTED_SUCCESS": "This conversation is muted for 6 hours",
+    "SEND_TRANSCRIPT": "Send Transcript",
     "EDIT_LABEL": "Edit"
   }
 }

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

@@ -36,5 +36,22 @@
     "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",
     "CHANGE_STATUS": "Conversation status changed",
     "CHANGE_AGENT": "Conversation Assignee changed"
+  },
+  "EMAIL_TRANSCRIPT": {
+    "TITLE": "Send conversation transcript",
+    "DESC": "Send a copy of the conversation transcript to the specified email address",
+    "SUBMIT": "Submit",
+    "CANCEL": "Cancel",
+    "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
+    "SEND_EMAIL_ERROR": "There was an error, please try again",
+    "FORM": {
+      "SEND_TO_CONTACT": "Send the transcript to the customer",
+      "SEND_TO_AGENT": "Send the transcript of the assigned agent",
+      "SEND_TO_OTHER_EMAIL_ADDRESS": "Send the transcript to another email address",
+      "EMAIL": {
+        "PLACEHOLDER": "Enter an email address",
+        "ERROR": "Please enter a valid email address"
+      }
+    }
   }
 }

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

@@ -24,6 +24,8 @@
       "NO_AVAILABLE_LABELS": "There are no labels added to this conversation."
     },
     "MUTE_CONTACT": "Mettre en sourdine le contact",
+    "MUTED_SUCCESS": "Cette conversation est coupée pendant 6 heures",
+    "SEND_TRANSCRIPT": "Envoyer la transcription",
     "EDIT_LABEL": "Modifier"
   }
 }

app/javascript/dashboard/i18n/locale/fr/conversation.json

@@ -31,5 +31,22 @@
     "VISIBLE_TO_AGENTS": "Note privée : uniquement visible par vous et votre équipe",
     "CHANGE_STATUS": "Statut de la conversation modifié",
     "CHANGE_AGENT": "Responsable de la conversation modifié"
+  },
+  "EMAIL_TRANSCRIPT": {
+    "TITLE": "Envoyer la transcription de la conversation",
+    "DESC": "Envoyer une copie de la transcription de la conversation à l'adresse e-mail spécifiée",
+    "SUBMIT": "Soumettre",
+    "CANCEL": "Annuler",
+    "SEND_EMAIL_SUCCESS": "La transcription du chat a été envoyée avec succès",
+    "SEND_EMAIL_ERROR": "Une erreur s'est produite, veuillez réessayer",
+    "FORM": {
+      "SEND_TO_CONTACT": "Envoyez la transcription au client",
+      "SEND_TO_AGENT": "Envoyer la transcription de l'agent désigné",
+      "SEND_TO_OTHER_EMAIL_ADDRESS": "Envoyez la transcription à une autre adresse e-mail",
+      "EMAIL": {
+        "PLACEHOLDER": "Entrez une adresse email",
+        "ERROR": "S'il vous plaît, mettez une adresse email valide"
+      }
+    }
   }
 }

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

@@ -23,7 +23,9 @@
       "NO_LABELS_TO_ADD": "There are no more labels defined in the account.",
       "NO_AVAILABLE_LABELS": "There are no labels added to this conversation."
     },
-    "MUTE_CONTACT": "Mute Contact",
+    "MUTE_CONTACT": "Contact muet",
+    "MUTED_SUCCESS": "Cette conversation est coupée pendant 6 heures",
+    "SEND_TRANSCRIPT": "Envoyer la transcription",
     "EDIT_LABEL": "Bewerken"
   }
 }

app/javascript/dashboard/i18n/locale/nl/conversation.json

@@ -31,5 +31,22 @@
     "VISIBLE_TO_AGENTS": "Privéopmerking: alleen zichtbaar voor jou en je team",
     "CHANGE_STATUS": "Gespreksstatus veranderd",
     "CHANGE_AGENT": "Toegewezen persoon voor dit gesprek is veranderd"
+  },
+  "EMAIL_TRANSCRIPT": {
+    "TITLE": "Stuur conversatie transcriptie",
+    "DESC": "Stuur een kopie van het conversatietranscript naar het opgegeven e-mailadres",
+    "SUBMIT": "Verzenden",
+    "CANCEL": "Annuleer",
+    "SEND_EMAIL_SUCCESS": "Het chattranscript is succesvol verzonden",
+    "SEND_EMAIL_ERROR": "Er is een fout opgetreden, probeer het opnieuw",
+    "FORM": {
+      "SEND_TO_CONTACT": "Stuur het transcript naar de klant",
+      "SEND_TO_AGENT": "Stuur het transcript van de toegewezen agent",
+      "SEND_TO_OTHER_EMAIL_ADDRESS": "Stuur het transcript naar een ander e-mailadres",
+      "EMAIL": {
+        "PLACEHOLDER": "Voer een e-mail adres in",
+        "ERROR": "Vul een geldig e-mailadres in"
+      }
+    }
   }
 }

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -57,15 +57,6 @@
       >
         {{ contact.additional_attributes.description }}
       </div>
-      <div class="contact--actions">
-        <button
-          v-if="!currentChat.muted"
-          class="button small clear contact--mute small-6"
-          @click="mute"
-        >
-          {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
-        </button>
-      </div>
     </div>
     <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
@@ -185,14 +176,14 @@ export default {
     onPanelToggle() {
       this.onToggle();
     },
-    mute() {
-      this.$store.dispatch('muteConversation', this.conversationId);
-    },
     getContactDetails() {
       if (this.contactId) {
         this.$store.dispatch('contacts/show', { id: this.contactId });
       }
     },
+    openTranscriptModal() {
+      this.showTranscriptModal = true;
+    },
   },
 };
 </script>
@@ -295,11 +286,12 @@ export default {
 .contact--mute {
   color: $alert-color;
   display: block;
-  text-align: center;
+  text-align: left;
 }
 
 .contact--actions {
   display: flex;
+  flex-direction: column;
   justify-content: center;
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -4,7 +4,7 @@
     <conversation-box
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
-      @contactPanelToggle="onToggleContactPanel"
+      @contact-panel-toggle="onToggleContactPanel"
     >
     </conversation-box>
     <contact-panel
@@ -17,7 +17,6 @@
 
 <script>
 /* eslint no-console: 0 */
-/* global bus */
 import { mapGetters } from 'vuex';
 
 import ChatList from '../../../components/ChatList';

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -223,6 +223,14 @@ const actions = {
       //
     }
   },
+
+  sendEmailTranscript: async (_, { conversationId, email }) => {
+    try {
+      await ConversationApi.sendEmailTranscript({ conversationId, email });
+    } catch (error) {
+      throw new Error(error);
+    }
+  },
 };
 
 export default actions;

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -177,4 +177,16 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([]);
     });
   });
+
+  describe('#sendEmailTranscript', () => {
+    it('sends correct mutations if api is successful', async () => {
+      axios.post.mockResolvedValue({});
+      await actions.sendEmailTranscript(
+        { commit },
+        { conversationId: 1, email: 'testemail@example.com' }
+      );
+      expect(commit).toHaveBeenCalledTimes(0);
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
 });

app/mailers/conversation_reply_mailer.rb

@@ -9,7 +9,6 @@ class ConversationReplyMailer < ApplicationMailer
 
     recap_messages = @conversation.messages.chat.where('created_at < ?', message_queued_time).last(10)
     new_messages = @conversation.messages.chat.where('created_at >= ?', message_queued_time)
-
     @messages = recap_messages + new_messages
     @messages = @messages.select(&:reportable?)
 
@@ -41,6 +40,20 @@ class ConversationReplyMailer < ApplicationMailer
          })
   end
 
+  def conversation_transcript(conversation, to_email)
+    return unless smtp_config_set_or_development?
+
+    init_conversation_attributes(conversation)
+
+    @messages = @conversation.messages.chat.select(&:reportable?)
+
+    mail({
+           to: to_email,
+           from: from_email,
+           subject: "[##{@conversation.display_id}] #{I18n.t('conversations.reply.transcript_subject')}"
+         })
+  end
+
   private
 
   def init_conversation_attributes(conversation)

app/views/mailers/conversation_reply_mailer/conversation_transcript.html.erb

@@ -0,0 +1,20 @@
+<% @messages.each do |message| %>
+  <tr>
+    <td>
+      <b><%= message.sender&.try(:available_name) || message.sender&.name || '' %></b>
+    </td>
+  </tr>
+  <tr>
+    <td style="padding-bottom: 16px;">
+      <% if message.content %>
+        <%= message.content %>
+      <% end %>
+      <% if message.attachments %>
+        <% message.attachments.each do |attachment| %>
+          Attachment [<a href="<%= attachment.file_url %>" _target="blank">Click here to view</a>]
+        <% end %>
+      <% end %>
+      <br />
+    </td>
+  </tr>
+<% end %>

app/views/mailers/conversation_reply_mailer/reply_with_summary.html.erb

@@ -15,7 +15,7 @@
       <% end %>
       <% if message.attachments %>
         <% message.attachments.each do |attachment| %>
-          attachment [<a href="<%= attachment.file_url %>" _target="blank">click here to view</a>]
+          Attachment [<a href="<%= attachment.file_url %>" _target="blank">Click here to view</a>]
         <% end %>
       <% end %>
     </td>

config/locales/en.yml

@@ -56,3 +56,4 @@ en:
       email_input_box_message_body: "Get notified by email"
     reply:
       email_subject: "New messages on this conversation"
+      transcript_subject: "Conversation Transcript"

config/routes.rb

@@ -54,6 +54,7 @@ Rails.application.routes.draw do
             end
             member do
               post :mute
+              post :transcript
               post :toggle_status
               post :toggle_typing_status
               post :update_last_seen
@@ -117,6 +118,7 @@ Rails.application.routes.draw do
           collection do
             post :update_last_seen
             post :toggle_typing
+            post :transcript
           end
         end
         resource :contact, only: [:update]

spec/controllers/api/v1/accounts/conversations_controller_spec.rb

@@ -212,4 +212,32 @@ RSpec.describe 'Conversations API', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/accounts/{account.id}/conversations/:id/transcript' do
+    let(:conversation) { create(:conversation, account: account) }
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post "/api/v1/accounts/#{account.id}/conversations/#{conversation.display_id}/transcript"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      let(:agent) { create(:user, account: account, role: :agent) }
+      let(:params) { { email: 'test@test.com' } }
+
+      it 'mutes conversation' do
+        allow(ConversationReplyMailer).to receive(:conversation_transcript)
+        post "/api/v1/accounts/#{account.id}/conversations/#{conversation.display_id}/transcript",
+             headers: agent.create_new_auth_token,
+             params: params,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(ConversationReplyMailer).to have_received(:conversation_transcript).with(conversation, 'test@test.com')
+      end
+    end
+  end
 end

spec/controllers/api/v1/widget/conversations_controller_spec.rb

@@ -60,4 +60,20 @@ RSpec.describe '/api/v1/widget/conversations/toggle_typing', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/widget/conversations/transcript' do
+    context 'with a conversation' do
+      it 'sends transcript email' do
+        allow(ConversationReplyMailer).to receive(:conversation_transcript)
+
+        post '/api/v1/widget/conversations/transcript',
+             headers: { 'X-Auth-Token' => token },
+             params: { website_token: web_widget.website_token, email: 'test@test.com' },
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(ConversationReplyMailer).to have_received(:conversation_transcript).with(conversation, 'test@test.com')
+      end
+    end
+  end
 end