@designcrowd/library.brand-page 5.16.44 → 5.16.46

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,
   );