@designcrowd/library.brand-page 5.6.4-fluid-6 → 5.6.4-scroll-2

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -231,48 +231,8 @@ export const SampleBanner = (): any => {
   const brandPageMakerStore = useBrandPageMakerStore();
 
   const bannerContent = createInitialBannerSectionContent();
-  bannerContent.title = 'LAUNCHING SOON';
-  bannerContent.description = 'This Is Going To Be Epic';
-  bannerContent.buttonText = 'CONTACT US';
-  bannerContent.titleStyle.textStyleType = undefined;
-  bannerContent.titleStyle.fontSize = '6.25em';
-  bannerContent.titleStyle.fontFamily = 'Ubuntu';
-  bannerContent.titleStyle.lineHeight = '1';
-  bannerContent.titleStyle.textAlign = 'left';
-  bannerContent.displayStyle = 'left-aligned';
-
-  bannerContent.descriptionStyle.textStyleType = undefined;
-  bannerContent.descriptionStyle.fontFamily = 'Work Sans';
-  bannerContent.descriptionStyle.fontSize = '2.6875em';
-  bannerContent.descriptionStyle.textAlign = 'left';
-
-  bannerContent.buttonTextStyle.textStyleType = undefined;
-  bannerContent.buttonTextStyle.fontFamily = 'Ubuntu';
-  bannerContent.buttonTextStyle.fontSize = '1.5em';
-  bannerContent.buttonTextStyle.textAlign = 'left';
-
-  console.log('bannerContent', bannerContent);
-
-  const bannerContent2 = createInitialBannerSectionContent();
-  bannerContent2.title = 'LAUNCHING SOON';
-  bannerContent2.description = 'This Is Going To Be Epic2';
-  bannerContent2.buttonText = 'CONTACT US';
-  bannerContent2.titleStyle.textStyleType = undefined;
-  bannerContent2.titleStyle.fontSize = '6.25em';
-  bannerContent2.titleStyle.fontFamily = 'Ubuntu';
-  bannerContent2.titleStyle.lineHeight = '1';
-  bannerContent2.titleStyle.textAlign = 'left';
-  bannerContent2.displayStyle = 'left-aligned';
-
-  bannerContent2.descriptionStyle.textStyleType = undefined;
-  bannerContent2.descriptionStyle.fontFamily = 'Work Sans';
-  bannerContent2.descriptionStyle.fontSize = '2.6875em';
-  bannerContent2.descriptionStyle.textAlign = 'left';
-
-  bannerContent2.buttonTextStyle.textStyleType = undefined;
-  bannerContent2.buttonTextStyle.fontFamily = 'Ubuntu';
-  bannerContent2.buttonTextStyle.fontSize = '1.5em';
-  bannerContent2.buttonTextStyle.textAlign = 'left';
+  bannerContent.description = 'Lorem ipsum dolor sit amet';
+
   brandPageMakerStore.setViewport({
     viewport: VIEWPORTS.desktop,
   });
@@ -290,176 +250,7 @@ export const SampleBanner = (): any => {
               {
                 title: 'Home',
                 slug: 'home',
-                contents: [
-                  {
-                    id: 'acc69f79-8ecd-4c6e-9665-f0f7c06150ca',
-                    url: '',
-                    type: 'banner-section',
-                    title: "SPORT'S KICKOFF",
-                    imageUrl: '',
-                    pageSlug: '',
-                    cardStyle: {
-                      backgroundColor: 'rgb(255,255,255)',
-                    },
-                    buttonText: 'Buy Tickets',
-                    titleStyle: {
-                      color: '#ffffff',
-                      fontSize: '2.375em',
-                      textAlign: 'center',
-                      wordBreak: 'normal',
-                      fontFamily: 'Jost',
-                      fontWeight: 'bold',
-                      lineHeight: '1.0',
-                      overflowWrap: 'anywhere',
-                      letterSpacing: '0.132em',
-                      textDecoration: '',
-                    },
-                    description: 'SOCCER MATCH',
-                    displayStyle: 'centered',
-                    overlayColor: {
-                      backgroundColor: 'rgb(0,0,0)',
-                    },
-                    buttonLinkType: 'url',
-                    overlayOpacity: 50,
-                    backgroundStyle: {
-                      backgroundColor: '',
-                    },
-                    buttonTextStyle: {
-                      color: '#fffbf4',
-                      fontSize: '1.25em',
-                      textAlign: 'center',
-                      wordBreak: 'normal',
-                      fontFamily: 'Jost',
-                      fontWeight: 'bold',
-                      lineHeight: '1.3',
-                      overflowWrap: 'anywhere',
-                      letterSpacing: '0',
-                      textDecoration: '',
-                    },
-                    descriptionStyle: {
-                      color: '#ffffff',
-                      fontSize: '5.625em',
-                      textAlign: 'center',
-                      wordBreak: 'normal',
-                      fontFamily: 'Alfa Slab One',
-                      fontWeight: 'normal',
-                      lineHeight: '1.0',
-                      overflowWrap: 'anywhere',
-                      letterSpacing: '0.011em',
-                      textDecoration: '',
-                    },
-                    colorReplacements: [],
-                  },
-                  {
-                    id: 'dfeafaf4-b5ab-435e-a902-adfa74d7c63b',
-                    text: '',
-                    type: 'text',
-                    iconUrl: '',
-                    textSize: {
-                      fontSize: '1em',
-                      lineHeight: '1.5',
-                    },
-                    textColor: {},
-                    textItems: [
-                      {
-                        text: 'UPCOMING GAMES',
-                        textStyle: {
-                          color: '#d6ad7a',
-                          fontSize: '3.4375em',
-                          textAlign: 'center',
-                          fontFamily: 'Alfa Slab One',
-                          lineHeight: '1.4',
-                          letterSpacing: '0.018em',
-                        },
-                      },
-                    ],
-                    textStyle: {
-                      textAlign: 'center',
-                      textStyleType: 'paragraphs',
-                    },
-                    columnStyle: '1',
-                    textAlignment: {},
-                    backgroundColor: {
-                      backgroundColor: '#fffbf4',
-                    },
-                  },
-                  {
-                    id: '943e80c0-3d77-4aed-84a0-ed51d351661a',
-                    text: '',
-                    type: 'text',
-                    iconUrl: '',
-                    textSize: {
-                      fontSize: '1em',
-                      lineHeight: '1.5',
-                    },
-                    textColor: {},
-                    textItems: [
-                      {
-                        text: 'THURSDAY',
-                        textStyle: {
-                          color: '#d6ad7a',
-                          fontSize: '1.875em',
-                          textAlign: 'center',
-                          fontFamily: 'Pridi',
-                          fontWeight: 'bold',
-                          lineHeight: '1.3',
-                          letterSpacing: '0.033em',
-                          textDecoration: '',
-                        },
-                      },
-                      {
-                        text: 'FRIDAY',
-                        textStyle: {
-                          color: '#d6ad7a',
-                          fontSize: '1.875em',
-                          textAlign: 'center',
-                          fontFamily: 'Pridi',
-                          fontWeight: 'bold',
-                          lineHeight: '1.3',
-                          letterSpacing: '0.033em',
-                          textDecoration: '',
-                        },
-                      },
-                      {
-                        text: 'SATURDAY',
-                        textStyle: {
-                          color: '#d6ad7a',
-                          fontSize: '1.875em',
-                          textAlign: 'center',
-                          fontFamily: 'Pridi',
-                          fontWeight: 'bold',
-                          lineHeight: '1.3',
-                          letterSpacing: '0.033em',
-                          textDecoration: '',
-                        },
-                      },
-                      {
-                        text: 'SUNDAY',
-                        textStyle: {
-                          color: '#d6ad7a',
-                          fontSize: '1.875em',
-                          textAlign: 'center',
-                          fontFamily: 'Pridi',
-                          fontWeight: 'bold',
-                          lineHeight: '1.3',
-                          letterSpacing: '0.033em',
-                          textDecoration: '',
-                        },
-                      },
-                    ],
-                    textStyle: {
-                      textAlign: 'center',
-                      textStyleType: 'paragraphs',
-                    },
-                    columnStyle: '4',
-                    textAlignment: {},
-                    backgroundColor: {
-                      backgroundColor: '#fffbf4',
-                    },
-                  },
-                  bannerContent,
-                  bannerContent2,
-                ],
+                contents: [bannerContent],
               },
             ],
             brandPageType: BRAND_PAGE_TYPES.brandSite,
@@ -999,6 +790,7 @@ SamplePremiumUser.story = {
 };
 
 export const SamplePremiumBContactUser = (): any => {
+
   return {
     components: {
       BrandPageMaker,
@@ -1165,7 +957,7 @@ export const SamplePrePurchase = (): any => {
     setup() {
       const containerStore = useBrandPageContainerStore();
       const logoStore = useLogoStore();
-
+      
       logoStore.$patch({
         logoTemplateAsset: {
           token: logoTemplateToken,

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

@@ -106,13 +106,7 @@ export default defineComponent({
       };
     },
   },
-  mounted() {
-    this.dispatchViewPortChangeEvent();
-  },
   watch: {
-    viewport() {
-      this.dispatchViewPortChangeEvent();
-    },
     selectedItemId(itemId: string) {
       this.scrollToContentItemByItemId(itemId);
     },
@@ -140,13 +134,6 @@ export default defineComponent({
     },
   },
   methods: {
-    dispatchViewPortChangeEvent() {
-      window.dispatchEvent(
-        new CustomEvent('editor:viewport', {
-          detail: { viewport: this.viewport },
-        }),
-      );
-    },
     onDraggingStart(): void {
       this.isDraggingContent = true;
 

package/src/brand-page-maker/components/shop/ProductConfigModal.vue

@@ -30,7 +30,7 @@
         <AddOrEditProductContainer v-if="!isImageUpload" />
         <ImageUpload v-else />
       </template>
-      <template #footer v-if="!isImageUpload">
+      <template v-if="!isImageUpload" #footer>
         <div
           class="tw-flex tw-justify-center tw-pt-4 tw-border-t tw-border-solid tw-border-grayscale-500"
         >

package/src/brand-page-maker/convertors/text-size-value.convertor.ts

@@ -1,6 +1,6 @@
 import type { ValueConvertor } from '../models';
 import { DEFAULT_FONT_SIZE } from '../../brand-page/constants/';
-import { pxToEm, emToPx } from '../utils/text.util';
+import { pxToRem, remToPx } from '../utils/text.util';
 
 export const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string> =
   {
@@ -8,13 +8,13 @@ export const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string> =
 
     convert(value: BrandPageCssStyle): string {
       return (
-        value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE
+        value.fontSize ? remToPx(value.fontSize) : DEFAULT_FONT_SIZE
       ).toString();
     },
 
     convertBack(valuePx: string): BrandPageCssStyle {
       return {
-        fontSize: pxToEm(valuePx),
+        fontSize: pxToRem(valuePx),
       };
     },
   };

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -472,22 +472,13 @@ describe('brand page maker store module', () => {
     // Assert
     expect(
       styleSettingsStore.textStyles.textStyleOptions.titles.style.fontSize,
-    ).toBe(
-      textStyles.textStyleOptions.titles.style.fontSize?.replace('rem', 'em'),
-    );
+    ).toBe(textStyles.textStyleOptions.titles.style.fontSize);
     expect(
       styleSettingsStore.textStyles.textStyleOptions.headings.style.fontSize,
-    ).toBe(
-      textStyles.textStyleOptions.headings.style.fontSize?.replace('rem', 'em'),
-    );
+    ).toBe(textStyles.textStyleOptions.headings.style.fontSize);
     expect(
       styleSettingsStore.textStyles.textStyleOptions.paragraphs.style.fontSize,
-    ).toBe(
-      textStyles.textStyleOptions.paragraphs.style.fontSize?.replace(
-        'rem',
-        'em',
-      ),
-    );
+    ).toBe(textStyles.textStyleOptions.paragraphs.style.fontSize);
   });
 
   test('applySelectedTemplate should not set design template token when applying selected template and is admin', async () => {

package/src/brand-page-maker/utils/text.util.ts

@@ -1,10 +1,10 @@
-export const pxToEm = (px: string) => {
+export const pxToRem = (px: string) => {
   const value = parseFloat(px) / 16;
 
-  return `${value}em`;
+  return `${value}rem`;
 };
 
-export const emToPx = (rem: string) => {
+export const remToPx = (rem: string) => {
   const value = parseFloat(rem) * 16;
 
   return `${value}`;

package/lib/src/brand-page/utils/migration/migration-03.d.ts

@@ -1,5 +0,0 @@
-import { type BrandPageModel, type LogoImageModel } from '../..';
-export declare const migration03: (brandPageModel: BrandPageModel, options: {
-    logoImage?: LogoImageModel;
-    isUserDraft: boolean;
-}) => BrandPageModel;

package/lib/src/brand-page/utils/migration/migration-03.js

@@ -1,35 +0,0 @@
-import {} from '../..';
-const handleRecursiveFontSizeMigration = (object) => {
-    if (!object) {
-        return;
-    }
-    if (object['fontSize']) {
-        // Handle conversion here
-        object['fontSize'] = object['fontSize'].replace('rem', 'em');
-    }
-    Object.keys(object).forEach((k) => {
-        if (typeof object[k] === 'object') {
-            if (Array.isArray(object[k])) {
-                object[k].forEach((o) => {
-                    handleRecursiveFontSizeMigration(o);
-                });
-            }
-            else {
-                handleRecursiveFontSizeMigration(object[k]);
-            }
-        }
-    });
-};
-export const migration03 = (brandPageModel, options) => {
-    handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
-    handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
-    handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);
-    handleRecursiveFontSizeMigration(brandPageModel.pageFooterMobile);
-    handleRecursiveFontSizeMigration(brandPageModel.styles);
-    brandPageModel.pages.forEach((page) => {
-        page.contents.forEach((content) => {
-            handleRecursiveFontSizeMigration(content);
-        });
-    });
-    return brandPageModel;
-};

package/src/brand-page/utils/migration/migration-03.ts

@@ -1,46 +0,0 @@
-import { type BrandPageModel, type LogoImageModel } from '../..';
-
-const handleRecursiveFontSizeMigration = (object: object) => {
-  if (!object) {
-    return;
-  }
-
-  if (object['fontSize']) {
-    // Handle conversion here
-    object['fontSize'] = object['fontSize'].replace('rem', 'em');
-  }
-
-  Object.keys(object).forEach((k) => {
-    if (typeof object[k] === 'object') {
-      if (Array.isArray(object[k])) {
-        object[k].forEach((o) => {
-          handleRecursiveFontSizeMigration(o);
-        });
-      } else {
-        handleRecursiveFontSizeMigration(object[k]);
-      }
-    }
-  });
-};
-
-export const migration03 = (
-  brandPageModel: BrandPageModel,
-  options: {
-    logoImage?: LogoImageModel;
-    isUserDraft: boolean;
-  },
-): BrandPageModel => {
-  handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
-  handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
-  handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);
-  handleRecursiveFontSizeMigration(brandPageModel.pageFooterMobile);
-  handleRecursiveFontSizeMigration(brandPageModel.styles);
-
-  brandPageModel.pages.forEach((page) => {
-    page.contents.forEach((content) => {
-      handleRecursiveFontSizeMigration(content);
-    });
-  });
-
-  return brandPageModel;
-};