Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { computed } from 'vue';
+import { debounce } from '@chatwoot/utils';
+import { useI18n } from 'vue-i18n';
+import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
+import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
+import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    default: () => ({}),
+  },
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
+  isSaved: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'saveArticle',
+  'saveArticleAsync',
+  'goBack',
+  'setAuthor',
+  'setCategory',
+  'previewArticle',
+]);
+
+const { t } = useI18n();
+
+const isNewArticle = computed(() => !props.article?.id);
+
+const saveAndSync = value => {
+  emit('saveArticle', value);
+};
+
+// this will only send the data to the backend
+// but will not update the local state preventing unnecessary re-renders
+// since the data is already saved and we keep the editor text as the source of truth
+const quickSave = debounce(
+  value => emit('saveArticleAsync', value),
+  400,
+  false
+);
+
+// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
+// so we can save the data to the backend and retrieve the updated data
+// this will update the local state with response data
+// Only use to save for existing articles
+const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
+
+// Debounced save for new articles
+const quickSaveNewArticle = debounce(saveAndSync, 400, false);
+
+const handleSave = value => {
+  if (isNewArticle.value) {
+    quickSaveNewArticle(value);
+  } else {
+    quickSave(value);
+    saveAndSyncDebounced(value);
+  }
+};
+
+const articleTitle = computed({
+  get: () => props.article.title,
+  set: value => {
+    handleSave({ title: value });
+  },
+});
+
+const articleContent = computed({
+  get: () => props.article.content,
+  set: content => {
+    handleSave({ content });
+  },
+});
+
+const onClickGoBack = () => {
+  emit('goBack');
+};
+
+const setAuthorId = authorId => {
+  emit('setAuthor', authorId);
+};
+
+const setCategoryId = categoryId => {
+  emit('setCategory', categoryId);
+};
+
+const previewArticle = () => {
+  emit('previewArticle');
+};
+</script>
+
+<template>
+  <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
+    <template #header-actions>
+      <ArticleEditorHeader
+        :is-updating="isUpdating"
+        :is-saved="isSaved"
+        :status="article.status"
+        :article-id="article.id"
+        @go-back="onClickGoBack"
+        @preview-article="previewArticle"
+      />
+    </template>
+    <template #content>
+      <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
+        <TextArea
+          v-model="articleTitle"
+          auto-height
+          min-height="4rem"
+          custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
+          custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
+          placeholder="Title"
+          autofocus
+        />
+        <ArticleEditorControls
+          :article="article"
+          @save-article="saveAndSync"
+          @set-author="setAuthorId"
+          @set-category="setCategoryId"
+        />
+      </div>
+      <FullEditor
+        v-model="articleContent"
+        class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
+        :placeholder="
+          t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
+        "
+        :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
+        :autofocus="false"
+      />
+    </template>
+  </HelpCenterLayout>
+</template>
+
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror .empty-node::before {
+    @apply text-n-slate-10 text-base;
+  }
+
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-woot-style {
+      @apply min-h-[15rem] max-h-full;
+    }
+  }
+
+  .ProseMirror-menubar {
+    display: none; // Hide by default
+  }
+
+  .editor-root .has-selection {
+    .ProseMirror-menubar {
+      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      display: flex;
+      top: var(--selection-top, auto) !important;
+      left: var(--selection-left, 0) !important;
+      width: fit-content !important;
+      position: absolute !important;
+
+      .ProseMirror-menuitem {
+        @apply mr-0;
+
+        .ProseMirror-icon {
+          @apply p-0 mt-0 !mr-0;
+
+          svg {
+            width: 20px !important;
+            height: 20px !important;
+          }
+        }
+      }
+
+      .ProseMirror-menu-active {
+        @apply bg-n-slate-3;
+      }
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { OnClickOutside } from '@vueuse/components';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const openAgentsList = ref(false);
+const openCategoryList = ref(false);
+const openProperties = ref(false);
+const selectedAuthorId = ref(null);
+const selectedCategoryId = ref(null);
+
+const agents = useMapGetter('agents/getAgents');
+const categories = useMapGetter('categories/allCategories');
+const currentUserId = useMapGetter('getCurrentUserID');
+
+const isNewArticle = computed(() => !props.article?.id);
+
+const currentUser = computed(() =>
+  agents.value.find(agent => agent.id === currentUserId.value)
+);
+
+const categorySlugFromRoute = computed(() => route.params.categorySlug);
+
+const author = computed(() => {
+  if (isNewArticle.value) {
+    return selectedAuthorId.value
+      ? agents.value.find(agent => agent.id === selectedAuthorId.value)
+      : currentUser.value;
+  }
+  return props.article?.author || null;
+});
+
+const authorName = computed(
+  () => author.value?.name || author.value?.available_name || ''
+);
+const authorThumbnailSrc = computed(() => author.value?.thumbnail);
+
+const agentList = computed(() => {
+  return (
+    agents.value
+      ?.map(({ name, id, thumbnail }) => ({
+        label: name,
+        value: id,
+        thumbnail: { name, src: thumbnail },
+        isSelected: props.article?.author?.id
+          ? id === props.article.author.id
+          : id === (selectedAuthorId.value || currentUserId.value),
+        action: 'assignAuthor',
+      }))
+      // Sort the list by isSelected first, then by name(label)
+      .toSorted((a, b) => {
+        if (a.isSelected !== b.isSelected) {
+          return Number(b.isSelected) - Number(a.isSelected);
+        }
+        return a.label.localeCompare(b.label);
+      }) ?? []
+  );
+});
+
+const hasAgentList = computed(() => {
+  return agents.value?.length > 1;
+});
+
+const findCategoryFromSlug = slug => {
+  return categories.value?.find(category => category.slug === slug);
+};
+
+const assignCategoryFromSlug = slug => {
+  const categoryFromSlug = findCategoryFromSlug(slug);
+  if (categoryFromSlug) {
+    selectedCategoryId.value = categoryFromSlug.id;
+    return categoryFromSlug;
+  }
+  return null;
+};
+
+const selectedCategory = computed(() => {
+  if (isNewArticle.value) {
+    if (categorySlugFromRoute.value) {
+      const categoryFromSlug = assignCategoryFromSlug(
+        categorySlugFromRoute.value
+      );
+      if (categoryFromSlug) return categoryFromSlug;
+    }
+    return selectedCategoryId.value
+      ? categories.value.find(
+          category => category.id === selectedCategoryId.value
+        )
+      : categories.value[0] || null;
+  }
+  return categories.value.find(
+    category => category.id === props.article?.category?.id
+  );
+});
+
+const categoryList = computed(() => {
+  return (
+    categories.value
+      .map(({ name, id, icon }) => ({
+        label: name,
+        value: id,
+        emoji: icon,
+        isSelected: isNewArticle.value
+          ? id === (selectedCategoryId.value || selectedCategory.value?.id)
+          : id === props.article?.category?.id,
+        action: 'assignCategory',
+      }))
+      // Sort categories by isSelected
+      .toSorted((a, b) => Number(b.isSelected) - Number(a.isSelected))
+  );
+});
+
+const hasCategoryMenuItems = computed(() => {
+  return categoryList.value?.length > 0;
+});
+
+const handleArticleAction = ({ action, value }) => {
+  const actions = {
+    assignAuthor: () => {
+      if (isNewArticle.value) {
+        selectedAuthorId.value = value;
+        emit('setAuthor', value);
+      } else {
+        emit('saveArticle', { author_id: value });
+      }
+      openAgentsList.value = false;
+    },
+    assignCategory: () => {
+      if (isNewArticle.value) {
+        selectedCategoryId.value = value;
+        emit('setCategory', value);
+      } else {
+        emit('saveArticle', { category_id: value });
+      }
+      openCategoryList.value = false;
+    },
+  };
+
+  actions[action]?.();
+};
+
+const updateMeta = meta => {
+  emit('saveArticle', { meta });
+};
+
+onMounted(() => {
+  if (categorySlugFromRoute.value && isNewArticle.value) {
+    // Assign category from slug if there is one
+    const categoryFromSlug = findCategoryFromSlug(categorySlugFromRoute.value);
+    if (categoryFromSlug) {
+      handleArticleAction({
+        action: 'assignCategory',
+        value: categoryFromSlug?.id,
+      });
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <div class="relative flex items-center gap-2">
+      <OnClickOutside @trigger="openAgentsList = false">
+        <Button
+          variant="ghost"
+          color="slate"
+          class="!px-0 font-normal hover:!bg-transparent"
+          text-variant="info"
+          @click="openAgentsList = !openAgentsList"
+        >
+          <Avatar
+            :name="authorName"
+            :src="authorThumbnailSrc"
+            :size="20"
+            rounded-full
+          />
+          <span class="text-sm text-n-slate-12 hover:text-n-slate-11">
+            {{ authorName || '-' }}
+          </span>
+        </Button>
+        <DropdownMenu
+          v-if="openAgentsList && hasAgentList"
+          :menu-items="agentList"
+          show-search
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+    <div class="w-px h-3 bg-n-weak" />
+    <div class="relative">
+      <OnClickOutside @trigger="openCategoryList = false">
+        <Button
+          :label="
+            selectedCategory?.name ||
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+          "
+          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
+          variant="ghost"
+          color="slate"
+          class="!px-2 font-normal hover:!bg-transparent"
+          @click="openCategoryList = !openCategoryList"
+        >
+          <span
+            v-if="selectedCategory"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{
+              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
+            }}
+          </span>
+        </Button>
+        <DropdownMenu
+          v-if="openCategoryList && hasCategoryMenuItems"
+          :menu-items="categoryList"
+          show-search
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+
+    <div class="w-px h-3 bg-n-weak" />
+    <div class="relative">
+      <OnClickOutside @trigger="openProperties = false">
+        <Button
+          :label="
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
+          "
+          icon="i-lucide-plus"
+          variant="ghost"
+          color="slate"
+          :disabled="isNewArticle"
+          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
+          @click="openProperties = !openProperties"
+        />
+        <ArticleEditorProperties
+          v-if="openProperties"
+          :article="article"
+          class="right-0 z-[100] mt-2 xl:left-0 top-full"
+          @save-article="updateMeta"
+          @close="openProperties = false"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store.js';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { OnClickOutside } from '@vueuse/components';
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import {
+  ARTICLE_EDITOR_STATUS_OPTIONS,
+  ARTICLE_STATUSES,
+  ARTICLE_MENU_ITEMS,
+} from 'dashboard/helper/portalHelper';
+import wootConstants from 'dashboard/constants/globals';
+
+import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
+  isSaved: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  articleId: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['goBack', 'previewArticle']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const isArticlePublishing = ref(false);
+
+const { ARTICLE_STATUS_TYPES } = wootConstants;
+
+const showArticleActionMenu = ref(false);
+
+const articleMenuItems = computed(() => {
+  const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
+  return statusOptions.map(option => {
+    const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
+    return {
+      label: t(label),
+      value,
+      action: 'update-status',
+      icon,
+    };
+  });
+});
+
+const statusText = computed(() =>
+  t(
+    `HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.STATUS.${props.isUpdating ? 'SAVING' : 'SAVED'}`
+  )
+);
+
+const onClickGoBack = () => emit('goBack');
+
+const previewArticle = () => emit('previewArticle');
+
+const getStatusMessage = (status, isSuccess) => {
+  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
+  const statusMap = {
+    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
+    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
+    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
+  };
+
+  return statusMap[status]
+    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
+    : '';
+};
+
+const updateArticleStatus = async ({ value }) => {
+  showArticleActionMenu.value = false;
+  const status = getArticleStatus(value);
+  if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+    isArticlePublishing.value = true;
+  }
+  const { portalSlug } = route.params;
+
+  try {
+    await store.dispatch('articles/update', {
+      portalSlug,
+      articleId: props.articleId,
+      status,
+    });
+
+    useAlert(getStatusMessage(status, true));
+
+    if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
+      useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
+    } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+      useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+    }
+    isArticlePublishing.value = false;
+  } catch (error) {
+    useAlert(error?.message ?? getStatusMessage(status, false));
+    isArticlePublishing.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-between h-20">
+    <Button
+      :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
+      icon="i-lucide-chevron-left"
+      variant="link"
+      color="slate"
+      size="sm"
+      class="ltr:pl-3 rtl:pr-3"
+      @click="onClickGoBack"
+    />
+    <div class="flex items-center gap-4">
+      <span
+        v-if="isUpdating || isSaved"
+        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
+      >
+        {{ statusText }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Button
+          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
+          color="slate"
+          size="sm"
+          :disabled="!articleId"
+          @click="previewArticle"
+        />
+        <ButtonGroup class="flex items-center">
+          <Button
+            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
+            size="sm"
+            class="ltr:rounded-r-none rtl:rounded-l-none"
+            no-animation
+            :is-loading="isArticlePublishing"
+            :disabled="
+              status === ARTICLE_STATUSES.PUBLISHED ||
+              !articleId ||
+              isArticlePublishing
+            "
+            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
+          />
+          <div class="relative">
+            <OnClickOutside @trigger="showArticleActionMenu = false">
+              <Button
+                icon="i-lucide-chevron-down"
+                size="sm"
+                :disabled="!articleId"
+                no-animation
+                class="ltr:rounded-l-none rtl:rounded-r-none"
+                @click.stop="showArticleActionMenu = !showArticleActionMenu"
+              />
+              <DropdownMenu
+                v-if="showArticleActionMenu"
+                :menu-items="articleMenuItems"
+                class="mt-2 ltr:right-0 rtl:left-0 top-full"
+                @action="updateArticleStatus($event)"
+              />
+            </OnClickOutside>
+          </div>
+        </ButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { reactive, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { debounce } from '@chatwoot/utils';
+
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['saveArticle', 'close']);
+
+const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+
+const { t } = useI18n();
+
+const state = reactive({
+  title: '',
+  description: '',
+  tags: [],
+});
+
+const updateState = () => {
+  state.title = props.article.meta?.title || '';
+  state.description = props.article.meta?.description || '';
+  state.tags = props.article.meta?.tags || [];
+};
+
+watch(
+  state,
+  newState => {
+    saveArticle({
+      title: newState.title,
+      description: newState.description,
+      tags: newState.tags,
+    });
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  updateState();
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+  >
+    <div class="flex items-center justify-between">
+      <h3>
+        {{
+          t(
+            'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.ARTICLE_PROPERTIES'
+          )
+        }}
+      </h3>
+      <Button
+        icon="i-lucide-x"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        class="hover:text-n-slate-11"
+        @click="emit('close')"
+      />
+    </div>
+    <div class="flex flex-col gap-2">
+      <div>
+        <div class="flex justify-between w-full gap-4 py-2">
+          <label
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
+          >
+            {{
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION'
+              )
+            }}
+          </label>
+          <TextArea
+            v-model="state.description"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
+              )
+            "
+            class="w-[13.75rem]"
+            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
+            custom-text-area-class="max-h-[9.375rem]"
+            auto-height
+            min-height="3rem"
+          />
+        </div>
+        <div class="flex justify-between w-full gap-2 py-2">
+          <InlineInput
+            v-model="state.title"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE_PLACEHOLDER'
+              )
+            "
+            :label="
+              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
+            "
+            custom-label-class="min-w-[7.5rem]"
+          />
+        </div>
+        <div class="flex justify-between w-full gap-3 py-2">
+          <label
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
+          >
+            {{
+              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
+            }}
+          </label>
+          <TagInput
+            v-model="state.tags"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
+              )
+            "
+            class="w-[14rem]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { OnClickOutside } from '@vueuse/components';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import {
+  ARTICLE_TABS,
+  CATEGORY_ALL,
+  ARTICLE_TABS_OPTIONS,
+} from 'dashboard/helper/portalHelper';
+
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
+  meta: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'tabChange',
+  'localeChange',
+  'categoryChange',
+  'newArticle',
+]);
+
+const route = useRoute();
+const { t } = useI18n();
+const { updateUISettings } = useUISettings();
+
+const isCategoryMenuOpen = ref(false);
+const isLocaleMenuOpen = ref(false);
+
+const countKey = tab => {
+  if (tab.value === 'all') {
+    return 'articlesCount';
+  }
+  return `${tab.value}ArticlesCount`;
+};
+
+const tabs = computed(() => {
+  return ARTICLE_TABS_OPTIONS.map(tab => ({
+    label: t(`HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.TABS.${tab.key}`),
+    value: tab.value,
+    count: props.meta[countKey(tab)],
+  }));
+});
+
+const activeTabIndex = computed(() => {
+  const tabParam = route.params.tab || ARTICLE_TABS.ALL;
+  return tabs.value.findIndex(tab => tab.value === tabParam);
+});
+
+const activeCategoryName = computed(() => {
+  const activeCategory = props.categories.find(
+    category => category.slug === route.params.categorySlug
+  );
+
+  if (activeCategory) {
+    const { icon, name } = activeCategory;
+    return `${icon} ${name}`;
+  }
+
+  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
+});
+
+const activeLocaleName = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  )?.name;
+});
+
+const categoryMenuItems = computed(() => {
+  const defaultMenuItem = {
+    label: t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL'),
+    value: CATEGORY_ALL,
+    action: 'filter',
+  };
+
+  const categoryItems = props.categories.map(category => ({
+    label: category.name,
+    value: category.slug,
+    action: 'filter',
+    emoji: category.icon,
+  }));
+
+  const hasCategorySlug = !!route.params.categorySlug;
+
+  return hasCategorySlug ? [defaultMenuItem, ...categoryItems] : categoryItems;
+});
+
+const hasCategoryMenuItems = computed(() => {
+  return categoryMenuItems.value?.length > 0;
+});
+
+const localeMenuItems = computed(() => {
+  return props.allowedLocales.map(locale => ({
+    label: locale.name,
+    value: locale.code,
+    action: 'filter',
+  }));
+});
+
+const handleLocaleAction = ({ value }) => {
+  emit('localeChange', value);
+  isLocaleMenuOpen.value = false;
+  updateUISettings({
+    last_active_locale_code: value,
+  });
+};
+
+const handleCategoryAction = ({ value }) => {
+  emit('categoryChange', value);
+  isCategoryMenuOpen.value = false;
+};
+
+const handleNewArticle = () => {
+  emit('newArticle');
+};
+
+const handleTabChange = value => {
+  emit('tabChange', value);
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+    <TabBar
+      :tabs="tabs"
+      :initial-active-tab="activeTabIndex"
+      @tab-changed="handleTabChange"
+    />
+    <div class="flex items-start justify-between w-full gap-2">
+      <div class="flex items-center gap-2">
+        <div class="relative group">
+          <OnClickOutside @trigger="isLocaleMenuOpen = false">
+            <Button
+              :label="activeLocaleName"
+              size="sm"
+              icon="i-lucide-chevron-down"
+              color="slate"
+              trailing-icon
+              @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isLocaleMenuOpen"
+              :menu-items="localeMenuItems"
+              show-search
+              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              @action="handleLocaleAction"
+            />
+          </OnClickOutside>
+        </div>
+        <div v-if="hasCategoryMenuItems" class="relative group">
+          <OnClickOutside @trigger="isCategoryMenuOpen = false">
+            <Button
+              :label="activeCategoryName"
+              icon="i-lucide-chevron-down"
+              size="sm"
+              color="slate"
+              trailing-icon
+              class="max-w-48"
+              @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isCategoryMenuOpen"
+              :menu-items="categoryMenuItems"
+              show-search
+              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              @action="handleCategoryAction"
+            />
+          </OnClickOutside>
+        </div>
+      </div>
+      <Button
+        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
+        icon="i-lucide-plus"
+        size="sm"
+        @click="handleNewArticle"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import Draggable from 'vuedraggable';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import wootConstants from 'dashboard/constants/globals';
+
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+  isCategoryArticles: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { ARTICLE_STATUS_TYPES } = wootConstants;
+
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+
+const localArticles = ref(props.articles);
+
+const dragEnabled = computed(() => {
+  // Enable dragging only for category articles and when there's more than one article
+  return props.isCategoryArticles && localArticles.value?.length > 1;
+});
+
+const getCategoryById = useMapGetter('categories/categoryById');
+
+const openArticle = id => {
+  const { tab, categorySlug, locale } = route.params;
+  if (props.isCategoryArticles) {
+    router.push({
+      name: 'portals_categories_articles_edit',
+      params: { articleSlug: id },
+    });
+  } else {
+    router.push({
+      name: 'portals_articles_edit',
+      params: {
+        articleSlug: id,
+        tab,
+        categorySlug,
+        locale,
+      },
+    });
+  }
+};
+
+const onReorder = reorderedGroup => {
+  store.dispatch('articles/reorder', {
+    reorderedGroup,
+    portalSlug: route.params.portalSlug,
+  });
+};
+
+const onDragEnd = () => {
+  // Reuse existing positions to maintain order within the current group
+  const sortedArticlePositions = localArticles.value
+    .map(article => article.position)
+    .sort((a, b) => a - b); // Use custom sort to handle numeric values correctly
+
+  const orderedArticles = localArticles.value.map(article => article.id);
+
+  // Create a map of article IDs to their new positions
+  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
+    obj[key] = sortedArticlePositions[index];
+    return obj;
+  }, {});
+
+  onReorder(reorderedGroup);
+};
+
+const getCategory = categoryId => {
+  return getCategoryById.value(categoryId) || { name: '', icon: '' };
+};
+
+const getStatusMessage = (status, isSuccess) => {
+  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
+  const statusMap = {
+    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
+    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
+    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
+  };
+
+  return statusMap[status]
+    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
+    : '';
+};
+
+const updatePortalMeta = () => {
+  const { portalSlug, locale } = route.params;
+  return store.dispatch('portals/show', { portalSlug, locale });
+};
+
+const updateArticlesMeta = () => {
+  const { portalSlug, locale } = route.params;
+  return store.dispatch('articles/updateArticleMeta', {
+    portalSlug,
+    locale,
+  });
+};
+
+const handleArticleAction = async (action, { status, id }) => {
+  const { portalSlug } = route.params;
+  try {
+    if (action === 'delete') {
+      await store.dispatch('articles/delete', {
+        portalSlug,
+        articleId: id,
+      });
+      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
+    } else {
+      await store.dispatch('articles/update', {
+        portalSlug,
+        articleId: id,
+        status,
+      });
+      useAlert(getStatusMessage(status, true));
+
+      if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
+        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
+      } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+      }
+    }
+    await updateArticlesMeta();
+    await updatePortalMeta();
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      (action === 'delete'
+        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
+        : getStatusMessage(status, false));
+    useAlert(errorMessage);
+  }
+};
+
+const updateArticle = ({ action, value, id }) => {
+  const status = action !== 'delete' ? getArticleStatus(value) : null;
+  handleArticleAction(action, { status, id });
+};
+
+// Watch for changes in the articles prop and update the localArticles ref
+watch(
+  () => props.articles,
+  newArticles => {
+    localArticles.value = newArticles;
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <Draggable
+    v-model="localArticles"
+    :disabled="!dragEnabled"
+    item-key="id"
+    tag="ul"
+    ghost-class="article-ghost-class"
+    class="w-full h-full space-y-4"
+    @end="onDragEnd"
+  >
+    <template #item="{ element }">
+      <li class="list-none rounded-2xl">
+        <ArticleCard
+          :id="element.id"
+          :key="element.id"
+          :title="element.title"
+          :status="element.status"
+          :author="element.author"
+          :category="getCategory(element.category.id)"
+          :views="element.views || 0"
+          :updated-at="element.updatedAt"
+          :class="{ 'cursor-grab': dragEnabled }"
+          @open-article="openArticle"
+          @article-action="updateArticle"
+        />
+      </li>
+    </template>
+  </Draggable>
+</template>
+
+<style lang="scss" scoped>
+.article-ghost-class {
+  @apply opacity-50 bg-n-solid-1;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue

@@ -0,0 +1,72 @@
+<script setup>
+import ArticlesPage from './ArticlesPage.vue';
+
+const articles = [
+  {
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: '2 days ago',
+    author: 'Michael',
+    category: '⚡️ Marketing',
+    views: 3400,
+  },
+  {
+    title: 'Setting up your first Help Center portal',
+    status: '',
+    updatedAt: '1 week ago',
+    author: 'John',
+    category: '🛠️ Development',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
+    <Variant title="All Articles">
+      <div class="w-full min-h-screen bg-n-background">
+        <ArticlesPage :articles="articles" />
+      </div>
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue';
+import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
+  portalName: {
+    type: String,
+    required: true,
+  },
+  meta: {
+    type: Object,
+    required: true,
+  },
+  isCategoryArticles: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['pageChange', 'fetchPortal']);
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isFetching = useMapGetter('articles/isFetching');
+
+const hasNoArticles = computed(
+  () => !isFetching.value && !props.articles.length
+);
+
+const isLoading = computed(() => isFetching.value || isSwitchingPortal.value);
+
+const totalArticlesCount = computed(() => props.meta.allArticlesCount);
+
+const hasNoArticlesInPortal = computed(
+  () => totalArticlesCount.value === 0 && !props.isCategoryArticles
+);
+
+const shouldShowPaginationFooter = computed(() => {
+  return !(isFetching.value || isSwitchingPortal.value || hasNoArticles.value);
+});
+
+const updateRoute = newParams => {
+  const { portalSlug, locale, tab, categorySlug } = route.params;
+  router.push({
+    name: 'portals_articles_index',
+    params: {
+      portalSlug,
+      locale: newParams.locale ?? locale,
+      tab: newParams.tab ?? tab,
+      categorySlug: newParams.categorySlug ?? categorySlug,
+      ...newParams,
+    },
+  });
+};
+
+const articlesCount = computed(() => {
+  const { tab } = route.params;
+  const { meta } = props;
+  const countMap = {
+    '': meta.articlesCount,
+    mine: meta.mineArticlesCount,
+    draft: meta.draftArticlesCount,
+    archived: meta.archivedArticlesCount,
+  };
+  return Number(countMap[tab] || countMap['']);
+});
+
+const showArticleHeaderControls = computed(
+  () => !props.isCategoryArticles && !isSwitchingPortal.value
+);
+
+const showCategoryHeaderControls = computed(
+  () => props.isCategoryArticles && !isSwitchingPortal.value
+);
+
+const getEmptyStateText = type => {
+  if (props.isCategoryArticles) {
+    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
+  }
+  const tabName = route.params.tab?.toUpperCase() || 'ALL';
+  return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.${tabName}.${type}`);
+};
+
+const getEmptyStateTitle = computed(() => getEmptyStateText('TITLE'));
+const getEmptyStateSubtitle = computed(() => getEmptyStateText('SUBTITLE'));
+
+const handleTabChange = tab =>
+  updateRoute({ tab: tab.value === ARTICLE_TABS.ALL ? '' : tab.value });
+
+const handleCategoryAction = value =>
+  updateRoute({ categorySlug: value === CATEGORY_ALL ? '' : value });
+
+const handleLocaleAction = value => {
+  updateRoute({ locale: value, categorySlug: '' });
+  emit('fetchPortal', value);
+};
+const handlePageChange = page => emit('pageChange', page);
+
+const navigateToNewArticlePage = () => {
+  const { categorySlug, locale } = route.params;
+  router.push({
+    name: 'portals_articles_new',
+    params: { categorySlug, locale },
+  });
+};
+</script>
+
+<template>
+  <HelpCenterLayout
+    :current-page="Number(meta.currentPage)"
+    :total-items="articlesCount"
+    :items-per-page="25"
+    :header="portalName"
+    :show-pagination-footer="shouldShowPaginationFooter"
+    @update:current-page="handlePageChange"
+  >
+    <template #header-actions>
+      <div class="flex items-end justify-between">
+        <ArticleHeaderControls
+          v-if="showArticleHeaderControls"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :meta="meta"
+          @tab-change="handleTabChange"
+          @locale-change="handleLocaleAction"
+          @category-change="handleCategoryAction"
+          @new-article="navigateToNewArticlePage"
+        />
+        <CategoryHeaderControls
+          v-else-if="showCategoryHeaderControls"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :has-selected-category="isCategoryArticles"
+        />
+      </div>
+    </template>
+    <template #content>
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <ArticleList
+        v-else-if="!hasNoArticles"
+        :articles="articles"
+        :is-category-articles="isCategoryArticles"
+      />
+      <ArticleEmptyState
+        v-else
+        class="pt-14"
+        :title="getEmptyStateTitle"
+        :subtitle="getEmptyStateSubtitle"
+        :show-button="hasNoArticlesInPortal"
+        :button-label="
+          t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
+        "
+        @click="navigateToNewArticlePage"
+      />
+    </template>
+  </HelpCenterLayout>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue

@@ -0,0 +1,209 @@
+<script setup>
+import CategoriesPage from './CategoriesPage.vue';
+
+const categories = [
+  {
+    id: 'getting-started',
+    title: '🚀 Getting started',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'marketing',
+    title: 'Marketing',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
+    articlesCount: '4',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'development',
+    title: 'Development',
+    description: '',
+    articlesCount: '5',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'roadmap',
+    title: '🛣️ Roadmap',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '3',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'finance',
+    title: '💰 Finance',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
+    <Variant title="All Categories">
+      <div class="w-full min-h-screen bg-n-background">
+        <CategoriesPage :categories="categories" />
+      </div>
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
+import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
+import CategoryEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue';
+import EditCategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+  isFetching: {
+    type: Boolean,
+    required: false,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['fetchCategories']);
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const editCategoryDialog = ref(null);
+const selectedCategory = ref(null);
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
+const hasCategories = computed(() => props.categories?.length > 0);
+
+const updateRoute = (newParams, routeName) => {
+  const { accountId, portalSlug, locale } = route.params;
+  const baseParams = { accountId, portalSlug, locale };
+
+  router.push({
+    name: routeName,
+    params: {
+      ...baseParams,
+      ...newParams,
+      categorySlug: newParams.categorySlug,
+    },
+  });
+};
+
+const openCategoryArticles = slug => {
+  updateRoute({ categorySlug: slug }, 'portals_categories_articles_index');
+};
+
+const handleLocaleChange = value => {
+  updateRoute({ locale: value }, 'portals_categories_index');
+  emit('fetchCategories', value);
+};
+
+async function deleteCategory(category) {
+  try {
+    await store.dispatch('categories/delete', {
+      portalSlug: route.params.portalSlug,
+      categoryId: category.id,
+    });
+
+    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
+      hasArticles: category?.meta?.articles_count > 0,
+    });
+
+    useAlert(
+      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error.message ||
+        t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.ERROR_MESSAGE')
+    );
+  }
+}
+
+const handleAction = ({ action, id, category: categoryData }) => {
+  if (action === 'edit') {
+    selectedCategory.value = props.categories.find(
+      category => category.id === id
+    );
+    editCategoryDialog.value.dialogRef.open();
+  }
+  if (action === 'delete') {
+    deleteCategory(categoryData);
+  }
+};
+</script>
+
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <CategoryHeaderControls
+        :categories="categories"
+        :is-category-articles="false"
+        :allowed-locales="allowedLocales"
+        @locale-change="handleLocaleChange"
+      />
+    </template>
+    <template #content>
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <CategoryList
+        v-else-if="hasCategories"
+        :categories="categories"
+        @click="openCategoryArticles"
+        @action="handleAction"
+      />
+      <CategoryEmptyState
+        v-else
+        class="pt-14"
+        :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.SUBTITLE')"
+      />
+    </template>
+    <EditCategoryDialog
+      ref="editCategoryDialog"
+      :allowed-locales="allowedLocales"
+      :selected-category="selectedCategory"
+    />
+  </HelpCenterLayout>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'edit',
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  portalName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleCode: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const handleCategory = async formData => {
+  const { id, name, slug, icon, description, locale } = formData;
+  const categoryData = { name, icon, slug, description };
+
+  if (props.mode === 'create') {
+    categoryData.locale = locale;
+  } else {
+    categoryData.id = id;
+  }
+
+  try {
+    const action = props.mode === 'edit' ? 'update' : 'create';
+    const payload = {
+      portalSlug: route.params.portalSlug,
+      categoryObj: categoryData,
+    };
+
+    if (action === 'update') {
+      payload.categoryId = id;
+    }
+
+    await store.dispatch(`categories/${action}`, payload);
+
+    const successMessage = t(
+      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.SUCCESS_MESSAGE`
+    );
+    useAlert(successMessage);
+
+    const trackEvent =
+      props.mode === 'edit'
+        ? PORTALS_EVENTS.EDIT_CATEGORY
+        : PORTALS_EVENTS.CREATE_CATEGORY;
+    useTrack(
+      trackEvent,
+      props.mode === 'create'
+        ? { hasDescription: Boolean(description) }
+        : undefined
+    );
+
+    emit('close');
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      t(
+        `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.ERROR_MESSAGE`
+      );
+    useAlert(errorMessage);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-n-slate-12">
+      {{
+        t(
+          `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`
+        )
+      }}
+    </h3>
+    <CategoryForm
+      :mode="mode"
+      :selected-category="selectedCategory"
+      :active-locale-code="activeLocaleCode"
+      :portal-name="portalName"
+      :active-locale-name="activeLocaleName"
+      @submit="handleCategory"
+      @cancel="emit('close')"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -0,0 +1,272 @@
+<script setup>
+import {
+  reactive,
+  ref,
+  watch,
+  computed,
+  defineAsyncComponent,
+  onMounted,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeLocaleCode: {
+    type: String,
+    default: '',
+  },
+  showActionButtons: {
+    type: Boolean,
+    default: true,
+  },
+  portalName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
+);
+
+const { t } = useI18n();
+const route = useRoute();
+const getters = useStoreGetters();
+
+const isCreating = useMapGetter('categories/isCreating');
+
+const isUpdatingCategory = computed(() => {
+  const id = props.selectedCategory?.id;
+  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
+
+  return false;
+});
+
+const isEmojiPickerOpen = ref(false);
+
+const state = reactive({
+  id: '',
+  name: '',
+  icon: '',
+  slug: '',
+  description: '',
+  locale: '',
+});
+
+const isEditMode = computed(() => props.mode === 'edit');
+
+const rules = {
+  name: { required, minLength: minLength(1) },
+  slug: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const nameError = computed(() =>
+  v$.value.name.$error
+    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.ERROR')
+    : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error
+    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.ERROR')
+    : ''
+);
+
+const slugHelpText = computed(() => {
+  const { portalSlug, locale } = route.params;
+  return t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.HELP_TEXT', {
+    portalSlug,
+    localeCode: locale,
+    categorySlug: state.slug,
+  });
+});
+
+const onClickInsertEmoji = emoji => {
+  state.icon = emoji;
+  isEmojiPickerOpen.value = false;
+};
+
+const handleSubmit = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('submit', { ...state });
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+
+watch(
+  () => state.name,
+  () => {
+    if (!isEditMode.value) {
+      state.slug = convertToCategorySlug(state.name);
+    }
+  }
+);
+
+watch(
+  () => props.selectedCategory,
+  newCategory => {
+    if (props.mode === 'edit' && newCategory) {
+      const { id, name, icon, slug, description } = newCategory;
+      Object.assign(state, { id, name, icon, slug, description });
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (props.mode === 'create') {
+    state.locale = props.activeLocaleCode;
+  }
+});
+
+defineExpose({ state, isSubmitDisabled });
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div
+      class="flex items-center justify-start gap-8 px-4 py-2 border rounded-lg border-n-strong"
+    >
+      <div class="flex flex-col items-start w-full gap-2 py-2">
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.PORTAL') }}
+        </span>
+        <span class="text-sm text-n-slate-12">
+          {{ portalName }}
+        </span>
+      </div>
+      <div class="justify-start w-px h-10 bg-n-strong" />
+      <div class="flex flex-col w-full gap-2 py-2">
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.LOCALE') }}
+        </span>
+        <span
+          :title="`${activeLocaleName} (${activeLocaleCode})`"
+          class="text-sm line-clamp-1 text-n-slate-12"
+        >
+          {{ `${activeLocaleName} (${activeLocaleCode})` }}
+        </span>
+      </div>
+    </div>
+    <div class="flex flex-col gap-4">
+      <div class="relative">
+        <Input
+          v-model="state.name"
+          :label="
+            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.LABEL')
+          "
+          :placeholder="
+            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.PLACEHOLDER')
+          "
+          :message="nameError"
+          :message-type="nameError ? 'error' : 'info'"
+          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12"
+        >
+          <template #prefix>
+            <OnClickOutside @trigger="isEmojiPickerOpen = false">
+              <Button
+                :label="state.icon"
+                color="slate"
+                size="sm"
+                type="button"
+                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
+                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
+              />
+              <EmojiInput
+                v-if="isEmojiPickerOpen"
+                class="left-0 top-16"
+                show-remove-button
+                :on-click="onClickInsertEmoji"
+              />
+            </OnClickOutside>
+          </template>
+        </Input>
+      </div>
+      <Input
+        v-model="state.slug"
+        :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.LABEL')"
+        :placeholder="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.PLACEHOLDER')
+        "
+        :disabled="isEditMode"
+        :message="slugError ? slugError : slugHelpText"
+        :message-type="slugError ? 'error' : 'info'"
+        custom-input-class="!h-10"
+      />
+      <TextArea
+        v-model="state.description"
+        :label="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.LABEL')
+        "
+        :placeholder="
+          t(
+            'HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+        show-character-count
+      />
+      <div
+        v-if="showActionButtons"
+        class="flex items-center justify-between w-full gap-3"
+      >
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
+          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+          @click="handleCancel"
+        />
+        <Button
+          :label="
+            t(
+              `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.${mode.toUpperCase()}`
+            )
+          "
+          class="w-full"
+          :disabled="isSubmitDisabled || isCreating || isUpdatingCategory"
+          :is-loading="isCreating || isUpdatingCategory"
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import { useStoreGetters } from 'dashboard/composables/store.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    default: () => [],
+  },
+  allowedLocales: {
+    type: Array,
+    default: () => [],
+  },
+  hasSelectedCategory: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['localeChange']);
+
+const route = useRoute();
+const router = useRouter();
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const isLocaleMenuOpen = ref(false);
+const isCreateCategoryDialogOpen = ref(false);
+const isEditCategoryDialogOpen = ref(false);
+
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const currentPortal = computed(() => {
+  const slug = currentPortalSlug.value;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return getters['portals/allPortals'].value[0];
+});
+
+const currentPortalName = computed(() => {
+  return currentPortal.value?.name;
+});
+
+const activeLocale = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  );
+});
+
+const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
+const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
+
+const localeMenuItems = computed(() => {
+  return props.allowedLocales.map(locale => ({
+    label: locale.name,
+    value: locale.code,
+    action: 'filter',
+  }));
+});
+
+const selectedCategory = computed(() =>
+  props.categories.find(category => category.slug === route.params.categorySlug)
+);
+
+const selectedCategoryName = computed(() => {
+  return selectedCategory.value?.name;
+});
+
+const selectedCategoryCount = computed(
+  () => selectedCategory.value?.meta?.articles_count || 0
+);
+
+const selectedCategoryEmoji = computed(() => {
+  return selectedCategory.value?.icon;
+});
+
+const categoriesCount = computed(() => props.categories?.length);
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t(
+        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.CATEGORY_LOCALE',
+        { localeCode: activeLocaleCode.value }
+      ),
+      link: '#',
+    },
+  ];
+  if (selectedCategory.value) {
+    items.push({
+      label: t(
+        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.ACTIVE_CATEGORY',
+        {
+          categoryName: selectedCategoryName.value,
+          categoryCount: selectedCategoryCount.value,
+        }
+      ),
+      emoji: selectedCategoryEmoji.value,
+    });
+  }
+  return items;
+});
+
+const handleLocaleAction = ({ value }) => {
+  emit('localeChange', value);
+  isLocaleMenuOpen.value = false;
+};
+
+const handleBreadcrumbClick = () => {
+  const { categorySlug, ...otherParams } = route.params;
+  router.push({
+    name: 'portals_categories_index',
+    params: otherParams,
+  });
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full">
+    <div v-if="!hasSelectedCategory" class="flex items-center gap-4">
+      <div class="relative group">
+        <OnClickOutside @trigger="isLocaleMenuOpen = false">
+          <Button
+            :label="activeLocaleName"
+            size="sm"
+            trailing-icon
+            icon="i-lucide-chevron-down"
+            color="slate"
+            @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+          />
+          <DropdownMenu
+            v-if="isLocaleMenuOpen"
+            :menu-items="localeMenuItems"
+            show-search
+            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+            @action="handleLocaleAction"
+          />
+        </OnClickOutside>
+      </div>
+      <div class="w-px h-3.5 rounded my-auto bg-n-weak" />
+      <span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
+        {{
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
+            n: categoriesCount,
+          })
+        }}
+      </span>
+    </div>
+    <Breadcrumb
+      v-else
+      :items="breadcrumbItems"
+      @click="handleBreadcrumbClick"
+    />
+    <div v-if="!hasSelectedCategory" class="relative">
+      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
+        <Button
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
+          icon="i-lucide-plus"
+          size="sm"
+          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
+        />
+        <CategoryDialog
+          v-if="isCreateCategoryDialogOpen"
+          mode="create"
+          :portal-name="currentPortalName"
+          :active-locale-name="activeLocaleName"
+          :active-locale-code="activeLocaleCode"
+          @close="isCreateCategoryDialogOpen = false"
+        />
+      </OnClickOutside>
+    </div>
+    <div v-else class="relative">
+      <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
+        <Button
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
+          color="slate"
+          size="sm"
+          @click="isEditCategoryDialogOpen = !isEditCategoryDialogOpen"
+        />
+        <CategoryDialog
+          v-if="isEditCategoryDialogOpen"
+          :selected-category="selectedCategory"
+          :portal-name="currentPortalName"
+          :active-locale-name="activeLocaleName"
+          :active-locale-code="activeLocaleCode"
+          @close="isEditCategoryDialogOpen = false"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue

@@ -0,0 +1,37 @@
+<script setup>
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+
+defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['click', 'action']);
+
+const handleClick = slug => {
+  emit('click', slug);
+};
+
+const handleAction = ({ action, value, id }, category) => {
+  emit('action', { action, value, id, category });
+};
+</script>
+
+<template>
+  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
+    <CategoryCard
+      v-for="category in categories"
+      :id="category.id"
+      :key="category.id"
+      :title="category.name"
+      :icon="category.icon"
+      :description="category.description"
+      :articles-count="category.meta.articles_count || 0"
+      :slug="category.slug"
+      @click="handleClick(category.slug)"
+      @action="handleAction($event, category)"
+    />
+  </ul>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
+
+const props = defineProps({
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  allowedLocales: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const getters = useStoreGetters();
+
+const dialogRef = ref(null);
+const categoryFormRef = ref(null);
+
+const isUpdatingCategory = computed(() => {
+  const id = props.selectedCategory?.id;
+  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
+
+  return false;
+});
+
+const isInvalidForm = computed(() => {
+  if (!categoryFormRef.value) return false;
+  const { isSubmitDisabled } = categoryFormRef.value;
+  return isSubmitDisabled;
+});
+
+const activeLocale = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  );
+});
+
+const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
+const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
+
+const onUpdateCategory = async () => {
+  if (!categoryFormRef.value) return;
+  const { state } = categoryFormRef.value;
+  const { id, name, slug, icon, description } = state;
+  const categoryData = { name, icon, slug, description };
+  categoryData.id = id;
+
+  try {
+    const payload = {
+      portalSlug: route.params.portalSlug,
+      categoryObj: categoryData,
+      categoryId: id,
+    };
+
+    await store.dispatch(`categories/update`, payload);
+
+    const successMessage = t(
+      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.SUCCESS_MESSAGE`
+    );
+    useAlert(successMessage);
+    dialogRef.value.close();
+
+    const trackEvent = PORTALS_EVENTS.EDIT_CATEGORY;
+    useTrack(trackEvent, { hasDescription: Boolean(description) });
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      t(`HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+// Expose the dialogRef to the parent component
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.EDIT')"
+    :description="
+      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.DESCRIPTION')
+    "
+    :is-loading="isUpdatingCategory"
+    :disable-confirm-button="isUpdatingCategory || isInvalidForm"
+    @confirm="onUpdateCategory"
+  >
+    <CategoryForm
+      ref="categoryFormRef"
+      mode="edit"
+      :selected-category="selectedCategory"
+      :active-locale-code="activeLocaleCode"
+      :portal-name="route.params.portalSlug"
+      :active-locale-name="activeLocaleName"
+      :show-action-buttons="false"
+    />
+  </Dialog>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import allLocales from 'shared/constants/locales.js';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+const isUpdating = ref(false);
+
+const selectedLocale = ref('');
+
+const addedLocales = computed(() => {
+  const { allowed_locales: allowedLocales = [] } = props.portal?.config || {};
+  return allowedLocales.map(locale => locale.code);
+});
+
+const locales = computed(() => {
+  return Object.keys(allLocales)
+    .map(key => {
+      return {
+        value: key,
+        label: `${allLocales[key]} (${key})`,
+      };
+    })
+    .filter(locale => !addedLocales.value.includes(locale.value));
+});
+
+const onCreate = async () => {
+  if (!selectedLocale.value) return;
+
+  isUpdating.value = true;
+  const updatedLocales = [...addedLocales.value, selectedLocale.value];
+
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal?.slug,
+      config: {
+        allowed_locales: updatedLocales,
+        default_locale: props.portal?.meta?.default_locale,
+      },
+    });
+
+    useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
+      localeAdded: selectedLocale.value,
+      totalLocales: updatedLocales.length,
+      from: route.name,
+    });
+
+    selectedLocale.value = '';
+    dialogRef.value?.close();
+    useAlert(
+      t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.ERROR_MESSAGE')
+    );
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+// Expose the dialogRef to the parent component
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.TITLE')"
+    :description="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.DESCRIPTION')"
+    @confirm="onCreate"
+  >
+    <div class="flex flex-col gap-6">
+      <ComboBox
+        v-model="selectedLocale"
+        :options="locales"
+        :placeholder="
+          t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
+        "
+        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
+      />
+    </div>
+  </Dialog>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -0,0 +1,123 @@
+<script setup>
+import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+const props = defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+  portal: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const isLocaleDefault = code => {
+  return props.portal?.meta?.default_locale === code;
+};
+
+const updatePortalLocales = async ({
+  newAllowedLocales,
+  defaultLocale,
+  messageKey,
+}) => {
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal.slug,
+      config: {
+        default_locale: defaultLocale,
+        allowed_locales: newAllowedLocales,
+      },
+    });
+
+    alertMessage = t(`HELP_CENTER.PORTAL.${messageKey}.API.SUCCESS_MESSAGE`);
+  } catch (error) {
+    alertMessage =
+      error?.message || t(`HELP_CENTER.PORTAL.${messageKey}.API.ERROR_MESSAGE`);
+  } finally {
+    useAlert(alertMessage);
+  }
+};
+
+const changeDefaultLocale = ({ localeCode }) => {
+  const newAllowedLocales = props.locales.map(locale => locale.code);
+  updatePortalLocales({
+    newAllowedLocales,
+    defaultLocale: localeCode,
+    messageKey: 'CHANGE_DEFAULT_LOCALE',
+  });
+  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+    newLocale: localeCode,
+    from: route.name,
+  });
+};
+
+const updateLastActivePortal = async localeCode => {
+  const { last_active_locale_code: lastActiveLocaleCode } =
+    uiSettings.value || {};
+  const defaultLocale = props.portal.meta.default_locale;
+
+  // Update UI settings only if deleting locale matches the last active locale in UI settings.
+  if (localeCode === lastActiveLocaleCode) {
+    await updateUISettings({
+      last_active_locale_code: defaultLocale,
+    });
+  }
+};
+
+const deletePortalLocale = async ({ localeCode }) => {
+  const updatedLocales = props.locales
+    .filter(locale => locale.code !== localeCode)
+    .map(locale => locale.code);
+
+  const defaultLocale = props.portal.meta.default_locale;
+
+  await updatePortalLocales({
+    newAllowedLocales: updatedLocales,
+    defaultLocale,
+    messageKey: 'DELETE_LOCALE',
+  });
+
+  await updateLastActivePortal(localeCode);
+
+  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
+    deletedLocale: localeCode,
+    from: route.name,
+  });
+};
+
+const handleAction = ({ action }, localeCode) => {
+  if (action === 'change-default') {
+    changeDefaultLocale({ localeCode: localeCode });
+  } else if (action === 'delete') {
+    deletePortalLocale({ localeCode: localeCode });
+  }
+};
+</script>
+
+<template>
+  <ul role="list" class="w-full h-full space-y-4">
+    <LocaleCard
+      v-for="(locale, index) in locales"
+      :key="index"
+      :locale="locale.name"
+      :is-default="isLocaleDefault(locale.code)"
+      :locale-code="locale.code"
+      :article-count="locale.articlesCount || 0"
+      :category-count="locale.categoriesCount || 0"
+      @action="handleAction($event, locale.code)"
+    />
+  </ul>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue

@@ -0,0 +1,52 @@
+<script setup>
+import LocalesPage from './LocalesPage.vue';
+
+const locales = [
+  {
+    name: 'English (en-US)',
+    isDefault: true,
+    articleCount: 5,
+    categoryCount: 5,
+  },
+  {
+    name: 'Spanish (es-ES)',
+    isDefault: false,
+    articleCount: 20,
+    categoryCount: 10,
+  },
+  {
+    name: 'English (en-UK)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malay (ms-MY)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malayalam (ml-IN)',
+    isDefault: false,
+    articleCount: 10,
+    categoryCount: 5,
+  },
+  {
+    name: 'Hindi (hi-IN)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
+    <Variant title="All Locales">
+      <div class="w-full min-h-screen bg-n-background">
+        <LocalesPage :locales="locales" />
+      </div>
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
+import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
+
+const props = defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const addLocaleDialogRef = ref(null);
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
+const openAddLocaleDialog = () => {
+  addLocaleDialogRef.value.dialogRef.open();
+};
+
+const localeCount = computed(() => props.locales?.length);
+</script>
+
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <span class="text-sm font-medium text-n-slate-12">
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
+          </span>
+        </div>
+        <Button
+          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+          icon="i-lucide-plus"
+          size="sm"
+          @click="openAddLocaleDialog"
+        />
+      </div>
+    </template>
+    <template #content>
+      <div
+        v-if="isSwitchingPortal"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <LocaleList v-else :locales="locales" :portal="portal" />
+    </template>
+    <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
+  </HelpCenterLayout>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { helpers } from '@vuelidate/validators';
+import { isValidDomain } from '@chatwoot/utils';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'add',
+  },
+  customDomain: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['addCustomDomain']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const formState = reactive({
+  customDomain: props.customDomain,
+});
+
+const rules = {
+  customDomain: {
+    isValidDomain: helpers.withMessage(
+      () =>
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
+        ),
+      isValidDomain
+    ),
+  },
+};
+
+const v$ = useVuelidate(rules, formState);
+
+watch(
+  () => props.customDomain,
+  newVal => {
+    formState.customDomain = newVal;
+  }
+);
+
+const handleDialogConfirm = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('addCustomDomain', formState.customDomain);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="
+      t(
+        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_HEADER`
+      )
+    "
+    :confirm-button-label="
+      t(
+        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_CONFIRM_BUTTON_LABEL`
+      )
+    "
+    @confirm="handleDialogConfirm"
+  >
+    <Input
+      v-model="formState.customDomain"
+      :label="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
+        )
+      "
+      :placeholder="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
+        )
+      "
+      :message="
+        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
+      "
+      :message-type="v$.customDomain.$error ? 'error' : 'info'"
+      @blur="v$.customDomain.$touch()"
+    />
+  </Dialog>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+defineProps({
+  activePortalName: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['deletePortal']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = () => {
+  emit('deletePortal');
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.HEADER',
+        {
+          portalName: activePortalName,
+        }
+      )
+    "
+    :description="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.DESCRIPTION'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
+    @confirm="handleDialogConfirm"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
+import { email, required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  customDomain: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['send', 'close']);
+
+const { t } = useI18n();
+
+const state = reactive({
+  email: '',
+});
+
+const validationRules = {
+  email: { email, required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const domain = computed(() => {
+  const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
+  return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
+});
+
+const subdomainCNAME = computed(
+  () => `${props.customDomain} CNAME ${domain.value}`
+);
+
+const handleCopy = async e => {
+  e.stopPropagation();
+  await copyTextToClipboard(subdomainCNAME.value);
+  useAlert(
+    t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
+    )
+  );
+};
+
+const dialogRef = ref(null);
+
+const resetForm = () => {
+  v$.value.$reset();
+  state.email = '';
+};
+
+const onClose = () => {
+  resetForm();
+  emit('close');
+};
+
+const handleSend = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('send', state.email);
+  onClose();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="resetForm"
+  >
+    <NextButton
+      icon="i-lucide-x"
+      sm
+      ghost
+      slate
+      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
+      @click="onClose"
+    />
+    <div class="flex flex-col gap-6 divide-y divide-n-strong">
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <div class="flex items-center gap-3 w-full">
+          <span
+            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+          >
+            {{ subdomainCNAME }}
+          </span>
+          <NextButton
+            faded
+            slate
+            type="button"
+            icon="i-lucide-copy"
+            class="flex-shrink-0"
+            @click="handleCopy"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-6 pt-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <form
+          class="flex items-start gap-3 w-full"
+          @submit.prevent="handleSend"
+        >
+          <Input
+            v-model="state.email"
+            :placeholder="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
+              )
+            "
+            :message="
+              v$.email.$error
+                ? t(
+                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
+                  )
+                : ''
+            "
+            :message-type="v$.email.$error ? 'error' : 'info'"
+            class="w-full"
+            @blur="v$.email.$touch()"
+          />
+          <NextButton
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
+              )
+            "
+            type="submit"
+            class="flex-shrink-0"
+          />
+        </form>
+      </div>
+    </div>
+  </Dialog>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -0,0 +1,348 @@
+<script setup>
+import { reactive, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
+import { useAlert } from 'dashboard/composables';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength, helpers, url } from '@vuelidate/validators';
+import { isValidSlug } from 'shared/helpers/Validators';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
+
+const props = defineProps({
+  activePortal: {
+    type: Object,
+    required: true,
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['updatePortal']);
+
+const { t } = useI18n();
+const store = useStore();
+const getters = useStoreGetters();
+
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+
+const state = reactive({
+  name: '',
+  headerText: '',
+  pageTitle: '',
+  slug: '',
+  widgetColor: '',
+  homePageLink: '',
+  liveChatWidgetInboxId: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const originalState = reactive({ ...state });
+
+const liveChatWidgets = computed(() => {
+  const inboxes = store.getters['inboxes/getInboxes'];
+  const widgetOptions = inboxes
+    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
+    .map(inbox => ({
+      value: inbox.id,
+      label: inbox.name,
+    }));
+
+  return [
+    {
+      value: '',
+      label: t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.NONE_OPTION'),
+    },
+    ...widgetOptions,
+  ];
+});
+
+const rules = {
+  name: { required, minLength: minLength(2) },
+  slug: {
+    required: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'),
+      required
+    ),
+    isValidSlug: helpers.withMessage(
+      () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'),
+      isValidSlug
+    ),
+  },
+  homePageLink: { url },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() =>
+  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
+);
+
+const slugError = computed(() => {
+  return v$.value.slug.$errors[0]?.$message || '';
+});
+
+const homePageLinkError = computed(() =>
+  v$.value.homePageLink.$error
+    ? t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.ERROR')
+    : ''
+);
+
+const isUpdatingPortal = computed(() => {
+  const slug = props.activePortal?.slug;
+  if (slug) return getters['portals/uiFlagsIn'].value(slug)?.isUpdating;
+
+  return false;
+});
+
+watch(
+  () => props.activePortal,
+  newVal => {
+    if (newVal && !props.isFetching) {
+      Object.assign(state, {
+        name: newVal.name,
+        headerText: newVal.header_text,
+        pageTitle: newVal.page_title,
+        widgetColor: newVal.color,
+        homePageLink: newVal.homepage_link,
+        slug: newVal.slug,
+        liveChatWidgetInboxId: newVal.inbox?.id || '',
+      });
+      if (newVal.logo) {
+        const {
+          logo: { file_url: logoURL, blob_id: blobId },
+        } = newVal;
+        state.logoUrl = logoURL;
+        state.avatarBlobId = blobId;
+      } else {
+        state.logoUrl = '';
+        state.avatarBlobId = '';
+      }
+      Object.assign(originalState, state);
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const hasChanges = computed(() => {
+  return JSON.stringify(state) !== JSON.stringify(originalState);
+});
+
+const handleUpdatePortal = () => {
+  const portal = {
+    id: props.activePortal?.id,
+    slug: state.slug,
+    name: state.name,
+    color: state.widgetColor,
+    page_title: state.pageTitle,
+    header_text: state.headerText,
+    homepage_link: state.homePageLink,
+    blob_id: state.avatarBlobId,
+    inbox_id: state.liveChatWidgetInboxId,
+  };
+  emit('updatePortal', portal);
+};
+
+async function uploadLogoToStorage({ file }) {
+  try {
+    const { fileUrl, blobId } = await uploadFile(file);
+    if (fileUrl) {
+      state.logoUrl = fileUrl;
+      state.avatarBlobId = blobId;
+    }
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SUCCESS'));
+  } catch (error) {
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_ERROR'));
+  }
+}
+
+async function deleteLogo() {
+  try {
+    const portalSlug = props.activePortal?.slug;
+    await store.dispatch('portals/deleteLogo', {
+      portalSlug,
+    });
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_ERROR')
+    );
+  }
+}
+
+const handleAvatarUpload = file => {
+  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+    uploadLogoToStorage(file);
+  } else {
+    const errorKey =
+      'HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SIZE_ERROR';
+    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
+  }
+};
+
+const handleAvatarDelete = () => {
+  state.logoUrl = '';
+  state.avatarBlobId = '';
+  deleteLogo();
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-4">
+    <div class="flex flex-col w-full gap-2">
+      <label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
+        {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
+      </label>
+      <Avatar
+        :src="state.logoUrl"
+        :name="state.name"
+        :size="72"
+        allow-upload
+        icon-name="i-lucide-building-2"
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+    </div>
+    <div class="flex flex-col w-full gap-4">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
+        </label>
+        <Input
+          v-model="state.name"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          :message-type="nameError ? 'error' : 'info'"
+          :message="nameError"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.name.$touch()"
+          @blur="v$.name.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
+        </label>
+        <Input
+          v-model="state.headerText"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.PLACEHOLDER')
+          "
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
+        </label>
+        <Input
+          v-model="state.pageTitle"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.PLACEHOLDER')
+          "
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
+        </label>
+        <Input
+          v-model="state.homePageLink"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.PLACEHOLDER')
+          "
+          :message-type="homePageLinkError ? 'error' : 'info'"
+          :message="homePageLinkError"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.homePageLink.$touch()"
+          @blur="v$.homePageLink.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
+        </label>
+        <Input
+          v-model="state.slug"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.PLACEHOLDER')"
+          :message-type="slugError ? 'error' : 'info'"
+          :message="slugError || buildPortalURL(state.slug)"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.slug.$touch()"
+          @blur="v$.slug.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
+        </label>
+        <ComboBox
+          v-model="state.liveChatWidgetInboxId"
+          :options="liveChatWidgets"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.PLACEHOLDER')
+          "
+          :message="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
+          "
+          class="[&>div>button:not(.focused)]:!outline-n-weak"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
+        </label>
+        <div class="w-[432px] justify-start">
+          <ColorPicker v-model="state.widgetColor" />
+        </div>
+      </div>
+      <div class="flex justify-end w-full gap-2">
+        <Button
+          :label="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SAVE_CHANGES')"
+          :disabled="!hasChanges || isUpdatingPortal || v$.$invalid"
+          :is-loading="isUpdatingPortal"
+          @click="handleUpdatePortal"
+        />
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue

@@ -0,0 +1,254 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
+import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  activePortal: {
+    type: Object,
+    required: true,
+  },
+  isFetchingStatus: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'updatePortalConfiguration',
+  'refreshStatus',
+  'sendCnameInstructions',
+]);
+
+const SSL_STATUS = {
+  LIVE: ['active', 'staging_active'],
+  PENDING: [
+    'provisioned',
+    'pending',
+    'initializing',
+    'pending_validation',
+    'pending_deployment',
+    'pending_issuance',
+    'holding_deployment',
+    'holding_validation',
+    'pending_expiration',
+    'pending_cleanup',
+    'pending_deletion',
+    'staging_deployment',
+    'backup_issued',
+  ],
+  ERROR: [
+    'blocked',
+    'inactive',
+    'moved',
+    'expired',
+    'deleted',
+    'timed_out_initializing',
+    'timed_out_validation',
+    'timed_out_issuance',
+    'timed_out_deployment',
+    'timed_out_deletion',
+    'deactivating',
+  ],
+};
+
+const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
+
+const addCustomDomainDialogRef = ref(null);
+const dnsConfigurationDialogRef = ref(null);
+const updatedDomainAddress = ref('');
+
+const customDomainAddress = computed(
+  () => props.activePortal?.custom_domain || ''
+);
+
+const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
+const verificationErrors = computed(
+  () => sslSettings.value.verification_errors || ''
+);
+
+const isLive = computed(() =>
+  SSL_STATUS.LIVE.includes(sslSettings.value.status)
+);
+const isPending = computed(() =>
+  SSL_STATUS.PENDING.includes(sslSettings.value.status)
+);
+const isError = computed(() =>
+  SSL_STATUS.ERROR.includes(sslSettings.value.status)
+);
+
+const statusText = computed(() => {
+  if (isLive.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
+    );
+  if (isPending.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
+    );
+  if (isError.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
+    );
+  return '';
+});
+
+const statusColors = computed(() => {
+  if (isLive.value)
+    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
+  if (isError.value)
+    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
+  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
+});
+
+const updatePortalConfiguration = customDomain => {
+  const portal = {
+    id: props.activePortal?.id,
+    custom_domain: customDomain,
+  };
+  emit('updatePortalConfiguration', portal);
+  addCustomDomainDialogRef.value.dialogRef.close();
+  if (customDomain) {
+    updatedDomainAddress.value = customDomain;
+    dnsConfigurationDialogRef.value.dialogRef.open();
+  }
+};
+
+const closeDNSConfigurationDialog = () => {
+  updatedDomainAddress.value = '';
+  dnsConfigurationDialogRef.value.dialogRef.close();
+};
+
+const onClickRefreshSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const onClickSend = email => {
+  emit('sendCnameInstructions', {
+    portalSlug: props.activePortal?.slug,
+    email,
+  });
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-6">
+    <div class="flex flex-col gap-2">
+      <h6 class="text-base font-medium text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.HEADER'
+          )
+        }}
+      </h6>
+      <span class="text-sm text-n-slate-11">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DESCRIPTION'
+          )
+        }}
+      </span>
+    </div>
+    <div class="flex flex-col w-full gap-4">
+      <div class="flex items-center justify-between w-full gap-2">
+        <div v-if="customDomainAddress" class="flex flex-col gap-1">
+          <div class="flex items-center w-full h-8 gap-4">
+            <label class="text-sm font-medium text-n-slate-12">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+                )
+              }}
+            </label>
+            <span class="text-sm text-n-slate-12">
+              {{ customDomainAddress }}
+            </span>
+          </div>
+          <span
+            v-if="!isLive && isOnChatwootCloud"
+            class="text-sm text-n-slate-11"
+          >
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
+              )
+            }}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <div v-if="customDomainAddress" class="flex items-center gap-3">
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              v-tooltip="verificationErrors"
+              class="flex items-center gap-3 flex-shrink-0"
+            >
+              <span
+                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
+                :class="statusColors.bubble"
+              />
+              <span
+                :class="statusColors.text"
+                class="text-sm leading-[16px] font-medium"
+              >
+                {{ statusText }}
+              </span>
+            </div>
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              class="w-px h-3 bg-n-weak"
+            />
+            <Button
+              slate
+              sm
+              link
+              :label="
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+                )
+              "
+              class="hover:!no-underline flex-shrink-0"
+              @click="addCustomDomainDialogRef.dialogRef.open()"
+            />
+            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
+            <Button
+              v-if="isOnChatwootCloud"
+              slate
+              sm
+              link
+              icon="i-lucide-refresh-ccw"
+              :class="isFetchingStatus && 'animate-spin'"
+              @click="onClickRefreshSSLStatus"
+            />
+          </div>
+          <Button
+            v-else
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.ADD_BUTTON'
+              )
+            "
+            color="slate"
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
+        </div>
+      </div>
+    </div>
+    <AddCustomDomainDialog
+      ref="addCustomDomainDialogRef"
+      :mode="customDomainAddress ? 'edit' : 'add'"
+      :custom-domain="customDomainAddress"
+      @add-custom-domain="updatePortalConfiguration"
+    />
+    <DNSConfigurationDialog
+      ref="dnsConfigurationDialogRef"
+      :custom-domain="updatedDomainAddress || customDomainAddress"
+      @close="closeDNSConfigurationDialog"
+      @send="onClickSend"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue

@@ -0,0 +1,13 @@
+<script setup>
+import PortalSettings from './PortalSettings.vue';
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
+    <Variant title="Default">
+      <div class="w-[1000px] min-h-screen bg-n-background">
+        <PortalSettings />
+      </div>
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import PortalBaseSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue';
+import PortalConfigurationSettings from './PortalConfigurationSettings.vue';
+import ConfirmDeletePortalDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  portals: {
+    type: Array,
+    required: true,
+  },
+  isFetching: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'updatePortal',
+  'updatePortalConfiguration',
+  'deletePortal',
+  'refreshStatus',
+  'sendCnameInstructions',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const confirmDeletePortalDialogRef = ref(null);
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');
+
+const activePortal = computed(() => {
+  return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
+});
+
+const activePortalName = computed(() => activePortal.value?.name || '');
+
+const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
+
+const handleUpdatePortal = portal => {
+  emit('updatePortal', portal);
+};
+
+const handleUpdatePortalConfiguration = portal => {
+  emit('updatePortalConfiguration', portal);
+};
+
+const fetchSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const handleSendCnameInstructions = payload => {
+  emit('sendCnameInstructions', payload);
+};
+
+const openConfirmDeletePortalDialog = () => {
+  confirmDeletePortalDialogRef.value.dialogRef.open();
+};
+
+const handleDeletePortal = () => {
+  emit('deletePortal', activePortal.value);
+  confirmDeletePortalDialogRef.value.dialogRef.close();
+};
+</script>
+
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #content>
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 pt-2 pb-8 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <div
+        v-else-if="activePortal"
+        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
+      >
+        <PortalBaseSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal="handleUpdatePortal"
+        />
+        <div class="w-full h-px bg-n-weak" />
+        <PortalConfigurationSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          :is-fetching-status="isFetchingSSLStatus"
+          @update-portal-configuration="handleUpdatePortalConfiguration"
+          @refresh-status="fetchSSLStatus"
+          @send-cname-instructions="handleSendCnameInstructions"
+        />
+        <div class="w-full h-px bg-n-weak" />
+        <div class="flex items-end justify-between w-full gap-4">
+          <div class="flex flex-col gap-2">
+            <h6 class="text-base font-medium text-n-slate-12">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.HEADER'
+                )
+              }}
+            </h6>
+            <span class="text-sm text-n-slate-11">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DESCRIPTION'
+                )
+              }}
+            </span>
+          </div>
+          <Button
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.BUTTON',
+                {
+                  portalName: activePortalName,
+                }
+              )
+            "
+            color="ruby"
+            class="max-w-56 !w-fit"
+            @click="openConfirmDeletePortalDialog"
+          />
+        </div>
+      </div>
+    </template>
+    <ConfirmDeletePortalDialog
+      ref="confirmDeletePortalDialogRef"
+      :active-portal-name="activePortalName"
+      @delete-portal="handleDeletePortal"
+    />
+  </HelpCenterLayout>
+</template>