@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/pages-v2/checkout/checkout-alt-form/{payment-details.tsx → steps/payment/payment-details.tsx}

@@ -1,12 +1,12 @@
-import { useTranslations } from "next-intl";
-import { CheckoutStepComponentProps } from "./checkout-step";
 import React from "react";
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { Alert, Box, Card } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 import {
+  H6,
   Paragraph,
   Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { Alert, Box, Card } from "@mui/material";
 import { RetrieveCardPaymentAcceptResultInput } from "@/api-manager/schemas/cart.schema";
 import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
 import usePaymentAcceptResult from "@/api-manager/services/cart/mutations/get-payment-accept-result";
@@ -37,16 +37,29 @@ type PaymentError = {
   Message: string;
 };
 
-export default function PaymentDetails(props: CheckoutStepComponentProps) {
+type PaymentDetailsCompound = React.FC<CheckoutStepComponentProps> & {
+  Preview: React.FC<{ paymentAcceptResult: CardPaymentAcceptResult | null }>;
+  Form: React.FC<{
+    iframeReference: React.RefObject<HTMLIFrameElement>;
+    iframeHeight: number;
+    errorState: PaymentError[];
+    paymentAcceptPointData: any;
+  }>;
+};
+
+const PaymentDetails: PaymentDetailsCompound = (props) => {
   const {
     cart,
     setStepSubmissionState,
     stepSubmissionState,
     handleStepCompletion,
     stepViewState,
+    children,
   } = props;
+
   const [paymentAcceptResult, setPaymentAcceptResult] =
     React.useState<CardPaymentAcceptResult | null>(null);
+
   const t = useTranslations("Checkout.Payment");
   const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData({
     cartId: cart.Id,
@@ -57,14 +70,21 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
   });
 
   const { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
-  const iframeReference: React.RefObject<HTMLIFrameElement> =
-    React.useRef(null);
+  const iframeReference = React.useRef<HTMLIFrameElement>(null);
   const [iframeHeight, setIFrameHeight] = React.useState<number>(1);
   const [errorState, setErrorState] = React.useState<PaymentError[]>([]);
-  //   const [showOverlay, setShowOverlay] = React.useState(false);
+  // const [showOverlay, setShowOverlay] = React.useState(false);
+
+  const paymentConnectorMessage = (
+    data: string,
+    messageType: PaymentConnectorPostMessageType,
+  ): PaymentConnectorPostMessage => ({
+    message: JSON.stringify({ type: messageType, value: data }),
+    targetOrigin: "*",
+  });
 
   const handleResultsAccessCode = React.useCallback(
-    async (accessCode: string): Promise<void> => {
+    async (accessCode: string) => {
       const input: RetrieveCardPaymentAcceptResultInput = {
         cartId: cart.Id,
         resultAccessCode: accessCode,
@@ -94,29 +114,22 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
   );
 
   const onIFrameMessage = React.useCallback(
-    async (event: MessageEvent): Promise<void> => {
+    async (event: MessageEvent) => {
       let result;
       try {
-        if (typeof event.data !== "string") {
-          return;
-        }
+        if (typeof event.data !== "string") return;
         result = JSON.parse(event.data);
       } catch (error) {
         console.error(error);
         return;
       }
 
-      if (!result || !result.type) {
-        return;
-      }
+      if (!result?.type || !cart.TotalAmount) return;
       const { type, value } = result;
-      if (!cart.TotalAmount) {
-        return;
-      }
 
       switch (type) {
         case PaymentConnectorPostMessageType.Height: {
-          // The payment connector will post height after it completes initialization
+          // Payment connector posts height after initialization
           setIFrameHeight(value as number);
           postMessageToIframe(
             paymentConnectorMessage(
@@ -137,12 +150,6 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
             setErrorState([{ Code: 500, Message: t("cardErrorMessage") }]);
             setStepSubmissionState("error");
           }
-          // executeGetPaymentAcceptResults(value);
-          // Handle Payment Result
-          return;
-        }
-        case PaymentConnectorPostMessageType.CardPrefix: {
-          // Handle Card Prefix
           return;
         }
         case PaymentConnectorPostMessageType.Error: {
@@ -157,24 +164,10 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
           }
           return;
         }
-        case PaymentConnectorPostMessageType.Redirect: {
-          // Handle Redirect (Not used in this implementation)
-          return;
-        }
-        case PaymentConnectorPostMessageType.Showoverlay: {
-          // Handle Show overlay (used for PP)
-          // setShowOverlay(true);
-          return;
-        }
-        case PaymentConnectorPostMessageType.Hideoverlay: {
-          // Hide Overlay
-          // setShowOverlay(false);
-          return;
-        }
+        // Other message types intentionally left unimplemented
         default: {
           return;
         }
-        // Do nothing
       }
     },
     [
@@ -189,11 +182,7 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
 
   const onEvent = React.useCallback(
     (event: MessageEvent) => {
-      // const requestHost = window.location.origin;
-      // const messageHost = getHostName(paymentAcceptPointData?.MessageOrigin);
-      // Important: security check
-      // check actual origin matches with expected origin
-      //Needs to be put in
+      // TODO: Security check -> validate event.origin matches expected
       onIFrameMessage(event);
     },
     [onIFrameMessage],
@@ -201,9 +190,7 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
 
   React.useEffect(() => {
     window.addEventListener("message", onEvent);
-    return () => {
-      window.removeEventListener("message", onEvent);
-    };
+    return () => window.removeEventListener("message", onEvent);
   }, [onEvent]);
 
   const postSubmitMessage = React.useCallback(() => {
@@ -214,18 +201,13 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
 
   React.useEffect(() => {
     if (stepSubmissionState === "submitting") {
-      // * INFO: This will be confusing. This listens for the stepSubmissionState to change to 'submitting' and then calls the postSubmitMessage function.
-      // * INFO: The postSubmitMessage function will then call the postMessageToIframe function with the paymentConnectorMessage function as an argument.
-      // * INFO: The paymentConnectorMessage function will return an object with a message and targetOrigin property.
-      // * INFO: We have to listen for an event of that message which will tell us what to do with the payment. It's a chain of listeners with no function returns.
+      // INFO: This listens for `submitting` state, then posts submit message to iframe
       postSubmitMessage();
     }
   }, [postSubmitMessage, stepSubmissionState]);
 
   React.useEffect(() => {
-    if (!paymentAcceptPointData || stepViewState !== "active") {
-      return;
-    }
+    if (!paymentAcceptPointData || stepViewState !== "active") return;
     if (
       !paymentAcceptPointData.AcceptPageUrl?.length &&
       paymentAcceptPointData.AcceptPageContent?.length &&
@@ -240,26 +222,87 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
     }
   }, [paymentAcceptPointData, stepViewState]);
 
-  const paymentConnectorMessage = (
-    data: string,
-    messageType: PaymentConnectorPostMessageType,
-  ): PaymentConnectorPostMessage => {
-    return {
-      message: JSON.stringify({
-        type: messageType,
-        value: data,
-      }),
-      targetOrigin: "*",
-    };
-  };
+  if (stepViewState === "pending") return null;
+
+  return (
+    <>
+      {children ? (
+        children
+      ) : stepViewState === "preview" ? (
+        <PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
+      ) : (
+        <PaymentDetails.Form
+          iframeReference={iframeReference}
+          iframeHeight={iframeHeight}
+          errorState={errorState}
+          paymentAcceptPointData={paymentAcceptPointData}
+        />
+      )}
+    </>
+  );
+};
 
-  //   const getHostName = (url: string = ""): string => {
-  //     return (
-  //       url.includes("//") ? url.split("/")[2] : url.split("/")[0]
-  //     ).toLowerCase();
-  //   };
+PaymentDetails.Preview = ({ paymentAcceptResult }) => {
+  const t = useTranslations("Checkout.Payment");
+  if (!paymentAcceptResult) return null;
 
-  const renderPaymentWindow = () => (
+  return (
+    <FlexBox flexDirection={"column"} sx={{ m: 2 }}>
+      <H6 sx={{ mb: 2 }}>{t("cardPaymentDetails")}</H6>
+      <Card
+        sx={{
+          padding: 2,
+          boxShadow: "none",
+          cursor: "pointer",
+          border: "1px solid",
+          position: "relative",
+          backgroundColor: "grey.100",
+          borderColor: "secondary.main",
+        }}
+      >
+        <Paragraph>
+          {paymentAcceptResult.TokenizedPaymentCard?.NameOnCard}
+        </Paragraph>
+        <Paragraph>
+          {paymentAcceptResult.TokenizedPaymentCard?.CardTypeId}
+        </Paragraph>
+        <Paragraph>
+          {
+            paymentAcceptResult.TokenizedPaymentCard?.CardTokenInfo
+              ?.MaskedCardNumber
+          }
+        </Paragraph>
+        <Paragraph>
+          {`${paymentAcceptResult.TokenizedPaymentCard?.ExpirationMonth}/${paymentAcceptResult.TokenizedPaymentCard?.ExpirationYear}`}
+        </Paragraph>
+      </Card>
+    </FlexBox>
+  );
+};
+
+PaymentDetails.Form = ({
+  iframeReference,
+  iframeHeight,
+  errorState,
+  paymentAcceptPointData,
+}) => {
+  const t = useTranslations("Checkout.Payment");
+
+  const renderErrorMessages = () =>
+    errorState.length > 0 ? (
+      <Alert severity="error">
+        <Paragraph color={"error"} fontWeight={"bold"}>
+          {t("errorMessage")}
+        </Paragraph>
+        {errorState.map((message, index) => (
+          <Small color={"error"} key={`${message.Code}-${index}`}>
+            {message.Message}
+          </Small>
+        ))}
+      </Alert>
+    ) : null;
+
+  return (
     <Box sx={{ m: 2 }}>
       <H6 sx={{ mb: 2 }}>{t("cardFormHeader")}</H6>
       {paymentAcceptPointData && (
@@ -274,74 +317,13 @@ export default function PaymentDetails(props: CheckoutStepComponentProps) {
         />
       )}
       {renderErrorMessages()}
-      {/* <Button variant={"contained"} onClick={postSubmitMessage}>
+      {/* 
+      <Button variant={"contained"} onClick={postSubmitMessage}>
         {t("cardFormSaveButtonText")}
-      </Button> */}
+      </Button> 
+      */}
     </Box>
   );
+};
 
-  const renderErrorMessages = () =>
-    errorState.length > 0 ? (
-      <Alert severity="error">
-        <Paragraph color={"error"} fontWeight={"bold"}>
-          {t("errorMessage")}
-        </Paragraph>
-        {errorState.map((message, index) => (
-          <Small color={"error"} key={`${message.Code}-${index}`}>
-            {message.Message}
-          </Small>
-        ))}
-      </Alert>
-    ) : undefined;
-
-  // const handleChangeButtonClick = () => {
-  //   getNewPaymentAcceptPoint();
-  // };
-
-  const renderSafeCardData = () => {
-    if (!paymentAcceptResult) {
-      return null;
-    }
-    return (
-      <FlexBox flexDirection={"column"} sx={{ m: 2 }}>
-        <H6 sx={{ mb: 2 }}>{t("cardPaymentDetails")}</H6>
-        <Card
-          sx={{
-            padding: 2,
-            boxShadow: "none",
-            cursor: "pointer",
-            border: "1px solid",
-            position: "relative",
-            backgroundColor: "grey.100",
-            borderColor: "secondary.main",
-          }}
-        >
-          <Paragraph>
-            {paymentAcceptResult.TokenizedPaymentCard?.NameOnCard}
-          </Paragraph>
-          <Paragraph>
-            {paymentAcceptResult.TokenizedPaymentCard?.CardTypeId}
-          </Paragraph>
-          <Paragraph>
-            {
-              paymentAcceptResult.TokenizedPaymentCard?.CardTokenInfo
-                ?.MaskedCardNumber
-            }
-          </Paragraph>
-          <Paragraph>
-            {`${paymentAcceptResult.TokenizedPaymentCard?.ExpirationMonth}/${paymentAcceptResult.TokenizedPaymentCard?.ExpirationYear}`}
-          </Paragraph>
-        </Card>
-      </FlexBox>
-    );
-  };
-
-  if (stepViewState === "pending") {
-    return null;
-  }
-  if (stepViewState === "preview") {
-    return renderSafeCardData();
-  }
-  <pre>{stepViewState}</pre>;
-  return renderPaymentWindow();
-}
+export default PaymentDetails;

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

@@ -6,8 +6,8 @@ import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import { FormikErrors, FormikTouched } from "formik";
 import { format } from "date-fns";
-import Heading from "./heading";
-import { InitialValues } from "./types";
+import StepHeading from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/step-heading";
+import { InitialValues } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/types";
 
 // ==============================================================
 interface Props {
@@ -60,7 +60,7 @@ export default function DeliveryDate({
 
   return (
     <Card sx={{ p: 3, mb: 3 }}>
-      <Heading
+      <StepHeading
         number={1}
         title="Delivery Date and Time"
         stepViewState={"active"}

package/src/pages-v2/checkout/checkout-alt-form/{delivery-options.tsx → steps/shipping/delivery-options.tsx}

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Box,
   FormControl,
@@ -20,46 +21,63 @@ import {
   Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import useCurrencyFormatter from "@/lib/currency-formatter";
-import { CheckoutStepComponentProps } from "./checkout-step";
+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 React from "react";
 import useUpdateCartLineDeliveryMode from "@/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";
 
-export default function DeliveryOptions(props: CheckoutStepComponentProps) {
-  const { cart, stepViewState, stepSubmissionState, setStepSubmissionState } =
-    props;
+type DeliveryOptionsCompound = React.FC<CheckoutStepComponentProps> & {
+  Preview: React.FC<PreviewProps>;
+  Form: React.FC<FormProps>;
+};
+
+type PreviewProps = {
+  deliveryOptions: DeliveryOption[];
+  selectedOption: string | null;
+};
+
+type FormProps = {
+  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<boolean>(false);
+  const [deliveryUnavailable, setDeliveryUnavailable] = React.useState(false);
   const [selectedOption, setSelectedOption] = React.useState<string | null>(
     null,
   );
   const [currentShippingAddress, setCurrentShippingAddress] =
     React.useState<Address | null>(null);
-  const t = useTranslations("Checkout.DeliveryOptions");
-  const { formatCurrency } = useCurrencyFormatter();
+
   const { mutateAsync: getDeliveryOptions } = useGetDeliveryOptions();
   const { mutateAsync: updateDeliveryOption } = useUpdateCartLineDeliveryMode();
   const { mutate: removeDeliveryOption } = useRemoveCartLineDeliveryMode();
 
   const handleUpdateDeliveryOption = React.useCallback(() => {
-    const cartLineDeliverySpecification: LineDeliverySpecification[] = [];
     if (cart.CartLines && selectedOption) {
-      for (const cl of cart.CartLines) {
-        const lineSpec: LineDeliverySpecification = {
+      const cartLineDeliverySpecification: LineDeliverySpecification[] =
+        cart.CartLines.map((cl) => ({
           LineId: cl.LineId,
           DeliverySpecification: {
             DeliveryModeId: selectedOption,
             DeliveryPreferenceTypeValue: DeliveryPreferenceType.ShipToAddress,
             DeliveryAddress: cart.ShippingAddress,
           },
-        };
-        cartLineDeliverySpecification.push(lineSpec);
-      }
+        }));
+
       updateDeliveryOption({ cartId: cart.Id, cartLineDeliverySpecification })
         .then(() => {
           props.handleStepCompletion();
@@ -78,6 +96,7 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
     props,
     setStepSubmissionState,
   ]);
+
   React.useEffect(() => {
     if (stepSubmissionState === "submitting") {
       handleUpdateDeliveryOption();
@@ -88,7 +107,7 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
     if (stepViewState === "active") {
       const cartLines = cloneDeep(cart.CartLines);
       if (cartLines.map((cl) => cl.DeliveryMode).some((mode) => mode !== "")) {
-        removeDeliveryOption({ cart: cart });
+        removeDeliveryOption({ cart });
       }
     }
   }, [cart, removeDeliveryOption, stepViewState]);
@@ -96,9 +115,7 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
   React.useEffect(() => {
     if (currentShippingAddress) {
       const { Id, CartLines } = cart;
-      const cartLineIds = CartLines.map((cl) => cl.LineId).filter(
-        (line) => line !== undefined,
-      );
+      const cartLineIds = CartLines.map((cl) => cl.LineId).filter(Boolean);
       getDeliveryOptions({
         cartId: Id,
         cartLineIds,
@@ -112,23 +129,69 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
 
   React.useEffect(() => {
     if (cart.ShippingAddress) {
-      if (currentShippingAddress) {
-        //Deep equals the address
-        if (
-          JSON.stringify(currentShippingAddress) ===
+      if (
+        currentShippingAddress &&
+        JSON.stringify(currentShippingAddress) ===
           JSON.stringify(cart.ShippingAddress)
-        ) {
-          return;
-        }
+      ) {
+        return;
       }
-      // If the address has changed, change the local state which will trigger the effect to get the delivery options
       setCurrentShippingAddress(cart.ShippingAddress);
     }
   }, [cart.ShippingAddress, currentShippingAddress]);
 
-  const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedOption(event.target.value);
+  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>
+  );
+};
+
+DeliveryOptions.Form = ({
+  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>
@@ -136,23 +199,6 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
     </Grid>
   );
 
-  if (stepViewState === "pending") {
-    return;
-  }
-
-  if (stepViewState === "preview") {
-    const deliveryOption = deliveryOptions.find(
-      (dlv) => dlv.Code === selectedOption,
-    );
-    if (deliveryOption) {
-      return (
-        <Box mt={2}>
-          <H4>{deliveryOption.Description}</H4>
-          <Span>{formatCurrency(deliveryOption.TotalChargeAmount || 0)}</Span>
-        </Box>
-      );
-    }
-  }
   return (
     <Box mb={3.5}>
       <Grid container spacing={1}>
@@ -164,14 +210,13 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
                   {t("noDeliveryOptionsFound")}
                 </Paragraph>
               )}
-              {/* <FormLabel id={"deliveryOptions"}>{t("deliveryOptionsLabel")}</FormLabel> */}
               <RadioGroup
                 aria-labelledby={"deliveryOptions"}
                 name={"Delivery-Options"}
-                onChange={handleOptionChange}
+                onChange={(event) => onChange(event.target.value)}
                 value={selectedOption}
               >
-                {deliveryOptions?.map((dlv) => (
+                {deliveryOptions.map((dlv) => (
                   <FormControlLabel
                     sx={{ ".MuiFormControlLabel-label": { width: "100%" } }}
                     key={dlv.Code}
@@ -187,4 +232,6 @@ export default function DeliveryOptions(props: CheckoutStepComponentProps) {
       </Grid>
     </Box>
   );
-}
+};
+
+export default DeliveryOptions;