@evenicanpm/storefront-core 1.1.0 → 1.2.1

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

@@ -2,328 +2,328 @@ import React from "react";
 import { useTranslations } from "next-intl";
 import { CheckoutStepComponentProps } from "@evenicanpm/storefront-core/src/pages-v2/checkout/checkout-alt-form/checkout-step";
 import {
-  H6,
-  Paragraph,
-  Small,
+	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 { RetrieveCardPaymentAcceptResultInput } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
-import usePaymentAcceptResult from "@/api-manager/services/cart/mutations/get-payment-accept-result";
+import usePaymentAcceptResult from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/get-payment-accept-result";
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
-import getPaymentAcceptPoint from "@/api-manager/services/cart/queries/get-payment-accept-point";
+import getPaymentAcceptPoint from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-payment-accept-point";
 
 enum PaymentConnectorPostMessageType {
-  CardPrefix = "msax-cc-cardprefix",
-  Error = "msax-cc-error",
-  Height = "msax-cc-height",
-  Result = "msax-cc-result",
-  Submit = "msax-cc-submit",
-  ExtraContext = "msax-cc-extracontext",
-  Redirect = "msax-cc-redirect",
-  Showoverlay = "msax-cc-showoverlay",
-  Hideoverlay = "msax-cc-hideoverlay",
-  ShippingAddress = "msax-shipping-address",
-  Amount = "msax-cc-amount",
+	CardPrefix = "msax-cc-cardprefix",
+	Error = "msax-cc-error",
+	Height = "msax-cc-height",
+	Result = "msax-cc-result",
+	Submit = "msax-cc-submit",
+	ExtraContext = "msax-cc-extracontext",
+	Redirect = "msax-cc-redirect",
+	Showoverlay = "msax-cc-showoverlay",
+	Hideoverlay = "msax-cc-hideoverlay",
+	ShippingAddress = "msax-shipping-address",
+	Amount = "msax-cc-amount",
 }
 
 type PaymentConnectorPostMessage = {
-  message: string;
-  targetOrigin: string;
+	message: string;
+	targetOrigin: string;
 };
 
 type PaymentError = {
-  Code: number;
-  Message: string;
+	Code: number;
+	Message: string;
 };
 
 type PaymentDetailsCompound = React.FC<CheckoutStepComponentProps> & {
-  Preview: React.FC<{ paymentAcceptResult: CardPaymentAcceptResult | null }>;
-  Form: React.FC<{
-    iframeReference: React.RefObject<HTMLIFrameElement>;
-    iframeHeight: number;
-    errorState: PaymentError[];
-    paymentAcceptPointData: any;
-  }>;
+	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 {
+		cart,
+		setStepSubmissionState,
+		stepSubmissionState,
+		handleStepCompletion,
+		stepViewState,
+		children,
+	} = props;
 
-  const [paymentAcceptResult, setPaymentAcceptResult] =
-    React.useState<CardPaymentAcceptResult | null>(null);
+	const [paymentAcceptResult, setPaymentAcceptResult] =
+		React.useState<CardPaymentAcceptResult | null>(null);
 
-  const t = useTranslations("Checkout.Payment");
-  const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData({
-    cartId: cart.Id,
-    totalAmount: cart.TotalAmount ?? 0,
-    origin:
-      (typeof window !== "undefined" && window.location.origin) || undefined,
-    isClient: typeof window !== "undefined",
-  });
+	const t = useTranslations("Checkout.Payment");
+	const { data: paymentAcceptPointData } = getPaymentAcceptPoint.useData({
+		cartId: cart.Id,
+		totalAmount: cart.TotalAmount ?? 0,
+		origin:
+			(typeof window !== "undefined" && window.location.origin) || undefined,
+		isClient: typeof window !== "undefined",
+	});
 
-  const { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
-  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 { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
+	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 paymentConnectorMessage = (
-    data: string,
-    messageType: PaymentConnectorPostMessageType,
-  ): PaymentConnectorPostMessage => ({
-    message: JSON.stringify({ type: messageType, value: data }),
-    targetOrigin: "*",
-  });
+	const paymentConnectorMessage = (
+		data: string,
+		messageType: PaymentConnectorPostMessageType,
+	): PaymentConnectorPostMessage => ({
+		message: JSON.stringify({ type: messageType, value: data }),
+		targetOrigin: "*",
+	});
 
-  const handleResultsAccessCode = React.useCallback(
-    async (accessCode: string) => {
-      const input: RetrieveCardPaymentAcceptResultInput = {
-        cartId: cart.Id,
-        resultAccessCode: accessCode,
-        settings: {
-          PaymentConnectorId: paymentAcceptPointData?.PaymentConnectorId,
-          ReturnUrl: window.location.href,
-        },
-      };
-      const paymentAcceptResultData = await retrievePaymentAcceptResult(input);
-      setPaymentAcceptResult(paymentAcceptResultData);
-    },
-    [
-      cart?.Id,
-      paymentAcceptPointData?.PaymentConnectorId,
-      retrievePaymentAcceptResult,
-    ],
-  );
+	const handleResultsAccessCode = React.useCallback(
+		async (accessCode: string) => {
+			const input: RetrieveCardPaymentAcceptResultInput = {
+				cartId: cart.Id,
+				resultAccessCode: accessCode,
+				settings: {
+					PaymentConnectorId: paymentAcceptPointData?.PaymentConnectorId,
+					ReturnUrl: window.location.href,
+				},
+			};
+			const paymentAcceptResultData = await retrievePaymentAcceptResult(input);
+			setPaymentAcceptResult(paymentAcceptResultData);
+		},
+		[
+			cart?.Id,
+			paymentAcceptPointData?.PaymentConnectorId,
+			retrievePaymentAcceptResult,
+		],
+	);
 
-  const postMessageToIframe = React.useCallback(
-    (messageParameters: PaymentConnectorPostMessage) => {
-      iframeReference.current?.contentWindow?.postMessage(
-        messageParameters.message,
-        messageParameters.targetOrigin,
-      );
-    },
-    [],
-  );
+	const postMessageToIframe = React.useCallback(
+		(messageParameters: PaymentConnectorPostMessage) => {
+			iframeReference.current?.contentWindow?.postMessage(
+				messageParameters.message,
+				messageParameters.targetOrigin,
+			);
+		},
+		[],
+	);
 
-  const onIFrameMessage = React.useCallback(
-    async (event: MessageEvent) => {
-      let result;
-      try {
-        if (typeof event.data !== "string") return;
-        result = JSON.parse(event.data);
-      } catch (error) {
-        console.error(error);
-        return;
-      }
+	const onIFrameMessage = React.useCallback(
+		async (event: MessageEvent) => {
+			let result;
+			try {
+				if (typeof event.data !== "string") return;
+				result = JSON.parse(event.data);
+			} catch (error) {
+				console.error(error);
+				return;
+			}
 
-      if (!result?.type || !cart.TotalAmount) return;
-      const { type, value } = result;
+			if (!result?.type || !cart.TotalAmount) return;
+			const { type, value } = result;
 
-      switch (type) {
-        case PaymentConnectorPostMessageType.Height: {
-          // Payment connector posts height after initialization
-          setIFrameHeight(value as number);
-          postMessageToIframe(
-            paymentConnectorMessage(
-              cart.TotalAmount.toString(),
-              PaymentConnectorPostMessageType.Amount,
-            ),
-          );
-          return;
-        }
-        case PaymentConnectorPostMessageType.Result: {
-          try {
-            await handleResultsAccessCode(value);
-            setStepSubmissionState("idle");
-            handleStepCompletion();
-            setErrorState([]);
-          } catch (error) {
-            console.error(error);
-            setErrorState([{ Code: 500, Message: t("cardErrorMessage") }]);
-            setStepSubmissionState("error");
-          }
-          return;
-        }
-        case PaymentConnectorPostMessageType.Error: {
-          if (
-            Array.isArray(value) &&
-            value.length > 0 &&
-            "Code" in value[0] &&
-            "Message" in value[0]
-          ) {
-            setErrorState(value as PaymentError[]);
-            setStepSubmissionState("error");
-          }
-          return;
-        }
-        // Other message types intentionally left unimplemented
-        default: {
-          return;
-        }
-      }
-    },
-    [
-      cart.TotalAmount,
-      handleResultsAccessCode,
-      handleStepCompletion,
-      postMessageToIframe,
-      setStepSubmissionState,
-      t,
-    ],
-  );
+			switch (type) {
+				case PaymentConnectorPostMessageType.Height: {
+					// Payment connector posts height after initialization
+					setIFrameHeight(value as number);
+					postMessageToIframe(
+						paymentConnectorMessage(
+							cart.TotalAmount.toString(),
+							PaymentConnectorPostMessageType.Amount,
+						),
+					);
+					return;
+				}
+				case PaymentConnectorPostMessageType.Result: {
+					try {
+						await handleResultsAccessCode(value);
+						setStepSubmissionState("idle");
+						handleStepCompletion();
+						setErrorState([]);
+					} catch (error) {
+						console.error(error);
+						setErrorState([{ Code: 500, Message: t("cardErrorMessage") }]);
+						setStepSubmissionState("error");
+					}
+					return;
+				}
+				case PaymentConnectorPostMessageType.Error: {
+					if (
+						Array.isArray(value) &&
+						value.length > 0 &&
+						"Code" in value[0] &&
+						"Message" in value[0]
+					) {
+						setErrorState(value as PaymentError[]);
+						setStepSubmissionState("error");
+					}
+					return;
+				}
+				// Other message types intentionally left unimplemented
+				default: {
+					return;
+				}
+			}
+		},
+		[
+			cart.TotalAmount,
+			handleResultsAccessCode,
+			handleStepCompletion,
+			postMessageToIframe,
+			setStepSubmissionState,
+			t,
+		],
+	);
 
-  const onEvent = React.useCallback(
-    (event: MessageEvent) => {
-      // TODO: Security check -> validate event.origin matches expected
-      onIFrameMessage(event);
-    },
-    [onIFrameMessage],
-  );
+	const onEvent = React.useCallback(
+		(event: MessageEvent) => {
+			// TODO: Security check -> validate event.origin matches expected
+			onIFrameMessage(event);
+		},
+		[onIFrameMessage],
+	);
 
-  React.useEffect(() => {
-    window.addEventListener("message", onEvent);
-    return () => window.removeEventListener("message", onEvent);
-  }, [onEvent]);
+	React.useEffect(() => {
+		window.addEventListener("message", onEvent);
+		return () => window.removeEventListener("message", onEvent);
+	}, [onEvent]);
 
-  const postSubmitMessage = React.useCallback(() => {
-    postMessageToIframe(
-      paymentConnectorMessage("true", PaymentConnectorPostMessageType.Submit),
-    );
-  }, [postMessageToIframe]);
+	const postSubmitMessage = React.useCallback(() => {
+		postMessageToIframe(
+			paymentConnectorMessage("true", PaymentConnectorPostMessageType.Submit),
+		);
+	}, [postMessageToIframe]);
 
-  React.useEffect(() => {
-    if (stepSubmissionState === "submitting") {
-      // INFO: This listens for `submitting` state, then posts submit message to iframe
-      postSubmitMessage();
-    }
-  }, [postSubmitMessage, stepSubmissionState]);
+	React.useEffect(() => {
+		if (stepSubmissionState === "submitting") {
+			// INFO: This listens for `submitting` state, then posts submit message to iframe
+			postSubmitMessage();
+		}
+	}, [postSubmitMessage, stepSubmissionState]);
 
-  React.useEffect(() => {
-    if (!paymentAcceptPointData || stepViewState !== "active") return;
-    if (
-      !paymentAcceptPointData.AcceptPageUrl?.length &&
-      paymentAcceptPointData.AcceptPageContent?.length &&
-      iframeReference.current
-    ) {
-      const innerDocument = iframeReference.current.contentDocument;
-      if (innerDocument) {
-        innerDocument.open();
-        innerDocument.write(paymentAcceptPointData.AcceptPageContent);
-        innerDocument.close();
-      }
-    }
-  }, [paymentAcceptPointData, stepViewState]);
+	React.useEffect(() => {
+		if (!paymentAcceptPointData || stepViewState !== "active") return;
+		if (
+			!paymentAcceptPointData.AcceptPageUrl?.length &&
+			paymentAcceptPointData.AcceptPageContent?.length &&
+			iframeReference.current
+		) {
+			const innerDocument = iframeReference.current.contentDocument;
+			if (innerDocument) {
+				innerDocument.open();
+				innerDocument.write(paymentAcceptPointData.AcceptPageContent);
+				innerDocument.close();
+			}
+		}
+	}, [paymentAcceptPointData, stepViewState]);
 
-  if (stepViewState === "pending") return null;
+	if (stepViewState === "pending") return null;
 
-  return (
-    <>
-      {children ? (
-        children
-      ) : stepViewState === "preview" ? (
-        <PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
-      ) : (
-        <PaymentDetails.Form
-          iframeReference={iframeReference}
-          iframeHeight={iframeHeight}
-          errorState={errorState}
-          paymentAcceptPointData={paymentAcceptPointData}
-        />
-      )}
-    </>
-  );
+	return (
+		<>
+			{children ? (
+				children
+			) : stepViewState === "preview" ? (
+				<PaymentDetails.Preview paymentAcceptResult={paymentAcceptResult} />
+			) : (
+				<PaymentDetails.Form
+					iframeReference={iframeReference}
+					iframeHeight={iframeHeight}
+					errorState={errorState}
+					paymentAcceptPointData={paymentAcceptPointData}
+				/>
+			)}
+		</>
+	);
 };
 
 PaymentDetails.Preview = ({ paymentAcceptResult }) => {
-  const t = useTranslations("Checkout.Payment");
-  if (!paymentAcceptResult) return null;
+	const t = useTranslations("Checkout.Payment");
+	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>
-  );
+	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,
+	iframeReference,
+	iframeHeight,
+	errorState,
+	paymentAcceptPointData,
 }) => {
-  const t = useTranslations("Checkout.Payment");
+	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;
+	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 && (
-        <iframe
-          title={"Payment frame"}
-          src={paymentAcceptPointData.AcceptPageUrl || undefined}
-          ref={iframeReference}
-          sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
-          height={iframeHeight}
-          width={"100%"}
-          style={{ border: "none" }}
-        />
-      )}
-      {renderErrorMessages()}
-      {/* 
+	return (
+		<Box sx={{ m: 2 }}>
+			<H6 sx={{ mb: 2 }}>{t("cardFormHeader")}</H6>
+			{paymentAcceptPointData && (
+				<iframe
+					title={"Payment frame"}
+					src={paymentAcceptPointData.AcceptPageUrl || undefined}
+					ref={iframeReference}
+					sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
+					height={iframeHeight}
+					width={"100%"}
+					style={{ border: "none" }}
+				/>
+			)}
+			{renderErrorMessages()}
+			{/* 
       <Button variant={"contained"} onClick={postSubmitMessage}>
         {t("cardFormSaveButtonText")}
       </Button> 
       */}
-    </Box>
-  );
+		</Box>
+	);
 };
 
 export default PaymentDetails;

package/src/pages-v2/checkout/checkout-alt-form/steps/payment/safe-card-preview-data.tsx

@@ -3,34 +3,34 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 
 interface SafeCardDataPreviewProps {
-  paymentAcceptResult: CardPaymentAcceptResult;
-  heading: string;
+	paymentAcceptResult: CardPaymentAcceptResult;
+	heading: string;
 }
 
 export const SafeCardDataPreview: React.FC<SafeCardDataPreviewProps> = ({
-  paymentAcceptResult,
-  heading,
+	paymentAcceptResult,
+	heading,
 }) => {
-  return (
-    <Box>
-      <Typography variant={"h6"} sx={{ mb: 2 }}>
-        {heading}
-      </Typography>
-      <Typography variant={"body2"}>
-        {paymentAcceptResult.TokenizedPaymentCard?.NameOnCard}
-      </Typography>
-      <Typography variant={"body2"}>
-        {paymentAcceptResult.TokenizedPaymentCard?.CardTypeId}
-      </Typography>
-      <Typography variant={"body2"}>
-        {
-          paymentAcceptResult.TokenizedPaymentCard?.CardTokenInfo
-            ?.MaskedCardNumber
-        }
-      </Typography>
-      <Typography
-        variant={"body2"}
-      >{`${paymentAcceptResult.TokenizedPaymentCard?.ExpirationMonth}/${paymentAcceptResult.TokenizedPaymentCard?.ExpirationYear}`}</Typography>
-    </Box>
-  );
+	return (
+		<Box>
+			<Typography variant={"h6"} sx={{ mb: 2 }}>
+				{heading}
+			</Typography>
+			<Typography variant={"body2"}>
+				{paymentAcceptResult.TokenizedPaymentCard?.NameOnCard}
+			</Typography>
+			<Typography variant={"body2"}>
+				{paymentAcceptResult.TokenizedPaymentCard?.CardTypeId}
+			</Typography>
+			<Typography variant={"body2"}>
+				{
+					paymentAcceptResult.TokenizedPaymentCard?.CardTokenInfo
+						?.MaskedCardNumber
+				}
+			</Typography>
+			<Typography
+				variant={"body2"}
+			>{`${paymentAcceptResult.TokenizedPaymentCard?.ExpirationMonth}/${paymentAcceptResult.TokenizedPaymentCard?.ExpirationYear}`}</Typography>
+		</Box>
+	);
 };