@designcrowd/library.brand-page 5.16.47-kp-dropdown-2 → 5.16.47

package/lib/src/brand-page/utils/view-model.util.js

@@ -1,17 +1,16 @@
 import { reactive } from 'vue';
 import { assertUnreachable } from '../../helpers/ts.helper';
-import { ButtonStyles, VIEWPORTS } from '../models';
+import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
-import { isHexTransparent } from './color.util';
-import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../constants';
+import { isHexTransparent, setRgbAlpha } from './color.util';
+import { isHexColor } from '../../utils/helpers';
+import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ButtonSoftBoxShadowSize, ButtonBoxShadowSize, BoxShadowSpread, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../constants';
 import uniq from 'lodash/uniq';
 import { generateGoogleFontUrl } from './font-loader.util';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
 import { getBoxShadowValue } from './button.util';
 import { getRouteNameByPageIndex, getRouteParamsByPage } from './route.util';
-import { hasRTEContent } from '../../brand-page-maker/utils';
-import { getPageIdFromHref, isHrefPageId, } from '../../brand-page-maker/composables/rich-text-editor/hyperlink';
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
 const PROFILE_PADDING_TOP = '1rem';
@@ -442,7 +441,7 @@ export const mapToBannerSectionViewModel = (content, styles, options) => {
             modalImageUrl: '',
             url: content.url,
             title: content.buttonText || '',
-            page: content.buttonPageId || '',
+            page: '',
         }, styles, {
             titleStyle: content.buttonTextStyle,
         }),
@@ -598,7 +597,7 @@ export const mapToBookingSectionViewModel = (content, styles) => {
             modalImageUrl: '',
             url: content.url,
             title: content.buttonText || '',
-            page: content.buttonPageId || '',
+            page: content.pageSlug || '',
             colorReplacements: [],
             titleStyle: content.buttonTextStyle,
         }, styles, {
@@ -610,34 +609,22 @@ export const mapToBookingSectionViewModel = (content, styles) => {
 // Recursively build the nav item view model for each page/sub page in the nav
 const buildNavItemViewModel = (order, routes, parentPath, isFirstPage, brandPageSlug, isCustomDomain, depth = 0) => {
     const route = routes.find((r) => r.id === order.routeId);
-    if (!route) {
-        // This shouldn't happen, but we want to handle it gracefully just in case
-        return null;
-    }
-    const pageSlug = route.pageSlug;
+    const pageSlug = route?.pageSlug ?? '';
     const relativePath = parentPath ? `${parentPath}/${pageSlug}` : pageSlug;
     return {
-        isRoot: isFirstPage,
-        pageId: route.pageId,
-        slug: route.pageSlug,
-        displayName: route.displayName,
+        displayName: route?.displayName ?? '',
         routeName: getRouteNameByPageIndex(Boolean(isCustomDomain), isFirstPage ? 0 : 9999),
-        routeParams: getRouteParamsByPage(Boolean(isCustomDomain), brandPageSlug ?? 'default-slug', // This can never be empty on non-custom domains
-        pageSlug),
+        routeParams: getRouteParamsByPage(Boolean(isCustomDomain), brandPageSlug ?? '', pageSlug),
         relativePath,
-        isHidden: route.isHidden,
+        isHidden: route?.isHidden ?? false,
         nestedNavItems: depth >= MAX_SUB_NAV_DEPTH
             ? []
-            : order.subRoutes
-                .map((subRoute) => buildNavItemViewModel(subRoute, routes, relativePath, false, brandPageSlug, isCustomDomain, depth + 1))
-                .filter((item) => item !== null),
+            : order.subRoutes.map((subRoute) => buildNavItemViewModel(subRoute, routes, relativePath, false, brandPageSlug, isCustomDomain, depth + 1)),
     };
 };
 export const mapToNavViewModel = (nav, brandPageSlug, isCustomDomain) => {
     return {
-        navItems: nav.orders
-            .map((order, idx) => buildNavItemViewModel(order, nav.routes, '', idx === 0, brandPageSlug, isCustomDomain))
-            .filter((item) => item !== null).filter((item) => !item.isHidden),
+        navItems: nav.orders.map((order, idx) => buildNavItemViewModel(order, nav.routes, '', idx === 0, brandPageSlug, isCustomDomain)),
     };
 };
 export const mapToPageStyleViewModel = (pageStyles, options) => {
@@ -823,7 +810,6 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         };
     });
     const nav = mapToNavViewModel(model.nav, options.brandPageSlug, options.isCustomDomain);
-    mapPageIdReferencesToRelativePaths(pages, nav, options);
     return {
         brandPageToken,
         pages,
@@ -853,53 +839,6 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
             : { isSavingEnabled: true, hideBranding: false },
     };
 };
-const mapPageIdReferencesToRelativePaths = (pages, nav, options) => {
-    pages.forEach((page) => {
-        page.contents.forEach((content) => {
-            dynamicallyMapPageIdInHyperlinksToRelativePaths(content, nav, options);
-        });
-    });
-};
-const dynamicallyMapPageIdInHyperlinksToRelativePaths = (content, nav, options) => {
-    Object.keys(content).forEach((key) => {
-        const value = content[key];
-        if (value === undefined || value === null) {
-            return;
-        }
-        if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
-            if (Array.isArray(value)) {
-                value.forEach((item) => {
-                    dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
-                });
-            }
-            else {
-                dynamicallyMapPageIdInHyperlinksToRelativePaths(value, nav, options);
-            }
-        }
-        else if (typeof value === 'string' && hasRTEContent(value)) {
-            content[key] = value.replace(/<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi, (match, existingAttrsStart, href, existingAttrsEnd) => {
-                // Only process internal links (no protocol, doesn't start with /)
-                if (href && !href.match(/^(https?:\/\/|\/)/) && isHrefPageId(href)) {
-                    const pageId = getPageIdFromHref(href);
-                    const route = nav.navItems.find((x) => x.pageId === pageId);
-                    const brandPageSlugRoute = options.brandPageSlug
-                        ? `/${options.brandPageSlug}`
-                        : '';
-                    if (route) {
-                        let href = `${brandPageSlugRoute}`;
-                        if (!route.isRoot) {
-                            href = `${brandPageSlugRoute}/${route.relativePath}`;
-                        }
-                        return `<a ${existingAttrsStart}href="${href}"${existingAttrsEnd}>`;
-                    }
-                    // fallback to root if pageid cannot be resolved.
-                    return `<a ${existingAttrsStart}href="${brandPageSlugRoute}"${existingAttrsEnd}>`;
-                }
-                return match;
-            });
-        }
-    });
-};
 export const isLogoViewModel = (viewModel) => {
     return viewModel.role === 'logo';
 };

package/lib/src/brand-page/view-models.d.ts

@@ -166,12 +166,9 @@ export interface NavItemRouteParams {
     pageSlug?: string;
 }
 export interface NavItemViewModel {
-    pageId: string;
-    slug: string;
     displayName: string;
     routeName: string;
     routeParams: NavItemRouteParams;
-    isRoot: boolean;
     isHidden: boolean;
     relativePath: string;
     nestedNavItems: NavItemViewModel[];

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

@@ -931,9 +931,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setPages({ pages }: {
             pages: import("../../../shared/page-settings/models").ContentPage[];
         }): void;
-        setNewPageModalVisibilityAsync({ isNewPageModalVisible, parentPageId, }: {
+        setNewPageModalVisibilityAsync({ isNewPageModalVisible, }: {
             isNewPageModalVisible: boolean;
-            parentPageId?: string | undefined;
         }): Promise<void>;
         addPage({ page }: {
             page: import("../../../shared/page-settings/models").ContentPage;

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -2242,7 +2242,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     type: 'banner-section',
                     title: 'Building the Future, One Project at a Time.',
                     imageUrl: 'https://bcassetcdn.com/shapes/prod/b2efecd4-f406-4b20-b9a6-f362fb0db749.svg',
-                    buttonPageId: '',
+                    pageSlug: '',
                     cardStyle: {
                         backgroundColor: 'rgb(255,255,255)',
                     },

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

@@ -943,9 +943,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         setPages({ pages }: {
             pages: import("../../../shared/page-settings/models").ContentPage[];
         }): void;
-        setNewPageModalVisibilityAsync({ isNewPageModalVisible, parentPageId, }: {
+        setNewPageModalVisibilityAsync({ isNewPageModalVisible, }: {
             isNewPageModalVisible: boolean;
-            parentPageId?: string | undefined;
         }): Promise<void>;
         addPage({ page }: {
             page: import("../../../shared/page-settings/models").ContentPage;

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

@@ -90,7 +90,6 @@ export default defineComponent({
                 customDomain: undefined,
                 brandPageType: this.viewModel.brandPageType,
                 pages: this.viewModel.pages,
-                nav: this.viewModel.nav,
                 isBrandPage: this.viewModel.brandPageType === BRAND_PAGE_TYPES.default,
                 isBrandPageOrIsBrandContact: this.viewModel.brandPageType === BRAND_PAGE_TYPES.default ||
                     this.viewModel.brandPageType === BRAND_PAGE_TYPES.brandContact,

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

@@ -106,7 +106,6 @@ export default defineComponent({
                 stripePublishableKey: undefined,
                 pageTitle: this.brandPageTitle,
                 pages: this.viewModel?.pages || [],
-                nav: this.viewModel?.nav || { navItems: [] },
                 currentPageSlug: this.viewModel?.pages[0]?.slug || '',
                 customDomain: undefined,
                 brandPageType: this.viewModel?.brandPageType || BRAND_PAGE_TYPES.default,

package/lib/src/brand-page-maker/composables/rich-text-editor/hyperlink.d.ts

@@ -1,7 +1,4 @@
 import type { Editor } from '@tiptap/vue-3';
-export declare const isHrefPageId: (href: string) => boolean;
-export declare const getPageIdFromHref: (href: string) => string;
-export declare const getHrefForPage: (pageId: string) => string;
 export declare const useHyperlink: (editor: Editor) => {
     hyperlinkValue: import("vue").WritableComputedRef<{
         id: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/hyperlink.js

@@ -1,21 +1,6 @@
 import { ref, computed } from 'vue';
 // Store original colors before applying hyperlinks
 const originalColors = new WeakMap();
-export const isHrefPageId = (href) => {
-    if (!href)
-        return false;
-    return href.startsWith('pageid:');
-};
-export const getPageIdFromHref = (href) => {
-    if (!href)
-        return href;
-    return href.replace('pageid:', '');
-};
-export const getHrefForPage = (pageId) => {
-    if (!pageId)
-        return pageId;
-    return `pageid:${pageId}`;
-};
 export const useHyperlink = (editor) => {
     const hyperlinkUrl = ref('');
     const storeOriginalColor = () => {

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -24,7 +24,7 @@ import { useUiContentSettingsStore } from '../../../shared/content-settings/stor
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
 import { AutoLink } from './extensions/AutoLink';
-import { isHrefPageId, useHyperlink } from './hyperlink';
+import { useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import { hasLogoColorVar, isLogoColor, getRTEColor, } from '../../utils/rich-text-editor.util';
 import { useEventTracker, EVENTS } from '../useEventTracker';
@@ -62,7 +62,6 @@ export const useExternalRichTextEditor = () => {
                         target: isExternal ? '_blank' : null,
                     };
                 },
-                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
             }),
             AutoLink,
         ],
@@ -116,7 +115,6 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                         target: isExternal ? '_blank' : null,
                     };
                 },
-                isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
             }),
             AutoLink,
         ],

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1960,7 +1960,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG = () => ({
             optionsConvertor: buttonLinkStyleConvertor,
             visibilityAssessor: bannerLinkTypeVisibilityAssessor,
         },
-        buttonPageId: {
+        pageSlug: {
             type: 'page-dropdown',
             placeholder: contentSettingsTr(`selectAPagePlaceholder`),
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
@@ -2708,7 +2708,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
             optionsConvertor: buttonLinkStyleConvertor,
             visibilityAssessor: bannerLinkTypeVisibilityAssessor,
         },
-        buttonPageId: {
+        pageSlug: {
             type: 'page-dropdown',
             placeholder: contentSettingsTr(`selectAPagePlaceholder`),
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,

package/lib/src/brand-page-maker/models/content-settings.js

@@ -468,7 +468,7 @@ export const createInitialBannerSectionContent = (options) => {
             backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
         },
         backgroundStyle: {},
-        buttonPageId: '',
+        pageSlug: '',
         buttonLinkType: BUTTON_LINK_TYPE.url,
         buttonTextStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
@@ -500,7 +500,7 @@ export const createInitialBookingSectionContent = (options) => {
             textAlign: 'center',
         },
         backgroundStyle: {},
-        buttonPageId: '',
+        pageSlug: '',
         buttonLinkType: BUTTON_LINK_TYPE.url,
         buttonTextStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -18,7 +18,7 @@ import { useUiContentSettingsStore } from '../../../shared/content-settings/stor
 import { setContentSettingsAddContentOptions } from './brandpage-maker-store-utils';
 import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
-import { mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, } from '../../utils';
+import { mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, validateContents, } from '../../utils';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '../../../shared/models';
 import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
 import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
@@ -822,7 +822,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const pageNavigationStore = usePageNavigationStore();
             const pages = pageSettingsStore.pages.map((p) => ({
                 ...p,
-                contents: p.contents.map((c) => c.settings.content),
+                contents: p.contents
+                    .map((c) => c.settings.content)
+                    .map((content) => validateContents(content, pageSettingsStore.pages)),
             }));
             const backgroundStyles = backgroundSettingsStore.backgroundStyles;
             const logoStyles = styleSettingsStore.logoStyles;
@@ -940,7 +942,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     getVideoUrls: videoStore.getVideoUrlsForToken,
                     getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
-                    isCustomDomain: false,
+                    isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
                     brandPageSlug: brandPageContainerStore.brandPageSlug,
                 });
             }
@@ -955,7 +957,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     getVideoUrls: videoStore.getVideoUrlsForToken,
                     getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
-                    isCustomDomain: false,
+                    isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
                     brandPageSlug: brandPageContainerStore.brandPageSlug,
                 });
             }
@@ -964,7 +966,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 getVideoUrls: videoStore.getVideoUrlsForToken,
                 getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                 setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
-                isCustomDomain: false,
+                isCustomDomain: brandPageContainerStore.isCustomDomainEnabled,
                 brandPageSlug: brandPageContainerStore.brandPageSlug,
             });
         },

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

@@ -1,3 +1,7 @@
+import type { ContentPage } from '../../shared/page-settings/models';
 import type { Content } from '../../brand-page';
 export declare const removeContentFieldValues: (content: Content) => Content;
 export declare const removeLogoTemplateModel: (content: Content) => Content;
+export declare const validateContents: (content: Content, pages: ContentPage[]) => Content;
+export declare const validateBannerInternalPage: (content: Content, pages: ContentPage[]) => Content;
+export declare const validateGeneralLinkInternalPage: (content: Content, pages: ContentPage[]) => Content;

package/lib/src/brand-page-maker/utils/content.util.js

@@ -1,3 +1,4 @@
+import { BUTTON_LINK_TYPE } from '../../brand-page';
 import { ADMIN_DISALLOWED_FIELD_NAMES } from '../../shared/content-settings/constants';
 import { isLogoContent } from '../../brand-page/utils';
 export const removeContentFieldValues = (content) => {
@@ -22,3 +23,36 @@ export const removeLogoTemplateModel = (content) => {
     delete newContent.logoTemplateImage;
     return newContent;
 };
+export const validateContents = (content, pages) => {
+    validateBannerInternalPage(content, pages);
+    validateGeneralLinkInternalPage(content, pages);
+    return content;
+};
+export const validateBannerInternalPage = (content, pages) => {
+    if (content.type === 'banner-section') {
+        const bannerContent = content;
+        if (bannerContent.buttonLinkType === BUTTON_LINK_TYPE.page &&
+            bannerContent.pageSlug) {
+            const doesPageExist = pages.some((p) => p.slug === bannerContent.pageSlug);
+            if (!doesPageExist) {
+                bannerContent.pageSlug = '';
+            }
+            return bannerContent;
+        }
+    }
+    return content;
+};
+export const validateGeneralLinkInternalPage = (content, pages) => {
+    if (content.type === 'general-link') {
+        const generalLinkContent = content;
+        if (generalLinkContent.clickActionField === 'page' &&
+            generalLinkContent.page) {
+            const pageExist = pages.some((p) => p.slug === generalLinkContent.page);
+            if (!pageExist) {
+                generalLinkContent.page = '';
+            }
+            return generalLinkContent;
+        }
+    }
+    return content;
+};

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

@@ -2,7 +2,6 @@ import { STYLE_THEME_KEYS, } from '../../brand-page';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import { getRenderText } from '../../brand-page/utils';
 import createDomPurify, {} from 'dompurify';
-import { isHrefPageId } from '../composables/rich-text-editor/hyperlink';
 export const RTE_ALLOWED_SECTION_TYPES = [
     'banner-section',
     'text',
@@ -820,8 +819,7 @@ const validateAndSanitizeHref = (href) => {
     // Allow relative paths, absolute paths, and safe protocols
     if (trimmedHref.startsWith('/') ||
         trimmedHref.startsWith('./') ||
-        trimmedHref.startsWith('../') ||
-        isHrefPageId(trimmedHref)) {
+        trimmedHref.startsWith('../')) {
         return trimmedHref;
     }
     // Allow http and https URLs
@@ -896,7 +894,6 @@ export const sanitizeRTEHtml = (html, domPurify) => {
         const sanitized = domPurify.sanitize(html, {
             ALLOWED_TAGS: allowedTags,
             ALLOWED_ATTR: allowedAttributes,
-            ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|pageid):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
             FORBID_TAGS: forbiddenTags,
             FORBID_ATTR: forbiddenAttributes,
             KEEP_CONTENT: true,

package/lib/src/brand-page-maker/validators/section-button.validator.js

@@ -55,8 +55,7 @@ export const urlValidator = (section) => {
     };
 };
 export const pageValidator = (section) => {
-    if (section.buttonLinkType === BUTTON_LINK_TYPE.page &&
-        !section.buttonPageId) {
+    if (section.buttonLinkType === BUTTON_LINK_TYPE.page && !section.pageSlug) {
         return {
             message: MISSING_PAGE_SLUG_MESSAGE(),
             isValid: false,