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

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

@@ -39,13 +39,8 @@ export default defineComponent({
       required: false,
       default: true,
     },
-    deleteLabel: {
-      type: String,
-      required: false,
-      default: 'Delete payment option',
-    },
   },
-  emits: ['items-change', 'items-delete', 'itemsEdit', 'item-toggle'],
+  emits: ['items-change', 'items-delete', 'itemsEdit'],
   data: () => ({
     itemStates: {} as Record<number, ItemFieldState>,
   }),
@@ -93,11 +88,6 @@ export default defineComponent({
   methods: {
     toggleCollapsed(index: number) {
       this.itemStates[index].isCollapsed = !this.itemStates[index].isCollapsed;
-      this.$emit('item-toggle', index, this.itemStates[index].isCollapsed);
-    },
-    expand(index: number): void {
-      this.itemStates[index] = { index, isCollapsed: false };
-      this.$emit('item-toggle', index, false);
     },
     onDelete(index: number): void {
       this.$emit('items-delete', index);

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

@@ -7,10 +7,7 @@
       :disabled="!isDraggable"
     >
       <template #item="{ element, index }">
-        <li
-          :key="`items-${element.item.id}-${index}`"
-          data-test-items-field-row
-        >
+        <li :key="`items-${element.item.id}-${index}`">
           <div
             class="tw-mb-2 tw-bg-grayscale-200 tw-p-4 tw-rounded-md tw-border tw-border-grayscale-400 tw-border-solid"
           >
@@ -52,17 +49,14 @@
               </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">{{ deleteLabel }}</span>
+                <span class="tw-sr-only">Delete payment option</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

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

@@ -1,7 +1,6 @@
 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],
@@ -15,11 +14,6 @@ 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,7 +19,6 @@
       :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,13 +144,6 @@ 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,74 +528,4 @@ 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,7 +9,6 @@ import type {
   SetItemSettingsFieldErrorMessagePayload,
   UpdateItemValuePayload,
   UpdateMultipleItemValuesPayload,
-  RteItemStyleTarget,
   ValidateItemPayload,
 } from '../models';
 import type { ColorReplacement, Content } from '@brand-page';
@@ -114,8 +113,6 @@ 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', {
@@ -130,15 +127,8 @@ 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();
 
@@ -576,40 +566,16 @@ 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 || !listItem) {
+      if (!item) {
         return;
       }
 
       armHistoryMergeForHydrationWrite(isHydrationWrite);
 
-      listItem[target.styleField] = vueDeepMerge(
-        listItem[target.styleField],
+      item.settings.content.textItems[index!].textStyle = vueDeepMerge(
+        item.settings.content.textItems[index!].textStyle,
         value,
       );
       this.validateItem({ id, name });

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

@@ -397,22 +397,3 @@ 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/utils/minify-brand-page-metadata.test.ts

@@ -169,38 +169,3 @@ 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,
-    });
-  });
-});

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.d.ts

@@ -1,3 +0,0 @@
-import type { ButtonGroupConfig, ValueConvertor } from '../models';
-import type { FaqSectionContent } from '@brand-page/models';
-export declare const faqDisplayStyleConvertor: ValueConvertor<string | null, ButtonGroupConfig, Partial<FaqSectionContent>>;

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.js

@@ -1,47 +0,0 @@
-import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
-import { converterTr } from '@src/composables/useTranslate';
-const ICON_VIEW_BOX = '0 0 96 56';
-export const faqDisplayStyleConvertor = {
-    convertBackToMultipleValues: true,
-    convert(value) {
-        return {
-            options: [
-                {
-                    title: converterTr(`faqCenteredAccordion`),
-                    value: FAQ_DISPLAY_STYLES.centered,
-                    isSelected: value === FAQ_DISPLAY_STYLES.centered,
-                    iconName: 'display-style-faq-1',
-                    iconViewBox: ICON_VIEW_BOX,
-                    dataAttribute: 'data-test-btn-faq-centered',
-                },
-                {
-                    title: converterTr(`faqSplitAccordion`),
-                    value: FAQ_DISPLAY_STYLES.split,
-                    isSelected: value === FAQ_DISPLAY_STYLES.split,
-                    iconName: 'display-style-faq-2',
-                    iconViewBox: ICON_VIEW_BOX,
-                    dataAttribute: 'data-test-btn-faq-split',
-                },
-                {
-                    title: converterTr(`faqGrid`),
-                    value: FAQ_DISPLAY_STYLES.grid,
-                    isSelected: value === FAQ_DISPLAY_STYLES.grid,
-                    iconName: 'display-style-faq-3',
-                    iconViewBox: ICON_VIEW_BOX,
-                    dataAttribute: 'data-test-btn-faq-grid',
-                },
-            ],
-        };
-    },
-    // The heading sits left beside the accordion in split, centred above it otherwise.
-    convertBack(config) {
-        const displayStyle = config.options.find((v) => v.isSelected)?.value ??
-            FAQ_DISPLAY_STYLES.centered;
-        const textAlign = displayStyle === FAQ_DISPLAY_STYLES.split ? 'left' : 'center';
-        return {
-            displayStyle,
-            titleStyle: { textAlign },
-            descriptionStyle: { textAlign },
-        };
-    },
-};