@evenicanpm/storefront-core 2.4.1 → 2.5.0

package/src/pages/account/wishlist/create-new-list.tsx

@@ -18,7 +18,13 @@ import { withZodSchema } from "formik-validator-zod";
 import isFunction from "lodash/isFunction";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, type ReactNode, useContext, useEffect } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useEffect,
+	useMemo,
+} from "react";
 import { z } from "zod";
 
 interface CreateNewListContextValue {
@@ -74,9 +80,13 @@ const CreateNewList = ({
 	const handleClose = () => {
 		if (isFunction(onClose)) onClose();
 	};
+	const contextValue = useMemo(
+		() => ({ formik, handleClose, t }),
+		[formik, handleClose, t],
+	);
 
 	return (
-		<CreateNewListContext.Provider value={{ formik, handleClose, t }}>
+		<CreateNewListContext.Provider value={contextValue}>
 			<Dialog
 				open={open}
 				onClose={handleClose}
@@ -88,14 +98,16 @@ const CreateNewList = ({
 	);
 };
 
-CreateNewList.Title = () => {
+const CreateNewListTitle = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { t } = ctx;
 	return <H5 mb={4}>{t("formTitle")}</H5>;
 };
 
-CreateNewList.Form = ({ children }: { children: React.ReactNode }) => {
+CreateNewList.Title = CreateNewListTitle;
+
+const CreateNewListForm = ({ children }: { children: React.ReactNode }) => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { formik } = ctx;
@@ -108,7 +120,9 @@ CreateNewList.Form = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-CreateNewList.NameField = () => {
+CreateNewList.Form = CreateNewListForm;
+
+const CreateNewListNameField = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { formik, t } = ctx;
@@ -129,7 +143,9 @@ CreateNewList.NameField = () => {
 	);
 };
 
-CreateNewList.CommentField = () => {
+CreateNewList.NameField = CreateNewListNameField;
+
+const CreateNewListCommentField = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { formik, t } = ctx;
@@ -149,7 +165,9 @@ CreateNewList.CommentField = () => {
 	);
 };
 
-CreateNewList.PrivacyField = () => {
+CreateNewList.CommentField = CreateNewListCommentField;
+
+const CreateNewListPrivacyField = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { formik, t } = ctx;
@@ -170,6 +188,8 @@ CreateNewList.PrivacyField = () => {
 	);
 };
 
+CreateNewList.PrivacyField = CreateNewListPrivacyField;
+
 CreateNewList.Actions = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<Grid
@@ -186,7 +206,7 @@ CreateNewList.Actions = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-CreateNewList.Save = () => {
+const CreateNewListSave = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { t } = ctx;
@@ -203,7 +223,9 @@ CreateNewList.Save = () => {
 	);
 };
 
-CreateNewList.Cancel = () => {
+CreateNewList.Save = CreateNewListSave;
+
+const CreateNewListCancel = () => {
 	const ctx = useContext(CreateNewListContext);
 	if (!ctx) return null;
 	const { handleClose, t } = ctx;
@@ -220,4 +242,6 @@ CreateNewList.Cancel = () => {
 	);
 };
 
+CreateNewList.Cancel = CreateNewListCancel;
+
 export default CreateNewList;

package/src/pages/account/wishlist/wishlist-item.tsx

@@ -14,7 +14,7 @@ import { Box, IconButton } from "@mui/material";
 import type { SxProps } from "@mui/material/styles";
 import { format } from "date-fns";
 import { useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 import { MdDelete as Delete } from "react-icons/md";
 import { useCreateAccountRoutes } from "../account-routes";
 
@@ -54,9 +54,13 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 			console.log(error);
 		}
 	};
+	const contextValue = useMemo(
+		() => ({ wishlist, handleDelete }),
+		[wishlist, handleDelete],
+	);
 
 	return (
-		<WishlistItemContext.Provider value={{ wishlist, handleDelete }}>
+		<WishlistItemContext.Provider value={contextValue}>
 			<TableRow
 				sx={{
 					display: "grid",
@@ -73,7 +77,7 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 	);
 };
 
-WishlistItem.Name = () => {
+const WishlistItemName = () => {
 	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
@@ -88,7 +92,9 @@ WishlistItem.Name = () => {
 	);
 };
 
-WishlistItem.Date = () => {
+WishlistItem.Name = WishlistItemName;
+
+const WishlistItemDate = () => {
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
 	const { wishlist } = ctx;
@@ -102,7 +108,9 @@ WishlistItem.Date = () => {
 	);
 };
 
-WishlistItem.ProductCount = () => {
+WishlistItem.Date = WishlistItemDate;
+
+const WishlistItemProductCount = () => {
 	const ctx = useContext(WishlistItemContext);
 	const t = useTranslations("Account.Wishlists");
 	if (!ctx) return null;
@@ -114,6 +122,8 @@ WishlistItem.ProductCount = () => {
 	);
 };
 
+WishlistItem.ProductCount = WishlistItemProductCount;
+
 WishlistItem.Actions = ({ children }: { children?: ReactNode }) => {
 	return (
 		<Box display="flex" alignItems="center" gap={1} justifySelf="end">
@@ -122,7 +132,7 @@ WishlistItem.Actions = ({ children }: { children?: ReactNode }) => {
 	);
 };
 
-WishlistItem.Delete = () => {
+const WishlistItemDelete = () => {
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
 	const { wishlist, handleDelete } = ctx;
@@ -133,4 +143,6 @@ WishlistItem.Delete = () => {
 	);
 };
 
+WishlistItem.Delete = WishlistItemDelete;
+
 export default WishlistItem;

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

@@ -203,7 +203,7 @@ CartItemRoot.Right = ({ children }: { children: React.ReactNode }) => {
 // --------------------
 // Functional subcomponents
 // --------------------
-CartItemRoot.Image = () => {
+const CartItemRootImage = () => {
 	const ctx = useContext(CartItemContext);
 	if (!ctx) return null;
 	const { cartLine } = ctx;
@@ -219,7 +219,9 @@ CartItemRoot.Image = () => {
 	);
 };
 
-CartItemRoot.RemoveButton = () => {
+CartItemRoot.Image = CartItemRootImage;
+
+const CartItemRootRemoveButton = () => {
 	const ctx = useContext(CartItemContext);
 	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
@@ -237,7 +239,9 @@ CartItemRoot.RemoveButton = () => {
 	);
 };
 
-CartItemRoot.Title = () => {
+CartItemRoot.RemoveButton = CartItemRootRemoveButton;
+
+const CartItemRootTitle = () => {
 	const ctx = useContext(CartItemContext);
 	if (!ctx) return null;
 	const { cartLine } = ctx;
@@ -251,7 +255,9 @@ CartItemRoot.Title = () => {
 	);
 };
 
-CartItemRoot.Dimensions = () => {
+CartItemRoot.Title = CartItemRootTitle;
+
+const CartItemRootDimensions = () => {
 	const ctx = useContext(CartItemContext);
 	if (!ctx) return null;
 	const { cartLine } = ctx;
@@ -271,7 +277,9 @@ CartItemRoot.Dimensions = () => {
 	);
 };
 
-CartItemRoot.Price = () => {
+CartItemRoot.Dimensions = CartItemRootDimensions;
+
+const CartItemRootPrice = () => {
 	const ctx = useContext(CartItemContext);
 	const { formatCurrency } = useCurrencyFormatter();
 
@@ -321,7 +329,9 @@ CartItemRoot.Price = () => {
 	);
 };
 
-CartItemRoot.Quantity = () => {
+CartItemRoot.Price = CartItemRootPrice;
+
+const CartItemRootQuantity = () => {
 	const ctx = useContext(CartItemContext);
 	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
@@ -361,7 +371,9 @@ CartItemRoot.Quantity = () => {
 	);
 };
 
-CartItemRoot.Comment = () => {
+CartItemRoot.Quantity = CartItemRootQuantity;
+
+const CartItemRootComment = () => {
 	const ctx = useContext(CartItemContext);
 	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
@@ -454,6 +466,8 @@ CartItemRoot.Comment = () => {
 	return <CartItemRoot.Right>{content}</CartItemRoot.Right>;
 };
 
+CartItemRoot.Comment = CartItemRootComment;
+
 const CartItem = Object.assign(CartItemRoot, {
 	// wrappers
 	Body: CartItemRoot.Body,

package/src/pages/cart/checkout-form.tsx

@@ -20,7 +20,14 @@ import { debounce } from "lodash";
 import Link from "next/link";
 import { useFormatter, useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 
 interface CheckoutFormContextValue {
 	cartId: string;
@@ -76,29 +83,45 @@ const CheckoutForm = ({
 		}
 	}, [commentFromData]);
 
+	const contextValue = useMemo(
+		() => ({
+			cartId,
+			cartLineIds,
+			cartTotal,
+			countries,
+			appliedCoupons,
+			commentFromData,
+			checkoutDisabled,
+			selectedCountry,
+			setSelectedCountry,
+			states,
+			updateCartComment,
+			textRef,
+		}),
+		[
+			cartId,
+			cartLineIds,
+			cartTotal,
+			countries,
+			appliedCoupons,
+			commentFromData,
+			checkoutDisabled,
+			selectedCountry,
+			setSelectedCountry,
+			states,
+			updateCartComment,
+			textRef,
+		],
+	);
+
 	return (
-		<CheckoutFormContext.Provider
-			value={{
-				cartId,
-				cartLineIds,
-				cartTotal,
-				countries,
-				appliedCoupons,
-				commentFromData,
-				checkoutDisabled,
-				selectedCountry,
-				setSelectedCountry,
-				states,
-				updateCartComment,
-				textRef,
-			}}
-		>
+		<CheckoutFormContext.Provider value={contextValue}>
 			<Card sx={{ padding: 3 }}>{children}</Card>
 		</CheckoutFormContext.Provider>
 	);
 };
 
-CheckoutForm.Total = () => {
+const CheckoutFormTotal = () => {
 	const ctx = useContext(CheckoutFormContext);
 	const { number } = useFormatter();
 	const t = useTranslations("Cart.Sidebar");
@@ -118,7 +141,9 @@ CheckoutForm.Total = () => {
 	);
 };
 
-CheckoutForm.Notes = () => {
+CheckoutForm.Total = CheckoutFormTotal;
+
+const CheckoutFormNotes = () => {
 	const ctx = useContext(CheckoutFormContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -148,7 +173,9 @@ CheckoutForm.Notes = () => {
 	);
 };
 
-CheckoutForm.Coupons = () => {
+CheckoutForm.Notes = CheckoutFormNotes;
+
+const CheckoutFormCoupons = () => {
 	const ctx = useContext(CheckoutFormContext);
 	if (!ctx) return null;
 	const { appliedCoupons, cartId } = ctx;
@@ -165,7 +192,9 @@ CheckoutForm.Coupons = () => {
 	);
 };
 
-CheckoutForm.EstimateShipping = () => {
+CheckoutForm.Coupons = CheckoutFormCoupons;
+
+const CheckoutFormEstimateShipping = () => {
 	const ctx = useContext(CheckoutFormContext);
 	if (!ctx) return null;
 	const { countries, states, setSelectedCountry, cartId, cartLineIds } = ctx;
@@ -190,7 +219,9 @@ CheckoutForm.EstimateShipping = () => {
 	);
 };
 
-CheckoutForm.CheckoutButton = () => {
+CheckoutForm.EstimateShipping = CheckoutFormEstimateShipping;
+
+const CheckoutFormCheckoutButton = () => {
 	const ctx = useContext(CheckoutFormContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -210,4 +241,6 @@ CheckoutForm.CheckoutButton = () => {
 	);
 };
 
+CheckoutForm.CheckoutButton = CheckoutFormCheckoutButton;
+
 export default CheckoutForm;

package/src/pages/cart/coupon-entry.tsx

@@ -9,6 +9,7 @@ import Close from "@mui/icons-material/Close";
 import {
 	Box,
 	Button,
+	CircularProgress,
 	IconButton,
 	List,
 	ListItem,
@@ -17,15 +18,19 @@ import {
 } from "@mui/material";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 interface CouponContextValue {
 	textValue: string;
 	setTextValue: (v: string) => void;
+	couponMessage: string;
+	couponMessageSeverity: "success" | "error";
 	appliedCoupons: Coupon[];
 	handleApplyCoupon: () => void;
 	handleRemoveCoupon: (coupon: string) => void;
+	isApplyingCoupon: boolean;
 	cartId: string;
+	setCouponMessage: (msg: string) => void;
 }
 
 const CouponContext = createContext<CouponContextValue | null>(null);
@@ -40,60 +45,139 @@ const CouponEntry = ({
 	cartId,
 	children,
 }: CouponEntryProps) => {
+	const t = useTranslations("Cart.Coupons");
 	const [textValue, setTextValue] = useState("");
-	const { mutate: updateCoupon } = useAddDiscountCode();
+	const [couponMessage, setCouponMessage] = useState("");
+	const [couponMessageSeverity, setCouponMessageSeverity] = useState<
+		"success" | "error"
+	>("error");
+	const { mutate: updateCoupon, isPending: isApplyingCoupon } =
+		useAddDiscountCode();
 	const { mutate: removeCoupon } = useRemoveDiscountcode();
 
 	const handleApplyCoupon = () => {
-		if (!textValue) return;
-		updateCoupon({ discountCode: textValue, cartId });
-		setTextValue("");
+		const enteredCode = textValue.trim();
+		if (!enteredCode) return;
+		setCouponMessage("");
+		updateCoupon(
+			{ discountCode: enteredCode, cartId },
+			{
+				onSuccess: (result) => {
+					// Treat as success only when the entered code is present in returned coupons.
+					const hasAppliedCoupon = (result?.Coupons ?? []).some(
+						(coupon) =>
+							(coupon?.Code ?? "").toLowerCase() === enteredCode.toLowerCase(),
+					);
+
+					if (!hasAppliedCoupon) {
+						setCouponMessageSeverity("error");
+						setCouponMessage(t("invalidCoupon"));
+						return;
+					}
+
+					setCouponMessageSeverity("success");
+					setCouponMessage(t("couponAppliedSuccessfully"));
+					setTextValue("");
+				},
+				onError: () => {
+					setCouponMessageSeverity("error");
+					setCouponMessage(t("failedToApplyCoupon"));
+				},
+			},
+		);
 	};
 
 	const handleRemoveCoupon = (coupon: string) => {
 		removeCoupon({ discountCode: coupon, cartId });
 	};
+	const contextValue = useMemo(
+		() => ({
+			textValue,
+			setTextValue,
+			couponMessage,
+			couponMessageSeverity,
+			appliedCoupons,
+			handleApplyCoupon,
+			handleRemoveCoupon,
+			isApplyingCoupon,
+			cartId,
+			setCouponMessage,
+		}),
+		[
+			textValue,
+			setTextValue,
+			couponMessage,
+			couponMessageSeverity,
+			appliedCoupons,
+			handleApplyCoupon,
+			handleRemoveCoupon,
+			isApplyingCoupon,
+			cartId,
+			setCouponMessage,
+		],
+	);
 
 	return (
-		<CouponContext.Provider
-			value={{
-				textValue,
-				setTextValue,
-				appliedCoupons,
-				handleApplyCoupon,
-				handleRemoveCoupon,
-				cartId,
-			}}
-		>
+		<CouponContext.Provider value={contextValue}>
 			<Box>{children}</Box>
 		</CouponContext.Provider>
 	);
 };
 
-CouponEntry.Input = () => {
+const CouponEntryInput = () => {
 	const ctx = useContext(CouponContext);
 	const t = useTranslations("Cart.Coupons");
+
+	// Auto-hide message after 3.5 seconds
+	useEffect(() => {
+		if (!ctx?.couponMessage) return;
+
+		const timer = setTimeout(() => {
+			ctx.setCouponMessage("");
+		}, 3500);
+
+		return () => clearTimeout(timer);
+	}, [ctx?.couponMessage, ctx?.setCouponMessage]);
+
 	if (!ctx) return null;
-	const { textValue, setTextValue } = ctx;
+	const { textValue, setTextValue, couponMessage, couponMessageSeverity } = ctx;
 
 	return (
-		<TextField
-			fullWidth
-			size="small"
-			label={t("coupon")}
-			variant="outlined"
-			placeholder={t("coupon")}
-			value={textValue}
-			onChange={(e) => setTextValue(e.target.value)}
-		/>
+		<>
+			<TextField
+				fullWidth
+				size="small"
+				label={t("coupon")}
+				variant="outlined"
+				placeholder={t("coupon")}
+				value={textValue}
+				onChange={(e) => setTextValue(e.target.value)}
+			/>
+			{couponMessage ? (
+				<Box
+					sx={{
+						mt: 1,
+						fontSize: 14,
+						color:
+							couponMessageSeverity === "success"
+								? "success.main"
+								: "error.main",
+					}}
+				>
+					{couponMessage}
+				</Box>
+			) : null}
+		</>
 	);
 };
 
-CouponEntry.ApplyButton = () => {
+CouponEntry.Input = CouponEntryInput;
+
+const CouponEntryApplyButton = () => {
 	const ctx = useContext(CouponContext);
 	const t = useTranslations("Cart.Coupons");
 	if (!ctx) return null;
-	const { handleApplyCoupon } = ctx;
+	const { handleApplyCoupon, isApplyingCoupon, textValue } = ctx;
 
 	return (
 		<Button
@@ -101,14 +185,20 @@ CouponEntry.ApplyButton = () => {
 			color="primary"
 			fullWidth
 			sx={{ mt: 2, mb: 4 }}
+			disabled={isApplyingCoupon || !textValue.trim()}
 			onClick={handleApplyCoupon}
+			startIcon={
+				isApplyingCoupon ? <CircularProgress size={16} color="inherit" /> : null
+			}
 		>
 			{t("applyCouponButton")}
 		</Button>
 	);
 };
 
-CouponEntry.AppliedList = () => {
+CouponEntry.ApplyButton = CouponEntryApplyButton;
+
+const CouponEntryAppliedList = () => {
 	const ctx = useContext(CouponContext);
 	const t = useTranslations("Cart.Coupons");
 	if (!ctx) return null;
@@ -117,20 +207,22 @@ CouponEntry.AppliedList = () => {
 	if (!appliedCoupons.length) return null;
 
 	return (
-		<>
+		<Box>
 			<FlexBox alignItems="center" columnGap={1} mb={2}>
 				<Span fontWeight="600">{t("appliedCoupons")}</Span>
 			</FlexBox>
-			<List>
+			<List sx={{ p: 0, display: "flex", flexDirection: "column", gap: 1 }}>
 				{appliedCoupons.map((coupon) => (
 					<CouponEntry.AppliedItem key={coupon.Code} coupon={coupon} />
 				))}
 			</List>
-		</>
+		</Box>
 	);
 };
 
-CouponEntry.AppliedItem = ({ coupon }: { coupon: Coupon }) => {
+CouponEntry.AppliedList = CouponEntryAppliedList;
+
+const CouponEntryAppliedItem = ({ coupon }: { coupon: Coupon }) => {
 	const ctx = useContext(CouponContext);
 	if (!ctx) return null;
 	const { handleRemoveCoupon } = ctx;
@@ -139,17 +231,32 @@ CouponEntry.AppliedItem = ({ coupon }: { coupon: Coupon }) => {
 			secondaryAction={
 				<IconButton
 					edge="end"
-					aria-label="delete"
+					size="small"
 					onClick={() => handleRemoveCoupon(coupon.Code ?? "")}
 					title="Remove Coupon"
+					sx={{ ml: 1 }}
 				>
-					<Close />
+					<Close fontSize="small" />
 				</IconButton>
 			}
+			sx={{
+				width: "100%",
+				px: 1.5,
+				py: 1,
+				border: "1px solid",
+				borderColor: "primary.main",
+				borderRadius: 2,
+				backgroundColor: "background.paper",
+				"&:hover": {
+					backgroundColor: "action.hover",
+				},
+			}}
 		>
-			<ListItemText primary={coupon.Code} />
+			<ListItemText primary={coupon.Code} sx={{ my: 0, fontSize: 14 }} />
 		</ListItem>
 	);
 };
 
+CouponEntry.AppliedItem = CouponEntryAppliedItem;
+
 export default CouponEntry;