@@ -23,7 +23,36 @@ import BodyText from "../../atoms/Text/BodyText";
2323import Toggle from "../../atoms/Toggle" ;
2424import { SectionPrice } from "../../../pages/prices" ;
2525import PaymentSystem from "../../organisms/PaymentSystem" ;
26- import { triggerGAEvent , triggerGAEventWithData , hasBDProSubscription , hasChatbotSubscription , getChatbotStreamlitAppUrl } from "../../../utils" ;
26+ import { triggerGAEvent , triggerGAEventWithData , hasBDProSubscription , hasChatbotSubscription , getChatbotStreamlitAppUrl , getSubscriptionStatusKey , isSubscriptionTrialing } from "../../../utils" ;
27+
28+ const SubscriptionBadgeStyles = {
29+ active : { backgroundColor : "#D5E8DB" , color : "#2B8C4D" } ,
30+ canceled : { backgroundColor : "#F6E3E3" , color : "#BF3434" } ,
31+ trial : { backgroundColor : "#E8F2FC" , color : "#0068C5" } ,
32+ }
33+
34+ function SubscriptionStatusBadge ( { subscription, t, fallbackStatus = "active" } ) {
35+ const statusKey = subscription ? getSubscriptionStatusKey ( subscription ) : fallbackStatus
36+ const badgeStyle = SubscriptionBadgeStyles [ statusKey ] || SubscriptionBadgeStyles . active ;
37+
38+ return (
39+ < Badge
40+ width = "fit-content"
41+ padding = "2px 4px"
42+ textTransform = "none"
43+ borderRadius = "6px"
44+ backgroundColor = { badgeStyle . backgroundColor }
45+ color = { badgeStyle . color }
46+ fontSize = "12px"
47+ lineHeight = "18px"
48+ fontFamily = "Roboto"
49+ fontWeight = "500"
50+ letterSpacing = "0.1px"
51+ >
52+ { t ( `username.${ statusKey } ` ) }
53+ </ Badge >
54+ )
55+ }
2756
2857import {
2958 TitleTextForm ,
@@ -111,7 +140,9 @@ export default function PlansAndPayment ({ userData }) {
111140 const [ isLoadingH , setIsLoadingH ] = useState ( false )
112141 const [ isLoadingCanSub , setIsLoadingCanSub ] = useState ( false )
113142 const [ isLoadingClientSecret , setIsLoadingClientSecret ] = useState ( true )
114- const [ hasSubscribed , setHasSubscribed ] = useState ( true )
143+ const [ hasSubscribedBDPro , setHasSubscribedBDPro ] = useState ( true )
144+ const [ hasSubscribedChatbot , setHasSubscribedChatbot ] = useState ( true )
145+ const [ hasSubscribedLoaded , setHasSubscribedLoaded ] = useState ( false )
115146 const [ plans , setPlans ] = useState ( null )
116147 const [ toggleAnual , setToggleAnual ] = useState ( true )
117148 const [ subscriptionToCancel , setSubscriptionToCancel ] = useState ( "bd_pro" )
@@ -129,16 +160,32 @@ export default function PlansAndPayment ({ userData }) {
129160 } ) || null
130161
131162 async function alreadySubscribed ( id ) {
132- const result = await fetch ( `/api/user/getAlreadySubscribed?p=${ btoa ( id ) } ` )
133- . then ( res => res . json ( ) )
134- setHasSubscribed ( result )
163+ try {
164+ const [ bdPro , chatbot ] = await Promise . all ( [
165+ fetch ( `/api/user/getAlreadySubscribed?p=${ btoa ( id ) } &type=bd_pro` ) . then ( res => res . json ( ) ) ,
166+ fetch ( `/api/user/getAlreadySubscribed?p=${ btoa ( id ) } &type=chatbot` ) . then ( res => res . json ( ) ) ,
167+ ] )
168+ setHasSubscribedBDPro ( bdPro )
169+ setHasSubscribedChatbot ( chatbot )
170+ } catch ( error ) {
171+ console . error ( error )
172+ setHasSubscribedBDPro ( false )
173+ setHasSubscribedChatbot ( false )
174+ } finally {
175+ setHasSubscribedLoaded ( true )
176+ }
135177 }
136178
137179 useEffect ( ( ) => {
138180 const reg = new RegExp ( "(?<=:).*" )
139- const [ id ] = reg . exec ( userData . id )
181+ const match = reg . exec ( userData . id )
182+
183+ if ( ! match ) {
184+ setHasSubscribedLoaded ( true )
185+ return
186+ }
140187
141- alreadySubscribed ( id )
188+ alreadySubscribed ( match [ 0 ] )
142189 } , [ userData ?. id ] )
143190
144191 useEffect ( ( ) => {
@@ -193,6 +240,7 @@ export default function PlansAndPayment ({ userData }) {
193240 useEffect ( ( ) => {
194241 if ( plans === null ) return
195242 if ( plan === "" ) return
243+ if ( ! hasSubscribedLoaded ) return
196244
197245 const value = Object . values ( plans ) . find ( elm => elm ?. _id === plan )
198246 if ( ! value ) return
@@ -217,12 +265,16 @@ export default function PlansAndPayment ({ userData }) {
217265 const checkoutAlreadyVisible = PaymentModal . isOpen || EmailModal . isOpen
218266 if ( ! checkoutAlreadyVisible ) {
219267 if ( isChatbotType ) {
220- openCheckoutPlanStep ( )
268+ if ( ! hasSubscribedChatbot ) {
269+ openCheckoutPaymentStep ( )
270+ } else {
271+ openCheckoutPlanStep ( )
272+ }
221273 } else {
222274 EmailModal . onOpen ( )
223275 }
224276 }
225- } , [ plan , plans , userData , chatbotSubscriptionInfo ] )
277+ } , [ plan , plans , userData , chatbotSubscriptionInfo , hasSubscribedLoaded , hasSubscribedChatbot ] )
226278
227279 useEffect ( ( ) => {
228280 if ( ! plans || plan !== "" ) return
@@ -273,7 +325,9 @@ export default function PlansAndPayment ({ userData }) {
273325
274326 const planActive = hasBDProSubscription ( userData )
275327 const hasChatbotActiveSubscription = hasChatbotSubscription ( userData )
328+ const isChatbotTrial = isSubscriptionTrialing ( chatbotSubscriptionInfo )
276329 const isChatbotCheckout = checkoutInfos ?. productName ?. toLowerCase ( ) . includes ( "chatbot" ) || checkoutInfos ?. productSlug ?. toLowerCase ( ) . includes ( "chatbot" )
330+ const hasSubscribed = isChatbotCheckout ? hasSubscribedChatbot : hasSubscribedBDPro
277331
278332 function getCheckoutStepLabel ( ) {
279333 if ( checkoutStep === "plan" ) {
@@ -297,6 +351,12 @@ export default function PlansAndPayment ({ userData }) {
297351 PaymentModal . onOpen ( )
298352 }
299353
354+ function openCheckoutPaymentStep ( ) {
355+ setCheckoutStep ( "payment" )
356+ setIsLoadingClientSecret ( true )
357+ PaymentModal . onOpen ( )
358+ }
359+
300360 function goBackFromPlanStep ( ) {
301361 PaymentModal . onClose ( )
302362 if ( isChatbotCheckout ) {
@@ -391,7 +451,6 @@ export default function PlansAndPayment ({ userData }) {
391451
392452 const defaultResource = resources [ "BD Gratis" ]
393453 const planResource = resources [ userData ?. proSubscription ]
394- const planCanceled = bdProSubscriptionInfo ?. canceledAt
395454
396455 const controlResource = ( ) => {
397456 if ( ! planActive || ! planResource ) return defaultResource
@@ -1428,29 +1487,12 @@ export default function PlansAndPayment ({ userData }) {
14281487 justifyContent = "space-between"
14291488 >
14301489 < Stack spacing = "8px" marginBottom = { { base : "16px" , lg : "0" } } >
1431- < Badge
1432- width = "fit-content"
1433- padding = "2px 4px"
1434- textTransform = "none"
1435- borderRadius = "6px"
1436- backgroundColor = {
1437- planActive ? ( planCanceled ? "#F6E3E3" : "#D5E8DB" ) : "#D5E8DB"
1438- }
1439- color = {
1440- planActive ? ( planCanceled ? "#BF3434" : "#2B8C4D" ) : "#2B8C4D"
1441- }
1442- fontSize = "12px"
1443- lineHeight = "18px"
1444- fontFamily = "Roboto"
1445- fontWeight = "500"
1446- letterSpacing = "0.1px"
1447- >
1448- { planActive
1449- ? planCanceled
1450- ? t ( "username.canceled" )
1451- : t ( "username.active" )
1452- : t ( "username.active" ) }
1453- </ Badge >
1490+ { planActive && (
1491+ < SubscriptionStatusBadge
1492+ subscription = { bdProSubscriptionInfo }
1493+ t = { t }
1494+ />
1495+ ) }
14541496
14551497 < Box
14561498 display = "flex"
@@ -1614,27 +1656,10 @@ export default function PlansAndPayment ({ userData }) {
16141656 marginTop = "8px"
16151657 >
16161658 { hasChatbotActiveSubscription && (
1617- < Badge
1618- width = "fit-content"
1619- padding = "2px 4px"
1620- textTransform = "none"
1621- borderRadius = "6px"
1622- backgroundColor = {
1623- chatbotSubscriptionInfo ?. canceledAt ? "#F6E3E3" : "#D5E8DB"
1624- }
1625- color = {
1626- chatbotSubscriptionInfo ?. canceledAt ? "#BF3434" : "#2B8C4D"
1627- }
1628- fontSize = "12px"
1629- lineHeight = "18px"
1630- fontFamily = "Roboto"
1631- fontWeight = "500"
1632- letterSpacing = "0.1px"
1633- >
1634- { chatbotSubscriptionInfo ?. canceledAt
1635- ? t ( "username.canceled" )
1636- : t ( "username.active" ) }
1637- </ Badge >
1659+ < SubscriptionStatusBadge
1660+ subscription = { chatbotSubscriptionInfo }
1661+ t = { t }
1662+ />
16381663 ) }
16391664 < Box
16401665 display = "flex"
@@ -1661,7 +1686,7 @@ export default function PlansAndPayment ({ userData }) {
16611686 >
16621687 { t ( "username.chatbotNewBadge" ) }
16631688 </ Badge >
1664- { chatbotSubscriptionInfo ?. planInterval && (
1689+ { chatbotSubscriptionInfo ?. planInterval && ! isChatbotTrial && (
16651690 < LabelText typography = "x-small" color = "#71757A" >
16661691 { formattedPlanInterval (
16671692 chatbotSubscriptionInfo ?. planInterval ,
0 commit comments