AI Suggestions pro badge

raindropio · May 14, 2024 · a32f933 · a32f933
1 parent 558403f
commit a32f933
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/routes/suggestions/index.js b/src/routes/suggestions/index.js
@@ -1,6 +1,7 @@
 import s from './index.module.css'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { isPro } from '~data/selectors/user'
 
 import Screen from '~co/screen/basic'
 import Header, { Title, FirstAction } from '~co/common/header'
@@ -12,6 +13,7 @@ import Predictions from './predictions'
 
 export default function PageSuggestions() {
     const enabled = useSelector(state=>state.config.ai_suggestions)
+    const pro = useSelector(state=>isPro(state))
 
     return (
         <Screen className={s.main} appSize='large'>
@@ -25,10 +27,10 @@ export default function PageSuggestions() {
                 <Title>✦ AI Suggestions</Title>
             </Header>
 
-            <div className={s.split} data-enabled={enabled}>
+            <div className={s.split} data-enabled={enabled && pro}>
                 <Intro />
 
-                {enabled ? (
+                {enabled && pro ? (
                     <div className={s.content}>
                         <Predictions />
                     </div>

diff --git a/src/routes/suggestions/intro/index.js b/src/routes/suggestions/intro/index.js
@@ -1,7 +1,9 @@
 import s from './index.module.styl'
+import t from '~t'
 import React, { useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import * as configActions from '~data/actions/config'
+import { isPro } from '~data/selectors/user'
 
 import Button from '~co/common/button'
 import links from '~config/links'
@@ -10,6 +12,7 @@ import introImage from './intro.png'
 export default function PageSuggestionsIntro() {
     const dispatch = useDispatch()
     const enabled = useSelector(state=>state.config.ai_suggestions)
+    const pro = useSelector(state=>isPro(state))
     const enable = useCallback(()=>dispatch(configActions.set('ai_suggestions', true)), [])
 
     return (
@@ -31,6 +34,12 @@ export default function PageSuggestionsIntro() {
                     &nbsp;Enable AI Suggestions&nbsp;
                 </Button>
             </div>) : null}
+
+            {!pro ? (<div>
+                <Button variant='primary' href={links.pro.buy} target='_blank'>
+                    &nbsp;{t.s('upgradeToPro')}&nbsp;
+                </Button>
+            </div>) : null}
         </div>
     )
 }