mainstack-payments 0.0.0

package/src/components/Payment.tsx

@@ -0,0 +1,772 @@
+/** @format */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+
+import {
+  Box,
+  Grid,
+  GridItem,
+  Heading,
+  Flex,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import {
+  Button,
+  ClickTooltip,
+  Colors,
+  customSnackbar,
+  InfoIcon,
+  Input,
+  NotificationsFilledIcon,
+  SnackbarType,
+} from "mainstack-design-system";
+import {
+  useEffect,
+  useState,
+  ReactNode,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import { stringifyPrice } from "utils";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe, Stripe } from "@stripe/stripe-js";
+import {
+  useGetTransactionFees,
+  useChargePayment,
+  useVerifyPayment,
+  useInitPayment,
+} from "api";
+import { FormikProvider, useFormik } from "formik";
+// import { v4 as uuidv4 } from "uuid";
+import * as yup from "yup";
+import CheckoutDetailsForm from "components/CheckoutForm";
+import { usePayment } from "hooks/usePayment";
+import { PaystackProps } from "react-paystack/dist/types";
+import { CURRENCIES } from "enums/currenciesEnums";
+import { PaystackPaymentModal } from "components/PaystackPaymentModal";
+import PaystackPaymentErrorModal from "components/PaystackPaymentErrorModal";
+import WalletPay from "components/WalletPay";
+import { TPaymentConfig, TPaymentOption } from "types";
+import InitializeAPIConfig from "api/config";
+
+interface IMainstackPaymentProps {
+  paymentConfig: TPaymentConfig;
+
+  summaryTitle?: string | ReactNode;
+  customForm?: ReactNode;
+  customFormValidation?: { [key: string]: any };
+  customFormValues?: { [key: string]: string };
+
+  // functions
+  onGoBack: () => void;
+  // useful if you want to do something lke trigger your formik errors when init payment is called
+  onInitializePayment?: () => void;
+  onPaymentComplete: (reference: string) => void;
+}
+
+const MainstackPayment = forwardRef(
+  (
+    {
+      paymentConfig,
+      summaryTitle,
+      customForm,
+      customFormValidation,
+      customFormValues,
+      onGoBack,
+      onInitializePayment,
+      onPaymentComplete,
+    }: IMainstackPaymentProps,
+    ref
+  ) => {
+    const {
+      reference,
+      currency,
+      amount,
+      discountAmount,
+      customizations,
+      accountId,
+      transactionFeesSlug,
+      paymentOptions,
+      paystackRedirectUrl,
+      userAllowsWalletPayment,
+      userAllowsCardPayment,
+      baseUrl,
+      authMSUrl,
+    } = paymentConfig;
+    const { Request, AuthMSRequest } = InitializeAPIConfig(baseUrl, authMSUrl);
+
+    const [showCheckoutForm, setShowCheckoutForm] = useState(false);
+    const [showContact, setShowContact] = useState<boolean>(true);
+    const [showPayment, setShowPayment] = useState<boolean>(false);
+    const [chargeTransactionData, setChargeTransactionData] = useState<
+      { reference: string; url?: string } | undefined
+    >();
+    const [stripeValidation, setStripevalidation] = useState<boolean>(false);
+
+    const isAvailablePaymentMethod = (paymentMethod: TPaymentOption) => {
+      if (!paymentOptions || paymentOptions.length <= 0) return true;
+      return paymentOptions?.includes(paymentMethod);
+    };
+
+    const StripeValidationSchema = yup.object().shape({
+      email: yup
+        .string()
+        .matches(
+          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+          "Please enter a valid email"
+        )
+        .required("Please enter your email address"),
+      fullname: yup.string().required("Please enter your Fullname"),
+      cardNumber: yup
+        .string()
+        .required("Please enter your card number")
+        .max(16),
+      cardHolderName: yup
+        .string()
+        .required("Please enter your card holder name"),
+      cardExpDate: yup.string().required("Please enter your card expiry date"),
+      securityCode: yup.string().required("Please enter your security code"),
+      country: yup.string().required("Please select a country"),
+      street: yup.string().required("Please enter your street address"),
+      ...customFormValidation,
+    });
+
+    const PaystackValidationSchema = yup.object().shape({
+      email: yup
+        .string()
+        .matches(
+          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+          "Please enter a valid email"
+        )
+        .required("Please enter your email address"),
+      fullname: yup.string().required("Please enter your Fullname"),
+      currency: yup.string().required("Please select a currency."),
+      ...customFormValidation,
+    });
+
+    // const discountPrice = service?.price?.discount_price;
+
+    const { getAmount, getCountryCurrency } = usePayment(currency);
+
+    const ipAddress =
+      typeof window !== "undefined"
+        ? JSON.parse(window.localStorage.getItem("userIp") as string)
+        : "";
+
+    // payment
+    const { data: newTransactionFeesResponse, isLoading: feesLoading } =
+      useGetTransactionFees(
+        {
+          account_id: accountId,
+          amount,
+          currency,
+          slug: transactionFeesSlug,
+        },
+        AuthMSRequest
+      );
+
+    const { mutate: handleInitPayment, isPending: isInitializingPayment } =
+      useInitPayment(Request);
+    const { mutate: handleChargeCard } = useChargePayment(Request);
+    const { data: verifyPaymentData, refetch: verifyPayment } =
+      useVerifyPayment(chargeTransactionData?.reference as string, Request);
+
+    const formik = useFormik({
+      initialValues: {
+        email: "",
+        fullname: "",
+        message: "",
+        phone: "",
+        currency,
+        discount_code: "",
+        paymentType: "",
+        cardHolderName: "",
+        country: "",
+        street: "",
+        zipCode: "",
+        additional_details: "",
+        isCard: false,
+        ...customFormValues,
+      },
+      validationSchema: stripeValidation
+        ? StripeValidationSchema
+        : PaystackValidationSchema,
+
+      onSubmit: (values, { setSubmitting }) => {
+        if (newAmount === 0) {
+          // success callback
+          onPaymentComplete(reference);
+          return;
+        }
+        setSubmitting(true);
+        handleInitPayment(
+          {
+            amount: newAmount,
+            reference,
+            currency,
+            metadata,
+          },
+          {
+            onSuccess: () => {
+              if (
+                (values.currency === CURRENCIES.NGN &&
+                  isAvailablePaymentMethod("paystack")) ||
+                (values.currency === CURRENCIES.GHS &&
+                  isAvailablePaymentMethod("startbutton"))
+              ) {
+                handleChargeCard(
+                  {
+                    amount: newAmount,
+                    currency,
+                    metadata,
+                    callback_url: paystackRedirectUrl,
+                  },
+                  {
+                    onSuccess(data) {
+                      const { data: url, reference: paymentRef } = data;
+                      if (url && paymentRef) {
+                        setChargeTransactionData({
+                          url,
+                          reference: paymentRef,
+                        });
+                      }
+                    },
+                    onError(error) {
+                      onOpenPaystackErrorModal();
+                    },
+                  }
+                );
+              } else {
+                setShowCheckoutForm(true);
+                setSubmitting(false);
+              }
+            },
+            onError: (error: any) => {
+              setSubmitting(false);
+              customSnackbar(
+                error?.response?.data ?? "Error loading payment gateway",
+                SnackbarType.error
+              );
+            },
+          }
+        );
+      },
+    });
+
+    useImperativeHandle(ref, () => ({
+      updateCustomFormValues(label: string, value: string) {
+        formik.setFieldValue(label, value);
+      },
+    }));
+
+    const amountFromMarkup =
+      newTransactionFeesResponse?.payload?.local_amount ?? 0;
+    const TransactionFeeValueFromEndpoint =
+      newTransactionFeesResponse?.payload?.local_transaction_fee ?? 0;
+
+    const InternationalFees =
+      newTransactionFeesResponse?.payload?.local_international_card_fee ?? 0;
+
+    const DollarInternationalFees =
+      newTransactionFeesResponse?.payload?.dollar_international_card_fee ?? 0;
+    const TotalAmountAfterTransactionFeesHasBeenAdded =
+      parseFloat(amountFromMarkup) +
+      parseFloat(TransactionFeeValueFromEndpoint) +
+      (currency !== CURRENCIES.NGN &&
+      (formik.values.country !== "" || ipAddress?.currency !== currency)
+        ? getCountryCurrency(formik?.values?.country) !== currency
+          ? Number(InternationalFees)
+          : 0
+        : 0);
+
+    const isIntlCard =
+      formik.values.country !== ""
+        ? getCountryCurrency(formik?.values?.country) !== currency
+        : ipAddress?.currency !== currency;
+
+    const newAmount =
+      // Uganda Shillings must be round to nearest 100th
+      currency === CURRENCIES.UGX
+        ? Math.ceil(TotalAmountAfterTransactionFeesHasBeenAdded) * 100
+        : Math.round(
+            TotalAmountAfterTransactionFeesHasBeenAdded *
+              (newTransactionFeesResponse?.payload?.is_zero_decimal_currency
+                ? 1
+                : 100)
+          );
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const transaction_fee = parseFloat(
+      (
+        Number(newTransactionFeesResponse?.payload?.dollar_transaction_fee) +
+        Number(isIntlCard ? DollarInternationalFees : 0)
+      ).toFixed(2)
+    );
+    const metadata = {
+      ...paymentConfig.metadata,
+      phone_number: formik.values?.phone,
+      reference,
+      email: formik.values.email,
+      name: formik.values?.fullname,
+      country: formik?.values?.country,
+      actual_price: Number(newTransactionFeesResponse?.payload?.dollar_amount),
+      transaction_fee,
+      international_fee: Number(
+        isIntlCard ? Number(DollarInternationalFees) : 0
+      ),
+      isIntlCard,
+    };
+
+    const stripePromise = async () => {
+      try {
+        return await loadStripe(
+          import.meta.env.REACT_APP_STRIPE_SECRET_KEY as string
+        );
+      } catch (error) {
+        customSnackbar("Error loading payment gateway", SnackbarType.error);
+      }
+    };
+
+    useEffect(() => {
+      // const currency = getCurrency();
+      if (
+        // isFree
+        currency !== "NGN" &&
+        currency !== "GHS"
+      ) {
+        setShowCheckoutForm(true);
+      } else {
+        setShowCheckoutForm(false);
+      }
+    }, [currency]);
+
+    const proceedToCheckoutForm = async () => {
+      if (onInitializePayment) {
+        onInitializePayment();
+      }
+
+      const errors = await formik.validateForm();
+      if (Object.keys(errors).length <= 0) {
+        setStripevalidation(true);
+        if (newAmount === 0) {
+          // success callback
+          onPaymentComplete(reference);
+          return;
+        }
+        handleInitPayment(
+          {
+            amount: newAmount,
+            reference,
+            currency,
+            metadata,
+          },
+          {
+            onSuccess() {
+              setShowPayment(true);
+              setShowContact(!showContact);
+            },
+            onError(error: any) {
+              customSnackbar(error?.response?.data, SnackbarType.error);
+            },
+          }
+        );
+      }
+      return;
+    };
+
+    const editContact = () => {
+      setShowPayment(false);
+      setShowContact(!showContact);
+    };
+
+    const {
+      isOpen: isPaystackErrorModalOpen,
+      onClose: onClosePaystackErrorModal,
+      onOpen: onOpenPaystackErrorModal,
+    } = useDisclosure();
+
+    const handleClosePaystackModal = async () => {
+      setChargeTransactionData((prevData: any) => ({
+        ...prevData,
+        url: undefined,
+      }));
+      const res = await verifyPayment();
+      if (res.isSuccess) {
+        onPaymentComplete(chargeTransactionData?.reference as string);
+      } else {
+        customSnackbar(`${res?.error}`, SnackbarType.error);
+      }
+    };
+
+    return (
+      <>
+        {
+          <Grid
+            p={{ base: "16px", lg: "48px" }}
+            templateColumns={{ base: "100%", lg: "repeat(2, 1fr)" }}
+            gap={"40px"}
+            maxWidth={"1800px"}
+            width={"100%"}
+            mx={"auto"}
+            fontFamily={customizations?.font_family ?? "inherit"}
+          >
+            <GridItem order={{ base: "2", lg: "1" }}>
+              <FormikProvider value={formik}>
+                <form onSubmit={formik.handleSubmit}>
+                  <Flex flexDirection={"column"} gap={"20px"} pb={"40px"}>
+                    <Heading
+                      fontSize={{ base: "1.25rem", lg: "1.5rem" }}
+                      fontWeight={700}
+                      lineHeight={"28.8px"}
+                      letterSpacing={{ base: "-0.4px", lg: "-0.48px" }}
+                      fontFamily="inherit"
+                    >
+                      Checkout Details
+                    </Heading>
+                    <Input
+                      id="fullname"
+                      label="Your name *"
+                      name="fullname"
+                      onChange={(e) =>
+                        formik.setFieldValue("fullname", e.target.value)
+                      }
+                      value={formik.values?.fullname}
+                      placeholder="name"
+                      type="text"
+                      error={Boolean(formik?.errors?.fullname)}
+                      errorMessage={formik?.errors?.fullname as string}
+                      fontFamily={"inherit"}
+                    />
+                    <Input
+                      id="email"
+                      label="Email address *"
+                      name="email"
+                      onChange={(e) =>
+                        formik.setFieldValue("email", e.target.value)
+                      }
+                      value={formik.values?.email}
+                      placeholder="email"
+                      type="email"
+                      error={Boolean(formik?.errors?.email)}
+                      errorMessage={formik?.errors?.email as string}
+                      fontFamily={"inherit"}
+                    />
+                    {customForm}
+                  </Flex>
+                  {isAvailablePaymentMethod("wallet") && (
+                    <>
+                      {" "}
+                      {userAllowsWalletPayment &&
+                        showContact &&
+                        currency !== CURRENCIES.NGN &&
+                        currency !== CURRENCIES.GHS && (
+                          <Elements
+                            stripe={stripePromise() as Promise<Stripe | null>}
+                            options={{
+                              appearance: {
+                                variables: { borderRadius: "100px" },
+                              },
+                            }}
+                          >
+                            <WalletPay
+                              metadata={metadata}
+                              currency={currency}
+                              // discounted_price={0}
+                              // redeemDiscount={() => {}}
+                              amount={newAmount}
+                              formik={formik}
+                              checkForErrors={async () => {
+                                if (onInitializePayment) {
+                                  onInitializePayment();
+                                }
+                                const errors = await formik.validateForm();
+                                return Object.keys(errors).length > 0;
+                              }}
+                              onPaymentComplete={onPaymentComplete}
+                              Request={Request}
+                            />
+                          </Elements>
+                        )}
+                    </>
+                  )}
+                  {isAvailablePaymentMethod("stripe") && (
+                    <>
+                      {" "}
+                      {userAllowsCardPayment &&
+                        showCheckoutForm &&
+                        showContact && (
+                          <Flex mt={"12px"} gap="10px">
+                            <Button
+                              size="large"
+                              variant="tertiary"
+                              icon={
+                                <NotificationsFilledIcon
+                                  transform={"rotate(-90deg)"}
+                                  boxSize={"20px"}
+                                />
+                              }
+                              icontype="leading"
+                              label={"Back"}
+                              width="144px"
+                              fontFamily="inherit"
+                              onClick={onGoBack}
+                            />
+                            <Button
+                              size="large"
+                              variant="primary"
+                              bgColor={customizations?.theme_color}
+                              label={
+                                customizations?.button_label ??
+                                "Pay for Product"
+                              }
+                              width={"100%"}
+                              isLoading={isInitializingPayment}
+                              _hover={{
+                                opacity: 0.8,
+                                _after: {
+                                  background: customizations?.theme_color,
+                                },
+                              }}
+                              fontFamily="inherit"
+                              onClick={proceedToCheckoutForm}
+                              // type="submit"
+                            />
+                          </Flex>
+                        )}
+                      {showCheckoutForm && (
+                        <Elements
+                          stripe={stripePromise() as Promise<Stripe | null>}
+                        >
+                          <CheckoutDetailsForm
+                            metadata={metadata}
+                            currency={currency}
+                            amount={newAmount}
+                            discount_code={formik.values.discount_code}
+                            formik={formik}
+                            isFree={newAmount === 0}
+                            // paystackConfiguration={paystackConfiguration}
+                            // product={product}
+                            showPayment={showPayment}
+                            onCancel={editContact}
+                            btn_color={customizations?.theme_color as string}
+                            onPaymentComplete={onPaymentComplete}
+                            Request={Request}
+                          />
+                        </Elements>
+                      )}
+                    </>
+                  )}
+                  {(isAvailablePaymentMethod("paystack") ||
+                    isAvailablePaymentMethod("startbutton")) && (
+                    <>
+                      {userAllowsCardPayment && !showCheckoutForm && (
+                        <Flex mt={"12px"} gap="10px">
+                          <Button
+                            size="large"
+                            variant="tertiary"
+                            icon={
+                              <NotificationsFilledIcon
+                                transform={"rotate(-90deg)"}
+                                boxSize={"20px"}
+                              />
+                            }
+                            icontype="leading"
+                            label={"Back"}
+                            width="144px"
+                            fontFamily="inherit"
+                            onClick={onGoBack}
+                          />
+                          <Button
+                            size="large"
+                            variant="primary"
+                            bgColor={customizations?.theme_color}
+                            label={
+                              customizations?.button_label ?? "Pay for Product"
+                            }
+                            width={"100%"}
+                            type="submit"
+                            isLoading={formik?.isSubmitting}
+                            onClick={() => {
+                              if (onInitializePayment) {
+                                onInitializePayment();
+                              }
+                            }}
+                            _hover={{
+                              opacity: 0.8,
+                              _after: {
+                                background: customizations?.theme_color,
+                              },
+                            }}
+                            fontFamily="inherit"
+                          />
+                        </Flex>
+                      )}
+                    </>
+                  )}
+                </form>
+              </FormikProvider>
+            </GridItem>
+            <GridItem order={{ base: "1", lg: "2" }}>
+              <Box
+                p={{ base: "16px", lg: "24px" }}
+                borderRadius={"16px"}
+                boxShadow={
+                  "0px 2px 6px 0px rgba(45, 59, 67, 0.06), 0px 2px 4px 0px rgba(45, 59, 67, 0.05)"
+                }
+                border={`1px solid ${Colors.gray50}`}
+              >
+                <Box
+                  p={"16px"}
+                  bg={Colors.gray50}
+                  borderRadius={"12px"}
+                  textAlign={"center"}
+                >
+                  <Text fontSize={".875rem"} lineHeight={"22px"}>
+                    {summaryTitle ?? metadata?.productName}
+                  </Text>
+                  <Heading
+                    fontSize={"1.25rem"}
+                    fontWeight={700}
+                    lineHeight={"22px"}
+                    fontFamily="inherit"
+                  >
+                    {currency} {stringifyPrice(amount)}
+                  </Heading>
+                </Box>
+                <Flex flexDirection={"column"} gap={"20px"} mt={"32px"}>
+                  <Flex width="100%" justifyContent={"space-between"}>
+                    <Text fontSize={".875rem"} lineHeight={"22px"}>
+                      Subtotal
+                    </Text>
+                    <Text
+                      fontSize={".875rem"}
+                      lineHeight={"22px"}
+                      fontWeight={600}
+                    >
+                      {currency}{" "}
+                      {Number(amountFromMarkup?.toString())
+                        ?.toFixed(2)
+                        ?.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+                    </Text>
+                  </Flex>
+                  {currency !== CURRENCIES.NGN &&
+                    (formik.values.country !== "" ||
+                      ipAddress?.currency !== currency) &&
+                    getCountryCurrency(formik?.values?.country) !==
+                      currency && (
+                      <Flex width="100%" justifyContent={"space-between"}>
+                        <Flex alignItems={"center"}>
+                          <Text
+                            fontSize={".875rem"}
+                            lineHeight={"22px"}
+                            mr={"8px"}
+                          >
+                            International Card Fee
+                          </Text>
+                          <ClickTooltip
+                            body={`This fee (1.5%) covers the processing of
+        					your international currency conversion.`}
+                            label="International cards conversion fee"
+                            triggerComponent={<InfoIcon boxSize={"20px"} />}
+                            fontFamily="Bricolage Grotesque"
+                          />
+                        </Flex>
+                        <Text
+                          fontSize={".875rem"}
+                          lineHeight={"22px"}
+                          fontWeight={600}
+                        >
+                          {currency}{" "}
+                          {InternationalFees?.toFixed(2)?.replace(
+                            /\B(?=(\d{3})+(?!\d))/g,
+                            ","
+                          )}
+                        </Text>
+                      </Flex>
+                    )}
+                  {TotalAmountAfterTransactionFeesHasBeenAdded > 0 && (
+                    <Flex width="100%" justifyContent={"space-between"}>
+                      <Flex alignItems={"center"}>
+                        <Text
+                          fontSize={".875rem"}
+                          lineHeight={"22px"}
+                          mr={"8px"}
+                        >
+                          Fees
+                        </Text>
+                        <ClickTooltip
+                          body={
+                            <Text mb={"20px"}>
+                              Platform fee :{" "}
+                              {
+                                newTransactionFeesResponse?.payload
+                                  ?.platform_fee?.display
+                              }
+                              <br />
+                              Processor fee :{" "}
+                              {
+                                newTransactionFeesResponse?.payload
+                                  ?.processor_fee?.display
+                              }
+                            </Text>
+                          }
+                          label="Fees"
+                          triggerComponent={<InfoIcon boxSize={"20px"} />}
+                          fontFamily="Bricolage Grotesque"
+                        />
+                      </Flex>
+                      <Text
+                        fontSize={".875rem"}
+                        lineHeight={"22px"}
+                        fontWeight={600}
+                      >
+                        {currency}{" "}
+                        {TransactionFeeValueFromEndpoint?.toFixed(2)?.replace(
+                          /\B(?=(\d{3})+(?!\d))/g,
+                          ","
+                        )}
+                      </Text>
+                    </Flex>
+                  )}
+                  <Flex width="100%" justifyContent={"space-between"}>
+                    <Text
+                      fontSize={"1.125rem"}
+                      lineHeight={"24px"}
+                      fontWeight={700}
+                      letterSpacing={"-0.36px"}
+                    >
+                      Total
+                    </Text>
+                    <Text
+                      fontSize={"1.125rem"}
+                      lineHeight={"24px"}
+                      fontWeight={700}
+                      letterSpacing={"-0.36px"}
+                    >
+                      {currency}{" "}
+                      {TotalAmountAfterTransactionFeesHasBeenAdded?.toFixed(
+                        2
+                      )?.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+                    </Text>
+                  </Flex>
+                </Flex>
+              </Box>
+            </GridItem>
+            <PaystackPaymentModal
+              isOpen={!!chargeTransactionData?.url}
+              handleCloseModal={handleClosePaystackModal}
+              src={chargeTransactionData?.url as string}
+            />
+            <PaystackPaymentErrorModal
+              isOpen={isPaystackErrorModalOpen}
+              onClose={onClosePaystackErrorModal}
+            />
+          </Grid>
+        }
+      </>
+    );
+  }
+);
+
+export default MainstackPayment;