feat: Create portal UI improvements (#5261)

2022-08-18 17:11:19 +05:30 · 2022-08-18 17:11:19 +05:30 · a788e7ac7a
commit a788e7ac7a
parent ea918d9c5a
20 changed files with 629 additions and 57 deletions
--- a/app/javascript/dashboard/api/helpCenter/portals.js
+++ b/app/javascript/dashboard/api/helpCenter/portals.js
@ -1,9 +1,14 @@
+/* global axios */
 import ApiClient from '../ApiClient';

 class PortalsAPI extends ApiClient {
  constructor() {
    super('portals', { accountScoped: true });
  }
+
+  updatePortal({ portalSlug, params }) {
+    return axios.patch(`${this.url}/${portalSlug}`, params);
+  }
 }

 export default PortalsAPI;
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@ -42,7 +42,6 @@
  overflow: hidden;
 }

-
 .border-right {
  border-right: 1px solid var(--color-border);
 }
@ -66,3 +65,13 @@
  display: flex;
  justify-content: space-between;
 }
+
+.flex-end {
+  display: flex;
+  justify-content: end;
+}
+
+.flex-align-center {
+  align-items: center;
+  display: flex;
+}
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@ -91,10 +91,11 @@
      font-size: $font-size-default;
      line-height: 1;
      padding-left: $space-medium;
+    }

-      .completed {
-        color: $success-color;
-      }
+    .completed {
+      color: $success-color;
+      margin-left: $space-smaller;
    }

    p {
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@ -2,7 +2,7 @@
  <transition-group
    name="wizard-items"
    tag="div"
-    class="wizard-box flex-child-shrink"
+    class="wizard-box"
    :class="classObject"
  >
    <div
@ -11,12 +11,14 @@
      class="item"
      :class="{ active: isActive(item), over: isOver(item) }"
    >
-      <h3>
-        {{ item.title }}
+      <div class="flex-align-center">
+        <h3 class="text-truncate">
+          {{ item.title }}
+        </h3>
        <span v-if="isOver(item)" class="completed">
          <fluent-icon icon="checkmark" />
        </span>
-      </h3>
+      </div>
      <span class="step">
        {{ items.indexOf(item) + 1 }}
      </span>
--- a/app/javascript/dashboard/helper/labelColor.js
+++ b/app/javascript/dashboard/helper/labelColor.js
@ -0,0 +1,8 @@
+export const getRandomColor = () => {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i += 1) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@ -112,20 +112,55 @@
        }
      },
      "ADD": {
-        "TITLE": "Create a portal",
-        "SUB_TITLE": "A Help Center in Chatwoot is known as a portal. You can have multiple portals and can have different locales for each portal.",
+        "CREATE_FLOW": [
+          {
+            "title": "Help center information",
+            "route": "new_portal_information",
+            "body": "Basic information about portal",
+            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+          },
+          {
+            "title": "Help center customization",
+            "route": "portal_customization",
+            "body": "Customize portal",
+            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+          },
+          {
+            "title": "Voila! 🎉",
+            "route": "portal_finish",
+            "body": "You're all set!",
+            "FINISH": "Finish"
+          }
+        ],
+        "CREATE_FLOW_PAGE": {
+          "BACK_BUTTON": "Back",
+          "BASIC_SETTINGS_PAGE": {
+            "HEADER": "Create Portal",
+            "TITLE": "Help center information",
+            "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings"
+          },
+          "CUSTOMIZATION_PAGE": {
+            "HEADER": "Portal customisation",
+            "TITLE": "Help center customization",
+            "UPDATE_PORTAL_BUTTON": "Update portal settings"
+          },
+          "FINISH_PAGE": {
+            "TITLE": "Voila!🎉 You're all set up!",
+            "MESSAGE": "You can now see this created portal on your all portals page.",
+            "FINISH": "Go to all portals page"
+          }
+        },
+        "LOGO": {
+          "LABEL": "Logo",
+          "UPLOAD_BUTTON": "Upload logo",
+          "HELP_TEXT": "This logo will be displayed on the portal header."
+        },
        "NAME": {
          "LABEL": "Name",
          "PLACEHOLDER": "Portal name",
-          "HELP_TEXT": "The name will be used in the public facing portal internally",
+          "HELP_TEXT": "The name will be used in the public facing portal internally.",
          "ERROR": "Name is required"
        },
-        "PAGE_TITLE": {
-          "LABEL": "Page Title",
-          "PLACEHOLDER": "Portal page title",
-          "HELP_TEXT": "The name will be used in the public facing portal",
-          "ERROR": "Page title is required"
-        },
        "SLUG": {
          "LABEL": "Slug",
          "PLACEHOLDER": "Portal slug for urls",
@ -135,7 +170,7 @@
        "DOMAIN": {
          "LABEL": "Custom Domain",
          "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals",
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals.",
          "ERROR": "Custom Domain is required"
        },
        "HOME_PAGE_LINK": {
@ -144,19 +179,25 @@
          "HELP_TEXT": "The link used to return from the portal to the home page.",
          "ERROR": "Home Page Link is required"
        },
+        "THEME_COLOR": {
+          "LABEL": "Portal theme color",
+          "HELP_TEXT": "This color will show as the theme color for the portal."
+        },
+        "PAGE_TITLE": {
+          "LABEL": "Page Title",
+          "PLACEHOLDER": "Portal page title",
+          "HELP_TEXT": "The page title will be used in the public facing portal.",
+          "ERROR": "Page title is required"
+        },
        "HEADER_TEXT": {
          "LABEL": "Header Text",
          "PLACEHOLDER": "Portal header text",
-          "HELP_TEXT": "Portal header text",
+          "HELP_TEXT": "The Portal header text will be used in the public facing portal.",
          "ERROR": "Portal header text is required"
        },
-        "BUTTONS": {
-          "CREATE": "Create portal",
-          "CANCEL": "Cancel"
-        },
        "API": {
-          "SUCCESS_MESSAGE": "Portal created successfully.",
-          "ERROR_MESSAGE": "Couldn't create the portal. Try again."
+          "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
+          "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
        }
      }
    },
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@ -6,7 +6,7 @@
      @open-key-shortcut-modal="toggleKeyShortcutModal"
      @close-key-shortcut-modal="closeKeyShortcutModal"
    />
-    <div v-if="portals.length" class="margin-right-small">
+    <div v-if="portals.length">
      <help-center-sidebar
        :class="sidebarClassName"
        :header-title="headerTitle"
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@ -77,7 +77,7 @@
                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
                  )
                }}</label>
-                <span class="text-block-title">{{ portal.header_text }}</span>
+                <span class="text-block-title">{{ portal.name }}</span>
              </div>
              <div class="configuration-item">
                <label>{{
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@ -10,6 +10,7 @@
          color-scheme="secondary"
          icon="settings"
          size="small"
+          @click="openPortalPage"
        >
          {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
        </woot-button>
@ -60,16 +61,10 @@ export default {
    closePortalPopover() {
      this.$emit('close-popover');
    },
-    openPortalPage({ slug, locale }) {
+    openPortalPage() {
      this.$emit('close-popover');
-      const portal = this.portals.find(p => p.slug === slug);
-      this.$store.dispatch('portals/setPortalId', portal.id);
      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: slug,
-          locale: locale,
-        },
+        name: 'list_all_portals',
      });
    },
  },
@ -86,6 +81,7 @@ export default {
  border-radius: var(--border-radius-normal);
  box-shadow: var(--shadow-large);
  max-width: 48rem;
+  z-index: var(--z-index-high);

  header {
    .actions {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@ -8,7 +8,9 @@
        variant="square"
      />
      <div class="header-title--wrap">
-        <h4 class="sub-block-title title-view">{{ headerTitle }}</h4>
+        <h4 class="sub-block-title title-view text-truncate">
+          {{ headerTitle }}
+        </h4>
        <span class="sub-title--view">{{ subTitle }}</span>
      </div>
    </div>
@ -89,6 +91,7 @@ export default {
 }

 .title-view {
+  width: var(--space-mega);
  margin-bottom: var(--space-zero);
 }

--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@ -3,18 +3,19 @@ import { getPortalRoute } from './helpers/routeHelper';

 const ListAllPortals = () => import('./pages/portals/ListAllPortals');
 const NewPortal = () => import('./pages/portals/NewPortal');
+
 const EditPortal = () => import('./pages/portals/EditPortal');
 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');
-// const ShowCategory = () => import('./pages/categories/ShowCategory');
 const ListCategoryArticles = () =>
  import('./pages/articles/ListCategoryArticles');
-
 const ListAllArticles = () => import('./pages/articles/ListAllArticles');
-
 const NewArticle = () => import('./pages/articles/NewArticle');
 const EditArticle = () => import('./pages/articles/EditArticle');

@ -27,9 +28,27 @@ const portalRoutes = [
  },
  {
    path: getPortalRoute('new'),
-    name: 'new_portal',
-    roles: ['administrator', 'agent'],
    component: NewPortal,
+    children: [
+      {
+        path: '',
+        name: 'new_portal_information',
+        component: PortalDetails,
+        roles: ['administrator'],
+      },
+      {
+        path: ':portal_slug/customization',
+        name: 'portal_customization',
+        component: PortalCustomization,
+        roles: ['administrator'],
+      },
+      {
+        path: ':portal_slug/finish',
+        name: 'portal_finish',
+        component: PortalSettingsFinish,
+        roles: ['administrator'],
+      },
+    ],
  },
  {
    path: getPortalRoute(':portalSlug'),
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@ -64,7 +64,7 @@ export default {
  },
  methods: {
    addPortal() {
-      this.isAddModalOpen = !this.isAddModalOpen;
+      this.$router.push({ name: 'new_portal_information' });
    },
    closeModal() {
      this.isAddModalOpen = false;
--- 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,79 @@
 <template>
-  <div>
-    Component to create a new portal
+  <div class="wrapper">
+    <settings-header
+      button-route="new"
+      :header-title="portalHeaderText"
+      show-back-button
+      :back-button-label="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
+      "
+      :show-new-button="false"
+    />
+    <div class="row content-box full-height">
+      <woot-wizard
+        class="hide-for-small-only medium-3 columns"
+        :global-config="globalConfig"
+        :items="items"
+      />
+      <router-view />
+    </div>
  </div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader';
+export default {
+  components: {
+    SettingsHeader,
+  },
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    items() {
+      const allItems = this.$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW').map(
+        item => ({
+          ...item,
+          body: this.useInstallationName(
+            item.body,
+            this.globalConfig.installationName
+          ),
+        })
+      );
+
+      return allItems;
+    },
+    portalHeaderText() {
+      if (this.$route.name === 'new_portal_information') {
+        return this.$t(
+          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.HEADER'
+        );
+      }
+      if (this.$route.name === 'portal_customization') {
+        return this.$t(
+          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.HEADER'
+        );
+      }
+      return '';
+    },
+  },
+};
+</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/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@ -0,0 +1,170 @@
+<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>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+import { getRandomColor } from 'dashboard/helper/labelColor';
+
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  components: {},
+  mixins: [alertMixin],
+  data() {
+    return {
+      color: '#000',
+      pageTitle: '',
+      headerText: '',
+      homePageLink: '',
+      alertMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'portals/uiFlagsIn',
+      portals: 'portals/allPortals',
+    }),
+    createdPortalSlug() {
+      const {
+        params: { portal_slug: slug },
+      } = this.$route;
+      return slug;
+    },
+    createdPortalId() {
+      const { portals } = this;
+      const createdPortal = portals.find(
+        portal => portal.slug === this.createdPortalSlug
+      );
+      return createdPortal ? createdPortal.id : null;
+    },
+  },
+  mounted() {
+    this.fetchPortals();
+    this.color = getRandomColor();
+  },
+  methods: {
+    fetchPortals() {
+      this.$store.dispatch('portals/index');
+    },
+    async updatePortalSettings() {
+      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'],
+          },
+        });
+        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.$router.push({
+          name: 'portal_finish',
+        });
+      }
+    },
+  },
+};
+</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
@ -0,0 +1,203 @@
+<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
+              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>
+</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';
+export default {
+  components: {
+    thumbnail,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      name: '',
+      slug: '',
+      domain: '',
+      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;
+      }
+      try {
+        await this.$store.dispatch('portals/create', {
+          portal: {
+            name: this.name,
+            slug: this.slug,
+            custom_domain: this.domain,
+          },
+        });
+        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.$router.push({
+          name: 'portal_customization',
+          params: { portal_slug: this.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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@ -0,0 +1,43 @@
+<template>
+  <div class="wizard-body height-auto small-9 columns">
+    <empty-state
+      :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
+      :message="
+        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
+      "
+    >
+      <div class="medium-12 columns text-center">
+        <router-link
+          class="button success nice"
+          :to="{
+            name: 'list_all_portals',
+          }"
+        >
+          {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
+        </router-link>
+      </div>
+    </empty-state>
+  </div>
+</template>
+
+<script>
+import EmptyState from 'dashboard/components/widgets/EmptyState';
+export default {
+  components: {
+    EmptyState,
+  },
+  methods: {
+    changeRoute() {
+      this.$router.push({
+        name: 'list_all_portals',
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wizard-body {
+  padding-top: var(--space-slab);
+  border: 1px solid transparent;
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@ -61,6 +61,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
 import validations from './validations';
+import { getRandomColor } from 'dashboard/helper/labelColor';

 export default {
  mixins: [alertMixin, validationMixin],
@ -79,20 +80,12 @@ export default {
    }),
  },
  mounted() {
-    this.color = this.getRandomColor();
+    this.color = getRandomColor();
  },
  methods: {
    onClose() {
      this.$emit('close');
    },
-    getRandomColor() {
-      const letters = '0123456789ABCDEF';
-      let color = '#';
-      for (let i = 0; i < 6; i += 1) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    },
    async addLabel() {
      try {
        await this.$store.dispatch('labels/create', {
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@ -49,12 +49,13 @@ export const actions = {

  update: async ({ commit }, params) => {
    const portalId = params.id;
+    const portalSlug = params.slug;
    commit(types.SET_HELP_PORTAL_UI_FLAG, {
      uiFlags: { isUpdating: true },
      portalId,
    });
    try {
-      const { data } = await portalAPIs.update(params);
+      const { data } = await portalAPIs.updatePortal({ portalSlug, params });
      commit(types.UPDATE_PORTAL_ENTRY, data);
    } catch (error) {
      throwErrorMessage(error);
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@ -41,7 +41,7 @@ export const mutations = {
  [types.CLEAR_PORTALS]: $state => {
    Vue.set($state.portals, 'byId', {});
    Vue.set($state.portals, 'allIds', []);
-    Vue.set($state.portals, 'uiFlags', {});
+    Vue.set($state.portals, 'uiFlags.byId', {});
  },

  [types.SET_PORTALS_META]: ($state, data) => {
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
@ -98,7 +98,11 @@ describe('#mutations', () => {
      mutations[types.CLEAR_PORTALS](state);
      expect(state.portals.allIds).toEqual([]);
      expect(state.portals.byId).toEqual({});
-      expect(state.portals.uiFlags).toEqual({});
+      expect(state.portals.uiFlags).toEqual({
+        byId: {
+          '1': { isFetching: true, isUpdating: true, isDeleting: false },
+        },
+      });
    });
  });