@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

@@ -5,20 +5,17 @@ import IconButton from "@mui/material/IconButton";
 import { MdEast as East } from "react-icons/md";
 import { ChipProps } from "@mui/material";
 import { format } from "date-fns";
-// GLOBAL CUSTOM COMPONENT
 import {
   H6,
   Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// Local CUSTOM COMPONENT
-import TableRow from "../table-row";
-// CUSTOM UTILS LIBRARY FUNCTION
+import TableRow from "@evenicanpm/storefront-core/src/pages-v2/account/table-row";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import { SalesOrder } from "@/api-manager/schemas/order.schema";
+import React, { createContext, useContext } from "react";
 
-// =================================================
 type Props = { order: SalesOrder };
-// =================================================
+
 const STATUS_MAP: Record<number, { label: string; color: ChipProps["color"] }> =
   {
     1: { label: "Open", color: "secondary" },
@@ -28,37 +25,77 @@ const STATUS_MAP: Record<number, { label: string; color: ChipProps["color"] }> =
     5: { label: "Cancelled", color: "primary" },
   };
 
-const getStatusInfo = (status: number) => {
-  return STATUS_MAP[status] ?? { label: "Unknown", color: "default" };
-};
-export default function OrderRow({ order }: Props) {
-  const { formatCurrency } = useCurrencyFormatter();
+const getStatusInfo = (status: number) =>
+  STATUS_MAP[status] ?? { label: "Unknown", color: "default" };
 
-  const { label, color } = getStatusInfo(order.StatusValue ?? 0);
+const OrderRowContext = createContext<{
+  order: SalesOrder;
+  formatCurrency: (val: number) => string;
+} | null>(null);
+
+const OrderRow = ({ order, children }: React.PropsWithChildren<Props>) => {
+  const { formatCurrency } = useCurrencyFormatter();
 
   return (
-    <Link href={`/account/orders/${order.Id}`}>
-      <TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
-        <H6 ellipsis>{order?.ChannelReferenceId}</H6>
+    <OrderRowContext.Provider value={{ order, formatCurrency }}>
+      <Link href={`/account/orders/${order.Id}`}>
+        <TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
+          {children}
+        </TableRow>
+      </Link>
+    </OrderRowContext.Provider>
+  );
+};
 
-        <Box textAlign="center">
-          <Chip size="small" label={label} color={color} />
-        </Box>
+OrderRow.OrderNumber = () => {
+  const context = useContext(OrderRowContext);
+  if (!context) return null;
+  const { order } = context;
+  return <H6 ellipsis>{order?.ChannelReferenceId}</H6>;
+};
 
-        <Paragraph textAlign={{ sm: "center", xs: "left" }}>
-          {format(new Date(order.TransactionDate ?? ""), "MMM dd, yyyy")}
-        </Paragraph>
+OrderRow.Status = () => {
+  const context = useContext(OrderRowContext);
+  if (!context) return null;
+  const { order } = context;
+  const { label, color } = getStatusInfo(order.StatusValue ?? 0);
+  return (
+    <Box textAlign="center">
+      <Chip size="small" label={label} color={color} />
+    </Box>
+  );
+};
 
-        <Paragraph textAlign="center">
-          {formatCurrency(order.TotalAmount ?? 0)}
-        </Paragraph>
+OrderRow.Date = () => {
+  const context = useContext(OrderRowContext);
+  if (!context) return null;
+  const { order } = context;
+  return (
+    <Paragraph textAlign={{ sm: "center", xs: "left" }}>
+      {format(new Date(order.TransactionDate ?? ""), "MMM dd, yyyy")}
+    </Paragraph>
+  );
+};
 
-        <Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">
-          <IconButton sx={{ color: "grey.500" }}>
-            <East fontSize="large" />
-          </IconButton>
-        </Box>
-      </TableRow>
-    </Link>
+OrderRow.Total = () => {
+  const context = useContext(OrderRowContext);
+  if (!context) return null;
+  const { order, formatCurrency } = context;
+  return (
+    <Paragraph textAlign="center">
+      {formatCurrency(order.TotalAmount ?? 0)}
+    </Paragraph>
   );
-}
+};
+
+OrderRow.Action = () => {
+  return (
+    <Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">
+      <IconButton sx={{ color: "grey.500" }}>
+        <East fontSize="large" />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default OrderRow;

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

@@ -2,86 +2,120 @@ import Grid from "@mui/material/Grid2";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import { useTranslations } from "next-intl";
-// GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
   H5,
   H6,
   Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// CUSTOM UTILS LIBRARY FUNCTION
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import { SalesOrder } from "@/api-manager/schemas/order.schema";
+import React, { createContext, useContext } from "react";
 
-// ==============================================================
 type Props = { order: SalesOrder };
-// ==============================================================
 
-function ListItem({ title, value }: { title: string; value: string }) {
+const OrderSummaryContext = createContext<{
+  order: SalesOrder;
+  formatCurrency: (val: number) => string;
+} | null>(null);
+
+// Compound Component
+const OrderSummary = ({ order, children }: React.PropsWithChildren<Props>) => {
+  const { formatCurrency } = useCurrencyFormatter();
+
+  return (
+    <OrderSummaryContext.Provider value={{ order, formatCurrency }}>
+      <Grid container spacing={3}>
+        {children}
+      </Grid>
+    </OrderSummaryContext.Provider>
+  );
+};
+
+// Wrappers
+OrderSummary.AddressWrapper = ({ children }: { children: React.ReactNode }) => (
+  <Grid size={{ lg: 6, md: 6, xs: 12 }}>
+    <Card sx={{ p: 3 }}>{children}</Card>
+  </Grid>
+);
+
+OrderSummary.SummaryWrapper = ({ children }: { children: React.ReactNode }) => (
+  <Grid size={{ lg: 6, md: 6, xs: 12 }}>
+    <Card sx={{ p: 3 }}>{children}</Card>
+  </Grid>
+);
+
+// Subcomponents
+OrderSummary.AddressHeading = () => {
   const t = useTranslations("Account.OrderDetails");
+  return (
+    <H5 mt={0} mb={2}>
+      {t("addressHeading")}
+    </H5>
+  );
+};
+
+OrderSummary.AddressContent = () => {
+  const context = useContext(OrderSummaryContext);
+  if (!context) return null;
+  const { order } = context;
+  const shippingAddress = order.ShippingAddress;
+  if (!shippingAddress) return null;
+
+  return (
+    <Paragraph fontSize={14} my={0}>
+      {`${shippingAddress.Name}, ${shippingAddress.Street}, ${shippingAddress.City} ${shippingAddress.State} ${shippingAddress.ThreeLetterISORegionName} ${shippingAddress.ZipCode}`}
+    </Paragraph>
+  );
+};
+
+OrderSummary.SummaryHeading = () => {
+  const t = useTranslations("Account.OrderDetails");
+  return (
+    <H5 mt={0} mb={2}>
+      {t("headingSummary")}
+    </H5>
+  );
+};
+
+OrderSummary.ListItem = ({
+  title,
+  property,
+}: {
+  title: string;
+  property: string;
+}) => {
+  const context = useContext(OrderSummaryContext);
+  if (!context) return null;
+  const t = useTranslations("Account.OrderDetails");
+  const { order, formatCurrency } = context;
   return (
     <FlexBetween mb={1}>
       <Paragraph color="grey.600">{t(title)}</Paragraph>
-      <H6>{value}</H6>
+      <H6>{formatCurrency(order[property] ?? 0)}</H6>
     </FlexBetween>
   );
-}
+};
+
+OrderSummary.Divider = Divider;
 
-export default function OrderSummary({ order }: Props) {
+OrderSummary.Total = () => {
+  const context = useContext(OrderSummaryContext);
+  if (!context) return null;
+  const { order, formatCurrency } = context;
   const t = useTranslations("Account.OrderDetails");
-  const { formatCurrency } = useCurrencyFormatter();
-  const shippingAddress = order.ShippingAddress;
-  return (
-    <Grid container spacing={3}>
-      {/* SHIPMENT ADDRESS SECTION */}
-      <Grid size={{ lg: 6, md: 6, xs: 12 }}>
-        <Card sx={{ p: 3 }}>
-          <H5 mt={0} mb={2}>
-            {t("addressHeading")}
-          </H5>
-
-          {shippingAddress && (
-            <Paragraph fontSize={14} my={0}>
-              {`${shippingAddress.Name}, ${shippingAddress.Street}, ${shippingAddress.City} ${shippingAddress.State} ${shippingAddress.ThreeLetterISORegionName} ${shippingAddress.ZipCode}`}
-            </Paragraph>
-          )}
-        </Card>
-      </Grid>
 
-      {/* TOTAL SUMMERY SECTION */}
-      <Grid size={{ lg: 6, md: 6, xs: 12 }}>
-        <Card sx={{ p: 3 }}>
-          <H5 mt={0} mb={2}>
-            {t("headingSummary")}
-          </H5>
-
-          <ListItem
-            title="subTotal"
-            value={formatCurrency(order.SubtotalAmount ?? 0)}
-          />
-          <ListItem
-            title="shippingTotal"
-            value={formatCurrency(order.ShippingChargeAmount ?? 0)}
-          />
-          <ListItem
-            title="taxTotal"
-            value={formatCurrency(order.TaxAmount ?? 0)}
-          />
-          <ListItem
-            title="discountTotal"
-            value={formatCurrency(order.DiscountAmount ?? 0)}
-          />
-
-          <Divider sx={{ mb: 1 }} />
-
-          <FlexBetween mb={2}>
-            <H6>{t("total")}</H6>
-            <H6>{formatCurrency(order.TotalAmount ?? 0)}</H6>
-          </FlexBetween>
-
-          <Paragraph>{t("paidBy")}</Paragraph>
-        </Card>
-      </Grid>
-    </Grid>
+  return (
+    <FlexBetween mb={2}>
+      <H6>{t("total")}</H6>
+      <H6>{formatCurrency(order.TotalAmount ?? 0)}</H6>
+    </FlexBetween>
   );
-}
+};
+
+OrderSummary.PaidBy = ({ children }: { children?: React.ReactNode }) => {
+  const t = useTranslations("Account.OrderDetails");
+  return <Paragraph>{children ?? t("paidBy")}</Paragraph>;
+};
+
+export default OrderSummary;

package/src/pages-v2/account/orders/ordered-products.tsx

@@ -3,10 +3,8 @@ import Button from "@mui/material/Button";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
-import { format } from "date-fns";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
-// GLOBAL CUSTOM COMPONENTS
 import {
   H6,
   Paragraph,
@@ -16,101 +14,45 @@ import {
   FlexBetween,
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-// CUSTOM UTILS LIBRARY FUNCTION
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import { SalesLine, SalesOrder } from "@/api-manager/schemas/order.schema";
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
 import buildDetailUrl from "@/lib/build-detail-url";
+import React, { createContext } from "react";
 
-// ==============================================================
 type Props = { order: SalesOrder };
-// ==============================================================
 
-export default function OrderedProducts({ order }: Props) {
-  const t = useTranslations("Account.OrderDetails");
-  const { formatCurrency } = useCurrencyFormatter();
-
-  const deliveredDate = "";
+const OrderedProductsContext = createContext<{
+  order: SalesOrder;
+  formatCurrency: (val: number) => string;
+} | null>(null);
 
+const OrderedProducts = ({
+  order,
+  children,
+}: React.PropsWithChildren<Props>) => {
+  const { formatCurrency } = useCurrencyFormatter();
   return (
-    <Card sx={{ p: 0, mb: "30px" }}>
-      <FlexBetween px={3} py={2} flexWrap="wrap" bgcolor="grey.200">
-        <Item title="orderId" value={order?.ChannelReferenceId ?? ""} />
-        <Item
-          title="orderDate"
-          value={format(new Date(order?.TransactionDate ?? ""), "dd MMM, yyyy")}
-        />
-        <Item
-          title="deliveredOn"
-          value={
-            deliveredDate
-              ? format(new Date(deliveredDate), "dd MMM, yyyy")
-              : t("deliveredOnValue")
-          }
-        />
-      </FlexBetween>
-
-      <Grid
-        container
-        spacing={2}
-        padding={"20px 15px 10px"}
-        alignItems={"center"}
-      >
-        {order?.SalesLines?.map((item: SalesLine, index: number) => (
-          <Link
-            href={buildDetailUrl(
-              item?.Product?.Name ?? "",
-              item?.Product?.RecordId ?? 0,
-            )}
-            key={index}
-            style={{ display: "contents" }}
-          >
-            <Grid size={{ xs: 12, sm: 5 }}>
-              <FlexBox gap={2.5} alignItems="center" padding={"12px 15px"}>
-                <Avatar
-                  alt={item?.Product?.Name}
-                  src={item?.Product?.PrimaryImageUrl}
-                  sx={{ height: 64, width: 64 }}
-                />
-                <div>
-                  <H6>{item?.Product?.Name}</H6>
-                  <Paragraph color="grey.600">
-                    {formatCurrency(item?.Price ?? 0)} x {item?.Quantity || 1}
-                  </Paragraph>
-                </div>
-              </FlexBox>
-            </Grid>
-
-            <Grid size={{ xs: 8, sm: 4 }}>
-              {item.Product?.Dimensions?.length ? (
-                item.Product.Dimensions.map((dim, dimInd) => (
-                  <Paragraph key={dimInd} paddingLeft={"15px"}>
-                    <Span>
-                      {ProductDimensionType[dim.DimensionTypeValue || 0]}:
-                    </Span>
-                    <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
-                  </Paragraph>
-                ))
-              ) : (
-                <Box />
-              )}
-            </Grid>
-
-            <Grid size={{ xs: 4, sm: 3 }}>
-              <Box justifySelf={"end"}>
-                <Button variant="text" color="primary">
-                  {t("writeReview")}
-                </Button>
-              </Box>
-            </Grid>
-          </Link>
-        ))}
-      </Grid>
-    </Card>
+    <OrderedProductsContext.Provider value={{ order, formatCurrency }}>
+      <Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
+    </OrderedProductsContext.Provider>
   );
-}
+};
+
+// Subcomponents
+OrderedProducts.Header = ({ children }: React.PropsWithChildren) => (
+  <FlexBetween px={3} py={2} flexWrap="wrap" bgcolor="grey.200">
+    {children}
+  </FlexBetween>
+);
 
-function Item({ title, value }: { title: string; value: string }) {
+OrderedProducts.HeaderItem = ({
+  title,
+  value,
+}: {
+  title: string;
+  value: string;
+}) => {
   const t = useTranslations("Account.OrderDetails");
   return (
     <FlexBox gap={1} alignItems="center">
@@ -118,4 +60,103 @@ function Item({ title, value }: { title: string; value: string }) {
       <Paragraph>{value}</Paragraph>
     </FlexBox>
   );
-}
+};
+
+OrderedProducts.List = ({ children }: React.PropsWithChildren) => (
+  <Grid container spacing={2} padding={"20px 15px 10px"} alignItems={"center"}>
+    {children}
+  </Grid>
+);
+
+OrderedProducts.Row = ({
+  item,
+  children,
+}: {
+  item: SalesLine;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Link
+      href={buildDetailUrl(
+        item?.Product?.Name ?? "",
+        item?.Product?.RecordId ?? 0,
+      )}
+      style={{ display: "contents" }}
+    >
+      {children}
+    </Link>
+  );
+};
+
+OrderedProducts.ColumnOne = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Grid size={{ xs: 12, sm: 5 }}>
+      <FlexBox gap={2.5} alignItems="center" padding={"12px 15px"}>
+        {children}
+      </FlexBox>
+    </Grid>
+  );
+};
+
+OrderedProducts.Image = ({ item }: { item: SalesLine }) => {
+  return (
+    <Avatar
+      alt={item?.Product?.Name}
+      src={item?.Product?.PrimaryImageUrl}
+      sx={{ height: 64, width: 64 }}
+    />
+  );
+};
+
+OrderedProducts.Info = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+OrderedProducts.Title = ({ item }: { item: SalesLine }) => {
+  return <H6>{item?.Product?.Name}</H6>;
+};
+
+OrderedProducts.Price = ({ item }: { item: SalesLine }) => {
+  const { formatCurrency } = useCurrencyFormatter();
+  return (
+    <Paragraph color="grey.600">
+      {formatCurrency(item?.Price ?? 0)} x {item?.Quantity || 1}
+    </Paragraph>
+  );
+};
+
+OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
+  if (!item.Product?.Dimensions?.length) {
+    return (
+      <Grid size={{ xs: 8, sm: 4 }}>
+        <Box />
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid size={{ xs: 8, sm: 4 }}>
+      {item.Product.Dimensions.map((dim, i) => (
+        <Paragraph key={i} paddingLeft={"15px"}>
+          <Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
+          <Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
+        </Paragraph>
+      ))}
+    </Grid>
+  );
+};
+
+OrderedProducts.ReviewButton = () => {
+  const t = useTranslations("Account.OrderDetails");
+  return (
+    <Grid size={{ xs: 4, sm: 3 }}>
+      <Box justifySelf={"end"}>
+        <Button variant="text" color="primary">
+          {t("writeReview")}
+        </Button>
+      </Box>
+    </Grid>
+  );
+};
+
+export default OrderedProducts;

package/src/pages-v2/account/profile/profile-button.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
-import ProfileButton from "./profile-button";
+import ProfileButton from "@evenicanpm/storefront-core/src/pages-v2/account/profile/profile-button";
 import { getMsalInstance, initializeMsal, getRequestConfig } from "@/auth/msal";
 
 vi.mock("@/auth/msal", () => ({

package/src/pages-v2/account/profile/user-info.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { createContext, useContext, ReactNode } from "react";
 import _ from "lodash";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { Theme } from "@mui/material/styles";
@@ -11,52 +14,74 @@ import {
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 // API
 import { User } from "@/api-manager/schemas/user.schema";
-type Props = {
+
+interface UserInfoContextValue {
   user: User;
-};
-export default function UserInfo({ user }: Props) {
+}
+
+const UserInfoContext = createContext<UserInfoContextValue | null>(null);
+interface UserInfoProps {
+  user: User;
+  children: ReactNode;
+}
+
+const UserInfo = ({ user, children }: UserInfoProps) => {
   const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
 
   return (
-    <Card
-      sx={{
-        mt: 3,
-        display: "flex",
-        flexWrap: "wrap",
-        gap: "5rem",
-        p: "0.75rem 1.5rem",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        ...(downMd && {
-          gap: "1rem",
-          alignItems: "start",
-          flexDirection: "column",
+    <UserInfoContext.Provider value={{ user }}>
+      <Card
+        sx={{
+          mt: 3,
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "5rem",
+          p: "0.75rem 1.5rem",
+          alignItems: "center",
           justifyContent: "flex-start",
-        }),
-      }}
-    >
-      <TableRowItem
-        title="labelFirstName"
-        value={_.capitalize(user?.FirstName)}
-      />
-      <TableRowItem
-        title="labelLastName"
-        value={_.capitalize(user?.LastName)}
-      />
-      <TableRowItem title="labelEmail" value={user?.Email ?? ""} />
-    </Card>
+          ...(downMd && {
+            gap: "1rem",
+            alignItems: "start",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+          }),
+        }}
+      >
+        {children}
+      </Card>
+    </UserInfoContext.Provider>
   );
+};
+interface ItemProps {
+  title: string;
+  field?: keyof User;
+  value?: string;
+  transform?: (val: string) => string;
 }
-
-function TableRowItem({ title, value = "" }: { title: string; value: string }) {
+UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
+  const ctx = useContext(UserInfoContext);
+  if (!ctx) return null;
+  const { user } = ctx;
   const t = useTranslations("Account.Profile");
+
+  let displayValue = value;
+
+  if (!value && field) {
+    displayValue = String(user?.[field] ?? "");
+  }
+
+  if (transform && displayValue) {
+    displayValue = transform(displayValue);
+  }
+
   return (
     <FlexBox flexDirection="column" p={1}>
       <Small color="grey.600" mb={0.5}>
         {t(title)}
       </Small>
-
-      <Span>{value}</Span>
+      <Span>{displayValue}</Span>
     </FlexBox>
   );
-}
+};
+
+export default UserInfo;