@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/pages-v2/checkout/checkout-alt-form/steps/address/delivery-address.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import React, {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
+	createContext,
+	useContext,
+	useState,
+	ReactNode,
+	useEffect,
 } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import Grid from "@mui/material/Grid2";
@@ -15,436 +15,443 @@ import { cloneDeep } from "lodash";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
 import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 // API
-import getUser from "@/api-manager/services/user/queries/get-user";
-import getCountries from "@/api-manager/services/address/queries/get-countries";
-import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
-import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
-import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
-import useUpdateCart from "@/api-manager/services/cart/mutations/update-cart";
-import useUpdateCartLines from "@/api-manager/services/cart/mutations/update-cart-lines";
-import { Address } from "@/api-manager/schemas/address.schema";
+import getUser from "@evenicanpm/storefront-core/src/api-manager/services/user/queries/get-user";
+import getCountries from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-countries";
+import useCreateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/create-address";
+import useUpdateAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/update-address";
+import useDeleteAddress from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/delete-address";
+import useUpdateCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart";
+import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
+import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 // Local components
 import NewAddressForm from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/steps/address/new-address-form";
 import AddressCard from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/steps/address/address-card";
 import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 import { AddressDropDownHandler } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/steps/address/styles";
 
-type Translator = (key: string, values?: Record<string, unknown>) => string;
+type Translator = ReturnType<typeof useTranslations>;
 
 type DeliveryAddressCompound = React.FC<DeliveryAddressProps> & {
-  Modal: React.FC;
-  Dropdown: React.FC;
-  List: React.FC<ListProps>;
-  Card: React.FC<ItemProps>;
-  NewCard: React.FC;
+	Modal: React.FC;
+	Dropdown: React.FC;
+	List: React.FC<ListProps>;
+	Card: React.FC<ItemProps>;
+	NewCard: React.FC;
 };
 
 interface DeliveryAddressProps extends CheckoutStepComponentProps {
-  /** toggle dropdown vs. cards */
-  useDropDown: boolean;
-  /** optional override; if provided, replaces default layout */
-  children?: ReactNode;
+	/** toggle dropdown vs. cards */
+	useDropDown: boolean;
+	/** optional override; if provided, replaces default layout */
+	children?: ReactNode;
 }
 
 interface DeliveryAddressContextValue {
-  // i18n
-  t: Translator;
-
-  // data
-  countries?: CountryRegionInfo[];
-  addressList: Address[];
-  visibleAddresses: Address[];
-  isGuest: boolean;
-
-  // cart derived
-  cartShippingAddressId?: string;
-
-  // dropdown state
-  showDropDown: boolean;
-  title: string;
-  selectedAddressID: number | null;
-
-  // modal state
-  modalOpen: boolean;
-  editAddress?: Address;
-
-  // handlers
-  openNew: () => void;
-  openEdit: (addr: Address) => void;
-  closeModal: () => void;
-  pickAddress: (id: number) => void;
-  handleSaveAddress: (address: Address) => Promise<void>;
-  handleDelete: (address: Address) => Promise<void>;
+	// i18n
+	t: Translator;
+
+	// data
+	countries?: CountryRegionInfo[];
+	addressList: Address[];
+	visibleAddresses: Address[];
+	isGuest: boolean;
+
+	// cart derived
+	cartShippingAddressId?: string;
+
+	// dropdown state
+	showDropDown: boolean;
+	title: string;
+	selectedAddressID: number | null;
+
+	// modal state
+	modalOpen: boolean;
+	editAddress?: Address;
+
+	// handlers
+	openNew: () => void;
+	openEdit: (addr: Address) => void;
+	closeModal: () => void;
+	pickAddress: (id: number) => void;
+	handleSaveAddress: (address: Address) => Promise<void>;
+	handleDelete: (address: Address) => Promise<void>;
 }
 
 interface ListProps {
-  renderItem?: (addr: Address) => ReactNode;
+	renderItem?: (addr: Address) => ReactNode;
 }
 
 interface ItemProps {
-  address: Address;
-  children?: ReactNode;
+	address: Address;
+	children?: ReactNode;
 }
 
 const DeliveryAddressCtx = createContext<DeliveryAddressContextValue | null>(
-  null,
+	null,
 );
 
 const DeliveryAddress: DeliveryAddressCompound = ({
-  cart,
-  handleStepCompletion,
-  stepSubmissionState,
-  setStepSubmissionState,
-  stepViewState,
-  useDropDown = true,
-  children,
+	cart,
+	handleStepCompletion,
+	stepSubmissionState,
+	setStepSubmissionState,
+	stepViewState,
+	useDropDown = true,
+	children,
 }) => {
-  const t = useTranslations("Checkout.Address");
-  const locale = useLocale();
-
-  // user + guest logic
-  const { data: user, isLoading: userLoading } = getUser.useData();
-  const isGuest = !userLoading && !user?.RecordId;
-
-  // dropdown visibility
-  const showDropDown = useDropDown && !isGuest;
-
-  // countries
-  const { data: countries } = getCountries.useData({ locale });
-
-  // mutations
-  const { mutateAsync: updateCart } = useUpdateCart();
-  const { mutateAsync: updateCartLines } = useUpdateCartLines();
-  const { mutateAsync: createAddress } = useCreateAddress();
-  const { mutateAsync: updateAddress } = useUpdateAddress();
-  const { mutateAsync: deleteAddress } = useDeleteAddress();
-
-  // local state
-  const [addressList, setAddressList] = useState<Address[]>([]);
-  const [title, setTitle] = useState("Select Address");
-  const [selectedAddressID, setSelectedAddressID] = useState<number | null>(
-    null,
-  );
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editAddress, setEditAddress] = useState<Address | undefined>(
-    undefined,
-  );
-
-  // hydrate address list
-  useEffect(() => {
-    if (!isGuest && user?.Addresses?.length) {
-      setAddressList(user.Addresses);
-    } else if (cart.ShippingAddress) {
-      setAddressList([cart.ShippingAddress]);
-    } else {
-      setAddressList([]);
-    }
-  }, [isGuest, user, cart.ShippingAddress]);
-
-  // save address to cart
-  const saveToCart = async (address: Address) => {
-    const lines = cloneDeep(cart.CartLines ?? []).map((l) => ({
-      ...l,
-      DeliveryMode: "",
-    }));
-    await updateCartLines({
-      cartId: cart.Id,
-      cartLine: lines,
-      version: cart.Version,
-    });
-    await updateCart({ cart: { Id: cart.Id, ShippingAddress: address } });
-  };
-
-  // flows
-  const handleGuestFlow = async (address: Address) => {
-    await saveToCart(address);
-    setStepSubmissionState("submitting");
-    setModalOpen(false);
-  };
-
-  const handleAuthFlow = async (address: Address) => {
-    const isNew = !address.Id;
-    const saved = isNew
-      ? await createAddress(address)
-      : await updateAddress(address);
-
-    // update local list
-    if (isNew) {
-      setAddressList((prev) => [...prev, saved]);
-    } else {
-      setAddressList((prev) =>
-        prev.map((a) => (a.Id === saved.Id ? saved : a)),
-      );
-    }
-
-    await saveToCart(saved);
-    if (isNew) setStepSubmissionState("submitting");
-    setModalOpen(false);
-  };
-
-  const handleSaveAddress = async (address: Address) => {
-    if (isGuest) return handleGuestFlow(address);
-    return handleAuthFlow(address);
-  };
-
-  const handleDelete = async (address: Address) => {
-    if (!isGuest && address.Id) {
-      await deleteAddress(address.Id);
-    }
-    setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));
-  };
-
-  // helper to pick and set selected address + title
-  const pickAddress = (id?: number | null) => {
-    if (!id || id < 0) {
-      setSelectedAddressID(null);
-      setTitle("Select Address");
-      return;
-    }
-
-    const picked = addressList.find((a) => a.RecordId === id);
-    if (picked) {
-      setSelectedAddressID(picked.RecordId as number);
-      setTitle(`${picked.Name}, ${picked.City}`);
-    } else {
-      pickAddress(addressList[0].RecordId);
-    }
-  };
-
-  // keep dropdown title in sync
-  useEffect(() => {
-    if (!addressList.length) {
-      pickAddress(null);
-      return;
-    }
-    pickAddress(cart.ShippingAddress?.RecordId ?? selectedAddressID);
-  }, [addressList, cart.ShippingAddress]);
-
-  // step submission -> completion
-  useEffect(() => {
-    if (stepSubmissionState === "submitting") {
-      handleStepCompletion();
-      setStepSubmissionState("idle");
-    }
-  }, [stepSubmissionState, handleStepCompletion, setStepSubmissionState]);
-
-  // step state guards
-  if (stepViewState === "pending" || !countries) return null;
-
-  // preview mode
-  if (stepViewState === "preview") {
-    const sel = cart.ShippingAddress;
-    if (!sel) return null;
-    return (
-      <AddressCard
-        address={sel}
-        isCartAddress
-        onEdit={() => {}}
-        onSelect={() => {}}
-        onDelete={() => {}}
-      >
-        <AddressCard.Header />
-        <AddressCard.Body />
-      </AddressCard>
-    );
-  }
-
-  const visibleAddresses = useDropDown
-    ? isGuest
-      ? addressList
-      : addressList.filter((a) => a.RecordId === selectedAddressID)
-    : addressList;
-
-  // modal helpers
-  const openNew = () => {
-    setEditAddress(undefined);
-    setModalOpen(true);
-  };
-  const openEdit = (addr: Address) => {
-    setEditAddress(addr);
-    setModalOpen(true);
-  };
-  const closeModal = () => setModalOpen(false);
-
-  // context value
-  const ctx: DeliveryAddressContextValue = {
-    t,
-    countries,
-    addressList,
-    visibleAddresses,
-    isGuest,
-    cartShippingAddressId: cart.ShippingAddress?.Id,
-    showDropDown,
-    title,
-    selectedAddressID,
-    modalOpen,
-    editAddress,
-    openNew,
-    openEdit,
-    closeModal,
-    pickAddress,
-    handleSaveAddress,
-    handleDelete,
-  };
-
-  // default layout (identical behavior)
-  const defaultLayout = (
-    <>
-      <DeliveryAddress.Modal />
-      <DeliveryAddress.Dropdown />
-      <DeliveryAddress.List />
-      <DeliveryAddress.NewCard />
-    </>
-  );
-
-  return (
-    <DeliveryAddressCtx.Provider value={ctx}>
-      <Grid container spacing={2}>
-        {children ?? defaultLayout}
-      </Grid>
-    </DeliveryAddressCtx.Provider>
-  );
+	const t = useTranslations("Checkout.Address");
+	const locale = useLocale();
+
+	// user + guest logic
+	const { data: user, isLoading: userLoading } = getUser.useData();
+	const isGuest = !userLoading && !user?.RecordId;
+
+	// dropdown visibility
+	const showDropDown = useDropDown && !isGuest;
+
+	// countries
+	const { data: countries } = getCountries.useData({ locale });
+
+	// mutations
+	const { mutateAsync: updateCart } = useUpdateCart();
+	const { mutateAsync: updateCartLines } = useUpdateCartLines();
+	const { mutateAsync: createAddress } = useCreateAddress();
+	const { mutateAsync: updateAddress } = useUpdateAddress();
+	const { mutateAsync: deleteAddress } = useDeleteAddress();
+
+	// local state
+	const [addressList, setAddressList] = useState<Address[]>([]);
+	const [title, setTitle] = useState("Select Address");
+	const [selectedAddressID, setSelectedAddressID] = useState<number | null>(
+		null,
+	);
+	const [modalOpen, setModalOpen] = useState(false);
+	const [editAddress, setEditAddress] = useState<Address | undefined>(
+		undefined,
+	);
+
+	// hydrate address list
+	useEffect(() => {
+		if (!isGuest && user?.Addresses?.length) {
+			setAddressList(user.Addresses);
+		} else if (cart.ShippingAddress) {
+			setAddressList([cart.ShippingAddress]);
+		} else {
+			setAddressList([]);
+		}
+	}, [isGuest, user, cart.ShippingAddress]);
+
+	// save address to cart
+	const saveToCart = async (address: Address) => {
+		const lines = cloneDeep(cart.CartLines ?? []).map((l) => ({
+			...l,
+			DeliveryMode: "",
+		}));
+		await updateCartLines({
+			cartId: cart.Id,
+			cartLine: lines,
+			version: cart.Version,
+		});
+		await updateCart({ cart: { Id: cart.Id, ShippingAddress: address } });
+	};
+
+	// flows
+	const handleGuestFlow = async (address: Address) => {
+		await saveToCart(address);
+		setStepSubmissionState("submitting");
+		setModalOpen(false);
+	};
+
+	const handleAuthFlow = async (address: Address) => {
+		const isNew = !address.Id;
+		const saved = isNew
+			? await createAddress(address)
+			: await updateAddress(address);
+
+		// update local list
+		if (isNew) {
+			setAddressList((prev) => [...prev, saved]);
+		} else {
+			setAddressList((prev) =>
+				prev.map((a) => (a.Id === saved.Id ? saved : a)),
+			);
+		}
+
+		await saveToCart(saved);
+		if (isNew) setStepSubmissionState("submitting");
+		setModalOpen(false);
+	};
+
+	const handleSaveAddress = async (address: Address) => {
+		if (isGuest) return handleGuestFlow(address);
+		return handleAuthFlow(address);
+	};
+
+	const handleDelete = async (address: Address) => {
+		if (!isGuest && address.Id) {
+			await deleteAddress(address.Id);
+		}
+		setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));
+	};
+
+	// helper to pick and set selected address + title
+	const pickAddress = (id?: number | null) => {
+		if (!id || id < 0) {
+			setSelectedAddressID(null);
+			setTitle("Select Address");
+			return;
+		}
+
+		const picked = addressList.find((a) => a.RecordId === id);
+		if (picked) {
+			setSelectedAddressID(picked.RecordId as number);
+			setTitle(`${picked.Name}, ${picked.City}`);
+		} else {
+			pickAddress(addressList[0].RecordId);
+		}
+	};
+
+	// keep dropdown title in sync
+	useEffect(() => {
+		if (!addressList.length) {
+			pickAddress(null);
+			return;
+		}
+		pickAddress(cart.ShippingAddress?.RecordId ?? selectedAddressID);
+	}, [addressList, cart.ShippingAddress]);
+
+	// step submission -> completion
+	useEffect(() => {
+		if (stepSubmissionState === "submitting") {
+			handleStepCompletion();
+			setStepSubmissionState("idle");
+		}
+	}, [stepSubmissionState, handleStepCompletion, setStepSubmissionState]);
+
+	// step state guards
+	if (stepViewState === "pending" || !countries) return null;
+
+	// preview mode
+	if (stepViewState === "preview") {
+		const sel = cart.ShippingAddress;
+		if (!sel) return null;
+		return (
+			<AddressCard
+				address={sel}
+				isCartAddress
+				onEdit={() => {}}
+				onSelect={() => {}}
+				onDelete={() => {}}
+			>
+				<AddressCard.Header />
+				<AddressCard.Body />
+			</AddressCard>
+		);
+	}
+
+	const visibleAddresses = useDropDown
+		? isGuest
+			? addressList
+			: addressList.filter((a) => a.RecordId === selectedAddressID)
+		: addressList;
+
+	// modal helpers
+	const openNew = () => {
+		setEditAddress(undefined);
+		setModalOpen(true);
+	};
+	const openEdit = (addr: Address) => {
+		setEditAddress({ ...addr });
+		setModalOpen(true);
+	};
+
+	const closeModal = () => {
+		setModalOpen(false);
+		setEditAddress(undefined);
+	};
+
+	// context value
+	const ctx: DeliveryAddressContextValue = {
+		t,
+		countries,
+		addressList,
+		visibleAddresses,
+		isGuest,
+		cartShippingAddressId: cart.ShippingAddress?.Id,
+		showDropDown,
+		title,
+		selectedAddressID,
+		modalOpen,
+		editAddress,
+		openNew,
+		openEdit,
+		closeModal,
+		pickAddress,
+		handleSaveAddress,
+		handleDelete,
+	};
+
+	// default layout (identical behavior)
+	const defaultLayout = (
+		<>
+			<DeliveryAddress.Modal />
+			<DeliveryAddress.Dropdown />
+			<DeliveryAddress.List />
+			<DeliveryAddress.NewCard />
+		</>
+	);
+
+	return (
+		<DeliveryAddressCtx.Provider value={ctx}>
+			<Grid container spacing={2}>
+				{children ?? defaultLayout}
+			</Grid>
+		</DeliveryAddressCtx.Provider>
+	);
 };
 
 // ---------- Subcomponents ----------
 
 DeliveryAddress.Modal = () => {
-  const ctx = useContext(DeliveryAddressCtx);
-  if (!ctx) return null;
-  const {
-    countries,
-    isGuest,
-    modalOpen,
-    editAddress,
-    closeModal,
-    handleSaveAddress,
-  } = ctx;
-
-  return (
-    <NewAddressForm
-      countries={countries ?? []}
-      open={modalOpen}
-      isGuest={isGuest}
-      address={editAddress}
-      handleClose={closeModal}
-      handleCreateOrUpdateAddress={handleSaveAddress}
-    />
-  );
+	const ctx = useContext(DeliveryAddressCtx);
+	if (!ctx) return null;
+	const {
+		countries,
+		isGuest,
+		modalOpen,
+		editAddress,
+		closeModal,
+		handleSaveAddress,
+	} = ctx;
+
+	return (
+		<NewAddressForm
+			key={editAddress?.Id ?? "new"}
+			countries={countries ?? []}
+			open={modalOpen}
+			isGuest={isGuest}
+			address={editAddress}
+			handleClose={closeModal}
+			handleCreateOrUpdateAddress={handleSaveAddress}
+		/>
+	);
 };
 
 // (configurable via `useDropDown`/`showDropDown`)
 DeliveryAddress.Dropdown = () => {
-  const ctx = useContext(DeliveryAddressCtx);
-  if (!ctx) return null;
-  const { showDropDown, title, addressList, pickAddress } = ctx;
-
-  if (!showDropDown) return null;
-
-  return (
-    <Box sx={{ width: "100%" }}>
-      <Menu
-        direction="left"
-        sx={{ zIndex: 1502 }}
-        handler={(onClick) => (
-          <AddressDropDownHandler onClick={onClick}>
-            {title}{" "}
-            <KeyboardArrowDownOutlined fontSize="small" color="inherit" />
-          </AddressDropDownHandler>
-        )}
-        options={(onClose: () => void) =>
-          addressList.map((value, index) => (
-            <MenuItem
-              key={index}
-              onClick={() => {
-                pickAddress(value.RecordId as number);
-                onClose();
-              }}
-            >
-              {`${value.Name}, ${value.FullAddress}`}
-            </MenuItem>
-          ))
-        }
-      />
-    </Box>
-  );
+	const ctx = useContext(DeliveryAddressCtx);
+	if (!ctx) return null;
+	const { showDropDown, title, addressList, pickAddress, handleSaveAddress } =
+		ctx;
+
+	if (!showDropDown) return null;
+
+	return (
+		<Box sx={{ width: "100%" }}>
+			<Menu
+				direction="left"
+				sx={{ zIndex: 1502 }}
+				handler={(onClick) => (
+					<AddressDropDownHandler onClick={onClick}>
+						{title}{" "}
+						<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+					</AddressDropDownHandler>
+				)}
+				options={(onClose: () => void) =>
+					addressList.map((value, index) => (
+						<MenuItem
+							key={index}
+							onClick={async () => {
+								pickAddress(value.RecordId as number);
+								onClose();
+								await handleSaveAddress(value);
+							}}
+						>
+							{`${value.Name}, ${value.FullAddress}`}
+						</MenuItem>
+					))
+				}
+			/>
+		</Box>
+	);
 };
 
 // List (can accept a renderItem override)
 DeliveryAddress.List = ({ renderItem }: ListProps) => {
-  const ctx = useContext(DeliveryAddressCtx);
-  if (!ctx) return null;
-  const { visibleAddresses } = ctx;
-
-  return (
-    <>
-      {visibleAddresses.map((addr) =>
-        renderItem ? (
-          <React.Fragment key={addr.Id ?? addr.RecordId}>
-            {renderItem(addr)}
-          </React.Fragment>
-        ) : (
-          <DeliveryAddress.Card key={addr.Id ?? addr.RecordId} address={addr} />
-        ),
-      )}
-    </>
-  );
+	const ctx = useContext(DeliveryAddressCtx);
+	if (!ctx) return null;
+	const { visibleAddresses } = ctx;
+
+	return (
+		<>
+			{visibleAddresses.map((addr) =>
+				renderItem ? (
+					<React.Fragment key={addr.Id ?? addr.RecordId}>
+						{renderItem(addr)}
+					</React.Fragment>
+				) : (
+					<DeliveryAddress.Card key={addr.Id ?? addr.RecordId} address={addr} />
+				),
+			)}
+		</>
+	);
 };
 
 // Item → one address card (default uses AddressCard with Controls/Header/Body)
 DeliveryAddress.Card = ({ address, children }: ItemProps) => {
-  const ctx = useContext(DeliveryAddressCtx);
-  if (!ctx) return null;
-  const { cartShippingAddressId, openEdit, handleSaveAddress, handleDelete } =
-    ctx;
-
-  return (
-    <Grid size={{ md: 4, sm: 6, xs: 12 }}>
-      {children ? (
-        children
-      ) : (
-        <AddressCard
-          address={address}
-          isCartAddress={cartShippingAddressId === address.Id}
-          onEdit={() => openEdit(address)}
-          onSelect={() => handleSaveAddress(address)}
-          onDelete={() => handleDelete(address)}
-        >
-          <AddressCard.Controls />
-          <AddressCard.Header />
-          <AddressCard.Body />
-        </AddressCard>
-      )}
-    </Grid>
-  );
+	const ctx = useContext(DeliveryAddressCtx);
+	if (!ctx) return null;
+	const { cartShippingAddressId, openEdit, handleSaveAddress, handleDelete } =
+		ctx;
+
+	return (
+		<Grid size={{ md: 4, sm: 6, xs: 12 }}>
+			{children ? (
+				children
+			) : (
+				<AddressCard
+					address={address}
+					isCartAddress={cartShippingAddressId === address.Id}
+					onEdit={() => openEdit(address)}
+					onSelect={() => handleSaveAddress(address)}
+					onDelete={() => handleDelete(address)}
+				>
+					<AddressCard.Controls />
+					<AddressCard.Header />
+					<AddressCard.Body />
+				</AddressCard>
+			)}
+		</Grid>
+	);
 };
 
 DeliveryAddress.NewCard = () => {
-  const ctx = useContext(DeliveryAddressCtx);
-  if (!ctx) return null;
-  const { t, openNew } = ctx;
-
-  return (
-    <Grid size={{ md: 4, sm: 6, xs: 12 }} onClick={openNew}>
-      <AddressCard
-        address={{
-          Id: "new",
-          Name: t("createNewAddress"),
-          Street: "",
-          City: "",
-          State: "",
-          ZipCode: "",
-          Phone: "",
-        }}
-        isCartAddress={false}
-        onEdit={() => {}}
-        onSelect={openNew}
-        onDelete={() => {}}
-      >
-        <AddressCard.Header />
-        <AddressCard.Body />
-      </AddressCard>
-    </Grid>
-  );
+	const ctx = useContext(DeliveryAddressCtx);
+	if (!ctx) return null;
+	const { t, openNew } = ctx;
+
+	return (
+		<Grid size={{ md: 4, sm: 6, xs: 12 }} onClick={openNew}>
+			<AddressCard
+				address={{
+					Id: "new",
+					Name: t("createNewAddress"),
+					Street: "",
+					City: "",
+					State: "",
+					ZipCode: "",
+					Phone: "",
+				}}
+				isCartAddress={false}
+				onEdit={() => {}}
+				onSelect={openNew}
+				onDelete={() => {}}
+			>
+				<AddressCard.Header />
+				<AddressCard.Body />
+			</AddressCard>
+		</Grid>
+	);
 };
 
 export default DeliveryAddress;