@designcrowd/library.brand-page 5.10.6-maker-tester-2 → 5.10.6-ml-2

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -2,9 +2,8 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { isURL } from '../../../utils/validator.util';
 import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../../constants';
-import { getRenderText } from '../../utils';
+import { getRenderText, escapeContentText } from '../../utils';
 import { hasRTEContent } from '../../../brand-page-maker/utils';
-import { escapeContentText } from '../../../shared/content-settings/utils';
 export default defineComponent({
     mixins: [ComponentCommonMixin],
     props: {

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

@@ -0,0 +1,20 @@
+import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel } from '../models';
+export type ContentCallback = {
+    profileContentCallback: (content: ProfileContent) => void;
+    textContentCallback: (content: TextContent) => void;
+    contactFormContentCallback: (content: ContactFormContent) => void;
+    imageContentCallback: (content: ImageContent) => void;
+    bannerSectionContentCallback: (content: BannerSectionContent) => void;
+    socialLinksContentCallback: (content: SocialLinksContent) => void;
+    imageGalleryContentCallback: (content: ImageGalleryContent) => void;
+    testimonialSectionContentCallback: (content: TestimonialSectionContent) => void;
+    aboutSectionContentCallback: (content: AboutSectionContent) => void;
+    imagesSectionContentCallback: (content: ImagesSectionContent) => void;
+    mailingListContentCallback: (content: MailingListContent) => void;
+    supportMeContentCallback: (content: SupportMeContent) => void;
+    requestPaymentContentCallback: (content: RequestPaymentContent) => void;
+    shapesSectionContentCallback: (content: ShapesSectionContent) => void;
+    shopSectionContentCallback: (content: ShopContent) => void;
+    buttonContentCallback: (content: ButtonContent) => void;
+};
+export declare const forEachPageCallContentCallback: (page: PageModel, callbacks: ContentCallback) => void;

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

@@ -0,0 +1,68 @@
+export const forEachPageCallContentCallback = (page, callbacks) => {
+    for (const content of page.contents) {
+        switch (content.type) {
+            case 'profile':
+                callbacks.profileContentCallback(content);
+                break;
+            case 'text':
+                callbacks.textContentCallback(content);
+                break;
+            case 'contact-form':
+                callbacks.contactFormContentCallback(content);
+                break;
+            case 'image':
+                callbacks.imageContentCallback(content);
+                break;
+            case 'banner-section':
+                callbacks.bannerSectionContentCallback(content);
+                break;
+            case 'social-links':
+                callbacks.socialLinksContentCallback(content);
+                break;
+            case 'image-gallery':
+                callbacks.imageGalleryContentCallback(content);
+                break;
+            case 'testimonial-section':
+                callbacks.testimonialSectionContentCallback(content);
+                break;
+            case 'about-section':
+                callbacks.aboutSectionContentCallback(content);
+                break;
+            case 'images-section':
+                callbacks.imagesSectionContentCallback(content);
+                break;
+            case 'mailing-list':
+                callbacks.mailingListContentCallback(content);
+                break;
+            case 'support-me':
+                callbacks.supportMeContentCallback(content);
+                break;
+            case 'request-payment':
+                callbacks.requestPaymentContentCallback(content);
+                break;
+            case 'shapes-section':
+                callbacks.shapesSectionContentCallback(content);
+                break;
+            case 'shop-section':
+                callbacks.shopSectionContentCallback(content);
+                break;
+            case 'general-link':
+            case 'website':
+            case 'email':
+            case 'phone':
+            case 'facebook':
+            case 'instagram':
+            case 'linkedin':
+            case 'tiktok':
+            case 'twitch':
+            case 'twitter':
+            case 'pinterest':
+            case 'youtube':
+                callbacks.buttonContentCallback(content);
+                break;
+            default:
+                console.warn(`Unhandled content type: ${content.type}`);
+                break;
+        }
+    }
+};

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

@@ -1,4 +1,4 @@
-import { escapeContentText } from '../../shared/content-settings/utils';
+import { escapeContentText } from '../../brand-page/utils';
 import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import { getColorReplacementsFromSvgString, getColorReplacementsFromSvgStringServer, } from './svg-color.util';

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

@@ -1 +1,3 @@
 export declare const getRenderText: (text: string) => string;
+export declare const escapeContentText: (text: string | undefined) => string | undefined;
+export declare const unescapeContentText: (text: string) => string;

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

@@ -2,3 +2,14 @@ import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 export const getRenderText = (text) => {
     return text.replace(new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g'), '<br/>');
 };
+export const escapeContentText = (text) => {
+    if (!text) {
+        return text;
+    }
+    return text
+        .replace(/(<([^>]+)>)/gi, '')
+        .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
+};
+export const unescapeContentText = (text) => {
+    return text.replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n');
+};

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

@@ -2,7 +2,7 @@ import { PageHeaderDesktop, PageHeaderMobile, BRAND_PAGE_TYPES, EMPTY_LOGO_IMAGE
 import { brandPageContentsSampleData, brandPageContentsSampleDataStarterKit, } from './page-content-items';
 import { DEFAULT_MAX_NUM_OF_PAGES, UNLIMITED_MAX_NUM_OF_PAGES, } from '../../../stores';
 import { simpleLogoDesignAttributes } from '../../../../__fixtures__';
-import * as uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { CONTENT_SETTINGS_CONFIGS } from '../../../constants';
 export const storyEmailAddress = 'test@test.com';
 const backgroundShapes = [
@@ -1097,7 +1097,7 @@ export const BRAND_PAGE_PERSONALISED = {
             title: 'page 1',
             contents: [
                 {
-                    id: uuid.v4(),
+                    id: uuid(),
                     type: 'profile',
                     personalisationRole: 'profile',
                     avatarImageUrl: '',
@@ -1120,7 +1120,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     },
                 },
                 {
-                    id: uuid.v4(),
+                    id: uuid(),
                     type: 'text',
                     backgroundColor: {},
                     iconUrl: '',
@@ -1132,7 +1132,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     personalisationRole: 'information',
                 },
                 {
-                    id: uuid.v4(),
+                    id: uuid(),
                     type: 'image',
                     imageTitle: '',
                     isFullWidth: false,
@@ -1140,7 +1140,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     personalisationRole: 'media',
                 },
                 {
-                    id: uuid.v4(),
+                    id: uuid(),
                     title: 'Shapes',
                     type: 'shapes-section',
                     displayStyle: 'centered',

package/lib/src/brand-page-maker/components/brand-page-maker/mock-api-calls/mock-custom-domain-api-calls.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { CUSTOM_DOMAIN_DESIGN_DRAFT_TOKEN, PUBLISHED_DESIGN_DRAFT_TOKEN, } from '../__fixtures__';
-import * as uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { CUSTOM_DOMAIN_STATUSES, DNS_CONFIGURATION_STATUSES, } from '../../../constants';
 export const mockCustomDomainApiCalls = (options = {}) => {
     const mock = options.mockAxios || new MockAdapter(axios);
@@ -17,7 +17,7 @@ export const mockCustomDomainApiCalls = (options = {}) => {
         created: new Date(),
         updated: new Date(),
         domainName: 'test.com',
-        id: uuid.v4(),
+        id: uuid(),
         dnsConfigurationStatus: DNS_CONFIGURATION_STATUSES.completed,
         status: CUSTOM_DOMAIN_STATUSES.active,
     };

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

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import * as uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { generateSku } from '../../../shared/ecommerce-settings/util/skuUtils';
 export const useProductConfigStore = defineStore('productConfig', {
     state: () => ({
@@ -37,7 +37,7 @@ export const useProductConfigStore = defineStore('productConfig', {
         openModal(product) {
             this.isNewProduct = !product;
             if (!product) {
-                this.productId = uuid.v4();
+                this.productId = uuid();
                 this.productVariants.push(this.getEmptyVariant());
             }
             else {
@@ -58,11 +58,11 @@ export const useProductConfigStore = defineStore('productConfig', {
         },
         getEmptyVariant() {
             return {
-                id: uuid.v4(),
+                id: uuid(),
                 name: '',
                 options: [
                     {
-                        id: uuid.v4(),
+                        id: uuid(),
                         name: '',
                         price: 0,
                     },
@@ -71,7 +71,7 @@ export const useProductConfigStore = defineStore('productConfig', {
         },
         addDefaultVariantOptions(variantIndex) {
             this.productVariants[variantIndex].options.push({
-                id: uuid.v4(),
+                id: uuid(),
                 name: '',
                 price: 0,
             });
@@ -113,7 +113,7 @@ export const useProductConfigStore = defineStore('productConfig', {
                             },
                         ];
                         const sku = {
-                            id: uuid.v4(),
+                            id: uuid(),
                             price: option.price,
                             skuKey: generateSku(this.productName, option),
                             variant: skuVariant,
@@ -125,7 +125,7 @@ export const useProductConfigStore = defineStore('productConfig', {
             }
             else {
                 skus.push({
-                    id: uuid.v4(),
+                    id: uuid(),
                     price: this.productDefaultPrice,
                     skuKey: generateSku(this.productName, undefined),
                     variant: [],

package/lib/src/clients/media-client.js

@@ -20,7 +20,7 @@
  * @typedef {MakerSettings} MediaClientOptions
  */
 import Axios from 'axios';
-import * as uuid from 'uuid';
+import { v4 as uuidV4 } from 'uuid';
 import { getUserMediaTokensFromLocalStorage, addUserMediaTokenToLocalStorage, removeUserMediaTokenFromLocalStorage, } from '../utils/localStorageUtils';
 export default class MediaClient {
     findPaginatedAdminMediaEndpoint = (skip, take, videoOnly) => `${this.options.mediaBaseUrl}/maker/media/GetPaginatedAdminMedia?skip=${skip}&take=${take}&videoOnly=${videoOnly}`;
@@ -54,7 +54,7 @@ export default class MediaClient {
      * @returns {string}
      */
     generateMediaToken = () => {
-        return uuid.v4();
+        return uuidV4();
     };
     /**
      * @param {string} keyPrefix

package/lib/src/clients/user-media-client.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { getExtensionFromMimeType } from '../brand-page-maker/utils/file-extension.util';
-import * as uuid from 'uuid';
+import { v4 as uuidV4 } from 'uuid';
 const NEW_POLICY_KEY = 'policyForAssetConvertorTrigger';
 const OLD_POLICY_KEY = 'policyForOldUpload';
 export class UserMediaClient {
@@ -85,7 +85,7 @@ export class UserMediaClient {
         if (!policy) {
             return;
         }
-        const mediaToken = uuid.v4();
+        const mediaToken = uuidV4();
         file.mediaToken = mediaToken;
         let key = `${policy.keyPrefix}${file.mediaToken}`;
         if (useOldPolicy) {

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -2020,9 +2020,6 @@ a.maker-anchor {
 .tw-rounded-sm {
     border-radius: 0.125rem
 }
-.tw-rounded-xl {
-    border-radius: 0.75rem
-}
 .\!tw-rounded-l-none {
     border-top-left-radius: 0px !important;
     border-bottom-left-radius: 0px !important
@@ -3156,6 +3153,10 @@ a.maker-anchor {
         --tw-bg-opacity: 1;
         background-color: rgb(0 121 172 / var(--tw-bg-opacity))
     }
+    .hover\:tw-bg-primary-100:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgb(252 209 217 / var(--tw-bg-opacity))
+    }
     .hover\:tw-bg-primary-400:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(245 73 101 / var(--tw-bg-opacity))
@@ -4259,13 +4260,13 @@ a.maker-anchor {
 }
 
 @media (max-width: 640px) {
-[data-v-49ca1551] .publish-bp--modal {
+[data-v-59d8988e] .publish-bp--modal {
     max-height: 90vh;
     width: 90vw;
 }
 }
 @media (min-width: 640px) {
-[data-v-49ca1551] .publish-bp--modal {
+[data-v-59d8988e] .publish-bp--modal {
     max-height: 80vh;
     width: 90vw;
 }
@@ -8123,11 +8124,11 @@ body {
   min-width: 33.333333%
 }
 
-.rich-text-editor[data-v-05bedd47]:focus-within {
+.rich-text-editor[data-v-48e6fdd4]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-05bedd47] {
+.style-editor[data-v-48e6fdd4] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8138,7 +8139,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-05bedd47] button:not(.c-button-style) {
+.style-editor[data-v-48e6fdd4] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8148,16 +8149,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-05bedd47] {
+.style-editor-button[data-v-48e6fdd4] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-05bedd47] {
+.toolbar-editor-button.active[data-v-48e6fdd4] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-05bedd47] {
+.toolbar-editor-button[data-v-48e6fdd4] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -8175,7 +8176,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-05bedd47] .ProseMirror {
+[data-v-48e6fdd4] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -8188,10 +8189,10 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-[data-v-05bedd47] .ProseMirror:focus {
+[data-v-48e6fdd4] .ProseMirror:focus {
   outline: none;
 }
-[data-v-05bedd47] .ProseMirror * {
+[data-v-48e6fdd4] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -8200,17 +8201,17 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-.error-message[data-v-05bedd47] {
+.error-message[data-v-48e6fdd4] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.spacing-popup-container[data-v-05bedd47] {
+.spacing-popup-container[data-v-48e6fdd4] {
   position: absolute;
   z-index: 9999;
   right: 8%;
 }
-.spacing-popup-panel[data-v-05bedd47] {
+.spacing-popup-panel[data-v-48e6fdd4] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -8218,17 +8219,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.spacing-popup-panel[data-v-05bedd47] input {
+.spacing-popup-panel[data-v-48e6fdd4] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-05bedd47] {
+.border[data-v-48e6fdd4] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-05bedd47] .text-dropdown-title {
+[data-v-48e6fdd4] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -8237,7 +8238,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-05bedd47] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-48e6fdd4] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -8246,53 +8247,53 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-05bedd47],
-  .style-editor-button-textstyle[data-v-05bedd47] {
+.style-editor-button-font[data-v-48e6fdd4],
+  .style-editor-button-textstyle[data-v-48e6fdd4] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-05bedd47] {
+.style-editor-button.stepper[data-v-48e6fdd4] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-05bedd47] {
+.style-editor-button-stepper[data-v-48e6fdd4] {
     max-width: 100%;
 }
-.border.desktop[data-v-05bedd47] {
+.border.desktop[data-v-48e6fdd4] {
     display: none;
 }
-.border.mobile[data-v-05bedd47] {
+.border.mobile[data-v-48e6fdd4] {
     display: block;
 }
-[data-v-05bedd47] .left-align {
+[data-v-48e6fdd4] .left-align {
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-05bedd47] {
+.style-editor-button.stepper[data-v-48e6fdd4] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-05bedd47] {
+.style-editor-button-font[data-v-48e6fdd4] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-05bedd47] {
+.style-editor-button-stepper[data-v-48e6fdd4] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-05bedd47] {
+.style-editor-button-textstyle[data-v-48e6fdd4] {
     max-width: 25%;
 }
-.border.desktop[data-v-05bedd47] {
+.border.desktop[data-v-48e6fdd4] {
     display: block;
 }
-.border.mobile[data-v-05bedd47] {
+.border.mobile[data-v-48e6fdd4] {
     display: none;
 }
-[data-v-05bedd47] .left-align {
+[data-v-48e6fdd4] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-05bedd47]:hover {
+.drop-down-item[data-v-48e6fdd4]:hover {
   background-color: #eee;
 }