From 705f8ef948e3f36dffeb51c2df38edd895b20cc0 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 30 Apr 2024 10:13:50 +0530
Subject: [PATCH] feat: add composables for migration and update portal
 settings (#9299)

* feat: setup vuelitdate for vue 2.7

* feat: add all composables

* fix: portal settings layout

* feat: remove styles

* feat: use setup API for ListAllCategories

* chore: format ListAllCategories

* refactor: add useAlert

* feat: add track composable

* feat: update map getters

* fix: import

* feat: update edit portal locales page [wip]

* feat: migrate locales page

* feat: remove alert message ref

* chore: format EditPortalLocales

* refactor: use composiiton api for PortalCustomization

* refactor: remove color

* feat: update PortalSettingsCustomizationForm to use setup syntax

* refactor: no need to import defineEmits

* refactor: format component

* fix: update logic

* feat: migrate PortalSettingsBasicForm

* refactor: format PortalSettingsBasicForm

* refactor: migrate EditPortalCustomization to Vue 2.7

* feat: migrate EditPortalBasic to vue 2.7

* chore: revert changes to EditPortal

* fix: portal layout

* fix: width

* feat: use setup syntax

* fix: double border

* feat: return track method

* refactor: track usage

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../components/Layout/SettingsLayout.vue      |  34 ++
 .../components/PortalSettingsBasicForm.vue    | 457 +++++++++---------
 .../PortalSettingsCustomizationForm.vue       | 276 +++++------
 .../pages/categories/ListAllCategories.vue    | 226 ++++-----
 .../pages/portals/EditPortalBasic.vue         | 149 +++---
 .../pages/portals/EditPortalCustomization.vue |  93 ++--
 .../pages/portals/EditPortalLocales.vue       | 255 +++++-----
 .../helpcenter/pages/portals/NewPortal.vue    |  14 +-
 .../pages/portals/PortalCustomization.vue     | 132 +++--
 .../pages/portals/PortalSettingsFinish.vue    |  22 +-
 10 files changed, 807 insertions(+), 851 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
new file mode 100644
index 000000000..bc3c51a39
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent md:max-w-2xl"
+  >
+    <h3
+      v-if="$slots.title || title"
+      class="text-lg text-black-900 dark:text-slate-200"
+    >
+      <slot name="title">{{ title }}</slot>
+    </h3>
+    <div
+      class="mx-0 my-4 border-b border-solid border-slate-25 dark:border-slate-800"
+    >
+      <slot />
+    </div>
+    <div class="flex justify-between">
+      <div>
+        <slot name="footer-left" />
+      </div>
+      <div>
+        <slot name="footer-right" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 85c035a2a..4417fdf57 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -1,256 +1,241 @@
-<template>
-  <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <div class="w-full">
-      <h3 class="text-lg text-black-900 dark:text-slate-200">
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
-          )
-        }}
-      </h3>
-    </div>
-    <div
-      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <div class="mb-4">
-          <div class="flex items-center flex-row">
-            <woot-avatar-uploader
-              ref="imageUpload"
-              :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
-              :src="logoUrl"
-              @change="onFileChange"
-            />
-            <div v-if="showDeleteButton" class="avatar-delete-btn">
-              <woot-button
-                type="button"
-                color-scheme="alert"
-                variant="hollow"
-                size="small"
-                @click="deleteAvatar"
-              >
-                {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
-              </woot-button>
-            </div>
-          </div>
-          <p
-            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
-          >
-            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="name"
-            :class="{ error: $v.name.$error }"
-            :error="nameError"
-            :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-            @blur="$v.name.$touch"
-            @input="onNameChange"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="slug"
-            :class="{ error: $v.slug.$error }"
-            :error="slugError"
-            :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
-            :help-text="domainHelpText"
-            @blur="$v.slug.$touch"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="domain"
-            :class="{ error: $v.domain.$error }"
-            :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-            :help-text="domainExampleHelpText"
-            :error="domainError"
-            @blur="$v.domain.$touch"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-end">
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
-        @click="onSubmitClick"
-      >
-        {{ submitButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
+<script setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
-<script>
-import { required, minLength } from 'vuelidate/lib/validators';
-import { isDomain } from 'shared/helpers/Validators';
+import { defineComponent, reactive, computed, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
 
-import alertMixin from 'shared/mixins/alertMixin';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 import wootConstants from 'dashboard/constants/globals';
 import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { isDomain } from 'shared/helpers/Validators';
+import SettingsLayout from './Layout/SettingsLayout.vue';
 
 const { EXAMPLE_URL } = wootConstants;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 
-export default {
-  mixins: [alertMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    isSubmitting: {
-      type: Boolean,
-      default: false,
-    },
-    submitButtonText: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      name: '',
-      slug: '',
-      domain: '',
-      alertMessage: '',
+const { t } = useI18n();
 
-      // Logouploader keys
-      avatarBlobId: '',
-      logoUrl: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-    domain: {
-      isDomain,
-    },
-  },
-  computed: {
-    nameError() {
-      if (this.$v.name.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-      }
-      return '';
-    },
-    slugError() {
-      if (this.$v.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-    domainError() {
-      if (this.$v.domain.$error) {
-        return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
-      }
-      return '';
-    },
-    domainHelpText() {
-      return buildPortalURL(this.slug);
-    },
-    domainExampleHelpText() {
-      return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
-        exampleURL: EXAMPLE_URL,
-      });
-    },
-    showDeleteButton() {
-      return hasValidAvatarUrl(this.logoUrl);
-    },
-  },
-  mounted() {
-    const portal = this.portal || {};
-    this.name = portal.name || '';
-    this.slug = portal.slug || '';
-    this.domain = portal.custom_domain || '';
-    this.alertMessage = '';
-    if (portal.logo) {
-      const {
-        logo: { file_url: logoURL, blob_id: blobId },
-      } = portal;
-      this.logoUrl = logoURL;
-      this.avatarBlobId = blobId;
-    }
-  },
-  methods: {
-    onNameChange() {
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
+defineComponent({
+  name: 'PortalSettingsBasicForm',
+});
 
-      const portal = {
-        name: this.name,
-        slug: this.slug,
-        custom_domain: this.domain,
-        blob_id: this.avatarBlobId || null,
-      };
-      this.$emit('submit', portal);
-    },
-    async deleteAvatar() {
-      this.logoUrl = '';
-      this.avatarBlobId = '';
-      this.$emit('delete-logo');
-    },
-    onFileChange({ file }) {
-      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-        this.uploadLogoToStorage(file);
-      } else {
-        this.showAlert(
-          this.$t(
-            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR',
-            {
-              size: MAXIMUM_FILE_UPLOAD_SIZE,
-            }
-          )
-        );
-      }
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => {},
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false,
+  },
+  submitButtonText: {
+    type: String,
+    default: '',
+  },
+});
 
-      this.$refs.imageUpload.value = '';
-    },
-    async uploadLogoToStorage(file) {
-      try {
-        const { fileUrl, blobId } = await uploadFile(file);
-        if (fileUrl) {
-          this.logoUrl = fileUrl;
-          this.avatarBlobId = blobId;
-        }
-      } catch (error) {
-        this.showAlert(
-          this.$t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
-        );
-      }
-    },
+const state = reactive({
+  name: '',
+  slug: '',
+  domain: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const rules = {
+  name: {
+    required,
+    minLength: minLength(2),
+  },
+  slug: {
+    required,
+  },
+  domain: {
+    isDomain,
   },
 };
-</script>
-<style lang="scss" scoped>
-::v-deep {
-  input {
-    @apply mb-1;
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() => {
+  if (v$.value.name.$error) {
+    return t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
   }
-  .help-text {
-    @apply mb-0;
+  return '';
+});
+
+const slugError = computed(() => {
+  if (v$.value.slug.$error) {
+    return t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
+  }
+  return '';
+});
+
+const domainError = computed(() => {
+  if (v$.value.domain.$error) {
+    return t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
+  }
+  return '';
+});
+
+const domainHelpText = computed(() => {
+  return buildPortalURL(state.slug);
+});
+
+const domainExampleHelpText = computed(() => {
+  return t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
+    exampleURL: EXAMPLE_URL,
+  });
+});
+
+const showDeleteButton = computed(() => {
+  return hasValidAvatarUrl(state.logoUrl);
+});
+
+const emit = defineEmits(['submit', 'delete-logo']);
+
+onMounted(() => {
+  const portal = props.portal || {};
+  state.name = portal.name || '';
+  state.slug = portal.slug || '';
+  state.domain = portal.custom_domain || '';
+
+  if (portal.logo) {
+    const {
+      logo: { file_url: logoURL, blob_id: blobId },
+    } = portal;
+    state.logoUrl = logoURL;
+    state.avatarBlobId = blobId;
+  }
+});
+
+function onNameChange() {
+  state.slug = convertToCategorySlug(state.name);
+}
+
+function onSubmitClick() {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  const portal = {
+    name: state.name,
+    slug: state.slug,
+    custom_domain: state.domain,
+    blob_id: state.avatarBlobId || null,
+  };
+  emit('submit', portal);
+}
+async function deleteAvatar() {
+  state.logoUrl = '';
+  state.avatarBlobId = '';
+  emit('delete-logo');
+}
+
+async function uploadLogoToStorage(file) {
+  try {
+    const { fileUrl, blobId } = await uploadFile(file);
+    if (fileUrl) {
+      state.logoUrl = fileUrl;
+      state.avatarBlobId = blobId;
+    }
+  } catch (error) {
+    useAlert(t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_UPLOAD_ERROR'));
   }
 }
-</style>
+
+function onFileChange({ file }) {
+  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+    uploadLogoToStorage(file);
+  } else {
+    const errorKey =
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR';
+    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
+  }
+}
+</script>
+
+<template>
+  <SettingsLayout
+    :title="
+      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE')
+    "
+  >
+    <div>
+      <div class="mb-4">
+        <div class="flex flex-row items-center">
+          <woot-avatar-uploader
+            :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
+            :src="state.logoUrl"
+            @change="onFileChange"
+          />
+          <div v-if="showDeleteButton" class="avatar-delete-btn">
+            <woot-button
+              type="button"
+              color-scheme="alert"
+              variant="hollow"
+              size="small"
+              @click="deleteAvatar"
+            >
+              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
+            </woot-button>
+          </div>
+        </div>
+        <p
+          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
+        >
+          {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.name"
+          :class="{ error: v$.name.$error }"
+          :error="nameError"
+          :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
+          @blur="v$.name.$touch"
+          @input="onNameChange"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.slug"
+          :class="{ error: v$.slug.$error }"
+          :error="slugError"
+          :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
+          :help-text="domainHelpText"
+          @blur="v$.slug.$touch"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.domain"
+          :class="{ error: v$.domain.$error }"
+          :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
+          :help-text="domainExampleHelpText"
+          :error="domainError"
+          @blur="v$.domain.$touch"
+        />
+      </div>
+    </div>
+    <template #footer-right>
+      <woot-button
+        :is-loading="isSubmitting"
+        :is-disabled="v$.$invalid"
+        @click="onSubmitClick"
+      >
+        {{ submitButtonText }}
+      </woot-button>
+    </template>
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index c00ab9beb..7572f5b80 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -1,68 +1,140 @@
+<script setup>
+import { getRandomColor } from 'dashboard/helper/labelColor';
+import SettingsLayout from './Layout/SettingsLayout.vue';
+import wootConstants from 'dashboard/constants/globals';
+const { EXAMPLE_URL } = wootConstants;
+
+import { useVuelidate } from '@vuelidate/core';
+import { url } from '@vuelidate/validators';
+
+import { defineComponent, reactive, computed, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+defineComponent({
+  name: 'PortalSettingsCustomizationForm',
+});
+
+const { t } = useI18n();
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const state = reactive({
+  color: getRandomColor(),
+  pageTitle: '',
+  headerText: '',
+  homePageLink: '',
+});
+
+const rules = {
+  homePageLink: { url },
+};
+
+const homepageExampleHelpText = computed(() => {
+  return t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
+    exampleURL: EXAMPLE_URL,
+  });
+});
+
+const v$ = useVuelidate(rules, state);
+
+function updateDataFromStore() {
+  const { portal } = props;
+  if (portal) {
+    state.color = portal.color || getRandomColor();
+    state.pageTitle = portal.page_title || '';
+    state.headerText = portal.header_text || '';
+    state.homePageLink = portal.homepage_link || '';
+  }
+}
+
+function onSubmitClick() {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  const portal = {
+    id: props.portal.id,
+    slug: props.portal.slug,
+    color: state.color,
+    page_title: state.pageTitle,
+    header_text: state.headerText,
+    homepage_link: state.homePageLink,
+  };
+
+  emit('submit', portal);
+}
+
+onMounted(() => {
+  updateDataFromStore();
+});
+</script>
+
 <template>
-  <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  <SettingsLayout
+    :title="
+      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
+    "
   >
-    <div class="w-full">
-      <h3 class="text-lg text-black-900 dark:text-slate-200">
-        {{
-          $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
-        }}
-      </h3>
-    </div>
-    <div
-      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <div class="mb-4">
-          <label>
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
-          </label>
-          <woot-color-picker v-model="color" />
-          <p
-            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
-          >
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="pageTitle"
-            :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="headerText"
-            :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="homePageLink"
-            :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
-            :placeholder="
-              $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')
-            "
-            :help-text="homepageExampleHelpText"
-            :error="
-              $v.homePageLink.$error
-                ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
-                : ''
-            "
-            :class="{ error: $v.homePageLink.$error }"
-            @blur="$v.homePageLink.$touch"
-          />
-        </div>
+    <div class="flex-grow-0 flex-shrink-0">
+      <div class="mb-4">
+        <label>
+          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
+        </label>
+        <woot-color-picker v-model="state.color" />
+        <p
+          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
+        >
+          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.pageTitle"
+          :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.headerText"
+          :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.homePageLink"
+          :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
+          :help-text="homepageExampleHelpText"
+          :error="
+            v$.homePageLink.$error
+              ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
+              : ''
+          "
+          :class="{ error: v$.homePageLink.$error }"
+          @blur="v$.homePageLink.$touch"
+        />
       </div>
     </div>
-    <div class="flex justify-end">
+    <template #footer-right>
       <woot-button
         :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
+        :is-disabled="v$.$invalid"
         @click="onSubmitClick"
       >
         {{
@@ -71,94 +143,12 @@
           )
         }}
       </woot-button>
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
 
-<script>
-import { url } from 'vuelidate/lib/validators';
-import { getRandomColor } from 'dashboard/helper/labelColor';
-
-import alertMixin from 'shared/mixins/alertMixin';
-import wootConstants from 'dashboard/constants/globals';
-
-const { EXAMPLE_URL } = wootConstants;
-
-export default {
-  components: {},
-  mixins: [alertMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    isSubmitting: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      color: '#000',
-      pageTitle: '',
-      headerText: '',
-      homePageLink: '',
-      alertMessage: '',
-    };
-  },
-  validations: {
-    homePageLink: {
-      url,
-    },
-  },
-  computed: {
-    homepageExampleHelpText() {
-      return this.$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
-        exampleURL: EXAMPLE_URL,
-      });
-    },
-  },
-  mounted() {
-    this.color = getRandomColor();
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      const { portal } = this;
-      if (portal) {
-        this.color = portal.color || getRandomColor();
-        this.pageTitle = portal.page_title || '';
-        this.headerText = portal.header_text || '';
-        this.homePageLink = portal.homepage_link || '';
-        this.alertMessage = '';
-      }
-    },
-    onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-      const portal = {
-        id: this.portal.id,
-        slug: this.portal.slug,
-        color: this.color,
-        page_title: this.pageTitle,
-        header_text: this.headerText,
-        homepage_link: this.homePageLink,
-      };
-      this.$emit('submit', portal);
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 ::v-deep {
-  input {
-    @apply mb-1;
-  }
-  .help-text {
-    @apply mb-0;
-  }
   .colorpicker--selected {
     @apply mb-0;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
index b8f016a75..0dca57742 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -1,15 +1,115 @@
+<script setup>
+import { useRoute } from 'dashboard/composables/route';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { defineComponent, ref, computed } from 'vue';
+
+import CategoryListItem from './CategoryListItem.vue';
+import AddCategory from './AddCategory.vue';
+import EditCategory from './EditCategory.vue';
+
+defineComponent({
+  name: 'ListAllCategories',
+});
+
+const selectedCategory = ref({});
+const currentLocaleCode = ref('en');
+const showEditCategoryModal = ref(false);
+const showAddCategoryModal = ref(false);
+
+const getters = useStoreGetters();
+const store = useStore();
+const route = useRoute();
+const track = useTrack();
+const { t } = useI18n();
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const categoriesByLocaleCode = computed(() => {
+  return getters['categories/categoriesByLocaleCode'].value(
+    currentLocaleCode.value
+  );
+});
+
+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 ? currentPortal.value.name : '';
+});
+const allLocales = computed(() => {
+  return currentPortal.value ? currentPortal.value.config.allowed_locales : [];
+});
+
+const allowedLocaleCodes = computed(() => {
+  return allLocales.value.map(locale => locale.code);
+});
+
+function openAddCategoryModal() {
+  showAddCategoryModal.value = true;
+}
+function openEditCategoryModal(category) {
+  selectedCategory.value = category;
+  showEditCategoryModal.value = true;
+}
+function closeAddCategoryModal() {
+  showAddCategoryModal.value = false;
+}
+function closeEditCategoryModal() {
+  showEditCategoryModal.value = false;
+}
+async function fetchCategoriesByPortalSlugAndLocale(localeCode) {
+  await store.dispatch('categories/index', {
+    portalSlug: currentPortalSlug.value,
+    locale: localeCode,
+  });
+}
+
+async function deleteCategory(category) {
+  let alertMessage = '';
+  try {
+    await store.dispatch('categories/delete', {
+      portalSlug: currentPortalSlug.value,
+      categoryId: category.id,
+    });
+    alertMessage = t('HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE');
+    track(PORTALS_EVENTS.DELETE_CATEGORY, {
+      hasArticles: category?.meta?.articles_count !== 0,
+    });
+  } catch (error) {
+    const errorMessage = error?.message;
+    alertMessage =
+      errorMessage || t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+function changeCurrentCategory(event) {
+  const localeCode = event.target.value;
+  currentLocaleCode.value = localeCode;
+  fetchCategoriesByPortalSlugAndLocale(localeCode);
+}
+</script>
+
 <template>
-  <div class="w-full pl-4">
-    <header class="flex justify-between items-center mb-4">
+  <div class="w-full max-w-5xl">
+    <header class="flex items-center justify-between mb-4">
       <div class="flex items-center w-full gap-3">
         <label
-          class="font-normal mb-0 text-base text-slate-800 dark:text-slate-100"
+          class="mb-0 text-base font-normal text-slate-800 dark:text-slate-100"
         >
           {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
         </label>
         <select
           :value="currentLocaleCode"
-          class="w-[15%] select-locale"
+          class="w-[15%] h-8 mb-0 py-0.5"
           @change="changeCurrentCategory"
         >
           <option
@@ -21,7 +121,7 @@
           </option>
         </select>
       </div>
-      <div class="flex-none items-center">
+      <div class="items-center flex-none">
         <woot-button
           size="small"
           variant="smooth"
@@ -58,119 +158,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import portalMixin from '../../mixins/portalMixin';
-
-import CategoryListItem from './CategoryListItem.vue';
-import AddCategory from './AddCategory.vue';
-import EditCategory from './EditCategory.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    CategoryListItem,
-    AddCategory,
-    EditCategory,
-  },
-  mixins: [alertMixin, portalMixin],
-  data() {
-    return {
-      selectedCategory: {},
-      selectedLocaleCode: '',
-      currentLocaleCode: 'en',
-      showEditCategoryModal: false,
-      showAddCategoryModal: false,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      portals: 'portals/allPortals',
-      meta: 'portals/getMeta',
-      isFetching: 'portals/isFetchingPortals',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    categoriesByLocaleCode() {
-      return this.$store.getters['categories/categoriesByLocaleCode'](
-        this.currentLocaleCode
-      );
-    },
-    currentPortal() {
-      const slug = this.currentPortalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    currentPortalName() {
-      return this.currentPortal ? this.currentPortal.name : '';
-    },
-    currentPortalLocale() {
-      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
-    },
-    allLocales() {
-      return this.currentPortal
-        ? this.currentPortal.config.allowed_locales
-        : [];
-    },
-    allowedLocaleCodes() {
-      return this.allLocales.map(locale => locale.code);
-    },
-  },
-  methods: {
-    openAddCategoryModal() {
-      this.showAddCategoryModal = true;
-    },
-    openEditCategoryModal(category) {
-      this.selectedCategory = category;
-      this.showEditCategoryModal = true;
-    },
-    closeAddCategoryModal() {
-      this.showAddCategoryModal = false;
-    },
-    closeEditCategoryModal() {
-      this.showEditCategoryModal = false;
-    },
-    async fetchCategoriesByPortalSlugAndLocale(localeCode) {
-      await this.$store.dispatch('categories/index', {
-        portalSlug: this.currentPortalSlug,
-        locale: localeCode,
-      });
-    },
-    async deleteCategory(category) {
-      try {
-        await this.$store.dispatch('categories/delete', {
-          portalSlug: this.currentPortalSlug,
-          categoryId: category.id,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE'
-        );
-        this.$track(PORTALS_EVENTS.DELETE_CATEGORY, {
-          hasArticles: category?.meta?.articles_count !== 0,
-        });
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage ||
-          this.$t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    changeCurrentCategory(event) {
-      const localeCode = event.target.value;
-      this.currentLocaleCode = localeCode;
-      this.fetchCategoriesByPortalSlugAndLocale(localeCode);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.select-locale {
-  @apply h-8 mb-0 py-0.5;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index 8e3579f02..aac8125e5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -1,3 +1,75 @@
+<script setup>
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
+
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, computed, ref, onMounted } from 'vue';
+
+defineComponent({ name: 'EditPortalBasic' });
+
+const getters = useStoreGetters();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const lastPortalSlug = ref(null);
+
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  return getters['portals/portalBySlug'].value(slug);
+});
+
+onMounted(() => {
+  lastPortalSlug.value = currentPortalSlug.value;
+});
+
+async function updatePortalSettings(portalObj) {
+  let alertMessage = '';
+
+  try {
+    const portalSlug = lastPortalSlug.value;
+    await store.dispatch('portals/update', { ...portalObj, portalSlug });
+
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+
+    if (lastPortalSlug.value !== portalObj.slug) {
+      await store.dispatch('portals/index');
+      router.replace({
+        name: route.name,
+        params: { portalSlug: portalObj.slug },
+      });
+    }
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+async function deleteLogo() {
+  try {
+    const portalSlug = lastPortalSlug.value;
+    await store.dispatch('portals/deleteLogo', {
+      portalSlug,
+    });
+  } catch (error) {
+    useAlert(
+      error?.message || t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
+    );
+  }
+}
+</script>
+
 <template>
   <portal-settings-basic-form
     v-if="currentPortal"
@@ -10,80 +82,3 @@
     @delete-logo="deleteLogo"
   />
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-
-export default {
-  components: {
-    PortalSettingsBasicForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      lastPortalSlug: undefined,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentPortal() {
-      return this.$store.getters['portals/portalBySlug'](
-        this.currentPortalSlug
-      );
-    },
-  },
-  mounted() {
-    this.lastPortalSlug = this.currentPortalSlug;
-  },
-  methods: {
-    async updatePortalSettings(portalObj) {
-      try {
-        const portalSlug = this.lastPortalSlug;
-        await this.$store.dispatch('portals/update', {
-          ...portalObj,
-          portalSlug,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-
-        if (this.lastPortalSlug !== portalObj.slug) {
-          await this.$store.dispatch('portals/index');
-          this.$router.replace({
-            name: this.$route.name,
-            params: { portalSlug: portalObj.slug },
-          });
-        }
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    async deleteLogo() {
-      try {
-        const portalSlug = this.lastPortalSlug;
-        await this.$store.dispatch('portals/deleteLogo', {
-          portalSlug,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR');
-        this.showAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
index d1c9341f1..902dc3ca6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -1,3 +1,48 @@
+<script setup>
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
+
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, computed } from 'vue';
+
+defineComponent({
+  name: 'EditPortalCustomization',
+});
+
+const getters = useStoreGetters();
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  return getters['portals/portalBySlug'].value(slug);
+});
+
+async function updatePortalSettings(portalObj) {
+  const portalSlug = route.params.portalSlug;
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      ...portalObj,
+      portalSlug,
+    });
+
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+</script>
+
 <template>
   <portal-settings-customization-form
     v-if="currentPortal"
@@ -9,51 +54,3 @@
     @submit="updatePortalSettings"
   />
 </template>
-
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    PortalSettingsCustomizationForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
-    },
-  },
-  methods: {
-    async updatePortalSettings(portalObj) {
-      const portalSlug = this.$route.params.portalSlug;
-      try {
-        await this.$store.dispatch('portals/update', {
-          ...portalObj,
-          portalSlug,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index 3c1c4c872..8d0ffecd3 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -1,6 +1,117 @@
+<script setup>
+import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
+import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, ref, onBeforeMount, computed } from 'vue';
+
+defineComponent({
+  name: 'EditPortalLocales',
+});
+
+const isAddLocaleModalOpen = ref(false);
+
+const getters = useStoreGetters();
+const store = useStore();
+const route = useRoute();
+const track = useTrack();
+const { t } = useI18n();
+
+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 locales = computed(() => {
+  return currentPortal.value?.config.allowed_locales;
+});
+const allowedLocales = computed(() => {
+  return Object.keys(locales.value).map(key => {
+    return this.locales.value[key].code;
+  });
+});
+
+async function fetchPortals() {
+  await store.dispatch('portals/index');
+}
+
+onBeforeMount(() => {
+  fetchPortals();
+});
+
+async function updatePortalLocales({
+  newAllowedLocales,
+  defaultLocale,
+  messageKey,
+}) {
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: currentPortalSlug.value,
+      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);
+  }
+}
+
+function changeDefaultLocale({ localeCode }) {
+  updatePortalLocales({
+    allowedLocales: allowedLocales.value,
+    defaultLocale: localeCode,
+    messageKey: 'CHANGE_DEFAULT_LOCALE',
+  });
+
+  track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+    newLocale: localeCode,
+    from: route.name,
+  });
+}
+function deletePortalLocale({ localeCode }) {
+  const updatedLocales = allowedLocales.value.filter(
+    code => code !== localeCode
+  );
+
+  const defaultLocale = currentPortal.value?.meta.default_locale;
+
+  updatePortalLocales({
+    allowedLocales: updatedLocales,
+    defaultLocale,
+    messageKey: 'DELETE_LOCALE',
+  });
+
+  track(PORTALS_EVENTS.DELETE_LOCALE, {
+    deletedLocale: localeCode,
+    from: route.name,
+  });
+}
+
+function closeAddLocaleModal() {
+  isAddLocaleModalOpen.value = false;
+}
+function addLocale() {
+  isAddLocaleModalOpen.value = true;
+}
+</script>
+
 <template>
-  <div class="portal-locales">
-    <div class="button-container">
+  <div class="w-full h-full max-w-5xl space-y-4 bg-white dark:bg-slate-900">
+    <div class="flex justify-end">
       <woot-button
         variant="smooth"
         size="small"
@@ -11,19 +122,18 @@
         {{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
       </woot-button>
     </div>
-    <div class="locale-container">
-      <locale-item-table
-        :locales="locales"
-        :selected-locale-code="currentPortal.meta.default_locale"
-        @change-default-locale="changeDefaultLocale"
-        @delete="deletePortalLocale"
-      />
-    </div>
+    <LocaleItemTable
+      v-if="currentPortal"
+      :locales="locales"
+      :selected-locale-code="currentPortal.meta.default_locale"
+      @change-default-locale="changeDefaultLocale"
+      @delete="deletePortalLocale"
+    />
     <woot-modal
       :show.sync="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
-      <add-locale
+      <AddLocale
         :show="isAddLocaleModalOpen"
         :portal="currentPortal"
         @cancel="closeAddLocaleModal"
@@ -31,126 +141,3 @@
     </woot-modal>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
-import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-export default {
-  components: {
-    LocaleItemTable,
-    AddLocale,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      isAddLocaleModalOpen: false,
-      lastPortalSlug: undefined,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentPortal() {
-      return this.$store.getters['portals/portalBySlug'](
-        this.currentPortalSlug
-      );
-    },
-    locales() {
-      return this.currentPortal.config.allowed_locales;
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-  },
-  mounted() {
-    this.lastPortalSlug = this.currentPortalSlug;
-  },
-  methods: {
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.currentPortal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.currentPortal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    closeAddLocaleModal() {
-      this.isAddLocaleModalOpen = false;
-      this.selectedPortal = {};
-    },
-    addLocale() {
-      this.isAddLocaleModalOpen = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.portal-locales {
-  @apply w-full bg-white dark:bg-slate-900 h-full py-0 pr-0 pl-4;
-  .button-container {
-    @apply flex justify-end;
-  }
-  .locale-container {
-    @apply mt-4;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index e14723476..0222044bc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1">
+  <section class="flex-1">
     <settings-header
       button-route="new"
       :header-title="portalHeaderText"
@@ -10,16 +10,20 @@
       :show-new-button="false"
     />
     <div
-      class="flex flex-row overflow-auto py-4 pl-4 rtl:pl-0 rtl:pr-4 h-full bg-slate-50 dark:bg-slate-800"
+      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
     >
       <woot-wizard
-        class="hidden md:block w-1/4"
+        class="hidden md:block"
         :global-config="globalConfig"
         :items="items"
       />
-      <router-view />
+      <div
+        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
+      >
+        <router-view />
+      </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
index 19fa0efba..60420be90 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -1,3 +1,63 @@
+<script setup>
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, onMounted, computed } from 'vue';
+
+defineComponent({
+  name: 'PortalCustomization',
+});
+
+const getters = useStoreGetters();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const track = useTrack();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return {};
+});
+
+onMounted(() => {
+  store.dispatch('portals/index');
+});
+
+async function updatePortalSettings(portalObj) {
+  const portalSlug = route.params.portalSlug;
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug,
+      ...portalObj,
+    });
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+
+    track(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
+      hasHomePageLink: Boolean(portalObj.homepage_link),
+      hasPageTitle: Boolean(portalObj.page_title),
+      hasHeaderText: Boolean(portalObj.headerText),
+    });
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+    router.push({ name: 'portal_finish' });
+  }
+}
+</script>
+
 <template>
   <portal-settings-customization-form
     v-if="currentPortal"
@@ -9,75 +69,3 @@
     @submit="updatePortalSettings"
   />
 </template>
-
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { mapGetters } from 'vuex';
-
-import { getRandomColor } from 'dashboard/helper/labelColor';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    PortalSettingsCustomizationForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      color: '#000',
-      pageTitle: '',
-      headerText: '',
-      homePageLink: '',
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-      portals: 'portals/allPortals',
-    }),
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
-    },
-  },
-  mounted() {
-    this.fetchPortals();
-    this.color = getRandomColor();
-  },
-  methods: {
-    fetchPortals() {
-      this.$store.dispatch('portals/index');
-    },
-    async updatePortalSettings(portalObj) {
-      const portalSlug = this.$route.params.portalSlug;
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug,
-          ...portalObj,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-
-        this.$track(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
-          hasHomePageLink: Boolean(portalObj.homepage_link),
-          hasPageTitle: Boolean(portalObj.page_title),
-          hasHeaderText: Boolean(portalObj.headerText),
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-        this.$router.push({
-          name: 'portal_finish',
-        });
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
index 690f058a4..3a3e77142 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
     <empty-state
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
@@ -10,7 +10,7 @@
     >
       <div class="w-full text-center">
         <router-link
-          class="button success nice rounded"
+          class="rounded button success nice"
           :to="{
             name: 'list_all_portals',
           }"
@@ -22,18 +22,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-export default {
-  components: {
-    EmptyState,
-  },
-  methods: {
-    changeRoute() {
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-  },
-};
+import { defineComponent } from 'vue';
+defineComponent({
+  name: 'PortalSettingsFinish',
+});
 </script>