@evenicanpm/storefront-core 1.0.4 → 1.0.5

package/src/pages-v2/cart/cart-item.tsx

@@ -1,4 +1,6 @@
-import { useState } from "react";
+"use client";
+
+import React, { createContext, useContext, useMemo, useState } from "react";
 import Link from "next/link";
 import {
   Button,
@@ -8,22 +10,20 @@ import {
   Typography,
   TextField,
 } from "@mui/material";
-
 import { useTranslations } from "next-intl";
-// MUI ICON COMPONENTS
+// MUI Icons
 import Add from "@mui/icons-material/Add";
 import Close from "@mui/icons-material/Close";
 import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
+// Local components
 import {
   H6,
   Span,
   Tiny,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import Image from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-// STYLED COMPONENT
-import { Wrapper } from "./wrapper";
+import { Wrapper } from "@evenicanpm/storefront-core/src/pages-v2/cart/wrapper";
 // API
 import { ProductDimensionType } from "@msdyn365-commerce/retail-proxy";
 import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
@@ -33,280 +33,409 @@ import { CartLine } from "@evenicanpm/storefront-core/src/api-manager/schemas/ca
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
 
-// =========================================================
-type Props = {
+type CartItemContextValue = {
   cartLine: CartLine;
   cartId: string;
   cartVersion: number;
-  showCartLineComments?: boolean;
+  qty: number;
+  isLoading: boolean;
+
+  // local UI state for comment editing
+  isWritingComment: boolean;
+  setIsWritingComment: (b: boolean) => void;
+  comment: string;
+  setComment: (v: string) => void;
+
+  // actions
+  increase: () => void;
+  decrease: () => void;
+  remove: () => void;
+  saveComment: () => void;
+  cancelComment: () => void;
 };
-// =========================================================
 
-export default function CartItem({
+const CartItemContext = createContext<CartItemContextValue | null>(null);
+
+// --------------------
+// Root
+// --------------------
+type CartItemProps = {
+  cartLine: CartLine;
+  cartId: string;
+  cartVersion: number;
+  children: React.ReactNode;
+};
+
+function CartItemRoot({
   cartLine,
   cartId,
   cartVersion,
-  showCartLineComments = true,
-}: Props) {
+  children,
+}: CartItemProps) {
   const [isWritingComment, setIsWritingComment] = useState(false);
   const [comment, setComment] = useState(cartLine.Comment || "");
-  const t = useTranslations("Cart.CartLine");
+
   const { mutate: updateCartLine, isPending: updatePending } =
     useUpdateCartLines();
   const { mutate: deleteCartLine, isPending: deletePending } =
     useDeleteCartLine();
-  const { formatCurrency } = useCurrencyFormatter();
-  const handleCartAmountChange = (cartLineChange: CartLine) => () => {
-    if (cartLineChange.Quantity === 0) {
-      deleteCartLine({
-        cartLine: [cartLineChange],
-        cartId,
-        version: cartVersion,
-      });
-    } else {
-      updateCartLine({
-        cartLine: [cartLineChange],
-        cartId,
-        version: cartVersion,
-      });
-    }
-  };
 
-  const renderTotalPrice = () => {
-    if (cartLine.DiscountLines?.length) {
-      return (
-        <Span fontWeight={600} color="primary.main">
-          <s data-testid={"discount-strikethru"}>
-            {formatCurrency(cartLine.NetPrice ?? 0)}
-          </s>
-        </Span>
-      );
-    }
+  const qty = cartLine.Quantity || 1;
+  const isLoading = updatePending || deletePending;
 
-    return (
-      <Span fontWeight={600} color="primary.main">
-        {formatCurrency(cartLine.NetPrice ?? 0)}
-      </Span>
-    );
+  const performUpdate = (updated: CartLine) => {
+    updateCartLine({ cartLine: [updated], cartId, version: cartVersion });
   };
 
-  const renderDiscountPrice = () => {
-    if (cartLine.DiscountLines?.length) {
-      return (
-        <Span fontWeight={600} color="primary.main">
-          {formatCurrency(cartLine.TotalAmount ?? 0)}
-        </Span>
-      );
-    }
+  const increase = () => performUpdate({ ...cartLine, Quantity: qty + 1 });
+  const decrease = () => {
+    if (qty === 1) return;
+    performUpdate({ ...cartLine, Quantity: qty - 1 });
   };
+  const remove = () =>
+    deleteCartLine({
+      cartLine: [{ ...cartLine, Quantity: 0 }],
+      cartId,
+      version: cartVersion,
+    });
+
+  const saveComment = () => {
+    performUpdate({ ...cartLine, Comment: comment });
+    setIsWritingComment(false);
+  };
+  const cancelComment = () => {
+    setComment(cartLine.Comment || "");
+    setIsWritingComment(false);
+  };
+
+  const value = useMemo<CartItemContextValue>(
+    () => ({
+      cartLine,
+      cartId,
+      cartVersion,
+      qty,
+      isLoading,
+      isWritingComment,
+      setIsWritingComment,
+      comment,
+      setComment,
+      increase,
+      decrease,
+      remove,
+      saveComment,
+      cancelComment,
+    }),
+    [cartLine, cartId, cartVersion, qty, isLoading, isWritingComment, comment],
+  );
 
-  const shouldDisplaySpinner = () => updatePending || deletePending;
-  const qty = cartLine.Quantity || 1;
   return (
-    <Wrapper>
-      <Box className="img-wrapper">
-        <Image
-          alt={cartLine.Product?.Name || ""}
-          width={150}
-          height={150}
-          src={cartLine.Product?.PrimaryImageUrl || ""}
-        />
-      </Box>
-
-      {/* DELETE BUTTON */}
-      <IconButton
-        size="small"
-        onClick={handleCartAmountChange({ ...cartLine, Quantity: 0 })}
-        sx={{ position: "absolute", right: 15, top: 15 }}
-        title={t("removeItem")}
-        aria-label={t("removeItem")}
-      >
-        <Close fontSize="small" />
-      </IconButton>
-
-      <FlexBox p={2} rowGap={2} width="100%" flexDirection="column">
-        {cartLine.Product && (
-          <Link href={getProductDetailUrl(cartLine.Product)}>
-            <Span ellipsis fontWeight="600" fontSize={18}>
-              {cartLine.Product?.Name}
+    <CartItemContext.Provider value={value}>
+      <Wrapper>{children}</Wrapper>
+    </CartItemContext.Provider>
+  );
+}
+
+// --------------------
+// Wrapper subcomponents
+// -------------------
+
+CartItemRoot.Body = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FlexBox p={2} rowGap={2} width="100%" flexDirection="column">
+      {children}
+    </FlexBox>
+  );
+};
+
+CartItemRoot.Row = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FlexBox width="100%" sx={{ flexDirection: { xs: "column", md: "row" } }}>
+      {children}
+    </FlexBox>
+  );
+};
+
+CartItemRoot.Left = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FlexBox rowGap={2} width="100%" flexDirection="column">
+      {children}
+    </FlexBox>
+  );
+};
+
+CartItemRoot.Right = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FlexBox width="100%" flexDirection="column" mt={1}>
+      {children}
+    </FlexBox>
+  );
+};
+
+// --------------------
+// Functional subcomponents
+// --------------------
+CartItemRoot.Image = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine } = ctx;
+  return (
+    <Box className="img-wrapper">
+      <Image
+        alt={cartLine.Product?.Name || ""}
+        width={150}
+        height={150}
+        src={cartLine.Product?.PrimaryImageUrl || ""}
+      />
+    </Box>
+  );
+};
+
+CartItemRoot.RemoveButton = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { remove } = ctx;
+  const t = useTranslations("Cart.CartLine");
+  return (
+    <IconButton
+      size="small"
+      onClick={remove}
+      sx={{ position: "absolute", right: 15, top: 15 }}
+      title={t("removeItem")}
+      aria-label={t("removeItem")}
+    >
+      <Close fontSize="small" />
+    </IconButton>
+  );
+};
+
+CartItemRoot.Title = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine } = ctx;
+  if (!cartLine.Product) return null;
+  return (
+    <Link href={getProductDetailUrl(cartLine.Product)}>
+      <Span ellipsis fontWeight="600" fontSize={18}>
+        {cartLine.Product.Name}
+      </Span>
+    </Link>
+  );
+};
+
+CartItemRoot.Dimensions = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine } = ctx;
+  const dims = cartLine.Product?.Dimensions || [];
+  if (!dims.length) return null;
+
+  return (
+    <Span ellipsis fontWeight="200" fontSize={14}>
+      {dims.map((d, i) => (
+        <span key={i}>
+          {`${ProductDimensionType[d.DimensionTypeValue]}: ${d?.DimensionValue?.Value}${
+            i + 1 !== dims.length ? " | " : ""
+          } `}
+        </span>
+      ))}
+    </Span>
+  );
+};
+
+CartItemRoot.Price = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { cartLine } = ctx;
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const hasDiscount = (cartLine.DiscountLines?.length ?? 0) > 0;
+  const qty = cartLine.Quantity ?? 1;
+
+  return (
+    <>
+      <FlexBox gap={1} flexWrap="wrap" alignItems="center">
+        <Span color="grey.600">
+          {formatCurrency(cartLine.Price ?? 0)} x {qty}{" "}
+          <Tiny>{cartLine.UnitOfMeasureSymbol}</Tiny>
+        </Span>
+
+        {hasDiscount ? (
+          <>
+            <Span fontWeight={600} color="primary.main">
+              <s data-testid="discount-strikethru">
+                {formatCurrency(cartLine.NetPrice ?? 0)}
+              </s>
+            </Span>
+            <Span fontWeight={600} color="primary.main">
+              {formatCurrency(cartLine.TotalAmount ?? 0)}
             </Span>
-          </Link>
+          </>
+        ) : (
+          <Span fontWeight={600} color="primary.main">
+            {formatCurrency(cartLine.NetPrice ?? 0)}
+          </Span>
         )}
-        <FlexBox
-          width="100%"
-          sx={{ flexDirection: { xs: "column", md: "row" } }}
-        >
-          <FlexBox rowGap={2} width="100%" flexDirection="column">
-            <Span ellipsis fontWeight="200" fontSize={14}>
-              {cartLine?.Product?.Dimensions?.map((d, i) => (
-                <span
-                  key={i}
-                >{`${ProductDimensionType[d.DimensionTypeValue]}: ${
-                  d?.DimensionValue?.Value
-                } ${
-                  i + 1 !== cartLine?.Product?.Dimensions?.length ? "|" : ""
-                } `}</span>
-              ))}
+      </FlexBox>
+
+      {!!cartLine.DiscountLines?.length && (
+        <FlexBox gap={1} flexWrap="wrap" alignItems="center">
+          {cartLine.DiscountLines?.map((d, i) => (
+            <Span key={i} color="error.main">
+              {d.DiscountCode} - {d.OfferName}
             </Span>
-            {/* PRODUCT PRICE SECTION */}
-            <FlexBox gap={1} flexWrap="wrap" alignItems="center">
-              <Span color="grey.600">
-                {formatCurrency(cartLine.Price ?? 0)} x {cartLine.Quantity}
-                <Tiny>{cartLine.UnitOfMeasureSymbol}</Tiny>
-              </Span>
-              {renderTotalPrice()}
-              {renderDiscountPrice()}
-            </FlexBox>
-
-            <FlexBox gap={1} flexWrap="wrap" alignItems="center">
-              {cartLine.DiscountLines?.map((discount, index) => (
-                <Span key={index} color="error.main">
-                  {discount.DiscountCode} - {discount.OfferName}
-                </Span>
-              ))}
-            </FlexBox>
-
-            {/* PRODUCT QUANTITY INC/DEC BUTTONS */}
-            {!shouldDisplaySpinner() ? (
-              <FlexBox alignItems="center">
-                <Button
-                  color="primary"
-                  sx={{ p: "5px" }}
-                  variant="outlined"
-                  disabled={qty === 1}
-                  onClick={handleCartAmountChange({
-                    ...cartLine,
-                    Quantity: qty - 1,
-                  })}
-                  title={t("decreaseQuantity")}
-                  aria-label={t("decreaseQuantity")}
-                >
-                  <Remove fontSize="small" />
-                </Button>
-
-                <Span mx={1} fontWeight={600} fontSize={15}>
-                  {qty}
-                </Span>
-
-                <Button
-                  color="primary"
-                  sx={{ p: "5px" }}
-                  variant="outlined"
-                  onClick={handleCartAmountChange({
-                    ...cartLine,
-                    Quantity: qty + 1,
-                  })}
-                  title={t("increaseQuantity")}
-                  aria-label={t("increaseQuantity")}
-                >
-                  <Add fontSize="small" />
-                </Button>
-              </FlexBox>
-            ) : (
-              <CircularProgress size={30} />
-            )}
-          </FlexBox>
-          {/* CART LINE COMMENTS */}
-          {showCartLineComments && (
-            <FlexBox width="100%" flexDirection="column" mt={1}>
-              {isWritingComment ? (
-                <>
-                  <TextField
-                    label={t("addComment")}
-                    variant="outlined"
-                    multiline
-                    minRows={2}
-                    maxRows={2}
-                    fullWidth
-                    value={comment}
-                    onChange={(e) => setComment(e.target.value)}
-                    sx={{ marginBottom: 1 }}
-                  />
-                  <FlexBox
-                    flexDirection="row"
-                    sx={{ marginTop: "auto", marginLeft: "auto" }}
-                  >
-                    <Button
-                      color="primary"
-                      variant="outlined"
-                      sx={{
-                        width: "100px",
-                      }}
-                      onClick={() => {
-                        setIsWritingComment(false);
-                        setComment(cartLine.Comment || "");
-                      }}
-                    >
-                      {t("cancelComment")}
-                    </Button>
-                    <Button
-                      color="primary"
-                      variant="contained"
-                      sx={{
-                        width: "150px",
-                        marginLeft: 1,
-                      }}
-                      onClick={() => {
-                        handleCartAmountChange({
-                          ...cartLine,
-                          Comment: comment,
-                        })();
-                        setIsWritingComment(false);
-                      }}
-                    >
-                      {t("saveComment")}
-                    </Button>
-                  </FlexBox>
-                </>
-              ) : shouldDisplaySpinner() ? (
-                <CircularProgress
-                  size={30}
-                  sx={{ marginTop: "auto", marginLeft: "auto" }}
-                />
-              ) : (
-                <>
-                  <Typography
-                    sx={{
-                      marginBottom: 1,
-                      marginTop: "auto",
-                      // marginLeft: "auto",
-                      maxWidth: {
-                        xs: "250px",
-                        lg: "350px",
-                      },
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                    }}
-                    title={cartLine.Comment || ""}
-                  >
-                    {cartLine.Comment ? (
-                      <>
-                        <H6 sx={{ display: "inline" }}>
-                          {t("commentLabel")}:{" "}
-                        </H6>
-                        {cartLine.Comment}
-                      </>
-                    ) : null}
-                  </Typography>
-                  <Button
-                    color="primary"
-                    variant="outlined"
-                    sx={{
-                      width: "150px",
-                      marginTop: "auto",
-                      marginLeft: "auto",
-                    }}
-                    onClick={() => setIsWritingComment(true)}
-                  >
-                    {t("addComment")}
-                  </Button>
-                </>
-              )}
-            </FlexBox>
-          )}
+          ))}
         </FlexBox>
-      </FlexBox>
-    </Wrapper>
+      )}
+    </>
   );
-}
+};
+
+CartItemRoot.Quantity = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const { qty, increase, decrease, isLoading } = ctx;
+  const t = useTranslations("Cart.CartLine");
+
+  if (isLoading) return <CircularProgress size={30} />;
+
+  return (
+    <FlexBox alignItems="center">
+      <Button
+        color="primary"
+        sx={{ p: "5px" }}
+        variant="outlined"
+        disabled={qty === 1}
+        onClick={decrease}
+        title={t("decreaseQuantity")}
+        aria-label={t("decreaseQuantity")}
+      >
+        <Remove fontSize="small" />
+      </Button>
+
+      <Span mx={1} fontWeight={600} fontSize={15}>
+        {qty}
+      </Span>
+
+      <Button
+        color="primary"
+        sx={{ p: "5px" }}
+        variant="outlined"
+        onClick={increase}
+        title={t("increaseQuantity")}
+        aria-label={t("increaseQuantity")}
+      >
+        <Add fontSize="small" />
+      </Button>
+    </FlexBox>
+  );
+};
+
+CartItemRoot.Comment = () => {
+  const ctx = useContext(CartItemContext);
+  if (!ctx) return null;
+  const {
+    isWritingComment,
+    setIsWritingComment,
+    comment,
+    setComment,
+    saveComment,
+    cancelComment,
+    isLoading,
+    cartLine,
+  } = ctx;
+  const t = useTranslations("Cart.CartLine");
+
+  return (
+    <CartItemRoot.Right>
+      {isWritingComment ? (
+        <>
+          <TextField
+            label={t("addComment")}
+            variant="outlined"
+            multiline
+            minRows={2}
+            maxRows={2}
+            fullWidth
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            sx={{ marginBottom: 1 }}
+          />
+          <FlexBox
+            flexDirection="row"
+            sx={{ marginTop: "auto", marginLeft: "auto" }}
+          >
+            <Button
+              color="primary"
+              variant="outlined"
+              sx={{ width: 100 }}
+              onClick={cancelComment}
+            >
+              {t("cancelComment")}
+            </Button>
+            <Button
+              color="primary"
+              variant="contained"
+              sx={{ width: 150, ml: 1 }}
+              onClick={saveComment}
+            >
+              {t("saveComment")}
+            </Button>
+          </FlexBox>
+        </>
+      ) : isLoading ? (
+        <CircularProgress
+          size={30}
+          sx={{ marginTop: "auto", marginLeft: "auto" }}
+        />
+      ) : (
+        <>
+          <Typography
+            component="div"
+            sx={{
+              mb: 1,
+              mt: "auto",
+              maxWidth: { xs: "250px", lg: "350px" },
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+            title={cartLine.Comment || ""}
+          >
+            {cartLine.Comment ? (
+              <>
+                <H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+                {cartLine.Comment}
+              </>
+            ) : null}
+          </Typography>
+          <Button
+            color="primary"
+            variant="outlined"
+            sx={{ width: 150, mt: "auto", ml: "auto" }}
+            onClick={() => setIsWritingComment(true)}
+          >
+            {t("addComment")}
+          </Button>
+        </>
+      )}
+    </CartItemRoot.Right>
+  );
+};
+
+const CartItem = Object.assign(CartItemRoot, {
+  // wrappers
+  Body: CartItemRoot.Body,
+  Row: CartItemRoot.Row,
+  Left: CartItemRoot.Left,
+  Right: CartItemRoot.Right,
+  // functional parts
+  Image: CartItemRoot.Image,
+  RemoveButton: CartItemRoot.RemoveButton,
+  Title: CartItemRoot.Title,
+  Dimensions: CartItemRoot.Dimensions,
+  Price: CartItemRoot.Price,
+  Quantity: CartItemRoot.Quantity,
+  Comment: CartItemRoot.Comment,
+});
+
+export default CartItem;