@evenicanpm/storefront-core 2.3.0 → 2.4.0

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/cms-page-view.tsx

@@ -40,7 +40,7 @@ export const CmsPageView = ({ slug, cmsLocale, isDraftMode }: Props) => {
 			) : (
 				<Container>
 					<Paper sx={{ marginTop: "25px", padding: "50px" }} elevation={1}>
-						<H1>E4 Storefront</H1>
+						<H1>e4 Storefront</H1>
 						<H4>
 							Add a page to the &quot;Page&quot; content-type in CMS to add
 							content to this page.

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-description.tsx

@@ -3,22 +3,34 @@
 import { H3 } from "@evenicanpm/storefront-core/src/components/Typography";
 import type { AttributeValue } from "@msdyn365-commerce/retail-proxy";
 
-type Props = { attributes: AttributeValue[] };
+type Props = { attributes: AttributeValue[]; description?: string };
 
-export default function ProductDescription({ attributes }: Readonly<Props>) {
+export default function ProductDescription({
+	attributes,
+	description,
+}: Readonly<Props>) {
 	return (
 		<div>
-			<H3 mb={2}>Specifications:</H3>
-			{attributes?.map((attr, index) => {
-				if (attr?.TextValue && attr?.Name) {
-					return (
-						<div key={`attr-${index + 1}`}>
-							{attr.Name}: {attr.TextValue}
-						</div>
-					);
-				}
-				return null;
-			})}
+			{description && (
+				<div style={{ marginBottom: 16 }}>
+					<p>{description}</p>
+				</div>
+			)}
+			{attributes?.length > 0 && (
+				<>
+					<H3 mb={2}>Specifications:</H3>
+					{attributes.map((attr, index) => {
+						if (attr?.TextValue && attr?.Name) {
+							return (
+								<div key={`attr-${index + 1}`}>
+									{attr.Name}: {attr.TextValue}
+								</div>
+							);
+						}
+						return null;
+					})}
+				</>
+			)}
 		</div>
 	);
 }

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-details/product-intro/compound/product-intro-images.tsx

@@ -11,6 +11,7 @@ import {
 } from "@evenicanpm/storefront-core/src/pages/product-details/product-intro/compound/context";
 import ThumbnailWithSkeleton from "@evenicanpm/storefront-core/src/pages/product-details/product-intro/compound/thumbnail-with-skeleton";
 import Grid from "@mui/material/Grid2";
+import Skeleton from "@mui/material/Skeleton";
 import type React from "react";
 import { useContext, useState } from "react";
 
@@ -124,21 +125,38 @@ ProductImages.Main = () => {
 			"ProductImages.Main must be used inside a product images context",
 		);
 	const { name, images, primaryImageUrl, selectedImageIndex } = ctx;
+	const [loaded, setLoaded] = useState(false);
+
+	const src =
+		Array.isArray(images) &&
+		selectedImageIndex !== undefined &&
+		images[selectedImageIndex]
+			? images[selectedImageIndex]
+			: primaryImageUrl;
 
 	return (
-		<FlexBox borderRadius={3} overflow="hidden" justifyContent="center" mb={6}>
+		<FlexBox
+			borderRadius={3}
+			overflow="hidden"
+			justifyContent="center"
+			mb={6}
+			position="relative"
+		>
+			{!loaded && (
+				<Skeleton
+					variant="rounded"
+					width={300}
+					height={300}
+					sx={{ position: "absolute", inset: 0, m: "auto" }}
+				/>
+			)}
 			<ImageWithFallback
 				alt={name ?? "product"}
 				width={300}
 				height={300}
 				loading="eager"
-				src={
-					Array.isArray(images) &&
-					selectedImageIndex !== undefined &&
-					images[selectedImageIndex]
-						? images[selectedImageIndex]
-						: primaryImageUrl
-				}
+				src={src}
+				onLoad={() => setLoaded(true)}
 				style={{ objectFit: "contain" }}
 			/>
 		</FlexBox>

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

@@ -1,31 +1,27 @@
-import { Skeleton } from "@mui/material";
 import Image from "next/image";
-import { useState } from "react";
+
+const shimmer = `<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" fill="#f0f0f0"/></svg>`;
+const blurDataURL = `data:image/svg+xml;base64,${typeof window === "undefined" ? Buffer.from(shimmer).toString("base64") : btoa(shimmer)}`;
 
 /**
- * Shows a skeleton until the image loads
+ * Product thumbnail image
  * @category Sub-Component
  */
 function ThumbnailWithSkeleton({ src }: Readonly<{ src: string }>) {
-	const [loaded, setLoaded] = useState(false);
-
 	return (
-		<>
-			{!loaded && <Skeleton variant="rounded" width={50} height={50} />}
-			<Image
-				src={src}
-				alt="Product thumbnail"
-				width={50}
-				height={50}
-				onLoad={() => setLoaded(true)}
-				style={{
-					display: loaded ? "block" : "none",
-					width: "80%",
-					height: "80%",
-					objectFit: "cover",
-				}}
-			/>
-		</>
+		<Image
+			src={src}
+			alt="Product thumbnail"
+			width={50}
+			height={50}
+			placeholder="blur"
+			blurDataURL={blurDataURL}
+			style={{
+				width: "80%",
+				height: "80%",
+				objectFit: "cover",
+			}}
+		/>
 	);
 }
 

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

@@ -23,11 +23,16 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
 	},
 }));
 
-type Props = { productAttributes: AttributeValue[]; children: React.ReactNode };
+type Props = {
+	productAttributes: AttributeValue[];
+	productDescription?: string;
+	children: React.ReactNode;
+};
 
 export interface TabsContext {
 	selectedOption: number;
 	productAttributes: AttributeValue[];
+	productDescription?: string;
 	handleOptionClick: (_: React.SyntheticEvent, value: number) => void;
 }
 
@@ -54,6 +59,7 @@ const TabsContext = createContext<TabsContext | null>(null);
  */
 export default function ProductTabs({
 	productAttributes,
+	productDescription,
 	children,
 }: Readonly<Props>) {
 	const [selectedOption, setSelectedOption] = useState(0);
@@ -62,7 +68,12 @@ export default function ProductTabs({
 
 	return (
 		<TabsContext.Provider
-			value={{ selectedOption, handleOptionClick, productAttributes }}
+			value={{
+				selectedOption,
+				handleOptionClick,
+				productAttributes,
+				productDescription,
+			}}
 		>
 			<Box mb={6}>{children}</Box>
 		</TabsContext.Provider>
@@ -130,6 +141,11 @@ ProductTabs.Description = () => {
 		throw new Error(
 			"ProductTabs.Tabs must be used inside a ProductTabsContext",
 		);
-	const { productAttributes } = ctx;
-	return <ProductDescription attributes={productAttributes} />;
+	const { productAttributes, productDescription } = ctx;
+	return (
+		<ProductDescription
+			attributes={productAttributes}
+			description={productDescription}
+		/>
+	);
 };

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");
-				},
-			};
-	}
-};