Address actions

public/static/locales/en/profile.json

@@ -137,7 +137,7 @@
     },
     "addressManagement": {
       "addressManagementTitle": "Address",
-      "addressTags": {
+      "addressType": {
         "primary": "Primary Address",
         "mailing": "Billing Address"
       },
@@ -147,6 +147,12 @@
         "setAsPrimaryAddress": "Set as Primary Address",
         "setAsBillingAddress": "Set as Billing Address"
       },
+      "deleteAddress": "Delete Address",
+      "delete": "Delete",
+      "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",
       "addressForm": {
         "addAddress": "Add Address",

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;

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>
   );

src/features/user/Settings/EditProfile/AddressManagment/AddressManagement.module.scss

@@ -94,58 +94,87 @@
   border-bottom: 1px solid rgba(189, 189, 189, 1);
 }
 // address action form
-
+.header {
+  font-weight: 700;
+  font-size: $fontSixteen;
+}
 .addressFormLayout {
+  min-width: 565px;
   display: flex;
   flex-direction: column;
   gap: 40px;
-  min-width: 565px;
   background: rgba(255, 255, 255, 1);
   border-radius: 16px;
   padding: 20px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  h2 {
-    font-weight: 700;
-    font-size: $fontSixteen;
+  .addressForm {
+    display: flex;
+    flex-direction: column;
+    gap: 23px;
+  }
+  .buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 25px;
+    button {
+      flex: 1 1;
+    }
   }
 }
-
-.addressForm {
+.addressActionContainer {
+  width: 468px;
   display: flex;
+  gap: 10px;
   flex-direction: column;
-  gap: 23px;
-}
-
-.formButtonContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-top: 25px;
-  .addAddressButton,
-  .cancelButton {
-    min-width: 252px;
+  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;
+  }
+  .buttonContainer {
+    display: flex;
+    gap: 20px;
+    margin-top: 34px;
+    button {
+      flex: 1 1;
+    }
   }
 }
 
 @include xsPhoneView {
   .addressFormLayout {
     min-width: fit-content;
     width: 95%;
+    .buttonContainer {
+      display: flex;
+      flex-direction: column;
+      button {
+        width: 100%;
+      }
+    }
   }
-  .formButtonContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    .addAddressButton,
-    .cancelButton {
-      width: 100%;
+  .addressActionContainer {
+    width: 95%;
+    .buttonContainer {
+      flex-direction: column;
+      gap: 8px;
     }
   }
 }
-
 // Form spinner
 
 .addressMgmtSpinner {

src/features/user/Settings/EditProfile/AddressManagment/DeleteAddress.tsx

@@ -0,0 +1,86 @@
+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';
+import { handleError } from '@planet-sdk/common';
+import { CircularProgress } from '@mui/material';
+import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
+import { useTenant } from '../../../../common/Layout/TenantContext';
+import { useUserProps } from '../../../../common/Layout/UserPropsContext';
+import WebappButton from '../../../../common/WebappButton';
+import styles from './AddressManagement.module.scss';
+import { deleteAuthenticatedRequest } from '../../../../../utils/apiRequests/api';
+
+interface Props {
+  setIsModalOpen: SetState<boolean>;
+  addressId: string | undefined;
+  updateUserAddresses: () => Promise<void>;
+  setAddressAction: SetState<AddressAction | null>;
+}
+
+const DeleteAddress = ({
+  setIsModalOpen,
+  addressId,
+  updateUserAddresses,
+  setAddressAction,
+}: Props) => {
+  const tAddressManagement = useTranslations('Profile.addressManagement');
+  const tCommon = useTranslations('Common');
+  const { contextLoaded, user, token, logoutUser } = useUserProps();
+  const { tenantConfig } = useTenant();
+  const { setErrors } = useContext(ErrorHandlingContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteAddress = async () => {
+    if (!contextLoaded || !user || !token) return;
+    try {
+      setIsLoading(true);
+      await deleteAuthenticatedRequest(
+        tenantConfig.id,
+        `/app/addresses/${addressId}`,
+        token,
+        logoutUser
+      );
+      updateUserAddresses();
+    } catch (error) {
+      setErrors(handleError(error as APIError));
+    } finally {
+      setIsModalOpen(false);
+      setIsLoading(false);
+      setAddressAction(null);
+    }
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+    setAddressAction(null);
+  };
+  return (
+    <div className={styles.addressActionContainer}>
+      <h2 className={styles.header}>{tAddressManagement('deleteAddress')}</h2>
+      <p>{tAddressManagement('deleteAddressConfirmationMessage')}</p>
+      {!isLoading ? (
+        <div className={styles.buttonContainer}>
+          <WebappButton
+            text={tCommon('cancel')}
+            elementType="button"
+            variant="secondary"
+            onClick={handleCancel}
+          />
+          <WebappButton
+            text={tAddressManagement('delete')}
+            elementType="button"
+            variant="primary"
+            onClick={deleteAddress}
+          />
+        </div>
+      ) : (
+        <div className={styles.addressMgmtSpinner}>
+          <CircularProgress color="success" />
+        </div>
+      )}
+    </div>
+  );
+};
+export default DeleteAddress;

src/features/user/Settings/EditProfile/AddressManagment/EditAddress.tsx

@@ -1,6 +1,8 @@
 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';
@@ -12,24 +14,18 @@ import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingCon
 import AddressForm from './microComponents/AddressForm';
 import AddressFormLayout from './microComponents/AddressFormLayout';
 
-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>;
+  updateUserAddresses?: () => Promise<void>;
+  setAddressAction: SetState<AddressAction | null>;
 }
 
 const EditAddress = ({
   setIsModalOpen,
   selectedAddressForAction,
-  fetchUserAddresses,
+  updateUserAddresses,
+  setAddressAction,
 }: Props) => {
   const defaultAddressDetail = {
     address: selectedAddressForAction?.address,
@@ -65,14 +61,15 @@ const EditAddress = ({
           token,
           logoutUser
         );
-        if (res && fetchUserAddresses) {
-          fetchUserAddresses();
+        if (res && updateUserAddresses) {
+          updateUserAddresses();
         }
       } catch (error) {
         setErrors(handleError(error as APIError));
       } finally {
         setIsLoading(false);
         setIsModalOpen(false);
+        setAddressAction(null);
       }
     },
     [
@@ -84,7 +81,7 @@ const EditAddress = ({
       selectedAddressForAction?.id,
       tenantConfig.id,
       logoutUser,
-      fetchUserAddresses,
+      updateUserAddresses,
       handleError,
       putAuthenticatedRequest,
     ]
@@ -100,6 +97,7 @@ const EditAddress = ({
         label={tAddressManagement('addressForm.saveChanges')}
         defaultAddressDetail={defaultAddressDetail}
         processFormData={updateAddress}
+        setAddressAction={setAddressAction}
       />
     </AddressFormLayout>
   );