@evenicanpm/storefront-core 1.0.4 → 1.0.6

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

@@ -0,0 +1,322 @@
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import TextField from "@mui/material/TextField";
+import { FormControl, InputLabel, MenuItem, Select, Box } from "@mui/material";
+import { Controller, useForm, UseFormReturn } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+import {
+  H5,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { merge } from "lodash";
+
+import { Address } from "@/api-manager/schemas/address.schema";
+import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
+import getStates from "@/api-manager/services/address/queries/get-states";
+import { useTranslations } from "use-intl";
+
+type AddressFormInput = {
+  name: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  country: string;
+  phone: string;
+};
+
+interface Props {
+  address?: Address;
+  countries: CountryRegionInfo[];
+  open: boolean;
+  handleClose: () => void;
+  handleCreateOrUpdateAddress: (address: Address) => void;
+  isGuest: boolean;
+  children?: React.ReactNode;
+}
+interface NewAddressFormCtx {
+  form: UseFormReturn<AddressFormInput>;
+  countries: CountryRegionInfo[];
+  states: { StateName: string; StateId: string }[] | undefined;
+  selectedCountry: CountryRegionInfo | null;
+  setSelectedCountry: (c: CountryRegionInfo | null) => void;
+  errors: Record<string, any>;
+  t: ReturnType<typeof useTranslations>;
+  onCancel: () => void;
+}
+const FormContext = React.createContext<NewAddressFormCtx | null>(null);
+
+const NewAddressForm = ({
+  address,
+  countries,
+  open,
+  handleClose,
+  handleCreateOrUpdateAddress,
+  isGuest,
+  children,
+}: Props) => {
+  const t = useTranslations("Address");
+
+  const defaultCountry = React.useMemo(
+    () =>
+      countries.find(
+        (c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
+      ) ?? null,
+    [countries, address],
+  );
+
+  const [selectedCountry, setSelectedCountry] =
+    React.useState<CountryRegionInfo | null>(defaultCountry);
+
+  const { data: states } = getStates.useData({
+    countryId: selectedCountry?.CountryRegionId,
+  });
+
+  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 form = useForm<AddressFormInput>({
+    defaultValues: {
+      name: "",
+      street: "",
+      city: "",
+      state: "0",
+      zipCode: "",
+      phone: "",
+      country: selectedCountry?.CountryRegionId || "",
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  const {
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = form;
+
+  React.useEffect(() => {
+    setValue("country", selectedCountry?.CountryRegionId || "");
+    if (!address) setValue("state", "0");
+  }, [selectedCountry, setValue, address]);
+
+  React.useEffect(() => {
+    if (!open) {
+      reset();
+      setSelectedCountry(defaultCountry);
+    }
+  }, [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();
+  };
+
+  const ctx: NewAddressFormCtx = {
+    form,
+    countries,
+    states: states
+      ? states.map((s) => ({
+          StateName: s.StateName ?? "",
+          StateId: s.StateId ?? "",
+        }))
+      : undefined,
+    selectedCountry,
+    setSelectedCountry,
+    errors,
+    t,
+    onCancel: handleClose,
+  };
+
+  const hasCustomChildren = React.Children.count(children) > 0;
+
+  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>
+        )}
+        <FormContext.Provider value={ctx}>
+          <Box component="form" onSubmit={handleSubmit(onFormSubmit)}>
+            <Grid container spacing={3}>
+              {hasCustomChildren ? (
+                children
+              ) : (
+                <>
+                  <NewAddressForm.Field name="name" label={t("name")} />
+                  <NewAddressForm.Field name="street" label={t("street")} />
+                  <NewAddressForm.Field name="city" label={t("city")} />
+                  <NewAddressForm.CountrySelect />
+                  <NewAddressForm.StateSelect />
+                  <NewAddressForm.Field name="zipCode" label={t("zipCode")} />
+                  <NewAddressForm.Field name="phone" label={t("phone")} />
+                  <NewAddressForm.Actions />
+                </>
+              )}
+            </Grid>
+          </Box>
+        </FormContext.Provider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// Generic text field
+NewAddressForm.Field = ({ name, label }) => {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) return null;
+
+  const { form, errors } = ctx;
+  const { register } = form;
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <TextField
+        {...register(name)}
+        label={label}
+        fullWidth
+        error={!!errors[name]}
+        helperText={errors[name]?.message}
+      />
+    </Grid>
+  );
+};
+
+NewAddressForm.CountrySelect = () => {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) return null;
+  const { countries, form, setSelectedCountry, t, errors } = ctx;
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FormControl fullWidth size="small" error={!!errors.country}>
+        <InputLabel id="country-label">{t("country")}</InputLabel>
+        <Controller
+          name="country"
+          control={form.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>
+  );
+};
+
+NewAddressForm.StateSelect = () => {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) return null;
+  const { states, form, t, errors } = ctx;
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }}>
+      <FormControl fullWidth size="small" error={!!errors.state}>
+        <InputLabel id="state-label">{t("state")}</InputLabel>
+        <Controller
+          name="state"
+          control={form.control}
+          render={({ field }) => (
+            <Select labelId="state-label" {...field}>
+              <MenuItem value="0">Select a state</MenuItem>
+              {states &&
+                states.map(({ StateName, StateId }) => (
+                  <MenuItem key={StateId} value={StateId}>
+                    {StateName}
+                  </MenuItem>
+                ))}
+            </Select>
+          )}
+        />
+      </FormControl>
+    </Grid>
+  );
+};
+
+NewAddressForm.Actions = () => {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) return null;
+  const { t, onCancel } = ctx;
+
+  return (
+    <Grid size={{ sm: 6, xs: 12 }} display="flex" justifyContent="space-around">
+      <Button type="submit" color="primary" variant="contained">
+        {t("save")}
+      </Button>
+      <Button onClick={onCancel} color="primary" variant="outlined">
+        {t("cancel")}
+      </Button>
+    </Grid>
+  );
+};
+
+export default NewAddressForm;

package/src/pages-v2/checkout/checkout-alt-form/steps/address/styles.ts

@@ -0,0 +1,27 @@
+import Box from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+
+const dropDownHandlerStyles = (theme) => ({
+  width: 260,
+  minWidth: 260,
+  height: "100%",
+  display: "flex",
+  whiteSpace: "pre",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  justifyContent: "flex-end",
+  color: theme.palette.grey[700],
+  paddingInline: theme.spacing(3),
+  borderLeft: `1px solid ${theme.palette.grey[400]}`,
+  [theme.breakpoints.down("xs")]: { display: "none" },
+});
+
+export const AddressDropDownHandler = styled(Box)(({ theme }) => ({
+  ...dropDownHandlerStyles(theme),
+  padding: "10px 13px",
+  border: "none",
+  justifyContent: "space-between",
+  borderRadius: "5px",
+  cursor: "pointer",
+  background: "#f3f5f9",
+}));

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

@@ -0,0 +1,139 @@
+import React, { createContext, useContext } 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 "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/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";
+interface CustomerCtx extends CheckoutStepComponentProps {
+  email: string | null;
+  cartId: string;
+  form: ReturnType<typeof useForm<{ email?: string }>>;
+  handleSave: (formData: { email: string }) => void;
+}
+const CustomerContext = createContext<CustomerCtx | null>(null);
+
+const CustomerInformation = (
+  props: CheckoutStepComponentProps & { children?: React.ReactNode },
+) => {
+  const {
+    stepViewState,
+    cart: { Id: cartId, ReceiptEmail: email },
+    stepSubmissionState,
+    setStepSubmissionState,
+    handleStepCompletion,
+    children,
+  } = props;
+
+  const { mutateAsync: updateCart } = useUpdateCart();
+  const t = useTranslations("Checkout.CustomerInformation");
+
+  const validationSchema = yup.object({
+    email: yup.string().email(t("emailInvalid")).required(t("emailRequired")),
+  });
+
+  const form = useForm({
+    defaultValues: { email: email || "" },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { handleSubmit, setValue, formState } = form;
+
+  React.useEffect(() => {
+    setValue("email", email || "");
+  }, [email, setValue]);
+
+  const handleSave = React.useCallback(
+    (formData: { email: string }) => {
+      updateCart({
+        cart: { ReceiptEmail: formData.email, Id: cartId },
+      })
+        .then(() => {
+          handleStepCompletion();
+          setStepSubmissionState("idle");
+        })
+        .catch(() => {
+          setStepSubmissionState("error");
+        });
+    },
+    [cartId, handleStepCompletion, setStepSubmissionState, updateCart],
+  );
+
+  // Auto-submit when parent sets "submitting"
+  React.useEffect(() => {
+    if (stepSubmissionState === "submitting") {
+      handleSubmit(handleSave)();
+    }
+  }, [handleSave, handleSubmit, stepSubmissionState]);
+
+  // Mark error if form validation fails
+  React.useEffect(() => {
+    if (formState.errors && formState.isSubmitted) {
+      setStepSubmissionState("error");
+    }
+  }, [formState.errors, formState.isSubmitted, setStepSubmissionState]);
+
+  const ctx: CustomerCtx = {
+    ...props,
+    email,
+    cartId,
+    form,
+    handleSave,
+  };
+
+  return (
+    <CustomerContext.Provider value={ctx}>
+      {children ? (
+        children
+      ) : stepViewState === "preview" ? (
+        <CustomerInformation.Preview />
+      ) : (
+        <CustomerInformation.Form />
+      )}
+    </CustomerContext.Provider>
+  );
+};
+
+CustomerInformation.Preview = () => {
+  const ctx = useContext(CustomerContext);
+  if (!ctx) return null;
+  const { email } = ctx;
+  const t = useTranslations("Checkout.CustomerInformation");
+  return (
+    <Box ml={2}>
+      <Paragraph>
+        {t("emailLabel")}: {email}
+      </Paragraph>
+    </Box>
+  );
+};
+
+CustomerInformation.Form = () => {
+  const ctx = useContext(CustomerContext);
+  if (!ctx) return null;
+  const { form, handleSave } = ctx;
+  const { register, handleSubmit, formState } = form;
+  const t = useTranslations("Checkout.CustomerInformation");
+
+  return (
+    <form onSubmit={handleSubmit(handleSave)}>
+      <Grid size={{ sm: 5, xs: 5 }}>
+        <TextField
+          {...register("email")}
+          fullWidth
+          type="email"
+          label={t("emailLabel")}
+          variant="outlined"
+          error={Boolean(formState.errors.email)}
+          helperText={formState.errors.email?.message}
+        />
+      </Grid>
+    </form>
+  );
+};
+
+export default CustomerInformation;