Portals Popover component (#5052)

* Portal Switch component

* Review fixes

* Update storybook props

* Review changes

* Popover component

* Review changes and moved the files to helpcenter folder

app/javascript/dashboard/components/helpCenter/Portal/Switch/Switch.stories.js

@@ -1,68 +0,0 @@
-import PortalSwitch from './Index.vue';
-
-export default {
-  title: 'Components/Help Center/Portal Switch',
-  component: PortalSwitch,
-  argTypes: {
-    active: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalSwitch },
-  template:
-    '<PortalSwitch v-bind="$props" @click="onClick">{{label}}</PortalSwitch>',
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  active: false,
-  portal: {
-    id: 1,
-    color: null,
-    custom_domain: 'doc',
-    articles_count: 123,
-    header_text: null,
-    homepage_link: null,
-    name: 'Chatwoot Docs',
-    page_title: null,
-    slug: 'first_portal',
-    archived: false,
-    config: {
-      allowed_locales: [
-        {
-          code: 'en',
-          name: 'English',
-          articles_count: 123,
-        },
-        {
-          code: 'fr',
-          name: 'Français',
-          articles_count: 123,
-        },
-        {
-          code: 'de',
-          name: 'Deutsch',
-          articles_count: 32,
-        },
-        {
-          code: 'es',
-          name: 'Español',
-          articles_count: 12,
-        },
-        {
-          code: 'it',
-          name: 'Italiano',
-          articles_count: 8,
-        },
-      ],
-    },
-  },
-};

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -4,18 +4,7 @@
       "FILTER": "Filter by",
       "SORT": "Sort by",
       "SETTINGS_BUTTON": "Settings",
-      "NEW_BUTTON": "New Article",
+      "NEW_BUTTON": "New Article"
-      "DROPDOWN_OPTIONS": {
-        "PUBLISHED": "Published",
-        "DRAFT": "Draft",
-        "ARCHIVED": "Archived"
-      },
-      "TITLES": {
-        "ALL_ARTICLES": "All Articles",
-        "MINE": "My Articles",
-        "DRAFT": "Draft Articles",
-        "ARCHIVED": "Archived Articles"
-      }
     },
     "EDIT_HEADER": {
       "PUBLISH_BUTTON": "Publish",
@@ -30,60 +19,19 @@
       "ACTIVE_BADGE": "active",
       "CHOOSE_LOCALE_LABEL": "Choose a locale",
       "ARTICLES_LABEL": "articles",
-      "ADD_NEW_LOCALE": "Add a new locale"
+      "ADD_NEW_LOCALE": "Add a new locale",
+      "POPOVER": {
+        "TITLE": "Portals",
+        "NEW_PORTAL_LINK": "New Portal",
+        "SUBTITLE": "You have multiple portals and can have different locales for each portal.",
+        "CANCEL_BUTTON_LABEL": "Cancel",
+        "CHOOSE_LOCALE_BUTTON": "Choose Locale"
+      }
+    }
   },
   "TABLE": {
-      "LOADING_MESSAGE": "Loading articles...",
-      "404": "No articles matches your search 🔍",
-      "NO_ARTICLES": "There are no available articles",
-      "HEADERS": {
-        "TITLE": "Title",
-        "CATEGORY": "Category",
-        "READ_COUNT": "Read count",
-        "STATUS": "Status",
-        "LAST_EDITED": "Last edited"
-      },
     "COLUMNS": {
       "BY": "by"
     }
-    },
-    "EDIT_ARTICLE": {
-      "TITLE_PLACEHOLDER": "Article title goes here",
-      "CONTENT_PLACEHOLDER": "Write your article here"
-    },
-    "SIDEBAR": {
-      "SEARCH": {
-        "PLACEHOLDER": "Search for articles"
-      }
-    },
-    "CATEGORY": {
-      "ADD": {
-        "TITLE": "Create a category",
-        "SUB_TITLE": "The category will be used in the public facing portal to categorize articles.",
-        "PORTAL": "Portal",
-        "LOCALE": "Locale",
-        "NAME": {
-          "LABEL": "Name",
-          "PLACEHOLDER": "Category name",
-          "HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
-          "ERROR": "Name is required"
-        },
-        "SLUG": {
-          "LABEL": "Slug",
-          "PLACEHOLDER": "Category slug for urls",
-          "HELP_TEXT": "app.chatwoot.com/portal/my-portal/en-US/categories/my-slug",
-          "ERROR": "Slug is required"
-        },
-        "DESCRIPTION": {
-          "LABEL": "Description",
-          "PLACEHOLDER": "Give a short description about the category.",
-          "ERROR": "Description is required"
-        },
-        "BUTTONS": {
-          "CREATE": "Create category",
-          "CANCEL": "Cancel"
-        }
-      }
-    }
   }
 }

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="portal-popover__container">
+    <header>
+      <div class="actions">
+        <h2 class="block-title">
+          {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
+        </h2>
+        <router-link to="#" class="new-popover-link">
+          <fluent-icon icon="add" size="16" />
+          <span>
+            {{ $t('HELP_CENTER.PORTAL.POPOVER.NEW_PORTAL_LINK') }}
+          </span>
+        </router-link>
+      </div>
+      <p class="subtitle">
+        {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
+      </p>
+    </header>
+    <div>
+      <portal-switch
+        v-for="portal in portals"
+        :key="portal.id"
+        :portal="portal"
+      />
+    </div>
+    <footer>
+      <woot-button variant="link">
+        {{ $t('HELP_CENTER.PORTAL.POPOVER.CANCEL_BUTTON_LABEL') }}
+      </woot-button>
+      <woot-button>
+        {{ $t('HELP_CENTER.PORTAL.POPOVER.CHOOSE_LOCALE_BUTTON') }}
+      </woot-button>
+    </footer>
+  </div>
+</template>
+
+<script>
+import PortalSwitch from './PortalSwitch.vue';
+export default {
+  components: {
+    PortalSwitch,
+  },
+  props: {
+    portals: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.portal-popover__container {
+  padding: var(--space-normal);
+  background-color: var(--white);
+  border-radius: var(--border-radius-normal);
+  box-shadow: var(--shadow-large);
+  max-width: 48rem;
+
+  header {
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--space-smaller);
+
+      .new-popover-link {
+        display: flex;
+        align-items: center;
+        padding: var(--space-half) var(--space-one);
+        background-color: var(--s-25);
+        font-size: var(--font-size-mini);
+        color: var(--s-500);
+        margin-left: var(--space-small);
+        border-radius: var(--border-radius-normal);
+        span {
+          margin-left: var(--space-small);
+        }
+      }
+
+      .subtitle {
+        font-size: var(--font-size-mini);
+        color: var(--s-600);
+      }
+    }
+  }
+
+  footer {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: var(--space-small);
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

@@ -4,7 +4,7 @@
     <div class="actions-container">
       <header>
         <div>
-          <h2 class="portal-title block-title">{{ portal.name }}</h2>
+          <h2 class="portal-title">{{ portal.name }}</h2>
           <p class="portal-count">
             {{ portal.articles_count }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
@@ -15,14 +15,11 @@
         }}</span>
       </header>
       <div class="portal-locales">
-        <h2 class="locale-title sub-block-title">
+        <h2 class="locale-title">
           {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
         </h2>
         <ul>
-          <li
+          <li v-for="locale in portal.locales" :key="locale.code">
-            v-for="locale in portal.config.allowed_locales"
-            :key="locale.code"
-          >
             <label :for="`locale-${locale.code}`" class="locale-item">
               <input
                 :id="`locale-${locale.code}`"
@@ -72,7 +69,7 @@ export default {
     };
   },
   mounted() {
-    this.selectedLocale = this.portal.config.allowed_locales[0].code;
+    this.selectedLocale = this.portal.locales[0].code;
   },
 };
 </script>
@@ -92,7 +89,7 @@ export default {
   }
 
   .actions-container {
-    margin-left: var(--space-small);
+    margin-left: var(--space-one);
     flex-grow: 1;
 
     header {
@@ -109,6 +106,8 @@ export default {
       }
 
       .portal-title {
+        color: var(--s-900);
+        font-size: var(--font-size-medium);
         font-weight: var(--font-weight-bold);
         margin-bottom: 0;
       }
@@ -123,6 +122,7 @@ export default {
     .portal-locales {
       .locale-title {
         color: var(--s-600);
+        font-size: var(--font-size-default);
         font-weight: var(--font-weight-medium);
       }
 

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js

@@ -0,0 +1,80 @@
+import PortalPopover from '../PortalPopover.vue';
+
+export default {
+  title: 'Components/Help Center/Portal Popover',
+  component: PortalPopover,
+  argTypes: {
+    active: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PortalPopover },
+  template:
+    '<PortalPopover v-bind="$props" @click="onClick">{{label}}</PortalPopover>',
+});
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  portals: [
+    {
+      name: 'Chatwoot Help Center',
+      articles_count: 124,
+      locales: [
+        {
+          name: 'English',
+          code: 'en',
+          articles_count: 12,
+        },
+        {
+          name: 'Español',
+          code: 'es',
+          articles_count: 42,
+        },
+        {
+          name: 'French',
+          code: 'fr',
+          articles_count: 29,
+        },
+        {
+          name: 'Italian',
+          code: 'it',
+          articles_count: 4,
+        },
+        {
+          name: 'German',
+          code: 'de',
+          articles_count: 66,
+        },
+      ],
+    },
+    {
+      name: 'Chatwoot Docs',
+      articles_count: 16,
+      locales: [
+        {
+          name: 'English',
+          code: 'en',
+          articles_count: 12,
+        },
+        {
+          name: 'Japanese',
+          code: 'jp',
+          articles_count: 4,
+        },
+        {
+          name: 'Mandarin',
+          code: 'CH',
+          articles_count: 6,
+        },
+      ],
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalSwitch.stories.js

@@ -0,0 +1,58 @@
+import PortalSwitch from '../PortalSwitch.vue';
+
+export default {
+  title: 'Components/Help Center/Portal Switch',
+  component: PortalSwitch,
+  argTypes: {
+    active: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PortalSwitch },
+  template:
+    '<PortalSwitch v-bind="$props" @click="onClick">{{label}}</PortalSwitch>',
+});
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  active: false,
+  portal: {
+    name: 'Chatwoot Help Center',
+    articles_count: 124,
+    locales: [
+      {
+        name: 'English',
+        code: 'en',
+        articles_count: 12,
+      },
+      {
+        name: 'Español',
+        code: 'es',
+        articles_count: 42,
+      },
+      {
+        name: 'French',
+        code: 'fr',
+        articles_count: 29,
+      },
+      {
+        name: 'Italian',
+        code: 'it',
+        articles_count: 4,
+      },
+      {
+        name: 'German',
+        code: 'de',
+        articles_count: 66,
+      },
+    ],
+  },
+};