@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -3,12 +3,12 @@
 import React, { createContext, useContext, useMemo, useState } from "react";
 import Link from "next/link";
 import {
-  Button,
-  IconButton,
-  Box,
-  CircularProgress,
-  Typography,
-  TextField,
+	Button,
+	IconButton,
+	Box,
+	CircularProgress,
+	Typography,
+	TextField,
 } from "@mui/material";
 import { useTranslations } from "next-intl";
 // MUI Icons
@@ -17,9 +17,9 @@ import Close from "@mui/icons-material/Close";
 import Remove from "@mui/icons-material/Remove";
 // Local components
 import {
-  H6,
-  Span,
-  Tiny,
+	H6,
+	Span,
+	Tiny,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import Image from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
@@ -34,24 +34,24 @@ import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-f
 import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
 
 type CartItemContextValue = {
-  cartLine: CartLine;
-  cartId: string;
-  cartVersion: number;
-  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;
+	cartLine: CartLine;
+	cartId: string;
+	cartVersion: number;
+	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;
 };
 
 const CartItemContext = createContext<CartItemContextValue | null>(null);
@@ -60,79 +60,79 @@ const CartItemContext = createContext<CartItemContextValue | null>(null);
 // Root
 // --------------------
 type CartItemProps = {
-  cartLine: CartLine;
-  cartId: string;
-  cartVersion: number;
-  children: React.ReactNode;
+	cartLine: CartLine;
+	cartId: string;
+	cartVersion: number;
+	children: React.ReactNode;
 };
 
 function CartItemRoot({
-  cartLine,
-  cartId,
-  cartVersion,
-  children,
+	cartLine,
+	cartId,
+	cartVersion,
+	children,
 }: CartItemProps) {
-  const [isWritingComment, setIsWritingComment] = useState(false);
-  const [comment, setComment] = useState(cartLine.Comment || "");
-
-  const { mutate: updateCartLine, isPending: updatePending } =
-    useUpdateCartLines();
-  const { mutate: deleteCartLine, isPending: deletePending } =
-    useDeleteCartLine();
-
-  const qty = cartLine.Quantity || 1;
-  const isLoading = updatePending || deletePending;
-
-  const performUpdate = (updated: CartLine) => {
-    updateCartLine({ cartLine: [updated], cartId, version: cartVersion });
-  };
-
-  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],
-  );
-
-  return (
-    <CartItemContext.Provider value={value}>
-      <Wrapper>{children}</Wrapper>
-    </CartItemContext.Provider>
-  );
+	const [isWritingComment, setIsWritingComment] = useState(false);
+	const [comment, setComment] = useState(cartLine.Comment || "");
+
+	const { mutate: updateCartLine, isPending: updatePending } =
+		useUpdateCartLines();
+	const { mutate: deleteCartLine, isPending: deletePending } =
+		useDeleteCartLine();
+
+	const qty = cartLine.Quantity || 1;
+	const isLoading = updatePending || deletePending;
+
+	const performUpdate = (updated: CartLine) => {
+		updateCartLine({ cartLine: [updated], cartId, version: cartVersion });
+	};
+
+	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],
+	);
+
+	return (
+		<CartItemContext.Provider value={value}>
+			<Wrapper>{children}</Wrapper>
+		</CartItemContext.Provider>
+	);
 }
 
 // --------------------
@@ -140,302 +140,302 @@ function CartItemRoot({
 // -------------------
 
 CartItemRoot.Body = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <FlexBox p={2} rowGap={2} width="100%" flexDirection="column">
-      {children}
-    </FlexBox>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-          </>
-        ) : (
-          <Span fontWeight={600} color="primary.main">
-            {formatCurrency(cartLine.NetPrice ?? 0)}
-          </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>
-          ))}
-        </FlexBox>
-      )}
-    </>
-  );
+	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>
+					</>
+				) : (
+					<Span fontWeight={600} color="primary.main">
+						{formatCurrency(cartLine.NetPrice ?? 0)}
+					</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>
+					))}
+				</FlexBox>
+			)}
+		</>
+	);
 };
 
 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>
-  );
+	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 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,
+	// 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;