@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -9,336 +9,339 @@ import { Controller, useForm, UseFormReturn } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import z from "zod";
 import {
-  H5,
-  Paragraph,
+	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 { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import { CountryRegionInfo } from "@msdyn365-commerce/retail-proxy";
-import getStates from "@/api-manager/services/address/queries/get-states";
+import getStates from "@evenicanpm/storefront-core/src/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;
+	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;
+	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;
+	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,
+	address,
+	countries,
+	open,
+	handleClose,
+	handleCreateOrUpdateAddress,
+	isGuest,
+	children,
 }: Props) => {
-  const t = useTranslations("Address");
+	const t = useTranslations("Address");
 
-  const defaultCountry = React.useMemo(
-    () =>
-      countries.find(
-        (c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
-      ) ?? null,
-    [countries, address],
-  );
+	const defaultCountry = React.useMemo(
+		() =>
+			countries.find(
+				(c) => c.CountryRegionId === (address?.ThreeLetterISORegionName ?? ""),
+			) ?? null,
+		[countries, address],
+	);
 
-  const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry);
+	const [selectedCountry, setSelectedCountry] =
+		React.useState<CountryRegionInfo | null>(defaultCountry);
 
-  const { data } = getStates.useData({
-    countryId: selectedCountry?.CountryRegionId,
-  });
+	const { data } = getStates.useData({
+		countryId: selectedCountry?.CountryRegionId,
+	});
 
-  const states = data ?? [];
+	const states = data ?? [];
 
-  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 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 form = useForm<AddressFormInput>({
+		defaultValues: {
+			name: "",
+			street: "",
+			city: "",
+			state: "0",
+			zipCode: "",
+			phone: "",
+			country: selectedCountry?.CountryRegionId || "",
+		},
+		resolver: zodResolver(validationSchema),
+	});
 
-  const {
-    handleSubmit,
-    setValue,
-    reset,
-    formState: { errors },
-  } = form;
+	const {
+		handleSubmit,
+		setValue,
+		reset,
+		formState: { errors },
+	} = form;
 
-  React.useEffect(() => {
-    setValue("country", selectedCountry?.CountryRegionId || "");
-    if (!address) setValue("state", "0");
-  }, [selectedCountry, setValue, address]);
+	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 (!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]);
+	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]);
 
-  // sync selectedCountry whenever address changes, not only on initial mount, so that state field populates.
-  React.useEffect(() => {
-    if (address) {
-      const sel =
-        countries.find(
-          (c) => c.CountryRegionId === address.ThreeLetterISORegionName,
-        ) ?? null;
-      setSelectedCountry(sel);
-      if (sel) {
-        setValue("country", sel.CountryRegionId ?? "");
-      }
-    }
-  }, [address, countries, setValue]);
+	// sync selectedCountry whenever address changes, not only on initial mount, so that state field populates.
+	React.useEffect(() => {
+		if (address) {
+			const sel =
+				countries.find(
+					(c) => c.CountryRegionId === address.ThreeLetterISORegionName,
+				) ?? null;
+			setSelectedCountry(sel);
+			if (sel) {
+				setValue("country", sel.CountryRegionId ?? "");
+			}
+		}
+	}, [address, countries, setValue]);
 
-  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 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 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;
+	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>
-  );
+	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,
+	name,
+	label,
 }: {
-  name: keyof AddressFormInput;
-  label: string;
+	name: keyof AddressFormInput;
+	label: string;
 }) => {
-  const ctx = React.useContext(FormContext);
-  if (!ctx) return null;
+	const ctx = React.useContext(FormContext);
+	if (!ctx) return null;
 
-  const { form, errors } = ctx;
-  const { register } = form;
+	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>
-  );
+	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;
+	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, index) => (
-                <MenuItem key={`${c.CountryRegionId}-${index}`} value={c.CountryRegionId}>
-                  {c.ShortName}
-                </MenuItem>
-              ))}
-            </Select>
-          )}
-        />
-      </FormControl>
-    </Grid>
-  );
+	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, index) => (
+								<MenuItem
+									key={`${c.CountryRegionId}-${index}`}
+									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;
+	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>
-  );
+	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;
+	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>
-  );
+	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

@@ -3,26 +3,26 @@ import styled from "@mui/material/styles/styled";
 import { Theme } from "@mui/material/styles";
 
 const dropDownHandlerStyles = (theme: 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" },
+	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",
+	...dropDownHandlerStyles(theme),
+	padding: "10px 13px",
+	border: "none",
+	justifyContent: "space-between",
+	borderRadius: "5px",
+	cursor: "pointer",
+	background: "#f3f5f9",
 }));