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

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

@@ -0,0 +1,226 @@
+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 {
+  useBrandPageContainerStore,
+  useUiStore,
+} from '@brand-page-maker/stores';
+import { UI_SCREENSIZE_MODES } from '@shared/models';
+
+const PREVIEW_URL = 'https://brand.site/_p/request?token=signed';
+
+const mountModal = () =>
+  shallowMount(PreviewModalWithState, {
+    props: { visible: false },
+  });
+
+const modalProps = (wrapper: ReturnType<typeof mountModal>) =>
+  wrapper.findComponent(PreviewModal).props();
+
+describe('PreviewModalWithState', () => {
+  let containerStore: ReturnType<typeof useBrandPageContainerStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    containerStore = useBrandPageContainerStore();
+    containerStore.isProduction = false;
+    containerStore.designDraftToken = 'draft-123';
+    containerStore.livePreviewUrl = PREVIEW_URL;
+  });
+
+  test('saves first, then points the iframe at the just-saved draft', async () => {
+    const save = vi
+      .spyOn(containerStore, 'saveBrandPage')
+      .mockResolvedValue({ saved: true, canPublish: true } as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    expect(save).toHaveBeenCalledOnce();
+
+    const props = modalProps(wrapper);
+
+    expect(props.loading).toBe(false);
+    expect(props.errored).toBe(false);
+    expect(props.previewUrl).toBe(PREVIEW_URL);
+  });
+
+  test('saves without publishing, so previewing a live site never republishes it', async () => {
+    containerStore.brandPageStatus = 'Published';
+
+    const save = vi
+      .spyOn(containerStore, 'saveBrandPage')
+      .mockResolvedValue({ saved: true, canPublish: true } as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    expect(containerStore.isPublished).toBe(true);
+    expect(save).toHaveBeenCalledWith({ saveOnly: true });
+  });
+
+  test('does not open the preview when the save fails', async () => {
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue(false as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    const props = modalProps(wrapper);
+
+    expect(props.errored).toBe(true);
+    expect(props.previewUrl).toBe('');
+  });
+
+  test('errors when the save returns no preview url', async () => {
+    containerStore.livePreviewUrl = undefined;
+
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+      saved: true,
+      canPublish: true,
+    } as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    const props = modalProps(wrapper);
+
+    expect(props.errored).toBe(true);
+    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;
+
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+      saved: true,
+      canPublish: true,
+    } as any);
+
+    const wrapper = mountModal();
+
+    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');
+  });
+
+  // The preview sits at z-1000 and drops to z-40 for a host flow modal. Tracking
+  // only the publish modal left the "Upgrade to publish" prompt stranded behind the
+  // preview, so publishing from inside the preview couldn't be completed.
+  test.each([
+    ['publish options', 'isPublishModalVisible'],
+    ['upgrade prompt', 'isUpgradeModalVisible'],
+  ])("steps back so the host's %s modal stacks on top", async (_, flag) => {
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+      saved: true,
+      canPublish: true,
+    } as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    expect(modalProps(wrapper).flowModalOpen).toBe(false);
+
+    (containerStore as any)[flag] = true;
+    await flushPromises();
+
+    expect(modalProps(wrapper).flowModalOpen).toBe(true);
+  });
+
+  test('publish is delegated to the host publish flow', async () => {
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+      saved: true,
+      canPublish: true,
+    } as any);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    await wrapper.findComponent(PreviewModal).vm.$emit('publish');
+    await flushPromises();
+
+    // The host (BrandPageMaker → bc-net) runs the actual publish flow so
+    // pre-purchase reaches checkout; the wrapper just relays the intent.
+    expect(wrapper.emitted('publish')).toHaveLength(1);
+    expect(modalProps(wrapper).publishing).toBe(true);
+  });
+
+  // Announced on the way out, not while the preview covers the editor.
+  test('raises the deferred save banner when the preview closes', async () => {
+    vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+      saved: true,
+      canPublish: true,
+    } as any);
+
+    const showSaveSuccessMessage = vi
+      .spyOn(containerStore, 'showSaveSuccessMessage')
+      .mockResolvedValue(undefined);
+
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: true });
+    await flushPromises();
+
+    expect(showSaveSuccessMessage).not.toHaveBeenCalled();
+
+    await wrapper.findComponent(PreviewModal).vm.$emit('close');
+    await flushPromises();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+    expect(showSaveSuccessMessage).toHaveBeenCalledOnce();
+  });
+
+  // BP-5957: the modal uppercases its labels on BrandCrowd, not Design.com.
+  test.each([true, false])(
+    'passes isDesignCom=%s to the modal',
+    (isDesignCom) => {
+      containerStore.isDesignCom = isDesignCom;
+
+      expect(modalProps(mountModal()).isDesignCom).toBe(isDesignCom);
+    },
+  );
+});

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

@@ -0,0 +1,149 @@
+<template>
+  <PreviewModal
+    data-component="preview-modal-with-state"
+    :visible="visible"
+    :preview-url="previewUrl"
+    :edit-label="previewModalTr('edit')"
+    :cta="cta"
+    :device-mode="effectiveDeviceMode"
+    :show-device-toggle="!isMobileScreenSize"
+    :is-design-com="containerStore.isDesignCom"
+    :loading="loading"
+    :errored="errored"
+    :publishing="publishing"
+    :flow-modal-open="isFlowModalOpen"
+    @update:device-mode="deviceMode = $event"
+    @edit="onClose"
+    @publish="onPublish"
+    @retry="openPreview"
+    @close="onClose"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, type PropType } from 'vue';
+import PreviewModal from './PreviewModal.vue';
+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';
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  cta: {
+    type: String as PropType<'publish' | 'edit' | 'none'>,
+    default: 'publish',
+  },
+});
+
+const emit = defineEmits<{ close: []; publish: [] }>();
+
+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,
+);
+
+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 = '';
+
+  // Pre-purchase the host owns the draft and already saved it.
+  if (!containerStore.isPrePurchase) {
+    const result = await containerStore.saveBrandPage({ saveOnly: true });
+
+    if (!result || !result.saved) {
+      errored.value = true;
+      loading.value = false;
+
+      return;
+    }
+  }
+
+  // The save hands back the signed preview URL — no second call needed.
+  const url = containerStore.livePreviewUrl;
+
+  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).
+const onClose = async (): Promise<void> => {
+  emit('close');
+
+  await containerStore.showSaveSuccessMessage();
+  await makerStore.showNextNotificationMessage();
+};
+
+const onPublish = (): void => {
+  // Route through the host's publish flow so pre-purchase still reaches checkout.
+  publishing.value = true;
+  emit('publish');
+};
+
+watch(
+  () => props.visible,
+  (isVisible) => {
+    if (isVisible) {
+      deviceMode.value = defaultDeviceMode();
+      openPreview();
+    } else {
+      previewUrl.value = '';
+      errored.value = false;
+      publishing.value = false;
+    }
+  },
+);
+
+// Clear the publishing overlay once the host's publish flow has taken over.
+watch(
+  () => containerStore.isSaving,
+  (saving, wasSaving) => {
+    if (publishing.value && wasSaving && !saving) {
+      publishing.value = false;
+    }
+  },
+);
+
+watch(isFlowModalOpen, (isOpen) => {
+  if (publishing.value && isOpen) {
+    publishing.value = false;
+  }
+});
+</script>

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.de-DE.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Bearbeiten",
+    "retry": "Erneut versuchen"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.es-ES.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Vuelve a intentarlo"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.fr-CA.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Éditer",
+    "retry": "Réessayez"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.fr-FR.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Éditer",
+    "retry": "Réessayez"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Edit",
+    "retry": "Retry"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.pt-BR.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Tente novamente"
+  }
+}

package/src/brand-page-maker/components/preview-modal/i18n/preview-modal.pt-PT.json

@@ -0,0 +1,6 @@
+{
+  "previewModal": {
+    "edit": "Editar",
+    "retry": "Repetir"
+  }
+}

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -63,7 +63,7 @@
       <div class="style-editor">
         <Dropdown
           ref="textStyleTypeDropdownRef"
-          v-click-outside="(e: MouseEvent) => clickOutsideTextStyle(e)"
+          v-click-outside="(e: Event) => clickOutsideTextStyle(e)"
           data-test-tag="text-style-dropdown"
           class="style-editor-button style-editor-button-textstyle"
           :title="
@@ -96,7 +96,7 @@
         </Dropdown>
         <Dropdown
           ref="fontStyleDropdownRef"
-          v-click-outside="(e: MouseEvent) => clickOutsideFontStyle(e)"
+          v-click-outside="(e: Event) => clickOutsideFontStyle(e)"
           data-test-tag="font-style-dropdown"
           :title="fontSettings.selectedFont"
           icon-size="xs"
@@ -305,7 +305,7 @@
       <div
         v-if="isSpacingDropdownOpen"
         ref="spacingPopupRef"
-        v-click-outside="(e: MouseEvent) => clickOutsideTextSpacing(e)"
+        v-click-outside="(e: Event) => clickOutsideTextSpacing(e)"
         class="popup-container tw-max-w-[310px] spacing-popup"
         data-test-tag="spacing-toolbar"
       >
@@ -335,7 +335,7 @@
       <div
         v-if="isHyperlinkPopupOpen"
         ref="linkPopupRef"
-        v-click-outside="(e: MouseEvent) => clickOutsideHyperlink(e)"
+        v-click-outside="(e: Event) => clickOutsideHyperlink(e)"
         class="popup-container tw-w-[300px] hyperlink-popup"
         data-test-tag="hyperlink-toolbar"
       >
@@ -886,31 +886,43 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
   textStyleTypeDropdownRef.value?.hideMenu();
 };
 
-// Event handlers for dropdowns and popups
-const clickOutsideTextStyle = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.toolbar-editor-button')) {
+// Event handlers for dropdowns and popups.
+//
+// `v-click-outside` also fires these for a WINDOW BLUR, not just a click: its
+// `detectIframe` option (on by default) listens for blur to catch "focus moved into
+// an iframe", and hands the blur event straight to this handler. A blur event's
+// target is `window`, which has no `closest` — so reading it as an element threw
+// `target.closest is not a function`. Latent until the editor gained an iframe (the
+// live preview), which is exactly the case `detectIframe` exists to report.
+//
+// Focus leaving for an iframe IS outside the toolbar, so a non-element target must
+// close the menu, not bail out.
+const isOutside = (event: Event, selector: string): boolean => {
+  const { target } = event;
+
+  return !(target instanceof Element) || !target.closest(selector);
+};
+
+const clickOutsideTextStyle = (event: Event) => {
+  if (isOutside(event, '.toolbar-editor-button')) {
     textStyleTypeDropdownRef.value?.hideMenu();
   }
 };
 
-const clickOutsideFontStyle = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.toolbar-editor-button')) {
+const clickOutsideFontStyle = (event: Event) => {
+  if (isOutside(event, '.toolbar-editor-button')) {
     fontStyleDropdownRef.value?.hideMenu();
   }
 };
 
-const clickOutsideTextSpacing = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.spacing-popup')) {
+const clickOutsideTextSpacing = (event: Event) => {
+  if (isOutside(event, '.spacing-popup')) {
     isSpacingDropdownOpen.value = false;
   }
 };
 
-const clickOutsideHyperlink = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (!target.closest('.hyperlink-popup')) {
+const clickOutsideHyperlink = (event: Event) => {
+  if (isOutside(event, '.hyperlink-popup')) {
     isHyperlinkPopupOpen.value = false;
   }
 };

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -92,6 +92,7 @@ export const UPGRADE_CTA_LOCATIONS = {
   ADD_CONTENT: 'add_content',
   EDITOR_PUBLISH_TOP: 'editor_publish_top',
   EDITOR_PUBLISH_BOTTOM: 'editor_publish_bottom',
+  EDITOR_PREVIEW_PUBLISH: 'editor_preview_publish',
   SLUG_CHANGE_MAKER_SIDEBAR_SETTINGS: 'slug_change_maker_sidebar_settings',
   SLUG_CHANGE_MANAGE_PAGE: 'slug_change_manage_page',
   GOOGLE_ADSENSE: 'google_adsense',

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

@@ -0,0 +1,106 @@
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import brandPageClient from '../../../clients/brand-page-client';
+
+vi.mock('../../../clients/brand-page-client', () => ({
+  default: {
+    saveBrandPageAsync: vi.fn(),
+  },
+}));
+
+const SAVED = {
+  designDraftToken: 'draft-123',
+  status: 'Published',
+  slug: 'my-site',
+  canPublish: true,
+};
+
+describe('brand-page-container-store saveBrandPage', () => {
+  let store: ReturnType<typeof useBrandPageContainerStore>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setActivePinia(createPinia());
+
+    store = useBrandPageContainerStore();
+    store.designDraftToken = 'draft-123';
+    store.brandPageStatus = 'Published';
+
+    // The export is exercised by its own tests; stub it so these cover only the
+    // endpoint choice.
+    vi.spyOn(store, 'exportDesignAsync').mockResolvedValue({
+      shouldPublish: true,
+    } as any);
+
+    vi.mocked(brandPageClient.saveBrandPageAsync).mockResolvedValue(
+      SAVED as any,
+    );
+  });
+
+  const requestBody = () =>
+    vi.mocked(brandPageClient.saveBrandPageAsync).mock.calls[0][1];
+
+  test('saveOnly asks a published site not to republish', async () => {
+    await store.saveBrandPage({ saveOnly: true });
+
+    expect(brandPageClient.saveBrandPageAsync).toHaveBeenCalledOnce();
+    expect(requestBody()).toMatchObject({ saveOnly: true });
+  });
+
+  test('a normal save leaves saveOnly off', async () => {
+    await store.saveBrandPage();
+
+    expect(requestBody()).toMatchObject({ saveOnly: false });
+  });
+
+  // The preview covers the editor, so the banner would land behind it. The trigger
+  // stays UP so the preview can raise it on close.
+  test('saveOnly defers the save-success banner instead of raising it', async () => {
+    const showSaveSuccessMessage = vi
+      .spyOn(store, 'showSaveSuccessMessage')
+      .mockResolvedValue(undefined);
+
+    await store.saveBrandPage({ saveOnly: true });
+
+    expect(showSaveSuccessMessage).not.toHaveBeenCalled();
+    expect(store.triggerSaveSuccessMessage).toBe(true);
+  });
+
+  test('a normal save still raises the banner', async () => {
+    const showSaveSuccessMessage = vi
+      .spyOn(store, 'showSaveSuccessMessage')
+      .mockResolvedValue(undefined);
+
+    await store.saveBrandPage();
+
+    expect(showSaveSuccessMessage).toHaveBeenCalled();
+    expect(store.triggerSaveSuccessMessage).toBe(true);
+  });
+
+  // The live preview is a full-viewport takeover that steps back on this getter, so a
+  // modal missing from it opens BEHIND the preview — the bug this replaced, three times.
+  test.each([
+    ['isPublishModalVisible'],
+    ['isUpgradeModalVisible'],
+    ['isContextualUpgradeModalVisible'],
+    ['isStripeOnboardingModalVisible'],
+    ['isHostModalVisible'],
+  ])('isAnyModalVisible covers %s', (flag) => {
+    expect(store.isAnyModalVisible).toBe(false);
+
+    store[flag] = true;
+
+    expect(store.isAnyModalVisible).toBe(true);
+  });
+
+  test('saveOnly does not change shouldPublish', async () => {
+    await store.saveBrandPage({ saveOnly: true });
+
+    // `shouldPublish` stays derived from isPublished. Sending false would flip
+    // BrandPageService's `!shouldPublish` branch and start firing a
+    // "brand page saved" marketing event on every preview open.
+    expect(store.exportDesignAsync).toHaveBeenCalledWith();
+    expect(requestBody()).toMatchObject({ shouldPublish: true });
+  });
+});