@designcrowd/library.brand-page 6.1.3 → 6.1.4-ast-prepurchase

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -96,6 +96,11 @@ export interface BrandPageContainerState {
   isContextualUpgradeModalVisible: boolean;
   contextualUpgradeType: WebsiteContextUpgradeType | undefined;
   requestVerificationToken?: string;
+  // Set by the host whenever one of ITS OWN modals is open. The library can't see
+  // host-local visibility flags, so the preview has no other way to know to step back.
+  isHostModalVisible?: boolean;
+  // Signed live-preview URL returned by the most recent `saveOnly` save.
+  livePreviewUrl?: string;
 }
 
 export type GettyVideoEditorViewModelResponse = {
@@ -180,7 +185,9 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isSubsequentPublish: false,
       isContextualUpgradeModalVisible: false,
       contextualUpgradeType: undefined,
+      isHostModalVisible: false,
       requestVerificationToken: undefined,
+      livePreviewUrl: undefined,
     };
   },
   actions: {
@@ -338,6 +345,11 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.isUpgradeModalVisible = payload.isVisible;
     },
 
+    // Hosts call this from their own modals so the live preview steps back for them.
+    setIsHostModalVisible(payload: { isVisible: boolean }) {
+      this.isHostModalVisible = payload.isVisible;
+    },
+
     setPublishErrorMessage(payload) {
       this.publishErrorMessage = payload.errorMessage;
     },
@@ -895,7 +907,15 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     },
 
     async saveBrandPage(
-      payload: { isPublish?: boolean; eventButtonLocation?: string } = {},
+      payload: {
+        isPublish?: boolean;
+        eventButtonLocation?: string;
+        // Save the draft WITHOUT pushing it live, even when the site is already
+        // published. Used by the live preview: previewing unpublished changes must
+        // never republish the site out from under the user. Default (omitted) keeps
+        // the existing behaviour — a save on a live site republishes it.
+        saveOnly?: boolean;
+      } = {},
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
@@ -920,7 +940,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
         const response = await brandPageClient.saveBrandPageAsync(
           brandPageMakerStore.brandPageType,
-          saveRequest,
+          { ...saveRequest, saveOnly: !!payload.saveOnly },
           this.designDraftToken,
         );
 
@@ -928,6 +948,8 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           return false;
         }
 
+        this.livePreviewUrl = response.livePreviewUrl;
+
         if (this.brandPageStatus !== response.status) {
           await this.setBrandPageStatus(response.status);
         }
@@ -985,10 +1007,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           this.setSlug({ slug: response.slug });
         }
 
-        this.setTriggerSaveSuccessMessage({
-          triggerSaveSuccessMessage: true,
-        });
-
         if (brandPageMakerStore.contentErrorCount > 0) {
           await brandPageMakerStore.setSelectedTabName({
             tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
@@ -999,7 +1017,9 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           triggerSaveSuccessMessage: true,
         });
 
-        if (!payload.isPublish) {
+        // Deferred, not skipped, when something covers the editor: the publish modal
+        // and the preview each raise it on close.
+        if (!payload.isPublish && !payload.saveOnly) {
           await this.showSaveSuccessMessage();
 
           await brandPageMakerStore.showNextNotificationMessage();
@@ -1204,7 +1224,9 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       }
 
       this.setIsUpgradeModalVisible({ isVisible: true });
-      await this.saveBrandPage();
+      // The upgrade modal is already open over the editor, so don't fire the
+      // save banner underneath it — `closeUpgradeModal` replays it on dismiss.
+      await this.saveBrandPage({ isPublish: true });
     },
 
     async getContextualUpgradeResponseAsync(): Promise<
@@ -1513,5 +1535,15 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     },
 
     isUserDraft: (state): boolean => !!state.designDraftToken,
+
+    // Every modal that can open OVER the editor. The live preview is a full-viewport
+    // takeover, so it has to step back for all of them or they open behind it —
+    // add new modals here (or via isHostModalVisible) rather than to the caller.
+    isAnyModalVisible: (state): boolean =>
+      state.isPublishModalVisible ||
+      state.isUpgradeModalVisible ||
+      state.isContextualUpgradeModalVisible ||
+      state.isStripeOnboardingModalVisible ||
+      !!state.isHostModalVisible,
   },
 });

package/src/bundles/bundled-translations.de-DE.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Link in der Biografie",
     "digitalBusinessCardFriendlyName": "Digitale Visitenkarte"
   },
+  "previewModal": {
+    "edit": "Bearbeiten",
+    "retry": "Erneut versuchen"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "Meine Webseite:",
     "copyButton": "Kopieren",
@@ -1347,6 +1351,7 @@
     "settings": "Konfig.",
     "domains": "Domains",
     "sensitiveContent": "Sensible Inhalte",
+    "close": "schließen",
     "displayStyle": "Anzeigestil",
     "colorMatched": "Farblich abgestimmt",
     "iconColor": "Symbolfarbe",

package/src/bundles/bundled-translations.es-ES.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Enlace en la bio",
     "digitalBusinessCardFriendlyName": "Tarjeta de visita digital"
   },
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Vuelve a intentarlo"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "Mi página web:",
     "copyButton": "Copiar",
@@ -1347,6 +1351,7 @@
     "settings": "Ajustes",
     "domains": "Dominios",
     "sensitiveContent": "Contenido sensible",
+    "close": "cierra",
     "displayStyle": "Estilo de visualización",
     "colorMatched": "Color combinado",
     "iconColor": "Color del icono",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Lien dans la bio",
     "digitalBusinessCardFriendlyName": "Carte de visite numérique"
   },
+  "previewModal": {
+    "edit": "Éditer",
+    "retry": "Réessayez"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
@@ -1347,6 +1351,7 @@
     "settings": "Paramètres",
     "domains": "Domaines",
     "sensitiveContent": "Contenu sensible",
+    "close": "fermer",
     "displayStyle": "Style d'affichage",
     "colorMatched": "Couleur assortie",
     "iconColor": "Couleur de l'icône",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Lien dans la bio",
     "digitalBusinessCardFriendlyName": "Carte de visite numérique"
   },
+  "previewModal": {
+    "edit": "Éditer",
+    "retry": "Réessayez"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
@@ -1347,6 +1351,7 @@
     "settings": "Paramètres",
     "domains": "Domaines",
     "sensitiveContent": "Contenu sensible",
+    "close": "fermer",
     "displayStyle": "Style d'affichage",
     "colorMatched": "Couleur assortie",
     "iconColor": "Couleur de l'icône",

package/src/bundles/bundled-translations.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Link in Bio",
     "digitalBusinessCardFriendlyName": "Digital Business Card"
   },
+  "previewModal": {
+    "edit": "Edit",
+    "retry": "Retry"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
@@ -1347,6 +1351,7 @@
     "settings": "Settings",
     "domains": "Domains",
     "sensitiveContent": "Sensitive Content",
+    "close": "Close",
     "displayStyle": "Display style",
     "colorMatched": "Color Matched",
     "iconColor": "Icon color",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Link na Bio",
     "digitalBusinessCardFriendlyName": "Cartão de visita digital"
   },
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Tente novamente"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "Minha página web:",
     "copyButton": "Copiar",
@@ -1347,6 +1351,7 @@
     "settings": "Ajustes",
     "domains": "Domínios",
     "sensitiveContent": "Conteúdo sensível",
+    "close": "fechar",
     "displayStyle": "Estilo de exibição",
     "colorMatched": "Cor combinada",
     "iconColor": "Cor do ícone",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1126,6 +1126,10 @@
     "linkInBioFriendlyName": "Link na biografia",
     "digitalBusinessCardFriendlyName": "Cartão de visita digital"
   },
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Repetir"
+  },
   "quickLinkBar": {
     "myWebPageLabel": "A minha página Web:",
     "copyButton": "Copiar",
@@ -1347,6 +1351,7 @@
     "settings": "Definições",
     "domains": "Domínios",
     "sensitiveContent": "Conteúdo sensível",
+    "close": "fechar",
     "displayStyle": "Estilo de exibição",
     "colorMatched": "Cor combinada",
     "iconColor": "Cor do ícone",

package/src/clients/brand-page-client.ts

@@ -11,6 +11,8 @@ export interface SaveBrandPageResponse {
   slug: string;
   canPublish: boolean;
   renameUrl?: string;
+  // Only returned for a `saveOnly` save — the signed URL for the live-preview iframe.
+  livePreviewUrl?: string;
   websiteUpsellModalViewModel: any;
 }
 

package/src/composables/useTranslate.ts

@@ -189,6 +189,7 @@ const mapTr = (key) => tr(`map.${key}`);
 const imagesSectionTr = (key) => tr(`imagesSection.${key}`);
 const imageGalleryTr = (key) => tr(`imageGallery.${key}`);
 const newPageModalTr = (key) => tr(`newPageModal.${key}`);
+const previewModalTr = (key) => tr(`previewModal.${key}`);
 const personalisationOverrideTr = (key, valuesToInterpolate = {}) =>
   tr(`personalisationOverride.${key}`, valuesToInterpolate);
 const paymentModalTr = (key, valuesToInterpolate = {}) =>
@@ -318,6 +319,7 @@ export {
   imagesSectionTr,
   imageGalleryTr,
   newPageModalTr,
+  previewModalTr,
   personalisationOverrideTr,
   paymentModalTr,
   mailingListTr,

package/src/constants/brand-page-maker.ts

@@ -6,6 +6,11 @@ export {
 export const EVENTS = {
   Save: 'save',
   Publish: 'publish',
+  Preview: 'preview',
+  // The Live Preview button needs the host's Save Progress flow to run first —
+  // sign-in for a signed-out customer, draft creation pre-purchase. Also emitted
+  // by the modal when it needs a pre-purchase save it can't perform itself.
+  LivePreviewClicked: 'livepreviewclicked',
   Initialised: 'initialised',
   Back: 'Back',
 } as const;

package/src/constants/live-preview.constants.ts

@@ -0,0 +1,15 @@
+/**
+ * Messages the framed live preview (`/_p`, web-renderer) posts up to the editor.
+ * The frame is cross-origin, so a key pressed inside it never reaches the parent.
+ * Both repos import this — a drifting literal would fail silently.
+ */
+export const LIVE_PREVIEW_MESSAGES = {
+  escape: 'bc-live-preview:escape',
+  /**
+   * Sent once the preview has actually painted — fonts settled and every image and
+   * video holding a frame. The iframe's own `load` event fires well before this
+   * (media elements release it around metadata, not buffered data), so revealing on
+   * `load` shows a half-drawn page. The editor waits for this instead.
+   */
+  ready: 'bc-live-preview:ready',
+} as const;

package/src/lib.ts

@@ -28,6 +28,7 @@ export {
   RECAPTCHA_MIN_SCORE,
 } from './brand-page/constants';
 export * from './brand-page-maker/constants';
+export { LIVE_PREVIEW_MESSAGES } from './constants/live-preview.constants';
 export * as BackgroundShapeStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-shapes';
 export * as BackgroundColorsStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-colors';
 export * as BackgroundGradientStarterKit from './brand-page-maker/components/brand-page-maker/starter-kits/background-gradients';
@@ -104,7 +105,10 @@ export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // metadata-builder / route utils.
 export { executeToolCallsAsync } from './metadata-builder/ai-metadata-executor';
 export type { ParsedToolCall } from './metadata-builder/parsers/ai-toolcall-parser';
-export { findNavItemByPageSlug } from './brand-page/utils/route.util';
+export {
+  findNavItemByPageSlug,
+  findNavItemByRelativePath,
+} from './brand-page/utils/route.util';
 // Tiptap-JSON RTE -> HTML (same converter the metadata builders use). Lets the
 // preview render the agent's raw Tiptap fields, which the renderer expects as HTML.
 export { tiptapJsonToHtml } from './metadata-builder/helpers/rte.helpers';

package/src/preview-modal.ts

@@ -0,0 +1,14 @@
+// Lightweight subpath entry: `@designcrowd/library.brand-page/preview-modal`.
+// Re-exports ONLY the stateless PreviewModal shell (previewUrl + cta, no maker
+// store), so consumers (the BrandCrowd.Nuxt search page) can open the live-preview
+// modal without pulling the full library graph (maker, TipTap, renderer). The
+// multi-entry build hoists the shared deps into a chunk shared with `index` —
+// verified maker/TipTap-free at build time.
+//
+// `setLocaleAsync` is exported alongside the component because the modal renders
+// its labels via i18n; without initialising the locale first they show as raw keys.
+export { default as PreviewModal } from './brand-page-maker/components/preview-modal/PreviewModal.vue';
+export { LIVE_PREVIEW_MESSAGES } from './constants/live-preview.constants';
+export { setLocaleAsync } from './composables/useTranslate';
+export type { UiDeviceMode } from './shared/models';
+export type { LocaleTypes } from './composables/useTranslate';

package/src/shared/common/i18n/common.de-DE.json

@@ -19,6 +19,7 @@
     "settings": "Konfig.",
     "domains": "Domains",
     "sensitiveContent": "Sensible Inhalte",
+    "close": "schließen",
 
     "displayStyle": "Anzeigestil",
     "colorMatched": "Farblich abgestimmt",

package/src/shared/common/i18n/common.es-ES.json

@@ -19,6 +19,7 @@
     "settings": "Ajustes",
     "domains": "Dominios",
     "sensitiveContent": "Contenido sensible",
+    "close": "cierra",
 
     "displayStyle": "Estilo de visualización",
     "colorMatched": "Color combinado",

package/src/shared/common/i18n/common.fr-CA.json

@@ -19,6 +19,7 @@
     "settings": "Paramètres",
     "domains": "Domaines",
     "sensitiveContent": "Contenu sensible",
+    "close": "fermer",
 
     "displayStyle": "Style d'affichage",
     "colorMatched": "Couleur assortie",

package/src/shared/common/i18n/common.fr-FR.json

@@ -19,6 +19,7 @@
     "settings": "Paramètres",
     "domains": "Domaines",
     "sensitiveContent": "Contenu sensible",
+    "close": "fermer",
 
     "displayStyle": "Style d'affichage",
     "colorMatched": "Couleur assortie",

package/src/shared/common/i18n/common.json

@@ -19,6 +19,7 @@
     "settings": "Settings",
     "domains": "Domains",
     "sensitiveContent": "Sensitive Content",
+    "close": "Close",
 
     "displayStyle": "Display style",
     "colorMatched": "Color Matched",

package/src/shared/common/i18n/common.pt-BR.json

@@ -19,6 +19,7 @@
     "settings": "Ajustes",
     "domains": "Domínios",
     "sensitiveContent": "Conteúdo sensível",
+    "close": "fechar",
 
     "displayStyle": "Estilo de exibição",
     "colorMatched": "Cor combinada",

package/src/shared/common/i18n/common.pt-PT.json

@@ -19,6 +19,7 @@
     "settings": "Definições",
     "domains": "Domínios",
     "sensitiveContent": "Conteúdo sensível",
+    "close": "fechar",
 
     "displayStyle": "Estilo de exibição",
     "colorMatched": "Cor combinada",

package/src/shared/ecommerce-settings/store/cart-store.test.ts

@@ -166,6 +166,44 @@ describe('Cart Store', () => {
     expect(cartStore.cartItems[0].enableEdit).toBe(false);
   });
 
+  // Mirrors ProductDetailModal.onAdd: the product is registered in the shop store
+  // (as the preview now does), and Add to Cart resolves the SKU + price from it. This
+  // is the in-memory add-to-cart path that the live preview exercises — no network.
+  it('adds a product to the cart via the shop store (ProductDetailModal.onAdd path)', () => {
+    shopConfigStoreMock.addProduct({
+      id: 'product-1',
+      name: 'Test Product',
+      hasVariants: false,
+      skus: [{ skuKey: 'sku-123', id: 'sku-id-1', price: 100, variant: [] }],
+    });
+
+    cartStore.addOrUpdateSkuItemToCart({
+      skuKey: 'sku-123',
+      productId: 'product-1',
+      quantity: 2,
+    });
+
+    expect(cartStore.cartItems).toHaveLength(1);
+    expect(cartStore.cartItems[0]).toEqual({
+      productId: 'product-1',
+      productSkuId: 'sku-id-1',
+      skuKey: 'sku-123',
+      unitPrice: 100,
+      quantity: 2,
+      notes: undefined,
+    });
+  });
+
+  it('does not add to the cart when the product is not in the shop store', () => {
+    cartStore.addOrUpdateSkuItemToCart({
+      skuKey: 'sku-123',
+      productId: 'missing-product',
+      quantity: 1,
+    });
+
+    expect(cartStore.cartItems).toHaveLength(0);
+  });
+
   it('should handle decimal prices correctly', () => {
     cartStore.cartItems.push({
       skuKey: 'sku-789',