@evenicanpm/storefront-core 1.0.4 → 1.0.5

package/src/pages-v2/cart/estimate-shipping.tsx

@@ -1,3 +1,4 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
 import useGetDeliveryOptions from "@evenicanpm/storefront-core/src/api-manager/services/address/mutations/get-delivery-options";
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CountryInput from "@evenicanpm/storefront-core/src/components-v2/countries-input";
@@ -19,7 +20,23 @@ import {
 } from "@mui/material";
 import { Address } from "@evenicanpm/storefront-core/src/api-manager/schemas/address.schema";
 import { useTranslations } from "next-intl";
-import React from "react";
+
+interface EstimateShippingContextValue {
+  selectedCountry: CountryRegionInfo | null;
+  setSelectedCountry: (c: CountryRegionInfo | null) => void;
+  selectedState: string | undefined;
+  setSelectedState: (s: string | undefined) => void;
+  zipCode: string;
+  setZipCode: (z: string) => void;
+  deliveryOptions: DeliveryOption[];
+  noOptionsFound: boolean;
+  doDeliveryMethodLookup: () => Promise<void>;
+  countries: CountryRegionInfo[];
+  states: StateProvinceInfo[];
+}
+
+const EstimateShippingContext =
+  createContext<EstimateShippingContextValue | null>(null);
 
 export interface EstimateShippingProps {
   countries: CountryRegionInfo[];
@@ -28,46 +45,37 @@ export interface EstimateShippingProps {
   cartId: string;
   cartLineIds: string[];
   defaultCountryCode?: string;
+  children: React.ReactNode;
 }
 
-export default function EstimateShipping(props: EstimateShippingProps) {
-  const {
-    countries,
-    states,
-    setCountry,
-    cartId,
-    cartLineIds,
-    defaultCountryCode,
-  } = props;
+const EstimateShipping = ({
+  countries,
+  states,
+  setCountry,
+  cartId,
+  cartLineIds,
+  defaultCountryCode,
+  children,
+}: EstimateShippingProps) => {
   const t = useTranslations("Cart.Sidebar");
-  const defaultCountry = countries.find(
-    (c) => c.CountryRegionId === (defaultCountryCode ?? "USA"),
-  );
+  const defaultCountry =
+    countries.find(
+      (c) => c.CountryRegionId === (defaultCountryCode ?? "USA"),
+    ) ?? null;
+
   const [selectedCountry, setSelectedCountry] =
-    React.useState<CountryRegionInfo | null>(defaultCountry ?? null);
-  const [selectedState, setSelectedState] = React.useState<string | undefined>(
-    undefined,
-  );
-  const [zipCode, setZipCode] = React.useState<string>("");
-  const [deliveryOptions, setDeliveryOptions] = React.useState<
-    DeliveryOption[]
-  >([]);
-  const [noOptionsFound, setNoOptionsFound] = React.useState<boolean>(false);
-  const { formatCurrency } = useCurrencyFormatter();
+    useState<CountryRegionInfo | null>(defaultCountry);
+  const [selectedState, setSelectedState] = useState<string | undefined>();
+  const [zipCode, setZipCode] = useState("");
+  const [deliveryOptions, setDeliveryOptions] = useState<DeliveryOption[]>([]);
+  const [noOptionsFound, setNoOptionsFound] = useState(false);
+
   const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
 
-  React.useEffect(() => {
-    if (selectedCountry) {
-      setCountry(selectedCountry);
-    }
+  useEffect(() => {
+    if (selectedCountry) setCountry(selectedCountry);
   }, [selectedCountry, setCountry]);
 
-  const handleStateChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setSelectedState(event.target.value);
-
-  const handleZipCodeChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setZipCode(event.target.value);
-
   const createAddressFromInput = (): Address => ({
     ZipCode: zipCode,
     State: selectedState,
@@ -76,15 +84,14 @@ export default function EstimateShipping(props: EstimateShippingProps) {
   });
 
   const doDeliveryMethodLookup = async () => {
-    if (!zipCode || !selectedState || !selectedCountry) {
-      return;
-    }
+    if (!zipCode || !selectedState || !selectedCountry) return;
     setNoOptionsFound(false);
     const data = await getDeliveryOptions({
       cartId,
       cartLineIds,
       shippingAddress: createAddressFromInput(),
     });
+
     if (data.length) {
       setDeliveryOptions(data);
     } else {
@@ -92,92 +99,141 @@ export default function EstimateShipping(props: EstimateShippingProps) {
     }
   };
 
-  const renderOptionsSection = () => {
-    if (noOptionsFound) {
-      return <Span color="error.main">{t("noDeliveryOptionsFound")}</Span>;
-    } else if (deliveryOptions.length) {
-      return (
-        <Box>
-          <Span fontWeight={600} mb={2} display="block">
-            {t("deliveryOptionsLabel")}
-          </Span>
-          <Divider sx={{ mb: 2 }} />
-          <List>
-            {deliveryOptions.map((dl) => (
-              <ListItem
-                key={dl.RecordId}
-                secondaryAction={
-                  <Span>{formatCurrency(dl.TotalChargeAmount || 0)}</Span>
-                }
-              >
-                <ListItemText primary={dl.Description} />
-              </ListItem>
-            ))}
-          </List>
-        </Box>
-      );
-    }
-  };
   return (
-    <Box>
-      <Span fontWeight={600} mb={2} display="block">
-        {t("estimatesLabel")}
-      </Span>
-
-      {/* COUNTRY TEXT FIELD */}
-      <Box sx={{ mb: 2 }}>
-        <CountryInput
-          selectedCountry={selectedCountry}
-          setSelectedCountry={setSelectedCountry}
-          countries={countries}
-          label={t("countryLabel")}
-        />
+    <EstimateShippingContext.Provider
+      value={{
+        selectedCountry,
+        setSelectedCountry,
+        selectedState,
+        setSelectedState,
+        zipCode,
+        setZipCode,
+        deliveryOptions,
+        noOptionsFound,
+        doDeliveryMethodLookup,
+        countries,
+        states,
+      }}
+    >
+      <Box>
+        <Span fontWeight={600} mb={2} display="block">
+          {t("estimatesLabel")}
+        </Span>
+        {children}
       </Box>
+    </EstimateShippingContext.Provider>
+  );
+};
 
-      {/* STATE/CITY TEXT FIELD */}
-      <TextField
-        select
-        fullWidth
-        size="small"
-        label={t("stateLabel")}
-        value={selectedState || 0}
-        onChange={handleStateChange}
-        variant="outlined"
-        placeholder="Select State"
-      >
-        <MenuItem value={0}>Select a state</MenuItem>
-        {states &&
-          states.length > 0 &&
-          states.map(({ StateName, StateId }) => (
-            <MenuItem value={StateId} key={StateName}>
-              {StateName}
-            </MenuItem>
-          ))}
-      </TextField>
-
-      {/* ZIP-CODE TEXT FIELD */}
-      <TextField
-        fullWidth
-        size="small"
-        label={t("zipCodeLabel")}
-        placeholder="3100"
-        variant="outlined"
-        value={zipCode}
-        onChange={handleZipCodeChange}
-        sx={{ mt: 2 }}
+// Subcomponents
+EstimateShipping.Country = () => {
+  const ctx = useContext(EstimateShippingContext);
+  if (!ctx) return null;
+  const { selectedCountry, setSelectedCountry, countries } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+  return (
+    <Box sx={{ mb: 2 }}>
+      <CountryInput
+        selectedCountry={selectedCountry}
+        setSelectedCountry={setSelectedCountry}
+        countries={countries}
+        label={t("countryLabel")}
       />
+    </Box>
+  );
+};
+
+EstimateShipping.State = () => {
+  const ctx = useContext(EstimateShippingContext);
+  if (!ctx) return null;
+  const { selectedState, setSelectedState, states } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+  return (
+    <TextField
+      select
+      fullWidth
+      size="small"
+      label={t("stateLabel")}
+      value={selectedState || ""}
+      onChange={(e) => setSelectedState(e.target.value)}
+    >
+      <MenuItem value="">Select a state</MenuItem>
+      {states.map(({ StateName, StateId }) => (
+        <MenuItem value={StateId} key={StateId}>
+          {StateName}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+EstimateShipping.ZipCode = () => {
+  const ctx = useContext(EstimateShippingContext);
+  if (!ctx) return null;
+  const { zipCode, setZipCode } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      label={t("zipCodeLabel")}
+      value={zipCode}
+      onChange={(e) => setZipCode(e.target.value)}
+      sx={{ mt: 2 }}
+    />
+  );
+};
+
+EstimateShipping.Submit = () => {
+  const ctx = useContext(EstimateShippingContext);
+  if (!ctx) return null;
+  const { doDeliveryMethodLookup } = ctx;
+  const t = useTranslations("Cart.Sidebar");
+  return (
+    <Button
+      variant="outlined"
+      color="primary"
+      fullWidth
+      sx={{ my: 2 }}
+      onClick={doDeliveryMethodLookup}
+    >
+      {t("calculateShippingLabel")}
+    </Button>
+  );
+};
+
+EstimateShipping.Options = () => {
+  const ctx = useContext(EstimateShippingContext);
+  if (!ctx) return null;
+  const { deliveryOptions, noOptionsFound } = ctx;
+  const { formatCurrency } = useCurrencyFormatter();
+  const t = useTranslations("Cart.Sidebar");
+
+  if (noOptionsFound) {
+    return <Span color="error.main">{t("noDeliveryOptionsFound")}</Span>;
+  }
+  if (!deliveryOptions.length) return null;
 
-      <Button
-        variant="outlined"
-        color="primary"
-        fullWidth
-        sx={{ my: 2 }}
-        onClick={doDeliveryMethodLookup}
-      >
-        {t("calculateShippingLabel")}
-      </Button>
-
-      {renderOptionsSection()}
+  return (
+    <Box>
+      <Span fontWeight={600} mb={2} display="block">
+        {t("deliveryOptionsLabel")}
+      </Span>
+      <Divider sx={{ mb: 2 }} />
+      <List>
+        {deliveryOptions.map((dl) => (
+          <ListItem
+            key={dl.RecordId}
+            secondaryAction={
+              <Span>{formatCurrency(dl.TotalChargeAmount || 0)}</Span>
+            }
+          >
+            <ListItemText primary={dl.Description} />
+          </ListItem>
+        ))}
+      </List>
     </Box>
   );
-}
+};
+
+export default EstimateShipping;

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

@@ -1,51 +1,72 @@
 "use client";
-// LOCAL CUSTOM COMPONENTS
-import DeliveryAddress from "./delivery-address";
 
-import { Cart } from "@/api-manager/schemas/cart.schema";
-import CustomerInformation from "./customer-information";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+  ReactElement,
+} from "react";
 import { Box, Button } from "@mui/material";
 import Grid from "@mui/material/Grid2";
-import DeliveryOptions from "./delivery-options";
-import React from "react";
-import CheckoutStep from "./checkout-step";
-import PaymentDetails from "./payment-details";
-import useCheckout from "@/api-manager/services/cart/mutations/checkout";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { useQueryClient } from "@tanstack/react-query";
 import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import { useRouter } from "next/navigation";
 import { PageSlug } from "@/lib/page-slugs";
 import getChannelConfiguration from "@/api-manager/services/organization/queries/get-channel-configuration";
-import { useTranslations } from "next-intl";
 import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
-interface Props {
+import useCheckout from "@/api-manager/services/cart/mutations/checkout";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import CheckoutStep from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
+interface CheckoutContextValue {
+  cart: Cart;
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  isSubmitting: boolean;
+  placeOrder: () => Promise<void>;
+  totalSteps: number;
+}
+
+const CheckoutContext = createContext<CheckoutContextValue | undefined>(
+  undefined,
+);
+interface CheckoutFormProps {
   cart: Cart;
+  children: ReactNode;
 }
 
-export default function CheckoutForm({ cart }: Props) {
+interface InjectedStepProps {
+  stepNumber: number;
+  isLastStep: boolean;
+}
+
+import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
+
+interface StepProps<T extends object> {
+  title: string;
+  component: React.FC<CheckoutStepComponentProps & T>;
+  componentProps?: T;
+  stepNumber?: number;
+  isLastStep?: boolean;
+}
+const CheckoutForm = ({ cart, children }: CheckoutFormProps) => {
   const t = useTranslations("Checkout");
-  const [activeStep, setActiveStep] = React.useState<number>(1);
-  const { mutateAsync: placeOrder } = useCheckout();
+  const [activeStep, setActiveStep] = useState<number>(1);
+  const { mutateAsync: placeOrderMutation } = useCheckout();
   const { setNotification } = useNotification();
   const router = useRouter();
   const queryClient = useQueryClient();
   const { data: channelConfigurationData } = getChannelConfiguration.useData();
-  const isFormComplete = () => activeStep > steps.length;
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const steps = [
-    {
-      title: t("Steps.customerInformation"),
-      component: CustomerInformation,
-    },
-    { title: t("Steps.deliveryAddress"), component: DeliveryAddress },
-    { title: t("Steps.deliveryOptions"), component: DeliveryOptions },
-    { title: t("Steps.payment"), component: PaymentDetails },
-  ];
-  const handleStepChange = (step: number) => {
-    setActiveStep(step);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [totalSteps, setTotalSteps] = useState(0);
+
+  const cleanupCart = async (transactionId: string) => {
+    router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
   };
 
-  const handlePlaceOrder = async () => {
+  const placeOrder = async () => {
     setIsSubmitting(true);
     const cache = queryClient.getQueryCache();
     const acceptResultCache = cache.get(
@@ -53,15 +74,13 @@ export default function CheckoutForm({ cart }: Props) {
     );
     const paymentAcceptResult = acceptResultCache?.state
       .data as CardPaymentAcceptResult;
-    if (!paymentAcceptResult) {
-      return;
-    }
 
-    if (!paymentAcceptResult.TokenizedPaymentCard) {
+    if (!paymentAcceptResult?.TokenizedPaymentCard) {
       return;
     }
+
     try {
-      const data = await placeOrder({
+      const data = await placeOrderMutation({
         id: cart.Id,
         receiptEmail: cart.ReceiptEmail ?? "",
         tokenizedPaymentCard: paymentAcceptResult.TokenizedPaymentCard,
@@ -83,49 +102,107 @@ export default function CheckoutForm({ cart }: Props) {
     setIsSubmitting(false);
   };
 
-  const cleanupCart = async (transactionId: string) => {
-    // Clear cached cart data
-    // await deleteCartCookie();
-    // Fetch a new cart
-    // const newCart = await getCart.fetchData(queryClient);
-    // Set new cookie
-    // setCartCookie(newCart.Id);
-    //Go to confirmation page
-    router.push(`${PageSlug.Confirmation}?transactionId=${transactionId}`);
-  };
+  return (
+    <CheckoutContext.Provider
+      value={{
+        cart,
+        activeStep,
+        setActiveStep,
+        isSubmitting,
+        placeOrder,
+        totalSteps,
+      }}
+    >
+      <Box>
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child) && child.type === CheckoutForm.Steps
+            ? React.cloneElement(
+                child as ReactElement<{
+                  setTotalSteps?: (count: number) => void;
+                }>,
+                { setTotalSteps },
+              )
+            : child,
+        )}
+      </Box>
+    </CheckoutContext.Provider>
+  );
+};
+
+CheckoutForm.Steps = ({
+  children,
+  setTotalSteps,
+}: {
+  children: ReactNode;
+  setTotalSteps?: (count: number) => void;
+}) => {
+  const totalSteps = React.Children.count(children);
+
+  useEffect(() => {
+    setTotalSteps?.(totalSteps);
+  }, [totalSteps, setTotalSteps]);
 
-  const renderFormFooter = () => {
-    return (
-      <Grid container justifyContent="flex-end">
-        <Button
-          disabled={!isFormComplete() || isSubmitting}
-          variant="contained"
-          color="primary"
-          onClick={() => handlePlaceOrder()}
-        >
-          {t("placeOrderButton")}
-        </Button>
-      </Grid>
-    );
-  };
   return (
-    <Box>
-      {steps.map((step, index) => {
-        const stepNumber = index + 1;
-        return (
-          <CheckoutStep
-            title={step.title}
-            stepNumber={stepNumber}
-            activeStep={activeStep}
-            setActiveStep={handleStepChange}
-            isLastStep={stepNumber === steps.length}
-            key={stepNumber}
-            cart={cart}
-            component={step.component}
-          />
-        );
+    <>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) return child;
+        return React.cloneElement(child as ReactElement<InjectedStepProps>, {
+          stepNumber: index + 1,
+          isLastStep: index + 1 === totalSteps,
+        });
       })}
-      {renderFormFooter()}
-    </Box>
+    </>
   );
-}
+};
+
+CheckoutForm.Step = <T extends object>({
+  title,
+  stepNumber,
+  component: Component,
+  componentProps,
+}: StepProps<T>) => {
+  const ctx = useContext(CheckoutContext);
+  if (!ctx) return null;
+  const { activeStep, setActiveStep, cart } = ctx;
+  const t = useTranslations("Checkout");
+  return (
+    <CheckoutStep
+      title={t(title)}
+      stepNumber={stepNumber!}
+      activeStep={activeStep}
+      setActiveStep={setActiveStep}
+      cart={cart}
+    >
+      <CheckoutStep.Header />
+      <CheckoutStep.Body
+        component={Component}
+        componentProps={componentProps}
+      />
+      <CheckoutStep.Actions />
+    </CheckoutStep>
+  );
+};
+
+CheckoutForm.Footer = () => {
+  const ctx = useContext(CheckoutContext);
+  if (!ctx) return null;
+  const { placeOrder, isSubmitting, activeStep, totalSteps } = ctx;
+  const t = useTranslations("Checkout");
+
+  const isFormComplete = () => activeStep > totalSteps;
+
+  return (
+    <Grid container justifyContent="flex-end">
+      <Button
+        disabled={!isFormComplete() || isSubmitting}
+        variant="contained"
+        color="primary"
+        onClick={placeOrder}
+      >
+        {t("placeOrderButton")}
+      </Button>
+    </Grid>
+  );
+};
+
+export default CheckoutForm;