@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

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

@@ -21,6 +21,7 @@ import type {
   TestimonialSectionContent,
   TextContent,
   TextItem,
+  TextStyleDeclaration,
 } from '../../';
 import {
   DEFAULT_LETTER_SPACING,
@@ -70,6 +71,41 @@ import {
 } from '@brand-page/utils';
 import { createInitialLogoContent } from '@brand-page-maker/models';
 
+// ADR-0020 retired `color` from roles and slimmed RTE-paired style fields to `RteTextRole`.
+// This immutable migration manipulates those fields as full CSS style objects on legacy
+// metadata (correct for the data it runs on). Restore that shape locally so it keeps
+// compiling and behaves byte-identically — typing-only (see the migration immutability rules).
+type FullStyle = TextStyleDeclaration;
+
+type LegacyStyled<T> = Omit<
+  T,
+  | 'textStyle'
+  | 'titleStyle'
+  | 'descriptionStyle'
+  | 'nameStyle'
+  | 'paragraphStyle'
+  | 'positionStyle'
+  | 'testimonialStyle'
+  | 'headingStyle'
+  | 'successMessageStyle'
+  | 'itemTextStyle'
+  | 'buttonTextStyle'
+  | 'textItems'
+> & {
+  textStyle: FullStyle;
+  titleStyle: FullStyle;
+  descriptionStyle: FullStyle;
+  nameStyle: FullStyle;
+  paragraphStyle: FullStyle;
+  positionStyle: FullStyle;
+  testimonialStyle: FullStyle;
+  headingStyle: FullStyle;
+  successMessageStyle: FullStyle;
+  itemTextStyle: FullStyle;
+  buttonTextStyle: FullStyle;
+  textItems?: (Omit<TextItem, 'textStyle'> & { textStyle: FullStyle })[];
+};
+
 export const applyTextContentTextToTextItemsMigration = (
   brandPageModel: BrandPageModel,
 ): void => {
@@ -77,7 +113,7 @@ export const applyTextContentTextToTextItemsMigration = (
     return [...acc, ...(cur.contents.filter(isTextContent) as TextContent[])];
   }, [] as TextContent[]);
 
-  textContents.forEach((item) => {
+  (textContents as unknown as LegacyStyled<TextContent>[]).forEach((item) => {
     if (brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
       if (!item.textItems) {
         item.textItems = [];
@@ -160,38 +196,40 @@ export const migrateProfileContentToHaveTextStyles = (
     ];
   }, [] as ProfileContent[]);
 
-  profileContents.forEach((p) => {
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-    p.nameStyle = {
-      ...p.nameStyle,
-      textAlign: p.nameStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.nameStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.nameStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_HEADINGS
-        : p.nameStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
-    };
-    p.descriptionStyle = {
-      ...p.descriptionStyle,
-      textAlign: p.descriptionStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.descriptionStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+  (profileContents as unknown as LegacyStyled<ProfileContent>[]).forEach(
+    (p) => {
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+      p.nameStyle = {
+        ...p.nameStyle,
+        textAlign: p.nameStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.nameStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.nameStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_HEADINGS
+          : p.nameStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
+      };
+      p.descriptionStyle = {
+        ...p.descriptionStyle,
+        textAlign: p.descriptionStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.descriptionStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateMailingListContentToHaveTextStyles = (
@@ -204,7 +242,9 @@ export const migrateMailingListContentToHaveTextStyles = (
     ];
   }, [] as MailingListContent[]);
 
-  mailingListContents.forEach((p) => {
+  (
+    mailingListContents as unknown as LegacyStyled<MailingListContent>[]
+  ).forEach((p) => {
     p.titleStyle = {
       ...p.titleStyle,
       textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
@@ -238,58 +278,60 @@ export const migrateSupportMeContentToHaveTextStyles = (
     ];
   }, [] as SupportMeContent[]);
 
-  supportMeContents.forEach((p) => {
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_HEADINGS
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
-    };
-    p.headingStyle = {
-      ...p.headingStyle,
-      textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.headingStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.headingStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.headingStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-    p.descriptionStyle = {
-      ...p.descriptionStyle,
-      textAlign: p.descriptionStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.descriptionStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-    p.buttonTextStyle = {
-      ...p.buttonTextStyle,
-      textAlign: p.buttonTextStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.buttonTextStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.buttonTextStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.buttonTextStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-    p.itemTextStyle = {
-      ...p.itemTextStyle,
-      textAlign: p.itemTextStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.itemTextStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.itemTextStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.itemTextStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+  (supportMeContents as unknown as LegacyStyled<SupportMeContent>[]).forEach(
+    (p) => {
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_HEADINGS
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
+      };
+      p.headingStyle = {
+        ...p.headingStyle,
+        textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.headingStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.headingStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.headingStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+      p.descriptionStyle = {
+        ...p.descriptionStyle,
+        textAlign: p.descriptionStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.descriptionStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+      p.buttonTextStyle = {
+        ...p.buttonTextStyle,
+        textAlign: p.buttonTextStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.buttonTextStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.buttonTextStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.buttonTextStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+      p.itemTextStyle = {
+        ...p.itemTextStyle,
+        textAlign: p.itemTextStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.itemTextStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.itemTextStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.itemTextStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateButtonContentToHaveTextStyles = (
@@ -302,18 +344,20 @@ export const migrateButtonContentToHaveTextStyles = (
     ];
   }, [] as ButtonWithModalContent[]);
 
-  buttonContents.forEach((p) => {
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+  (buttonContents as unknown as LegacyStyled<ButtonWithModalContent>[]).forEach(
+    (p) => {
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateBannerContentToHaveTextStyles = (
@@ -326,55 +370,57 @@ export const migrateBannerContentToHaveTextStyles = (
     ];
   }, [] as BannerSectionContent[]);
 
-  bannerContents.forEach((p) => {
-    let textAlign = 'left';
+  (bannerContents as unknown as LegacyStyled<BannerSectionContent>[]).forEach(
+    (p) => {
+      let textAlign = 'left';
 
-    if (
-      p.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
-      p.displayStyle === BIG_IMAGE ||
-      p.displayStyle === ALIGN_CENTERED
-    ) {
-      textAlign = DEFAULT_TEXT_ALIGN;
-    }
+      if (
+        p.displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+        p.displayStyle === BIG_IMAGE ||
+        p.displayStyle === ALIGN_CENTERED
+      ) {
+        textAlign = DEFAULT_TEXT_ALIGN;
+      }
 
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || textAlign,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_TITLE
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
-    };
-    p.descriptionStyle = {
-      ...p.descriptionStyle,
-      textAlign:
-        p.descriptionStyle && p.descriptionStyle.textAlign
-          ? p.descriptionStyle.textAlign
-          : p.titleStyle?.textAlign,
-      fontFamily:
-        p.descriptionStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || textAlign,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_TITLE
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
+      };
+      p.descriptionStyle = {
+        ...p.descriptionStyle,
+        textAlign:
+          p.descriptionStyle && p.descriptionStyle.textAlign
+            ? p.descriptionStyle.textAlign
+            : p.titleStyle?.textAlign,
+        fontFamily:
+          p.descriptionStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.descriptionStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
 
-    p.buttonTextStyle = {
-      ...p.buttonTextStyle,
-      textAlign:
-        p.buttonTextStyle && p.buttonTextStyle.textAlign
-          ? p.buttonTextStyle.textAlign
-          : p.titleStyle?.textAlign,
-      fontFamily:
-        p.buttonTextStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.buttonTextStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.buttonTextStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+      p.buttonTextStyle = {
+        ...p.buttonTextStyle,
+        textAlign:
+          p.buttonTextStyle && p.buttonTextStyle.textAlign
+            ? p.buttonTextStyle.textAlign
+            : p.titleStyle?.textAlign,
+        fontFamily:
+          p.buttonTextStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.buttonTextStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.buttonTextStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateBannerContentToRawImageUrl = (
@@ -426,34 +472,36 @@ export const migrateAboutContentToHaveTextStyles = (
     ];
   }, [] as AboutSectionContent[]);
 
-  aboutContents.forEach((p) => {
-    let textAlign = 'left';
+  (aboutContents as unknown as LegacyStyled<AboutSectionContent>[]).forEach(
+    (p) => {
+      let textAlign = 'left';
 
-    if (p.displayStyle === ALIGN_CENTERED) {
-      textAlign = DEFAULT_TEXT_ALIGN;
-    }
+      if (p.displayStyle === ALIGN_CENTERED) {
+        textAlign = DEFAULT_TEXT_ALIGN;
+      }
 
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || textAlign,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_TITLE
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
-    };
-    p.paragraphStyle = {
-      ...p.paragraphStyle,
-      textAlign: p.paragraphStyle?.textAlign || textAlign,
-      fontFamily:
-        p.paragraphStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || textAlign,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_TITLE
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
+      };
+      p.paragraphStyle = {
+        ...p.paragraphStyle,
+        textAlign: p.paragraphStyle?.textAlign || textAlign,
+        fontFamily:
+          p.paragraphStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateTestimonialContentToHaveTextStyles = (
@@ -468,7 +516,9 @@ export const migrateTestimonialContentToHaveTextStyles = (
     ];
   }, [] as TestimonialSectionContent[]);
 
-  testimonialContents.forEach((p) => {
+  (
+    testimonialContents as unknown as LegacyStyled<TestimonialSectionContent>[]
+  ).forEach((p) => {
     let textAlign = DEFAULT_TEXT_ALIGN;
 
     if (p.displayStyle === BIG_IMAGE) {
@@ -528,38 +578,40 @@ export const migrateShapesContentToHaveTextStyles = (
     ];
   }, [] as ShapesSectionContent[]);
 
-  shapesContents.forEach((p) => {
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_TITLE
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
-    };
-    p.headingStyle = {
-      ...p.headingStyle,
-      textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.headingStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.headingStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_HEADINGS
-        : p.headingStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
-    };
-    p.paragraphStyle = {
-      ...p.paragraphStyle,
-      textAlign: p.paragraphStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.paragraphStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+  (shapesContents as unknown as LegacyStyled<ShapesSectionContent>[]).forEach(
+    (p) => {
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_TITLE
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
+      };
+      p.headingStyle = {
+        ...p.headingStyle,
+        textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.headingStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.headingStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_HEADINGS
+          : p.headingStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
+      };
+      p.paragraphStyle = {
+        ...p.paragraphStyle,
+        textAlign: p.paragraphStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.paragraphStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateImagesContentToHaveTextStyles = (
@@ -572,38 +624,40 @@ export const migrateImagesContentToHaveTextStyles = (
     ];
   }, [] as ImagesSectionContent[]);
 
-  imagesContents.forEach((p) => {
-    p.titleStyle = {
-      ...p.titleStyle,
-      textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.titleStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.titleStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_TITLE
-        : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
-    };
-    p.headingStyle = {
-      ...p.headingStyle,
-      textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.headingStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.headingStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_HEADINGS
-        : p.headingStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
-    };
-    p.paragraphStyle = {
-      ...p.paragraphStyle,
-      textAlign: p.paragraphStyle?.textAlign || DEFAULT_TEXT_ALIGN,
-      fontFamily:
-        p.paragraphStyle?.fontFamily ||
-        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
-      lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
-        ? LINE_HEIGHT_BODY
-        : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-  });
+  (imagesContents as unknown as LegacyStyled<ImagesSectionContent>[]).forEach(
+    (p) => {
+      p.titleStyle = {
+        ...p.titleStyle,
+        textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.titleStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.titleStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_TITLE
+          : p.titleStyle?.lineHeight || LINE_HEIGHT_TITLE,
+      };
+      p.headingStyle = {
+        ...p.headingStyle,
+        textAlign: p.headingStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.headingStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.headingStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_HEADINGS
+          : p.headingStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
+      };
+      p.paragraphStyle = {
+        ...p.paragraphStyle,
+        textAlign: p.paragraphStyle?.textAlign || DEFAULT_TEXT_ALIGN,
+        fontFamily:
+          p.paragraphStyle?.fontFamily ||
+          FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name,
+        lineHeight: p.paragraphStyle?.lineHeight?.includes('rem')
+          ? LINE_HEIGHT_BODY
+          : p.paragraphStyle?.lineHeight || LINE_HEIGHT_BODY,
+      };
+    },
+  );
 };
 
 export const migrateSocialLinksToHaveTextStyles = (
@@ -616,7 +670,9 @@ export const migrateSocialLinksToHaveTextStyles = (
     ];
   }, [] as SocialLinksContent[]);
 
-  socialLinksContents.forEach((p) => {
+  (
+    socialLinksContents as unknown as LegacyStyled<SocialLinksContent>[]
+  ).forEach((p) => {
     p.titleStyle = {
       ...p.titleStyle,
       textAlign: p.titleStyle?.textAlign || DEFAULT_TEXT_ALIGN,
@@ -670,7 +726,7 @@ export const migrateContactToNotOverwriteLayoutStyle = (
     ];
   }, [] as ContactFormContent[]);
 
-  contents.forEach((p) => {
+  (contents as unknown as LegacyStyled<ContactFormContent>[]).forEach((p) => {
     if (!p.layoutStyle) {
       p.layoutStyle = '';
     }

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

@@ -136,7 +136,14 @@ export const migration02 = async (
           handleConversion(textItem.textStyle);
         });
       } else if (isProfileContent(content)) {
-        const profileContent = content as ProfileContent;
+        const profileContent = content as unknown as Omit<
+          ProfileContent,
+          'nameStyle' | 'titleStyle' | 'descriptionStyle'
+        > & {
+          nameStyle: TextStyleDeclaration;
+          titleStyle: TextStyleDeclaration;
+          descriptionStyle: TextStyleDeclaration;
+        };
 
         profileContent.nameStyle.fontSize =
           profileContent.nameStyle.fontSize || FONT_SIZE_HEADINGS;