From cfd513d64f2619bf8d9659c9a79751d947e1db32 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:45:32 +0530
Subject: [PATCH 01/20] feat: set address type modal UI

---
 public/static/locales/en/profile.json         |  4 +-
 .../AddressManagment/AddressForm.tsx          |  8 +-
 .../AddressManagement.module.scss             | 77 +++++++++++++------
 .../AddressManagment/AddressTypeChange.tsx    | 57 ++++++++++++++
 .../microComponents/SingleAddress.tsx         | 37 ++++++---
 5 files changed, 144 insertions(+), 39 deletions(-)
 create mode 100644 src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index fda72e7a7..0b102b933 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -150,7 +150,9 @@
       "formType": {
         "add": "Add Address",
         "edit": "Edit Address"
-      }
+      },
+      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType} Address? This will replace your current {addressType} Address.",
+      "confirm": "Confirm"
     }
   }
 }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
index 3d64b93cb..2db1753b0 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
@@ -228,7 +228,9 @@ const AddressForm = ({
   };
   return (
     <div className={styles.addressFormContainer}>
-      <h1>{tProfile(`addressManagement.formType.${formType}`)}</h1>
+      <h1 className={styles.addressActionHeader}>
+        {tProfile(`addressManagement.formType.${formType}`)}
+      </h1>
       <form className={styles.addressForm}>
         <AddressInput
           name="address"
@@ -335,13 +337,12 @@ const AddressForm = ({
           <CircularProgress color="success" />
         </div>
       ) : (
-        <div className={styles.formButtonContainer}>
+        <div className={styles.buttonContainer}>
           <WebappButton
             text={tCommon('cancel')}
             variant="secondary"
             elementType="button"
             onClick={closeModal}
-            buttonClasses={styles.cancelButton}
           />
           <WebappButton
             text={
@@ -354,7 +355,6 @@ const AddressForm = ({
             onClick={handleSubmit(
               formType === 'add' ? addNewAddress : editAddress
             )}
-            buttonClasses={styles.addAddressButton}
           />
         </div>
       )}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
index 943277a68..48b93e066 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
@@ -82,11 +82,15 @@
 }
 // address action form
 
+.addressActionHeader {
+  font-weight: 700;
+  font-size: $fontSixteen;
+}
 .addressFormContainer {
+  min-width: 565px;
   display: flex;
   flex-direction: column;
   gap: 40px;
-  min-width: 565px;
   background: rgba(255, 255, 255, 1);
   border-radius: 16px;
   padding: 20px;
@@ -94,26 +98,49 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  h1 {
-    font-weight: 700;
-    font-size: $fontSixteen;
+  .addressForm {
+    display: flex;
+    flex-direction: column;
+    gap: 23px;
+  }
+  .buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    button {
+      min-width: 252px;
+      min-height: 40px;
+    }
   }
 }
-
-.addressForm {
+.addrConfirmContainer {
+  width: 468px;
   display: flex;
+  gap: 10px;
   flex-direction: column;
-  gap: 23px;
-}
+  background: rgba(255, 255, 255, 1);
+  border-radius: 16px;
+  padding: 20px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  .address {
+    width: 100%;
+    background: rgba(242, 242, 242, 0.5);
+    border-radius: 8px;
+    font-size: $fontSmall;
+    font-weight: 400;
+    padding: 24px;
+  }
 
-.formButtonContainer {
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  .addAddressButton,
-  .cancelButton {
-    min-width: 252px;
-    min-height: 40px;
+  .buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    button {
+      min-width: 206px;
+      min-height: 40px;
+    }
   }
 }
 
@@ -121,13 +148,19 @@
   .addressFormContainer {
     min-width: fit-content;
     width: 95%;
+    .buttonContainer {
+      display: flex;
+      flex-direction: column;
+      button {
+        width: 100%;
+      }
+    }
   }
-  .formButtonContainer {
-    display: flex;
-    flex-direction: column;
-    .addAddressButton,
-    .cancelButton {
-      width: 100%;
+  .addrConfirmContainer {
+    width: 95%;
+    .buttonContainer {
+      flex-direction: column;
+      gap: 8px;
     }
   }
 }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
new file mode 100644
index 000000000..7cb67733c
--- /dev/null
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
@@ -0,0 +1,57 @@
+import { UpdatedAddress } from '.';
+import { ADDRESS_ACTIONS } from '../../../../../utils/addressManagement';
+import styles from './AddressManagement.module.scss';
+import { useTranslations } from 'next-intl';
+import { AddressAction } from './microComponents/AddressActionMenu';
+import WebappButton from '../../../../common/WebappButton';
+import { SetState } from '../../../../common/types/common';
+
+interface Props {
+  addressAction: AddressAction;
+  formattedAddress: string;
+  setIsModalOpen: SetState<boolean>;
+}
+
+const AddressTypeChange = ({
+  addressAction,
+  formattedAddress,
+  setIsModalOpen,
+}: Props) => {
+  const tProfile = useTranslations('Profile.addressManagement');
+  const tCommon = useTranslations('Common');
+  const changeAddressType = () => {};
+  return (
+    <div className={styles.addrConfirmContainer}>
+      <h1 className={styles.addressActionHeader}>
+        {addressAction === ADDRESS_ACTIONS.SET_BILLING
+          ? tProfile('BillingAddress')
+          : tProfile('primaryAddress')}
+      </h1>
+      <p>
+        {tProfile('addressConfirmationMessage', {
+          addressType:
+            addressAction === ADDRESS_ACTIONS.SET_BILLING
+              ? 'Billing'
+              : 'Primary',
+        })}
+      </p>
+      <p className={styles.address}>{formattedAddress}</p>
+      <div className={styles.buttonContainer}>
+        <WebappButton
+          text={tCommon('cancel')}
+          elementType="button"
+          variant="secondary"
+          onClick={() => setIsModalOpen(false)}
+        />
+        <WebappButton
+          text={tProfile('confirm')}
+          elementType="button"
+          variant="primary"
+          onClick={changeAddressType}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AddressTypeChange;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index 7551714af..b781f9b34 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -12,6 +12,7 @@ import AddressContent from './AddressContent';
 import AddressActionsMenu from './AddressActionMenu';
 import AddressForm from '../AddressForm';
 import { ADDRESS_ACTIONS } from '../../../../../../utils/addressManagement';
+import AddressTypeChange from '../AddressTypeChange';
 
 interface Props {
   userAddress: UpdatedAddress;
@@ -54,18 +55,30 @@ const SingleAddress = ({
         setIsModalOpen={setIsModalOpen}
       />
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
-        {addressAction === ADDRESS_ACTIONS.EDIT ? (
-          <AddressForm
-            formType="edit"
-            addressAction={addressAction}
-            setIsModalOpen={setIsModalOpen}
-            setUserAddresses={setUserAddresses}
-            userAddress={userAddress}
-            fetchUserAddresses={fetchUserAddresses}
-          />
-        ) : (
-          <></>
-        )}
+        <>
+          {addressAction === ADDRESS_ACTIONS.EDIT ? (
+            <AddressForm
+              formType="edit"
+              addressAction={addressAction}
+              setIsModalOpen={setIsModalOpen}
+              setUserAddresses={setUserAddresses}
+              userAddress={userAddress}
+              fetchUserAddresses={fetchUserAddresses}
+            />
+          ) : (
+            <></>
+          )}
+          {addressAction === ADDRESS_ACTIONS.SET_BILLING ||
+          addressAction === ADDRESS_ACTIONS.SET_PRIMARY ? (
+            <AddressTypeChange
+              addressAction={addressAction}
+              formattedAddress={formattedAddress}
+              setIsModalOpen={setIsModalOpen}
+            />
+          ) : (
+            <></>
+          )}
+        </>
       </Modal>
     </div>
   );

From 26c7cd3e73b34b5544a16acb71e71c792f512efb Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:11:02 +0530
Subject: [PATCH 02/20] feat: modify the edit address api to handle change
 address type

---
 .../AddressManagment/AddressForm.tsx          | 54 ++++------------
 .../AddressManagement.module.scss             |  1 +
 .../AddressManagment/AddressTypeChange.tsx    | 20 +++---
 .../microComponents/SingleAddress.tsx         | 62 +++++++++++++++----
 4 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
index 2db1753b0..3634e5a81 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
@@ -19,22 +19,17 @@ import SelectCountry from '../../../../common/InputTypes/AutoCompleteCountry';
 import { allCountries } from '../../../../../utils/constants/countries';
 import COUNTRY_ADDRESS_POSTALS from '../../../../../utils/countryZipCode';
 import { useUserProps } from '../../../../common/Layout/UserPropsContext';
-import {
-  postAuthenticatedRequest,
-  putAuthenticatedRequest,
-} from '../../../../../utils/apiRequests/api';
+import { postAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
 import {
   ADDRESS_TYPE,
-  getAddressType,
   validationPattern,
 } from '../../../../../utils/addressManagement';
 import { useDebouncedEffect } from '../../../../../utils/useDebouncedEffect';
 import AddressInput from './microComponents/AddressInput';
-import { AddressAction } from './microComponents/AddressActionMenu';
 
-type FormData = {
+export type AddressFormData = {
   address: string | undefined;
   address2: string | null;
   city: string | undefined;
@@ -47,8 +42,10 @@ interface Props {
   setIsModalOpen: SetState<boolean>;
   setUserAddresses: SetState<UpdatedAddress[]>;
   userAddress?: UpdatedAddress;
-  addressAction?: AddressAction | null;
-  fetchUserAddresses?: () => Promise<void>;
+  editAddress: (
+    data: AddressFormData | null,
+    addressType: string
+  ) => Promise<void>;
 }
 const geocoder = new GeocoderArcGIs(
   process.env.ESRI_CLIENT_SECRET
@@ -60,11 +57,10 @@ const geocoder = new GeocoderArcGIs(
 );
 const AddressForm = ({
   formType,
-  addressAction,
   setIsModalOpen,
   setUserAddresses,
   userAddress,
-  fetchUserAddresses,
+  editAddress,
 }: Props) => {
   const defaultAddressDetail = {
     address: userAddress ? userAddress.address : '',
@@ -79,7 +75,7 @@ const AddressForm = ({
     setValue,
     reset,
     formState: { errors },
-  } = useForm<FormData>({
+  } = useForm<AddressFormData>({
     mode: 'onBlur',
     defaultValues: defaultAddressDetail,
   });
@@ -162,35 +158,7 @@ const AddressForm = ({
     resetForm();
   };
 
-  const editAddress = async (data: FormData) => {
-    if (!addressAction || !userAddress) return;
-    setIsUploadingData(true);
-    const bodyToSend = {
-      ...data,
-      country,
-      type: getAddressType(formType, userAddress.type),
-    };
-    try {
-      const res = await putAuthenticatedRequest<UpdatedAddress>(
-        tenantConfig.id,
-        `/app/addresses/${userAddress?.id}`,
-        bodyToSend,
-        token,
-        logoutUser
-      );
-      if (res && fetchUserAddresses) {
-        fetchUserAddresses();
-        closeModal();
-      }
-    } catch (error) {
-      setIsUploadingData(false);
-      setErrors(handleError(error as APIError));
-    } finally {
-      setIsUploadingData(false);
-    }
-  };
-
-  const addNewAddress = async (data: FormData) => {
+  const addNewAddress = async (data: AddressFormData) => {
     setIsUploadingData(true);
     const bodyToSend = {
       ...data,
@@ -353,7 +321,9 @@ const AddressForm = ({
             variant="primary"
             elementType="button"
             onClick={handleSubmit(
-              formType === 'add' ? addNewAddress : editAddress
+              formType === 'add'
+                ? addNewAddress
+                : (data) => editAddress(data, '')
             )}
           />
         </div>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
index 48b93e066..e74c54de4 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
@@ -137,6 +137,7 @@
   .buttonContainer {
     display: flex;
     justify-content: space-between;
+    margin-top: 40px;
     button {
       min-width: 206px;
       min-height: 40px;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
index 7cb67733c..ac9fb2f65 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
@@ -1,38 +1,40 @@
-import { UpdatedAddress } from '.';
 import { ADDRESS_ACTIONS } from '../../../../../utils/addressManagement';
 import styles from './AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
 import { AddressAction } from './microComponents/AddressActionMenu';
 import WebappButton from '../../../../common/WebappButton';
 import { SetState } from '../../../../common/types/common';
+import { AddressFormData } from './AddressForm';
 
 interface Props {
   addressAction: AddressAction;
   formattedAddress: string;
   setIsModalOpen: SetState<boolean>;
+  editAddress: (
+    data: AddressFormData | null,
+    addressType: string
+  ) => Promise<void>;
 }
 
 const AddressTypeChange = ({
   addressAction,
   formattedAddress,
   setIsModalOpen,
+  editAddress,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
-  const changeAddressType = () => {};
+  const isBillingAddress = addressAction === ADDRESS_ACTIONS.SET_BILLING;
   return (
     <div className={styles.addrConfirmContainer}>
       <h1 className={styles.addressActionHeader}>
-        {addressAction === ADDRESS_ACTIONS.SET_BILLING
+        {isBillingAddress
           ? tProfile('BillingAddress')
           : tProfile('primaryAddress')}
       </h1>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType:
-            addressAction === ADDRESS_ACTIONS.SET_BILLING
-              ? 'Billing'
-              : 'Primary',
+          addressType: isBillingAddress ? 'Billing' : 'Primary',
         })}
       </p>
       <p className={styles.address}>{formattedAddress}</p>
@@ -47,7 +49,9 @@ const AddressTypeChange = ({
           text={tProfile('confirm')}
           elementType="button"
           variant="primary"
-          onClick={changeAddressType}
+          onClick={() =>
+            editAddress(null, isBillingAddress ? 'mailing' : 'primary')
+          }
         />
       </div>
     </div>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index b781f9b34..9d7e071f5 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -1,18 +1,26 @@
 import type { UpdatedAddress } from '..';
 import type { SetState } from '../../../../../common/types/common';
 import type { AddressAction } from './AddressActionMenu';
-import type { CountryCode } from '@planet-sdk/common';
+import type { APIError, CountryCode } from '@planet-sdk/common';
 
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Modal } from '@mui/material';
 import { useTranslations } from 'next-intl';
-import { formatAddress } from '../../../../../../utils/addressManagement';
+import { handleError } from '@planet-sdk/common';
+import {
+  formatAddress,
+  getAddressType,
+} from '../../../../../../utils/addressManagement';
 import styles from '../AddressManagement.module.scss';
 import AddressContent from './AddressContent';
 import AddressActionsMenu from './AddressActionMenu';
-import AddressForm from '../AddressForm';
+import AddressForm, { AddressFormData } from '../AddressForm';
 import { ADDRESS_ACTIONS } from '../../../../../../utils/addressManagement';
 import AddressTypeChange from '../AddressTypeChange';
+import { putAuthenticatedRequest } from '../../../../../../utils/apiRequests/api';
+import { useTenant } from '../../../../../common/Layout/TenantContext';
+import { useUserProps } from '../../../../../common/Layout/UserPropsContext';
+import { ErrorHandlingContext } from '../../../../../common/Layout/ErrorHandlingContext';
 
 interface Props {
   userAddress: UpdatedAddress;
@@ -33,6 +41,9 @@ const SingleAddress = ({
 }: Props) => {
   const tCountry = useTranslations('Country');
   const { zipCode, city, state, country, address, type } = userAddress;
+  const { tenantConfig } = useTenant();
+  const { token, logoutUser } = useUserProps();
+  const { setErrors } = useContext(ErrorHandlingContext);
   const countryFullForm = tCountry(
     country.toLowerCase() as Lowercase<CountryCode>
   );
@@ -45,6 +56,35 @@ const SingleAddress = ({
     countryFullForm
   );
 
+  const editAddress = async (
+    data: AddressFormData | null,
+    addressType: string
+  ) => {
+    if (!addressAction || !userAddress) return;
+    const bodyToSend = addressType
+      ? { type: addressType }
+      : {
+          ...data,
+          country,
+          type: getAddressType('edit', userAddress.type),
+        };
+    try {
+      const res = await putAuthenticatedRequest<UpdatedAddress>(
+        tenantConfig.id,
+        `/app/addresses/${userAddress?.id}`,
+        bodyToSend,
+        token,
+        logoutUser
+      );
+      if (res && fetchUserAddresses) {
+        fetchUserAddresses();
+        setIsModalOpen(false);
+      }
+    } catch (error) {
+      setErrors(handleError(error as APIError));
+    }
+  };
+
   return (
     <div className={styles.addressContainer}>
       <AddressContent type={type} userAddress={formattedAddress} />
@@ -56,27 +96,23 @@ const SingleAddress = ({
       />
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <>
-          {addressAction === ADDRESS_ACTIONS.EDIT ? (
+          {addressAction === ADDRESS_ACTIONS.EDIT && (
             <AddressForm
               formType="edit"
-              addressAction={addressAction}
               setIsModalOpen={setIsModalOpen}
               setUserAddresses={setUserAddresses}
               userAddress={userAddress}
-              fetchUserAddresses={fetchUserAddresses}
+              editAddress={editAddress}
             />
-          ) : (
-            <></>
           )}
-          {addressAction === ADDRESS_ACTIONS.SET_BILLING ||
-          addressAction === ADDRESS_ACTIONS.SET_PRIMARY ? (
+          {(addressAction === ADDRESS_ACTIONS.SET_BILLING ||
+            addressAction === ADDRESS_ACTIONS.SET_PRIMARY) && (
             <AddressTypeChange
               addressAction={addressAction}
               formattedAddress={formattedAddress}
               setIsModalOpen={setIsModalOpen}
+              editAddress={editAddress}
             />
-          ) : (
-            <></>
           )}
         </>
       </Modal>

From 7a29a2b94fbb501ae6848effb4172ce3312ca89a Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Thu, 14 Nov 2024 13:51:50 +0530
Subject: [PATCH 03/20] feat: component rename for better clarity

---
 .../AddressManagment/AddressDeleteModal.tsx           | 11 +++++++++++
 .../{AddressForm.tsx => AddressFormModal.tsx}         |  6 ++++--
 ...dressTypeChange.tsx => AddressTypeChangeModal.tsx} |  6 +++---
 .../Settings/EditProfile/AddressManagment/index.tsx   |  4 ++--
 .../microComponents/SingleAddress.tsx                 | 10 ++++++----
 5 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
 rename src/features/user/Settings/EditProfile/AddressManagment/{AddressForm.tsx => AddressFormModal.tsx} (98%)
 rename src/features/user/Settings/EditProfile/AddressManagment/{AddressTypeChange.tsx => AddressTypeChangeModal.tsx} (93%)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
new file mode 100644
index 000000000..4372ccf57
--- /dev/null
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
@@ -0,0 +1,11 @@
+import styles from './AddressManagement.module.scss';
+
+const AddressDeleteModal = () => {
+  return (
+    <div className={styles.addrConfirmContainer}>
+      <></>
+    </div>
+  );
+};
+
+export default AddressDeleteModal;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
similarity index 98%
rename from src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
rename to src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
index 3634e5a81..a6ece7429 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
@@ -42,7 +42,7 @@ interface Props {
   setIsModalOpen: SetState<boolean>;
   setUserAddresses: SetState<UpdatedAddress[]>;
   userAddress?: UpdatedAddress;
-  editAddress: (
+  editAddress?: (
     data: AddressFormData | null,
     addressType: string
   ) => Promise<void>;
@@ -323,7 +323,9 @@ const AddressForm = ({
             onClick={handleSubmit(
               formType === 'add'
                 ? addNewAddress
-                : (data) => editAddress(data, '')
+                : editAddress
+                ? (data) => editAddress(data, '')
+                : () => {}
             )}
           />
         </div>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
similarity index 93%
rename from src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
rename to src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
index ac9fb2f65..e7283ad89 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChange.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 import { AddressAction } from './microComponents/AddressActionMenu';
 import WebappButton from '../../../../common/WebappButton';
 import { SetState } from '../../../../common/types/common';
-import { AddressFormData } from './AddressForm';
+import { AddressFormData } from './AddressFormModal';
 
 interface Props {
   addressAction: AddressAction;
@@ -16,7 +16,7 @@ interface Props {
   ) => Promise<void>;
 }
 
-const AddressTypeChange = ({
+const AddressTypeChangeModal = ({
   addressAction,
   formattedAddress,
   setIsModalOpen,
@@ -58,4 +58,4 @@ const AddressTypeChange = ({
   );
 };
 
-export default AddressTypeChange;
+export default AddressTypeChangeModal;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 1e2f6bfa7..41b0952e1 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -11,7 +11,7 @@ import AddressList from './microComponents/AddressList';
 import { useUserProps } from '../../../../common/Layout/UserPropsContext';
 import WebappButton from '../../../../common/WebappButton';
 import styles from './AddressManagement.module.scss';
-import AddressForm from './AddressForm';
+import AddressFormModal from './AddressFormModal';
 import { getAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
@@ -80,7 +80,7 @@ const AddressManagement = () => {
         buttonClasses={styles.addNewAddressButton}
       />
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
-        <AddressForm
+        <AddressFormModal
           formType="add"
           setIsModalOpen={setIsModalOpen}
           setUserAddresses={setUserAddresses}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index 9d7e071f5..8f97dc349 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -14,13 +14,14 @@ import {
 import styles from '../AddressManagement.module.scss';
 import AddressContent from './AddressContent';
 import AddressActionsMenu from './AddressActionMenu';
-import AddressForm, { AddressFormData } from '../AddressForm';
+import AddressFormModal, { AddressFormData } from '../AddressFormModal';
 import { ADDRESS_ACTIONS } from '../../../../../../utils/addressManagement';
-import AddressTypeChange from '../AddressTypeChange';
+import AddressTypeChangeModal from '../AddressTypeChangeModal';
 import { putAuthenticatedRequest } from '../../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../../common/Layout/TenantContext';
 import { useUserProps } from '../../../../../common/Layout/UserPropsContext';
 import { ErrorHandlingContext } from '../../../../../common/Layout/ErrorHandlingContext';
+import AddressDeleteModal from '../AddressDeleteModal';
 
 interface Props {
   userAddress: UpdatedAddress;
@@ -97,7 +98,7 @@ const SingleAddress = ({
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <>
           {addressAction === ADDRESS_ACTIONS.EDIT && (
-            <AddressForm
+            <AddressFormModal
               formType="edit"
               setIsModalOpen={setIsModalOpen}
               setUserAddresses={setUserAddresses}
@@ -107,13 +108,14 @@ const SingleAddress = ({
           )}
           {(addressAction === ADDRESS_ACTIONS.SET_BILLING ||
             addressAction === ADDRESS_ACTIONS.SET_PRIMARY) && (
-            <AddressTypeChange
+            <AddressTypeChangeModal
               addressAction={addressAction}
               formattedAddress={formattedAddress}
               setIsModalOpen={setIsModalOpen}
               editAddress={editAddress}
             />
           )}
+          {addressAction === ADDRESS_ACTIONS.DELETE && <AddressDeleteModal />}
         </>
       </Modal>
     </div>

From dbdc164a23a7a134b3063d968182886d27120e25 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:56:02 +0530
Subject: [PATCH 04/20] feat: implement delete action & lift state management

- add delete functionality for address entries
- move isUploadingData state to parent component
- refactor child components to use shared loading state
---
 public/static/locales/en/profile.json         |  2 +
 .../AddressManagment/AddressDeleteModal.tsx   | 31 +++++++++++++++-
 .../AddressManagment/AddressFormModal.tsx     |  9 +++--
 .../EditProfile/AddressManagment/index.tsx    | 21 ++++++++---
 .../microComponents/AddressList.tsx           | 20 ++++++----
 .../microComponents/SingleAddress.tsx         | 37 ++++++++++++++++++-
 6 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index 0b102b933..88f23036e 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -142,6 +142,7 @@
       "BillingAddress": "Billing Address",
       "edit": "Edit",
       "delete": "Delete",
+      "deleteAddress": "Delete Address",
       "setAsPrimaryAddress": "Set as Primary Address",
       "setAsBillingAddress": "Set as Billing Address",
       "addNewAddress": "Add New Address",
@@ -152,6 +153,7 @@
         "edit": "Edit Address"
       },
       "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType} Address? This will replace your current {addressType} Address.",
+      "deleteAddressConfirmationMessage": "Are you sure you want to delete this address? If you want to use it again, please add it as a new address.",
       "confirm": "Confirm"
     }
   }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
index 4372ccf57..fc374669a 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
@@ -1,9 +1,36 @@
+import { SetState } from '../../../../common/types/common';
+import WebappButton from '../../../../common/WebappButton';
 import styles from './AddressManagement.module.scss';
+import { useTranslations } from 'next-intl';
 
-const AddressDeleteModal = () => {
+interface Props {
+  setIsModalOpen: SetState<boolean>;
+  deleteAddress: () => Promise<void>;
+}
+
+const AddressDeleteModal = ({ setIsModalOpen, deleteAddress }: Props) => {
+  const tProfile = useTranslations('Profile.addressManagement');
+  const tCommon = useTranslations('Common');
   return (
     <div className={styles.addrConfirmContainer}>
-      <></>
+      <h1 className={styles.addressActionHeader}>
+        {tProfile('deleteAddress')}
+      </h1>
+      <p>{tProfile('deleteAddressConfirmationMessage')}</p>
+      <div className={styles.buttonContainer}>
+        <WebappButton
+          text={tCommon('cancel')}
+          elementType="button"
+          variant="secondary"
+          onClick={() => setIsModalOpen(false)}
+        />
+        <WebappButton
+          text={tProfile('delete')}
+          elementType="button"
+          variant="primary"
+          onClick={deleteAddress}
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
index a6ece7429..3ca385137 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
@@ -46,6 +46,8 @@ interface Props {
     data: AddressFormData | null,
     addressType: string
   ) => Promise<void>;
+  isUploadingData: boolean;
+  setIsUploadingData: SetState<boolean>;
 }
 const geocoder = new GeocoderArcGIs(
   process.env.ESRI_CLIENT_SECRET
@@ -55,12 +57,14 @@ const geocoder = new GeocoderArcGIs(
       }
     : {}
 );
-const AddressForm = ({
+const AddressFormModal = ({
   formType,
   setIsModalOpen,
   setUserAddresses,
   userAddress,
   editAddress,
+  setIsUploadingData,
+  isUploadingData,
 }: Props) => {
   const defaultAddressDetail = {
     address: userAddress ? userAddress.address : '',
@@ -93,7 +97,6 @@ const AddressForm = ({
     AddressSuggestionsType[]
   >([]);
   const [inputValue, setInputValue] = useState('');
-  const [isUploadingData, setIsUploadingData] = useState(false);
 
   const suggestAddress = useCallback(
     (value: string) => {
@@ -334,4 +337,4 @@ const AddressForm = ({
   );
 };
 
-export default AddressForm;
+export default AddressFormModal;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 41b0952e1..f63a7f07c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -4,7 +4,7 @@ import type {
   AddressType,
 } from './microComponents/AddressActionMenu';
 
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Modal } from '@mui/material';
 import AddressList from './microComponents/AddressList';
@@ -31,19 +31,20 @@ export interface UpdatedAddress {
 }
 export const addressType = ['primary', 'mailing', 'other'];
 const AddressManagement = () => {
+  const tProfile = useTranslations('Profile.addressManagement');
   const { user, contextLoaded, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
-  const tProfile = useTranslations('Profile.addressManagement');
-  const [userAddresses, setUserAddresses] = useState<UpdatedAddress[]>(
-    user?.addresses
-  ); // need to update planet-sdk to include addresses key
+
+  const [userAddresses, setUserAddresses] = useState<UpdatedAddress[]>([]);
   const [addressAction, setAddressAction] = useState<AddressAction | null>(
     null
   );
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isUploadingData, setIsUploadingData] = useState(false);
+
   const sortedAddresses = useMemo(() => {
-    return userAddresses.sort((a, b) => {
+    return userAddresses?.sort((a, b) => {
       return addressType.indexOf(a.type) - addressType.indexOf(b.type);
     });
   }, [userAddresses]);
@@ -63,6 +64,10 @@ const AddressManagement = () => {
     }
   };
 
+  useEffect(() => {
+    fetchUserAddresses();
+  }, []);
+
   return (
     <>
       <AddressList
@@ -70,6 +75,8 @@ const AddressManagement = () => {
         addressAction={addressAction}
         setAddressAction={setAddressAction}
         setUserAddresses={setUserAddresses}
+        isUploadingData={isUploadingData}
+        setIsUploadingData={setIsUploadingData}
         fetchUserAddresses={fetchUserAddresses}
       />
       <WebappButton
@@ -84,6 +91,8 @@ const AddressManagement = () => {
           formType="add"
           setIsModalOpen={setIsModalOpen}
           setUserAddresses={setUserAddresses}
+          isUploadingData={isUploadingData}
+          setIsUploadingData={setIsUploadingData}
         />
       </Modal>
     </>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
index 9a0213423..33f26c87c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
@@ -5,33 +5,39 @@ import type { SetState } from '../../../../../common/types/common';
 import SingleAddress from './SingleAddress';
 
 interface Props {
-  addresses: UpdatedAddress[];
+  addresses: UpdatedAddress[] | undefined;
   addressAction: AddressAction | null;
   setAddressAction: SetState<AddressAction | null>;
   setUserAddresses: SetState<UpdatedAddress[]>;
   fetchUserAddresses: () => Promise<void>;
+  isUploadingData: boolean;
+  setIsUploadingData: SetState<boolean>;
 }
 
 const AddressList = ({
-  addresses,
+  fetchUserAddresses,
   addressAction,
   setAddressAction,
+  addresses,
   setUserAddresses,
-  fetchUserAddresses,
+  isUploadingData,
+  setIsUploadingData,
 }: Props) => {
-  const addressCount = addresses?.length;
+  const addressCount = addresses?.length ?? 0;
 
   return (
     <>
-      {addresses.map((address) => (
+      {addresses?.map((address) => (
         <SingleAddress
           key={address.id}
-          userAddress={address}
           addressCount={addressCount}
           addressAction={addressAction}
-          setAddressAction={setAddressAction}
+          userAddress={address}
           setUserAddresses={setUserAddresses}
+          setAddressAction={setAddressAction}
           fetchUserAddresses={fetchUserAddresses}
+          isUploadingData={isUploadingData}
+          setIsUploadingData={setIsUploadingData}
         />
       ))}
     </>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index 8f97dc349..5c547b3ac 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -17,7 +17,10 @@ import AddressActionsMenu from './AddressActionMenu';
 import AddressFormModal, { AddressFormData } from '../AddressFormModal';
 import { ADDRESS_ACTIONS } from '../../../../../../utils/addressManagement';
 import AddressTypeChangeModal from '../AddressTypeChangeModal';
-import { putAuthenticatedRequest } from '../../../../../../utils/apiRequests/api';
+import {
+  deleteAuthenticatedRequest,
+  putAuthenticatedRequest,
+} from '../../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../../common/Layout/TenantContext';
 import { useUserProps } from '../../../../../common/Layout/UserPropsContext';
 import { ErrorHandlingContext } from '../../../../../common/Layout/ErrorHandlingContext';
@@ -30,6 +33,8 @@ interface Props {
   setAddressAction: SetState<AddressAction | null>;
   setUserAddresses: SetState<UpdatedAddress[]>;
   fetchUserAddresses: () => Promise<void>;
+  isUploadingData: boolean;
+  setIsUploadingData: SetState<boolean>;
 }
 
 const SingleAddress = ({
@@ -39,6 +44,8 @@ const SingleAddress = ({
   setAddressAction,
   setUserAddresses,
   fetchUserAddresses,
+  isUploadingData,
+  setIsUploadingData,
 }: Props) => {
   const tCountry = useTranslations('Country');
   const { zipCode, city, state, country, address, type } = userAddress;
@@ -49,6 +56,7 @@ const SingleAddress = ({
     country.toLowerCase() as Lowercase<CountryCode>
   );
   const [isModalOpen, setIsModalOpen] = useState(false);
+
   const formattedAddress = formatAddress(
     address,
     zipCode,
@@ -62,6 +70,7 @@ const SingleAddress = ({
     addressType: string
   ) => {
     if (!addressAction || !userAddress) return;
+    setIsUploadingData(true);
     const bodyToSend = addressType
       ? { type: addressType }
       : {
@@ -79,12 +88,29 @@ const SingleAddress = ({
       );
       if (res && fetchUserAddresses) {
         fetchUserAddresses();
+        setIsUploadingData(false);
         setIsModalOpen(false);
       }
     } catch (error) {
       setErrors(handleError(error as APIError));
     }
   };
+  const deleteAddress = async () => {
+    try {
+      setIsUploadingData(true);
+      await deleteAuthenticatedRequest(
+        tenantConfig.id,
+        `/app/addresses/${userAddress?.id}`,
+        token,
+        logoutUser
+      );
+      fetchUserAddresses();
+      setIsModalOpen(false);
+    } catch (error) {
+      setIsUploadingData(false);
+      setErrors(handleError(error as APIError));
+    }
+  };
 
   return (
     <div className={styles.addressContainer}>
@@ -104,6 +130,8 @@ const SingleAddress = ({
               setUserAddresses={setUserAddresses}
               userAddress={userAddress}
               editAddress={editAddress}
+              isUploadingData={isUploadingData}
+              setIsUploadingData={setIsUploadingData}
             />
           )}
           {(addressAction === ADDRESS_ACTIONS.SET_BILLING ||
@@ -115,7 +143,12 @@ const SingleAddress = ({
               editAddress={editAddress}
             />
           )}
-          {addressAction === ADDRESS_ACTIONS.DELETE && <AddressDeleteModal />}
+          {addressAction === ADDRESS_ACTIONS.DELETE && (
+            <AddressDeleteModal
+              setIsModalOpen={setIsModalOpen}
+              deleteAddress={deleteAddress}
+            />
+          )}
         </>
       </Modal>
     </div>

From 3dfea1f082fc294594d2c449b5c28aff75dbd0b0 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Sat, 16 Nov 2024 12:58:07 +0530
Subject: [PATCH 05/20] refactor: refactor translations, optimize address
 selection, and define address form types

- Refactored translation key to use ICU select pattern for dynamic translations.
- use useMemo to find primary, billing, address
- Defined constant ADDRESS_FORM_TYPE for address form actions (add, edit) and associated type.
---
 public/static/locales/en/profile.json         | 11 ++---
 .../AddressManagment/AddressFormModal.tsx     | 12 +++--
 .../AddressTypeChangeModal.tsx                | 44 ++++++++++++-----
 .../EditProfile/AddressManagment/index.tsx    |  3 +-
 .../microComponents/AddressActionMenu.tsx     |  3 ++
 .../microComponents/AddressContent.tsx        |  9 +---
 .../microComponents/AddressList.tsx           | 12 +++++
 .../microComponents/SingleAddress.tsx         | 49 ++++++++++++++++---
 src/utils/addressManagement.ts                | 14 ++++--
 9 files changed, 115 insertions(+), 42 deletions(-)

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index 88f23036e..e9ac006ed 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -138,21 +138,20 @@
     "addressManagement": {
       "address": "Address",
       "address2": "Address 2 (optional)",
-      "primaryAddress": "Primary Address",
-      "BillingAddress": "Billing Address",
       "edit": "Edit",
+      "editAddress": "Edit Address",
       "delete": "Delete",
       "deleteAddress": "Delete Address",
-      "setAsPrimaryAddress": "Set as Primary Address",
-      "setAsBillingAddress": "Set as Billing Address",
       "addNewAddress": "Add New Address",
-      "editAddress": "Edit Address",
       "saveChanges": "Save Changes",
       "formType": {
         "add": "Add Address",
         "edit": "Edit Address"
       },
-      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType} Address? This will replace your current {addressType} Address.",
+      "addressType": "{address, select, mailing {Billing} primary {Primary} other{}} Address",
+      "setAsPrimaryAddress": "Set as Primary Address",
+      "setAsBillingAddress": "Set as Billing Address",
+      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType, select, mailing {Billing} primary {Primary} other {}} Address? {billingAddress, select, mailing {This will replace your current Billing Address.} other {}} {primaryAddress, select, primary {This will replace your current Primary Address.} other {}}",
       "deleteAddressConfirmationMessage": "Are you sure you want to delete this address? If you want to use it again, please add it as a new address.",
       "confirm": "Confirm"
     }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
index 3ca385137..c2d08a494 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressFormModal.tsx
@@ -5,6 +5,7 @@ import type {
 import type { ExtendedCountryCode } from '../../../../common/types/country';
 import type { SetState } from '../../../../common/types/common';
 import type { UpdatedAddress } from '.';
+import type { AddressFormType } from './microComponents/AddressActionMenu';
 
 import { useState, useContext, useMemo, useCallback } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -23,6 +24,7 @@ import { postAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
 import {
+  ADDRESS_FORM_TYPE,
   ADDRESS_TYPE,
   validationPattern,
 } from '../../../../../utils/addressManagement';
@@ -38,7 +40,7 @@ export type AddressFormData = {
 };
 
 interface Props {
-  formType: 'edit' | 'add';
+  formType: AddressFormType;
   setIsModalOpen: SetState<boolean>;
   setUserAddresses: SetState<UpdatedAddress[]>;
   userAddress?: UpdatedAddress;
@@ -89,7 +91,8 @@ const AddressFormModal = ({
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
-  const userCountry = formType === 'add' ? user?.country : userAddress?.country;
+  const isAddAddressForm = formType === ADDRESS_FORM_TYPE.ADD_ADDRESS;
+  const userCountry = isAddAddressForm ? user?.country : userAddress?.country;
   const [country, setCountry] = useState<ExtendedCountryCode>(
     userCountry ?? 'DE'
   );
@@ -97,7 +100,6 @@ const AddressFormModal = ({
     AddressSuggestionsType[]
   >([]);
   const [inputValue, setInputValue] = useState('');
-
   const suggestAddress = useCallback(
     (value: string) => {
       if (value.length > 3) {
@@ -317,14 +319,14 @@ const AddressFormModal = ({
           />
           <WebappButton
             text={
-              formType === 'add'
+              isAddAddressForm
                 ? tProfile(`addressManagement.formType.${formType}`)
                 : tProfile('addressManagement.saveChanges')
             }
             variant="primary"
             elementType="button"
             onClick={handleSubmit(
-              formType === 'add'
+              isAddAddressForm
                 ? addNewAddress
                 : editAddress
                 ? (data) => editAddress(data, '')
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
index e7283ad89..1c8813e90 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
@@ -1,43 +1,58 @@
-import { ADDRESS_ACTIONS } from '../../../../../utils/addressManagement';
+import { ADDRESS_TYPE } from '../../../../../utils/addressManagement';
 import styles from './AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
-import { AddressAction } from './microComponents/AddressActionMenu';
 import WebappButton from '../../../../common/WebappButton';
 import { SetState } from '../../../../common/types/common';
 import { AddressFormData } from './AddressFormModal';
 
 interface Props {
-  addressAction: AddressAction;
-  formattedAddress: string;
   setIsModalOpen: SetState<boolean>;
   editAddress: (
     data: AddressFormData | null,
     addressType: string
   ) => Promise<void>;
+  primaryAddress: string | undefined;
+  billingAddress: string | undefined;
+  isSetBillingAction: boolean;
+  isSetPrimaryAction: boolean;
 }
 
 const AddressTypeChangeModal = ({
-  addressAction,
-  formattedAddress,
   setIsModalOpen,
   editAddress,
+  primaryAddress,
+  billingAddress,
+  isSetBillingAction,
+  isSetPrimaryAction,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
-  const isBillingAddress = addressAction === ADDRESS_ACTIONS.SET_BILLING;
   return (
     <div className={styles.addrConfirmContainer}>
       <h1 className={styles.addressActionHeader}>
-        {isBillingAddress
-          ? tProfile('BillingAddress')
-          : tProfile('primaryAddress')}
+        {tProfile('addressType', {
+          address: isSetPrimaryAction
+            ? ADDRESS_TYPE.PRIMARY
+            : ADDRESS_TYPE.MAILING,
+        })}
       </h1>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType: isBillingAddress ? 'Billing' : 'Primary',
+          addressType: isSetBillingAction
+            ? ADDRESS_TYPE.MAILING
+            : ADDRESS_TYPE.PRIMARY,
+          billingAddress:
+            isSetBillingAction && billingAddress ? ADDRESS_TYPE.MAILING : '',
+          primaryAddress:
+            isSetPrimaryAction && primaryAddress ? ADDRESS_TYPE.PRIMARY : '',
         })}
       </p>
-      <p className={styles.address}>{formattedAddress}</p>
+      {billingAddress && isSetBillingAction && (
+        <p className={styles.address}>{billingAddress}</p>
+      )}
+      {primaryAddress && isSetPrimaryAction && (
+        <p className={styles.address}>{primaryAddress}</p>
+      )}
       <div className={styles.buttonContainer}>
         <WebappButton
           text={tCommon('cancel')}
@@ -50,7 +65,10 @@ const AddressTypeChangeModal = ({
           elementType="button"
           variant="primary"
           onClick={() =>
-            editAddress(null, isBillingAddress ? 'mailing' : 'primary')
+            editAddress(
+              null,
+              isSetBillingAction ? ADDRESS_TYPE.MAILING : ADDRESS_TYPE.PRIMARY
+            )
           }
         />
       </div>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index f63a7f07c..a9b9706eb 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -16,6 +16,7 @@ import { getAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
 import { handleError } from '@planet-sdk/common';
+import { ADDRESS_FORM_TYPE } from '../../../../../utils/addressManagement';
 
 export interface UpdatedAddress {
   id: string;
@@ -88,7 +89,7 @@ const AddressManagement = () => {
       />
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <AddressFormModal
-          formType="add"
+          formType={ADDRESS_FORM_TYPE.ADD_ADDRESS}
           setIsModalOpen={setIsModalOpen}
           setUserAddresses={setUserAddresses}
           isUploadingData={isUploadingData}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu.tsx
index d5da1962c..795bf5b8b 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu.tsx
@@ -7,12 +7,15 @@ import KababMenuIcon from '../../../../../../../public/assets/images/icons/Kabab
 import styles from '../AddressManagement.module.scss';
 import {
   ADDRESS_ACTIONS,
+  ADDRESS_FORM_TYPE,
   ADDRESS_TYPE,
 } from '../../../../../../utils/addressManagement';
 
 export type AddressType = (typeof ADDRESS_TYPE)[keyof typeof ADDRESS_TYPE];
 export type AddressAction =
   (typeof ADDRESS_ACTIONS)[keyof typeof ADDRESS_ACTIONS];
+export type AddressFormType =
+  (typeof ADDRESS_FORM_TYPE)[keyof typeof ADDRESS_FORM_TYPE];
 
 export interface AddressActionItem {
   label: string;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
index 0a60c0303..7003138ea 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
@@ -1,7 +1,6 @@
 import styles from '../AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
 import { AddressType } from './AddressActionMenu';
-import { ADDRESS_TYPE } from '../../../../../../utils/addressManagement';
 
 interface Props {
   type: AddressType;
@@ -13,13 +12,7 @@ const AddressContent = ({ type, userAddress }: Props) => {
     <div className={styles.addressSubContainer}>
       {type !== 'other' && (
         <span className={`${styles.addressTag} ${styles[type]}`}>
-          {tProfile(
-            `${
-              type === ADDRESS_TYPE.PRIMARY
-                ? 'primaryAddress'
-                : 'BillingAddress'
-            }`
-          )}
+          {tProfile('addressType', { address: type })}
         </span>
       )}
       <div className={styles.address}>{userAddress}</div>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
index 33f26c87c..f7c40a2a9 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
@@ -3,6 +3,8 @@ import type { AddressAction } from './AddressActionMenu';
 import type { SetState } from '../../../../../common/types/common';
 
 import SingleAddress from './SingleAddress';
+import { useMemo } from 'react';
+import { ADDRESS_TYPE } from '../../../../../../utils/addressManagement';
 
 interface Props {
   addresses: UpdatedAddress[] | undefined;
@@ -24,7 +26,15 @@ const AddressList = ({
   setIsUploadingData,
 }: Props) => {
   const addressCount = addresses?.length ?? 0;
+  const primaryAddress = useMemo(
+    () => addresses?.find((address) => address.type === ADDRESS_TYPE.PRIMARY),
+    [addresses]
+  );
 
+  const billingAddress = useMemo(
+    () => addresses?.find((address) => address.type === ADDRESS_TYPE.MAILING),
+    [addresses]
+  );
   return (
     <>
       {addresses?.map((address) => (
@@ -38,6 +48,8 @@ const AddressList = ({
           fetchUserAddresses={fetchUserAddresses}
           isUploadingData={isUploadingData}
           setIsUploadingData={setIsUploadingData}
+          primaryAddress={primaryAddress}
+          billingAddress={billingAddress}
         />
       ))}
     </>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index 5c547b3ac..6cff11059 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -8,6 +8,7 @@ import { Modal } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { handleError } from '@planet-sdk/common';
 import {
+  ADDRESS_FORM_TYPE,
   formatAddress,
   getAddressType,
 } from '../../../../../../utils/addressManagement';
@@ -35,6 +36,8 @@ interface Props {
   fetchUserAddresses: () => Promise<void>;
   isUploadingData: boolean;
   setIsUploadingData: SetState<boolean>;
+  primaryAddress: UpdatedAddress | undefined;
+  billingAddress: UpdatedAddress | undefined;
 }
 
 const SingleAddress = ({
@@ -46,6 +49,8 @@ const SingleAddress = ({
   fetchUserAddresses,
   isUploadingData,
   setIsUploadingData,
+  primaryAddress,
+  billingAddress,
 }: Props) => {
   const tCountry = useTranslations('Country');
   const { zipCode, city, state, country, address, type } = userAddress;
@@ -55,6 +60,14 @@ const SingleAddress = ({
   const countryFullForm = tCountry(
     country.toLowerCase() as Lowercase<CountryCode>
   );
+  const isSetBillingAction = addressAction === ADDRESS_ACTIONS.SET_BILLING;
+  const isSetPrimaryAction = addressAction === ADDRESS_ACTIONS.SET_PRIMARY;
+  const pcountryFullForm = tCountry(
+    primaryAddress?.country.toLowerCase() as Lowercase<CountryCode>
+  );
+  const bcountryFullForm = tCountry(
+    billingAddress?.country.toLowerCase() as Lowercase<CountryCode>
+  );
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const formattedAddress = formatAddress(
@@ -65,6 +78,22 @@ const SingleAddress = ({
     countryFullForm
   );
 
+  const primaryFrmtAddress = formatAddress(
+    primaryAddress?.address,
+    primaryAddress?.zipCode,
+    primaryAddress?.city,
+    primaryAddress?.state ?? '',
+    pcountryFullForm
+  );
+
+  const billingFrmtAddress = formatAddress(
+    billingAddress?.address,
+    billingAddress?.zipCode,
+    billingAddress?.city,
+    billingAddress?.state ?? '',
+    bcountryFullForm
+  );
+
   const editAddress = async (
     data: AddressFormData | null,
     addressType: string
@@ -76,7 +105,10 @@ const SingleAddress = ({
       : {
           ...data,
           country,
-          type: getAddressType('edit', userAddress.type),
+          type: getAddressType(
+            ADDRESS_FORM_TYPE.EDIT_ADDRESS,
+            userAddress.type
+          ),
         };
     try {
       const res = await putAuthenticatedRequest<UpdatedAddress>(
@@ -125,7 +157,7 @@ const SingleAddress = ({
         <>
           {addressAction === ADDRESS_ACTIONS.EDIT && (
             <AddressFormModal
-              formType="edit"
+              formType={ADDRESS_FORM_TYPE.EDIT_ADDRESS}
               setIsModalOpen={setIsModalOpen}
               setUserAddresses={setUserAddresses}
               userAddress={userAddress}
@@ -134,13 +166,18 @@ const SingleAddress = ({
               setIsUploadingData={setIsUploadingData}
             />
           )}
-          {(addressAction === ADDRESS_ACTIONS.SET_BILLING ||
-            addressAction === ADDRESS_ACTIONS.SET_PRIMARY) && (
+          {(isSetBillingAction || isSetPrimaryAction) && (
             <AddressTypeChangeModal
-              addressAction={addressAction}
-              formattedAddress={formattedAddress}
               setIsModalOpen={setIsModalOpen}
               editAddress={editAddress}
+              primaryAddress={
+                primaryAddress !== undefined ? primaryFrmtAddress : undefined
+              }
+              billingAddress={
+                billingAddress !== undefined ? billingFrmtAddress : undefined
+              }
+              isSetBillingAction={isSetBillingAction}
+              isSetPrimaryAction={isSetPrimaryAction}
             />
           )}
           {addressAction === ADDRESS_ACTIONS.DELETE && (
diff --git a/src/utils/addressManagement.ts b/src/utils/addressManagement.ts
index 90e187831..d1b464a31 100644
--- a/src/utils/addressManagement.ts
+++ b/src/utils/addressManagement.ts
@@ -1,4 +1,7 @@
-import { AddressType } from '../features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu';
+import {
+  AddressFormType,
+  AddressType,
+} from '../features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu';
 
 export const ADDRESS_TYPE = {
   PRIMARY: 'primary',
@@ -13,6 +16,11 @@ export const ADDRESS_ACTIONS = {
   SET_BILLING: 'setBilling',
 } as const;
 
+export const ADDRESS_FORM_TYPE = {
+  ADD_ADDRESS: 'add',
+  EDIT_ADDRESS: 'edit',
+} as const;
+
 export const formatAddress = (
   address: string | undefined,
   zipCode: string | undefined,
@@ -35,11 +43,11 @@ export const validationPattern = {
 };
 
 export const getAddressType = (
-  formType: 'add' | 'edit',
+  formType: AddressFormType,
   userAddressType: AddressType
 ) => {
   if (
-    formType === 'edit' &&
+    formType === ADDRESS_FORM_TYPE.EDIT_ADDRESS &&
     (userAddressType === ADDRESS_TYPE.MAILING ||
       userAddressType === ADDRESS_TYPE.PRIMARY)
   ) {

From 7ea712673f55f72b52cbe305584714aedca33f22 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Sun, 17 Nov 2024 14:26:15 +0530
Subject: [PATCH 06/20] refactor singleAddress component: simplify address
 formatting, optimize modal rendering with useMemo and useCallback"

---
 .../AddressTypeChangeModal.tsx                |  34 ++-
 .../microComponents/AddressList.tsx           |  13 +-
 .../microComponents/SingleAddress.tsx         | 224 ++++++++++--------
 src/utils/addressManagement.ts                |  11 +-
 4 files changed, 160 insertions(+), 122 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
index 1c8813e90..89e6106a7 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
@@ -1,9 +1,13 @@
-import { ADDRESS_TYPE } from '../../../../../utils/addressManagement';
+import {
+  ADDRESS_ACTIONS,
+  ADDRESS_TYPE,
+} from '../../../../../utils/addressManagement';
 import styles from './AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
 import WebappButton from '../../../../common/WebappButton';
 import { SetState } from '../../../../common/types/common';
 import { AddressFormData } from './AddressFormModal';
+import { AddressAction } from './microComponents/AddressActionMenu';
 
 interface Props {
   setIsModalOpen: SetState<boolean>;
@@ -11,10 +15,9 @@ interface Props {
     data: AddressFormData | null,
     addressType: string
   ) => Promise<void>;
-  primaryAddress: string | undefined;
-  billingAddress: string | undefined;
-  isSetBillingAction: boolean;
-  isSetPrimaryAction: boolean;
+  primaryAddress: string | null;
+  billingAddress: string | null;
+  addressAction: AddressAction;
 }
 
 const AddressTypeChangeModal = ({
@@ -22,11 +25,14 @@ const AddressTypeChangeModal = ({
   editAddress,
   primaryAddress,
   billingAddress,
-  isSetBillingAction,
-  isSetPrimaryAction,
+  addressAction,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
+  const isSetPrimaryAction = addressAction === ADDRESS_ACTIONS.SET_PRIMARY;
+  const isSetBillingAction = addressAction === ADDRESS_ACTIONS.SET_BILLING;
+  const isBillingAddressAlreadyPresent = isSetBillingAction && billingAddress;
+  const isPrimaryAddressAlreadyPresent = isSetPrimaryAction && primaryAddress;
   return (
     <div className={styles.addrConfirmContainer}>
       <h1 className={styles.addressActionHeader}>
@@ -41,16 +47,18 @@ const AddressTypeChangeModal = ({
           addressType: isSetBillingAction
             ? ADDRESS_TYPE.MAILING
             : ADDRESS_TYPE.PRIMARY,
-          billingAddress:
-            isSetBillingAction && billingAddress ? ADDRESS_TYPE.MAILING : '',
-          primaryAddress:
-            isSetPrimaryAction && primaryAddress ? ADDRESS_TYPE.PRIMARY : '',
+          billingAddress: isBillingAddressAlreadyPresent
+            ? ADDRESS_TYPE.MAILING
+            : '',
+          primaryAddress: isPrimaryAddressAlreadyPresent
+            ? ADDRESS_TYPE.PRIMARY
+            : '',
         })}
       </p>
-      {billingAddress && isSetBillingAction && (
+      {isBillingAddressAlreadyPresent && (
         <p className={styles.address}>{billingAddress}</p>
       )}
-      {primaryAddress && isSetPrimaryAction && (
+      {isPrimaryAddressAlreadyPresent && (
         <p className={styles.address}>{primaryAddress}</p>
       )}
       <div className={styles.buttonContainer}>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
index f7c40a2a9..da9352b61 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressList.tsx
@@ -2,9 +2,12 @@ import type { UpdatedAddress } from '..';
 import type { AddressAction } from './AddressActionMenu';
 import type { SetState } from '../../../../../common/types/common';
 
-import SingleAddress from './SingleAddress';
 import { useMemo } from 'react';
-import { ADDRESS_TYPE } from '../../../../../../utils/addressManagement';
+import SingleAddress from './SingleAddress';
+import {
+  ADDRESS_TYPE,
+  findAddressByType,
+} from '../../../../../../utils/addressManagement';
 
 interface Props {
   addresses: UpdatedAddress[] | undefined;
@@ -26,13 +29,13 @@ const AddressList = ({
   setIsUploadingData,
 }: Props) => {
   const addressCount = addresses?.length ?? 0;
+
   const primaryAddress = useMemo(
-    () => addresses?.find((address) => address.type === ADDRESS_TYPE.PRIMARY),
+    () => findAddressByType(addresses, ADDRESS_TYPE.PRIMARY),
     [addresses]
   );
-
   const billingAddress = useMemo(
-    () => addresses?.find((address) => address.type === ADDRESS_TYPE.MAILING),
+    () => findAddressByType(addresses, ADDRESS_TYPE.MAILING),
     [addresses]
   );
   return (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
index 6cff11059..624b31c4c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/SingleAddress.tsx
@@ -3,7 +3,7 @@ import type { SetState } from '../../../../../common/types/common';
 import type { AddressAction } from './AddressActionMenu';
 import type { APIError, CountryCode } from '@planet-sdk/common';
 
-import { useContext, useState } from 'react';
+import { useContext, useState, useMemo, useCallback } from 'react';
 import { Modal } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { handleError } from '@planet-sdk/common';
@@ -36,8 +36,8 @@ interface Props {
   fetchUserAddresses: () => Promise<void>;
   isUploadingData: boolean;
   setIsUploadingData: SetState<boolean>;
-  primaryAddress: UpdatedAddress | undefined;
-  billingAddress: UpdatedAddress | undefined;
+  primaryAddress: UpdatedAddress | null;
+  billingAddress: UpdatedAddress | null;
 }
 
 const SingleAddress = ({
@@ -53,81 +53,79 @@ const SingleAddress = ({
   billingAddress,
 }: Props) => {
   const tCountry = useTranslations('Country');
-  const { zipCode, city, state, country, address, type } = userAddress;
   const { tenantConfig } = useTenant();
   const { token, logoutUser } = useUserProps();
   const { setErrors } = useContext(ErrorHandlingContext);
-  const countryFullForm = tCountry(
-    country.toLowerCase() as Lowercase<CountryCode>
-  );
-  const isSetBillingAction = addressAction === ADDRESS_ACTIONS.SET_BILLING;
-  const isSetPrimaryAction = addressAction === ADDRESS_ACTIONS.SET_PRIMARY;
-  const pcountryFullForm = tCountry(
-    primaryAddress?.country.toLowerCase() as Lowercase<CountryCode>
-  );
-  const bcountryFullForm = tCountry(
-    billingAddress?.country.toLowerCase() as Lowercase<CountryCode>
-  );
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { country, type } = userAddress;
+  const getCountryFullForm = (countryCode: string | undefined) => {
+    return countryCode
+      ? tCountry(countryCode.toLowerCase() as Lowercase<CountryCode>)
+      : '';
+  };
+  const getFormattedAddress = (address: UpdatedAddress) => {
+    const { address: userAddress, zipCode, city, state, country } = address;
+    const countryFullForm = getCountryFullForm(country);
+    return formatAddress(userAddress, zipCode, city, state, countryFullForm);
+  };
 
-  const formattedAddress = formatAddress(
-    address,
-    zipCode,
-    city,
-    state,
-    countryFullForm
+  const formattedAddress = useMemo(
+    () => getFormattedAddress(userAddress),
+    [userAddress]
   );
-
-  const primaryFrmtAddress = formatAddress(
-    primaryAddress?.address,
-    primaryAddress?.zipCode,
-    primaryAddress?.city,
-    primaryAddress?.state ?? '',
-    pcountryFullForm
+  const primaryFormattedAddress = useMemo(
+    () => (primaryAddress ? getFormattedAddress(primaryAddress) : null),
+    [primaryAddress]
   );
-
-  const billingFrmtAddress = formatAddress(
-    billingAddress?.address,
-    billingAddress?.zipCode,
-    billingAddress?.city,
-    billingAddress?.state ?? '',
-    bcountryFullForm
+  const billingFormattedAddress = useMemo(
+    () => (billingAddress ? getFormattedAddress(billingAddress) : null),
+    [billingAddress]
   );
 
-  const editAddress = async (
-    data: AddressFormData | null,
-    addressType: string
-  ) => {
-    if (!addressAction || !userAddress) return;
-    setIsUploadingData(true);
-    const bodyToSend = addressType
-      ? { type: addressType }
-      : {
-          ...data,
-          country,
-          type: getAddressType(
-            ADDRESS_FORM_TYPE.EDIT_ADDRESS,
-            userAddress.type
-          ),
-        };
-    try {
-      const res = await putAuthenticatedRequest<UpdatedAddress>(
-        tenantConfig.id,
-        `/app/addresses/${userAddress?.id}`,
-        bodyToSend,
-        token,
-        logoutUser
-      );
-      if (res && fetchUserAddresses) {
-        fetchUserAddresses();
+  const editAddress = useCallback(
+    async (data: AddressFormData | null, addressType: string) => {
+      if (!addressAction || !userAddress) return;
+      setIsUploadingData(true);
+      const bodyToSend = addressType
+        ? { type: addressType }
+        : {
+            ...data,
+            country,
+            type: getAddressType(
+              ADDRESS_FORM_TYPE.EDIT_ADDRESS,
+              userAddress.type
+            ),
+          };
+      try {
+        const res = await putAuthenticatedRequest<UpdatedAddress>(
+          tenantConfig.id,
+          `/app/addresses/${userAddress?.id}`,
+          bodyToSend,
+          token,
+          logoutUser
+        );
+        if (res && fetchUserAddresses) {
+          fetchUserAddresses();
+        }
+      } catch (error) {
+        setErrors(handleError(error as APIError));
+      } finally {
         setIsUploadingData(false);
         setIsModalOpen(false);
       }
-    } catch (error) {
-      setErrors(handleError(error as APIError));
-    }
-  };
-  const deleteAddress = async () => {
+    },
+    [
+      addressAction,
+      country,
+      fetchUserAddresses,
+      logoutUser,
+      setErrors,
+      tenantConfig.id,
+      token,
+      userAddress,
+    ]
+  );
+  const deleteAddress = useCallback(async () => {
     try {
       setIsUploadingData(true);
       await deleteAuthenticatedRequest(
@@ -137,12 +135,66 @@ const SingleAddress = ({
         logoutUser
       );
       fetchUserAddresses();
-      setIsModalOpen(false);
     } catch (error) {
-      setIsUploadingData(false);
       setErrors(handleError(error as APIError));
+    } finally {
+      setIsModalOpen(false);
+      setIsUploadingData(false);
     }
-  };
+  }, [
+    fetchUserAddresses,
+    logoutUser,
+    setErrors,
+    tenantConfig.id,
+    token,
+    userAddress,
+  ]);
+
+  const renderModalContent = useMemo(() => {
+    switch (addressAction) {
+      case ADDRESS_ACTIONS.EDIT:
+        return (
+          <AddressFormModal
+            formType={ADDRESS_FORM_TYPE.EDIT_ADDRESS}
+            setIsModalOpen={setIsModalOpen}
+            setUserAddresses={setUserAddresses}
+            userAddress={userAddress}
+            editAddress={editAddress}
+            isUploadingData={isUploadingData}
+            setIsUploadingData={setIsUploadingData}
+          />
+        );
+      case ADDRESS_ACTIONS.SET_BILLING:
+      case ADDRESS_ACTIONS.SET_PRIMARY:
+        return (
+          <AddressTypeChangeModal
+            setIsModalOpen={setIsModalOpen}
+            editAddress={editAddress}
+            primaryAddress={primaryFormattedAddress}
+            billingAddress={billingFormattedAddress}
+            addressAction={addressAction}
+          />
+        );
+      case ADDRESS_ACTIONS.DELETE:
+        return (
+          <AddressDeleteModal
+            setIsModalOpen={setIsModalOpen}
+            deleteAddress={deleteAddress}
+          />
+        );
+    }
+  }, [
+    addressAction,
+    setIsModalOpen,
+    editAddress,
+    deleteAddress,
+    userAddress,
+    isUploadingData,
+    setIsUploadingData,
+    setUserAddresses,
+    primaryFormattedAddress,
+    billingFormattedAddress,
+  ]);
 
   return (
     <div className={styles.addressContainer}>
@@ -154,39 +206,7 @@ const SingleAddress = ({
         setIsModalOpen={setIsModalOpen}
       />
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
-        <>
-          {addressAction === ADDRESS_ACTIONS.EDIT && (
-            <AddressFormModal
-              formType={ADDRESS_FORM_TYPE.EDIT_ADDRESS}
-              setIsModalOpen={setIsModalOpen}
-              setUserAddresses={setUserAddresses}
-              userAddress={userAddress}
-              editAddress={editAddress}
-              isUploadingData={isUploadingData}
-              setIsUploadingData={setIsUploadingData}
-            />
-          )}
-          {(isSetBillingAction || isSetPrimaryAction) && (
-            <AddressTypeChangeModal
-              setIsModalOpen={setIsModalOpen}
-              editAddress={editAddress}
-              primaryAddress={
-                primaryAddress !== undefined ? primaryFrmtAddress : undefined
-              }
-              billingAddress={
-                billingAddress !== undefined ? billingFrmtAddress : undefined
-              }
-              isSetBillingAction={isSetBillingAction}
-              isSetPrimaryAction={isSetPrimaryAction}
-            />
-          )}
-          {addressAction === ADDRESS_ACTIONS.DELETE && (
-            <AddressDeleteModal
-              setIsModalOpen={setIsModalOpen}
-              deleteAddress={deleteAddress}
-            />
-          )}
-        </>
+        <>{renderModalContent}</>
       </Modal>
     </div>
   );
diff --git a/src/utils/addressManagement.ts b/src/utils/addressManagement.ts
index d1b464a31..99ed700ab 100644
--- a/src/utils/addressManagement.ts
+++ b/src/utils/addressManagement.ts
@@ -1,4 +1,5 @@
-import {
+import type { UpdatedAddress } from '../features/user/Settings/EditProfile/AddressManagment';
+import type {
   AddressFormType,
   AddressType,
 } from '../features/user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu';
@@ -33,7 +34,6 @@ export const formatAddress = (
     .join(', ')
     .replace(/\s+/g, ' ')
     .trim();
-
   return cleanAddress;
 };
 
@@ -55,3 +55,10 @@ export const getAddressType = (
   }
   return 'other';
 };
+
+export const findAddressByType = (
+  addresses: UpdatedAddress[] | undefined,
+  type: AddressType
+) => {
+  return addresses?.find((address) => address.type === type) || null;
+};

From 13311acaae89a69dea15e5dff86f05559ab00cc6 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 22 Nov 2024 20:56:31 +0530
Subject: [PATCH 07/20] refactor: shift address delete modal to the root
 component

---
 .../AddressManagment/AddressDeleteModal.tsx   | 78 ++++++++++++++-----
 .../AddressManagment/AddressForm.tsx          | 14 ++--
 .../AddressManagement.module.scss             |  8 +-
 .../AddressTypeChangeModal.tsx                | 59 +++++++-------
 .../EditProfile/AddressManagment/index.tsx    | 16 ++--
 5 files changed, 109 insertions(+), 66 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
index fc374669a..b63f6b35d 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
@@ -1,38 +1,76 @@
+import { useContext, useState } from 'react';
+import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
+import { useTenant } from '../../../../common/Layout/TenantContext';
+import { useUserProps } from '../../../../common/Layout/UserPropsContext';
 import { SetState } from '../../../../common/types/common';
 import WebappButton from '../../../../common/WebappButton';
 import styles from './AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
+import { deleteAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
+import { APIError, handleError } from '@planet-sdk/common';
+import { CircularProgress } from '@mui/material';
 
 interface Props {
   setIsModalOpen: SetState<boolean>;
-  deleteAddress: () => Promise<void>;
+  addressId: string | undefined;
+  fetchUserAddresses: () => Promise<void>;
 }
 
-const AddressDeleteModal = ({ setIsModalOpen, deleteAddress }: Props) => {
+const AddressDeleteModal = ({
+  setIsModalOpen,
+  addressId,
+  fetchUserAddresses,
+}: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
+  const { contextLoaded, user, token, logoutUser } = useUserProps();
+  const { tenantConfig } = useTenant();
+  const { setErrors } = useContext(ErrorHandlingContext);
+  const [isUploadingData, setIsUploadingData] = useState(false);
+
+  const deleteAddress = async () => {
+    if (!contextLoaded || !user) return;
+    try {
+      setIsUploadingData(true);
+      await deleteAuthenticatedRequest(
+        tenantConfig.id,
+        `/app/addresses/${addressId}`,
+        token,
+        logoutUser
+      );
+      fetchUserAddresses();
+    } catch (error) {
+      setErrors(handleError(error as APIError));
+    } finally {
+      setIsModalOpen(false);
+      setIsUploadingData(false);
+    }
+  };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h1 className={styles.addressActionHeader}>
-        {tProfile('deleteAddress')}
-      </h1>
+      <h2>{tProfile('deleteAddress')}</h2>
       <p>{tProfile('deleteAddressConfirmationMessage')}</p>
-      <div className={styles.buttonContainer}>
-        <WebappButton
-          text={tCommon('cancel')}
-          elementType="button"
-          variant="secondary"
-          onClick={() => setIsModalOpen(false)}
-        />
-        <WebappButton
-          text={tProfile('delete')}
-          elementType="button"
-          variant="primary"
-          onClick={deleteAddress}
-        />
-      </div>
+      {!isUploadingData ? (
+        <div className={styles.buttonContainer}>
+          <WebappButton
+            text={tCommon('cancel')}
+            elementType="button"
+            variant="secondary"
+            onClick={() => setIsModalOpen(false)}
+          />
+          <WebappButton
+            text={tProfile('delete')}
+            elementType="button"
+            variant="primary"
+            onClick={deleteAddress}
+          />
+        </div>
+      ) : (
+        <div className={styles.addressMgmtSpinner}>
+          <CircularProgress color="success" />
+        </div>
+      )}
     </div>
   );
 };
-
 export default AddressDeleteModal;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
index 1db54c981..d4c50130c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
@@ -182,10 +182,10 @@ const AddressForm = ({
         handleCancel();
       }
     } catch (error) {
-      setIsUploadingData(false);
       setErrors(handleError(error as APIError));
     } finally {
       setIsUploadingData(false);
+      setIsModalOpen(false);
     }
   };
 
@@ -211,10 +211,10 @@ const AddressForm = ({
         }
       } catch (error) {
         resetForm();
-        setIsUploadingData(false);
         setErrors(handleError(error as APIError));
       } finally {
         setIsUploadingData(false);
+        setIsModalOpen(false);
       }
     }
   };
@@ -238,11 +238,7 @@ const AddressForm = ({
         country={country}
         setCountry={setCountry}
       />
-      {isUploadingData ? (
-        <div className={styles.addressMgmtSpinner}>
-          <CircularProgress color="success" />
-        </div>
-      ) : (
+      {!isUploadingData ? (
         <div className={styles.buttonContainer}>
           <WebappButton
             text={tCommon('cancel')}
@@ -264,6 +260,10 @@ const AddressForm = ({
             )}
           />
         </div>
+      ) : (
+        <div className={styles.addressMgmtSpinner}>
+          <CircularProgress color="success" />
+        </div>
       )}
     </div>
   );
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
index 56c0d5bf9..d19c1584e 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
@@ -82,10 +82,6 @@
 }
 // address action form
 
-.addressActionHeader {
-  font-weight: 700;
-  font-size: $fontSixteen;
-}
 .addressFormContainer {
   min-width: 565px;
   display: flex;
@@ -129,6 +125,10 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  h2 {
+    font-weight: 700;
+    font-size: $fontSixteen;
+  }
   .address {
     width: 100%;
     background: rgba(242, 242, 242, 0.5);
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
index a201fd103..ef47b18a8 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
@@ -14,6 +14,7 @@ import { useUserProps } from '../../../../common/Layout/UserPropsContext';
 import { useContext, useMemo, useState } from 'react';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
 import { APIError, CountryCode, handleError } from '@planet-sdk/common';
+import { CircularProgress } from '@mui/material';
 
 interface Props {
   setIsModalOpen: SetState<boolean>;
@@ -78,13 +79,8 @@ const AddressTypeChangeModal = ({
         token,
         logoutUser
       );
-      if (res) {
-        fetchUserAddresses();
-        setIsUploadingData(false);
-        setIsModalOpen(false);
-      }
+      if (res) fetchUserAddresses();
     } catch (error) {
-      setIsUploadingData(false);
       setErrors(handleError(error as APIError));
     } finally {
       setIsUploadingData(false);
@@ -93,13 +89,13 @@ const AddressTypeChangeModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h1 className={styles.addressActionHeader}>
+      <h2>
         {tProfile('addressType', {
           address: isSetPrimaryAction
             ? ADDRESS_TYPE.PRIMARY
             : ADDRESS_TYPE.MAILING,
         })}
-      </h1>
+      </h2>
       <p>
         {tProfile('addressConfirmationMessage', {
           addressType: isSetBillingAction
@@ -119,26 +115,33 @@ const AddressTypeChangeModal = ({
       {isPrimaryAddressAlreadyPresent && (
         <p className={styles.address}>{primaryFormattedAddress}</p>
       )}
-      <div className={styles.buttonContainer}>
-        <WebappButton
-          text={tCommon('cancel')}
-          elementType="button"
-          variant="secondary"
-          onClick={() => setIsModalOpen(false)}
-        />
-        <WebappButton
-          text={tProfile('confirm')}
-          elementType="button"
-          variant="primary"
-          onClick={() =>
-            updateAddress(
-              addressAction === ADDRESS_ACTIONS.SET_PRIMARY
-                ? ADDRESS_TYPE.PRIMARY
-                : ADDRESS_TYPE.MAILING
-            )
-          }
-        />
-      </div>
+
+      {!isUploadingData ? (
+        <div className={styles.buttonContainer}>
+          <WebappButton
+            text={tCommon('cancel')}
+            elementType="button"
+            variant="secondary"
+            onClick={() => setIsModalOpen(false)}
+          />
+          <WebappButton
+            text={tProfile('confirm')}
+            elementType="button"
+            variant="primary"
+            onClick={() =>
+              updateAddress(
+                addressAction === ADDRESS_ACTIONS.SET_PRIMARY
+                  ? ADDRESS_TYPE.PRIMARY
+                  : ADDRESS_TYPE.MAILING
+              )
+            }
+          />
+        </div>
+      ) : (
+        <div className={styles.addressMgmtSpinner}>
+          <CircularProgress color="success" />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 8df004cb5..c1f2e005b 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -25,6 +25,7 @@ import {
 import CenteredContainer from '../../../../common/Layout/CenteredContainer';
 import AddressForm from './AddressForm';
 import AddressTypeChangeModal from './AddressTypeChangeModal';
+import AddressDeleteModal from './AddressDeleteModal';
 
 export interface UpdatedAddress {
   id: string;
@@ -123,13 +124,14 @@ const AddressManagement = () => {
             fetchUserAddresses={fetchUserAddresses}
           />
         );
-      // case ADDRESS_ACTIONS.DELETE:
-      //   return (
-      //     <AddressDeleteModal
-      //       setIsModalOpen={setIsModalOpen}
-      //       deleteAddress={deleteAddress}
-      //     />
-      //   );
+      case ADDRESS_ACTIONS.DELETE:
+        return (
+          <AddressDeleteModal
+            setIsModalOpen={setIsModalOpen}
+            addressId={selectedAddressForAction?.id}
+            fetchUserAddresses={fetchUserAddresses}
+          />
+        );
     }
   }, [
     addressAction,

From b16d70543c6dc49bb442187e7e088848fd5bf2ee Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Fri, 22 Nov 2024 22:17:07 +0530
Subject: [PATCH 08/20] refactor:  simplify  AddressTypeConfirmationModal
 component

---
 public/static/locales/en/profile.json         |  5 +-
 ...l.tsx => AddressTypeConfirmationModal.tsx} | 69 ++++---------------
 .../EditProfile/AddressManagment/index.tsx    | 32 ++++++---
 .../microComponents/AddressContent.tsx        |  2 +-
 4 files changed, 39 insertions(+), 69 deletions(-)
 rename src/features/user/Settings/EditProfile/AddressManagment/{AddressTypeChangeModal.tsx => AddressTypeConfirmationModal.tsx} (61%)

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index de6747a8e..9cd7cc3b1 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -137,7 +137,7 @@
     },
     "addressManagement": {
       "addressManagementTitle": "Address",
-      "addressTags": {
+      "addressType": {
         "primary": "Primary Address",
         "mailing": "Billing Address"
       },
@@ -158,8 +158,7 @@
         "add": "Add Address",
         "edit": "Edit Address"
       },
-      "addressType": "{address, select, mailing {Billing} primary {Primary} other{}} Address",
-      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType, select, mailing {Billing} primary {Primary} other {}} Address? {billingAddress, select, mailing {This will replace your current Billing Address.} other {}} {primaryAddress, select, primary {This will replace your current Primary Address.} other {}}",
+      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType, select, mailing {billing} other {{addressType}}} address? {isAddressSet, select, true {This will replace your current {addressType, select, mailing {billing} other {{addressType}}} address.} other {}}",
       "deleteAddressConfirmationMessage": "Are you sure you want to delete this address? If you want to use it again, please add it as a new address.",
       "confirm": "Confirm"
     }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
similarity index 61%
rename from src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
rename to src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
index ef47b18a8..65701cf0d 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeChangeModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
@@ -1,8 +1,4 @@
-import {
-  ADDRESS_ACTIONS,
-  ADDRESS_TYPE,
-  formatAddress,
-} from '../../../../../utils/addressManagement';
+import { formatAddress } from '../../../../../utils/addressManagement';
 import styles from './AddressManagement.module.scss';
 import { useTranslations } from 'next-intl';
 import WebappButton from '../../../../common/WebappButton';
@@ -17,19 +13,17 @@ import { APIError, CountryCode, handleError } from '@planet-sdk/common';
 import { CircularProgress } from '@mui/material';
 
 interface Props {
+  type: 'primary' | 'mailing';
   setIsModalOpen: SetState<boolean>;
-  primaryAddress: UpdatedAddress | undefined;
-  billingAddress: UpdatedAddress | undefined;
-  addressAction: 'setPrimary' | 'setBilling';
+  address: UpdatedAddress | undefined;
   selectedAddressForAction: UpdatedAddress | null;
   fetchUserAddresses: () => Promise<void>;
 }
 
-const AddressTypeChangeModal = ({
+const AddressTypeConfirmationModal = ({
+  type,
   setIsModalOpen,
-  primaryAddress,
-  billingAddress,
-  addressAction,
+  address,
   selectedAddressForAction,
   fetchUserAddresses,
 }: Props) => {
@@ -40,10 +34,6 @@ const AddressTypeChangeModal = ({
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
   const [isUploadingData, setIsUploadingData] = useState(false);
-  const isSetPrimaryAction = addressAction === ADDRESS_ACTIONS.SET_PRIMARY;
-  const isSetBillingAction = addressAction === ADDRESS_ACTIONS.SET_BILLING;
-  const isBillingAddressAlreadyPresent = isSetBillingAction && billingAddress;
-  const isPrimaryAddressAlreadyPresent = isSetPrimaryAction && primaryAddress;
 
   const getCountryFullForm = (countryCode: string | undefined) => {
     return countryCode
@@ -56,13 +46,9 @@ const AddressTypeChangeModal = ({
     return formatAddress(userAddress, zipCode, city, state, countryFullForm);
   };
 
-  const primaryFormattedAddress = useMemo(
-    () => (primaryAddress ? getFormattedAddress(primaryAddress) : null),
-    [primaryAddress]
-  );
-  const billingFormattedAddress = useMemo(
-    () => (billingAddress ? getFormattedAddress(billingAddress) : null),
-    [billingAddress]
+  const formattedAddress = useMemo(
+    () => (address ? getFormattedAddress(address) : null),
+    [address]
   );
 
   const updateAddress = async (addressType: 'primary' | 'mailing') => {
@@ -89,33 +75,14 @@ const AddressTypeChangeModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h2>
-        {tProfile('addressType', {
-          address: isSetPrimaryAction
-            ? ADDRESS_TYPE.PRIMARY
-            : ADDRESS_TYPE.MAILING,
-        })}
-      </h2>
+      <h2>{tProfile(`addressType.${type}`)}</h2>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType: isSetBillingAction
-            ? ADDRESS_TYPE.MAILING
-            : ADDRESS_TYPE.PRIMARY,
-          billingAddress: isBillingAddressAlreadyPresent
-            ? ADDRESS_TYPE.MAILING
-            : '',
-          primaryAddress: isPrimaryAddressAlreadyPresent
-            ? ADDRESS_TYPE.PRIMARY
-            : '',
+          addressType: type,
+          isAddressSet: !!address,
         })}
       </p>
-      {isBillingAddressAlreadyPresent && (
-        <p className={styles.address}>{billingFormattedAddress}</p>
-      )}
-      {isPrimaryAddressAlreadyPresent && (
-        <p className={styles.address}>{primaryFormattedAddress}</p>
-      )}
-
+      {formattedAddress && <p className={styles.address}>{formattedAddress}</p>}
       {!isUploadingData ? (
         <div className={styles.buttonContainer}>
           <WebappButton
@@ -128,13 +95,7 @@ const AddressTypeChangeModal = ({
             text={tProfile('confirm')}
             elementType="button"
             variant="primary"
-            onClick={() =>
-              updateAddress(
-                addressAction === ADDRESS_ACTIONS.SET_PRIMARY
-                  ? ADDRESS_TYPE.PRIMARY
-                  : ADDRESS_TYPE.MAILING
-              )
-            }
+            onClick={() => updateAddress(type)}
           />
         </div>
       ) : (
@@ -146,4 +107,4 @@ const AddressTypeChangeModal = ({
   );
 };
 
-export default AddressTypeChangeModal;
+export default AddressTypeConfirmationModal;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index c1f2e005b..e4e970a38 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -24,7 +24,7 @@ import {
 } from '../../../../../utils/addressManagement';
 import CenteredContainer from '../../../../common/Layout/CenteredContainer';
 import AddressForm from './AddressForm';
-import AddressTypeChangeModal from './AddressTypeChangeModal';
+import AddressTypeConfirmationModal from './AddressTypeConfirmationModal';
 import AddressDeleteModal from './AddressDeleteModal';
 
 export interface UpdatedAddress {
@@ -99,7 +99,7 @@ const AddressManagement = () => {
           <AddressForm
             formType={ADDRESS_FORM_TYPE.ADD_ADDRESS}
             setIsModalOpen={setIsModalOpen}
-            setUserAddresses={setUserAddresses} // to update the address list
+            setUserAddresses={setUserAddresses}
           />
         );
       case ADDRESS_ACTIONS.EDIT:
@@ -109,26 +109,34 @@ const AddressManagement = () => {
             setIsModalOpen={setIsModalOpen}
             addressAction={addressAction}
             selectedAddressForAction={selectedAddressForAction}
-            fetchUserAddresses={fetchUserAddresses} // to update the address list
+            fetchUserAddresses={fetchUserAddresses}
+          />
+        );
+      case ADDRESS_ACTIONS.DELETE:
+        return (
+          <AddressDeleteModal
+            setIsModalOpen={setIsModalOpen}
+            addressId={selectedAddressForAction?.id}
+            fetchUserAddresses={fetchUserAddresses}
           />
         );
-      case ADDRESS_ACTIONS.SET_BILLING:
       case ADDRESS_ACTIONS.SET_PRIMARY:
         return (
-          <AddressTypeChangeModal
+          <AddressTypeConfirmationModal
+            type={ADDRESS_TYPE.PRIMARY}
+            address={primaryAddress}
             setIsModalOpen={setIsModalOpen}
-            primaryAddress={primaryAddress}
-            billingAddress={billingAddress}
-            addressAction={addressAction}
             selectedAddressForAction={selectedAddressForAction}
             fetchUserAddresses={fetchUserAddresses}
           />
         );
-      case ADDRESS_ACTIONS.DELETE:
+      case ADDRESS_ACTIONS.SET_BILLING:
         return (
-          <AddressDeleteModal
+          <AddressTypeConfirmationModal
+            type={ADDRESS_TYPE.MAILING}
+            address={billingAddress}
             setIsModalOpen={setIsModalOpen}
-            addressId={selectedAddressForAction?.id}
+            selectedAddressForAction={selectedAddressForAction}
             fetchUserAddresses={fetchUserAddresses}
           />
         );
@@ -139,6 +147,8 @@ const AddressManagement = () => {
     setUserAddresses,
     selectedAddressForAction,
     fetchUserAddresses,
+    primaryAddress,
+    billingAddress,
   ]);
 
   return userAddresses.length > 0 ? (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
index 2b37b776e..f5fa16349 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
@@ -12,7 +12,7 @@ const AddressContent = ({ type, userAddress }: Props) => {
     <div className={styles.addressSubContainer}>
       {type !== 'other' && (
         <span className={`${styles.addressTag} ${styles[type]}`}>
-          {tProfile(`addressTags.${type}`)}
+          {tProfile(`addressType.${type}`)}
         </span>
       )}
       <div className={styles.address}>{userAddress}</div>

From aaa584856a70b9de7e7623d208c0daadda844ff4 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:24:41 +0530
Subject: [PATCH 09/20] refactor: simplify address formatting logic,

---
 .../AddressTypeConfirmationModal.tsx          | 61 ++++++++++---------
 .../EditProfile/AddressManagment/index.tsx    | 21 ++++---
 .../microComponents/AddressDetails.tsx        | 13 ++--
 src/utils/addressManagement.ts                |  9 ++-
 4 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
index c0c82afa0..051973b92 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
@@ -1,30 +1,30 @@
 import type { SetState } from '../../../../common/types/common';
 import type { APIError, CountryCode, Address } from '@planet-sdk/common';
 
-import { formatAddress } from '../../../../../utils/addressManagement';
-import styles from './AddressManagement.module.scss';
+import { useContext, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { handleError } from '@planet-sdk/common';
+import { CircularProgress } from '@mui/material';
+import styles from './AddressManagement.module.scss';
 import WebappButton from '../../../../common/WebappButton';
 import { putAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { useUserProps } from '../../../../common/Layout/UserPropsContext';
-import { useContext, useMemo, useState } from 'react';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
-import { handleError } from '@planet-sdk/common';
-import { CircularProgress } from '@mui/material';
+import { getFormattedAddress } from '../../../../../utils/addressManagement';
 
 interface Props {
-  type: 'primary' | 'mailing';
+  mode: 'primary' | 'mailing';
   setIsModalOpen: SetState<boolean>;
-  address: Address | undefined;
+  userAddress: Address | undefined;
   selectedAddressForAction: Address | null;
   fetchUserAddresses: () => Promise<void>;
 }
 
 const AddressTypeConfirmationModal = ({
-  type,
+  mode,
   setIsModalOpen,
-  address,
+  userAddress,
   selectedAddressForAction,
   fetchUserAddresses,
 }: Props) => {
@@ -35,23 +35,20 @@ const AddressTypeConfirmationModal = ({
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
   const [isUploadingData, setIsUploadingData] = useState(false);
-
-  const getCountryFullForm = (countryCode: string | undefined) => {
-    return countryCode
-      ? tCountry(countryCode.toLowerCase() as Lowercase<CountryCode>)
-      : '';
-  };
-  const getFormattedAddress = (address: Address) => {
-    const { address: userAddress, zipCode, city, state, country } = address;
-    const countryFullForm = getCountryFullForm(country);
-    return formatAddress(userAddress, zipCode, city, state, countryFullForm);
-  };
+  const countryName = tCountry(
+    userAddress?.country.toLowerCase() as Lowercase<CountryCode>
+  );
 
   const formattedAddress = useMemo(
-    () => (address ? getFormattedAddress(address) : null),
-    [address]
+    () =>
+      getFormattedAddress(
+        userAddress?.zipCode,
+        userAddress?.city,
+        userAddress?.state,
+        countryName
+      ),
+    [userAddress, countryName]
   );
-
   const updateAddress = async (addressType: 'primary' | 'mailing') => {
     if (!contextLoaded || !user) return;
     setIsUploadingData(true);
@@ -76,14 +73,22 @@ const AddressTypeConfirmationModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h2>{tProfile(`addressType.${type}`)}</h2>
+      <h2>{tProfile(`addressType.${mode}`)}</h2>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType: type,
-          isAddressSet: !!address,
+          addressType: mode,
+          isAddressSet: !!userAddress,
         })}
       </p>
-      {formattedAddress && <p className={styles.address}>{formattedAddress}</p>}
+      {userAddress && (
+        <div className={styles.address}>
+          <address>
+            <p>{userAddress?.address}</p>
+            {userAddress?.address2 && <p>{userAddress?.address2}</p>}
+            <p>{formattedAddress}</p>
+          </address>
+        </div>
+      )}
       {!isUploadingData ? (
         <div className={styles.buttonContainer}>
           <WebappButton
@@ -96,7 +101,7 @@ const AddressTypeConfirmationModal = ({
             text={tProfile('confirm')}
             elementType="button"
             variant="primary"
-            onClick={() => updateAddress(type)}
+            onClick={() => updateAddress(mode)}
           />
         </div>
       ) : (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 2dab7bf3d..faba27f20 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -76,6 +76,11 @@ const AddressManagement = () => {
     () => findAddressByType(userAddresses, ADDRESS_TYPE.MAILING),
     [userAddresses]
   );
+  const addrTypeConfProps = {
+    setIsModalOpen,
+    selectedAddressForAction,
+    fetchUserAddresses,
+  };
   const renderModalContent = useMemo(() => {
     switch (addressAction) {
       case ADDRESS_ACTIONS.ADD:
@@ -107,21 +112,17 @@ const AddressManagement = () => {
       case ADDRESS_ACTIONS.SET_PRIMARY:
         return (
           <AddressTypeConfirmationModal
-            type={ADDRESS_TYPE.PRIMARY}
-            address={primaryAddress}
-            setIsModalOpen={setIsModalOpen}
-            selectedAddressForAction={selectedAddressForAction}
-            fetchUserAddresses={fetchUserAddresses}
+            mode={ADDRESS_TYPE.PRIMARY}
+            userAddress={primaryAddress}
+            {...addrTypeConfProps}
           />
         );
       case ADDRESS_ACTIONS.SET_BILLING:
         return (
           <AddressTypeConfirmationModal
-            type={ADDRESS_TYPE.MAILING}
-            address={billingAddress}
-            setIsModalOpen={setIsModalOpen}
-            selectedAddressForAction={selectedAddressForAction}
-            fetchUserAddresses={fetchUserAddresses}
+            mode={ADDRESS_TYPE.MAILING}
+            userAddress={billingAddress}
+            {...addrTypeConfProps}
           />
         );
     }
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
index a92872fcb..4c434b21f 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
@@ -3,6 +3,7 @@ import type { CountryCode, Address } from '@planet-sdk/common';
 import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import styles from '../AddressManagement.module.scss';
+import { getFormattedAddress } from '../../../../../../utils/addressManagement';
 
 interface Props {
   userAddress: Address;
@@ -14,14 +15,10 @@ const AddressDetails = ({ userAddress }: Props) => {
   const tCountry = useTranslations('Country');
   const countryName = tCountry(country.toLowerCase() as Lowercase<CountryCode>);
 
-  const formattedAddress = useMemo(() => {
-    return [zipCode, city, state, countryName]
-      .filter(Boolean)
-      .join(', ')
-      .replace(/\s+/g, ' ')
-      .trim();
-  }, [zipCode, city, state, countryName]);
-
+  const formattedAddress = useMemo(
+    () => getFormattedAddress(zipCode, city, state, countryName),
+    [zipCode, city, state, countryName]
+  );
   return (
     <div className={styles.addressDetails}>
       {type !== 'other' && (
diff --git a/src/utils/addressManagement.ts b/src/utils/addressManagement.ts
index 84bd43ec4..b90462b12 100644
--- a/src/utils/addressManagement.ts
+++ b/src/utils/addressManagement.ts
@@ -20,14 +20,13 @@ export const ADDRESS_FORM_TYPE = {
 } as const;
 export const addressTypeOrder = ['primary', 'mailing', 'other'];
 
-export const formatAddress = (
-  address: string | undefined,
+export const getFormattedAddress = (
   zipCode: string | undefined,
   city: string | undefined,
-  state: string | null,
-  country: string
+  state: string | null | undefined,
+  countryName: string
 ) => {
-  const cleanAddress = [address, `${zipCode} ${city}`, state, country]
+  const cleanAddress = [zipCode, city, state, countryName]
     .filter(Boolean)
     .join(', ')
     .replace(/\s+/g, ' ')

From df3db6911c825d2040ace25c8478c932b94a616f Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:45:13 +0530
Subject: [PATCH 10/20] feat: add FormattedAddressBlock component to display
 user address

---
 .../AddressTypeConfirmationModal.tsx          | 26 +++--------------
 .../microComponents/AddressDetails.tsx        | 20 +++----------
 .../microComponents/FormattedAddressBlock.tsx | 28 +++++++++++++++++++
 3 files changed, 36 insertions(+), 38 deletions(-)
 create mode 100644 src/features/user/Settings/EditProfile/AddressManagment/microComponents/FormattedAddressBlock.tsx

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
index 051973b92..adb5eaad2 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
@@ -1,7 +1,7 @@
 import type { SetState } from '../../../../common/types/common';
-import type { APIError, CountryCode, Address } from '@planet-sdk/common';
+import type { APIError, Address } from '@planet-sdk/common';
 
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { handleError } from '@planet-sdk/common';
 import { CircularProgress } from '@mui/material';
@@ -11,7 +11,7 @@ import { putAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
 import { useTenant } from '../../../../common/Layout/TenantContext';
 import { useUserProps } from '../../../../common/Layout/UserPropsContext';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
-import { getFormattedAddress } from '../../../../../utils/addressManagement';
+import FormattedAddressBlock from './microComponents/FormattedAddressBlock';
 
 interface Props {
   mode: 'primary' | 'mailing';
@@ -30,25 +30,11 @@ const AddressTypeConfirmationModal = ({
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
-  const tCountry = useTranslations('Country');
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
   const [isUploadingData, setIsUploadingData] = useState(false);
-  const countryName = tCountry(
-    userAddress?.country.toLowerCase() as Lowercase<CountryCode>
-  );
 
-  const formattedAddress = useMemo(
-    () =>
-      getFormattedAddress(
-        userAddress?.zipCode,
-        userAddress?.city,
-        userAddress?.state,
-        countryName
-      ),
-    [userAddress, countryName]
-  );
   const updateAddress = async (addressType: 'primary' | 'mailing') => {
     if (!contextLoaded || !user) return;
     setIsUploadingData(true);
@@ -82,11 +68,7 @@ const AddressTypeConfirmationModal = ({
       </p>
       {userAddress && (
         <div className={styles.address}>
-          <address>
-            <p>{userAddress?.address}</p>
-            {userAddress?.address2 && <p>{userAddress?.address2}</p>}
-            <p>{formattedAddress}</p>
-          </address>
+          <FormattedAddressBlock userAddress={userAddress} />
         </div>
       )}
       {!isUploadingData ? (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
index 4c434b21f..8670580d3 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressDetails.tsx
@@ -1,34 +1,22 @@
-import type { CountryCode, Address } from '@planet-sdk/common';
+import type { Address } from '@planet-sdk/common';
 
-import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import styles from '../AddressManagement.module.scss';
-import { getFormattedAddress } from '../../../../../../utils/addressManagement';
+import FormattedAddressBlock from './FormattedAddressBlock';
 
 interface Props {
   userAddress: Address;
 }
 const AddressDetails = ({ userAddress }: Props) => {
-  const { zipCode, city, state, country, address, address2, type } =
-    userAddress;
+  const { type } = userAddress;
   const tProfile = useTranslations('Profile.addressManagement');
-  const tCountry = useTranslations('Country');
-  const countryName = tCountry(country.toLowerCase() as Lowercase<CountryCode>);
 
-  const formattedAddress = useMemo(
-    () => getFormattedAddress(zipCode, city, state, countryName),
-    [zipCode, city, state, countryName]
-  );
   return (
     <div className={styles.addressDetails}>
       {type !== 'other' && (
         <span className={styles[type]}>{tProfile(`addressType.${type}`)}</span>
       )}
-      <address>
-        <p>{address}</p>
-        {address2 && <p>{address2}</p>}
-        <p>{formattedAddress}</p>
-      </address>
+      <FormattedAddressBlock userAddress={userAddress} />
     </div>
   );
 };
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/FormattedAddressBlock.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/FormattedAddressBlock.tsx
new file mode 100644
index 000000000..ab09e0a9f
--- /dev/null
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/FormattedAddressBlock.tsx
@@ -0,0 +1,28 @@
+import type { Address, CountryCode } from '@planet-sdk/common';
+
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { getFormattedAddress } from '../../../../../../utils/addressManagement';
+
+interface Props {
+  userAddress: Address | undefined;
+}
+
+const FormattedAddressBlock = ({ userAddress }: Props) => {
+  if (!userAddress) return null;
+  const tCountry = useTranslations('Country');
+  const { zipCode, city, state, country, address, address2 } = userAddress;
+  const countryName = tCountry(country.toLowerCase() as Lowercase<CountryCode>);
+  const formattedAddress = useMemo(
+    () => getFormattedAddress(zipCode, city, state, countryName),
+    [zipCode, city, state, countryName]
+  );
+  return (
+    <address>
+      <p>{address}</p>
+      {address2 && <p>{address2}</p>}
+      <p>{formattedAddress}</p>
+    </address>
+  );
+};
+export default FormattedAddressBlock;

From ea0228b1017d17773d1183adeb486a927ca185ea Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:33:44 +0530
Subject: [PATCH 11/20] refactor: rename variable, and wrap the
 fetchUserAddresses function in useCallback

---
 .../AddressManagment/AddressDeleteModal.tsx            |  8 ++++----
 .../AddressManagment/AddressTypeConfirmationModal.tsx  | 10 +++++-----
 .../Settings/EditProfile/AddressManagment/index.tsx    | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
index 3229463b8..1443dd682 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
@@ -28,12 +28,12 @@ const AddressDeleteModal = ({
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
   const { setErrors } = useContext(ErrorHandlingContext);
-  const [isUploadingData, setIsUploadingData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const deleteAddress = async () => {
     if (!contextLoaded || !user) return;
     try {
-      setIsUploadingData(true);
+      setIsLoading(true);
       await deleteAuthenticatedRequest(
         tenantConfig.id,
         `/app/addresses/${addressId}`,
@@ -45,14 +45,14 @@ const AddressDeleteModal = ({
       setErrors(handleError(error as APIError));
     } finally {
       setIsModalOpen(false);
-      setIsUploadingData(false);
+      setIsLoading(false);
     }
   };
   return (
     <div className={styles.addrConfirmContainer}>
       <h2>{tProfile('deleteAddress')}</h2>
       <p>{tProfile('deleteAddressConfirmationMessage')}</p>
-      {!isUploadingData ? (
+      {!isLoading ? (
         <div className={styles.buttonContainer}>
           <WebappButton
             text={tCommon('cancel')}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
index adb5eaad2..f14e617a6 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
@@ -14,7 +14,7 @@ import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingCon
 import FormattedAddressBlock from './microComponents/FormattedAddressBlock';
 
 interface Props {
-  mode: 'primary' | 'mailing';
+  addressType: 'primary' | 'mailing';
   setIsModalOpen: SetState<boolean>;
   userAddress: Address | undefined;
   selectedAddressForAction: Address | null;
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const AddressTypeConfirmationModal = ({
-  mode,
+  addressType,
   setIsModalOpen,
   userAddress,
   selectedAddressForAction,
@@ -59,10 +59,10 @@ const AddressTypeConfirmationModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h2>{tProfile(`addressType.${mode}`)}</h2>
+      <h2>{tProfile(`addressType.${addressType}`)}</h2>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType: mode,
+          addressType,
           isAddressSet: !!userAddress,
         })}
       </p>
@@ -83,7 +83,7 @@ const AddressTypeConfirmationModal = ({
             text={tProfile('confirm')}
             elementType="button"
             variant="primary"
-            onClick={() => updateAddress(mode)}
+            onClick={() => updateAddress(addressType)}
           />
         </div>
       ) : (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index faba27f20..be989a104 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -1,7 +1,7 @@
 import type { Address, APIError } from '@planet-sdk/common';
 import type { AddressAction } from '../../../../common/types/profile';
 
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Modal } from '@mui/material';
 import { handleError } from '@planet-sdk/common';
@@ -45,7 +45,7 @@ const AddressManagement = () => {
     });
   }, [userAddresses]);
 
-  const fetchUserAddresses = async () => {
+  const fetchUserAddresses = useCallback(async () => {
     if (!user || !token || !contextLoaded) return;
     try {
       const res = await getAuthenticatedRequest<Address[]>(
@@ -58,7 +58,7 @@ const AddressManagement = () => {
     } catch (error) {
       setErrors(handleError(error as APIError));
     }
-  };
+  }, [user, token, contextLoaded, tenantConfig.id, logoutUser]);
 
   useEffect(() => {
     fetchUserAddresses();
@@ -112,7 +112,7 @@ const AddressManagement = () => {
       case ADDRESS_ACTIONS.SET_PRIMARY:
         return (
           <AddressTypeConfirmationModal
-            mode={ADDRESS_TYPE.PRIMARY}
+            addressType={ADDRESS_TYPE.PRIMARY}
             userAddress={primaryAddress}
             {...addrTypeConfProps}
           />
@@ -120,7 +120,7 @@ const AddressManagement = () => {
       case ADDRESS_ACTIONS.SET_BILLING:
         return (
           <AddressTypeConfirmationModal
-            mode={ADDRESS_TYPE.MAILING}
+            addressType={ADDRESS_TYPE.MAILING}
             userAddress={billingAddress}
             {...addrTypeConfProps}
           />

From 64f735181f6256d7089a78449370dd29cc57e515 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:14:30 +0530
Subject: [PATCH 12/20] refactor: minor ui fixes

---
 .../AddressManagment/AddAddressForm.tsx       |   4 +-
 .../AddressManagment/AddressDeleteModal.tsx   |   2 +-
 .../AddressManagment/AddressForm.tsx          | 274 ------------------
 .../AddressManagement.module.scss             |  16 +-
 .../AddressTypeConfirmationModal.tsx          |   4 +-
 .../AddressManagment/EditAddressForm.tsx      |   4 +-
 .../EditProfile/AddressManagment/index.tsx    |   3 +-
 7 files changed, 15 insertions(+), 292 deletions(-)
 delete mode 100644 src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
index 2e08a31c0..b2e98cf56 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
@@ -150,7 +150,7 @@ const AddAddressForm = ({ setIsModalOpen, setUserAddresses }: Props) => {
   };
   return (
     <div className={styles.addressFormContainer}>
-      <h2>{tProfile('addAddress')}</h2>
+      <h2 className={styles.header}>{tProfile('addAddress')}</h2>
       <AddressFormInputs
         handleInputChange={handleInputChange}
         handleAddressSelect={handleAddressSelect}
@@ -166,7 +166,7 @@ const AddAddressForm = ({ setIsModalOpen, setUserAddresses }: Props) => {
           <CircularProgress color="success" />
         </div>
       ) : (
-        <div className={styles.formButtonContainer}>
+        <div className={styles.buttonContainer}>
           <WebappButton
             text={tCommon('cancel')}
             variant="secondary"
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
index 879a902a1..a15baaa37 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
@@ -50,7 +50,7 @@ const AddressDeleteModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h2>{tProfile('deleteAddress')}</h2>
+      <h2 className={styles.header}>{tProfile('deleteAddress')}</h2>
       <p>{tProfile('deleteAddressConfirmationMessage')}</p>
       {!isLoading ? (
         <div className={styles.buttonContainer}>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
deleted file mode 100644
index 6c9efafe2..000000000
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressForm.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import type {
-  AddressSuggestionsType,
-  AddressType,
-} from '../../../../common/types/geocoder';
-import type { ExtendedCountryCode } from '../../../../common/types/country';
-import type { SetState } from '../../../../common/types/common';
-import type { Address, APIError } from '@planet-sdk/common';
-import type { AddressAction } from '../../../../common/types/profile';
-
-import { useState, useContext, useMemo, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslations } from 'next-intl';
-import { CircularProgress } from '@mui/material';
-import GeocoderArcGIs from 'geocoder-arcgis';
-import { handleError } from '@planet-sdk/common';
-import styles from './AddressManagement.module.scss';
-import WebappButton from '../../../../common/WebappButton';
-import COUNTRY_ADDRESS_POSTALS from '../../../../../utils/countryZipCode';
-import { useUserProps } from '../../../../common/Layout/UserPropsContext';
-import {
-  postAuthenticatedRequest,
-  putAuthenticatedRequest,
-} from '../../../../../utils/apiRequests/api';
-import { useTenant } from '../../../../common/Layout/TenantContext';
-import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
-import {
-  ADDRESS_FORM_TYPE,
-  ADDRESS_TYPE,
-} from '../../../../../utils/addressManagement';
-import { useDebouncedEffect } from '../../../../../utils/useDebouncedEffect';
-import AddressFormInputs from './microComponents/AddressFormInputs';
-
-export type AddressFormData = {
-  address: string | undefined;
-  address2: string | null;
-  city: string | undefined;
-  zipCode: string | undefined;
-  state: string | null;
-};
-
-type AddressFormType =
-  (typeof ADDRESS_FORM_TYPE)[keyof typeof ADDRESS_FORM_TYPE];
-interface Props {
-  formType: AddressFormType;
-  setIsModalOpen: SetState<boolean>;
-  setUserAddresses?: SetState<Address[]>;
-  selectedAddressForAction?: Address | null;
-  addressAction?: AddressAction | null;
-  fetchUserAddresses?: () => Promise<void>;
-}
-const geocoder = new GeocoderArcGIs(
-  process.env.ESRI_CLIENT_SECRET
-    ? {
-        client_id: process.env.ESRI_CLIENT_ID,
-        client_secret: process.env.ESRI_CLIENT_SECRET,
-      }
-    : {}
-);
-const AddressForm = ({
-  addressAction,
-  formType,
-  setIsModalOpen,
-  setUserAddresses,
-  selectedAddressForAction,
-  fetchUserAddresses,
-}: Props) => {
-  const defaultAddressDetail = {
-    address: selectedAddressForAction ? selectedAddressForAction.address : '',
-    address2: selectedAddressForAction ? selectedAddressForAction.address2 : '',
-    city: selectedAddressForAction ? selectedAddressForAction.city : '',
-    zipCode: selectedAddressForAction ? selectedAddressForAction.zipCode : '',
-    state: selectedAddressForAction ? selectedAddressForAction.state : '',
-  };
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm<AddressFormData>({
-    mode: 'onBlur',
-    defaultValues: defaultAddressDetail,
-  });
-
-  const tProfile = useTranslations('Profile');
-  const tCommon = useTranslations('Common');
-  const { contextLoaded, user, token, logoutUser } = useUserProps();
-  const { tenantConfig } = useTenant();
-  const { setErrors } = useContext(ErrorHandlingContext);
-  const isAddAddressForm = formType === ADDRESS_FORM_TYPE.ADD_ADDRESS;
-  const userCountry = isAddAddressForm
-    ? user?.country
-    : selectedAddressForAction?.country;
-  const [country, setCountry] = useState<ExtendedCountryCode | ''>(
-    userCountry ?? 'DE'
-  );
-  const [addressSuggestions, setAddressSuggestions] = useState<
-    AddressSuggestionsType[]
-  >([]);
-  const [inputValue, setInputValue] = useState('');
-  const [isUploadingData, setIsUploadingData] = useState(false);
-  const suggestAddress = useCallback(
-    (value: string) => {
-      if (value.length > 3) {
-        geocoder
-          .suggest(value, { category: 'Address', countryCode: country })
-          .then((result: { suggestions: AddressSuggestionsType[] }) => {
-            const filterdSuggestions = result.suggestions.filter(
-              (suggestion: AddressSuggestionsType) => {
-                return !suggestion.isCollection;
-              }
-            );
-            setAddressSuggestions(filterdSuggestions);
-          })
-          .catch(console.log);
-      }
-    },
-    [country, geocoder]
-  );
-
-  useDebouncedEffect(
-    () => {
-      if (inputValue) {
-        suggestAddress(inputValue);
-      }
-    },
-    700,
-    [inputValue]
-  );
-
-  const getAddress = (value: string) => {
-    geocoder
-      .findAddressCandidates(value, { outfields: '*' })
-      .then((result: AddressType) => {
-        setValue('address', result.candidates[0].attributes.ShortLabel, {
-          shouldValidate: true,
-        });
-        setValue('city', result.candidates[0].attributes.City, {
-          shouldValidate: true,
-        });
-        setValue('zipCode', result.candidates[0].attributes.Postal, {
-          shouldValidate: true,
-        });
-        setAddressSuggestions([]);
-      })
-      .catch(console.log);
-  };
-
-  const postalRegex = useMemo(() => {
-    const filteredCountry = COUNTRY_ADDRESS_POSTALS.find(
-      (item) => item.abbrev === country
-    );
-    return filteredCountry?.postal;
-  }, [country]);
-
-  const resetForm = () => {
-    reset(defaultAddressDetail);
-    setAddressSuggestions([]);
-  };
-  const handleCancel = () => {
-    setIsModalOpen(false);
-    resetForm();
-  };
-
-  const updateAddress = async (data: AddressFormData) => {
-    if (!addressAction || !selectedAddressForAction || formType === 'add')
-      return;
-    setIsUploadingData(true);
-    const bodyToSend = {
-      ...data,
-      country,
-      type: selectedAddressForAction.type,
-    };
-    try {
-      const res = await putAuthenticatedRequest<Address>(
-        tenantConfig.id,
-        `/app/addresses/${selectedAddressForAction?.id}`,
-        bodyToSend,
-        token,
-        logoutUser
-      );
-      if (res && fetchUserAddresses) {
-        fetchUserAddresses();
-        handleCancel();
-      }
-    } catch (error) {
-      setErrors(handleError(error as APIError));
-    } finally {
-      setIsUploadingData(false);
-      setIsModalOpen(false);
-    }
-  };
-
-  const addAddress = async (data: AddressFormData) => {
-    setIsUploadingData(true);
-    const bodyToSend = {
-      ...data,
-      country,
-      type: ADDRESS_TYPE.OTHER,
-    };
-    if (contextLoaded && user) {
-      try {
-        const res = await postAuthenticatedRequest<Address>(
-          tenantConfig.id,
-          '/app/addresses',
-          bodyToSend,
-          token,
-          logoutUser
-        );
-        if (res && setUserAddresses) {
-          setUserAddresses((prevAddresses) => [...prevAddresses, res]);
-          handleCancel();
-        }
-      } catch (error) {
-        resetForm();
-        setErrors(handleError(error as APIError));
-      } finally {
-        setIsUploadingData(false);
-        setIsModalOpen(false);
-      }
-    }
-  };
-  const handleInputChange = (value: string) => {
-    setInputValue(value);
-  };
-
-  const handleAddressSelect = (address: string) => {
-    getAddress(address);
-  };
-  return (
-    <div className={styles.addressFormContainer}>
-      <h2>{tProfile(`addressManagement.formType.${formType}`)}</h2>
-      <AddressFormInputs
-        handleInputChange={handleInputChange}
-        handleAddressSelect={handleAddressSelect}
-        addressSuggestions={addressSuggestions}
-        control={control}
-        errors={errors}
-        postalRegex={postalRegex}
-        country={country}
-        setCountry={setCountry}
-      />
-      {!isUploadingData ? (
-        <div className={styles.buttonContainer}>
-          <WebappButton
-            text={tCommon('cancel')}
-            variant="secondary"
-            elementType="button"
-            onClick={handleCancel}
-            buttonClasses={styles.cancelButton}
-          />
-          <WebappButton
-            text={
-              isAddAddressForm
-                ? tProfile(`addressManagement.formType.${formType}`)
-                : tProfile('addressManagement.saveChanges')
-            }
-            variant="primary"
-            elementType="button"
-            onClick={handleSubmit(
-              isAddAddressForm ? addAddress : updateAddress
-            )}
-          />
-        </div>
-      ) : (
-        <div className={styles.addressMgmtSpinner}>
-          <CircularProgress color="success" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AddressForm;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
index 15109e1c9..0b144e5ce 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
@@ -95,6 +95,11 @@
 }
 // address action form
 
+.header {
+  font-weight: 700;
+  font-size: $fontSixteen;
+}
+
 .addressFormContainer {
   min-width: 565px;
   display: flex;
@@ -107,10 +112,6 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  h2 {
-    font-weight: 700;
-    font-size: $fontSixteen;
-  }
   .addressForm {
     display: flex;
     flex-direction: column;
@@ -121,8 +122,7 @@
     justify-content: space-between;
     gap: 8px;
     button {
-      min-width: 252px;
-      min-height: 40px;
+      flex: 1 1;
     }
   }
 }
@@ -138,10 +138,6 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  h2 {
-    font-weight: 700;
-    font-size: $fontSixteen;
-  }
   .address {
     width: 100%;
     background: rgba(242, 242, 242, 0.5);
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
index ec0a82ed6..8454fe73a 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
@@ -59,7 +59,9 @@ const AddressTypeConfirmationModal = ({
   };
   return (
     <div className={styles.addrConfirmContainer}>
-      <h2>{tProfile(`addressType.${addressType}`)}</h2>
+      <h2 className={styles.header}>
+        {tProfile(`addressType.${addressType}`)}
+      </h2>
       <p>
         {tProfile('addressConfirmationMessage', {
           addressType,
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
index 4bf7ed9ad..7371908f3 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
@@ -153,7 +153,7 @@ const EditAddressForm = ({
 
   return (
     <div className={styles.addressFormContainer}>
-      <h2>{tProfile('editAddress')}</h2>
+      <h2 className={styles.header}>{tProfile('editAddress')}</h2>
       <AddressFormInputs
         handleInputChange={handleInputChange}
         handleAddressSelect={handleAddressSelect}
@@ -169,7 +169,7 @@ const EditAddressForm = ({
           <CircularProgress color="success" />
         </div>
       ) : (
-        <div className={styles.formButtonContainer}>
+        <div className={styles.buttonContainer}>
           <WebappButton
             text={tCommon('cancel')}
             variant="secondary"
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index d1709706a..74de1d637 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -19,7 +19,6 @@ import {
   findAddressByType,
 } from '../../../../../utils/addressManagement';
 import CenteredContainer from '../../../../common/Layout/CenteredContainer';
-
 import AddressTypeConfirmationModal from './AddressTypeConfirmationModal';
 import AddressDeleteModal from './AddressDeleteModal';
 import EditAddressForm from './EditAddressForm';
@@ -131,8 +130,8 @@ const AddressManagement = () => {
     fetchUserAddresses,
     primaryAddress,
     billingAddress,
+    addressAction,
   ]);
-
   return userAddresses.length > 0 ? (
     <section className={styles.addressManagement}>
       <h2 className={styles.addressManagementTitle}>

From 9ff86732d207510313bdadf432064b6a668e8b13 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 2 Dec 2024 15:10:22 +0530
Subject: [PATCH 13/20] refactor: remove unneeded files

---
 .../AddressManagment/AddAddressForm.tsx       | 190 -----------------
 .../AddressManagment/EditAddressForm.tsx      | 193 ------------------
 .../microComponents/AddressContent.tsx        |  24 ---
 3 files changed, 407 deletions(-)
 delete mode 100644 src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
 delete mode 100644 src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
 delete mode 100644 src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
deleted file mode 100644
index b2e98cf56..000000000
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddAddressForm.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import type { AddressSuggestionsType } from '../../../../common/types/geocoder';
-import type { ExtendedCountryCode } from '../../../../common/types/country';
-import type { SetState } from '../../../../common/types/common';
-import type { Address, APIError } from '@planet-sdk/common';
-
-import { useState, useContext, useMemo, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslations } from 'next-intl';
-import { CircularProgress } from '@mui/material';
-import { handleError } from '@planet-sdk/common';
-import styles from './AddressManagement.module.scss';
-import WebappButton from '../../../../common/WebappButton';
-import { useUserProps } from '../../../../common/Layout/UserPropsContext';
-import { postAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
-import { useTenant } from '../../../../common/Layout/TenantContext';
-import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
-import { useDebouncedEffect } from '../../../../../utils/useDebouncedEffect';
-import AddressFormInputs from './microComponents/AddressFormInputs';
-import {
-  ADDRESS_TYPE,
-  fetchAddressDetails,
-  geocoder,
-  getPostalRegex,
-  suggestAddress,
-} from '../../../../../utils/addressManagement';
-
-export type FormData = {
-  address: string | undefined;
-  address2: string | null;
-  city: string | undefined;
-  zipCode: string | undefined;
-  state: string | null;
-};
-
-interface Props {
-  setIsModalOpen: SetState<boolean>;
-  setUserAddresses: SetState<Address[]>;
-}
-
-const AddAddressForm = ({ setIsModalOpen, setUserAddresses }: Props) => {
-  const defaultAddressDetail = {
-    address: '',
-    address2: '',
-    city: '',
-    zipCode: '',
-    state: '',
-  };
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm<FormData>({
-    mode: 'onBlur',
-    defaultValues: defaultAddressDetail,
-  });
-
-  const tProfile = useTranslations('Profile.addressManagement');
-  const tCommon = useTranslations('Common');
-  const { contextLoaded, user, token, logoutUser } = useUserProps();
-  const { tenantConfig } = useTenant();
-  const { setErrors } = useContext(ErrorHandlingContext);
-  const [country, setCountry] = useState<ExtendedCountryCode | ''>(
-    user?.country ?? 'DE'
-  );
-  const [addressSuggestions, setAddressSuggestions] = useState<
-    AddressSuggestionsType[]
-  >([]);
-  const [inputValue, setInputValue] = useState('');
-  const [isUploadingData, setIsUploadingData] = useState(false);
-
-  const handleSuggestAddress = useCallback(
-    async (value: string) => {
-      const suggestions = await suggestAddress(value, country);
-      setAddressSuggestions(suggestions);
-    },
-    [geocoder, country]
-  );
-
-  const handleGetAddress = useCallback(
-    async (value: string) => {
-      const details = await fetchAddressDetails(value);
-      if (details) {
-        setValue('address', details.address, { shouldValidate: true });
-        setValue('city', details.city, { shouldValidate: true });
-        setValue('zipCode', details.zipCode, { shouldValidate: true });
-      }
-      setAddressSuggestions([]);
-    },
-    [geocoder, setValue]
-  );
-
-  useDebouncedEffect(
-    () => {
-      if (inputValue) {
-        handleSuggestAddress(inputValue);
-      }
-    },
-    700,
-    [inputValue]
-  );
-
-  const postalRegex = useMemo(() => getPostalRegex(country), [country]);
-
-  const resetForm = () => {
-    reset(defaultAddressDetail);
-    setAddressSuggestions([]);
-  };
-  const handleCancel = () => {
-    setIsModalOpen(false);
-    resetForm();
-  };
-
-  const addAddress = async (data: FormData) => {
-    if (!contextLoaded || !user || !token) return;
-    setIsUploadingData(true);
-    const bodyToSend = {
-      ...data,
-      country,
-      type: ADDRESS_TYPE.OTHER,
-    };
-    try {
-      const res = await postAuthenticatedRequest<Address>(
-        tenantConfig.id,
-        '/app/addresses',
-        bodyToSend,
-        token,
-        logoutUser
-      );
-      if (res && setUserAddresses) {
-        setUserAddresses((prevAddresses) => [...prevAddresses, res]);
-        handleCancel();
-      }
-    } catch (error) {
-      resetForm();
-      setIsUploadingData(false);
-      setErrors(handleError(error as APIError));
-    } finally {
-      setIsUploadingData(false);
-      setIsModalOpen(false);
-    }
-  };
-  const handleInputChange = (value: string) => {
-    setInputValue(value);
-  };
-
-  const handleAddressSelect = (address: string) => {
-    handleGetAddress(address);
-  };
-  return (
-    <div className={styles.addressFormContainer}>
-      <h2 className={styles.header}>{tProfile('addAddress')}</h2>
-      <AddressFormInputs
-        handleInputChange={handleInputChange}
-        handleAddressSelect={handleAddressSelect}
-        addressSuggestions={addressSuggestions}
-        control={control}
-        errors={errors}
-        postalRegex={postalRegex}
-        country={country}
-        setCountry={setCountry}
-      />
-      {isUploadingData ? (
-        <div className={styles.addressMgmtSpinner}>
-          <CircularProgress color="success" />
-        </div>
-      ) : (
-        <div className={styles.buttonContainer}>
-          <WebappButton
-            text={tCommon('cancel')}
-            variant="secondary"
-            elementType="button"
-            onClick={handleCancel}
-            buttonClasses={styles.cancelButton}
-          />
-          <WebappButton
-            text={tProfile('addAddress')}
-            variant="primary"
-            elementType="button"
-            onClick={handleSubmit(addAddress)}
-            buttonClasses={styles.addAddressButton}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AddAddressForm;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
deleted file mode 100644
index 7371908f3..000000000
--- a/src/features/user/Settings/EditProfile/AddressManagment/EditAddressForm.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import type { AddressSuggestionsType } from '../../../../common/types/geocoder';
-import type { ExtendedCountryCode } from '../../../../common/types/country';
-import type { SetState } from '../../../../common/types/common';
-import type { Address, APIError } from '@planet-sdk/common';
-
-import { useState, useContext, useMemo, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslations } from 'next-intl';
-import { CircularProgress } from '@mui/material';
-import { handleError } from '@planet-sdk/common';
-import styles from './AddressManagement.module.scss';
-import WebappButton from '../../../../common/WebappButton';
-import { useUserProps } from '../../../../common/Layout/UserPropsContext';
-import { putAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
-import { useTenant } from '../../../../common/Layout/TenantContext';
-import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
-import { useDebouncedEffect } from '../../../../../utils/useDebouncedEffect';
-import AddressFormInputs from './microComponents/AddressFormInputs';
-import {
-  fetchAddressDetails,
-  geocoder,
-  getPostalRegex,
-  suggestAddress,
-} from '../../../../../utils/addressManagement';
-
-export type FormData = {
-  address: string | undefined;
-  address2: string | null;
-  city: string | undefined;
-  zipCode: string | undefined;
-  state: string | null;
-};
-
-interface Props {
-  setIsModalOpen: SetState<boolean>;
-  selectedAddressForAction: Address | null;
-  fetchUserAddresses?: () => Promise<void>;
-}
-
-const EditAddressForm = ({
-  setIsModalOpen,
-  selectedAddressForAction,
-  fetchUserAddresses,
-}: Props) => {
-  const defaultAddressDetail = {
-    address: selectedAddressForAction?.address,
-    address2: selectedAddressForAction?.address2,
-    city: selectedAddressForAction?.city,
-    zipCode: selectedAddressForAction?.zipCode,
-    state: selectedAddressForAction?.state,
-  };
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm<FormData>({
-    mode: 'onBlur',
-    defaultValues: defaultAddressDetail,
-  });
-
-  const tProfile = useTranslations('Profile.addressManagement');
-  const tCommon = useTranslations('Common');
-  const { contextLoaded, user, token, logoutUser } = useUserProps();
-  const { tenantConfig } = useTenant();
-  const { setErrors } = useContext(ErrorHandlingContext);
-  const [country, setCountry] = useState<ExtendedCountryCode | ''>(
-    selectedAddressForAction?.country ?? 'DE'
-  );
-  const [addressSuggestions, setAddressSuggestions] = useState<
-    AddressSuggestionsType[]
-  >([]);
-  const [inputValue, setInputValue] = useState('');
-  const [isUploadingData, setIsUploadingData] = useState(false);
-
-  const handleSuggestAddress = useCallback(
-    async (value: string) => {
-      const suggestions = await suggestAddress(value, country);
-      setAddressSuggestions(suggestions);
-    },
-    [geocoder, country]
-  );
-
-  const handleGetAddress = useCallback(
-    async (value: string) => {
-      const details = await fetchAddressDetails(value);
-      if (details) {
-        setValue('address', details.address, { shouldValidate: true });
-        setValue('city', details.city, { shouldValidate: true });
-        setValue('zipCode', details.zipCode, { shouldValidate: true });
-      }
-      setAddressSuggestions([]);
-    },
-    [geocoder, setValue]
-  );
-  useDebouncedEffect(
-    () => {
-      if (inputValue) {
-        handleSuggestAddress(inputValue);
-      }
-    },
-    700,
-    [inputValue]
-  );
-
-  const postalRegex = useMemo(() => getPostalRegex(country), [country]);
-
-  const resetForm = () => {
-    reset(defaultAddressDetail);
-    setAddressSuggestions([]);
-  };
-  const handleCancel = () => {
-    setIsModalOpen(false);
-    resetForm();
-  };
-  const handleInputChange = (value: string) => {
-    setInputValue(value);
-  };
-
-  const handleAddressSelect = (address: string) => {
-    handleGetAddress(address);
-  };
-
-  const updateAddress = async (data: FormData) => {
-    if (!contextLoaded || !user || !token) return;
-    setIsUploadingData(true);
-    const bodyToSend = {
-      ...data,
-      country,
-      type: selectedAddressForAction?.type,
-    };
-    try {
-      const res = await putAuthenticatedRequest<Address>(
-        tenantConfig.id,
-        `/app/addresses/${selectedAddressForAction?.id}`,
-        bodyToSend,
-        token,
-        logoutUser
-      );
-      if (res && fetchUserAddresses) {
-        fetchUserAddresses();
-        handleCancel();
-      }
-    } catch (error) {
-      setIsUploadingData(false);
-      setErrors(handleError(error as APIError));
-    } finally {
-      setIsUploadingData(false);
-      setIsModalOpen(false);
-    }
-  };
-
-  return (
-    <div className={styles.addressFormContainer}>
-      <h2 className={styles.header}>{tProfile('editAddress')}</h2>
-      <AddressFormInputs
-        handleInputChange={handleInputChange}
-        handleAddressSelect={handleAddressSelect}
-        addressSuggestions={addressSuggestions}
-        control={control}
-        errors={errors}
-        postalRegex={postalRegex}
-        country={country}
-        setCountry={setCountry}
-      />
-      {isUploadingData ? (
-        <div className={styles.addressMgmtSpinner}>
-          <CircularProgress color="success" />
-        </div>
-      ) : (
-        <div className={styles.buttonContainer}>
-          <WebappButton
-            text={tCommon('cancel')}
-            variant="secondary"
-            elementType="button"
-            onClick={handleCancel}
-            buttonClasses={styles.cancelButton}
-          />
-          <WebappButton
-            text={tProfile('saveChanges')}
-            variant="primary"
-            elementType="button"
-            onClick={handleSubmit(updateAddress)}
-            buttonClasses={styles.addAddressButton}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default EditAddressForm;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
deleted file mode 100644
index 0571498de..000000000
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressContent.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { AddressType } from '@planet-sdk/common';
-
-import styles from '../AddressManagement.module.scss';
-import { useTranslations } from 'next-intl';
-
-interface Props {
-  type: AddressType;
-  userAddress: string;
-}
-const AddressContent = ({ type, userAddress }: Props) => {
-  const tProfile = useTranslations('Profile.addressManagement');
-  return (
-    <div className={styles.addressSubContainer}>
-      {type !== 'other' && (
-        <span className={`${styles.addressTag} ${styles[type]}`}>
-          {tProfile(`addressType.${type}`)}
-        </span>
-      )}
-      <div className={styles.address}>{userAddress}</div>
-    </div>
-  );
-};
-
-export default AddressContent;

From 3837dc7db7968bcdef96026e2a6ad3c7b5031162 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:43:55 +0530
Subject: [PATCH 14/20] refactor: rename component/function/props. -
 fetchUserAddresses -> updateUserAddresses - AddressDeleteModal ->
 DeleteAddress - AddressTypeConfirmationModal -> UpdateAddressType

---
 ...dressDeleteModal.tsx => DeleteAddress.tsx} | 10 +++++-----
 .../AddressManagment/EditAddress.tsx          | 10 +++++-----
 ...rmationModal.tsx => UpdateAddressType.tsx} | 10 +++++-----
 .../EditProfile/AddressManagment/index.tsx    | 20 +++++++++----------
 4 files changed, 25 insertions(+), 25 deletions(-)
 rename src/features/user/Settings/EditProfile/AddressManagment/{AddressDeleteModal.tsx => DeleteAddress.tsx} (93%)
 rename src/features/user/Settings/EditProfile/AddressManagment/{AddressTypeConfirmationModal.tsx => UpdateAddressType.tsx} (94%)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
similarity index 93%
rename from src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
rename to src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
index a15baaa37..d1b764ead 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressDeleteModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
@@ -15,13 +15,13 @@ import { deleteAuthenticatedRequest } from '../../../../../utils/apiRequests/api
 interface Props {
   setIsModalOpen: SetState<boolean>;
   addressId: string | undefined;
-  fetchUserAddresses: () => Promise<void>;
+  updateUserAddresses: () => Promise<void>;
 }
 
-const AddressDeleteModal = ({
+const DeleteAddress = ({
   setIsModalOpen,
   addressId,
-  fetchUserAddresses,
+  updateUserAddresses,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
@@ -40,7 +40,7 @@ const AddressDeleteModal = ({
         token,
         logoutUser
       );
-      fetchUserAddresses();
+      updateUserAddresses();
     } catch (error) {
       setErrors(handleError(error as APIError));
     } finally {
@@ -75,4 +75,4 @@ const AddressDeleteModal = ({
     </div>
   );
 };
-export default AddressDeleteModal;
+export default DeleteAddress;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
index 1f9d37022..8d263b4f3 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
@@ -16,13 +16,13 @@ import AddressFormLayout from './microComponents/AddressFormLayout';
 interface Props {
   setIsModalOpen: SetState<boolean>;
   selectedAddressForAction: Address | null;
-  fetchUserAddresses?: () => Promise<void>;
+  updateUserAddresses?: () => Promise<void>;
 }
 
 const EditAddress = ({
   setIsModalOpen,
   selectedAddressForAction,
-  fetchUserAddresses,
+  updateUserAddresses,
 }: Props) => {
   const defaultAddressDetail = {
     address: selectedAddressForAction?.address,
@@ -58,8 +58,8 @@ const EditAddress = ({
           token,
           logoutUser
         );
-        if (res && fetchUserAddresses) {
-          fetchUserAddresses();
+        if (res && updateUserAddresses) {
+          updateUserAddresses();
         }
       } catch (error) {
         setErrors(handleError(error as APIError));
@@ -77,7 +77,7 @@ const EditAddress = ({
       selectedAddressForAction?.id,
       tenantConfig.id,
       logoutUser,
-      fetchUserAddresses,
+      updateUserAddresses,
       handleError,
       putAuthenticatedRequest,
     ]
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
similarity index 94%
rename from src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
rename to src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index 8454fe73a..43f9e6d69 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressTypeConfirmationModal.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -18,15 +18,15 @@ interface Props {
   setIsModalOpen: SetState<boolean>;
   userAddress: Address | undefined;
   selectedAddressForAction: Address | null;
-  fetchUserAddresses: () => Promise<void>;
+  updateUserAddresses: () => Promise<void>;
 }
 
-const AddressTypeConfirmationModal = ({
+const UpdateAddressType = ({
   addressType,
   setIsModalOpen,
   userAddress,
   selectedAddressForAction,
-  fetchUserAddresses,
+  updateUserAddresses,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
@@ -49,7 +49,7 @@ const AddressTypeConfirmationModal = ({
         token,
         logoutUser
       );
-      if (res) fetchUserAddresses();
+      if (res) updateUserAddresses();
     } catch (error) {
       setErrors(handleError(error as APIError));
     } finally {
@@ -97,4 +97,4 @@ const AddressTypeConfirmationModal = ({
   );
 };
 
-export default AddressTypeConfirmationModal;
+export default UpdateAddressType;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 0add9cf9a..979d6ed30 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -19,8 +19,8 @@ import {
   findAddressByType,
 } from '../../../../../utils/addressManagement';
 import CenteredContainer from '../../../../common/Layout/CenteredContainer';
-import AddressTypeConfirmationModal from './AddressTypeConfirmationModal';
-import AddressDeleteModal from './AddressDeleteModal';
+import UpdateAddressType from './UpdateAddressType';
+import DeleteAddress from './DeleteAddress';
 import EditAddress from './EditAddress';
 import AddAddress from './AddAddress';
 
@@ -47,7 +47,7 @@ const AddressManagement = () => {
     });
   }, [userAddresses]);
 
-  const fetchUserAddresses = useCallback(async () => {
+  const updateUserAddresses = useCallback(async () => {
     if (!user || !token || !contextLoaded) return;
     try {
       const res = await getAuthenticatedRequest<Address[]>(
@@ -77,7 +77,7 @@ const AddressManagement = () => {
   const addrTypeConfProps = {
     setIsModalOpen,
     selectedAddressForAction,
-    fetchUserAddresses,
+    updateUserAddresses,
   };
   const renderModalContent = useMemo(() => {
     switch (addressAction) {
@@ -93,20 +93,20 @@ const AddressManagement = () => {
           <EditAddress
             setIsModalOpen={setIsModalOpen}
             selectedAddressForAction={selectedAddressForAction}
-            fetchUserAddresses={fetchUserAddresses}
+            updateUserAddresses={updateUserAddresses}
           />
         );
       case ADDRESS_ACTIONS.DELETE:
         return (
-          <AddressDeleteModal
+          <DeleteAddress
             addressId={selectedAddressForAction?.id}
             setIsModalOpen={setIsModalOpen}
-            fetchUserAddresses={fetchUserAddresses}
+            updateUserAddresses={updateUserAddresses}
           />
         );
       case ADDRESS_ACTIONS.SET_PRIMARY:
         return (
-          <AddressTypeConfirmationModal
+          <UpdateAddressType
             addressType={ADDRESS_TYPE.PRIMARY}
             userAddress={primaryAddress}
             {...addrTypeConfProps}
@@ -114,7 +114,7 @@ const AddressManagement = () => {
         );
       case ADDRESS_ACTIONS.SET_BILLING:
         return (
-          <AddressTypeConfirmationModal
+          <UpdateAddressType
             addressType={ADDRESS_TYPE.MAILING}
             userAddress={billingAddress}
             {...addrTypeConfProps}
@@ -125,7 +125,7 @@ const AddressManagement = () => {
     setIsModalOpen,
     setUserAddresses,
     selectedAddressForAction,
-    fetchUserAddresses,
+    updateUserAddresses,
     primaryAddress,
     billingAddress,
     addressAction,

From 6783400f5d288d3dad22331f5b4cfc7bdd95ea9c Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:26:23 +0530
Subject: [PATCH 15/20] "refactor: reset addressAction state when the modal is
 opened or closed

---
 .../EditProfile/AddressManagment/AddAddress.tsx        | 10 +++++++++-
 .../EditProfile/AddressManagment/DeleteAddress.tsx     | 10 +++++++++-
 .../EditProfile/AddressManagment/EditAddress.tsx       |  5 +++++
 .../EditProfile/AddressManagment/UpdateAddressType.tsx | 10 +++++++++-
 .../Settings/EditProfile/AddressManagment/index.tsx    |  6 ++++++
 .../AddressManagment/microComponents/AddressForm.tsx   |  4 ++++
 6 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/AddAddress.tsx
index 389d126c1..bdffb022d 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddAddress.tsx
@@ -1,6 +1,7 @@
 import type { ExtendedCountryCode } from '../../../../common/types/country';
 import type { SetState } from '../../../../common/types/common';
 import type { Address, APIError } from '@planet-sdk/common';
+import type { AddressAction } from '../../../../common/types/profile';
 
 import { useState, useContext, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
@@ -25,6 +26,7 @@ export type FormData = {
 interface Props {
   setIsModalOpen: SetState<boolean>;
   setUserAddresses: SetState<Address[]>;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const defaultAddressDetail = {
@@ -35,7 +37,11 @@ const defaultAddressDetail = {
   state: '',
 };
 
-const AddAddress = ({ setIsModalOpen, setUserAddresses }: Props) => {
+const AddAddress = ({
+  setIsModalOpen,
+  setUserAddresses,
+  setAddressAction,
+}: Props) => {
   const tAddressManagement = useTranslations('Profile.addressManagement');
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const configCountry = getStoredConfig('country');
@@ -72,6 +78,7 @@ const AddAddress = ({ setIsModalOpen, setUserAddresses }: Props) => {
       } finally {
         setIsLoading(false);
         setIsModalOpen(false);
+        setAddressAction(null);
       }
     },
     [
@@ -98,6 +105,7 @@ const AddAddress = ({ setIsModalOpen, setUserAddresses }: Props) => {
         label={tAddressManagement('addressForm.addAddress')}
         defaultAddressDetail={defaultAddressDetail}
         processFormData={addAddress}
+        setAddressAction={setAddressAction}
       />
     </AddressFormLayout>
   );
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
index d1b764ead..10733681a 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
@@ -1,5 +1,6 @@
 import type { SetState } from '../../../../common/types/common';
 import type { APIError } from '@planet-sdk/common';
+import type { AddressAction } from '../../../../common/types/profile';
 
 import { useContext, useState } from 'react';
 import { useTranslations } from 'next-intl';
@@ -16,12 +17,14 @@ interface Props {
   setIsModalOpen: SetState<boolean>;
   addressId: string | undefined;
   updateUserAddresses: () => Promise<void>;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const DeleteAddress = ({
   setIsModalOpen,
   addressId,
   updateUserAddresses,
+  setAddressAction,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
@@ -46,8 +49,13 @@ const DeleteAddress = ({
     } finally {
       setIsModalOpen(false);
       setIsLoading(false);
+      setAddressAction(null);
     }
   };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    setAddressAction(null);
+  };
   return (
     <div className={styles.addrConfirmContainer}>
       <h2 className={styles.header}>{tProfile('deleteAddress')}</h2>
@@ -58,7 +66,7 @@ const DeleteAddress = ({
             text={tCommon('cancel')}
             elementType="button"
             variant="secondary"
-            onClick={() => setIsModalOpen(false)}
+            onClick={handleCancel}
           />
           <WebappButton
             text={tProfile('delete')}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
index 8d263b4f3..288b6fc66 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx
@@ -2,6 +2,7 @@ import type { ExtendedCountryCode } from '../../../../common/types/country';
 import type { SetState } from '../../../../common/types/common';
 import type { Address, APIError } from '@planet-sdk/common';
 import type { FormData } from './AddAddress';
+import type { AddressAction } from '../../../../common/types/profile';
 
 import { useState, useContext, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
@@ -17,12 +18,14 @@ interface Props {
   setIsModalOpen: SetState<boolean>;
   selectedAddressForAction: Address | null;
   updateUserAddresses?: () => Promise<void>;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const EditAddress = ({
   setIsModalOpen,
   selectedAddressForAction,
   updateUserAddresses,
+  setAddressAction,
 }: Props) => {
   const defaultAddressDetail = {
     address: selectedAddressForAction?.address,
@@ -66,6 +69,7 @@ const EditAddress = ({
       } finally {
         setIsLoading(false);
         setIsModalOpen(false);
+        setAddressAction(null);
       }
     },
     [
@@ -93,6 +97,7 @@ const EditAddress = ({
         label={tAddressManagement('addressForm.saveChanges')}
         defaultAddressDetail={defaultAddressDetail}
         processFormData={updateAddress}
+        setAddressAction={setAddressAction}
       />
     </AddressFormLayout>
   );
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index 43f9e6d69..1d577309e 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -1,5 +1,6 @@
 import type { SetState } from '../../../../common/types/common';
 import type { APIError, Address } from '@planet-sdk/common';
+import type { AddressAction } from '../../../../common/types/profile';
 
 import { useContext, useState } from 'react';
 import { useTranslations } from 'next-intl';
@@ -19,6 +20,7 @@ interface Props {
   userAddress: Address | undefined;
   selectedAddressForAction: Address | null;
   updateUserAddresses: () => Promise<void>;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const UpdateAddressType = ({
@@ -27,6 +29,7 @@ const UpdateAddressType = ({
   userAddress,
   selectedAddressForAction,
   updateUserAddresses,
+  setAddressAction,
 }: Props) => {
   const tProfile = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
@@ -55,8 +58,13 @@ const UpdateAddressType = ({
     } finally {
       setIsUploadingData(false);
       setIsModalOpen(false);
+      setAddressAction(null);
     }
   };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    setAddressAction(null);
+  };
   return (
     <div className={styles.addrConfirmContainer}>
       <h2 className={styles.header}>
@@ -79,7 +87,7 @@ const UpdateAddressType = ({
             text={tCommon('cancel')}
             elementType="button"
             variant="secondary"
-            onClick={() => setIsModalOpen(false)}
+            onClick={handleCancel}
           />
           <WebappButton
             text={tProfile('confirm')}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 979d6ed30..8b71adbe2 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -79,6 +79,7 @@ const AddressManagement = () => {
     selectedAddressForAction,
     updateUserAddresses,
   };
+  console.log(isModalOpen, addressAction, '==1');
   const renderModalContent = useMemo(() => {
     switch (addressAction) {
       case ADDRESS_ACTIONS.ADD:
@@ -86,6 +87,7 @@ const AddressManagement = () => {
           <AddAddress
             setIsModalOpen={setIsModalOpen}
             setUserAddresses={setUserAddresses}
+            setAddressAction={setAddressAction}
           />
         );
       case ADDRESS_ACTIONS.EDIT:
@@ -94,6 +96,7 @@ const AddressManagement = () => {
             setIsModalOpen={setIsModalOpen}
             selectedAddressForAction={selectedAddressForAction}
             updateUserAddresses={updateUserAddresses}
+            setAddressAction={setAddressAction}
           />
         );
       case ADDRESS_ACTIONS.DELETE:
@@ -102,6 +105,7 @@ const AddressManagement = () => {
             addressId={selectedAddressForAction?.id}
             setIsModalOpen={setIsModalOpen}
             updateUserAddresses={updateUserAddresses}
+            setAddressAction={setAddressAction}
           />
         );
       case ADDRESS_ACTIONS.SET_PRIMARY:
@@ -109,6 +113,7 @@ const AddressManagement = () => {
           <UpdateAddressType
             addressType={ADDRESS_TYPE.PRIMARY}
             userAddress={primaryAddress}
+            setAddressAction={setAddressAction}
             {...addrTypeConfProps}
           />
         );
@@ -117,6 +122,7 @@ const AddressManagement = () => {
           <UpdateAddressType
             addressType={ADDRESS_TYPE.MAILING}
             userAddress={billingAddress}
+            setAddressAction={setAddressAction}
             {...addrTypeConfProps}
           />
         );
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
index 3710a2ec1..2ac75226b 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
@@ -3,6 +3,7 @@ import type { ExtendedCountryCode } from '../../../../../common/types/country';
 import type { SetState } from '../../../../../common/types/common';
 import type { Nullable } from '@planet-sdk/common/build/types/util';
 import type { FormData } from '../AddAddress';
+import type { AddressAction } from '../../../../../common/types/profile';
 
 import { useCallback, useMemo, useState } from 'react';
 import { CircularProgress, TextField } from '@mui/material';
@@ -37,6 +38,7 @@ interface Props {
   };
   setIsModalOpen: SetState<boolean>;
   isLoading: boolean;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const AddressForm = ({
@@ -47,6 +49,7 @@ const AddressForm = ({
   label,
   processFormData,
   isLoading,
+  setAddressAction,
 }: Props) => {
   const t = useTranslations('EditProfile');
   const tAddressManagement = useTranslations('Profile');
@@ -108,6 +111,7 @@ const AddressForm = ({
   };
   const handleCancel = () => {
     setIsModalOpen(false);
+    setAddressAction(null);
     resetForm();
   };
   return (

From 075a427a1129a1af2e6f29c011ff99d3431ecd40 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:57:55 +0530
Subject: [PATCH 16/20] refactor: minor code clean up

---
 .../AddressManagment/DeleteAddress.tsx            |  2 +-
 .../AddressManagment/UpdateAddressType.tsx        |  2 +-
 .../EditProfile/AddressManagment/index.tsx        | 15 +++++++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
index 10733681a..55c55861c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
@@ -57,7 +57,7 @@ const DeleteAddress = ({
     setAddressAction(null);
   };
   return (
-    <div className={styles.addrConfirmContainer}>
+    <div className={styles.addressActionContainer}>
       <h2 className={styles.header}>{tProfile('deleteAddress')}</h2>
       <p>{tProfile('deleteAddressConfirmationMessage')}</p>
       {!isLoading ? (
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index 1d577309e..4db9f82dc 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -66,7 +66,7 @@ const UpdateAddressType = ({
     setAddressAction(null);
   };
   return (
-    <div className={styles.addrConfirmContainer}>
+    <div className={styles.addressActionContainer}>
       <h2 className={styles.header}>
         {tProfile(`addressType.${addressType}`)}
       </h2>
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
index 8b71adbe2..5ba2c1493 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/index.tsx
@@ -74,12 +74,7 @@ const AddressManagement = () => {
     () => findAddressByType(userAddresses, ADDRESS_TYPE.MAILING),
     [userAddresses]
   );
-  const addrTypeConfProps = {
-    setIsModalOpen,
-    selectedAddressForAction,
-    updateUserAddresses,
-  };
-  console.log(isModalOpen, addressAction, '==1');
+
   const renderModalContent = useMemo(() => {
     switch (addressAction) {
       case ADDRESS_ACTIONS.ADD:
@@ -114,7 +109,9 @@ const AddressManagement = () => {
             addressType={ADDRESS_TYPE.PRIMARY}
             userAddress={primaryAddress}
             setAddressAction={setAddressAction}
-            {...addrTypeConfProps}
+            setIsModalOpen={setIsModalOpen}
+            selectedAddressForAction={selectedAddressForAction}
+            updateUserAddresses={updateUserAddresses}
           />
         );
       case ADDRESS_ACTIONS.SET_BILLING:
@@ -123,7 +120,9 @@ const AddressManagement = () => {
             addressType={ADDRESS_TYPE.MAILING}
             userAddress={billingAddress}
             setAddressAction={setAddressAction}
-            {...addrTypeConfProps}
+            setIsModalOpen={setIsModalOpen}
+            selectedAddressForAction={selectedAddressForAction}
+            updateUserAddresses={updateUserAddresses}
           />
         );
     }

From 9e154b65038a7e3b9d69fd1b40bf8e74969d3126 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:20:38 +0530
Subject: [PATCH 17/20] refactor: simplify translation interpolation

---
 public/static/locales/en/profile.json                         | 3 +--
 .../AddressManagment/AddressManagement.module.scss            | 4 ++--
 .../EditProfile/AddressManagment/UpdateAddressType.tsx        | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index 9894c3445..8f816a719 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -149,10 +149,9 @@
       },
       "deleteAddress": "Delete Address",
       "delete": "Delete",
-      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType, select, mailing {billing} other {{addressType}}} address? {isAddressSet, select, true {This will replace your current {addressType, select, mailing {billing} other {{addressType}}} address.} other {}}",
+      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType}? {isAddressSet, select, true {This will replace your current {addressType}.} other {}}",
       "deleteAddressConfirmationMessage": "Are you sure you want to delete this address? If you want to use it again, please add it as a new address.",
       "confirm": "Confirm",
-      "address2": "Address 2(optional)",
       "addAddress": "Add New Address",
       "addressForm": {
         "addAddress": "Add Address",
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
index cec942cda..37744643c 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
+++ b/src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss
@@ -125,7 +125,7 @@
     }
   }
 }
-.addrConfirmContainer {
+.addressActionContainer {
   width: 468px;
   display: flex;
   gap: 10px;
@@ -167,7 +167,7 @@
       }
     }
   }
-  .addrConfirmContainer {
+  .addressActionContainer {
     width: 95%;
     .buttonContainer {
       flex-direction: column;
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index 4db9f82dc..0962ec3b3 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -72,7 +72,7 @@ const UpdateAddressType = ({
       </h2>
       <p>
         {tProfile('addressConfirmationMessage', {
-          addressType,
+          addressType: tProfile(`addressType.${addressType}`),
           isAddressSet: !!userAddress,
         })}
       </p>

From ef5ce97789fd951e34e7646e63a0f6de03d49866 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:38:19 +0530
Subject: [PATCH 18/20] refactor: rename tProfile to tAddressManagement

---
 .../EditProfile/AddressManagment/DeleteAddress.tsx     |  8 ++++----
 .../EditProfile/AddressManagment/UpdateAddressType.tsx | 10 +++++-----
 .../AddressManagment/microComponents/AddressForm.tsx   |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
index 55c55861c..884daeaee 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx
@@ -26,7 +26,7 @@ const DeleteAddress = ({
   updateUserAddresses,
   setAddressAction,
 }: Props) => {
-  const tProfile = useTranslations('Profile.addressManagement');
+  const tAddressManagement = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
@@ -58,8 +58,8 @@ const DeleteAddress = ({
   };
   return (
     <div className={styles.addressActionContainer}>
-      <h2 className={styles.header}>{tProfile('deleteAddress')}</h2>
-      <p>{tProfile('deleteAddressConfirmationMessage')}</p>
+      <h2 className={styles.header}>{tAddressManagement('deleteAddress')}</h2>
+      <p>{tAddressManagement('deleteAddressConfirmationMessage')}</p>
       {!isLoading ? (
         <div className={styles.buttonContainer}>
           <WebappButton
@@ -69,7 +69,7 @@ const DeleteAddress = ({
             onClick={handleCancel}
           />
           <WebappButton
-            text={tProfile('delete')}
+            text={tAddressManagement('delete')}
             elementType="button"
             variant="primary"
             onClick={deleteAddress}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index 0962ec3b3..cca6ca0bb 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -31,7 +31,7 @@ const UpdateAddressType = ({
   updateUserAddresses,
   setAddressAction,
 }: Props) => {
-  const tProfile = useTranslations('Profile.addressManagement');
+  const tAddressManagement = useTranslations('Profile.addressManagement');
   const tCommon = useTranslations('Common');
   const { contextLoaded, user, token, logoutUser } = useUserProps();
   const { tenantConfig } = useTenant();
@@ -68,11 +68,11 @@ const UpdateAddressType = ({
   return (
     <div className={styles.addressActionContainer}>
       <h2 className={styles.header}>
-        {tProfile(`addressType.${addressType}`)}
+        {tAddressManagement(`addressType.${addressType}`)}
       </h2>
       <p>
-        {tProfile('addressConfirmationMessage', {
-          addressType: tProfile(`addressType.${addressType}`),
+        {tAddressManagement('addressConfirmationMessage', {
+          addressType: tAddressManagement(`addressType.${addressType}`),
           isAddressSet: !!userAddress,
         })}
       </p>
@@ -90,7 +90,7 @@ const UpdateAddressType = ({
             onClick={handleCancel}
           />
           <WebappButton
-            text={tProfile('confirm')}
+            text={tAddressManagement('confirm')}
             elementType="button"
             variant="primary"
             onClick={() => updateAddress(addressType)}
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
index 2ac75226b..4eefefa5f 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/microComponents/AddressForm.tsx
@@ -52,7 +52,7 @@ const AddressForm = ({
   setAddressAction,
 }: Props) => {
   const t = useTranslations('EditProfile');
-  const tAddressManagement = useTranslations('Profile');
+  const tAddressManagement = useTranslations('Profile.addressManagement');
   const [addressSuggestions, setAddressSuggestions] = useState<
     AddressSuggestionsType[]
   >([]);
@@ -133,7 +133,7 @@ const AddressForm = ({
       <AddressInput
         name="address2"
         control={control}
-        label={tAddressManagement('addressManagement.addressForm.address2')}
+        label={tAddressManagement('addressForm.address2')}
         validationPattern={validationPattern.address}
         validationMessages={{
           required: t('validationErrors.addressRequired'),

From 035c34ed8d5326ecf0a48b0bfc79f5b0f5cb17e3 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:06:02 +0530
Subject: [PATCH 19/20] refactor: update address confirmation messages for
 clarity and structure

---
 public/static/locales/en/profile.json                      | 3 ++-
 .../EditProfile/AddressManagment/UpdateAddressType.tsx     | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/static/locales/en/profile.json b/public/static/locales/en/profile.json
index 8f816a719..4250a713b 100644
--- a/public/static/locales/en/profile.json
+++ b/public/static/locales/en/profile.json
@@ -149,7 +149,8 @@
       },
       "deleteAddress": "Delete Address",
       "delete": "Delete",
-      "addressConfirmationMessage": "Are you sure you want to set this address as your {addressType}? {isAddressSet, select, true {This will replace your current {addressType}.} other {}}",
+      "setAddressConfirmation": "Are you sure you want to set this address as your {addressType}?",
+      "replaceAddressWarning": " This will replace your current {addressType}.",
       "deleteAddressConfirmationMessage": "Are you sure you want to delete this address? If you want to use it again, please add it as a new address.",
       "confirm": "Confirm",
       "addAddress": "Add New Address",
diff --git a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
index cca6ca0bb..e24e1351a 100644
--- a/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
+++ b/src/features/user/Settings/EditProfile/AddressManagment/UpdateAddressType.tsx
@@ -71,10 +71,13 @@ const UpdateAddressType = ({
         {tAddressManagement(`addressType.${addressType}`)}
       </h2>
       <p>
-        {tAddressManagement('addressConfirmationMessage', {
+        {tAddressManagement('setAddressConfirmation', {
           addressType: tAddressManagement(`addressType.${addressType}`),
-          isAddressSet: !!userAddress,
         })}
+        {userAddress &&
+          tAddressManagement('replaceAddressWarning', {
+            addressType: tAddressManagement(`addressType.${addressType}`),
+          })}
       </p>
       {userAddress !== undefined && (
         <div className={styles.address}>

From b64c57f9b37a0706c5b587a415255b8a6119c172 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:14:10 +0530
Subject: [PATCH 20/20] fix: corrects import path for ADDRESS_ACTIONS while
 creating AddressAction type

---
 src/features/common/types/profile.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/common/types/profile.d.ts b/src/features/common/types/profile.d.ts
index 88aa9a940..532583abd 100644
--- a/src/features/common/types/profile.d.ts
+++ b/src/features/common/types/profile.d.ts
@@ -1,7 +1,7 @@
 import type { User, UserPublicProfile } from '@planet-sdk/common';
 import type { SetState } from './common';
 import type { PublicUser } from './user';
-import type { ADDRESS_ACTIONS } from '../../user/Settings/EditProfile/AddressManagment/microComponents/AddressActionMenu';
+import type { ADDRESS_ACTIONS } from '../../../utils/addressManagement';
 
 export interface UserFeaturesProps {
   handleShare: () => void;