@designcrowd/library.brand-page 5.16.11 → 5.16.12-ast-bug-fix

package/lib/src/{CreatedOnBrandCrowd-de-de-bzhKDyJv.js → CreatedOnBrandCrowd-de-de-C6dhWzv2.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-j4ZI_pqK.js → CreatedOnBrandCrowd-en-us-DxYr4y0O.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es--kt8fo5B.js → CreatedOnBrandCrowd-es-es-CM43uX9E.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CiCdKxFb.js → CreatedOnBrandCrowd-fr-ca-a-uDXFqw.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CiCdKxFb.js → CreatedOnBrandCrowd-fr-fr-a-uDXFqw.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CgEfKC9V.js → CreatedOnBrandCrowd-pt-br-D1tjQ-oU.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-CgEfKC9V.js → CreatedOnBrandCrowd-pt-pt-D1tjQ-oU.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-cP7DqVjt.js";
+import { _ as t } from "./lib-6Qbl13IW.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-CUZ6g2BX.js → CreatedOnDcom-de-de-BloaPUB1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-cP7DqVjt.js";
+import { _ as e } from "./lib-6Qbl13IW.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-Dk3tpBIt.js → CreatedOnDcom-en-us-VSa2rG_S.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-cP7DqVjt.js";
+import { _ as e } from "./lib-6Qbl13IW.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-UMt6sl46.js → CreatedOnDcom-es-es-CREP0RRz.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-cP7DqVjt.js";
+import { _ as e } from "./lib-6Qbl13IW.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DB-oAlcL.js → CreatedOnDcom-fr-ca-DAc4utHb.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-cP7DqVjt.js";
+import { _ as e } from "./lib-6Qbl13IW.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DDQ5o8K8.js → CreatedOnDcom-fr-fr-DGDpeWmm.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-cP7DqVjt.js";
+import { _ as e } from "./lib-6Qbl13IW.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-Bp6ian7l.js → CreatedOnDcom-pt-br-DYnoh6pR.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-cP7DqVjt.js";
+import { _ as M } from "./lib-6Qbl13IW.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-DNRtLje1.js → CreatedOnDcom-pt-pt-COmcB4ZZ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-cP7DqVjt.js";
+import { _ as M } from "./lib-6Qbl13IW.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/clients/brand-page.client.d.ts

@@ -5,6 +5,8 @@ export interface FormResult {
 }
 export interface ContactFormField {
     id: string;
+    name: string;
+    type: string;
     value: string;
 }
 export interface CartForShopRequest {

package/lib/src/brand-page/clients/brand-page.client.js

@@ -33,7 +33,7 @@ const submitContactForm = async (brandPageToken, contentBlockId, values) => {
         const csrfToken = csrfUtil.getCsrfTokenFromMetaHeader();
         const formBody = {
             contentBlockId,
-            ...values.reduce((b, i) => ({ ...b, [i.id]: i.value }), {}),
+            fields: values,
         };
         await axios.post(`/api/contact/${brandPageToken}`, formBody, {
             headers: {

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -146,7 +146,12 @@ export default defineComponent({
             let result;
             this.isSubmitting = true;
             try {
-                result = await brandPageClient.submitContactForm(this.context.brandPageToken, this.viewModel.id, this.values.map((v) => ({ id: v.field.id, value: v.value })));
+                result = await brandPageClient.submitContactForm(this.context.brandPageToken, this.viewModel.id, this.values.map((v) => ({
+                    id: v.field.id,
+                    name: v.field.name,
+                    type: v.field.type,
+                    value: v.value,
+                })));
             }
             finally {
                 this.isSubmitting = false;

package/lib/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.js

@@ -71,7 +71,10 @@ export default defineComponent({
             this.resizeObserver = new ResizeObserver(this.resizeDebounceHandler);
             this.resizeObserver.observe($masonry.$el);
         }
-        this.onResize();
+        // Initial resize calculation
+        this.$nextTick(() => {
+            this.onResize();
+        });
     },
     beforeUnmount() {
         this.resizeObserver?.disconnect();
@@ -103,10 +106,10 @@ export default defineComponent({
             const column = containerWidth < CONTAINER_WIDTH_MIN_THRESHOLD
                 ? MIN_COLUMNS
                 : MAX_COLUMNS;
-            this.columnWidth = containerWidth / column - this.gap;
-            // Force vue masonry wall to resize when container width changed but document width unchanged
-            if ($masonry.$el.$children && $masonry.$el.$children[0]) {
-                $masonry.$el.$children[0].$resize();
+            const newColumnWidth = containerWidth / column - this.gap;
+            // Only update if the value actually changed to trigger reactivity
+            if (this.columnWidth !== newColumnWidth) {
+                this.columnWidth = newColumnWidth;
             }
         },
         onImageError(index) {

package/lib/src/brand-page/models/index.d.ts

@@ -200,6 +200,9 @@ export declare const FORM_FIELD_IDS: {
     readonly emailAddress: "emailAddress";
     readonly phoneNumber: "phoneNumber";
     readonly message: "message";
+    readonly customField1: "customField1";
+    readonly customField2: "customField2";
+    readonly customField3: "customField3";
 };
 export declare const BUTTON_LINK_TYPE: {
     readonly url: "url";

package/lib/src/brand-page/models/index.js

@@ -131,6 +131,9 @@ export const FORM_FIELD_IDS = {
     emailAddress: 'emailAddress',
     phoneNumber: 'phoneNumber',
     message: 'message',
+    customField1: 'customField1',
+    customField2: 'customField2',
+    customField3: 'customField3',
 };
 export const BUTTON_LINK_TYPE = {
     url: 'url',

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

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration09: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,34 @@
+import { FORM_FIELD_IDS } from '../..';
+import { isContact } from '../model.util';
+export const migration09 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (isContact(content)) {
+                const contactForm = content;
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField1,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField2,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField3,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+            }
+        });
+    });
+    return migrationResult;
+};

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

@@ -11,6 +11,7 @@ import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
 import { migration07 } from './migration/migration-07';
 import { migration08 } from './migration/migration-08';
+import { migration09 } from './migration/migration-09';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -68,6 +69,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration08,
         description: 'Migrating logo content sizes for brandPage and brandContact',
     },
+    {
+        version: 9,
+        migrateFn: migration09,
+        description: 'Migrating contact form with additional 3 custom fields',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -1,19 +1,20 @@
 import { isEmail } from '../../utils/validator.util';
+import { errorTr } from '../../composables/useTranslate';
 const MAX_EMAIL_LENGTH = 320;
 const MAX_PHONE_LENGTH = 50;
 const MAX_NAME_LENGTH = 250;
-const MAX_MESSAGE_LENGTH = 600;
+const MAX_MESSAGE_LENGTH = 1000;
 export const getEmailValidationError = (email, isRequired) => {
     if (email.trim() === '') {
         if (isRequired) {
-            return 'Please enter your email address.';
+            return errorTr('contactFormEmailFieldRequired');
         }
     }
     else if (!isEmail(email)) {
-        return 'The email address you entered is invalid.';
+        return errorTr('contactFormEmailFieldInvalid');
     }
     else if (email.length >= MAX_EMAIL_LENGTH) {
-        return 'The email address you entered is too long.';
+        return errorTr('contactFormEmailFieldTooLong');
     }
     else {
         return undefined;
@@ -21,25 +22,29 @@ export const getEmailValidationError = (email, isRequired) => {
 };
 export const getPhoneValidationError = (phone, isRequired) => {
     if (phone.trim() === '' && isRequired) {
-        return 'Please enter your phone number.';
+        return errorTr('contactFormPhoneFieldRequired');
     }
     else if (phone.length > MAX_PHONE_LENGTH) {
-        return 'The phone number you entered is too long.';
+        return errorTr('contactFormPhoneFieldTooLong');
     }
 };
 export const getNameValidationError = (name, isRequired) => {
     if (name.trim() === '' && isRequired) {
-        return 'Please enter your name.';
+        return errorTr('contactFormFieldRequired');
     }
     else if (name.length > MAX_NAME_LENGTH) {
-        return 'The name you entered is too long.';
+        return errorTr('contactFormFieldTooLong', {
+            MAX_LENGTH: MAX_NAME_LENGTH,
+        });
     }
 };
 export const getMessageValidationError = (message, isRequired) => {
     if (message.trim() === '' && isRequired) {
-        return 'Please enter your message.';
+        return errorTr('contactFormFieldRequired');
     }
     else if (message.length > MAX_MESSAGE_LENGTH) {
-        return `The message you entered is too long. The maximum length is ${MAX_MESSAGE_LENGTH}`;
+        return errorTr('contactFormFieldTooLong', {
+            MAX_LENGTH: MAX_MESSAGE_LENGTH,
+        });
     }
 };

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

@@ -1665,6 +1665,11 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
     isLocked: false,
     type: 'support-me',
 });
+const CONTACT_FORM_GROUPS = {
+    formFields: 'formFields',
+    settings: 'settings',
+    style: 'style',
+};
 export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
     type: 'contact-form',
     category: 'general',
@@ -1672,25 +1677,41 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
     defaultIconName: 'form',
     displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
     displayName: contentSettingsTr(`contactFormDisplayName`),
-    fieldGroups: SETTINGS_STYLE_FIElD_GROUPS(),
+    fieldGroups: [
+        {
+            id: CONTACT_FORM_GROUPS.settings,
+            displayName: contentSettingsTr(`settingsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: CONTACT_FORM_GROUPS.formFields,
+            displayName: contentSettingsTr(`formFieldsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: CONTACT_FORM_GROUPS.style,
+            displayName: contentSettingsTr(`styleDisplayName`),
+            isCollapsed: true,
+        },
+    ],
     fields: {
         imageUrl: {
             type: 'image',
             replaceImageSettings: contactFormReplaceImageSettings(),
             title: contentSettingsTr(`imageTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: imageUrlVisibilityAssessor,
         },
         imageUrlOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => imageUrlVisibilityAssessor(c, b) &&
                 personalisationOverrideVisibility(c, b, 'imageUrl'),
         },
         colorReplacements: {
             type: 'color-replacements',
             title: contentSettingsTr(`shapeColorsTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: colorReplacementVisibilityTypeAssessor,
         },
         displayStyle: {
@@ -1699,67 +1720,67 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             defaultValue: DISPLAY_STYLE_PREVIEW,
             title: contentSettingsTr(`displayStyleTitle`),
             optionsConvertor: displayStyleConvertor,
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: displayTypeVisibilityAssessor,
         },
         title: {
             type: 'text',
             placeholder: contentSettingsTr(`titlePlaceholder`),
             title: contentSettingsTr(`titleTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             maxLength: 200,
         },
         titleOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'title'),
         },
         description: {
             type: 'textarea',
             placeholder: contentSettingsTr(`descriptionPlaceholder`),
             title: contentSettingsTr(`descriptionTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             maxLength: 1000,
         },
         descriptionOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'description'),
         },
         buttonText: {
             type: 'text',
             title: contentSettingsTr(`buttonTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             showToggle: false,
             maxLength: 60,
         },
         buttonTextOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'buttonText'),
         },
         fields: {
             type: 'form-fields',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.formFields,
         },
         successMessage: {
             type: 'textarea',
             placeholder: contentSettingsTr(`successMessagePlaceholder`),
             title: contentSettingsTr(`successMessageTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
         },
         responseEmail: {
             type: 'email',
             title: contentSettingsTr(`sendResponsesToTitle`),
             placeholder: contentSettingsTr(`recipientEmailPlaceholder`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
         },
         layoutStyle: {
             type: 'radio',
             role: 'multi',
             title: contentSettingsTr(`displayStyleTitle`),
             optionsConvertor: contactLayoutStyleConvertor,
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             variant: 'icon',
             visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
@@ -1768,7 +1789,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         cardStyle: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,
@@ -1779,7 +1800,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         },
         backgroundStyle: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,
@@ -1788,7 +1809,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         },
         messageTextColor: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,

package/lib/src/brand-page-maker/models/content-settings.js

@@ -397,6 +397,27 @@ export const createInitialContactFormContent = (options) => {
                 required: true,
                 type: 'text-area',
             },
+            {
+                id: FORM_FIELD_IDS.customField1,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text',
+            },
+            {
+                id: FORM_FIELD_IDS.customField2,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text',
+            },
+            {
+                id: FORM_FIELD_IDS.customField3,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text',
+            },
         ],
         successMessage: contentSettingsTr(`formSuccessMessage`),
         responseEmail: options?.userState.emailAddress || '',