@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components-v2/product-cards/product-card/components/quantity-buttons.tsx

@@ -1,65 +0,0 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { CircularProgress } from "@mui/material";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-  isLineUpdating: boolean;
-}
-// ==============================================================
-
-export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement, isLineUpdating } =
-    props || {};
-
-  return (
-    <FlexBox
-      alignItems="center"
-      className="add-cart"
-      flexDirection="row-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-      gap={1}
-    >
-      <Button
-        color="primary"
-        variant="outlined"
-        onClick={handleIncrement}
-        sx={{ padding: "3px" }}
-        disabled={isLineUpdating}
-      >
-        <Add fontSize="small" />
-      </Button>
-
-      {quantity > 0 && (
-        <Fragment>
-          {isLineUpdating ? (
-            <CircularProgress size={"10px"} color={"primary"} />
-          ) : (
-            <Paragraph color="text.primary" fontWeight="600">
-              {quantity}
-            </Paragraph>
-          )}
-
-          <Button
-            color="primary"
-            variant="outlined"
-            onClick={handleDecrement}
-            sx={{ padding: "3px" }}
-            disabled={isLineUpdating}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </Fragment>
-      )}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-plp/components/quantity-buttons.tsx

@@ -1,54 +0,0 @@
-import { Fragment } from "react";
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-
-export default function QuantityButtons(props: Props) {
-  const { quantity, handleDecrement, handleIncrement } = props || {};
-
-  return (
-    <FlexBox
-      width="30px"
-      alignItems="center"
-      className="add-cart"
-      flexDirection="column-reverse"
-      justifyContent={quantity ? "space-between" : "flex-start"}
-    >
-      <Button
-        color="primary"
-        variant="outlined"
-        onClick={handleIncrement}
-        sx={{ padding: "3px" }}
-      >
-        <Add fontSize="small" />
-      </Button>
-
-      {quantity ? (
-        <Fragment>
-          <Paragraph color="text.primary" fontWeight="600">
-            {quantity}
-          </Paragraph>
-
-          <Button
-            color="primary"
-            variant="outlined"
-            onClick={handleDecrement}
-            sx={{ padding: "3px" }}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </Fragment>
-      ) : null}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-plp-list/components/add-to-cart.tsx

@@ -1,63 +0,0 @@
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-
-// ==============================================================
-interface Props {
-  quantity: number;
-  handleDecrement: () => void;
-  handleIncrement: () => void;
-}
-// ==============================================================
-
-export default function AddToCartButton({
-  quantity,
-  handleDecrement,
-  handleIncrement,
-}: Props) {
-  return (
-    <FlexBox mt={1} flexShrink={0}>
-      {quantity ? (
-        <FlexBetween>
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleIncrement}
-          >
-            <Add fontSize="small" />
-          </Button>
-
-          <H5 fontWeight="600" fontSize="15px" mx={1.5}>
-            {quantity}
-          </H5>
-
-          <Button
-            color="primary"
-            variant="contained"
-            sx={{ padding: 0.5, minHeight: 0 }}
-            onClick={handleDecrement}
-          >
-            <Remove fontSize="small" />
-          </Button>
-        </FlexBetween>
-      ) : (
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={handleIncrement}
-          sx={{ padding: 0.5, minHeight: 0 }}
-        >
-          <Add fontSize="small" />
-        </Button>
-      )}
-    </FlexBox>
-  );
-}

package/src/components-v2/product-cards/product-card-plp-list/components/favorite-button.tsx

@@ -1,27 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Favorite from "@mui/icons-material/Favorite";
-import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
-
-// ==============================================================
-interface Props {
-  isFavorite: boolean;
-  toggleFavorite: () => void;
-}
-// ==============================================================
-
-export default function FavoriteButton({ isFavorite, toggleFavorite }: Props) {
-  return (
-    <IconButton
-      size="small"
-      onClick={toggleFavorite}
-      sx={{ position: "absolute", top: 15, right: 15, zIndex: 1 }}
-    >
-      {isFavorite ? (
-        <Favorite color="primary" fontSize="small" />
-      ) : (
-        <FavoriteBorder fontSize="small" />
-      )}
-    </IconButton>
-  );
-}

package/src/components-v2/product-cards/use-product.ts

@@ -1,35 +0,0 @@
-import getCart from "@/services/cart/queries/get-cart";
-import { useCallback, useState } from "react";
-import { useSnackbar } from "notistack";
-
-export default function useProduct(slug: string) {
-  const { data: cart } = getCart.useData();
-  const { enqueueSnackbar } = useSnackbar();
-  const [openModal, setOpenModal] = useState(false);
-  const [isFavorite, setIsFavorite] = useState(false);
-
-  const cartItem = cart?.CartLines?.find(
-    (cartLine) => String(cartLine.Product?.RecordId) === slug,
-  );
-
-  const toggleFavorite = useCallback(() => setIsFavorite((fav) => !fav), []);
-  const toggleDialog = useCallback(() => setOpenModal((open) => !open), []);
-
-  const handleCartAmountChange = (type?: "remove") => {
-    // TODO Febraury 25, 2025: Implement this function
-    //dispatch({ type: "CHANGE_CART_AMOUNT", payload: product });
-    // SHOW ALERT PRODUCT ADDED OR REMOVE
-    if (type === "remove")
-      enqueueSnackbar("Remove from Cart", { variant: "error" });
-    else enqueueSnackbar("Added to Cart", { variant: "success" });
-  };
-
-  return {
-    cartItem,
-    openModal,
-    isFavorite,
-    toggleDialog,
-    toggleFavorite,
-    handleCartAmountChange,
-  };
-}

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

@@ -1,65 +0,0 @@
-import { Fragment, ReactNode } from "react";
-import Grid from "@mui/material/Grid2";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
-// 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}>
-              <ProductCardPlp
-                key={item.RecordId}
-                product={{
-                  title: item.Name ?? "",
-                  slug: item.ItemId ?? "",
-                  price: matchingPrice?.CustomerContextualPrice ?? 0,
-                  imgUrl: item.PrimaryImageUrl ?? "",
-                  rating: item.TotalRatings ?? 0,
-                  discount: 0, // Need to get discount info for product.
-                  id: item.RecordId,
-                }}
-              >
-                <ProductCardPlp.Image />
-                <ProductCardPlp.Body>
-                  <ProductCardPlp.Info>
-                    <ProductCardPlp.Title />
-                    <ProductCardPlp.Rating />
-                    <ProductCardPlp.Price />
-                  </ProductCardPlp.Info>
-                  {/* <ProductCardPlp.Actions>
-                    <ProductCardPlp.QuantityButtons />
-                  </ProductCardPlp.Actions> */}
-                </ProductCardPlp.Body>
-              </ProductCardPlp>
-            </Grid>
-          );
-        })}
-      </Grid>
-      <FlexBetween flexWrap="wrap" mt={6}>
-        {pagination}
-      </FlexBetween>
-    </Fragment>
-  );
-}

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

@@ -1,66 +0,0 @@
-import { ReactNode } from "react";
-// GLOBAL CUSTOM COMPONENTS
-import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
-import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/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 (
-          <ProductCardPlpList
-            key={item.RecordId}
-            product={{
-              id: item.RecordId,
-              title: item.Name ?? "",
-              slug: item.ItemId ?? "",
-              price: matchingPrice?.CustomerContextualPrice ?? 0,
-              imgUrl: item.PrimaryImageUrl ?? "",
-              rating: item.TotalRatings ?? 0,
-              discount: 0, // Need to get discount info for product.,
-              //tags: ["Bike", "Motor", "Ducati"], // Example tags
-            }}
-          >
-            {/* <ProductCardPlpList.FavoriteButton /> */}
-            <ProductCardPlpList.Body>
-              <ProductCardPlpList.Image />
-              <ProductCardPlpList.Content>
-                <ProductCardPlpList.Info>
-                  {/* <ProductCardPlpList.Tags /> */}
-                  <ProductCardPlpList.Title />
-                  <ProductCardPlpList.Price />
-                  <ProductCardPlpList.Rating />
-                </ProductCardPlpList.Info>
-                {/* <ProductCardPlpList.Actions>
-                  <ProductCardPlpList.QuantityButtons />
-                </ProductCardPlpList.Actions> */}
-              </ProductCardPlpList.Content>
-            </ProductCardPlpList.Body>
-          </ProductCardPlpList>
-        );
-      })}
-
-      <FlexBetween flexWrap="wrap" mt={4}>
-        {pagination}
-      </FlexBetween>
-    </div>
-  );
-}

package/src/components-v2/wishlist-dialogs/create-wishlist/compound/context.ts

@@ -1,2 +0,0 @@
-import { createContext } from "react";
-export const CreateNewWishlistContext = createContext(null);

package/src/pages/README.md

@@ -1,4 +0,0 @@
-# Pages V1 Folder
-
-- Keeping this temporarily to maintain compatability for OLCC while we create the new component system
-- OLCC will start moving over to components-v2 and pages-v2 and then we will remove this folder

package/src/pages/account/addresses/address-form.tsx

@@ -1,289 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Button,
-  FormControl,
-  InputLabel,
-  TextField,
-  MenuItem,
-  Select,
-  OutlinedInput,
-} from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { useLocale, useTranslations } from "next-intl";
-import { useNotification } from "@/components/Notifications/use-notification";
-import { useRouter } from "next/navigation";
-// Forms
-import { useFormik } from "formik";
-import { z } from "zod";
-import { withZodSchema } from "formik-validator-zod";
-// API and Interfaces
-import { Address } from "@/api-manager/schemas/address.schema";
-import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import getCountries from "@/api-manager/services/address/queries/get-countries";
-import getStates from "@/api-manager/services/address/queries/get-states";
-import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
-import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
-
-// =============================================================
-type Props = { address: Address };
-// =============================================================
-export default function AddressForm({ address }: Props) {
-  const [tn, t] = ["Account.Addresses", "Address"].map(useTranslations);
-  const { setNotification } = useNotification();
-  const router = useRouter();
-  const locale = useLocale();
-
-  const { data: countries } = getCountries.useData({ locale });
-  const defaultCountry = countries?.find(
-    (c) => c.CountryRegionId === address?.ThreeLetterISORegionName,
-  );
-  const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
-  const { data: states } = getStates.useData({
-    countryId: selectedCountry?.CountryRegionId,
-  });
-
-  const { mutateAsync: createAddress } = useCreateAddress();
-  const { mutateAsync: updateAddress } = useUpdateAddress();
-
-  React.useEffect(() => {
-    if (!selectedCountry && defaultCountry) {
-      setSelectedCountry(defaultCountry);
-    }
-  }, [defaultCountry, selectedCountry]);
-
-  const FormSchema = z.object({
-    Name: z.string().nonempty(t("Validation.required", { field: t("name") })),
-    Street: z
-      .string()
-      .nonempty(t("Validation.required", { field: t("street") })),
-    City: z.string().nonempty(t("Validation.required", { field: t("city") })),
-    State: z.string().nonempty(t("Validation.required", { field: t("state") })),
-    ZipCode: z
-      .string()
-      .nonempty(t("Validation.required", { field: t("zipCode") })),
-    Country: z
-      .string()
-      .nonempty(t("Validation.required", { field: t("country") })),
-    Phone: z.string().optional().default(""),
-  });
-  type FormSchemaType = z.infer<typeof FormSchema>;
-
-  const handleSubmit = async (values: FormSchemaType) => {
-    let newAddress: Address = {
-      Name: values.Name,
-      Street: values.Street,
-      City: values.City,
-      State: values.State,
-      ZipCode: values.ZipCode,
-      TwoLetterISORegionName: selectedCountry?.ISOCode,
-      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
-      Phone: values.Phone || undefined,
-    };
-
-    try {
-      if (address?.Id && address?.Id !== "new") {
-        newAddress = { ...newAddress, Id: address?.Id };
-        await updateAddress(newAddress);
-      } else {
-        await createAddress(newAddress);
-      }
-      setNotification({
-        message: tn("addressSuccess"),
-        severity: "success",
-      });
-      router.push("/account/addresses");
-    } catch (error) {
-      setNotification({
-        message: tn("addressFailed"),
-        severity: "error",
-      });
-    }
-  };
-
-  const setValues = (address: Address) => {
-    return {
-      Name: address?.Name || "",
-      Street: address?.Street || "",
-      City: address?.City || "",
-      State: address?.State || "",
-      ZipCode: address?.ZipCode || "",
-      Country: address?.ThreeLetterISORegionName || "",
-      Phone: address?.Phone || "",
-    };
-  };
-
-  const intialValues = setValues(address);
-
-  const formik = useFormik<FormSchemaType>({
-    initialValues: intialValues,
-    onSubmit: handleSubmit,
-    validate: withZodSchema(FormSchema),
-  });
-
-  return (
-    <form onSubmit={formik.handleSubmit}>
-      <Grid container spacing={3}>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Name"
-            fullWidth
-            autoComplete="off"
-            label={t("name")}
-            value={formik.values.Name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Name && Boolean(formik.errors.Name)}
-            helperText={formik.touched.Name && formik.errors.Name}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Street"
-            fullWidth
-            autoComplete="off"
-            label={t("street")}
-            value={formik.values.Street}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Street && Boolean(formik.errors.Street)}
-            helperText={formik.touched.Street && formik.errors.Street}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="City"
-            fullWidth
-            autoComplete="off"
-            label={t("city")}
-            value={formik.values.City}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.City && Boolean(formik.errors.City)}
-            helperText={formik.touched.City && formik.errors.City}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FormControl
-            fullWidth
-            size="small"
-            error={formik.touched.Country && Boolean(formik.errors.Country)}
-          >
-            <InputLabel required id="Country">
-              {t("country")}
-            </InputLabel>
-            <Select
-              labelId="Country"
-              name="Country"
-              input={<OutlinedInput label={t("country")} />}
-              value={formik.values.Country}
-              onChange={(event) => {
-                const countryId = event.target.value;
-
-                // Update selected country
-                const selected =
-                  countries?.find((c) => c.CountryRegionId === countryId) ||
-                  null;
-                setSelectedCountry(selected);
-
-                formik.setFieldValue("Country", countryId);
-                // Reset state field when country changes
-                formik.setFieldValue("State", "");
-              }}
-              onBlur={formik.handleBlur}
-              required
-            >
-              <MenuItem value="">Select Country</MenuItem>
-              {countries?.map(({ ShortName, CountryRegionId }, index) => (
-                <MenuItem value={CountryRegionId} key={index}>
-                  {ShortName}
-                </MenuItem>
-              ))}
-            </Select>
-            {formik.touched.Country && formik.errors.Country && (
-              <Box
-                component="span"
-                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
-              >
-                {formik.errors.Country}
-              </Box>
-            )}
-          </FormControl>
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <FormControl
-            fullWidth
-            size="small"
-            error={formik.touched.State && Boolean(formik.errors.State)}
-          >
-            <InputLabel required id="State">
-              {t("state")}
-            </InputLabel>
-            <Select
-              labelId="State"
-              name="State"
-              input={<OutlinedInput label={t("state")} />}
-              value={formik.values.State}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              required
-            >
-              <MenuItem value="">Select a state</MenuItem>
-              {states?.map(({ StateName, StateId }, index) => (
-                <MenuItem value={StateId} key={index}>
-                  {StateName}
-                </MenuItem>
-              ))}
-            </Select>
-            {formik.touched.State && formik.errors.State && (
-              <Box
-                component="span"
-                sx={{ color: "error.main", fontSize: "0.75rem", mt: 0.5 }}
-              >
-                {formik.errors.State}
-              </Box>
-            )}
-          </FormControl>
-        </Grid>
-
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="ZipCode"
-            fullWidth
-            autoComplete="off"
-            label={t("zipCode")}
-            value={formik.values.ZipCode}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.ZipCode && Boolean(formik.errors.ZipCode)}
-            helperText={formik.touched.ZipCode && formik.errors.ZipCode}
-            required
-          />
-        </Grid>
-        <Grid size={{ sm: 6, xs: 12 }}>
-          <TextField
-            name="Phone"
-            fullWidth
-            autoComplete="off"
-            label={t("phone")}
-            value={formik.values.Phone}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={formik.touched.Phone && Boolean(formik.errors.Phone)}
-            helperText={formik.touched.Phone && formik.errors.Phone}
-            required
-          />
-        </Grid>
-      </Grid>
-      <Grid size={{ sm: 6, xs: 12 }} sx={{ mt: 3 }}>
-        <Button type="submit" variant="contained" color="primary">
-          {t("save")}
-        </Button>
-      </Grid>
-    </form>
-  );
-}