@evenicanpm/storefront-core 1.0.0-alpha → 1.0.1

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,183 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,73 @@
+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 "@/components/_components/flex-box";
+import { H6, Paragraph } from "@/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

@@ -0,0 +1,133 @@
+"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>
+  );
+}