@evenicanpm/storefront-core 1.3.0 → 1.4.0

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

@@ -11,7 +11,6 @@ import {
 import Card from "@mui/material/Card";
 import type { Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import _ from "lodash";
 import { useTranslations } from "next-intl";
 import { createContext, type PropsWithChildren, useContext } from "react";
 
@@ -62,9 +61,9 @@ interface ItemProps {
 
 UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
 	const ctx = useContext(UserInfoContext);
+	const t = useTranslations("Account.Profile");
 	if (!ctx) return null;
 	const { user } = ctx;
-	const t = useTranslations("Account.Profile");
 
 	let displayValue = value;
 

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

@@ -61,6 +61,7 @@ const CreateNewList = ({
 				setNotification({ message: t("wishlistSuccess"), severity: "success" });
 			} catch (error) {
 				setNotification({ message: t("wishlistFailed"), severity: "error" });
+				console.log(error);
 			}
 		},
 		validate: withZodSchema(FormSchema),

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

@@ -50,6 +50,7 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 				message: t("deleteWishlistFailed"),
 				severity: "error",
 			});
+			console.log(error);
 		}
 	};
 
@@ -101,9 +102,9 @@ WishlistItem.Date = () => {
 
 WishlistItem.ProductCount = () => {
 	const ctx = useContext(WishlistItemContext);
+	const t = useTranslations("Account.Wishlists");
 	if (!ctx) return null;
 	const { wishlist } = ctx;
-	const t = useTranslations("Account.Wishlists");
 	return (
 		<Paragraph ellipsis>
 			{`${wishlist?.ProductListLines?.length ?? 0} ${t("products")}`}

package/src/pages-v2/blog/blog-card.tsx

@@ -28,7 +28,7 @@ export default function BlogCard({
 	description,
 	createdAt,
 	id,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Box overflow="hidden">
 			<ZoomLazyImage width={588} height={272} alt="blog-image" src={imageUrl} />

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

@@ -69,7 +69,6 @@ describe.skip("cart-item", () => {
 				/>
 			</Wrapper>,
 		);
-		// expect(screen.getByText('Buy 2 or more')).toBeInTheDocument();
 		expect(screen.getByTestId("discount-strikethru")).toHaveTextContent(
 			"195.00",
 		);

package/src/pages-v2/cart/__tests__/checkout-form.test.tsx

@@ -8,7 +8,6 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import _ from "lodash";
 import { NextIntlClientProvider } from "next-intl";
 import type React from "react";
-//import fr from "../../../../../../messages/fr.json";
 import { vi } from "vitest";
 
 vi.mock("next-auth/react", () => ({
@@ -28,13 +27,6 @@ const Wrapper = ({ children }: React.PropsWithChildren) => (
 	</NextIntlClientProvider>
 );
 
-// Commenting out until used
-/* const Wrapper2 = ({ children }: React.PropsWithChildren) => (
-  <NextIntlClientProvider locale={"fr"} messages={fr}>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  </NextIntlClientProvider>
-); */
-
 describe.skip("Checkout Form", () => {
 	it("Has Total amount displayed", () => {
 		render(

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

@@ -72,7 +72,7 @@ function CartItemRoot({
 	cartId,
 	cartVersion,
 	children,
-}: CartItemProps) {
+}: Readonly<CartItemProps>) {
 	const [isWritingComment, setIsWritingComment] = useState(false);
 	const [comment, setComment] = useState(cartLine.Comment || "");
 
@@ -193,9 +193,9 @@ CartItemRoot.Image = () => {
 
 CartItemRoot.RemoveButton = () => {
 	const ctx = useContext(CartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { remove } = ctx;
-	const t = useTranslations("Cart.CartLine");
 	return (
 		<IconButton
 			size="small"
@@ -233,9 +233,9 @@ CartItemRoot.Dimensions = () => {
 	return (
 		<Span ellipsis fontWeight="200" fontSize={14}>
 			{dims.map((d, i) => (
-				<span key={i}>
+				<span key={`dim-${i + 1}`}>
 					{`${ProductDimensionType[d.DimensionTypeValue]}: ${d?.DimensionValue?.Value}${
-						i + 1 !== dims.length ? " | " : ""
+						i + 1 === dims.length ? "" : " | "
 					} `}
 				</span>
 			))}
@@ -245,9 +245,11 @@ CartItemRoot.Dimensions = () => {
 
 CartItemRoot.Price = () => {
 	const ctx = useContext(CartItemContext);
+	const { formatCurrency } = useCurrencyFormatter();
+
 	if (!ctx) return null;
+
 	const { cartLine } = ctx;
-	const { formatCurrency } = useCurrencyFormatter();
 
 	const hasDiscount = (cartLine.DiscountLines?.length ?? 0) > 0;
 	const qty = cartLine.Quantity ?? 1;
@@ -281,7 +283,7 @@ CartItemRoot.Price = () => {
 			{!!cartLine.DiscountLines?.length && (
 				<FlexBox gap={1} flexWrap="wrap" alignItems="center">
 					{cartLine.DiscountLines?.map((d, i) => (
-						<Span key={i} color="error.main">
+						<Span key={`dim-${i + 1}`} color="error.main">
 							{d.DiscountCode} - {d.OfferName}
 						</Span>
 					))}
@@ -293,9 +295,9 @@ CartItemRoot.Price = () => {
 
 CartItemRoot.Quantity = () => {
 	const ctx = useContext(CartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
 	const { qty, increase, decrease, isLoading } = ctx;
-	const t = useTranslations("Cart.CartLine");
 
 	if (isLoading) return <CircularProgress size={30} />;
 
@@ -333,7 +335,9 @@ CartItemRoot.Quantity = () => {
 
 CartItemRoot.Comment = () => {
 	const ctx = useContext(CartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
+
 	const {
 		isWritingComment,
 		setIsWritingComment,
@@ -344,83 +348,88 @@ CartItemRoot.Comment = () => {
 		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" }}
+	let content: React.ReactNode;
+
+	if (isWritingComment) {
+		content = (
+			<>
+				<TextField
+					label={t("addComment")}
+					variant="outlined"
+					multiline
+					minRows={2}
+					maxRows={2}
+					fullWidth
+					value={comment}
+					onChange={(e) => setComment(e.target.value)}
+					sx={{ marginBottom: 1 }}
 				/>
-			) : (
-				<>
-					<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>
+				<FlexBox
+					flexDirection="row"
+					sx={{ marginTop: "auto", marginLeft: "auto" }}
+				>
 					<Button
 						color="primary"
 						variant="outlined"
-						sx={{ width: 150, mt: "auto", ml: "auto" }}
-						onClick={() => setIsWritingComment(true)}
+						sx={{ width: 100 }}
+						onClick={cancelComment}
 					>
-						{t("addComment")}
+						{t("cancelComment")}
 					</Button>
-				</>
-			)}
-		</CartItemRoot.Right>
-	);
+					<Button
+						color="primary"
+						variant="contained"
+						sx={{ width: 150, ml: 1 }}
+						onClick={saveComment}
+					>
+						{t("saveComment")}
+					</Button>
+				</FlexBox>
+			</>
+		);
+	} else if (isLoading) {
+		content = (
+			<CircularProgress
+				size={30}
+				sx={{ marginTop: "auto", marginLeft: "auto" }}
+			/>
+		);
+	} else {
+		content = (
+			<>
+				<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>
+			</>
+		);
+	}
+
+	return <CartItemRoot.Right>{content}</CartItemRoot.Right>;
 };
 
 const CartItem = Object.assign(CartItemRoot, {

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

@@ -100,10 +100,10 @@ const CheckoutForm = ({
 
 CheckoutForm.Total = () => {
 	const ctx = useContext(CheckoutFormContext);
-	if (!ctx) return null;
-	const { cartTotal } = ctx;
 	const { number } = useFormatter();
 	const t = useTranslations("Cart.Sidebar");
+	if (!ctx) return null;
+	const { cartTotal } = ctx;
 
 	return (
 		<>
@@ -120,9 +120,9 @@ CheckoutForm.Total = () => {
 
 CheckoutForm.Notes = () => {
 	const ctx = useContext(CheckoutFormContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { updateCartComment, textRef } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 	const debounceCommentUpdate = debounce(
 		(e: React.ChangeEvent<HTMLInputElement>) =>
 			updateCartComment(e.target.value),
@@ -192,9 +192,9 @@ CheckoutForm.EstimateShipping = () => {
 
 CheckoutForm.CheckoutButton = () => {
 	const ctx = useContext(CheckoutFormContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { checkoutDisabled } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 
 	return (
 		<Button

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

@@ -72,9 +72,9 @@ const CouponEntry = ({
 
 CouponEntry.Input = () => {
 	const ctx = useContext(CouponContext);
+	const t = useTranslations("Cart.Coupons");
 	if (!ctx) return null;
 	const { textValue, setTextValue } = ctx;
-	const t = useTranslations("Cart.Coupons");
 
 	return (
 		<TextField
@@ -91,9 +91,9 @@ CouponEntry.Input = () => {
 
 CouponEntry.ApplyButton = () => {
 	const ctx = useContext(CouponContext);
+	const t = useTranslations("Cart.Coupons");
 	if (!ctx) return null;
 	const { handleApplyCoupon } = ctx;
-	const t = useTranslations("Cart.Coupons");
 
 	return (
 		<Button
@@ -110,9 +110,9 @@ CouponEntry.ApplyButton = () => {
 
 CouponEntry.AppliedList = () => {
 	const ctx = useContext(CouponContext);
+	const t = useTranslations("Cart.Coupons");
 	if (!ctx) return null;
 	const { appliedCoupons } = ctx;
-	const t = useTranslations("Cart.Coupons");
 
 	if (!appliedCoupons.length) return null;
 

package/src/pages-v2/cart/estimate-shipping.tsx

@@ -132,9 +132,9 @@ const EstimateShipping = ({
 // Subcomponents
 EstimateShipping.Country = () => {
 	const ctx = useContext(EstimateShippingContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { selectedCountry, setSelectedCountry, countries } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 	return (
 		<Box sx={{ mb: 2 }}>
 			<CountryInput
@@ -149,9 +149,9 @@ EstimateShipping.Country = () => {
 
 EstimateShipping.State = () => {
 	const ctx = useContext(EstimateShippingContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { selectedState, setSelectedState, states } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 	return (
 		<TextField
 			select
@@ -173,9 +173,9 @@ EstimateShipping.State = () => {
 
 EstimateShipping.ZipCode = () => {
 	const ctx = useContext(EstimateShippingContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { zipCode, setZipCode } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 	return (
 		<TextField
 			fullWidth
@@ -190,9 +190,9 @@ EstimateShipping.ZipCode = () => {
 
 EstimateShipping.Submit = () => {
 	const ctx = useContext(EstimateShippingContext);
+	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
 	const { doDeliveryMethodLookup } = ctx;
-	const t = useTranslations("Cart.Sidebar");
 	return (
 		<Button
 			variant="outlined"
@@ -208,10 +208,10 @@ EstimateShipping.Submit = () => {
 
 EstimateShipping.Options = () => {
 	const ctx = useContext(EstimateShippingContext);
-	if (!ctx) return null;
-	const { deliveryOptions, noOptionsFound } = ctx;
 	const { formatCurrency } = useCurrencyFormatter();
 	const t = useTranslations("Cart.Sidebar");
+	if (!ctx) return null;
+	const { deliveryOptions, noOptionsFound } = ctx;
 
 	if (noOptionsFound) {
 		return <Span color="error.main">{t("noDeliveryOptionsFound")}</Span>;

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

@@ -163,9 +163,9 @@ CheckoutForm.Step = <T extends object>({
 	componentProps,
 }: StepProps<T>) => {
 	const ctx = useContext(CheckoutContext);
+	const t = useTranslations("Checkout");
 	if (!ctx) return null;
 	const { activeStep, setActiveStep, cart } = ctx;
-	const t = useTranslations("Checkout");
 	return (
 		<CheckoutStep
 			title={t(title)}
@@ -186,9 +186,9 @@ CheckoutForm.Step = <T extends object>({
 
 CheckoutForm.Footer = () => {
 	const ctx = useContext(CheckoutContext);
+	const t = useTranslations("Checkout");
 	if (!ctx) return null;
 	const { placeOrder, isSubmitting, activeStep, totalSteps } = ctx;
-	const t = useTranslations("Checkout");
 
 	const isFormComplete = () => activeStep > totalSteps;
 

package/src/pages-v2/checkout/checkout-alt-form/checkout-step.tsx

@@ -92,9 +92,9 @@ const CheckoutStep = ({
 
 CheckoutStep.Header = () => {
 	const ctx = useContext(StepContext);
+	const t = useTranslations("Checkout.Steps");
 	if (!ctx) return null;
 	const { title, stepNumber, stepViewState, hasCompleted, setActiveStep } = ctx;
-	const t = useTranslations("Checkout.Steps");
 
 	return (
 		<FlexBox justifyContent="space-between">
@@ -149,9 +149,9 @@ CheckoutStep.Body = <P extends object = {}>({
 
 CheckoutStep.Actions = () => {
 	const ctx = useContext(StepContext);
+	const t = useTranslations("Checkout.Steps");
 	if (!ctx) return null;
 	const { stepViewState, setStepSubmissionState } = ctx;
-	const t = useTranslations("Checkout.Steps");
 
 	if (stepViewState !== "active") return null;
 

package/src/pages-v2/checkout/checkout-alt-form/step-heading.tsx

@@ -17,7 +17,7 @@ export default function Heading({
 	title,
 	stepViewState,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	let viewStateColor;
 
 	switch (stepViewState) {

package/src/pages-v2/checkout/checkout-alt-form/steps/address/delivery-address.tsx

@@ -249,11 +249,15 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 		);
 	}
 
-	const visibleAddresses = useDropDown
-		? isGuest
-			? addressList
-			: addressList.filter((a) => a.RecordId === selectedAddressID)
-		: addressList;
+	let visibleAddresses = addressList;
+
+	if (useDropDown) {
+		if (!isGuest) {
+			visibleAddresses = addressList.filter(
+				(a) => a.RecordId === selectedAddressID,
+			);
+		}
+	}
 
 	// modal helpers
 	const openNew = () => {
@@ -358,9 +362,9 @@ DeliveryAddress.Dropdown = () => {
 					</AddressDropDownHandler>
 				)}
 				options={(onClose: () => void) =>
-					addressList.map((value, index) => (
+					addressList.map((value) => (
 						<MenuItem
-							key={index}
+							key={value.RecordId}
 							onClick={async () => {
 								pickAddress(value.RecordId as number);
 								onClose();
@@ -406,9 +410,7 @@ DeliveryAddress.Card = ({ address, children }: ItemProps) => {
 
 	return (
 		<Grid size={{ md: 4, sm: 6, xs: 12 }}>
-			{children ? (
-				children
-			) : (
+			{children || (
 				<AddressCard
 					address={address}
 					isCartAddress={cartShippingAddressId === address.Id}

package/src/pages-v2/checkout/checkout-alt-form/steps/address/new-address-form.tsx

@@ -312,12 +312,11 @@ NewAddressForm.StateSelect = () => {
 					render={({ field }) => (
 						<Select labelId="state-label" {...field}>
 							<MenuItem value="0">Select a state</MenuItem>
-							{states &&
-								states.map(({ StateName, StateId }) => (
-									<MenuItem key={StateId} value={StateId}>
-										{StateName}
-									</MenuItem>
-								))}
+							{states?.map(({ StateName, StateId }) => (
+								<MenuItem key={StateId} value={StateId}>
+									{StateName}
+								</MenuItem>
+							))}
 						</Select>
 					)}
 				/>

package/src/pages-v2/checkout/checkout-alt-form/steps/customer-info/customer-information.tsx

@@ -107,22 +107,21 @@ const CustomerInformation = (
 
 	return (
 		<CustomerContext.Provider value={ctx}>
-			{children ? (
-				children
-			) : stepViewState === "preview" ? (
-				<CustomerInformation.Preview />
-			) : (
-				<CustomerInformation.Form />
-			)}
+			{children ||
+				(stepViewState === "preview" ? (
+					<CustomerInformation.Preview />
+				) : (
+					<CustomerInformation.Form />
+				))}
 		</CustomerContext.Provider>
 	);
 };
 
 CustomerInformation.Preview = () => {
 	const ctx = useContext(CustomerContext);
+	const t = useTranslations("Checkout.CustomerInformation");
 	if (!ctx) return null;
 	const { email } = ctx;
-	const t = useTranslations("Checkout.CustomerInformation");
 	return (
 		<Box ml={2}>
 			<Paragraph>
@@ -134,10 +133,10 @@ CustomerInformation.Preview = () => {
 
 CustomerInformation.Form = () => {
 	const ctx = useContext(CustomerContext);
+	const t = useTranslations("Checkout.CustomerInformation");
 	if (!ctx) return null;
 	const { form, handleSave } = ctx;
 	const { register, handleSubmit, formState } = form;
-	const t = useTranslations("Checkout.CustomerInformation");
 
 	return (
 		<form onSubmit={handleSubmit(handleSave)}>

package/src/pages-v2/checkout/checkout-alt-form/steps/payment/payment-details.tsx

@@ -64,16 +64,14 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 	const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData({
 		cartId: cart.Id,
 		totalAmount: cart.TotalAmount ?? 0,
-		origin:
-			(typeof window !== "undefined" && window.location.origin) || undefined,
-		isClient: typeof window !== "undefined",
+		origin: globalThis.window?.location?.origin,
+		isClient: !!globalThis.window,
 	});
 
 	const { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
 	const iframeReference = React.useRef<HTMLIFrameElement>(null);
 	const [iframeHeight, setIFrameHeight] = React.useState<number>(1);
 	const [errorState, setErrorState] = React.useState<PaymentError[]>([]);
-	// const [showOverlay, setShowOverlay] = React.useState(false);
 
 	const paymentConnectorMessage = (
 		data: string,
@@ -90,7 +88,7 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 				resultAccessCode: accessCode,
 				settings: {
 					PaymentConnectorId: paymentAcceptPointData?.PaymentConnectorId,
-					ReturnUrl: window.location.href,
+					ReturnUrl: globalThis.window?.location?.href ?? "",
 				},
 			};
 			const paymentAcceptResultData = await retrievePaymentAcceptResult(input);
@@ -182,15 +180,15 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 
 	const onEvent = React.useCallback(
 		(event: MessageEvent) => {
-			// TODO: Security check -> validate event.origin matches expected
+			// Do Security check -> validate event.origin matches expected
 			onIFrameMessage(event);
 		},
 		[onIFrameMessage],
 	);
 
 	React.useEffect(() => {
-		window.addEventListener("message", onEvent);
-		return () => window.removeEventListener("message", onEvent);
+		globalThis.addEventListener("message", onEvent);
+		return () => globalThis.removeEventListener("message", onEvent);
 	}, [onEvent]);
 
 	const postSubmitMessage = React.useCallback(() => {
@@ -226,18 +224,17 @@ const PaymentDetails: PaymentDetailsCompound = (props) => {
 
 	return (
 		<>
-			{children ? (
-				children
-			) : stepViewState === "preview" ? (
-				<PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
-			) : (
-				<PaymentDetails.Form
-					iframeReference={iframeReference}
-					iframeHeight={iframeHeight}
-					errorState={errorState}
-					paymentAcceptPointData={paymentAcceptPointData}
-				/>
-			)}
+			{children ||
+				(stepViewState === "preview" ? (
+					<PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
+				) : (
+					<PaymentDetails.Form
+						iframeReference={iframeReference}
+						iframeHeight={iframeHeight}
+						errorState={errorState}
+						paymentAcceptPointData={paymentAcceptPointData}
+					/>
+				))}
 		</>
 	);
 };