@evenicanpm/storefront-core 2.4.2 → 2.5.0

package/src/components/wishlist-dialogs/create-wishlist/compound/create-wishlist-dialog.tsx

@@ -11,7 +11,7 @@ import { withZodSchema } from "formik-validator-zod";
 import isFunction from "lodash/isFunction";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext } from "react";
+import { createContext, useMemo } from "react";
 import { z } from "zod";
 
 interface Props {
@@ -82,9 +82,13 @@ export default function CreateNewList(props: Readonly<Props>) {
 			resetForm();
 		}
 	};
+	const contextValue = useMemo(
+		() => ({ formik, handleClose }),
+		[formik, handleClose],
+	);
 
 	return (
-		<CreateNewWishlistContext.Provider value={{ formik, handleClose }}>
+		<CreateNewWishlistContext.Provider value={contextValue}>
 			<Dialog open={props.open} onClose={handleClose}>
 				<DialogContent>
 					{isSubmitting ? <CircularProgress /> : children}

package/src/hooks/use-overflow-detect.ts

@@ -4,8 +4,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 export default function useOverflowDetect() {
 	const elementRef = useRef<HTMLElement | null>(null);
-	const [isLeftOverflowing, setLeftIsOverflowing] = useState(false);
-	const [isRightOverflowing, setRightIsOverflowing] = useState(false);
+	const [isLeftOverflowing, setIsLeftOverflowing] = useState(false);
+	const [isRightOverflowing, setIsRightOverflowing] = useState(false);
 
 	const checkOverflow = useCallback(() => {
 		const element = elementRef.current;
@@ -15,9 +15,9 @@ export default function useOverflowDetect() {
 			const viewportWidth =
 				window.innerWidth || document.documentElement.clientWidth;
 
-			if (elementRect.left < 0) setLeftIsOverflowing(true);
+			if (elementRect.left < 0) setIsLeftOverflowing(true);
 
-			if (elementRect.right > viewportWidth) setRightIsOverflowing(true);
+			if (elementRect.right > viewportWidth) setIsRightOverflowing(true);
 		}
 	}, []);
 

package/src/lib/page-slugs.ts

@@ -1,3 +1,19 @@
+/**
+ * Central registry of URL path segments for storefront pages.
+ *
+ * Use these constants instead of hardcoding path strings inline.
+ * Values are bare slugs (no leading slash) so they can be composed
+ * freely into full paths or passed to URL constructors.
+ *
+ * @example
+ * // Building a product detail URL
+ * `/${PageSlug.ProductDetail}/${slug}/${id}`
+ *
+ * // Navigating to the product list
+ * new URL(PageSlug.ProductList, globalThis.location.origin)
+ *
+ * Add new entries here when introducing new top-level pages.
+ */
 export const PageSlug = {
 	ProductDetail: "product",
 	ProductList: "products",

package/src/pages/account/account-navigation.tsx

@@ -11,7 +11,6 @@ import {
 } from "@evenicanpm/storefront-core/src/components/Typography";
 import {
 	type AccountRoute,
-	type AccountRouteOverrides,
 	useCreateAccountRoutes,
 } from "@evenicanpm/storefront-core/src/pages/account/account-routes";
 // STYLED COMPONENTS
@@ -21,7 +20,7 @@ import {
 } from "@evenicanpm/storefront-core/src/pages/account/styles";
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { createContext, Fragment, type ReactNode } from "react";
+import { createContext, Fragment, type ReactNode, useMemo } from "react";
 import type { IconType } from "react-icons";
 
 /**
@@ -82,10 +81,8 @@ const routeToNavItem = (route: AccountRoute): NavItem => {
 	};
 };
 
-export const DEFAULT_MENU_ITEMS = (
-	overrides?: AccountRouteOverrides,
-): NavSection[] => {
-	const routes = useCreateAccountRoutes(overrides);
+export const DEFAULT_MENU_ITEMS = (): NavSection[] => {
+	const routes = useCreateAccountRoutes();
 	return [
 		{
 			title: "DASHBOARD",
@@ -112,21 +109,16 @@ const AccountNavigationContext =
 interface AccountNavigationProps {
 	items?: NavSection[];
 	children?: ReactNode;
-	routeOverrides?: AccountRouteOverrides;
 }
 
-const AccountNavigation = ({
-	items,
-	children,
-	routeOverrides,
-}: AccountNavigationProps) => {
+const AccountNavigation = ({ items, children }: AccountNavigationProps) => {
 	const pathname = usePathname();
 	const t = useTranslations("Account.Menu");
 
 	const { data: user } = getUser.useData();
 	const { data: counts } = getUserCounts.useData(String(user?.RecordId) || "");
 
-	const defaultItems = DEFAULT_MENU_ITEMS(routeOverrides);
+	const defaultItems = DEFAULT_MENU_ITEMS();
 
 	// Render either the props items or the default items
 	const itemsWCounts = (items || defaultItems).map((section) => ({
@@ -141,9 +133,10 @@ const AccountNavigation = ({
 			return item;
 		}),
 	}));
+	const contextValue = useMemo(() => ({ items: itemsWCounts }), [itemsWCounts]);
 
 	return (
-		<AccountNavigationContext.Provider value={{ items: itemsWCounts }}>
+		<AccountNavigationContext.Provider value={contextValue}>
 			<MainContainer>
 				{children ||
 					itemsWCounts.map((section) => (

package/src/pages/account/account-routes.ts

@@ -64,23 +64,18 @@ export const RoutesOverrideContext = createContext<
 export type AccountRouteKey = keyof typeof defaults;
 
 /**
- * Hook that builds the account routes map, merging defaults with context-level
- * and call-site overrides. Override priority (highest wins):
- * 1. `overrides` parameter passed directly to the hook
- * 2. Values from {@link RoutesOverrideContext}
- * 3. Built-in defaults
+ * Hook that builds the account routes map, merging defaults with any overrides
+ * supplied via {@link RoutesOverrideContext}.
  *
- * @param overrides - Optional route overrides applied at the call site
- * @returns The full set of account routes with any overrides merged in
+ * @returns The full set of account routes with context overrides merged in
  */
-export const useCreateAccountRoutes = (overrides?: AccountRouteOverrides) => {
+export const useCreateAccountRoutes = () => {
 	const ctxOverrides = useContext(RoutesOverrideContext);
 	return {
 		...defaults,
 		wishlists: {
 			...defaults.wishlists,
 			...ctxOverrides?.wishlists,
-			...overrides?.wishlists,
 		},
 	};
 };

package/src/pages/account/addresses/address-form.tsx

@@ -26,7 +26,7 @@ import { withZodSchema } from "formik-validator-zod";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import React, { createContext, useContext, useRef } from "react";
+import React, { createContext, useContext, useMemo, useRef } from "react";
 import { z } from "zod";
 
 interface AddressFormValues {
@@ -61,11 +61,15 @@ const AddressForm = ({ address, children }: RootProps) => {
 	const locale = useLocale();
 
 	const { data: countries } = getCountries.useData({ locale });
-	const defaultCountry = countries?.find(
-		(c) => c.CountryRegionId === address?.ThreeLetterISORegionName,
-	);
+	const defaultCountry = Array.isArray(countries)
+		? countries?.find(
+				(c) => c.CountryRegionId === address?.ThreeLetterISORegionName,
+			)
+		: null;
+
 	const [selectedCountry, setSelectedCountry] =
 		React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
+
 	const { data: states } = getStates.useData({
 		countryId: selectedCountry?.CountryRegionId,
 	});
@@ -142,11 +146,19 @@ const AddressForm = ({ address, children }: RootProps) => {
 		onSubmit: handleSubmit,
 		validate: withZodSchema(FormSchema),
 	});
+	const contextValue = useMemo(
+		() => ({
+			formik,
+			countries,
+			states,
+			selectedCountry,
+			setSelectedCountry,
+		}),
+		[formik, countries, states, selectedCountry, setSelectedCountry],
+	);
 
 	return (
-		<FormContext.Provider
-			value={{ formik, countries, states, selectedCountry, setSelectedCountry }}
-		>
+		<FormContext.Provider value={contextValue}>
 			<form onSubmit={formik.handleSubmit}>{children}</form>
 		</FormContext.Provider>
 	);
@@ -167,7 +179,7 @@ AddressForm.Fields = ({ children }: { children?: React.ReactNode }) => {
 	);
 };
 
-AddressForm.Field = ({ name, label, required }: FieldProps) => {
+const AddressFormField = ({ name, label, required }: FieldProps) => {
 	const ctx = useContext(FormContext);
 	const t = useTranslations("Address");
 	if (!ctx) return null;
@@ -194,7 +206,9 @@ AddressForm.Field = ({ name, label, required }: FieldProps) => {
 	);
 };
 
-AddressForm.Country = () => {
+AddressForm.Field = AddressFormField;
+
+const AddressFormCountry = () => {
 	const ctx = useContext(FormContext);
 	const t = useTranslations("Address");
 	if (!ctx) return null;
@@ -226,11 +240,13 @@ AddressForm.Country = () => {
 					}}
 				>
 					<MenuItem value="">Select Country</MenuItem>
-					{countries?.map(({ ShortName, CountryRegionId }) => (
-						<MenuItem key={CountryRegionId} value={CountryRegionId}>
-							{ShortName}
-						</MenuItem>
-					))}
+					{Array.isArray(countries) &&
+						countries.length > 0 &&
+						countries?.map(({ ShortName, CountryRegionId }) => (
+							<MenuItem key={CountryRegionId} value={CountryRegionId}>
+								{ShortName}
+							</MenuItem>
+						))}
 				</Select>
 				{formik.touched.Country &&
 					formik.errors.Country &&
@@ -244,7 +260,9 @@ AddressForm.Country = () => {
 	);
 };
 
-AddressForm.State = () => {
+AddressForm.Country = AddressFormCountry;
+
+const AddressFormState = () => {
 	const ctx = useContext(FormContext);
 	const t = useTranslations("Address");
 	if (!ctx) return null;
@@ -287,6 +305,8 @@ AddressForm.State = () => {
 	);
 };
 
+AddressForm.State = AddressFormState;
+
 AddressForm.Actions = ({ children }: { children?: React.ReactNode }) => {
 	return (
 		<Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
@@ -295,7 +315,7 @@ AddressForm.Actions = ({ children }: { children?: React.ReactNode }) => {
 	);
 };
 
-AddressForm.SubmitButton = () => {
+const AddressFormSubmitButton = () => {
 	const t = useTranslations("Address");
 	const ctx = useContext(FormContext);
 	const isSubmitting = ctx?.formik.isSubmitting ?? false;
@@ -316,4 +336,6 @@ AddressForm.SubmitButton = () => {
 	);
 };
 
+AddressForm.SubmitButton = AddressFormSubmitButton;
+
 export default AddressForm;

package/src/pages/account/addresses/address-item.tsx

@@ -13,7 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import type { SxProps } from "@mui/material/styles";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 // ICONS
 import { MdDelete as Delete, MdEdit as Edit } from "react-icons/md";
 
@@ -61,11 +61,13 @@ const AddressListItem = ({ address, children, sx }: RootProps) => {
 			});
 		}
 	};
+	const contextValue = useMemo(
+		() => ({ address, setPrimaryAddress, editAddress, handleDelete }),
+		[address, setPrimaryAddress, editAddress, handleDelete],
+	);
 
 	return (
-		<AddressContext.Provider
-			value={{ address, setPrimaryAddress, editAddress, handleDelete }}
-		>
+		<AddressContext.Provider value={contextValue}>
 			<TableRow
 				sx={{
 					display: "grid",
@@ -89,7 +91,7 @@ interface FieldProps {
 	render?: (value: FieldValue, address: Address) => ReactNode;
 }
 
-AddressListItem.Field = ({ field, render }: FieldProps) => {
+const AddressListItemField = ({ field, render }: FieldProps) => {
 	const ctx = useContext(AddressContext);
 	if (!ctx) return null;
 	const { address } = ctx;
@@ -105,6 +107,8 @@ AddressListItem.Field = ({ field, render }: FieldProps) => {
 	);
 };
 
+AddressListItem.Field = AddressListItemField;
+
 AddressListItem.Actions = ({ children }: { children: ReactNode }) => {
 	return (
 		<Box display="flex" alignItems="center" gap={1} justifySelf="end">
@@ -113,7 +117,7 @@ AddressListItem.Actions = ({ children }: { children: ReactNode }) => {
 	);
 };
 
-AddressListItem.Primary = () => {
+const AddressListItemPrimary = () => {
 	const ctx = useContext(AddressContext);
 	const t = useTranslations("Account.Addresses");
 	if (!ctx) return null;
@@ -135,7 +139,9 @@ AddressListItem.Primary = () => {
 	);
 };
 
-AddressListItem.Edit = () => {
+AddressListItem.Primary = AddressListItemPrimary;
+
+const AddressListItemEdit = () => {
 	const ctx = useContext(AddressContext);
 	if (!ctx) return null;
 	const { address, editAddress } = ctx;
@@ -149,7 +155,9 @@ AddressListItem.Edit = () => {
 	);
 };
 
-AddressListItem.Delete = () => {
+AddressListItem.Edit = AddressListItemEdit;
+
+const AddressListItemDelete = () => {
 	const ctx = useContext(AddressContext);
 	if (!ctx) return null;
 	const { address, handleDelete } = ctx;
@@ -163,4 +171,6 @@ AddressListItem.Delete = () => {
 	);
 };
 
+AddressListItem.Delete = AddressListItemDelete;
+
 export default AddressListItem;

package/src/pages/account/dashboard-header.tsx

@@ -15,7 +15,7 @@ import {
 } from "@mui/material";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
-import { createContext, type ReactNode, useContext } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
 import type { IconType } from "react-icons";
 import { MdMenu as Menu } from "react-icons/md";
 
@@ -44,14 +44,22 @@ const DashboardHeaderContext =
 interface RootProps {
 	children: ReactNode;
 }
+
+const renderSideNavMenuButton = (close: () => void) => (
+	<IconButton onClick={close}>
+		<Menu fontSize="small" />
+	</IconButton>
+);
+
 const DashboardHeader = ({ children }: RootProps) => {
 	const t = useTranslations();
 	const isTablet = useMediaQuery((theme: Theme) =>
 		theme.breakpoints.down(1025),
 	);
+	const contextValue = useMemo(() => ({ isTablet, t }), [isTablet, t]);
 
 	return (
-		<DashboardHeaderContext.Provider value={{ isTablet, t }}>
+		<DashboardHeaderContext.Provider value={contextValue}>
 			<StyledBox>
 				<FlexBox mt={2} className="headerHold">
 					{children}
@@ -61,7 +69,7 @@ const DashboardHeader = ({ children }: RootProps) => {
 	);
 };
 
-DashboardHeader.Title = ({
+const DashboardHeaderTitle = ({
 	title,
 	titleMessage,
 	Icon,
@@ -87,7 +95,9 @@ DashboardHeader.Title = ({
 	);
 };
 
-DashboardHeader.Buttons = ({ children }: { children: ReactNode }) => {
+DashboardHeader.Title = DashboardHeaderTitle;
+
+const DashboardHeaderButtons = ({ children }: { children: ReactNode }) => {
 	const ctx = useContext(DashboardHeaderContext);
 	if (!ctx) return null;
 	const { isTablet } = ctx;
@@ -108,7 +118,9 @@ DashboardHeader.Buttons = ({ children }: { children: ReactNode }) => {
 	);
 };
 
-DashboardHeader.GeneratedButton = ({
+DashboardHeader.Buttons = DashboardHeaderButtons;
+
+const DashboardHeaderGeneratedButton = ({
 	href,
 	text,
 }: {
@@ -130,17 +142,12 @@ DashboardHeader.GeneratedButton = ({
 	);
 };
 
+DashboardHeader.GeneratedButton = DashboardHeaderGeneratedButton;
+
 DashboardHeader.SideNav = ({ children }: { children?: ReactNode }) => {
 	return (
 		<div className="sidenav">
-			<SideNav
-				position="left"
-				handler={(close) => (
-					<IconButton onClick={close}>
-						<Menu fontSize="small" />
-					</IconButton>
-				)}
-			>
+			<SideNav position="left" handler={renderSideNavMenuButton}>
 				{children ?? <Navigation />}
 			</SideNav>
 		</div>

package/src/pages/account/orders/order-history-filters-panel.tsx

@@ -20,6 +20,7 @@ import {
 	type FilterOption,
 	FilterSourceType,
 	type OrderStatusFilter,
+	type OriginFilter,
 } from "./order-history-filter-types";
 import { useOrdersSearchAndFilter } from "./order-history-search-and-filter";
 
@@ -155,9 +156,9 @@ const OrdersFilterPanel = ({ children }: { children: React.ReactNode }) => {
 				</Button>
 				<Box>
 					{activeFilters.length > 0 &&
-						activeFilters.map((filter, index) => (
+						activeFilters.map((filter) => (
 							<Box
-								key={index}
+								key={`${filter?.sourceType}-${filter?.label}`}
 								sx={{
 									display: "inline-flex",
 									alignItems: "center",
@@ -247,13 +248,13 @@ const OriginsFilterList = () => {
 					flexWrap: "nowrap",
 				}}
 			>
-				{originOptions.map((originOption, index) => (
+				{originOptions.map((originOption: OriginFilter) => (
 					<FormControlLabel
-						key={index}
+						key={`${originOption?.value}-${originOption?.label}`}
 						control={
 							<Checkbox
 								checked={selectedOrigins.some(
-									(o) => o.value === originOption.value,
+									(o: OriginFilter) => o.value === originOption.value,
 								)}
 								onChange={() => handleSelectOrigin(originOption)}
 							/>
@@ -267,7 +268,8 @@ const OriginsFilterList = () => {
 };
 
 const CreatedDateFilterList = () => {
-	const { createdDate, handleSelectCreatedDate } = useOrdersSearchAndFilter();
+	const { createdDate, handleSelectCreatedDate, handleSetCreatedDate } =
+		useOrdersSearchAndFilter();
 	const t = useTranslations("Account.Orders");
 
 	return (
@@ -277,8 +279,8 @@ const CreatedDateFilterList = () => {
 			</Typography>
 			<Divider />
 			<RadioGroup value={createdDate?.label ?? ""}>
-				{createdDateOptions.map((createdDateOption, index) => (
-					<div key={index}>
+				{createdDateOptions.map((createdDateOption) => (
+					<div key={createdDateOption.label}>
 						<FormControlLabel
 							key={createdDateOption.label}
 							value={createdDateOption.label}
@@ -292,18 +294,17 @@ const CreatedDateFilterList = () => {
 							label={createdDateOption.label}
 						/>
 						{createdDateOption.label === "Custom Dates" &&
-							createdDate &&
-							createdDate.label === "Custom Dates" && (
+							createdDate?.label === "Custom Dates" && (
 								<Box mt={1} display="flex" flexDirection="column" gap={2}>
 									<TextField
 										label="From"
 										type="date"
 										value={createdDate?.startValue || ""}
-										onChange={(e) =>
-											handleSelectCreatedDate(
-												{ ...createdDate, startValue: e.target.value },
-												false,
-											)
+										onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+											handleSetCreatedDate({
+												...createdDate,
+												startValue: e.target.value,
+											})
 										}
 										slotProps={{
 											inputLabel: {
@@ -316,11 +317,11 @@ const CreatedDateFilterList = () => {
 										label="To"
 										type="date"
 										value={createdDate?.endValue || ""}
-										onChange={(e) =>
-											handleSelectCreatedDate(
-												{ ...createdDate, endValue: e.target.value },
-												false,
-											)
+										onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+											handleSetCreatedDate({
+												...createdDate,
+												endValue: e.target.value,
+											})
 										}
 										slotProps={{
 											inputLabel: {

package/src/pages/account/orders/order-history-header.tsx

@@ -25,17 +25,21 @@ const OrderHistoryTableHeader = ({
 	);
 };
 
-OrderHistoryTableHeader.OrderNumber = () => {
+const OrderHistoryTableHeaderOrderNumber = () => {
 	const t = useTranslations("Account.Orders");
 	return <Paragraph ellipsis>{t("orderNumberHeader")}</Paragraph>;
 };
 
-OrderHistoryTableHeader.OrderStatus = () => {
+OrderHistoryTableHeader.OrderNumber = OrderHistoryTableHeaderOrderNumber;
+
+const OrderHistoryTableHeaderOrderStatus = () => {
 	const t = useTranslations("Account.Orders");
 	return <Box textAlign="center">{t("orderStatusHeader")}</Box>;
 };
 
-OrderHistoryTableHeader.TransactionDate = () => {
+OrderHistoryTableHeader.OrderStatus = OrderHistoryTableHeaderOrderStatus;
+
+const OrderHistoryTableHeaderTransactionDate = () => {
 	const t = useTranslations("Account.Orders");
 	return (
 		<Paragraph textAlign={{ sm: "center", xs: "left" }}>
@@ -44,11 +48,17 @@ OrderHistoryTableHeader.TransactionDate = () => {
 	);
 };
 
-OrderHistoryTableHeader.TransactionAmount = () => {
+OrderHistoryTableHeader.TransactionDate =
+	OrderHistoryTableHeaderTransactionDate;
+
+const OrderHistoryTableHeaderTransactionAmount = () => {
 	const t = useTranslations("Account.Orders");
 	return (
 		<Paragraph textAlign="center">{t("transactionAmountHeader")}</Paragraph>
 	);
 };
 
+OrderHistoryTableHeader.TransactionAmount =
+	OrderHistoryTableHeaderTransactionAmount;
+
 export default OrderHistoryTableHeader;

package/src/pages/account/orders/order-history-root.tsx

@@ -74,11 +74,13 @@ const OrderHistory = ({ children }: { children: React.ReactNode }) => {
 
 OrderHistory.SearchAndFilter = OrdersSearchAndFilter;
 
-OrderHistory.Sort = () => {
+const OrderHistorySort = () => {
 	const { setSortColumn } = useOrderHistory();
 	return <OrdersSort setSortColumn={setSortColumn} />;
 };
 
+OrderHistory.Sort = OrderHistorySort;
+
 OrderHistory.Table = OrderHistoryTable;
 
 // OrderHistory.Table = () => {

package/src/pages/account/orders/order-history-row.tsx

@@ -62,12 +62,14 @@ const OrderHistoryTableRow = ({ children }: { children: React.ReactNode }) => {
 	);
 };
 
-OrderHistoryTableRow.OrderNumber = () => {
+const OrderHistoryTableRowOrderNumber = () => {
 	const { order } = useOrderHistoryTableRow();
 	return <H6 ellipsis>{order?.ChannelReferenceId}</H6>;
 };
 
-OrderHistoryTableRow.OrderStatus = () => {
+OrderHistoryTableRow.OrderNumber = OrderHistoryTableRowOrderNumber;
+
+const OrderHistoryTableRowOrderStatus = () => {
 	const { order } = useOrderHistoryTableRow();
 	const { label, color } = getStatusInfo(order.StatusValue ?? 0);
 	return (
@@ -77,7 +79,9 @@ OrderHistoryTableRow.OrderStatus = () => {
 	);
 };
 
-OrderHistoryTableRow.TransactionDate = () => {
+OrderHistoryTableRow.OrderStatus = OrderHistoryTableRowOrderStatus;
+
+const OrderHistoryTableRowTransactionDate = () => {
 	const { order } = useOrderHistoryTableRow();
 	return (
 		<Paragraph textAlign={{ sm: "center", xs: "left" }}>
@@ -86,7 +90,9 @@ OrderHistoryTableRow.TransactionDate = () => {
 	);
 };
 
-OrderHistoryTableRow.TransactionAmount = () => {
+OrderHistoryTableRow.TransactionDate = OrderHistoryTableRowTransactionDate;
+
+const OrderHistoryTableRowTransactionAmount = () => {
 	const { order } = useOrderHistoryTableRow();
 	const { formatCurrency } = useCurrencyFormatter();
 
@@ -97,6 +103,8 @@ OrderHistoryTableRow.TransactionAmount = () => {
 	);
 };
 
+OrderHistoryTableRow.TransactionAmount = OrderHistoryTableRowTransactionAmount;
+
 OrderHistoryTableRow.DetailsIcon = () => {
 	return (
 		<Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">