From a7965ae77b944f2ee835810b4effd11746a13d23 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Tue, 28 May 2024 01:08:38 -0300 Subject: [PATCH 1/5] feat: add new atom toggle --- next/components/atoms/Toggle.js | 12 +++++++++++ next/styles/toggle.module.css | 38 +++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 next/components/atoms/Toggle.js create mode 100644 next/styles/toggle.module.css diff --git a/next/components/atoms/Toggle.js b/next/components/atoms/Toggle.js new file mode 100644 index 00000000..4807ebff --- /dev/null +++ b/next/components/atoms/Toggle.js @@ -0,0 +1,12 @@ +import { Switch } from "@chakra-ui/react"; +import styles from "../../styles/toggle.module.css"; + +export default function Toggle({ value, onChange }) { + return ( + + ) +} \ No newline at end of file diff --git a/next/styles/toggle.module.css b/next/styles/toggle.module.css new file mode 100644 index 00000000..a032c938 --- /dev/null +++ b/next/styles/toggle.module.css @@ -0,0 +1,38 @@ +.toggle { + --switch-track-diff: 17px !important; + --switch-thumb-x: 17px !important; + --switch-track-width: 0 !important; + --switch-track-height: 0 !important; + border-color: transparent !important; +} + +.toggle span{ + background-color: #878A8E; + width: 42px; + height: 24px; +} + +.toggle span[data-checked]{ + background-color: #2B8C4D; + width: 42px; + height: 24px; +} + +.toggle span[data-focus]{ + box-shadow: none; +} + +.toggle span span{ + background-color: #FFF; + position: relative; + top: 1px; + left: 2px; + width: 21px; + height: 21px; +} + +.toggle span span[data-checked]{ + background-color: #FFF; + width: 21px; + height: 21px; +} From 4755df4b92459020d3a35914b05b674278941c67 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Tue, 28 May 2024 01:09:34 -0300 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20add=20toggle=20in=20page=20pre?= =?UTF-8?q?=C3=A7os?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next/pages/precos.js | 196 +++++++++++++++++++------------------------ 1 file changed, 84 insertions(+), 112 deletions(-) diff --git a/next/pages/precos.js b/next/pages/precos.js index fdbef727..6ee436be 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -5,7 +5,6 @@ import { Link, Tooltip, Badge, - Button, } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import Head from "next/head"; @@ -13,11 +12,11 @@ import Display from "../components/atoms/Display"; import BigTitle from "../components/atoms/BigTitle" import BodyText from "../components/atoms/BodyText"; import RoundedButton from "../components/atoms/RoundedButton"; +import Toggle from "../components/atoms/Toggle"; import { MainPageTemplate } from "../components/templates/main"; import { isMobileMod } from "../hooks/useCheckMobile.hook"; import CheckIcon from "../public/img/icons/checkIcon"; -import CrossIcon from "../public/img/icons/crossIcon"; import InfoIcon from '../public/img/icons/infoIcon'; export async function getServerSideProps(context) { @@ -49,27 +48,12 @@ export const CardPrice = ({ title, badge, subTitle, - personConfig, + price, + anualPlan = false, textResource, resources = [], button, }) => { - const [nubmerOfPerson, setNubmerOfPerson] = useState(personConfig.person) - const [priceValue, setPriceValue] = useState(personConfig.price) - - 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 ( - R$ {priceValue} - /mês - - - - {personConfig.text && - <> + R$ {price} + - {personConfig.text} - + fontFamily="Ubuntu" + >/mês + - - - {nubmerOfPerson - personConfig.person} - - - + {anualPlan && + {(price*12).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 })} cobrado uma vez no ano } @@ -342,6 +276,20 @@ export const CardPrice = ({ } export default function Price({ username ,isBDPro, isBDEmp }) { + const [toggleAnual, setToggleAnual] = useState(false) + const [priceBDPro, setPriceBDPro] = useState("47") + const [priceBDEmp, setPriceBDEmp] = useState("350") + + useEffect(() => { + if(toggleAnual === true) { + setPriceBDPro("37") + setPriceBDEmp("280") + } else { + setPriceBDPro("47") + setPriceBDEmp("350") + } + }, [toggleAnual]) + return ( @@ -359,7 +307,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) { + + setToggleAnual(!toggleAnual)} + /> + + Desconto anual Economize 20% + + + Para você descobrir o potencial da plataforma de dados} - personConfig={{ - price: "0" - }} + price={"0"} textResource="Recursos:" resources={[ {name: "Tabelas tratadas"}, @@ -413,9 +387,8 @@ export default function Price({ username ,isBDPro, isBDEmp }) { Para você ter acesso aos
dados mais atualizados} - personConfig={{ - price: "47" - }} + price={priceBDPro} + anualPlan={toggleAnual} textResource="Todos os recursos da BD Grátis, mais:" resources={[ {name: "Dezenas de bases de alta frequência atualizadas"}, @@ -430,9 +403,8 @@ export default function Price({ username ,isBDPro, isBDEmp }) { Para sua empresa ganhar tempo
e qualidade em decisões} - personConfig={{ - price: "350" - }} + price={priceBDEmp} + anualPlan={toggleAnual} textResource="Todos os recursos da BD Pro, mais:" resources={[ {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} From 90ccbd813e3b87f338856852915ef7f4ac432b0d Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Tue, 28 May 2024 01:10:07 -0300 Subject: [PATCH 3/5] feat: add toggle in page of user --- next/pages/user/[username].js | 59 +++++++++++++++++++++++++++++------ 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js index 2708e4fa..c0a81ba3 100644 --- a/next/pages/user/[username].js +++ b/next/pages/user/[username].js @@ -40,6 +40,7 @@ import ButtonSimple from "../../components/atoms/SimpleButton"; import InputForm from "../../components/atoms/SimpleInput"; import Link from "../../components/atoms/Link"; import BodyText from "../../components/atoms/BodyText"; +import Toggle from "../../components/atoms/Toggle"; import { CardPrice } from "../precos"; import PaymentSystem from "../../components/organisms/PaymentSystem"; import ImageCrop from "../../components/molecules/ImgCrop"; @@ -1441,6 +1442,9 @@ const PlansAndPayment = ({ userData }) => { const [isLoading, setIsLoading] = useState(false) const [isLoadingH, setIsLoadingH] = useState(false) const [isLoadingCanSub, setIsLoadingCanSub] = useState(false) + const [toggleAnual, setToggleAnual] = useState(false) + const [priceBDPro, setPriceBDPro] = useState("47") + const [priceBDEmp, setPriceBDEmp] = useState("350") useEffect(() => { if(query.q === "pro") { @@ -1455,6 +1459,16 @@ const PlansAndPayment = ({ userData }) => { } }, [query]) + useEffect(() => { + if(toggleAnual === true) { + setPriceBDPro("37") + setPriceBDEmp("280") + } else { + setPriceBDPro("47") + setPriceBDEmp("350") + } + }, [toggleAnual]) + const resources={ "BD Gratis" : { title: "BD Grátis", @@ -1835,7 +1849,7 @@ const PlansAndPayment = ({ userData }) => { isCentered={isMobileMod() ? false : true} > - + Compare os planos { /> + + setToggleAnual(!toggleAnual)} + /> + + Desconto anual Economize 20% + + + { Para você descobrir o potencial da plataforma de dados} - personConfig={{ - price: "0" - }} + price={"0"} textResource="Recursos:" resources={[ {name: "Tabelas tratadas"}, @@ -1882,9 +1923,8 @@ const PlansAndPayment = ({ userData }) => { Para você ter acesso aos
dados mais atualizados} - personConfig={{ - price: "47" - }} + price={priceBDPro} + anualPlan={toggleAnual} textResource="Todos os recursos da BD Grátis, mais:" resources={[ {name: "Dezenas de bases de alta frequência atualizadas"}, @@ -1903,9 +1943,8 @@ const PlansAndPayment = ({ userData }) => { Para sua empresa ganhar tempo
e qualidade em decisões} - personConfig={{ - price: "350" - }} + price={priceBDEmp} + anualPlan={toggleAnual} textResource="Todos os recursos da BD Pro, mais:" resources={[ {name: "Acesso para 10 contas"},{name: "Suporte prioritário via email e Discord"} From fe63fbd3340b7661b5acb523657878f79e435bd2 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Mon, 3 Jun 2024 08:18:07 -0300 Subject: [PATCH 4/5] feat: finish config mobile visual modal prices --- next/components/molecules/uiUserPage.js | 9 ++- next/pages/user/[username].js | 76 ++++++++++++++----------- 2 files changed, 51 insertions(+), 34 deletions(-) diff --git a/next/components/molecules/uiUserPage.js b/next/components/molecules/uiUserPage.js index 3d094c04..782f758f 100644 --- a/next/components/molecules/uiUserPage.js +++ b/next/components/molecules/uiUserPage.js @@ -76,11 +76,18 @@ export function ModalGeneral ({ isOpen, onClose, isCentered = true, + propsModal, propsModalContent, classNameBody }) { return ( - + { - - + + Compare os planos { right="26px" _hover={{backgroundColor: "transparent", color:"#42B0FF"}} /> - - - setToggleAnual(!toggleAnual)} - /> - - Desconto anual Economize 20% - - + setToggleAnual(!toggleAnual)} + /> + + Desconto anual Economize 20% + + + { @@ -2117,7 +2126,7 @@ const PlansAndPayment = ({ userData }) => { {choices[sectionSelected].title} From 2a9a80bccba4d2cbb64304ecc40d279ad6d1d280 Mon Sep 17 00:00:00 2001 From: aldemirlucas Date: Mon, 3 Jun 2024 15:45:18 -0300 Subject: [PATCH 5/5] fix: remove subscription --- next/pages/api/stripe/removeSubscription.js | 4 ++-- next/pages/precos.js | 2 +- next/pages/user/[username].js | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/next/pages/api/stripe/removeSubscription.js b/next/pages/api/stripe/removeSubscription.js index c1c50740..9721691d 100644 --- a/next/pages/api/stripe/removeSubscription.js +++ b/next/pages/api/stripe/removeSubscription.js @@ -36,8 +36,8 @@ export default async function handler(req, res) { const result = await removeSubscription(atob(req.query.p), token) if(result.errors) return res.status(500).json({error: result.errors}) - if(result?.data?.deleteStripeSubscription.errors.length > 0) return res.status(500).json({error: result.data.deleteStripeSubscription.errors, success: false }) + if(result?.data?.deleteStripeSubscription?.errors.length > 0) return res.status(500).json({error: result.data.deleteStripeSubscription.errors, success: false }) if(result === "err") return res.status(500).json({error: "err"}) - res.status(200).json(result?.data?.deleteStripeSubscription.subscription) + if(result?.data?.deleteStripeSubscription === null) return res.status(200).json({success: true}) } diff --git a/next/pages/precos.js b/next/pages/precos.js index 6ee436be..9169c436 100644 --- a/next/pages/precos.js +++ b/next/pages/precos.js @@ -326,7 +326,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) { { const subs = await fetch(`/api/stripe/getSubscriptionActive?p=${btoa(id)}`, {method: "GET"}) .then(res => res.json()) + const result = await fetch(`/api/stripe/removeSubscription?p=${btoa(subs[0]?.node._id)}`, {method: "GET"}) .then(res => res.json()) @@ -1859,7 +1860,7 @@ const PlansAndPayment = ({ userData }) => { }} isCentered={isMobileMod() ? false : true} > - + Compare os planos @@ -1871,7 +1872,7 @@ const PlansAndPayment = ({ userData }) => { />