mainstack-payments 0.0.0

package/src/components/PaystackPaymentErrorModal.tsx

@@ -0,0 +1,120 @@
+/** @format */
+import {
+  Heading,
+  Img,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import SorryEmoji from "assets/images/tired-emoji.png";
+import BrandDrawer from "components/DrawerModal";
+import { Button } from "mainstack-design-system";
+
+interface PaystackPaymentErrorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+const PaystackPaymentErrorModal = ({
+  isOpen,
+  onClose,
+}: PaystackPaymentErrorModalProps) => {
+  const [isLargeScreen] = useMediaQuery("(min-width: 768px)");
+
+  return (
+    <>
+      {isLargeScreen ? (
+        <Modal
+          isCentered
+          isOpen={isOpen}
+          onClose={onClose}
+          motionPreset="slideInBottom"
+          size={"lg"}
+        >
+          <ModalOverlay bg="rgba(219, 222, 229, 0.6)" />
+          <ModalContent bg="#fff" borderRadius="20px" p="32px">
+            <ModalHeader p="0" mb={"12px"}>
+              <Img
+                src={SorryEmoji}
+                width={"32px"}
+                height={"32px"}
+                mx="auto"
+                mb="20px"
+              />
+              <Heading
+                fontSize={"24px"}
+                lineHeight={"32px"}
+                letterSpacing={"-0.48px"}
+                textAlign={"center"}
+              >
+                Unable to process purchase at this time
+              </Heading>
+            </ModalHeader>
+            <ModalBody p="0">
+              <Text
+                mt={"4px"}
+                mb={"16px"}
+                fontSize={"16px"}
+                fontWeight={400}
+                color={"#4D5760"}
+                lineHeight="160%"
+                letterSpacing={"-0.16px"}
+                textAlign={"center"}
+              >
+                Apologies, but our payment processor is currently unavailable
+                for processing payments in this currency. Please try again later
+                or consider using other currencies for your purchase.
+              </Text>
+            </ModalBody>
+            <ModalFooter p="0" mt="32px">
+              <Button
+                label="Okay"
+                size="medium"
+                variant="tertiary"
+                width="100%"
+                onClick={onClose}
+              />
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      ) : (
+        <BrandDrawer isOpen={isOpen} onClose={onClose}>
+          <Img src={SorryEmoji} width={"24px"} height={"24px"} />
+          <Heading
+            fontSize={"18px"}
+            lineHeight={"20px"}
+            letterSpacing={"-0.36px"}
+          >
+            Unable to process purchase at this time
+          </Heading>
+          <Text
+            mt={"4px"}
+            mb={"28px"}
+            fontSize={"14px"}
+            fontWeight={400}
+            color={"#4D5760"}
+            lineHeight="160%"
+            letterSpacing={"-0.14px"}
+          >
+            Apologies, but our payment processor is currently unavailable for
+            processing payments in this currency. Please try again later or
+            consider using other currencies for your purchase.
+          </Text>
+          <Button
+            label="Okay"
+            size="medium"
+            variant="tertiary"
+            width="100%"
+            onClick={onClose}
+          />
+        </BrandDrawer>
+      )}
+    </>
+  );
+};
+
+export default PaystackPaymentErrorModal;

package/src/components/PaystackPaymentModal.tsx

@@ -0,0 +1,120 @@
+/** @format */
+
+import { useState, useEffect, useRef } from "react";
+import { Box, useMediaQuery } from "@chakra-ui/react";
+import { CancelFilledIcon } from "mainstack-design-system";
+import { PAYSTACK_REDIRECT_EVENT } from "constants/index";
+
+interface PaystackPaymentModalProps {
+  isOpen: boolean;
+  src: string;
+  handleCloseModal: () => void;
+}
+
+export const PaystackPaymentModal = ({
+  src,
+  isOpen,
+  handleCloseModal,
+}: PaystackPaymentModalProps) => {
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const iframeRef = useRef(null);
+  const [isSmallerThan600px] = useMediaQuery("(max-width: 600px)");
+
+  useEffect(() => {
+    const handleWindowMessage = (event: any) => {
+      if (event.data.type === PAYSTACK_REDIRECT_EVENT) {
+        handleCloseModal();
+      }
+    };
+
+    window.addEventListener("message", handleWindowMessage);
+
+    return () => {
+      window.removeEventListener("message", handleWindowMessage);
+    };
+  }, [handleCloseModal]);
+
+  const handleIframeLoad = () => {
+    setIframeLoaded(true);
+    if (iframeRef?.current) {
+      (iframeRef.current as HTMLIFrameElement).contentWindow?.postMessage(
+        { type: "iframeLoaded" },
+        window.location.origin
+      );
+    }
+  };
+
+  return (
+    <Box
+      display={isOpen ? "block" : "none"}
+      position="fixed"
+      zIndex={999999999}
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      maxH={"100vh"}
+      overflow="hidden"
+      backgroundColor="rgba(0, 0, 0, 0.4)"
+    >
+      <Box
+        className={`modal-content ${isOpen ? "show" : ""}`}
+        margin="15% auto"
+        backgroundColor="#fefefe"
+        border="1px solid #888"
+        width={isSmallerThan600px ? "90%" : "80%"}
+        maxWidth="600px"
+        borderRadius="5px"
+        {...(isSmallerThan600px
+          ? {
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              bottom: "0px",
+            }
+          : {})}
+      >
+        {isSmallerThan600px && (
+          <Box
+            onClick={handleCloseModal}
+            fontSize={"20px"}
+            position={"absolute"}
+            bottom={"-30px"}
+            left={"50%"}
+            transform={"translateX(-50%)"}
+          >
+            <CancelFilledIcon color={"white"} boxSize={"24px"} />
+          </Box>
+        )}
+        <Box
+          onClick={handleCloseModal}
+          fontSize={"20px"}
+          position={"fixed"}
+          right={"calc(50% - 320px)"}
+          transform={"translate(-50%, -20px)"}
+          cursor={"pointer"}
+        >
+          <CancelFilledIcon color={"white"} boxSize={"24px"} />
+        </Box>
+        <iframe
+          title={"main-ghs-pay"}
+          ref={iframeRef}
+          src={src}
+          width="100%"
+          height="400"
+          allowFullScreen
+          name="main-ghs-pay"
+          id="main-ghs-pay"
+          onLoad={handleIframeLoad}
+          style={{
+            opacity: iframeLoaded ? 1 : 0,
+            pointerEvents: iframeLoaded ? "auto" : "none",
+            transition: "opacity 0.3s ease",
+            margin: "0 auto",
+            height: "600px",
+          }}
+        ></iframe>
+      </Box>
+    </Box>
+  );
+};

package/src/components/WalletPay.tsx

@@ -0,0 +1,160 @@
+/** @format */
+
+import { Flex, Text } from "@chakra-ui/react";
+import { useElements, useStripe } from "@stripe/react-stripe-js";
+import { useEffect, useState } from "react";
+import {
+  Button,
+  customSnackbar,
+  GooglePayIcon,
+  SnackbarType,
+} from "mainstack-design-system";
+
+const WalletPay = ({
+  currency,
+  metadata,
+  amount,
+  formik,
+  checkForErrors,
+  onPaymentComplete,
+  Request,
+}: // discounted_price,
+// redeemDiscount,
+
+{
+  currency: string;
+  amount: number;
+  metadata?: any;
+  formik: any;
+  // discounted_price: number;
+  // redeemDiscount: (price: number) => void;
+  checkForErrors: () => Promise<boolean>;
+  onPaymentComplete: (reference: string) => void;
+  Request: any;
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [paymentRequest, setPaymentRequest] = useState<any>(null);
+  const [wallets, setWallets] = useState<any>(null);
+  const [isPending, setIsPending] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (stripe && amount > 0) {
+      metadata.email = formik.values.email;
+      metadata.name = formik.values.fullname;
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const payment_request = stripe?.paymentRequest({
+        country: "US",
+        currency: currency?.toLowerCase(),
+        total: {
+          label: metadata?.productName,
+          amount: amount,
+        },
+        requestPayerName: true,
+        requestPayerEmail: true,
+      });
+
+      payment_request.canMakePayment().then((result) => {
+        if (result) {
+          setPaymentRequest(payment_request);
+          setWallets(result);
+        }
+      });
+
+      payment_request.on("paymentmethod", async (e: any) => {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const { client_secret } = await Request.post("/stripe/intent", {
+          amount: amount,
+          currency: currency,
+          metadata: metadata,
+        }).then((res: any) => res.data);
+
+        const { paymentIntent, error: confirmError } =
+          await stripe.confirmCardPayment(
+            client_secret,
+            {
+              payment_method: e.paymentMethod.id,
+            },
+            { handleActions: false }
+          );
+
+        if (confirmError) {
+          e.complete("fail");
+          customSnackbar(
+            confirmError?.message ?? "We couldn't process your payment",
+            SnackbarType.error
+          );
+        } else {
+          e.complete("success");
+          if (paymentIntent.status === "requires_action") {
+            const { error } = await stripe.confirmCardPayment(client_secret);
+            if (error) {
+              customSnackbar(
+                "Payment failed, please add a new payment method",
+                SnackbarType.error
+              );
+            } else {
+              setIsPending(true);
+              setTimeout(() => {
+                onPaymentComplete(metadata?.reference);
+              }, 3000);
+            }
+          }
+          customSnackbar("Payment was successful", SnackbarType.success);
+          setIsPending(true);
+          setTimeout(() => {
+            onPaymentComplete(metadata?.reference);
+          }, 3000);
+        }
+      });
+    }
+  }, [stripe, elements, formik.values.email, formik.values.fullname, amount]);
+
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return (
+    <>
+      {paymentRequest && wallets !== null && (
+        <Flex width={"100%"} gap={"16px"}>
+          {wallets?.applePay && (
+            <Button
+              size="medium"
+              variant="primary"
+              label=" Pay"
+              width="100%"
+              fontFamily={"sans-serif"}
+              onClick={async () => {
+                const hasErrors = await checkForErrors();
+                if (!hasErrors) {
+                  paymentRequest?.show();
+                }
+              }}
+            />
+          )}
+          {wallets?.googlePay && (
+            <Button
+              size="medium"
+              variant="primary"
+              label="Pay"
+              width="100%"
+              icon={<GooglePayIcon boxSize={"20px"} mt={"6px"} />}
+              icontype="leading"
+              fontSize={"1.125rem"}
+              onClick={async () => {
+                const hasErrors = await checkForErrors();
+                if (!hasErrors) {
+                  paymentRequest?.show();
+                }
+              }}
+              fontFamily="inherit"
+              isLoading={isPending}
+              disabled={isPending}
+            />
+          )}
+        </Flex>
+      )}
+    </>
+  );
+};
+
+export default WalletPay;

package/src/constants/index.ts

@@ -0,0 +1,3 @@
+/** @format */
+
+export const PAYSTACK_REDIRECT_EVENT = "Payment Completed";

package/src/enums/currenciesEnums.ts

@@ -0,0 +1,7 @@
+/** @format */
+
+export enum CURRENCIES {
+  GHS = "GHS",
+  NGN = "NGN",
+  UGX = "UGX",
+}

package/src/hooks/usePayment.ts

@@ -0,0 +1,60 @@
+/** @format */
+
+import AllowedCountriesWithFlags from "utils/countries_with_flags_and_currencies.json";
+
+const getAmount = (
+  curr: string,
+  price: string | number,
+  currencies: any,
+  markup?: number
+) => {
+  if (curr === "USD") {
+    return Number(price);
+  }
+  const newPrice = Number(
+    (Array.isArray(currencies) ? currencies : currencies?.currency_rate)?.find(
+      (i: any) => i?.currency === curr
+    )?.rate || 0
+  );
+
+  const result = Number(price) * Number(newPrice);
+  const markupResult = (val: number) =>
+    markup ? val + (markup / 100) * val : val;
+  return curr === "NGN"
+    ? result
+    : curr === "UGX"
+    ? markupResult(Math.ceil(result / 100) * 100)
+    : markupResult(result);
+};
+
+const getAmountInUSD = (curr: string, price: string, currencies: any) => {
+  const newPrice = Number(
+    (Array.isArray(currencies) ? currencies : currencies?.currency_rate)?.find(
+      (i: any) => i?.currency === curr
+    )?.rate || 0
+  );
+  return Number(price) / Number(newPrice);
+};
+
+// get price of product and format it for display
+
+export const usePayment = (currency: string) => {
+  const getCountryNameByCurrency = () => {
+    return AllowedCountriesWithFlags.filter(
+      (country) => country.currency.code === currency
+    )[0]?.name;
+  };
+
+  const getCountryCurrency = (country: any) => {
+    return AllowedCountriesWithFlags.filter(
+      (entry) => entry.name === country
+    )[0]?.currency.code;
+  };
+
+  return {
+    getAmount,
+    getAmountInUSD,
+    getCountryNameByCurrency,
+    getCountryCurrency,
+  };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+/** @format */
+
+export { default as MainstackPayments } from "./components/Payment";

package/src/pages/Home.tsx

@@ -0,0 +1,97 @@
+/** @format */
+
+import { Box, Text } from "@chakra-ui/react";
+import MainstackPayment from "components/Payment";
+import { Input } from "mainstack-design-system";
+import { useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import * as yup from "yup";
+
+export default function Home() {
+  const reference = uuidv4();
+  const config = {
+    accountId: "65c38a52dc20c4b7d8fd13b7",
+    currency: "NGN",
+    reference,
+    amount: 1000,
+    transactionFeesSlug: "bookings-pro-plan",
+    userAllowsWalletPayment: true,
+    userAllowsCardPayment: true,
+    metadata: {
+      reference,
+      actual_price: 1.5,
+      account_id: "65c38a52dc20c4b7d8fd13b7",
+      user_id: "65c38a52dc20c4b7d8fd13b5",
+      product_id: "6643bf37530e76a622129042",
+      type: "appointment",
+      mainstack_product_type: "bookings" as const,
+      productName: "For Free",
+      service_id: "6643bf37530e76a622129042",
+      service_name: "For Free",
+      service_price: 1000,
+      booking_id: "662b7488a1cf46a4c2d24e73",
+    },
+  };
+
+  const storeConfig = {
+    accountId: "65081b1bd7e9e85ba863ec07",
+    currency: "NGN",
+    reference,
+    amount: 2000,
+    transactionFeesSlug: "store-pro-plan",
+    userAllowsWalletPayment: true,
+    userAllowsCardPayment: true,
+    metadata: {
+      reference,
+      actual_price: 1.5,
+      account_id: "65081b1bd7e9e85ba863ec07",
+      user_id: "65081b1bd7e9e85ba863ec05",
+      product_id: "q8zLqq9vOEUV",
+      type: "digital_product",
+      mainstack_product_type: "store" as const,
+      productName: "The Other Room",
+    },
+    paystackRedirectUrl: "http://localhost:3008/payment-redirect",
+    baseUrl: "https://dev.api.mainstack.io",
+    authMSUrl: "https://dev.auth.mainstack.io",
+  };
+
+  const [testName, setTestName] = useState("");
+  const paymentRef = useRef<any>();
+  return (
+    <Box h="100vh" display="flex" justifyContent="center">
+      <MainstackPayment
+        paymentConfig={storeConfig}
+        customForm={
+          <Input
+            id="Test name"
+            label="Your name *"
+            name="fullname"
+            onChange={(e: any) => {
+              setTestName(e.target.value);
+              if (paymentRef?.current) {
+                paymentRef.current.updateCustomFormValues(
+                  "testName",
+                  e.target.value
+                );
+              }
+            }}
+            value={testName}
+            placeholder="name"
+            type="text"
+            // error={Boolean(formik?.errors?.fullname)}
+            // errorMessage={formik?.errors?.fullname as string}
+            fontFamily={"inherit"}
+          />
+        }
+        customFormValues={{ testName }}
+        customFormValidation={{
+          testName: yup.string().required("Please select a currency."),
+        }}
+        onGoBack={() => console.log("Go back")}
+        onPaymentComplete={() => console.log("Payment Complete!")}
+        ref={paymentRef}
+      />
+    </Box>
+  );
+}

package/src/pages/Index.tsx

@@ -0,0 +1,23 @@
+/** @format */
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { ROUTES } from "routes";
+import Home from "./Home";
+import Login from "./Login";
+import Page404 from "./Page404";
+import PaymentRedirect from "./PaymentRedirect";
+
+function Index() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={ROUTES.HOME} element={<Home />} />
+        <Route path={ROUTES.LOGIN} element={<Login />} />
+        <Route path={ROUTES.PAYMENT_REDIRECT} element={<PaymentRedirect />} />
+        <Route path={ROUTES.NOT_FOUND} element={<Page404 />} />
+        <Route path="*" element={<Navigate to={ROUTES.NOT_FOUND} />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Index;

package/src/pages/Login.tsx

@@ -0,0 +1,13 @@
+/** @format */
+
+import { Box, Text } from "@chakra-ui/react";
+
+export default function Login() {
+  return (
+    <Box h="100vh" display="flex" justifyContent="center" alignItems="center">
+      <Text fontSize="h1" fontWeight="bold">
+        Login Page
+      </Text>
+    </Box>
+  );
+}

package/src/pages/Page404.tsx

@@ -0,0 +1,13 @@
+/** @format */
+
+import { Box, Text } from "@chakra-ui/react";
+
+export default function Page404() {
+  return (
+    <Box h="100vh" display="flex" justifyContent="center" alignItems="center">
+      <Text fontSize="h1" fontWeight="bold">
+        404 page
+      </Text>
+    </Box>
+  );
+}

package/src/pages/PaymentRedirect.tsx

@@ -0,0 +1,15 @@
+/** @format */
+import { PAYSTACK_REDIRECT_EVENT } from "constants/index";
+import { useEffect } from "react";
+
+const PostMessagePage = () => {
+  useEffect(() => {
+    (() => {
+      window.parent.postMessage({ type: PAYSTACK_REDIRECT_EVENT }, "*");
+    })();
+  }, []);
+
+  return <div></div>;
+};
+
+export default PostMessagePage;

package/src/routes/index.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+export const ROUTES = {
+  HOME: "/",
+  LOGIN: "/login",
+  NOT_FOUND: "/404",
+  PAYMENT_REDIRECT: "/payment-redirect",
+};