@evenicanpm/storefront-core 1.0.4 → 1.0.6

package/src/pages-v2/checkout/checkout-alt-summary/cart-item.tsx

@@ -1,4 +1,6 @@
-// GLOBAL CUSTOM COMPONENTS
+"use client";
+
+import React, { createContext, useContext, ReactNode } from "react";
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import {
   Paragraph,
@@ -6,37 +8,65 @@ import {
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import useCurrencyFormatter from "@/lib/currency-formatter";
 import { CartLine } from "@/api-manager/schemas/cart.schema";
-// CUSTOM UTILS LIBRARY FUNCTION
 
-// ==============================================================
-interface Props {
+interface CartItemContextValue {
   cartLine: CartLine;
+  formatCurrency: (value: number) => string;
 }
-// ==============================================================
-
-export default function CartItem({ cartLine }: Props) {
+const CartItemContext = createContext<CartItemContextValue | null>(null);
+interface CartItemProps {
+  cartLine: CartLine;
+  children?: ReactNode;
+}
+const CartItem = ({ cartLine, children }: CartItemProps) => {
   const { formatCurrency } = useCurrencyFormatter();
-  const hasDiscount = cartLine.DiscountAmount && cartLine.DiscountAmount > 0;
   return (
-    <FlexBetween mb={1.5}>
-      <Paragraph>
-        <Span fontWeight="700">{cartLine.Quantity}</Span> x{" "}
-        {cartLine.Product?.Name}
-      </Paragraph>
-
-      <Paragraph>
-        {hasDiscount ? (
-          <s>{formatCurrency(cartLine.NetPrice || 0)}</s>
-        ) : (
-          formatCurrency(cartLine.TotalAmount || 0)
+    <CartItemContext.Provider value={{ cartLine, formatCurrency }}>
+      <FlexBetween mb={1.5}>
+        {children ?? (
+          <>
+            <CartItem.Description />
+            <CartItem.Price />
+          </>
         )}
-        {hasDiscount ? (
-          <Span color="error.500">
-            {" "}
-            {formatCurrency(cartLine.TotalAmount || 0)}
-          </Span>
-        ) : null}
-      </Paragraph>
-    </FlexBetween>
+      </FlexBetween>
+    </CartItemContext.Provider>
   );
-}
+};
+
+CartItem.Description = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine } = ctx;
+  return (
+    <Paragraph>
+      <Span fontWeight="700">{cartLine.Quantity}</Span> x{" "}
+      {cartLine.Product?.Name}
+    </Paragraph>
+  );
+};
+
+CartItem.Price = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine, formatCurrency } = ctx;
+  const hasDiscount = cartLine.DiscountAmount && cartLine.DiscountAmount > 0;
+
+  return (
+    <Paragraph>
+      {hasDiscount ? (
+        <s>{formatCurrency(cartLine.NetPrice || 0)}</s>
+      ) : (
+        formatCurrency(cartLine.TotalAmount || 0)
+      )}
+      {hasDiscount ? (
+        <Span color="error.500">
+          {" "}
+          {formatCurrency(cartLine.TotalAmount || 0)}
+        </Span>
+      ) : null}
+    </Paragraph>
+  );
+};
+
+export default CartItem;

package/src/pages-v2/checkout/checkout-alt-summary/checkout-alt-summary.tsx

@@ -1,42 +1,89 @@
 "use client";
 
+import React, { createContext, useContext, ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
+import { useTranslations } from "next-intl";
 // GLOBAL CUSTOM COMPONENTS
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// GLOBAL CUSTOM HOOK
 // LOCAL CUSTOM COMPONENTS
-import CartItem from "./cart-item";
-import ListItem from "./list-item";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import { useTranslations } from "next-intl";
+import CartItem from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-summary/cart-item";
+import ListItem from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-summary/list-item";
+// TYPES
+import { Cart, CartLine } from "@/api-manager/schemas/cart.schema";
 
 interface Props {
   cart: Cart;
+  children?: ReactNode;
 }
+interface CheckoutAltSummaryContextProps {
+  cart: Cart;
+  t: ReturnType<typeof useTranslations>;
+}
+
+const CheckoutAltSummaryContext =
+  createContext<CheckoutAltSummaryContextProps | null>(null);
 
-export default function CheckoutAltSummary({ cart }: Props) {
+const CheckoutAltSummary = ({ cart, children }: Props) => {
   const t = useTranslations("Checkout.Summary");
+
   return (
-    <div>
-      <Paragraph color="secondary.900" fontWeight={700} mb={2}>
-        {t("summaryTitle")}
-      </Paragraph>
+    <CheckoutAltSummaryContext.Provider value={{ cart, t }}>
+      <div>{children}</div>
+    </CheckoutAltSummaryContext.Provider>
+  );
+};
 
-      {cart.CartLines?.map((cl) => (
+CheckoutAltSummary.Title = () => {
+  const ctx = useContext(CheckoutAltSummaryContext);
+  if (!ctx) return null;
+  const { t } = ctx;
+  return (
+    <Paragraph color="secondary.900" fontWeight={700} mb={2}>
+      {t("summaryTitle")}
+    </Paragraph>
+  );
+};
+
+CheckoutAltSummary.CartItems = () => {
+  const ctx = useContext(CheckoutAltSummaryContext);
+  if (!ctx) return null;
+  const { cart } = ctx;
+  return (
+    <>
+      {cart.CartLines?.map((cl: CartLine) => (
         <CartItem cartLine={cl} key={cl.LineId} />
       ))}
+    </>
+  );
+};
 
-      <Box component={Divider} borderColor="grey.300" my={3} />
-
-      <ListItem title={t("subtotal")} value={cart.SubtotalAmount} />
-      <ListItem title={t("shipping")} value={cart.ShippingChargeAmount} />
-      <ListItem title={t("tax")} value={cart.TaxAmount} />
-      <ListItem title={t("discount")} value={cart.DiscountAmount} mb={3} />
-
-      <Box component={Divider} borderColor="grey.300" mb={1} />
+CheckoutAltSummary.Divider = (props: { sx?: object }) => {
+  return <Box component={Divider} borderColor="grey.300" {...props} />;
+};
 
-      <ListItem title={t("total")} value={cart.TotalAmount} color="inherit" />
-    </div>
+CheckoutAltSummary.ListItem = ({
+  cartKey,
+  titleKey,
+  color,
+  mb,
+}: {
+  cartKey: keyof Cart;
+  titleKey: string;
+  color?: string;
+  mb?: number;
+}) => {
+  const ctx = useContext(CheckoutAltSummaryContext);
+  if (!ctx) return null;
+  const { cart, t } = ctx;
+  return (
+    <ListItem
+      title={t(titleKey)}
+      value={typeof cart[cartKey] === "number" ? cart[cartKey] : 0}
+      color={color}
+      mb={mb}
+    />
   );
-}
+};
+
+export default CheckoutAltSummary;

package/src/pages-v2/checkout/checkout-alt-summary/index.ts

@@ -1 +1 @@
-export { default as CheckoutAltSummary } from "./checkout-alt-summary";
+export { default as CheckoutAltSummary } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-summary/checkout-alt-summary";

package/src/pages-v2/checkout/checkout-alt-summary/list-item.tsx

@@ -1,31 +1,73 @@
-// GLOBAL CUSTOM COMPONENTS
+import { ReactNode, createContext, useContext } from "react";
 import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import useCurrencyFormatter from "@/lib/currency-formatter";
-// CUSTOM UTILS LIBRARY FUNCTION
 
-// ==============================================================
-interface Props {
+interface ListItemProps {
   title: string;
   value?: number;
   mb?: number;
   color?: string;
+  children?: ReactNode;
 }
-// ==============================================================
 
-export default function ListItem({
+interface ListItemContextValue {
+  title: string;
+  value?: number;
+  mb: number;
+  color: string;
+  formatCurrency: (val: number) => string;
+}
+
+const ListItemContext = createContext<ListItemContextValue | null>(null);
+
+const ListItem = ({
   title,
   value,
   mb = 0.5,
   color = "grey.600",
-}: Props) {
+  children,
+}: ListItemProps) => {
   const { formatCurrency } = useCurrencyFormatter();
+
+  const contextValue: ListItemContextValue = {
+    title,
+    value,
+    mb,
+    color,
+    formatCurrency,
+  };
+
   return (
-    <FlexBetween mb={mb}>
-      <Paragraph color={color}>{title}:</Paragraph>
-      <Paragraph fontWeight="700">
-        {value ? formatCurrency(value) : "-"}
-      </Paragraph>
-    </FlexBetween>
+    <ListItemContext.Provider value={contextValue}>
+      <FlexBetween mb={mb}>
+        {children ?? (
+          <>
+            <ListItem.Title />
+            <ListItem.Value />
+          </>
+        )}
+      </FlexBetween>
+    </ListItemContext.Provider>
   );
-}
+};
+
+ListItem.Title = () => {
+  const ctx = useContext(ListItemContext);
+  if (!ctx) return null;
+  const { title, color } = ctx;
+  return <Paragraph color={color}>{title}:</Paragraph>;
+};
+
+ListItem.Value = () => {
+  const ctx = useContext(ListItemContext);
+  if (!ctx) return null;
+  const { value, formatCurrency } = ctx;
+  return (
+    <Paragraph fontWeight="700">
+      {value ? formatCurrency(value) : "-"}
+    </Paragraph>
+  );
+};
+
+export default ListItem;

package/src/pages-v2/confirmation/address.tsx

@@ -1,25 +1,47 @@
+"use client";
+
+import React, { ReactNode, createContext, useContext } from "react";
+import { useTranslations } from "next-intl";
 import { Card } from "@mui/material";
-import { Address } from "@/api-manager/schemas/address.schema";
 import {
   H5,
   Paragraph,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { useTranslations } from "next-intl";
+import { Address } from "@/api-manager/schemas/address.schema";
+
+const AddressContext = createContext<Address | null>(null);
 
-type Props = { address: Address };
+type Props = {
+  address: Address;
+  children?: ReactNode;
+};
 
-export default function OrderAddress({ address }: Props) {
+const OrderAddress = ({ address, children }: Props) => {
+  return (
+    <AddressContext.Provider value={address}>
+      <Card sx={{ p: 3 }}>{children}</Card>
+    </AddressContext.Provider>
+  );
+};
+
+OrderAddress.Heading = ({ children }: { children?: ReactNode }) => {
   const t = useTranslations("Address");
   return (
-    <Card sx={{ p: 3 }}>
-      <H5 mt={0} mb={2}>
-        {t("shippingTo")}
-      </H5>
-      <Paragraph>{address.Name}</Paragraph>
-      <Paragraph>{address.City}</Paragraph>
-      <Paragraph>{address.State}</Paragraph>
-      <Paragraph>{address.ZipCode}</Paragraph>
-      <Paragraph>{address.ThreeLetterISORegionName}</Paragraph>
-    </Card>
+    <H5 mt={0} mb={2}>
+      {children ?? t("shippingTo")}
+    </H5>
   );
-}
+};
+
+OrderAddress.Field = ({ property }) => {
+  const ctx = useContext(AddressContext);
+  if (!ctx) return null;
+  const address = ctx;
+  const value = address[property];
+
+  if (!value) return null;
+
+  return <Paragraph>{value}</Paragraph>;
+};
+
+export default OrderAddress;

package/src/pages-v2/confirmation/confirmation-summary.tsx

@@ -1,55 +1,94 @@
+"use client";
+
 import {
   FlexBetween,
   FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import useCurrencyFormatter from "@/lib/currency-formatter";
+import {
+  H6,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { Card, Divider } from "@mui/material";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import React, { ReactNode, createContext, useContext } from "react";
+import { SalesOrder } from "@/api-manager/schemas/order.schema";
 
-type Props = {
-  subtotal: number;
-  shipping: number;
-  tax: number;
-  discount: number;
-  total: number;
+type SummaryValues = {
+  order: SalesOrder;
 };
 
-export default function OrderSummary({
-  discount,
-  shipping,
-  subtotal,
-  tax,
-  total,
-}: Props) {
-  const t = useTranslations("Checkout.Summary");
-  const t2 = useTranslations("Confirmation");
+const SummaryContext = createContext<
+  (SummaryValues & { formatCurrency: (v: number) => string }) | null
+>(null);
+
+type Props = SummaryValues & { children?: ReactNode };
+
+const OrderSummary = ({ order, children }: Props) => {
   const { formatCurrency } = useCurrencyFormatter();
 
-  const renderListItem = (title: string, value: number) => (
-    <FlexBetween mb={1}>
-      <Paragraph color="grey.600">{title}</Paragraph>
-      <H6>{formatCurrency(value)}</H6>
-    </FlexBetween>
+  return (
+    <SummaryContext.Provider value={{ order, formatCurrency }}>
+      <Card sx={{ px: 3, mb: "30px" }}>
+        {children ?? (
+          <>
+            <OrderSummary.Title />
+            <OrderSummary.Item label="subtotal" field="SubtotalAmount" />
+            <OrderSummary.Item label="shipping" field="ShippingChargeAmount" />
+            <OrderSummary.Item label="tax" field="TaxAmount" />
+            <OrderSummary.Item label="discount" field="DiscountAmount" />
+            <Divider sx={{ mb: 1 }} />
+            <OrderSummary.Item label="total" field="TotalAmount" />
+          </>
+        )}
+      </Card>
+    </SummaryContext.Provider>
+  );
+};
+
+type ItemProps = {
+  label: string;
+  field: keyof SalesOrder;
+};
+
+OrderSummary.Title = () => {
+  const t = useTranslations("Confirmation");
+  return (
+    <FlexBox
+      justifyContent="center"
+      px={3}
+      py={2}
+      borderBottom="1px solid"
+      borderColor="divider"
+    >
+      {t("orderSummary")}
+    </FlexBox>
   );
+};
+
+OrderSummary.Item = ({ label, field }: ItemProps) => {
+  const ctx = useContext(SummaryContext);
+  if (!ctx) return null;
+  const t = useTranslations("Checkout.Summary");
+  const { formatCurrency, order } = ctx;
+  const value = order[field];
+  const numericValue =
+    typeof value === "number"
+      ? value
+      : typeof value === "string"
+        ? parseFloat(value)
+        : 0;
+
   return (
-    <Card sx={{ px: 3, mb: "30px" }}>
-      <FlexBox
-        justifyContent={"center"}
-        px={3}
-        py={2}
-        borderBottom={"1px solid"}
-        borderColor={"divider"}
-      >
-        {t2("orderSummary")}
-      </FlexBox>
-      {renderListItem(t("subtotal"), subtotal)}
-      {renderListItem(t("shipping"), shipping)}
-      {renderListItem(t("tax"), tax)}
-      {renderListItem(t("discount"), discount)}
-      <Divider sx={{ mb: 1 }} />
-      {renderListItem(t("total"), total)}
-    </Card>
+    <FlexBetween mb={1}>
+      <Paragraph color="grey.600">{t(label)}</Paragraph>
+      <H6>{formatCurrency(numericValue)}</H6>
+    </FlexBetween>
   );
-}
+};
+
+OrderSummary.Divider = (props: { sx?: object }) => {
+  return <Divider {...props} />;
+};
+
+export default OrderSummary;