Merge pull request #938 from basedosdados/staging

Staging
basedosdados · Sep 9, 2024 · a7420d5 · a7420d5
2 parents 2066171 + 5fe36fb
commit a7420d5
Show file tree

Hide file tree

Showing 18 changed files with 367 additions and 194 deletions.
diff --git a/next/components/atoms/ObservationLevelTable.js b/next/components/atoms/ObservationLevelTable.js
@@ -17,7 +17,25 @@ export default function ObservationLevel({ resource }) {
   keys.forEach((elm) => {
     const value = resource?.observationLevels[elm]
 
-    const newValue = [value?.entity?.name || "Não informado", value?.columns[0]?.name || "Não informado"]
+    const valueEntity = () => {
+      if(value.entity.name) return value.entity.name
+      return "Não informado"
+    }
+
+    const valueColumns = () => {
+      let columns = []
+
+      if(value?.columns[0]) {
+        Object.values(value.columns).map((column) => {
+          columns.push(column?.name)
+        })
+      } else {
+        columns = ["Não informado"]
+      }
+      return columns.join(", ")
+    }
+
+    const newValue = [valueEntity(), valueColumns()]
     array.push(newValue)
   })
 

diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js
@@ -111,7 +111,7 @@ export default function ColumnsTable({
     let user
     if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD"))
 
-    if(user?.proSubscriptionStatus === "active") return true
+    if(user?.internalSubscription?.edges?.[0]?.node?.isActive === true) return true
     return false
   }
 

diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js
@@ -582,17 +582,17 @@ export default function DataInformationQuery({ resource }) {
                     marginLeft="4px"
                     as="a"
                     target="_blank"
-                    href="https://basedosdados.github.io/mais/colab_data/"
+                    href="https://basedosdados.org/precos"
                     color="#0068C5"
                     _hover={{color: "#0057A4"}}
                   >assinantes dos nossos planos pagos
-                  </Text>. No entanto, você pode acessar a tabela gratuitamente utilizando SQL, Python, R ou Stata. Considere atualizar para um plano pago para fazer o download.
+                  </Text>. No entanto, você pode acessar a tabela gratuitamente utilizando SQL, Python ou R. Considere atualizar para um plano pago para fazer o download.
                 </AlertDiscalimerBox>
               }
               {downloadWarning === "biggest1gb" &&
                 <AlertDiscalimerBox
                   type="error"
-                  text={`O tamanho da tabela ultrapassou o limite permitido para download, de 1 GB. Você pode acessar os dados em SQL, Python, R e Stata.`}
+                  text={`O tamanho da tabela ultrapassou o limite permitido para download, de 1 GB. Você pode acessar os dados em SQL, Python ou R.`}
                 />
               }
 

diff --git a/next/components/molecules/TemporalCoverageDisplay.js b/next/components/molecules/TemporalCoverageDisplay.js
@@ -168,7 +168,8 @@ export function TemporalCoverageBar ({ value }) {
   return (
     <HStack 
       position="relative"  
-      width="325px"
+      width="100%"
+      maxWidth="325px"
       height="65px"
       alignItems="normal"
       spacing={0}
@@ -219,7 +220,11 @@ export function TemporalCoverageBar ({ value }) {
         maxWidth="160px"
         label="Acesso liberado para o período"
       >
-        <Box flex={3} display={values?.["0"] ? "" : "none"}>
+        <Box
+          flex={3}
+          marginRight={values?.["3"] ? "" : {base:"24px !important", lg: "0"}}
+          display={values?.["0"] ? "" : "none"}
+        >
           <Box
             width="100%"
             height="24px"
@@ -312,7 +317,7 @@ export function TemporalCoverageBar ({ value }) {
         maxWidth="160px"
         label="Faça o upgrade para liberar o período"
       >
-        <Box flex={2} display={values?.["3"] ? "" : "none"}>
+        <Box flex={2} marginRight={{base:"24px !important", lg: "0"}}  display={values?.["3"] ? "" : "none"}>
           <Box
             as="a"
             cursor="pointer"

diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js
@@ -284,7 +284,7 @@ export default function BdmTablePage({ id }) {
       </SkeletonText>
 
       <Stack spacing="12px" marginBottom="40px !important">
-        <StackSkeleton width="240px" height="20px">
+        <StackSkeleton width="300px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -297,15 +297,15 @@ export default function BdmTablePage({ id }) {
         </StackSkeleton>
 
         <StackSkeleton
-          width="350px"
+          width="100%"
           height={!isLoading ? "fit-content" : "65px"}
         >
           <TemporalCoverageBar value={resource?.fullCoverage}/>
         </StackSkeleton>
       </Stack>
 
       <Stack spacing="12px" marginBottom="40px !important">
-        <StackSkeleton width="160px" height="20px">
+        <StackSkeleton width="200px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -323,7 +323,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="300px" height="20px">
+        <StackSkeleton width="380px" height="20px">
           <Text
             fontFamily="Roboto"
             fontWeight="500"
@@ -521,7 +521,7 @@ export default function BdmTablePage({ id }) {
 
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="205px" height="20px">
+        <StackSkeleton width="260px" height="20px">
           <TooltipText
             text="Partições no BigQuery"
             info="As partições são divisões feitas em uma tabela para facilitar o gerenciamento e a consulta aos dados. Ao segmentar uma tabela grande em partições menores, a quantidade de bytes lidos é reduzida, o que ajuda a controlar os custos e melhora o desempenho da consulta."
@@ -545,7 +545,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="190px" height="20px">
+        <StackSkeleton width="300px" height="20px">
           <TooltipText
             text="Nível da observação"
             info="Indica qual a menor granularidade possível de análise com aquele dado. Por exemplo, uma tabela com nível da observação de estado permite que façamos uma análise no país (por ser mais amplo que estado), mas não uma análise por município (que já seria um recorte mais específico)."
@@ -577,7 +577,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack marginBottom="40px !important">
-        <StackSkeleton width="180px" height="20px">
+        <StackSkeleton width="240px" height="20px">
           <TooltipText
             text="Arquivos auxiliares"
             info="Os arquivos dão mais contexto e ajudam a entender melhor os dados disponíveis. Podem incluir notas técnicas, descrições de coleta e amostragem, etc."
@@ -628,7 +628,7 @@ export default function BdmTablePage({ id }) {
       </Stack>
 
       <Stack>
-        <StackSkeleton width="155px" height="20px">
+        <StackSkeleton width="240px" height="20px">
           <TooltipText
             text="Fontes originais"
             info="São links para páginas externas à plataforma com informações úteis sobre o conjunto de dados. Tentamos sempre fornecer o caminho mais próximo possível à fonte para baixar os dados originais."
@@ -647,38 +647,43 @@ export default function BdmTablePage({ id }) {
             lineHeight="20px"
             color="#464A51"
           >
-            {resource?.rawDataSource?.[0]?._id && resource?.rawDataSource?.[0]?.dataset?._id ? 
-              <Text
-                as="a"
-                target="_blank"
-                display="flex"
-                flexDirection="row"
-                gap="8px"
-                alignItems="center"
-                fontFamily="Roboto"
-                fontWeight="400"
-                fontSize="14px"
-                lineHeight="20px"
-                color="#0068C5"
-                fill="#0068C5"
-                _hover={{
-                  fill: "#0057A4",
-                  color: "#0057A4"
-                }}
-                href={`/dataset/${resource.rawDataSource[0].dataset._id}?raw_data_source=${resource.rawDataSource[0]._id}`}
-              >
-                {resource.rawDataSource[0].name}
-              </Text>
-            :
-              "Não informado"
+            {resource?.rawDataSource?.[0]?._id ?
+              Object.values(resource?.rawDataSource).map((elm, i) => {
+                return (
+                  <Text
+                    key={i}
+                    as="a"
+                    target="_blank"
+                    display="flex"
+                    flexDirection="row"
+                    gap="8px"
+                    alignItems="center"
+                    fontFamily="Roboto"
+                    fontWeight="400"
+                    fontSize="14px"
+                    lineHeight="20px"
+                    color="#0068C5"
+                    fill="#0068C5"
+                    _hover={{
+                      fill: "#0057A4",
+                      color: "#0057A4"
+                    }}
+                    href={`/dataset/${elm?.dataset?._id}?raw_data_source=${elm?._id}`}
+                  >
+                    {elm?.name}
+                  </Text>
+                )
+              }) 
+              :
+                "Não informado"
             }
           </Text>
         </StackSkeleton> 
       </Stack>
 
       <Divider marginY="40px !important" borderColor="#DEDFE0"/>
 
-      <StackSkeleton width="190px" height="20px" marginBottom="20px !important">
+      <StackSkeleton width="240px" height="20px" marginBottom="20px !important">
         <Text
           fontFamily="Roboto"
           fontWeight="500"

diff --git a/next/components/organisms/PaymentSystem.js b/next/components/organisms/PaymentSystem.js
@@ -2,13 +2,13 @@ import {
   Stack,
   VStack,
   Skeleton,
+  Spinner,
 } from "@chakra-ui/react"
 import { useState, useEffect } from 'react';
 import { loadStripe } from '@stripe/stripe-js';
 import {
   Elements,
   PaymentElement,
-  AddressElement,
   useElements,
   useStripe,
 } from "@stripe/react-stripe-js";
@@ -18,10 +18,12 @@ import styles from "../../styles/paymentSystem.module.css";
 const stripePromise = loadStripe(process.env.NEXT_PUBLIC_KEY_STRIPE)
 
 const PaymentForm = ({ onSucess, onErro, clientSecret}) => {
+  const [isLoading, setIsLoading] = useState(false)
   const stripe = useStripe()
   const elements = useElements()
 
   const handlerSubmit = async (e) => {
+    setIsLoading(true)
     e.preventDefault()
 
     const isSetupIntent = clientSecret.startsWith('seti_');
@@ -57,11 +59,25 @@ const PaymentForm = ({ onSucess, onErro, clientSecret}) => {
         className={styles.content}
         onSubmit={handlerSubmit}
       >
-        <AddressElement options={{mode:'billing'}}/>
-
         <PaymentElement className={styles.payment}/>
 
-        <Button width="100%" type="submit" marginTop="6px !important">Iniciar inscrição</Button>
+        <Button
+          type="submit"
+          height="40px"
+          fontSize="20px"
+          lineHeight="30px"
+          fontFamily="Roboto"
+          fontWeight="500"
+          pointerEvents={isLoading ? "none" : "default"}
+          color={"#FFFFFF"}
+          backgroundColor={"#0D99FC"}
+          _hover={{
+            color: "#FAFAFA",
+            backgroundColor: "#0B89E2"
+          }}
+        >
+          {isLoading ? <Spinner /> : "Iniciar inscrição"}
+        </Button>
       </form>
     </VStack>
   )
@@ -121,15 +137,17 @@ export default function PaymentSystem({ userData, plan, onSucess, onErro }) {
 
   if(!clientSecret) return (
     <Stack>
-      <SkeletonBox type="text"/>
-      <SkeletonBox type="box"/>
-
-      <SkeletonBox type="text"/>
-      <SkeletonBox type="box"/>
+      <Stack width="100%" flexDirection="row" spacing={0} gap="8px" marginBottom="16px !important">
+        <Stack width="100%"  spacing={0} gap="8px">
+          <SkeletonBox type="text"/>
+          <SkeletonBox type="smallBox" width="100%"/>
+        </Stack>
+        <Stack width="100%" spacing={0} gap="8px">
+          <SkeletonBox type="text"/>
+          <SkeletonBox type="smallBox" width="100%"/>
+        </Stack>
+      </Stack>
 
-      <SkeletonBox type="text"/>
-      <SkeletonBox type="box"/>
-
       <SkeletonBox type="text"/>
       <SkeletonBox type="box"/>
 

diff --git a/next/content/FAQ.js b/next/content/FAQ.js
@@ -48,7 +48,7 @@ export const QuestionFAQ = [
         <div id="download" style={{display: "flex", flexDirection: "column"}}>
           <p>
           Sim, você pode baixar o arquivo CSV completo das tabelas tratadas direto na plataforma.
-          No entanto, tabelas com mais de 200.000 linhas só podem ser acessados através do nosso data lake no BigQuery ou dos nossos pacotes em Python, R e Stata.
+          No entanto, tabelas com mais de 200.000 linhas só podem ser acessados através do nosso data lake no BigQuery ou dos nossos pacotes em Python e R.
           </p>
         </div>
       )
@@ -64,7 +64,7 @@ export const QuestionFAQ = [
         <div id="download-limit" style={{display: "flex", flexDirection: "column"}}>
           <p>
             O limite para download dos dados na nossa plataforma é de 200.000 linhas.
-            Para acessar tabelas que ultrapassam esse limite, utilize nosso <i>datalake</i> no BigQuery ou nossos pacotes em Python, R e Stata.
+            Para acessar tabelas que ultrapassam esse limite, utilize nosso <i>datalake</i> no BigQuery ou nossos pacotes em Python e R.
           </p>
         </div>
       )
@@ -94,7 +94,7 @@ export const QuestionFAQ = [
       return (
         <div id="tables" style={{display: "flex", flexDirection: "column"}}>
           <p>
-          São tabelas prontas para análise, disponíveis via SQL, Python, R ou Stata.
+          São tabelas prontas para análise, disponíveis via SQL, Python e R.
           O processo de tratamento das tabelas envolve a padronização de nomes de variáveis e compatibilização de códigos, o que permite que o cruzamento de tabelas de diferentes instituições e temas seja tão simples quanto qualquer outra consulta.
           </p>
         </div>
@@ -147,13 +147,13 @@ export const QuestionFAQ = [
           <p>
             Você pode consultar as tabelas tratadas BD+ de diferentes maneiras.
             Além de fazer o download direto na plataforma,
-            é possível explorar os dados com SQL através do BigQuery ou com os pacotes em Python, R e Stata.
+            é possível explorar os dados com SQL através do BigQuery ou com os pacotes em Python e R.
           </p>
         </div>
       )
     },
     categories: ["Dados"],
-    keywords: "acesso, consulta, tratada, tratado, BD+, download, baixar, pacote, SQL, BigQuery, Python, R, Stata",
+    keywords: "acesso, consulta, tratada, tratado, BD+, download, baixar, pacote, SQL, BigQuery, Python, R",
     id: "access-tables"
   },
   {
@@ -231,15 +231,15 @@ export const QuestionFAQ = [
         <div id="packages" style={{display: "flex", flexDirection: "column"}}>
           <p>
             Nossos pacotes permitem o acesso ao <i>datalake</i> público direto do seu computador ou ambiente de desenvolvimento.
-            Para começar a explorar nossos dados em Python, R ou Stata,
+            Para começar a explorar nossos dados em Python ou R,
             siga os tutoriais de instalação dos pacotes presentes na nossa <a href="https://basedosdados.github.io/mais/access_data_packages/" target="_blank">
             documentação</a>.
           </p>
         </div>
       )
     },
     categories: ["Dados"],
-    keywords: "pacote, Python, R, Stata, instalação, documentação",
+    keywords: "pacote, Python, R, instalação, documentação",
     id: "packages"
   },
   {

diff --git a/next/content/caseStudies.js b/next/content/caseStudies.js
@@ -325,7 +325,7 @@ export const CaseStudiesContent = [
           <p class="bodyText">
             A BD também disponibiliza em sua plataforma os dados atualizados de receitas e despesas,
             possibilitando o download das tabelas tratadas ou o acesso por ferramentas de análise de dados,
-            como SQL, Python, R e Stata.
+            como SQL, Python e R.
           </p>
 
           <p class="bodyText">

diff --git a/next/content/serviceTerms.js b/next/content/serviceTerms.js
@@ -60,7 +60,7 @@ export default function ServiceTerms() {
         gap="8px"
       >
         <TitleText>2. Descrição do Serviço</TitleText>
-        <SecText>2.1. Nossos serviços consistem em uma assinatura mensal que concede aos seus assinantes o acesso a diversos dados exclusivos, harmonizados e atualizados na plataforma da Base dos Dados. O acesso se dá via os pacotes Python, R ou Stata da Base dos Dados, ou via BigQuery, serviço de armazenamento de dados de baixo custo e totalmente gerenciado do Google para análises.</SecText>
+        <SecText>2.1. Nossos serviços consistem em uma assinatura mensal que concede aos seus assinantes o acesso a diversos dados exclusivos, harmonizados e atualizados na plataforma da Base dos Dados. O acesso se dá via os pacotes Python ou R da Base dos Dados, ou via BigQuery, serviço de armazenamento de dados de baixo custo e totalmente gerenciado do Google para análises.</SecText>
       </VStack>
 
       <VStack