ajust payment method

basedosdados · Jan 26, 2024 · 66c982b · 66c982b
1 parent dd81f6d
commit 66c982b
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 56 deletions.
diff --git a/next/components/organisms/PaymentSystem.js b/next/components/organisms/PaymentSystem.js
@@ -14,6 +14,7 @@ import {
 } from "@stripe/react-stripe-js";
 import cookies from "js-cookie";
 import Button from "../atoms/RoundedButton";
+import styles from "../../styles/paymentSystem.module.css";
 
 import {
   getUser
@@ -41,18 +42,23 @@ const PaymentForm = ({ userData }) => {
 
     const user = await getUser(userData?.email)
     cookies.set('userBD', JSON.stringify(user))
-    window.open(`/user/${user?.username}?plans_and_payment`, "_self")
+    window.location.reload()
   }
 
   return (
     <VStack
       spacing={0}
       alignItems="start"
     >
-      <form onSubmit={handlerSubmit}>
-        <PaymentElement />
+      <form
+        className={styles.content}
+        onSubmit={handlerSubmit}
+      >
+        <AddressElement options={{mode:'billing'}}/>
 
-        <Button width="100%" type="submit" marginTop="20px !important">Iniciar inscrição</Button>
+        <PaymentElement className={styles.payment}/>
+
+        <Button width="100%" type="submit" marginTop="6px !important">Iniciar inscrição</Button>
       </form>
     </VStack>
   )
@@ -93,26 +99,42 @@ export default function PaymentSystem({ userData, plan }) {
     fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap' }],
   }
 
-  const customerCreatPost = async () => {
+  const customerCreatPost = async (id) => {
     let secret = ""
 
-    const subscriptionCreate = await createSubscription("19")
+    const subscriptionCreate = await createSubscription(id)
     if(subscriptionCreate?.clientSecret) {
       secret = subscriptionCreate?.clientSecret
     }
     if(secret !== "") return setClientSecret(secret)
 
     const result = await createCustomer()
     if(result?.id) {
-      const subscriptionCreate = await createSubscription("19")
+      const subscriptionCreate = await createSubscription(id)
       secret = subscriptionCreate?.clientSecret
     }
 
     return setClientSecret(secret)
   }
 
+  async function customerCreat(plan) {
+    const prices = await getPrices()
+
+    const findPlan = (slug, slots) => {
+      const foundPlan = prices.find(p => {
+        return p.node.productSlug === slug && p.node.productSlots === slots
+      })
+
+      return foundPlan ? foundPlan.node : null
+    }
+
+    const idPlan = findPlan(plan.slug, plan.slots)?._id
+
+    customerCreatPost(idPlan)
+  }
+
   useEffect(() => {
-    customerCreatPost()
+    customerCreat(plan)
   }, [])
 
   const SkeletonBox = ({ type, ...props }) => {
@@ -133,11 +155,6 @@ export default function PaymentSystem({ userData, plan }) {
       <SkeletonBox type="text"/>
       <SkeletonBox type="box"/>
 
-      <Stack flexDirection="row" spacing={0} gap="8px" marginBottom="16px !important">
-        <SkeletonBox type="smallBox"/>
-        <SkeletonBox type="smallBox"/>
-      </Stack>
-
       <SkeletonBox type="text"/>
       <SkeletonBox type="box"/>
 
@@ -158,7 +175,6 @@ export default function PaymentSystem({ userData, plan }) {
 
   return (
     <Elements options={options} stripe={stripePromise}>
-      <AddressElement options={{mode:'billing'}}/>
       <PaymentForm userData={userData}/>
     </Elements>
   )

diff --git a/next/pages/api/stripe/getPrices.js b/next/pages/api/stripe/getPrices.js
@@ -16,6 +16,8 @@ export default async function getPrices() {
                 _id
                 amount
                 productName
+                productSlug
+                productSlots
               }
             }
           }

diff --git a/next/pages/precos.js b/next/pages/precos.js
@@ -309,21 +309,34 @@ export const CardPrice = ({
           flexDirection="column"
           gap="16px"
         >
-          <RoundedButton
-            width="100%"
-            color={button.colorText || "#FFF"}
-            backgroundColor={button.color || "#42B0FF"}
-            onClick={() => {
-              if(button.onClick) return button.onClick()
-              if(button?.noHasModal) return window.open(button.href, "_self")
-              onOpen()
-              setLinkStripe(button.href)
-            }}
-            border={button.color && `1px solid ${button.colorText}`}
-            {...button.styles}
-          >
-            {button.text}
-          </RoundedButton>
+          {button.isCurrentPlan ?
+            <Text 
+              width="100%"
+              textAlign="center"
+              color="#252A32"
+              cursor="default"
+              fontWeight="400"
+              fontFamily="Ubuntu"
+            >
+              {button.text}
+            </Text>
+          :
+            <RoundedButton
+              width="100%"
+              color={button.colorText || "#FFF"}
+              backgroundColor={button.color || "#42B0FF"}
+              onClick={() => {
+                if(button.onClick) return button.onClick()
+                if(button?.noHasModal) return window.open(button.href, "_self")
+                onOpen()
+                setLinkStripe(button.href)
+              }}
+              border={button.color && `1px solid ${button.colorText}`}
+              {...button.styles}
+            >
+              {button.text}
+            </RoundedButton>
+          }
 
           <Text
             display="flex"
@@ -368,6 +381,9 @@ export const CardPrice = ({
 export default function Price() {
   let userData = getUserDataJson()
 
+  const ifBDPro = userData?.proSubscription === "bd_pro"
+  const ifBDProEmp = userData?.proSubscription === "bd_pro_empresas"
+
   return (
     <MainPageTemplate paddingX="24px">
       <Head>
@@ -453,8 +469,10 @@ export default function Price() {
               {name: "Dezenas de bases de alta frequência atualizadas"},
             ]}
             button={{
-              text: `Iniciar teste grátis`,
-              href: "https://buy.stripe.com/8wM01TeVQ3kg0mIeV4?locale=pt"
+              text: ifBDPro ? "Plano atual" : `Iniciar teste grátis`,
+              href: userData === null ? "/user/login" :`/user/${userData.username}?plans_and_payment`,
+              isCurrentPlan: ifBDPro ? true : false,
+              noHasModal: true
             }}
             hasServiceTerms
           />
@@ -472,8 +490,10 @@ export default function Price() {
               {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"}
             ]}
             button={{
-              text: "Iniciar teste grátis",
-              href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt"
+              text: ifBDProEmp ? "Plano atual" : "Iniciar teste grátis",
+              href: userData === null ? "/user/login" :`/user/${userData.username}?plans_and_payment`,
+              isCurrentPlan: ifBDProEmp ? true : false,
+              noHasModal: true
             }}
             hasServiceTerms
           />

diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js
@@ -1377,7 +1377,7 @@ const NewPassword = ({ userInfo }) => {
 }
 
 const PlansAndPayment = ({ userData }) => {
-  const [plan, setPlan] = useState("")
+  const [plan, setPlan] = useState({})
   const PaymentModal = useDisclosure()
   const PlansModal = useDisclosure()
   const CancelModalPlan = useDisclosure()
@@ -1483,7 +1483,9 @@ const PlansAndPayment = ({ userData }) => {
   const cancelSubscripetion = async () => {
     const subs = await getSubscriptionActive(userData.email)
     const result = await removeSubscription(subs[0]?.node._id)
-    window.location.reload()
+    setTimeout(() => {
+      window.location.reload()
+    }, 2000)
   }
 
   return (
@@ -1494,7 +1496,9 @@ const PlansAndPayment = ({ userData }) => {
         isCentered={isMobileMod() ? false : true}
         propsModalContent={{
           minWidth: "fit-content",
-          maxWidth: "fit-content"
+          maxWidth: "fit-content",
+          maxHeight: isMobileMod() ? "100%" : "700px",
+          overflowY: "auto"
         }}
       >
         <Stack spacing={0} marginBottom="16px">
@@ -1592,19 +1596,11 @@ const PlansAndPayment = ({ userData }) => {
             button={{
               text: `${userData?.proSubscription === "bd_pro" ? "Plano atual" : "Iniciar teste grátis"}`,
               onClick: userData?.proSubscription === "bd_pro" ? () => {} : () => {
-                setPlan("bd_pro")
+                setPlan({slug:"bd_pro", slots: "0"})
                 PlansModal.onClose()
                 PaymentModal.onOpen()
               },
-              styles: 
-                userData?.proSubscription === "bd_pro" && {
-                  color: "#252A32",
-                  backgroundColor: "#FFF",
-                  boxShadow: "none",
-                  cursor: "default",
-                  _hover: {transform: "none"},
-                  fontWeight: "400"
-                }
+              isCurrentPlan: userData?.proSubscription === "bd_pro" ? true : false,
             }}
             hasServiceTerms
           />
@@ -1624,19 +1620,11 @@ const PlansAndPayment = ({ userData }) => {
             button={{
               text: `${userData?.proSubscription === "bd_pro_empresas" ? "Plano atual" : "Iniciar teste grátis"}`,
               onClick: userData?.proSubscription === "bd_pro_empresas" ? () => {} : () => {
-                setPlan("bd_pro_empresas")
+                setPlan({slug:"bd_pro_empresas", slots: "10"})
                 PlansModal.onClose()
                 PaymentModal.onOpen()
               },
-              styles: 
-              userData?.proSubscription === "bd_pro_empresas" && {
-                color: "#252A32",
-                backgroundColor: "#FFF",
-                boxShadow: "none",
-                cursor: "default",
-                _hover: {transform: "none"},
-                fontWeight: "400"
-              }
+              isCurrentPlan: userData?.proSubscription === "bd_pro_empresas" ? true : false,
             }}
             hasServiceTerms
           />

diff --git a/next/styles/paymentSystem.module.css b/next/styles/paymentSystem.module.css
@@ -0,0 +1,5 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,8 @@ export default async function getPrices() { @@
                     _id
                     amount
                     productName
+                    productSlug
+                    productSlots
                   }
                 }
               }
@@ Expand Down @@