@designcrowd/library.brand-page 6.1.7 → 6.1.8-ast-header

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.preview-gate.test.ts

@@ -7,16 +7,21 @@ import { EVENTS } from '../../../constants/brand-page-maker';
 // flow. Post-purchase: the modal saves through the maker store itself, so it can open
 // first and show its loader.
 //
-// BP-5873 ships POST-PURCHASE ONLY, so the pre-purchase branch of `onPreview` and its
-// `livePreviewUrl` watcher are unreachable and deliberately left uncovered here.
+// Pre-purchase: the HOST owns the save, so nothing opens until that save hands back a
+// signed URL — the `livePreviewUrl` watcher is what opens the modal.
+//
 // Mounting the whole editor to reach these branches would dwarf what is tested, so the
-// mixin's methods are driven directly.
+// mixin's methods and watcher are driven directly.
 const onPreview = (BrandPageMakerMixin as any).methods.onPreview;
+const onLivePreviewUrlChanged = (BrandPageMakerMixin as any).watch[
+  'containerStore.livePreviewUrl'
+];
 
 const createContext = (
   overrides: {
     isUserAuthenticated?: boolean;
     isPreviewModalVisible?: boolean;
+    containerStore?: { isPrePurchase: boolean; livePreviewUrl?: string };
   } = {},
 ) => ({
   isUserAuthenticated: true,
@@ -45,4 +50,64 @@ describe('BrandPageMaker.onPreview', () => {
     expect(context.$emit).toHaveBeenCalledWith(EVENTS.Preview);
     expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.LivePreviewClicked);
   });
+
+  // Opening here would mean waiting inside the modal on a host save it can't see the
+  // outcome of — which is how the loader used to hang forever (BP-5870).
+  test('pre-purchase asks the host to save and stays closed', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: 'https://stale' },
+    });
+
+    onPreview.call(context);
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.LivePreviewClicked);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+    // A stale URL from an earlier preview must not open the frame on the next click.
+    expect(context.containerStore.livePreviewUrl).toBeUndefined();
+  });
+});
+
+describe('BrandPageMaker livePreviewUrl watcher', () => {
+  test('opens the preview once the host save hands back a URL', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(
+      context,
+      'https://brand.site/_p/request?token=x',
+    );
+
+    expect(context.isPreviewModalVisible).toBe(true);
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.Preview);
+  });
+
+  // A failed save or a customer sent to register never sets a URL, and the editor has
+  // already surfaced that — so nothing should open.
+  test('stays closed when the save produced no URL', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(context, undefined);
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+  });
+
+  // Post-purchase opens the modal itself, so the watcher must not double-open it.
+  test('ignores post-purchase, which opens the modal itself', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: false, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(
+      context,
+      'https://brand.site/_p/request?token=x',
+    );
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+  });
 });

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -152,6 +152,7 @@
 
     <PreviewModalWithState
       :visible="isPreviewModalVisible"
+      @edit="onClosePreview"
       @publish="onPreviewPublish"
       @close="onClosePreview"
     />

package/src/brand-page-maker/components/index.ts

@@ -5,3 +5,4 @@ export { default as SensitiveContent } from './sensitive-content/SensitiveConten
 export { default as SeoPageSettings } from './seo-settings/SeoPageSettings.vue';
 export { default as GoogleAnalytics } from './google-analytics/GoogleAnalytics.vue';
 export { default as PublishBrandPageModalWithState } from '@shared/publish-brand-page-with-state/PublishBrandPageModalWithState.vue';
+export { default as PreviewModalWithState } from './preview-modal/PreviewModalWithState.vue';

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.test.ts

@@ -2,12 +2,11 @@ import { describe, test, expect, beforeEach, vi } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
 import { flushPromises, shallowMount } from '@vue/test-utils';
 import PreviewModalWithState from './PreviewModalWithState.vue';
-import PreviewModal from './PreviewModal.vue';
+import LivePreviewModal from '@shared/components/live-preview-modal/LivePreviewModal.vue';
 import {
   useBrandPageContainerStore,
-  useUiStore,
+  useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
-import { UI_SCREENSIZE_MODES } from '@shared/models';
 
 const PREVIEW_URL = 'https://brand.site/_p/request?token=signed';
 
@@ -17,7 +16,7 @@ const mountModal = () =>
   });
 
 const modalProps = (wrapper: ReturnType<typeof mountModal>) =>
-  wrapper.findComponent(PreviewModal).props();
+  wrapper.findComponent(LivePreviewModal).props();
 
 describe('PreviewModalWithState', () => {
   let containerStore: ReturnType<typeof useBrandPageContainerStore>;
@@ -44,7 +43,6 @@ describe('PreviewModalWithState', () => {
 
     const props = modalProps(wrapper);
 
-    expect(props.loading).toBe(false);
     expect(props.errored).toBe(false);
     expect(props.previewUrl).toBe(PREVIEW_URL);
   });
@@ -98,9 +96,9 @@ describe('PreviewModalWithState', () => {
     expect(props.previewUrl).toBe('');
   });
 
-  test('on a phone the preview fills the screen and the device toggle is gone', async () => {
-    useUiStore().screenSizeMode = UI_SCREENSIZE_MODES.mobile;
-
+  // The shell now owns device state (toggle visibility + the small-screen desktop
+  // force); the wrapper only seeds the page type's natural default.
+  test('seeds the shell with the page type default device mode', async () => {
     vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
       saved: true,
       canPublish: true,
@@ -111,37 +109,8 @@ describe('PreviewModalWithState', () => {
     await wrapper.setProps({ visible: true });
     await flushPromises();
 
-    const props = modalProps(wrapper);
-
-    // Not 'mobile' — that mode draws a phone bezel, which on a phone would be a
-    // device frame inside a device.
-    expect(props.deviceMode).toBe('desktop');
-    expect(props.showDeviceToggle).toBe(false);
-  });
-
-  // The mobile work must not reach desktop — the toggle is still there and it
-  // still drives the frame.
-  test('desktop keeps the device toggle and honours the viewport it picks', async () => {
-    useUiStore().screenSizeMode = UI_SCREENSIZE_MODES.desktop;
-
-    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
-      saved: true,
-      canPublish: true,
-    } as any);
-
-    const wrapper = mountModal();
-
-    await wrapper.setProps({ visible: true });
-    await flushPromises();
-
-    expect(modalProps(wrapper).showDeviceToggle).toBe(true);
-
-    await wrapper
-      .findComponent(PreviewModal)
-      .vm.$emit('update:deviceMode', 'mobile');
-    await flushPromises();
-
-    expect(modalProps(wrapper).deviceMode).toBe('mobile');
+    // A link-in-bio (default) page is mobile-first.
+    expect(modalProps(wrapper).defaultDeviceMode).toBe('mobile');
   });
 
   // The preview sits at z-1000 and drops to z-40 for a host flow modal. Tracking
@@ -180,7 +149,7 @@ describe('PreviewModalWithState', () => {
     await wrapper.setProps({ visible: true });
     await flushPromises();
 
-    await wrapper.findComponent(PreviewModal).vm.$emit('publish');
+    await wrapper.findComponent(LivePreviewModal).vm.$emit('publish');
     await flushPromises();
 
     // The host (BrandPageMaker → bc-net) runs the actual publish flow so
@@ -207,13 +176,42 @@ describe('PreviewModalWithState', () => {
 
     expect(showSaveSuccessMessage).not.toHaveBeenCalled();
 
-    await wrapper.findComponent(PreviewModal).vm.$emit('close');
+    await wrapper.findComponent(LivePreviewModal).vm.$emit('close');
     await flushPromises();
 
     expect(wrapper.emitted('close')).toHaveLength(1);
     expect(showSaveSuccessMessage).toHaveBeenCalledOnce();
   });
 
+  // Pre-purchase skips saveBrandPage in openPreview (the host already saved), so
+  // containerStore.triggerSaveSuccessMessage is never armed for showSaveSuccessMessage
+  // to gate on — announce the host's save directly instead, same as it does elsewhere.
+  test('raises the save banner directly on close when pre-purchase', async () => {
+    containerStore.isPrePurchase = true;
+
+    const showSaveSuccessMessage = vi.spyOn(
+      containerStore,
+      'showSaveSuccessMessage',
+    );
+    const enqueueSaveSuccessMessage = vi
+      .spyOn(useBrandPageMakerStore(), 'enqueueSaveSuccessMessage')
+      .mockResolvedValue(undefined);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    await wrapper.findComponent(LivePreviewModal).vm.$emit('close');
+    await flushPromises();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+    expect(enqueueSaveSuccessMessage).toHaveBeenCalledWith({
+      noDescription: true,
+    });
+    expect(showSaveSuccessMessage).not.toHaveBeenCalled();
+  });
+
   // BP-5957: the modal uppercases its labels on BrandCrowd, not Design.com.
   test.each([true, false])(
     'passes isDesignCom=%s to the modal',
@@ -223,4 +221,26 @@ describe('PreviewModalWithState', () => {
       expect(modalProps(mountModal()).isDesignCom).toBe(isDesignCom);
     },
   );
+
+  // The editor keeps its publish CTA with no prop; other surfaces override it.
+  test('defaults the CTA to publish so the editor is unchanged', () => {
+    expect(modalProps(mountModal()).cta).toBe('publish');
+  });
+
+  test('passes the surface CTA through to the shell', () => {
+    const wrapper = shallowMount(PreviewModalWithState, {
+      props: { visible: false, cta: 'edit' },
+    });
+
+    expect(wrapper.findComponent(LivePreviewModal).props().cta).toBe('edit');
+  });
+
+  // Manage surface: the shell's Edit CTA is relayed so the host navigates to the editor.
+  test('relays the shell edit CTA to the host', async () => {
+    const wrapper = mountModal();
+
+    await wrapper.findComponent(LivePreviewModal).vm.$emit('edit');
+
+    expect(wrapper.emitted('edit')).toHaveLength(1);
+  });
 });

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.vue

@@ -1,19 +1,15 @@
 <template>
-  <PreviewModal
+  <LivePreviewModal
     data-component="preview-modal-with-state"
     :visible="visible"
     :preview-url="previewUrl"
-    :edit-label="previewModalTr('edit')"
     :cta="cta"
-    :device-mode="effectiveDeviceMode"
-    :show-device-toggle="!isMobileScreenSize"
+    :default-device-mode="defaultDeviceMode"
     :is-design-com="containerStore.isDesignCom"
-    :loading="loading"
     :errored="errored"
     :publishing="publishing"
     :flow-modal-open="isFlowModalOpen"
-    @update:device-mode="deviceMode = $event"
-    @edit="onClose"
+    @edit="onEdit"
     @publish="onPublish"
     @retry="openPreview"
     @close="onClose"
@@ -22,57 +18,42 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, type PropType } from 'vue';
-import PreviewModal from './PreviewModal.vue';
+import LivePreviewModal from '@shared/components/live-preview-modal/LivePreviewModal.vue';
+import {
+  getDefaultPreviewDeviceMode,
+  type LivePreviewCta,
+} from '@shared/components/live-preview-modal/live-preview-modal.utils';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
-  useUiStore,
 } from '@brand-page-maker/stores';
-import { BRAND_PAGE_TYPES } from '@brand-page';
-import { previewModalTr } from '@src/composables/useTranslate';
-import { UI_SCREENSIZE_MODES, type UiDeviceMode } from '@shared/models';
+import type { UiDeviceMode } from '@shared/models';
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
-  cta: {
-    type: String as PropType<'publish' | 'edit' | 'none'>,
-    default: 'publish',
-  },
+  // Per-surface header CTA; defaults to 'publish' so the editor is unchanged.
+  cta: { type: String as PropType<LivePreviewCta>, default: 'publish' },
 });
 
-const emit = defineEmits<{ close: []; publish: [] }>();
+const emit = defineEmits<{ close: []; publish: []; edit: [] }>();
 
 const containerStore = useBrandPageContainerStore();
 const makerStore = useBrandPageMakerStore();
-const uiStore = useUiStore();
-
-const isMobileScreenSize = computed(
-  () => uiStore.screenSizeMode === UI_SCREENSIZE_MODES.mobile,
-);
 
 // The preview must step back for any modal opening over the editor.
 const isFlowModalOpen = computed(() => containerStore.isAnyModalVisible);
 
-// brandSite is desktop-primary; brand-page and brand-contact are mobile-first.
-const defaultDeviceMode = (): UiDeviceMode =>
-  makerStore.brandPageType === BRAND_PAGE_TYPES.brandSite
-    ? 'desktop'
-    : 'mobile';
-
-const deviceMode = ref<UiDeviceMode>(defaultDeviceMode());
-
-const effectiveDeviceMode = computed<UiDeviceMode>(() =>
-  isMobileScreenSize.value ? 'desktop' : deviceMode.value,
+// Page type's default; the shell handles the small-screen case itself.
+const defaultDeviceMode = computed<UiDeviceMode>(() =>
+  getDefaultPreviewDeviceMode(makerStore.brandPageType),
 );
 
 const previewUrl = ref('');
-const loading = ref(false);
 const errored = ref(false);
 const publishing = ref(false);
 
 // Save first so the preview is never stale; saveOnly stops a live site republishing.
 const openPreview = async (): Promise<void> => {
-  loading.value = true;
   errored.value = false;
   previewUrl.value = '';
 
@@ -82,7 +63,6 @@ const openPreview = async (): Promise<void> => {
 
     if (!result || !result.saved) {
       errored.value = true;
-      loading.value = false;
 
       return;
     }
@@ -93,22 +73,38 @@ const openPreview = async (): Promise<void> => {
 
   if (!url) {
     errored.value = true;
-    loading.value = false;
 
     return;
   }
 
   previewUrl.value = url;
-  loading.value = false;
 };
 
-// The preview covers the editor, so its save is announced on the way out. No-ops
-// when the save wasn't ours (pre-purchase) or was already announced (publish).
+// The preview covers the editor, so its save is announced on the way out — from either
+// exit. Pre-purchase already saved before the preview opened (host-owned), so there's
+// nothing armed on containerStore for it to gate — announce that save directly instead.
+// Post-purchase routes through the store's own armed flag (no-ops if it wasn't ours, or
+// was already announced by publish).
+const announceExit = async (): Promise<void> => {
+  if (containerStore.isPrePurchase) {
+    await makerStore.enqueueSaveSuccessMessage({ noDescription: true });
+  } else {
+    await containerStore.showSaveSuccessMessage();
+  }
+
+  await makerStore.showNextNotificationMessage();
+};
+
 const onClose = async (): Promise<void> => {
   emit('close');
 
-  await containerStore.showSaveSuccessMessage();
-  await makerStore.showNextNotificationMessage();
+  await announceExit();
+};
+
+const onEdit = async (): Promise<void> => {
+  emit('edit');
+
+  await announceExit();
 };
 
 const onPublish = (): void => {
@@ -121,7 +117,6 @@ watch(
   () => props.visible,
   (isVisible) => {
     if (isVisible) {
-      deviceMode.value = defaultDeviceMode();
       openPreview();
     } else {
       previewUrl.value = '';

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

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Link in der Biografie",
     "digitalBusinessCardFriendlyName": "Digitale Visitenkarte"
   },
-  "previewModal": {
-    "edit": "Bearbeiten",
-    "retry": "Erneut versuchen"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "Meine Webseite:",
     "copyButton": "Kopieren",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Website bearbeiten",
+    "backToEditor": "Zurück zum Editor",
+    "retry": "Erneut versuchen"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Sind Sie sicher?",
     "noLabel": "Nein",

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

@@ -1126,10 +1126,6 @@
     "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",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Edita el sitio web",
+    "backToEditor": "Volver al editor",
+    "retry": "Vuelve a intentarlo"
+  },
   "confirmModal": {
     "confirmMessageTitle": "¿Estás seguro?",
     "noLabel": "No",

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

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Lien dans la bio",
     "digitalBusinessCardFriendlyName": "Carte de visite numérique"
   },
-  "previewModal": {
-    "edit": "Éditer",
-    "retry": "Réessayez"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Modifier le site Web",
+    "backToEditor": "Retour à l'éditeur",
+    "retry": "Réessayez"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Êtes-vous sûr ?",
     "noLabel": "Non",

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

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Lien dans la bio",
     "digitalBusinessCardFriendlyName": "Carte de visite numérique"
   },
-  "previewModal": {
-    "edit": "Éditer",
-    "retry": "Réessayez"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Modifier le site Web",
+    "backToEditor": "Retour à l'éditeur",
+    "retry": "Réessayez"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Êtes-vous sûr ?",
     "noLabel": "Non",

package/src/bundles/bundled-translations.json

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Link in Bio",
     "digitalBusinessCardFriendlyName": "Digital Business Card"
   },
-  "previewModal": {
-    "edit": "Edit",
-    "retry": "Retry"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Edit Website",
+    "backToEditor": "Back to Editor",
+    "retry": "Retry"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Are you sure?",
     "noLabel": "No",
@@ -1832,6 +1833,10 @@
   },
   "pageSettings": {
     "headerSettings": "Header Settings",
+    "navigationSectionTitle": "Navigation",
+    "headerSectionTitle": "Header",
+    "logoSectionTitle": "Logo",
+    "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",
     "pages": "Pages",

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

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Link na Bio",
     "digitalBusinessCardFriendlyName": "Cartão de visita digital"
   },
-  "previewModal": {
-    "edit": "Editar",
-    "retry": "Tente novamente"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "Minha página web:",
     "copyButton": "Copiar",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Editar site",
+    "backToEditor": "Voltar para o editor",
+    "retry": "Tente novamente"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Tem a certeza?",
     "noLabel": "Não",

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

@@ -1126,10 +1126,6 @@
     "linkInBioFriendlyName": "Link na biografia",
     "digitalBusinessCardFriendlyName": "Cartão de visita digital"
   },
-  "previewModal": {
-    "edit": "Editar",
-    "retry": "Repetir"
-  },
   "quickLinkBar": {
     "myWebPageLabel": "A minha página Web:",
     "copyButton": "Copiar",
@@ -1429,6 +1425,11 @@
     "contactFormFieldRequired": "Please fill out this field.",
     "contactFormFieldTooLong": "The field you entered is too long. The maximum length is {{MAX_LENGTH}}."
   },
+  "previewModal": {
+    "edit": "Editar Website",
+    "backToEditor": "Voltar ao Editor",
+    "retry": "Repetir"
+  },
   "confirmModal": {
     "confirmMessageTitle": "Tem a certeza?",
     "noLabel": "Não",

package/src/lib.ts

@@ -57,6 +57,7 @@ export {
   UrlSettings,
   GoogleAnalytics,
   PublishBrandPageModalWithState,
+  PreviewModalWithState,
   SensitiveContent,
   UseExistingDomainModal,
 } from './brand-page-maker/components';