@designcrowd/library.brand-page 5.16.45 → 5.16.46

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -183,6 +183,64 @@ declare const _default: import("vue").DefineComponent<{}, {
             isPersonalisationEnabled: boolean;
         }): void;
     }>;
+    templateSettingsStore: import("pinia").Store<"uiTemplateSettings", import("../../template-settings/store").TemplatesSettingState, {
+        renderAsImage(): boolean;
+    }, {
+        _addTemplates({ templates }: {
+            templates: import("../../template-settings/models").TemplateSettingsTemplate[];
+        }): void;
+        _setTemplates({ templates }: {
+            templates: import("../../template-settings/models").TemplateSettingsTemplate[];
+        }): void;
+        _setIsBusy({ isBusy }: {
+            isBusy: boolean;
+        }): void;
+        _setPageCount({ pageCount }: {
+            pageCount: number;
+        }): void;
+        _setPageNo({ pageNo }: {
+            pageNo: number;
+        }): void;
+        _setPageNoLoaded({ pageNoLoaded }: {
+            pageNoLoaded: number;
+        }): void;
+        _setSearchTerm({ searchTerm }: {
+            searchTerm: string | undefined;
+        }): void;
+        _setSelectedTab({ tabName }: {
+            tabName: "all" | "AI" | "categories";
+        }): void;
+        _setSelectedCategory({ categoryName, }: {
+            categoryName: string | undefined;
+        }): void;
+        _setTemplateCategories({ categories }: {
+            categories: import("../../template-settings/models").TemplateCategory[];
+        }): void;
+        gotoNextPage(): Promise<void>;
+        gotoPreviousPage(): Promise<void>;
+        safeMapToTemplateSettingsTemplate(template: import("../../../clients/models").DesignTemplate | null): Promise<import("../../template-settings/models").TemplateSettingsTemplate | null>;
+        loadPageNo({ pageNo }: {
+            pageNo: number;
+        }): Promise<void>;
+        getCachedTemplateByTokenAsync(token: string): Promise<import("../../template-settings/models").TemplateSettingsTemplate | undefined>;
+        onTemplateSelected(payload: import("../../template-settings/models").OnTemplateSelectedPayload): Promise<void>;
+        onCategorySelected(payload: import("../../template-settings/models").OnCategorySelectedPayload): Promise<void>;
+        onSearch(payload: import("../../template-settings/models").OnSearchPayload): Promise<void>;
+        onTabSelected(payload: import("../../template-settings/models").OnTabSelectedPayload): Promise<void>;
+        setTemplateType({ templateType }: {
+            templateType: import("../../template-settings/models").DesignTemplateType;
+        }): void;
+        setTemplateCategories(payload: import("../../template-settings/models").SetTemplateCategoriesPayload): Promise<void>;
+        selectInitialTemplateCategory(payload: {
+            selectedCategory: string;
+        }): void;
+        setInitialSearchTerm(payload: {
+            initialSearchTerm: string;
+        }): void;
+        clearTemplates(): void;
+        getTemplateByTemplateId(id: string): import("../../template-settings/models").TemplateSettingsTemplate | undefined;
+        setupLogoChangeWatcher(): void;
+    }>;
     eventTracker: {
         sendGettyVideoAddEvent: () => void;
         sendGettyVideoReplaceEvent: () => void;
@@ -324,6 +382,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         }[];
     })[]>;
     editableBaseLogoBase64Url: import("vue").ComputedRef<string>;
+    /**
+     * Logo keywords for search, prioritized as follows:
+     * 1. templateSettingsStore.searchTerm - Updated when user searches in template tab
+     * 2. templateSettingsStore.initialSearchTerm - Set during initialization from backend
+     */
+    logoKeywords: import("vue").ComputedRef<string>;
 }, {
     selectedTab: {
         key: string;

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.js

@@ -4,6 +4,7 @@ import debounce from 'lodash.debounce';
 import { GRADIENT_COLOR_TYPE } from '../../../brand-page-maker/components/color-picker/components/GradientTypeSelector.mixin';
 import { useUiLogoSettingsStore } from '../store/logo-settings-store';
 import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiTemplateSettingsStore } from '../../template-settings/store';
 import { editLogoSettingsTr } from '../../../composables/useTranslate';
 import { EVENTS, SELECT_LOCATIONS, useEventTracker, } from '../../../brand-page-maker/composables/useEventTracker';
 export default defineComponent({
@@ -11,11 +12,13 @@ export default defineComponent({
         const editableLogoStore = useUiEditableLogoStore();
         const logoStore = useUiLogoSettingsStore();
         const uiStore = useUiStore();
+        const templateSettingsStore = useUiTemplateSettingsStore();
         const eventTracker = useEventTracker();
         return {
             editableLogoStore,
             logoStore,
             uiStore,
+            templateSettingsStore,
             eventTracker,
             makerFonts: computed(() => editableLogoStore.makerFonts),
             logoEdits: computed(() => editableLogoStore.logoEdits),
@@ -24,6 +27,14 @@ export default defineComponent({
             isTextOnlyLogo: computed(() => editableLogoStore.isTextOnlyLogo),
             logoColors: computed(() => editableLogoStore.logoEdits.logoObject.logoColors),
             editableBaseLogoBase64Url: computed(() => editableLogoStore.editableLogoVariations[0].base64),
+            /**
+             * Logo keywords for search, prioritized as follows:
+             * 1. templateSettingsStore.searchTerm - Updated when user searches in template tab
+             * 2. templateSettingsStore.initialSearchTerm - Set during initialization from backend
+             */
+            logoKeywords: computed(() => templateSettingsStore.searchTerm ||
+                templateSettingsStore.initialSearchTerm ||
+                ''),
         };
     },
     data() {

package/package.json

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

package/src/shared/logo-settings/components/EditLogoSettings.mixin.ts

@@ -8,6 +8,7 @@ import type { BpColorPickerGradient } from '../../../brand-page-maker/components
 import { GRADIENT_COLOR_TYPE } from '../../../brand-page-maker/components/color-picker/components/GradientTypeSelector.mixin';
 import { useUiLogoSettingsStore } from '../store/logo-settings-store';
 import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiTemplateSettingsStore } from '../../template-settings/store';
 import { editLogoSettingsTr } from '../../../composables/useTranslate';
 import {
   EVENTS,
@@ -20,12 +21,14 @@ export default defineComponent({
     const editableLogoStore = useUiEditableLogoStore();
     const logoStore = useUiLogoSettingsStore();
     const uiStore = useUiStore();
+    const templateSettingsStore = useUiTemplateSettingsStore();
     const eventTracker = useEventTracker();
 
     return {
       editableLogoStore,
       logoStore,
       uiStore,
+      templateSettingsStore,
       eventTracker,
       makerFonts: computed(() => editableLogoStore.makerFonts),
       logoEdits: computed(() => editableLogoStore.logoEdits),
@@ -38,6 +41,17 @@ export default defineComponent({
       editableBaseLogoBase64Url: computed(
         () => editableLogoStore.editableLogoVariations[0].base64,
       ),
+      /**
+       * Logo keywords for search, prioritized as follows:
+       * 1. templateSettingsStore.searchTerm - Updated when user searches in template tab
+       * 2. templateSettingsStore.initialSearchTerm - Set during initialization from backend
+       */
+      logoKeywords: computed(
+        () =>
+          templateSettingsStore.searchTerm ||
+          templateSettingsStore.initialSearchTerm ||
+          '',
+      ),
     };
   },
   data() {

package/src/shared/logo-settings/components/EditLogoSettings.vue

@@ -2,6 +2,7 @@
   <LogoTemplateSearch
     v-if="showLogoTemplates"
     :business-name="editableLogoStore.getLogoPrimaryText()"
+    :keywords="logoKeywords"
     @on-back="onLogoTemplateSearchBackClicked"
   />
   <div v-else>

package/src/shared/logo-settings/components/LogoTemplateSearch.vue

@@ -11,16 +11,6 @@
   </div>
   <div class="tw-flex tw-flex-col tw-border-grayscale-500">
     <div class="tw-flex tw-flex-col tw-gap-4">
-      <!-- Business Name Input -->
-      <div class="tw-flex">
-        <TextInput
-          v-model="data.primaryText"
-          class="tw-w-full"
-          size="md"
-          :placeholder="logoTemplateSearchModalTr('businessName')"
-          @input="onSearchTextOrPrimaryTextChange"
-        />
-      </div>
       <div class="tw-flex">
         <TextInput
           v-model="data.searchText"
@@ -82,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, defineProps, reactive } from 'vue';
+import { onMounted, reactive } from 'vue';
 import debounce from 'lodash.debounce';
 import { TextInput, Loader, Button } from '@designcrowd/fe-shared-lib';
 import LogoSwitchConfirmationModal from './logo-switch-confirmation-modal/LogoSwitchConfirmationModal.vue';
@@ -109,6 +99,7 @@ const emit = defineEmits(['on-back']);
 
 interface Props {
   businessName: string;
+  keywords?: string;
 }
 
 interface Data {
@@ -249,16 +240,21 @@ const loadMoreLogos = () => {
 
 onMounted(async () => {
   const reload = props.businessName !== logoStore.logoSearchState.primaryText;
+  const hasStoredSearch = logoStore.logoSearchState.logoTemplates.length > 0;
 
   data.primaryText = props.businessName;
-  data.searchText = logoStore.logoSearchState.searchText;
+
+  // Use stored search if user has searched before, otherwise use keywords
+  data.searchText = hasStoredSearch
+    ? logoStore.logoSearchState.searchText
+    : props.keywords || '';
+
   data.currentPage = reload ? 1 : logoStore.logoSearchState.currentPage;
 
   if (reload) {
     await fetchLogoTemplates(true);
   }
 
-  // preload current template behind the scene
   templateSettingStore.getCachedTemplateByTokenAsync(
     containerStore.designTemplateToken,
   );