mainstack-payments 0.0.0

package/src/components/CheckoutForm.tsx

@@ -0,0 +1,426 @@
+/** @format */
+
+import { useChargePayment } from "api";
+import {
+  useMediaQuery,
+  Collapse,
+  Flex,
+  Grid,
+  GridItem,
+  FormControl,
+  Box,
+  Text,
+  Heading,
+} from "@chakra-ui/react";
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from "@stripe/react-stripe-js";
+import { StripeCardNumberElement, StripeCardElement } from "@stripe/stripe-js";
+import {
+  Colors,
+  CancelFilledIcon,
+  CountrySelect,
+  LockIcon,
+  Input,
+  Button,
+  customSnackbar,
+  SnackbarType,
+} from "mainstack-design-system";
+import { useState } from "react";
+import countries_flag from "utils/countries_flag.json";
+import { postcodeValidator } from "postcode-validator";
+
+const CheckoutDetailsForm = ({
+  currency,
+  amount,
+  metadata,
+  // discounted_price,
+  // product_id,
+  formik,
+  isFree,
+  // paystackConfiguration,
+  // product,
+  showPayment,
+  onCancel,
+  btn_color,
+  onPaymentComplete,
+  Request,
+}: {
+  currency: string;
+  amount: number;
+  metadata?: any;
+  // discounted_price?: number;
+  // product_id?: string;
+  discount_code?: string;
+  formik: any;
+  isFree: boolean;
+  // paystackConfiguration: any;
+  // product: any;
+  showPayment: boolean;
+  onCancel: () => void;
+  btn_color: string;
+  onPaymentComplete: (reference: string) => void;
+  Request: any;
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const ipAddress =
+    typeof window !== "undefined"
+      ? JSON.parse(window.localStorage.getItem("userIp") as string)
+      : "";
+
+  const { mutate: handleChargeCard, data: stripeData } =
+    useChargePayment(Request);
+
+  const [payingToStripe, setPayingToStripe] = useState(false);
+  const [userName, setName] = useState("");
+  const [country, setCountry] = useState(ipAddress?.country_name || "");
+  const [address, setAddress] = useState("");
+  const [zipCode, setZipCode] = useState("");
+  const [showBilling, setShowBilling] = useState<boolean>(false);
+
+  const handleSubmit = async (event: any) => {
+    setPayingToStripe(true);
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    if (isFree) {
+      onPaymentComplete(metadata?.reference);
+    } else {
+      const cardNumberElement:
+        | StripeCardNumberElement
+        | StripeCardElement
+        | null = elements?.getElement(CardNumberElement);
+
+      if (!cardNumberElement) {
+        // Handle the case where cardNumberElement is null.
+        return;
+      }
+
+      const result = await stripe.createToken(cardNumberElement, {
+        name: userName,
+        address_country: country,
+        address_line1: address,
+        address_zip: zipCode,
+      });
+
+      if (result.error) {
+        setPayingToStripe(false);
+        customSnackbar(result?.error?.message as string, SnackbarType.error);
+      } else {
+        // Send the token to your server.
+        const data = {
+          source: result?.token?.id,
+          amount,
+          currency,
+          metadata,
+        };
+
+        handleChargeCard(data, {
+          onSuccess: () => {
+            setTimeout(() => {
+              onPaymentComplete(metadata?.reference);
+              setPayingToStripe(false);
+            }, 3000);
+            // redeemDiscount(discounted_price);
+          },
+          onError: (err: any) => {
+            setPayingToStripe(false);
+            customSnackbar(err?.raw?.message, SnackbarType.error);
+          },
+        });
+      }
+    }
+  };
+
+  const [isLessThan768] = useMediaQuery("(max-width: 767px)");
+
+  const inputStyle = {
+    backgroundColor: "#fff",
+    iconColor: "#c4f0ff",
+    color: "#131316",
+    fontWeight: "500",
+    fontFamily: "inherit",
+    fontSize: isLessThan768 ? "14px" : "16px",
+    fontSmoothing: "antialiased",
+    ":-webkit-autofill": {
+      color: "#131316",
+    },
+    "::placeholder": {
+      color: "#A6ABB0",
+    },
+    lineHeight: "20px",
+    letterSpacing: "-0.064px",
+  };
+  const [isValidCode, setIsValidCode] = useState<boolean | null>(null);
+
+  return (
+    <Box>
+      {!isFree ? (
+        <Collapse in={showPayment} animateOpacity>
+          <Box
+            border={"1px solid #EFF1F6"}
+            borderRadius="16px"
+            p={{ md: "24px", base: "16px" }}
+            mt={"24px"}
+            fontFamily="Bricolage Grotesque"
+          >
+            <Box>
+              <Flex
+                justifyContent={"space-between"}
+                alignItems="center"
+                mb={"24px"}
+              >
+                <Heading
+                  fontSize={{ md: "20px", base: "16px" }}
+                  lineHeight={"120%"}
+                  fontWeight={600}
+                  letterSpacing={{ md: "-0.4px", base: "-0.2px" }}
+                  color={
+                    !formik.values.cardHolderName && !showPayment
+                      ? "#888F95"
+                      : `${Colors.black300}`
+                  }
+                >
+                  Pay with Card
+                </Heading>
+
+                <Box
+                  cursor={"pointer"}
+                  onClick={() => {
+                    formik.setFieldValue("country", "");
+                    onCancel();
+                  }}
+                >
+                  <CancelFilledIcon />
+                </Box>
+              </Flex>
+
+              <Text
+                fontSize={{ md: "16px", base: "14px" }}
+                fontWeight="500"
+                mb={"12px"}
+                lineHeight={"20px"}
+                letterSpacing={"-0.064px"}
+              >
+                Card Information
+              </Text>
+              <Grid
+                border={"1px solid"}
+                borderColor={Colors.gray50}
+                borderRadius="12px"
+                p="1px"
+                gridTemplateColumns={"repeat(2, 1fr)"}
+              >
+                <GridItem
+                  borderBottom={"1px solid"}
+                  borderColor={Colors.gray50}
+                  colSpan={2}
+                >
+                  <Box
+                    bg={"#fff"}
+                    height={"48px"}
+                    fontSize={"14px"}
+                    borderRadius={"8px"}
+                    alignItems="center"
+                    px={"15px"}
+                    py="15px"
+                  >
+                    <CardNumberElement
+                      options={{
+                        style: {
+                          base: inputStyle,
+                          invalid: {
+                            iconColor: "red",
+                            color: "red",
+                          },
+                        },
+                      }}
+                    />
+                  </Box>
+                </GridItem>
+
+                <GridItem borderRight={"1px solid"} borderColor={Colors.gray50}>
+                  <Box
+                    bg={"#fff"}
+                    height={"48px"}
+                    fontSize={"14px"}
+                    borderRadius={"8px"}
+                    alignItems="center"
+                    px={"15px"}
+                    py="13px"
+                  >
+                    <CardExpiryElement
+                      options={{
+                        style: {
+                          base: inputStyle,
+                          invalid: {
+                            iconColor: "red",
+                            color: "red",
+                          },
+                        },
+                      }}
+                    />
+                  </Box>
+                </GridItem>
+                <GridItem>
+                  <Box
+                    bg={"#fff"}
+                    height={"48px"}
+                    fontSize={"14px"}
+                    borderRadius={"8px"}
+                    alignItems="center"
+                    px={"15px"}
+                    py="13px"
+                  >
+                    <CardCvcElement
+                      options={{
+                        style: {
+                          base: inputStyle,
+                          invalid: {
+                            iconColor: "red",
+                            color: "red",
+                          },
+                        },
+                      }}
+                    />
+                  </Box>
+                </GridItem>
+              </Grid>
+              <FormControl mt={"24px"}>
+                <Input
+                  id={"cardHolderName"}
+                  label="Cardholder name"
+                  placeholder="Cardholder name"
+                  name="cardHolderName"
+                  type="text"
+                  onChange={formik.handleChange}
+                  value={formik.values.cardHolderName}
+                  fontFamily="inherit"
+                  // required
+                />
+              </FormControl>
+            </Box>
+
+            <FormControl mt="24px">
+              <CountrySelect
+                value={formik.values.country}
+                onChange={(e) => formik.setFieldValue("country", e)}
+                fontFamily="inherit"
+              />
+            </FormControl>
+            <FormControl mt="24px">
+              <Input
+                id="street"
+                label="Street Address"
+                placeholder="Street Address"
+                name="street"
+                fontSize={"14px"}
+                type="text"
+                bg="#EFF1F6"
+                onChange={formik.handleChange}
+                value={formik.values.street}
+                fontFamily="inherit"
+                // required
+              />
+            </FormControl>
+            <Flex mt="24px" gap="16px">
+              <FormControl>
+                <Input
+                  label="Zip Code"
+                  placeholder="Zip Code"
+                  id="zipCode"
+                  name="zipCode"
+                  fontSize={"14px"}
+                  type="text"
+                  bg="#EFF1F6"
+                  onChange={(e) => {
+                    setZipCode(e.target.value);
+                    formik.setFieldValue("zipCode", e.target.value);
+
+                    setIsValidCode(
+                      countries_flag?.find(
+                        (i) => i.name === formik.values.country
+                      )?.alpha2Code ?? ""
+                        ? postcodeValidator(
+                            e.target.value,
+                            countries_flag?.find(
+                              (i) => i.name === formik.values.country
+                            )?.alpha2Code ?? ""
+                          )
+                        : false
+                    );
+                  }}
+                  value={formik.values.zipCode}
+                  fontFamily="inherit"
+                />
+
+                {isValidCode !== null && (
+                  <Text
+                    color={isValidCode ? "#0BA162" : "red"}
+                    fontSize="12px"
+                    mt="5px"
+                  >
+                    {isValidCode ? "Valid zip code" : "Invalid zip code"}
+                  </Text>
+                )}
+              </FormControl>
+            </Flex>
+            <Button
+              size="large"
+              variant="primary"
+              bgColor={btn_color}
+              label="Confirm Payment"
+              width={"100%"}
+              mt={"12px"}
+              onClick={(e: any) => {
+                handleSubmit(e);
+              }}
+              isLoading={payingToStripe}
+              disabled={payingToStripe}
+              _hover={{
+                opacity: 0.8,
+                _after: {
+                  background: btn_color,
+                },
+              }}
+              fontFamily="inherit"
+            />
+
+            <Flex
+              mt={"16px"}
+              mb={"10px"}
+              w="100%"
+              justify="center"
+              gap={"6px"}
+              justifyContent={"center"}
+              //     alignItems={"end"}
+            >
+              <Text
+                fontSize={"14px"}
+                lineHeight={"22px"}
+                color={"#4D5760"}
+                // fontFamily={headerFontFamily}
+              >
+                Payments are secured and encrypted
+              </Text>
+              <LockIcon mt={0.5} boxSize={6} />
+            </Flex>
+          </Box>
+        </Collapse>
+      ) : (
+        <></>
+      )}
+    </Box>
+  );
+};
+
+export default CheckoutDetailsForm;

package/src/components/DrawerModal.tsx

@@ -0,0 +1,63 @@
+/** @format */
+
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+} from "@chakra-ui/react";
+
+interface IModal {
+  headerText?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  children: any;
+  modalBodyStyle?: any;
+}
+
+const DrawerModal = ({
+  isOpen,
+  onClose,
+  children,
+  headerText,
+  modalBodyStyle,
+}: IModal) => {
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+      <DrawerOverlay bg="rgba(219, 222, 229, 0.6)" />
+      <DrawerContent
+        borderRadius="20px"
+        mb="10px"
+        ml={{ base: "2%", md: "initial" }}
+        w={{ base: "96%", md: "456px" }}
+        maxW={{ base: "96%", md: "456px" }}
+        mr={{ md: "10px" }}
+        p="0"
+        maxHeight={{ lg: "95vh", base: "80vh" }}
+        fontFamily="Bricolage Grotesque"
+      >
+        {headerText && (
+          <>
+            <DrawerCloseButton />
+            <DrawerHeader
+              fontSize="18px"
+              lineHeight="24px"
+              fontWeight={700}
+              px={{ base: "16px", lg: "24px" }}
+              fontFamily="inherit"
+            >
+              {headerText}
+            </DrawerHeader>
+          </>
+        )}
+        <DrawerBody p="16px" {...modalBodyStyle}>
+          {children}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default DrawerModal;