Merge branch 'develop' into feat/email-forwarding

app/javascript/dashboard/api/agentBots.js

@@ -21,6 +21,10 @@ class AgentBotsAPI extends ApiClient {
   deleteAgentBotAvatar(botId) {
     return axios.delete(`${this.url}/${botId}/avatar`);
   }
+
+  resetAccessToken(botId) {
+    return axios.post(`${this.url}/${botId}/reset_access_token`);
+  }
 }
 
 export default new AgentBotsAPI();

app/javascript/dashboard/api/auth.js

@@ -102,4 +102,8 @@ export default {
     const urlData = endPoints('resendConfirmation');
     return axios.post(urlData.url);
   },
+  resetAccessToken() {
+    const urlData = endPoints('resetAccessToken');
+    return axios.post(urlData.url);
+  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -51,6 +51,9 @@ const endPoints = {
   resendConfirmation: {
     url: '/api/v1/profile/resend_confirmation',
   },
+  resetAccessToken: {
+    url: '/api/v1/profile/reset_access_token',
+  },
 };
 
 export default page => {

app/javascript/dashboard/api/specs/agentBots.spec.js

@@ -9,5 +9,6 @@ describe('#AgentBotsAPI', () => {
     expect(AgentBotsAPI).toHaveProperty('create');
     expect(AgentBotsAPI).toHaveProperty('update');
     expect(AgentBotsAPI).toHaveProperty('delete');
+    expect(AgentBotsAPI).toHaveProperty('resetAccessToken');
   });
 });

app/javascript/dashboard/components-next/button/ConfirmButton.story.vue

@@ -0,0 +1,41 @@
+<script setup>
+import ConfirmButton from './ConfirmButton.vue';
+import { ref } from 'vue';
+
+const count = ref(0);
+
+const incrementCount = () => {
+  count.value += 1;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/ConfirmButton"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Basic">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Delete"
+          confirm-label="Confirm?"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Color Change">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Archive"
+          confirm-label="Confirm?"
+          color="slate"
+          confirm-color="amber"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/button/ConfirmButton.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from './Button.vue';
+
+const props = defineProps({
+  label: { type: [String, Number], default: '' },
+  confirmLabel: { type: [String, Number], default: '' },
+  color: { type: String, default: 'blue' },
+  confirmColor: { type: String, default: 'ruby' },
+  confirmHint: { type: String, default: '' },
+  variant: { type: String, default: null },
+  size: { type: String, default: null },
+  justify: { type: String, default: null },
+  icon: { type: [String, Object, Function], default: '' },
+  trailingIcon: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['click']);
+
+const isConfirmMode = ref(false);
+const isClicked = ref(false);
+
+const currentLabel = computed(() => {
+  return isConfirmMode.value ? props.confirmLabel : props.label;
+});
+
+const currentColor = computed(() => {
+  return isConfirmMode.value ? props.confirmColor : props.color;
+});
+const resetConfirmMode = () => {
+  isConfirmMode.value = false;
+  isClicked.value = false;
+};
+
+const handleClick = () => {
+  if (!isConfirmMode.value) {
+    isConfirmMode.value = true;
+  } else {
+    isClicked.value = true;
+    emit('click');
+    setTimeout(resetConfirmMode, 400);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="relative"
+    :class="{
+      'animate-bounce-complete': isClicked,
+    }"
+  >
+    <Button
+      type="button"
+      :label="currentLabel"
+      :color="currentColor"
+      :variant="variant"
+      :size="size"
+      :justify="justify"
+      :icon="icon"
+      :trailing-icon="trailingIcon"
+      :is-loading="isLoading"
+      @click="handleClick"
+      @blur="resetConfirmMode"
+    >
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon" />
+      </template>
+    </Button>
+    <div
+      v-if="isConfirmMode && confirmHint"
+      class="absolute mt-1 w-full text-[10px] text-center text-n-slate-10"
+    >
+      {{ confirmHint }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes bounce-complete {
+  0% {
+    transform: scale(0.95);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-bounce-complete {
+  animation: bounce-complete 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+</style>

app/javascript/dashboard/composables/usePolicy.js

@@ -129,6 +129,7 @@ export function usePolicy() {
   return {
     checkPermissions,
     shouldShowPaywall,
+    isFeatureFlagEnabled,
     shouldShow,
   };
 }

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

@@ -62,7 +62,9 @@
     "ACCESS_TOKEN": {
       "TITLE": "Access Token",
       "DESCRIPTION": "Copy the access token and save it securely",
-      "COPY_SUCCESSFUL": "Access token copied to clipboard"
+      "COPY_SUCCESSFUL": "Access token copied to clipboard",
+      "RESET_SUCCESS": "Access token regenerated successfully",
+      "RESET_ERROR": "Unable to regenerate access token. Please try again"
     },
     "FORM": {
       "AVATAR": {

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

@@ -76,7 +76,12 @@
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "COPY": "Copy",
+        "RESET": "Reset",
+        "CONFIRM_RESET": "Are you sure?",
+        "CONFIRM_HINT": "Click again to confirm",
+        "RESET_SUCCESS": "Access token regenerated successfully",
+        "RESET_ERROR": "Unable to regenerate access token. Please try again"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Alerts",

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -10,10 +10,8 @@ import {
   CONTACT_PERMISSIONS,
   PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import {
-  getUserPermissions,
-  filterItemsByPermission,
-} from 'dashboard/helper/permissionsHelper.js';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 import Policy from 'dashboard/components/policy.vue';
@@ -39,8 +37,6 @@ const pages = ref({
   articles: 1,
 });
 
-const currentUser = useMapGetter('getCurrentUser');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
@@ -83,9 +79,7 @@ const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
 const filterArticles = filterByTab('articles');
 
-const userPermissions = computed(() =>
-  getUserPermissions(currentUser.value, currentAccountId.value)
-);
+const { shouldShow, isFeatureFlagEnabled } = usePolicy();
 
 const TABS_CONFIG = {
   all: {
@@ -111,47 +105,67 @@ const TABS_CONFIG = {
   },
   articles: {
     permissions: [...ROLES, PORTAL_PERMISSIONS],
+    featureFlag: FEATURE_FLAGS.HELP_CENTER,
     count: () => mappedArticles.value.length,
   },
 };
 
 const tabs = computed(() => {
-  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
-    key,
-    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
-    count: config.count(),
-    showBadge: key !== 'all',
-    permissions: config.permissions,
-  }));
-
-  return filterItemsByPermission(
-    configs,
-    userPermissions.value,
-    item => item.permissions
-  );
+  return Object.entries(TABS_CONFIG)
+    .map(([key, config]) => ({
+      key,
+      name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+      count: config.count(),
+      showBadge: key !== 'all',
+      permissions: config.permissions,
+      featureFlag: config.featureFlag,
+    }))
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    });
 });
 
 const totalSearchResultsCount = computed(() => {
-  const permissionCounts = {
-    contacts: {
+  const permissionCounts = [
+    {
       permissions: [...ROLES, CONTACT_PERMISSIONS],
       count: () => contacts.value.length,
     },
-    conversations: {
+    {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
-    articles: {
+    {
       permissions: [...ROLES, PORTAL_PERMISSIONS],
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       count: () => articles.value.length,
     },
-  };
-  return filterItemsByPermission(
-    permissionCounts,
-    userPermissions.value,
-    item => item.permissions,
-    (_, item) => item.count
-  ).reduce((total, count) => total + count(), 0);
+  ];
+
+  return permissionCounts
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    })
+    .map(config => {
+      return config.count();
+    })
+    .reduce((sum, count) => sum + count, 0);
 });
 
 const activeTabIndex = computed(() => {
@@ -355,7 +369,9 @@ onUnmounted(() => {
             </Policy>
 
             <Policy
+              v-if="isFeatureFlagEnabled(FEATURE_FLAGS.HELP_CENTER)"
               :permissions="[...ROLES, PORTAL_PERMISSIONS]"
+              :feature-flag="FEATURE_FLAGS.HELP_CENTER"
               class="flex flex-col justify-center"
             >
               <SearchResultArticlesList

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue

@@ -228,7 +228,20 @@ const initializeForm = () => {
 
 const onCopyToken = async value => {
   await copyTextToClipboard(value);
-  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+  useAlert(t('AGENT_BOTS.ACCESS_TOKEN.COPY_SUCCESSFUL'));
+};
+
+const onResetToken = async () => {
+  const response = await store.dispatch(
+    'agentBots/resetAccessToken',
+    props.selectedBot.id
+  );
+  if (response) {
+    accessToken.value = response.access_token;
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_SUCCESS'));
+  } else {
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_ERROR'));
+  }
 };
 
 const closeModal = () => {
@@ -312,7 +325,18 @@ defineExpose({ dialogRef });
         >
           {{ $t('AGENT_BOTS.ACCESS_TOKEN.TITLE') }}
         </label>
-        <AccessToken :value="accessToken" @on-copy="onCopyToken" />
+        <AccessToken
+          v-if="type === MODAL_TYPES.EDIT"
+          :value="accessToken"
+          @on-copy="onCopyToken"
+          @on-reset="onResetToken"
+        />
+        <AccessToken
+          v-else
+          :value="accessToken"
+          :show-reset-button="false"
+          @on-copy="onCopyToken"
+        />
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">

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

@@ -1,14 +1,17 @@
 <script setup>
 import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import ConfirmButton from 'dashboard/components-next/button/ConfirmButton.vue';
+
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
+  value: { type: String, default: '' },
+  showResetButton: { type: Boolean, default: true },
 });
-const emit = defineEmits(['onCopy']);
+
+const emit = defineEmits(['onCopy', 'onReset']);
+
 const inputType = ref('password');
+
 const toggleMasked = () => {
   inputType.value = inputType.value === 'password' ? 'text' : 'password';
 };
@@ -20,6 +23,10 @@ const maskIcon = computed(() => {
 const onClick = () => {
   emit('onCopy', props.value);
 };
+
+const onReset = () => {
+  emit('onReset');
+};
 </script>
 
 <template>
@@ -38,7 +45,7 @@ const onClick = () => {
     >
       <template #masked>
         <button
-          class="absolute top-1.5 ltr:right-0.5 rtl:left-0.5"
+          class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
           type="button"
           @click="toggleMasked"
         >
@@ -46,15 +53,28 @@ const onClick = () => {
         </button>
       </template>
     </woot-input>
-    <FormButton
-      type="button"
-      size="large"
-      icon="text-copy"
-      variant="outline"
-      color-scheme="secondary"
-      @click="onClick"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </FormButton>
+    <div class="flex flex-row gap-2">
+      <NextButton
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
+        slate
+        outline
+        type="button"
+        icon="i-lucide-copy"
+        class="rounded-xl"
+        @click="onClick"
+      />
+      <ConfirmButton
+        v-if="showResetButton"
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
+        :confirm-label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')"
+        :confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
+        color="slate"
+        confirm-color="ruby"
+        variant="outline"
+        icon="i-lucide-key-round"
+        class="rounded-xl"
+        @click="onReset"
+      />
+    </div>
   </div>
 </template>

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

@@ -181,6 +181,14 @@ export default {
       await copyTextToClipboard(value);
       useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
+    async resetAccessToken() {
+      const success = await this.$store.dispatch('resetAccessToken');
+      if (success) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_SUCCESS'));
+      } else {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_ERROR'));
+      }
+    },
   },
 };
 </script>
@@ -281,7 +289,11 @@ export default {
         )
       "
     >
-      <AccessToken :value="currentUser.access_token" @on-copy="onCopyToken" />
+      <AccessToken
+        :value="currentUser.access_token"
+        @on-copy="onCopyToken"
+        @on-reset="resetAccessToken"
+      />
     </FormSection>
   </div>
 </template>

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

@@ -172,6 +172,17 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false });
     }
   },
+
+  resetAccessToken: async ({ commit }, botId) => {
+    try {
+      const response = await AgentBotsAPI.resetAccessToken(botId);
+      commit(types.EDIT_AGENT_BOT, response.data);
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      return null;
+    }
+  },
 };
 
 export const mutations = {

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

@@ -213,6 +213,16 @@ export const actions = {
     }
   },
 
+  resetAccessToken: async ({ commit }) => {
+    try {
+      const response = await authAPI.resetAccessToken();
+      commit(types.SET_CURRENT_USER, response.data);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  },
+
   resendConfirmation: async () => {
     try {
       await authAPI.resendConfirmation();

app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js

@@ -170,4 +170,21 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { ...agentBotRecords[0], access_token: 'new_token_123' },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken(
+        { commit },
+        agentBotRecords[0].id
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.EDIT_AGENT_BOT, mockResponse.data],
+      ]);
+      expect(result).toBe(mockResponse.data);
+    });
+  });
 });

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

@@ -228,4 +228,20 @@ describe('#actions', () => {
       );
     });
   });
+
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { id: 1, name: 'John', access_token: 'new_token_123' },
+        headers: { expiry: 581842904 },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken({ commit });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER, mockResponse.data],
+      ]);
+      expect(result).toBe(true);
+    });
+  });
 });