@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

@@ -0,0 +1,450 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import { useLocale, useTranslations } from "next-intl";
+import Grid from "@mui/material/Grid2";
+import { Box, MenuItem } from "@mui/material";
+import { KeyboardArrowDownOutlined } from "@mui/icons-material";
+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";
+// 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 DeliveryAddressCompound = React.FC<DeliveryAddressProps> & {
+  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;
+}
+
+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>;
+}
+
+interface ListProps {
+  renderItem?: (addr: Address) => ReactNode;
+}
+
+interface ItemProps {
+  address: Address;
+  children?: ReactNode;
+}
+
+const DeliveryAddressCtx = createContext<DeliveryAddressContextValue | null>(
+  null,
+);
+
+const DeliveryAddress: DeliveryAddressCompound = ({
+  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>
+  );
+};
+
+// ---------- 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}
+    />
+  );
+};
+
+// (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>
+  );
+};
+
+// 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} />
+        ),
+      )}
+    </>
+  );
+};
+
+// 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>
+  );
+};
+
+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>
+  );
+};
+
+export default DeliveryAddress;