@evenicanpm/storefront-core 2.4.2 → 2.5.0

package/src/pages/account/orders/order-history-search-and-filter.tsx

@@ -4,7 +4,7 @@ import type {
 	SalesStatus,
 } from "@msdyn365-commerce/retail-proxy";
 import { Box } from "@mui/material";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import {
 	type CreatedDateFilter,
 	FilterSourceType,
@@ -226,10 +226,8 @@ type OrdersSearchAndFilterContextType = {
 	selectedOrigins: OriginFilter[];
 	handleSelectOrigin: (origin: OriginFilter) => void;
 	createdDate?: CreatedDateFilter;
-	handleSelectCreatedDate: (
-		date: CreatedDateFilter | undefined,
-		toggle?: boolean,
-	) => void;
+	handleSelectCreatedDate: (date: CreatedDateFilter | undefined) => void;
+	handleSetCreatedDate: (date: CreatedDateFilter | undefined) => void;
 	orderStatus?: OrderStatusFilter;
 	handleSelectOrderStatus: (status: OrderStatusFilter | undefined) => void;
 
@@ -291,15 +289,12 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 		});
 	};
 
-	const handleSelectCreatedDate = (
-		date: CreatedDateFilter | undefined,
-		toggle = true,
-	) => {
-		toggle
-			? setCreatedDate((prev) =>
-					prev?.label === date?.label ? undefined : date,
-				)
-			: setCreatedDate(date);
+	const handleSelectCreatedDate = (date: CreatedDateFilter | undefined) => {
+		setCreatedDate((prev) => (prev?.label === date?.label ? undefined : date));
+	};
+
+	const handleSetCreatedDate = (date: CreatedDateFilter | undefined) => {
+		setCreatedDate(date);
 	};
 
 	const handleSelectOrderStatus = (status: OrderStatusFilter | undefined) => {
@@ -313,6 +308,47 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 		setOrderSearchCriteria(searchCriteria);
 	};
 
+	const applySearchTextCriteria = (
+		orderSearchCriteria: OrderSearchCriteria,
+	): void => {
+		if (!searchText) {
+			return;
+		}
+
+		if (selectedSearchOption === 0) {
+			orderSearchCriteria.ChannelReferenceId = searchText;
+			return;
+		}
+
+		if (selectedSearchOption === 1) {
+			orderSearchCriteria.SalesId = searchText;
+			return;
+		}
+
+		if (selectedSearchOption === 2) {
+			const channelIds = stores
+				?.filter((store) =>
+					store.location.OrgUnitName?.toLocaleLowerCase().includes(
+						searchText.toLowerCase(),
+					),
+				)
+				.map((store) => store.location.ChannelId)
+				.filter((id): id is number => id !== undefined);
+
+			if (channelIds?.length) {
+				if (orderSearchCriteria.ChannelIds?.length) {
+					const intersectingChannelIds = channelIds.filter((id) =>
+						orderSearchCriteria.ChannelIds?.includes(id),
+					);
+
+					orderSearchCriteria.ChannelIds = intersectingChannelIds;
+				} else {
+					orderSearchCriteria.ChannelIds = channelIds;
+				}
+			}
+		}
+	};
+
 	const createSearchCriteria = (): OrderSearchCriteria => {
 		const orderSearchCriteria: OrderSearchCriteria = {};
 
@@ -322,7 +358,7 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 		}
 		const salesStatus = orderStatus?.value ?? undefined;
 		const salesStatuses: SalesStatus[] =
-			salesStatus !== undefined ? [salesStatus] : [];
+			salesStatus === undefined ? [] : [salesStatus];
 		if (salesStatuses.length > 0) {
 			orderSearchCriteria.OrderStatusValues = salesStatuses;
 		}
@@ -333,34 +369,7 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 			orderSearchCriteria.EndDateTime = endDate;
 		}
 
-		if (searchText) {
-			if (selectedSearchOption === 0) {
-				orderSearchCriteria.ChannelReferenceId = searchText;
-			} else if (selectedSearchOption === 1) {
-				orderSearchCriteria.SalesId = searchText;
-			} else if (selectedSearchOption === 2) {
-				const channelIds = stores
-					?.filter((store) =>
-						store.location.OrgUnitName?.toLocaleLowerCase().includes(
-							searchText.toLowerCase(),
-						),
-					)
-					.map((store) => store.location.ChannelId)
-					.filter((id): id is number => id !== undefined);
-
-				if (channelIds?.length) {
-					if (orderSearchCriteria.ChannelIds?.length) {
-						const intersectingChannelIds = channelIds.filter((id) =>
-							orderSearchCriteria.ChannelIds?.includes(id),
-						);
-
-						orderSearchCriteria.ChannelIds = intersectingChannelIds;
-					} else {
-						orderSearchCriteria.ChannelIds = channelIds;
-					}
-				}
-			}
-		}
+		applySearchTextCriteria(orderSearchCriteria);
 
 		return orderSearchCriteria;
 	};
@@ -395,7 +404,9 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 						Number.isNaN(customStart.getTime()) ||
 						Number.isNaN(customEnd.getTime())
 					) {
-						throw new Error("Invalid date format in customized date range.");
+						throw new TypeError(
+							"Invalid date format in customized date range.",
+						);
 					}
 
 					startDate.setTime(customStart.getTime());
@@ -407,7 +418,9 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 				}
 				break;
 			default:
-				throw new Error(`Unsupported date filter option: ${option}`);
+				throw new Error(
+					`Unsupported date filter option: ${option?.label ?? "unknown"}`,
+				);
 		}
 
 		return { startDate, endDate };
@@ -421,20 +434,36 @@ const OrdersSearchAndFilter = ({ children }: { children: React.ReactNode }) => {
 			: new Date(year, month - 1, day, 0, 0, 0, 0);
 	};
 
-	const value = {
-		searchText,
-		setSearchText,
-		selectedSearchOption,
-		setSelectedSearchOption,
-		originOptions,
-		selectedOrigins,
-		handleSelectOrigin,
-		createdDate,
-		handleSelectCreatedDate,
-		orderStatus,
-		handleSelectOrderStatus,
-		executeSearch,
-	};
+	const value = useMemo(
+		() => ({
+			searchText,
+			setSearchText,
+			selectedSearchOption,
+			setSelectedSearchOption,
+			originOptions,
+			selectedOrigins,
+			handleSelectOrigin,
+			createdDate,
+			handleSelectCreatedDate,
+			handleSetCreatedDate,
+			orderStatus,
+			handleSelectOrderStatus,
+			executeSearch,
+		}),
+		[
+			searchText,
+			selectedSearchOption,
+			originOptions,
+			selectedOrigins,
+			handleSelectOrigin,
+			createdDate,
+			handleSelectCreatedDate,
+			handleSetCreatedDate,
+			orderStatus,
+			handleSelectOrderStatus,
+			executeSearch,
+		],
+	);
 
 	return (
 		<OrdersSearchAndFilterContext.Provider value={value}>

package/src/pages/account/orders/order-history-search-dropdown.tsx

@@ -14,11 +14,31 @@ interface Props {
 	searchOptions: DisplaySearchOption[];
 }
 
+const SearchOptionItem = ({
+	item,
+	onClose,
+	handleChange,
+}: {
+	item: DisplaySearchOption;
+	onClose: () => void;
+	handleChange: (optionId: number) => void;
+}) => (
+	<MenuItem
+		key={item.id}
+		onClick={() => {
+			handleChange(item.id);
+			onClose();
+		}}
+	>
+		{item.name}
+	</MenuItem>
+);
+
 export default function OrdersSearchDropdown({
 	title,
 	handleChange,
 	searchOptions,
-}: Props) {
+}: Readonly<Props>) {
 	const { breakpoints } = useTheme();
 	const _searchOptions = Array.isArray(searchOptions) ? searchOptions : [];
 	const options: DisplaySearchOption[] = [
@@ -37,15 +57,12 @@ export default function OrdersSearchDropdown({
 			)}
 			options={(onClose) => {
 				return options.map((item: DisplaySearchOption) => (
-					<MenuItem
+					<SearchOptionItem
 						key={item.id}
-						onClick={() => {
-							handleChange(item.id);
-							onClose();
-						}}
-					>
-						{item.name}
-					</MenuItem>
+						item={item}
+						onClose={onClose}
+						handleChange={handleChange}
+					/>
 				));
 			}}
 		/>

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

@@ -41,7 +41,9 @@ interface OrderSortProps {
 	setSortColumn: (selectedSortColumn: SortColumn) => void;
 }
 
-export default function OrdersSort({ setSortColumn }: OrderSortProps) {
+export default function OrdersSort({
+	setSortColumn,
+}: Readonly<OrderSortProps>) {
 	const [selectedSort, setSelectedSort] = useState<number>(0);
 	const t = useTranslations("Account.Orders");
 

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

@@ -1,6 +1,7 @@
+import type { SalesOrder } from "@evenicanpm/storefront-core/src/api-manager/schemas/order.schema";
 import NoRecords from "@evenicanpm/storefront-core/src/components/no-records";
 import { Box, CircularProgress } from "@mui/material";
-import { cloneElement, Fragment } from "react";
+import { cloneElement, Fragment, useMemo } from "react";
 import OrderHistoryHeader from "./order-history-header";
 import OrdersPagination from "./order-history-pagination";
 import { useOrderHistory } from "./order-history-root";
@@ -8,11 +9,30 @@ import OrderHistoryRow, {
 	OrderHistoryTableRowContext,
 } from "./order-history-row";
 
+const OrderHistoryTableRowProvider = ({
+	order,
+	children,
+}: {
+	order: SalesOrder;
+	children: React.ReactNode;
+}) => {
+	const contextValue = useMemo(() => ({ order }), [order]);
+	return (
+		<OrderHistoryTableRowContext.Provider value={contextValue}>
+			{children}
+		</OrderHistoryTableRowContext.Provider>
+	);
+};
+
 const OrderHistoryTable = ({ children }: { children: React.ReactNode }) => {
 	return <>{children}</>;
 };
 
-OrderHistoryTable.List = ({ children }: { children: React.ReactElement }) => {
+const OrderHistoryTableList = ({
+	children,
+}: {
+	children: React.ReactElement;
+}) => {
 	const { orders, isLoading } = useOrderHistory();
 
 	if (isLoading) {
@@ -30,12 +50,12 @@ OrderHistoryTable.List = ({ children }: { children: React.ReactElement }) => {
 	return (
 		<Fragment>
 			{orders.map((order, index) => (
-				<OrderHistoryTableRowContext.Provider
+				<OrderHistoryTableRowProvider
 					key={order.RecordId ?? index}
-					value={{ order }}
+					order={order}
 				>
 					{cloneElement(children)}
-				</OrderHistoryTableRowContext.Provider>
+				</OrderHistoryTableRowProvider>
 			))}
 			<Box mt={4}>
 				<OrderHistoryTable.Pagination>
@@ -47,6 +67,8 @@ OrderHistoryTable.List = ({ children }: { children: React.ReactElement }) => {
 	);
 };
 
+OrderHistoryTable.List = OrderHistoryTableList;
+
 OrderHistoryTable.Header = OrderHistoryHeader;
 OrderHistoryTable.Row = OrderHistoryRow;
 OrderHistoryTable.Pagination = OrdersPagination;

package/src/pages/account/orders/order-progress.tsx

@@ -13,7 +13,7 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 import { useTranslations } from "next-intl";
-import { createContext, Fragment, useContext } from "react";
+import { createContext, Fragment, useContext, useMemo } from "react";
 import { MdDone as Done } from "react-icons/md";
 
 // STYLED COMPONENTS
@@ -59,18 +59,20 @@ const OrderProgress = ({
 }: React.PropsWithChildren<Props>) => {
 	const STEP_ICONS = [PackageBox, TruckFilled, Delivery];
 	const STATUS_LIST = ["Packaging", "Shipping", "Delivering", "Complete"];
+	const contextValue = useMemo(
+		() => ({ status, stepIcons: STEP_ICONS, statusList: STATUS_LIST }),
+		[status],
+	);
 
 	return (
-		<OrderProgressContext.Provider
-			value={{ status, stepIcons: STEP_ICONS, statusList: STATUS_LIST }}
-		>
+		<OrderProgressContext.Provider value={contextValue}>
 			<Card sx={{ p: "2rem 1.5rem", mb: 4 }}>{children}</Card>
 		</OrderProgressContext.Provider>
 	);
 };
 
 // SUBCOMPONENTS
-OrderProgress.Steps = () => {
+const OrderProgressSteps = () => {
 	const context = useContext(OrderProgressContext);
 	if (!context) return null;
 
@@ -118,7 +120,9 @@ OrderProgress.Steps = () => {
 	);
 };
 
-OrderProgress.DeliveryDate = () => {
+OrderProgress.Steps = OrderProgressSteps;
+
+const OrderProgressDeliveryDate = () => {
 	const t = useTranslations("Account.OrderDetails");
 	const context = useContext(OrderProgressContext);
 	if (!context) return null;
@@ -150,4 +154,6 @@ OrderProgress.DeliveryDate = () => {
 	);
 };
 
+OrderProgress.DeliveryDate = OrderProgressDeliveryDate;
+
 export default OrderProgress;

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

@@ -12,7 +12,7 @@ import IconButton from "@mui/material/IconButton";
 import { format } from "date-fns";
 import Link from "next/link";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { MdEast as East } from "react-icons/md";
 
 type Props = { order: SalesOrder };
@@ -36,9 +36,13 @@ const OrderRowContext = createContext<{
 
 const OrderRow = ({ order, children }: React.PropsWithChildren<Props>) => {
 	const { formatCurrency } = useCurrencyFormatter();
+	const contextValue = useMemo(
+		() => ({ order, formatCurrency }),
+		[order, formatCurrency],
+	);
 
 	return (
-		<OrderRowContext.Provider value={{ order, formatCurrency }}>
+		<OrderRowContext.Provider value={contextValue}>
 			<Link href={`/account/orders/${order.SalesId}`}>
 				<TableRow sx={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
 					{children}
@@ -48,14 +52,16 @@ const OrderRow = ({ order, children }: React.PropsWithChildren<Props>) => {
 	);
 };
 
-OrderRow.OrderNumber = () => {
+const OrderRowOrderNumber = () => {
 	const context = useContext(OrderRowContext);
 	if (!context) return null;
 	const { order } = context;
 	return <H6 ellipsis>{order?.ChannelReferenceId}</H6>;
 };
 
-OrderRow.Status = () => {
+OrderRow.OrderNumber = OrderRowOrderNumber;
+
+const OrderRowStatus = () => {
 	const context = useContext(OrderRowContext);
 	if (!context) return null;
 	const { order } = context;
@@ -67,7 +73,9 @@ OrderRow.Status = () => {
 	);
 };
 
-OrderRow.Date = () => {
+OrderRow.Status = OrderRowStatus;
+
+const OrderRowDate = () => {
 	const context = useContext(OrderRowContext);
 	if (!context) return null;
 	const { order } = context;
@@ -78,7 +86,9 @@ OrderRow.Date = () => {
 	);
 };
 
-OrderRow.Total = () => {
+OrderRow.Date = OrderRowDate;
+
+const OrderRowTotal = () => {
 	const context = useContext(OrderRowContext);
 	if (!context) return null;
 	const { order, formatCurrency } = context;
@@ -89,6 +99,8 @@ OrderRow.Total = () => {
 	);
 };
 
+OrderRow.Total = OrderRowTotal;
+
 OrderRow.Action = () => {
 	return (
 		<Box display={{ sm: "inline-flex", xs: "none" }} justifyContent="end">

package/src/pages/account/orders/order-summary.tsx

@@ -11,7 +11,7 @@ import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid2";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 type Props = { order: SalesOrder };
 
@@ -23,9 +23,13 @@ const OrderSummaryContext = createContext<{
 // Compound Component
 const OrderSummary = ({ order, children }: React.PropsWithChildren<Props>) => {
 	const { formatCurrency } = useCurrencyFormatter();
+	const contextValue = useMemo(
+		() => ({ order, formatCurrency }),
+		[order, formatCurrency],
+	);
 
 	return (
-		<OrderSummaryContext.Provider value={{ order, formatCurrency }}>
+		<OrderSummaryContext.Provider value={contextValue}>
 			<Grid container spacing={3}>
 				{children}
 			</Grid>
@@ -47,7 +51,7 @@ OrderSummary.SummaryWrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 // Subcomponents
-OrderSummary.AddressHeading = () => {
+const OrderSummaryAddressHeading = () => {
 	const t = useTranslations("Account.OrderDetails");
 	return (
 		<H5 mt={0} mb={2}>
@@ -56,7 +60,9 @@ OrderSummary.AddressHeading = () => {
 	);
 };
 
-OrderSummary.AddressContent = () => {
+OrderSummary.AddressHeading = OrderSummaryAddressHeading;
+
+const OrderSummaryAddressContent = () => {
 	const context = useContext(OrderSummaryContext);
 	if (!context) return null;
 	const { order } = context;
@@ -70,7 +76,9 @@ OrderSummary.AddressContent = () => {
 	);
 };
 
-OrderSummary.SummaryHeading = () => {
+OrderSummary.AddressContent = OrderSummaryAddressContent;
+
+const OrderSummarySummaryHeading = () => {
 	const t = useTranslations("Account.OrderDetails");
 	return (
 		<H5 mt={0} mb={2}>
@@ -79,7 +87,9 @@ OrderSummary.SummaryHeading = () => {
 	);
 };
 
-OrderSummary.ListItem = ({
+OrderSummary.SummaryHeading = OrderSummarySummaryHeading;
+
+const OrderSummaryListItem = ({
 	title,
 	property,
 }: {
@@ -101,9 +111,11 @@ OrderSummary.ListItem = ({
 	);
 };
 
+OrderSummary.ListItem = OrderSummaryListItem;
+
 OrderSummary.Divider = Divider;
 
-OrderSummary.Total = () => {
+const OrderSummaryTotal = () => {
 	const t = useTranslations("Account.OrderDetails");
 	const context = useContext(OrderSummaryContext);
 	if (!context) return null;
@@ -117,9 +129,13 @@ OrderSummary.Total = () => {
 	);
 };
 
-OrderSummary.PaidBy = ({ children }: { children?: React.ReactNode }) => {
+OrderSummary.Total = OrderSummaryTotal;
+
+const OrderSummaryPaidBy = ({ children }: { children?: React.ReactNode }) => {
 	const t = useTranslations("Account.OrderDetails");
 	return <Paragraph>{children ?? t("paidBy")}</Paragraph>;
 };
 
+OrderSummary.PaidBy = OrderSummaryPaidBy;
+
 export default OrderSummary;

package/src/pages/account/orders/ordered-products.tsx

@@ -22,7 +22,7 @@ import Grid from "@mui/material/Grid2";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import type React from "react";
-import { createContext } from "react";
+import { createContext, useMemo } from "react";
 
 type Props = { order: SalesOrder };
 
@@ -36,8 +36,12 @@ const OrderedProducts = ({
 	children,
 }: React.PropsWithChildren<Props>) => {
 	const { formatCurrency } = useCurrencyFormatter();
+	const contextValue = useMemo(
+		() => ({ order, formatCurrency }),
+		[order, formatCurrency],
+	);
 	return (
-		<OrderedProductsContext.Provider value={{ order, formatCurrency }}>
+		<OrderedProductsContext.Provider value={contextValue}>
 			<Card sx={{ p: 0, mb: "30px" }}>{children}</Card>
 		</OrderedProductsContext.Provider>
 	);
@@ -50,7 +54,7 @@ OrderedProducts.Header = ({ children }: React.PropsWithChildren) => (
 	</FlexBetween>
 );
 
-OrderedProducts.HeaderItem = ({
+const OrderedProductsHeaderItem = ({
 	title,
 	value,
 }: {
@@ -66,6 +70,8 @@ OrderedProducts.HeaderItem = ({
 	);
 };
 
+OrderedProducts.HeaderItem = OrderedProductsHeaderItem;
+
 OrderedProducts.List = ({ children }: React.PropsWithChildren) => (
 	<Grid container spacing={2} padding={"20px 15px 10px"} alignItems={"center"}>
 		{children}
@@ -120,7 +126,7 @@ OrderedProducts.Title = ({ item }: { item: SalesLine }) => {
 	return <H6>{item?.Product?.Name}</H6>;
 };
 
-OrderedProducts.Price = ({ item }: { item: SalesLine }) => {
+const OrderedProductsPrice = ({ item }: { item: SalesLine }) => {
 	const { formatCurrency } = useCurrencyFormatter();
 	return (
 		<Paragraph color="grey.600">
@@ -129,6 +135,8 @@ OrderedProducts.Price = ({ item }: { item: SalesLine }) => {
 	);
 };
 
+OrderedProducts.Price = OrderedProductsPrice;
+
 OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
 	if (!item.Product?.Dimensions?.length) {
 		return (
@@ -150,7 +158,7 @@ OrderedProducts.Dimensions = ({ item }: { item: SalesLine }) => {
 	);
 };
 
-OrderedProducts.ReviewButton = () => {
+const OrderedProductsReviewButton = () => {
 	const t = useTranslations("Account.OrderDetails");
 	return (
 		<Grid size={{ xs: 4, sm: 3 }}>
@@ -163,4 +171,6 @@ OrderedProducts.ReviewButton = () => {
 	);
 };
 
+OrderedProducts.ReviewButton = OrderedProductsReviewButton;
+
 export default OrderedProducts;

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

@@ -12,7 +12,12 @@ import Card from "@mui/material/Card";
 import type { Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslations } from "next-intl";
-import { createContext, type PropsWithChildren, useContext } from "react";
+import {
+	createContext,
+	type PropsWithChildren,
+	useContext,
+	useMemo,
+} from "react";
 
 interface UserInfoContextValue {
 	user: User;
@@ -26,9 +31,10 @@ interface UserInfoProps extends PropsWithChildren {
 
 const UserInfo = ({ user, children }: UserInfoProps) => {
 	const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
+	const contextValue = useMemo(() => ({ user }), [user]);
 
 	return (
-		<UserInfoContext.Provider value={{ user }}>
+		<UserInfoContext.Provider value={contextValue}>
 			<Card
 				sx={{
 					mt: 3,
@@ -59,7 +65,7 @@ interface ItemProps {
 	transform?: (val: string) => string;
 }
 
-UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
+const UserInfoItem = ({ title, field, value, transform }: ItemProps) => {
 	const ctx = useContext(UserInfoContext);
 	const t = useTranslations("Account.Profile");
 	if (!ctx) return null;
@@ -85,4 +91,6 @@ UserInfo.Item = ({ title, field, value, transform }: ItemProps) => {
 	);
 };
 
+UserInfo.Item = UserInfoItem;
+
 export default UserInfo;

package/src/pages/account/table-row-skeleton.tsx

@@ -9,7 +9,7 @@ interface TableRowSkeletonProps {
 
 export default function TableRowSkeleton({
 	sx = { gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" },
-}: TableRowSkeletonProps) {
+}: Readonly<TableRowSkeletonProps>) {
 	return (
 		<TableRow sx={sx}>
 			<Skeleton variant="text" width="60%" />