@designcrowd/library.brand-page 5.19.1-error-html2canvas-1 → 5.19.1-error-html2canvas-2

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

@@ -21,7 +21,6 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
-  getValueType,
   type AbTest,
   type LogoContent,
 } from '@brand-page';
@@ -34,7 +33,6 @@ import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-  EVENTS,
 } from '@brand-page-maker/composables/useEventTracker';
 import { navigationTr } from '@src/composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
@@ -123,6 +121,7 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -266,6 +265,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
+      templateSettingsStore.setAiTemplateKeywords({
+        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });
@@ -446,7 +449,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
     async publishBrandPage({ shouldPublish, slug }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -553,7 +556,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -887,7 +890,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (userStore.isAdmin) {
         throw new Error('save brand page is not allowed in admin mode');

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

@@ -2,7 +2,6 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
-  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -44,6 +43,7 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
@@ -54,8 +54,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
-import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
-import type { NavModel } from '@brand-page/models';
 
 const createInitialisePayload = () => {
   const initialisePayload = {

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

@@ -23,14 +23,12 @@ import {
   CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
-  NavModel,
 } from '@brand-page';
 import type {
   DesignTemplateType,
   InitialCategories,
   TemplateCategory,
 } from '@shared/template-settings/models';
-import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { toRaw } from 'vue';
@@ -125,6 +123,8 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,11 +1230,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
+      userPromptContentKey,
+      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
       logoVariationImageUrls,
-      shopConfigData,
+      shopConfigData: _shopConfigData,
       isServerRenderOverride = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
@@ -1246,7 +1248,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const backgroundSettingsStore = useUiBackgroundSettingsStore();
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-      const sideBarStore = useUiSideBarStore();
+      const _sideBarStore = useUiSideBarStore();
 
       navigationStyleSettingsStore.initialise({ reset: false });
 
@@ -1353,6 +1355,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        uiStore.setUserPromptContentKey({ userPromptContentKey });
+
+        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
+
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1800,6 +1806,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
+      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1817,6 +1824,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -48,6 +48,8 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
+    userPromptContentKey: undefined,
+    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -78,6 +80,20 @@ export const useUiStore = defineStore('ui', {
     }) {
       this.personalisationData = personalisationData;
     },
+    setUserPromptContentKey({
+      userPromptContentKey,
+    }: {
+      userPromptContentKey: string | undefined;
+    }) {
+      this.userPromptContentKey = userPromptContentKey;
+    },
+    setShowAiTemplatesTab({
+      showAiTemplatesTab,
+    }: {
+      showAiTemplatesTab: boolean;
+    }) {
+      this.showAiTemplatesTab = showAiTemplatesTab;
+    },
     onBackgroundChanged() {
       const brandPageMakerStore = useBrandPageMakerStore();
 

package/src/brand-page-maker/utils/content-settings.util.ts

@@ -7,7 +7,7 @@ import type {
   ContentSettingsConfig,
   CreateInitialContentOptions,
 } from '../models';
-import { SENSITIVE_CONTENT_TYPES, type Content } from '@brand-page';
+import { type Content } from '@brand-page';
 import { RESERVED_FIELD_NAMES } from '@shared/content-settings/constants';
 import { CONTENT_SETTINGS_CONFIGS } from '../constants';
 import type { UIUserFeatures } from '@src/constants/ui';

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -431,7 +431,7 @@ const transformRTEField = (
   if (textStyleType && (textStyleType === type || uiStyleSettingsStore)) {
     let globalContentStyle = uiStyleSettingsStore
       ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
-      : newStyle ?? ({} as TextStyleDeclaration);
+      : (newStyle ?? ({} as TextStyleDeclaration));
 
     globalContentStyle = {
       ...globalContentStyle,
@@ -549,7 +549,7 @@ export const transformToRTE = (
                 ? uiStyleSettingsStore.textStyles.textStyleOptions[
                     textItemStyleType
                   ].style
-                : newStyle ?? ({} as TextStyleDeclaration);
+                : (newStyle ?? ({} as TextStyleDeclaration));
 
               globalContentStyle = {
                 ...globalContentStyle,
@@ -593,7 +593,7 @@ export const transformToRTE = (
             let globalContentStyle = uiStyleSettingsStore
               ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType]
                   .style
-              : newStyle ?? ({} as TextStyleDeclaration);
+              : (newStyle ?? ({} as TextStyleDeclaration));
 
             globalContentStyle = {
               ...globalContentStyle,
@@ -647,7 +647,7 @@ export const switchAllContentToRTE = (
 
         if (textContent.textItems && textContent.textItems.length > 0) {
           for (const [
-            itemIndex,
+            _itemIndex,
             textItemContent,
           ] of textContent.textItems.entries()) {
             const textItemStyleType = textItemContent.textStyle.textStyleType;

package/src/clients/design-template-client.ts

@@ -11,6 +11,7 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
+  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -22,6 +23,8 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
+  pageSection?: string;
+  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

@@ -4,6 +4,7 @@ export interface Paginated<T> {
   pageSize: number;
   pageCount: number;
   totalResultCount: number;
+  abTestValuesToBePushed?: Record<string, string>;
 }
 
 export interface DesignTemplate {
@@ -14,6 +15,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  isPersonalisable?: boolean;
   previewImageUrl?: string;
 }
 

package/src/lib.ts

@@ -96,6 +96,7 @@ export {
   useEventManagerStore,
   useLocalisedRouteStore,
   useVideoStore,
+  useRouteStore,
 } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
 

package/src/metadata-builder/builders/footer-builder.test.ts

@@ -74,3 +74,140 @@ describe('FooterBuilder — copyright font vs global style', () => {
     expect(style.textAlign).toBe('center');
   });
 });
+
+type Link = { imageUrl: string; url: string };
+
+const link = (imageUrl: string): Link => ({
+  imageUrl,
+  url: `https://${imageUrl}.com`,
+});
+
+/**
+ * Footers migrated from the legacy single `footerStyles` model
+ * (migration-01) split into desktop + mobile via a shallow spread, leaving
+ * both viewports' `socialLinks` pointing at ONE shared array. `cloneDeep`
+ * preserves that shared reference. This factory reproduces that shape.
+ */
+const makeSharedSocialModel = (links: Link[]): BrandPageModel => {
+  const shared = links.map((l) => ({ ...l }));
+
+  return {
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: shared },
+    pageFooterMobile: { socialLinks: shared },
+  } as unknown as BrandPageModel;
+};
+
+const makeIndependentSocialModel = (links: Link[]): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: { socialLinks: links.map((l) => ({ ...l })) },
+    pageFooterMobile: { socialLinks: links.map((l) => ({ ...l })) },
+  }) as unknown as BrandPageModel;
+
+const socialIcons = (footer: { socialLinks?: Link[] } | undefined) =>
+  (footer?.socialLinks ?? []).map((l) => l.imageUrl);
+
+describe('FooterBuilder — social link removal (shared-array regression)', () => {
+  // Reproduces the bug: a single requested removal index dropped TWO links
+  // because both viewports shared one array and the builder spliced it twice.
+  it('removes exactly one link per requested index even when viewports share the array', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'instagram',
+      'youtube',
+    ]);
+  });
+
+  it('un-shares the viewport arrays so later in-place edits cannot cross-corrupt', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0] },
+      model,
+    );
+
+    expect(out.pageFooterDesktop!.socialLinks).not.toBe(
+      out.pageFooterMobile!.socialLinks,
+    );
+  });
+
+  it('handles multiple removal indices on a shared array (descending splice)', async () => {
+    const model = makeSharedSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+      link('youtube'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [0, 2] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'instagram',
+      'youtube',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['instagram', 'youtube']);
+  });
+
+  it('removes one link per index for independent viewport arrays (no regression)', async () => {
+    const model = makeIndependentSocialModel([
+      link('facebook'),
+      link('instagram'),
+      link('x'),
+    ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_indices: [1] },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual(['facebook', 'x']);
+    expect(socialIcons(out.pageFooterMobile)).toEqual(['facebook', 'x']);
+  });
+
+  it('inserts exactly one link on a shared array (symmetric add guard)', async () => {
+    const model = makeSharedSocialModel([link('facebook'), link('instagram')]);
+
+    const { model: out } = await run(
+      {
+        social_links: [{ insert_at: 1, social_link_icon: 'x', url: 'x.com' }],
+      },
+      model,
+    );
+
+    expect(socialIcons(out.pageFooterDesktop)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+    expect(socialIcons(out.pageFooterMobile)).toEqual([
+      'facebook',
+      'x',
+      'instagram',
+    ]);
+  });
+});

package/src/metadata-builder/builders/footer-builder.ts

@@ -17,6 +17,10 @@ import type { TextStyleOptions } from '../../brand-page/models/styles.model';
 import { FOOTER_CHECKS } from './section-rules/footer.rules';
 import { applyDetachedStyleOverride } from './section-field-utils';
 
+type FooterSocialLink = NonNullable<
+  AbstractPageFooterStyles['socialLinks']
+>[number];
+
 const normaliseSocialUrl = (url: string): string => {
   for (const prefix of ['mailto:', 'tel:']) {
     if (url.startsWith(prefix)) return url.slice(prefix.length);
@@ -25,108 +29,127 @@ const normaliseSocialUrl = (url: string): string => {
   return url;
 };
 
-const applyGlobalFooterChanges = (
-  footer: AbstractPageFooterStyles,
+const makeSocialLink = (
+  icon: string | undefined,
+  url: string | undefined,
+): FooterSocialLink =>
+  ({
+    imageUrl: icon || '',
+    url: normaliseSocialUrl(url || ''),
+    imageTitle: '',
+    width: 0,
+    height: 0,
+    imageLink: '',
+  }) as FooterSocialLink;
+
+const hasSocialLinkMutation = (args: UpdateFooterArguments): boolean =>
+  args._replace_social_links === true ||
+  (args._remove_social_link_indices?.length ?? 0) > 0 ||
+  (args._reorder_social_links?.length ?? 0) > 0 ||
+  (args.social_links?.length ?? 0) > 0;
+
+/**
+ * Social links are a GLOBAL footer concern — one logical list that both
+ * viewports render identically. Derive the new list ONCE from the current one
+ * WITHOUT mutating the input, so the caller can assign an independent copy to
+ * each viewport.
+ *
+ * Why this can't mutate per-viewport in place: footers migrated from the legacy
+ * single `footerStyles` model (migration-01) share ONE `socialLinks` array
+ * reference across pageFooterDesktop and pageFooterMobile, and `cloneDeep`
+ * preserves that shared reference. Running an in-place `splice` once per
+ * viewport therefore applies it TWICE to the same array — e.g. one requested
+ * removal index drops two links. Compute-once + assign-fresh is correct for
+ * both shared (legacy) and independent (new-model) footers.
+ */
+const computeSocialLinks = (
+  current: FooterSocialLink[] | undefined,
   args: UpdateFooterArguments,
-  textStyleOptions: TextStyleOptions | undefined,
-): void => {
-  if (args.copyright_text !== undefined)
-    footer.copyrightText = args.copyright_text;
-
-  if (args.copyright_text_font_family !== undefined)
-    footer.copyrightStyle = applyDetachedStyleOverride(
-      footer.copyrightStyle,
-      { fontFamily: args.copyright_text_font_family },
-      textStyleOptions,
+): FooterSocialLink[] => {
+  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
+  // A replacement supersedes every other social link mutation.
+  if (args._replace_social_links) {
+    return (args.social_links ?? []).map((l) =>
+      makeSocialLink(l.social_link_icon, l.url),
     );
+  }
 
-  const links = args.social_links;
+  const links: FooterSocialLink[] = [...(current ?? [])];
 
-  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
-  // When replacing, all other social link mutations (remove, insert, reorder) are skipped —
-  // they are superseded by the replacement and running them would cause duplicates.
-  if (args._replace_social_links) {
-    footer.socialLinks = (links ?? []).map((l) => ({
-      imageUrl: l.social_link_icon || '',
-      url: normaliseSocialUrl(l.url || ''),
-      imageTitle: '',
-      width: 0,
-      height: 0,
-      imageLink: '',
-    }));
-  } else {
-    // Targeted mutations — only run when NOT replacing the entire list.
-
-    // item_index-based updates for existing links
-    if (links?.length) {
-      for (const link of links) {
-        if (link.item_index === undefined) continue;
-
-        const existing = footer.socialLinks?.[link.item_index];
-
-        if (!existing) continue;
-
-        if (link.social_link_icon !== undefined)
-          existing.imageUrl = link.social_link_icon;
-
-        if (link.url !== undefined) existing.url = normaliseSocialUrl(link.url);
-      }
-    }
+  // item_index-based updates for existing links — replace the item reference
+  // (never mutate the original object, which may be shared across viewports).
+  for (const link of args.social_links ?? []) {
+    if (link.item_index === undefined) continue;
 
-    // Remove by index (descending order to preserve indices during splice)
-    if (args._remove_social_link_indices?.length && footer.socialLinks) {
-      const sorted = [...args._remove_social_link_indices].sort(
-        (a, b) => b - a,
-      );
+    const existing = links[link.item_index];
 
-      for (const idx of sorted) {
-        if (idx >= 0 && idx < footer.socialLinks.length)
-          footer.socialLinks.splice(idx, 1);
-      }
-    }
+    if (!existing) continue;
 
-    // Insert new links (descending insert_at order to preserve positions during splice)
-    const insertLinks = (links ?? []).filter(
-      (l): l is FooterSocialLinkItem & { insert_at: number } =>
-        l.insert_at !== undefined && l.item_index === undefined,
-    );
-    const sortedInserts = [...insertLinks].sort(
-      (a, b) => b.insert_at - a.insert_at,
-    );
+    links[link.item_index] = {
+      ...existing,
+      ...(link.social_link_icon !== undefined
+        ? { imageUrl: link.social_link_icon }
+        : {}),
+      ...(link.url !== undefined ? { url: normaliseSocialUrl(link.url) } : {}),
+    };
+  }
 
-    for (const link of sortedInserts) {
-      const pos = Math.max(
-        0,
-        Math.min(link.insert_at, footer.socialLinks?.length ?? 0),
-      );
-
-      footer.socialLinks = footer.socialLinks ?? [];
-      footer.socialLinks.splice(pos, 0, {
-        imageUrl: link.social_link_icon || '',
-        url: normaliseSocialUrl(link.url || ''),
-        imageTitle: '',
-        width: 0,
-        height: 0,
-        imageLink: '',
-      });
+  // Remove by index (descending order to preserve indices during splice).
+  if (args._remove_social_link_indices?.length) {
+    const sorted = [...args._remove_social_link_indices].sort((a, b) => b - a);
+
+    for (const idx of sorted) {
+      if (idx >= 0 && idx < links.length) links.splice(idx, 1);
     }
+  }
+
+  // Insert new links (descending insert_at order to preserve positions).
+  const insertLinks = (args.social_links ?? []).filter(
+    (l): l is FooterSocialLinkItem & { insert_at: number } =>
+      l.insert_at !== undefined && l.item_index === undefined,
+  );
+  const sortedInserts = [...insertLinks].sort(
+    (a, b) => b.insert_at - a.insert_at,
+  );
 
-    // Reorder (requires ALL indices — partial reorder is not supported)
-    if (args._reorder_social_links?.length && footer.socialLinks) {
-      const newOrder = args._reorder_social_links;
-      const unique = new Set(newOrder);
+  for (const link of sortedInserts) {
+    const pos = Math.max(0, Math.min(link.insert_at, links.length));
+
+    links.splice(pos, 0, makeSocialLink(link.social_link_icon, link.url));
+  }
 
-      if (
-        unique.size === newOrder.length &&
-        newOrder.every((idx) => idx >= 0 && idx < footer.socialLinks!.length)
-      ) {
-        const reordered = newOrder.map((idx) => footer.socialLinks![idx]);
+  // Reorder (requires ALL indices — partial reorder is not supported).
+  if (args._reorder_social_links?.length) {
+    const newOrder = args._reorder_social_links;
+    const unique = new Set(newOrder);
 
-        if (reordered.length === footer.socialLinks.length)
-          footer.socialLinks = reordered;
-      }
+    if (
+      unique.size === newOrder.length &&
+      newOrder.every((idx) => idx >= 0 && idx < links.length)
+    ) {
+      const reordered = newOrder.map((idx) => links[idx]);
+
+      if (reordered.length === links.length) return reordered;
     }
   }
+
+  return links;
+};
+
+const applyGlobalFooterChanges = (
+  footer: AbstractPageFooterStyles,
+  args: UpdateFooterArguments,
+  textStyleOptions: TextStyleOptions | undefined,
+): void => {
+  if (args.copyright_text !== undefined)
+    footer.copyrightText = args.copyright_text;
+
+  if (args.copyright_text_font_family !== undefined)
+    footer.copyrightStyle = applyDetachedStyleOverride(
+      footer.copyrightStyle,
+      { fontFamily: args.copyright_text_font_family },
+      textStyleOptions,
+    );
 };
 
 const applyViewportFooterChanges = (
@@ -207,13 +230,30 @@ export class FooterBuilder extends BaseMetadataBuilder<UpdateFooterArguments> {
     const args = this.request.payload ?? {};
     const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
 
-    // Global fields (copyright_text, social links) always apply to both viewports.
+    // Global scalar/style fields (copyright text + font) apply to both
+    // viewports. These are idempotent assignments, safe to run per-viewport.
     if (model.pageFooterDesktop)
       applyGlobalFooterChanges(model.pageFooterDesktop, args, textStyleOptions);
 
     if (model.pageFooterMobile)
       applyGlobalFooterChanges(model.pageFooterMobile, args, textStyleOptions);
 
+    // Social links are a single global list. Derive the new list ONCE, then
+    // assign an INDEPENDENT copy to each viewport — never mutate a (possibly
+    // shared) viewport array in place. See computeSocialLinks.
+    if (hasSocialLinkMutation(args)) {
+      const current =
+        model.pageFooterDesktop?.socialLinks ??
+        model.pageFooterMobile?.socialLinks;
+      const updated = computeSocialLinks(current, args);
+
+      if (model.pageFooterDesktop)
+        model.pageFooterDesktop.socialLinks = updated.map((l) => ({ ...l }));
+
+      if (model.pageFooterMobile)
+        model.pageFooterMobile.socialLinks = updated.map((l) => ({ ...l }));
+    }
+
     // Viewport-specific styling via explicit sub-objects.
     if (args.desktop && model.pageFooterDesktop)
       applyViewportFooterChanges(model.pageFooterDesktop, args.desktop);