@designcrowd/library.brand-page 5.11.1 → 5.11.2

package/lib/src/shared/shape-library/ShapeLibrary.mixin.d.ts

@@ -61,8 +61,13 @@ declare const _default: import("vue").DefineComponent<{}, {
     tabs: any[];
     shapeLibrary: ShapeSearchResponseModel;
     debounceOnSearch: DebounceHandle | undefined;
+    tabsWithTranslations: {
+        key: string;
+        displayName: any;
+    }[];
 }, {
     tabMenuClasses(): string;
+    selectedTabDisplayName(): string;
 }, {
     getShapesCategories(): Promise<void>;
     getShapes(): Promise<void>;

package/lib/src/shared/shape-library/ShapeLibrary.mixin.js

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import { preloadImage } from '../../brand-page/utils';
 import { useBrandPageContainerStore, useUiStore, } from '../../brand-page-maker/stores';
 import {} from '../../models/shapeModels';
-import { commonTr } from '../../composables/useTranslate';
+import { commonTr, currentLocale } from '../../composables/useTranslate';
 export default defineComponent({
     emits: ['on-select-image'],
     setup() {
@@ -41,12 +41,16 @@ export default defineComponent({
             tabs: tabsWithTranslations.map((tab) => tab.displayName),
             shapeLibrary: {},
             debounceOnSearch: undefined,
+            tabsWithTranslations,
         };
     },
     computed: {
         tabMenuClasses() {
             return this.isDesignCom ? 'tw-capitalize tw-pb-4 !tw-font-medium' : '';
         },
+        selectedTabDisplayName() {
+            return (this.tabsWithTranslations.find((tab) => tab.key === this.selectedTabName)?.displayName || this.tabsWithTranslations[0].displayName);
+        },
     },
     created() {
         this.debounceOnSearch = debounce(this.onSearchShapesText, 1500);
@@ -62,10 +66,14 @@ export default defineComponent({
             if (!this.shapeLibraryApi) {
                 return;
             }
+            if (this.shapeLibraryCategories.length > 0) {
+                return;
+            }
             try {
                 this.isLoading = true;
+                const locale = currentLocale();
                 this.shapeLibraryCategories =
-                    (await this.shapeLibraryApi.getShapeCategoriesAsync());
+                    (await this.shapeLibraryApi.getShapeCategoriesAsync(locale));
                 this.shapeLibraryCategories = this.shapeLibraryCategories.filter((shape) => shape.isEnabled);
             }
             catch (e) {
@@ -83,7 +91,8 @@ export default defineComponent({
             }
             try {
                 this.isLoading = true;
-                const newShapes = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(this.category ? '' : this.searchText, this.category, this.currentShapeLibraryPage, this.currentPageSize, 'BrandSite', false));
+                const locale = currentLocale();
+                const newShapes = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(this.category ? '' : this.searchText, this.category, this.currentShapeLibraryPage, this.currentPageSize, locale, 'BrandSite', false));
                 this.totalPageSize += newShapes.items.length;
                 if (!this.shapeLibrary || !this.shapeLibrary.items) {
                     this.shapeLibrary = { ...newShapes }; // Initialize if `items` is missing
@@ -131,10 +140,11 @@ export default defineComponent({
             try {
                 this.isLoading = true;
                 this.currentShapeLibraryPage = 1;
-                this.searchText = category;
-                this.category = category;
+                this.searchText = category.displayName;
+                this.category = category.displayName;
                 this.shapeLibrary = {};
-                const res = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync('', this.category, this.currentShapeLibraryPage, this.currentPageSize, 'BrandSite', false));
+                const locale = currentLocale();
+                const res = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync('', category.name, this.currentShapeLibraryPage, this.currentPageSize, locale, 'BrandSite', false));
                 this.totalPageSize += res.items.length;
                 if (!this.shapeLibrary || !this.shapeLibrary.items) {
                     this.shapeLibrary = { ...res };
@@ -156,8 +166,10 @@ export default defineComponent({
             }
         },
         async selectTab(tabName) {
-            this.selectedTabName = tabName;
-            if (tabName === 'Categories') {
+            const tabKey = this.tabsWithTranslations.find((tab) => tab.displayName === tabName)
+                ?.key || this.tabsWithTranslations[0].key;
+            this.selectedTabName = tabKey;
+            if (tabKey === 'Categories') {
                 await this.getShapesCategories();
             }
         },
@@ -176,8 +188,9 @@ export default defineComponent({
             }
             try {
                 this.isLoading = true;
+                const locale = currentLocale();
                 if (this.searchText) {
-                    const res = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(this.searchText, '', this.currentShapeLibraryPage, this.currentPageSize, 'BrandSite', false));
+                    const res = (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(this.searchText, '', this.currentShapeLibraryPage, this.currentPageSize, locale, 'BrandSite', false));
                     this.totalPageSize += res.items.length;
                     if (!this.shapeLibrary || !this.shapeLibrary.items) {
                         this.shapeLibrary = { ...res };

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.js

@@ -87,7 +87,10 @@ export default defineComponent({
             return !this.searchText;
         },
         searchText() {
-            return this.searchTerm || this.selectedCategory;
+            const selectedCategoryObj = this.templateCategories.find((category) => category.name === this.selectedCategory);
+            return (this.searchTerm ||
+                selectedCategoryObj?.displayName ||
+                this.selectedCategory);
         },
         templateGridClasses() {
             return `tw-grid-cols-${this.numColumns}`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.11.1",
+  "version": "5.11.2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/clients/asset-library-clients.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import type { LocaleTypes } from '../composables/useTranslate';
 import type {
   ShapeCategoryModel,
   ShapeSearchResponseModel,
@@ -17,8 +18,8 @@ export default class AssetLibraryClient {
     return `${this.baseUrl}/maker/api/font/${version}`;
   }
 
-  private getShapeCategoriesEndpoint(): string {
-    return `${this.baseUrl}/api/shape/getcategories`;
+  private getShapeCategoriesEndpoint(locale: LocaleTypes): string {
+    return `${this.baseUrl}/api/shape/getcategories?locale=${locale}`;
   }
 
   private getShapesByIdsEndpoint = (shapeIds: number[]): string =>
@@ -38,12 +39,13 @@ export default class AssetLibraryClient {
     pageSize: number,
     makerMode: string,
     includeDisabled: boolean,
+    locale: LocaleTypes,
     pageName?: string,
     pageSection?: string,
     templateType?: string,
     searchId?: string,
   ) => {
-    let endpoint = `${this.baseUrl}/api/shape/search?searchterm=${searchTerm}&category=${category}&page=${page}&pageSize=${pageSize}&makerMode=${makerMode}&includeDisabled=${includeDisabled}`;
+    let endpoint = `${this.baseUrl}/api/shape/search?searchterm=${searchTerm}&category=${category}&page=${page}&pageSize=${pageSize}&makerMode=${makerMode}&includeDisabled=${includeDisabled}&locale=${locale}`;
 
     if (pageName) {
       endpoint += `&pageName=${pageName}`;
@@ -74,9 +76,11 @@ export default class AssetLibraryClient {
     }
   }
 
-  async getShapeCategoriesAsync(): Promise<ShapeCategoryModel[]> {
+  async getShapeCategoriesAsync(
+    locale: LocaleTypes,
+  ): Promise<ShapeCategoryModel[]> {
     try {
-      const resp = await axios.get(this.getShapeCategoriesEndpoint());
+      const resp = await axios.get(this.getShapeCategoriesEndpoint(locale));
 
       return resp.data;
     } catch (error) {
@@ -91,6 +95,7 @@ export default class AssetLibraryClient {
     category: string | null,
     page: number,
     pageSize: number,
+    locale: LocaleTypes,
     makerMode?: string,
     includeDisabled = false,
     pageName?: string,
@@ -105,6 +110,7 @@ export default class AssetLibraryClient {
       pageSize,
       makerMode ?? '',
       includeDisabled,
+      locale,
       pageName,
       pageSection,
       templateType,

package/src/composables/useTranslate.ts

@@ -162,6 +162,7 @@ const existingDomainModalTr = (key) => tr(`existingDomainModal.${key}`);
 const sensitiveContentModalTr = (key, valuesToInterpolate = {}) =>
   tr(`sensitiveContentModal.${key}`, valuesToInterpolate, true);
 const quickLinkBarTr = (key) => tr(`quickLinkBar.${key}`);
+const unsplashImageCategoriesTr = (key) => tr(`unsplashImageCategories.${key}`);
 const brandPageFooterTr = (key, valuesToInterpolate = {}) =>
   tr(`brandPageFooter.${key}`, valuesToInterpolate);
 const productTr = (key) => tr(`product.${key}`);
@@ -185,10 +186,22 @@ const productDetailModalTr = (key, valuesToInterpolate = {}) =>
 const videoTr = (key, valuesToInterpolate = {}) =>
   tr(`video.${key}`, valuesToInterpolate);
 
+const currentLocale = (): LocaleTypes => {
+  const i18 = getI18NextInstance();
+  const locale = i18.language as LocaleTypes;
+
+  if (supportedLocales.includes(locale)) {
+    return locale;
+  }
+
+  return fallbackLocale;
+};
+
 export {
   setLocaleAsync,
   getCurrentLocale,
   tr,
+  currentLocale,
   modelsTr,
   commonTr,
   actionBarTr,
@@ -248,6 +261,7 @@ export {
   existingDomainModalTr,
   sensitiveContentModalTr,
   quickLinkBarTr,
+  unsplashImageCategoriesTr,
   brandPageFooterTr,
   productTr,
   imageTr,

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -44,7 +44,8 @@
 
       <div
         v-if="
-          data.activeTab === 'shapes' && data.selectedShapeTab === 'Background'
+          data.activeTab === 'shapes' &&
+          data.selectedShapeTab === backgroundSettingsTr(`other`)
         "
       >
         <slot
@@ -66,7 +67,10 @@
         />
       </div>
       <div
-        v-if="data.activeTab === 'shapes' && data.selectedShapeTab === 'Other'"
+        v-if="
+          data.activeTab === 'shapes' &&
+          data.selectedShapeTab === backgroundSettingsTr(`background`)
+        "
       >
         <slot v-if="isAdmin" name="pre-shape" config-option="shape" />
 

package/src/shared/shape-library/ShapeLibrary.mixin.ts

@@ -11,7 +11,7 @@ import {
   type ShapeCategoryModel,
   type ShapeSearchResponseModel,
 } from '../../models/shapeModels';
-import { commonTr } from '../../composables/useTranslate';
+import { commonTr, currentLocale } from '../../composables/useTranslate';
 
 export default defineComponent({
   emits: ['on-select-image'],
@@ -51,12 +51,20 @@ export default defineComponent({
       tabs: tabsWithTranslations.map((tab) => tab.displayName),
       shapeLibrary: {} as ShapeSearchResponseModel,
       debounceOnSearch: undefined as DebounceHandle | undefined,
+      tabsWithTranslations,
     };
   },
   computed: {
     tabMenuClasses(): string {
       return this.isDesignCom ? 'tw-capitalize tw-pb-4 !tw-font-medium' : '';
     },
+    selectedTabDisplayName(): string {
+      return (
+        this.tabsWithTranslations.find(
+          (tab) => tab.key === this.selectedTabName,
+        )?.displayName || this.tabsWithTranslations[0].displayName
+      );
+    },
   },
   created() {
     this.debounceOnSearch = debounce(this.onSearchShapesText, 1500);
@@ -74,10 +82,18 @@ export default defineComponent({
         return;
       }
 
+      if (this.shapeLibraryCategories.length > 0) {
+        return;
+      }
+
       try {
         this.isLoading = true;
+        const locale = currentLocale();
+
         this.shapeLibraryCategories =
-          (await this.shapeLibraryApi.getShapeCategoriesAsync()) as ShapeCategoryModel[];
+          (await this.shapeLibraryApi.getShapeCategoriesAsync(
+            locale,
+          )) as ShapeCategoryModel[];
         this.shapeLibraryCategories = this.shapeLibraryCategories.filter(
           (shape) => shape.isEnabled,
         );
@@ -97,6 +113,7 @@ export default defineComponent({
 
       try {
         this.isLoading = true;
+        const locale = currentLocale();
 
         const newShapes =
           (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(
@@ -104,6 +121,7 @@ export default defineComponent({
             this.category,
             this.currentShapeLibraryPage,
             this.currentPageSize,
+            locale,
             'BrandSite',
             false,
           )) as ShapeSearchResponseModel;
@@ -159,16 +177,18 @@ export default defineComponent({
       try {
         this.isLoading = true;
         this.currentShapeLibraryPage = 1;
-        this.searchText = category;
-        this.category = category;
+        this.searchText = category.displayName;
+        this.category = category.displayName;
         this.shapeLibrary = {} as ShapeSearchResponseModel;
+        const locale = currentLocale();
 
         const res =
           (await this.shapeLibraryApi.getShapesBySearchTermOrCategoryAsync(
             '',
-            this.category,
+            category.name,
             this.currentShapeLibraryPage,
             this.currentPageSize,
+            locale,
             'BrandSite',
             false,
           )) as ShapeSearchResponseModel;
@@ -193,9 +213,13 @@ export default defineComponent({
     },
 
     async selectTab(tabName) {
-      this.selectedTabName = tabName;
+      const tabKey =
+        this.tabsWithTranslations.find((tab) => tab.displayName === tabName)
+          ?.key || this.tabsWithTranslations[0].key;
+
+      this.selectedTabName = tabKey;
 
-      if (tabName === 'Categories') {
+      if (tabKey === 'Categories') {
         await this.getShapesCategories();
       }
     },
@@ -221,6 +245,7 @@ export default defineComponent({
 
       try {
         this.isLoading = true;
+        const locale = currentLocale();
 
         if (this.searchText) {
           const res =
@@ -229,6 +254,7 @@ export default defineComponent({
               '',
               this.currentShapeLibraryPage,
               this.currentPageSize,
+              locale,
               'BrandSite',
               false,
             )) as ShapeSearchResponseModel;

package/src/shared/shape-library/ShapeLibrary.vue

@@ -15,7 +15,7 @@
       class="tw-w-full tw-mb-6"
       :classes="tabMenuClasses"
       :tab-names="tabs"
-      :selected-tab-name="selectedTabName"
+      :selected-tab-name="selectedTabDisplayName"
       @on-tab-selected="selectTab"
     />
     <div
@@ -35,7 +35,7 @@
           <button
             class="tw-p-4 tw-w-full tw-text-white tw-bg-opacity-75 tw-bg-black tw-cursor-pointer"
             :data-test-shape-library-category="shapeCategory.displayName"
-            @click="onCategoryClicked(shapeCategory.displayName)"
+            @click="onCategoryClicked(shapeCategory)"
           >
             {{ shapeCategory.displayName }}
           </button>

package/src/shared/template-settings/components/TemplatesSettings.mixin.ts

@@ -125,7 +125,15 @@ export default defineComponent({
     },
 
     searchText(): string | undefined {
-      return this.searchTerm || this.selectedCategory;
+      const selectedCategoryObj = this.templateCategories.find(
+        (category) => category.name === this.selectedCategory,
+      );
+
+      return (
+        this.searchTerm ||
+        selectedCategoryObj?.displayName ||
+        this.selectedCategory
+      );
     },
 
     templateGridClasses(): string {

package/src/shared/template-settings/components/TemplatesSettings.vue

@@ -87,7 +87,7 @@
             style="height: auto"
             @click="onCategorySelect(templateCategory)"
           >
-            {{ templateCategory.name }}
+            {{ templateCategory?.displayName ?? templateCategory.name }}
           </div>
         </li>
       </ul>