@evenicanpm/storefront-core 1.0.0 → 1.0.1

package/src/pages/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 "@/components/_components/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/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 "@/components/_components/flex-box";
+import { Paragraph } from "@/components/_components/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/checkout/checkout-alt-form/index.ts

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

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

@@ -0,0 +1,294 @@
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import TextField from "@mui/material/TextField";
+import DialogContent from "@mui/material/DialogContent";
+// React hook form
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+// LOCAL CUSTOM COMPONENT
+import { H5 } from "@/components/_components/Typography";
+import { Address } from "@/api-manager/schemas/address.schema";
+import { useTranslations } from "use-intl";
+import { Box, FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import getStates from "@/api-manager/services/address/queries/get-states";
+import { Paragraph } from "@/components/_components/Typography";
+import { FlexBox } from "@/components/_components/flex-box";
+import { merge } from "lodash";
+
+interface Props {
+  address?: Address;
+  countries: CountryRegionInfo[];
+  cartId: string;
+  open: boolean;
+  handleClose: () => void;
+  handleCreateOrUpdateAddress: (address: Address) => void;
+  isGuest: boolean;
+}
+
+type AddressFormInput = {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+  phone: string | null;
+};
+
+export default function NewAddressForm({
+  address,
+  countries,
+  isGuest,
+  open,
+  handleClose,
+  handleCreateOrUpdateAddress,
+}: Props) {
+  const t = useTranslations("Address");
+  const defaultCountry = React.useMemo(
+    () =>
+      countries.find(
+        (c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
+      ),
+    [countries, address],
+  );
+
+  const [selectedCountry, setSelectedCountry] =
+    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
+
+  const { data: states } = getStates.useData({
+    countryId: selectedCountry?.CountryRegionId,
+  });
+
+  React.useEffect(() => {
+    if (address && defaultCountry) {
+      setSelectedCountry(defaultCountry);
+    }
+  }, [address, defaultCountry]);
+
+  const validationSchema = z.object({
+    name: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("name") }) }),
+    street: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("street") }) }),
+    city: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("city") }) }),
+    state: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("state") }) }),
+    zipCode: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("zipCode") }) }),
+    country: z
+      .string()
+      .min(1, { message: t("Validation.required", { field: t("country") }) }),
+    phone: z.string().optional().default(""),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    setValue,
+    reset,
+  } = useForm<AddressFormInput>({
+    defaultValues: {
+      name: "",
+      street: "",
+      city: "",
+      state: "0",
+      zipCode: "",
+      phone: "",
+      country: selectedCountry?.CountryRegionId || "",
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  React.useEffect(() => {
+    setValue("country", selectedCountry?.CountryRegionId || "");
+    if (!address) {
+      setValue("state", "0");
+    }
+  }, [selectedCountry, setValue, address]);
+
+  React.useEffect(() => {
+    if (!open) {
+      reset();
+      setSelectedCountry(defaultCountry ?? null);
+    }
+  }, [defaultCountry, open, reset]);
+
+  React.useEffect(() => {
+    if (address) {
+      setValue("name", address.Name || "");
+      setValue("street", address.Street || "");
+      setValue("city", address.City || "");
+      setValue("state", address.State || "0");
+      setValue("zipCode", address.ZipCode || "");
+      setValue("phone", address.Phone || "");
+      setValue("country", address.ThreeLetterISORegionName || "");
+    } else {
+      reset();
+    }
+  }, [address, setValue, reset]);
+
+  const onFormSubmit = (data: AddressFormInput) => {
+    const tempAddress: Address = {
+      Name: data.name,
+      Street: data.street,
+      City: data.city,
+      State: data.state,
+      ZipCode: data.zipCode,
+      TwoLetterISORegionName: selectedCountry?.ISOCode,
+      ThreeLetterISORegionName: selectedCountry?.CountryRegionId,
+      Phone: data.phone || undefined,
+    };
+    const newAddress = merge({}, address || {}, tempAddress);
+    handleCreateOrUpdateAddress(newAddress);
+    handleClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogContent>
+        <H5 mb={4}>{t("title")}</H5>
+        {isGuest && !address && (
+          <FlexBox justifyContent="center" mb={2}>
+            <Paragraph color={(theme) => theme.palette.error.main}>
+              {t("guestCartAddressWarning")}
+            </Paragraph>
+          </FlexBox>
+        )}
+        <Box component="form" onSubmit={handleSubmit(onFormSubmit)}>
+          <Grid container spacing={3}>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                {...register("name")}
+                label={t("name")}
+                fullWidth
+                error={!!errors.name}
+                helperText={errors.name?.message}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                {...register("street")}
+                label={t("street")}
+                fullWidth
+                error={!!errors.street}
+                helperText={errors.street?.message}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                {...register("city")}
+                label={t("city")}
+                fullWidth
+                error={!!errors.city}
+                helperText={errors.city?.message}
+              />
+            </Grid>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <FormControl fullWidth size={"small"} error={!!errors.country}>
+                <InputLabel id="country-label">{t("country")}</InputLabel>
+                <Controller
+                  name="country"
+                  control={control}
+                  render={({ field: { value } }) => (
+                    <Select
+                      labelId="country-label"
+                      value={value}
+                      onChange={(e) => {
+                        const cid = e.target.value as string;
+                        const sel =
+                          countries.find((c) => c.CountryRegionId === cid) ||
+                          null;
+                        setSelectedCountry(sel);
+                      }}
+                    >
+                      <MenuItem value="">Select country</MenuItem>
+                      {countries.map((c) => (
+                        <MenuItem
+                          key={c.CountryRegionId}
+                          value={c.CountryRegionId}
+                        >
+                          {c.ShortName}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </FormControl>
+            </Grid>
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <FormControl fullWidth size={"small"} error={!!errors.state}>
+                <InputLabel id="state-label">{t("state")}</InputLabel>
+                <Controller
+                  name="state"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <Select
+                      labelId="state-label"
+                      value={value}
+                      onChange={onChange}
+                    >
+                      <MenuItem value="0">Select a state</MenuItem>
+                      {states &&
+                        states.length > 0 &&
+                        states.map(({ StateName, StateId }) => (
+                          <MenuItem key={StateId} value={StateId}>
+                            {StateName}
+                          </MenuItem>
+                        ))}
+                    </Select>
+                  )}
+                />
+              </FormControl>
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                {...register("zipCode")}
+                label={t("zipCode")}
+                fullWidth
+                error={!!errors.zipCode}
+                helperText={errors.zipCode?.message}
+              />
+            </Grid>
+
+            <Grid size={{ sm: 6, xs: 12 }}>
+              <TextField
+                {...register("phone")}
+                label={t("phone")}
+                fullWidth
+                error={!!errors.phone}
+                helperText={errors.phone?.message}
+              />
+            </Grid>
+            <Grid
+              size={{ sm: 6, xs: 12 }}
+              display="flex"
+              justifyContent="space-around"
+            >
+              <Button type="submit" color="primary" variant="contained" onClick={onFormSubmit} data-testid="new-address-btn">
+                {t("save")}
+              </Button>
+              <Button onClick={handleClose} color="primary" variant="outlined">
+                {t("cancel")}
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,9 @@
+interface NodeProps {
+  className: string;
+  children?: React.ReactNode;
+  tag: keyof React.JSX.IntrinsicElements;
+  [x: string]: React.ReactNode | undefined;
+}
+
+export declare const Node: React.FC<NodeProps>;
+export default Node;