@codecavepro/brand 3.1.0 → 3.2.0

package/dist/src/common/forms/ContactUsForm.vue

@@ -54,25 +54,24 @@ const createFormField = <T,>(name: keyof ContactFormDefinition, value: T): FormF
 const formData = ref({
   email: createFormField('email', ''),
   firstName: createFormField('firstName', ''),
-  lastName: createFormField('lastName', ''),
   companyName: createFormField('companyName', ''),
   linkedinCompanyPage: createFormField('linkedinCompanyPage', ''),
   services: createFormField('services', ''),
   description: createFormField('description', ''),
-  
- consentToProcess: {
-  value: false,
-  error: '',
-  label: props.definition.consentToProcess.label,
-  required: props.definition.consentToProcess.required,
-},
-
-communicationConsent: {
-  value: false,
-  error: '',
-  label: props.definition.communicationConsent.label,
-  required: props.definition.communicationConsent.required,
-},
+
+  consentToProcess: {
+    value: false,
+    error: '',
+    label: props.definition.consentToProcess.label,
+    required: props.definition.consentToProcess.required,
+  },
+
+  communicationConsent: {
+    value: false,
+    error: '',
+    label: props.definition.communicationConsent.label,
+    required: props.definition.communicationConsent.required,
+  },
 })
 
 const services = computed(() => props.definition.services.options ?? [])
@@ -123,7 +122,6 @@ const validateRequiredFields = () => {
 const resetForm = () => {
   formData.value.email.value = '';
   formData.value.firstName.value = '';
-  formData.value.lastName.value = '';
   formData.value.companyName.value = '';
   formData.value.linkedinCompanyPage.value = '';
   formData.value.description.value = '';
@@ -136,7 +134,6 @@ const resetForm = () => {
 const currentValues = (): ContactFormValues => ({
   email: formData.value.email.value,
   firstName: formData.value.firstName.value,
-  lastName: formData.value.lastName.value,
   companyName: formData.value.companyName.value,
   linkedinCompanyPage: formData.value.linkedinCompanyPage.value,
   services: formData.value.services.value,
@@ -233,6 +230,22 @@ fields.forEach((key) => {
   )
 })
 
+const companyNamePattern = /[^\p{L}\p{N} &]/u;
+const firstNamePattern = /[^\p{L} ]/u;
+
+const createSanitizer = (pattern) => {
+  return (value) => value.replace(pattern, '');
+};
+
+const sanitizeCompanyName = createSanitizer(companyNamePattern);
+const sanitizeFirstName = createSanitizer(firstNamePattern);
+
+const preventInvalidInput = (event, pattern) => {
+  if (event.data && pattern.test(event.data)) {
+    event.preventDefault();
+  }
+};
+
 </script>
 
 <template>
@@ -241,11 +254,10 @@ fields.forEach((key) => {
       <fieldset class="space-y-2">
         <InputText id="email" v-model="formData.email.value" :isRequired=formData.email.required :label=formData.email.label type="email" :isError="!!formData.email.error" :errorMessage="formData.email.error" :placeholder="formData.email.placeholder ?? ''" autocomplete="email" />
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="firstname" v-model="formData.firstName.value" :isRequired=formData.firstName.required :label=formData.firstName.label type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
-          <InputText id="lastname" v-model="formData.lastName.value" :isRequired=formData.lastName.required :label=formData.lastName.label type="text" :isError="!!formData.lastName.error" :errorMessage="formData.lastName.error" :placeholder="formData.lastName.placeholder ?? ''" autocomplete="family-name" />
+          <InputText id="firstname" v-model="formData.firstName.value" @beforeinput="event => preventInvalidInput(event, firstNamePattern)" @update:model-value="value => { formData.firstName.value = sanitizeFirstName(value) }" :isRequired="formData.firstName.required" :label="formData.firstName.label" type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
+          <InputText id="companyName" v-model="formData.companyName.value" @beforeinput="event => preventInvalidInput(event, companyNamePattern)" @update:model-value="value => { formData.companyName.value = sanitizeCompanyName(value) }" :isRequired="formData.companyName.required" :label="formData.companyName.label" type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
         </div>
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="companyName" v-model="formData.companyName.value" :isRequired=formData.companyName.required :label=formData.companyName.label type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
           <InputText id="linkedinCompanyPage" v-model="formData.linkedinCompanyPage.value" :isRequired=formData.linkedinCompanyPage.required :label=formData.linkedinCompanyPage.label type="text" :isError="!!formData.linkedinCompanyPage.error" :errorMessage="formData.linkedinCompanyPage.error" :placeholder="formData.linkedinCompanyPage.placeholder ?? ''" />
         </div>
       </fieldset>
@@ -260,22 +272,22 @@ fields.forEach((key) => {
       </fieldset>
       <div class="space-y-2">
         <Checkbox id="privacy" v-model="formData.consentToProcess.value" :label="formData.consentToProcess.label" :isRequired="formData.consentToProcess.required" :isError="!!formData.consentToProcess.error" />
-        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error"  />
+        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error" />
       </div>
     </div>
     <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
   </form>
   <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-350 left-1/2 -translate-x-1/2 md:top-40 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
-      <div v-if="alertKind === 'success'" class="w-8 h-8">
-        <component :is="SuccessIcon" class="w-8 h-8" />
-      </div>
-      <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
-        {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
-      </p>
-      <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
-        <component :is="CloseIcon" />
-      </button>
+    <div v-if="alertKind === 'success'" class="w-8 h-8">
+      <component :is="SuccessIcon" class="w-8 h-8" />
     </div>
+    <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
+      {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
+    </p>
+    <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
+      <component :is="CloseIcon" />
+    </button>
+  </div>
 </template>
 
 <style scoped>

package/dist/src/helpers/form-validator.ts

@@ -1,9 +1,10 @@
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/gim
+const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/im
 
 export const isCorrectEmailFormat = (email: string | null): boolean => {
   return !!email && emailRegex.test(email)
 }
-export const isCorrectLinkedInFormat = (linkedIn: string | null) : boolean => {
-   return !!linkedIn && linkedInRegex.test(linkedIn);
+
+export const isCorrectLinkedInFormat = (linkedIn: string | null): boolean => {
+  return !!linkedIn && linkedInRegex.test(linkedIn)
 }

package/dist/src/lib/crm/types.ts

@@ -26,7 +26,6 @@ export interface CrmFormFieldSpec {
 export type ContactFormFieldName =
   | 'email'
   | 'firstName'
-  | 'lastName'
   | 'companyName'
   | 'linkedinCompanyPage'
   | 'services'
@@ -41,7 +40,6 @@ export type ContactFormDefinition = Record<ContactFormFieldName, CrmFormFieldSpe
 export interface ContactFormValues {
   email: string;
   firstName: string;
-  lastName: string;
   companyName: string;
   linkedinCompanyPage: string;
   services: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",