diff --git a/next/components/atoms/GreenTab.js b/next/components/atoms/GreenTab.js index cb3819e5..3a3eff03 100644 --- a/next/components/atoms/GreenTab.js +++ b/next/components/atoms/GreenTab.js @@ -4,6 +4,7 @@ import { Tab } from "@chakra-ui/tabs"; export default function GreenTab({ children, ...style }) { return ( - - + + Deletar table Você tem certeza em deletar esse table? Uma vez deletada, todas as informações dele e de Columns serão excluídas em consequência. diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index 0b35f60e..6e388d0b 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -1,12 +1,12 @@ import { Box, + Stack, HStack, VStack, Drawer, DrawerOverlay, DrawerContent, useDisclosure, - Avatar, Text, Accordion, AccordionItem, @@ -15,16 +15,20 @@ import { AccordionIcon, useBoolean, Divider, + Image, + Menu, + MenuButton, + MenuList, + MenuItem } from "@chakra-ui/react"; import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router" -import { MenuDropdown } from "./MenuDropdown"; import cookies from "js-cookie"; +import { MenuDropdown } from "./MenuDropdown"; import { useCheckMobile } from "../../hooks/useCheckMobile.hook" import ControlledInput from "../atoms/ControlledInput"; import Link from "../atoms/Link"; import RoundedButton from "../atoms/RoundedButton"; -import SectionText from "../atoms/SectionText"; import BDLogoProImage from "../../public/img/logos/bd_logo_pro"; import BDLogoEduImage from "../../public/img/logos/bd_logo_edu"; @@ -33,6 +37,7 @@ import FarBarsIcon from "../../public/img/icons/farBarsIcon"; import SearchIcon from "../../public/img/icons/searchIcon"; import CrossIcon from "../../public/img/icons/crossIcon"; import RedirectIcon from "../../public/img/icons/redirectIcon"; +import SettingsIcon from "../../public/img/icons/settingsIcon"; function MenuDrawer({ isOpen, onClose, links }) { return ( @@ -123,6 +128,266 @@ function MenuDrawer({ isOpen, onClose, links }) { ); } +function MenuDrawerUser({ isOpen, onClose}) { + const router = useRouter() + + const links = [ + {name: "Perfil público", value: "profile"}, + {name: "Conta", value: "account"}, + {name: "Senha", value: "new_password"}, + {name: "Planos e pagamento", value: "plans_and_payment"}, + {name: "Acessos", value: "accesses"}, + ] + + return ( + + + + window.open("/", "_self")} + /> + + + + + + Dadinho + dadinho@basedosdados.org + + + + + + + + + Configurações + + + + + + {links.map((elm, index) => { + return ( + { + onClose() + router.push({pathname: "/user/dev", query: elm.value})} + } + >{elm.name} + ) + })} + + + + + + ) +} + +function MenuUser ({ userData, onOpen, onClose }) { + const timerRef = useRef() + const [isOpenMenu, setIsOpenMenu] = useState(false) + + const btnMouseEnterEvent = () => { + setIsOpenMenu(true) + } + const btnMouseLeaveEvent = () => { + timerRef.current = setTimeout(() => { + setIsOpenMenu(false) + }, 100) + } + const menuListMouseEnterEvent = () => { + clearTimeout(timerRef.current) + timerRef.current = undefined + setIsOpenMenu(true) + } + const menuListMouseLeaveEvent = () => { + setIsOpenMenu(false) + } + + if(useCheckMobile()) { + return ( + onOpen()} + > + + + ) + } else { + return ( + + + + + + + + + + + + + Dadinho + + + dadinho@basedosdados.org + + + + window.open("/user/dev", "_self")} + > + + + Configurações + + + + + ) + } + +} + function SearchInput ({ status }) { const router = useRouter() const { query } = router @@ -321,20 +586,7 @@ function DesktopLinks({ links, position = false, path }) { {!statusSearch && {userData ? ( - - - - {userData.username} - - + ) : ( <> {/* @@ -344,7 +596,7 @@ function DesktopLinks({ links, position = false, path }) { Cadastrar - */} + )} @@ -353,10 +605,11 @@ function DesktopLinks({ links, position = false, path }) { ); } -export default function Menu({}) { +export default function MenuNav({}) { const router = useRouter() const { route } = router - const menuDisclosure = useDisclosure(); + const menuDisclosure = useDisclosure() + const menuUserMobile = useDisclosure() const divRef = useRef() const bannerRef = useRef() const [isScrollDown, setIsScrollDown] = useState(false) @@ -503,18 +756,12 @@ export default function Menu({}) { /> - + + {useCheckMobile() && userData && + + } + diff --git a/next/components/organisms/PostDatasetForm.js b/next/components/organisms/PostDatasetForm.js index 35d8d4fb..8aa842f8 100644 --- a/next/components/organisms/PostDatasetForm.js +++ b/next/components/organisms/PostDatasetForm.js @@ -282,7 +282,7 @@ export default function PostDatasetForm({ - + Deletar dataset Você tem certeza em deletar esse dataset? Uma vez deletado, todas as informações dele e de Table e Columns serão excluídas em consequência. diff --git a/next/pages/404.js b/next/pages/404.js index 7ab14cee..15765a65 100644 --- a/next/pages/404.js +++ b/next/pages/404.js @@ -1,10 +1,11 @@ import FourOrFourTemplate from "../components/templates/404"; +import { isMobileMod } from "../hooks/useCheckMobile.hook" import { MainPageTemplate } from "../components/templates/main"; export default function FourOFour() { return ( - + ) } \ No newline at end of file diff --git a/next/pages/500.js b/next/pages/500.js index a88a8def..58a025c6 100644 --- a/next/pages/500.js +++ b/next/pages/500.js @@ -1,10 +1,11 @@ import FiveHundredTemplate from "../components/templates/500"; +import { isMobileMod } from "../hooks/useCheckMobile.hook" import { MainPageTemplate } from "../components/templates/main"; export default function InternalServerError() { return ( - + ) } \ No newline at end of file diff --git a/next/pages/precos.js b/next/pages/precos.js index 56fe7d22..b3266ac4 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -27,348 +27,352 @@ import CheckIcon from "../public/img/icons/checkIcon"; import CrossIcon from "../public/img/icons/crossIcon"; import InfoIcon from '../public/img/icons/infoIcon'; -export default function Price() { - const CardPrice = ({ - colorBanner, - title, - badge, - subTitle, - personConfig, - textResource, - resources = [], - button, - hasServiceTerms= false - }) => { - const { isOpen, onOpen, onClose } = useDisclosure() - const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person) - const [priceValue, setPriceValue] = useState(personConfig.price) - const [linkStripe, setLinkStripe] = useState("") +export const CardPrice = ({ + colorBanner, + title, + badge, + subTitle, + personConfig, + textResource, + resources = [], + button, + hasServiceTerms= false +}) => { + const { isOpen, onOpen, onClose } = useDisclosure() + const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person) + const [priceValue, setPriceValue] = useState(personConfig.price) + const [linkStripe, setLinkStripe] = useState("") - const addRemovePersonPrice = (action) => { - if(action === "add") { - const personAdd = nubmerOfPerson + 1 - setNubmerOfPerson(personAdd) - setPriceValue(150 + 50 * personAdd) - } - if(action === "remove") { - const personRemove = nubmerOfPerson - 1 - setNubmerOfPerson(personRemove) - setPriceValue(150 + 50 * personRemove) - } + const addRemovePersonPrice = (action) => { + if(action === "add") { + const personAdd = nubmerOfPerson + 1 + setNubmerOfPerson(personAdd) + setPriceValue(150 + 50 * personAdd) + } + if(action === "remove") { + const personRemove = nubmerOfPerson - 1 + setNubmerOfPerson(personRemove) + setPriceValue(150 + 50 * personRemove) } + } - return ( - + - - - - Termos de serviço - - - + + + Termos de serviço + + + - - + + Fechar + + {linkStripe !== "" && + { + onClose() + window.open(linkStripe, "_blank") + setLinkStripe("") + }} > - Fechar + Concordar - {linkStripe !== "" && - { - onClose() - window.open(linkStripe, "_blank") - setLinkStripe("") - }} - > - Concordar - - } - - - + } + + + + + - - - {title} - {badge && - {badge}} - + {title} + {badge && + {badge}} + - {subTitle} + {subTitle} - - R$ {priceValue} + + R$ {priceValue} + /mês + + {/* inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"} */} + + + {personConfig.text && + <> /mês - - {/* inclui {nubmerOfPerson} pessoa{nubmerOfPerson >= 2 && "s"} */} + textAlign="initial" + > + {personConfig.text} + - - {personConfig.text && - <> + + - {personConfig.text} - + lineHeight="24px" + letterSpacing="0.5px" + padding="7px 20px 9px" + >{nubmerOfPerson - personConfig.person} + + + + } + + + + + + + {textResource} + + {resources.map((elm, i) => { + return ( - - + {nubmerOfPerson - personConfig.person} - + > + {elm.name} + + {elm.tooltip && + + + + } - - } - + ) + })} - - - {textResource} - - - {resources.map((elm, i) => { - return ( - - - - {elm.name} - - {elm.tooltip && - - - - } - - ) - })} - + { + if(button?.noHasModal) return window.open(button.href, "_self") + onOpen() + setLinkStripe(button.href) + }} + border={button.color && `1px solid ${button.colorText}`} + > + {button.text} + - - { - onOpen() - setLinkStripe(button.href) - }} - border={button.color && `1px solid ${button.colorText}`} - > - {button.text} - - - - {hasServiceTerms && - Leia os - { - onOpen() - setLinkStripe("") - }} - >termos de serviço - . - - } - - + {hasServiceTerms && + Leia os + { + onOpen() + setLinkStripe("") + }} + >Termos de serviço + . + + } + - ) - } - + + ) +} + +export default function Price() { return ( @@ -406,18 +410,18 @@ export default function Price() { Para você descobrir o potencial da
plataforma de dados} + subTitle={Para você descobrir o potencial da plataforma de dados} personConfig={{ price: "0" }} @@ -435,6 +439,7 @@ export default function Price() { text: "Explorar recursos", href: "/dataset", target: "_self", + noHasModal: true, color: "#FFF", colorText: "#42B0FF" }} @@ -461,7 +466,7 @@ export default function Price() { Para sua empresa ganhar tempo
e qualidade em decisões} personConfig={{ diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js index d64841fe..d7e13544 100755 --- a/next/pages/quem-somos.js +++ b/next/pages/quem-somos.js @@ -94,6 +94,7 @@ const HistoryBox = ({ children, title, date, image }) => { marginBottom={isMobileMod() && "0"} background="transparent" maxWidth="1000px" + margin="24px" > {title} { + return ( + {text} + ) +} + +const TitleTextForm = ({ children, ...props }) => { + return ( + {children} + ) +} + +const ExtraInfoTextForm = ({children, ...props}) => { + return ( + {children} + ) +} + +const ModalGeneral = ({ + children, + isOpen, + onClose, + isCentered = true, + propsModalContent +}) => { + return ( + + + + + {children[0]} + + + + {children[1]} + + + + {children[2]} + + + + ) +} + +const ProfileConfiguration = () => { + const [formData, setFormData] = useState({ username: "", firstName: "" , lastName: "", picture: "" }) + const [errors, setErrors] = useState({ username: "", firstName: "" , lastName: "" }) + + return ( + + + + + + + {errors.username} + + + + + + + + {errors.firstName} + + + + + + + + {errors.lastName} + + + + + + + Tornar o e-mail de acesso à sua conta visível para o público. + + + + + + + + {errors.website} + + + + + + + + + + + + + + + + + + + + + + + + Ao preencher os campos desta página, você nos dá consentimento para compartilhar essas informações onde quer que o seu perfil de usuário apareça. + + + + Atualizar perfil + + + + + Foto de perfil + + + + + + + + + + + + + + ) +} + +const Account = () => { + const emailModal = useDisclosure() + const eraseModalAccount = useDisclosure() + const [emailSent, setEmailSent] = useState(false) + const [showPassword, setShowPassword] = useState(true) + const [formData, setFormData] = useState({ email: "", password: "" }) + const [errors, setErrors] = useState({ email: "", password: ""}) + + return ( + + + {emailSent ? + + setEmailSent(false)}> + + Voltar + + + { + setEmailSent(false) + emailModal.onClose() + }} + /> + + : + + Alterar e-mail + + + } + + {emailSent ? + + + + Confirme seu endereço de e-mail + Enviamos uma confirmação de e-mail para + dadinho@basedosdados.org + Confira sua caixa de entrada e siga as
+instruções enviadas no e-mail para completar a alteração. + + : + + + Insira o seu novo endereço de e-mail. Enviaremos as instruções para você completar a alteração. + + + + + + + {errors.email} + + + + + + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + + {errors.password} + + + + } + + {emailSent ? + <> + : + setEmailSent(true)} + > + Enviar e-mail + + } + + + + + Tem certeza que deseja deletar sua conta? + + + + + + Após deletar sua conta, todos os dados serão permanentemente removidos e não poderão ser recuperados. + + + + + eraseModalAccount.onClose()} + > + Cancelar + + + + Deletar + + + + + + E-mail + meuemail@gmail.com + emailModal.onOpen()} + >Alterar e-mail + + + + Exportar dados da conta + Saiba como seus dados são armazenados em nossos Termos de Uso e Políticas de Privacidade.{!isMobileMod() &&
} Para exportar os dados da sua conta, entre em contato conosco. + Entre em contato + + + + Deletar conta + Após a exclusão, não será possível recuperar o acesso à sua conta. + eraseModalAccount.onOpen()} + >Deletar minha conta + + + ) +} + +const NewPassword = () => { + const newPasswordModal = useDisclosure() + const [formData, setFormData] = useState({ + password: "", + newPassword: "", + confirmPassword: "" + }) + const [errors, setErrors] = useState({ + password: "", + newPassword: "", + regexPassword: {}, + confirmPassword: "" + }) + const [showPassword, setShowPassword] = useState(true) + const [showNewPassword, setShowNewPassword] = useState(true) + const [showConfirmPassword, setShowConfirmPassword] = useState(true) + + return ( + + + + + + + + Sua senha foi alterada com sucesso + Agora você pode utilizar a nova senha para acessar sua
conta na Base dos Dados. + + + + newPasswordModal.onClose()} + > + Continuar nas configurações + + + window.open("/", "_self")} + > + Ir para a página inicial + + + + + + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + setShowPassword(!showPassword) + }} + elmRight={showPassword ? + + : + + } + /> + + {errors.password} + + window.open("./password-recovery", "_self")} + >Esqueceu a senha? + + + + + + setShowNewPassword(!showNewPassword) + }} + elmRight={showNewPassword ? + + : + + } + /> + 0 ? "#D93B3B" : "#7D7D7D"} + fontFamily= "Ubuntu" + fontSize= "12px" + fontWeight= "400" + lineHeight= "16px" + letterSpacing= "0.3px" + display="flex" + flexDirection="row" + gap="4px" + alignItems="flex-start" + > 0 ? "flex" : "none"}/> Certifique-se que a senha tenha no mínimo: + + Ter no mínimo 8 caracteres + Pelo menos uma letra maiúscula e minúscula + Um dígito + E um caractere especial + + + + + + setShowConfirmPassword(!showConfirmPassword) + }} + elmRight={showConfirmPassword ? + + : + + } + /> + + {errors.confirmPassword} + + + + newPasswordModal.onOpen()} + > + Atualizar senha + + + ) +} + +const PlansAndPayment = () => { + const PlansModal = useDisclosure() + + const resources={ + "bdGratis" : [ + {name: "Tabelas tratadas"}, + {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."}, + {name: "Acesso em nuvem"}, + {name: "Acesso via SQL, Python, R e Stata"}, + {name: "Integração com ferramentas BI"}, + {name: "Download até 200.000 linhas"}, + {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."}], + "bdPro" : [ + {name: "Dezenas de bases de alta frequência atualizadas"} + ], + "bdEmpresas" : [ + {name: "Acesso para 10 contas"}, + {name: "Suporte prioritário via email e Discord"} + ] + } + + const TabContent = ({children}) => { + return ( + + {children} + + ) + } + + return ( + + + + + Compare os planos + + + + + Para você descobrir o potencial da plataforma de dados} + personConfig={{ + price: "0" + }} + textResource="Recursos:" + resources={[ + {name: "Tabelas tratadas"}, + {name: "Dados integrados", tooltip: "Nossa metodologia de padronização e compatibilização de dados permite que você cruze tabelas de diferentes instituições e temas de maneira simplificada."}, + {name: "Acesso em nuvem"}, + {name: "Acesso via SQL, Python, R e Stata"}, + {name: "Integração com ferramentas BI"}, + {name: "Download até 200.000 linhas"}, + {name: "Até 1TB de processamento", tooltip: "Limite mensal gratuito oferecido pelo Google Cloud."} + ]} + button={{ + text: "Explorar recursos", + href: "/dataset", + target: "_self", + noHasModal: true, + color: "#FFF", + colorText: "#42B0FF" + }} + /> + + Para você ter acesso aos
dados mais atualizados} + personConfig={{ + price: "47" + }} + textResource="Todos os recursos da BD Grátis, mais:" + resources={[ + {name: "Dezenas de bases de alta frequência atualizadas"}, + ]} + button={{ + text: "Iniciar teste grátis", + href: "https://buy.stripe.com/8wM01TeVQ3kg0mIeV4?locale=pt" + }} + hasServiceTerms + /> + + Para sua empresa ganhar tempo
e qualidade em decisões} + personConfig={{ + price: "350" + }} + textResource="Todos os recursos da BD Pro, mais:" + resources={[ + {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} + ]} + button={{ + text: "Assine já", + href: "https://buy.stripe.com/00g4i93d8f2Y5H24gr?locale=pt" + }} + hasServiceTerms + /> + + + + + + Planos + Pagamento + + + + + + + Plano atual + BD Grátis + + + PlansModal.onOpen()} + >Compare os planos + Faça o upgrade + + + + + + Inclui + {resources.bdGratis.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} + + + + Não inclui + {resources.bdPro.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} + {resources.bdEmpresas.map((elm, index) => { + return ( + + + {elm.name} + {elm.tooltip && + + + + } + + ) + })} + + PlansModal.onOpen()} + > + Veja tudo e compare os planos + + + + + + + + + + + + + ) +} + +const Accesses = () => { + + return ( + + + + + Adicionar usuário + + + + + + + Usuário + + + Acesso + + + + + + + + Dadinho + dadinho@basedosdados.org + + + + + + Administrador + + + + + ) +} + +export default function UserPage() { + const router = useRouter() + const { query } = router + const [sectionSelected, setSectionSelected] = useState(0) + + const choices = [ + {bar: "Perfil público", title: "Perfil público", value: "profile", index: 0}, + {bar: "Conta", title: "Conta", value: "account", index: 1}, + {bar: "Senha", title: "Alterar senha", value: "new_password", index: 2}, + {bar: "Planos e pagamento", title: "Planos e pagamento", value: "plans_and_payment", index: 3}, + {bar: "Acessos", title: "Gerenciar acessos", value: "accesses", index: 4}, + ] + + useEffect(() => { + const key = Object.keys(query) + const removeElem = key.indexOf("username") + if (removeElem !== -1) key.splice(removeElem, 1) + + if (key.length === 0) return + + for (const elements of choices) { + if (elements.value === key[0]) { + setSectionSelected(elements.index) + } + } + }, [query]) + + return ( + + + Configurações + + + + {choices.map((section, index) => ( + + router.push({pathname: "/user/dev", query: section.value})} + > + {section.bar} + + + ))} + + + + {choices[sectionSelected].title} + + + {sectionSelected === 0 && } + {sectionSelected === 1 && } + {sectionSelected === 2 && } + {sectionSelected === 3 && } + {sectionSelected === 4 && } + + + + + ) +} diff --git a/next/public/img/icons/settingsIcon.js b/next/public/img/icons/settingsIcon.js new file mode 100644 index 00000000..c5345385 --- /dev/null +++ b/next/public/img/icons/settingsIcon.js @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +const SettingsIcon = createIcon({ + displayName: "settings", + viewBox: "0 0 22 22", + path: ( + + ) +}) + +export default SettingsIcon