@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/product-dimensions/product-dimensions.tsx

@@ -1,114 +0,0 @@
-"use client";
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import { H6 } from "@/components/_components/Typography";
-
-import {
-  ProductDimensionType,
-  ProductDimensionValueInventoryAvailability,
-} from "@msdyn365-commerce/retail-proxy";
-import { useTranslations } from "next-intl";
-
-// ================================================================
-type Props = {
-  dimensionGroups: ProductDimensionValueInventoryAvailability[][];
-  selectDimensions: Record<number, ProductDimensionValueInventoryAvailability>;
-  handleChangeVariant: (
-    dimension: ProductDimensionValueInventoryAvailability,
-  ) => void;
-  showDimensionError?: boolean;
-};
-// ================================================================
-
-export default function ProductDimensions({
-  dimensionGroups,
-  selectDimensions,
-  handleChangeVariant,
-  showDimensionError,
-}: Props) {
-  const t = useTranslations("productDetail.Dimensions");
-  const hasSelectedDimension = (
-    dimension: ProductDimensionValueInventoryAvailability[],
-  ) => {
-    return dimension.some((dim) =>
-      Object.values(selectDimensions).some(
-        (selectedDimension) =>
-          selectedDimension.DimensionValue?.RecordId ===
-          dim.DimensionValue?.RecordId,
-      ),
-    );
-  };
-
-  return (
-    <>
-      {Array.isArray(dimensionGroups) &&
-        dimensionGroups.map((dimensions, i) => (
-          <Box key={i} mb={2}>
-            <H6 mb={1}>
-              {ProductDimensionType[dimensions[0]?.DimensionTypeValue || 0]}
-            </H6>
-            {dimensions.map((dimension) => {
-              // CHECK STOCK
-              const disabled =
-                dimension.TotalAvailableInventoryLevelCode !== "AVAIL";
-              const selected =
-                selectDimensions[dimension.DimensionTypeValue || 0]
-                  ?.DimensionValue === dimension.DimensionValue;
-
-              // SWATCH DIMENSIONS
-              if (
-                ProductDimensionType[dimension.DimensionTypeValue || 0] ===
-                "Color"
-              ) {
-                return (
-                  <Chip
-                    key={dimension.DimensionValue?.RecordId}
-                    onClick={() => {
-                      handleChangeVariant(dimension);
-                    }}
-                    disabled={disabled}
-                    sx={{
-                      borderRadius: "100%",
-                      mr: 1,
-                      cursor: "pointer",
-                      backgroundColor: dimension.DimensionValue?.Value,
-                      width: 32,
-                      height: 32,
-                      border: selected ? "2px solid" : "2px solid transparent",
-                      "&:hover": {
-                        backgroundColor: dimension.DimensionValue?.Value,
-                      },
-                    }}
-                  />
-                );
-              }
-
-              // TEXT DIMENSIONS
-              return (
-                <Chip
-                  key={dimension.DimensionValue?.RecordId}
-                  label={dimension.DimensionValue?.Value}
-                  onClick={() => {
-                    handleChangeVariant(dimension);
-                  }}
-                  disabled={disabled}
-                  sx={{ borderRadius: "4px", mr: 1, cursor: "pointer", mb: 1 }}
-                  color={selected ? "primary" : "default"}
-                />
-              );
-            })}
-            {showDimensionError && !hasSelectedDimension(dimensions) && (
-              <H6 color="error.main" mb={1}>
-                {t("selectError", {
-                  dimension:
-                    ProductDimensionType[
-                      dimensions[0]?.DimensionTypeValue || 0
-                    ],
-                })}
-              </H6>
-            )}
-          </Box>
-        ))}
-    </>
-  );
-}

package/src/components/_components/product-quantity-buttons/product-quantity-buttons.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import { FlexBox } from "@/components/_components/flex-box";
-import Button from "@mui/material/Button";
-import { H3 } from "@/components/_components/Typography";
-import { MdAdd as Add } from "react-icons/md";
-import { MdRemove as Remove } from "react-icons/md";
-import CircularProgress from "@mui/material/CircularProgress";
-import { CartLine } from "@msdyn365-commerce/retail-proxy";
-import { useTranslations } from "next-intl";
-
-interface Props {
-  loading: boolean;
-  productCartLine: CartLine | undefined;
-  handleCartAmountChange: (amount: number, currentCartLine: CartLine) => void;
-  handleAddToCart: () => void;
-  isOOS: boolean;
-}
-
-export default function QuantityButtons({
-  loading,
-  handleAddToCart,
-  handleCartAmountChange,
-  productCartLine,
-  isOOS,
-}: Props) {
-  const t = useTranslations("productDetail");
-
-  if (!productCartLine?.Quantity || productCartLine.Quantity === 0) {
-    return (
-      <Button
-        color="primary"
-        variant="contained"
-        onClick={handleAddToCart}
-        disabled={isOOS}
-      >
-        {t("btnAddToCart")}
-      </Button>
-    );
-  }
-
-  return (
-    <FlexBox alignItems="center">
-      <Button
-        size="small"
-        sx={{ p: 1 }}
-        color="primary"
-        variant="outlined"
-        disabled={loading}
-        onClick={() =>
-          handleCartAmountChange(
-            (productCartLine?.Quantity || 0) - 1,
-            productCartLine,
-          )
-        }
-      >
-        <Remove fontSize="small" />
-      </Button>
-
-      <H3
-        fontWeight="600"
-        mx={2.5}
-        sx={{ width: "20px", display: "flex", justifyContent: "center" }}
-      >
-        {loading ? (
-          <CircularProgress size={"10px"} />
-        ) : (
-          productCartLine.Quantity.toString().padStart(2, "0")
-        )}
-      </H3>
-
-      <Button
-        size="small"
-        sx={{ p: 1 }}
-        color="primary"
-        variant="outlined"
-        disabled={loading}
-        onClick={() =>
-          handleCartAmountChange(
-            (productCartLine?.Quantity || 0) + 1,
-            productCartLine,
-          )
-        }
-      >
-        <Add fontSize="small" />
-      </Button>
-    </FlexBox>
-  );
-}

package/src/components/_components/products-view/product-view-dialog.tsx

@@ -1,218 +0,0 @@
-import Grid from "@mui/material/Grid2";
-import Rating from "@mui/material/Rating";
-import Dialog from "@mui/material/Dialog";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import DialogContent from "@mui/material/DialogContent";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENT
-// LOCAL CUSTOM HOOKS
-import useAddToCart from "@/api-manager/services/cart/mutations/add-to-cart";
-import { useTranslations } from "next-intl";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-// CUSTOM UTILS LIBRARY FUNCTION
-import { Carousel } from "../carousel";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-import BazaarImage from "../BazaarImage";
-import { FlexBox } from "../flex-box";
-import { H2, Paragraph, H1, H6, H3 } from "../Typography";
-import { currency } from "@/lib/lib";
-
-// =====================================================
-interface Props {
-  product: ProductInfo;
-  openDialog: boolean;
-  cartId?: string;
-  handleCloseDialog: () => void;
-}
-// =====================================================
-type CartItem = {
-  id: string | number;
-  qty: number;
-};
-// =====================================================
-export type ProductInfo = {
-  id: string | number;
-  title: string;
-  imgGroup: string[];
-  price: number;
-  slug: string;
-};
-// =====================================================
-type CartDispatch = {
-  type: "CHANGE_CART_AMOUNT";
-  payload: ProductInfo & {
-    qty: number;
-    name: string;
-    imgUrl: string;
-  };
-};
-// =====================================================
-
-export default function ProductViewDialog(props: Props) {
-  const { product, openDialog, cartId, handleCloseDialog } = props;
-  const { mutateAsync: addToCart } = useAddToCart();
-  const { data: cart } = getCart.useData();
-
-  const t = useTranslations("ProductViewDialog");
-  const { setNotification } = useNotification();
-
-  //const { state, dispatch } = useCart();
-  const state: { cart: CartItem[] } = {
-    cart: [],
-  };
-  const dispatch = (input: CartDispatch) => {
-    input;
-  };
-  const cartItem = state.cart.find((item) => item?.id === product.id);
-
-  const handleCartAmountChange = (amount: number) => () => {
-    dispatch({
-      type: "CHANGE_CART_AMOUNT",
-      payload: {
-        ...product,
-        qty: amount,
-        name: product.title,
-        imgUrl: product.imgGroup[0],
-      },
-    });
-  };
-
-  const handleAddToCart = async () => {
-    if (!cart) return;
-    try {
-      await addToCart({
-        cartId: cartId,
-        version: cart.Version,
-        cartLine: [
-          {
-            ProductId: Number(product.id),
-            Quantity: 1,
-          },
-        ],
-      });
-      setNotification({
-        message: t("addToCartSuccess"),
-        severity: "success",
-      });
-    } catch (error) {
-      setNotification({
-        message: t("addToCartError"),
-        severity: "error",
-      });
-    }
-  };
-
-  return (
-    <Dialog
-      open={openDialog}
-      maxWidth={false}
-      onClose={handleCloseDialog}
-      sx={{ zIndex: 1501 }}
-    >
-      <DialogContent sx={{ maxWidth: 900, width: "100%" }}>
-        <div>
-          <Grid container spacing={3}>
-            <Grid size={{ md: 6, xs: 12 }}>
-              <Carousel
-                slidesToShow={1}
-                arrowStyles={{
-                  boxShadow: 0,
-                  color: "primary.main",
-                  backgroundColor: "transparent",
-                }}
-              >
-                {product.imgGroup.map((item: string, index: number) => (
-                  <BazaarImage
-                    key={index}
-                    src={item}
-                    alt="product"
-                    sx={{
-                      mx: "auto",
-                      width: "100%",
-                      objectFit: "contain",
-                      height: { sm: 400, xs: 250 },
-                    }}
-                  />
-                ))}
-              </Carousel>
-            </Grid>
-
-            <Grid size={{ md: 6, xs: 12 }} alignSelf="center">
-              <H2>{product.title}</H2>
-
-              <Paragraph py={1} color="grey.500" fontWeight={600} fontSize={13}>
-                CATEGORY: Cosmetic
-              </Paragraph>
-
-              <H1 color="primary.main">{currency(product.price)}</H1>
-
-              <FlexBox alignItems="center" gap={1} mt={1}>
-                <Rating color="warn" value={4} readOnly />
-                <H6 lineHeight="1">(50)</H6>
-              </FlexBox>
-
-              <Paragraph my={2}>
-                Sed egestas, ante et vulputate volutpat, eros pede semper est,
-                vitae luctus metus libero eu augue. Morbi purus liberpuro ate
-                vol faucibus adipiscing.
-              </Paragraph>
-
-              <Divider sx={{ mb: 2 }} />
-
-              {!cartItem?.qty ? (
-                <Button
-                  size="large"
-                  color={"primary"}
-                  variant="contained"
-                  // onClick={handleCartAmountChange(1)}
-                  onClick={handleAddToCart}
-                  sx={{ height: 45, borderRadius: 2 }}
-                >
-                  {t("addToCartBtn")}
-                </Button>
-              ) : (
-                <FlexBox alignItems="center">
-                  <Button
-                    size="small"
-                    color={"primary"}
-                    variant="outlined"
-                    sx={{ p: ".6rem", height: 45 }}
-                    onClick={handleCartAmountChange(cartItem?.qty - 1)}
-                  >
-                    <Remove fontSize="small" />
-                  </Button>
-
-                  <H3 fontWeight="600" mx={2.5}>
-                    {cartItem?.qty.toString().padStart(2, "0")}
-                  </H3>
-
-                  <Button
-                    size="small"
-                    color={"primary"}
-                    variant="outlined"
-                    sx={{ p: ".6rem", height: 45 }}
-                    onClick={handleCartAmountChange(cartItem?.qty + 1)}
-                  >
-                    <Add fontSize="small" />
-                  </Button>
-                </FlexBox>
-              )}
-            </Grid>
-          </Grid>
-        </div>
-
-        <IconButton
-          sx={{ position: "absolute", top: 3, right: 3 }}
-          onClick={handleCloseDialog}
-        >
-          <Close fontSize="small" color="secondary" />
-        </IconButton>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/_components/products-view/products-grid-view.tsx

@@ -1,53 +0,0 @@
-import { Fragment, ReactNode } from "react";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBetween } from "@/components/_components/flex-box/index";
-import ProductCard16 from "@/components/_components/product-cards/product-card-16/index";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
-
-// ========================================================
-type Props = {
-  products: Product[];
-  pagination?: ReactNode;
-  productPrices?: ProductPrice[];
-};
-// ========================================================
-
-export default function ProductsGridView({
-  products,
-  pagination,
-  productPrices,
-}: Props) {
-  return (
-    <Fragment>
-      <Grid container spacing={3}>
-        {products.map((item: Product) => {
-          const matchingPrice = productPrices?.find(
-            (price) => price.ProductId === item.RecordId,
-          );
-          return (
-            <Grid size={{ lg: 4, sm: 6, xs: 12 }} key={item.ItemId}>
-              <ProductCard16
-                id={item.RecordId}
-                key={item.RecordId}
-                slug={item.ItemId ?? ""}
-                title={item.Name ?? ""}
-                price={matchingPrice?.CustomerContextualPrice ?? null}
-                discount={0} // Need to get discount info for product.
-                rating={item.TotalRatings ?? 0}
-                imgUrl={item.PrimaryImageUrl ?? ""}
-                showAddToCart={false}
-              />
-            </Grid>
-          );
-        })}
-      </Grid>
-
-      <FlexBetween flexWrap="wrap" mt={6}>
-        {pagination}
-      </FlexBetween>
-    </Fragment>
-  );
-}

package/src/components/_components/products-view/products-list-view.tsx

@@ -1,49 +0,0 @@
-import { ReactNode } from "react";
-// GLOBAL CUSTOM COMPONENTS
-import FlexBetween from "@/components/_components/flex-box/flex-between";
-import { ProductCard9 } from "@/components/_components/product-cards/product-card-9/index";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@/api-manager/schemas/product.schema";
-
-// ==========================================================
-type Props = {
-  products: Product[];
-  pagination?: ReactNode;
-  productPrices?: ProductPrice[];
-};
-// ==========================================================
-
-export default function ProductsListView({
-  products,
-  pagination,
-  productPrices,
-}: Props) {
-  return (
-    <div>
-      {products.map((item) => {
-        const matchingPrice = productPrices?.find(
-          (price) => price.ProductId === item.RecordId,
-        );
-        return (
-          <ProductCard9
-            id={item.RecordId}
-            key={item.RecordId}
-            slug={item.ItemId ?? ""}
-            title={item.Name ?? ""}
-            price={matchingPrice?.CustomerContextualPrice ?? null}
-            off={0} // Need to get discount info for product.
-            rating={item.TotalRatings ?? 0}
-            imgUrl={item.PrimaryImageUrl ?? ""}
-            showAddToCart={false}
-            showFavorite={false}
-          />
-        );
-      })}
-
-      <FlexBetween flexWrap="wrap" mt={4}>
-        {pagination}
-      </FlexBetween>
-    </div>
-  );
-}

package/src/components/_components/progress/index.ts

@@ -1 +0,0 @@
-export { default } from "./progress";

package/src/components/_components/progress/progress.tsx

@@ -1,77 +0,0 @@
-// https://github.com/apal21/nextjs-progressbar/issues/86
-
-"use client";
-import { useEffect } from "react";
-import NProgress from "nprogress";
-import useTheme from "@mui/material/styles/useTheme";
-import GlobalStyles from "@mui/material/GlobalStyles";
-
-import "nprogress/nprogress.css";
-
-type PushStateInput = [
-  data: string,
-  unused: string,
-  url?: string | URL | null | undefined,
-];
-
-export default function ProgressBar() {
-  const theme = useTheme();
-
-  useEffect(() => {
-    NProgress.configure({ showSpinner: false });
-
-    const handleAnchorClick = (event: Event) => {
-      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
-      const currentUrl = location.href;
-      if (targetUrl !== currentUrl) {
-        NProgress.start();
-      }
-    };
-
-    const handleMutation: MutationCallback = () => {
-      const anchorElements = document.querySelectorAll("a[href]");
-      anchorElements.forEach((anchor) =>
-        anchor.addEventListener("click", handleAnchorClick),
-      );
-    };
-
-    const mutationObserver = new MutationObserver(handleMutation);
-    mutationObserver.observe(document, { childList: true, subtree: true });
-
-    window.history.pushState = new Proxy(window.history.pushState, {
-      apply: (target, thisArg, argArray: PushStateInput) => {
-        NProgress.done();
-        return target.apply(thisArg, argArray);
-      },
-    });
-  });
-
-  return (
-    <GlobalStyles
-      styles={{
-        "#nprogress": {
-          pointerEvents: "none",
-          ".bar": {
-            top: 0,
-            left: 0,
-            height: 2,
-            width: "100%",
-            position: "fixed",
-            zIndex: 9999999999,
-            background: theme.palette.primary.main,
-          },
-          ".peg": {
-            right: 0,
-            opacity: 1,
-            width: 100,
-            height: "100%",
-            display: "block",
-            boxShadow: "none",
-            position: "absolute",
-            transform: "rotate(3deg) translate(0px, -4px)",
-          },
-        },
-      }}
-    />
-  );
-}

package/src/components/_components/scrollbar/index.ts

@@ -1 +0,0 @@
-export { default } from "./scrollbar";

package/src/components/_components/scrollbar/scrollbar.tsx

@@ -1,27 +0,0 @@
-import { ReactNode } from "react";
-import { SxProps, Theme } from "@mui/material/styles";
-import { Props } from "simplebar-react";
-import "simplebar-react/dist/simplebar.min.css";
-// STYLED COMPONENT
-import { StyledScrollBar } from "./styles";
-
-// =============================================================
-interface ScrollbarProps extends Props {
-  autoHide?: boolean;
-  sx?: SxProps<Theme>;
-  children: ReactNode;
-}
-// =============================================================
-
-export default function Scolbar({
-  children,
-  autoHide = true,
-  sx,
-  ...props
-}: ScrollbarProps) {
-  return (
-    <StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
-      {children}
-    </StyledScrollBar>
-  );
-}

package/src/components/_components/scrollbar/styles.ts

@@ -1,15 +0,0 @@
-"use client";
-
-import { alpha, styled } from "@mui/material/styles";
-import SimpleBar from "simplebar-react";
-
-export const StyledScrollBar = styled(SimpleBar)(({ theme }) => ({
-  maxHeight: "100%",
-  "& .simplebar-scrollbar": {
-    "&.simplebar-visible:before": { opacity: 1 },
-    "&:before": { backgroundColor: alpha(theme.palette.grey[400], 0.6) },
-  },
-  "& .simplebar-track.simplebar-vertical": { width: 9 },
-  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": { height: 6 },
-  "& .simplebar-mask": { zIndex: "inherit" },
-}));