@designcrowd/library.brand-page 6.2.8 → 6.2.10

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.vue

@@ -10,15 +10,21 @@
       :key="index"
       :value="mode.value"
     >
-      {{ mode.displayName }}
+      {{ colorPickerTr(mode.labelKey) }}
     </option>
   </select>
 </template>
 
 <script>
 import ColorModeSelectMixin from './ColorModeSelect.mixin';
+import { colorPickerTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [ColorModeSelectMixin],
+  setup() {
+    return {
+      colorPickerTr,
+    };
+  },
 };
 </script>

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.test.ts

@@ -0,0 +1,157 @@
+import { mount } from '@vue/test-utils';
+import i18next from 'i18next';
+import { describe, expect, test } from 'vitest';
+import {
+  setLocaleAsync,
+  supportedLocales,
+  type LocaleTypes,
+} from '@src/composables/useTranslate';
+import GradientTypeSelector from './GradientTypeSelector.vue';
+import en from '@src/shared/color-picker/components/i18n/color-picker.json';
+import deDE from '@src/shared/color-picker/components/i18n/color-picker.de-DE.json';
+import esES from '@src/shared/color-picker/components/i18n/color-picker.es-ES.json';
+import frCA from '@src/shared/color-picker/components/i18n/color-picker.fr-CA.json';
+import frFR from '@src/shared/color-picker/components/i18n/color-picker.fr-FR.json';
+import ptBR from '@src/shared/color-picker/components/i18n/color-picker.pt-BR.json';
+import ptPT from '@src/shared/color-picker/components/i18n/color-picker.pt-PT.json';
+
+// Expected values come from the locale files, not literals, so Smartling's
+// rewrite of the wording can't turn these tests red.
+const localeFiles: Record<LocaleTypes, typeof en> = {
+  'en-US': en,
+  'de-DE': deDE,
+  'es-ES': esES,
+  'fr-CA': frCA,
+  'fr-FR': frFR,
+  'pt-BR': ptBR,
+  'pt-PT': ptPT,
+};
+
+const stringsFor = (locale: LocaleTypes): (typeof en)['colorPicker'] =>
+  localeFiles[locale].colorPicker;
+
+const NON_ENGLISH_LOCALES = supportedLocales.filter(
+  (locale) => locale !== 'en-US',
+);
+
+// See RecaptchaDisclosure.vue.test.ts: the shared i18next singleton only takes
+// the language from `setLocaleAsync` on its first call.
+const useLocale = async (locale: string): Promise<void> => {
+  await setLocaleAsync(locale as LocaleTypes);
+  await i18next.changeLanguage(locale);
+};
+
+const buttons = (
+  wrapper: ReturnType<typeof mount>,
+): ReturnType<ReturnType<typeof mount>['findAll']> =>
+  wrapper.findAll('.gradient-color-switch-button');
+
+const mountSelector = (modelValue?: string): ReturnType<typeof mount> =>
+  mount(GradientTypeSelector, { props: { modelValue } });
+
+describe('GradientTypeSelector', () => {
+  test.each(NON_ENGLISH_LOCALES)(
+    'gradient buttons and hints use the %s locale file',
+    async (locale) => {
+      await useLocale(locale);
+
+      const wrapper = mountSelector();
+      const [linear, radial] = buttons(wrapper);
+
+      expect(linear.text()).toBe(stringsFor(locale).gradientTypeLinear);
+      expect(radial.text()).toBe(stringsFor(locale).gradientTypeRadial);
+      expect(linear.attributes('title')).toBe(
+        stringsFor(locale).gradientTypeLinearTitle,
+      );
+      expect(radial.attributes('title')).toBe(
+        stringsFor(locale).gradientTypeRadialTitle,
+      );
+      [linear.text(), radial.text()].forEach((text) => {
+        expect(text).not.toMatch(/^colorPicker\./);
+      });
+      expect(linear.classes()).toContain('gradient-color-switch-button');
+      expect(radial.classes()).toContain('gradient-color-switch-button');
+    },
+  );
+
+  test('English gradient buttons and hints read word for word', async () => {
+    await useLocale('en-US');
+
+    const wrapper = mountSelector();
+    const [linear, radial] = buttons(wrapper);
+
+    expect(linear.text()).toBe('Linear');
+    expect(radial.text()).toBe('Radial');
+    expect(linear.attributes('title')).toBe('Linear Gradient Color');
+    expect(radial.attributes('title')).toBe('Radial Gradient Color');
+  });
+
+  // A key missing from one locale file renders as its key path on the site;
+  // the shared test singleton would hide it behind the en-US fallback.
+  test.each(supportedLocales)(
+    'every locale file defines the gradient-type keys: %s',
+    (locale) => {
+      (
+        [
+          'gradientTypeLinear',
+          'gradientTypeRadial',
+          'gradientTypeLinearTitle',
+          'gradientTypeRadialTitle',
+        ] as const
+      ).forEach((key) => {
+        const value = stringsFor(locale)[key];
+
+        expect(typeof value, `${locale} › ${key}`).toBe('string');
+        expect(value.trim(), `${locale} › ${key}`).not.toBe('');
+      });
+    },
+  );
+
+  test('clicking a gradient button emits the same value as today', async () => {
+    await useLocale('de-DE');
+
+    const wrapper = mountSelector('linear');
+    const [, radial] = buttons(wrapper);
+
+    await radial.trigger('click');
+
+    const [linear] = buttons(wrapper);
+
+    await linear.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['radial'],
+      ['linear'],
+    ]);
+  });
+
+  // gradientTypeRadial is "Radial" in every locale file, so a literal
+  // <span>Radial</span> would also pass the assertions above. Override the
+  // resource at runtime to prove the label is actually looked up.
+  test('the radial label is looked up, not hard-coded', async () => {
+    await useLocale('de-DE');
+
+    const original = stringsFor('de-DE').gradientTypeRadial;
+
+    i18next.addResource(
+      'de-DE',
+      'bp',
+      'colorPicker.gradientTypeRadial',
+      'probe-radial',
+    );
+
+    try {
+      const wrapper = mountSelector();
+      const [, radial] = buttons(wrapper);
+
+      expect(radial.text()).toBe('probe-radial');
+    } finally {
+      i18next.addResource(
+        'de-DE',
+        'bp',
+        'colorPicker.gradientTypeRadial',
+        original,
+      );
+    }
+  });
+});

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.vue

@@ -4,7 +4,7 @@
     class="tw-flex tw-border-2 tw-border-solid tw-border-secondary-500 tw-rounded"
   >
     <button
-      title="Linear Gradient Color"
+      :title="colorPickerTr('gradientTypeLinearTitle')"
       class="gradient-color-switch-button"
       :class="{
         'gradient-color-switch-button_is-on': isLinear,
@@ -12,10 +12,10 @@
       }"
       @click.stop="onGradientTypeClick('linear')"
     >
-      <span> Linear </span>
+      <span>{{ colorPickerTr('gradientTypeLinear') }}</span>
     </button>
     <button
-      title="Radial Gradient Color"
+      :title="colorPickerTr('gradientTypeRadialTitle')"
       class="gradient-color-switch-button"
       :class="{
         'gradient-color-switch-button_is-on': isRadial,
@@ -23,16 +23,22 @@
       }"
       @click.stop="onGradientTypeClick('radial')"
     >
-      <span> Radial </span>
+      <span>{{ colorPickerTr('gradientTypeRadial') }}</span>
     </button>
   </div>
 </template>
 
 <script>
 import GradientTypeSelectorMixin from './GradientTypeSelector.mixin';
+import { colorPickerTr } from '@src/composables/useTranslate';
 
 export default {
   mixins: [GradientTypeSelectorMixin],
+  setup() {
+    return {
+      colorPickerTr,
+    };
+  },
 };
 </script>
 

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"

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.save.test.ts

@@ -1,11 +1,17 @@
 import { describe, test, expect, beforeEach, vi } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
-import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import {
+  useBrandPageContainerStore,
+  useBrandPageMakerStore,
+} from '@brand-page-maker/stores';
+import { SENSITIVE_CONTENT_TYPES } from '@brand-page';
 import brandPageClient from '../../../clients/brand-page-client';
 
 vi.mock('../../../clients/brand-page-client', () => ({
   default: {
     saveBrandPageAsync: vi.fn(),
+    updateBrandPageMetaAsync: vi.fn(),
+    updateSensitiveContentAsync: vi.fn(),
   },
 }));
 
@@ -16,6 +22,40 @@ const SAVED = {
   canPublish: true,
 };
 
+// Both settings writes share `saveSiteBeforeFirstSettingsWrite`; run each
+// never-saved-site scenario over both so a guard dropped from one write
+// method still fails.
+const settingsActions: [
+  string,
+  (store: ReturnType<typeof useBrandPageContainerStore>) => Promise<void>,
+  ReturnType<typeof vi.fn>,
+  Record<string, unknown>,
+][] = [
+  [
+    'updateBrandPageSettings',
+    (store) =>
+      store.updateBrandPageSettings({
+        description: 'New description',
+        title: 'New title',
+      }),
+    vi.mocked(brandPageClient.updateBrandPageMetaAsync),
+    {
+      pageTitle: 'New title',
+      pageDescription: 'New description',
+      metaKeywords: [],
+    },
+  ],
+  [
+    'updateSensitiveContent',
+    (store) =>
+      store.updateSensitiveContent({
+        sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+      }),
+    vi.mocked(brandPageClient.updateSensitiveContentAsync),
+    { sensitiveContentType: SENSITIVE_CONTENT_TYPES.plus18 },
+  ],
+];
+
 describe('brand-page-container-store saveBrandPage', () => {
   let store: ReturnType<typeof useBrandPageContainerStore>;
 
@@ -104,3 +144,294 @@ describe('brand-page-container-store saveBrandPage', () => {
     expect(requestBody()).toMatchObject({ shouldPublish: true });
   });
 });
+
+describe('settings on a never-saved site', () => {
+  let store: ReturnType<typeof useBrandPageContainerStore>;
+  let brandPageMakerStore: ReturnType<typeof useBrandPageMakerStore>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setActivePinia(createPinia());
+
+    store = useBrandPageContainerStore();
+    brandPageMakerStore = useBrandPageMakerStore();
+
+    // The export is exercised by its own tests; stub it so these cover only the
+    // settings-write sequencing.
+    vi.spyOn(store, 'exportDesignAsync').mockResolvedValue({} as any);
+
+    // Real timers inside showNextNotificationMessage would make every test wait
+    // out the message-visible duration and dequeue the very message these tests
+    // assert on, so only its own invocation is observed here.
+    vi.spyOn(
+      brandPageMakerStore,
+      'showNextNotificationMessage',
+    ).mockResolvedValue(undefined);
+
+    vi.mocked(brandPageClient.updateBrandPageMetaAsync).mockResolvedValue({
+      pageTitle: 'New title',
+      pageDescription: 'New description',
+    } as any);
+
+    vi.mocked(brandPageClient.updateSensitiveContentAsync).mockResolvedValue({
+      sensitiveContentType: SENSITIVE_CONTENT_TYPES.plus18,
+    } as any);
+  });
+
+  describe('a saved site', () => {
+    beforeEach(() => {
+      store.designDraftToken = 'draft-123';
+      store.brandPageStatus = 'Published';
+    });
+
+    // Once a token exists — whether from an earlier save or the host's, mid-
+    // session — a pre-purchase site writes directly, the same as any other
+    // saved site.
+    test('saved site writes only the setting', async () => {
+      store.isPrePurchase = true;
+
+      const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+
+      await store.updateSensitiveContent({
+        sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+      });
+
+      expect(
+        brandPageClient.updateSensitiveContentAsync,
+      ).toHaveBeenCalledOnce();
+      expect(brandPageClient.updateSensitiveContentAsync).toHaveBeenCalledWith(
+        expect.anything(),
+        'draft-123',
+        expect.objectContaining({
+          sensitiveContentType: SENSITIVE_CONTENT_TYPES.plus18,
+        }),
+      );
+      expect(brandPageClient.saveBrandPageAsync).not.toHaveBeenCalled();
+      expect(dispatchSpy).not.toHaveBeenCalled();
+      expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(1);
+      expect(brandPageMakerStore.notificationMessageQueue[0].type).toBe(
+        'success',
+      );
+    });
+  });
+
+  describe('post-purchase, never saved', () => {
+    beforeEach(() => {
+      store.designDraftToken = undefined;
+      store.isPrePurchase = false;
+    });
+
+    test.each(settingsActions)(
+      'saves the site first (%s)',
+      async (_name, callAction, endpoint, expectedPayload) => {
+        vi.mocked(brandPageClient.saveBrandPageAsync).mockResolvedValue(
+          SAVED as any,
+        );
+
+        await callAction(store);
+
+        expect(brandPageClient.saveBrandPageAsync).toHaveBeenCalledOnce();
+
+        const [, saveRequest, saveToken] = vi.mocked(
+          brandPageClient.saveBrandPageAsync,
+        ).mock.calls[0];
+
+        expect(saveRequest).toMatchObject({ saveOnly: true });
+        expect(saveToken).toBeFalsy();
+
+        expect(endpoint).toHaveBeenCalledOnce();
+        expect(endpoint).toHaveBeenCalledWith(
+          expect.anything(),
+          'draft-123',
+          expect.objectContaining(expectedPayload),
+        );
+
+        const saveOrder = vi.mocked(brandPageClient.saveBrandPageAsync).mock
+          .invocationCallOrder[0];
+        const writeOrder = endpoint.mock.invocationCallOrder[0];
+
+        expect(saveOrder).toBeLessThan(writeOrder);
+
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(1);
+        expect(brandPageMakerStore.notificationMessageQueue[0].type).toBe(
+          'success',
+        );
+
+        // The save's own banner was disarmed — a later close must not raise it.
+        brandPageMakerStore.notificationMessageQueue.length = 0;
+
+        await store.closePublishModal();
+        await store.showSaveSuccessMessage();
+
+        expect(store.triggerSaveSuccessMessage).toBe(false);
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(0);
+      },
+    );
+
+    test.each([
+      [
+        'save throws',
+        (): void => {
+          vi.mocked(brandPageClient.saveBrandPageAsync).mockRejectedValue(
+            new Error('network'),
+          );
+        },
+        false,
+      ],
+      [
+        'save returns nothing',
+        (): void => {
+          vi.mocked(brandPageClient.saveBrandPageAsync).mockResolvedValue(
+            null as any,
+          );
+        },
+        false,
+      ],
+      [
+        'save ok, write returns nothing',
+        (): void => {
+          vi.mocked(brandPageClient.saveBrandPageAsync).mockResolvedValue(
+            SAVED as any,
+          );
+          vi.mocked(
+            brandPageClient.updateSensitiveContentAsync,
+          ).mockResolvedValue(null as any);
+        },
+        true,
+      ],
+    ])(
+      'failed first save (%s)',
+      async (_case: string, setup: () => void, writeReached: boolean) => {
+        setup();
+
+        await store.updateSensitiveContent({
+          sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+        });
+
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(1);
+        expect(brandPageMakerStore.notificationMessageQueue[0].type).toBe(
+          'error',
+        );
+        expect(
+          brandPageMakerStore.showNextNotificationMessage,
+        ).toHaveBeenCalled();
+        expect(store.isPublishing).toBe(false);
+
+        if (!writeReached) {
+          expect(
+            brandPageClient.updateSensitiveContentAsync,
+          ).not.toHaveBeenCalled();
+        }
+      },
+    );
+  });
+
+  describe('pre-purchase, never saved', () => {
+    beforeEach(() => {
+      store.isPrePurchase = true;
+      store.designDraftToken = undefined;
+    });
+
+    // No listener started a save, so isSaving never went true on the dispatch —
+    // the click would otherwise go silent.
+    test.each(settingsActions)(
+      'pre-purchase asks the host to save, no listener (%s)',
+      async (_name, callAction) => {
+        const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+        const setIsPublishingSpy = vi.spyOn(store, 'setIsPublishing');
+
+        await callAction(store);
+
+        expect(dispatchSpy).toHaveBeenCalledOnce();
+        expect((dispatchSpy.mock.calls[0][0] as Event).type).toBe(
+          'SAVE_PROGRESS_CLICKED',
+        );
+        expect(brandPageClient.saveBrandPageAsync).not.toHaveBeenCalled();
+        expect(
+          brandPageClient.updateSensitiveContentAsync,
+        ).not.toHaveBeenCalled();
+        expect(brandPageClient.updateBrandPageMetaAsync).not.toHaveBeenCalled();
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(1);
+        expect(brandPageMakerStore.notificationMessageQueue[0].type).toBe(
+          'error',
+        );
+        expect(setIsPublishingSpy).not.toHaveBeenCalled();
+      },
+    );
+
+    // The host's saveDesign sets isSaving synchronously on the dispatch
+    // (MakerLeadCaptureModalContainer.vue), before its first await.
+    test.each(settingsActions)(
+      'pre-purchase asks the host to save, a listener starts a save (%s)',
+      async (_name, callAction) => {
+        const dispatchSpy = vi
+          .spyOn(window, 'dispatchEvent')
+          .mockImplementation((event: Event) => {
+            if (event.type === 'SAVE_PROGRESS_CLICKED') {
+              store.setIsSaving({ isSaving: true });
+            }
+
+            return true;
+          });
+
+        await callAction(store);
+
+        expect(dispatchSpy).toHaveBeenCalledOnce();
+        expect(brandPageClient.saveBrandPageAsync).not.toHaveBeenCalled();
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(0);
+      },
+    );
+  });
+
+  describe('admin template editor, never saved', () => {
+    test.each(settingsActions)(
+      'admin never saves (%s)',
+      async (_name, callAction) => {
+        store.isAdminMaker = true;
+        store.designDraftToken = undefined;
+
+        await callAction(store);
+
+        expect(brandPageClient.saveBrandPageAsync).not.toHaveBeenCalled();
+        expect(
+          brandPageClient.updateSensitiveContentAsync,
+        ).not.toHaveBeenCalled();
+        expect(brandPageClient.updateBrandPageMetaAsync).not.toHaveBeenCalled();
+        expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(0);
+      },
+    );
+  });
+
+  test.each([
+    ['a save already running', { isSaving: true }],
+    ['a publish already running', { isPublishing: true }],
+  ])(
+    'another save running (%s)',
+    async (_case: string, flags: Record<string, boolean>) => {
+      store.isPrePurchase = false;
+      store.designDraftToken = undefined;
+      Object.assign(store, flags);
+
+      const isPublishingBefore = store.isPublishing;
+      const setIsPublishingSpy = vi.spyOn(store, 'setIsPublishing');
+
+      await store.updateSensitiveContent({
+        sensitiveContent: SENSITIVE_CONTENT_TYPES.plus18,
+      });
+
+      expect(brandPageClient.saveBrandPageAsync).not.toHaveBeenCalled();
+      expect(
+        brandPageClient.updateSensitiveContentAsync,
+      ).not.toHaveBeenCalled();
+      expect(store.isPublishing).toBe(isPublishingBefore);
+      expect(setIsPublishingSpy).not.toHaveBeenCalled();
+      expect(brandPageMakerStore.notificationMessageQueue).toHaveLength(1);
+      expect(brandPageMakerStore.notificationMessageQueue[0].type).toBe(
+        'error',
+      );
+      expect(
+        brandPageMakerStore.showNextNotificationMessage,
+      ).toHaveBeenCalled();
+    },
+  );
+});