@designcrowd/library.brand-page 5.12.14 → 5.12.15

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -58,9 +58,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -113,9 +113,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -488,9 +488,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -543,9 +543,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -901,9 +901,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -956,9 +956,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -59,9 +59,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -115,9 +115,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -59,9 +59,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -115,9 +115,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -499,9 +499,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],
@@ -555,9 +555,9 @@ BrandPageModel {
         "height": 0,
         "imageLink": "",
         "imageTitle": "",
-        "imageUrl": "twitter",
+        "imageUrl": "x",
         "mediaType": "image",
-        "url": "https://www.twitter.com",
+        "url": "https://www.x.com",
         "width": 0,
       },
     ],

package/src/brand-page/utils/button.util.ts

@@ -0,0 +1,39 @@
+import type { ButtonStyles } from '../models';
+import { isHexColor } from '../../utils/helpers';
+import { setRgbAlpha } from './color.util';
+import {
+  ButtonSoftBoxShadowSize,
+  ButtonBoxShadowSize,
+  BoxShadowSpread,
+} from '../constants';
+
+/**
+ * Calculates the box shadow value for button styles based on the button style configuration
+ * @param buttonStyles - The button styles configuration
+ * @returns The calculated box shadow CSS value
+ */
+export const getBoxShadowValue = (buttonStyles: ButtonStyles): string => {
+  let boxShadowValue = '';
+
+  if (buttonStyles.style.boxShadow) {
+    if (isHexColor(buttonStyles.style.boxShadow)) {
+      if (
+        buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_16' ||
+        buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_17' ||
+        buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_18'
+      ) {
+        const rgba = setRgbAlpha(buttonStyles.style.boxShadow, BoxShadowSpread);
+
+        boxShadowValue = `${ButtonSoftBoxShadowSize} ${rgba}`;
+      } else {
+        const rgba = setRgbAlpha(buttonStyles.style.boxShadow, BoxShadowSpread);
+
+        boxShadowValue = `${ButtonBoxShadowSize} ${rgba}`;
+      }
+    } else {
+      boxShadowValue = buttonStyles.style.boxShadow;
+    }
+  }
+
+  return boxShadowValue;
+};

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

@@ -110,7 +110,7 @@ export const forEachPageCallContentCallback = (
       case 'linkedin':
       case 'tiktok':
       case 'twitch':
-      case 'twitter':
+      case 'x':
       case 'pinterest':
       case 'youtube':
         callbacks.buttonContentCallback(content as ButtonContent);

package/src/brand-page/utils/model.util.ts

@@ -73,7 +73,7 @@ export const isButtonContent = (
     content?.type === 'website' ||
     content?.type === 'email' ||
     content?.type === 'phone' ||
-    content?.type === 'twitter' ||
+    content?.type === 'x' ||
     content?.type === 'instagram' ||
     content?.type === 'youtube' ||
     content?.type === 'linkedin' ||

package/src/brand-page/utils/style.util.ts

@@ -372,7 +372,13 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   'Replacements',
 ];
 
-const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section', 'booking-section'];
+const RTE_ALLOWED_SECTION_TYPES = [
+  'text',
+  'banner-section',
+  'booking-section',
+  'images-section',
+  'shapes-section',
+];
 const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 
 export const applyLogoThemeToContents = (

package/src/brand-page/utils/view-model.util.ts

@@ -106,6 +106,7 @@ 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';
 
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
@@ -381,33 +382,7 @@ const mapToButtonViewModel = (
   styles: PageStyles,
   options: { titleStyle: TextStyleDeclaration },
 ): ButtonViewModel => {
-  let boxShadowValue = '';
-
-  if (styles.buttonStyles.style.boxShadow) {
-    if (isHexColor(styles.buttonStyles.style.boxShadow)) {
-      if (
-        styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_16' ||
-        styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_17' ||
-        styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_18'
-      ) {
-        const rgba = setRgbAlpha(
-          styles.buttonStyles.style.boxShadow,
-          BoxShadowSpread,
-        );
-
-        boxShadowValue = `${ButtonSoftBoxShadowSize} ${rgba}`;
-      } else {
-        const rgba = setRgbAlpha(
-          styles.buttonStyles.style.boxShadow,
-          BoxShadowSpread,
-        );
-
-        boxShadowValue = `${ButtonBoxShadowSize} ${rgba}`;
-      }
-    } else {
-      boxShadowValue = styles.buttonStyles.style.boxShadow;
-    }
-  }
+  const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
 
   const buttonStyles: ButtonStyles = {
     iconStyle: styles.buttonStyles.iconStyle,
@@ -549,9 +524,14 @@ const mapToMailingListViewModel = (
   content: MailingListContent,
   styles: PageStyles,
 ): MailingListViewModel => {
+  const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
+
   const buttonStyles: ButtonStyles = {
     iconStyle: styles.buttonStyles.iconStyle,
-    style: styles.buttonStyles.style,
+    style: {
+      ...styles.buttonStyles.style,
+      boxShadow: boxShadowValue,
+    },
     selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
   };
 
@@ -636,12 +616,23 @@ const mapToContactFormViewModel = (
   styles: PageStyles,
   brandPageType: BrandPageType,
 ): ContactFormViewModel => {
+  const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
+
+  const buttonStyles: ButtonStyles = {
+    iconStyle: styles.buttonStyles.iconStyle,
+    style: {
+      ...styles.buttonStyles.style,
+      boxShadow: boxShadowValue,
+    },
+    selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
+  };
+
   return applyViewModelTextStyles(
     {
       ...content,
       role: content.type,
       type: 'contact-form',
-      buttonStyles: styles.buttonStyles,
+      buttonStyles: buttonStyles,
       buttonTextStyle: {
         ...content.buttonTextStyle,
       },
@@ -1129,7 +1120,7 @@ export const mapToViewModel =
       case 'website':
       case 'phone':
       case 'facebook':
-      case 'twitter':
+      case 'x':
       case 'instagram':
       case 'youtube':
       case 'linkedin':

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -1215,6 +1215,7 @@ export const BRAND_PAGE_PERSONALISED: BrandPageData = {
         {
           id: uuid(),
           title: 'Shapes',
+          description: '',
           type: 'shapes-section',
           displayStyle: 'centered',
           items: [
@@ -1237,6 +1238,7 @@ export const BRAND_PAGE_PERSONALISED: BrandPageData = {
           cardStyle: {},
           size: '4rem',
           titleStyle: {},
+          descriptionStyle: {},
           paragraphStyle: {},
           headingStyle: {},
           personalisationRole: 'media',

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.ts

@@ -7,7 +7,7 @@ import type {
   EmailContent,
   PhoneContent,
   FacebookContent,
-  TwitterContent,
+  XContent,
   InstagramContent,
   YoutubeContent,
   LinkedInContent,
@@ -135,12 +135,12 @@ export const facebookLink: FacebookContent = {
   },
 };
 
-export const twitterLink: TwitterContent = {
+export const twitterLink: XContent = {
   id: faker.string.uuid(),
-  iconUrl: 'twitter',
-  title: 'Twitter',
-  url: 'https://www.twitter.com',
-  type: 'twitter',
+  iconUrl: 'x',
+  title: 'X',
+  url: 'https://www.x.com',
+  type: 'x',
   colorReplacements: [],
   titleStyle: {
     textAlign: DEFAULT_TEXT_ALIGN,

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

@@ -285,6 +285,8 @@ export default defineComponent({
       if (
         (item.type === 'banner-section' ||
           item.type === 'booking-section' ||
+          item.type === 'images-section' ||
+          item.type === 'shapes-section' ||
           item.type === 'text') &&
         this.canUseRichTextEditor
       ) {

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

@@ -12,7 +12,7 @@ import type {
   TextContent,
   TiktokContent,
   TwitchContent,
-  TwitterContent,
+  XContent,
   VideoContent,
   WebsiteContent,
   YoutubeContent,
@@ -613,6 +613,8 @@ const textImageReplaceImageSettings =
           width: value.width!,
           imageLink: '',
           itemsId: -1,
+          colorReplacements: [],
+          mediaType: MEDIA_TYPES.image,
         });
 
         return;
@@ -1319,14 +1321,14 @@ export const FACEBOOK_CONTENT_SETTINGS_CONFIG =
     isLocked: false,
   });
 
-export const TWITTER_CONTENT_SETTINGS_CONFIG =
-  (): ContentSettingsConfig<TwitterContent> => ({
-    type: 'twitter',
+export const X_CONTENT_SETTINGS_CONFIG =
+  (): ContentSettingsConfig<XContent> => ({
+    type: 'x',
     brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
     category: 'social-links',
     displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
     createInitialContent: (options?: CreateInitialContentOptions) =>
-      createInitialButtonContent('twitter', 'twitter', options)(),
+      createInitialButtonContent('x', 'x', options)(),
     displayName: contentSettingsTr(`twitterDisplayName`),
     defaultIconName: 'maker-twitter',
     fieldGroups: SETTINGS_STYLE_FIElD_GROUPS(),
@@ -1357,7 +1359,7 @@ export const TWITTER_CONTENT_SETTINGS_CONFIG =
       url: {
         type: 'url',
         role: 'url',
-        placeholder: 'https://twitter.com',
+        placeholder: 'https://x.com',
         title: contentSettingsTr(`urlTitle`),
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
       },
@@ -2351,6 +2353,19 @@ export const TEXT_MEDIA_TITLE_FIELD = ():
   maxLength: 200,
 });
 
+export const TEXT_MEDIA_DESCRIPTION_FIELD = ():
+  | ContentSettingsField<ImagesSectionContent | ShapesSectionContent>
+  | ContentSettingsMultiField<
+      ImagesSectionContent | ShapesSectionContent,
+      string
+    > => ({
+  type: 'textarea',
+  placeholder: contentSettingsTr(`descriptionPlaceholder`),
+  title: contentSettingsTr(`descriptionTitle`),
+  groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+  maxLength: 1000,
+});
+
 export const TEXT_MEDIA_BACKGROUND_FIELD = ():
   | ContentSettingsField<ImagesSectionContent | ShapesSectionContent>
   | ContentSettingsMultiField<
@@ -2379,6 +2394,18 @@ export const TEXT_MEDIA_TITLE_STYLE_FIELD = ():
   title: contentSettingsTr(`fontSettingsTitle`),
 });
 
+export const TEXT_MEDIA_DESCRIPTION_STYLE_FIELD = ():
+  | ContentSettingsField<ImagesSectionContent | ShapesSectionContent>
+  | ContentSettingsMultiField<
+      ImagesSectionContent | ShapesSectionContent,
+      BrandPageCssStyle
+    > => ({
+  type: 'text-style',
+  defaultValue: {},
+  groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+  label: contentSettingsTr(`descriptionStyleLabel`),
+});
+
 export const TEXT_MEDIA_HEADING_STYLE_FIELD = ():
   | ContentSettingsField<ImagesSectionContent | ShapesSectionContent>
   | ContentSettingsMultiField<
@@ -2549,6 +2576,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
       },
       title: TEXT_MEDIA_TITLE_FIELD(),
+      description: TEXT_MEDIA_DESCRIPTION_FIELD(),
       titleOverride: {
         type: 'personalisation-override',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
@@ -2556,6 +2584,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
           personalisationOverrideVisibility(c, b, 'title'),
       },
       titleStyle: TEXT_MEDIA_TITLE_STYLE_FIELD(),
+      descriptionStyle: TEXT_MEDIA_DESCRIPTION_STYLE_FIELD(),
       headingStyle: TEXT_MEDIA_HEADING_STYLE_FIELD(),
       paragraphStyle: TEXT_MEDIA_PARAGRAPH_STYLE_FIELD(),
       cardStyle: {
@@ -2833,6 +2862,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
       size: IMAGE_SIZE_FIELD(),
       title: TEXT_MEDIA_TITLE_FIELD(),
+      description: TEXT_MEDIA_DESCRIPTION_FIELD(),
       titleOverride: {
         type: 'personalisation-override',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
@@ -2852,6 +2882,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
       },
       backgroundStyle: TEXT_MEDIA_BACKGROUND_FIELD(),
       titleStyle: TEXT_MEDIA_TITLE_STYLE_FIELD(),
+      descriptionStyle: TEXT_MEDIA_DESCRIPTION_STYLE_FIELD(),
       headingStyle: TEXT_MEDIA_HEADING_STYLE_FIELD(),
       paragraphStyle: TEXT_MEDIA_PARAGRAPH_STYLE_FIELD(),
       items: {
@@ -3141,7 +3172,7 @@ export const CONTENT_SETTINGS_CONFIGS = (): Record<
   map: MAP_CONTENT_SETTINGS_CONFIG(),
   'mailing-list': MAILING_LIST_CONTENT_SETTINGS_CONFIG(),
   facebook: FACEBOOK_CONTENT_SETTINGS_CONFIG(),
-  twitter: TWITTER_CONTENT_SETTINGS_CONFIG(),
+  x: X_CONTENT_SETTINGS_CONFIG(),
   instagram: INSTAGRAM_CONTENT_SETTINGS_CONFIG(),
   youtube: YOUTUBE_CONTENT_SETTINGS_CONFIG(),
   linkedin: LINKEDIN_CONTENT_SETTINGS_CONFIG(),

package/src/brand-page-maker/constants/personalisation.constant.ts

@@ -65,7 +65,7 @@ export const PERSONALISATION_MAPPINGS: Partial<
   pinterest: BUTTON_PERSONALISATION_MAPPING,
   tiktok: BUTTON_PERSONALISATION_MAPPING,
   twitch: BUTTON_PERSONALISATION_MAPPING,
-  twitter: BUTTON_PERSONALISATION_MAPPING,
+  x: BUTTON_PERSONALISATION_MAPPING,
   youtube: BUTTON_PERSONALISATION_MAPPING,
   email: BUTTON_PERSONALISATION_MAPPING,
   phone: BUTTON_PERSONALISATION_MAPPING,

package/src/brand-page-maker/models/content-settings.ts

@@ -555,6 +555,7 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`imagesTitle`),
+    description: '',
     type: 'images-section',
     displayStyle: 'centered',
     aspectRatio: 'Default',
@@ -577,14 +578,22 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.titles,
+      textAlign: 'center',
+    },
+    descriptionStyle: {
+      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textAlign: 'center',
     },
     headingStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
+      textAlign: 'center',
     },
     paragraphStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textAlign: 'center',
     },
   };
 };
@@ -730,8 +739,8 @@ export const createInitialSocialLinksContent = (
         imageLink: '',
       },
       {
-        imageUrl: 'twitter',
-        url: 'https://www.twitter.com',
+        imageUrl: 'x',
+        url: 'https://www.x.com',
         imageTitle: '',
         width: 0,
         height: 0,
@@ -758,6 +767,7 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`shapesTitle`),
+    description: '',
     type: 'shapes-section',
     displayStyle: 'centered',
     items: [
@@ -781,14 +791,22 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.titles,
+      textAlign: 'center',
+    },
+    descriptionStyle: {
+      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textAlign: 'center',
     },
     headingStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
+      textAlign: 'center',
     },
     paragraphStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textAlign: 'center',
     },
   };
 };

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

@@ -10,13 +10,11 @@ import {
   type LogoTemplateAsset,
 } from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
 import type { CustomDomainConfigModel, CustomDomainModel } from '../../models';
 import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
-  type AbTest,
   type LogoContent,
 } from '../../../brand-page';
 import { isLogoContent } from '../../../brand-page/utils';

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

@@ -10,7 +10,7 @@ exports[`brand page maker store module > brand page maker module should returns
   "email",
   "phone",
   "facebook",
-  "twitter",
+  "x",
   "instagram",
   "youtube",
   "linkedin",