Merge pull request #599 from vtex/feat/add-autoUpperCase-rule

add autoUpperCase rule for alphanumerical postalCode countries
vtex · Jul 29, 2024 · f48ebb8 · f48ebb8
2 parents 0b438d4 + 5a54b17
commit f48ebb8
Show file tree

Hide file tree

Showing 11 changed files with 351 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- implemented autoUpperCase rule for countries with alphanumeric postal codes, ensuring consistent uppercase formatting.
+
 ## [3.36.6] - 2024-07-23
 
 ### Fixed

diff --git a/react/AddressContainer.js b/react/AddressContainer.js
@@ -75,6 +75,11 @@ class AddressContainer extends Component {
         rules.fields &&
         rules.fields.find((field) => field.name === 'postalCode')
 
+      // Convert postal code to uppercase if autoUpperCase is true
+      if (postalCodeField && postalCodeField.autoUpperCase) {
+        changedAddressFields.postalCode.value = changedAddressFields.postalCode.value.toUpperCase()
+      }
+
       const diffFromPrev =
         address.postalCode.value !== validatedAddress.postalCode.value
 

diff --git a/react/country/CAN.ts b/react/country/CAN.ts
@@ -26,6 +26,7 @@ const rules: PostalCodeRules = {
         'https://www.canadapost.ca/cpo/mc/personal/postalcode/fpc.jsf',
       size: 'small',
       autoComplete: 'nope',
+      autoUpperCase: true,
     },
     {
       name: 'street',

diff --git a/react/country/GBR.ts b/react/country/GBR.ts
@@ -23,6 +23,7 @@ const rules: PostalCodeRules = {
       postalCodeAPI: false,
       size: 'small',
       autoComplete: 'nope',
+      autoUpperCase: true,
     },
     {
       name: 'street',
@@ -128,10 +129,7 @@ const rules: PostalCodeRules = {
 
     state: {
       valueIn: 'long_name',
-      types: [
-        'postal_town',
-        'administrative_area_level_1'
-      ],
+      types: ['postal_town', 'administrative_area_level_1'],
     },
 
     city: {

diff --git a/react/country/GIB.ts b/react/country/GIB.ts
@@ -0,0 +1,159 @@
+import { POSTAL_CODE } from '../constants'
+import type { PostalCodeRules } from '../types/rules'
+
+const rules: PostalCodeRules = {
+  country: null,
+  abbr: null,
+  postalCodeFrom: POSTAL_CODE,
+  fields: [
+    {
+      hidden: true,
+      name: 'country',
+      maxLength: 100,
+      label: 'country',
+      size: 'medium',
+    },
+    {
+      name: 'postalCode',
+      maxLength: 50,
+      label: 'postalCode',
+      size: 'small',
+      autoComplete: 'nope',
+      postalCodeAPI: false,
+      autoUpperCase: true,
+    },
+    {
+      name: 'street',
+      label: 'addressLine1',
+      required: true,
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'number',
+      maxLength: 750,
+      label: 'number',
+      size: 'small',
+      autoComplete: 'nope',
+    },
+    {
+      name: 'complement',
+      maxLength: 750,
+      label: 'addressLine2',
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'reference',
+      maxLength: 750,
+      label: 'reference',
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'neighborhood',
+      maxLength: 100,
+      label: 'neighborhood',
+      size: 'large',
+    },
+    {
+      name: 'city',
+      maxLength: 100,
+      label: 'city',
+      required: true,
+      size: 'large',
+    },
+    {
+      name: 'state',
+      maxLength: 100,
+      label: 'state',
+      required: true,
+      size: 'large',
+    },
+    {
+      name: 'receiverName',
+      elementName: 'receiver',
+      maxLength: 750,
+      label: 'receiverName',
+      size: 'xlarge',
+      required: true,
+    },
+  ],
+  geolocation: {
+    postalCode: {
+      valueIn: 'long_name',
+      types: ['postal_code'],
+      required: false,
+    },
+
+    number: {
+      valueIn: 'long_name',
+      types: ['street_number'],
+      required: false,
+      notApplicable: true,
+    },
+
+    street: { valueIn: 'long_name', types: ['route'] },
+
+    neighborhood: {
+      valueIn: 'long_name',
+      types: [
+        'neighborhood',
+        'sublocality_level_1',
+        'sublocality_level_2',
+        'sublocality_level_3',
+        'sublocality_level_4',
+        'sublocality_level_5',
+      ],
+    },
+
+    state: {
+      valueIn: 'long_name',
+      types: ['administrative_area_level_1'],
+    },
+
+    city: {
+      valueIn: 'long_name',
+      types: ['administrative_area_level_2', 'locality'],
+    },
+
+    receiverName: {
+      required: true,
+    },
+  },
+  summary: [
+    [
+      {
+        name: 'street',
+      },
+      {
+        delimiter: ' ',
+        name: 'number',
+      },
+      {
+        delimiter: ', ',
+        name: 'complement',
+      },
+    ],
+    [
+      {
+        name: 'neighborhood',
+        delimiterAfter: ' - ',
+      },
+      {
+        name: 'city',
+      },
+      {
+        delimiter: ' - ',
+        name: 'state',
+      },
+    ],
+    [
+      {
+        name: 'postalCode',
+      },
+    ],
+  ],
+}
+
+export default rules
diff --git a/react/country/IRL.ts b/react/country/IRL.ts
@@ -24,6 +24,7 @@ const rules: PostalCodeRules = {
       postalCodeAPI: true,
       size: 'small',
       autoComplete: 'nope',
+      autoUpperCase: true,
     },
     {
       name: 'street',

diff --git a/react/country/LTU.ts b/react/country/LTU.ts
@@ -0,0 +1,159 @@
+import { POSTAL_CODE } from '../constants'
+import type { PostalCodeRules } from '../types/rules'
+
+const rules: PostalCodeRules = {
+  country: null,
+  abbr: null,
+  postalCodeFrom: POSTAL_CODE,
+  fields: [
+    {
+      hidden: true,
+      name: 'country',
+      maxLength: 100,
+      label: 'country',
+      size: 'medium',
+    },
+    {
+      name: 'postalCode',
+      maxLength: 50,
+      label: 'postalCode',
+      size: 'small',
+      autoComplete: 'nope',
+      postalCodeAPI: false,
+      autoUpperCase: true,
+    },
+    {
+      name: 'street',
+      label: 'addressLine1',
+      required: true,
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'number',
+      maxLength: 750,
+      label: 'number',
+      size: 'small',
+      autoComplete: 'nope',
+    },
+    {
+      name: 'complement',
+      maxLength: 750,
+      label: 'addressLine2',
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'reference',
+      maxLength: 750,
+      label: 'reference',
+      size: 'xlarge',
+    },
+    {
+      hidden: true,
+      name: 'neighborhood',
+      maxLength: 100,
+      label: 'neighborhood',
+      size: 'large',
+    },
+    {
+      name: 'city',
+      maxLength: 100,
+      label: 'city',
+      required: true,
+      size: 'large',
+    },
+    {
+      name: 'state',
+      maxLength: 100,
+      label: 'state',
+      required: true,
+      size: 'large',
+    },
+    {
+      name: 'receiverName',
+      elementName: 'receiver',
+      maxLength: 750,
+      label: 'receiverName',
+      size: 'xlarge',
+      required: true,
+    },
+  ],
+  geolocation: {
+    postalCode: {
+      valueIn: 'long_name',
+      types: ['postal_code'],
+      required: false,
+    },
+
+    number: {
+      valueIn: 'long_name',
+      types: ['street_number'],
+      required: false,
+      notApplicable: true,
+    },
+
+    street: { valueIn: 'long_name', types: ['route'] },
+
+    neighborhood: {
+      valueIn: 'long_name',
+      types: [
+        'neighborhood',
+        'sublocality_level_1',
+        'sublocality_level_2',
+        'sublocality_level_3',
+        'sublocality_level_4',
+        'sublocality_level_5',
+      ],
+    },
+
+    state: {
+      valueIn: 'long_name',
+      types: ['administrative_area_level_1'],
+    },
+
+    city: {
+      valueIn: 'long_name',
+      types: ['administrative_area_level_2', 'locality'],
+    },
+
+    receiverName: {
+      required: true,
+    },
+  },
+  summary: [
+    [
+      {
+        name: 'street',
+      },
+      {
+        delimiter: ' ',
+        name: 'number',
+      },
+      {
+        delimiter: ', ',
+        name: 'complement',
+      },
+    ],
+    [
+      {
+        name: 'neighborhood',
+        delimiterAfter: ' - ',
+      },
+      {
+        name: 'city',
+      },
+      {
+        delimiter: ' - ',
+        name: 'state',
+      },
+    ],
+    [
+      {
+        name: 'postalCode',
+      },
+    ],
+  ],
+}
+
+export default rules