@evenicanpm/storefront-core 2.3.1 → 2.4.0

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

@@ -11,6 +11,7 @@ import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
 import {
 	Box,
 	Button,
+	CircularProgress,
 	FormControl,
 	InputLabel,
 	MenuItem,
@@ -25,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 } from "react";
+import React, { createContext, useContext, useRef } from "react";
 import { z } from "zod";
 
 interface AddressFormValues {
@@ -71,6 +72,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 
 	const { mutateAsync: createAddress } = useCreateAddress();
 	const { mutateAsync: updateAddress } = useUpdateAddress();
+	const isSubmittingRef = useRef(false);
 
 	const FormSchema = z.object({
 		Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
@@ -99,6 +101,9 @@ const AddressForm = ({ address, children }: RootProps) => {
 	};
 
 	const handleSubmit = async (values: AddressFormValues) => {
+		if (isSubmittingRef.current) return;
+		isSubmittingRef.current = true;
+
 		let newAddress: Address = {
 			Name: values.Name,
 			Street: values.Street,
@@ -128,6 +133,7 @@ const AddressForm = ({ address, children }: RootProps) => {
 				severity: "error",
 			});
 			console.log(error);
+			isSubmittingRef.current = false;
 		}
 	};
 
@@ -291,8 +297,20 @@ AddressForm.Actions = ({ children }: { children?: React.ReactNode }) => {
 
 AddressForm.SubmitButton = () => {
 	const t = useTranslations("Address");
+	const ctx = useContext(FormContext);
+	const isSubmitting = ctx?.formik.isSubmitting ?? false;
 	return (
-		<Button type="submit" variant="contained" color="primary">
+		<Button
+			type="submit"
+			variant="contained"
+			color="primary"
+			disabled={isSubmitting}
+			startIcon={
+				isSubmitting ? (
+					<CircularProgress size={20} color="inherit" />
+				) : undefined
+			}
+		>
 			{t("save")}
 		</Button>
 	);

package/src/pages/account/wishlist/wishlist-item.tsx

@@ -74,11 +74,10 @@ const WishlistItem = ({ wishlist, children, sx }: RootProps) => {
 };
 
 WishlistItem.Name = () => {
+	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
 	const ctx = useContext(WishlistItemContext);
 	if (!ctx) return null;
 	const { wishlist } = ctx;
-	const { wishlists: wishlistsRoute } = useCreateAccountRoutes();
-
 	return (
 		<Paragraph ellipsis>
 			<NavLink3

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

@@ -416,13 +416,6 @@ CartItemRoot.Comment = () => {
 				</FlexBox>
 			</>
 		);
-	} else if (isLoading) {
-		content = (
-			<CircularProgress
-				size={30}
-				sx={{ marginTop: "auto", marginLeft: "auto" }}
-			/>
-		);
 	} else {
 		content = (
 			<>
@@ -448,6 +441,7 @@ CartItemRoot.Comment = () => {
 				<Button
 					color="primary"
 					variant="outlined"
+					disabled={isLoading}
 					sx={{ width: 150, mt: "auto", ml: "auto" }}
 					onClick={() => setIsWritingComment(true)}
 				>

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

@@ -7,7 +7,7 @@ import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
 import CheckoutStep from "@evenicanpm/storefront-core/src/pages/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 { Box, Button, CircularProgress } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
@@ -18,6 +18,7 @@ import React, {
 	type ReactNode,
 	useContext,
 	useEffect,
+	useRef,
 	useState,
 } from "react";
 
@@ -62,12 +63,15 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 	const { data: channelConfigurationData } = getChannelConfiguration.useData();
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [totalSteps, setTotalSteps] = useState(0);
+	const isSubmittingRef = useRef(false);
 
 	const cleanupCart = async (transactionId: string) => {
 		router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
 	};
 
 	const placeOrder = async () => {
+		if (isSubmittingRef.current) return;
+		isSubmittingRef.current = true;
 		setIsSubmitting(true);
 		const cache = queryClient.getQueryCache();
 
@@ -98,6 +102,8 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 					.data as CardPaymentAcceptResult;
 
 				if (!paymentAcceptResult?.TokenizedPaymentCard) {
+					isSubmittingRef.current = false;
+					setIsSubmitting(false);
 					return;
 				}
 
@@ -121,8 +127,9 @@ const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
 				message: t("placeOrderErrorMessage"),
 				severity: "error",
 			});
+			isSubmittingRef.current = false;
+			setIsSubmitting(false);
 		}
-		setIsSubmitting(false);
 	};
 
 	return (
@@ -227,7 +234,11 @@ CheckoutForm.Footer = () => {
 				color="primary"
 				onClick={placeOrder}
 			>
-				{t("placeOrderButton")}
+				{isSubmitting ? (
+					<CircularProgress size={24} color="inherit" />
+				) : (
+					t("placeOrderButton")
+				)}
 			</Button>
 		</Grid>
 	);

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

@@ -115,13 +115,15 @@ AddressCard.Body = () => {
 	if (!ctx) return null;
 
 	const { address } = ctx;
+	// Join only non-empty values so a dangling comma is never rendered.
+	const stateRegion = [address.State, address.ThreeLetterISORegionName]
+		.filter((value) => value?.trim())
+		.join(", ");
 	return (
 		<>
 			<Paragraph color="grey.700">{address.Street}</Paragraph>
 			<Paragraph color="grey.700">{address.City}</Paragraph>
-			<Paragraph color="grey.700">
-				{address.State}, {address.ThreeLetterISORegionName}
-			</Paragraph>
+			{stateRegion && <Paragraph color="grey.700">{stateRegion}</Paragraph>}
 			<Paragraph color="grey.700">{address.ZipCode}</Paragraph>
 			<Paragraph color="grey.700">{address.Phone}</Paragraph>
 		</>

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

@@ -14,9 +14,9 @@ import DialogContent from "@mui/material/DialogContent";
 import Grid from "@mui/material/Grid2";
 import TextField from "@mui/material/TextField";
 import { merge } from "lodash";
+import { useTranslations } from "next-intl";
 import React from "react";
 import { Controller, type UseFormReturn, useForm } from "react-hook-form";
-import { useTranslations } from "use-intl";
 import z from "zod";
 
 type AddressFormInput = {

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

@@ -117,7 +117,9 @@ OrderedProducts.Comment = ({ line }: LineProps) => {
 	if (!line.Comment) return null;
 	return (
 		<Paragraph mt={1}>
-			<H6 sx={{ display: "inline" }}>{t("commentLabel")}: </H6>
+			<Span sx={{ display: "inline", fontSize: 14, fontWeight: 600 }}>
+				{t("commentLabel")}:
+			</Span>
 			{line.Comment}
 		</Paragraph>
 	);

package/src/pages/product-details/bopis/find-in-store-modal.tsx

@@ -56,7 +56,7 @@ const initialSearchArea: SearchArea = {
  * @param {Function} props.handleAddToCart - Function to handle adding the product to cart
  * @param {number} props.productId - ID of the product being searched
  *
- * @returns {JSX.Element} - Rendered modal component that displays available stores with inventory information
+ * @returns {React.ReactElement} - Rendered modal component that displays available stores with inventory information
  *
  * @example
  * <FindInStoreModal
@@ -71,7 +71,7 @@ const FindInStoreModal = ({
 	open,
 	handleAddToCart,
 	productId,
-}: Props): JSX.Element => {
+}: Props): React.ReactElement => {
 	const t = useTranslations("productDetail");
 	const [hideOutOfStock, setHideOutOfStock] = React.useState(false);
 	const { data: channelConfig } = getChannelConfiguration.useSuspenseData();
@@ -154,7 +154,7 @@ const FindInStoreModal = ({
 		const _stores = Object.values(stores);
 		if (hideOutOfStock) {
 			return _stores.filter(
-				(store) => !isOutOfStock(store.location.OrgUnitNumber || ""),
+				(store) => !isOutOfStock(store?.location?.OrgUnitNumber || ""),
 			);
 		}
 		return _stores;
@@ -205,7 +205,7 @@ const FindInStoreModal = ({
 				address={location.Address || ""}
 				actionArea={renderActionArea(
 					location.OrgUnitNumber || "",
-					pickupOptions || [],
+					(pickupOptions || []) as DeliveryOption[],
 					inventoryRecord?.TotalAvailableInventoryLevelLabel || "",
 				)}
 				openFrom={location.OpenFrom || 0}

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

@@ -31,7 +31,7 @@ type Props = {
  * @param {boolean} props.isOutOfStock - Flag indicating if the product is out of stock at this location
  * @param {string} props.inventoryLabel - Label to display when product is out of stock
  *
- * @returns {JSX.Element} The rendered pickup option selection component
+ * @returns {React.ReactElement} The rendered pickup option selection component
  *
  * @example
  * <PickupOptionSelect
@@ -48,7 +48,7 @@ const PickupOptionSelect = ({
 	onPickupClick,
 	isOutOfStock,
 	inventoryLabel,
-}: Props): JSX.Element => {
+}: Props): React.ReactElement => {
 	const [selectedOption, setSelectedOption] =
 		React.useState<DeliveryOption | null>(pickupOptions[0] || null);
 	const handlePickupOptionChange = (event: SelectChangeEvent) => {

package/src/pages/product-details/bopis/search-header.tsx

@@ -19,14 +19,14 @@ type Props = {
  * @param {Object} props - Component props
  * @param {Function} props.handleSearch - Callback function that handles the search action with the search term
  *
- * @returns {JSX.Element} A form with a search input field that triggers the search on submit or Enter key
+ * @returns {React.ReactElement} A form with a search input field that triggers the search on submit or Enter key
  *
  * @example
  * ```tsx
  * <SearchHeader handleSearch={(term) => console.log(`Searching for ${term}`)} />
  * ```
  */
-const SearchHeader = ({ handleSearch }: Props): JSX.Element => {
+const SearchHeader = ({ handleSearch }: Props): React.ReactElement => {
 	const [searchTerm, setSearchTerm] = React.useState<string>("");
 	const t = useTranslations("productDetail.Bopis");
 	const renderSearchAdornment = () => (

package/src/pages/product-details/product-intro/compound/context.ts

@@ -1,4 +1,7 @@
-import type { ProductDetails } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type {
+	ProductDetails,
+	ProductPrice,
+} from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import type { SelectedDimensions } from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import type {
 	ProductDimensionValueInventoryAvailability,
@@ -44,8 +47,10 @@ export interface ProductImagesContext {
 export interface ProductInfoContext {
 	/** Does the product have variants? If not we do not verify dimensions before adding to cart etc. **/
 	hasVariants: boolean;
-	/** **/
-	inventoryPending: boolean;
+	/** Combined loading state for price and inventory */
+	isProductDetailsPending: boolean;
+	/** */
+	productPrices: ProductPrice[] | undefined;
 	/** */
 	shippingInventoryData: ProductWarehouseInventoryInformation | undefined;
 	/** */

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

@@ -48,11 +48,17 @@ export interface Props {
  */
 const ProductInfo = ({ children }: Props) => {
 	const [showDimensionError, setShowDimensionError] = useState(false);
-	const { masterProduct, selectedVariant } = useProductIntro();
+	const {
+		masterProduct,
+		selectedVariant,
+		variantPending,
+		allDimensionsSelected,
+	} = useProductIntro();
 
 	const hasVariants = masterProduct?.Dimensions?.length !== 0;
 
 	const id = hasVariants ? selectedVariant?.RecordId : masterProduct?.RecordId;
+	const productId = selectedVariant?.RecordId || masterProduct?.RecordId;
 
 	const shippingInventorySearchCriteria =
 		!hasVariants || selectedVariant
@@ -65,11 +71,23 @@ const ProductInfo = ({ children }: Props) => {
 			enabled: !!shippingInventorySearchCriteria,
 		});
 
+	const { data: productPrices, isPending: pricesPending } =
+		getProductPrices.useData({
+			productIds: [productId],
+		});
+
+	const isProductDetailsPending =
+		pricesPending ||
+		!productPrices ||
+		variantPending ||
+		(allDimensionsSelected && inventoryPending);
+
 	return (
 		<ProductInfoContext.Provider
 			value={{
 				hasVariants,
-				inventoryPending,
+				isProductDetailsPending,
+				productPrices,
 				shippingInventoryData,
 				showDimensionError,
 				setShowDimensionError,
@@ -153,23 +171,13 @@ ProductInfo.Dimensions = () => {
 };
 
 ProductInfo.Price = () => {
-	const IntroCtx = useProductIntro();
-	if (!IntroCtx)
-		throw new Error(
-			"ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
-		);
-	const { masterProduct, selectedVariant } = IntroCtx;
 	const { formatCurrency } = useCurrencyFormatter();
-
-	const { data: productPrices, isPending: pricesPending } =
-		getProductPrices.useData({
-			productIds: [selectedVariant?.RecordId || masterProduct?.RecordId],
-		});
+	const { isProductDetailsPending, productPrices } = useProductInfo();
 
 	return (
 		<Box pt={1}>
 			<H2 color="primary.main" mb={0.5} lineHeight="1">
-				{pricesPending || !productPrices ? (
+				{isProductDetailsPending ? (
 					<CircularProgress size={20} />
 				) : (
 					formatCurrency(productPrices?.[0]?.CustomerContextualPrice || 0)
@@ -190,8 +198,8 @@ ProductInfo.Inventory = () => {
 		throw new Error(
 			"ProductInfo.Inventory must be wrapped in ProductInfoContext and a ProductIntroContext",
 		);
-	const { variantPending, allDimensionsSelected } = IntroCtx;
-	const { shippingInventoryData, inventoryPending } = InfoCtx;
+	const { allDimensionsSelected } = IntroCtx;
+	const { shippingInventoryData, isProductDetailsPending } = InfoCtx;
 	if (!allDimensionsSelected)
 		return (
 			<FlexBox alignItems="center" gap={1}>
@@ -209,9 +217,7 @@ ProductInfo.Inventory = () => {
 		<FlexBox alignItems="center" gap={1}>
 			{/* INVENTORY */}
 			<Box sx={{ my: 3 }}>
-				{inventoryPending || variantPending ? (
-					<CircularProgress size={20} />
-				) : (
+				{!isProductDetailsPending && (
 					<Typography variant="body2" color="text.secondary" fontWeight={600}>
 						{getInventoryLabel(shippingInventoryData)}
 					</Typography>

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

@@ -15,6 +15,7 @@ import useProductList from "@evenicanpm/storefront-core/src/pages/product-list/u
 import generateBreadcrumbs from "@evenicanpm/storefront-core/src/pages/product-list/utils/generate-breadcrumbs";
 import { searchCategory } from "@evenicanpm/storefront-core/src/pages/product-list/utils/search-for-category";
 import { usePreviousRefiners } from "@evenicanpm/storefront-core/src/pages/product-list/utils/use-previous-refiners";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { useLocale, useTranslations } from "next-intl";
@@ -149,7 +150,7 @@ ProductListView.Pagination = function Pager() {
 ProductListView.Results = function Results() {
 	const t = useTranslations("ProductList");
 	const { productData, isLoading, view, productPrices } = useProductList();
-	const products = productData?.products ?? [];
+	const products = (productData?.products ?? []) as ProductSearchResult[];
 	const paginationNode = <ProductListView.Pagination />;
 
 	if (isLoading) {

package/src/providers/nav-provider/index.tsx

@@ -1,9 +1,9 @@
 "use client";
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { createLink } from "@evenicanpm/storefront-core/src/providers/nav-provider/utils/createLink";
 import { useTranslations } from "next-intl";
 import { createContext, type PropsWithChildren, useState } from "react";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 type NavContextType = {
 	cmsNav: CmsNavItem[];

package/src/providers/nav-provider/utils/createLink.ts

@@ -1,4 +1,4 @@
-import type { CmsNavItem } from "@evenicanpm/storefront-core/src/cms/interfaces/navigation";
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 
 export const createLink = (name: string, path: string): CmsNavItem => {
 	return {

package/tsconfig.json

@@ -11,9 +11,8 @@
 		"resolveJsonModule": true,
 		"outDir": "./dist",
 		"jsx": "preserve",
-		"typeRoots": ["../../../../storefront/node_modules/@types"],
+		"baseUrl": ".",
 		"paths": {
-			"*": ["../../../../storefront/node_modules/*"],
 			"@evenicanpm/storefront-core/src/*": ["./src/*"],
 			"@evenicanpm/storefront-core/src/lib/*": ["src/lib/*"],
 			"@evenicanpm/storefront-core/src/api-manager/*": ["src/api-manager/*"],

package/__mocks__/countries.ts

@@ -1,11 +0,0 @@
-import type { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-
-export const countries: CountryRegionInfo[] = [
-	{ ShortName: "Canada", CountryRegionId: "CA", ISOCode: "CA" },
-	{
-		ShortName: "United States",
-		CountryRegionId: "US",
-		ISOCode: "US",
-	},
-	{ ShortName: "Mexico", CountryRegionId: "MX", ISOCode: "MX" },
-];

package/__mocks__/create-mutation.ts

@@ -1,68 +0,0 @@
-import { queryClient } from "./query-client";
-
-type MutationInput = {
-	cartLine?: Array<{ Quantity?: number }>;
-} & Record<string, unknown>;
-
-type CartMockData = {
-	CartLines: Array<Record<string, unknown>>;
-} & Record<string, unknown>;
-
-/**
- *
- * Mocking up at the react-query level because our components
- * rely on react-query for triggering re-renders and state subscriptions.
- *
- */
-export const useCreateMutation = (apiManagerPath: readonly unknown[]) => {
-	switch (apiManagerPath[1]) {
-		case "updateCartLines":
-			return {
-				mutate: (input: MutationInput) => {
-					console.log(input);
-					queryClient.setQueryData(["cart"], (oldData: CartMockData) => ({
-						...oldData,
-						CartLines: [
-							{
-								...oldData.CartLines[0],
-								Quantity: input.cartLine?.[0]?.Quantity,
-							},
-						],
-					}));
-				},
-			};
-		case "deleteCartLine":
-			return {
-				mutate: (input: MutationInput) => {
-					console.log(input);
-					queryClient.setQueryData(["cart"], (oldData: CartMockData) => ({
-						...oldData,
-						CartLines: [],
-					}));
-				},
-			};
-		case "addToCart":
-			return {
-				mutate: (input: MutationInput) => {
-					console.log(input);
-					queryClient.setQueryData(["cart"], (oldData: CartMockData) => ({
-						...oldData,
-						CartLines: [
-							{
-								ProductId: 1,
-								Quantity: 1,
-							},
-						],
-					}));
-				},
-			};
-		case "sessionInit":
-			return { mutateAsync: () => {} };
-		default:
-			return {
-				mutate: () => {
-					console.log("No Mock Implemented");
-				},
-			};
-	}
-};

package/__mocks__/create-query.ts

@@ -1,94 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import categories from "../__mocks__/data/categories.json";
-import { data as products } from "../__mocks__/products";
-import wishlists from "../__mocks__/wishlists.json";
-
-const cartBase = {
-	Id: "cart-123",
-	Version: 1,
-	CartLines: [
-		{
-			LineId: "line-1",
-			ProductId: 1,
-			Quantity: 0,
-		},
-	],
-};
-const cart = cartBase;
-
-const shippingInventoryData = {
-	AggregatedProductInventoryAvailabilities: [
-		{
-			TotalAvailableInventoryLevelCode: "AVAIL",
-		},
-	],
-};
-
-// Need to mock create query as fn() and then
-// mock the return value in the respective storeies
-// files, per component
-export const createQuery = (apiManagerPath: string[]) => {
-	console.log(apiManagerPath);
-	if (apiManagerPath[0] === "cart")
-		return {
-			useData: () => useQuery({ queryKey: ["cart"], queryFn: () => cart }),
-		};
-	if (apiManagerPath[1] === "getInventory") {
-		return {
-			useData: () =>
-				useQuery({
-					queryKey: ["cart", "getInventory"],
-					queryFn: () => shippingInventoryData,
-				}),
-		};
-	}
-	if (apiManagerPath[1] === "searchProducts") {
-		console.log("here are the products");
-		console.log(products.products.length);
-		return {
-			useData: () =>
-				useQuery({
-					queryKey: ["product", "searchProducts"],
-					queryFn: () => Promise.resolve(products.products),
-				}),
-			useSuspenseData: () =>
-				useQuery({
-					queryKey: ["product", "searchProducts"],
-					queryFn: () => Promise.resolve(products.products),
-				}),
-		};
-	}
-	if (apiManagerPath[1] === "getWishlists") {
-		return {
-			useData: () =>
-				useQuery({
-					queryKey: ["wishlists"],
-					queryFn: () => wishlists,
-				}),
-			useSuspenseData: () =>
-				useQuery({
-					queryKey: ["wishlists"],
-					queryFn: () => wishlists,
-				}),
-		};
-	}
-	if (apiManagerPath[1] === "getCategories") {
-		console.log("Here i am!");
-		return {
-			useData: () =>
-				useQuery({
-					queryKey: ["categories", "getCategories"],
-					queryFn: () => categories,
-				}),
-			useSuspenseData: () =>
-				useQuery({
-					queryKey: ["cateogires", "getCategories"],
-					queryFn: () => categories,
-				}),
-		};
-	}
-};
-
-export const createApiPath = (key: string, method: string) => {
-	return [key, method];
-};