@designcrowd/library.brand-page 6.2.9 → 6.2.10

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -351,13 +351,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -647,13 +647,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -5083,13 +5083,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4434,13 +4434,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("@brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -554,13 +554,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -344,13 +344,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -852,13 +852,14 @@ declare const _default: import("vue").DefineComponent<{}, {
         startBrandPageSlugEditMode(): void;
         triggerLockedContentClickedEvent(contentType: string): Promise<void>;
         unpublishBrandPage(): Promise<void>;
-        updateBrandPageSettings({ description, title }: {
-            description: any;
-            title: any;
+        updateBrandPageSettings(payload: {
+            description: string;
+            title: string;
         }): Promise<void>;
-        updateSensitiveContent({ sensitiveContent }: {
-            sensitiveContent: any;
+        updateSensitiveContent(payload: {
+            sensitiveContent: import("../../../brand-page").SensitiveContent;
         }): Promise<void>;
+        saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
         createBrandPageCustomDomain({ domainName }: {
             domainName: any;
         }): Promise<false | undefined>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.9",
+  "version": "6.2.10",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.test.ts

@@ -0,0 +1,323 @@
+import { mount, DOMWrapper } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { TextInput, Textarea } from '@designcrowd/fe-shared-lib';
+import BrandPageSettings from './BrandPageSettings.vue';
+import SeoPageSettings from '../seo-settings/SeoPageSettings.vue';
+import SensitiveContent from '../sensitive-content/SensitiveContent.vue';
+import ImageField from '@shared/content-settings/components/image-field/ImageField.vue';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '@brand-page-maker/stores';
+import { SENSITIVE_CONTENT_TYPES } from '@brand-page';
+
+// CollapsiblePanel is imported directly in a `<script setup>` template, so
+// `global.stubs` can't intercept it by name (no `resolveComponent` call is
+// emitted for it). It starts collapsed and unmounts its slot when collapsed
+// (maker-settings-panels.md), so open every panel for real by clicking its
+// header, the same way ColorStrategyPanel.test.ts does.
+const mountSettings = async () => {
+  const wrapper = mount(BrandPageSettings);
+
+  for (const header of wrapper.findAll(
+    '[data-component="collapsible-panel"] > div',
+  )) {
+    await header.trigger('click');
+  }
+
+  return wrapper;
+};
+
+type Wrapper = Awaited<ReturnType<typeof mountSettings>>;
+
+const radios = (wrapper: Wrapper) =>
+  wrapper.findAll('input[type="radio"][name="sensitiveContent"]');
+
+// GoogleAnalytics and SocialShare each render their own TextInput in a
+// DIFFERENT collapsible panel, so scope to the panel holding the SEO
+// Textarea (unique to SeoPageSettings) to find the SEO title input alone.
+const seoTitleInput = (wrapper: Wrapper) => {
+  const textarea = wrapper.findComponent(Textarea);
+
+  if (!textarea.exists()) return undefined;
+
+  const panel = textarea.element.closest(
+    '[data-component="collapsible-panel"]',
+  ) as HTMLElement;
+
+  const input = new DOMWrapper(panel).findComponent(TextInput);
+
+  return input.exists() ? input : undefined;
+};
+
+// The Sensitive Content panel is the only rendered panel with these radios;
+// its Update button is the nearest one in the same collapsible panel.
+const sensitiveContentUpdateButton = (wrapper: Wrapper) => {
+  const panel = radios(wrapper)[0].element.closest(
+    '[data-component="collapsible-panel"]',
+  ) as HTMLElement;
+
+  return new DOMWrapper(panel).find('button');
+};
+
+const faviconField = (wrapper: Wrapper) =>
+  wrapper
+    .findAllComponents(ImageField)
+    .find((field) => field.props('name') === 'favicon');
+
+describe('BrandPageSettings — SEO and Sensitive Content before the first save', () => {
+  let containerStore: ReturnType<typeof useBrandPageContainerStore>;
+  let brandPageMakerStore: ReturnType<typeof useBrandPageMakerStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+
+    containerStore = useBrandPageContainerStore();
+    brandPageMakerStore = useBrandPageMakerStore();
+  });
+
+  test.each([
+    ['post-purchase, never saved', {}],
+    ['pre-purchase, never saved', { isPrePurchase: true }],
+    ['saved site', { designDraftToken: 'draft-123' }],
+  ])(
+    'shows both settings (%s)',
+    async (_case: string, flags: Record<string, boolean | string>) => {
+      Object.assign(containerStore, flags);
+
+      const wrapper = await mountSettings();
+
+      expect(seoTitleInput(wrapper)).toBeDefined();
+      expect(wrapper.findComponent(Textarea).exists()).toBe(true);
+      expect(wrapper.find('[data-test-btn-update-seo-settings]').exists()).toBe(
+        true,
+      );
+      expect(radios(wrapper)).toHaveLength(4);
+      expect(faviconField(wrapper)).toBeDefined();
+    },
+  );
+
+  test('disabled while saving', async () => {
+    // isPublishing disables both panels' Update buttons and inputs, and blocks
+    // a row click from changing the choice already made — the same as isSaving.
+    const publishingWrapper = await mountSettings();
+
+    // Dirty both panels first — an already-disabled (clean) button can't
+    // distinguish "isPublishing disables it" from "it was never enabled".
+    await seoTitleInput(publishingWrapper)!.find('input').setValue('A title');
+    await new DOMWrapper(
+      radios(publishingWrapper)[1].element.parentElement!,
+    ).trigger('click');
+
+    containerStore.isPublishing = true;
+    await publishingWrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(publishingWrapper).attributes('disabled'),
+    ).toBeDefined();
+    expect(radios(publishingWrapper)[0].attributes('disabled')).toBeDefined();
+    expect(
+      publishingWrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeDefined();
+    expect(seoTitleInput(publishingWrapper)!.props('disabled')).toBe(true);
+    expect(publishingWrapper.findComponent(Textarea).props('disabled')).toBe(
+      true,
+    );
+
+    // A click on a different row must not change the choice already made
+    // above while a publish is in flight.
+    await new DOMWrapper(
+      radios(publishingWrapper)[2].element.parentElement!,
+    ).trigger('click');
+    expect(
+      (radios(publishingWrapper)[1].element as HTMLInputElement).checked,
+    ).toBe(true);
+
+    containerStore.isPublishing = false;
+
+    // isSaving disables both panels' Update buttons and inputs, and blocks a
+    // row click from changing the choice already made.
+    const wrapper = await mountSettings();
+
+    // Dirty both panels first — an already-disabled (clean) button can't
+    // distinguish "isSaving disables it" from "it was never enabled". The
+    // radio's own state changes only through the row's `@click` handler, not
+    // a native `change`, so click the row rather than `setValue` the input.
+    await seoTitleInput(wrapper)!.find('input').setValue('A title');
+    await new DOMWrapper(radios(wrapper)[1].element.parentElement!).trigger(
+      'click',
+    );
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeUndefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeUndefined();
+
+    containerStore.isSaving = true;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeDefined();
+    expect(radios(wrapper)[0].attributes('disabled')).toBeDefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeDefined();
+    expect(seoTitleInput(wrapper)!.props('disabled')).toBe(true);
+    expect(wrapper.findComponent(Textarea).props('disabled')).toBe(true);
+
+    // A click on a different row must not change the choice already made
+    // above while a save is in flight.
+    await new DOMWrapper(radios(wrapper)[2].element.parentElement!).trigger(
+      'click',
+    );
+    expect((radios(wrapper)[1].element as HTMLInputElement).checked).toBe(true);
+
+    containerStore.isSaving = false;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      sensitiveContentUpdateButton(wrapper).attributes('disabled'),
+    ).toBeUndefined();
+    expect(radios(wrapper)[0].attributes('disabled')).toBeUndefined();
+    expect(
+      wrapper
+        .find('[data-test-btn-update-seo-settings]')
+        .attributes('disabled'),
+    ).toBeUndefined();
+    expect(seoTitleInput(wrapper)!.props('disabled')).toBe(false);
+    expect(wrapper.findComponent(Textarea).props('disabled')).toBe(false);
+  });
+
+  test('Manage page', async () => {
+    containerStore.isSaving = true;
+    vi.spyOn(brandPageMakerStore, 'updateBrandPageSettings').mockResolvedValue(
+      undefined,
+    );
+    vi.spyOn(
+      brandPageMakerStore,
+      'updateSensitiveContentSettings',
+    ).mockResolvedValue(undefined);
+
+    const seoWrapper = mount(SeoPageSettings, { props: { isMaker: false } });
+
+    await seoWrapper.find('input').setValue('New title');
+    const seoUpdateButton = seoWrapper.find(
+      '[data-test-btn-update-seo-settings]',
+    );
+
+    expect(seoUpdateButton.attributes('disabled')).toBeUndefined();
+
+    await seoUpdateButton.trigger('click');
+    await seoWrapper.vm.$nextTick();
+
+    expect(brandPageMakerStore.updateBrandPageSettings).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'New title' }),
+    );
+
+    const sensitiveWrapper = mount(SensitiveContent, {
+      props: { isMaker: false, value: SENSITIVE_CONTENT_TYPES.off },
+    });
+    const sensitiveRadios = sensitiveWrapper.findAll(
+      'input[type="radio"][name="sensitiveContent"]',
+    );
+
+    expect(sensitiveRadios[1].attributes('disabled')).toBeUndefined();
+
+    // The radio has no v-model/@change of its own — a real click lands on
+    // the row's wrapping div, same as SensitiveContent's own click handler.
+    await new DOMWrapper(sensitiveRadios[1].element.parentElement!).trigger(
+      'click',
+    );
+    await sensitiveWrapper.vm.$nextTick();
+
+    const sensitiveUpdateButton = sensitiveWrapper.find('button');
+
+    expect(sensitiveUpdateButton.attributes('disabled')).toBeUndefined();
+
+    await sensitiveUpdateButton.trigger('click');
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect(
+      brandPageMakerStore.updateSensitiveContentSettings,
+    ).toHaveBeenCalledWith({
+      sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+      shouldRefresh: true,
+    });
+
+    // isPublishing is the maker's own in-flight state (set by
+    // ManageBrandPageContainer's onPublishClicked) — it must not lock the
+    // Manage page's radios either.
+    containerStore.isPublishing = true;
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect(sensitiveRadios[2].attributes('disabled')).toBeUndefined();
+
+    await new DOMWrapper(sensitiveRadios[2].element.parentElement!).trigger(
+      'click',
+    );
+    await sensitiveWrapper.vm.$nextTick();
+
+    expect((sensitiveRadios[2].element as HTMLInputElement).checked).toBe(true);
+  });
+
+  test('SEO inputs stay editable on the Manage page while publishing', async () => {
+    // The Manage form is dirty when the store's title or description differs
+    // from the props, so match them to start clean.
+    containerStore.brandPageTitle = 'Old title';
+    containerStore.brandPageDescription = 'Old description';
+    containerStore.isPublishing = true;
+
+    const wrapper = mount(SeoPageSettings, {
+      props: {
+        isMaker: false,
+        pageTitle: 'Old title',
+        pageDescription: 'Old description',
+      },
+    });
+    const titleInput = wrapper.findComponent(TextInput);
+    const descriptionInput = wrapper.findComponent(Textarea);
+
+    expect(titleInput.props('disabled')).toBe(false);
+    expect(descriptionInput.props('disabled')).toBe(false);
+
+    await titleInput.find('input').setValue('New title');
+    await descriptionInput.find('textarea').setValue('New description');
+
+    expect(titleInput.props('modelValue')).toBe('New title');
+    expect(descriptionInput.props('modelValue')).toBe('New description');
+
+    const updateButton = wrapper.find('[data-test-btn-update-seo-settings]');
+
+    // The Update button keeps its unscoped isPublishing gate from develop;
+    // the form started clean, so releasing it shows the typing made it dirty.
+    expect(updateButton.attributes('disabled')).toBeDefined();
+
+    containerStore.isPublishing = false;
+    await wrapper.vm.$nextTick();
+
+    expect(updateButton.attributes('disabled')).toBeUndefined();
+  });
+
+  test('admin template editor', async () => {
+    containerStore.isAdminMaker = true;
+
+    const wrapper = await mountSettings();
+
+    expect(wrapper.find('[data-test-btn-update-seo-settings]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.findComponent(Textarea).exists()).toBe(false);
+    expect(radios(wrapper)).toHaveLength(0);
+    expect(faviconField(wrapper)).toBeDefined();
+  });
+});

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.vue

@@ -31,14 +31,14 @@
           :is-collapsed="true"
         >
           <PageSettings
-            v-if="designDraftToken"
+            v-if="!isAdminMaker"
             :is-maker="true"
             @update-settings="onUpdateSettings"
           />
           <div
             class="tw-border-0 tw-border-solid tw-border-grayscale-400 tw-mt-6"
             :class="{
-              'tw-border-t tw-py-8': designDraftToken,
+              'tw-border-t tw-py-8': !isAdminMaker,
             }"
           >
             <h3 class="tw-text-left tw-font-bold tw-mb-2">
@@ -117,7 +117,7 @@
           </div>
         </CollapsiblePanel>
         <CollapsiblePanel
-          v-if="designDraftToken"
+          v-if="!isAdminMaker"
           data-component="collapsible-panel"
           :title="commonTr('sensitiveContent')"
           :is-collapsed="true"

package/src/brand-page-maker/components/sensitive-content/SensitiveContent.vue

@@ -40,6 +40,7 @@
             name="sensitiveContent"
             :checked="data.selectedSensitiveSettings === opt.value"
             :value="opt.value"
+            :disabled="isSaving || isPublishing"
           />
           <input
             hidden
@@ -68,7 +69,7 @@
         :label="commonTr('updateSettings')"
         variant="primary"
         type="submit"
-        :disabled="isNoChange"
+        :disabled="isNoChange || isPublishing || isSaving"
         @click="onSensitiveContentUpdate"
       />
     </div>
@@ -97,7 +98,10 @@ import {
   SENSITIVE_CONTENT_TYPES,
   type SensitiveContent,
 } from '@brand-page/models/brand-page-context.model';
-import { useBrandPageMakerStore } from '@brand-page-maker/stores';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '@brand-page-maker/stores';
 import { sensitiveSettingTr, commonTr } from '@src/composables/useTranslate';
 
 interface Props {
@@ -106,6 +110,7 @@ interface Props {
   designDraftToken?: string;
 }
 const brandPageMakerStore = useBrandPageMakerStore();
+const brandPageContainerStore = useBrandPageContainerStore();
 
 const props = defineProps<Props>();
 
@@ -137,12 +142,27 @@ const isNoChange = computed(() => {
   return data.selectedSensitiveSettings === props.value;
 });
 
+// Scoped to isMaker: the Manage page's own publish/save must never lock the maker's radios, and vice versa.
+const isPublishing = computed<boolean>(
+  () => props.isMaker && brandPageContainerStore.isPublishing,
+);
+const isSaving = computed<boolean>(
+  () => props.isMaker && brandPageContainerStore.isSaving,
+);
+
 const emit = defineEmits([
   'change-sensitive-settings',
   'pre-submit-edit-sensitive-content',
 ]);
 
-const onSensitiveSettingsClick = (value) => {
+const onSensitiveSettingsClick = (value: SensitiveContent) => {
+  // The radio input's own `disabled` doesn't stop this handler — it's on the
+  // wrapping div so the whole row is clickable — so gate it here too, or a
+  // click would still change the choice while a save is in flight.
+  if (isSaving.value || isPublishing.value) {
+    return;
+  }
+
   data.selectedSensitiveSettings = value;
 };
 

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.ts

@@ -105,12 +105,17 @@ export default defineComponent({
     isPublishing() {
       return this.brandPageContainerStore.isPublishing;
     },
+    // Scoped to isMaker: the Manage page's save must never gate on the maker's own in-flight state.
+    isSaving(): boolean {
+      return this.isMaker && this.brandPageContainerStore.isSaving;
+    },
     isUpdateButtonEnabled(): any {
       return (
         (this.myPageDescription?.length ?? 0) <=
           BRANDPAGE_DESCRIPTION_CHARACTER_LIMIT &&
         (this.myPageTitle?.length ?? 0) <= BRANDPAGE_TITLE_CHARACTER_LIMIT &&
         !this.brandPageContainerStore.isPublishing &&
+        !this.isSaving &&
         this.isDirty &&
         this.isInternalDescriptionValid &&
         this.isInternalTitleValid

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.vue

@@ -69,6 +69,7 @@
             v-model="internalTitle"
             :label="commonTr('pageTitle')"
             :error="!!internalTitleErrorMessage"
+            :disabled="isSaving || isPublishing"
           />
           <p
             v-show="!isInternalTitleValid"
@@ -83,6 +84,7 @@
           :placeholder="seoSettingsTr('websiteDescription')"
           :error="!!internalDescriptionErrorMessage"
           :resize="false"
+          :disabled="isSaving || isPublishing"
         />
         <p
           v-show="!isInternalDescriptionValid"