Merge branch 'develop' into feat/github-integration

2025-07-17 09:26:59 +05:30
parent f90a324ddf 64ba23688b
commit a1747eeb62
122 changed files with 5096 additions and 226 deletions
@@ -3,6 +3,7 @@ import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import CampaignsPageRouteView from './pages/CampaignsPageRouteView.vue';
 import LiveChatCampaignsPage from './pages/LiveChatCampaignsPage.vue';
 import SMSCampaignsPage from './pages/SMSCampaignsPage.vue';
+import WhatsAppCampaignsPage from './pages/WhatsAppCampaignsPage.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';

 const meta = {
@@ -50,6 +51,15 @@ const campaignsRoutes = {
          meta,
          component: SMSCampaignsPage,
        },
+        {
+          path: 'whatsapp',
+          name: 'campaigns_whatsapp_index',
+          meta: {
+            ...meta,
+            featureFlag: FEATURE_FLAGS.WHATSAPP_CAMPAIGNS,
+          },
+          component: WhatsAppCampaignsPage,
+        },
      ],
    },
  ],
@@ -3,7 +3,6 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';

 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
@@ -25,8 +24,8 @@ const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);

 const [showLiveChatCampaignDialog, toggleLiveChatCampaignDialog] = useToggle();

-const liveChatCampaigns = computed(() =>
-  getters['campaigns/getCampaigns'].value(CAMPAIGN_TYPES.ONGOING)
+const liveChatCampaigns = computed(
+  () => getters['campaigns/getLiveChatCampaigns'].value
 );

 const hasNoLiveChatCampaigns = computed(
@@ -59,7 +58,7 @@ const handleDelete = campaign => {

    <div
      v-if="isFetchingCampaigns"
-      class="flex items-center justify-center py-10 text-n-slate-11"
+      class="flex justify-center items-center py-10 text-n-slate-11"
    >
      <Spinner />
    </div>
@@ -3,7 +3,6 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';

 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
@@ -23,9 +22,7 @@ const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);

 const confirmDeleteCampaignDialogRef = ref(null);

-const SMSCampaigns = computed(() =>
-  getters['campaigns/getCampaigns'].value(CAMPAIGN_TYPES.ONE_OFF)
-);
+const SMSCampaigns = computed(() => getters['campaigns/getSMSCampaigns'].value);

 const hasNoSMSCampaigns = computed(
  () => SMSCampaigns.value?.length === 0 && !isFetchingCampaigns.value
@@ -0,0 +1,74 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
+import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
+import WhatsAppCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue';
+import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
+import WhatsAppCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/WhatsAppCampaignEmptyState.vue';
+
+const { t } = useI18n();
+const getters = useStoreGetters();
+
+const selectedCampaign = ref(null);
+const [showWhatsAppCampaignDialog, toggleWhatsAppCampaignDialog] = useToggle();
+
+const uiFlags = useMapGetter('campaigns/getUIFlags');
+const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
+
+const confirmDeleteCampaignDialogRef = ref(null);
+
+const WhatsAppCampaigns = computed(
+  () => getters['campaigns/getWhatsAppCampaigns'].value
+);
+
+const hasNoWhatsAppCampaigns = computed(
+  () => WhatsAppCampaigns.value?.length === 0 && !isFetchingCampaigns.value
+);
+
+const handleDelete = campaign => {
+  selectedCampaign.value = campaign;
+  confirmDeleteCampaignDialogRef.value.dialogRef.open();
+};
+</script>
+
+<template>
+  <CampaignLayout
+    :header-title="t('CAMPAIGN.WHATSAPP.HEADER_TITLE')"
+    :button-label="t('CAMPAIGN.WHATSAPP.NEW_CAMPAIGN')"
+    @click="toggleWhatsAppCampaignDialog()"
+    @close="toggleWhatsAppCampaignDialog(false)"
+  >
+    <template #action>
+      <WhatsAppCampaignDialog
+        v-if="showWhatsAppCampaignDialog"
+        @close="toggleWhatsAppCampaignDialog(false)"
+      />
+    </template>
+    <div
+      v-if="isFetchingCampaigns"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <CampaignList
+      v-else-if="!hasNoWhatsAppCampaigns"
+      :campaigns="WhatsAppCampaigns"
+      @delete="handleDelete"
+    />
+    <WhatsAppCampaignEmptyState
+      v-else
+      :title="t('CAMPAIGN.WHATSAPP.EMPTY_STATE.TITLE')"
+      :subtitle="t('CAMPAIGN.WHATSAPP.EMPTY_STATE.SUBTITLE')"
+      class="pt-14"
+    />
+    <ConfirmDeleteCampaignDialog
+      ref="confirmDeleteCampaignDialogRef"
+      :selected-campaign="selectedCampaign"
+    />
+  </CampaignLayout>
+</template>
@@ -0,0 +1,296 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+import SettingsPageLayout from 'dashboard/components-next/captain/SettingsPageLayout.vue';
+import SettingsHeader from 'dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue';
+import SuggestedRules from 'dashboard/components-next/captain/assistant/SuggestedRules.vue';
+import AddNewRulesInput from 'dashboard/components-next/captain/assistant/AddNewRulesInput.vue';
+import AddNewRulesDialog from 'dashboard/components-next/captain/assistant/AddNewRulesDialog.vue';
+import RuleCard from 'dashboard/components-next/captain/assistant/RuleCard.vue';
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const assistantId = route.params.assistantId;
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const isFetching = computed(() => uiFlags.value.fetchingItem);
+const assistant = computed(() =>
+  store.getters['captainAssistants/getRecord'](Number(assistantId))
+);
+
+const searchQuery = ref('');
+const newInlineRule = ref('');
+const newDialogRule = ref('');
+
+const breadcrumbItems = computed(() => {
+  return [
+    {
+      label: t('CAPTAIN.ASSISTANTS.SETTINGS.BREADCRUMB.ASSISTANT'),
+      routeName: 'captain_assistants_index',
+    },
+    { label: assistant.value?.name, routeName: 'captain_assistants_edit' },
+    { label: t('CAPTAIN.ASSISTANTS.GUARDRAILS.BREADCRUMB.TITLE') },
+  ];
+});
+
+const guardrailsContent = computed(() => assistant.value?.guardrails || []);
+
+const displayGuardrails = computed(() =>
+  guardrailsContent.value.map((c, idx) => ({ id: idx, content: c }))
+);
+
+const guardrailsExample = [
+  {
+    id: 1,
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    id: 2,
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    id: 3,
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+
+const filteredGuardrails = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return displayGuardrails.value;
+  return picoSearch(displayGuardrails.value, query, ['content']);
+});
+
+const shouldShowSuggestedRules = computed(() => {
+  return uiSettings.value?.show_guardrails_suggestions !== false;
+});
+
+const closeSuggestedRules = () => {
+  updateUISettings({ show_guardrails_suggestions: false });
+};
+
+// Bulk selection & hover state
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const handleRuleSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const handleRuleHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const buildSelectedCountLabel = computed(() => {
+  const count = displayGuardrails.value.length || 0;
+  const isAllSelected = bulkSelectedIds.value.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.UNSELECT_ALL', { count })
+    : t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.SELECT_ALL', { count });
+});
+
+const selectedCountLabel = computed(() => {
+  return t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.SELECTED', {
+    count: bulkSelectedIds.value.size,
+  });
+});
+
+const saveGuardrails = async list => {
+  await store.dispatch('captainAssistants/update', {
+    id: assistantId,
+    assistant: { guardrails: list },
+  });
+};
+
+const addGuardrail = async content => {
+  try {
+    const newGuardrails = [...guardrailsContent.value, content];
+    await saveGuardrails(newGuardrails);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.ERROR'));
+  }
+};
+
+const editGuardrail = async ({ id, content }) => {
+  try {
+    const updated = [...guardrailsContent.value];
+    updated[id] = content;
+    await saveGuardrails(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.UPDATE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.UPDATE.ERROR'));
+  }
+};
+
+const deleteGuardrail = async id => {
+  try {
+    const updated = guardrailsContent.value.filter((_, idx) => idx !== id);
+    await saveGuardrails(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.ERROR'));
+  }
+};
+
+const bulkDeleteGuardrails = async () => {
+  try {
+    if (bulkSelectedIds.value.size === 0) return;
+    const updated = guardrailsContent.value.filter(
+      (_, idx) => !bulkSelectedIds.value.has(idx)
+    );
+    await saveGuardrails(updated);
+    bulkSelectedIds.value.clear();
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.ERROR'));
+  }
+};
+
+const addAllExample = () => {
+  updateUISettings({ show_guardrails_suggestions: false });
+  try {
+    const exampleContents = guardrailsExample.map(example => example.content);
+    const newGuardrails = [...guardrailsContent.value, ...exampleContents];
+    saveGuardrails(newGuardrails);
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.ERROR'));
+  }
+};
+</script>
+
+<template>
+  <SettingsPageLayout
+    :breadcrumb-items="breadcrumbItems"
+    :is-fetching="isFetching"
+  >
+    <template #body>
+      <SettingsHeader
+        :heading="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.TITLE')"
+        :description="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.DESCRIPTION')"
+      />
+      <div v-if="shouldShowSuggestedRules" class="flex mt-7 flex-col gap-4">
+        <SuggestedRules
+          :title="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.TITLE')"
+          :items="guardrailsExample"
+          @add="addAllExample"
+          @close="closeSuggestedRules"
+        >
+          <template #default="{ item }">
+            <div class="flex items-center justify-between w-full">
+              <span class="text-sm text-n-slate-12">
+                {{ item.content }}
+              </span>
+              <Button
+                :label="
+                  $t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD_SINGLE')
+                "
+                ghost
+                xs
+                slate
+                class="!text-sm !text-n-slate-11 flex-shrink-0"
+                @click="addGuardrail(item.content)"
+              />
+            </div>
+          </template>
+        </SuggestedRules>
+      </div>
+      <div class="flex mt-7 flex-col gap-4">
+        <div class="flex justify-between items-center">
+          <BulkSelectBar
+            v-model="bulkSelectedIds"
+            :all-items="displayGuardrails"
+            :select-all-label="buildSelectedCountLabel"
+            :selected-count-label="selectedCountLabel"
+            :delete-label="
+              $t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.BULK_DELETE_BUTTON')
+            "
+            @bulk-delete="bulkDeleteGuardrails"
+          >
+            <template #default-actions>
+              <AddNewRulesDialog
+                v-model="newDialogRule"
+                :placeholder="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.PLACEHOLDER')
+                "
+                :button-label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.TITLE')"
+                :confirm-label="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.CREATE')
+                "
+                :cancel-label="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.CANCEL')
+                "
+                @add="addGuardrail"
+              />
+              <!-- Will enable this feature in future -->
+              <!-- <div class="h-4 w-px bg-n-strong" />
+              <Button
+                :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.TEST_ALL')"
+                xs
+                ghost
+                slate
+                class="!text-sm"
+              /> -->
+            </template>
+          </BulkSelectBar>
+          <div
+            v-if="displayGuardrails.length && bulkSelectedIds.size === 0"
+            class="max-w-[22.5rem] w-full min-w-0"
+          >
+            <Input
+              v-model="searchQuery"
+              :placeholder="
+                t('CAPTAIN.ASSISTANTS.GUARDRAILS.LIST.SEARCH_PLACEHOLDER')
+              "
+            />
+          </div>
+        </div>
+        <div v-if="displayGuardrails.length === 0" class="mt-1 mb-2">
+          <span class="text-n-slate-11 text-sm">
+            {{ t('CAPTAIN.ASSISTANTS.GUARDRAILS.EMPTY_MESSAGE') }}
+          </span>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <RuleCard
+            v-for="guardrail in filteredGuardrails"
+            :id="guardrail.id"
+            :key="guardrail.id"
+            :content="guardrail.content"
+            :is-selected="bulkSelectedIds.has(guardrail.id)"
+            :selectable="
+              hoveredCard === guardrail.id || bulkSelectedIds.size > 0
+            "
+            @select="handleRuleSelect"
+            @edit="editGuardrail"
+            @delete="deleteGuardrail"
+            @hover="isHovered => handleRuleHover(isHovered, guardrail.id)"
+          />
+        </div>
+        <AddNewRulesInput
+          v-model="newInlineRule"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.PLACEHOLDER')
+          "
+          :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.SAVE')"
+          @add="addGuardrail"
+        />
+      </div>
+    </template>
+  </SettingsPageLayout>
+</template>
@@ -0,0 +1,318 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+import SettingsPageLayout from 'dashboard/components-next/captain/SettingsPageLayout.vue';
+import SettingsHeader from 'dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue';
+import SuggestedRules from 'dashboard/components-next/captain/assistant/SuggestedRules.vue';
+import AddNewRulesInput from 'dashboard/components-next/captain/assistant/AddNewRulesInput.vue';
+import AddNewRulesDialog from 'dashboard/components-next/captain/assistant/AddNewRulesDialog.vue';
+import RuleCard from 'dashboard/components-next/captain/assistant/RuleCard.vue';
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const assistantId = route.params.assistantId;
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const isFetching = computed(() => uiFlags.value.fetchingItem);
+const assistant = computed(() =>
+  store.getters['captainAssistants/getRecord'](Number(assistantId))
+);
+
+const searchQuery = ref('');
+const newInlineRule = ref('');
+const newDialogRule = ref('');
+
+const breadcrumbItems = computed(() => {
+  return [
+    {
+      label: t('CAPTAIN.ASSISTANTS.SETTINGS.BREADCRUMB.ASSISTANT'),
+      routeName: 'captain_assistants_index',
+    },
+    { label: assistant.value?.name, routeName: 'captain_assistants_edit' },
+    { label: t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE') },
+  ];
+});
+
+const guidelinesContent = computed(
+  () => assistant.value?.response_guidelines || []
+);
+
+const displayGuidelines = computed(() =>
+  guidelinesContent.value.map((c, idx) => ({ id: idx, content: c }))
+);
+
+const guidelinesExample = [
+  {
+    id: 1,
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    id: 2,
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    id: 3,
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+
+const filteredGuidelines = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return displayGuidelines.value;
+  return picoSearch(displayGuidelines.value, query, ['content']);
+});
+
+const shouldShowSuggestedRules = computed(() => {
+  return uiSettings.value?.show_response_guidelines_suggestions !== false;
+});
+
+const closeSuggestedRules = () => {
+  updateUISettings({ show_response_guidelines_suggestions: false });
+};
+
+// Bulk selection & hover state
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const handleRuleSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const handleRuleHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const buildSelectedCountLabel = computed(() => {
+  const count = displayGuidelines.value.length || 0;
+  const isAllSelected = bulkSelectedIds.value.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.UNSELECT_ALL', {
+        count,
+      })
+    : t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.SELECT_ALL', {
+        count,
+      });
+});
+
+const selectedCountLabel = computed(() => {
+  return t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.SELECTED', {
+    count: bulkSelectedIds.value.size,
+  });
+});
+
+const saveGuidelines = async list => {
+  await store.dispatch('captainAssistants/update', {
+    id: assistantId,
+    assistant: { response_guidelines: list },
+  });
+};
+
+const addGuideline = async content => {
+  try {
+    const updated = [...guidelinesContent.value, content];
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.ERROR'));
+  }
+};
+
+const editGuideline = async ({ id, content }) => {
+  try {
+    const updated = [...guidelinesContent.value];
+    updated[id] = content;
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.UPDATE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.UPDATE.ERROR'));
+  }
+};
+
+const deleteGuideline = async id => {
+  try {
+    const updated = guidelinesContent.value.filter((_, idx) => idx !== id);
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.ERROR'));
+  }
+};
+
+const bulkDeleteGuidelines = async () => {
+  try {
+    if (bulkSelectedIds.value.size === 0) return;
+    const updated = guidelinesContent.value.filter(
+      (_, idx) => !bulkSelectedIds.value.has(idx)
+    );
+    await saveGuidelines(updated);
+    bulkSelectedIds.value.clear();
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.ERROR'));
+  }
+};
+
+const addAllExample = async () => {
+  updateUISettings({ show_response_guidelines_suggestions: false });
+  try {
+    const exampleContents = guidelinesExample.map(example => example.content);
+    const newGuidelines = [...guidelinesContent.value, ...exampleContents];
+    await saveGuidelines(newGuidelines);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.ERROR'));
+  }
+};
+</script>
+
+<template>
+  <SettingsPageLayout
+    :breadcrumb-items="breadcrumbItems"
+    :is-fetching="isFetching"
+  >
+    <template #body>
+      <SettingsHeader
+        :heading="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE')"
+        :description="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.DESCRIPTION')"
+      />
+      <div v-if="shouldShowSuggestedRules" class="flex mt-7 flex-col gap-4">
+        <SuggestedRules
+          :title="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE')"
+          :items="guidelinesExample"
+          @add="addAllExample"
+          @close="closeSuggestedRules"
+        >
+          <template #default="{ item }">
+            <div class="flex items-center justify-between w-full">
+              <span class="text-sm text-n-slate-12">
+                {{ item.content }}
+              </span>
+              <Button
+                :label="
+                  t(
+                    'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.ADD_SINGLE'
+                  )
+                "
+                ghost
+                xs
+                slate
+                class="!text-sm !text-n-slate-11 flex-shrink-0"
+                @click="addGuideline(item.content)"
+              />
+            </div>
+          </template>
+        </SuggestedRules>
+      </div>
+      <div class="flex mt-7 flex-col gap-4">
+        <div class="flex justify-between items-center">
+          <BulkSelectBar
+            v-model="bulkSelectedIds"
+            :all-items="displayGuidelines"
+            :select-all-label="buildSelectedCountLabel"
+            :selected-count-label="selectedCountLabel"
+            :delete-label="
+              $t(
+                'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.BULK_DELETE_BUTTON'
+              )
+            "
+            @bulk-delete="bulkDeleteGuidelines"
+          >
+            <template #default-actions>
+              <AddNewRulesDialog
+                v-model="newDialogRule"
+                :placeholder="
+                  t(
+                    'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.PLACEHOLDER'
+                  )
+                "
+                :button-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.TITLE')
+                "
+                :confirm-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.CREATE')
+                "
+                :cancel-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.CANCEL')
+                "
+                @add="addGuideline"
+              />
+              <!-- Will enable this feature in future -->
+              <!-- <div class="h-4 w-px bg-n-strong" />
+              <Button
+                :label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.TEST_ALL')
+                "
+                sm
+                ghost
+                slate
+              /> -->
+            </template>
+          </BulkSelectBar>
+          <div
+            v-if="displayGuidelines.length && bulkSelectedIds.size === 0"
+            class="max-w-[22.5rem] w-full min-w-0"
+          >
+            <Input
+              v-model="searchQuery"
+              :placeholder="
+                t(
+                  'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.LIST.SEARCH_PLACEHOLDER'
+                )
+              "
+            />
+          </div>
+        </div>
+        <div v-if="displayGuidelines.length === 0" class="mt-1 mb-2">
+          <span class="text-n-slate-11 text-sm">
+            {{ t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.EMPTY_MESSAGE') }}
+          </span>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <RuleCard
+            v-for="guideline in filteredGuidelines"
+            :id="guideline.id"
+            :key="guideline.id"
+            :content="guideline.content"
+            :is-selected="bulkSelectedIds.has(guideline.id)"
+            :selectable="
+              hoveredCard === guideline.id || bulkSelectedIds.size > 0
+            "
+            @select="handleRuleSelect"
+            @hover="isHovered => handleRuleHover(isHovered, guideline.id)"
+            @edit="editGuideline"
+            @delete="deleteGuideline"
+          />
+        </div>
+        <AddNewRulesInput
+          v-model="newInlineRule"
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.PLACEHOLDER'
+            )
+          "
+          :label="
+            t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.SAVE')
+          "
+          @add="addGuideline"
+        />
+      </div>
+    </template>
+  </SettingsPageLayout>
+</template>
@@ -32,7 +32,7 @@ const controlItems = computed(() => {
      description: t(
        'CAPTAIN.ASSISTANTS.SETTINGS.CONTROL_ITEMS.OPTIONS.GUARDRAILS.DESCRIPTION'
      ),
-      // routeName: 'captain_assistants_guardrails_index',
+      routeName: 'captain_assistants_guardrails_index',
    },
    {
      name: t(
@@ -50,7 +50,7 @@ const controlItems = computed(() => {
      description: t(
        'CAPTAIN.ASSISTANTS.SETTINGS.CONTROL_ITEMS.OPTIONS.RESPONSE_GUIDELINES.DESCRIPTION'
      ),
-      // routeName: 'captain_assistants_guidelines_index',
+      routeName: 'captain_assistants_guidelines_index',
    },
  ];
 });
@@ -5,6 +5,8 @@ import AssistantIndex from './assistants/Index.vue';
 import AssistantEdit from './assistants/Edit.vue';
 // import AssistantSettings from './assistants/settings/Settings.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
+import AssistantGuardrailsIndex from './assistants/guardrails/Index.vue';
+import AssistantGuidelinesIndex from './assistants/guidelines/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';

@@ -50,6 +52,36 @@ export const routes = [
      ],
    },
  },
+  {
+    path: frontendURL(
+      'accounts/:accountId/captain/assistants/:assistantId/guardrails'
+    ),
+    component: AssistantGuardrailsIndex,
+    name: 'captain_assistants_guardrails_index',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
+  {
+    path: frontendURL(
+      'accounts/:accountId/captain/assistants/:assistantId/guidelines'
+    ),
+    component: AssistantGuidelinesIndex,
+    name: 'captain_assistants_guidelines_index',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
  {
    path: frontendURL('accounts/:accountId/captain/documents'),
    component: DocumentsIndex,
@@ -555,6 +555,11 @@ export const AUTOMATION_ACTION_TYPES = [
    label: 'SEND_MESSAGE',
    inputType: 'textarea',
  },
+  {
+    key: 'add_private_note',
+    label: 'ADD_PRIVATE_NOTE',
+    inputType: 'textarea',
+  },
  {
    key: 'change_priority',
    label: 'CHANGE_PRIORITY',
@@ -47,6 +47,13 @@ export default {
        this.currentInbox.provider === 'whatsapp_cloud'
      );
    },
+    // If the inbox is a whatsapp cloud inbox and the source is not embedded signup, then show the webhook details
+    shouldShowWhatsAppWebhookDetails() {
+      return (
+        this.isWhatsAppCloudInbox &&
+        this.currentInbox.provider_config?.source !== 'embedded_signup'
+      );
+    },
    message() {
      if (this.isATwilioInbox) {
        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
@@ -66,7 +73,7 @@ export default {
        )}`;
      }

-      if (this.isWhatsAppCloudInbox) {
+      if (this.isWhatsAppCloudInbox && this.shouldShowWhatsAppWebhookDetails) {
        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
        )}`;
@@ -113,8 +120,11 @@ export default {
            :script="currentInbox.callback_webhook_url"
          />
        </div>
-        <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
-          <p class="mt-8 font-medium text-n-slate-11">
+        <div
+          v-if="shouldShowWhatsAppWebhookDetails"
+          class="w-[50%] max-w-[50%] ml-[25%]"
+        >
+          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
            {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
          </p>
          <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
@@ -86,6 +86,12 @@ export default {
    selectedTabKey() {
      return this.tabs[this.selectedTabIndex]?.key;
    },
+    shouldShowWhatsAppConfiguration() {
+      return !!(
+        this.isAWhatsAppCloudChannel &&
+        this.inbox.provider_config?.source !== 'embedded_signup'
+      );
+    },
    whatsAppAPIProviderName() {
      if (this.isAWhatsAppCloudChannel) {
        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
@@ -137,7 +143,7 @@ export default {
        this.isALineChannel ||
        this.isAPIInbox ||
        (this.isAnEmailChannel && !this.inbox.provider) ||
-        this.isAWhatsAppChannel ||
+        this.shouldShowWhatsAppConfiguration ||
        this.isAWebWidgetInbox
      ) {
        visibleToAllChannelTabs = [
@@ -383,7 +389,7 @@ export default {

 <template>
  <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto settings"
+    class="overflow-auto flex-grow flex-shrink pr-0 pl-0 w-full min-w-0 settings"
  >
    <SettingIntroBanner
      :header-image="inbox.avatarUrl"
@@ -405,7 +411,7 @@ export default {
        />
      </woot-tabs>
    </SettingIntroBanner>
-    <section class="w-full max-w-6xl mx-auto">
+    <section class="mx-auto w-full max-w-6xl">
      <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
      <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
      <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
@@ -735,7 +741,7 @@ export default {
              :business-name="businessName"
              @update="toggleSenderNameType"
            />
-            <div class="flex flex-col items-start gap-2 mt-2">
+            <div class="flex flex-col gap-2 items-start mt-2">
              <NextButton
                ghost
                blue
@@ -1,48 +1,156 @@
-<script>
-import PageHeader from '../../SettingsSubPageHeader.vue';
+<script setup>
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import Twilio from './Twilio.vue';
 import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp.vue';
 import CloudWhatsapp from './CloudWhatsapp.vue';
+import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';

-export default {
-  components: {
-    PageHeader,
-    Twilio,
-    ThreeSixtyDialogWhatsapp,
-    CloudWhatsapp,
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const store = useStore();
+
+const PROVIDER_TYPES = {
+  WHATSAPP: 'whatsapp',
+  TWILIO: 'twilio',
+  WHATSAPP_CLOUD: 'whatsapp_cloud',
+  WHATSAPP_EMBEDDED: 'whatsapp_embedded',
+  THREE_SIXTY_DIALOG: '360dialog',
+};
+
+const hasWhatsappAppId = computed(() => {
+  return (
+    window.chatwootConfig?.whatsappAppId &&
+    window.chatwootConfig.whatsappAppId !== 'none'
+  );
+});
+
+const isWhatsappEmbeddedSignupEnabled = computed(() => {
+  const accountId = route.params.accountId;
+  return store.getters['accounts/isFeatureEnabledonAccount'](
+    accountId,
+    FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP
+  );
+});
+
+const selectedProvider = computed(() => route.query.provider);
+
+const showProviderSelection = computed(() => !selectedProvider.value);
+
+const showConfiguration = computed(() => Boolean(selectedProvider.value));
+
+const availableProviders = computed(() => [
+  {
+    value: PROVIDER_TYPES.WHATSAPP,
+    label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD'),
+    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD_DESC'),
+    icon: '/assets/images/dashboard/channels/whatsapp.png',
  },
-  data() {
-    return {
-      provider: 'whatsapp_cloud',
-    };
+  {
+    value: PROVIDER_TYPES.TWILIO,
+    label: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO'),
+    description: t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO_DESC'),
+    icon: '/assets/images/dashboard/channels/twilio.png',
  },
+]);
+
+const selectProvider = providerValue => {
+  router.push({
+    name: route.name,
+    params: route.params,
+    query: { provider: providerValue },
+  });
+};
+
+const shouldShowEmbeddedSignup = provider => {
+  // Check if the feature is enabled for the account
+  if (!isWhatsappEmbeddedSignupEnabled.value) {
+    return false;
+  }
+
+  return (
+    (provider === PROVIDER_TYPES.WHATSAPP && hasWhatsappAppId.value) ||
+    provider === PROVIDER_TYPES.WHATSAPP_EMBEDDED
+  );
+};
+
+const shouldShowCloudWhatsapp = provider => {
+  // If embedded signup feature is enabled and app ID is configured, don't show cloud whatsapp
+  if (isWhatsappEmbeddedSignupEnabled.value && hasWhatsappAppId.value) {
+    return false;
+  }
+
+  // Show cloud whatsapp when:
+  // 1. Provider is whatsapp AND
+  // 2. Either no app ID is configured OR embedded signup feature is disabled
+  return provider === PROVIDER_TYPES.WHATSAPP;
 };
 </script>

 <template>
  <div
-    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
+    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.WHATSAPP.TITLE')"
-      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
-    />
-    <div class="flex-shrink-0 flex-grow-0">
-      <label>
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-        <select v-model="provider">
-          <option value="whatsapp_cloud">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD') }}
-          </option>
-          <option value="twilio">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
-          </option>
-        </select>
-      </label>
+    <div v-if="showProviderSelection">
+      <div class="mb-10 text-left">
+        <h1 class="mb-2 text-lg font-medium text-slate-12">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.TITLE') }}
+        </h1>
+        <p class="text-sm leading-relaxed text-slate-11">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <div class="flex gap-6 justify-start">
+        <div
+          v-for="provider in availableProviders"
+          :key="provider.value"
+          class="gap-6 px-5 py-6 w-96 rounded-2xl border transition-all duration-200 cursor-pointer border-n-weak hover:bg-n-slate-3"
+          @click="selectProvider(provider.value)"
+        >
+          <div class="flex justify-start mb-5">
+            <div
+              class="flex justify-center items-center rounded-full size-10 bg-n-alpha-2"
+            >
+              <img
+                :src="provider.icon"
+                :alt="provider.label"
+                class="object-contain size-[26px]"
+              />
+            </div>
+          </div>
+
+          <div class="text-start">
+            <h3 class="mb-1.5 text-sm font-medium text-slate-12">
+              {{ provider.label }}
+            </h3>
+            <p class="text-sm text-slate-11">
+              {{ provider.description }}
+            </p>
+          </div>
+        </div>
+      </div>
    </div>

-    <Twilio v-if="provider === 'twilio'" type="whatsapp" />
-    <ThreeSixtyDialogWhatsapp v-else-if="provider === '360dialog'" />
-    <CloudWhatsapp v-else />
+    <div v-else-if="showConfiguration">
+      <div class="px-6 py-5 rounded-2xl border bg-n-solid-2 border-n-weak">
+        <WhatsappEmbeddedSignup
+          v-if="shouldShowEmbeddedSignup(selectedProvider)"
+        />
+        <CloudWhatsapp v-else-if="shouldShowCloudWhatsapp(selectedProvider)" />
+        <Twilio
+          v-else-if="selectedProvider === PROVIDER_TYPES.TWILIO"
+          type="whatsapp"
+        />
+        <ThreeSixtyDialogWhatsapp
+          v-else-if="selectedProvider === PROVIDER_TYPES.THREE_SIXTY_DIALOG"
+        />
+        <CloudWhatsapp v-else />
+      </div>
+    </div>
  </div>
 </template>
@@ -0,0 +1,327 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import Icon from 'next/icon/Icon.vue';
+import NextButton from 'next/button/Button.vue';
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import { loadScript } from 'dashboard/helper/DOMHelpers';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+
+const store = useStore();
+const router = useRouter();
+const { t } = useI18n();
+
+// State
+const fbSdkLoaded = ref(false);
+const isProcessing = ref(false);
+const processingMessage = ref('');
+const authCodeReceived = ref(false);
+const authCode = ref(null);
+const businessData = ref(null);
+const isAuthenticating = ref(false);
+
+// Computed
+const whatsappIconPath = '/assets/images/dashboard/channels/whatsapp.png';
+
+const benefits = computed(() => [
+  {
+    key: 'EASY_SETUP',
+    text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.EASY_SETUP'),
+  },
+  {
+    key: 'SECURE_AUTH',
+    text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.SECURE_AUTH'),
+  },
+  {
+    key: 'AUTO_CONFIG',
+    text: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.BENEFITS.AUTO_CONFIG'),
+  },
+]);
+
+const showLoader = computed(() => isAuthenticating.value || isProcessing.value);
+
+// Error handling
+const handleSignupError = data => {
+  isProcessing.value = false;
+  authCodeReceived.value = false;
+  isAuthenticating.value = false;
+
+  const errorMessage =
+    data.error ||
+    data.message ||
+    t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
+  useAlert(errorMessage);
+};
+
+const handleSignupCancellation = () => {
+  isProcessing.value = false;
+  authCodeReceived.value = false;
+  isAuthenticating.value = false;
+};
+
+const handleSignupSuccess = inboxData => {
+  isProcessing.value = false;
+  isAuthenticating.value = false;
+
+  if (inboxData && inboxData.id) {
+    useAlert(t('INBOX_MGMT.FINISH.MESSAGE'));
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: {
+        page: 'new',
+        inbox_id: inboxData.id,
+      },
+    });
+  } else {
+    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUCCESS_FALLBACK'));
+    router.replace({
+      name: 'settings_inbox_list',
+    });
+  }
+};
+
+// Signup flow
+const completeSignupFlow = async businessDataParam => {
+  if (!authCodeReceived.value || !authCode.value) {
+    handleSignupError({
+      error: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_NOT_COMPLETED'),
+    });
+    return;
+  }
+
+  isProcessing.value = true;
+  processingMessage.value = t(
+    'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.PROCESSING'
+  );
+
+  try {
+    const params = {
+      code: authCode.value,
+      business_id: businessDataParam.business_id,
+      waba_id: businessDataParam.waba_id,
+      phone_number_id: businessDataParam.phone_number_id,
+    };
+
+    const responseData = await store.dispatch(
+      'inboxes/createWhatsAppEmbeddedSignup',
+      params
+    );
+
+    authCode.value = null;
+    handleSignupSuccess(responseData);
+  } catch (error) {
+    const errorMessage =
+      parseAPIErrorResponse(error) ||
+      t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE');
+    handleSignupError({ error: errorMessage });
+  }
+};
+
+const isValidBusinessData = businessDataLocal => {
+  return (
+    businessDataLocal &&
+    businessDataLocal.business_id &&
+    businessDataLocal.waba_id
+  );
+};
+
+// Message handling
+const handleEmbeddedSignupData = async data => {
+  if (data.event === 'FINISH') {
+    const businessDataLocal = data.data;
+
+    if (isValidBusinessData(businessDataLocal)) {
+      businessData.value = businessDataLocal;
+      if (authCodeReceived.value && authCode.value) {
+        await completeSignupFlow(businessDataLocal);
+      } else {
+        processingMessage.value = t(
+          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_AUTH'
+        );
+      }
+    } else {
+      handleSignupError({
+        error: t(
+          'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.INVALID_BUSINESS_DATA'
+        ),
+      });
+    }
+  } else if (data.event === 'CANCEL') {
+    handleSignupCancellation();
+  } else if (data.event === 'error') {
+    handleSignupError({
+      error:
+        data.error_message ||
+        t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SIGNUP_ERROR'),
+      error_id: data.error_id,
+      session_id: data.session_id,
+    });
+  }
+};
+
+const fbLoginCallback = response => {
+  if (response.authResponse && response.authResponse.code) {
+    authCode.value = response.authResponse.code;
+    authCodeReceived.value = true;
+    processingMessage.value = t(
+      'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.WAITING_FOR_BUSINESS_INFO'
+    );
+
+    if (businessData.value) {
+      completeSignupFlow(businessData.value);
+    }
+  } else if (response.error) {
+    handleSignupError({ error: response.error });
+  } else {
+    isProcessing.value = false;
+    isAuthenticating.value = false;
+    useAlert(t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.CANCELLED'));
+  }
+};
+
+const handleSignupMessage = event => {
+  // Validate origin for security - following Facebook documentation
+  // https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation#step-3--add-embedded-signup-to-your-website
+  if (!event.origin.endsWith('facebook.com')) return;
+
+  // Parse and handle WhatsApp embedded signup events
+  try {
+    const data = JSON.parse(event.data);
+    if (data.type === 'WA_EMBEDDED_SIGNUP') {
+      handleEmbeddedSignupData(data);
+    }
+  } catch {
+    // Ignore non-JSON or irrelevant messages
+  }
+};
+
+const runFBInit = () => {
+  window.FB.init({
+    appId: window.chatwootConfig?.whatsappAppId,
+    autoLogAppEvents: true,
+    xfbml: true,
+    version: window.chatwootConfig?.whatsappApiVersion || 'v22.0',
+  });
+  fbSdkLoaded.value = true;
+};
+
+const loadFacebookSdk = async () => {
+  return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+    async: true,
+    defer: true,
+    crossOrigin: 'anonymous',
+  });
+};
+
+const tryWhatsAppLogin = () => {
+  isAuthenticating.value = true;
+  processingMessage.value = t(
+    'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.AUTH_PROCESSING'
+  );
+
+  window.FB.login(fbLoginCallback, {
+    config_id: window.chatwootConfig?.whatsappConfigurationId,
+    response_type: 'code',
+    override_default_response_type: true,
+    extras: {
+      setup: {},
+      featureType: '',
+      sessionInfoVersion: '3',
+    },
+  });
+};
+
+const launchEmbeddedSignup = async () => {
+  try {
+    // Load SDK first if not loaded, following Facebook.vue pattern exactly
+    await loadFacebookSdk();
+    runFBInit(); // Initialize FB after loading
+
+    // Now proceed with login
+    tryWhatsAppLogin();
+  } catch (error) {
+    handleSignupError({
+      error: t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SDK_LOAD_ERROR'),
+    });
+  }
+};
+
+// Lifecycle
+const setupMessageListener = () => {
+  window.addEventListener('message', handleSignupMessage);
+};
+
+const cleanupMessageListener = () => {
+  window.removeEventListener('message', handleSignupMessage);
+};
+
+const initialize = () => {
+  window.fbAsyncInit = runFBInit;
+  setupMessageListener();
+};
+
+onMounted(() => {
+  initialize();
+});
+
+onBeforeUnmount(() => {
+  cleanupMessageListener();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <LoadingState v-if="showLoader" :message="processingMessage" />
+
+    <div v-else>
+      <div class="flex flex-col items-start mb-6 text-start">
+        <div class="flex justify-start mb-6">
+          <div
+            class="flex justify-center items-center w-12 h-12 rounded-full bg-n-alpha-2"
+          >
+            <img
+              :src="whatsappIconPath"
+              :alt="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD')"
+              class="object-contain w-8 h-8"
+              draggable="false"
+            />
+          </div>
+        </div>
+
+        <h3 class="mb-2 text-base font-medium text-n-slate-12">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.TITLE') }}
+        </h3>
+        <p class="text-sm leading-[24px] text-n-slate-12">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.DESC') }}
+        </p>
+      </div>
+
+      <div class="flex flex-col gap-2 mb-6">
+        <div
+          v-for="benefit in benefits"
+          :key="benefit.key"
+          class="flex gap-2 items-center text-sm text-n-slate-11"
+        >
+          <Icon icon="i-lucide-check" class="text-n-slate-11 size-4" />
+          {{ benefit.text }}
+        </div>
+      </div>
+
+      <div class="flex mt-4">
+        <NextButton
+          :disabled="isAuthenticating"
+          :is-loading="isAuthenticating"
+          faded
+          slate
+          class="w-full"
+          @click="launchEmbeddedSignup"
+        >
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.SUBMIT_BUTTON') }}
+        </NextButton>
+      </div>
+    </div>
+  </div>
+</template>