Feature: Inbox greeting message (#927)

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

app/javascript/dashboard/i18n/locale/el/inboxMgmt.json

@@ -54,7 +54,7 @@
           "LABEL": "Καλώς ήλθατε (Tagline)",
           "PLACEHOLDER": "Είναι απλό να συνδεθείτε μαζί μας. Ζητήστε μας οτιδήποτε, ή μοιραστείτε την εμπειρία σας."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Μήνυμα όταν δεν υπάρχουν πράκτορες",
           "PLACEHOLDER": "Τυπικά απαντάμε σε μερικές ώρες."
         },

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

@@ -63,10 +63,16 @@
           "LABEL": "Welcome Tagline",
           "PLACEHOLDER": "We make it simple to connect with us. Ask us anything, or share your feedback."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
-          "LABEL": "Agents Away Message",
+        "CHANNEL_GREETING_MESSAGE": {
+          "LABEL": "Channel greeting message",
           "PLACEHOLDER": "Acme Inc typically replies in a few hours."
         },
+        "CHANNEL_GREETING_TOGGLE": {
+          "LABEL": "Enable channel greeting",
+          "HELP_TEXT": "Send a greeting message to the user when he starts the conversation.",
+          "ENABLED": "Enabled",
+          "DISABLED": "Disabled"
+        },
         "WIDGET_COLOR": {
           "LABEL": "Widget Color",
           "PLACEHOLDER": "Update the widget color used in widget"

app/javascript/dashboard/i18n/locale/es/inboxMgmt.json

@@ -63,7 +63,7 @@
           "LABEL": "Bienvenido Tagline",
           "PLACEHOLDER": "Facilitamos la conexión con nosotros. Pídanos cualquier cosa o comparte tus comentarios."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Mensaje de Agentes Ausentes",
           "PLACEHOLDER": "Acme Inc normalmente responde en unas pocas horas."
         },

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

@@ -54,7 +54,7 @@
           "LABEL": "Slogan d'accueil",
           "PLACEHOLDER": "C'est simple de rentrer en contact avec nous. Demandez-nous quoi que ce soit ou partagez vos commentaires."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Message lorsque les agents sont absents",
           "PLACEHOLDER": "Acme Inc répond en général en quelques heures."
         },

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

@@ -54,9 +54,15 @@
           "LABEL": "Welkom Tagline",
           "PLACEHOLDER": "We maken het eenvoudig om met ons te verbinden. Vraag ons iets of deel uw feedback."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
-          "LABEL": "Agents Afwezig Bericht",
-          "PLACEHOLDER": "Acme Inc reageert meestal binnen een paar uur."
+        "CHANNEL_GREETING_MESSAGE": {
+          "LABEL": "Kanaalbegroeting",
+          "PLACEHOLDER": "Acme Inc antwoordt meestal binnen een paar uur."
+        },
+        "CHANNEL_GREETING_TOGGLE": {
+          "LABEL": "Kanaalbegroeting inschakelen",
+          "HELP_TEXT": "Stuur een begroetingsbericht naar de gebruiker wanneer hij het gesprek start.",
+          "ENABLED": "Ingeschakeld",
+          "DISABLED": "Gehandicapt"
         },
         "WIDGET_COLOR": {
           "LABEL": "Kleur van widget",

app/javascript/dashboard/i18n/locale/pt/inboxMgmt.json

@@ -54,7 +54,7 @@
           "LABEL": "Bem-vindo Slogan",
           "PLACEHOLDER": "Nós simplificamos nos conectar com a gente. Pergunte a nós qualquer coisa ou compartilhe seus comentários."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Mensagem Ausente dos Agentes",
           "PLACEHOLDER": "Acme Inc normalmente responde em algumas horas."
         },

app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json

@@ -54,7 +54,7 @@
           "LABEL": "Bem-vindo, saudação",
           "PLACEHOLDER": "Nós tornamos simples a conexão conosco. Pergunte qualquer assunto ou compartilhe seus comentários."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Mensagem de agente ausente",
           "PLACEHOLDER": "Acme Inc tipicamente retorna em algumas horas."
         },

app/javascript/dashboard/i18n/locale/ro/inboxMgmt.json

@@ -54,7 +54,7 @@
           "LABEL": "Tagline de Bun Venit",
           "PLACEHOLDER": "Noi facem conectarea cu noi simplă. Întreabă-ne orice, sau partajează-ți feedback-ul."
         },
-        "CHANNEL_AGENT_AWAY_MESSAGE": {
+        "CHANNEL_GREETING_MESSAGE": {
           "LABEL": "Mesaj Agent Indisponibil",
           "PLACEHOLDER": "De obicei, Acme Inc răspunde în câteva ore."
         },

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -18,7 +18,7 @@
         <woot-input
           v-if="isAWidgetInbox"
           v-model.trim="selectedInboxName"
-          class="medium-12 columns"
+          class="medium-9 columns"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL')"
           :placeholder="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
@@ -27,7 +27,7 @@
         <woot-input
           v-if="isAWidgetInbox"
           v-model.trim="channelWebsiteUrl"
-          class="medium-12 columns"
+          class="medium-9 columns"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
           :placeholder="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@@ -36,7 +36,7 @@
         <woot-input
           v-if="isAWidgetInbox"
           v-model.trim="channelWelcomeTitle"
-          class="medium-12 columns"
+          class="medium-9 columns"
           :label="
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
           "
@@ -46,46 +46,61 @@
             )
           "
         />
-        <woot-input
-          v-if="isAWidgetInbox"
-          v-model.trim="channelWelcomeTagline"
-          class="medium-12 columns"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-            )
-          "
-        />
 
-        <woot-input
-          v-if="isAWidgetInbox"
-          v-model.trim="channelAgentAwayMessage"
-          class="medium-12 columns"
-          :label="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
-            )
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
-            )
-          "
-        />
-        <label v-if="isAWidgetInbox" class="medium-12 columns">
+        <label v-if="isAWidgetInbox" class="medium-9 columns">
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
           <woot-color-picker v-model="inbox.widget_color" />
         </label>
-        <label class="medium-12 columns">
+
+        <label class="medium-9 columns">
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
+          }}
+          <select v-model="greetingEnabled">
+            <option :value="true">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
+                )
+              }}
+            </option>
+            <option :value="false">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
+                )
+              }}
+            </option>
+          </select>
+          <p class="help-text">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
+              )
+            }}
+          </p>
+        </label>
+
+        <woot-input
+          v-if="greetingEnabled"
+          v-model.trim="greetingMessage"
+          class="medium-9 columns"
+          :label="
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
+          "
+          :placeholder="
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+            )
+          "
+        />
+        <label class="medium-9 columns">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
           <select v-model="autoAssignment">
-            <option value="true">
+            <option :value="true">
               {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
             </option>
-            <option value="false">
+            <option :value="false">
               {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
             </option>
           </select>
@@ -183,13 +198,14 @@ export default {
       avatarFile: null,
       avatarUrl: '',
       selectedAgents: [],
+      greetingEnabled: true,
+      greetingMessage: '',
       autoAssignment: false,
       isAgentListUpdating: false,
       selectedInboxName: '',
       channelWebsiteUrl: '',
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
-      channelAgentAwayMessage: '',
       autoAssignmentOptions: [
         {
           value: true,
@@ -247,11 +263,12 @@ export default {
         this.fetchAttachedAgents();
         this.avatarUrl = this.inbox.avatar_url;
         this.selectedInboxName = this.inbox.name;
+        this.greetingEnabled = this.inbox.greeting_enabled;
+        this.greetingMessage = this.inbox.greeting_message;
         this.autoAssignment = this.inbox.enable_auto_assignment;
         this.channelWebsiteUrl = this.inbox.website_url;
         this.channelWelcomeTitle = this.inbox.welcome_title;
         this.channelWelcomeTagline = this.inbox.welcome_tagline;
-        this.channelAgentAwayMessage = this.inbox.agent_away_message;
       });
     },
     async fetchAttachedAgents() {
@@ -294,12 +311,13 @@ export default {
           id: this.currentInboxId,
           name: this.selectedInboxName,
           enable_auto_assignment: this.autoAssignment,
+          greeting_enabled: this.greetingEnabled,
+          greeting_message: this.greetingMessage,
           channel: {
             widget_color: this.inbox.widget_color,
             website_url: this.channelWebsiteUrl,
             welcome_title: this.channelWelcomeTitle,
             welcome_tagline: this.channelWelcomeTagline,
-            agent_away_message: this.channelAgentAwayMessage,
           },
         };
         if (this.avatarFile) {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -6,9 +6,8 @@
     />
     <woot-loading-state
       v-if="uiFlags.isCreating"
-      :message="$('INBOX_MGMT.ADD.WEBSITE_CHANNEL.LOADING_MESSAGE')"
-    >
-    </woot-loading-state>
+      :message="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.LOADING_MESSAGE')"
+    />
     <form
       v-if="!uiFlags.isCreating"
       class="row"
@@ -76,19 +75,43 @@
           />
         </label>
       </div>
-      <div class="medium-12 columns">
-        <label>
+      <label class="medium-12 columns">
+        {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') }}
+        <select v-model="greetingEnabled">
+          <option :value="true">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
+              )
+            }}
+          </option>
+          <option :value="false">
+            {{
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
+              )
+            }}
+          </option>
+        </select>
+        <p class="help-text">
           {{
             $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
             )
           }}
+        </p>
+      </label>
+      <div v-if="greetingEnabled" class="medium-12 columns">
+        <label>
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
+          }}
           <input
-            v-model.trim="channelAgentAwayMessage"
+            v-model.trim="greetingMessage"
             type="text"
             :placeholder="
               $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
               )
             "
           />
@@ -124,7 +147,8 @@ export default {
       channelWidgetColor: '#009CE0',
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
-      channelAgentAwayMessage: '',
+      greetingEnabled: false,
+      greetingMessage: '',
     };
   },
   computed: {
@@ -138,13 +162,14 @@ export default {
         'inboxes/createWebsiteChannel',
         {
           name: this.inboxName,
+          greeting_enabled: this.greetingEnabled,
+          greeting_message: this.greetingMessage,
           channel: {
             type: 'web_widget',
             website_url: this.channelWebsiteUrl,
             widget_color: this.channelWidgetColor,
             welcome_title: this.channelWelcomeTitle,
             welcome_tagline: this.channelWelcomeTagline,
-            agent_away_message: this.channelAgentAwayMessage,
           },
         }
       );