Merge pull request #955 from basedosdados/staging

Staging
basedosdados · Sep 19, 2024 · 5f70186 · 5f70186
2 parents 1ddf5e1 + 2afedef
commit 5f70186
Show file tree

Hide file tree

Showing 12 changed files with 582 additions and 98 deletions.
diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js
@@ -440,7 +440,7 @@ export default function ColumnsTable({
           </Tooltip>
         </Box>
         <Box
-          display={header.pt === "Nome" ? "flex" : "none"}
+          display={header.pt === "Nome" ? {base: "none", lg: "flex"} : "none"}
           position="absolute"
           right="0"
           top="0"
@@ -546,13 +546,14 @@ export default function ColumnsTable({
                   <Th
                     role="row"
                     position="sticky"
+                    left={0}
                     top="0"
                     boxSizing="content-box"
                     alignItems="center"
                     border="none !important"
                     backgroundColor="#F7F7F7"
                     padding="0 !important"
-                    zIndex={5}
+                    zIndex={6}
                   >
                     <Box padding="14px 22px 14px 30px" >
                       <Checkbox
@@ -569,13 +570,22 @@ export default function ColumnsTable({
                       width="100%"
                       backgroundColor="#DEDFE0"
                     />
+                    <Box
+                      display={{base: "flex", lg: "none"}}
+                      position="absolute"
+                      right="0"
+                      top="0"
+                      height="100%"
+                      width="1px"
+                      backgroundColor="#DEDFE0"
+                    />
                   </Th>
                 }
 
                 <TableHeader
                   header={headers[0]}
                   zIndex={5}
-                  left={{base: "none", lg:"0"}}
+                  left={{base: "none", lg:"72px"}}
                 />
 
                 {headers.map((elm, i) => (
@@ -594,7 +604,9 @@ export default function ColumnsTable({
                   {template === "checks" &&
                     <Td
                       role="cell"
-                      position="relative"
+                      position="sticky"
+                      left={0}
+                      zIndex={5}
                       padding="0 !important"
                       backgroundColor="#FFF"
                       borderColor="#DEDFE0"
@@ -609,17 +621,27 @@ export default function ColumnsTable({
                           onChange={() => handleCheckboxChange(elm.node.name)}
                         />
                       </Box>
+                      <Box
+                        display={{base: "flex", lg: "none"}}
+                        position="absolute"
+                        right="0"
+                        top="0"
+                        height="100%"
+                        width="1px"
+                        backgroundColor="#DEDFE0"
+                      />
                     </Td>
                   }
 
                   <TableValue
                     position="sticky"
-                    left={{base: "none", lg:"0"}}
+                    left={{base: "none", lg:"72px"}}
                     zIndex="4"
                     backgroundColor="#FFF"
                   >
                     {elm?.node?.name ? elm.node.name : "Não informado"}
                     <Box
+                      display={{base: "none", lg: "flex"}}
                       position="absolute"
                       right="0"
                       top="0"

diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js
@@ -9,7 +9,8 @@ import BodyText from "../atoms/BodyText"
 import { isMobileMod } from "../../hooks/useCheckMobile.hook"
 
 import YoutubeIcon from "../../public/img/icons/youtubeIcon";
-import TwitterIcon from "../../public/img/icons/twitterIcon";
+// import TwitterIcon from "../../public/img/icons/twitterIcon";
+import BlueskyIcon from "../../public/img/icons/blueskyIcon";
 import DiscordIcon from "../../public/img/icons/discordIcon";
 import GithubIcon from "../../public/img/icons/githubIcon";
 import LinkedinIcon from "../../public/img/icons/linkedinIcon";
@@ -262,7 +263,8 @@ export default function Footer({ template, ocult = false }) {
           </HStack>
 
           <HStack spacing={3}>
-            <SocialLink title="Twitter" href="https://twitter.com/basedosdados" icon={<TwitterIcon alt="twitter da BD" {...IconKey}/>}/>
+            {/* <SocialLink title="Twitter" href="https://twitter.com/basedosdados" icon={<TwitterIcon alt="twitter da BD" {...IconKey}/>}/> */}
+            <SocialLink title="Bluesky" href="https://bsky.app/profile/basedosdados.bsky.social" icon={<BlueskyIcon alt="bluesky da BD" {...IconKey}/>}/>
             <SocialLink title="Discord" href="https://discord.gg/huKWpsVYx4" icon={<DiscordIcon alt="discord da BD" {...IconKey}/>}/>
             <SocialLink title="GitHub" href="https://github.com/basedosdados" icon={<GithubIcon alt="github da BD" {...IconKey}/>}/>
             <SocialLink title="LinkedIn" href="https://www.linkedin.com/company/base-dos-dados/mycompany/" icon={<LinkedinIcon alt="linkedin da BD" {...IconKey}/>}/>

diff --git a/next/components/organisms/DatasetResource.js b/next/components/organisms/DatasetResource.js
@@ -23,7 +23,7 @@ export default function DatasetResource({
   const [informationRequests, setInformationRequests] = useState([])
 
   const pushQuery = (key, value) => {
-    router.push({
+    router.replace({
       pathname: `/dataset/${query.dataset}`,
       query: { [key]: value }
     },

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,87 @@ 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",
+        borderRadius: "8px",
+        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 +153,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 +165,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)
+}