@designcrowd/library.brand-page 5.18.6 → 5.18.7-ast-padding-1

package/src/brand-page-maker/components/quick-link-bar/RedoButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <Tooltip
+    direction="top"
+    alignment="center"
+    :should-show-icon="false"
+    class="c-redo-button-tooltip"
+  >
+    <template #open>
+      <Icon
+        data-component="redo-button"
+        data-test-redo-button
+        name="redo"
+        size="md"
+        :aria-label="quickLinkBarTr('redoLabel')"
+        role="button"
+        tabindex="0"
+        :class="[
+          'tw-p-2 tw-rounded tw-transition-colors',
+          isDisabled
+            ? 'tw-text-grayscale-500 tw-cursor-not-allowed tw-opacity-50'
+            : 'tw-text-grayscale-800 tw-cursor-pointer hover:tw-bg-grayscale-300',
+        ]"
+        @click.stop="onClick"
+        @keydown.enter.stop="onClick"
+        @keydown.space.stop.prevent="onClick"
+      />
+    </template>
+    <template #content>
+      <span class="tw-whitespace-nowrap tw-text-sm">
+        {{ quickLinkBarTr('redoLabel') }}
+      </span>
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { quickLinkBarTr } from '@src/composables/useTranslate';
+
+const historyStore = useHistoryStore();
+const aiThreadStore = useAiWebsiteBuilderThreadStore();
+const containerStore = useBrandPageContainerStore();
+
+const isDisabled = computed(
+  () =>
+    !historyStore.canRedo ||
+    aiThreadStore.isProcessing ||
+    containerStore.isSaving,
+);
+
+const onClick = () => {
+  if (isDisabled.value) return;
+  historyStore.redo();
+};
+</script>
+
+<style scoped>
+.c-redo-button-tooltip :deep(.shared-tooltip__body) {
+  width: auto;
+  padding: 4px 8px;
+}
+</style>

package/src/brand-page-maker/components/quick-link-bar/UndoButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <Tooltip
+    direction="top"
+    alignment="center"
+    :should-show-icon="false"
+    class="c-undo-button-tooltip"
+  >
+    <template #open>
+      <Icon
+        data-component="undo-button"
+        data-test-undo-button
+        name="undo"
+        size="md"
+        :aria-label="quickLinkBarTr('undoLabel')"
+        role="button"
+        tabindex="0"
+        :class="[
+          'tw-p-2 tw-rounded tw-transition-colors',
+          isDisabled
+            ? 'tw-text-grayscale-500 tw-cursor-not-allowed tw-opacity-50'
+            : 'tw-text-grayscale-800 tw-cursor-pointer hover:tw-bg-grayscale-300',
+        ]"
+        @click.stop="onClick"
+        @keydown.enter.stop="onClick"
+        @keydown.space.stop.prevent="onClick"
+      />
+    </template>
+    <template #content>
+      <span class="tw-whitespace-nowrap tw-text-sm">
+        {{ quickLinkBarTr('undoLabel') }}
+      </span>
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { quickLinkBarTr } from '@src/composables/useTranslate';
+
+const historyStore = useHistoryStore();
+const aiThreadStore = useAiWebsiteBuilderThreadStore();
+const containerStore = useBrandPageContainerStore();
+
+const isDisabled = computed(
+  () =>
+    !historyStore.canUndo ||
+    aiThreadStore.isProcessing ||
+    containerStore.isSaving,
+);
+
+const onClick = () => {
+  if (isDisabled.value) return;
+  historyStore.undo();
+};
+</script>
+
+<style scoped>
+.c-undo-button-tooltip :deep(.shared-tooltip__body) {
+  width: auto;
+  padding: 4px 8px;
+}
+</style>

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.de-DE.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "Meine Webseite:",
-    "copyButton" : "Kopieren",
-    "copiedButton" : "Kopiert!"
+  "quickLinkBar": {
+    "myWebPageLabel": "Meine Webseite:",
+    "copyButton": "Kopieren",
+    "copiedButton": "Kopiert!",
+    "undoLabel": "Rückgängig machen",
+    "redoLabel": "Wiederholen"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.es-ES.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "Mi página web:",
-    "copyButton" : "Copiar",
-    "copiedButton" : "¡Copiado!"
+  "quickLinkBar": {
+    "myWebPageLabel": "Mi página web:",
+    "copyButton": "Copiar",
+    "copiedButton": "¡Copiado!",
+    "undoLabel": "Deshacer",
+    "redoLabel": "Rehacer"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.fr-CA.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "Ma page Web :",
-    "copyButton" : "Copier",
-    "copiedButton" : "Copié !"
+  "quickLinkBar": {
+    "myWebPageLabel": "Ma page Web :",
+    "copyButton": "Copier",
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.fr-FR.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "Ma page Web :",
-    "copyButton" : "Copier",
-    "copiedButton" : "Copié !"
+  "quickLinkBar": {
+    "myWebPageLabel": "Ma page Web :",
+    "copyButton": "Copier",
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.json

@@ -2,6 +2,8 @@
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
-    "copiedButton": "Copied!"
+    "copiedButton": "Copied!",
+    "undoLabel": "Undo",
+    "redoLabel": "Redo"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.pt-BR.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "Minha página web:",
-    "copyButton" : "Copiar",
-    "copiedButton" : "Copiado!"
+  "quickLinkBar": {
+    "myWebPageLabel": "Minha página web:",
+    "copyButton": "Copiar",
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.pt-PT.json

@@ -1,7 +1,9 @@
 {
-  "quickLinkBar" : {
-    "myWebPageLabel" : "A minha página Web:",
-    "copyButton" : "Copiar",
-    "copiedButton" : "Copiado!"
+  "quickLinkBar": {
+    "myWebPageLabel": "A minha página Web:",
+    "copyButton": "Copiar",
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   }
 }

package/src/brand-page-maker/components/quick-link-bar/undo-redo-buttons.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import UndoButton from './UndoButton.vue';
+import RedoButton from './RedoButton.vue';
+
+// These tests cover the click-dispatch contract for the undo/redo buttons:
+//   - Click → historyStore.undo()/redo() ONLY when enabled.
+//   - Disabled when any of three guards is true: canUndo/canRedo,
+//     aiThread.isProcessing, container.isSaving.
+//
+// Markup, class names, and i18n strings are intentionally not asserted —
+// they're covered by e2e tests and the data-component / data-test-*
+// conventions.
+
+vi.mock('@src/composables/useTranslate', () => ({
+  quickLinkBarTr: (key: string) => key,
+}));
+
+// Minimal stubs for fe-shared-lib so wrapper.find('[data-test-…]') can
+// match the icon element regardless of how the real components render.
+vi.mock('@designcrowd/fe-shared-lib', () => ({
+  Icon: {
+    name: 'Icon',
+    inheritAttrs: true,
+    template: '<span v-bind="$attrs" @click="$emit(\'click\', $event)" />',
+  },
+  Tooltip: {
+    name: 'Tooltip',
+    template: '<div><slot name="open" /><slot name="content" /></div>',
+  },
+}));
+
+const historyStoreMock = {
+  canUndo: true,
+  canRedo: true,
+  undo: vi.fn(),
+  redo: vi.fn(),
+};
+
+vi.mock('@brand-page-maker/stores/history/history-store', () => ({
+  useHistoryStore: vi.fn(() => historyStoreMock),
+}));
+
+const aiStoreMock = { isProcessing: false };
+
+vi.mock(
+  '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store',
+  () => ({
+    useAiWebsiteBuilderThreadStore: vi.fn(() => aiStoreMock),
+  }),
+);
+
+const containerStoreMock = { isSaving: false };
+
+vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
+  useBrandPageContainerStore: vi.fn(() => containerStoreMock),
+}));
+
+beforeEach(() => {
+  setActivePinia(createPinia());
+  historyStoreMock.canUndo = true;
+  historyStoreMock.canRedo = true;
+  historyStoreMock.undo = vi.fn();
+  historyStoreMock.redo = vi.fn();
+  aiStoreMock.isProcessing = false;
+  containerStoreMock.isSaving = false;
+});
+
+describe('UndoButton', () => {
+  it('dispatches historyStore.undo() when enabled', async () => {
+    const wrapper = mount(UndoButton);
+
+    await wrapper.find('[data-test-undo-button]').trigger('click');
+
+    expect(historyStoreMock.undo).toHaveBeenCalled();
+  });
+
+  it.each([
+    ['canUndo is false', () => (historyStoreMock.canUndo = false)],
+    ['AI is processing', () => (aiStoreMock.isProcessing = true)],
+    ['save is in flight', () => (containerStoreMock.isSaving = true)],
+  ])('does not dispatch when %s', async (_label, applyGuard) => {
+    applyGuard();
+
+    const wrapper = mount(UndoButton);
+
+    await wrapper.find('[data-test-undo-button]').trigger('click');
+
+    expect(historyStoreMock.undo).not.toHaveBeenCalled();
+  });
+});
+
+describe('RedoButton', () => {
+  it('dispatches historyStore.redo() when enabled', async () => {
+    const wrapper = mount(RedoButton);
+
+    await wrapper.find('[data-test-redo-button]').trigger('click');
+
+    expect(historyStoreMock.redo).toHaveBeenCalled();
+  });
+
+  it.each([
+    ['canRedo is false', () => (historyStoreMock.canRedo = false)],
+    ['AI is processing', () => (aiStoreMock.isProcessing = true)],
+    ['save is in flight', () => (containerStoreMock.isSaving = true)],
+  ])('does not dispatch when %s', async (_label, applyGuard) => {
+    applyGuard();
+
+    const wrapper = mount(RedoButton);
+
+    await wrapper.find('[data-test-redo-button]').trigger('click');
+
+    expect(historyStoreMock.redo).not.toHaveBeenCalled();
+  });
+});

package/src/brand-page-maker/components/save-contact/SaveContact.vue

@@ -19,7 +19,7 @@
           </div>
           <Toggle
             id="save-contact-enabled"
-            :model-value="data.isToggled"
+            :model-value="isSavingEnabled"
             color="primary"
             @update:model-value="onSavingEnabled()"
           />
@@ -27,7 +27,7 @@
       </div>
       <div class="tw-flex-none tw-mt-4">
         <div
-          v-if="!isAdmin && !isPrePurchase && data.isToggled"
+          v-if="!isAdmin && !isPrePurchase && isSavingEnabled"
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer tw-gap-1"
           @click="onHideBranding"
         >
@@ -62,7 +62,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="data.hideBranding"
+            :model-value="hideBranding"
             color="primary"
             @update:model-value="onHideBranding()"
           />
@@ -78,7 +78,7 @@ import {
   useBrandPageContainerStore,
 } from '@brand-page-maker/stores';
 import { saveContactSettingsTr } from '@src/composables/useTranslate';
-import { computed, reactive } from 'vue';
+import { computed } from 'vue';
 import {
   EVENTS,
   useEventTracker,
@@ -107,11 +107,6 @@ const showBrandCrowdLogo = computed(
   () => brandPageMakerStore.showBrandCrowdLogo,
 );
 
-const data = reactive({
-  isToggled: isSavingEnabled.value,
-  hideBranding: hideBranding.value,
-});
-
 const siteName = computed((): string => {
   return props.isDesignCom ? 'Design.com' : 'BrandCrowd';
 });
@@ -127,30 +122,28 @@ const hideBrandingTooltip = computed((): string => {
 });
 
 const onSavingEnabled = () => {
-  data.isToggled = !data.isToggled;
-  brandPageMakerStore.setSavingEnabled({
-    isSavingEnabled: data.isToggled,
-  });
+  const next = !isSavingEnabled.value;
+
+  brandPageMakerStore.setSavingEnabled({ isSavingEnabled: next });
   eventTracker.sendWebsiteEvent({
     eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_SAVE_CONTACT_TOGGLE,
     eventProps: {
       cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-      toggle_value: data.isToggled ? 'enabled' : 'disabled',
+      toggle_value: next ? 'enabled' : 'disabled',
     },
   });
 };
 
 const onHideBranding = async () => {
   if (!showBrandCrowdLogo.value) {
-    data.hideBranding = !data.hideBranding;
-    brandPageMakerStore.setHideBranding({
-      hideBranding: data.hideBranding,
-    });
+    const next = !hideBranding.value;
+
+    brandPageMakerStore.setHideBranding({ hideBranding: next });
     eventTracker.sendWebsiteEvent({
       eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP,
       eventProps: {
         cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-        toggle_value: data.hideBranding ? 'enabled' : 'disabled',
+        toggle_value: next ? 'enabled' : 'disabled',
       },
     });
   } else {

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -29,6 +29,8 @@ import {
   useUiStore,
 } from '../../stores';
 import { useBrandPageMakerStore } from '../../stores';
+import { useHistoryStore } from '../../stores/history/history-store';
+import { useUndoRedoFlag } from '../useUndoRedoFlag';
 import { useBrandPageMakerUserStore } from '../../stores/user/user-store';
 import { useAiMetadataBuilder } from './useAiMetadataBuilder';
 import {
@@ -55,6 +57,8 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
   const aiThreadStore = useAiWebsiteBuilderThreadStore();
   const snapshotStore = useSnapshotStore();
   const brandPageMakerStore = useBrandPageMakerStore();
+  const historyStore = useHistoryStore();
+  const undoRedoEnabled = useUndoRedoFlag();
   const containerStore = useBrandPageContainerStore();
   const userStore = useBrandPageMakerUserStore();
   const uiStore = useUiStore();
@@ -441,6 +445,12 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
     await nextTick();
 
+    // One history entry per AI prompt (US-E1). `captureAiChangeset` cancels
+    // the auto-watcher's pending flush so the apply doesn't double-capture.
+    if (undoRedoEnabled.value) {
+      historyStore.captureAiChangeset();
+    }
+
     // Re-capture snapshot so subsequent messages reflect the updated page
     await snapshotStore.refreshSnapshotAsync();
 

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -47,6 +47,7 @@ import {
   backgroundColorConvertor,
 } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
 import { AutoLink } from './extensions/AutoLink';
@@ -208,6 +209,12 @@ export const useRichTextEditor = (
   isHyperlinkPopupOpen: Ref<boolean>,
   selectedLinkTypeValue: Ref<HyperlinkType>,
 ): UseRichTextEditorReturn => {
+  const historyStore = useHistoryStore();
+
+  // TipTap rehydrates and writes back canonical HTML on mount — fold
+  // that into the current head instead of pushing a phantom entry.
+  historyStore.mergeNextMutation();
+
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
@@ -453,10 +460,23 @@ export const useRichTextEditor = (
     },
   );
 
+  let lastAppliedToken = historyStore.snapshotAppliedToken;
+
   watch(
     () => model.value,
     (newValue) => {
-      if (updateRichTextEditor.value && editor.getHTML() !== newValue) {
+      // Re-seed only on external mutations: an undo/redo apply (detected via
+      // the history token) or an explicit override (reorder/template). Never
+      // on the editor's own edits — re-running setContent would reset the
+      // styles the user just applied (e.g. font size).
+      const appliedSinceLast =
+        historyStore.snapshotAppliedToken !== lastAppliedToken;
+
+      lastAppliedToken = historyStore.snapshotAppliedToken;
+
+      const isExternalMutation = updateRichTextEditor.value || appliedSinceLast;
+
+      if (isExternalMutation && editor.getHTML() !== newValue) {
         editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
@@ -487,6 +507,13 @@ export const useRichTextEditor = (
   });
 
   editor.on('selectionUpdate', () => {
+    // Skip while a history snapshot is being applied — `setContent` fires
+    // selectionUpdate before the editor has fully rehydrated, which causes
+    // toolbar buttons (alignment, letter-spacing) to flash through bogus
+    // active states before settling. The editor emits a final selectionUpdate
+    // after apply completes, which lands the correct values (BP-5506).
+    if (historyStore.isApplyingSnapshot) return;
+
     const textStyleAttributes = editor.getAttributes('textStyle');
     const highlightAttributes = editor.getAttributes('highlight');
     const focusedAlignment = editor.getAttributes(

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

@@ -70,6 +70,10 @@ export const EVENTS = {
     'website_maker_digital_business_cards_hide_popup',
   WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
   WEBSITE_MAKER_SHIPPING_TOGGLE: 'website_maker_shipping_toggle',
+  WEBSITE_MAKER_UNDO: 'website_maker_undo',
+  WEBSITE_MAKER_REDO: 'website_maker_redo',
+  WEBSITE_MAKER_HISTORY_CAPPED: 'website_maker_history_capped',
+  WEBSITE_MAKER_HISTORY_OVERSIZED: 'website_maker_history_oversized',
 };
 
 export const SELECT_LOCATIONS = {
@@ -420,6 +424,31 @@ const useEventTracker = () => {
         is_enabled: isEnabled,
       });
     },
+    // Undo / Redo (BP-5506)
+    sendUndoEvent: (props: {
+      entries_count: number;
+      actor: string | undefined;
+    }) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_UNDO, props);
+    },
+    sendRedoEvent: (props: {
+      entries_count: number;
+      actor: string | undefined;
+    }) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_REDO, props);
+    },
+    sendHistoryCappedEvent: (props: {
+      entries_count: number;
+      size_bytes: number;
+    }) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_CAPPED, props);
+    },
+    sendHistoryOversizedEvent: (props: {
+      attempted_bytes: number;
+      source: string;
+    }) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_OVERSIZED, props);
+    },
   };
 };
 

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

@@ -0,0 +1,30 @@
+import { computed, type ComputedRef } from 'vue';
+import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
+
+/**
+ * Returns whether undo/redo is active for the current maker session. All
+ * three conditions must hold:
+ *
+ *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
+ *      the consumer (BrandCrowd.Net / web-renderer) via the
+ *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
+ *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
+ *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
+ *      only; brand-page (single-page profile) and brand-contact (vCard) are
+ *      out of scope.
+ *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      admin maker uses the same components but a different editing flow
+ *      (template authoring) where undo/redo is out of scope.
+ */
+export function useUndoRedoFlag(): ComputedRef<boolean> {
+  const userStore = useBrandPageMakerUserStore();
+  const brandPageMakerStore = useBrandPageMakerStore();
+
+  return computed(
+    () =>
+      userStore.features.canUseUndoRedo &&
+      brandPageMakerStore.isBrandSite &&
+      !userStore.isAdmin,
+  );
+}