@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

package/src/shared/content-settings/components/list-items-field/ListItemsField.vue

@@ -0,0 +1,262 @@
+<template>
+  <div data-component="list-items-field" class="tw-flex tw-flex-col tw-gap-2">
+    <ItemsField
+      ref="itemsFieldRef"
+      :items="items"
+      :can-collapse="true"
+      :show-preview-image="false"
+      :collapsed-by-default="true"
+      :delete-label="contentSettingsTr(`listItemsDeleteLabel`)"
+      @items-change="onReorder"
+      @items-delete="onDelete"
+      @item-toggle="onToggle"
+    >
+      <template #preview="{ item }">
+        <p class="tw-w-full tw-truncate tw-m-0" data-test-list-item-label>
+          {{ rowLabel(item) }}
+        </p>
+      </template>
+      <template #form="{ index }">
+        <div v-for="schema in itemFields" :key="schema.key" class="tw-mt-3">
+          <FieldSubHeader :title="schema.title" />
+          <template v-if="isRichText(schema)">
+            <!-- The same editor as a section title; its toolbar writes this item's own style. -->
+            <TextareaField
+              :id="id"
+              :key="`${items[index].id}-${schema.key}`"
+              :name="schema.key"
+              :value="items[index][schema.key]"
+              :styles="items[index][schema.styleKey!]"
+              :item="items[index]"
+              :item-style-target="{
+                itemsField: name,
+                index,
+                styleField: schema.styleKey!,
+              }"
+              :placeholder="schema.placeholder"
+              :max-length="schema.maxLength"
+              :content-type="content.type"
+              :show-rich-text-editor="true"
+              :attrs="{ 'data-test-tag': `list-item-${schema.key}` }"
+              @update:model-value="onFieldInput(index, schema.key, $event)"
+            />
+          </template>
+          <template v-else>
+            <!-- The section fields' plain inputs: they encode on write, as saved text expects. -->
+            <component
+              :is="schema.kind === 'text' ? TextField : TextareaField"
+              :id="id"
+              :key="`${items[index].id}-${schema.key}`"
+              :name="schema.key"
+              :value="items[index][schema.key]"
+              v-bind="schema.kind === 'text' ? {} : { item: items[index] }"
+              :placeholder="schema.placeholder"
+              :max-length="schema.maxLength"
+              :attrs="{ 'data-test-tag': `list-item-${schema.key}` }"
+              @update:model-value="onFieldInput(index, schema.key, $event)"
+            />
+            <TextStyleField
+              v-if="schema.styleKey"
+              :id="`${id}-${items[index].id}-${schema.styleKey}`"
+              :name="schema.styleKey"
+              :value="items[index][schema.styleKey]"
+              :is-admin-maker="isAdminMaker"
+              :logo-theme="logoTheme"
+              :show-font-style-only="true"
+              :is-text-content="true"
+              @update:model-value="onStyleInput(index, schema.styleKey, $event)"
+            />
+          </template>
+        </div>
+      </template>
+    </ItemsField>
+    <Button
+      :label="
+        isAtMax
+          ? contentSettingsTr(`listItemsMaxReached`, { max: maxLength })
+          : contentSettingsTr(`listItemsAddItem`)
+      "
+      :disabled="isAtMax"
+      variant="outline"
+      size="small-medium"
+      :full-width="true"
+      :attrs="{ 'data-test-list-items-add': '' }"
+      @on-click.stop="onAdd"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import { Button } from '@designcrowd/fe-shared-lib';
+import * as uuid from 'uuid';
+import cloneDeep from 'lodash.clonedeep';
+import type { Content, LogoTheme, TextStyleDeclaration } from '@brand-page';
+import type { ListItemFieldSchema } from '@brand-page-maker/models/content-settings-configs';
+import {
+  getPlainTextFromRTE,
+  switchRteItemFieldsToRTE,
+} from '@brand-page-maker/utils';
+import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { useUiContentSettingsStore } from '../../store/content-settings-store';
+import { contentSettingsTr } from '@src/composables/useTranslate';
+import ItemsField from '../items-field/ItemsField.vue';
+import TextField from '../text-field/TextField.vue';
+import TextareaField from '../textarea-field/TextareaField.vue';
+import TextStyleField from '../text-style-field/TextStyleField.vue';
+import FieldSubHeader from '../field-sub-header/FieldSubHeader.vue';
+import type { UpdateItemValuePayload } from '../../models';
+
+type ListItem = { id: string } & Record<string, any>;
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  id: { type: String, required: true },
+  name: { type: String, required: true },
+  value: { type: Array as PropType<ListItem[]>, required: true },
+  content: { type: Object as PropType<Content>, required: true },
+  itemFields: {
+    type: Array as PropType<ListItemFieldSchema[]>,
+    required: true,
+  },
+  maxLength: { type: Number, required: false, default: undefined },
+  // From the host field: false when the user lacks rich text, so every input stays plain.
+  showRichTextEditor: { type: Boolean, required: false, default: false },
+  isAdminMaker: { type: Boolean, required: false, default: false },
+  logoTheme: {
+    type: Object as PropType<LogoTheme>,
+    required: false,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [payload: UpdateItemValuePayload<ListItem[]>];
+}>();
+
+const contentSettingsStore = useUiContentSettingsStore();
+const styleSettingsStore = useUiStyleSettingsStore();
+const itemsFieldRef = ref<{ expand: (index: number) => void } | null>(null);
+const items = ref<ListItem[]>(cloneDeep(props.value ?? []));
+
+const isAtMax = computed(
+  (): boolean =>
+    props.maxLength !== undefined && items.value.length >= props.maxLength,
+);
+
+const labelKey = computed(
+  (): string | undefined =>
+    props.itemFields.find((schema) => schema.kind === 'text')?.key,
+);
+
+const rowLabel = (item: ListItem): string =>
+  labelKey.value ? getPlainTextFromRTE(item[labelKey.value] ?? '') : '';
+
+const isRichText = (schema: ListItemFieldSchema): boolean =>
+  props.showRichTextEditor && !!schema.styleKey;
+
+// Always a new array: the undo store drops same-reference writes (undo-redo.md).
+const emitChange = (isHydrationWrite = false): void => {
+  emit('update:modelValue', {
+    id: props.id,
+    name: props.name,
+    value: cloneDeep(items.value),
+    ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
+  });
+};
+
+// The text fields debounce their own emits; the rich-text editor also marks its
+// mount-time rewrite as a hydration write so the store folds it into the current
+// undo entry.
+const onFieldInput = (
+  index: number,
+  key: string,
+  payload: UpdateItemValuePayload<unknown>,
+): void => {
+  items.value[index] = { ...items.value[index], [key]: payload.value ?? '' };
+  emitChange(payload.isHydrationWrite === true);
+};
+
+const onStyleInput = (
+  index: number,
+  key: string,
+  payload: UpdateItemValuePayload<TextStyleDeclaration>,
+): void => {
+  items.value[index] = { ...items.value[index], [key]: payload.value };
+  emitChange();
+};
+
+const onReorder = (reordered: ListItem[]): void => {
+  items.value = [...reordered];
+  emitChange();
+};
+
+const onDelete = (index: number): void => {
+  items.value = items.value.filter((_item, i) => i !== index);
+  emitChange();
+};
+
+const onToggle = (index: number, isCollapsed: boolean): void => {
+  if (!isCollapsed && items.value[index]) {
+    contentSettingsStore.setActiveItem(props.content.id, items.value[index].id);
+  }
+};
+
+// A new item takes the last item's styles, so it looks like its siblings.
+const createItem = (): ListItem => {
+  const lastItem = items.value[items.value.length - 1];
+  const newItem: ListItem = { id: uuid.v4() };
+
+  props.itemFields.forEach((schema) => {
+    newItem[schema.key] = schema.defaultValue?.() ?? '';
+
+    if (schema.styleKey) {
+      newItem[schema.styleKey] = cloneDeep(
+        lastItem?.[schema.styleKey] ?? schema.defaultStyle?.() ?? {},
+      );
+    }
+  });
+
+  if (props.showRichTextEditor) {
+    const { externalEditor } = useExternalRichTextEditor();
+
+    try {
+      switchRteItemFieldsToRTE(
+        props.content.type,
+        newItem,
+        externalEditor,
+        styleSettingsStore,
+      );
+    } finally {
+      externalEditor.destroy();
+    }
+  }
+
+  return newItem;
+};
+
+const onAdd = async (): Promise<void> => {
+  if (isAtMax.value) {
+    return;
+  }
+
+  items.value = [...items.value, createItem()];
+  emitChange();
+
+  await nextTick();
+  itemsFieldRef.value?.expand(items.value.length - 1);
+};
+
+// External writes (undo/redo, AI, an editor's toolbar style write) replace the local copy.
+watch(
+  () => props.value,
+  (value) => {
+    if (JSON.stringify(value ?? []) !== JSON.stringify(items.value)) {
+      items.value = cloneDeep(value ?? []);
+    }
+  },
+  { deep: true },
+);
+</script>

package/src/shared/content-settings/components/textarea-field/TextareaField.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent, type PropType } from 'vue';
 import GenericTextInputMixin from '../GenericTextInput.mixin';
 import type { TextItem } from '@brand-page';
+import type { RteItemStyleTarget } from '../../models';
 
 export default defineComponent({
   mixins: [GenericTextInputMixin],
@@ -14,6 +15,11 @@ export default defineComponent({
       type: Object as PropType<TextItem>,
       required: true,
     },
+    itemStyleTarget: {
+      type: Object as PropType<RteItemStyleTarget>,
+      required: false,
+      default: undefined,
+    },
   },
   methods: {
     onForceUpdate() {

package/src/shared/content-settings/components/textarea-field/TextareaField.vue

@@ -19,6 +19,7 @@
       :text-item-index="index"
       :item="item"
       :content-type="contentType"
+      :item-style-target="itemStyleTarget"
       @focus="onFocus"
       @blur="onBlur"
       @update:model-value="onRteModelValue"

package/src/shared/content-settings/models.ts

@@ -144,6 +144,13 @@ export interface UpdateMultipleItemValuesPayload<T extends object> {
   isHydrationWrite?: boolean;
 }
 
+/** The list item whose style an item-level RTE writes (e.g. `items[2].questionStyle`). */
+export interface RteItemStyleTarget {
+  itemsField: string;
+  index: number;
+  styleField: string;
+}
+
 export interface ValidateItemPayload {
   id: string;
   name: string;

package/src/shared/content-settings/store/content-settings-store.test.ts

@@ -528,4 +528,74 @@ describe('re-linking a text style clears the element colour override', () => {
     expect(textStyle.textStyleType).toBe('titles');
     expect(textStyle.color).toBeUndefined();
   });
+
+  test("updateListItemTextStyles merges into one list item's own style only", () => {
+    const store = setupStore({
+      items: [
+        {
+          id: 'q1',
+          questionStyle: { textStyleType: 'headings', fontSize: '2em' },
+        },
+        {
+          id: 'q2',
+          questionStyle: { textStyleType: 'headings', color: '#ff0000' },
+        },
+      ],
+    });
+
+    store.updateListItemTextStyles({
+      id: 'item-1',
+      name: 'question',
+      value: { textStyleType: undefined, color: undefined, fontWeight: 'bold' },
+      target: { itemsField: 'items', index: 1, styleField: 'questionStyle' },
+    });
+
+    const items = (
+      store.items[0].settings.content as unknown as {
+        items: { questionStyle: Record<string, unknown> }[];
+      }
+    ).items;
+
+    expect(items[1].questionStyle).toMatchObject({ fontWeight: 'bold' });
+    expect(items[1].questionStyle.textStyleType).toBeUndefined();
+    expect(items[1].questionStyle.color).toBeUndefined();
+    expect(items[0].questionStyle).toEqual({
+      textStyleType: 'headings',
+      fontSize: '2em',
+    });
+  });
+
+  test('updateListItemTextStyles on a missing item is a no-op', () => {
+    const store = setupStore({ items: [] });
+
+    store.updateListItemTextStyles({
+      id: 'item-1',
+      name: 'question',
+      value: { fontWeight: 'bold' },
+      target: { itemsField: 'items', index: 3, styleField: 'questionStyle' },
+    });
+
+    expect(store.onContentChanged).not.toHaveBeenCalled();
+  });
+});
+
+describe('content settings store — active list item', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('setActiveItem records the open item per content without touching content items', () => {
+    const store = useUiContentSettingsStore();
+    const itemsBefore = store.items;
+
+    store.setActiveItem('faq-1', 'q2');
+    store.setActiveItem('faq-2', 'q9');
+    store.setActiveItem('faq-1', 'q3');
+
+    expect(store.activeItemIdByContentId).toEqual({
+      'faq-1': 'q3',
+      'faq-2': 'q9',
+    });
+    expect(store.items).toBe(itemsBefore);
+  });
 });

package/src/shared/content-settings/store/content-settings-store.ts

@@ -9,6 +9,7 @@ import type {
   SetItemSettingsFieldErrorMessagePayload,
   UpdateItemValuePayload,
   UpdateMultipleItemValuesPayload,
+  RteItemStyleTarget,
   ValidateItemPayload,
 } from '../models';
 import type { ColorReplacement, Content } from '@brand-page';
@@ -113,6 +114,8 @@ export interface ContentSettingsState {
   selectedItemValue: string | null;
   selectedItemIndex: number | null;
   activeCategoryTab: ItemCategory;
+  /** Content id → the list item its settings panel has open; the maker canvas opens it too. UI-only, never saved. */
+  activeItemIdByContentId: Record<string, string | undefined>;
 }
 
 export const useUiContentSettingsStore = defineStore('uiContentSettings', {
@@ -127,8 +130,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
     selectedItemIndex: null,
     selectedItemValue: null,
     activeCategoryTab: 'all',
+    activeItemIdByContentId: {},
   }),
   actions: {
+    setActiveItem(contentId: string, itemId: string | undefined): void {
+      this.activeItemIdByContentId = {
+        ...this.activeItemIdByContentId,
+        [contentId]: itemId,
+      };
+    },
     onContentChanged() {
       const uiStore = useUiStore();
 
@@ -566,16 +576,40 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       index,
       isHydrationWrite,
     }: UpdateMultipleItemValuesPayload<any>): void {
+      this.updateListItemTextStyles({
+        id,
+        name,
+        value,
+        isHydrationWrite,
+        target: {
+          itemsField: 'textItems',
+          index: index!,
+          styleField: 'textStyle',
+        },
+      });
+    },
+    /** Merge into the style of one list item, e.g. `items[2].questionStyle`. */
+    updateListItemTextStyles({
+      id,
+      name,
+      value,
+      target,
+      isHydrationWrite,
+    }: Omit<UpdateMultipleItemValuesPayload<any>, 'index'> & {
+      target: RteItemStyleTarget;
+    }): void {
       const item = this.items.find((i) => i.id === id);
+      const listItem =
+        item?.settings.content[target.itemsField]?.[target.index];
 
-      if (!item) {
+      if (!item || !listItem) {
         return;
       }
 
       armHistoryMergeForHydrationWrite(isHydrationWrite);
 
-      item.settings.content.textItems[index!].textStyle = vueDeepMerge(
-        item.settings.content.textItems[index!].textStyle,
+      listItem[target.styleField] = vueDeepMerge(
+        listItem[target.styleField],
         value,
       );
       this.validateItem({ id, name });

package/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.test.ts

@@ -397,3 +397,22 @@ describe('refreshDuplicatedMetadata — payment connection reset', () => {
     expect(model.paymentConfig).toBeUndefined();
   });
 });
+
+describe('refreshDuplicatedMetadata — FAQ section', () => {
+  it('copies an FAQ section unchanged (it holds no external ids)', () => {
+    const faq = {
+      id: 'faq-1',
+      type: 'faq-section',
+      title: 'FAQ',
+      items: [
+        { id: 'q1', question: 'Q1', answer: 'A1' },
+        { id: 'q2', question: 'Q2', answer: 'A2' },
+      ],
+      questionStyle: { textStyleType: 'headings' },
+    };
+
+    const out = refreshDuplicatedMetadata(modelWith([structuredClone(faq)]));
+
+    expect(out.pages[0].contents[0]).toEqual(faq);
+  });
+});

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -22,7 +22,6 @@ import { setLocaleAsync } from '@src/composables/useTranslate';
 import { usePageNavigationStore } from '@src/shared/page-navigation/store/page-navigation-store';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { toPageModels } from '../utils';
 
 vi.mock('../../../clients/brand-page-client', () => ({
@@ -678,53 +677,6 @@ describe('duplicatePage', () => {
     ).toBe(true);
   });
 
-  test("deleting the copy's product leaves the source's product alone", async () => {
-    // The consequence the id rotation exists to prevent. `deleteProduct` filters
-    // the site-wide catalogue BY ID, so a copy that kept the source's ids would
-    // take the original's row down with it - silently, until the next save.
-    const { pageSettingsStore } = await initialiseAsync();
-    const shopConfigStore = useShopConfigStore();
-
-    const source = pageSettingsStore.addNewPage({ title: 'Shop' });
-
-    pageSettingsStore.setPageContents({
-      pageId: source.id,
-      contents: [
-        {
-          id: 'shop-1',
-          type: 'shop-section',
-          settings: {
-            content: {
-              id: 'shop-1',
-              type: 'shop-section',
-              products: [
-                { id: 'product-1', name: 'Latte', variant: [], skus: [] },
-              ],
-              shopPaymentConfig: { paymentConfig: { id: 'stripe-1' } },
-            },
-          },
-        } as unknown as ContentItem<Content>,
-      ],
-    });
-
-    shopConfigStore.initialiseShopStore({
-      paymentConfig: { id: 'stripe-1' } as never,
-      pages: toPageModels(pageSettingsStore.pages) as never,
-    });
-
-    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
-
-    const copyProductId = (
-      copy?.contents[0].settings.content as unknown as {
-        products: { id: string }[];
-      }
-    ).products[0].id;
-
-    shopConfigStore.deleteProduct(copyProductId);
-
-    expect(shopConfigStore.products.map((p) => p.id)).toEqual(['product-1']);
-  });
-
   test('adds the copy shop products to the site-wide catalogue', async () => {
     // The catalogue is derived from the shop blocks and is what the save
     // upserts. Without a re-derive the copy's fresh product ids never reach the
@@ -771,29 +723,6 @@ describe('duplicatePage', () => {
     expect(shopConfigStore.paymentConfig?.id).toEqual('stripe-1');
   });
 
-  test('undo removes both halves of a duplicate', async () => {
-    // duplicatePage writes to two stores - the page into page-settings, the
-    // route into page-navigation. A snapshot that caught only one would leave
-    // an orphan behind on undo.
-    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
-    const historyStore = useHistoryStore();
-
-    const source = pageSettingsStore.addNewPage({ title: 'About' });
-
-    historyStore.captureBaseline();
-
-    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
-
-    historyStore.capture({ source: 'manual_edit', actor: 'user' });
-
-    await historyStore.undo();
-
-    expect(pageSettingsStore.pages.map((p) => p.id)).not.toContain(copy?.id);
-    expect(pageNavigationStore.routes.some((r) => r.pageId === copy?.id)).toBe(
-      false,
-    );
-  });
-
   test('is a no-op for an unknown page id', async () => {
     const { pageSettingsStore } = await initialiseAsync();
 

package/src/utils/minify-brand-page-metadata.test.ts

@@ -169,3 +169,38 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
     expect(sut.styles.colors).toHaveLength(3);
   });
 });
+
+describe('minifyBrandPageMetadata — FAQ is not AI-editable', () => {
+  test('an FAQ section reaches the AI as id + type + padding only', () => {
+    const model = new BrandPageModel({
+      ...BRAND_SITE,
+      pages: [
+        {
+          id: 'p1',
+          title: 'Home',
+          contents: [
+            {
+              id: 'faq-1',
+              type: 'faq-section',
+              title: 'FAQ',
+              description: 'Answers',
+              displayStyle: 'faq-centered',
+              items: [{ id: 'q1', question: 'Q1', answer: 'A1' }],
+              topPadding: 32,
+              bottomPadding: 32,
+            },
+          ],
+        } as any,
+      ],
+    });
+
+    const [faq] = (minifyBrandPageMetadata(model).pages[0] as any).contents;
+
+    expect(faq).toEqual({
+      id: 'faq-1',
+      type: 'faq-section',
+      topPadding: 32,
+      bottomPadding: 32,
+    });
+  });
+});