@evenicanpm/storefront-core 1.0.3 → 1.0.5

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

@@ -1,299 +0,0 @@
-import React from "react";
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import TextField from "@mui/material/TextField";
-import DialogContent from "@mui/material/DialogContent";
-// React hook form
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import z from "zod";
-// LOCAL CUSTOM COMPONENT
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { Address } from "@/api-manager/schemas/address.schema";
-import { useTranslations } from "use-intl";
-import { Box, FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import getStates from "@/api-manager/services/address/queries/get-states";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import { merge } from "lodash";
-
-interface Props {
-  address?: Address;
-  countries: CountryRegionInfo[];
-  cartId: string;
-  open: boolean;
-  handleClose: () => void;
-  handleCreateOrUpdateAddress: (address: Address) => void;
-  isGuest: boolean;
-}
-
-type AddressFormInput = {
-  name: string;
-  street: string;
-  city: string;
-  state: string;
-  zipCode: string;
-  country: string;
-  phone: string | null;
-};
-
-export default function NewAddressForm({
-  address,
-  countries,
-  isGuest,
-  open,
-  handleClose,
-  handleCreateOrUpdateAddress,
-}: Props) {
-  const t = useTranslations("Address");
-  const defaultCountry = React.useMemo(
-    () =>
-      countries.find(
-        (c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
-      ),
-    [countries, address],
-  );
-
-  const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
-
-  const { data: states } = getStates.useData({
-    countryId: selectedCountry?.CountryRegionId,
-  });
-
-  React.useEffect(() => {
-    if (address && defaultCountry) {
-      setSelectedCountry(defaultCountry);
-    }
-  }, [address, defaultCountry]);
-
-  const validationSchema = z.object({
-    name: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("name") }) }),
-    street: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("street") }) }),
-    city: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("city") }) }),
-    state: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("state") }) }),
-    zipCode: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("zipCode") }) }),
-    country: z
-      .string()
-      .min(1, { message: t("Validation.required", { field: t("country") }) }),
-    phone: z.string().optional().default(""),
-  });
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    control,
-    setValue,
-    reset,
-  } = useForm<AddressFormInput>({
-    defaultValues: {
-      name: "",
-      street: "",
-      city: "",
-      state: "0",
-      zipCode: "",
-      phone: "",
-      country: selectedCountry?.CountryRegionId || "",
-    },
-    resolver: zodResolver(validationSchema),
-  });
-
-  React.useEffect(() => {
-    setValue("country", selectedCountry?.CountryRegionId || "");
-    if (!address) {
-      setValue("state", "0");
-    }
-  }, [selectedCountry, setValue, address]);
-
-  React.useEffect(() => {
-    if (!open) {
-      reset();
-      setSelectedCountry(defaultCountry ?? null);
-    }
-  }, [defaultCountry, open, reset]);
-
-  React.useEffect(() => {
-    if (address) {
-      setValue("name", address.Name || "");
-      setValue("street", address.Street || "");
-      setValue("city", address.City || "");
-      setValue("state", address.State || "0");
-      setValue("zipCode", address.ZipCode || "");
-      setValue("phone", address.Phone || "");
-      setValue("country", address.ThreeLetterISORegionName || "");
-    } else {
-      reset();
-    }
-  }, [address, setValue, reset]);
-
-  const onFormSubmit = (data: AddressFormInput) => {
-    const tempAddress: Address = {
-      Name: data.name,
-      Street: data.street,
-      City: data.city,
-      State: data.state,
-      ZipCode: data.zipCode,
-      TwoLetterISORegionName: selectedCountry?.ISOCode,
-      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
-      Phone: data.phone || undefined,
-    };
-    const newAddress = merge({}, address || {}, tempAddress);
-    handleCreateOrUpdateAddress(newAddress);
-    handleClose();
-  };
-
-  return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogContent>
-        <H5 mb={4}>{t("title")}</H5>
-        {isGuest && !address && (
-          <FlexBox justifyContent="center" mb={2}>
-            <Paragraph color={(theme) => theme.palette.error.main}>
-              {t("guestCartAddressWarning")}
-            </Paragraph>
-          </FlexBox>
-        )}
-        <Box component="form" onSubmit={handleSubmit(onFormSubmit)}>
-          <Grid container spacing={3}>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("name")}
-                label={t("name")}
-                fullWidth
-                error={!!errors.name}
-                helperText={errors.name?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("street")}
-                label={t("street")}
-                fullWidth
-                error={!!errors.street}
-                helperText={errors.street?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("city")}
-                label={t("city")}
-                fullWidth
-                error={!!errors.city}
-                helperText={errors.city?.message}
-              />
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <FormControl fullWidth size={"small"} error={!!errors.country}>
-                <InputLabel id="country-label">{t("country")}</InputLabel>
-                <Controller
-                  name="country"
-                  control={control}
-                  render={({ field: { value } }) => (
-                    <Select
-                      labelId="country-label"
-                      value={value}
-                      onChange={(e) => {
-                        const cid = e.target.value as string;
-                        const sel =
-                          countries.find((c) => c.CountryRegionId === cid) ||
-                          null;
-                        setSelectedCountry(sel);
-                      }}
-                    >
-                      <MenuItem value="">Select country</MenuItem>
-                      {countries.map((c) => (
-                        <MenuItem
-                          key={c.CountryRegionId}
-                          value={c.CountryRegionId}
-                        >
-                          {c.ShortName}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </FormControl>
-            </Grid>
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <FormControl fullWidth size={"small"} error={!!errors.state}>
-                <InputLabel id="state-label">{t("state")}</InputLabel>
-                <Controller
-                  name="state"
-                  control={control}
-                  render={({ field: { value, onChange } }) => (
-                    <Select
-                      labelId="state-label"
-                      value={value}
-                      onChange={onChange}
-                    >
-                      <MenuItem value="0">Select a state</MenuItem>
-                      {states &&
-                        states.length > 0 &&
-                        states.map(({ StateName, StateId }) => (
-                          <MenuItem key={StateId} value={StateId}>
-                            {StateName}
-                          </MenuItem>
-                        ))}
-                    </Select>
-                  )}
-                />
-              </FormControl>
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("zipCode")}
-                label={t("zipCode")}
-                fullWidth
-                error={!!errors.zipCode}
-                helperText={errors.zipCode?.message}
-              />
-            </Grid>
-
-            <Grid size={{ sm: 6, xs: 12 }}>
-              <TextField
-                {...register("phone")}
-                label={t("phone")}
-                fullWidth
-                error={!!errors.phone}
-                helperText={errors.phone?.message}
-              />
-            </Grid>
-            <Grid
-              size={{ sm: 6, xs: 12 }}
-              display="flex"
-              justifyContent="space-around"
-            >
-              <Button
-                type="submit"
-                color="primary"
-                variant="contained"
-                data-testid="new-address-btn"
-              >
-                {t("save")}
-              </Button>
-              <Button onClick={handleClose} color="primary" variant="outlined">
-                {t("cancel")}
-              </Button>
-            </Grid>
-          </Grid>
-        </Box>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,90 +0,0 @@
-"use client";
-import Grid from "@mui/material/Grid2";
-import Avatar from "@mui/material/Avatar";
-
-// GLOBAL CUSTOM COMPONENTS
-import {
-  FlexBox,
-  FlexRowCenter,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import ImageWithFallback from "@evenicanpm/storefront-core/src/components-v2/ImageWithFallback";
-
-/**
- * Master product data comes in as prop, selected variant details are called
- * every render, if there is a valid variant id selected.
- */
-
-// ================================================================
-type Props = {
-  selectedImageIndex?: number;
-  primaryImageUrl: string;
-  handleImageClick: (ind: number) => () => void;
-  images: string[];
-  name: string | undefined;
-};
-
-// ================================================================
-
-export default function ProductImages({
-  name,
-  selectedImageIndex,
-  primaryImageUrl,
-  images,
-  handleImageClick,
-}: Props) {
-  return (
-    <>
-      <Grid size={{ md: 6, xs: 12 }} alignItems="center">
-        {/*MAIN IMAGE*/}
-        <FlexBox
-          borderRadius={3}
-          overflow="hidden"
-          justifyContent="center"
-          mb={6}
-        >
-          <ImageWithFallback
-            alt={name ?? "product"}
-            width={300}
-            height={300}
-            loading="eager"
-            src={
-              Array.isArray(images) &&
-              selectedImageIndex !== undefined &&
-              images[selectedImageIndex]
-                ? images[selectedImageIndex]
-                : primaryImageUrl
-            }
-            style={{ objectFit: "contain" }}
-          />
-        </FlexBox>
-
-        {/*THUMBNAIL IMAGES*/}
-        <FlexBox overflow="auto" gap={1} justifyContent="center">
-          {images?.map((url, ind) => (
-            <FlexRowCenter
-              key={ind}
-              width={64}
-              height={64}
-              minWidth={64}
-              bgcolor="white"
-              border="1px solid"
-              borderRadius="10px"
-              style={{ cursor: "pointer" }}
-              onClick={handleImageClick(ind)}
-              borderColor={
-                selectedImageIndex === ind ? "primary.main" : "grey.400"
-              }
-            >
-              <Avatar
-                alt="product"
-                src={url}
-                variant="square"
-                sx={{ height: 40 }}
-              />
-            </FlexRowCenter>
-          ))}
-        </FlexBox>
-      </Grid>
-    </>
-  );
-}

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