@evenicanpm/storefront-core 1.0.1 → 1.0.3

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

@@ -0,0 +1,347 @@
+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 {
+  Paragraph,
+  Small,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+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";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import getPaymentAcceptPoint from "@/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",
+}
+
+type PaymentConnectorPostMessage = {
+  message: string;
+  targetOrigin: string;
+};
+
+type PaymentError = {
+  Code: number;
+  Message: string;
+};
+
+export default function PaymentDetails(props: CheckoutStepComponentProps) {
+  const {
+    cart,
+    setStepSubmissionState,
+    stepSubmissionState,
+    handleStepCompletion,
+    stepViewState,
+  } = props;
+  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 { mutateAsync: retrievePaymentAcceptResult } = usePaymentAcceptResult();
+  const iframeReference: React.RefObject<HTMLIFrameElement> =
+    React.useRef(null);
+  const [iframeHeight, setIFrameHeight] = React.useState<number>(1);
+  const [errorState, setErrorState] = React.useState<PaymentError[]>([]);
+  //   const [showOverlay, setShowOverlay] = React.useState(false);
+
+  const handleResultsAccessCode = React.useCallback(
+    async (accessCode: string): Promise<void> => {
+      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 onIFrameMessage = React.useCallback(
+    async (event: MessageEvent): Promise<void> => {
+      let result;
+      try {
+        if (typeof event.data !== "string") {
+          return;
+        }
+        result = JSON.parse(event.data);
+      } catch (error) {
+        console.error(error);
+        return;
+      }
+
+      if (!result || !result.type) {
+        return;
+      }
+      const { type, value } = result;
+      if (!cart.TotalAmount) {
+        return;
+      }
+
+      switch (type) {
+        case PaymentConnectorPostMessageType.Height: {
+          // The payment connector will post height after it completes 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");
+          }
+          // executeGetPaymentAcceptResults(value);
+          // Handle Payment Result
+          return;
+        }
+        case PaymentConnectorPostMessageType.CardPrefix: {
+          // Handle Card Prefix
+          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;
+        }
+        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;
+        }
+        default: {
+          return;
+        }
+        // Do nothing
+      }
+    },
+    [
+      cart.TotalAmount,
+      handleResultsAccessCode,
+      handleStepCompletion,
+      postMessageToIframe,
+      setStepSubmissionState,
+      t,
+    ],
+  );
+
+  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
+      onIFrameMessage(event);
+    },
+    [onIFrameMessage],
+  );
+
+  React.useEffect(() => {
+    window.addEventListener("message", onEvent);
+    return () => {
+      window.removeEventListener("message", onEvent);
+    };
+  }, [onEvent]);
+
+  const postSubmitMessage = React.useCallback(() => {
+    postMessageToIframe(
+      paymentConnectorMessage("true", PaymentConnectorPostMessageType.Submit),
+    );
+  }, [postMessageToIframe]);
+
+  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.
+      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]);
+
+  const paymentConnectorMessage = (
+    data: string,
+    messageType: PaymentConnectorPostMessageType,
+  ): PaymentConnectorPostMessage => {
+    return {
+      message: JSON.stringify({
+        type: messageType,
+        value: data,
+      }),
+      targetOrigin: "*",
+    };
+  };
+
+  //   const getHostName = (url: string = ""): string => {
+  //     return (
+  //       url.includes("//") ? url.split("/")[2] : url.split("/")[0]
+  //     ).toLowerCase();
+  //   };
+
+  const renderPaymentWindow = () => (
+    <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>
+  );
+
+  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();
+}

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

@@ -0,0 +1,36 @@
+import { CardPaymentAcceptResult } from "@msdyn365-commerce/retail-proxy";
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+interface SafeCardDataPreviewProps {
+  paymentAcceptResult: CardPaymentAcceptResult;
+  heading: string;
+}
+
+export const SafeCardDataPreview: React.FC<SafeCardDataPreviewProps> = ({
+  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>
+  );
+};

package/src/pages-v2/checkout/checkout-alt-form/types.ts

@@ -0,0 +1,20 @@
+export interface Address {
+  id: number;
+  name: string;
+  phone: string;
+  street1: string;
+  street2: string;
+}
+
+export interface InitialValues {
+  card: string;
+  date: string;
+  time: string;
+  address: string;
+  voucher: string;
+  cardCVC: string;
+  cardYear: string;
+  cardMonth: string;
+  cardNumber: string;
+  cardHolderName: string;
+}

package/src/pages-v2/checkout/checkout-alt-summary/cart-item.tsx

@@ -0,0 +1,42 @@
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import {
+  Paragraph,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { CartLine } from "@/api-manager/schemas/cart.schema";
+// CUSTOM UTILS LIBRARY FUNCTION
+
+// ==============================================================
+interface Props {
+  cartLine: CartLine;
+}
+// ==============================================================
+
+export default function CartItem({ cartLine }: Props) {
+  const { formatCurrency } = useCurrencyFormatter();
+  const hasDiscount = cartLine.DiscountAmount && cartLine.DiscountAmount > 0;
+  return (
+    <FlexBetween mb={1.5}>
+      <Paragraph>
+        <Span fontWeight="700">{cartLine.Quantity}</Span> x{" "}
+        {cartLine.Product?.Name}
+      </Paragraph>
+
+      <Paragraph>
+        {hasDiscount ? (
+          <s>{formatCurrency(cartLine.NetPrice || 0)}</s>
+        ) : (
+          formatCurrency(cartLine.TotalAmount || 0)
+        )}
+        {hasDiscount ? (
+          <Span color="error.500">
+            {" "}
+            {formatCurrency(cartLine.TotalAmount || 0)}
+          </Span>
+        ) : null}
+      </Paragraph>
+    </FlexBetween>
+  );
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// GLOBAL CUSTOM HOOK
+// LOCAL CUSTOM COMPONENTS
+import CartItem from "./cart-item";
+import ListItem from "./list-item";
+import { Cart } from "@/api-manager/schemas/cart.schema";
+import { useTranslations } from "next-intl";
+
+interface Props {
+  cart: Cart;
+}
+
+export default function CheckoutAltSummary({ cart }: Props) {
+  const t = useTranslations("Checkout.Summary");
+  return (
+    <div>
+      <Paragraph color="secondary.900" fontWeight={700} mb={2}>
+        {t("summaryTitle")}
+      </Paragraph>
+
+      {cart.CartLines?.map((cl) => (
+        <CartItem cartLine={cl} key={cl.LineId} />
+      ))}
+
+      <Box component={Divider} borderColor="grey.300" my={3} />
+
+      <ListItem title={t("subtotal")} value={cart.SubtotalAmount} />
+      <ListItem title={t("shipping")} value={cart.ShippingChargeAmount} />
+      <ListItem title={t("tax")} value={cart.TaxAmount} />
+      <ListItem title={t("discount")} value={cart.DiscountAmount} mb={3} />
+
+      <Box component={Divider} borderColor="grey.300" mb={1} />
+
+      <ListItem title={t("total")} value={cart.TotalAmount} color="inherit" />
+    </div>
+  );
+}

package/src/pages-v2/checkout/checkout-alt-summary/index.ts

@@ -0,0 +1 @@
+export { default as CheckoutAltSummary } from "./checkout-alt-summary";

package/src/pages-v2/checkout/checkout-alt-summary/list-item.tsx

@@ -0,0 +1,31 @@
+// GLOBAL CUSTOM COMPONENTS
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+// CUSTOM UTILS LIBRARY FUNCTION
+
+// ==============================================================
+interface Props {
+  title: string;
+  value?: number;
+  mb?: number;
+  color?: string;
+}
+// ==============================================================
+
+export default function ListItem({
+  title,
+  value,
+  mb = 0.5,
+  color = "grey.600",
+}: Props) {
+  const { formatCurrency } = useCurrencyFormatter();
+  return (
+    <FlexBetween mb={mb}>
+      <Paragraph color={color}>{title}:</Paragraph>
+      <Paragraph fontWeight="700">
+        {value ? formatCurrency(value) : "-"}
+      </Paragraph>
+    </FlexBetween>
+  );
+}

package/src/pages-v2/confirmation/address.tsx

@@ -0,0 +1,25 @@
+import { Card } from "@mui/material";
+import { Address } from "@/api-manager/schemas/address.schema";
+import {
+  H5,
+  Paragraph,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = { address: Address };
+
+export default function OrderAddress({ address }: Props) {
+  const t = useTranslations("Address");
+  return (
+    <Card sx={{ p: 3 }}>
+      <H5 mt={0} mb={2}>
+        {t("shippingTo")}
+      </H5>
+      <Paragraph>{address.Name}</Paragraph>
+      <Paragraph>{address.City}</Paragraph>
+      <Paragraph>{address.State}</Paragraph>
+      <Paragraph>{address.ZipCode}</Paragraph>
+      <Paragraph>{address.ThreeLetterISORegionName}</Paragraph>
+    </Card>
+  );
+}

package/src/pages-v2/confirmation/confirmation-summary.tsx

@@ -0,0 +1,55 @@
+import {
+  FlexBetween,
+  FlexBox,
+} from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import useCurrencyFormatter from "@/lib/currency-formatter";
+import { Card, Divider } from "@mui/material";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+
+type Props = {
+  subtotal: number;
+  shipping: number;
+  tax: number;
+  discount: number;
+  total: number;
+};
+
+export default function OrderSummary({
+  discount,
+  shipping,
+  subtotal,
+  tax,
+  total,
+}: Props) {
+  const t = useTranslations("Checkout.Summary");
+  const t2 = useTranslations("Confirmation");
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const renderListItem = (title: string, value: number) => (
+    <FlexBetween mb={1}>
+      <Paragraph color="grey.600">{title}</Paragraph>
+      <H6>{formatCurrency(value)}</H6>
+    </FlexBetween>
+  );
+  return (
+    <Card sx={{ px: 3, mb: "30px" }}>
+      <FlexBox
+        justifyContent={"center"}
+        px={3}
+        py={2}
+        borderBottom={"1px solid"}
+        borderColor={"divider"}
+      >
+        {t2("orderSummary")}
+      </FlexBox>
+      {renderListItem(t("subtotal"), subtotal)}
+      {renderListItem(t("shipping"), shipping)}
+      {renderListItem(t("tax"), tax)}
+      {renderListItem(t("discount"), discount)}
+      <Divider sx={{ mb: 1 }} />
+      {renderListItem(t("total"), total)}
+    </Card>
+  );
+}