@evenicanpm/storefront-core 1.3.0 → 1.6.0

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

@@ -25,7 +25,7 @@ export default function DeliveryDate({
 	handleChange,
 	touched,
 	values,
-}: Props) {
+}: Readonly<Props>) {
 	const [dateList, setDateList] = useState<{ label: string; value: string }[]>(
 		[],
 	);

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

@@ -155,21 +155,20 @@ const DeliveryOptions: DeliveryOptionsCompound = (props) => {
 
 	return (
 		<>
-			{children ? (
-				children
-			) : stepViewState === "preview" ? (
-				<DeliveryOptions.Preview
-					deliveryOptions={deliveryOptions}
-					selectedOption={selectedOption}
-				/>
-			) : (
-				<DeliveryOptions.Form
-					deliveryOptions={deliveryOptions}
-					deliveryUnavailable={deliveryUnavailable}
-					selectedOption={selectedOption}
-					onChange={handleOptionChange}
-				/>
-			)}
+			{children ||
+				(stepViewState === "preview" ? (
+					<DeliveryOptions.Preview
+						deliveryOptions={deliveryOptions}
+						selectedOption={selectedOption}
+					/>
+				) : (
+					<DeliveryOptions.Form
+						deliveryOptions={deliveryOptions}
+						deliveryUnavailable={deliveryUnavailable}
+						selectedOption={selectedOption}
+						onChange={handleOptionChange}
+					/>
+				))}
 		</>
 	);
 };

package/src/pages-v2/confirmation/confirmation-summary.tsx

@@ -68,16 +68,17 @@ OrderSummary.Title = () => {
 
 OrderSummary.Item = ({ label, field }: ItemProps) => {
 	const ctx = useContext(SummaryContext);
-	if (!ctx) return null;
 	const t = useTranslations("Checkout.Summary");
+	if (!ctx) return null;
 	const { formatCurrency, order } = ctx;
 	const value = order[field];
-	const numericValue =
-		typeof value === "number"
-			? value
-			: typeof value === "string"
-				? parseFloat(value)
-				: 0;
+	let numericValue = 0;
+
+	if (typeof value === "number") {
+		numericValue = value;
+	} else if (typeof value === "string") {
+		numericValue = Number.parseFloat(value);
+	}
 
 	return (
 		<FlexBetween mb={1}>

package/src/pages-v2/confirmation/ordered-products.tsx

@@ -35,10 +35,10 @@ export const OrderedProducts = ({ order, children }: Props) => {
 
 OrderedProducts.Header = () => {
 	const ctx = useContext(OrderedProductsContext);
-	if (!ctx) return null;
 	const t = useTranslations("Confirmation");
-	const order = ctx;
 	const { dateTime } = useFormatter();
+	if (!ctx) return null;
+	const order = ctx;
 
 	return (
 		<FlexBetween
@@ -128,7 +128,7 @@ OrderedProducts.Dimensions = ({ line }: LineProps) => {
 	return (
 		<Grid size={{ xs: 8, sm: 4 }}>
 			{line.Product.Dimensions.map((dim, i) => (
-				<Paragraph key={i} paddingLeft="15px">
+				<Paragraph key={`dim-${i + 1}`} paddingLeft="15px">
 					<Span>{ProductDimensionType[dim.DimensionTypeValue || 0]}:</Span>
 					<Span sx={{ ml: 1 }}>{dim.DimensionValue?.Value}</Span>
 				</Paragraph>

package/src/pages-v2/product-details/bopis/pickup-option-select.tsx

@@ -75,7 +75,7 @@ const PickupOptionSelect = ({
 	);
 
 	const handlePickupClick = () => {
-		if (selectedOption && selectedOption.Code) {
+		if (selectedOption?.Code) {
 			const bopisInput: AddToCartBopisInput = {
 				warehouseId: storeId,
 				deliveryMode: selectedOption.Code,

package/src/pages-v2/product-details/bopis/store-card/shop-card.tsx

@@ -35,7 +35,7 @@ type Props = {
 	inventoryRecord: ProductWarehouseInventoryAvailability | undefined;
 };
 
-export default function ShopCard(props: Props) {
+export default function ShopCard(props: Readonly<Props>) {
 	const { name, address, actionArea, openFrom, openTo, storeHours } =
 		props || {};
 

package/src/pages-v2/product-details/checkbox-label.tsx

@@ -9,7 +9,7 @@ interface Props extends CheckboxProps {
 }
 // ==============================================================
 
-export default function CheckboxLabel({ label, ...props }: Props) {
+export default function CheckboxLabel({ label, ...props }: Readonly<Props>) {
 	return (
 		<FormControlLabel
 			label={label}

package/src/pages-v2/product-details/frequently-bought.tsx

@@ -32,7 +32,7 @@ const WrapperBox = styled(Box)(({ theme }) => ({
 type Props = { products: Product[] };
 // ============================================================
 
-export default function FrequentlyBought({ products }: Props) {
+export default function FrequentlyBought({ products }: Readonly<Props>) {
 	return (
 		<WrapperBox mb={7.5}>
 			<H3 mb={3}>Frequently Bought Together</H3>

package/src/pages-v2/product-details/frequently-product-card.tsx

@@ -25,7 +25,7 @@ interface Props {
 }
 // =======================================================
 
-export default function FrequentlyProductCard(props: Props) {
+export default function FrequentlyProductCard(props: Readonly<Props>) {
 	const {
 		imgUrl = "/assets/images/products/Rectangle 116.png",
 		price,

package/src/pages-v2/product-details/product-comment.tsx

@@ -24,7 +24,7 @@ interface Props {
 }
 // ===========================================================
 
-export default function ProductComment(props: Props) {
+export default function ProductComment(props: Readonly<Props>) {
 	const { name, imgUrl, rating, date, comment } = props || {};
 
 	return (

package/src/pages-v2/product-details/product-description.tsx

@@ -5,14 +5,14 @@ import type { AttributeValue } from "@msdyn365-commerce/retail-proxy";
 
 type Props = { attributes: AttributeValue[] };
 
-export default function ProductDescription({ attributes }: Props) {
+export default function ProductDescription({ attributes }: Readonly<Props>) {
 	return (
 		<div>
 			<H3 mb={2}>Specifications:</H3>
 			{attributes?.map((attr, index) => {
 				if (attr?.TextValue && attr?.Name)
 					return (
-						<div key={index}>
+						<div key={`attr-${index + 1}`}>
 							{attr.Name}: {attr.TextValue}
 						</div>
 					);

package/src/pages-v2/product-details/product-filter-card.tsx

@@ -71,7 +71,10 @@ interface Props {
 }
 // ============================================================================
 
-export default function ProductFilterCard({ filters, changeFilters }: Props) {
+export default function ProductFilterCard({
+	filters,
+	changeFilters,
+}: Readonly<Props>) {
 	const [collapsed, setCollapsed] = useState(true);
 
 	const handleChangePrice = (values: number[]) => {

package/src/pages-v2/product-details/product-intro/compound/product-intro-images.tsx

@@ -21,7 +21,7 @@ type Props = {
 /**
  * @category Compound Component
  */
-export default function ProductImages({ children }: Props) {
+export default function ProductImages({ children }: Readonly<Props>) {
 	const [selectedImageIndex, setSelectedImageIndex] = useState<number>(0);
 
 	const ctx = useContext(ProductIntroContext);
@@ -34,12 +34,19 @@ export default function ProductImages({ children }: Props) {
 	 * VARIANT SELECTION - IF VARIANT HAS IMAGES, USE THOSE
 	 * IF NOT USE masterProduct
 	 */
-	const images =
-		Array.isArray(selectedVariant?.Images) && selectedVariant?.Images.length > 0
-			? selectedVariant?.Images
-			: Array.isArray(masterProduct?.Images) && masterProduct?.Images.length > 0
-				? masterProduct?.Images
-				: [];
+	let images: string[] = [];
+
+	if (
+		Array.isArray(selectedVariant?.Images) &&
+		selectedVariant.Images.length > 0
+	) {
+		images = selectedVariant.Images;
+	} else if (
+		Array.isArray(masterProduct?.Images) &&
+		masterProduct.Images.length > 0
+	) {
+		images = masterProduct.Images;
+	}
 
 	const primaryImageUrl =
 		selectedVariant?.PrimaryImageUrl || masterProduct?.PrimaryImageUrl || "";
@@ -80,30 +87,28 @@ ProductImages.Thumbnails = () => {
 	const { images, handleImageClick, selectedImageIndex } = ctx;
 
 	return (
-		<>
-			<FlexBox overflow="auto" gap={1} justifyContent="center">
-				{images?.map((url: string, ind: number) => {
-					return (
-						<FlexRowCenter
-							key={ind}
-							width={64}
-							height={64}
-							minWidth={64}
-							bgcolor="white"
-							border="1px solid"
-							borderRadius="10px"
-							style={{ cursor: "pointer" }}
-							onClick={handleImageClick(ind)}
-							borderColor={
-								selectedImageIndex === ind ? "primary.main" : "grey.400"
-							}
-						>
-							<ThumbnailWithSkeleton src={url} />
-						</FlexRowCenter>
-					);
-				})}
-			</FlexBox>
-		</>
+		<FlexBox overflow="auto" gap={1} justifyContent="center">
+			{images?.map((url: string, ind: number) => {
+				return (
+					<FlexRowCenter
+						key={`thumbnail-${ind + 1}`}
+						width={64}
+						height={64}
+						minWidth={64}
+						bgcolor="white"
+						border="1px solid"
+						borderRadius="10px"
+						style={{ cursor: "pointer" }}
+						onClick={handleImageClick(ind)}
+						borderColor={
+							selectedImageIndex === ind ? "primary.main" : "grey.400"
+						}
+					>
+						<ThumbnailWithSkeleton src={url} />
+					</FlexRowCenter>
+				);
+			})}
+		</FlexBox>
 	);
 };
 

package/src/pages-v2/product-details/product-intro/compound/product-intro.tsx

@@ -14,7 +14,7 @@ import type React from "react";
  */
 type Props = { product: ProductDetails; children: React.ReactNode };
 
-export default function ProductIntro({ product, children }: Props) {
+export default function ProductIntro({ product, children }: Readonly<Props>) {
 	// HOOKS
 	const {
 		selectedVariant,

package/src/pages-v2/product-details/product-intro/compound/thumbnail-with-skeleton.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
  * Shows a skeleton until the image loads
  * @category Sub-Component
  */
-function ThumbnailWithSkeleton({ src }: { src: string }) {
+function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
 	const [loaded, setLoaded] = useState(false);
 
 	return (

package/src/pages-v2/product-details/product-intro/utils.ts

@@ -4,8 +4,7 @@ export const getInventoryLabel = (
 	shippingInventoryData?: ProductWarehouseInventoryInformation,
 ): string | null => {
 	const aggregate =
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+		shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 	if (aggregate) {
 		const { TotalAvailableInventoryLevelLabel } = aggregate;
 		return TotalAvailableInventoryLevelLabel || null;
@@ -19,8 +18,7 @@ export const checkProductOOS = (
 	//TODO: Incorporate global inventory enabled flag.
 	const OOSCode = "OOS"; // Always means out of stock
 	const aggregate =
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-		shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+		shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 	if (aggregate) {
 		const { TotalAvailableInventoryLevelCode } = aggregate;
 		return TotalAvailableInventoryLevelCode === OOSCode;

package/src/pages-v2/product-details/product-review.tsx

@@ -48,7 +48,7 @@ export default function ProductReview() {
 	return (
 		<div>
 			{commentList.map((item, ind) => (
-				<ProductComment {...item} key={ind} />
+				<ProductComment {...item} key={`comment-${ind + 1}`} />
 			))}
 
 			<H2 fontWeight="600" mt={7} mb={2.5}>

package/src/pages-v2/product-details/product-tabs.tsx

@@ -37,7 +37,7 @@ interface TabPanelProps {
 	value: number;
 }
 
-function CustomTabPanel(props: TabPanelProps) {
+function CustomTabPanel(props: Readonly<TabPanelProps>) {
 	const { children, value, index, ...other } = props;
 
 	return (
@@ -52,7 +52,10 @@ const TabsContext = createContext<TabsContext | null>(null);
 /**
  * @category Compound Component
  */
-export default function ProductTabs({ productAttributes, children }: Props) {
+export default function ProductTabs({
+	productAttributes,
+	children,
+}: Readonly<Props>) {
 	const [selectedOption, setSelectedOption] = useState(0);
 	const handleOptionClick = (_: React.SyntheticEvent, value: number) =>
 		setSelectedOption(value);

package/src/pages-v2/product-details/related-products.tsx

@@ -12,7 +12,7 @@ import Grid from "@mui/material/Grid2";
 type Props = { RecordId: number };
 // ==============================================================
 
-export default function RelatedProducts({ RecordId }: Props) {
+export default function RelatedProducts({ RecordId }: Readonly<Props>) {
 	const { data: products } = GetRelatedProductsDataFetcher.useData({
 		id: RecordId,
 	});
@@ -21,12 +21,15 @@ export default function RelatedProducts({ RecordId }: Props) {
 			<H3 mb={3}>Related Products</H3>
 
 			<Grid container spacing={3}>
-				{products?.map((item, ind) => (
-					<Grid size={{ lg: 3, md: 4, sm: 6, xs: 12 }} key={ind}>
+				{products?.map((item) => (
+					<Grid
+						size={{ lg: 3, md: 4, sm: 6, xs: 12 }}
+						key={item.RecordId ?? item.ItemId}
+					>
 						<ProductCard
 							product={{
 								id: item.ItemId ?? "",
-								slug: String(item?.RecordId) ?? "",
+								slug: String(item?.RecordId ?? ""),
 								title: item.Name ?? "",
 								price: item.Price ?? 0,
 								imgUrl: item.PrimaryImageUrl ?? "",

package/src/pages-v2/product-list/breadcrumbs.tsx

@@ -17,7 +17,7 @@ export default function CategoryBreadcrumbs({
 	breadcrumbs,
 	locale,
 	productName,
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Breadcrumbs>
 			{breadcrumbs.map((bc, index) =>

package/src/pages-v2/product-list/checkbox-label.tsx

@@ -9,7 +9,7 @@ interface Props extends CheckboxProps {
 }
 // ==============================================================
 
-export default function CheckboxLabel({ label, ...props }: Props) {
+export default function CheckboxLabel({ label, ...props }: Readonly<Props>) {
 	return (
 		<FormControlLabel
 			label={label}

package/src/pages-v2/product-list/facet-group.tsx

@@ -31,7 +31,7 @@ export default function FacetGroup({
 	facet,
 	selectedRefiners,
 	handleRefinerSelect,
-}: Props) {
+}: Readonly<Props>) {
 	const isAnyRefinerFromFacetSelected = () =>
 		facet.Values?.some((v) => isRefinerSelected(v));
 	const isRefinerSelected = (r1: ProductRefinerValue) =>

package/src/pages-v2/product-list/list-filter.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import CheckboxLabel from "./checkbox-label";
 import type { RenderedFacetProps } from "./facet-group";
 
-type Props = RenderedFacetProps & NonNullable<unknown>;
+type Props = RenderedFacetProps;
 
 const generateKey = (f: ProductRefinerValue) => {
 	return `${f.LeftValueBoundString}-${f.RefinerRecordId}`;
@@ -18,7 +18,7 @@ export default function ListFilter({
 	facet,
 	handleRefinerSelect,
 	isRefinerSelected,
-}: Props) {
+}: Readonly<Props>) {
 	const createFacetLabel = (f: ProductRefinerValue) => {
 		const label = f.LeftValueBoundLocalizedString || f.LeftValueBoundString;
 		return (

package/src/pages-v2/product-list/product-list-context.tsx

@@ -117,8 +117,10 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 			const refiners = newInputParams.searchState.refinement;
 			const priceIndex = ProductRefinerSource.Price;
 			const idx = refiners.findIndex((r) => areRefinersEqual(r, refiner));
+
 			if (refiner.RefinerSourceValue === priceIndex) {
 				const priceRefiner = refiners[idx];
+
 				if (idx > -1) {
 					if (
 						priceRefiner.LeftValueBoundString ===
@@ -133,7 +135,9 @@ const ProductListProvider = ({ children }: { children: React.ReactNode }) => {
 				} else {
 					refiners.push(refiner);
 				}
-			} else {
+			}
+
+			if (refiner.RefinerSourceValue !== priceIndex) {
 				if (idx > -1) {
 					refiners.splice(idx, 1);
 				} else {

package/src/pages-v2/product-list/product-list-view.tsx

@@ -32,7 +32,10 @@ const usePLV = () => {
 };
 
 type RootProps = { categoryId: number; children?: ReactNode };
-export default function ProductListView({ categoryId, children }: RootProps) {
+export default function ProductListView({
+	categoryId,
+	children,
+}: Readonly<RootProps>) {
 	return (
 		<ProductListViewContext.Provider value={{ categoryId }}>
 			{children}

package/src/pages-v2/product-list/product-rating.tsx

@@ -6,7 +6,10 @@ interface Props extends BoxProps {
 	rating: number;
 }
 
-export default function ProductRating({ rating = 0, ...props }: Props) {
+export default function ProductRating({
+	rating = 0,
+	...props
+}: Readonly<Props>) {
 	return (
 		<Box display="flex" gap={1} alignItems="center" {...props}>
 			<Rating size="small" value={rating} color="warn" readOnly />

package/src/pages-v2/product-list/quick-view-dialog-content.tsx

@@ -5,7 +5,6 @@ import type {
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-// import ImageWithFallback from "@app/_shared/ImageWithFallback";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
 import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
@@ -46,7 +45,7 @@ export default function QuickViewContent({
 	cart,
 	productDetails,
 	handleClose,
-}: Props) {
+}: Readonly<Props>) {
 	const [showDimensionError, setShowDimensionError] = useState(false);
 	const {
 		selectedVariant,
@@ -106,8 +105,7 @@ export default function QuickViewContent({
 
 	const getInventoryLabel = (): string | null => {
 		const aggregate =
-			shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-			shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities?.[0];
 		if (aggregate) {
 			const { TotalAvailableInventoryLevelLabel } = aggregate;
 			return TotalAvailableInventoryLevelLabel || null;

package/src/pages-v2/product-list/quick-view-dialog.tsx

@@ -10,7 +10,11 @@ interface Props {
 	product: ProductSearchResult;
 }
 
-export default function QuickView({ open, handleClose, product }: Props) {
+export default function QuickView({
+	open,
+	handleClose,
+	product,
+}: Readonly<Props>) {
 	if (!open) {
 		return;
 	}

package/src/pages-v2/product-list/range-filter.tsx

@@ -44,7 +44,6 @@ export default function RangeFilter({
 			setMaxVal(Number(selectedValues.RightValueBoundString));
 			setTextMin(Number(selectedValues.LeftValueBoundString));
 			setTextMax(Number(selectedValues.RightValueBoundString));
-		} else {
 		}
 	}, [selectedValues]);
 

package/src/pages-v2/product-list/scrollbar.tsx

@@ -29,7 +29,7 @@ export default function Scrollbar({
 	autoHide = true,
 	sx,
 	...props
-}: ScrollbarProps) {
+}: Readonly<ScrollbarProps>) {
 	return (
 		<StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
 			{children}

package/src/pages-v2/product-list/side-nav.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 // ================================================================
 
-export default function SideNav(props: Props) {
+export default function SideNav(props: Readonly<Props>) {
 	const {
 		position = "left",
 		open = false,

package/src/pages-v2/product-list/swatch.tsx

@@ -4,7 +4,7 @@ import type { ProductRefinerValue } from "@msdyn365-commerce/retail-proxy";
 import { Box, Chip, useTheme } from "@mui/material";
 import type { RenderedFacetProps } from "./facet-group";
 
-type Props = RenderedFacetProps & NonNullable<unknown>;
+type Props = RenderedFacetProps;
 
 const cssColorName = (color: string | undefined) => {
 	if (!color) return false;
@@ -21,12 +21,21 @@ export default function Swatch({
 	facet,
 	handleRefinerSelect,
 	isRefinerSelected,
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 
 	return (
 		<Box mb={3}>
 			{facet.Values?.map((colorItem: ProductRefinerValue) => {
+				const borderStyle = (() => {
+					if (checkWhite(colorItem.LeftValueBoundString)) {
+						return "1px solid black";
+					}
+					if (isRefinerSelected(colorItem)) {
+						return "2px solid";
+					}
+					return "2px solid transparent";
+				})();
 				return (
 					<Box
 						key={colorItem.LeftValueBoundString}
@@ -48,11 +57,7 @@ export default function Swatch({
 										: theme.palette.grey[300]),
 								width: 32,
 								height: 32,
-								border: checkWhite(colorItem.LeftValueBoundString)
-									? "1px solid black"
-									: isRefinerSelected(colorItem)
-										? "2px solid"
-										: "2px solid transparent",
+								border: borderStyle,
 								"&:hover": {
 									backgroundColor:
 										colorItem.SwatchColorHexCode ||