@evenicanpm/storefront-core 1.1.0 → 1.2.0

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

@@ -1,347 +0,0 @@
-import { useTranslations } from "next-intl";
-import { CheckoutStepComponentProps } from "./checkout-step";
-import React from "react";
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { Alert, Box, Card } from "@mui/material";
-import {
-  Paragraph,
-  Small,
-} from "@evenicanpm/storefront-core/src/components/_components/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/_components/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/checkout/checkout-alt-form/safe-card-preview-data.tsx

@@ -1,36 +0,0 @@
-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/checkout/checkout-alt-form/types.ts

@@ -1,20 +0,0 @@
-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/checkout/checkout-alt-summary/cart-item.tsx

@@ -1,42 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components/_components/flex-box/index";
-import {
-  Paragraph,
-  Span,
-} from "@evenicanpm/storefront-core/src/components/_components/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/checkout/checkout-alt-summary/checkout-alt-summary.tsx

@@ -1,42 +0,0 @@
-"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/_components/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/checkout/checkout-alt-summary/index.ts

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

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

@@ -1,31 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import { FlexBetween } from "@evenicanpm/storefront-core/src/components/_components/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/confirmation/address.tsx

@@ -1,25 +0,0 @@
-import { Card } from "@mui/material";
-import { Address } from "@/api-manager/schemas/address.schema";
-import {
-  H5,
-  Paragraph,
-} from "@evenicanpm/storefront-core/src/components/_components/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/confirmation/confirmation-summary.tsx

@@ -1,55 +0,0 @@
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components/_components/flex-box";
-import { H6 } from "@evenicanpm/storefront-core/src/components/_components/Typography";
-import useCurrencyFormatter from "@/lib/currency-formatter";
-import { Card, Divider } from "@mui/material";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components/_components/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>
-  );
-}