@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

package/src/shared/content-settings/components/faq-items-field/FaqItemsField.vue

@@ -0,0 +1,287 @@
+<template>
+  <div data-component="faq-items-field" class="tw-flex tw-flex-col tw-gap-2">
+    <ItemsField
+      ref="itemsFieldRef"
+      :items="items"
+      :can-collapse="true"
+      :show-preview-image="false"
+      @items-change="onReorder"
+      @items-delete="onDelete"
+    >
+      <template #preview="{ item }">
+        <p class="tw-w-full tw-truncate tw-m-0">
+          {{ decodeHtmlEntities(getPlainTextFromRTE(item.question ?? '')) }}
+        </p>
+      </template>
+      <template #form="{ index }">
+        <div v-for="input in INPUTS" :key="input.key" class="tw-mt-3">
+          <FieldSubHeader
+            class="tw-mb-2"
+            :title="contentSettingsTr(input.titleKey)"
+          />
+          <!-- The same editor as a section title; every question (or answer) shares one style. -->
+          <TextareaField
+            v-if="showRichTextEditor"
+            :id="id"
+            :key="`${items[index].id}-${input.key}`"
+            :name="input.key"
+            :value="items[index][input.key]"
+            :styles="editorStyles(index, input)"
+            :item="items[index]"
+            :placeholder="contentSettingsTr(input.titleKey)"
+            :max-length="input.maxLength"
+            :content-type="content.type"
+            :show-rich-text-editor="true"
+            :attrs="{ 'data-test-tag': `list-item-${input.key}` }"
+            @update:model-value="onFieldInput(index, input.key, $event)"
+          />
+          <template v-else>
+            <!-- Plain inputs HTML-encode on write, like section text fields. -->
+            <component
+              :is="input.key === 'question' ? TextField : TextareaField"
+              :id="id"
+              :key="`${items[index].id}-${input.key}`"
+              :name="input.key"
+              :value="items[index][input.key]"
+              v-bind="input.key === 'question' ? {} : { item: items[index] }"
+              :placeholder="contentSettingsTr(input.titleKey)"
+              :max-length="input.maxLength"
+              :attrs="{ 'data-test-tag': `list-item-${input.key}` }"
+              @update:model-value="onFieldInput(index, input.key, $event)"
+            />
+            <TextStyleField
+              :id="`${id}-${items[index].id}-${input.styleKey}`"
+              :name="input.styleKey"
+              :value="content[input.styleKey]"
+              :is-admin-maker="isAdminMaker"
+              :logo-theme="logoTheme"
+              :show-font-style-only="true"
+              :is-text-content="true"
+              @update:model-value="onStyleInput(input.key, $event)"
+            />
+          </template>
+          <PersonalisationOverrideField
+            v-if="isAdminMaker && content.personalisationRole"
+            :id="id"
+            :name="`${input.key}Override`"
+            :content="content"
+            :object="items[index]"
+            personalisation-type="text-media-items"
+            @update:model-value="onPersonalisationOverrideChange(index, $event)"
+          />
+        </div>
+      </template>
+    </ItemsField>
+    <Button
+      v-if="!isAtMax"
+      :label="contentSettingsTr(`addItemTitle`)"
+      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 {
+  FAQ_MAX_ITEMS,
+  type Content,
+  type FaqItem,
+  type LogoTheme,
+  type TextStyleDeclaration,
+} from '@brand-page';
+import { decodeHtmlEntities } from '@brand-page/utils';
+import {
+  authorContentRteFields,
+  getPlainTextFromRTE,
+  rteDoc,
+} from '@brand-page-maker/utils';
+import { collectRteTextColors } from '@shared/color-strategies/rte-color';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useUiStyleSettingsStore } from '@shared/style-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 PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
+import type { UpdateItemValuePayload } from '../../models';
+
+type FaqTextKey = 'question' | 'answer';
+type FaqStyleKey = 'questionStyle' | 'answerStyle';
+
+type FaqInput = {
+  key: FaqTextKey;
+  styleKey: FaqStyleKey;
+  maxLength: number;
+  titleKey: string;
+};
+
+// Question and answer are capped like a section's title and description.
+const INPUTS: ReadonlyArray<FaqInput> = [
+  {
+    key: 'question',
+    styleKey: 'questionStyle',
+    maxLength: 200,
+    titleKey: 'faqQuestionTitle',
+  },
+  {
+    key: 'answer',
+    styleKey: 'answerStyle',
+    maxLength: 1000,
+    titleKey: 'faqAnswerTitle',
+  },
+];
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  id: { type: String, required: true },
+  name: { type: String, required: true },
+  value: { type: Array as PropType<FaqItem[]>, required: true },
+  content: { type: Object as PropType<Content>, required: true },
+  // 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<FaqItem[]>];
+}>();
+
+const itemsFieldRef = ref<{ expand: (index: number) => void } | null>(null);
+const items = ref<FaqItem[]>(cloneDeep(props.value ?? []));
+
+const isAtMax = computed((): boolean => items.value.length >= FAQ_MAX_ITEMS);
+
+// 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: FaqTextKey,
+  payload: UpdateItemValuePayload<unknown>,
+): void => {
+  items.value[index] = {
+    ...items.value[index],
+    [key]: payload.value ?? '',
+  } as FaqItem;
+  emitChange(payload.isHydrationWrite === true);
+};
+
+const blockTextAlign = (doc: unknown): string | undefined =>
+  (doc as { content?: { attrs?: { textAlign?: string } }[] } | undefined)
+    ?.content?.[0]?.attrs?.textAlign;
+
+// Every question (or answer) shares one style, but its alignment lives in its own doc, so each
+// editor follows its own doc and not the other items'.
+const editorStyles = (index: number, input: FaqInput): TextStyleDeclaration => {
+  const style = props.content[input.styleKey];
+
+  return {
+    ...style,
+    textAlign:
+      blockTextAlign(items.value[index][input.key]) ?? style?.textAlign,
+  };
+};
+
+// Writes the section's shared style, as the rich-text toolbar does.
+const onStyleInput = (
+  key: FaqTextKey,
+  payload: UpdateItemValuePayload<TextStyleDeclaration>,
+): void => {
+  useUiContentSettingsStore().updateTextStyles({
+    id: props.id,
+    name: key,
+    value: payload.value,
+  });
+};
+
+const onPersonalisationOverrideChange = (
+  index: number,
+  payload: { name: string; value: string },
+): void => {
+  items.value[index] = { ...items.value[index], [payload.name]: payload.value };
+  emitChange();
+};
+
+const onReorder = (reordered: FaqItem[]): void => {
+  items.value = [...reordered];
+  emitChange();
+};
+
+const onDelete = (index: number): void => {
+  items.value = items.value.filter((_item, i) => i !== index);
+  emitChange();
+};
+
+// A new item follows the section's shared styles. A rich-text doc carries its own colour and
+// alignment, so it is authored with those of the item above, else the section's.
+const createItem = (): FaqItem => {
+  const newItem = { id: uuid.v4() } as FaqItem;
+  const lastItem = items.value.at(-1);
+  const scratch = { type: props.content.type, items: [newItem] } as Content;
+
+  INPUTS.forEach(({ key, styleKey, titleKey }) => {
+    const text = contentSettingsTr(titleKey);
+    const style = props.content[styleKey];
+
+    newItem[key] = props.showRichTextEditor ? rteDoc(text) : text;
+    scratch[styleKey] = {
+      ...style,
+      color: collectRteTextColors(lastItem?.[key])?.colors[0] ?? style?.color,
+      textAlign: blockTextAlign(lastItem?.[key]) ?? style?.textAlign,
+    };
+  });
+
+  if (props.showRichTextEditor) {
+    authorContentRteFields(
+      scratch,
+      useUiStyleSettingsStore().textStyles.textStyleOptions,
+    );
+  }
+
+  return newItem;
+};
+
+const onAdd = async (): Promise<void> => {
+  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/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -33,6 +33,7 @@
       v-for="group in groups"
       :key="`content-settings-item-group-${group.id}`"
       data-component="collapsible-panel"
+      :data-test-content-settings-group="group.id"
       :title="group.displayName"
       :is-collapsed="isGroupCollapsed(group.id)"
       @changed="onToggleGroupCollapseClick(group.id)"

package/src/shared/content-settings/components/items-field/ItemsField.mixin.ts

@@ -89,6 +89,9 @@ export default defineComponent({
     toggleCollapsed(index: number) {
       this.itemStates[index].isCollapsed = !this.itemStates[index].isCollapsed;
     },
+    expand(index: number): void {
+      this.itemStates[index] = { index, isCollapsed: false };
+    },
     onDelete(index: number): void {
       this.$emit('items-delete', index);
     },

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

@@ -7,7 +7,10 @@
       :disabled="!isDraggable"
     >
       <template #item="{ element, index }">
-        <li :key="`items-${element.item.id}-${index}`">
+        <li
+          :key="`items-${element.item.id}-${index}`"
+          data-test-items-field-row
+        >
           <div
             class="tw-mb-2 tw-bg-grayscale-200 tw-p-4 tw-rounded-md tw-border tw-border-grayscale-400 tw-border-solid"
           >
@@ -42,21 +45,24 @@
                 </div>
               </div>
               <div
-                class="tw-grow tw-flex tw-gap-2 tw-items-center"
+                class="tw-grow tw-min-w-0 tw-flex tw-gap-2 tw-items-center"
                 @click="onEdit(index)"
               >
                 <slot name="preview" :item="element.item" />
               </div>
               <button
                 class="tw-bg-transparent tw-border-none tw-cursor-pointer tw-object-center tw-p-0 tw-text-grayscale-600 hover:tw-text-primary-500 tw-transition-colors tw-duration-300 tw-ease-out"
+                data-test-items-field-delete
                 @click="onDelete(index)"
               >
-                <span class="tw-sr-only">Delete payment option</span>
+                <span class="tw-sr-only">{{ commonTr('remove') }}</span>
                 <Icon name="delete" size="sm" />
               </button>
               <div
                 v-if="canCollapse"
                 class="tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-cursor-pointer tw-ml-2"
+                data-test-items-field-toggle
+                :data-test-collapsed="element.state.isCollapsed"
                 @click="toggleCollapsed(index)"
               >
                 <Icon
@@ -82,6 +88,7 @@
 <script>
 import { Icon } from '@designcrowd/fe-shared-lib';
 import Draggable from 'vuedraggable';
+import { commonTr } from '@src/composables/useTranslate';
 import ItemsFieldMixin from './ItemsField.mixin';
 
 export default {
@@ -90,5 +97,8 @@ export default {
     Draggable,
   },
   mixins: [ItemsFieldMixin],
+  setup() {
+    return { commonTr };
+  },
 };
 </script>

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

@@ -988,6 +988,92 @@ describe('content settings store — renormalizeTextStylesForRole relinks siblin
 
     expect(markRteResyncMock).not.toHaveBeenCalled();
   });
+
+  describe('FAQ list items (shared question and answer styles)', () => {
+    const faqStore = () => {
+      const store = setupStore();
+
+      store.items.push({
+        id: 'faq-1',
+        type: 'faq-section',
+        settings: {
+          content: {
+            type: 'faq-section',
+            questionStyle: { textStyleType: 'heading3' },
+            answerStyle: { textStyleType: 'heading4' },
+            items: [
+              {
+                id: 'q1',
+                question: docOf(run('a', { fontSize: '3.5em' })),
+                answer: docOf(run('b', { fontSize: '3.5em' })),
+              },
+              {
+                id: 'q2',
+                question: docOf(run('c', { fontSize: '3.5em' })),
+                answer: docOf(run('d', { fontSize: '3.5em' })),
+              },
+            ],
+          },
+        },
+      } as never);
+
+      return store;
+    };
+    const faqItems = (store: ReturnType<typeof faqStore>) =>
+      (
+        store.items[2].settings.content as unknown as {
+          items: Record<string, unknown>[];
+        }
+      ).items;
+    const activeDoc = () =>
+      docOf(run('mine', { fontSize: roleVarRef('fontSize') }));
+
+    test("relinks every item's field on the shared role, and only that field", () => {
+      const store = faqStore();
+
+      store.renormalizeTextStylesForRole('heading3', OLD_H3);
+
+      const [first, second] = faqItems(store);
+
+      expect(attrsOf(first.question, 0).fontSize).toBe(roleVarRef('fontSize'));
+      expect(attrsOf(second.question, 0).fontSize).toBe(roleVarRef('fontSize'));
+      expect(attrsOf(first.answer, 0).fontSize).toBe('3.5em'); // another role
+      expect(markRteResyncMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('writes the active item editor doc as given and resyncs its whole list', () => {
+      const store = faqStore();
+      const doc = activeDoc();
+
+      store.renormalizeTextStylesForRole('heading3', OLD_H3, {
+        id: 'faq-1',
+        name: 'question',
+        itemId: 'q1',
+        doc,
+      });
+
+      expect(faqItems(store)[0].question).toEqual(doc);
+      // The other item's question relinked, so the active editor remounts with it.
+      expect(markRteResyncMock).toHaveBeenCalledWith(undefined);
+    });
+
+    test('excepts the list field when only other sections changed', () => {
+      const store = faqStore();
+
+      faqItems(store).splice(1); // only the active item is left in the list
+
+      store.renormalizeTextStylesForRole('heading3', OLD_H3, {
+        id: 'faq-1',
+        name: 'question',
+        itemId: 'q1',
+        doc: activeDoc(),
+      });
+
+      expect(markRteResyncMock).toHaveBeenCalledWith({
+        except: { id: 'faq-1', name: 'items' },
+      });
+    });
+  });
 });
 
 // Brief 3 R6: a new text block saves no size. setItems backfills a missing field from its

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

@@ -20,7 +20,10 @@ import {
   isTiptapDocument,
   relinkRoleEqualMarks,
 } from '@brand-page-maker/utils';
-import { pairedRteTextField } from '../../color-strategies/rte-field-pairs';
+import {
+  forEachRteItemField,
+  pairedRteTextField,
+} from '../../color-strategies/rte-field-pairs';
 
 import {
   CONTENT_SETTINGS_CONFIGS,
@@ -549,7 +552,14 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
     renormalizeTextStylesForRole(
       type: string,
       previousRole?: Record<string, unknown>,
-      active?: { id: string; name: string; index?: number; doc: unknown },
+      active?: {
+        id: string;
+        name: string;
+        index?: number;
+        /** The list item (an FAQ question) whose editor is active. */
+        itemId?: string;
+        doc: unknown;
+      },
     ): void {
       const styleKeys = Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS);
       const textStyleOptions =
@@ -562,8 +572,10 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         previousRole,
       ];
       let relinkedRte = false;
-      // A text item's editors share one field, so a relinked sibling item remounts the active one too.
+      // A list's editors share one field, so a relinked sibling item remounts the active one too.
       let relinkedInActiveField = false;
+      // The mounted field of an active list item's editor: a list's editors all live under it.
+      let activeListField: string | undefined;
 
       const relink = (doc: unknown, inActiveField = false): unknown => {
         if (!isTiptapDocument(doc)) return doc;
@@ -603,6 +615,27 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
           }
         }
 
+        // List items (each FAQ question and answer) follow the section's shared style (normalized
+        // above) but keep their own doc.
+        forEachRteItemField(sectionType, content, (listItem, pair) => {
+          const style = content[pair.styleField] as
+            | { textStyleType?: string }
+            | undefined;
+
+          if (style?.textStyleType !== type) return;
+
+          const isActiveList = !!active?.itemId && active.id === item.id;
+
+          if (isActiveList) activeListField = pair.itemsField;
+
+          listItem[pair.textField] =
+            isActiveList &&
+            active.name === pair.textField &&
+            active.itemId === listItem.id
+              ? active.doc
+              : relink(listItem[pair.textField], isActiveList);
+        });
+
         const textItems = content.textItems as
           | { text?: unknown; textStyle?: { textStyleType?: string } }[]
           | undefined;
@@ -639,7 +672,9 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       if (relinkedRte) {
         useHistoryStore().markRteResync(
           active && !relinkedInActiveField
-            ? { except: { id: active.id, name: active.name } }
+            ? {
+                except: { id: active.id, name: activeListField ?? active.name },
+              }
             : undefined,
         );
       }

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

@@ -2,12 +2,13 @@ import type Vue from 'vue';
 import { createApp } from 'vue';
 import { createRouter, createMemoryHistory } from 'vue-router';
 import { createPinia, setActivePinia } from 'pinia';
-import type { LogoContent, TextContent } from '@brand-page';
+import { VIEWPORTS, type LogoContent, type TextContent } from '@brand-page';
 import type { ContentItem } from '../../content-settings/models';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import { INITIALISE_PAYLOAD } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { type SetLogoVariationPayload, useUiLogoSettingsStore } from './index';
 import type { ContentPage } from '../../page-settings/models';
+import { PAGE_SECTIONS } from '../../page-settings/models';
 import { useUiPageSettingsStore } from '../../page-settings/store';
 import { logoUtil } from '@brand-page/utils';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
@@ -187,4 +188,29 @@ describe('logo store module', () => {
     ).toEqual(LOGO_VERSION_TWO_URL);
     expect(pageSettingsStore.pages[1].contents[0] as any).toBeUndefined();
   });
+
+  test('setSelectedLogoImageToAll writes both header viewports', async () => {
+    // Arrange
+    const store = useBrandPageMakerStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+    const logoSettingsStore = useUiLogoSettingsStore();
+
+    await store.initialise(INITIALISE_PAYLOAD);
+
+    const newLogo =
+      logoUtil.safeGetLogoImageFromLogoImageUrl(LOGO_VERSION_TWO_URL)!;
+
+    // Act
+    logoSettingsStore.setSelectedLogoImageToAll({ selectedLogoImage: newLogo });
+
+    // Assert — both header viewports take the new logo
+    expect(
+      pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop]
+        .logoImage.logoDraftToken,
+    ).toBe(newLogo.logoDraftToken);
+    expect(
+      pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.mobile]
+        .logoImage.logoDraftToken,
+    ).toBe(newLogo.logoDraftToken);
+  });
 });