mainstack-payments 0.0.0 → 0.0.2

package/src/components/CheckoutForm.tsx

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

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