diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js index f848b2a12..3b5060d7b 100644 --- a/next/components/molecules/Menu.js +++ b/next/components/molecules/Menu.js @@ -194,7 +194,7 @@ function MenuDrawer({ userData, isOpen, onClose, links }) { ); } -function MenuDrawerUser({ userData, isOpen, onClose}) { +function MenuDrawerUser({ userData, isOpen, onClose, isUserPro}) { const router = useRouter() const links = [ @@ -236,35 +236,50 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { color="#252A32" fontFamily="Roboto" letterSpacing="0.1px" - fontSize="14px" - fontWeight="400" - lineHeight="27px" + fontSize="12px" + fontWeight="500" + lineHeight="18px" >{userData?.username || ""} {userData?.email || ""} + + + {isUserPro ? "Pro" : "Grátis"} + - - + + Configurações @@ -272,30 +287,31 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { - - {links.map((elm, index) => { - return ( - { - onClose() - router.push({pathname: `/user/${userData.username}`, query: elm.value})} - } - >{elm.name} - ) - })} - + + + {links.map((elm, index) => { + return ( + { + onClose() + router.push({pathname: `/user/${userData.username}`, query: elm.value})} + } + >{elm.name} + ) + })} + @@ -306,7 +322,7 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { cursor="pointer" spacing={0} flexDirection="row" - padding="16px 0" + padding="14px 0" alignItems="center" color="#252A32" fill="#D0D0D0" @@ -322,10 +338,9 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { Sair @@ -336,7 +351,7 @@ function MenuDrawerUser({ userData, isOpen, onClose}) { ) } -function MenuUser ({ userData, onOpen, onClose }) { +function MenuUser ({ userData, onOpen, onClose, isUserPro }) { const timerRef = useRef() const [isOpenMenu, setIsOpenMenu] = useState(false) @@ -440,21 +455,37 @@ function MenuUser ({ userData, onOpen, onClose }) { fontFamily="Roboto" letterSpacing="0.1px" fontSize="12px" - fontWeight="400" - lineHeight="16px" + fontWeight="500" + lineHeight="18px" > {userData?.username ? userData?.username : ""} {userData?.email ? userData?.email : ""} + + + {isUserPro ? "Pro" : "Grátis"} + Configurações @@ -496,10 +526,9 @@ function MenuUser ({ userData, onOpen, onClose }) { Sair @@ -618,7 +647,14 @@ function SearchInputUser ({ user }) { ) } -function DesktopLinks({ userData, links, position = false, path, userTemplate = false }) { +function DesktopLinks({ + userData, + links, + position = false, + path, + userTemplate = false, + isUserPro +}) { function LinkMenuDropDown ({ url, text, icon }) { const [flag, setFlag] = useBoolean() @@ -765,7 +801,7 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate = {userData ? ( - + ) : ( <> @@ -840,6 +876,14 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } const [lastScrollY, setLastScrollY] = useState(0) const [menuVisible, setMenuVisible] = useState(true) + const isUserPro = () => { + let user + if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD")) + + if(user?.internalSubscription?.edges?.[0]?.node?.isActive === true) return true + return false + } + const handleScroll = () => { const currentScrollY = window.scrollY if (currentScrollY > lastScrollY) { @@ -991,6 +1035,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } position={isScrollDown} path={route} userTemplate={userTemplate} + isUserPro={isUserPro()} /> } @@ -1005,12 +1050,14 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false } userData={userData} onOpen={menuUserMobile.onOpen} onClose={menuUserMobile.onClose} + isUserPro={isUserPro()} /> } diff --git a/next/components/molecules/TemporalCoverageDisplay.js b/next/components/molecules/TemporalCoverageDisplay.js index f534fcfec..81fa877ff 100644 --- a/next/components/molecules/TemporalCoverageDisplay.js +++ b/next/components/molecules/TemporalCoverageDisplay.js @@ -9,10 +9,12 @@ import { ModalCloseButton } from "@chakra-ui/react"; import { useState, useEffect } from "react"; +import cookies from "js-cookie"; import { CalendarComunIcon } from "../../public/img/icons/calendarIcon"; import { SectionPrice } from "../../pages/precos"; import { ModalGeneral } from "./uiUserPage"; import RedirectIcon from "../../public/img/icons/redirectIcon"; +import CheckIcon from "../../public/img/icons/checkIcon"; export function TemporalCoverage ({ value, @@ -132,6 +134,14 @@ export function TemporalCoverageBar ({ value }) { const [values, setValues] = useState({}) const plansModal = useDisclosure() + const isUserPro = () => { + let user + if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD")) + + if(user?.internalSubscription?.edges?.[0]?.node?.isActive === true) return true + return false + } + const TextData = ({ string, ...style }) => { return ( - + plansModal.onOpen()} + onClick={() => { + if(isUserPro()) return + plansModal.onOpen()} + } > PAGO - + {isUserPro() ? + + : + + } @@ -388,13 +414,13 @@ export function TemporalCoverageBar ({ value }) { display="flex" alignItems="center" flexDirection="column" - right={0} top="-3px" + right="-4px" > diff --git a/next/pages/api/user/changeUserGcpEmail.js b/next/pages/api/user/changeUserGcpEmail.js new file mode 100644 index 000000000..4a247fd2f --- /dev/null +++ b/next/pages/api/user/changeUserGcpEmail.js @@ -0,0 +1,44 @@ +import axios from "axios"; + +const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` + +async function changeUserGcpEmail(email, token) { + try { + const res = await axios({ + url: API_URL, + method: "POST", + headers: { + Authorization: `Bearer ${token}` + }, + data: { + query: ` + mutation { + changeUserGcpEmail (email: "${email}"){ + ok + errors + } + } + ` + } + }) + const data = res.data?.data?.changeUserGcpEmail + return data + } catch (error) { + console.error(error) + return "err" + } +} + +export default async function handler(req, res) { + const token = () => { + if(req.query.q) return atob(req.query.q) + return req.cookies.token + } + + const result = await changeUserGcpEmail(atob(req.query.p), 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) +} diff --git a/next/pages/api/user/getUser.js b/next/pages/api/user/getUser.js index d9749b807..b38d3de83 100644 --- a/next/pages/api/user/getUser.js +++ b/next/pages/api/user/getUser.js @@ -20,6 +20,7 @@ async function getUser(id, token) { isAdmin isActive isEmailVisible + gcpEmail picture username firstName diff --git a/next/pages/api/user/isEmailInGoogleGroup.js b/next/pages/api/user/isEmailInGoogleGroup.js new file mode 100644 index 000000000..31472609a --- /dev/null +++ b/next/pages/api/user/isEmailInGoogleGroup.js @@ -0,0 +1,44 @@ +import axios from "axios"; + +const API_URL= `${process.env.NEXT_PUBLIC_API_URL}/api/v1/graphql` + +async function isEmailInGoogleGroup(email, token) { + try { + const res = await axios({ + url: API_URL, + method: "POST", + headers: { + Authorization: `Bearer ${token}` + }, + data: { + query: ` + query { + isEmailInGoogleGroup (email: "${email}"){ + ok + errors + } + } + ` + } + }) + const data = res.data?.data?.isEmailInGoogleGroup + return data + } catch (error) { + console.error(error) + return "err" + } +} + +export default async function handler(req, res) { + const token = () => { + if(req.query.q) return atob(req.query.q) + return req.cookies.token + } + + const result = await isEmailInGoogleGroup(atob(req.query.p), 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) +} diff --git a/next/pages/dataset/index.js b/next/pages/dataset/index.js index 8ecbdcaa9..451a776bb 100644 --- a/next/pages/dataset/index.js +++ b/next/pages/dataset/index.js @@ -13,6 +13,7 @@ import Head from "next/head"; import ReactPaginate from "react-paginate"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; +import cookies from "js-cookie"; import { isMobileMod, useCheckMobile } from "../../hooks/useCheckMobile.hook"; import { triggerGAEvent } from "../../utils"; import { withPages } from "../../hooks/pages.hook"; @@ -76,6 +77,14 @@ export default function SearchDatasetPage() { setFetchApi(fetchFunc) }, [query]) + const isUserPro = () => { + let user + if(cookies.get("userBD")) user = JSON.parse(cookies.get("userBD")) + + if(user?.internalSubscription?.edges?.[0]?.node?.isActive === true) return true + return false + } + function flattenArray(arr) { let result = [] @@ -584,6 +593,7 @@ export default function SearchDatasetPage() { - + { fontSize="14px" top="24px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} onClick={() => { setEmailSent(false) emailModal.onClose() @@ -749,7 +749,7 @@ const Account = ({ userInfo }) => { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> } @@ -888,7 +888,7 @@ instruções enviadas no e-mail para completar a alteração. @@ -1190,7 +1190,7 @@ const NewPassword = ({ userInfo }) => { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -1448,12 +1448,20 @@ const PlansAndPayment = ({ userData }) => { const [couponInfos, setCouponInfos] = useState({}) const [couponInputFocus, setCouponInputFocus] = useState(false) const [coupon, setCoupon] = useState("") + const [hasOpenEmailModal, setHasOpenEmailModal] = useState(false) + const [emailGCP, setEmailGCP] = useState(userData?.gcpEmail || userData?.email) + const [emailGCPFocus, setEmailGCPFocus] = useState(false) + const [errEmailGCP, setErrEmailGCP] = useState(false) + const [isLoadingEmailChange, setIsLoadingEmailChange] = useState(false) + const PaymentModal = useDisclosure() + const EmailModal = useDisclosure() const SucessPaymentModal = useDisclosure() const ErroPaymentModal = useDisclosure() const PlansModal = useDisclosure() const CancelModalPlan = useDisclosure() const AlertChangePlanModal = useDisclosure() + const [isLoading, setIsLoading] = useState(false) const [isLoadingH, setIsLoadingH] = useState(false) const [isLoadingCanSub, setIsLoadingCanSub] = useState(false) @@ -1518,7 +1526,10 @@ const PlansAndPayment = ({ userData }) => { const value = Object.values(plans).find(elm => elm._id === plan) if(value?.interval === "month") setToggleAnual(false) setCheckoutInfos(value) - PaymentModal.onOpen() + if(!hasOpenEmailModal) { + EmailModal.onOpen() + setHasOpenEmailModal(true) + } }, [plan, plans]) useEffect(() => { @@ -1541,6 +1552,7 @@ const PlansAndPayment = ({ userData }) => { }} ], resources : [ + {name: "Bases de baixa frequência atualizadas"}, {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"}, @@ -1691,9 +1703,23 @@ const PlansAndPayment = ({ userData }) => { const reg = new RegExp("(?<=:).*") const [ id ] = reg.exec(userData.id) - const user = await fetch(`/api/user/getUser?p=${btoa(id)}`, {method: "GET"}) - .then(res => res.json()) - cookies.set('userBD', JSON.stringify(user)) + let user + let attempts = 0 + const maxAttempts = 10 + const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)) + + while (!user?.internalSubscription?.edges?.[0]?.node && attempts < maxAttempts) { + user = await fetch(`/api/user/getUser?p=${btoa(id)}`, { method: "GET" }) + .then((res) => res.json()) + + if (user?.internalSubscription?.edges?.[0]?.node) { + cookies.set("userBD", JSON.stringify(user)) + break + } + + attempts++ + await delay(10000) + } if(isLoadingH === true) return window.open("/", "_self") window.open(`/user/${userData.username}?plans_and_payment`, "_self") @@ -1785,6 +1811,33 @@ const PlansAndPayment = ({ userData }) => { ) } + async function handlerEmailGcp() { + setErrEmailGCP(false) + setIsLoadingEmailChange(true) + + function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + return emailRegex.test(email) + } + if(!isValidEmail(emailGCP)) return setErrEmailGCP(true) + + const response = await fetch(`/api/user/changeUserGcpEmail?p=${btoa(emailGCP)}`) + .then(res => res.json()) + + if(response.ok) { + if(emailGCP !== userData?.email) { + if(emailGCP !== userData?.gcpEmail) { + triggerGAEvent("troca_do_email_gcp",`checkout_de_pagamento`) + } + } + setIsLoadingEmailChange(false) + EmailModal.onClose() + PaymentModal.onOpen() + } else { + setErrEmailGCP(true) + } + } + useEffect(() => { if(valueCoupon === "") { setCoupon("") @@ -1819,6 +1872,16 @@ const PlansAndPayment = ({ userData }) => { isCentered={isMobileMod() ? false : true} > + + Passo 2 de 2 + { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -1888,29 +1951,36 @@ const PlansAndPayment = ({ userData }) => { - {toggleAnual ? - changeIntervalPlanCheckout()} - /> - : - changeIntervalPlanCheckout()} - /> - } - Desconto anual + + {toggleAnual ? + changeIntervalPlanCheckout()} + /> + : + changeIntervalPlanCheckout()} + /> + } + Desconto anual + { @@ -1984,7 +2054,7 @@ const PlansAndPayment = ({ userData }) => { display="flex" alignItems="center" justifyContent="center" - width="fit-content" + width={{base: "100%", lg: "fit-content"}} height="44px" borderRadius="8px" padding="10px 34px" @@ -2075,6 +2145,39 @@ const PlansAndPayment = ({ userData }) => { A partir do {couponInfos?.duration === "once" && 2} {couponInfos?.duration === "repeating" && couponInfos?.durationInMonths + 1}º {formattedPlanInterval(checkoutInfos?.interval, true)} {!hasSubscribed && "e 7º dia"}, o total a pagar será de {checkoutInfos?.amount?.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}/{formattedPlanInterval(checkoutInfos?.interval, true)}. } + + + { + PaymentModal.onClose() + EmailModal.onOpen() + }} + > + Voltar + + @@ -2094,6 +2197,224 @@ const PlansAndPayment = ({ userData }) => { onSucess={() => openModalSucess()} onErro={() => openModalErro()} /> + + + { + PaymentModal.onClose() + EmailModal.onOpen() + }} + > + Voltar + + + + + + + {/* email gcp */} + { + setEmailGCP(userData?.gcpEmail || userData?.email) + setErrEmailGCP(false) + EmailModal.onClose() + }} + propsModalContent={{ + width: "100%", + maxWidth:"1008px", + margin: "24px", + }} + isCentered={isMobileMod() ? false : true} + > + + + Passo 1 de 2 + + + + + + + E-mail de acesso ao BigQuery + + + + O seu e-mail precisa ser uma Conta Google para garantir acesso exclusivo aos dados pelo BigQuery. Já preenchemos com o e-mail que você usou ao criar sua conta na nossa plataforma. Caso necessite usar outro e-mail para acessar o BigQuery, basta editá-lo abaixo. + + + + E-mail de acesso + + + + + + + {errEmailGCP && + + Por favor, insira um e-mail válido. + + } + + + + { + setEmailGCP(userData?.gcpEmail || userData?.email) + setErrEmailGCP(false) + EmailModal.onClose() + + }} + > + Cancelar + + + handlerEmailGcp()} + > + {isLoadingEmailChange ? + + : + "Próximo" + } @@ -2101,6 +2422,10 @@ const PlansAndPayment = ({ userData }) => { {/* success */} setIsLoading(true)} > @@ -2109,7 +2434,7 @@ const PlansAndPayment = ({ userData }) => { fontSize="14px" top="28px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -2130,24 +2455,23 @@ const PlansAndPayment = ({ userData }) => { fill="#34A15A" /> - Parabéns! + Assinatura efetuada com sucesso! - Seu pagamento foi efetuado com sucesso e seu plano foi atualizado. + O acesso aos dados foi concedido para o e-mail {emailGCP}. Se precisar alterar o e-mail de acesso, você pode fazer isso na seção “BigQuery” das configurações da sua conta. + Em caso de dúvida, entre em contato com nosso suporte. @@ -2157,26 +2481,61 @@ const PlansAndPayment = ({ userData }) => { gap="24px" width="100%" > - setIsLoading(true)} + color="#2B8C4D" + borderColor="#2B8C4D" + _hover={{ + borderColor: "#22703E", + color: "#22703E" + }} + fontFamily="Roboto" + fontWeight="500" + fontSize="14px" + lineHeight="20px" + onClick={() => window.open(`/user/${userData?.username}?big_query`, "_self")} > {isLoading ? : - "Continuar nas configurações" + "Alterar e-mail de acesso" } - + - setIsLoadingH(true)} > {isLoadingH ? @@ -2184,7 +2543,7 @@ const PlansAndPayment = ({ userData }) => { : "Ir para a página inicial" } - + @@ -2199,7 +2558,7 @@ const PlansAndPayment = ({ userData }) => { fontSize="14px" top="28px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -2303,7 +2662,7 @@ const PlansAndPayment = ({ userData }) => { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -2370,6 +2729,7 @@ const PlansAndPayment = ({ userData }) => { price={"0"} textResource="Recursos:" resources={[ + {name: "Bases de baixa frequência atualizadas"}, {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"}, @@ -2400,7 +2760,7 @@ const PlansAndPayment = ({ userData }) => { onClick: subscriptionInfo?.stripeSubscription === "bd_pro" ? () => {} : () => { setPlan(plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id) PlansModal.onClose() - PaymentModal.onOpen() + EmailModal.onOpen() }, isCurrentPlan: subscriptionInfo?.stripeSubscription === "bd_pro" ? true : false, }} @@ -2421,7 +2781,7 @@ const PlansAndPayment = ({ userData }) => { onClick: subscriptionInfo?.stripeSubscription === "bd_pro_empresas" ? () => {} : () => { setPlan(plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id) PlansModal.onClose() - PaymentModal.onOpen() + EmailModal.onOpen() }, isCurrentPlan: subscriptionInfo?.stripeSubscription === "bd_pro_empresas" ? true : false, }} @@ -2448,7 +2808,7 @@ const PlansAndPayment = ({ userData }) => { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -2498,7 +2858,7 @@ const PlansAndPayment = ({ userData }) => { fontSize="14px" top="34px" right="26px" - _hover={{backgroundColor: "transparent", color:"#42B0FF"}} + _hover={{backgroundColor: "transparent", opacity: 0.7}} /> @@ -2848,7 +3208,124 @@ const Accesses = ({ userInfo }) => { ) } -// Sections Of User Page + +const BigQuery = ({ userInfo }) => { + const [emailGcp, setEmailGcp] = useState(userInfo?.gcpEmail || userInfo?.email) + const [errors, setErrors] = useState({}) + const [isLoading, setIsLoading] = useState(false) + + async function handleUpdateEmailGcp() { + setErrors({}) + setIsLoading(true) + + function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + return emailRegex.test(email) + } + + if(!isValidEmail(emailGcp)) { + setErrors({emailGcp: "Por favor, insira um e-mail válido."}) + } else { + const reg = new RegExp("(?<=:).*") + const [ id ] = reg.exec(userInfo.id) + + let user + let attempts = 0 + const maxAttempts = 10 + const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)) + + const response = await fetch(`/api/user/changeUserGcpEmail?p=${btoa(emailGcp)}`) + .then(res => res.json()) + + if(response.ok) { + if(emailGcp !== userInfo?.email) { + if(emailGcp !== userInfo?.gcpEmail) { + triggerGAEvent("troca_do_email_gcp",`section_bigquery`) + } + } + + while (!user?.gcpEmail && attempts < maxAttempts) { + user = await fetch(`/api/user/getUser?p=${btoa(id)}`, { method: "GET" }) + .then((res) => res.json()) + + if (user?.gcpEmail) { + cookies.set("userBD", JSON.stringify(user)) + break + } + + attempts++ + await delay(10000) + } + } else { + setErrors({emailGcp: "Por favor, insira um e-mail válido."}) + } + } + setIsLoading(false) + } + + return ( + + + + + E-mail de acesso ao BigQuery + + + + O seu e-mail precisa ser uma Conta Google para garantir acesso exclusivo aos dados pelo BigQuery. + + + + setEmailGcp(e.target.value)} + placeholder="Insira o e-mail que deseja utilizar para acessar o BigQuery" + fontFamily="ubuntu" + + maxWidth="480px" + height="40px" + fontSize="14px" + borderRadius="16px" + _invalid={{boxShadow:"0 0 0 2px #D93B3B"}} + /> + + {errors.emailGcp} + + + + handleUpdateEmailGcp()} + isDisabled={isLoading} + > + {isLoading ? + + : + "Atualizar e-mail" + } + + + ) +} export default function UserPage({ getUser }) { const router = useRouter() @@ -2860,11 +3337,17 @@ export default function UserPage({ getUser }) { setUserInfo(getUser) }, [getUser]) + const isUserPro = () => { + if(getUser?.internalSubscription?.edges?.[0]?.node?.isActive === true) return true + return false + } + 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}, + isUserPro() && {bar: "BigQuery", title: "BigQuery", value: "big_query", index: 4}, ] // {bar: "Acessos", title: "Gerenciar acessos", value: "accesses", index: 4}, @@ -2945,6 +3428,7 @@ export default function UserPage({ getUser }) { {sectionSelected === 1 && } {sectionSelected === 2 && } {sectionSelected === 3 && } + {sectionSelected === 4 && isUserPro() && } {/* {sectionSelected === 4 && } */} diff --git a/next/public/img/icons/penIcon.js b/next/public/img/icons/penIcon.js index 64f6af984..bd061b1fa 100644 --- a/next/public/img/icons/penIcon.js +++ b/next/public/img/icons/penIcon.js @@ -2,11 +2,11 @@ import { createIcon } from '@chakra-ui/icons'; const PenIcon = createIcon({ displayName: "pen", - viewBox: "0 0 22 22", + viewBox: "0 0 32 32", path: ( ) })