feat: Portal Switch component (#5008)

app/javascript/dashboard/components/helpCenter/Portal/Switch/Index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="portal" :class="{ active }">
+    <thumbnail :username="portal.name" variant="square" />
+    <div class="actions-container">
+      <header>
+        <div>
+          <h2 class="portal-title block-title">{{ portal.name }}</h2>
+          <p class="portal-count">
+            {{ portal.articles_count }}
+            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
+          </p>
+        </div>
+        <span v-if="active" class="badge">{{
+          $t('HELP_CENTER.PORTAL.ACTIVE_BADGE')
+        }}</span>
+      </header>
+      <div class="portal-locales">
+        <h2 class="locale-title sub-block-title">
+          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
+        </h2>
+        <ul>
+          <li
+            v-for="locale in portal.config.allowed_locales"
+            :key="locale.code"
+          >
+            <label :for="`locale-${locale.code}`" class="locale-item">
+              <input
+                :id="`locale-${locale.code}`"
+                v-model="selectedLocale"
+                type="radio"
+                name="locale"
+                :value="locale.code"
+              />
+              <div>
+                <p>{{ locale.name }}</p>
+                <span>
+                  {{ locale.articles_count }}
+                  {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
+                  {{ locale.code }}
+                </span>
+              </div>
+            </label>
+          </li>
+          <li>
+            <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import thumbnail from 'dashboard/components/widgets/Thumbnail';
+export default {
+  components: {
+    thumbnail,
+  },
+  props: {
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedLocale: '',
+    };
+  },
+  mounted() {
+    this.selectedLocale = this.portal.config.allowed_locales[0].code;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.portal {
+  background-color: var(--white);
+  padding: var(--space-normal);
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-medium);
+  position: relative;
+  display: flex;
+  margin-bottom: var(--space-normal);
+
+  &.active {
+    border: 1px solid var(--w-400);
+  }
+
+  .actions-container {
+    margin-left: var(--space-small);
+    flex-grow: 1;
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--space-one);
+
+      .badge {
+        font-size: var(--font-size-mini);
+        background-color: var(--w-100);
+        color: var(--w-600);
+        padding: var(--space-smaller) var(--space-small);
+      }
+
+      .portal-title {
+        font-weight: var(--font-weight-bold);
+        margin-bottom: 0;
+      }
+
+      .portal-count {
+        font-size: var(--font-size-mini);
+        margin-bottom: 0;
+        color: var(--s-500);
+      }
+    }
+
+    .portal-locales {
+      .locale-title {
+        color: var(--s-600);
+        font-weight: var(--font-weight-medium);
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .locale-item {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: var(--space-smaller);
+          cursor: pointer;
+          padding: var(--space-smaller);
+          border-radius: var(--border-radius-normal);
+
+          &:hover {
+            background-color: var(--w-25);
+          }
+
+          p {
+            margin-bottom: 0;
+          }
+
+          span {
+            color: var(--s-500);
+            font-size: var(--font-size-small);
+          }
+        }
+      }
+    }
+  }
+}
+label > [type='radio'] {
+  margin-bottom: 0;
+  margin-top: var(--space-smaller);
+  margin-right: var(--space-one);
+}
+</style>

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

@@ -0,0 +1,68 @@
+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

@@ -26,6 +26,12 @@
       "SAVING": "Draft saving...",
       "SAVED": "Draft saved"
     },
+    "PORTAL": {
+      "ACTIVE_BADGE": "active",
+      "CHOOSE_LOCALE_LABEL": "Choose a locale",
+      "ARTICLES_LABEL": "articles",
+      "ADD_NEW_LOCALE": "Add a new locale"
+    },
     "TABLE": {
       "LOADING_MESSAGE": "Loading articles...",
       "404": "No articles matches your search 🔍",