feat: year promotion cards att

basedosdados · Aug 14, 2024 · 913ce8b · 913ce8b
1 parent 6c9f91c
commit 913ce8b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 34 deletions.
diff --git a/next/components/atoms/Toggle.js b/next/components/atoms/Toggle.js
@@ -1,10 +1,10 @@
 import { Switch } from "@chakra-ui/react";
 import styles from "../../styles/toggle.module.css";
 
-export default function Toggle({ value, onChange, ...props }) {
+export default function Toggle({ value, onChange, className = "toggle", ...props }) {
   return (
     <Switch
-      className={styles.toggle}
+      className={styles[className]}
       value={value}
       onChange={onChange}
       {...props}

diff --git a/next/pages/precos.js b/next/pages/precos.js
@@ -3,7 +3,6 @@ import {
   Stack,
   Text,
   Tooltip,
-  Badge,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import Head from "next/head";
@@ -41,7 +40,6 @@ export async function getServerSideProps(context) {
 
 export const CardPrice = ({
   title,
-  badge,
   subTitle,
   price,
   anualPlan = false,
@@ -116,7 +114,7 @@ export const CardPrice = ({
               lineHeight="60px"
               fontFamily="Roboto"
               textAlign="center"
-            >R$ {price}</Text>
+            >R$ {anualPlan ? price/12 : price}</Text>
             <Text
               position="relative"
               top="16px"
@@ -139,7 +137,7 @@ export const CardPrice = ({
               color="#464A51"
               marginTop="24px"
               alignItems="center"
-            >{(price*12).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 })} cobrado uma vez no ano</Text>
+            >{(price).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 })} cobrado uma vez no ano</Text>
           }
         </Box>
       </Box>
@@ -371,30 +369,42 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
         </Text>
 
         <Box
-          display="none"
+          display="flex"
           width="100%"
           flexDirection="row"
           justifyContent="center"
           alignitems="center"
           gap="8px"
         >
           <Toggle
+            className="toggle_variant"
             value={toggleAnual}
             onChange={() => setToggleAnual(!toggleAnual)}
           />
           <Text
+            position="relative"
+            top="-2px"
             gap="8px"
-            fontFamily="Ubuntu"
+            fontFamily="Roboto"
             fontWeight="400"
             fontSize="18px"
-            lineHeight="24px"
+            lineHeight="20px"
             display="flex"
             alignItems="center"
             textAlign="center"
-            letterSpacing="0.1px"
             color="#252A32"
           >
-            Desconto anual <Text as="span" color="#2B8C4D">Economize 20%</Text>
+            Desconto anual
+            <Text
+              as="span"
+              color="#2B8C4D"
+              backgroundColor="#D5E8DB"
+              fontWeight="500"
+              lineHeight="28px"
+              padding="2px 4px"
+              borderRadius="4px"
+              height="32px"
+            >Economize 20%</Text>
           </Text>
         </Box>
 
@@ -430,7 +440,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
           <CardPrice
             title="BD Pro"
             subTitle={<>Para você ter acesso aos<br/> dados mais atualizados</>}
-            price={plans?.["bd_pro_month"].amount || 47}
+            price={plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`].amount || 47}
             anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Grátis, mais:"
             resources={[
@@ -439,15 +449,15 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
             ]}
             button={{
               text: isBDPro ? "Plano atual" : `Iniciar teste grátis`,
-              href: username === null ? `/user/login?q=pro&i=${plans?.["bd_pro_month"]._id}` :`/user/${username}?plans_and_payment&q=pro&i=${plans?.["bd_pro_month"]._id}`,
+              href: username === null ? `/user/login?q=pro&i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&q=pro&i=${plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id}`,
               isCurrentPlan: isBDPro,
             }}
           />
 
           <CardPrice
             title="BD Empresas"
             subTitle={<>Para sua empresa ganhar tempo<br/> e qualidade em decisões</>}
-            price={plans?.["bd_empresas_month"].amount || 350}
+            price={plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`].amount || 350}
             anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Pro, mais:"
             resources={[
@@ -456,7 +466,7 @@ export default function Price({ username ,isBDPro, isBDEmp }) {
             ]}
             button={{
               text: isBDEmp ? "Plano atual" : "Iniciar teste grátis",
-              href: username === null ? `/user/login?q=empresas&i=${plans?.["bd_empresas_month"]._id}` :`/user/${username}?plans_and_payment&q=empresas&i=${plans?.["bd_empresas_month"]._id}`,
+              href: username === null ? `/user/login?q=empresas&i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}` :`/user/${username}?plans_and_payment&q=empresas&i=${plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id}`,
               isCurrentPlan: isBDEmp,
             }}
           />

diff --git a/next/pages/user/[username].js b/next/pages/user/[username].js
@@ -1901,7 +1901,7 @@ const PlansAndPayment = ({ userData }) => {
           />
 
           <Box
-            display="none"
+            display="flex"
             width="100%"
             flexDirection="row"
             justifyContent="center"
@@ -1914,18 +1914,29 @@ const PlansAndPayment = ({ userData }) => {
               onChange={() => setToggleAnual(!toggleAnual)}
             />
             <Text
+              position="relative"
+              top="-2px"
               gap="8px"
-              fontFamily="Ubuntu"
+              fontFamily="Roboto"
               fontWeight="400"
-              fontSize={isMobileMod() ? "16px" : "18px"}
-              lineHeight="24px"
+              fontSize="18px"
+              lineHeight="20px"
               display="flex"
               alignItems="center"
               textAlign="center"
-              letterSpacing="0.1px"
               color="#252A32"
             >
-              Desconto anual <Text color="#2B8C4D">Economize 20%</Text>
+              Desconto anual
+              <Text
+                as="span"
+                color="#2B8C4D"
+                backgroundColor="#D5E8DB"
+                fontWeight="500"
+                lineHeight="28px"
+                padding="2px 4px"
+                borderRadius="4px"
+                height="32px"
+              >Economize 20%</Text>
             </Text>
           </Box>
         </Stack>
@@ -1964,7 +1975,7 @@ const PlansAndPayment = ({ userData }) => {
           <CardPrice
             title="BD Pro"
             subTitle={<>Para você ter acesso aos<br/> dados mais atualizados</>}
-            price={plans?.["bd_pro_month"].amount || 47}
+            price={plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`].amount || 47}
             anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Grátis, mais:"
             resources={[
@@ -1974,7 +1985,7 @@ const PlansAndPayment = ({ userData }) => {
             button={{
               text: `${userData?.proSubscription === "bd_pro" ? "Plano atual" : "Assinar"}`,
               onClick: userData?.proSubscription === "bd_pro" ? () => {} : () => {
-                setPlan({id: plans?.["bd_pro_month"]._id})
+                setPlan({id: plans?.[`bd_pro_${toggleAnual ? "year" : "month"}`]._id})
                 PlansModal.onClose()
                 PaymentModal.onOpen()
               },
@@ -1985,7 +1996,7 @@ const PlansAndPayment = ({ userData }) => {
           <CardPrice
             title="BD Empresas"
             subTitle={<>Para sua empresa ganhar tempo<br/> e qualidade em decisões</>}
-            price={plans?.["bd_empresas_month"].amount || 350}
+            price={plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`].amount || 350}
             anualPlan={toggleAnual}
             textResource="Todos os recursos da BD Pro, mais:"
             resources={[
@@ -1995,7 +2006,7 @@ const PlansAndPayment = ({ userData }) => {
             button={{
               text: `${userData?.proSubscription === "bd_pro_empresas" ? "Plano atual" : "Assinar"}`,
               onClick: userData?.proSubscription === "bd_pro_empresas" ? () => {} : () => {
-                setPlan({id: plans?.["bd_empresas_month"]._id})
+                setPlan({id: plans?.[`bd_empresas_${toggleAnual ? "year" : "month"}`]._id})
                 PlansModal.onClose()
                 PaymentModal.onOpen()
               },

diff --git a/next/styles/toggle.module.css b/next/styles/toggle.module.css
@@ -1,28 +1,32 @@
-.toggle {
+.toggle, .toggle_variant  {
   --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{
+.toggle span, .toggle_variant span{
   background-color: #878A8E;
   width: 42px;
   height: 24px;
 }
 
-.toggle span[data-checked]{
+.toggle span[data-checked], .toggle_variant span[data-checked]{
   background-color: #2B8C4D;
   width: 42px;
   height: 24px;
 }
 
-.toggle span[data-focus]{
+.toggle_variant span[data-checked]{
+  background-color: #0D99FC;
+}
+
+.toggle span[data-focus], .toggle_variant span[data-focus]{
   box-shadow: none;
 }
 
-.toggle span span{
+.toggle span span, .toggle_variant span span{
   background-color: #FFF;
   position: relative;
   top: 1px;
@@ -31,24 +35,28 @@
   height: 21px;
 }
 
-.toggle span span[data-checked]{
+.toggle span span[data-checked], .toggle_variant span span[data-checked]{
   background-color: #FFF;
   width: 21px;
   height: 21px;
 }
 
-.toggle span:hover {
+.toggle span:hover, .toggle_variant span:hover {
   background-color: #71757A;
 }
 
-.toggle span span:hover {
+.toggle span span:hover, .toggle_variant span span:hover{
   background-color: #FFF;
 }
 
 .toggle span[data-checked]:hover {
   background-color: #22703E;
 }
 
-.toggle span[data-checked] span:hover {
+.toggle_variant span[data-checked]:hover {
+  background-color: #0D99FC;
+}
+
+.toggle span[data-checked] span:hover, .toggle_variant span[data-checked] span:hover {
   background-color: #FFF;
 }