Merge branch 'develop' into feat/whatsapp-embedded-signup

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -157,6 +157,13 @@ const bulkCheckbox = computed({
   },
 });
 
+const buildSelectedCountLabel = computed(() => {
+  const count = responses.value?.length || 0;
+  return bulkSelectionState.value.allSelected
+    ? t('CAPTAIN.RESPONSES.UNSELECT_ALL', { count })
+    : t('CAPTAIN.RESPONSES.SELECT_ALL', { count });
+});
+
 const handleCardHover = (isHovered, id) => {
   hoveredCard.value = isHovered ? id : null;
 };
@@ -270,7 +277,11 @@ onMounted(() => {
     <template #controls>
       <div
         v-if="shouldShowDropdown"
-        class="mb-4 -mt-3 flex justify-between items-center"
+        class="mb-4 -mt-3 flex justify-between items-center w-fit py-1"
+        :class="{
+          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3':
+            bulkSelectionState.hasSelected,
+        }"
       >
         <div v-if="!bulkSelectionState.hasSelected" class="flex gap-3">
           <OnClickOutside @trigger="isStatusFilterOpen = false">
@@ -306,13 +317,18 @@ onMounted(() => {
         >
           <div
             v-if="bulkSelectionState.hasSelected"
-            class="flex items-center gap-3 ltr:pl-4 rtl:pr-4"
+            class="flex items-center gap-3"
           >
-            <div class="flex items-center gap-1.5">
-              <Checkbox
-                v-model="bulkCheckbox"
-                :indeterminate="bulkSelectionState.isIndeterminate"
-              />
+            <div class="flex items-center gap-3">
+              <div class="flex items-center gap-1.5">
+                <Checkbox
+                  v-model="bulkCheckbox"
+                  :indeterminate="bulkSelectionState.isIndeterminate"
+                />
+                <span class="text-sm text-n-slate-12 font-medium tabular-nums">
+                  {{ buildSelectedCountLabel }}
+                </span>
+              </div>
               <span class="text-sm text-n-slate-10 tabular-nums">
                 {{
                   $t('CAPTAIN.RESPONSES.SELECTED', {
@@ -322,17 +338,23 @@ onMounted(() => {
               </span>
             </div>
             <div class="h-4 w-px bg-n-strong" />
-            <div class="flex gap-2">
+            <div class="flex gap-3 items-center">
               <Button
                 :label="$t('CAPTAIN.RESPONSES.BULK_APPROVE_BUTTON')"
                 sm
-                slate
+                ghost
+                icon="i-lucide-check"
+                class="!px-1.5"
                 @click="handleBulkApprove"
               />
+              <div class="h-4 w-px bg-n-strong" />
               <Button
                 :label="$t('CAPTAIN.RESPONSES.BULK_DELETE_BUTTON')"
                 sm
-                slate
+                ruby
+                ghost
+                class="!px-1.5"
+                icon="i-lucide-trash"
                 @click="bulkDeleteDialog.dialogRef.open()"
               />
             </div>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import { useMapGetter } from 'dashboard/composables/store';
 
 defineProps({
   url: {
@@ -11,6 +12,8 @@ defineProps({
 
 const emit = defineEmits(['back', 'insert']);
 
+const isRTL = useMapGetter('accounts/isRTL');
+
 const onBack = e => {
   e.stopPropagation();
   emit('back');
@@ -35,7 +38,7 @@ const onInsert = e => {
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
-        <IframeLoader :url="url" />
+        <IframeLoader :url="url" :is-rtl="isRTL" is-dir-applied />
       </div>
     </div>
 

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -71,6 +71,12 @@ export default {
         FEATURE_FLAGS.AUTO_RESOLVE_CONVERSATIONS
       );
     },
+    showAudioTranscriptionConfig() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CAPTAIN
+      );
+    },
     languagesSortedByCode() {
       const enabledLanguages = [...this.enabledLanguages];
       return enabledLanguages.sort((l1, l2) =>
@@ -237,7 +243,7 @@ export default {
       <woot-loading-state v-if="uiFlags.isFetchingItem" />
     </div>
     <AutoResolve v-if="showAutoResolutionConfig" />
-    <AudioTranscription v-if="isOnChatwootCloud" />
+    <AudioTranscription v-if="showAudioTranscriptionConfig" />
     <AccountId />
     <div v-if="!uiFlags.isFetchingItem && isOnChatwootCloud">
       <AccountDelete />

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

@@ -10,6 +10,7 @@ import Whatsapp from './channels/Whatsapp.vue';
 import Line from './channels/Line.vue';
 import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
+import Voice from './channels/Voice.vue';
 
 const channelViewList = {
   facebook: Facebook,
@@ -22,6 +23,7 @@ const channelViewList = {
   line: Line,
   telegram: Telegram,
   instagram: Instagram,
+  voice: Voice,
 };
 
 export default defineComponent({

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

@@ -36,6 +36,7 @@ export default {
         { key: 'telegram', name: 'Telegram' },
         { key: 'line', name: 'Line' },
         { key: 'instagram', name: 'Instagram' },
+        { key: 'voice', name: 'Voice' },
       ];
     },
     ...mapGetters({

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

@@ -0,0 +1,184 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { isPhoneE164 } from 'shared/helpers/Validators';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+
+const state = reactive({
+  phoneNumber: '',
+  accountSid: '',
+  authToken: '',
+  apiKeySid: '',
+  apiKeySecret: '',
+  twimlAppSid: '',
+});
+
+const uiFlags = useMapGetter('inboxes/getUIFlags');
+
+const validationRules = {
+  phoneNumber: { required, isPhoneE164 },
+  accountSid: { required },
+  authToken: { required },
+  apiKeySid: { required },
+  apiKeySecret: { required },
+  twimlAppSid: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const formErrors = computed(() => ({
+  phoneNumber: v$.value.phoneNumber?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.ERROR')
+    : '',
+  accountSid: v$.value.accountSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.REQUIRED')
+    : '',
+  authToken: v$.value.authToken?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.REQUIRED')
+    : '',
+  apiKeySid: v$.value.apiKeySid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.REQUIRED')
+    : '',
+  apiKeySecret: v$.value.apiKeySecret?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.REQUIRED')
+    : '',
+  twimlAppSid: v$.value.twimlAppSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.REQUIRED')
+    : '',
+}));
+
+function getProviderConfig() {
+  const config = {
+    account_sid: state.accountSid,
+    auth_token: state.authToken,
+    api_key_sid: state.apiKeySid,
+    api_key_secret: state.apiKeySecret,
+  };
+  if (state.twimlAppSid) config.outgoing_application_sid = state.twimlAppSid;
+  return config;
+}
+
+async function createChannel() {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  try {
+    const channel = await store.dispatch('inboxes/createVoiceChannel', {
+      name: `Voice (${state.phoneNumber})`,
+      voice: {
+        phone_number: state.phoneNumber,
+        provider: 'twilio',
+        provider_config: getProviderConfig(),
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: { page: 'new', inbox_id: channel.id },
+    });
+  } catch (error) {
+    useAlert(
+      error.response?.data?.message ||
+        t('INBOX_MGMT.ADD.VOICE.API.ERROR_MESSAGE')
+    );
+  }
+}
+</script>
+
+<template>
+  <div
+    class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
+  >
+    <PageHeader
+      :header-title="t('INBOX_MGMT.ADD.VOICE.TITLE')"
+      :header-content="t('INBOX_MGMT.ADD.VOICE.DESC')"
+    />
+
+    <form
+      class="flex flex-col gap-4 flex-wrap mx-0"
+      @submit.prevent="createChannel"
+    >
+      <Input
+        v-model="state.phoneNumber"
+        :label="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.PLACEHOLDER')"
+        :message="formErrors.phoneNumber"
+        :message-type="formErrors.phoneNumber ? 'error' : 'info'"
+        @blur="v$.phoneNumber?.$touch"
+      />
+
+      <Input
+        v-model="state.accountSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
+        :message="formErrors.accountSid"
+        :message-type="formErrors.accountSid ? 'error' : 'info'"
+        @blur="v$.accountSid?.$touch"
+      />
+
+      <Input
+        v-model="state.authToken"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
+        :message="formErrors.authToken"
+        :message-type="formErrors.authToken ? 'error' : 'info'"
+        @blur="v$.authToken?.$touch"
+      />
+
+      <Input
+        v-model="state.apiKeySid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER')"
+        :message="formErrors.apiKeySid"
+        :message-type="formErrors.apiKeySid ? 'error' : 'info'"
+        @blur="v$.apiKeySid?.$touch"
+      />
+
+      <Input
+        v-model="state.apiKeySecret"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.PLACEHOLDER')
+        "
+        :message="formErrors.apiKeySecret"
+        :message-type="formErrors.apiKeySecret ? 'error' : 'info'"
+        @blur="v$.apiKeySecret?.$touch"
+      />
+
+      <Input
+        v-model="state.twimlAppSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.PLACEHOLDER')
+        "
+        :message="formErrors.twimlAppSid"
+        :message-type="formErrors.twimlAppSid ? 'error' : 'info'"
+        @blur="v$.twimlAppSid?.$touch"
+      />
+
+      <div>
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          :disabled="isSubmitDisabled"
+          :label="t('INBOX_MGMT.ADD.VOICE.SUBMIT_BUTTON')"
+          type="submit"
+        />
+      </div>
+    </form>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="google"
     :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
     :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue

@@ -12,7 +12,6 @@ defineOptions({
     provider="microsoft"
     :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
     :description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
     :submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
     :error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
   />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue

@@ -30,14 +30,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  inputPlaceholder: {
-    type: String,
-    required: true,
-  },
 });
 
 const isRequestingAuthorization = ref(false);
-const email = ref('');
 
 const client = computed(() => {
   if (props.provider === 'microsoft') {
@@ -50,9 +45,7 @@ const client = computed(() => {
 async function requestAuthorization() {
   try {
     isRequestingAuthorization.value = true;
-    const response = await client.value.generateAuthorization({
-      email: email.value,
-    });
+    const response = await client.value.generateAuthorization();
     const {
       data: { url },
     } = response;
@@ -75,11 +68,6 @@ async function requestAuthorization() {
       :header-content="description"
     />
     <form class="mt-6" @submit.prevent="requestAuthorization">
-      <woot-input
-        v-model="email"
-        type="email"
-        :placeholder="inputPlaceholder"
-      />
       <NextButton
         :is-loading="isRequestingAuthorization"
         type="submit"

app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue

@@ -29,6 +29,7 @@ const i18nMap = {
   'Channel::Line': 'LINE',
   'Channel::Api': 'API',
   'Channel::Instagram': 'INSTAGRAM',
+  'Channel::Voice': 'VOICE',
 };
 
 const twilioChannelName = () => {

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue

@@ -75,10 +75,34 @@ export default {
     onRegistrationSuccess() {
       this.hasEnabledPushPermissions = true;
     },
-    onRequestPermissions() {
-      requestPushPermissions({
-        onSuccess: this.onRegistrationSuccess,
-      });
+    onRequestPermissions(value) {
+      if (value) {
+        // Enable / re-enable push notifications
+        requestPushPermissions({
+          onSuccess: this.onRegistrationSuccess,
+        });
+      } else {
+        // Disable push notifications
+        this.disablePushPermissions();
+      }
+    },
+    disablePushPermissions() {
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager
+          .getSubscription()
+          .then(subscription => {
+            if (subscription) {
+              return subscription.unsubscribe();
+            }
+            return null;
+          })
+          .finally(() => {
+            this.hasEnabledPushPermissions = false;
+          })
+          .catch(() => {
+            // error
+          })
+      );
     },
     getPushSubscription() {
       verifyServiceWorkerExistence(registration =>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SummaryReports.vue

@@ -59,7 +59,7 @@ const defaulSpanRender = cellProps =>
     cellProps.getValue()
   );
 
-const columns = [
+const columns = computed(() => [
   columnHelper.accessor('name', {
     header: t(`SUMMARY_REPORTS.${props.type.toUpperCase()}`),
     width: 300,
@@ -90,7 +90,7 @@ const columns = [
     width: 200,
     cell: defaulSpanRender,
   }),
-];
+]);
 
 const renderAvgTime = value => (value ? formatTime(value) : '--');
 
@@ -142,7 +142,9 @@ const table = useVueTable({
   get data() {
     return tableData.value;
   },
-  columns,
+  get columns() {
+    return columns.value;
+  },
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
 });