@evenicanpm/storefront-core 1.1.0 → 1.2.0

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

@@ -11,104 +11,104 @@ import { InitialValues } from "@evenicanpm/storefront-core/src/pages-v2/checkout
 
 // ==============================================================
 interface Props {
-  values: InitialValues;
-  errors: FormikErrors<InitialValues>;
-  touched: FormikTouched<InitialValues>;
-  handleChange: (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
+	values: InitialValues;
+	errors: FormikErrors<InitialValues>;
+	touched: FormikTouched<InitialValues>;
+	handleChange: (
+		event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => void;
 }
 // ==============================================================
 
 export default function DeliveryDate({
-  errors,
-  handleChange,
-  touched,
-  values,
+	errors,
+	handleChange,
+	touched,
+	values,
 }: Props) {
-  const [dateList, setDateList] = useState<{ label: string; value: string }[]>(
-    [],
-  );
+	const [dateList, setDateList] = useState<{ label: string; value: string }[]>(
+		[],
+	);
 
-  useEffect(() => {
-    const list = [];
-    const today = new Date();
-    const dateCount = today.getDate();
+	useEffect(() => {
+		const list = [];
+		const today = new Date();
+		const dateCount = today.getDate();
 
-    list.push({
-      label: format(today, "dd MMMM"),
-      value: today.toISOString(),
-    });
+		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(),
-      });
-    }
+		for (let i = 1; i < 10; i++) {
+			today.setDate(dateCount + i);
+			list.push({
+				label: format(today, "dd MMMM"),
+				value: today.toISOString(),
+			});
+		}
 
-    setDateList(list);
-  }, []);
+		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" },
-  ];
+	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 }}>
-      <StepHeading
-        number={1}
-        title="Delivery Date and Time"
-        stepViewState={"active"}
-      />
+	return (
+		<Card sx={{ p: 3, mb: 3 }}>
+			<StepHeading
+				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>
+			<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>
-  );
+					<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/steps/shipping/delivery-options.tsx

@@ -1,244 +1,244 @@
 import React from "react";
 import {
-  Box,
-  FormControl,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
+	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 { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
 import {
-  DeliveryOption,
-  DeliveryPreferenceType,
-  LineDeliverySpecification,
+	DeliveryOption,
+	DeliveryPreferenceType,
+	LineDeliverySpecification,
 } from "@msdyn365-commerce/retail-proxy";
 import {
-  H4,
-  Paragraph,
-  Span,
+	H4,
+	Paragraph,
+	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import useCurrencyFormatter from "@/lib/currency-formatter";
+import useCurrencyFormatter from "@evenicanpm/storefront-core/src/lib/currency-formatter";
 import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
-import useGetDeliveryOptions from "@/api-manager/services/address/mutations/get-delivery-options";
-import useUpdateCartLineDeliveryMode from "@/api-manager/services/cart/mutations/update-cart-line-delivery-mode";
+import useGetDeliveryOptions from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/get-delivery-options";
+import useUpdateCartLineDeliveryMode from "@evenicanpm/storefront-core/src/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";
+import useRemoveCartLineDeliveryMode from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/remove-cart-line-delivery-mode";
 
 type DeliveryOptionsCompound = React.FC<CheckoutStepComponentProps> & {
-  Preview: React.FC<PreviewProps>;
-  Form: React.FC<FormProps>;
+	Preview: React.FC<PreviewProps>;
+	Form: React.FC<FormProps>;
 };
 
 type PreviewProps = {
-  deliveryOptions: DeliveryOption[];
-  selectedOption: string | null;
+	deliveryOptions: DeliveryOption[];
+	selectedOption: string | null;
 };
 
 type FormProps = {
-  deliveryOptions: DeliveryOption[];
-  deliveryUnavailable: boolean;
-  selectedOption: string | null;
-  onChange: (value: string) => void;
+	deliveryOptions: DeliveryOption[];
+	deliveryUnavailable: boolean;
+	selectedOption: string | null;
+	onChange: (value: string) => void;
 };
 
 const DeliveryOptions: DeliveryOptionsCompound = (props) => {
-  const {
-    cart,
-    stepViewState,
-    stepSubmissionState,
-    setStepSubmissionState,
-    children,
-  } = props;
-  const [deliveryOptions, setDeliveryOptions] = React.useState<
-    DeliveryOption[]
-  >([]);
-  const [deliveryUnavailable, setDeliveryUnavailable] = React.useState(false);
-  const [selectedOption, setSelectedOption] = React.useState<string | null>(
-    null,
-  );
-  const [currentShippingAddress, setCurrentShippingAddress] =
-    React.useState<Address | null>(null);
-
-  const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
-  const { mutateAsync: updateDeliveryOption } = useUpdateCartLineDeliveryMode();
-  const { mutate: removeDeliveryOption } = useRemoveCartLineDeliveryMode();
-
-  const handleUpdateDeliveryOption = React.useCallback(() => {
-    if (cart.CartLines && selectedOption) {
-      const cartLineDeliverySpecification: LineDeliverySpecification[] =
-        cart.CartLines.map((cl) => ({
-          LineId: cl.LineId,
-          DeliverySpecification: {
-            DeliveryModeId: selectedOption,
-            DeliveryPreferenceTypeValue: DeliveryPreferenceType.ShipToAddress,
-            DeliveryAddress: cart.ShippingAddress,
-          },
-        }));
-
-      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, removeDeliveryOption, stepViewState]);
-
-  React.useEffect(() => {
-    if (currentShippingAddress) {
-      const { Id, CartLines } = cart;
-      // Filter out undefined values and assert string[]
-      const cartLineIds: string[] = CartLines.map((cl) => cl.LineId).filter(
-        (id): id is string => Boolean(id),
-      );
-      if (!Id || !cartLineIds?.length) {
-        setDeliveryOptions([]);
-        return;
-      }
-      getDeliveryOptions({
-        cartId: Id,
-        cartLineIds,
-        shippingAddress: currentShippingAddress,
-      }).then((response) => {
-        setDeliveryUnavailable(response.length === 0);
-        setDeliveryOptions(response || []);
-      });
-    }
-  }, [cart, currentShippingAddress, getDeliveryOptions]);
-
-  React.useEffect(() => {
-    if (cart.ShippingAddress) {
-      if (
-        currentShippingAddress &&
-        JSON.stringify(currentShippingAddress) ===
-          JSON.stringify(cart.ShippingAddress)
-      ) {
-        return;
-      }
-      setCurrentShippingAddress(cart.ShippingAddress);
-    }
-  }, [cart.ShippingAddress, currentShippingAddress]);
-
-  const handleOptionChange = (value: string) => {
-    setSelectedOption(value);
-  };
-
-  if (stepViewState === "pending") return null;
-
-  return (
-    <>
-      {children ? (
-        children
-      ) : stepViewState === "preview" ? (
-        <DeliveryOptions.Preview
-          deliveryOptions={deliveryOptions}
-          selectedOption={selectedOption}
-        />
-      ) : (
-        <DeliveryOptions.Form
-          deliveryOptions={deliveryOptions}
-          deliveryUnavailable={deliveryUnavailable}
-          selectedOption={selectedOption}
-          onChange={handleOptionChange}
-        />
-      )}
-    </>
-  );
+	const {
+		cart,
+		stepViewState,
+		stepSubmissionState,
+		setStepSubmissionState,
+		children,
+	} = props;
+	const [deliveryOptions, setDeliveryOptions] = React.useState<
+		DeliveryOption[]
+	>([]);
+	const [deliveryUnavailable, setDeliveryUnavailable] = React.useState(false);
+	const [selectedOption, setSelectedOption] = React.useState<string | null>(
+		null,
+	);
+	const [currentShippingAddress, setCurrentShippingAddress] =
+		React.useState<Address | null>(null);
+
+	const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
+	const { mutateAsync: updateDeliveryOption } = useUpdateCartLineDeliveryMode();
+	const { mutate: removeDeliveryOption } = useRemoveCartLineDeliveryMode();
+
+	const handleUpdateDeliveryOption = React.useCallback(() => {
+		if (cart.CartLines && selectedOption) {
+			const cartLineDeliverySpecification: LineDeliverySpecification[] =
+				cart.CartLines.map((cl) => ({
+					LineId: cl.LineId,
+					DeliverySpecification: {
+						DeliveryModeId: selectedOption,
+						DeliveryPreferenceTypeValue: DeliveryPreferenceType.ShipToAddress,
+						DeliveryAddress: cart.ShippingAddress,
+					},
+				}));
+
+			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, removeDeliveryOption, stepViewState]);
+
+	React.useEffect(() => {
+		if (currentShippingAddress) {
+			const { Id, CartLines } = cart;
+			// Filter out undefined values and assert string[]
+			const cartLineIds: string[] = CartLines.map((cl) => cl.LineId).filter(
+				(id): id is string => Boolean(id),
+			);
+			if (!Id || !cartLineIds?.length) {
+				setDeliveryOptions([]);
+				return;
+			}
+			getDeliveryOptions({
+				cartId: Id,
+				cartLineIds,
+				shippingAddress: currentShippingAddress,
+			}).then((response) => {
+				setDeliveryUnavailable(response.length === 0);
+				setDeliveryOptions(response || []);
+			});
+		}
+	}, [cart, currentShippingAddress, getDeliveryOptions]);
+
+	React.useEffect(() => {
+		if (cart.ShippingAddress) {
+			if (
+				currentShippingAddress &&
+				JSON.stringify(currentShippingAddress) ===
+					JSON.stringify(cart.ShippingAddress)
+			) {
+				return;
+			}
+			setCurrentShippingAddress(cart.ShippingAddress);
+		}
+	}, [cart.ShippingAddress, currentShippingAddress]);
+
+	const handleOptionChange = (value: string) => {
+		setSelectedOption(value);
+	};
+
+	if (stepViewState === "pending") return null;
+
+	return (
+		<>
+			{children ? (
+				children
+			) : stepViewState === "preview" ? (
+				<DeliveryOptions.Preview
+					deliveryOptions={deliveryOptions}
+					selectedOption={selectedOption}
+				/>
+			) : (
+				<DeliveryOptions.Form
+					deliveryOptions={deliveryOptions}
+					deliveryUnavailable={deliveryUnavailable}
+					selectedOption={selectedOption}
+					onChange={handleOptionChange}
+				/>
+			)}
+		</>
+	);
 };
 
 DeliveryOptions.Preview = ({ deliveryOptions, selectedOption }) => {
-  const { formatCurrency } = useCurrencyFormatter();
-  const deliveryOption = deliveryOptions.find(
-    (dlv) => dlv.Code === selectedOption,
-  );
-
-  if (!deliveryOption) return null;
-
-  return (
-    <Box mt={2}>
-      <H4>{deliveryOption.Description}</H4>
-      <Span>{formatCurrency(deliveryOption.TotalChargeAmount || 0)}</Span>
-    </Box>
-  );
+	const { formatCurrency } = useCurrencyFormatter();
+	const deliveryOption = deliveryOptions.find(
+		(dlv) => dlv.Code === selectedOption,
+	);
+
+	if (!deliveryOption) return null;
+
+	return (
+		<Box mt={2}>
+			<H4>{deliveryOption.Description}</H4>
+			<Span>{formatCurrency(deliveryOption.TotalChargeAmount || 0)}</Span>
+		</Box>
+	);
 };
 
 DeliveryOptions.Form = ({
-  deliveryOptions,
-  deliveryUnavailable,
-  selectedOption,
-  onChange,
+	deliveryOptions,
+	deliveryUnavailable,
+	selectedOption,
+	onChange,
 }) => {
-  const t = useTranslations("Checkout.DeliveryOptions");
-  const { formatCurrency } = useCurrencyFormatter();
-
-  const renderChargeLine = (dlvOption: DeliveryOption) => (
-    <Grid container justifyContent={"space-between"}>
-      <Paragraph>{dlvOption.Description}</Paragraph>
-      <Paragraph>{formatCurrency(dlvOption.TotalChargeAmount || 0)}</Paragraph>
-    </Grid>
-  );
-
-  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>
-              )}
-              <RadioGroup
-                aria-labelledby={"deliveryOptions"}
-                name={"Delivery-Options"}
-                onChange={(event) => onChange(event.target.value)}
-                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>
-  );
+	const t = useTranslations("Checkout.DeliveryOptions");
+	const { formatCurrency } = useCurrencyFormatter();
+
+	const renderChargeLine = (dlvOption: DeliveryOption) => (
+		<Grid container justifyContent={"space-between"}>
+			<Paragraph>{dlvOption.Description}</Paragraph>
+			<Paragraph>{formatCurrency(dlvOption.TotalChargeAmount || 0)}</Paragraph>
+		</Grid>
+	);
+
+	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>
+							)}
+							<RadioGroup
+								aria-labelledby={"deliveryOptions"}
+								name={"Delivery-Options"}
+								onChange={(event) => onChange(event.target.value)}
+								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>
+	);
 };
 
 export default DeliveryOptions;