@designcrowd/library.brand-page 6.2.16 → 6.2.17

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -206,6 +206,15 @@
     "enterTextHerePlaceholder": "Introduza o texto aqui...",
     "bookNowLabel": "Reservar já",
     "shippingLabel": "Ativar morada de envio",
-    "shippingPlaceholder": "Exija que os clientes introduzam uma morada de envio durante o processo de finalização da compra."
+    "shippingPlaceholder": "Exija que os clientes introduzam uma morada de envio durante o processo de finalização da compra.",
+
+    "faqSectionDisplayName": "Perguntas frequentes",
+    "faqItemsDisplayName": "Itens",
+    "defaultFaqTitle": "Perguntas frequentes",
+    "defaultFaqDescription": "Encontre respostas a perguntas frequentes sobre os nossos produtos, serviços ou empresa",
+    "defaultFaqQuestion": "Que serviços oferece?",
+    "defaultFaqAnswer": "Disponibilizamos uma variedade de produtos e serviços adaptados para satisfazer as suas necessidades. Contacte-nos para saber mais sobre como podemos ajudar.",
+    "faqQuestionTitle": "Pergunta",
+    "faqAnswerTitle": "Resposta"
   }
 }

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.vue

@@ -114,6 +114,7 @@ import ShapeField from '../shape-field/ShapeField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
 import TestimonialItemsField from '../testimonial-items-field/TestimonialItemsField.vue';
 import TextItemsField from '../text-items-field/TextItemsField.vue';
+import FaqItemsField from '../faq-items-field/FaqItemsField.vue';
 import SliderField from '../slider-field/SliderField.vue';
 import PageDropdownField from '../page-dropdown-field/PageDropdownField.vue';
 import PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
@@ -153,6 +154,7 @@ export default {
     'color-replacements-field': ColorReplacementsField,
     'testimonial-items-field': TestimonialItemsField,
     'text-items-field': TextItemsField,
+    'faq-items-field': FaqItemsField,
     'product-config-option-field': ProductConfigOptionField,
     FieldSubHeader,
     Toggle,

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

@@ -0,0 +1,162 @@
+import { vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import FaqItemsField from './FaqItemsField.vue';
+import { useUiContentSettingsStore } from '../../store';
+import ItemsField from '../items-field/ItemsField.vue';
+import { FAQ_MAX_ITEMS } from '@brand-page';
+
+vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  contentSettingsTr: (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+const makeItems = (count: number) =>
+  Array.from({ length: count }, (_v, i) => ({
+    id: `q${i + 1}`,
+    question: `Question ${i + 1}`,
+    answer: `Answer ${i + 1}`,
+  }));
+
+// Declares the props the list binds, so a test can read them.
+const TextareaFieldStub = defineComponent({
+  name: 'TextareaField',
+  props: {
+    name: { type: String, default: '' },
+    styles: { type: Object, default: undefined },
+  },
+  template: '<div />',
+});
+
+const mountField = (count: number, extraProps: Record<string, unknown> = {}) =>
+  mount(FaqItemsField, {
+    props: {
+      id: 'faq-1',
+      name: 'items',
+      value: makeItems(count) as any,
+      content: {
+        id: 'faq-1',
+        type: 'faq-section',
+        questionStyle: { textStyleType: 'heading5', color: 'var(--palette-1)' },
+        answerStyle: { textStyleType: 'paragraph2' },
+      } as any,
+      ...extraProps,
+    },
+    global: {
+      stubs: { TextareaField: TextareaFieldStub, TextStyleField: true },
+    },
+  });
+
+const lastEmitted = (wrapper: ReturnType<typeof mountField>): any => {
+  const events = wrapper.emitted('update:modelValue') ?? [];
+
+  return events[events.length - 1]?.[0];
+};
+
+const addButton = (wrapper: ReturnType<typeof mountField>) =>
+  wrapper.find('[data-test-list-items-add]');
+
+describe('FaqItemsField', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  // itemStates is index-keyed and never pruned (ItemsField.mixin.ts), so a row added
+  // after the last one is deleted would otherwise reuse its stale collapsed state.
+  test('a row added after the last one is deleted still opens expanded', async () => {
+    const wrapper = mountField(3);
+    const toggles = () => wrapper.findAll('[data-test-items-field-toggle]');
+
+    await toggles()[2].trigger('click');
+    expect(toggles()[2].attributes('data-test-collapsed')).toBe('true');
+
+    wrapper.findComponent(ItemsField).vm.$emit('items-delete', 2);
+    await flushPromises();
+
+    await addButton(wrapper).trigger('click');
+    await flushPromises();
+
+    expect(toggles()[2].attributes('data-test-collapsed')).toBe('false');
+  });
+
+  test('at the cap the add button is removed entirely', () => {
+    const wrapper = mountField(FAQ_MAX_ITEMS);
+
+    expect(addButton(wrapper).exists()).toBe(false);
+  });
+
+  test("each question's editor follows its own alignment, not the shared style's", () => {
+    const aligned = (textAlign: string) => ({
+      type: 'doc',
+      content: [{ type: 'paragraph', attrs: { textAlign } }],
+    });
+    const wrapper = mountField(2, {
+      showRichTextEditor: true,
+      value: [
+        { ...makeItems(1)[0], question: aligned('right') },
+        { ...makeItems(2)[1], question: aligned('center') },
+      ],
+    });
+
+    expect(
+      wrapper
+        .findAllComponents(TextareaFieldStub)
+        .filter((editor) => editor.props('name') === 'question')
+        .map((editor) => editor.props('styles')?.textAlign),
+    ).toEqual(['right', 'center']);
+  });
+
+  test("without rich text, the font-style control writes the section's shared style", async () => {
+    const updateTextStyles = vi
+      .spyOn(useUiContentSettingsStore(), 'updateTextStyles')
+      .mockImplementation(() => undefined);
+    const wrapper = mountField(1);
+
+    await flushPromises();
+    wrapper
+      .findAllComponents({ name: 'TextStyleField' })[0]
+      .vm.$emit('update:modelValue', { value: { fontWeight: 'bold' } });
+
+    expect(updateTextStyles).toHaveBeenCalledWith({
+      id: 'faq-1',
+      name: 'question',
+      value: { fontWeight: 'bold' },
+    });
+  });
+
+  test("a new rich-text item takes the item above's colour, else the shared style's", async () => {
+    const redQuestion = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Q',
+              marks: [{ type: 'textStyle', attrs: { color: '#ff0000' } }],
+            },
+          ],
+        },
+      ],
+    };
+    const afterRed = mountField(1, {
+      showRichTextEditor: true,
+      value: [{ ...makeItems(1)[0], question: redQuestion }],
+    });
+    const afterPlain = mountField(1, { showRichTextEditor: true });
+
+    await addButton(afterRed).trigger('click');
+    await addButton(afterPlain).trigger('click');
+    await flushPromises();
+
+    expect(JSON.stringify(lastEmitted(afterRed).value[1].question)).toContain(
+      '#ff0000',
+    );
+    expect(JSON.stringify(lastEmitted(afterPlain).value[1].question)).toContain(
+      'var(--palette-1)',
+    );
+  });
+});

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