@evenicanpm/storefront-core 1.1.0 → 1.2.0

package/src/pages/cart/checkout-form.tsx

@@ -1,122 +0,0 @@
-import Link from "next/link";
-// MUI
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import TextField from "@mui/material/TextField";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import { useFormatter, useTranslations } from "next-intl";
-import { CountryRegionInfo, Coupon } from "@msdyn365-commerce/retail-proxy";
-import getStates from "@evenicanpm/storefront-core/src/api-manager/services/address/queries/get-states";
-import { debounce } from "lodash";
-import EstimateShipping from "./estimate-shipping";
-import CouponEntry from "./coupon-entry";
-import React from "react";
-
-interface CheckoutFormProps {
-  cartId: string;
-  cartLineIds: string[];
-  cartTotal: number;
-  countries: CountryRegionInfo[];
-  updateCartComment: (comment: string) => void;
-  appliedCoupons: Coupon[];
-  commentFromData: string;
-  checkoutDisabled?: boolean;
-}
-
-export default function CheckoutForm({
-  cartTotal,
-  countries,
-  updateCartComment,
-  commentFromData,
-  appliedCoupons,
-  cartId,
-  cartLineIds,
-  checkoutDisabled,
-}: CheckoutFormProps) {
-  const { number } = useFormatter();
-  const t = useTranslations("Cart.Sidebar");
-  const textRef = React.useRef<HTMLTextAreaElement>();
-  const [selectedCountry, setSelectedCountry] = React.useState<
-    CountryRegionInfo | undefined
-  >(undefined);
-  const { data: states } = getStates.useData({
-    countryId: selectedCountry?.CountryRegionId,
-  });
-
-  const handleCommentUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
-    updateCartComment(e.target.value);
-  };
-
-  React.useEffect(() => {
-    if (textRef.current) {
-      textRef.current.value = commentFromData;
-    }
-  }, [commentFromData]);
-
-  const debounceCommentUpdate = debounce(handleCommentUpdate, 2500);
-
-  return (
-    <Card sx={{ padding: 3 }}>
-      <FlexBetween mb={2}>
-        <Span color="grey.600">{t("total")}:</Span>
-
-        <Span fontSize={18} fontWeight={600} lineHeight="1">
-          {number(cartTotal, { style: "currency", currency: "USD" })}
-        </Span>
-      </FlexBetween>
-
-      <Divider sx={{ mb: 2 }} />
-
-      <FlexBox alignItems="center" columnGap={1} mb={2}>
-        <Span fontWeight="600">{t("notes")}</Span>
-      </FlexBox>
-
-      {/* COMMENTS TEXT FIELD */}
-      <TextField
-        variant="outlined"
-        rows={6}
-        fullWidth
-        multiline
-        onChange={debounceCommentUpdate}
-        inputRef={textRef}
-        inputProps={{
-          ["data-testid"]: "cart-comment",
-        }}
-      />
-
-      <Divider sx={{ mb: 2 }} />
-
-      {/* APPLY VOUCHER TEXT FIELD */}
-      <CouponEntry appliedCoupons={appliedCoupons} cartId={cartId} />
-
-      <Divider sx={{ mb: 2 }} />
-      {/* COUNTRY TEXT FIELD */}
-      <EstimateShipping
-        countries={countries}
-        states={states || []}
-        setCountry={setSelectedCountry}
-        cartId={cartId}
-        cartLineIds={cartLineIds}
-      />
-
-      <Divider sx={{ mb: 2 }} />
-
-      <Button
-        fullWidth
-        color="primary"
-        href="/checkout"
-        variant="contained"
-        LinkComponent={Link}
-        disabled={checkoutDisabled}
-      >
-        {t("checkoutButton")}
-      </Button>
-    </Card>
-  );
-}

package/src/pages/cart/coupon-entry.tsx

@@ -1,90 +0,0 @@
-import useAddDiscountCode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/add-discount-code";
-import { Coupon } from "@msdyn365-commerce/retail-proxy";
-import {
-  Box,
-  Button,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  TextField,
-} from "@mui/material";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { useTranslations } from "next-intl";
-import Close from "@mui/icons-material/Close";
-import React from "react";
-import useRemoveDiscountcode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/remove-discount-code";
-
-interface CouponEntryProps {
-  appliedCoupons: Coupon[];
-  cartId: string;
-}
-
-export default function CouponEntry(props: CouponEntryProps) {
-  const { appliedCoupons, cartId } = props;
-  const [textValue, setTextValue] = React.useState<string>("");
-  const { mutate: updateCoupon } = useAddDiscountCode();
-  const { mutate: removeCoupon } = useRemoveDiscountcode();
-  const t = useTranslations("Cart.Coupons");
-
-  const handleUpdateTextValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTextValue(e.target.value);
-  };
-
-  const handleApplyCoupon = () => {
-    updateCoupon({ discountCode: textValue, cartId });
-    setTextValue("");
-  };
-
-  const handleRemoveCoupon = (coupon: string) => {
-    removeCoupon({ discountCode: coupon, cartId });
-  };
-  return (
-    <Box>
-      <TextField
-        fullWidth
-        size="small"
-        label={t("coupon")}
-        variant="outlined"
-        placeholder={t("coupon")}
-        value={textValue}
-        onChange={handleUpdateTextValue}
-      />
-      <Button
-        variant="outlined"
-        color="primary"
-        fullWidth
-        sx={{ mt: 2, mb: 4 }}
-        onClick={handleApplyCoupon}
-      >
-        {t("applyCouponButton")}
-      </Button>
-      {appliedCoupons.length > 0 && (
-        <>
-          <FlexBox alignItems="center" columnGap={1} mb={2}>
-            <Span fontWeight="600">{t("appliedCoupons")}</Span>
-          </FlexBox>
-          {appliedCoupons.map((coupon) => (
-            <List key={coupon.Code}>
-              <ListItem
-                secondaryAction={
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => handleRemoveCoupon(coupon.Code ?? "")}
-                    title={"Remove Coupon"}
-                  >
-                    <Close />
-                  </IconButton>
-                }
-              >
-                <ListItemText primary={coupon.Code} />
-              </ListItem>
-            </List>
-          ))}
-        </>
-      )}
-    </Box>
-  );
-}

package/src/pages/cart/estimate-shipping.tsx

@@ -1,183 +0,0 @@
-import useGetDeliveryOptions from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/get-delivery-options";
-import { Span } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import CountryInput from "@evenicanpm/storefront-core/src/components/countries-input";
-import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
-import {
-  CountryRegionInfo,
-  DeliveryOption,
-  StateProvinceInfo,
-} from "@msdyn365-commerce/retail-proxy";
-import {
-  Box,
-  Button,
-  Divider,
-  List,
-  ListItem,
-  ListItemText,
-  MenuItem,
-  TextField,
-} from "@mui/material";
-import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
-import { useTranslations } from "next-intl";
-import React from "react";
-
-export interface EstimateShippingProps {
-  countries: CountryRegionInfo[];
-  states: StateProvinceInfo[];
-  setCountry: (country: CountryRegionInfo) => void;
-  cartId: string;
-  cartLineIds: string[];
-  defaultCountryCode?: string;
-}
-
-export default function EstimateShipping(props: EstimateShippingProps) {
-  const {
-    countries,
-    states,
-    setCountry,
-    cartId,
-    cartLineIds,
-    defaultCountryCode,
-  } = props;
-  const t = useTranslations("Cart.Sidebar");
-  const defaultCountry = countries.find(
-    (c) => c.CountryRegionId === (defaultCountryCode ?? "USA"),
-  );
-  const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
-  const [selectedState, setSelectedState] = React.useState<string | undefined>(
-    undefined,
-  );
-  const [zipCode, setZipCode] = React.useState<string>("");
-  const [deliveryOptions, setDeliveryOptions] = React.useState<
-    DeliveryOption[]
-  >([]);
-  const [noOptionsFound, setNoOptionsFound] = React.useState<boolean>(false);
-  const { formatCurrency } = useCurrencyFormatter();
-  const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
-
-  React.useEffect(() => {
-    if (selectedCountry) {
-      setCountry(selectedCountry);
-    }
-  }, [selectedCountry, setCountry]);
-
-  const handleStateChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setSelectedState(event.target.value);
-
-  const handleZipCodeChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setZipCode(event.target.value);
-
-  const createAddressFromInput = (): Address => ({
-    ZipCode: zipCode,
-    State: selectedState,
-    TwoLetterISORegionName: selectedCountry?.ISOCode,
-    ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
-  });
-
-  const doDeliveryMethodLookup = async () => {
-    if (!zipCode || !selectedState || !selectedCountry) {
-      return;
-    }
-    setNoOptionsFound(false);
-    const data = await getDeliveryOptions({
-      cartId,
-      cartLineIds,
-      shippingAddress: createAddressFromInput(),
-    });
-    if (data.length) {
-      setDeliveryOptions(data);
-    } else {
-      setNoOptionsFound(true);
-    }
-  };
-
-  const renderOptionsSection = () => {
-    if (noOptionsFound) {
-      return <Span color="error.main">{t("noDeliveryOptionsFound")}</Span>;
-    } else if (deliveryOptions.length) {
-      return (
-        <Box>
-          <Span fontWeight={600} mb={2} display="block">
-            {t("deliveryOptionsLabel")}
-          </Span>
-          <Divider sx={{ mb: 2 }} />
-          <List>
-            {deliveryOptions.map((dl) => (
-              <ListItem
-                key={dl.RecordId}
-                secondaryAction={
-                  <Span>{formatCurrency(dl.TotalChargeAmount || 0)}</Span>
-                }
-              >
-                <ListItemText primary={dl.Description} />
-              </ListItem>
-            ))}
-          </List>
-        </Box>
-      );
-    }
-  };
-  return (
-    <Box>
-      <Span fontWeight={600} mb={2} display="block">
-        {t("estimatesLabel")}
-      </Span>
-
-      {/* COUNTRY TEXT FIELD */}
-      <Box sx={{ mb: 2 }}>
-        <CountryInput
-          selectedCountry={selectedCountry}
-          setSelectedCountry={setSelectedCountry}
-          countries={countries}
-          label={t("countryLabel")}
-        />
-      </Box>
-
-      {/* STATE/CITY TEXT FIELD */}
-      <TextField
-        select
-        fullWidth
-        size="small"
-        label={t("stateLabel")}
-        value={selectedState || 0}
-        onChange={handleStateChange}
-        variant="outlined"
-        placeholder="Select State"
-      >
-        <MenuItem value={0}>Select a state</MenuItem>
-        {states &&
-          states.length > 0 &&
-          states.map(({ StateName, StateId }) => (
-            <MenuItem value={StateId} key={StateName}>
-              {StateName}
-            </MenuItem>
-          ))}
-      </TextField>
-
-      {/* ZIP-CODE TEXT FIELD */}
-      <TextField
-        fullWidth
-        size="small"
-        label={t("zipCodeLabel")}
-        placeholder="3100"
-        variant="outlined"
-        value={zipCode}
-        onChange={handleZipCodeChange}
-        sx={{ mt: 2 }}
-      />
-
-      <Button
-        variant="outlined"
-        color="primary"
-        fullWidth
-        sx={{ my: 2 }}
-        onClick={doDeliveryMethodLookup}
-      >
-        {t("calculateShippingLabel")}
-      </Button>
-
-      {renderOptionsSection()}
-    </Box>
-  );
-}

package/src/pages/cart/wrapper.tsx

@@ -1,30 +0,0 @@
-import Card from "@mui/material/Card";
-import styled from "@mui/material/styles/styled";
-
-export const Wrapper = styled(Card)(({ theme }) => ({
-  display: "flex",
-  overflow: "hidden",
-  alignItems: "center",
-  position: "relative",
-  borderRadius: "10px",
-  marginBottom: "1.5rem",
-  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.paper,
-
-  "@media only screen and (max-width: 425px)": {
-    flexWrap: "wrap",
-    img: { height: "auto", minWidth: "100%" },
-  },
-  "& .img-wrapper": {
-    width: 150,
-    height: 150,
-    flexShrink: 0,
-    position: "relative",
-    backgroundColor: theme.palette.grey[200],
-
-    "@media only screen and (max-width: 425px)": {
-      width: "100%",
-      height: "auto",
-    },
-  },
-}));

package/src/pages/checkout/checkout-alt-form/address-card.tsx

@@ -1,76 +0,0 @@
-import { ModeEditOutline, DeleteOutline } from "@mui/icons-material";
-import { Card, IconButton } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { Address } from "@/api-manager/schemas/address.schema";
-import { FlexBox } from "@evenicanpm/storefront-core/src/components/_components/flex-box";
-import {
-  H6,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components/_components/Typography";
-
-interface Props {
-  address: Address;
-  isCartAddress: boolean;
-  hideControls?: boolean;
-  onEdit?: () => void;
-  onSelect?: () => void;
-  onDelete?: () => void;
-}
-
-export default function AddressCard({
-  address,
-  isCartAddress,
-  hideControls,
-  onEdit,
-  onSelect,
-  onDelete,
-}: Props) {
-  return (
-    <Grid onClick={() => onSelect?.()}>
-      <Card
-        sx={{
-          padding: 2,
-          boxShadow: "none",
-          cursor: onSelect ? "pointer" : "default",
-          border: "1px solid",
-          position: "relative",
-          backgroundColor: "grey.100",
-          borderColor: isCartAddress ? "secondary.main" : "transparent",
-        }}
-      >
-        {!hideControls && (
-          <FlexBox position="absolute" top={5} right={5}>
-            <IconButton
-              size="small"
-              onClick={(e) => {
-                e.stopPropagation();
-                onEdit?.();
-              }}
-            >
-              <ModeEditOutline fontSize="inherit" />
-            </IconButton>
-            <IconButton
-              size="small"
-              color="error"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete?.();
-              }}
-              disabled={isCartAddress}
-            >
-              <DeleteOutline fontSize="inherit" />
-            </IconButton>
-          </FlexBox>
-        )}
-        <H6 mb={0.5}>{address.Name}</H6>
-        <Paragraph color="grey.700">{address.Street}</Paragraph>
-        <Paragraph color="grey.700">{address.City}</Paragraph>
-        <Paragraph color="grey.700">
-          {address.State}, {address.ThreeLetterISORegionName}
-        </Paragraph>
-        <Paragraph color="grey.700">{address.ZipCode}</Paragraph>
-        <Paragraph color="grey.700">{address.Phone}</Paragraph>
-      </Card>
-    </Grid>
-  );
-}

package/src/pages/checkout/checkout-alt-form/checkout-form.tsx

@@ -1,133 +0,0 @@
-"use client";
-// LOCAL CUSTOM COMPONENTS
-import DeliveryAddress from "./delivery-address";
-
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import CustomerInformation from "./customer-information";
-import { Box, Button } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import DeliveryOptions from "./delivery-options";
-import React from "react";
-import CheckoutStep from "./checkout-step";
-import PaymentDetails from "./payment-details";
-import useCheckout from "@/api-manager/services/cart/mutations/checkout";
-import { useQueryClient } from "@tanstack/react-query";
-import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import { useRouter } from "next/navigation";
-import { PageSlug } from "@/lib/page-slugs";
-import { deleteCartCookie, setCartCookie } from "@/lib/cart-cookie-handler";
-import getChannelConfiguration from "@/api-manager/services/organization/queries/get-channel-configuration";
-import { useTranslations } from "next-intl";
-import getCart from "@/api-manager/services/cart/queries/get-cart";
-import { useNotification } from "@/components/Notifications/use-notification";
-interface Props {
-  cart: Cart;
-}
-
-export default function CheckoutForm({ cart }: Props) {
-  const t = useTranslations("Checkout");
-  const [activeStep, setActiveStep] = React.useState<number>(1);
-  const { mutateAsync: placeOrder } = useCheckout();
-  const { setNotification } = useNotification();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { data: channelConfigurationData } = getChannelConfiguration.useData();
-  const isFormComplete = () => activeStep > steps.length;
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const steps = [
-    {
-      title: t("Steps.customerInformation"),
-      component: CustomerInformation,
-    },
-    { title: t("Steps.deliveryAddress"), component: DeliveryAddress },
-    { title: t("Steps.deliveryOptions"), component: DeliveryOptions },
-    { title: t("Steps.payment"), component: PaymentDetails },
-  ];
-  const handleStepChange = (step: number) => {
-    setActiveStep(step);
-  };
-
-  const handlePlaceOrder = async () => {
-    setIsSubmitting(true);
-    const cache = queryClient.getQueryCache();
-    const acceptResultCache = cache.get(
-      JSON.stringify(["paymentAcceptResult", cart.Id]),
-    );
-    const paymentAcceptResult = acceptResultCache?.state
-      .data as CardPaymentAcceptResult;
-    if (!paymentAcceptResult) {
-      return;
-    }
-
-    if (!paymentAcceptResult.TokenizedPaymentCard) {
-      return;
-    }
-    try {
-      const data = await placeOrder({
-        id: cart.Id,
-        receiptEmail: cart.ReceiptEmail ?? "",
-        tokenizedPaymentCard: paymentAcceptResult.TokenizedPaymentCard,
-        currency: channelConfigurationData?.Currency ?? "",
-        amount: cart.TotalAmount || 0,
-      });
-      await cleanupCart(data.Id);
-      setNotification({
-        message: t("placeOrderSuccessMessage"),
-        severity: "success",
-      });
-    } catch (error) {
-      console.error(error);
-      setNotification({
-        message: t("placeOrderErrorMessage"),
-        severity: "error",
-      });
-    }
-    setIsSubmitting(false);
-  };
-
-  const cleanupCart = async (transactionId: string) => {
-    // Clear cached cart data
-    // await deleteCartCookie();
-    // Fetch a new cart
-    // const newCart = await getCart.fetchData(queryClient);
-    // Set new cookie
-    // setCartCookie(newCart.Id);
-    //Go to confirmation page
-    router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
-  };
-
-  const renderFormFooter = () => {
-    return (
-      <Grid container justifyContent="flex-end">
-        <Button
-          disabled={!isFormComplete() || isSubmitting}
-          variant="contained"
-          color="primary"
-          onClick={() => handlePlaceOrder()}
-        >
-          {t("placeOrderButton")}
-        </Button>
-      </Grid>
-    );
-  };
-  return (
-    <Box>
-      {steps.map((step, index) => {
-        const stepNumber = index + 1;
-        return (
-          <CheckoutStep
-            title={step.title}
-            stepNumber={stepNumber}
-            activeStep={activeStep}
-            setActiveStep={handleStepChange}
-            isLastStep={stepNumber === steps.length}
-            key={stepNumber}
-            cart={cart}
-            component={step.component}
-          />
-        );
-      })}
-      {renderFormFooter()}
-    </Box>
-  );
-}