Amina/77702_personal_details_validation_on_duplicate_account

src/javascript/app/pages/user/new_account/new_account_form_config/address-details-config.js

@@ -1,55 +1,63 @@
 const AddressDetailForm = require('../new_account_modules/address_detail_form');
 const localize = require('../../../../../_common/localize').localize;
 
-const getAddressDetailsConfig = ({ account_settings, is_svg }) => [
-    {
-        id           : 'address_line_1',
-        section      : 'address_section',
-        supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
-        default_value: account_settings.address_line_1 || '',
-        rules        : ['req', 'address', ['length', { min: 1, max: 700 }]],
-    },
-    {
-        id           : 'address_line_2',
-        section      : 'address_section',
-        supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
-        default_value: account_settings.address_line_2 || '',
-        rules        : [['length', { min: 0, max: 70 }]],
-    },
-    {
-        id           : 'address_city',
-        section      : 'address_section',
-        supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
-        default_value: account_settings.address_city || '',
-        rules        : [
-            'req', 'address_city',
-            ['regular', { regex: /^[a-zA-Z\s\W'.-]{1,35}$/ }],
-        ],
-    },
-    {
-        id           : 'address_state',
-        section      : 'address_section',
-        supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
-        default_value: account_settings.address_state || '',
-        rules        : [
-            ['regular', { regex: /^[\w\s\W'.-;,]{0,60}$/ }],
-            // Isle of Man and SVG Clients do not need to fill out state.
-            ...(account_settings.country_code === 'im' || is_svg ? [] : ['req']),
-        ],
-    },
-    {
-        id           : 'address_postcode',
-        section      : 'address_section',
-        supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
-        default_value: account_settings.address_postcode || '',
-        rules        : [
-            ['length', { min: 0, max: 20 }],
-            'postcode',
-            // GB and IM residence are required to fill in the post code.
-            ...(/^(im|gb)$/.test(account_settings.country_code) ? ['req'] : []),
-        ],
-    },
-];
+const getAddressDetailsConfig = ({ account_settings, is_svg }) => {
+    const isImmutable = (field) => account_settings.immutable_fields.includes(field);
+    return ([
+        {
+            id           : 'address_line_1',
+            section      : 'address_section',
+            supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
+            default_value: account_settings.address_line_1 || '',
+            is_immutable : isImmutable('address_line_1'),
+            rules        : ['req', 'address', ['length', { min: 1, max: 700 }]],
+        },
+        {
+            id           : 'address_line_2',
+            section      : 'address_section',
+            supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
+            default_value: account_settings.address_line_2 || '',
+            is_immutable : isImmutable('address_line_2'),
+            rules        : [['length', { min: 0, max: 70 }]],
+        },
+        {
+            id           : 'address_city',
+            section      : 'address_section',
+            supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
+            default_value: account_settings.address_city || '',
+            is_immutable : isImmutable('address_city'),
+            rules        : [
+                'req', 'address_city',
+                ['regular', { regex: /^[a-zA-Z\s\W'.-]{1,35}$/ }],
+            ],
+        },
+        {
+            id           : 'address_state',
+            section      : 'address_section',
+            supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
+            default_value: account_settings.address_state || '',
+            is_immutable : isImmutable('address_state'),
+            rules        : [
+                ['regular', { regex: /^[\w\s\W'.-;,]{0,60}$/ }],
+                // Isle of Man and SVG Clients do not need to fill out state.
+                ...(account_settings.country_code === 'im' || is_svg ? [] : ['req']),
+            ],
+        },
+        {
+            id           : 'address_postcode',
+            section      : 'address_section',
+            supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
+            default_value: account_settings.address_postcode || '',
+            is_immutable : isImmutable('address_postcode'),
+            rules        : [
+                ['length', { min: 0, max: 20 }],
+                'postcode',
+                // GB and IM residence are required to fill in the post code.
+                ...(/^(im|gb)$/.test(account_settings.country_code) ? ['req'] : []),
+            ],
+        },
+    ]);
+};
 
 const getRequiredFields = (landing_company, all_fields) =>
     all_fields.filter(field => field.supported_in.includes(landing_company));

src/javascript/app/pages/user/new_account/new_account_form_config/personal-details-config.js

@@ -2,29 +2,30 @@ const localize = require('../../../../../_common/localize').localize;
 const PersonalDetailForm = require('../new_account_modules/personal_detail_form');
 
 const getPersonalDetailsConfig = ({ account_settings, residence_list }) => {
+    const isImmutable = (field) => account_settings.immutable_fields.includes(field);
     const config = [
         {
             id           : 'salutation',
             section      : 'name',
             supported_in : ['iom', 'malta', 'maltainvest'],
             default_value: account_settings.salutation || '',
-            is_immutable : true,
+            is_immutable : isImmutable('salutation'),
             rules        : ['req'],
         },
         {
             id           : 'first_name',
             section      : 'name',
             supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
             default_value: account_settings.first_name || '',
-            is_immutable : true,
+            is_immutable : isImmutable('first_name'),
             rules        : ['req', 'letter_symbol', ['length', { min: 2, max: 50 }]],
         },
         {
             id           : 'last_name',
             section      : 'name',
             supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
             default_value: account_settings.last_name || '',
-            is_immutable : true,
+            is_immutable : isImmutable('last_name'),
             rules        : ['req', 'letter_symbol', ['length', { min: 2, max: 50 }]],
         },
         {
@@ -34,30 +35,31 @@ const getPersonalDetailsConfig = ({ account_settings, residence_list }) => {
             default_value: account_settings.date_of_birth
                 ? account_settings.date_of_birth
                 : '',
-            is_immutable: true,
+            is_immutable: isImmutable('date_of_birth'),
             rules       : ['req'],
         },
         {
             id           : 'place_of_birth',
             section      : 'detail',
             supported_in : ['maltainvest', 'iom', 'malta'],
             default_value: account_settings.place_of_birth || '',
-            is_immutable : true,
+            is_immutable : isImmutable('place_of_birth'),
             rules        : ['req'],
         },
         {
             id           : 'citizen',
             section      : 'detail',
             supported_in : ['iom', 'malta', 'maltainvest'],
             default_value: account_settings.citizen || '',
-            is_immutable : true,
+            is_immutable : isImmutable('citizen'),
             rules        : ['req'],
         },
         {
             id           : 'phone',
             section      : 'detail',
             supported_in : ['svg', 'iom', 'malta', 'maltainvest'],
             default_value: account_settings.phone || '',
+            is_immutable : isImmutable('phone'),
             rules        : ['req', 'phone', ['length',
                 { min: 9, max: 35, value: () => $('#phone').val().replace(/\D/g, '') },
             ]],
@@ -67,13 +69,15 @@ const getPersonalDetailsConfig = ({ account_settings, residence_list }) => {
             section      : 'tax',
             supported_in : ['maltainvest'],
             default_value: account_settings.tax_residence || '',
+            is_immutable : isImmutable('tax_residence'),
             rules        : ['req', ['length', { min: 1, max: 20 }]],
         },
         {
             id           : 'tax_identification_number',
             section      : 'tax',
             supported_in : ['maltainvest'],
             default_value: account_settings.tax_identification_number || '',
+            is_immutable : isImmutable('tax_identification_numbe'),
             rules        : [
                 'req',
                 ['tax_id', { residence_list, $warning: $('#tax_id_warning'), $tax_residence: $('#tax_residence') }],
@@ -85,20 +89,23 @@ const getPersonalDetailsConfig = ({ account_settings, residence_list }) => {
             section      : 'tax',
             supported_in : ['maltainvest'],
             default_value: false,
+            is_immutable : isImmutable('tax_identification_confirm'),
             rules        : ['req'],
         },
         {
             id           : 'account_opening_reason',
             section      : 'account_opening_reason',
             supported_in : ['iom', 'malta', 'maltainvest'],
             default_value: account_settings.account_opening_reason || '',
+            is_immutable : isImmutable('account_opening_reason'),
             rules        : ['req'],
         },
         {
             id           : 'accurate_answer_warning',
             section      : '',
             supported_in : ['maltainvest'],
             default_value: '',
+            is_immutable : isImmutable('accurate_answer_warning'),
             rules        : [],
         },
     ];

src/javascript/app/pages/user/new_account/new_account_modules/address_detail_form.js

@@ -20,6 +20,15 @@ const AddressDetailForm = (() => {
 
             getElementById(`${field.section}_section`).setVisibility(1);
             getElementById(`${field.id}_row`).setVisibility(1);
+            if (field.is_immutable) {
+                if (field.id === 'address_state') {
+                    $('#address_state').parent().css('pointer-events', 'none');
+                    $('#select2-address_state-container').addClass('immutable-field');
+                    $('#select2-address_state-container').parent().addClass('white-bg-color');
+                } else {
+                    $(`#${field.id}`).attr('disabled', 'disabled').addClass('immutable-field');
+                }
+            }
         });
     };
 

src/javascript/app/pages/user/new_account/new_account_modules/personal_detail_form.js

@@ -67,7 +67,7 @@ const PersonalDetailForm = (() => {
             }
             getElementById(`${field.section}_section`).setVisibility(1);
             getElementById(`${field.id}_row`).setVisibility(1);
-            if (field.is_immutable && field.default_value !== '') $(`#${field.id}`).attr('disabled', 'disabled');
+            if (field.is_immutable) $(`#${field.id}`).attr('disabled', 'disabled').addClass('immutable-field');
         });
     };
 

src/sass/_common/common.scss

@@ -96,6 +96,12 @@ a.button-disabled {
     pointer-events: none;
 }
 
+.immutable-field {
+    pointer-events: none;
+    -webkit-text-fill-color: $COLOR_GRAY; // to make disabled field normal one in ios
+    opacity: 1; /* required for iphone */
+}
+
 span.checked {
     background: url('../images/pages/authenticate/checked.svg') no-repeat;
     width: 16px;