From a1663e4e49918c1c9cf77fb344d66462214052d3 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 2 Sep 2022 10:22:15 +0530
Subject: [PATCH] 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>
---
 .../components/widgets/SettingIntroBanner.vue |   4 +-
 .../dashboard/i18n/locale/en/helpCenter.json  |  25 ++-
 .../components/HelpCenterLayout.vue           |   6 -
 .../helpcenter/components/PortalPopover.vue   |  19 +-
 .../components/PortalSettingsBasicForm.vue    | 201 ++++++++++++++++++
 .../PortalSettingsCustomizationForm.vue       | 153 +++++++++++++
 .../helpcenter/components/PortalSwitch.vue    |  18 +-
 .../dashboard/helpcenter/helpcenter.routes.js |  25 ++-
 .../helpcenter/pages/portals/EditPortal.vue   | 111 +++++++++-
 .../pages/portals/EditPortalBasic.vue         |  75 +++++++
 .../pages/portals/EditPortalCustomization.vue |  59 +++++
 .../pages/portals/PortalCustomization.vue     | 144 +++----------
 .../pages/portals/PortalDetails.vue           | 181 ++--------------
 .../modules/helpCenterPortals/actions.js      |   6 +-
 14 files changed, 719 insertions(+), 308 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue

diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index a5e1cd871..0ebee66b8 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -26,8 +26,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .page-top-banner {
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-background-light);
+  border-bottom: 1px solid var(--color-border-light);
+  background: var(--s-25);
   padding: var(--space-normal) var(--space-large) 0;
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index e717d36d8..955122bdb 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -122,9 +122,28 @@
           }
         }
       },
+      "EDIT": {
+        "HEADER_TEXT": "Edit portal",
+        "TABS": {
+          "BASIC_SETTINGS": {
+            "TITLE": "Basic information"
+          },
+          "CUSTOMIZATION_SETTINGS": {
+            "TITLE": "Portal customization"
+          },
+          "CATEGORY_SETTINGS": {
+            "TITLE": "Categories"
+          },
+          "LOCALE_SETTINGS": {
+            "TITLE": "Locales"
+          }
+        },
+        "EDIT_BASIC_INFO": {
+          "BUTTON_TEXT": "Update basic settings"
+        }
+      },
       "ADD": {
-        "CREATE_FLOW": [
-          {
+        "CREATE_FLOW": [{
             "title": "Help center information",
             "route": "new_portal_information",
             "body": "Basic information about portal",
@@ -207,7 +226,9 @@
           "ERROR": "Portal header text is required"
         },
         "API": {
+          "SUCCESS_MESSAGE_FOR_BASIC": "Portal created successfully.",
           "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
+          "SUCCESS_MESSAGE_FOR_UPDATE": "Portal updated successfully.",
           "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
         }
       },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index ffcd36ec0..4f9b30d97 100644
--- 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;
     },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index c8a4c785e..5be63aa31 100644
--- 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',
       });
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
new file mode 100644
index 000000000..fc5d5d472
--- /dev/null
+++ 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>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
new file mode 100644
index 000000000..7fdb1d2e6
--- /dev/null
+++ 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>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
index 5b1e7f7fe..42da70d72 100644
--- 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;
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 015bcd943..8def6be6b 100644
--- 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'],
+      },
+    ],
   },
 ];
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index f05c08381..dd5b893e0 100644
--- 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>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
new file mode 100644
index 000000000..5c5f347af
--- /dev/null
+++ 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>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
new file mode 100644
index 000000000..58709b933
--- /dev/null
+++ 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>
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 b838e3348..1443b61a9 100644
--- 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>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
index d58158d5e..78876f630 100644
--- 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>
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
index b09371af1..35b72a430 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@@ -1,4 +1,4 @@
-import PortalAPI from 'dashboard/api/helpCenter/portals.js';
+import PortalAPI from 'dashboard/api/helpCenter/portals';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
 import { types } from './mutations';
 const portalAPIs = new PortalAPI();
@@ -36,7 +36,7 @@ export const actions = {
     }
   },
 
-  update: async ({ commit }, { portalSlug, ...portalObj }) => {
+  update: async ({ commit }, { portalSlug, portalObj }) => {
     commit(types.SET_HELP_PORTAL_UI_FLAG, {
       uiFlags: { isUpdating: true },
       portalSlug,
@@ -44,7 +44,7 @@ export const actions = {
     try {
       const { data } = await portalAPIs.updatePortal({
         portalSlug,
-        portalObj,
+        params: portalObj,
       });
       commit(types.UPDATE_PORTAL_ENTRY, data);
     } catch (error) {