feat: Adds pages to edit portals (#5373)

* feat: Adds pages to edit portals * Update app/javascript/dashboard/i18n/locale/en/helpCenter.json * Update app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> * Review fixes * Adds translations * Fixes broken tests * Update app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue * Update app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2026-01-08 21:41:35 +00:00 · 2022-09-02 10:22:15 +05:30
parent 504d339dd7
commit a1663e4e49
14 changed files with 719 additions and 308 deletions
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -262,12 +262,6 @@ export default {
    closePortalPopover() {
      this.showPortalPopover = false;
    },
-    openPortalPage() {
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-      this.showPortalPopover = false;
-    },
    onClickOpenAddCatogoryModal() {
      this.showAddCategoryModal = true;
    },
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -10,7 +10,7 @@
          color-scheme="secondary"
          icon="settings"
          size="small"
-          @click="openPortalArticles"
+          @click="openPortalPage"
        >
          {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
        </woot-button>
@@ -22,10 +22,10 @@
    <div>
      <portal-switch
        v-for="portal in portals"
-        :key="portal.id"
+        :key="portal.slug"
        :portal="portal"
        :active="portal.slug === activePortalSlug"
-        @open-portal-page="openPortalPage"
+        @open-portal-page="onPortalSelect"
      />
    </div>
    <footer>
@@ -62,16 +62,13 @@ export default {
    closePortalPopover() {
      this.$emit('close-popover');
    },
-    openPortalArticles({ slug, locale }) {
+    onPortalSelect() {
      this.$emit('close-popover');
-      const portal = this.portals.find(p => p.slug === slug);
-      this.$store.dispatch('portals/setPortalId', portal.id);
+    },
+    openPortalPage() {
+      this.closePortalPopover();
      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: slug,
-          locale: locale,
-        },
+        name: 'list_all_portals',
      });
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="wizard-body columns content-box small-9">
+    <div class="medium-12 columns">
+      <h3 class="block-title">
+        {{
+          $t(
+            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
+          )
+        }}
+      </h3>
+    </div>
+    <div class="portal-form">
+      <div class="medium-8 columns">
+        <div class="form-item">
+          <label>
+            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL') }}
+          </label>
+          <div class="logo-container">
+            <thumbnail :username="name" size="56" variant="square" />
+            <woot-button
+              v-if="false"
+              class="upload-button"
+              variant="smooth"
+              color-scheme="secondary"
+              icon="upload"
+              size="small"
+            >
+              {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
+            </woot-button>
+          </div>
+          <p class="logo-help--text">
+            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
+          </p>
+        </div>
+        <div class="form-item">
+          <woot-input
+            v-model.trim="name"
+            :class="{ error: $v.slug.$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')"
+            @input="onNameChange"
+          />
+        </div>
+        <div class="form-item">
+          <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="$t('HELP_CENTER.PORTAL.ADD.SLUG.HELP_TEXT')"
+            @input="$v.slug.$touch"
+          />
+        </div>
+        <div class="form-item">
+          <woot-input
+            v-model.trim="domain"
+            :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
+            :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
+            :help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex-end">
+      <woot-button
+        :is-loading="isSubmitting"
+        :is-disabled="$v.$invalid"
+        @click="onSubmitClick"
+      >
+        {{ submitButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import thumbnail from 'dashboard/components/widgets/Thumbnail';
+import { required, minLength } from 'vuelidate/lib/validators';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+export default {
+  components: {
+    thumbnail,
+  },
+  props: {
+    portal: {
+      type: Object,
+      default: () => {},
+    },
+    isSubmitting: {
+      type: Boolean,
+      default: false,
+    },
+    submitButtonText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      name: '',
+      slug: '',
+      domain: '',
+      alertMessage: '',
+    };
+  },
+  validations: {
+    name: {
+      required,
+      minLength: minLength(2),
+    },
+    slug: {
+      required,
+    },
+  },
+  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() {
+      return this.$v.domain.$error;
+    },
+  },
+  mounted() {
+    const portal = this.portal || {};
+    this.name = portal.name || '';
+    this.slug = portal.slug || '';
+    this.domain = portal.custom_domain || '';
+    this.alertMessage = '';
+  },
+  methods: {
+    onNameChange() {
+      this.slug = convertToCategorySlug(this.name);
+    },
+    onSubmitClick() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      const portal = {
+        name: this.name,
+        slug: this.slug,
+        custom_domain: this.domain,
+      };
+      this.$emit('submit', portal);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wizard-body {
+  padding-top: var(--space-slab);
+  border: 1px solid transparent;
+}
+
+.portal-form {
+  margin: var(--space-normal) 0;
+  border-bottom: 1px solid var(--s-25);
+
+  .form-item {
+    margin-bottom: var(--space-normal);
+
+    .logo-container {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      .upload-button {
+        margin-left: var(--space-slab);
+      }
+    }
+    .logo-help--text {
+      margin-top: var(--space-smaller);
+      margin-bottom: 0;
+      font-size: var(--font-size-mini);
+      color: var(--s-600);
+      font-style: normal;
+    }
+  }
+}
+::v-deep {
+  input {
+    margin-bottom: var(--space-smaller);
+  }
+  .help-text {
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="wizard-body height-auto small-9 columns">
+    <div class="medium-12 columns">
+      <h3 class="block-title">
+        {{
+          $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
+        }}
+      </h3>
+    </div>
+    <div class="portal-form">
+      <div class="medium-8 columns">
+        <div class="form-item">
+          <label>
+            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
+          </label>
+          <woot-color-picker v-model="color" />
+          <p class="color-help--text">
+            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
+          </p>
+        </div>
+        <div class="form-item">
+          <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="form-item">
+          <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="form-item">
+          <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="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex-end">
+      <woot-button :is-loading="isSubmitting" @click="onSubmitClick">
+        {{
+          $t(
+            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.UPDATE_PORTAL_BUTTON'
+          )
+        }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRandomColor } from 'dashboard/helper/labelColor';
+
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {},
+  mixins: [alertMixin],
+  props: {
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+    isSubmitting: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      color: '#000',
+      pageTitle: '',
+      headerText: '',
+      homePageLink: '',
+      alertMessage: '',
+    };
+  },
+  computed: {},
+  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() {
+      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,
+        config: {
+          // TODO: add support for choosing locale
+          allowed_locales: ['en'],
+        },
+      };
+      this.$emit('submit', portal);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wizard-body {
+  padding-top: var(--space-slab);
+  border: 1px solid transparent;
+}
+.portal-form {
+  margin: var(--space-normal) 0;
+  border-bottom: 1px solid var(--s-25);
+
+  .form-item {
+    margin-bottom: var(--space-normal);
+    .color-help--text {
+      margin-top: var(--space-smaller);
+      margin-bottom: 0;
+      font-size: var(--font-size-mini);
+      color: var(--s-600);
+      font-style: normal;
+    }
+  }
+}
+::v-deep {
+  input {
+    margin-bottom: var(--space-smaller);
+  }
+  .help-text {
+    margin-bottom: 0;
+  }
+  .colorpicker--selected {
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -27,7 +27,8 @@
                type="radio"
                name="locale"
                :value="locale.code"
-                @click="onClick(locale.code, portal)"
+                :checked="isLocaleActive(locale.code)"
+                @click="() => onClick(locale.code, portal)"
              />
              <div>
                <p>{{ localeName(locale.code) }}</p>
@@ -84,7 +85,20 @@ export default {
  },
  methods: {
    onClick(code, portal) {
-      this.$emit('open-portal-page', { slug: portal.slug, locale: code });
+      this.$router.push({
+        name: 'list_all_locale_articles',
+        params: {
+          portalSlug: portal.slug,
+          locale: code,
+        },
+      });
+      this.$emit('open-portal-page');
+    },
+    isLocaleActive(code) {
+      const isPortalActive = this.portalSlug === this.portal.slug;
+      const isLocaleActive = this.portal?.meta?.default_locale === code;
+
+      return isPortalActive && isLocaleActive;
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -5,11 +5,15 @@ const ListAllPortals = () => import('./pages/portals/ListAllPortals');
 const NewPortal = () => import('./pages/portals/NewPortal');

 const EditPortal = () => import('./pages/portals/EditPortal');
+const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
+const EditPortalCustomization = () =>
+  import('./pages/portals/EditPortalCustomization');
 const ShowPortal = () => import('./pages/portals/ShowPortal');
 const PortalDetails = () => import('./pages/portals/PortalDetails');
 const PortalCustomization = () => import('./pages/portals/PortalCustomization');
 const PortalSettingsFinish = () =>
  import('./pages/portals/PortalSettingsFinish');
+
 const ListAllCategories = () => import('./pages/categories/ListAllCategories');
 const NewCategory = () => import('./pages/categories/NewCategory');
 const EditCategory = () => import('./pages/categories/EditCategory');
@@ -37,13 +41,13 @@ const portalRoutes = [
        roles: ['administrator'],
      },
      {
-        path: ':portal_slug/customization',
+        path: ':portalSlug/customization',
        name: 'portal_customization',
        component: PortalCustomization,
        roles: ['administrator'],
      },
      {
-        path: ':portal_slug/finish',
+        path: ':portalSlug/finish',
        name: 'portal_finish',
        component: PortalSettingsFinish,
        roles: ['administrator'],
@@ -52,15 +56,28 @@ const portalRoutes = [
  },
  {
    path: getPortalRoute(':portalSlug'),
-    name: 'portal_slug',
+    name: 'portalSlug',
    roles: ['administrator', 'agent'],
    component: ShowPortal,
  },
  {
    path: getPortalRoute(':portalSlug/edit'),
-    name: 'edit_portal',
    roles: ['administrator', 'agent'],
    component: EditPortal,
+    children: [
+      {
+        path: '',
+        name: 'edit_portal_information',
+        component: EditPortalBasic,
+        roles: ['administrator'],
+      },
+      {
+        path: 'customizations',
+        name: 'edit_portal_customization',
+        component: EditPortalCustomization,
+        roles: ['administrator'],
+      },
+    ],
  },
 ];

--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -1,3 +1,112 @@
 <template>
-  <div>Component to edit portal</div>
+  <div class="wrapper">
+    <settings-header
+      button-route="new"
+      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div>
+      <setting-intro-banner :header-title="portalName">
+        <woot-tabs
+          :index="activeTabIndex"
+          :border="false"
+          @change="onTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </setting-intro-banner>
+    </div>
+    <div class="row content-box full-height">
+      <router-view />
+    </div>
+  </div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader';
+import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner';
+
+export default {
+  components: {
+    SettingsHeader,
+    SettingIntroBanner,
+  },
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    currentPortal() {
+      const slug = this.$route.params.portalSlug;
+      return this.$store.getters['portals/portalBySlug'](slug);
+    },
+    tabs() {
+      const tabs = [
+        {
+          key: 'edit_portal_information',
+          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.BASIC_SETTINGS.TITLE'),
+        },
+        {
+          key: 'edit_portal_customization',
+          name: this.$t(
+            'HELP_CENTER.PORTAL.EDIT.TABS.CUSTOMIZATION_SETTINGS.TITLE'
+          ),
+        },
+        {
+          key: 'categories',
+          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
+        },
+        {
+          key: 'locales',
+          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.LOCALE_SETTINGS.TITLE'),
+        },
+      ];
+
+      return tabs;
+    },
+    activeTabIndex() {
+      return this.tabs.map(tab => tab.key).indexOf(this.$route.name);
+    },
+    portalName() {
+      return this.currentPortal ? this.currentPortal.name : '';
+    },
+  },
+  methods: {
+    onTabChange(index) {
+      const nextRoute = this.tabs.map(tab => tab.key)[index];
+      const slug = this.$route.params.portalSlug;
+
+      this.$router.push({
+        name: nextRoute,
+        params: { portalSlug: slug },
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.wrapper {
+  flex: 1;
+}
+.container {
+  display: flex;
+  flex: 1;
+}
+.wizard-box {
+  border-right: 1px solid var(--s-25);
+  ::v-deep .item {
+    background: var(--white);
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -0,0 +1,75 @@
+<template>
+  <portal-settings-basic-form
+    v-if="currentPortal"
+    :portal="currentPortal"
+    :is-submitting="uiFlags.isUpdating"
+    :submit-button-text="
+      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
+    "
+    @submit="updatePortalSettings"
+  />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm';
+
+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);
+      }
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -0,0 +1,59 @@
+<template>
+  <portal-settings-customization-form
+    v-if="currentPortal"
+    :portal="currentPortal"
+    :is-submitting="uiFlags.isUpdating"
+    :submit-button-text="
+      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
+    "
+    @submit="updatePortalSettings"
+  />
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm';
+
+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(portal) {
+      const portalSlug = this.$route.params.portalSlug;
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalObj: portal,
+          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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -1,74 +1,27 @@
 <template>
-  <div class="wizard-body height-auto small-9 columns">
-    <div class="medium-12 columns">
-      <h3 class="block-title">
-        {{
-          $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
-        }}
-      </h3>
-    </div>
-    <div class="portal-form">
-      <div class="medium-8 columns">
-        <div class="form-item">
-          <label>
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
-          </label>
-          <woot-color-picker v-model="color" />
-          <p class="color-help--text">
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="form-item">
-          <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="form-item">
-          <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="form-item">
-          <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="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex-end">
-      <woot-button
-        :is-loading="uiFlags.isUpdating"
-        @click="updatePortalSettings"
-      >
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.UPDATE_PORTAL_BUTTON'
-          )
-        }}
-      </woot-button>
-    </div>
-  </div>
+  <portal-settings-customization-form
+    v-if="currentPortal"
+    :portal="currentPortal"
+    :is-submitting="uiFlags.isUpdating"
+    :submit-button-text="
+      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
+    "
+    @submit="updatePortalSettings"
+  />
 </template>

 <script>
+import alertMixin from 'shared/mixins/alertMixin';
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm';
+
 import { mapGetters } from 'vuex';

 import { getRandomColor } from 'dashboard/helper/labelColor';

-import alertMixin from 'shared/mixins/alertMixin';
 export default {
-  components: {},
+  components: {
+    PortalSettingsCustomizationForm,
+  },
  mixins: [alertMixin],
  data() {
    return {
@@ -84,18 +37,9 @@ export default {
      uiFlags: 'portals/uiFlagsIn',
      portals: 'portals/allPortals',
    }),
-    createdPortalSlug() {
-      const {
-        params: { portalSlug: slug },
-      } = this.$route;
-      return slug;
-    },
-    createdPortalId() {
-      const { portals } = this;
-      const createdPortal = portals.find(
-        portal => portal.slug === this.createdPortalSlug
-      );
-      return createdPortal ? createdPortal.id : null;
+    currentPortal() {
+      const slug = this.$route.params.portalSlug;
+      return this.$store.getters['portals/portalBySlug'](slug);
    },
  },
  mounted() {
@@ -106,25 +50,23 @@ export default {
    fetchPortals() {
      this.$store.dispatch('portals/index');
    },
-    async updatePortalSettings() {
+    async updatePortalSettings(portal) {
+      const portalSlug = this.$route.params.portalSlug;
+
      try {
        await this.$store.dispatch('portals/update', {
-          id: this.createdPortalId,
-          slug: this.createdPortalSlug,
-          color: this.color,
-          page_title: this.pageTitle,
-          header_text: this.headerText,
-          homepage_link: this.homePageLink,
-          config: {
-            // TODO: add support for choosing locale
-            allowed_locales: ['en'],
-          },
+          portalSlug,
+          portalObj: portal,
        });
+        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);
        this.$router.push({
          name: 'portal_finish',
        });
@@ -133,35 +75,3 @@ export default {
  },
 };
 </script>
-<style lang="scss" scoped>
-.wizard-body {
-  padding-top: var(--space-slab);
-  border: 1px solid transparent;
-}
-.portal-form {
-  margin: var(--space-normal) 0;
-  border-bottom: 1px solid var(--s-25);
-
-  .form-item {
-    margin-bottom: var(--space-normal);
-    .color-help--text {
-      margin-top: var(--space-smaller);
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-      color: var(--s-600);
-      font-style: normal;
-    }
-  }
-}
-::v-deep {
-  input {
-    margin-bottom: var(--space-smaller);
-  }
-  .help-text {
-    margin-bottom: 0;
-  }
-  .colorpicker--selected {
-    margin-bottom: 0;
-  }
-}
-</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
@@ -1,94 +1,24 @@
 <template>
-  <div class="wizard-body columns content-box small-9">
-    <div class="medium-12 columns">
-      <h3 class="block-title">
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
-          )
-        }}
-      </h3>
-    </div>
-    <div class="portal-form">
-      <div class="medium-8 columns">
-        <div class="form-item">
-          <label>
-            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL') }}
-          </label>
-          <div class="logo-container">
-            <thumbnail :username="name" size="56" variant="square" />
-            <!-- Hidden since this is in V2
-            <woot-button
-              class="upload-button"
-              variant="smooth"
-              color-scheme="secondary"
-              icon="upload"
-              size="small"
-            >
-              {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
-            </woot-button> -->
-          </div>
-          <p class="logo-help--text">
-            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="form-item">
-          <woot-input
-            v-model.trim="name"
-            :class="{ error: $v.slug.$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')"
-            @input="onNameChange"
-          />
-        </div>
-        <div class="form-item">
-          <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="$t('HELP_CENTER.PORTAL.ADD.SLUG.HELP_TEXT')"
-            @input="$v.slug.$touch"
-          />
-        </div>
-        <div class="form-item">
-          <woot-input
-            v-model.trim="domain"
-            :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex-end">
-      <woot-button
-        :is-loading="uiFlags.isCreating"
-        :is-disabled="$v.$invalid"
-        @click="updateBasicSettings"
-      >
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
-          )
-        }}
-      </woot-button>
-    </div>
-  </div>
+  <PortalSettingsBasicForm
+    :is-submitting="uiFlags.isCreating"
+    :submit-button-text="
+      $t(
+        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
+      )
+    "
+    @submit="updateBasicSettings"
+  />
 </template>

 <script>
 import { mapGetters } from 'vuex';
-import thumbnail from 'dashboard/components/widgets/Thumbnail';
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm';
+
 export default {
  components: {
-    thumbnail,
+    PortalSettingsBasicForm,
  },
  mixins: [alertMixin],
  data() {
@@ -99,103 +29,34 @@ export default {
      alertMessage: '',
    };
  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-  },
+
  computed: {
    ...mapGetters({
      uiFlags: 'portals/uiFlagsIn',
    }),
-    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() {
-      return this.$v.domain.$error;
-    },
  },

  methods: {
-    onNameChange() {
-      this.slug = convertToCategorySlug(this.name);
-    },
-    async updateBasicSettings() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
+    async updateBasicSettings(portal) {
      try {
        await this.$store.dispatch('portals/create', {
-          portal: {
-            name: this.name,
-            slug: this.slug,
-            custom_domain: this.domain,
-          },
+          portal,
        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
+        );
      } catch (error) {
        this.alertMessage =
          error?.message ||
          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
      } finally {
+        this.showAlert(this.alertMessage);
        this.$router.push({
          name: 'portal_customization',
-          params: { portal_slug: this.slug },
+          params: { portalSlug: portal.slug },
        });
      }
    },
  },
 };
 </script>
-<style lang="scss" scoped>
-.wizard-body {
-  padding-top: var(--space-slab);
-  border: 1px solid transparent;
-}
-
-.portal-form {
-  margin: var(--space-normal) 0;
-  border-bottom: 1px solid var(--s-25);
-
-  .form-item {
-    margin-bottom: var(--space-normal);
-
-    .logo-container {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      .upload-button {
-        margin-left: var(--space-slab);
-      }
-    }
-    .logo-help--text {
-      margin-top: var(--space-smaller);
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-      color: var(--s-600);
-      font-style: normal;
-    }
-  }
-}
-::v-deep {
-  input {
-    margin-bottom: var(--space-smaller);
-  }
-  .help-text {
-    margin-bottom: 0;
-  }
-}
-</style>