@designcrowd/library.brand-page 5.16.18-pre-temp-5 → 5.16.18-save-7

package/lib/src/{CreatedOnBrandCrowd-de-de-CdAKMu3Z.js → CreatedOnBrandCrowd-de-de-DRDyO3Nx.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-BBMDDAa_.js → CreatedOnBrandCrowd-en-us-B4n8hMbK.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-DTwS7YK8.js → CreatedOnBrandCrowd-es-es-DtqF14OB.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-5VHOtmPC.js → CreatedOnBrandCrowd-fr-ca-22zD1vMd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-5VHOtmPC.js → CreatedOnBrandCrowd-fr-fr-22zD1vMd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B7GPKvjK.js → CreatedOnBrandCrowd-pt-br-ZFYnp1CJ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-B7GPKvjK.js → CreatedOnBrandCrowd-pt-pt-ZFYnp1CJ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-DDTH2L4M.js";
+import { _ as t } from "./lib-CqYQxuXU.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-KIlwGfjA.js → CreatedOnDcom-de-de-BIYI--dR.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DDTH2L4M.js";
+import { _ as e } from "./lib-CqYQxuXU.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-CSdRVDnn.js → CreatedOnDcom-en-us-D3MjlZKo.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DDTH2L4M.js";
+import { _ as e } from "./lib-CqYQxuXU.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-CPFtzvn4.js → CreatedOnDcom-es-es-BHyAebHO.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DDTH2L4M.js";
+import { _ as e } from "./lib-CqYQxuXU.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-CJqQeuni.js → CreatedOnDcom-fr-ca-BN3nlrRA.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DDTH2L4M.js";
+import { _ as e } from "./lib-CqYQxuXU.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-bYbEQhxp.js → CreatedOnDcom-fr-fr-DvGvHuuL.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-DDTH2L4M.js";
+import { _ as e } from "./lib-CqYQxuXU.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-Cwe4yt9x.js → CreatedOnDcom-pt-br-BUrqir03.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DDTH2L4M.js";
+import { _ as M } from "./lib-CqYQxuXU.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-CgV-hgaC.js → CreatedOnDcom-pt-pt-Cm65TWeg.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-DDTH2L4M.js";
+import { _ as M } from "./lib-CqYQxuXU.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/button/Button.mixin.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isModalVisible: boolean;
 }, {
     buttonStyle(): BrandPageCssStyle;
+    buttonTitle(): string;
     iconImgStyle(): BrandPageCssStyle;
     isIconImage(): boolean;
     iconColor(): string | undefined;

package/lib/src/brand-page/components/button/Button.mixin.js

@@ -29,6 +29,9 @@ export default defineComponent({
         buttonStyle() {
             return this.viewModel.styles?.style || {};
         },
+        buttonTitle() {
+            return this.viewModel.title || '';
+        },
         iconImgStyle() {
             if (!this.viewModel.styles?.style) {
                 return {};

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -73,6 +73,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     bpShowTopNavigationMobile(): boolean;
     bpShowTopNavigationDesktop(): boolean;
     slug(): string;
+    shouldShowSaveContactWidget(): boolean;
 }, {
     openSideMenu(): void;
     onLogoClick(tabName: string): void;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
 import { getSlugFromContext } from '../../utils';
 import { BRAND_PAGE_TYPES } from '../../models';
+import { hasProfileContent as checkHasProfileContent } from '../../utils/vcard.util';
 export default defineComponent({
     props: {
         context: {
@@ -263,6 +264,21 @@ export default defineComponent({
         slug() {
             return getSlugFromContext(this.context);
         },
+        shouldShowSaveContactWidget() {
+            try {
+                if (this.context.isPreview ||
+                    this.context.options?.showOnGeneratedPreviews === false ||
+                    !this.context.isBrandContact) {
+                    return false;
+                }
+                const brandPageData = { pages: this.context?.pages || [] };
+                return checkHasProfileContent(brandPageData);
+            }
+            catch (error) {
+                console.error('Error checking profile content:', error);
+                return false;
+            }
+        },
     },
     watch: {
         rootElementStyles() {

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.d.ts

@@ -1,4 +1,4 @@
-import type { PageFooterViewModel } from '../../view-models';
+import type { PageFooterViewModel, BrandPageViewModel } from '../../view-models';
 import type { PropType } from 'vue';
 import type { BrandPageContext } from '../../models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -19,6 +19,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: boolean;
     };
+    brandPageViewModel: {
+        type: PropType<BrandPageViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>, {}, {}, {
     containerStyle(): BrandPageCssStyle;
     socialLinksIconStyle(): BrandPageCssStyle;
@@ -46,10 +51,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: boolean;
     };
+    brandPageViewModel: {
+        type: PropType<BrandPageViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onOn-logo-click"?: ((...args: any[]) => any) | undefined;
     "onFooter-container-click"?: ((...args: any[]) => any) | undefined;
 }>, {
+    brandPageViewModel: BrandPageViewModel;
     isMobile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.js

@@ -20,6 +20,11 @@ export default defineComponent({
             required: false,
             default: false,
         },
+        brandPageViewModel: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
     },
     emits: ['on-logo-click', 'footer-container-click'],
     computed: {

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -24,6 +24,7 @@ export declare const context: {
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
         renderVideoAsImage?: boolean | undefined;
         shouldPlayVideos?: boolean | undefined;
+        showOnGeneratedPreviews?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -24,6 +24,7 @@ export declare const context: {
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
         renderVideoAsImage?: boolean | undefined;
         shouldPlayVideos?: boolean | undefined;
+        showOnGeneratedPreviews?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -71,6 +71,7 @@ export interface BrandPageContext {
         mediaSizes?: MediaSizes;
         renderVideoAsImage?: boolean;
         shouldPlayVideos?: boolean;
+        showOnGeneratedPreviews?: boolean;
     };
     abTests?: AbTest;
     /** Is brand page rendered for preview */

package/lib/src/brand-page/utils/vcard.util.d.ts

@@ -0,0 +1,13 @@
+import type { ProfileContent, BrandPageModel } from '../models';
+export declare const findProfileContent: (brandPageData?: BrandPageModel | {
+    pages?: any[];
+}) => ProfileContent | undefined;
+export declare const hasProfileContent: (brandPageData?: BrandPageModel | {
+    pages?: any[];
+}) => boolean;
+export declare const generateVCard: (brandPageData: BrandPageModel | {
+    pages?: any[];
+}) => string;
+export declare const saveContact: (brandPageData: BrandPageModel | {
+    pages?: any[];
+}) => void;

package/lib/src/brand-page/utils/vcard.util.js

@@ -0,0 +1,176 @@
+import { isValidUrl } from '../../helpers/url.helper';
+// Constants
+const HTML_ENTITIES = {
+    ' ': ' ',
+    '&': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+};
+const SOCIAL_TYPE_MAP = {
+    facebook: 'FACEBOOK',
+    instagram: 'INSTAGRAM',
+    x: 'TWITTER',
+    linkedin: 'LINKEDIN',
+    youtube: 'YOUTUBE',
+    pinterest: 'PINTEREST',
+    tiktok: 'TIKTOK',
+    twitch: 'TWITCH',
+    website: 'WEBSITE',
+};
+// Utility Functions
+const sanitizeForVCard = (value) => {
+    if (!value || typeof value !== 'string')
+        return '';
+    let text = value.replace(/<[^>]*>/g, ''); // Strip HTML tags
+    // Decode HTML entities
+    Object.entries(HTML_ENTITIES).forEach(([entity, char]) => {
+        text = text.replace(new RegExp(entity, 'g'), char);
+    });
+    // Escape backslash FIRST, then other vCard special characters
+    text = text.replace(/\\/g, '\\\\');
+    text = text.replace(/\n/g, '\\n');
+    text = text.replace(/,/g, '\\,');
+    text = text.replace(/;/g, '\\;');
+    return text.trim();
+};
+const normalizeUrl = (url) => {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return '';
+    // Add protocol if missing
+    if (trimmed.startsWith('//')) {
+        return isValidUrl(`https:${trimmed}`) ? `https:${trimmed}` : '';
+    }
+    if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
+        return isValidUrl(`https://${trimmed}`) ? `https://${trimmed}` : '';
+    }
+    return isValidUrl(trimmed) ? trimmed : '';
+};
+const findContentsByType = (brandPageData, type) => {
+    if (!brandPageData?.pages)
+        return [];
+    return brandPageData.pages.flatMap((page) => page.contents?.filter((content) => content.type === type) || []);
+};
+export const findProfileContent = (brandPageData) => {
+    if (!brandPageData?.pages)
+        return undefined;
+    for (const page of brandPageData.pages) {
+        const profile = page.contents?.find((content) => content.type === 'profile');
+        if (profile)
+            return profile;
+    }
+    return undefined;
+};
+export const hasProfileContent = (brandPageData) => findProfileContent(brandPageData) !== undefined;
+// vCard Entry Handlers
+const addPhoneEntry = (phoneNumber, vcardLines) => {
+    const cleaned = phoneNumber.replace(/[^\d+]/g, '');
+    vcardLines.push(`TEL;TYPE=CELL:${cleaned}`);
+};
+const addEmailEntry = (email, vcardLines) => {
+    vcardLines.push(`EMAIL:${email}`, `EMAIL;TYPE=WORK:${email}`);
+};
+const addUrlEntry = (url, type, vcardLines) => {
+    const formatted = normalizeUrl(url);
+    // Skip invalid URLs
+    if (!formatted)
+        return;
+    if (type) {
+        vcardLines.push(`URL;TYPE=${type}:${formatted}`);
+    }
+    else {
+        vcardLines.push(`URL:${formatted}`);
+    }
+};
+const processContactUrl = (url, iconType, vcardLines) => {
+    if (url.startsWith('tel:')) {
+        addPhoneEntry(url.replace('tel:', ''), vcardLines);
+    }
+    else if (url.startsWith('mailto:')) {
+        addEmailEntry(url.replace('mailto:', ''), vcardLines);
+    }
+    else if (iconType === 'email') {
+        addEmailEntry(url, vcardLines);
+    }
+    else if (iconType === 'phone') {
+        addPhoneEntry(url, vcardLines);
+    }
+    else {
+        addUrlEntry(url, SOCIAL_TYPE_MAP[iconType], vcardLines);
+    }
+};
+const processButton = (button, vcardLines) => {
+    if (!button.url)
+        return;
+    const url = button.url.trim();
+    const iconType = button.iconUrl?.toLowerCase() || '';
+    processContactUrl(url, iconType, vcardLines);
+};
+const processSocialLinks = (socialLinksContent, vcardLines) => {
+    if (!socialLinksContent.links?.length)
+        return;
+    socialLinksContent.links.forEach((link) => {
+        if (!link.url)
+            return;
+        const url = link.url.trim();
+        const platform = link.imageUrl?.toLowerCase() || '';
+        processContactUrl(url, platform, vcardLines);
+    });
+};
+const addProfileInfo = (profile, vcardLines) => {
+    const name = sanitizeForVCard(profile.name || '');
+    const title = sanitizeForVCard(profile.title || '');
+    const description = sanitizeForVCard(profile.description || '');
+    if (name) {
+        const nameParts = name.trim().split(/\s+/);
+        const lastName = nameParts.length > 1 ? nameParts.pop() || '' : '';
+        const middleName = nameParts.length > 1 ? nameParts.pop() || '' : '';
+        const firstName = nameParts.join(' ');
+        vcardLines.push(`FN:${name}`, `N:${lastName};${firstName};${middleName};;`);
+    }
+    if (title)
+        vcardLines.push(`TITLE:${title}`);
+    if (description)
+        vcardLines.push(`NOTE:${description}`);
+};
+// Main Functions
+export const generateVCard = (brandPageData) => {
+    const vcardLines = ['BEGIN:VCARD', 'VERSION:3.0'];
+    const profile = findProfileContent(brandPageData);
+    if (profile) {
+        addProfileInfo(profile, vcardLines);
+    }
+    const buttons = findContentsByType(brandPageData, 'button');
+    buttons.forEach((button) => processButton(button, vcardLines));
+    const socialLinks = findContentsByType(brandPageData, 'social-links');
+    socialLinks.forEach((links) => processSocialLinks(links, vcardLines));
+    vcardLines.push('END:VCARD');
+    return vcardLines.join('\r\n');
+};
+const generateVCardFilename = (name) => {
+    if (!name)
+        return 'contact.vcf';
+    const safeName = name
+        .replace(/[^a-z0-9]/gi, '_')
+        .toLowerCase()
+        .slice(0, 50);
+    return `${safeName}.vcf`;
+};
+const downloadVCard = (vcard, filename) => {
+    const blob = new Blob([vcard], { type: 'text/vcard;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+};
+export const saveContact = (brandPageData) => {
+    const vcard = generateVCard(brandPageData);
+    const profile = findProfileContent(brandPageData);
+    const filename = generateVCardFilename(profile?.name);
+    downloadVCard(vcard, filename);
+};

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -1169,6 +1169,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     bpShowTopNavigationMobile(): boolean;
     bpShowTopNavigationDesktop(): boolean;
     slug(): string;
+    shouldShowSaveContactWidget(): boolean;
 }, {
     openSideMenu(): void;
     onLogoClick(tabName: string): void;

package/lib/src/brand-page-maker/components/preview/Preview.mixin.js

@@ -81,6 +81,7 @@ export default defineComponent({
                     mediaSizes: MEDIA_SIZES.size1x,
                     renderVideoAsImage: false,
                     shouldPlayVideos: this.shouldPlayVideos,
+                    showOnGeneratedPreviews: false,
                 },
                 stripePublishableKey: undefined,
                 runtimeEnvironment: this.runtimeEnvironment,

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -118,6 +118,7 @@ export default defineComponent({
                     disableNavigationSideMenu: true,
                     mediaSizes: MEDIA_SIZES.sizeThumb,
                     renderVideoAsImage: true,
+                    showOnGeneratedPreviews: false,
                 },
                 isCapturingPreview: false,
             };
@@ -188,7 +189,7 @@ export default defineComponent({
     },
     watch: {
         template() {
-            if (this.isAdmin) {
+            if (this.isAdmin || this.isPrePurchase) {
                 this.updateViewModel();
             }
             else {
@@ -199,7 +200,7 @@ export default defineComponent({
         },
         logoTheme: {
             handler() {
-                if (this.isAdmin) {
+                if (this.isAdmin || this.isPrePurchase) {
                     this.updateViewModel();
                 }
             },
@@ -207,7 +208,7 @@ export default defineComponent({
         },
         previewImageUrl() {
             // Reset loading state whenever the preview URL changes
-            if (!this.isAdmin) {
+            if (!this.isAdmin && !this.isPrePurchase) {
                 this.imageLoading = true;
                 this.imageLoadError = false;
             }
@@ -266,7 +267,7 @@ export default defineComponent({
         },
         async updateViewModel(forceUpdate = true) {
             // Only update view model for admin or pre-purchase mode
-            if (!this.isAdmin) {
+            if (!this.isAdmin && !this.isPrePurchase) {
                 return;
             }
             const videoStore = useVideoStore();

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -47,6 +47,8 @@ export declare const EVENTS: {
     WEBSITE_MAKER_AI_SEND_PROMPT: string;
     WEBSITE_MAKER_AI_COPY_RESPONSE: string;
     WEBSITE_MAKER_AI_STOP_GENERATION: string;
+    WEBSITE_SAVE_CONTACT: string;
+    WEBSITE_START_FOR_FREE: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -30,6 +30,8 @@ export const EVENTS = {
     WEBSITE_MAKER_AI_SEND_PROMPT: 'website_maker_ai_send_prompt',
     WEBSITE_MAKER_AI_COPY_RESPONSE: 'website_maker_ai_copy_response',
     WEBSITE_MAKER_AI_STOP_GENERATION: 'website_maker_ai_stop_generation',
+    WEBSITE_SAVE_CONTACT: 'website_save_contact',
+    WEBSITE_START_FOR_FREE: 'website_start_for_free',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',