@evenicanpm/storefront-core 1.0.2 → 1.0.3

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

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

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import Grid from "@mui/material/Grid2";
+import Dialog from "@mui/material/Dialog";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import DialogContent from "@mui/material/DialogContent";
+import { useFormik } from "formik";
+import * as yup from "yup";
+// GLOBAL CUSTOM COMPONENT
+import { H5 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+
+import { Address } from "./types";
+
+const validationSchema = yup.object({
+  address2: yup.string(),
+  name: yup.string().required("Name is required!"),
+  address1: yup.string().required("Address is required!"),
+  phone: yup.number().required("Phone is required!"),
+});
+
+// ================================================================
+interface Props {
+  active: boolean;
+  address: Address;
+  changeEditAddressId: () => void;
+  handleEditAddress: (id: number, data: Address) => void;
+}
+// ================================================================
+
+export default function EditAddressForm(props: Props) {
+  const { active, address, changeEditAddressId, handleEditAddress } = props;
+
+  const [openModal, setOpenModal] = useState(active);
+
+  const handleCloseModal = () => {
+    setOpenModal(false);
+    changeEditAddressId();
+  };
+
+  const initialValues = {
+    name: address.name,
+    phone: address.phone,
+    street1: address.street1,
+    street2: address.street2,
+  };
+
+  const { values, touched, errors, handleBlur, handleChange, handleSubmit } =
+    useFormik({
+      initialValues,
+      validationSchema,
+      onSubmit: (values) => {
+        handleEditAddress(address.id, { ...values, id: address.id });
+        handleCloseModal();
+      },
+    });
+
+  return (
+    <Dialog open={openModal} onClose={handleCloseModal} sx={{ zIndex: 99999 }}>
+      <DialogContent>
+        <H5 mb={4}>Edit Address Information</H5>
+
+        <form onSubmit={handleSubmit}>
+          <Grid container spacing={3}>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                fullWidth
+                name="name"
+                type="text"
+                label="Enter Your Name"
+                value={values.name}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                helperText={touched.name && errors.name}
+                error={touched.name && Boolean(errors.name)}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                fullWidth
+                type="text"
+                name="street1"
+                label="Address line 1"
+                onBlur={handleBlur}
+                value={values.street1}
+                onChange={handleChange}
+                helperText={touched.street1 && errors.street1}
+                error={touched.street1 && Boolean(errors.street1)}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                fullWidth
+                type="text"
+                name="street2"
+                label="Address line 2"
+                onBlur={handleBlur}
+                value={values.street2}
+                onChange={handleChange}
+                helperText={touched.street2 && errors.street2}
+                error={touched.street2 && Boolean(errors.street2)}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                fullWidth
+                type="text"
+                name="phone"
+                label="Enter Your Phone"
+                onBlur={handleBlur}
+                value={values.phone}
+                onChange={handleChange}
+                helperText={touched.phone && errors.phone}
+                error={touched.phone && Boolean(errors.phone)}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <Button color="primary" variant="contained" type="submit">
+                Save
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { BoxProps } from "@mui/material/Box";
+import Avatar from "@mui/material/Avatar";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { StepViewState } from "./checkout-step";
+
+// ==============================================================
+interface Props extends BoxProps {
+  title: string;
+  number: number;
+  stepViewState: StepViewState;
+}
+// ==============================================================
+
+export default function Heading({
+  number,
+  title,
+  stepViewState,
+  ...props
+}: Props) {
+  let viewStateColor;
+
+  switch (stepViewState) {
+    case "active":
+      viewStateColor = "primary.main";
+      break;
+    case "preview":
+      viewStateColor = "success.main";
+      break;
+    case "pending":
+      viewStateColor = "secondary.main";
+      break;
+  }
+  // AVATAR STYLES
+  const STYLES = {
+    width: 32,
+    height: 32,
+    color: "primary.text",
+    backgroundColor: viewStateColor,
+  };
+
+  return (
+    <FlexBox gap={1.5} alignItems="center" mb={3.5} {...props}>
+      <Avatar alt={title} sx={STYLES}>
+        {number}
+      </Avatar>
+      <Paragraph fontSize={20}>{title}</Paragraph>
+    </FlexBox>
+  );
+}

package/src/pages-v2/checkout/checkout-alt-form/index.ts

@@ -0,0 +1 @@
+export { default as CheckoutForm } from "./checkout-form";