Merge pull request #948 from basedosdados/feat/909

Feat/909
basedosdados · Sep 16, 2024 · b072612 · b072612
2 parents 296673f + d7a8c7a
commit b072612
Show file tree

Hide file tree

Showing 7 changed files with 515 additions and 89 deletions.
diff --git a/next/components/organisms/PaymentSystem.js b/next/components/organisms/PaymentSystem.js
@@ -53,6 +53,7 @@ const PaymentForm = ({ onSucess, onErro, clientSecret}) => {
   return (
     <VStack
       spacing={0}
+      flex={1}
       alignItems="start"
     >
       <form
@@ -63,60 +64,86 @@ const PaymentForm = ({ onSucess, onErro, clientSecret}) => {
 
         <Button
           type="submit"
-          height="40px"
-          fontSize="20px"
-          lineHeight="30px"
+          fontSize="14px"
+          lineHeight="20px"
           fontFamily="Roboto"
           fontWeight="500"
+          borderRadius="8px"
           pointerEvents={isLoading ? "none" : "default"}
-          color={"#FFFFFF"}
-          backgroundColor={"#0D99FC"}
+          color="#FFFFFF"
+          backgroundColor="#2B8C4D"
           _hover={{
-            color: "#FAFAFA",
-            backgroundColor: "#0B89E2"
+            backgroundColor: "#22703E"
           }}
         >
-          {isLoading ? <Spinner /> : "Iniciar inscrição"}
+          {isLoading ? <Spinner /> : "Confirmar pagamento"}
         </Button>
       </form>
     </VStack>
   )
 }
 
-export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
+export default function PaymentSystem({ userData, plan, coupon, onSucess, onErro }) {
   const [clientSecret, setClientSecret] = useState("")
 
   const appearance = {
     theme: "stripe",
     variables: {
+      fontFamily: 'Roboto, sans-serif',
       fontSizeBase: "16px",
       fontSizeSm: "16px",
-      fontFamily: "Ubuntu",
       borderRadius: "14px",
-      colorPrimary: "#42B0FF",
-      colorTextPlaceholder: "#A3A3A3",
-      colorDanger: "#D93B3B",
-      colorBackground: "#FFF",
+      colorPrimary: "#2B8C4D",
+      colorTextPlaceholder: "#464A51",
+      colorDanger: "#BF3434",
+      colorBackground: "#FFFFFF",
       colorText: "#252A32",
     },
     rules: {
       ".Input": {
-        border: "1px solid #DEDFE0",
+        border: "2px solid #EEEEEE",
+        backgroundColor: "#EEEEEE"
       },
       ".Input:hover": {
-        border: "2px solid #42B0FF",
+        backgroundColor:"#DEDFE0",
+        borderColor: "#DEDFE0"
       },
+      ".Input:focus": {
+        backgroundColor: "#FFFFFF",
+        border:"2px solid #0068C5",
+        borderColor: "#0068C5",
+        boxShadow: "none",
+        outline: "none"
+      },
+      ".Input:focus:hover": {
+        backgroundColor: "#FFFFFF",
+        borderColor: "#0068C5",
+      },
+      ".Tab": {
+        border: "2px solid #ececec",
+        backgroundColor: "#FFF",
+        boxShadow: "none"
+      },
+      ".Tab:focus": {
+        boxShadow: "none"
+      },
+      ".Tab--selected": {
+        boxShadow: "none"
+      },
+      ".Tab--selected:focus": {
+        boxShadow: "none"
+      }
     }
   }
 
   const options = {
     clientSecret,
     appearance,
-    fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap' }],
+    fonts: [{ cssSrc: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' }],
   }
 
-  const customerCreatPost = async (id) => {
-    const clientSecret = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}`, {method: "GET"})
+  const customerCreatPost = async (id, coupon) => {
+    const clientSecret = await fetch(`/api/stripe/createSubscription?p=${btoa(id)}&c=${btoa(coupon)}`, {method: "GET"})
       .then(res => res.json())
 
     if (clientSecret) {
@@ -125,8 +152,9 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
   }
 
   useEffect(() => {
-    customerCreatPost(plan.id)
-  }, [])
+    setClientSecret("")
+    customerCreatPost(plan, coupon)
+  }, [plan, coupon])
 
   const SkeletonBox = ({ type, ...props }) => {
     if(type === "text") return <Skeleton height="17px" borderRadius="12px" startColor="#F0F0F0" endColor="#F3F3F3" {...props}/>
@@ -136,7 +164,7 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
   }
 
   if(!clientSecret) return (
-    <Stack>
+    <Stack flex={1}>
       <Stack width="100%" flexDirection="row" spacing={0} gap="8px" marginBottom="16px !important">
         <Stack width="100%"  spacing={0} gap="8px">
           <SkeletonBox type="text"/>

diff --git a/next/pages/api/stripe/createSubscription.js b/next/pages/api/stripe/createSubscription.js
@@ -2,7 +2,24 @@ import axios from "axios";
 
 const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
 
-async function createSubscription(id, token) {
+async function createSubscription({id, coupon,  token}) {
+  const query = coupon !== "" ?
+    `
+      mutation {
+        createStripeSubscription (priceId: ${id}, coupon: "${coupon}") {
+          clientSecret
+        }
+      }
+    `
+  :
+    `
+      mutation {
+        createStripeSubscription (priceId: ${id}) {
+          clientSecret
+        }
+      }
+    `
+
   try {
     const res = await axios({
       url: API_URL,
@@ -11,13 +28,7 @@ async function createSubscription(id, token) {
         Authorization: `Bearer ${token}`
       },
       data: {
-        query: `
-        mutation {
-          createStripeSubscription (priceId: ${id}) {
-            clientSecret
-          }
-        }
-        `
+        query: query
       }
     })
     const data = res.data
@@ -30,7 +41,11 @@ async function createSubscription(id, token) {
 
 export default async function handler(req, res) {
   const token = req.cookies.token
-  const result = await createSubscription(atob(req.query.p), token)
+  const result = await createSubscription({
+    id: atob(req.query.p),
+    coupon: atob(req.query.c),
+    token: token
+  })
 
   if(result.errors) return res.status(500).json({error: result.errors})
   if(result === "err") return res.status(500).json({error: "err"})

diff --git a/next/pages/api/stripe/validateStripeCoupon.js b/next/pages/api/stripe/validateStripeCoupon.js
@@ -0,0 +1,47 @@
+import axios from "axios";
+
+const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql`
+
+async function validateStripeCoupon({id, coupon, token}) {
+  try {
+    const res = await axios({
+      url: API_URL,
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`
+      },
+      data: {
+        query:`
+          mutation {
+            validateStripeCoupon (priceId: ${id}, coupon: "${coupon}") {
+              isValid
+              discountAmount
+              duration
+              durationInMonths
+              errors
+            }
+          }
+        `
+      }
+    })
+    const data = res.data
+    return data
+  } catch (error) {
+    console.error(error)
+    return "err"
+  }
+}
+
+export default async function handler(req, res) {
+  const token = req.cookies.token
+  const result = await validateStripeCoupon({
+    id: atob(req.query.p),
+    coupon: atob(req.query.c),
+    token: token
+  })
+
+  if(result.errors) return res.status(500).json({error: result.errors})
+  if(result === "err") return res.status(500).json({error: "err"})
+
+  res.status(200).json(result?.data?.validateStripeCoupon)
+}
diff --git a/next/pages/precos.js b/next/pages/precos.js
@@ -85,7 +85,7 @@ export const CardPrice = ({
           <Box
             display="flex"
             flexDirection="row"
-            height="50px"
+            height="60px"
             alignItems="center"
           >
             <Text
@@ -151,7 +151,7 @@ export const CardPrice = ({
                 flexDirection="row"
                 alignItems="center"
                 gap="8px"
-                _last={{marginBottom:"24px"}}
+                _last={{marginBottom:"0px !important"}}
               >
                 <CheckIcon 
                   width="24px"
@@ -233,7 +233,7 @@ export const CardPrice = ({
               fontFamily="Roboto"
               fontWeight="500"
               fontSize="20px"
-              lineHeight="30px"
+              lineHeight="36px"
               _hover={{
                 backgroundColor: "#0B89E2"
               }}
@@ -252,7 +252,7 @@ export const CardPrice = ({
             fontSize="16px"
             lineHeight="24px"
             fontFamily="Roboto"
-            height="20px"
+            height="24px"
           >Leia os
             <Text
               as="a"
@@ -436,7 +436,7 @@ export function SectionPrice() {
           ]}
           button={{
             text: isBDPro.isCurrentPlan && planIntervalPlan() ? "Plano atual" : hasSubscribed ? "Assinar" : "Iniciar teste grátis",
-            href: username === null ? `/user/login?q=pro&i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&q=pro&i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}`,
+            href: username === null ? `/user/login?i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}`,
             isCurrentPlan: isBDPro.isCurrentPlan && planIntervalPlan(),
           }}
         />
@@ -453,7 +453,7 @@ export function SectionPrice() {
           ]}
           button={{
             text: isBDEmp.isCurrentPlan && planIntervalPlan() ? "Plano atual" : hasSubscribed ? "Assinar" : "Iniciar teste grátis",
-            href: username === null ? `/user/login?q=empresas&i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&q=empresas&i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}`,
+            href: username === null ? `/user/login?i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}`,
             isCurrentPlan: isBDEmp.isCurrentPlan && planIntervalPlan(),
           }}
         />