@designcrowd/library.brand-page 5.10.20 → 5.10.30

package/lib/src/lib.js

@@ -27,6 +27,7 @@ export { default as SensitiveContentModal } from './brand-page/components/sensit
 export { getBrandPageViewModelFromBrandPageModel, migrateBrandPageModel, } from './brand-page/utils';
 export * as brandPageUtils from './brand-page/utils';
 export { getOptimalLogoSize } from './brand-page/utils/logo.util';
+export { sanitizeRTEHtml } from './brand-page-maker/utils';
 // stores
 export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';

package/lib/src/mockServiceWorker.js

@@ -5,24 +5,23 @@
  * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.8.7'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.10.2'
+const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
-self.addEventListener('install', function () {
+addEventListener('install', function () {
   self.skipWaiting()
 })
 
-self.addEventListener('activate', function (event) {
+addEventListener('activate', function (event) {
   event.waitUntil(self.clients.claim())
 })
 
-self.addEventListener('message', async function (event) {
-  const clientId = event.source.id
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
 
   if (!clientId || !self.clients) {
     return
@@ -94,17 +93,18 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-self.addEventListener('fetch', function (event) {
-  const { request } = event
-
+addEventListener('fetch', function (event) {
   // Bypass navigation requests.
-  if (request.mode === 'navigate') {
+  if (event.request.mode === 'navigate') {
     return
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
     return
   }
 
@@ -115,48 +115,62 @@ self.addEventListener('fetch', function (event) {
     return
   }
 
-  // Generate unique request ID.
   const requestId = crypto.randomUUID()
   event.respondWith(handleRequest(event, requestId))
 })
 
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ */
 async function handleRequest(event, requestId) {
   const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
   const response = await getResponse(event, client, requestId)
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const responseClone = response.clone()
-
-      sendToClient(
-        client,
-        {
-          type: 'RESPONSE',
-          payload: {
-            requestId,
-            isMockedResponse: IS_MOCKED_RESPONSE in response,
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
             type: responseClone.type,
             status: responseClone.status,
             statusText: responseClone.statusText,
-            body: responseClone.body,
             headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
           },
         },
-        [responseClone.body],
-      )
-    })()
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
   }
 
   return response
 }
 
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
@@ -184,12 +198,16 @@ async function resolveMainClient(event) {
     })
 }
 
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @returns {Promise<Response>}
+ */
 async function getResponse(event, client, requestId) {
-  const { request } = event
-
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
-  const requestClone = request.clone()
+  const requestClone = event.request.clone()
 
   function passthrough() {
     // Cast the request headers to a new Headers instance
@@ -230,29 +248,17 @@ async function getResponse(event, client, requestId) {
   }
 
   // Notify the client that a request has been intercepted.
-  const requestBuffer = await request.arrayBuffer()
+  const serializedRequest = await serializeRequest(event.request)
   const clientMessage = await sendToClient(
     client,
     {
       type: 'REQUEST',
       payload: {
         id: requestId,
-        url: request.url,
-        mode: request.mode,
-        method: request.method,
-        headers: Object.fromEntries(request.headers.entries()),
-        cache: request.cache,
-        credentials: request.credentials,
-        destination: request.destination,
-        integrity: request.integrity,
-        redirect: request.redirect,
-        referrer: request.referrer,
-        referrerPolicy: request.referrerPolicy,
-        body: requestBuffer,
-        keepalive: request.keepalive,
+        ...serializedRequest,
       },
     },
-    [requestBuffer],
+    [serializedRequest.body],
   )
 
   switch (clientMessage.type) {
@@ -268,6 +274,12 @@ async function getResponse(event, client, requestId) {
   return passthrough()
 }
 
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
 function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
     const channel = new MessageChannel()
@@ -280,14 +292,18 @@ function sendToClient(client, message, transferrables = []) {
       resolve(event.data)
     }
 
-    client.postMessage(
-      message,
-      [channel.port2].concat(transferrables.filter(Boolean)),
-    )
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
   })
 }
 
-async function respondWithMock(response) {
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
   // Setting response status code to 0 is a no-op.
   // However, when responding with a "Response.error()", the produced Response
   // instance will have status code set to 0. Since it's not possible to create
@@ -305,3 +321,24 @@ async function respondWithMock(response) {
 
   return mockedResponse
 }
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.d.ts

@@ -75,6 +75,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    showColorPallet: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>, {
     backgroundStyles: import("vue").ComputedRef<{
         style: {
@@ -369,6 +374,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
+    showColorPallet: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onOn-toggle-state-change"?: ((...args: any[]) => any) | undefined;
@@ -384,5 +394,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isToggled: boolean;
     toggleUniqueId: string;
     enableColorMatch: boolean;
+    showColorPallet: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.js

@@ -80,6 +80,11 @@ export default defineComponent({
             required: false,
             default: undefined,
         },
+        showColorPallet: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
     },
     setup() {
         const backgroundSettingsStore = useUiBackgroundSettingsStore();

package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.d.ts

@@ -16,6 +16,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         required: true;
     };
+    showUpgradeBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     pageSettingsStore: import("pinia").Store<"uiPageSettings", import("../../../page-settings/store").PageSettingsState, {
         pageIndex(): number;
@@ -127,7 +131,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         required: true;
     };
+    showUpgradeBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    showUpgradeBtn: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.js

@@ -20,6 +20,10 @@ export default defineComponent({
             type: String,
             required: true,
         },
+        showUpgradeBtn: {
+            type: Boolean,
+            default: true,
+        },
     },
     setup() {
         const pageSettingsStore = useUiPageSettingsStore();

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="types/lodash-shims" />
 declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any>, {
     icon(): string;
+    formattedValue(): string;
 }, {
     onFocusOverride(): void;
+    onInputOverride(): void;
     onChangeOverride(): void;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     attrs: {

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.js

@@ -22,6 +22,14 @@ export default defineComponent({
                     return 'globe';
             }
         },
+        formattedValue() {
+            if (this.role === 'url' &&
+                this.innerValue &&
+                !URL_RE.test(this.innerValue)) {
+                return `${this.schema}://${this.innerValue}`;
+            }
+            return this.innerValue;
+        },
     },
     watch: {
         value(newVal) {
@@ -35,13 +43,10 @@ export default defineComponent({
     methods: {
         onFocusOverride() {
             this.isDirty = true;
-            if (this.role !== 'url') {
-                return;
-            }
-            const match = URL_RE.exec(this.innerValue);
-            if (match) {
-                this.schema = match[1];
-                this.innerValue = match[2];
+        },
+        onInputOverride() {
+            if (this.role === 'url') {
+                this.text = this.innerValue;
             }
         },
         onChangeOverride() {

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

@@ -3059,6 +3059,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             label: string;
             isSelected: boolean;
             dataAttribute?: string | undefined;
+            disabled?: boolean | undefined;
         } | {
             label?: string | undefined;
             value: string;
@@ -3068,6 +3069,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             iconViewBox?: string | undefined;
             iconSize?: string | undefined;
             dataAttribute?: string | undefined;
+            disabled?: boolean | undefined;
         };
         options: ("defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor")[];
         iconStyle: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.10.20",
+  "version": "5.10.30",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,9 +55,10 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.2.7",
+    "@designcrowd/fe-shared-lib": "1.2.11",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
+    "@tiptap/extension-bubble-menu": "^2.14.0",
     "@tiptap/extension-character-count": "2.11.7",
     "@tiptap/extension-color": "2.11.5",
     "@tiptap/extension-font-family": "2.11.5",
@@ -79,6 +80,7 @@
     "css-color-names": "1.0.1",
     "date-utils": "1.2.21",
     "deepmerge": "4.3.1",
+    "dompurify": "3.2.6",
     "dropzone-vue3": "1.0.2",
     "express": "4.18.2",
     "fs-extra": "11.2.0",
@@ -102,11 +104,11 @@
     "validator": "13.11.0",
     "vue": "3.5.15",
     "vue-cropperjs": "5.0.0",
-    "vuedraggable": "4.1.0",
     "vue-router": "4.5.0",
     "vue-select": "4.0.0-beta.6",
     "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
+    "vuedraggable": "4.1.0",
     "vuex": "4.1.0"
   },
   "peerDependencies": {
@@ -134,6 +136,7 @@
     "@stylistic/eslint-plugin": "1.5.4",
     "@types/axios-mock-adapter": "1.10.0",
     "@types/braces": "3.0.4",
+    "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
     "@types/google.maps": "3.55.1",

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -81,12 +81,14 @@
             v-if="viewModel.title"
             :text-style="viewModel.titleStyle"
             :text="viewModel.title"
+            :slug="context.brandPageSlug"
             element="h1"
           />
           <TextWrapper
             v-if="hasDescriptionText"
             :text-style="viewModel.descriptionStyle"
             :text="renderText"
+            :slug="context.brandPageSlug"
             element="div"
           />
           <div class="tw-w-full tw-flex" :class="displayButtonClass">
@@ -120,12 +122,14 @@
                 v-if="viewModel.title"
                 :text-style="viewModel.titleStyle"
                 :text="viewModel.title"
+                :slug="context.brandPageSlug"
                 element="h1"
               />
               <TextWrapper
                 v-if="hasDescriptionText"
                 :text-style="viewModel.descriptionStyle"
                 :text="renderText"
+                :slug="context.brandPageSlug"
                 element="div"
               />
               <div class="tw-w-full tw-flex" :class="displayButtonClass">
@@ -201,12 +205,14 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
+              :slug="context.brandPageSlug"
               element="h1"
             />
             <TextWrapper
               v-if="hasDescriptionText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
+              :slug="context.brandPageSlug"
               element="div"
             />
             <div class="tw-w-full tw-flex" :class="displayButtonClass">

package/src/brand-page/components/text/Text.vue

@@ -10,6 +10,7 @@
       <TextWrapper
         :text-style="viewModel.textStyle"
         :text="renderText"
+        :slug="context.brandPageSlug"
         element="div"
         data-test-tag="text-content-text"
       />
@@ -27,6 +28,7 @@
           :key="index"
           :text-style="item.textStyle"
           :text="renderTextItem(item.text)"
+          :slug="context.brandPageSlug"
           element="div"
           class="tw-overflow-hidden"
           data-test-tag="text-content-text-item"

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="text" class="tw-w-full" :style="data.wrapperStyle">
+  <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
       class="tw-w-full empty-para"
       :style="isRTEContent ? textStyleRTE : style"
     >
       <component
         :is="element"
-        :class="padding"
-        class="tw-box-decoration-clone tw-inline"
+        :class="[padding, { 'tw-inline': !isRTEContent }]"
+        class="tw-box-decoration-clone"
         :style="isRTEContent ? {} : textStyles"
-        v-html="text"
+        v-html="sanitizeText"
       />
     </div>
   </div>
@@ -30,6 +30,7 @@ interface Props {
   textStyle: TextStyleDeclaration | undefined;
   text: string;
   element?: string;
+  slug?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -72,23 +73,42 @@ const isRTEContent = computed(() => {
   return hasRTEContent(props.text);
 });
 
+const sanitizeText = computed(() => {
+  const brandPageSlug = props.slug;
+
+  if (!brandPageSlug || !props.text.includes('<a ')) {
+    return props.text;
+  }
+
+  // Transform internal page links by adding brandPageSlug
+  return props.text.replace(
+    /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
+    (match, existingAttrsStart, href, existingAttrsEnd) => {
+      // Only process internal links (no protocol, doesn't start with /)
+      if (href && !href.match(/^(https?:\/\/|\/)/)) {
+        return `<a ${existingAttrsStart}href="/${brandPageSlug}/${href}"${existingAttrsEnd}>`;
+      }
+      return match;
+    },
+  );
+});
+
 const fontSize = computed<any>(() => props.textStyle.fontSize);
 
 watch(fontSize, () => {
   applyScale();
 });
 
-watch(
-  () => props.text,
-  () => {
-    applyScale();
-  },
-);
+watch(sanitizeText, () => {
+  applyScale();
+});
 
 const currentInstance = getCurrentInstance();
 
 const padding = computed(() =>
-  props.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '',
+  props.textStyle.backgroundColor && !isRTEContent.value
+    ? 'tw-py-2 tw-px-4'
+    : '',
 );
 
 onMounted(() => {

package/src/brand-page/models/index.ts

@@ -344,6 +344,12 @@ export const BUTTON_LINK_TYPE = {
 } as const;
 export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
 
+export const HYPERLINK_TYPE = {
+  url: 'url',
+  page: 'page',
+} as const;
+export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
+
 export const URL_TYPE = {
   url: 'url',
   email: 'email',