@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/pages-v2/account/addresses/address-item.tsx

@@ -1,25 +1,38 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
 import IconButton from "@mui/material/IconButton";
 import { Button, Box, Chip } from "@mui/material";
+import { SxProps } from "@mui/material/styles";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-// MUI ICON COMPONENTS
+// ICONS
 import { MdEdit as Edit } from "react-icons/md";
 import { MdDelete as Delete } from "react-icons/md";
-// GLOBAL CUSTOM COMPONENTS
+// Custom Components
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// LOCAL CUSTOM COMPONENT
-import TableRow from "../table-row";
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
 // API
 import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
 import useUpdateUser from "@/api-manager/services/user/mutations/update-user";
 import { Address } from "@/api-manager/schemas/address.schema";
 
-interface Props {
+interface AddressContextValue {
+  address: Address;
+  setPrimaryAddress: (id: string) => void;
+  editAddress: (id: string) => void;
+  handleDelete: (id: string) => void;
+}
+
+const AddressContext = createContext<AddressContextValue | null>(null);
+interface RootProps {
   address: Address;
+  children?: ReactNode;
+  sx?: SxProps; // allow overriding TableRow styling
 }
 
-export default function AddressListItem({ address }: Props) {
+const AddressListItem = ({ address, children, sx }: RootProps) => {
   const router = useRouter();
   const t = useTranslations("Account.Addresses");
   const { setNotification } = useNotification();
@@ -34,6 +47,7 @@ export default function AddressListItem({ address }: Props) {
   const editAddress = (id: string) => {
     router.push(`/account/addresses/${id}`);
   };
+
   const handleDelete = async (id: string) => {
     try {
       await deleteAddress(id);
@@ -41,7 +55,7 @@ export default function AddressListItem({ address }: Props) {
         message: t("deleteAddressSuccess"),
         severity: "success",
       });
-    } catch (error) {
+    } catch {
       setNotification({
         message: t("deleteAddressFailed"),
         severity: "error",
@@ -50,55 +64,103 @@ export default function AddressListItem({ address }: Props) {
   };
 
   return (
-    <TableRow
-      sx={{
-        display: "grid",
-        gridTemplateColumns: "1fr 2fr 1fr 1.5fr", // Define equal column structure
-        alignItems: "center",
-        gap: 2,
-        padding: "10px 15px",
-      }}
+    <AddressContext.Provider
+      value={{ address, setPrimaryAddress, editAddress, handleDelete }}
     >
-      <Paragraph ellipsis>{address?.Name}</Paragraph>
-      <Paragraph ellipsis>{address?.FullAddress}</Paragraph>
-      <Paragraph ellipsis>{address?.Phone}</Paragraph>
-
-      {/* Actions Column */}
-      <Box display="flex" alignItems="center" gap={1} justifySelf="end">
-        {address?.IsPrimary ? (
-          <Chip size="small" label={t("primaryFlag")} color="primary" />
-        ) : (
-          <Button
-            color="secondary"
-            variant="outlined"
-            size="small"
-            onClick={() => {
-              const rid = address.RecordId?.toString();
-              setPrimaryAddress(address.Id ?? rid ?? "");
-            }}
-          >
-            {t("btnPrimaryAddress")}
-          </Button>
-        )}
-
-        <IconButton
-          onClick={() => {
-            const rid = address.RecordId?.toString();
-            editAddress(address.Id ?? rid ?? "");
-          }}
-        >
-          <Edit fontSize="large" color="inherit" />
-        </IconButton>
-
-        <IconButton
-          onClick={() => {
-            const rid = address.RecordId?.toString();
-            handleDelete(address.Id ?? rid ?? "");
-          }}
-        >
-          <Delete fontSize="large" color="inherit" />
-        </IconButton>
-      </Box>
-    </TableRow>
+      <TableRow
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "1fr 2fr 1fr 1.5fr",
+          alignItems: "center",
+          gap: 2,
+          padding: "10px 15px",
+          ...sx,
+        }}
+      >
+        {children}
+      </TableRow>
+    </AddressContext.Provider>
   );
+};
+
+// ----------------- Subcomponents -----------------
+interface FieldProps {
+  field: keyof Address; // "Name" | "FullAddress" | "Phone" etc.
+  render?: (value: string | number | boolean, address: Address) => ReactNode;
 }
+
+AddressListItem.Field = ({ field, render }: FieldProps) => {
+  const ctx = useContext(AddressContext);
+  if (!ctx) return null;
+  const { address } = ctx;
+  const value = address?.[field];
+  return (
+    <>
+      {render ? (
+        render(value as string | number | boolean, address)
+      ) : (
+        <Paragraph ellipsis>{value as string | number | boolean}</Paragraph>
+      )}
+    </>
+  );
+};
+
+AddressListItem.Actions = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box display="flex" alignItems="center" gap={1} justifySelf="end">
+      {children}
+    </Box>
+  );
+};
+
+AddressListItem.Primary = () => {
+  const ctx = useContext(AddressContext);
+  if (!ctx) return null;
+  const { address, setPrimaryAddress } = ctx;
+  const t = useTranslations("Account.Addresses");
+  const rid = address.RecordId?.toString();
+  const addrId = address.Id ?? rid ?? "";
+
+  return address?.IsPrimary ? (
+    <Chip size="small" label={t("primaryFlag")} color="primary" />
+  ) : (
+    <Button
+      color="secondary"
+      variant="outlined"
+      size="small"
+      onClick={() => setPrimaryAddress(addrId)}
+    >
+      {t("btnPrimaryAddress")}
+    </Button>
+  );
+};
+
+AddressListItem.Edit = () => {
+  const ctx = useContext(AddressContext);
+  if (!ctx) return null;
+  const { address, editAddress } = ctx;
+  const rid = address.RecordId?.toString();
+  const addrId = address.Id ?? rid ?? "";
+
+  return (
+    <IconButton onClick={() => editAddress(addrId)}>
+      <Edit fontSize="large" color="inherit" />
+    </IconButton>
+  );
+};
+
+AddressListItem.Delete = () => {
+  const ctx = useContext(AddressContext);
+  if (!ctx) return null;
+  const { address, handleDelete } = ctx;
+  const rid = address.RecordId?.toString();
+  const addrId = address.Id ?? rid ?? "";
+
+  return (
+    <IconButton onClick={() => handleDelete(addrId)}>
+      <Delete fontSize="large" color="inherit" />
+    </IconButton>
+  );
+};
+
+export default AddressListItem;

package/src/pages-v2/account/dashboard-header.tsx

@@ -1,19 +1,24 @@
-import React, { ReactNode } from "react";
+"use client";
+
+import React, { ReactNode, createContext, useContext } from "react";
 import Link from "next/link";
-import { Box, Button, IconButton, Theme, styled } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import {
+  Box,
+  Button,
+  IconButton,
+  Theme,
+  styled,
+  useMediaQuery,
+} from "@mui/material";
 import { useTranslations } from "next-intl";
-// ICON COMPONENTS
 import { MdMenu as Menu } from "react-icons/md";
 // GLOBAL CUSTOM COMPONENTS
 import SideNav from "@evenicanpm/storefront-core/src/components-v2/side-nav/index";
 import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-// LOCAL CUSTOM COMPONENTS
-import Navigation from "./navigation";
 import { IconType } from "react-icons";
+import Navigation from "@evenicanpm/storefront-core/src/pages-v2/account/account-navigation";
 
-// STYLED COMPONENT
 const StyledBox = styled("div")(({ theme }) => ({
   display: "flex",
   marginTop: theme.spacing(-2),
@@ -30,94 +35,116 @@ const StyledBox = styled("div")(({ theme }) => ({
     flexDirection: "column",
   },
 }));
+interface DashboardHeaderContextValue {
+  isTablet: boolean;
+  t: ReturnType<typeof useTranslations>;
+}
+const DashboardHeaderContext =
+  createContext<DashboardHeaderContextValue | null>(null);
+interface RootProps {
+  children: ReactNode;
+}
+const DashboardHeader = ({ children }: RootProps) => {
+  const t = useTranslations();
+  const isTablet = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(1025),
+  );
 
-// ==============================================================
-
-type WithButtons = {
-  title: string;
-  titleMessage?: string;
-  buttons: ReactNode;
-  Icon: IconType;
-  href?: never;
-  buttonText?: never;
+  return (
+    <DashboardHeaderContext.Provider value={{ isTablet, t }}>
+      <StyledBox>
+        <FlexBox mt={2} className="headerHold">
+          {children}
+        </FlexBox>
+      </StyledBox>
+    </DashboardHeaderContext.Provider>
+  );
 };
 
-type WithGeneratedButton = {
+DashboardHeader.Title = ({
+  title,
+  titleMessage,
+  Icon,
+}: {
   title: string;
   titleMessage?: string;
-  href?: string;
-  buttonText?: string;
-  Icon: IconType;
-  buttons?: ReactNode;
+  Icon?: IconType;
+}) => {
+  const ctx = useContext(DashboardHeaderContext);
+  if (!ctx) return null;
+  const { t } = ctx;
+  return (
+    <FlexBox alignItems="center" gap={0.5}>
+      {Icon && (
+        <IconButton color="primary">
+          <Icon />
+        </IconButton>
+      )}
+      <H2 my={0} lineHeight={1} ellipsis>
+        {titleMessage ?? t(title)}
+      </H2>
+    </FlexBox>
+  );
 };
 
-type Props = WithButtons | WithGeneratedButton;
+DashboardHeader.Buttons = ({ children }: { children: ReactNode }) => {
+  const ctx = useContext(DashboardHeaderContext);
+  if (!ctx) return null;
+  const { isTablet } = ctx;
 
-// ==============================================================
+  const content = (
+    <FlexBox gap={1} justifyContent="flex-end">
+      {children}
+    </FlexBox>
+  );
 
-export default function DashboardHeader({
-  title,
-  titleMessage,
-  buttons,
-  href,
-  buttonText,
-  Icon,
-}: Props) {
-  const t = useTranslations();
-  const isTablet = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down(1025),
+  return (
+    <>
+      <FlexBox className="button-container" justifyContent="flex-end">
+        {!isTablet && content}
+      </FlexBox>
+      {isTablet && <Box mt={2}>{content}</Box>}
+    </>
   );
+};
 
-  const GENERATED_BUTTON = href ? (
+DashboardHeader.GeneratedButton = ({
+  href,
+  text,
+}: {
+  href: string;
+  text: string;
+}) => {
+  const ctx = useContext(DashboardHeaderContext);
+  if (!ctx) return null;
+  const { t } = ctx;
+  return (
     <Button
       href={href}
       color="primary"
       LinkComponent={Link}
       sx={{ bgcolor: "primary.light", px: 4 }}
     >
-      {t(buttonText)}
+      {t(text)}
     </Button>
-  ) : null;
-
-  const HEADER_LINKS = (
-    <FlexBox gap={1} justifyContent="flex-end">
-      {buttons || GENERATED_BUTTON}
-    </FlexBox>
   );
+};
 
+DashboardHeader.SideNav = ({ children }: { children?: ReactNode }) => {
   return (
-    <StyledBox>
-      <FlexBox mt={2} className="headerHold">
-        <FlexBox alignItems="center" gap={0.5}>
-          {Icon && (
-            <IconButton color="primary">
-              <Icon />
-            </IconButton>
-          )}
-          <H2 my={0} lineHeight={1} ellipsis>
-            {titleMessage ? titleMessage : t(title)}
-          </H2>
-        </FlexBox>
-
-        <FlexBox className="button-container" justifyContent="flex-end">
-          {!isTablet && HEADER_LINKS}
-        </FlexBox>
-
-        <div className="sidenav">
-          <SideNav
-            position="left"
-            handler={(close) => (
-              <IconButton onClick={close}>
-                <Menu fontSize="small" />
-              </IconButton>
-            )}
-          >
-            <Navigation />
-          </SideNav>
-        </div>
-      </FlexBox>
-
-      {isTablet ? <Box mt={2}>{HEADER_LINKS}</Box> : null}
-    </StyledBox>
+    <div className="sidenav">
+      <SideNav
+        position="left"
+        handler={(close) => (
+          <IconButton onClick={close}>
+            <Menu fontSize="small" />
+          </IconButton>
+        )}
+      >
+        {children ?? <Navigation />}
+      </SideNav>
+    </div>
   );
-}
+};
+
+export default DashboardHeader;

package/src/pages-v2/account/orders/order-progress.tsx

@@ -1,15 +1,14 @@
-import { Fragment } from "react";
+import { Fragment, createContext, useContext } from "react";
 import { useTranslations } from "next-intl";
-// MUI
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Avatar from "@mui/material/Avatar";
 import styled from "@mui/material/styles/styled";
 import { MdDone as Done } from "react-icons/md";
 // CUSTOM ICON COMPONENTS
-import Delivery from "./icons/delivery";
-import PackageBox from "./icons/package-box";
-import TruckFilled from "./icons/truck-filled";
+import Delivery from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/delivery";
+import PackageBox from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/package-box";
+import TruckFilled from "@evenicanpm/storefront-core/src/pages-v2/account/orders/icons/truck-filled";
 // GLOBAL CUSTOM COMPONENTS
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
@@ -41,74 +40,114 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
   color: theme.palette.success.main,
 }));
 
-type Props = {
+type OrderProgressContextType = {
   status: number;
+  stepIcons: React.ElementType[];
+  statusList: string[];
 };
-export default function OrderProgress({ status }: Props) {
+
+const OrderProgressContext = createContext<OrderProgressContextType | null>(
+  null,
+);
+
+// COMPOUND COMPONENT
+type Props = { status: number };
+
+const OrderProgress = ({
+  status,
+  children,
+}: React.PropsWithChildren<Props>) => {
+  const STEP_ICONS = [PackageBox, TruckFilled, Delivery];
+  const STATUS_LIST = ["Packaging", "Shipping", "Delivering", "Complete"];
+
+  return (
+    <OrderProgressContext.Provider
+      value={{ status, stepIcons: STEP_ICONS, statusList: STATUS_LIST }}
+    >
+      <Card sx={{ p: "2rem 1.5rem", mb: 4 }}>{children}</Card>
+    </OrderProgressContext.Provider>
+  );
+};
+
+// SUBCOMPONENTS
+OrderProgress.Steps = () => {
+  const context = useContext(OrderProgressContext);
+  if (!context) return null;
+
+  const { status, stepIcons, statusList } = context;
+
+  let currentStatus = "";
+  if ([1, 2, 4, 5].includes(status)) currentStatus = "Packaging";
+  if ([3].includes(status)) currentStatus = "Complete";
+
+  const statusIndex = statusList.indexOf(currentStatus);
+
+  return (
+    <StyledFlexbox>
+      {stepIcons.map((Icon, index) => (
+        <Fragment key={index}>
+          <Box position="relative">
+            <Avatar
+              alt="step"
+              sx={{
+                width: 64,
+                height: 64,
+                color: index <= statusIndex ? "white" : "primary.main",
+                bgcolor: index <= statusIndex ? "primary.main" : "grey.300",
+              }}
+            >
+              <Icon color="inherit" fontSize="large" />
+            </Avatar>
+
+            {index < statusIndex && (
+              <StyledAvatar alt="done">
+                <Done color="inherit" size={16} />
+              </StyledAvatar>
+            )}
+          </Box>
+
+          {index < stepIcons.length - 1 && (
+            <Box
+              className="line"
+              bgcolor={index < statusIndex ? "primary.main" : "grey.300"}
+            />
+          )}
+        </Fragment>
+      ))}
+    </StyledFlexbox>
+  );
+};
+
+OrderProgress.DeliveryDate = () => {
   const t = useTranslations("Account.OrderDetails");
+  const context = useContext(OrderProgressContext);
+  if (!context) return null;
 
-  let ORDER_STATUS = "";
+  const { status, statusList } = context;
 
-  // Map API statuses to ORDER_STATUS_LIST values
-  if ([1, 2, 4, 5].includes(status)) ORDER_STATUS = "Packaging";
-  if ([3].includes(status)) ORDER_STATUS = "Complete";
+  let currentStatus = "";
+  if ([1, 2, 4, 5].includes(status)) currentStatus = "Packaging";
+  if ([3].includes(status)) currentStatus = "Complete";
 
+  const statusIndex = statusList.indexOf(currentStatus);
   const hideDeliveryDate = !![4, 5].includes(status);
 
-  const STEP_ICONS = [PackageBox, TruckFilled, Delivery];
-  const ORDER_STATUS_LIST = ["Packaging", "Shipping", "Delivering", "Complete"];
-
-  const statusIndex = ORDER_STATUS_LIST.indexOf(ORDER_STATUS);
+  if (hideDeliveryDate) return null;
 
   return (
-    <Card sx={{ p: "2rem 1.5rem", mb: 4 }}>
-      <StyledFlexbox>
-        {STEP_ICONS.map((Icon, index) => (
-          <Fragment key={index}>
-            <Box position="relative">
-              <Avatar
-                alt="shipping"
-                sx={{
-                  width: 64,
-                  height: 64,
-                  color: index <= statusIndex ? "white" : "primary.main",
-                  bgcolor: index <= statusIndex ? "primary.main" : "grey.300",
-                }}
-              >
-                <Icon color="inherit" fontSize="large" />
-              </Avatar>
-
-              {index < statusIndex ? (
-                <StyledAvatar alt="done">
-                  <Done color="inherit" size={16} />
-                </StyledAvatar>
-              ) : null}
-            </Box>
-
-            {index < STEP_ICONS.length - 1 ? (
-              <Box
-                className="line"
-                bgcolor={index < statusIndex ? "primary.main" : "grey.300"}
-              />
-            ) : null}
-          </Fragment>
-        ))}
-      </StyledFlexbox>
-
-      {!hideDeliveryDate && (
-        <FlexBox justifyContent={{ xs: "center", sm: "flex-end" }}>
-          <Paragraph
-            p="0.5rem 1rem"
-            textAlign="center"
-            borderRadius="300px"
-            color="primary.main"
-            bgcolor="primary.light"
-          >
-            {t(statusIndex === 3 ? "deliveredDate" : "estimatedDeliveryDate")}
-            <b> 4th October</b>
-          </Paragraph>
-        </FlexBox>
-      )}
-    </Card>
+    <FlexBox justifyContent={{ xs: "center", sm: "flex-end" }}>
+      <Paragraph
+        p="0.5rem 1rem"
+        textAlign="center"
+        borderRadius="300px"
+        color="primary.main"
+        bgcolor="primary.light"
+      >
+        {t(statusIndex === 3 ? "deliveredDate" : "estimatedDeliveryDate")}
+        <b> 4th October</b>
+      </Paragraph>
+    </FlexBox>
   );
-}
+};
+
+export default OrderProgress;