mainstack-payments 0.0.0 → 0.0.2

package/src/components/Payment.tsx

@@ -1,772 +0,0 @@
-/** @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;