From deea49c5d9e7d7596b2db1d5e05f5ea005a82e16 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Fri, 10 Nov 2023 13:02:22 +0530
Subject: [PATCH] feat: updates validation logic for edit profile

- matches server logic for firstname, lastname, name, address, city
- adds translations to editProfile.json
- groups translation text for field labels & validation errors together
- removes unreqd translation files from serverSideTranslations for page
---
 pages/profile/edit.tsx                        | 21 +----
 public/static/locales/en/editProfile.json     | 48 +++++++---
 .../Settings/EditProfile/EditProfileForm.tsx  | 87 ++++++++++++++-----
 3 files changed, 101 insertions(+), 55 deletions(-)

diff --git a/pages/profile/edit.tsx b/pages/profile/edit.tsx
index ff1099c4be..f4d35d3b27 100644
--- a/pages/profile/edit.tsx
+++ b/pages/profile/edit.tsx
@@ -25,26 +25,7 @@ export async function getStaticProps({ locale }: GetStaticPropsContext) {
     props: {
       ...(await serverSideTranslations(
         locale || 'en',
-        [
-          'bulkCodes',
-          'common',
-          'country',
-          'donate',
-          'donationLink',
-          'editProfile',
-          'giftfunds',
-          'leaderboard',
-          'managePayouts',
-          'manageProjects',
-          'maps',
-          'me',
-          'planet',
-          'planetcash',
-          'redeem',
-          'registerTrees',
-          'tenants',
-          'treemapper',
-        ],
+        ['editProfile', 'me', 'common', 'country'],
         null,
         ['en', 'de', 'fr', 'es', 'it', 'pt-BR', 'cs']
       )),
diff --git a/public/static/locales/en/editProfile.json b/public/static/locales/en/editProfile.json
index c475988c6e..b92f52cd63 100644
--- a/public/static/locales/en/editProfile.json
+++ b/public/static/locales/en/editProfile.json
@@ -2,10 +2,8 @@
   "loginTitle": "{{log}} - Login",
   "signUpText": "Complete Signup",
   "profileTypes": "{{item.title}}",
-  "profileName": "Name of {{type}}",
   "createAccount": "Create Account",
   "individual": "Person",
-  "iamA": "I am a",
   "tpo": "Reforestation Organisation",
   "education": "School",
   "organization": "Company",
@@ -13,16 +11,8 @@
   "profileCreationFailed": "Error in creating profile. Please try again.",
   "profileCreationError": "Error in creating profile.",
   "edit": "Edit Profile",
-  "privateAccount": "Private Account",
   "privateAccountTxt": "Your profile is hidden and only your first name appears in the leaderboard",
-  "subscribe": "Subscribe to news via email",
-  "profileDescription": "Profile Desciption",
-  "descriptionRequired": "You have exceeded the maximum length",
-  "website": "Website",
-  "websiteError": "Invalid website URL",
-  "websiteRequired": "Please enter valid Website URL",
   "save": "Save",
-  "nameValidation": "Please enter a name",
   "profilePicUpdated": "Profile picture is being updated...",
   "profileSaved": "Saved successfully!",
   "profileSaveFailed": "Error in updating profile.",
@@ -32,5 +22,39 @@
   "continue": "Continue",
   "cancel": "Cancel",
   "termAndCondition": "I agree to the <0>Terms and Conditions</0> of the Plant-for-the-Planet platform.",
-  "termAndConditionError": "Please Accept the Terms and Conditions"
-}
\ No newline at end of file
+  "termAndConditionError": "Please Accept the Terms and Conditions",
+  "fieldLabels": {
+    "profileType": "I am a",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "name": "Name of {{type}}",
+    "email": "Email",
+    "address": "Address",
+    "city": "City",
+    "zipCode": "Postal/Zip Code",
+    "country": "Country",
+    "bio": "Profile Desciption",
+    "website": "Website",
+    "privateAccount": "Private Account",
+    "subscribe": "Subscribe to news via email"
+  },
+  "validationErrors": {
+    "maxChars": "Should be {{max}} characters or less",
+    "firstNameRequired": "First Name field is required",
+    "firstNameInvalid": "First name is invalid. Only these special characters are allowed: space ' . -",
+    "lastNameRequired": "Last Name field is required",
+    "lastNameInvalid": "Last name is invalid. Only these special characters are allowed: space ' -",
+    "emailRequired": "Email is required",
+    "nameRequired": "Please enter a name",
+    "nameInvalid": "Name is invalid. Only these special characters are allowed: space . , ' & ( ) ! -",
+    "addressRequired": "Address is required",
+    "addressInvalid": "Address is invalid. Only these special characters are allowed: space . , # - /",
+    "cityRequired": "City is required",
+    "cityInvalid": "City is invalid. Only letters and these special characters are allowed: space . , ( ) -",
+    "zipCodeRequired": "Zip Code is required",
+    "zipCodeInvalid": "Zip Code is invalid",
+    "websiteInvalid": "Please enter valid Website URL",
+    "countryRequired": "Country is required",
+    "companyRequired": "Company Name is required"
+  }
+}
diff --git a/src/features/user/Settings/EditProfile/EditProfileForm.tsx b/src/features/user/Settings/EditProfile/EditProfileForm.tsx
index d62b08a98b..002ed75e8a 100644
--- a/src/features/user/Settings/EditProfile/EditProfileForm.tsx
+++ b/src/features/user/Settings/EditProfile/EditProfileForm.tsx
@@ -63,7 +63,7 @@ export default function EditProfileForm() {
   const { user, setUser, token, contextLoaded, logoutUser } = useUserProps();
 
   const [isUploadingData, setIsUploadingData] = React.useState(false);
-  const { t, ready } = useTranslation(['editProfile', 'donate']);
+  const { t, ready } = useTranslation(['editProfile']);
 
   const defaultProfileDetails = useMemo(() => {
     return {
@@ -342,7 +342,7 @@ export default function EditProfileForm() {
               }
             }}
             renderInput={(params) => (
-              <TextField {...params} label={t('editProfile:iamA')} />
+              <TextField {...params} label={t('fieldLabels.profileType')} />
             )}
           />
         ) : null}
@@ -350,10 +350,20 @@ export default function EditProfileForm() {
           <Controller
             name="firstname"
             control={control}
-            rules={{ required: t('donate:firstNameRequired') }}
+            rules={{
+              required: t('validationErrors.firstNameRequired'),
+              maxLength: {
+                value: 50,
+                message: t('validationErrors.maxChars', { max: 50 }),
+              },
+              pattern: {
+                value: /^[\p{L}\p{N}\sß.'-]+$/u,
+                message: t('validationErrors.firstNameInvalid'),
+              },
+            }}
             render={({ field: { onChange, value, onBlur } }) => (
               <TextField
-                label={t('donate:firstName')}
+                label={t('fieldLabels.firstName')}
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
@@ -367,10 +377,20 @@ export default function EditProfileForm() {
           <Controller
             name="lastname"
             control={control}
-            rules={{ required: t('donate:lastNameRequired') }}
+            rules={{
+              required: t('validationErrors.lastNameRequired'),
+              maxLength: {
+                value: 50,
+                message: t('validationErrors.maxChars', { max: 50 }),
+              },
+              pattern: {
+                value: /^[\p{L}\p{N}\sß'-]+$/u,
+                message: t('validationErrors.lastNameInvalid'),
+              },
+            }}
             render={({ field: { onChange, value, onBlur } }) => (
               <TextField
-                label={t('donate:lastName')}
+                label={t('fieldLabels.lastName')}
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
@@ -383,7 +403,7 @@ export default function EditProfileForm() {
           />
         </InlineFormDisplayGroup>
         <TextField
-          label={t('donate:email')}
+          label={t('fieldLabels.email')}
           name="email"
           defaultValue={user?.email}
           disabled
@@ -392,10 +412,16 @@ export default function EditProfileForm() {
           <Controller
             name="name"
             control={control}
-            rules={{ required: t('editProfile:nameValidation') }}
+            rules={{
+              required: t('validationErrors.nameRequired'),
+              pattern: {
+                value: /^[\p{L}\p{N}\sß.,'&()!-]+$/u,
+                message: t('validationErrors.nameInvalid'),
+              },
+            }}
             render={({ field: { onChange, value, onBlur } }) => (
               <TextField
-                label={t('editProfile:profileName', {
+                label={t('fieldLabels.name', {
                   type: selectUserType(type, t),
                 })}
                 onChange={onChange}
@@ -411,12 +437,18 @@ export default function EditProfileForm() {
           <Controller
             name="address"
             control={control}
-            rules={{ required: t('donate:addressRequired') }}
+            rules={{
+              required: t('validationErrors.addressRequired'),
+              pattern: {
+                value: /^[\p{L}\p{N}\sß.,#/-]+$/u,
+                message: t('validationErrors.addressInvalid'),
+              },
+            }}
             render={({
               field: { onChange: handleChange, value, onBlur: handleBlur },
             }) => (
               <TextField
-                label={t('donate:address')}
+                label={t('fieldLabels.address')}
                 onChange={(event) => {
                   suggestAddress(event.target.value);
                   handleChange(event);
@@ -457,10 +489,16 @@ export default function EditProfileForm() {
           <Controller
             name="city"
             control={control}
-            rules={{ required: t('donate:cityRequired') }}
+            rules={{
+              required: t('validationErrors.cityRequired'),
+              pattern: {
+                value: /^[\p{L}\sß.,()-]+$/u,
+                message: t('validationErrors.cityInvalid'),
+              },
+            }}
             render={({ field: { onChange, value, onBlur } }) => (
               <TextField
-                label={t('donate:city')}
+                label={t('fieldLabels.city')}
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
@@ -473,12 +511,15 @@ export default function EditProfileForm() {
             name="zipCode"
             control={control}
             rules={{
-              required: t('donate:zipCodeAlphaNumValidation'),
-              pattern: postalRegex,
+              required: t('validationErrors.zipCodeRequired'),
+              pattern: {
+                value: postalRegex as RegExp,
+                message: t('validationErrors.zipCodeInvalid'),
+              },
             }}
             render={({ field: { onChange, value, onBlur } }) => (
               <TextField
-                label={t('donate:zipCode')}
+                label={t('fieldLabels.zipCode')}
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
@@ -493,7 +534,7 @@ export default function EditProfileForm() {
         <AutoCompleteCountry
           defaultValue={country}
           onChange={setCountry}
-          label={t('donate:country')}
+          label={t('fieldLabels.country')}
           name="editProfile"
           countries={allCountries}
         />
@@ -504,7 +545,7 @@ export default function EditProfileForm() {
               className={styles.mainText}
               style={{ cursor: 'pointer' }}
             >
-              {t('editProfile:privateAccount')}
+              {t('fieldLabels.privateAccount')}
             </label>{' '}
             <br />
             {watchIsPrivate && (
@@ -533,7 +574,7 @@ export default function EditProfileForm() {
             className={styles.mainText}
             style={{ cursor: 'pointer' }}
           >
-            {t('editProfile:subscribe')}
+            {t('fieldLabels.subscribe')}
           </label>
 
           <Controller
@@ -558,12 +599,12 @@ export default function EditProfileForm() {
           rules={{
             maxLength: {
               value: 300,
-              message: t('editProfile:descriptionRequired'),
+              message: t('validationErrors.maxChars', { max: 300 }),
             },
           }}
           render={({ field: { onChange, value, onBlur } }) => (
             <TextField
-              label={t('editProfile:profileDescription')}
+              label={t('fieldLabels.bio')}
               onChange={onChange}
               onBlur={onBlur}
               value={value}
@@ -583,12 +624,12 @@ export default function EditProfileForm() {
               //value: /^(?:http(s)?:\/\/)?[\w\.\-]+(?:\.[\w\.\-]+)+[\w\.\-_~:/?#[\]@!\$&'\(\)\*\+,;=#%]+$/,
               value:
                 /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=*]*)$/,
-              message: t('editProfile:websiteRequired'),
+              message: t('validationErrors.websiteInvalid'),
             },
           }}
           render={({ field: { onChange, value, onBlur } }) => (
             <TextField
-              label={t('editProfile:website')}
+              label={t('fieldLabels.website')}
               onChange={onChange}
               onBlur={onBlur}
               value={value}