feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue

@@ -1,12 +1,14 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
-defineProps({
+const props = defineProps({
   locale: {
     type: String,
     required: true,
@@ -15,6 +17,10 @@ defineProps({
     type: Boolean,
     required: true,
   },
+  localeCode: {
+    type: String,
+    required: true,
+  },
   articleCount: {
     type: Number,
     required: true,
@@ -25,29 +31,26 @@ defineProps({
   },
 });
 
-const isOpen = ref(false);
+const emit = defineEmits(['action']);
 
-const menuItems = [
-  {
-    label: 'Make default',
-    action: 'default',
-    icon: 'star-emphasis',
-  },
-  {
-    label: 'Delete',
-    action: 'delete',
-    icon: 'delete',
-  },
-];
+const { t } = useI18n();
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const showDropdownMenu = ref(false);
+
+const localeMenuItems = computed(() =>
+  LOCALE_MENU_ITEMS.map(item => ({
+    ...item,
+    label: t(item.label),
+    disabled: props.isDefault,
+  }))
+);
+
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value });
+  showDropdownMenu.value = false;
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <CardLayout class="ltr:pr-2 rtl:pl-2">
     <template #header>
@@ -56,42 +59,53 @@ const handleAction = action => {
           <span
             class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
           >
-            {{ locale }}
+            {{ locale }} ({{ localeCode }})
           </span>
           <span
             v-if="isDefault"
             class="bg-slate-100 dark:bg-slate-800 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-woot-500 dark:text-woot-400 px-2 py-0.5"
           >
-            Default
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-1">
+        <div class="flex items-center justify-end gap-2">
           <div class="flex items-center gap-4">
             <span
               class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
             >
-              {{ articleCount }} articles
+              {{
+                $t(
+                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
+                  articleCount
+                )
+              }}
             </span>
             <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
             <span
               class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
             >
-              {{ categoryCount }} categories
+              {{
+                $t(
+                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
+                  categoryCount
+                )
+              }}
             </span>
           </div>
           <div class="relative group">
-            <Button
-              variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
-            />
-            <OnClickOutside @trigger="isOpen = false">
+            <OnClickOutside @trigger="showDropdownMenu = false">
+              <Button
+                variant="ghost"
+                size="sm"
+                icon="more-vertical"
+                class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
+                @click="showDropdownMenu = !showDropdownMenu"
+              />
+
               <DropdownMenu
-                v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60 min-w-[147px]"
+                v-if="showDropdownMenu"
+                :menu-items="localeMenuItems"
+                class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
                 @action="handleAction"
               />
             </OnClickOutside>