Merge remote-tracking branch 'origin/feat/whatsapp-embedded-signup' into feat/whatsapp-embedded-signup

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

@@ -11,14 +11,14 @@ import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';
-
 import ContactInfo from './contact/ContactInfo.vue';
 import ContactNotes from './contact/ContactNotes.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import Draggable from 'vuedraggable';
 import MacrosList from './Macros/List.vue';
-import ShopifyOrdersList from '../../../components/widgets/conversation/ShopifyOrdersList.vue';
+import ShopifyOrdersList from 'dashboard/components/widgets/conversation/ShopifyOrdersList.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
 
 const props = defineProps({
   conversationId: {
@@ -29,10 +29,6 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
-  onToggle: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const {
@@ -89,8 +85,6 @@ watch(conversationId, (newConversationId, prevConversationId) => {
 
 watch(contactId, getContactDetails);
 
-const onPanelToggle = props.onToggle;
-
 const onDragEnd = () => {
   dragging.value = false;
   updateUISettings({
@@ -98,6 +92,13 @@ const onDragEnd = () => {
   });
 };
 
+const closeContactPanel = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: false,
+  });
+};
+
 onMounted(() => {
   conversationSidebarItems.value = conversationSidebarItemsOrder.value;
   getContactDetails();
@@ -107,11 +108,11 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <ContactInfo
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
+    <SidebarActionsHeader
+      :title="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      @close="closeContactPanel"
     />
+    <ContactInfo :contact="contact" :channel-type="channelType" />
     <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"

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

@@ -10,6 +10,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import SidepanelSwitch from 'dashboard/components-next/Conversation/SidepanelSwitch.vue';
+import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
 export default {
   components: {
@@ -17,6 +19,8 @@ export default {
     ConversationBox,
     PopOverSearch,
     CmdBarConversationSnooze,
+    SidepanelSwitch,
+    ConversationSidebar,
   },
   beforeRouteLeave(to, from, next) {
     // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
@@ -87,13 +91,17 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    isContactPanelOpen() {
-      if (this.currentChat.id) {
-        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          this.uiSettings;
-        return isContactSidebarOpen;
+
+    shouldShowSidebar() {
+      if (!this.currentChat.id) {
+        return false;
       }
-      return false;
+
+      const {
+        is_contact_sidebar_open: isContactSidebarOpen,
+        is_copilot_panel_open: isCopilotPanelOpen,
+      } = this.uiSettings;
+      return isContactSidebarOpen || isCopilotPanelOpen;
     },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
@@ -189,11 +197,6 @@ export default {
         this.$store.dispatch('clearSelectedState');
       }
     },
-    onToggleContactPanel() {
-      this.updateUISettings({
-        is_contact_sidebar_open: !this.isContactPanelOpen,
-      });
-    },
     onSearch() {
       this.showSearchModal = true;
     },
@@ -225,10 +228,11 @@ export default {
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
+    >
+      <SidepanelSwitch v-if="currentChat.id" />
+    </ConversationBox>
+    <ConversationSidebar v-if="shouldShowSidebar" :current-chat="currentChat" />
     <CmdBarConversationSnooze />
   </section>
 </template>

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>