@designcrowd/library.brand-page 6.1.16 → 6.1.17-ast-header-button

package/lib/src/lib.js

@@ -48,6 +48,7 @@ export { tiptapJsonToHtml } from './metadata-builder/helpers/rte.helpers';
 // stores
 export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, useVideoStore, useRouteStore, } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
+export { refreshDuplicatedMetadata } from './shared/ecommerce-settings/util/refreshDuplicatedMetadata';
 // for jest, need to set active pinia in library.brand-page as well
 import { createPinia, setActivePinia } from 'pinia';
 import { useCartStore } from './shared/ecommerce-settings/store/cart-settings-store';

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -527,7 +527,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: import("../../../page-settings/store").PageSettingsSection;
             propName: keyof import("../../../page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -536,7 +536,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: import("../../../page-settings/store").PageSettingsSection;
             propName: keyof PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -758,7 +758,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             sectionName: import("../../../page-settings/store").PageSettingsSection;
             propName: keyof import("../../../page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;

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

@@ -560,7 +560,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             sectionName: import("@shared/page-settings/store").PageSettingsSection;
             propName: keyof import("@shared/page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;

package/lib/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.d.ts

@@ -0,0 +1,11 @@
+import type { BrandPageModel } from '@brand-page/models';
+/**
+ * Refresh a (migrated, current-version) BrandPageModel so it is safe to persist as a *duplicate*.
+ * Two things travel with a verbatim copy that must not: client-minted identifiers that the
+ * brand-page-api keys a global row on, and the source owner's embedded payment connection. This
+ * rotates the former to fresh values and removes the latter, in place — the new owner reconnects
+ * a payment provider explicitly. Runs after migration, so it only ever sees the current shape.
+ *
+ * See docs/architecture/capabilities/shop-duplication.md.
+ */
+export declare function refreshDuplicatedMetadata(model: BrandPageModel): BrandPageModel;

package/lib/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.js

@@ -0,0 +1,80 @@
+import { v4 as uuid } from 'uuid';
+import { isPayment, isShopContent, isSupportMe } from '@brand-page/utils';
+import { generateSku } from './skuUtils';
+/**
+ * Refresh a (migrated, current-version) BrandPageModel so it is safe to persist as a *duplicate*.
+ * Two things travel with a verbatim copy that must not: client-minted identifiers that the
+ * brand-page-api keys a global row on, and the source owner's embedded payment connection. This
+ * rotates the former to fresh values and removes the latter, in place — the new owner reconnects
+ * a payment provider explicitly. Runs after migration, so it only ever sees the current shape.
+ *
+ * See docs/architecture/capabilities/shop-duplication.md.
+ */
+export function refreshDuplicatedMetadata(model) {
+    // Site-level payment connection: the authoritative one at checkout — `initialiseShopStore` prefers
+    // it over any content-level config — so it leaks the source owner's account even after the
+    // content-level connections below are cleared. Disconnect it too; the new owner reconnects.
+    model.paymentConfig = undefined;
+    model.pages.forEach((page) => page.contents.forEach((content) => {
+        if (isShopContent(content)) {
+            // Shop products collide on the global product / sku_key tables. The shop's payment-config
+            // link is written with throwaway ids (not the content id), so only the product ids rotate.
+            content.products.forEach(rotateProductIds);
+            disconnectPayment(content.shopPaymentConfig);
+        }
+        else if (isPayment(content)) {
+            resetPaymentBlock(content, content.requestPaymentConfig);
+        }
+        else if (isSupportMe(content)) {
+            resetPaymentBlock(content, content.supportMeConfig);
+        }
+    }));
+    return model;
+}
+function rotateProductIds(product) {
+    product.id = uuid();
+    // The option id is the only value cross-referenced inside a product — SKUs point at product
+    // options by id and each skuKey embeds it — so it is remapped through one old→new map and
+    // reused everywhere it reappears. Every other id is standalone and just gets a fresh uuid.
+    const optionIdMap = new Map();
+    product.variant.forEach((variant) => {
+        variant.id = uuid();
+        variant.options.forEach((option) => {
+            const newId = uuid();
+            optionIdMap.set(option.id, newId);
+            option.id = newId;
+        });
+    });
+    product.skus.forEach((sku) => {
+        sku.id = uuid();
+        sku.variant.forEach((skuVariant) => {
+            skuVariant.id = uuid();
+            skuVariant.option.id = optionIdMap.get(skuVariant.option.id) ?? uuid();
+        });
+        // Regenerate from the now-remapped option so the key embeds the new option id and a fresh
+        // random suffix — this is what keeps sku_key globally unique on the copy's first upsert.
+        sku.skuKey = generateSku(product.name, sku.variant[0]?.option);
+    });
+}
+/**
+ * request-payment / support-me content. The api keys `content_block_payment_config` on the content
+ * id (PK) and `brand_page_product` on the payment-option id (PK), both global. A verbatim copy
+ * would, on its next payment upsert, repoint the source's config link and adopt its product rows —
+ * so rotate both to make the copy independent, then drop the connection.
+ */
+function resetPaymentBlock(content, config) {
+    content.id = uuid();
+    config.paymentOptions.forEach((option) => {
+        option.id = uuid();
+    });
+    disconnectPayment(config);
+}
+/**
+ * Drop the embedded payment connection (the source owner's payment/Stripe account). The section
+ * keeps its options and amounts but reverts to "not connected"; the new owner reconnects.
+ */
+function disconnectPayment(config) {
+    if (config) {
+        config.paymentConfig = undefined;
+    }
+}

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

@@ -727,7 +727,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: import("@shared/page-settings/store").PageSettingsSection;
             propName: keyof import("@shared/page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("../../../brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("../../../brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("../../../brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("../../../brand-page").ImageGalleryItem> | import("../../../brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("../../../brand-page").ViewportsType;
         }): void;

package/lib/src/shared/page-settings/components/delete-page-modal/DeletePageModal.mixin.d.ts

@@ -35,8 +35,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }>, {
+    isVisible: boolean;
     pageId: string;
     pageTitle: string;
-    isVisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: import("../../store").PageSettingsSection;
             propName: keyof import("../../store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("../../../../brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("../../../../brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("../../../../brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("../../../../brand-page").ImageGalleryItem> | import("../../../../brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("../../../../brand-page").ViewportsType;
         }): void;

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

@@ -1368,6 +1368,62 @@ declare const _default: import("vue").DefineComponent<{}, {
                     wordBreak?: string | undefined;
                 };
                 viewport: import("@brand-page").ViewportsType;
+                headerButton?: {
+                    isVisible: boolean;
+                    text: string;
+                    buttonLinkType: import("@brand-page").ButtonLinkType;
+                    url?: string | undefined;
+                    buttonPageId?: string | undefined;
+                    buttonTextStyle?: {
+                        aspectRatio?: string | undefined;
+                        backgroundAttachment?: string | undefined;
+                        background?: string | undefined;
+                        backgroundColor?: string | undefined;
+                        backgroundImage?: string | undefined;
+                        backgroundPosition?: string | undefined;
+                        backgroundRepeat?: string | undefined;
+                        backgroundSize?: string | undefined;
+                        border?: string | undefined;
+                        borderBottomWidth?: string | undefined;
+                        borderColor?: string | undefined;
+                        borderLeftWidth?: string | undefined;
+                        borderRadius?: string | undefined;
+                        borderRightWidth?: string | undefined;
+                        borderStyle?: string | undefined;
+                        borderTopWidth?: string | undefined;
+                        borderWidth?: string | undefined;
+                        boxShadow?: string | undefined;
+                        color?: string | undefined;
+                        fill?: string | undefined;
+                        fontFamily?: string | undefined;
+                        fontStyle?: string | undefined;
+                        fontSize?: string | undefined;
+                        fontWeight?: string | undefined;
+                        height?: string | undefined;
+                        left?: string | undefined;
+                        letterSpacing?: string | undefined;
+                        lineHeight?: string | undefined;
+                        marginBottom?: string | undefined;
+                        maxWidth?: string | undefined;
+                        opacity?: string | undefined;
+                        overflow?: string | undefined;
+                        overflowWrap?: string | undefined;
+                        paddingTop?: string | undefined;
+                        position?: string | undefined;
+                        textAlign?: string | undefined;
+                        textDecoration?: string | undefined;
+                        top?: string | undefined;
+                        transform?: string | undefined;
+                        transformOrigin?: string | undefined;
+                        transition?: string | undefined;
+                        width?: string | undefined;
+                        wordBreak?: string | undefined;
+                        textStyleType?: import("@brand-page").TextStyleType | undefined;
+                        applyAutoScale?: boolean | undefined;
+                    } | undefined;
+                    fillColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
             };
             mobile: {
                 displayStyle: import("@brand-page").HeaderDisplayStyle;
@@ -2661,6 +2717,62 @@ declare const _default: import("vue").DefineComponent<{}, {
                     wordBreak?: string | undefined;
                 };
                 viewport: import("@brand-page").ViewportsType;
+                headerButton?: {
+                    isVisible: boolean;
+                    text: string;
+                    buttonLinkType: import("@brand-page").ButtonLinkType;
+                    url?: string | undefined;
+                    buttonPageId?: string | undefined;
+                    buttonTextStyle?: {
+                        aspectRatio?: string | undefined;
+                        backgroundAttachment?: string | undefined;
+                        background?: string | undefined;
+                        backgroundColor?: string | undefined;
+                        backgroundImage?: string | undefined;
+                        backgroundPosition?: string | undefined;
+                        backgroundRepeat?: string | undefined;
+                        backgroundSize?: string | undefined;
+                        border?: string | undefined;
+                        borderBottomWidth?: string | undefined;
+                        borderColor?: string | undefined;
+                        borderLeftWidth?: string | undefined;
+                        borderRadius?: string | undefined;
+                        borderRightWidth?: string | undefined;
+                        borderStyle?: string | undefined;
+                        borderTopWidth?: string | undefined;
+                        borderWidth?: string | undefined;
+                        boxShadow?: string | undefined;
+                        color?: string | undefined;
+                        fill?: string | undefined;
+                        fontFamily?: string | undefined;
+                        fontStyle?: string | undefined;
+                        fontSize?: string | undefined;
+                        fontWeight?: string | undefined;
+                        height?: string | undefined;
+                        left?: string | undefined;
+                        letterSpacing?: string | undefined;
+                        lineHeight?: string | undefined;
+                        marginBottom?: string | undefined;
+                        maxWidth?: string | undefined;
+                        opacity?: string | undefined;
+                        overflow?: string | undefined;
+                        overflowWrap?: string | undefined;
+                        paddingTop?: string | undefined;
+                        position?: string | undefined;
+                        textAlign?: string | undefined;
+                        textDecoration?: string | undefined;
+                        top?: string | undefined;
+                        transform?: string | undefined;
+                        transformOrigin?: string | undefined;
+                        transition?: string | undefined;
+                        width?: string | undefined;
+                        wordBreak?: string | undefined;
+                        textStyleType?: import("@brand-page").TextStyleType | undefined;
+                        applyAutoScale?: boolean | undefined;
+                    } | undefined;
+                    fillColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
             };
         };
         footer: {
@@ -3983,7 +4095,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: PageSettingsSection;
             propName: keyof import("../../store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;

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

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import type { PageSectionStyleOption } from '@brand-page-maker/models/page-section-style.model';
 import type { NavigationStyleOptionValueChangeEvent, PageSection, PageSettingsFontSettingsOption } from '../../models';
-import type { LogoTheme, NavigationDisplayType, NavigationType, LinksItem, HeaderDisplayStyle, FooterDisplayStyle, ViewportsType, NavigationDesktop, NavigationMobile, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, LogoImageModel, LogoViewModel } from '@brand-page';
+import type { HeaderButton, LogoTheme, NavigationDisplayType, NavigationType, LinksItem, HeaderDisplayStyle, FooterDisplayStyle, ViewportsType, NavigationDesktop, NavigationMobile, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, LogoImageModel, LogoViewModel } from '@brand-page';
 import type { ContentItemFieldSettings, UpdateItemValuePayload } from '../../../content-settings/models';
 import type { PageSettingsStateSectionStyles } from '../../store';
 import type { DisplayLogoDraftAsset } from '../../../../clients/models';
@@ -1326,6 +1326,62 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     wordBreak?: string | undefined;
                 };
                 viewport: ViewportsType;
+                headerButton?: {
+                    isVisible: boolean;
+                    text: string;
+                    buttonLinkType: import("@brand-page").ButtonLinkType;
+                    url?: string | undefined;
+                    buttonPageId?: string | undefined;
+                    buttonTextStyle?: {
+                        aspectRatio?: string | undefined;
+                        backgroundAttachment?: string | undefined;
+                        background?: string | undefined;
+                        backgroundColor?: string | undefined;
+                        backgroundImage?: string | undefined;
+                        backgroundPosition?: string | undefined;
+                        backgroundRepeat?: string | undefined;
+                        backgroundSize?: string | undefined;
+                        border?: string | undefined;
+                        borderBottomWidth?: string | undefined;
+                        borderColor?: string | undefined;
+                        borderLeftWidth?: string | undefined;
+                        borderRadius?: string | undefined;
+                        borderRightWidth?: string | undefined;
+                        borderStyle?: string | undefined;
+                        borderTopWidth?: string | undefined;
+                        borderWidth?: string | undefined;
+                        boxShadow?: string | undefined;
+                        color?: string | undefined;
+                        fill?: string | undefined;
+                        fontFamily?: string | undefined;
+                        fontStyle?: string | undefined;
+                        fontSize?: string | undefined;
+                        fontWeight?: string | undefined;
+                        height?: string | undefined;
+                        left?: string | undefined;
+                        letterSpacing?: string | undefined;
+                        lineHeight?: string | undefined;
+                        marginBottom?: string | undefined;
+                        maxWidth?: string | undefined;
+                        opacity?: string | undefined;
+                        overflow?: string | undefined;
+                        overflowWrap?: string | undefined;
+                        paddingTop?: string | undefined;
+                        position?: string | undefined;
+                        textAlign?: string | undefined;
+                        textDecoration?: string | undefined;
+                        top?: string | undefined;
+                        transform?: string | undefined;
+                        transformOrigin?: string | undefined;
+                        transition?: string | undefined;
+                        width?: string | undefined;
+                        wordBreak?: string | undefined;
+                        textStyleType?: import("@brand-page").TextStyleType | undefined;
+                        applyAutoScale?: boolean | undefined;
+                    } | undefined;
+                    fillColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
             };
             mobile: {
                 displayStyle: HeaderDisplayStyle;
@@ -2619,6 +2675,62 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     wordBreak?: string | undefined;
                 };
                 viewport: ViewportsType;
+                headerButton?: {
+                    isVisible: boolean;
+                    text: string;
+                    buttonLinkType: import("@brand-page").ButtonLinkType;
+                    url?: string | undefined;
+                    buttonPageId?: string | undefined;
+                    buttonTextStyle?: {
+                        aspectRatio?: string | undefined;
+                        backgroundAttachment?: string | undefined;
+                        background?: string | undefined;
+                        backgroundColor?: string | undefined;
+                        backgroundImage?: string | undefined;
+                        backgroundPosition?: string | undefined;
+                        backgroundRepeat?: string | undefined;
+                        backgroundSize?: string | undefined;
+                        border?: string | undefined;
+                        borderBottomWidth?: string | undefined;
+                        borderColor?: string | undefined;
+                        borderLeftWidth?: string | undefined;
+                        borderRadius?: string | undefined;
+                        borderRightWidth?: string | undefined;
+                        borderStyle?: string | undefined;
+                        borderTopWidth?: string | undefined;
+                        borderWidth?: string | undefined;
+                        boxShadow?: string | undefined;
+                        color?: string | undefined;
+                        fill?: string | undefined;
+                        fontFamily?: string | undefined;
+                        fontStyle?: string | undefined;
+                        fontSize?: string | undefined;
+                        fontWeight?: string | undefined;
+                        height?: string | undefined;
+                        left?: string | undefined;
+                        letterSpacing?: string | undefined;
+                        lineHeight?: string | undefined;
+                        marginBottom?: string | undefined;
+                        maxWidth?: string | undefined;
+                        opacity?: string | undefined;
+                        overflow?: string | undefined;
+                        overflowWrap?: string | undefined;
+                        paddingTop?: string | undefined;
+                        position?: string | undefined;
+                        textAlign?: string | undefined;
+                        textDecoration?: string | undefined;
+                        top?: string | undefined;
+                        transform?: string | undefined;
+                        transformOrigin?: string | undefined;
+                        transition?: string | undefined;
+                        width?: string | undefined;
+                        wordBreak?: string | undefined;
+                        textStyleType?: import("@brand-page").TextStyleType | undefined;
+                        applyAutoScale?: boolean | undefined;
+                    } | undefined;
+                    fillColor?: string | undefined;
+                    borderColor?: string | undefined;
+                } | undefined;
             };
         };
         footer: {
@@ -3271,7 +3383,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             sectionName: import("../../store").PageSettingsSection;
             propName: keyof PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: ViewportsType;
         }): void;
@@ -4630,6 +4742,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isRenderAfterLogo(): any;
     navigation(): NavigationDesktop | NavigationMobile;
     header(): PageHeaderDesktop | PageHeaderMobile;
+    headerButton(): HeaderButton | undefined;
+    isHeaderButtonVisible(): boolean;
     navigationType(): NavigationType;
     footer(): PageFooterDesktop | PageFooterMobile;
     showDeviceWarning(): boolean;
@@ -4680,6 +4794,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onCopyrightTextChange({ value }: {
         value: string;
     }): void;
+    onHeaderButtonChange(patch: Partial<HeaderButton>): void;
     onItemListIntentImageReplace(name: PageSectionStyleOption, { index }: {
         index: number;
     }): void;

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-section-style.model';
 import { PAGE_SECTIONS } from '../../models';
-import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
+import { BUTTON_LINK_TYPE, LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { isTransparentColour } from '@brand-page/utils/color.util';
 import { useUiPageSettingsStore } from '../../store';
@@ -13,6 +13,16 @@ import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '@shared/logo-se
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { commonTr } from '@src/composables/useTranslate';
+/**
+ * Seed for the first write to `headerButton` (the model deliberately holds no
+ * default — absent means "no button"). Url is the link kind the Figma shows
+ * pre-selected.
+ */
+const NEW_HEADER_BUTTON = {
+    isVisible: false,
+    text: '',
+    buttonLinkType: BUTTON_LINK_TYPE.url,
+};
 const viewportsWithTr = () => [
     {
         key: VIEWPORTS.desktop,
@@ -100,6 +110,12 @@ export default defineComponent({
         header() {
             return this.sections[PAGE_SECTIONS.header][this.viewport];
         },
+        headerButton() {
+            return this.header.headerButton;
+        },
+        isHeaderButtonVisible() {
+            return this.headerButton?.isVisible === true;
+        },
         navigationType() {
             return getNavigationType(this.navigation.displayType);
         },
@@ -327,6 +343,32 @@ export default defineComponent({
                 viewport: VIEWPORTS.desktop,
             });
         },
+        onHeaderButtonChange(patch) {
+            const value = {
+                ...NEW_HEADER_BUTTON,
+                ...this.headerButton,
+                ...patch,
+            };
+            // Desktop and mobile must hold the SAME button config (BP-5852 AC). The
+            // whole object is written to both from one source rather than merged
+            // per-viewport, so a pair that somehow diverged is reconciled instead of
+            // each side keeping its own leftovers.
+            //
+            // Each viewport gets its own copy: one shared object would alias the two
+            // branches of store state to a single instance.
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: PAGE_SECTIONS.header,
+                propName: 'headerButton',
+                value: { ...value },
+                viewport: VIEWPORTS.mobile,
+            });
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: PAGE_SECTIONS.header,
+                propName: 'headerButton',
+                value: { ...value },
+                viewport: VIEWPORTS.desktop,
+            });
+        },
         onItemListIntentImageReplace(name, { index }) {
             this.contentSettingsStore.setSelectedItemAndFieldName({
                 id: this.sectionName,

package/lib/src/shared/page-settings/store/page-settings-store.d.ts

@@ -1,7 +1,7 @@
 import type { ContentItem } from '../../content-settings/models';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS } from '@brand-page';
 import type { NavigationType } from '@brand-page';
-import type { Content, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
+import type { Content, HeaderButton, ImageGalleryItem, LinksItem, LogoImageModel, ViewportsType, LogoTemplateImageModel, BrandPagePaymentConfig, BrandPagePaymentConfigCurrency } from '@brand-page';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
 export type PageSettingsStateSectionStyles = Partial<PageHeaderDesktop & PageHeaderMobile & PageFooterDesktop & PageFooterMobile>;
@@ -74,7 +74,7 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         sectionName: PageSettingsSection;
         propName: keyof PageSettingsStateSectionStyles;
         index?: number;
-        value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<ImageGalleryItem> | number | null | undefined;
+        value: string | boolean | LinksItem[] | BrandPageCssStyle | Partial<ImageGalleryItem> | HeaderButton | number | null | undefined;
         merge?: boolean;
         viewport: ViewportsType;
     }): void;

package/package.json

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