@evenicanpm/storefront-core 1.0.3 → 1.0.4

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

@@ -1,256 +0,0 @@
-"use client";
-import { useState, useMemo } from "react";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import Rating from "@mui/material/Rating";
-import { CircularProgress, Typography } from "@mui/material";
-
-// GLOBAL CUSTOM COMPONENTS
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import {
-  H1,
-  H2,
-  H6,
-} from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import QuantityButtons from "@evenicanpm/storefront-core/src/components-v2/product-quantity-buttons/product-quantity-buttons";
-import AddToWishlistButton from "@evenicanpm/storefront-core/src/components-v2/wishlist-modal/add-to-wishlist-button";
-// D365
-import { ProductDimensionValueInventoryAvailability } from "@msdyn365-commerce/retail-proxy";
-
-// API MANAGER
-import {
-  InventorySearchCriteriaInput,
-  ProductDetails,
-} from "@/api-manager/schemas/product.schema";
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import getProductPrices from "@/api-manager/services/product/queries/get-product-prices";
-import getProductAvailability from "@/api-manager/services/product/queries/get-product-availability";
-
-// LOCAL HOOKS
-import useVariants from "../../../hooks/use-variants";
-import useCart, {
-  AddToCartBopisInput,
-} from "@evenicanpm/storefront-core/src/hooks/use-cart";
-
-// LOCAL COMPONENTS
-import ProductDimensions from "@evenicanpm/storefront-core/src/components-v2/product-dimensions";
-import ProductImages from "./product-intro-images";
-import FindInStoreButton from "../bopis/find-in-store-button";
-
-/**
- * Master product data comes in as prop, selected variant details are called
- * every render, if there is a valid variant id selected.
- */
-
-// ================================================================
-type Props = { product: ProductDetails; cart: Cart };
-// ================================================================
-
-export default function ProductIntro({ product, cart }: Props) {
-  const [selectedImageIndex, setSelectedImage] = useState<number>(0);
-  const [showDimensionError, setShowDimensionError] = useState(false);
-  const [productRedId, setProductRedId] = useState<number>(product.RecordId);
-
-  const { Name, DimensionValues, Images, ItemId, RecordId } = product;
-
-  const { data: productPrices } = getProductPrices.useData({
-    productIds: [Number(productRedId)],
-  });
-
-  // HOOKS
-  const {
-    productVariant,
-    selectVariantId,
-    selectDimensions,
-    handleChangeVariant,
-    allDimensionsSelected,
-  } = useVariants({ product });
-
-  const { handleCartAmountChange, handleAddToCart, loading } = useCart({
-    cart,
-    selectVariantId,
-    recordId: RecordId,
-  });
-
-  const { formatCurrency } = useCurrencyFormatter();
-
-  const searchCriteria = useMemo<InventorySearchCriteriaInput>(
-    () => ({
-      allDimensionsSelected: allDimensionsSelected(selectDimensions),
-      searchCriteria: {
-        defaultWarehouseOnly: true,
-        productIds: [selectVariantId || RecordId],
-      },
-    }),
-    [allDimensionsSelected, selectDimensions, selectVariantId, RecordId],
-  );
-
-  const { data: shippingInventoryData, isLoading: inventoryLoading } =
-    getProductAvailability.useData(searchCriteria);
-  // HELPERS
-  const currentCartLine = cart?.CartLines?.find((item) => {
-    return item?.ProductId === (Number(selectVariantId) || RecordId);
-  });
-
-  const getInventoryLabel = (): string | null => {
-    const aggregate =
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
-    if (aggregate) {
-      const { TotalAvailableInventoryLevelLabel } = aggregate;
-      return TotalAvailableInventoryLevelLabel || null;
-    }
-    return null;
-  };
-
-  const shouldDisableAddToCart = () => {
-    //TODO: Incorporate global inventory enabled flag.
-    if (!allDimensionsSelected(selectDimensions)) {
-      return false; // Don't disable add to cart if dimensions are not selected, so clicking the button will provide an error message showing the user what to do.
-    }
-    const OOSCode = "OOS"; // Always means out of stock
-    const aggregate =
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities &&
-      shippingInventoryData?.AggregatedProductInventoryAvailabilities[0];
-    if (aggregate) {
-      const { TotalAvailableInventoryLevelCode } = aggregate;
-      return TotalAvailableInventoryLevelCode === OOSCode;
-    }
-    return true;
-  };
-
-  // HANDLE SELECT IMAGE
-  const handleImageClick = (ind: number) => () => {
-    setSelectedImage(ind);
-  };
-
-  const images =
-    Array.isArray(productVariant?.Images) && productVariant.Images.length > 0
-      ? productVariant.Images
-      : Array.isArray(Images) && Images.length > 0
-        ? Images
-        : [];
-
-  const handleChangeVariantWrapper = (
-    dimension: ProductDimensionValueInventoryAvailability,
-  ) => {
-    handleChangeVariant(dimension);
-
-    const newRecID = dimension?.ProductIds?.[0];
-    if (newRecID) setProductRedId(newRecID);
-  };
-
-  const onAddToCart = (bopisInput?: AddToCartBopisInput) => {
-    if (!allDimensionsSelected(selectDimensions)) {
-      setShowDimensionError(true);
-      return;
-    }
-    setShowDimensionError(false);
-    handleAddToCart(bopisInput);
-  };
-
-  const shouldOpenHelperModal = () => {
-    if (!allDimensionsSelected(selectDimensions)) {
-      setShowDimensionError(true);
-      return false;
-    }
-    setShowDimensionError(false);
-    return true;
-  };
-
-  return (
-    <Box width="100%">
-      <Grid container spacing={3} justifyContent="space-around">
-        <ProductImages
-          name={Name}
-          selectedImageIndex={selectedImageIndex}
-          primaryImageUrl={
-            Array.isArray(productVariant?.Images) &&
-            productVariant.Images.length > 0
-              ? productVariant.Images[0]
-              : Array.isArray(Images) && Images.length > 0
-                ? Images[0]
-                : ""
-          }
-          images={images}
-          handleImageClick={handleImageClick}
-        />
-
-        {/* PRODUCT INFO AREA */}
-        <Grid size={{ md: 6, xs: 12 }} alignItems="center">
-          {/* PRODUCT NAME */}
-          <H1 mb={1}>{Name}</H1>
-
-          {/* PRODUCT BRAND */}
-          <FlexBox alignItems="center" mb={1}>
-            <H6>SKU: {productVariant?.ItemId || ItemId}</H6>
-          </FlexBox>
-
-          {/* PRODUCT RATING */}
-          <FlexBox alignItems="center" gap={1} mb={2}>
-            <Box lineHeight="1">Rated:</Box>
-            <Rating color="warn" value={0} readOnly />
-            <H6 lineHeight="1">(0)</H6>
-          </FlexBox>
-
-          {/* PRODUCT VARIANTS  */}
-          <ProductDimensions
-            dimensionGroups={DimensionValues}
-            selectDimensions={selectDimensions}
-            handleChangeVariant={handleChangeVariantWrapper}
-            showDimensionError={showDimensionError}
-          />
-
-          {/* PRODUCT PRICE & STOCK */}
-          <Box pt={1} mb={3}>
-            <H2 color="primary.main" mb={0.5} lineHeight="1">
-              {productPrices && productPrices[0].CustomerContextualPrice ? (
-                formatCurrency(productPrices[0].CustomerContextualPrice)
-              ) : (
-                <CircularProgress size={20} />
-              )}
-            </H2>
-            <Box color="inherit">{}</Box>
-          </Box>
-          <FlexBox alignItems="center" gap={1} mb={2}>
-            {/* INVENTORY */}
-            <Box sx={{ my: 3 }}>
-              {inventoryLoading ? (
-                <CircularProgress size={20} />
-              ) : (
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  fontWeight={600}
-                >
-                  {getInventoryLabel()}
-                </Typography>
-              )}
-            </Box>
-
-            <FlexBox gap={2}>
-              <QuantityButtons
-                loading={loading}
-                handleAddToCart={onAddToCart}
-                productCartLine={currentCartLine}
-                handleCartAmountChange={handleCartAmountChange}
-                isOOS={shouldDisableAddToCart()}
-              />
-              <FindInStoreButton
-                productId={selectVariantId || RecordId}
-                canOpenModal={shouldOpenHelperModal}
-                handleAddToCart={handleAddToCart}
-                allDimensionsSelected={allDimensionsSelected(selectDimensions)}
-              />
-              <AddToWishlistButton
-                path="Account.Wishlists.btnAddToWishlist"
-                product={product}
-              />
-            </FlexBox>
-          </FlexBox>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}