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

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

@@ -0,0 +1,162 @@
+import { describe, test, expect, afterEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import PreviewModal from './PreviewModal.vue';
+import { LIVE_PREVIEW_MESSAGES } from '@src/constants/live-preview.constants';
+
+vi.mock('@designcrowd/fe-shared-lib', () => ({
+  Button: { template: '<button />' },
+  Icon: { template: '<span />' },
+  Loader: { template: '<span />' },
+}));
+
+vi.mock('@src/composables/useTranslate', () => ({
+  actionBarTr: (key: string) => key,
+  commonTr: (key: string) => key,
+  constantsTr: (key: string) => key,
+  errorTr: (key: string) => key,
+  previewModalTr: (key: string) => key,
+}));
+
+const PREVIEW_URL = 'https://brand.site/_p/request?token=signed';
+
+const mountModal = (props: Record<string, unknown> = {}) =>
+  mount(PreviewModal, {
+    attachTo: document.body,
+    props: { visible: true, previewUrl: PREVIEW_URL, ...props },
+  });
+
+const loader = () => document.body.querySelector('[data-test-preview-loading]');
+const frame = () =>
+  document.body.querySelector<HTMLIFrameElement>(
+    '[data-test-preview-iframe]',
+  ) as HTMLIFrameElement;
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+const postReady = () =>
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: { type: LIVE_PREVIEW_MESSAGES.ready },
+      origin: 'https://brand.site',
+      source: frame().contentWindow,
+    }),
+  );
+
+describe('PreviewModal', () => {
+  // `load` fires while a banner video still has no displayable frame, so revealing
+  // on it showed an empty banner. Only the preview's own `ready` reveals now.
+  test('holds the loader through frame load, and reveals on ready', async () => {
+    const wrapper = mountModal();
+
+    expect(loader()).not.toBeNull();
+    expect(frame().className).toContain('tw-opacity-0');
+
+    await frame().dispatchEvent(new Event('load'));
+    await wrapper.vm.$nextTick();
+
+    expect(loader()).not.toBeNull();
+    expect(frame().className).toContain('tw-opacity-0');
+
+    postReady();
+    await wrapper.vm.$nextTick();
+
+    expect(loader()).toBeNull();
+    expect(frame().className).not.toContain('tw-opacity-0');
+  });
+
+  // A preview that never reports must not strand the customer on a spinner.
+  test('reveals on the fallback timer when ready never arrives', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const wrapper = mountModal();
+
+      await frame().dispatchEvent(new Event('load'));
+      await wrapper.vm.$nextTick();
+      expect(loader()).not.toBeNull();
+
+      await vi.advanceTimersByTimeAsync(15_000);
+      await wrapper.vm.$nextTick();
+
+      expect(loader()).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  // Every open gets a freshly signed URL, so the reveal must reset each time — the
+  // new document has to report itself painted on its own account.
+  test('a new preview url puts the loader back', async () => {
+    const wrapper = mountModal();
+
+    await frame().dispatchEvent(new Event('load'));
+    postReady();
+    await wrapper.vm.$nextTick();
+    expect(loader()).toBeNull();
+
+    await wrapper.setProps({ previewUrl: `${PREVIEW_URL}-2` });
+
+    expect(loader()).not.toBeNull();
+  });
+
+  test('escape closes the preview', async () => {
+    const wrapper = mountModal();
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  // Once focus is in the frame, Escape lands there instead and is posted back up.
+  test('escape from inside the frame closes the preview', async () => {
+    const wrapper = mountModal();
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { type: LIVE_PREVIEW_MESSAGES.escape },
+        origin: 'https://brand.site',
+        source: frame().contentWindow,
+      }),
+    );
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  test('ignores a message from anywhere but the preview frame', async () => {
+    const wrapper = mountModal();
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { type: LIVE_PREVIEW_MESSAGES.escape },
+        origin: 'https://evil.example',
+        source: window,
+      }),
+    );
+
+    expect(wrapper.emitted('close')).toBeUndefined();
+  });
+
+  // Escape must not pull the preview out from under either.
+  test.each([['publishing'], ['flowModalOpen']])(
+    'escape is ignored while %s',
+    (prop) => {
+      const wrapper = mountModal({ [prop]: true });
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+      expect(wrapper.emitted('close')).toBeUndefined();
+    },
+  );
+
+  test('stops listening once closed', async () => {
+    const wrapper = mountModal();
+
+    await wrapper.setProps({ visible: false });
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(wrapper.emitted('close')).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,347 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      data-component="preview-modal"
+      class="c-preview-modal tw-fixed tw-inset-0 tw-flex tw-flex-col tw-bg-grayscale-800"
+      :class="flowModalOpen ? 'tw-z-40' : 'tw-z-[1000]'"
+    >
+      <header
+        class="tw-flex tw-items-center tw-justify-between tw-h-14 tw-px-4 tw-bg-grayscale-800 tw-text-white tw-box-border tw-shrink-0"
+      >
+        <div
+          class="tw-flex tw-items-center"
+          :class="{ 'tw-w-1/3': showDeviceToggle }"
+        >
+          <button
+            type="button"
+            data-test-preview-close-button
+            class="c-preview-modal__close"
+            :class="{ 'tw-uppercase': !isDesignCom }"
+            @click="$emit('close')"
+          >
+            {{ commonTr('close') }}
+          </button>
+        </div>
+
+        <div
+          v-if="showDeviceToggle"
+          class="tw-flex tw-items-center tw-justify-center tw-gap-3 tw-w-1/3"
+        >
+          <button
+            type="button"
+            data-test-preview-device-desktop
+            class="c-preview-modal__device"
+            :class="{
+              'c-preview-modal__device--active': deviceMode === 'desktop',
+            }"
+            :aria-pressed="deviceMode === 'desktop'"
+            @click="$emit('update:deviceMode', 'desktop')"
+          >
+            <Icon name="desktop" />
+          </button>
+          <button
+            type="button"
+            data-test-preview-device-mobile
+            class="c-preview-modal__device"
+            :class="{
+              'c-preview-modal__device--active': deviceMode === 'mobile',
+            }"
+            :aria-pressed="deviceMode === 'mobile'"
+            @click="$emit('update:deviceMode', 'mobile')"
+          >
+            <Icon name="mobile" />
+          </button>
+        </div>
+
+        <div
+          class="tw-flex tw-items-center tw-justify-end tw-gap-3"
+          :class="{ 'tw-w-1/3': showDeviceToggle }"
+        >
+          <button
+            v-if="cta !== 'none'"
+            type="button"
+            data-test-preview-edit-button
+            class="c-preview-modal__chrome-btn"
+            :class="{ 'tw-uppercase': !isDesignCom }"
+            @click="$emit('edit')"
+          >
+            <Icon name="edit" class="tw-mr-2" />
+            {{ editLabel }}
+          </button>
+          <Button
+            v-if="cta === 'publish'"
+            :label="actionBarTr('publish')"
+            :variant="isDesignCom ? 'primary' : 'success'"
+            size="small-medium"
+            icon-left="arrow-up-underline"
+            data-test-preview-publish-button
+            @on-click.stop="$emit('publish')"
+          />
+        </div>
+      </header>
+
+      <!-- Preview surface -->
+      <div
+        class="tw-relative tw-flex-1 tw-flex tw-items-center tw-justify-center tw-overflow-auto tw-bg-black"
+      >
+        <div
+          v-if="errored"
+          class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4 tw-text-white"
+          data-test-preview-error
+        >
+          <p>{{ errorTr('brandPageDefaultDescriptionError') }}</p>
+          <Button
+            :label="previewModalTr('retry')"
+            variant="outline"
+            :white="true"
+            size="small-medium"
+            @on-click.stop="$emit('retry')"
+          />
+        </div>
+
+        <!-- Loads behind the loader, revealed once it has painted. -->
+        <iframe
+          v-else-if="previewUrl"
+          ref="iframe"
+          :src="previewUrl"
+          :title="constantsTr('previewDisplayName')"
+          class="c-preview-modal__frame tw-bg-white tw-border-0"
+          :class="{
+            'c-preview-modal__frame--mobile': deviceMode === 'mobile',
+            'c-preview-modal__frame--desktop': deviceMode === 'desktop',
+            'tw-opacity-0': !frameReady,
+          }"
+          data-test-preview-iframe
+          @load="onFrameLoad"
+        />
+
+        <div
+          v-if="showLoader"
+          class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black"
+          data-test-preview-loading
+        >
+          <Loader />
+        </div>
+      </div>
+
+      <!-- Blocks the whole modal with a spinner while a publish is in flight. -->
+      <div
+        v-if="publishing"
+        class="c-preview-modal__publishing"
+        data-test-preview-publishing
+      >
+        <Loader />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch, type PropType } from 'vue';
+import { Button, Icon, Loader } from '@designcrowd/fe-shared-lib';
+// Labels reuse existing translated keys so no new Smartling strings are needed.
+import {
+  actionBarTr,
+  commonTr,
+  constantsTr,
+  errorTr,
+  previewModalTr,
+} from '@src/composables/useTranslate';
+import { LIVE_PREVIEW_MESSAGES } from '@src/constants/live-preview.constants';
+import type { UiDeviceMode } from '@shared/models';
+
+// Full-viewport takeover, not the centred fe-shared-lib Modal — this is edge-to-edge.
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  previewUrl: { type: String, default: '' },
+  // CTA per surface: editor = publish, pre-purchase = edit, manage = none.
+  cta: {
+    type: String as PropType<'publish' | 'edit' | 'none'>,
+    default: 'publish',
+  },
+  editLabel: { type: String, default: '' },
+  deviceMode: {
+    type: String as PropType<UiDeviceMode>,
+    default: 'desktop',
+  },
+  showDeviceToggle: { type: Boolean, default: true },
+  // BrandCrowd uppercases button labels, Design.com doesn't (BP-5957).
+  isDesignCom: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  errored: { type: Boolean, default: false },
+  // Spinner on the Publish button while the publish flow saves + opens.
+  publishing: { type: Boolean, default: false },
+  // publish and upgrade should show on top of preview
+  flowModalOpen: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  close: [];
+  edit: [];
+  publish: [];
+  retry: [];
+  'update:deviceMode': [mode: UiDeviceMode];
+}>();
+
+const iframe = ref<HTMLIFrameElement | null>(null);
+const frameReady = ref(false);
+let revealFallbackTimer: ReturnType<typeof setTimeout> | undefined;
+
+// The preview posts `ready` once it has actually painted. `load` is too early — media
+// elements release it before they hold a frame — so it only starts a fallback timer,
+// which covers a preview that never reports (older web-renderer, or a dropped
+// message). Better a late reveal than a spinner that never clears.
+// MUST stay above the preview page's own paint cap (12s in `preview.vue`), or this
+// fires first and reveals a frame that was about to report itself painted.
+const REVEAL_FALLBACK_MS = 15_000;
+
+const clearRevealFallback = (): void => {
+  if (revealFallbackTimer) {
+    clearTimeout(revealFallbackTimer);
+    revealFallbackTimer = undefined;
+  }
+};
+
+const reveal = (): void => {
+  clearRevealFallback();
+  frameReady.value = true;
+};
+
+// Dropping the loader the moment the URL was known just swapped the spinner for a
+// white box while the frame fetched, redirected and booted.
+const showLoader = computed(
+  () =>
+    props.loading ||
+    (!props.errored && !!props.previewUrl && !frameReady.value),
+);
+
+const previewOrigin = computed(() => {
+  try {
+    return new URL(props.previewUrl).origin;
+  } catch {
+    return '';
+  }
+});
+
+const onFrameLoad = (): void => {
+  if (frameReady.value) {
+    return;
+  }
+
+  clearRevealFallback();
+  revealFallbackTimer = setTimeout(reveal, REVEAL_FALLBACK_MS);
+};
+
+const closePreview = (): void => {
+  // A publish in flight, or a modal stacked on top, owns the interaction.
+  if (props.publishing || props.flowModalOpen) {
+    return;
+  }
+
+  emit('close');
+};
+
+const onKeydown = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape') {
+    closePreview();
+  }
+};
+
+// Escape reaches this document only while focus is outside the frame; once it is
+// inside, the preview page posts it back up.
+const onMessage = (event: MessageEvent): void => {
+  if (
+    !previewOrigin.value ||
+    event.origin !== previewOrigin.value ||
+    event.source !== iframe.value?.contentWindow
+  ) {
+    return;
+  }
+
+  if (event.data?.type === LIVE_PREVIEW_MESSAGES.ready) {
+    reveal();
+
+    return;
+  }
+
+  if (event.data?.type === LIVE_PREVIEW_MESSAGES.escape) {
+    closePreview();
+  }
+};
+
+const stopListening = (): void => {
+  window.removeEventListener('keydown', onKeydown);
+  window.removeEventListener('message', onMessage);
+  clearRevealFallback();
+};
+
+watch(
+  () => props.visible,
+  (isVisible) => {
+    if (isVisible) {
+      window.addEventListener('keydown', onKeydown);
+      window.addEventListener('message', onMessage);
+    } else {
+      frameReady.value = false;
+      stopListening();
+    }
+  },
+  // Immediate so a modal mounted already-visible still listens.
+  { immediate: true },
+);
+
+// Each open gets a freshly signed URL, so this fires every time — the frame must go
+// back behind the loader until the new document reports itself painted.
+watch(
+  () => props.previewUrl,
+  () => {
+    clearRevealFallback();
+    frameReady.value = false;
+  },
+);
+
+onBeforeUnmount(stopListening);
+</script>
+
+<style scoped>
+.c-preview-modal__device {
+  @apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded tw-text-grayscale-400 tw-transition-colors;
+}
+
+.c-preview-modal__device--active {
+  @apply tw-bg-grayscale-700 tw-text-white;
+}
+
+/* Dark chrome buttons in the header — must not compete with the Publish CTA.
+   Padding/size mirror fe-shared-lib's `small-medium`; the transparent border
+   matches its `tw-border-2` so these line up with Publish at 36px. `border-solid`
+   is required — preflight is off for these themes, so a width-only border
+   computes to zero (same reason every fe-shared-lib variant spells it out). */
+.c-preview-modal__close,
+.c-preview-modal__chrome-btn {
+  @apply tw-flex tw-items-center tw-px-4 tw-py-1.5 tw-border-2 tw-border-solid tw-border-transparent tw-rounded tw-bg-grayscale-700 tw-text-white tw-text-sm tw-font-bold hover:tw-bg-grayscale-600 tw-transition-colors;
+}
+
+.c-preview-modal__publishing {
+  @apply tw-absolute tw-inset-0 tw-z-10 tw-flex tw-items-center tw-justify-center tw-bg-black tw-bg-opacity-60;
+}
+
+.c-preview-modal__frame {
+  @apply tw-transition-all tw-duration-300 tw-ease-out;
+}
+
+.c-preview-modal__frame--desktop {
+  @apply tw-w-full tw-h-full;
+}
+
+/* Phone-frame the mobile preview, reusing the editor Device.vue geometry. */
+.c-preview-modal__frame--mobile {
+  width: 358px;
+  height: 734px;
+  max-height: calc(100% - 4rem);
+  border-radius: 3rem;
+  box-shadow: 0 0 0 0.625rem #3a3a3a;
+  @apply tw-my-auto;
+}
+</style>