@designcrowd/library.brand-page 5.16.5 → 5.16.6-contact-5

package/lib/src/{CreatedOnBrandCrowd-de-de-BUFejFtN.js → CreatedOnBrandCrowd-de-de-daLUJHsv.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-3OXPUFEz.js → CreatedOnBrandCrowd-en-us-Du_CLJqQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CLsz3yPd.js → CreatedOnBrandCrowd-es-es-7Uck8smQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BybMTsPA.js → CreatedOnBrandCrowd-fr-ca-P6TqDsaL.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BybMTsPA.js → CreatedOnBrandCrowd-fr-fr-P6TqDsaL.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BXYsZDY_.js → CreatedOnBrandCrowd-pt-br-DS5JaMb6.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BXYsZDY_.js → CreatedOnBrandCrowd-pt-pt-DS5JaMb6.js}

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

package/lib/src/{CreatedOnDcom-de-de-7PmR3pRl.js → CreatedOnDcom-de-de-CzHhqO7j.js}

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

package/lib/src/{CreatedOnDcom-en-us-CTy6x_OP.js → CreatedOnDcom-en-us-C6LGd91U.js}

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

package/lib/src/{CreatedOnDcom-es-es-Suv_8nrd.js → CreatedOnDcom-es-es-DUvWyhO-.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DTRurRq6.js → CreatedOnDcom-fr-ca-XIylNwqV.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BUrIJTNj.js → CreatedOnDcom-fr-fr-D28ah3Z_.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DEURGDlS.js → CreatedOnDcom-pt-br-CEuf8Drz.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DtkXVuez.js → CreatedOnDcom-pt-pt-c_BU4Ov-.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-MNw1rB03.js";
+import { _ as M } from "./lib-hSbt0wSC.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/models/index.d.ts

@@ -199,6 +199,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

@@ -129,6 +129,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

@@ -2,7 +2,7 @@ import { isEmail } from '../../utils/validator.util';
 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) {
@@ -29,10 +29,10 @@ export const getPhoneValidationError = (phone, isRequired) => {
 };
 export const getNameValidationError = (name, isRequired) => {
     if (name.trim() === '' && isRequired) {
-        return 'Please enter your name.';
+        return 'Please enter your message.';
     }
     else if (name.length > MAX_NAME_LENGTH) {
-        return 'The name you entered is too long.';
+        return 'The message you entered is too long.';
     }
 };
 export const getMessageValidationError = (message, isRequired) => {

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 || '',