@designcrowd/library.brand-page 5.17.17 → 5.17.18-ast-layout

package/src/shared/logo-settings/store/editable-logo-store.ts

@@ -197,6 +197,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     async setStateAsync(payload: {
       newState: SetStateAsyncPayload;
       defaultPrimaryText?: string;
+      defaultLayout?: string;
     }) {
       this.resetLogoEdits();
       this.setLogoDraftToken(payload.newState.logoDraftToken);
@@ -205,6 +206,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       const templateMetaResult = await this.postEditableLogoRequestAsync({
         returnJson: true,
         defaultPrimaryText: payload?.defaultPrimaryText,
+        layout: payload?.defaultLayout,
       });
 
       this.logoTemplateMetadata = templateMetaResult.metadata;
@@ -233,8 +235,14 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       this.updateLogoEdit(this.logoTemplateMetadata, logoDraft?.metadata);
 
-      await this.updateEditableLogoImageUrlAsync(defaultPrimaryText);
-      await this.updateMetadataAsync(defaultPrimaryText);
+      const defaultLayout = !logoDraft ? payload?.defaultLayout : undefined;
+
+      await this.updateEditableLogoImageUrlAsync(
+        defaultPrimaryText,
+        undefined,
+        defaultLayout,
+      );
+      await this.updateMetadataAsync(defaultPrimaryText, false, defaultLayout);
 
       // updated logoDraft can be found at this point
       logoDraft = logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
@@ -386,9 +394,14 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     async updateEditableLogoImageUrlAsync(
       defaultPrimaryText?: string,
       overrideLogoVariation?: number | undefined,
+      layout?: string,
     ): Promise<void> {
       const tasks = this.editableLogoVariations.map((x) =>
-        this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText),
+        this.updateEditableLogoImageByVariationAsync(
+          x,
+          defaultPrimaryText,
+          layout,
+        ),
       );
 
       await Promise.all(tasks);
@@ -434,10 +447,12 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     async updateMetadataAsync(
       defaultPrimaryText?: string,
       resetLogoTemplateMetadata = false,
+      layout?: string,
     ): Promise<void> {
       const result = await this.postEditableLogoRequestAsync({
         returnJson: true,
         defaultPrimaryText,
+        layout,
       });
 
       if (resetLogoTemplateMetadata) {
@@ -451,12 +466,14 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     async updateEditableLogoImageByVariationAsync(
       editableLogoVariation: EditableLogoVariation,
       defaultPrimaryText?: string,
+      layout?: string,
     ): Promise<ModifyLogoDataResponse | null> {
       const result = await this.postEditableLogoRequestAsync({
         returnJson: false,
         dimensionType: editableLogoVariation.dimensionType,
         variationType: editableLogoVariation.variationType,
         defaultPrimaryText,
+        layout,
       });
 
       if (result.base64 === 'data:,') {
@@ -540,6 +557,14 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
           return false;
         }
 
+        // Don't refresh while setStateAsync is still initializing —
+        // it resets textObjects to [] before repopulating them, so a
+        // refresh at that point sends empty changeRequest objects to
+        // the server, which returns placeholder text ("LOGO TEXT HERE").
+        if (this.logoEdits.textObjects.length === 0) {
+          return false;
+        }
+
         await this.updateEditableLogoImageUrlAsync();
 
         return true;
@@ -553,15 +578,17 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       dimensionType: string;
       variationType: string;
       defaultPrimaryText?: string;
+      layout?: string;
     }): Promise<ModifyLogoDataResponse | null> {
       const logoStore = useLogoStore();
 
+      const hasLayout = !!payload?.layout;
+
       const body: ModifyLogoDataRequest = {
         returnJson: payload?.returnJson || false,
         generateS3Url: true,
         dimensionsType: payload?.dimensionType,
         variation: payload?.variationType,
-        primaryText: payload?.defaultPrimaryText,
         logo: {
           template: {
             token: logoStore.logoTemplateAsset!.token,
@@ -590,26 +617,48 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         },
       };
 
+      if (hasLayout) {
+        // template.placeholder + template.layout tell fabric-render's
+        // loadCanvasAsync to replace placeholder text and apply the 2-line
+        // split. These must be sent on EVERY call — without them the template
+        // loads with its original single-line structure.
+        //
+        // IMPORTANT: Do NOT set body.primaryText here. It goes through a
+        // separate code path (applyPrimaryText in applyChangeRequestAsync)
+        // that overrides the split result with the full business name.
+        body.logo.template.placeholder = {
+          primaryText: payload.defaultPrimaryText,
+        };
+        body.logo.template.layout = payload.layout;
+        body.changeRequest.layout = payload.layout;
+      } else {
+        // No layout (standard logos): send primaryText normally.
+        body.primaryText = payload?.defaultPrimaryText;
+      }
+
       // mapping ui object to fabric compatible objects
       this.logoEdits.textObjects.forEach((o) => {
+        const updates: any = {
+          fontFamily: o.fontFamily,
+          fill: o.fill,
+          stroke: o.outlineColor,
+          strokeWidth: o.outlineEnabled ? o.outlineWidth : 0,
+          isUppercase: o.isUppercase,
+          shadow: {
+            ...o.shadow,
+            blur: o.shadowEnabled ? o.shadow.blur : 0,
+            offsetX: o.shadowEnabled ? o.shadow.offsetX : 0,
+            offsetY: o.shadowEnabled ? o.shadow.offsetY : 0,
+          },
+        };
+
+        updates.textOriginal = o.text;
+
         body.changeRequest.objects[o.id] = {
           type: o.type,
           role: o.role,
           removed: !o.textEnabled || !o.text,
-          updates: {
-            fontFamily: o.fontFamily,
-            fill: o.fill,
-            textOriginal: o.text,
-            stroke: o.outlineColor,
-            strokeWidth: o.outlineEnabled ? o.outlineWidth : 0,
-            isUppercase: o.isUppercase,
-            shadow: {
-              ...o.shadow,
-              blur: o.shadowEnabled ? o.shadow.blur : 0,
-              offsetX: o.shadowEnabled ? o.shadow.offsetX : 0,
-              offsetY: o.shadowEnabled ? o.shadow.offsetY : 0,
-            },
-          },
+          updates,
         };
       });