@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,120 @@
+import Card from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
+import Heading from "./heading";
+import { Button, useTheme } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import React from "react";
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  title: string;
+  stepNumber: number;
+  activeStep: number;
+  setActiveStep: (newStep: number) => void;
+  isLastStep: boolean;
+  cart: Cart;
+  component: React.FC<CheckoutStepComponentProps>;
+}
+
+export type StepViewState = "active" | "preview" | "pending";
+export type StepSubmissionState = "idle" | "submitting" | "error";
+export interface CheckoutStepComponentProps {
+  stepSubmissionState: StepSubmissionState;
+  setStepSubmissionState: (newState: StepSubmissionState) => void;
+  stepViewState: StepViewState;
+  handleStepCompletion: () => void;
+  cart: Cart;
+}
+
+function CheckoutStep({
+  component: Component,
+  title,
+  stepNumber,
+  activeStep,
+  setActiveStep,
+  cart,
+}: Props) {
+  const t = useTranslations("Checkout.Steps");
+  const [hasCompleted, setHasCompleted] = React.useState<boolean>(false);
+  const [stepSubmissionState, setStepSubmissionState] =
+    React.useState<StepSubmissionState>("idle");
+  const theme = useTheme();
+  const handleStepCompletion = () => {
+    setHasCompleted(true);
+    setActiveStep(stepNumber + 1);
+  };
+
+  const handleActivateStep = () => {
+    setActiveStep(stepNumber);
+  };
+  const getStepViewState = (): StepViewState => {
+    if (activeStep === stepNumber) {
+      return "active";
+    } else if (hasCompleted) {
+      return "preview";
+    } else if (activeStep < stepNumber) {
+      return "pending";
+    }
+    return "pending";
+  };
+  const componentProps: CheckoutStepComponentProps = {
+    stepSubmissionState,
+    stepViewState: getStepViewState(),
+    handleStepCompletion: handleStepCompletion,
+    setStepSubmissionState,
+    cart,
+  };
+
+  const handleSubmitChildComponent = () => setStepSubmissionState("submitting");
+
+  return (
+    <Card
+      sx={{ p: 3, mb: 3 }}
+      style={
+        stepSubmissionState === "error"
+          ? { border: `1px solid ${theme.palette.error.main}` }
+          : {}
+      }
+    >
+      <FlexBox justifyContent={"space-between"}>
+        <Heading
+          number={stepNumber}
+          title={title}
+          stepViewState={getStepViewState()}
+        />
+        {getStepViewState() !== "active" && hasCompleted && (
+          <Span
+            sx={{ textDecoration: "underline", cursor: "pointer" }}
+            role="button"
+            component="a"
+            onClick={handleActivateStep}
+          >
+            {t("editButton")}
+          </Span>
+        )}
+      </FlexBox>
+
+      <Grid spacing={1}>
+        <Component {...componentProps} />
+      </Grid>
+      <Grid
+        container
+        justifyContent={"flex-end"}
+        mt={3}
+        sx={{ display: getStepViewState() === "active" ? "flex" : "none" }}
+      >
+        <Button
+          color={"primary"}
+          variant={"contained"}
+          onClick={handleSubmitChildComponent}
+        >
+          {t("saveButton")}
+        </Button>
+      </Grid>
+    </Card>
+  );
+}
+
+export default React.memo(CheckoutStep);

package/src/pages-v2/checkout/checkout-alt-form/customer-information.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import TextField from "@mui/material/TextField";
+import useUpdateCart from "@/api-manager/services/cart/mutations/update-cart";
+import { useTranslations } from "next-intl";
+import { CheckoutStepComponentProps } from "./checkout-step";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+export default function CustomerInformation(props: CheckoutStepComponentProps) {
+  const {
+    stepViewState,
+    cart: { Id: cartId, ReceiptEmail: email },
+    stepSubmissionState,
+    setStepSubmissionState,
+  } = props;
+  const { mutateAsync: updateCart } = useUpdateCart();
+  const formRef = React.useRef<HTMLFormElement>(null);
+  const t = useTranslations("Checkout.CustomerInformation");
+
+  const validationSchema = yup.object({
+    email: yup.string().email(t("emailInvalid")).required(t("emailRequired")),
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitted },
+    setValue,
+  } = useForm({
+    defaultValues: { email: email || "" },
+    resolver: yupResolver(validationSchema),
+  });
+
+  React.useEffect(() => {
+    setValue("email", email || "");
+  }, [email, setValue]);
+
+  const handleSave = React.useCallback(
+    (formData: { email: string }) => {
+      updateCart({
+        cart: { ReceiptEmail: formData.email, Id: cartId },
+      })
+        .then(() => {
+          props.handleStepCompletion && props.handleStepCompletion();
+          setStepSubmissionState("idle");
+        })
+        .catch(() => {
+          setStepSubmissionState("error");
+        });
+    },
+    [cartId, props, setStepSubmissionState, updateCart],
+  );
+
+  React.useEffect(() => {
+    if (stepSubmissionState === "submitting") {
+      handleSubmit(handleSave)();
+    }
+  }, [handleSave, handleSubmit, stepSubmissionState]);
+
+  React.useEffect(() => {
+    if (errors && isSubmitted) {
+      setStepSubmissionState("error");
+    }
+  }, [errors, isSubmitted, setStepSubmissionState]);
+  if (stepViewState === "preview") {
+    return (
+      <Box ml={2}>
+        <Paragraph>
+          {t("emailLabel")}: {email}
+        </Paragraph>
+      </Box>
+    );
+  }
+  return (
+    <form onSubmit={handleSubmit(handleSave)} ref={formRef}>
+      <Grid size={{ sm: 5, xs: 5 }}>
+        <TextField
+          {...register("email")}
+          fullWidth
+          sx={{ flexGrow: 1 }}
+          type="email"
+          name={"email"}
+          label={t("emailLabel")}
+          variant="outlined"
+          error={Boolean(!!errors.email && errors.email.message)}
+          helperText={errors.email?.message}
+        />
+      </Grid>
+    </form>
+  );
+}

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

@@ -0,0 +1,174 @@
+import { useEffect, useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import React from "react";
+import NewAddressForm from "./new-address-form";
+import { Address } from "@/api-manager/schemas/address.schema";
+import AddressCard from "./address-card";
+
+import getUser from "@/api-manager/services/user/queries/get-user";
+import useCreateAddress from "@/api-manager/services/address/mutations/create-address";
+import useUpdateAddress from "@/api-manager/services/address/mutations/update-address";
+import useDeleteAddress from "@/api-manager/services/address/mutations/delete-address";
+import getCountries from "@/api-manager/services/address/queries/get-countries";
+import useUpdateCart from "@/api-manager/services/cart/mutations/update-cart";
+import { CheckoutStepComponentProps } from "./checkout-step";
+import Grid from "@mui/material/Grid2";
+import useUpdateCartLines from "@/api-manager/services/cart/mutations/update-cart-lines";
+import { cloneDeep } from "lodash";
+
+export default function DeliveryAddress({
+  cart,
+  handleStepCompletion,
+  stepSubmissionState,
+  setStepSubmissionState,
+  stepViewState,
+}: CheckoutStepComponentProps) {
+  const t = useTranslations("Checkout.Address");
+  const locale = useLocale();
+
+  const { data: user, isLoading: userLoading } = getUser.useData();
+  const isGuest = !userLoading && !user?.RecordId;
+
+  const [addressList, setAddressList] = useState<Address[]>([]);
+  useEffect(() => {
+    if (!isGuest && user?.Addresses?.length) {
+      setAddressList(user.Addresses);
+    } else if (cart.ShippingAddress) {
+      setAddressList([cart.ShippingAddress]);
+    } else {
+      setAddressList([]);
+    }
+  }, [isGuest, user, cart.ShippingAddress]);
+
+  const { data: countries } = getCountries.useData({ locale });
+
+  const { mutateAsync: updateCart } = useUpdateCart();
+  const { mutateAsync: updateCartLines } = useUpdateCartLines();
+
+  const { mutateAsync: createAddress } = useCreateAddress();
+  const { mutateAsync: updateAddress } = useUpdateAddress();
+  const { mutateAsync: deleteAddress } = useDeleteAddress();
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editAddress, setEditAddress] = useState<Address | undefined>(
+    undefined,
+  );
+  const openNew = () => {
+    setEditAddress(undefined);
+    setModalOpen(true);
+  };
+  const openEdit = (addr: Address) => {
+    setEditAddress(addr);
+    setModalOpen(true);
+  };
+  const closeModal = () => setModalOpen(false);
+
+  const saveToCart = async (address: Address) => {
+    const lines = cloneDeep(cart.CartLines ?? []).map((l) => ({
+      ...l,
+      DeliveryMode: "",
+    }));
+    await updateCartLines({
+      cartId: cart.Id,
+      cartLine: lines,
+      version: cart.Version,
+    });
+    await updateCart({ cart: { Id: cart.Id, ShippingAddress: address } });
+  };
+
+  const handleGuestFlow = async (address: Address) => {
+    await saveToCart(address);
+    setStepSubmissionState("submitting");
+    closeModal();
+  };
+
+  const handleAuthFlow = async (address: Address) => {
+    const isNew = !address.Id;
+    const saved = isNew
+      ? await createAddress(address)
+      : await updateAddress(address);
+    // Update local list
+    if (isNew) {
+      setAddressList((prev) => [...prev, saved]);
+    } else {
+      setAddressList((prev) =>
+        prev.map((a) => (a.Id === saved.Id ? saved : a)),
+      );
+    }
+    await saveToCart(saved);
+    if (isNew) setStepSubmissionState("submitting");
+    closeModal();
+  };
+
+  const handleSaveAddress = (address: Address) => {
+    return isGuest ? handleGuestFlow(address) : handleAuthFlow(address);
+  };
+
+  const handleDelete = async (address: Address) => {
+    if (!isGuest && address.Id) {
+      await deleteAddress(address.Id);
+    }
+    setAddressList((prev) => prev.filter((a) => a.Id !== address.Id));
+  };
+
+  useEffect(() => {
+    if (stepSubmissionState === "submitting") {
+      handleStepCompletion();
+      setStepSubmissionState("idle");
+    }
+  }, [stepSubmissionState, handleStepCompletion, setStepSubmissionState]);
+
+  if (stepViewState === "pending" || !countries) return null;
+  if (stepViewState === "preview") {
+    const sel = cart.ShippingAddress;
+    if (!sel) return null;
+    return <AddressCard address={sel} hideControls isCartAddress />;
+  }
+
+  return (
+    <Grid container spacing={2}>
+      <NewAddressForm
+        countries={countries}
+        open={modalOpen}
+        isGuest={isGuest}
+        address={editAddress}
+        cartId={cart.Id}
+        handleClose={closeModal}
+        handleCreateOrUpdateAddress={handleSaveAddress}
+      />
+
+      {addressList.map((addr) => (
+        <Grid key={addr.Id || addr.RecordId} size={{ md: 4, sm: 6, xs: 12 }}>
+          <AddressCard
+            address={addr}
+            isCartAddress={cart.ShippingAddress?.Id === addr.Id}
+            onEdit={() => openEdit(addr)}
+            onSelect={() => handleSaveAddress(addr)}
+            onDelete={() => handleDelete(addr)}
+          />
+        </Grid>
+      ))}
+
+      <Grid
+        size={{ md: 4, sm: 6, xs: 12 }}
+        onClick={openNew}
+        data-testid="addr-new"
+      >
+        <AddressCard
+          address={{
+            Id: "new",
+            Name: t("createNewAddress"),
+            Street: "",
+            City: "",
+            State: "",
+            ZipCode: "",
+            Phone: "",
+          }}
+          hideControls
+          isCartAddress={false}
+          onSelect={openNew}
+        />
+      </Grid>
+    </Grid>
+  );
+}

package/src/pages-v2/checkout/checkout-alt-form/delivery-date.tsx

@@ -0,0 +1,114 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid2";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import { FormikErrors, FormikTouched } from "formik";
+import { format } from "date-fns";
+import Heading from "./heading";
+import { InitialValues } from "./types";
+
+// ==============================================================
+interface Props {
+  values: InitialValues;
+  errors: FormikErrors<InitialValues>;
+  touched: FormikTouched<InitialValues>;
+  handleChange: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+}
+// ==============================================================
+
+export default function DeliveryDate({
+  errors,
+  handleChange,
+  touched,
+  values,
+}: Props) {
+  const [dateList, setDateList] = useState<{ label: string; value: string }[]>(
+    [],
+  );
+
+  useEffect(() => {
+    const list = [];
+    const today = new Date();
+    const dateCount = today.getDate();
+
+    list.push({
+      label: format(today, "dd MMMM"),
+      value: today.toISOString(),
+    });
+
+    for (let i = 1; i < 10; i++) {
+      today.setDate(dateCount + i);
+      list.push({
+        label: format(today, "dd MMMM"),
+        value: today.toISOString(),
+      });
+    }
+
+    setDateList(list);
+  }, []);
+
+  const timeList = [
+    { label: "9AM - 11AM", value: "9AM - 11AM" },
+    { label: "11AM - 1PM", value: "11AM - 1PM" },
+    { label: "3PM - 5PM", value: "3PM - 5PM" },
+    { label: "5PM - 7PM", value: "5PM - 7PM" },
+  ];
+
+  return (
+    <Card sx={{ p: 3, mb: 3 }}>
+      <Heading
+        number={1}
+        title="Delivery Date and Time"
+        stepViewState={"active"}
+      />
+
+      <Box mb={3.5}>
+        <Grid container spacing={3}>
+          <Grid size={{ sm: 6, xs: 12 }}>
+            <TextField
+              select
+              fullWidth
+              type="text"
+              name="date"
+              label="Delivery Date"
+              value={values.date}
+              onChange={(e) => handleChange(e)}
+              helperText={touched.date && errors.date}
+              error={Boolean(touched.date && errors.date)}
+            >
+              {dateList.map((item) => (
+                <MenuItem value={item.value} key={item.label}>
+                  {item.label}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Grid>
+
+          <Grid size={{ sm: 6, xs: 12 }}>
+            <TextField
+              select
+              fullWidth
+              type="text"
+              name="time"
+              value={values.time}
+              label="Delivery Time"
+              onChange={handleChange}
+              helperText={touched.time && errors.time}
+              error={Boolean(touched.time && errors.time)}
+            >
+              {timeList.map((item) => (
+                <MenuItem value={item.value} key={item.value}>
+                  {item.value}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Grid>
+        </Grid>
+      </Box>
+    </Card>
+  );
+}

package/src/pages-v2/checkout/checkout-alt-form/delivery-options.tsx

@@ -0,0 +1,190 @@
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useTranslations } from "next-intl";
+import { Address } from "@/api-manager/schemas/address.schema";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import {
+  DeliveryOption,
+  DeliveryPreferenceType,
+  LineDeliverySpecification,
+} from "@msdyn365-commerce/retail-proxy";
+import {
+  H4,
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { CheckoutStepComponentProps } from "./checkout-step";
+import useGetDeliveryOptions from "@/api-manager/services/address/mutations/get-delivery-options";
+import React from "react";
+import useUpdateCartLineDeliveryMode from "@/api-manager/services/cart/mutations/update-cart-line-delivery-mode";
+import { cloneDeep } from "lodash";
+import useRemoveCartLineDeliveryMode from "@/api-manager/services/cart/mutations/remove-cart-line-delivery-mode";
+
+export default function DeliveryOptions(props: CheckoutStepComponentProps) {
+  const { cart, stepViewState, stepSubmissionState, setStepSubmissionState } =
+    props;
+  const [deliveryOptions, setDeliveryOptions] = React.useState<
+    DeliveryOption[]
+  >([]);
+  const [deliveryUnavailable, setDeliveryUnavailable] =
+    React.useState<boolean>(false);
+  const [selectedOption, setSelectedOption] = React.useState<string | null>(
+    null,
+  );
+  const [currentShippingAddress, setCurrentShippingAddress] =
+    React.useState<Address | null>(null);
+  const t = useTranslations("Checkout.DeliveryOptions");
+  const { formatCurrency } = useCurrencyFormatter();
+  const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
+  const { mutateAsync: updateDeliveryOption } = useUpdateCartLineDeliveryMode();
+  const { mutate: removeDeliveryOption } = useRemoveCartLineDeliveryMode();
+
+  const handleUpdateDeliveryOption = React.useCallback(() => {
+    const cartLineDeliverySpecification: LineDeliverySpecification[] = [];
+    if (cart.CartLines && selectedOption) {
+      for (const cl of cart.CartLines) {
+        const lineSpec: LineDeliverySpecification = {
+          LineId: cl.LineId,
+          DeliverySpecification: {
+            DeliveryModeId: selectedOption,
+            DeliveryPreferenceTypeValue: DeliveryPreferenceType.ShipToAddress,
+            DeliveryAddress: cart.ShippingAddress,
+          },
+        };
+        cartLineDeliverySpecification.push(lineSpec);
+      }
+      updateDeliveryOption({ cartId: cart.Id, cartLineDeliverySpecification })
+        .then(() => {
+          props.handleStepCompletion();
+          setStepSubmissionState("idle");
+        })
+        .catch(() => {
+          setStepSubmissionState("error");
+        });
+    }
+  }, [
+    cart.CartLines,
+    cart.Id,
+    cart.ShippingAddress,
+    selectedOption,
+    updateDeliveryOption,
+    props,
+    setStepSubmissionState,
+  ]);
+  React.useEffect(() => {
+    if (stepSubmissionState === "submitting") {
+      handleUpdateDeliveryOption();
+    }
+  }, [handleUpdateDeliveryOption, stepSubmissionState]);
+
+  React.useEffect(() => {
+    if (stepViewState === "active") {
+      const cartLines = cloneDeep(cart.CartLines);
+      if (cartLines.map((cl) => cl.DeliveryMode).some((mode) => mode !== "")) {
+        removeDeliveryOption({ cart: cart });
+      }
+    }
+  }, [cart, removeDeliveryOption, stepViewState]);
+
+  React.useEffect(() => {
+    if (currentShippingAddress) {
+      const { Id, CartLines } = cart;
+      const cartLineIds = CartLines.map((cl) => cl.LineId).filter(
+        (line) => line !== undefined,
+      );
+      getDeliveryOptions({
+        cartId: Id,
+        cartLineIds,
+        shippingAddress: currentShippingAddress,
+      }).then((response) => {
+        setDeliveryUnavailable(response.length === 0);
+        setDeliveryOptions(response || []);
+      });
+    }
+  }, [cart, currentShippingAddress, getDeliveryOptions]);
+
+  React.useEffect(() => {
+    if (cart.ShippingAddress) {
+      if (currentShippingAddress) {
+        //Deep equals the address
+        if (
+          JSON.stringify(currentShippingAddress) ===
+          JSON.stringify(cart.ShippingAddress)
+        ) {
+          return;
+        }
+      }
+      // If the address has changed, change the local state which will trigger the effect to get the delivery options
+      setCurrentShippingAddress(cart.ShippingAddress);
+    }
+  }, [cart.ShippingAddress, currentShippingAddress]);
+
+  const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedOption(event.target.value);
+  };
+  const renderChargeLine = (dlvOption: DeliveryOption) => (
+    <Grid container justifyContent={"space-between"}>
+      <Paragraph>{dlvOption.Description}</Paragraph>
+      <Paragraph>{formatCurrency(dlvOption.TotalChargeAmount || 0)}</Paragraph>
+    </Grid>
+  );
+
+  if (stepViewState === "pending") {
+    return;
+  }
+
+  if (stepViewState === "preview") {
+    const deliveryOption = deliveryOptions.find(
+      (dlv) => dlv.Code === selectedOption,
+    );
+    if (deliveryOption) {
+      return (
+        <Box mt={2}>
+          <H4>{deliveryOption.Description}</H4>
+          <Span>{formatCurrency(deliveryOption.TotalChargeAmount || 0)}</Span>
+        </Box>
+      );
+    }
+  }
+  return (
+    <Box mb={3.5}>
+      <Grid container spacing={1}>
+        <Grid size={{ sm: 6, xs: 12 }}>
+          <FlexBox flexDirection={"column"} alignItems={"flex-start"} mt={4}>
+            <FormControl fullWidth>
+              {!deliveryOptions.length && deliveryUnavailable && (
+                <Paragraph color={"error"} textAlign={"center"} fontSize={14}>
+                  {t("noDeliveryOptionsFound")}
+                </Paragraph>
+              )}
+              {/* <FormLabel id={"deliveryOptions"}>{t("deliveryOptionsLabel")}</FormLabel> */}
+              <RadioGroup
+                aria-labelledby={"deliveryOptions"}
+                name={"Delivery-Options"}
+                onChange={handleOptionChange}
+                value={selectedOption}
+              >
+                {deliveryOptions?.map((dlv) => (
+                  <FormControlLabel
+                    sx={{ ".MuiFormControlLabel-label": { width: "100%" } }}
+                    key={dlv.Code}
+                    value={dlv.Code}
+                    control={<Radio />}
+                    label={renderChargeLine(dlv)}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          </FlexBox>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}