@evenicanpm/storefront-core 2.4.1 → 2.5.0

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

@@ -20,7 +20,7 @@ import {
 } from "@mui/material";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 interface EstimateShippingContextValue {
 	selectedCountry: CountryRegionInfo | null;
@@ -102,23 +102,37 @@ const EstimateShipping = ({
 			setNoOptionsFound(true);
 		}
 	};
+	const contextValue = useMemo(
+		() => ({
+			selectedCountry,
+			setSelectedCountry,
+			selectedState,
+			setSelectedState,
+			zipCode,
+			setZipCode,
+			deliveryOptions,
+			noOptionsFound,
+			doDeliveryMethodLookup,
+			countries,
+			states,
+		}),
+		[
+			selectedCountry,
+			setSelectedCountry,
+			selectedState,
+			setSelectedState,
+			zipCode,
+			setZipCode,
+			deliveryOptions,
+			noOptionsFound,
+			doDeliveryMethodLookup,
+			countries,
+			states,
+		],
+	);
 
 	return (
-		<EstimateShippingContext.Provider
-			value={{
-				selectedCountry,
-				setSelectedCountry,
-				selectedState,
-				setSelectedState,
-				zipCode,
-				setZipCode,
-				deliveryOptions,
-				noOptionsFound,
-				doDeliveryMethodLookup,
-				countries,
-				states,
-			}}
-		>
+		<EstimateShippingContext.Provider value={contextValue}>
 			<Box>
 				<Span fontWeight={600} mb={2} display="block">
 					{t("estimatesLabel")}
@@ -130,7 +144,7 @@ const EstimateShipping = ({
 };
 
 // Subcomponents
-EstimateShipping.Country = () => {
+const EstimateShippingCountry = () => {
 	const ctx = useContext(EstimateShippingContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -147,7 +161,9 @@ EstimateShipping.Country = () => {
 	);
 };
 
-EstimateShipping.State = () => {
+EstimateShipping.Country = EstimateShippingCountry;
+
+const EstimateShippingState = () => {
 	const ctx = useContext(EstimateShippingContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -172,7 +188,9 @@ EstimateShipping.State = () => {
 	);
 };
 
-EstimateShipping.ZipCode = () => {
+EstimateShipping.State = EstimateShippingState;
+
+const EstimateShippingZipCode = () => {
 	const ctx = useContext(EstimateShippingContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -189,7 +207,9 @@ EstimateShipping.ZipCode = () => {
 	);
 };
 
-EstimateShipping.Submit = () => {
+EstimateShipping.ZipCode = EstimateShippingZipCode;
+
+const EstimateShippingSubmit = () => {
 	const ctx = useContext(EstimateShippingContext);
 	const t = useTranslations("Cart.Sidebar");
 	if (!ctx) return null;
@@ -207,7 +227,9 @@ EstimateShipping.Submit = () => {
 	);
 };
 
-EstimateShipping.Options = () => {
+EstimateShipping.Submit = EstimateShippingSubmit;
+
+const EstimateShippingOptions = () => {
 	const ctx = useContext(EstimateShippingContext);
 	const { formatCurrency } = useCurrencyFormatter();
 	const t = useTranslations("Cart.Sidebar");
@@ -241,4 +263,6 @@ EstimateShipping.Options = () => {
 	);
 };
 
+EstimateShipping.Options = EstimateShippingOptions;
+
 export default EstimateShipping;

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

@@ -18,6 +18,7 @@ import React, {
 	type ReactNode,
 	useContext,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -51,7 +52,6 @@ interface StepProps<T extends object> {
 	component: React.FC<CheckoutStepComponentProps & T>;
 	componentProps?: T;
 	stepNumber?: number;
-	isLastStep?: boolean;
 }
 const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 	const t = useTranslations("Checkout");
@@ -131,18 +131,20 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 			setIsSubmitting(false);
 		}
 	};
+	const contextValue = useMemo(
+		() => ({
+			cart,
+			activeStep,
+			setActiveStep,
+			isSubmitting,
+			placeOrder,
+			totalSteps,
+		}),
+		[cart, activeStep, setActiveStep, isSubmitting, placeOrder, totalSteps],
+	);
 
 	return (
-		<CheckoutContext.Provider
-			value={{
-				cart,
-				activeStep,
-				setActiveStep,
-				isSubmitting,
-				placeOrder,
-				totalSteps,
-			}}
-		>
+		<CheckoutContext.Provider value={contextValue}>
 			<Box>
 				{React.Children.map(children, (child) =>
 					React.isValidElement(child) && child.type === CheckoutForm.Steps
@@ -159,7 +161,7 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 	);
 };
 
-CheckoutForm.Steps = ({
+const CheckoutFormSteps = ({
 	children,
 	setTotalSteps,
 }: {
@@ -185,7 +187,9 @@ CheckoutForm.Steps = ({
 	);
 };
 
-CheckoutForm.Step = <T extends object>({
+CheckoutForm.Steps = CheckoutFormSteps;
+
+const CheckoutFormStep = <T extends object>({
 	title,
 	stepNumber,
 	component: Component,
@@ -218,7 +222,9 @@ CheckoutForm.Step = <T extends object>({
 	);
 };
 
-CheckoutForm.Footer = () => {
+CheckoutForm.Step = CheckoutFormStep;
+
+const CheckoutFormFooter = () => {
 	const ctx = useContext(CheckoutContext);
 	const t = useTranslations("Checkout");
 	if (!ctx) return null;
@@ -244,4 +250,6 @@ CheckoutForm.Footer = () => {
 	);
 };
 
+CheckoutForm.Footer = CheckoutFormFooter;
+
 export default CheckoutForm;

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

@@ -6,7 +6,7 @@ import StepHeading from "@evenicanpm/storefront-core/src/pages/checkout/checkout
 import { Button, useTheme } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useTranslations } from "next-intl";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 
 export type StepViewState = "active" | "preview" | "pending";
 export type StepSubmissionState = "idle" | "submitting" | "error";
@@ -61,18 +61,33 @@ const CheckoutStep = ({
 		return "pending";
 	};
 
-	const ctx: StepContextType = {
-		title,
-		stepNumber,
-		activeStep,
-		setActiveStep,
-		cart,
-		hasCompleted,
-		stepSubmissionState,
-		setStepSubmissionState,
-		stepViewState: getStepViewState(),
-		handleStepCompletion,
-	};
+	const stepViewState = getStepViewState();
+	const ctx: StepContextType = useMemo(
+		() => ({
+			title,
+			stepNumber,
+			activeStep,
+			setActiveStep,
+			cart,
+			hasCompleted,
+			stepSubmissionState,
+			setStepSubmissionState,
+			stepViewState,
+			handleStepCompletion,
+		}),
+		[
+			title,
+			stepNumber,
+			activeStep,
+			setActiveStep,
+			cart,
+			hasCompleted,
+			stepSubmissionState,
+			setStepSubmissionState,
+			stepViewState,
+			handleStepCompletion,
+		],
+	);
 
 	return (
 		<StepContext.Provider value={ctx}>
@@ -90,7 +105,7 @@ const CheckoutStep = ({
 	);
 };
 
-CheckoutStep.Header = () => {
+const CheckoutStepHeader = () => {
 	const ctx = useContext(StepContext);
 	const t = useTranslations("Checkout.Steps");
 	if (!ctx) return null;
@@ -117,7 +132,9 @@ CheckoutStep.Header = () => {
 	);
 };
 
-CheckoutStep.Body = <P extends object = object>({
+CheckoutStep.Header = CheckoutStepHeader;
+
+const CheckoutStepBody = <P extends object = object>({
 	component: Component,
 	componentProps,
 }: {
@@ -147,7 +164,9 @@ CheckoutStep.Body = <P extends object = object>({
 	);
 };
 
-CheckoutStep.Actions = () => {
+CheckoutStep.Body = CheckoutStepBody;
+
+const CheckoutStepActions = () => {
 	const ctx = useContext(StepContext);
 	const t = useTranslations("Checkout.Steps");
 	if (!ctx) return null;
@@ -168,4 +187,6 @@ CheckoutStep.Actions = () => {
 	);
 };
 
+CheckoutStep.Actions = CheckoutStepActions;
+
 export default CheckoutStep;

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

@@ -64,7 +64,7 @@ const AddressCard = ({
 	);
 };
 
-AddressCard.Controls = () => {
+const AddressCardControls = () => {
 	const ctx = React.useContext(AddressCardContext);
 	if (!ctx) return null;
 
@@ -102,7 +102,9 @@ AddressCard.Controls = () => {
 	);
 };
 
-AddressCard.Header = () => {
+AddressCard.Controls = AddressCardControls;
+
+const AddressCardHeader = () => {
 	const ctx = React.useContext(AddressCardContext);
 	if (!ctx) return null;
 
@@ -110,7 +112,9 @@ AddressCard.Header = () => {
 	return <H6 mb={0.5}>{address.Name}</H6>;
 };
 
-AddressCard.Body = () => {
+AddressCard.Header = AddressCardHeader;
+
+const AddressCardBody = () => {
 	const ctx = React.useContext(AddressCardContext);
 	if (!ctx) return null;
 
@@ -130,4 +134,6 @@ AddressCard.Body = () => {
 	);
 };
 
+AddressCard.Body = AddressCardBody;
+
 export default AddressCard;

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

@@ -27,6 +27,7 @@ import React, {
 	useCallback,
 	useContext,
 	useEffect,
+	useMemo,
 	useState,
 } from "react";
 
@@ -246,6 +247,74 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 		}
 	}, [stepSubmissionState, handleStepCompletion, setStepSubmissionState]);
 
+	// modal helpers (moved before early returns)
+	const openNew = () => {
+		setEditAddress(undefined);
+		setModalOpen(true);
+	};
+	const openEdit = (addr: Address) => {
+		setEditAddress({ ...addr });
+		setModalOpen(true);
+	};
+
+	const closeModal = () => {
+		setModalOpen(false);
+		setEditAddress(undefined);
+	};
+
+	// context value (moved before early returns)
+	const cartShippingAddressId = cart.ShippingAddress?.Id;
+	let visibleAddresses = addressList;
+
+	if (useDropDown) {
+		if (!isGuest) {
+			visibleAddresses = addressList.filter(
+				(a) => a.RecordId === selectedAddressID,
+			);
+		}
+	}
+
+	const ctx: DeliveryAddressContextValue = useMemo(
+		() => ({
+			t,
+			countries,
+			addressList,
+			visibleAddresses,
+			isGuest,
+			cartShippingAddressId,
+			showDropDown,
+			title,
+			selectedAddressID,
+			modalOpen,
+			editAddress,
+			openNew,
+			openEdit,
+			closeModal,
+			pickAddress,
+			handleSaveAddress,
+			handleDelete,
+		}),
+		[
+			t,
+			countries,
+			addressList,
+			visibleAddresses,
+			isGuest,
+			cartShippingAddressId,
+			showDropDown,
+			title,
+			selectedAddressID,
+			modalOpen,
+			editAddress,
+			openNew,
+			openEdit,
+			closeModal,
+			pickAddress,
+			handleSaveAddress,
+			handleDelete,
+		],
+	);
+
 	// step state guards
 	if (stepViewState === "pending" || !countries) return null;
 
@@ -267,52 +336,6 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 		);
 	}
 
-	let visibleAddresses = addressList;
-
-	if (useDropDown) {
-		if (!isGuest) {
-			visibleAddresses = addressList.filter(
-				(a) => a.RecordId === selectedAddressID,
-			);
-		}
-	}
-
-	// modal helpers
-	const openNew = () => {
-		setEditAddress(undefined);
-		setModalOpen(true);
-	};
-	const openEdit = (addr: Address) => {
-		setEditAddress({ ...addr });
-		setModalOpen(true);
-	};
-
-	const closeModal = () => {
-		setModalOpen(false);
-		setEditAddress(undefined);
-	};
-
-	// context value
-	const ctx: DeliveryAddressContextValue = {
-		t,
-		countries,
-		addressList,
-		visibleAddresses,
-		isGuest,
-		cartShippingAddressId: cart.ShippingAddress?.Id,
-		showDropDown,
-		title,
-		selectedAddressID,
-		modalOpen,
-		editAddress,
-		openNew,
-		openEdit,
-		closeModal,
-		pickAddress,
-		handleSaveAddress,
-		handleDelete,
-	};
-
 	// default layout (identical behavior)
 	const defaultLayout = (
 		<>
@@ -334,7 +357,7 @@ const DeliveryAddress: DeliveryAddressCompound = ({
 
 // ---------- Subcomponents ----------
 
-DeliveryAddress.Modal = () => {
+const DeliveryAddressModal = () => {
 	const ctx = useContext(DeliveryAddressCtx);
 	if (!ctx) return null;
 	const {
@@ -359,8 +382,10 @@ DeliveryAddress.Modal = () => {
 	);
 };
 
+DeliveryAddress.Modal = DeliveryAddressModal;
+
 // (configurable via `useDropDown`/`showDropDown`)
-DeliveryAddress.Dropdown = () => {
+const DeliveryAddressDropdown = () => {
 	const ctx = useContext(DeliveryAddressCtx);
 	if (!ctx) return null;
 	const { showDropDown, title, addressList, pickAddress, handleSaveAddress } =
@@ -398,8 +423,10 @@ DeliveryAddress.Dropdown = () => {
 	);
 };
 
+DeliveryAddress.Dropdown = DeliveryAddressDropdown;
+
 // List (can accept a renderItem override)
-DeliveryAddress.List = ({ renderItem }: ListProps) => {
+const DeliveryAddressList = ({ renderItem }: ListProps) => {
 	const ctx = useContext(DeliveryAddressCtx);
 	if (!ctx) return null;
 	const { visibleAddresses } = ctx;
@@ -419,8 +446,10 @@ DeliveryAddress.List = ({ renderItem }: ListProps) => {
 	);
 };
 
+DeliveryAddress.List = DeliveryAddressList;
+
 // Item → one address card (default uses AddressCard with Controls/Header/Body)
-DeliveryAddress.Card = ({ address, children }: ItemProps) => {
+const DeliveryAddressCard = ({ address, children }: ItemProps) => {
 	const ctx = useContext(DeliveryAddressCtx);
 	if (!ctx) return null;
 	const { cartShippingAddressId, openEdit, handleSaveAddress, handleDelete } =
@@ -445,7 +474,9 @@ DeliveryAddress.Card = ({ address, children }: ItemProps) => {
 	);
 };
 
-DeliveryAddress.NewCard = () => {
+DeliveryAddress.Card = DeliveryAddressCard;
+
+const DeliveryAddressNewCard = () => {
 	const ctx = useContext(DeliveryAddressCtx);
 	if (!ctx) return null;
 	const { t, openNew } = ctx;
@@ -474,4 +505,6 @@ DeliveryAddress.NewCard = () => {
 	);
 };
 
+DeliveryAddress.NewCard = DeliveryAddressNewCard;
+
 export default DeliveryAddress;

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

@@ -176,21 +176,35 @@ const NewAddressForm = ({
 		handleClose();
 	};
 
-	const ctx: NewAddressFormCtx = {
-		form,
-		countries,
-		states: Array.isArray(states)
-			? states.map((s) => ({
-					StateName: s.StateName ?? "",
-					StateId: s.StateId ?? "",
-				}))
-			: [],
-		selectedCountry,
-		setSelectedCountry,
-		errors,
-		t,
-		onCancel: handleClose,
-	};
+	const mappedStates = Array.isArray(states)
+		? states.map((s) => ({
+				StateName: s.StateName ?? "",
+				StateId: s.StateId ?? "",
+			}))
+		: [];
+
+	const ctx: NewAddressFormCtx = React.useMemo(
+		() => ({
+			form,
+			countries,
+			states: mappedStates,
+			selectedCountry,
+			setSelectedCountry,
+			errors,
+			t,
+			onCancel: handleClose,
+		}),
+		[
+			form,
+			countries,
+			mappedStates,
+			selectedCountry,
+			setSelectedCountry,
+			errors,
+			t,
+			handleClose,
+		],
+	);
 
 	const hasCustomChildren = React.Children.count(children) > 0;
 
@@ -231,7 +245,7 @@ const NewAddressForm = ({
 };
 
 // Generic text field
-NewAddressForm.Field = ({
+const NewAddressFormField = ({
 	name,
 	label,
 }: {
@@ -257,7 +271,9 @@ NewAddressForm.Field = ({
 	);
 };
 
-NewAddressForm.CountrySelect = () => {
+NewAddressForm.Field = NewAddressFormField;
+
+const NewAddressFormCountrySelect = () => {
 	const ctx = React.useContext(FormContext);
 	if (!ctx) return null;
 	const { countries, form, setSelectedCountry, t, errors } = ctx;
@@ -297,7 +313,9 @@ NewAddressForm.CountrySelect = () => {
 	);
 };
 
-NewAddressForm.StateSelect = () => {
+NewAddressForm.CountrySelect = NewAddressFormCountrySelect;
+
+const NewAddressFormStateSelect = () => {
 	const ctx = React.useContext(FormContext);
 	if (!ctx) return null;
 	const { states, form, t, errors } = ctx;
@@ -326,7 +344,9 @@ NewAddressForm.StateSelect = () => {
 	);
 };
 
-NewAddressForm.Actions = () => {
+NewAddressForm.StateSelect = NewAddressFormStateSelect;
+
+const NewAddressFormActions = () => {
 	const ctx = React.useContext(FormContext);
 	if (!ctx) return null;
 	const { t, onCancel } = ctx;
@@ -343,4 +363,6 @@ NewAddressForm.Actions = () => {
 	);
 };
 
+NewAddressForm.Actions = NewAddressFormActions;
+
 export default NewAddressForm;

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

@@ -7,7 +7,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 import TextField from "@mui/material/TextField";
 import { useTranslations } from "next-intl";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 import type { SubmitHandler, UseFormReturn } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
@@ -97,13 +97,16 @@ const CustomerInformation = (
 		}
 	}, [formState.errors, formState.isSubmitted, setStepSubmissionState]);
 
-	const ctx: CustomerCtx = {
-		...props,
-		email: email ?? null,
-		cartId,
-		form,
-		handleSave,
-	};
+	const ctx: CustomerCtx = useMemo(
+		() => ({
+			...props,
+			email: email ?? null,
+			cartId,
+			form,
+			handleSave,
+		}),
+		[props, email, cartId, form, handleSave],
+	);
 
 	return (
 		<CustomerContext.Provider value={ctx}>
@@ -117,7 +120,7 @@ const CustomerInformation = (
 	);
 };
 
-CustomerInformation.Preview = () => {
+const CustomerInformationPreview = () => {
 	const ctx = useContext(CustomerContext);
 	const t = useTranslations("Checkout.CustomerInformation");
 	if (!ctx) return null;
@@ -131,7 +134,9 @@ CustomerInformation.Preview = () => {
 	);
 };
 
-CustomerInformation.Form = () => {
+CustomerInformation.Preview = CustomerInformationPreview;
+
+const CustomerInformationForm = () => {
 	const ctx = useContext(CustomerContext);
 	const t = useTranslations("Checkout.CustomerInformation");
 	if (!ctx) return null;
@@ -155,4 +160,6 @@ CustomerInformation.Form = () => {
 	);
 };
 
+CustomerInformation.Form = CustomerInformationForm;
+
 export default CustomerInformation;