@designcrowd/library.brand-page 5.14.8-flacky-nav-21 → 5.14.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/src/{CreatedOnBrandCrowd-de-de-C7UP0wnU.js → CreatedOnBrandCrowd-de-de-CiXGpUsj.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-en-us-Dn7kLByA.js → CreatedOnBrandCrowd-en-us-BjBeAHIJ.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-es-es-BniaWIta.js → CreatedOnBrandCrowd-es-es-COz-dVj5.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-fr-fr-L19SCOKe.js → CreatedOnBrandCrowd-fr-fr-DdRo8IoH.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-pt-pt-yF1hS_QN.js → CreatedOnBrandCrowd-pt-pt-YPxQ1gbj.js} +1 -1
- package/lib/src/{CreatedOnDcom-de-de-COoIYzR_.js → CreatedOnDcom-de-de-DeUP5Ur5.js} +1 -1
- package/lib/src/{CreatedOnDcom-en-us-DPxw4zug.js → CreatedOnDcom-en-us-BjaQwhMw.js} +1 -1
- package/lib/src/{CreatedOnDcom-es-es-B6sdWmmP.js → CreatedOnDcom-es-es-CYexVJc5.js} +1 -1
- package/lib/src/{CreatedOnDcom-fr-fr-C_P7GYue.js → CreatedOnDcom-fr-fr-BktbLTrT.js} +1 -1
- package/lib/src/{CreatedOnDcom-pt-pt-QAdIC2fu.js → CreatedOnDcom-pt-pt-HnEwifku.js} +1 -1
- package/lib/src/brand-page/constants/logo.constants.d.ts +0 -1
- package/lib/src/brand-page/constants/logo.constants.js +0 -2
- package/lib/src/brand-page/constants/styles.constants.d.ts +2 -2
- package/lib/src/brand-page/constants/styles.constants.js +2 -2
- package/lib/src/brand-page/utils/migration/migration-01.d.ts +2 -3
- package/lib/src/brand-page/utils/migration/migration-01.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-01_1.d.ts +3 -4
- package/lib/src/brand-page/utils/migration/migration-01_1.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-02.d.ts +3 -4
- package/lib/src/brand-page/utils/migration/migration-02.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-03.d.ts +3 -4
- package/lib/src/brand-page/utils/migration/migration-03.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-04.d.ts +3 -4
- package/lib/src/brand-page/utils/migration/migration-04.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-05.d.ts +2 -6
- package/lib/src/brand-page/utils/migration/migration-05.js +2 -3
- package/lib/src/brand-page/utils/migration/migration-05_1.d.ts +3 -3
- package/lib/src/brand-page/utils/migration/migration-05_1.js +3 -3
- package/lib/src/brand-page/utils/migration/migration-05_2.d.ts +3 -3
- package/lib/src/brand-page/utils/migration/migration-05_2.js +2 -3
- package/lib/src/brand-page/utils/migration.util.d.ts +1 -6
- package/lib/src/brand-page/utils/migration.util.js +6 -16
- package/lib/src/brand-page/utils/view-model.util.d.ts +4 -6
- package/lib/src/brand-page/utils/view-model.util.js +13 -14
- package/lib/src/brand-page/view-models.d.ts +0 -1
- package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.d.ts +0 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js +2 -48
- package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.d.ts +0 -1122
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js +0 -1058
- package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/google-analytics/GoogleAnalytics.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts +1 -1
- package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.d.ts +1 -2
- package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js +2 -3
- package/lib/src/css/library.brand-page-brandCrowd.min.css +6 -3
- package/lib/src/css/library.brand-page-brandPage.min.css +6 -3
- package/lib/src/css/library.brand-page-designCom.min.css +6 -3
- package/lib/src/css/library.brand-page-preview.min.css +6 -3
- package/lib/src/index.mjs +1 -1
- package/lib/src/{lib-BX6A4JdA.js → lib-BXmT_3as.js} +8015 -8149
- package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts +1 -1
- package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts +1 -1
- package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts +1 -1
- package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts +1 -1
- package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts +1 -1
- package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts +1 -1
- package/lib/src/shared/page-settings/store/page-settings-store.js +1 -1
- package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts +1 -1
- package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts +1 -1
- package/lib/src/shared/template-settings/store/template-settings-store.js +1 -2
- package/package.json +1 -1
- package/src/brand-page/components/logo/Logo.vue +1 -24
- package/src/brand-page/components/logo/LogoRender.vue +20 -56
- package/src/brand-page/constants/logo.constants.ts +0 -3
- package/src/brand-page/constants/styles.constants.ts +2 -2
- package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap +1112 -1121
- package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap +413 -416
- package/src/brand-page/utils/migration/logo/migration.util.logo.test.ts +3 -3
- package/src/brand-page/utils/migration/migration-01.ts +4 -7
- package/src/brand-page/utils/migration/migration-01_1.ts +3 -6
- package/src/brand-page/utils/migration/migration-02.ts +4 -7
- package/src/brand-page/utils/migration/migration-03.ts +4 -7
- package/src/brand-page/utils/migration/migration-04.ts +4 -7
- package/src/brand-page/utils/migration/migration-05.ts +3 -16
- package/src/brand-page/utils/migration/migration-05_1.ts +4 -6
- package/src/brand-page/utils/migration/migration-05_2.ts +3 -6
- package/src/brand-page/utils/migration.util.test.ts +157 -274
- package/src/brand-page/utils/migration.util.ts +9 -26
- package/src/brand-page/utils/migration2.util.test.ts +2 -7
- package/src/brand-page/utils/view-model.util.ts +7 -26
- package/src/brand-page/view-models.ts +0 -1
- package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts +1 -52
- package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts +0 -1090
- package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts +1 -4
- package/src/shared/page-settings/store/page-settings-store.ts +0 -1
- package/src/shared/template-settings/store/template-settings-store.ts +1 -2
- package/lib/src/brand-page/utils/migration/migration-06.d.ts +0 -4
- package/lib/src/brand-page/utils/migration/migration-06.js +0 -60
- package/src/brand-page/utils/migration/migration-06.test.ts +0 -384
- package/src/brand-page/utils/migration/migration-06.ts +0 -108
|
@@ -118,7 +118,6 @@ export interface InitialisePayload {
|
|
|
118
118
|
businessName: string | undefined;
|
|
119
119
|
logoVariationImageUrls: string[];
|
|
120
120
|
shopConfigData: string | ShopConfigData;
|
|
121
|
-
isServerRenderOverride?: boolean;
|
|
122
121
|
}
|
|
123
122
|
|
|
124
123
|
export interface SetIsSavingPayload {
|
|
@@ -655,7 +654,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
|
|
|
655
654
|
businessName,
|
|
656
655
|
logoVariationImageUrls,
|
|
657
656
|
shopConfigData,
|
|
658
|
-
isServerRenderOverride = false,
|
|
659
657
|
}: InitialisePayload) {
|
|
660
658
|
const brandPageContainerStore = useBrandPageContainerStore();
|
|
661
659
|
const userStore = useBrandPageMakerUserStore();
|
|
@@ -706,10 +704,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
|
|
|
706
704
|
);
|
|
707
705
|
}
|
|
708
706
|
|
|
709
|
-
|
|
707
|
+
migrateBrandPageModel(brandPageModel, {
|
|
710
708
|
logoImage,
|
|
711
709
|
isUserDraft: this.isUserDraft,
|
|
712
|
-
isServerRender: isServerRenderOverride,
|
|
713
710
|
});
|
|
714
711
|
|
|
715
712
|
const userPersonalisation =
|
|
@@ -175,14 +175,13 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
|
|
|
175
175
|
|
|
176
176
|
const templateData = JSON.parse(template.data);
|
|
177
177
|
|
|
178
|
-
const
|
|
178
|
+
const brandPageModel = migrateBrandPageModel(
|
|
179
179
|
new BrandPageModel(templateData),
|
|
180
180
|
{
|
|
181
181
|
logoImage: {
|
|
182
182
|
...logoSettingsStore.selectedLogoImage,
|
|
183
183
|
},
|
|
184
184
|
isUserDraft: false,
|
|
185
|
-
isServerRender: false,
|
|
186
185
|
},
|
|
187
186
|
);
|
|
188
187
|
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../..';
|
|
2
|
-
import { FabricRenderClient } from '../../../clients/fabric-render-client';
|
|
3
|
-
const calculateConstrainedDimensions = (logoData, maxWidth, maxHeight) => {
|
|
4
|
-
const maxWidthRem = parseFloat(maxWidth);
|
|
5
|
-
const maxHeightRem = parseFloat(maxHeight);
|
|
6
|
-
const logoAspectRatio = logoData.width / logoData.height;
|
|
7
|
-
let actualHeight;
|
|
8
|
-
if (logoAspectRatio >= 1) {
|
|
9
|
-
actualHeight = maxWidthRem / logoAspectRatio;
|
|
10
|
-
}
|
|
11
|
-
else {
|
|
12
|
-
actualHeight = maxHeightRem;
|
|
13
|
-
}
|
|
14
|
-
const actualHeightRem = `${Math.ceil(actualHeight)}rem`;
|
|
15
|
-
return { width: actualHeightRem, height: actualHeightRem };
|
|
16
|
-
};
|
|
17
|
-
export const migration06 = async (migrationResult, options) => {
|
|
18
|
-
const { brandPageModel } = migrationResult;
|
|
19
|
-
if (options.isServerRender !== undefined && options.isServerRender) {
|
|
20
|
-
migrationResult.useOldLogoRenderSize = true;
|
|
21
|
-
return migrationResult;
|
|
22
|
-
}
|
|
23
|
-
try {
|
|
24
|
-
const fabricClient = FabricRenderClient.getInstance();
|
|
25
|
-
// Define all sections that need logo data
|
|
26
|
-
const sections = [
|
|
27
|
-
{ name: 'pageHeaderDesktop', config: brandPageModel.pageHeaderDesktop },
|
|
28
|
-
{ name: 'pageHeaderMobile', config: brandPageModel.pageHeaderMobile },
|
|
29
|
-
{ name: 'pageFooterDesktop', config: brandPageModel.pageFooterDesktop },
|
|
30
|
-
{ name: 'pageFooterMobile', config: brandPageModel.pageFooterMobile },
|
|
31
|
-
].filter((section) => section.config);
|
|
32
|
-
// Fetch logo data for all sections in parallel
|
|
33
|
-
const logoDataPromises = sections.map(async (section) => {
|
|
34
|
-
const logoData = section.config?.logoTemplateImage?.logoTemplateToken
|
|
35
|
-
? await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(section.config.logoTemplateImage)
|
|
36
|
-
: await fabricClient.getLogoSvgUrlByLogoImageAsync(section.config.logoImage);
|
|
37
|
-
return {
|
|
38
|
-
sectionName: section.name,
|
|
39
|
-
logoData,
|
|
40
|
-
config: section.config,
|
|
41
|
-
};
|
|
42
|
-
});
|
|
43
|
-
const results = await Promise.all(logoDataPromises);
|
|
44
|
-
// Apply dimensions to each section
|
|
45
|
-
results.forEach(({ sectionName, logoData, config }) => {
|
|
46
|
-
if (logoData && logoData.width && logoData.height && config) {
|
|
47
|
-
const currentMaxWidth = config.logoImageWidth || DEFAULT_LOGO_WIDTH;
|
|
48
|
-
const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
|
|
49
|
-
const dimensions = calculateConstrainedDimensions(logoData, currentMaxWidth, currentMaxHeight);
|
|
50
|
-
config.logoImageHeight = dimensions.height;
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
catch (error) {
|
|
55
|
-
console.warn('Migration 06: Failed to fetch logo dimensions:', error);
|
|
56
|
-
migrationResult.useOldLogoRenderSize = true;
|
|
57
|
-
return migrationResult;
|
|
58
|
-
}
|
|
59
|
-
return migrationResult;
|
|
60
|
-
};
|
|
@@ -1,384 +0,0 @@
|
|
|
1
|
-
import { BrandPageModel, type BrandPageData } from '../../models';
|
|
2
|
-
import { migration06 } from './migration-06';
|
|
3
|
-
import type { MigrationData } from '../migration.util';
|
|
4
|
-
|
|
5
|
-
// Helper function to create test data with logo configuration
|
|
6
|
-
const createTestBrandPageData = (
|
|
7
|
-
overrides: Partial<BrandPageData> = {},
|
|
8
|
-
): BrandPageData => {
|
|
9
|
-
const defaultLogoConfig = {
|
|
10
|
-
logoImageWidth: '12rem',
|
|
11
|
-
logoImageHeight: '9rem',
|
|
12
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
return {
|
|
16
|
-
pageHeaderDesktop: defaultLogoConfig,
|
|
17
|
-
pageHeaderMobile: defaultLogoConfig,
|
|
18
|
-
pageFooterDesktop: defaultLogoConfig,
|
|
19
|
-
pageFooterMobile: defaultLogoConfig,
|
|
20
|
-
...overrides,
|
|
21
|
-
} as BrandPageData;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
// Helper function to create MigrationData
|
|
25
|
-
const createMigrationData = (brandPageData: BrandPageData): MigrationData => {
|
|
26
|
-
return {
|
|
27
|
-
brandPageModel: new BrandPageModel(brandPageData),
|
|
28
|
-
} as MigrationData;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
// Helper function to capture original dimensions
|
|
32
|
-
const captureOriginalDimensions = (migrationData: MigrationData) => {
|
|
33
|
-
const { brandPageModel } = migrationData;
|
|
34
|
-
|
|
35
|
-
return {
|
|
36
|
-
headerDesktopWidth: brandPageModel.pageHeaderDesktop?.logoImageWidth,
|
|
37
|
-
headerDesktopHeight: brandPageModel.pageHeaderDesktop?.logoImageHeight,
|
|
38
|
-
headerMobileWidth: brandPageModel.pageHeaderMobile?.logoImageWidth,
|
|
39
|
-
headerMobileHeight: brandPageModel.pageHeaderMobile?.logoImageHeight,
|
|
40
|
-
footerDesktopWidth: brandPageModel.pageFooterDesktop?.logoImageWidth,
|
|
41
|
-
footerDesktopHeight: brandPageModel.pageFooterDesktop?.logoImageHeight,
|
|
42
|
-
footerMobileWidth: brandPageModel.pageFooterMobile?.logoImageWidth,
|
|
43
|
-
footerMobileHeight: brandPageModel.pageFooterMobile?.logoImageHeight,
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
// Helper function to verify dimensions unchanged
|
|
48
|
-
const expectDimensionsUnchanged = (
|
|
49
|
-
result: MigrationData,
|
|
50
|
-
originalDimensions: ReturnType<typeof captureOriginalDimensions>,
|
|
51
|
-
) => {
|
|
52
|
-
const { brandPageModel } = result;
|
|
53
|
-
|
|
54
|
-
expect(brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
|
|
55
|
-
originalDimensions.headerDesktopWidth,
|
|
56
|
-
);
|
|
57
|
-
expect(brandPageModel.pageHeaderDesktop?.logoImageHeight).toBe(
|
|
58
|
-
originalDimensions.headerDesktopHeight,
|
|
59
|
-
);
|
|
60
|
-
expect(brandPageModel.pageHeaderMobile?.logoImageWidth).toBe(
|
|
61
|
-
originalDimensions.headerMobileWidth,
|
|
62
|
-
);
|
|
63
|
-
expect(brandPageModel.pageHeaderMobile?.logoImageHeight).toBe(
|
|
64
|
-
originalDimensions.headerMobileHeight,
|
|
65
|
-
);
|
|
66
|
-
expect(brandPageModel.pageFooterDesktop?.logoImageWidth).toBe(
|
|
67
|
-
originalDimensions.footerDesktopWidth,
|
|
68
|
-
);
|
|
69
|
-
expect(brandPageModel.pageFooterDesktop?.logoImageHeight).toBe(
|
|
70
|
-
originalDimensions.footerDesktopHeight,
|
|
71
|
-
);
|
|
72
|
-
expect(brandPageModel.pageFooterMobile?.logoImageWidth).toBe(
|
|
73
|
-
originalDimensions.footerMobileWidth,
|
|
74
|
-
);
|
|
75
|
-
expect(brandPageModel.pageFooterMobile?.logoImageHeight).toBe(
|
|
76
|
-
originalDimensions.footerMobileHeight,
|
|
77
|
-
);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
describe('migration06', () => {
|
|
81
|
-
test('should skip migration when isServerRender is true', async () => {
|
|
82
|
-
const brandPageData = createTestBrandPageData();
|
|
83
|
-
const migrationData = createMigrationData(brandPageData);
|
|
84
|
-
const originalDimensions = captureOriginalDimensions(migrationData);
|
|
85
|
-
|
|
86
|
-
const result = await migration06(migrationData, { isServerRender: true });
|
|
87
|
-
|
|
88
|
-
// Should set useOldLogoRenderSize flag and return early
|
|
89
|
-
expect(result.useOldLogoRenderSize).toBe(true);
|
|
90
|
-
expectDimensionsUnchanged(result, originalDimensions);
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
test('should skip migration when no logo token is available', async () => {
|
|
94
|
-
const brandPageData = createTestBrandPageData({
|
|
95
|
-
pageHeaderDesktop: {
|
|
96
|
-
logoImageWidth: '12rem',
|
|
97
|
-
logoImageHeight: '9rem',
|
|
98
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 }, // Empty token
|
|
99
|
-
},
|
|
100
|
-
pageHeaderMobile: {
|
|
101
|
-
logoImageWidth: '12rem',
|
|
102
|
-
logoImageHeight: '9rem',
|
|
103
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
104
|
-
},
|
|
105
|
-
pageFooterDesktop: {
|
|
106
|
-
logoImageWidth: '12rem',
|
|
107
|
-
logoImageHeight: '9rem',
|
|
108
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
109
|
-
},
|
|
110
|
-
pageFooterMobile: {
|
|
111
|
-
logoImageWidth: '12rem',
|
|
112
|
-
logoImageHeight: '9rem',
|
|
113
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
114
|
-
},
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
const migrationData = createMigrationData(brandPageData);
|
|
118
|
-
const originalDimensions = captureOriginalDimensions(migrationData);
|
|
119
|
-
|
|
120
|
-
const result = await migration06(migrationData, { isServerRender: false });
|
|
121
|
-
|
|
122
|
-
// Dimensions should remain unchanged when no logo token
|
|
123
|
-
expect(result.brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
|
|
124
|
-
originalDimensions.headerDesktopWidth,
|
|
125
|
-
);
|
|
126
|
-
expect(result.brandPageModel.pageHeaderDesktop?.logoImageHeight).toBe(
|
|
127
|
-
originalDimensions.headerDesktopHeight,
|
|
128
|
-
);
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
test('should use default dimensions when none are provided', async () => {
|
|
132
|
-
const brandPageData = createTestBrandPageData({
|
|
133
|
-
pageHeaderDesktop: {
|
|
134
|
-
// No logoImageWidth or logoImageHeight provided
|
|
135
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
136
|
-
},
|
|
137
|
-
pageHeaderMobile: {
|
|
138
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
139
|
-
},
|
|
140
|
-
pageFooterDesktop: {
|
|
141
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
142
|
-
},
|
|
143
|
-
pageFooterMobile: {
|
|
144
|
-
logoImage: { logoDraftToken: '', logoVariation: 0 },
|
|
145
|
-
},
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
const migrationData = createMigrationData(brandPageData);
|
|
149
|
-
const result = await migration06(migrationData, { isServerRender: false });
|
|
150
|
-
|
|
151
|
-
// Should not crash and return the migrationData unchanged since no logo token
|
|
152
|
-
expect(result).toBeDefined();
|
|
153
|
-
expect(result.brandPageModel.pageHeaderDesktop).toBeDefined();
|
|
154
|
-
expect(result.brandPageModel.pageHeaderMobile).toBeDefined();
|
|
155
|
-
expect(result.brandPageModel.pageFooterDesktop).toBeDefined();
|
|
156
|
-
expect(result.brandPageModel.pageFooterMobile).toBeDefined();
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
test('should handle missing pageHeaderDesktop gracefully', async () => {
|
|
160
|
-
const brandPageData = createTestBrandPageData({
|
|
161
|
-
pageHeaderDesktop: undefined,
|
|
162
|
-
});
|
|
163
|
-
|
|
164
|
-
const migrationData = createMigrationData(brandPageData);
|
|
165
|
-
|
|
166
|
-
// Should not crash when pageHeaderDesktop is missing
|
|
167
|
-
await expect(
|
|
168
|
-
migration06(migrationData, { isServerRender: false }),
|
|
169
|
-
).resolves.toBeDefined();
|
|
170
|
-
});
|
|
171
|
-
|
|
172
|
-
test('should return the same migrationData instance when using server render', async () => {
|
|
173
|
-
const brandPageData = createTestBrandPageData({
|
|
174
|
-
pageHeaderDesktop: {
|
|
175
|
-
logoImageWidth: '10rem',
|
|
176
|
-
logoImageHeight: '8rem',
|
|
177
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
178
|
-
},
|
|
179
|
-
pageHeaderMobile: {
|
|
180
|
-
logoImageWidth: '10rem',
|
|
181
|
-
logoImageHeight: '8rem',
|
|
182
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
183
|
-
},
|
|
184
|
-
pageFooterDesktop: {
|
|
185
|
-
logoImageWidth: '10rem',
|
|
186
|
-
logoImageHeight: '8rem',
|
|
187
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
188
|
-
},
|
|
189
|
-
pageFooterMobile: {
|
|
190
|
-
logoImageWidth: '10rem',
|
|
191
|
-
logoImageHeight: '8rem',
|
|
192
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
193
|
-
},
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
const migrationData = createMigrationData(brandPageData);
|
|
197
|
-
const result = await migration06(migrationData, { isServerRender: true });
|
|
198
|
-
|
|
199
|
-
// Should return the exact same migrationData instance
|
|
200
|
-
expect(result).toBe(migrationData);
|
|
201
|
-
expect(result.useOldLogoRenderSize).toBe(true);
|
|
202
|
-
});
|
|
203
|
-
|
|
204
|
-
test('should handle logoTemplateImage when available', async () => {
|
|
205
|
-
const brandPageData = createTestBrandPageData({
|
|
206
|
-
pageHeaderDesktop: {
|
|
207
|
-
logoImageWidth: '10rem',
|
|
208
|
-
logoImageHeight: '10rem',
|
|
209
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
210
|
-
logoTemplateImage: { logoTemplateToken: 'template-token' },
|
|
211
|
-
},
|
|
212
|
-
pageHeaderMobile: {
|
|
213
|
-
logoImageWidth: '10rem',
|
|
214
|
-
logoImageHeight: '10rem',
|
|
215
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
216
|
-
logoTemplateImage: { logoTemplateToken: 'template-token' },
|
|
217
|
-
},
|
|
218
|
-
pageFooterDesktop: {
|
|
219
|
-
logoImageWidth: '10rem',
|
|
220
|
-
logoImageHeight: '10rem',
|
|
221
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
222
|
-
logoTemplateImage: { logoTemplateToken: 'template-token' },
|
|
223
|
-
},
|
|
224
|
-
pageFooterMobile: {
|
|
225
|
-
logoImageWidth: '10rem',
|
|
226
|
-
logoImageHeight: '10rem',
|
|
227
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
228
|
-
logoTemplateImage: { logoTemplateToken: 'template-token' },
|
|
229
|
-
},
|
|
230
|
-
});
|
|
231
|
-
|
|
232
|
-
const migrationData = createMigrationData(brandPageData);
|
|
233
|
-
|
|
234
|
-
// The migration should attempt to process the template image
|
|
235
|
-
// Since we can't mock the API call, we expect it to either succeed or fail gracefully
|
|
236
|
-
const result = await migration06(migrationData, { isServerRender: false });
|
|
237
|
-
|
|
238
|
-
expect(result).toBeDefined();
|
|
239
|
-
expect(result.brandPageModel.pageHeaderDesktop).toBeDefined();
|
|
240
|
-
});
|
|
241
|
-
|
|
242
|
-
test('should maintain model structure after migration', async () => {
|
|
243
|
-
const brandPageData = createTestBrandPageData({
|
|
244
|
-
pageHeaderDesktop: {
|
|
245
|
-
logoImageWidth: '12rem',
|
|
246
|
-
logoImageHeight: '9rem',
|
|
247
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
248
|
-
displayStyle: 'desktop-tab-vertical-stack-centered-logo-centered-menu',
|
|
249
|
-
isLogoVisible: true,
|
|
250
|
-
},
|
|
251
|
-
pageHeaderMobile: {
|
|
252
|
-
logoImageWidth: '12rem',
|
|
253
|
-
logoImageHeight: '9rem',
|
|
254
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
255
|
-
displayStyle: 'mobile-tab-vertical-stack-centered-logo-centered-menu',
|
|
256
|
-
isLogoVisible: true,
|
|
257
|
-
},
|
|
258
|
-
pageFooterDesktop: {
|
|
259
|
-
logoImageWidth: '12rem',
|
|
260
|
-
logoImageHeight: '9rem',
|
|
261
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
262
|
-
displayStyle: 'centered-menu',
|
|
263
|
-
isLogoVisible: true,
|
|
264
|
-
},
|
|
265
|
-
pageFooterMobile: {
|
|
266
|
-
logoImageWidth: '12rem',
|
|
267
|
-
logoImageHeight: '9rem',
|
|
268
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
269
|
-
displayStyle: 'centered-menu',
|
|
270
|
-
isLogoVisible: true,
|
|
271
|
-
},
|
|
272
|
-
v: 5,
|
|
273
|
-
brandPageType: 'brandSite',
|
|
274
|
-
});
|
|
275
|
-
|
|
276
|
-
const migrationData = createMigrationData(brandPageData);
|
|
277
|
-
const result = await migration06(migrationData, { isServerRender: false });
|
|
278
|
-
|
|
279
|
-
const { brandPageModel } = result;
|
|
280
|
-
|
|
281
|
-
// Should maintain all original properties
|
|
282
|
-
expect(brandPageModel.pageHeaderDesktop?.displayStyle).toBe(
|
|
283
|
-
'desktop-tab-vertical-stack-centered-logo-centered-menu',
|
|
284
|
-
);
|
|
285
|
-
expect(brandPageModel.pageHeaderDesktop?.isLogoVisible).toBe(true);
|
|
286
|
-
expect(brandPageModel.pageHeaderMobile?.displayStyle).toBe(
|
|
287
|
-
'mobile-tab-vertical-stack-centered-logo-centered-menu',
|
|
288
|
-
);
|
|
289
|
-
expect(brandPageModel.pageHeaderMobile?.isLogoVisible).toBe(true);
|
|
290
|
-
expect(brandPageModel.pageFooterDesktop?.displayStyle).toBe(
|
|
291
|
-
'centered-menu',
|
|
292
|
-
);
|
|
293
|
-
expect(brandPageModel.pageFooterDesktop?.isLogoVisible).toBe(true);
|
|
294
|
-
expect(brandPageModel.pageFooterMobile?.displayStyle).toBe('centered-menu');
|
|
295
|
-
expect(brandPageModel.pageFooterMobile?.isLogoVisible).toBe(true);
|
|
296
|
-
expect(brandPageModel.v).toBe(5);
|
|
297
|
-
expect(brandPageModel.brandPageType).toBe('brandSite');
|
|
298
|
-
|
|
299
|
-
// Logo image objects should be preserved
|
|
300
|
-
expect(brandPageModel.pageHeaderDesktop?.logoImage.logoDraftToken).toBe(
|
|
301
|
-
'test-token',
|
|
302
|
-
);
|
|
303
|
-
expect(brandPageModel.pageHeaderDesktop?.logoImage.logoVariation).toBe(0);
|
|
304
|
-
});
|
|
305
|
-
|
|
306
|
-
test('should calculate dimensions independently for each section with different max constraints', async () => {
|
|
307
|
-
const brandPageData = createTestBrandPageData({
|
|
308
|
-
pageHeaderDesktop: {
|
|
309
|
-
logoImageWidth: '16rem', // 256px max
|
|
310
|
-
logoImageHeight: '12rem', // 192px max
|
|
311
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
312
|
-
},
|
|
313
|
-
pageHeaderMobile: {
|
|
314
|
-
logoImageWidth: '8rem', // 128px max
|
|
315
|
-
logoImageHeight: '6rem', // 96px max
|
|
316
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
317
|
-
},
|
|
318
|
-
pageFooterDesktop: {
|
|
319
|
-
logoImageWidth: '10rem', // 160px max
|
|
320
|
-
logoImageHeight: '10rem', // 160px max (square)
|
|
321
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
322
|
-
},
|
|
323
|
-
pageFooterMobile: {
|
|
324
|
-
logoImageWidth: '6rem', // 96px max
|
|
325
|
-
logoImageHeight: '8rem', // 128px max (tall)
|
|
326
|
-
logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
|
|
327
|
-
},
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
const migrationData = createMigrationData(brandPageData);
|
|
331
|
-
const result = await migration06(migrationData, { isServerRender: false });
|
|
332
|
-
|
|
333
|
-
const { brandPageModel } = result;
|
|
334
|
-
|
|
335
|
-
// Each section should calculate dimensions based on its own constraints
|
|
336
|
-
// Since we can't mock the API response, we verify that the function doesn't crash
|
|
337
|
-
// and that each section maintains its structure
|
|
338
|
-
expect(brandPageModel.pageHeaderDesktop).toBeDefined();
|
|
339
|
-
expect(brandPageModel.pageHeaderMobile).toBeDefined();
|
|
340
|
-
expect(brandPageModel.pageFooterDesktop).toBeDefined();
|
|
341
|
-
expect(brandPageModel.pageFooterMobile).toBeDefined();
|
|
342
|
-
|
|
343
|
-
// Verify that different sections can have different dimensions
|
|
344
|
-
// (This test will pass whether the API succeeds or fails gracefully)
|
|
345
|
-
expect(typeof brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
|
|
346
|
-
'string',
|
|
347
|
-
);
|
|
348
|
-
expect(typeof brandPageModel.pageHeaderDesktop?.logoImageHeight).toBe(
|
|
349
|
-
'string',
|
|
350
|
-
);
|
|
351
|
-
expect(typeof brandPageModel.pageHeaderMobile?.logoImageWidth).toBe(
|
|
352
|
-
'string',
|
|
353
|
-
);
|
|
354
|
-
expect(typeof brandPageModel.pageHeaderMobile?.logoImageHeight).toBe(
|
|
355
|
-
'string',
|
|
356
|
-
);
|
|
357
|
-
expect(typeof brandPageModel.pageFooterDesktop?.logoImageWidth).toBe(
|
|
358
|
-
'string',
|
|
359
|
-
);
|
|
360
|
-
expect(typeof brandPageModel.pageFooterDesktop?.logoImageHeight).toBe(
|
|
361
|
-
'string',
|
|
362
|
-
);
|
|
363
|
-
expect(typeof brandPageModel.pageFooterMobile?.logoImageWidth).toBe(
|
|
364
|
-
'string',
|
|
365
|
-
);
|
|
366
|
-
expect(typeof brandPageModel.pageFooterMobile?.logoImageHeight).toBe(
|
|
367
|
-
'string',
|
|
368
|
-
);
|
|
369
|
-
|
|
370
|
-
// Logo image objects should be preserved for all sections
|
|
371
|
-
expect(brandPageModel.pageHeaderDesktop?.logoImage.logoDraftToken).toBe(
|
|
372
|
-
'test-token',
|
|
373
|
-
);
|
|
374
|
-
expect(brandPageModel.pageHeaderMobile?.logoImage.logoDraftToken).toBe(
|
|
375
|
-
'test-token',
|
|
376
|
-
);
|
|
377
|
-
expect(brandPageModel.pageFooterDesktop?.logoImage.logoDraftToken).toBe(
|
|
378
|
-
'test-token',
|
|
379
|
-
);
|
|
380
|
-
expect(brandPageModel.pageFooterMobile?.logoImage.logoDraftToken).toBe(
|
|
381
|
-
'test-token',
|
|
382
|
-
);
|
|
383
|
-
});
|
|
384
|
-
});
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
DEFAULT_LOGO_HEIGHT,
|
|
3
|
-
DEFAULT_LOGO_WIDTH,
|
|
4
|
-
PageFooterDesktop,
|
|
5
|
-
PageFooterMobile,
|
|
6
|
-
PageHeaderDesktop,
|
|
7
|
-
PageHeaderMobile,
|
|
8
|
-
type BrandPageModel,
|
|
9
|
-
} from '../..';
|
|
10
|
-
import { FabricRenderClient } from '../../../clients/fabric-render-client';
|
|
11
|
-
import type { MigrationData } from '../migration.util';
|
|
12
|
-
|
|
13
|
-
const calculateConstrainedDimensions = (
|
|
14
|
-
logoData: { width: number; height: number },
|
|
15
|
-
maxWidth: string,
|
|
16
|
-
maxHeight: string,
|
|
17
|
-
) => {
|
|
18
|
-
const maxWidthRem = parseFloat(maxWidth);
|
|
19
|
-
const maxHeightRem = parseFloat(maxHeight);
|
|
20
|
-
|
|
21
|
-
const logoAspectRatio = logoData.width / logoData.height;
|
|
22
|
-
|
|
23
|
-
let actualHeight: number;
|
|
24
|
-
|
|
25
|
-
if (logoAspectRatio >= 1) {
|
|
26
|
-
actualHeight = maxWidthRem / logoAspectRatio;
|
|
27
|
-
} else {
|
|
28
|
-
actualHeight = maxHeightRem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const actualHeightRem = `${Math.ceil(actualHeight)}rem`;
|
|
32
|
-
|
|
33
|
-
return { width: actualHeightRem, height: actualHeightRem };
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export const migration06 = async (
|
|
37
|
-
migrationResult: MigrationData,
|
|
38
|
-
options: { isServerRender: boolean },
|
|
39
|
-
): Promise<MigrationData> => {
|
|
40
|
-
const { brandPageModel } = migrationResult;
|
|
41
|
-
|
|
42
|
-
if (options.isServerRender !== undefined && options.isServerRender) {
|
|
43
|
-
migrationResult.useOldLogoRenderSize = true;
|
|
44
|
-
|
|
45
|
-
return migrationResult;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
try {
|
|
49
|
-
const fabricClient = FabricRenderClient.getInstance();
|
|
50
|
-
|
|
51
|
-
// Define all sections that need logo data
|
|
52
|
-
const sections: {
|
|
53
|
-
name: string;
|
|
54
|
-
config:
|
|
55
|
-
| PageHeaderDesktop
|
|
56
|
-
| PageHeaderMobile
|
|
57
|
-
| PageFooterDesktop
|
|
58
|
-
| PageFooterMobile;
|
|
59
|
-
}[] = [
|
|
60
|
-
{ name: 'pageHeaderDesktop', config: brandPageModel.pageHeaderDesktop },
|
|
61
|
-
{ name: 'pageHeaderMobile', config: brandPageModel.pageHeaderMobile },
|
|
62
|
-
{ name: 'pageFooterDesktop', config: brandPageModel.pageFooterDesktop },
|
|
63
|
-
{ name: 'pageFooterMobile', config: brandPageModel.pageFooterMobile },
|
|
64
|
-
].filter((section) => section.config);
|
|
65
|
-
|
|
66
|
-
// Fetch logo data for all sections in parallel
|
|
67
|
-
const logoDataPromises = sections.map(async (section) => {
|
|
68
|
-
const logoData = section.config?.logoTemplateImage?.logoTemplateToken
|
|
69
|
-
? await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(
|
|
70
|
-
section.config.logoTemplateImage,
|
|
71
|
-
)
|
|
72
|
-
: await fabricClient.getLogoSvgUrlByLogoImageAsync(
|
|
73
|
-
section.config.logoImage,
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
return {
|
|
77
|
-
sectionName: section.name,
|
|
78
|
-
logoData,
|
|
79
|
-
config: section.config,
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
const results = await Promise.all(logoDataPromises);
|
|
84
|
-
|
|
85
|
-
// Apply dimensions to each section
|
|
86
|
-
results.forEach(({ sectionName, logoData, config }) => {
|
|
87
|
-
if (logoData && logoData.width && logoData.height && config) {
|
|
88
|
-
const currentMaxWidth = config.logoImageWidth || DEFAULT_LOGO_WIDTH;
|
|
89
|
-
const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
|
|
90
|
-
|
|
91
|
-
const dimensions = calculateConstrainedDimensions(
|
|
92
|
-
logoData,
|
|
93
|
-
currentMaxWidth,
|
|
94
|
-
currentMaxHeight,
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
config.logoImageHeight = dimensions.height;
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
} catch (error) {
|
|
101
|
-
console.warn('Migration 06: Failed to fetch logo dimensions:', error);
|
|
102
|
-
migrationResult.useOldLogoRenderSize = true;
|
|
103
|
-
|
|
104
|
-
return migrationResult;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
return migrationResult;
|
|
108
|
-
};
|