@evenicanpm/storefront-core 1.1.0 → 1.2.0

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

@@ -1,214 +1,214 @@
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
-  H1,
-  H2,
-  H6,
+	H1,
+	H2,
+	H6,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 // import ImageWithFallback from "@app/_shared/ImageWithFallback";
 import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
 import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import {
-  Button,
-  CircularProgress,
-  DialogContent,
-  Typography,
+	Button,
+	CircularProgress,
+	DialogContent,
+	Typography,
 } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import ProductRating from "./product-rating";
 import useCart, {
-  AddToCartBopisInput,
+	AddToCartBopisInput,
 } from "@evenicanpm/storefront-core/src/hooks/use-cart";
-import useCurrencyFormatter from "@/lib/currency-formatter";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
 import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons";
 import useVariants from "@evenicanpm/storefront-core/src/hooks/use-variants";
 import {
-  InventorySearchCriteriaInput,
-  ProductDetails,
+	InventorySearchCriteriaInput,
+	ProductDetails,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import { useMemo, useState } from "react";
-import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
+import getProductAvailability from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-availability";
 import Link from "next/link";
 import buildDetailUrl from "@evenicanpm/storefront-core/src/lib/build-detail-url";
 import { useTranslations } from "next-intl";
 
 interface Props {
-  product: ProductSearchResult;
-  cart: Cart;
-  productDetails: ProductDetails;
-  handleClose: () => void;
+	product: ProductSearchResult;
+	cart: Cart;
+	productDetails: ProductDetails;
+	handleClose: () => void;
 }
 
 export default function QuickViewContent({
-  product,
-  cart,
-  productDetails,
-  handleClose,
+	product,
+	cart,
+	productDetails,
+	handleClose,
 }: Props) {
-  const [showDimensionError, setShowDimensionError] = useState(false);
-  const {
-    selectedVariant,
-    selectDimensions,
-    handleChangeVariant,
-    allDimensionsSelected,
-  } = useVariants(productDetails);
-  const t = useTranslations("ProductList.QuickView");
-  const { formatCurrency } = useCurrencyFormatter();
-  const { handleCartAmountChange, handleAddToCart, loading } = useCart(
-    cart
-      ? {
-          cart,
-          recordId: product.RecordId,
-          selectVariantId: selectedVariant?.RecordId,
-        }
-      : {
-          cart: { Id: "", CartLines: [] },
-          recordId: product.RecordId,
-          selectVariantId: selectedVariant?.RecordId,
-        },
-  );
+	const [showDimensionError, setShowDimensionError] = useState(false);
+	const {
+		selectedVariant,
+		selectDimensions,
+		handleChangeVariant,
+		allDimensionsSelected,
+	} = useVariants(productDetails);
+	const t = useTranslations("ProductList.QuickView");
+	const { formatCurrency } = useCurrencyFormatter();
+	const { handleCartAmountChange, handleAddToCart, loading } = useCart(
+		cart
+			? {
+					cart,
+					recordId: product.RecordId,
+					selectVariantId: selectedVariant?.RecordId,
+				}
+			: {
+					cart: { Id: "", CartLines: [] },
+					recordId: product.RecordId,
+					selectVariantId: selectedVariant?.RecordId,
+				},
+	);
 
-  const searchCriteria = useMemo<InventorySearchCriteriaInput>(
-    () => ({
-      searchCriteria: {
-        defaultWarehouseOnly: true,
-        productIds: [selectedVariant?.RecordId || product.RecordId],
-      },
-    }),
-    [
-      allDimensionsSelected,
-      selectDimensions,
-      product,
-      selectedVariant?.RecordId,
-    ],
-  );
+	const searchCriteria = useMemo<InventorySearchCriteriaInput>(
+		() => ({
+			searchCriteria: {
+				defaultWarehouseOnly: true,
+				productIds: [selectedVariant?.RecordId || product.RecordId],
+			},
+		}),
+		[
+			allDimensionsSelected,
+			selectDimensions,
+			product,
+			selectedVariant?.RecordId,
+		],
+	);
 
-  const { data: shippingInventoryData, isLoading: inventoryLoading } =
-    getProductAvailability.useData(searchCriteria);
+	const { data: shippingInventoryData, isLoading: inventoryLoading } =
+		getProductAvailability.useData(searchCriteria);
 
-  const currentCartLine = cart?.CartLines?.find((item) => {
-    return (
-      item?.ProductId ===
-      (Number(selectedVariant?.RecordId) || product.RecordId)
-    );
-  });
+	const currentCartLine = cart?.CartLines?.find((item) => {
+		return (
+			item?.ProductId ===
+			(Number(selectedVariant?.RecordId) || product.RecordId)
+		);
+	});
 
-  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected) {
-      setShowDimensionError(true);
-      return;
-    }
-    setShowDimensionError(false);
-    handleAddToCart(bopisInput);
-  };
+	const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
+		if (!allDimensionsSelected) {
+			setShowDimensionError(true);
+			return;
+		}
+		setShowDimensionError(false);
+		handleAddToCart(bopisInput);
+	};
 
-  const getInventoryLabel = (): string | null => {
-    const aggregate =
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
-    if (aggregate) {
-      const { TotalAvailableInventoryLevelLabel } = aggregate;
-      return TotalAvailableInventoryLevelLabel || null;
-    }
-    return null;
-  };
+	const getInventoryLabel = (): string | null => {
+		const aggregate =
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
+			shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
+		if (aggregate) {
+			const { TotalAvailableInventoryLevelLabel } = aggregate;
+			return TotalAvailableInventoryLevelLabel || null;
+		}
+		return null;
+	};
 
-  return (
-    <DialogContent
-      sx={{
-        padding: 2,
-      }}
-    >
-      <Grid container spacing={3} justifyContent="space-around" mt={0}>
-        <Box height={"100%"} sx={{ marginTop: "auto", marginBottom: "auto" }}>
-          <ImageWithFallback
-            src={product.PrimaryImageUrl ?? ""}
-            alt={product.Name || "Product Image"}
-            width="300"
-            height="300"
-          />
-        </Box>
-        <Grid item md={6} xs={12} alignItems="center" p={4}>
-          <H1 mb={1}>{product.Name}</H1>
-          <FlexBox alignItems="center" mb={1}>
-            <H6>SKU: {product.ItemId}</H6>
-          </FlexBox>
+	return (
+		<DialogContent
+			sx={{
+				padding: 2,
+			}}
+		>
+			<Grid container spacing={3} justifyContent="space-around" mt={0}>
+				<Box height={"100%"} sx={{ marginTop: "auto", marginBottom: "auto" }}>
+					<ImageWithFallback
+						src={product.PrimaryImageUrl ?? ""}
+						alt={product.Name || "Product Image"}
+						width="300"
+						height="300"
+					/>
+				</Box>
+				<Grid item md={6} xs={12} alignItems="center" p={4}>
+					<H1 mb={1}>{product.Name}</H1>
+					<FlexBox alignItems="center" mb={1}>
+						<H6>SKU: {product.ItemId}</H6>
+					</FlexBox>
 
-          {/* PRODUCT RATING */}
-          <FlexBox alignItems="center" gap={1} mb={2}>
-            <ProductRating rating={product.TotalRatings || 0} mb={1} />
-          </FlexBox>
+					{/* PRODUCT RATING */}
+					<FlexBox alignItems="center" gap={1} mb={2}>
+						<ProductRating rating={product.TotalRatings || 0} mb={1} />
+					</FlexBox>
 
-          {/* PRODUCT VARIANTS  */}
-          {productDetails ? (
-            <ProductDimensions
-              dimensionGroups={productDetails.DimensionValues}
-              selectDimensions={selectDimensions}
-              handleChangeVariant={handleChangeVariant}
-              showDimensionError={showDimensionError}
-            />
-          ) : null}
+					{/* PRODUCT VARIANTS  */}
+					{productDetails ? (
+						<ProductDimensions
+							dimensionGroups={productDetails.DimensionValues}
+							selectDimensions={selectDimensions}
+							handleChangeVariant={handleChangeVariant}
+							showDimensionError={showDimensionError}
+						/>
+					) : null}
 
-          {/* PRODUCT PRICE & STOCK */}
-          <Box pt={1} mb={3}>
-            <H2 color="primary.main" mb={0.5} lineHeight="1">
-              {formatCurrency(product.Price)}
-            </H2>
-            <Box color="inherit">{}</Box>
-          </Box>
+					{/* PRODUCT PRICE & STOCK */}
+					<Box pt={1} mb={3}>
+						<H2 color="primary.main" mb={0.5} lineHeight="1">
+							{formatCurrency(product.Price)}
+						</H2>
+						<Box color="inherit">{}</Box>
+					</Box>
 
-          <Box sx={{ my: 3 }}>
-            {inventoryLoading ? (
-              <CircularProgress size={20} />
-            ) : (
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                fontWeight={600}
-              >
-                {getInventoryLabel()}
-              </Typography>
-            )}
-          </Box>
+					<Box sx={{ my: 3 }}>
+						{inventoryLoading ? (
+							<CircularProgress size={20} />
+						) : (
+							<Typography
+								variant="body2"
+								color="text.secondary"
+								fontWeight={600}
+							>
+								{getInventoryLabel()}
+							</Typography>
+						)}
+					</Box>
 
-          <Link
-            href={buildDetailUrl(product.Name ?? "", product.RecordId || 0)}
-          >
-            <Typography
-              sx={{
-                color: "primary.main",
-                "&:hover": {
-                  textDecoration: "underline",
-                },
-              }}
-            >
-              {t("seeFullDetails")}
-            </Typography>
-          </Link>
+					<Link
+						href={buildDetailUrl(product.Name ?? "", product.RecordId || 0)}
+					>
+						<Typography
+							sx={{
+								color: "primary.main",
+								"&:hover": {
+									textDecoration: "underline",
+								},
+							}}
+						>
+							{t("seeFullDetails")}
+						</Typography>
+					</Link>
 
-          {/* ACTION BUTTONS */}
-          <Box sx={{ mt: 2 }}>
-            <QuantityButtons
-              loading={loading}
-              handleAddToCart={onAddToCart}
-              productCartLine={currentCartLine}
-              handleCartAmountChange={handleCartAmountChange}
-              isOOS={false}
-            />
-            <Button
-              color="primary"
-              variant="outlined"
-              size="small"
-              onClick={handleClose}
-              sx={{ height: 36.5, ml: 2, px: 4 }}
-            >
-              {t("close")}
-            </Button>
-          </Box>
-        </Grid>
-      </Grid>
-    </DialogContent>
-  );
+					{/* ACTION BUTTONS */}
+					<Box sx={{ mt: 2 }}>
+						<QuantityButtons
+							loading={loading}
+							handleAddToCart={onAddToCart}
+							productCartLine={currentCartLine}
+							handleCartAmountChange={handleCartAmountChange}
+							isOOS={false}
+						/>
+						<Button
+							color="primary"
+							variant="outlined"
+							size="small"
+							onClick={handleClose}
+							sx={{ height: 36.5, ml: 2, px: 4 }}
+						>
+							{t("close")}
+						</Button>
+					</Box>
+				</Grid>
+			</Grid>
+		</DialogContent>
+	);
 }

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

@@ -1,54 +1,54 @@
 import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
 import { CircularProgress, Dialog, DialogContent } from "@mui/material";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-import getProductById from "@/api-manager/services/product/queries/get-product-by-id";
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
+import getProductById from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/get-product-by-id";
 import QuickViewContent from "./quick-view-dialog-content";
 
 interface Props {
-  open: boolean;
-  handleClose: () => void;
-  product: ProductSearchResult;
+	open: boolean;
+	handleClose: () => void;
+	product: ProductSearchResult;
 }
 
 export default function QuickView({ open, handleClose, product }: Props) {
-  if (!open) {
-    return;
-  }
+	if (!open) {
+		return;
+	}
 
-  const { data: cart } = getCart.useData();
-  const { data: productDetails } = getProductById.useData({
-    id: product.RecordId,
-  });
+	const { data: cart } = getCart.useData();
+	const { data: productDetails } = getProductById.useData({
+		id: product.RecordId,
+	});
 
-  return (
-    <Dialog
-      fullWidth={true}
-      maxWidth="md"
-      open={open}
-      onClose={handleClose}
-      aria-labelledby="quick-view-dialog-title"
-    >
-      {cart && productDetails ? (
-        <QuickViewContent
-          product={product}
-          cart={cart}
-          productDetails={productDetails}
-          handleClose={handleClose}
-        />
-      ) : (
-        <DialogContent
-          sx={{
-            padding: 2,
-            width: "100%",
-            height: "200px",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <CircularProgress size={20} sx={{ width: "200px" }} />
-        </DialogContent>
-      )}
-    </Dialog>
-  );
+	return (
+		<Dialog
+			fullWidth={true}
+			maxWidth="md"
+			open={open}
+			onClose={handleClose}
+			aria-labelledby="quick-view-dialog-title"
+		>
+			{cart && productDetails ? (
+				<QuickViewContent
+					product={product}
+					cart={cart}
+					productDetails={productDetails}
+					handleClose={handleClose}
+				/>
+			) : (
+				<DialogContent
+					sx={{
+						padding: 2,
+						width: "100%",
+						height: "200px",
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<CircularProgress size={20} sx={{ width: "200px" }} />
+				</DialogContent>
+			)}
+		</Dialog>
+	);
 }