@evenicanpm/storefront-core 1.2.2 → 1.4.0

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

@@ -1,18 +1,18 @@
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
+import countries from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/countries.json";
+import EstimateShipping from "@evenicanpm/storefront-core/src/pages-v2/cart/estimate-shipping";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+import ENUS from "@messages/en-US.json";
+import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen } from "@testing-library/react";
-import React from "react";
-import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
-import countries from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/conutries.json";
 import { NextIntlClientProvider } from "next-intl";
-import ENUS from "@messages/en-US.json";
-import EstimateShipping from "@evenicanpm/storefront-core/src/pages-v2/cart/estimate-shipping";
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import type React from "react";
 import { vi } from "vitest";
-import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - Complaining about date types from the json
+// @ts-expect-error - Complaining about date types from the json
 const cart: Cart = cartData;
 const queryClient = new QueryClient();
 const Wrapper = ({ children }: React.PropsWithChildren) => (
@@ -27,7 +27,7 @@ describe("Estimate Shipping", () => {
 	it("Should Default Country to USA", async () => {
 		const _countries = countries as CountryRegionInfo[];
 		const america = _countries.find((c) => c.ISOCode === "US");
-		let selectedCountry = undefined;
+		let selectedCountry;
 		const setCountryFn = vi.fn(
 			(c: CountryRegionInfo) => (selectedCountry = c.ISOCode),
 		);
@@ -56,7 +56,7 @@ describe("Estimate Shipping", () => {
 	it("Should Default Country to Canada", async () => {
 		const _countries = countries as CountryRegionInfo[];
 		const canada = _countries.find((c) => c.ISOCode === "CA");
-		let selectedCountry = undefined;
+		let selectedCountry;
 		const setCountryFn = vi.fn(
 			(c: CountryRegionInfo) => (selectedCountry = c.ISOCode),
 		);

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

@@ -1,37 +1,38 @@
 "use client";
 
-import React, { createContext, useContext, useMemo, useState } from "react";
-import Link from "next/link";
-import {
-	Button,
-	IconButton,
-	Box,
-	CircularProgress,
-	Typography,
-	TextField,
-} from "@mui/material";
-import { useTranslations } from "next-intl";
-// MUI Icons
-import Add from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import Remove from "@mui/icons-material/Remove";
+import type { CartLine } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
+import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import Image from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
 // 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";
-import Image from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
+import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
+// Utils
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 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";
-import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
-import { CartLine } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-// Utils
-import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
+// MUI Icons
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+import Remove from "@mui/icons-material/Remove";
+import {
+	Box,
+	Button,
+	CircularProgress,
+	IconButton,
+	TextField,
+	Typography,
+} from "@mui/material";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 
 type CartItemContextValue = {
 	cartLine: CartLine;
@@ -71,7 +72,7 @@ function CartItemRoot({
 	cartId,
 	cartVersion,
 	children,
-}: CartItemProps) {
+}: Readonly<CartItemProps>) {
 	const [isWritingComment, setIsWritingComment] = useState(false);
 	const [comment, setComment] = useState(cartLine.Comment || "");
 
@@ -192,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"
@@ -232,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>
 			))}
@@ -244,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;
@@ -280,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>
 					))}
@@ -292,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} />;
 
@@ -332,7 +335,9 @@ CartItemRoot.Quantity = () => {
 
 CartItemRoot.Comment = () => {
 	const ctx = useContext(CartItemContext);
+	const t = useTranslations("Cart.CartLine");
 	if (!ctx) return null;
+
 	const {
 		isWritingComment,
 		setIsWritingComment,
@@ -343,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

@@ -1,28 +1,26 @@
 "use client";
 
-import React, {
-	createContext,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import Link from "next/link";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import TextField from "@mui/material/TextField";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { useFormatter, useTranslations } from "next-intl";
-import { CountryRegionInfo, Coupon } from "@msdyn365-commerce/retail-proxy";
-import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
-import { debounce } from "lodash";
-import EstimateShipping from "@evenicanpm/storefront-core/src/pages-v2/cart/estimate-shipping";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CouponEntry from "@evenicanpm/storefront-core/src/pages-v2/cart/coupon-entry";
+import EstimateShipping from "@evenicanpm/storefront-core/src/pages-v2/cart/estimate-shipping";
+import type {
+	CountryRegionInfo,
+	Coupon,
+} from "@msdyn365-commerce/retail-proxy";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import TextField from "@mui/material/TextField";
+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";
 
 interface CheckoutFormContextValue {
 	cartId: string;
@@ -102,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 (
 		<>
@@ -122,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),
@@ -194,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

@@ -1,6 +1,11 @@
 "use client";
 
-import React, { createContext, useContext, useState } from "react";
+import useAddDiscountCode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-discount-code";
+import useRemoveDiscountcode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/remove-discount-code";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import type { Coupon } from "@msdyn365-commerce/retail-proxy";
+import Close from "@mui/icons-material/Close";
 import {
 	Box,
 	Button,
@@ -10,13 +15,10 @@ import {
 	ListItemText,
 	TextField,
 } from "@mui/material";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
-import Close from "@mui/icons-material/Close";
-import { Coupon } from "@msdyn365-commerce/retail-proxy";
-import useAddDiscountCode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-discount-code";
-import useRemoveDiscountcode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/remove-discount-code";
+import type React from "react";
+import { createContext, useContext, useState } from "react";
+
 interface CouponContextValue {
 	textValue: string;
 	setTextValue: (v: string) => void;
@@ -70,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
@@ -89,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
@@ -108,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

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import type { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import useGetDeliveryOptions from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/get-delivery-options";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CountryInput from "@evenicanpm/storefront-core/src/components-v2/countries-input";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import {
+import type {
 	CountryRegionInfo,
 	DeliveryOption,
 	StateProvinceInfo,
@@ -18,8 +18,9 @@ import {
 	MenuItem,
 	TextField,
 } from "@mui/material";
-import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 
 interface EstimateShippingContextValue {
 	selectedCountry: CountryRegionInfo | null;
@@ -131,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
@@ -148,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
@@ -172,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
@@ -189,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"
@@ -207,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

@@ -1,25 +1,26 @@
 "use client";
 
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import useCheckout from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/checkout";
+import getChannelConfiguration from "@evenicanpm/storefront-core/src/api-manager/services/organization/queries/get-channel-configuration";
+import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
+import CheckoutStep from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import type { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
+import { Box, Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import React, {
 	createContext,
+	type ReactElement,
+	type ReactNode,
 	useContext,
-	useState,
 	useEffect,
-	ReactNode,
-	ReactElement,
+	useState,
 } from "react";
-import { Box, Button } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useQueryClient } from "@tanstack/react-query";
-import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
-import getChannelConfiguration from "@evenicanpm/storefront-core/src/api-manager/services/organization/queries/get-channel-configuration";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import useCheckout from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/checkout";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-import CheckoutStep from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
+
 interface CheckoutContextValue {
 	cart: Cart;
 	activeStep: number;
@@ -42,7 +43,7 @@ interface InjectedStepProps {
 	isLastStep: boolean;
 }
 
-import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
+import type { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 
 interface StepProps<T extends object> {
 	title: string;
@@ -162,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)}
@@ -185,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

@@ -1,12 +1,12 @@
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import Card from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import StepHeading from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/step-heading";
 import { Button, useTheme } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import React, { createContext, useContext } from "react";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import { useTranslations } from "next-intl";
-import StepHeading from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/step-heading";
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import React, { createContext, useContext } from "react";
 
 export type StepViewState = "active" | "preview" | "pending";
 export type StepSubmissionState = "idle" | "submitting" | "error";
@@ -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;