- Improve extension welcome

- New upgrade modal
raindropio · Jun 14, 2024 · 9c5d9ba · 9c5d9ba
1 parent 4698de1
commit 9c5d9ba
Show file tree

Hide file tree

Showing 15 changed files with 315 additions and 84 deletions.
diff --git a/src/assets/icons/ai_active.svg b/src/assets/icons/ai_active.svg
diff --git a/src/assets/icons/reminder_active.svg b/src/assets/icons/reminder_active.svg
diff --git a/src/assets/target/extension/welcome/index.html b/src/assets/target/extension/welcome/index.html
@@ -88,11 +88,11 @@ <h3>Pin Raindrop.io Button in Toolbar</h3>
         </div>
 
         <div class="text-column">
-            <h4><span class="text-gradient blue-green-gradient">Sidepanel</span></h4>
+            <h4><span class="text-gradient blue-green-gradient">Sidebar</span></h4>
             <h2>Collection always at hand</h2>
             <div class="spacer"></div>
 
-            <a href="#open-sidepanel" class="button size-regular variant-primary">Open Sidepanel</a>
+            <a href="#open-sidepanel" class="button size-regular variant-primary">Open Sidebar</a>
 
             <span class="or-text">or press</span>
 
@@ -113,15 +113,27 @@ <h2>Collection always at hand</h2>
         <div class="backport-background blue-green-gradient"></div>
 
         <div class="text-container">
-            <h3>Open Raindrop.io Sidepanel</h3>
+            <h3>Open Raindrop.io Sidebar</h3>
             <ol>
-                <li data-browser-show="firefox"><a href="https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced" target="_blank">Add the Sidebar button to your controls</a></li>
-                <li>Click <svg class="icon"><use xlink:href="#icon-sidepanel"></use></svg> button in a <span class="browser-name"></span> toolbar</li>
-                <li>In dropdown select <svg class="icon"><use xlink:href="#icon-cloud"></use></svg> Raindrop.io</li>
-                <li>Raindrop.io will automatically appear the next time you click <svg class="icon"><use xlink:href="#icon-sidepanel"></use></svg> button</li>
+                <li>Right click <button class="button variant-secondary size-regular" disabled><svg class="icon"><use xlink:href="#icon-cloud"></use></svg></button> Raindrop.io extension icon in a toolbar</li>
+                <li>In dropdown select <button class="button variant-secondary size-regular" disabled>Open sidebar</button></li>
             </ol>
-            <hr class="pink-red-gradient" />
-            <p>In sidepanel you can browse your collection, search and add new items.</p>
+            <p>
+                Or press
+
+                <span data-system-show="macos">
+                    <button class="button size-regular variant-secondary only-icon" disabled>⌥</button>
+                    <button class="button size-regular variant-secondary only-icon" disabled>⇧</button>
+                    <button class="button size-regular variant-secondary only-icon" disabled>B</button>
+                </span>
+                <span data-system-show="windows linux">
+                    <button class="button size-regular variant-secondary" disabled>
+                        Alt+Shift+B
+                    </button>
+                </span>
+            </p>
+            <hr class="blue-green-gradient" />
+            <p>In sidebar you can browse your collection, search and add new items.</p>
             <p>What's cool is that you can simply drag new links and images into this panel to save them.</p>
         </div>
     </div>
@@ -134,9 +146,9 @@ <h3>Open Raindrop.io Sidepanel</h3>
 
         <div class="text-column">
             <h4><span class="text-gradient blue-purple-gradient">Search Field</span></h4>
-            <h2>Type in address bar to find items</h2>
+            <h2>Type <code>rd</code> to find items</h2>
             <div class="spacer"></div>
-            <a href="#start-search" class="button size-regular variant-primary">Start Search</a>
+            <a href="#start-search" class="button size-regular variant-primary">Learn more</a>
         </div>
     </div>
 
@@ -150,7 +162,7 @@ <h3>Address Bar Integration</h3>
                 <li>Type the special keyword &nbsp;<button class="button variant-secondary size-regular" disabled>rd</button>&nbsp; followed by a space</li>
                 <li>Enter your search query, results will appear below</li>
             </ol>
-            <hr class="pink-red-gradient" />
+            <hr class="blue-purple-gradient" />
             <p>Raindrop can search by title, notes, URL, tag, type, date or entire content of web-page, EPUB or PDF (no OCR).</p>
             <p>Best in class support for 16 languages. Find precisely by crafting advanced searches with our <a href="https://help.raindrop.io/using-search#operators" target="_blank">super power operators</a>.</p>
         </div>
@@ -276,7 +288,7 @@ <h2>Sync with all of your devices</h2>
             </div>
 
             <p data-authenticated-show>
-                You ready to go!
+                You ready to go! Close this page and start collecting.
             </p>
 
             <div class="spacer"></div>

diff --git a/src/assets/target/extension/welcome/style.css b/src/assets/target/extension/welcome/style.css
@@ -55,6 +55,13 @@ h2 {
     letter-spacing: -.5px;
 }
 
+h2 code {
+    background: var(--secondary-background);
+    color: var(--secondary-text);
+    padding: 0 4px;
+    border-radius: 4px;
+}
+
 h3 {
     font-size: 32px;
 }

diff --git a/src/co/bookmarks/edit/form/reminder.js b/src/co/bookmarks/edit/form/reminder.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import t from '~t'
 import { add, nextSunday } from 'date-fns'
 import { useSelector } from 'react-redux'
@@ -8,7 +8,7 @@ import { DateTime } from '~co/common/form'
 import { More, Menu, MenuItem } from '~co/overlay/popover'
 import Icon from '~co/common/icon'
 import Button from '~co/common/button'
-import ProCheck from '~co/user/pro/check'
+import UserUpgrade from '~co/user/upgrade'
 
 function Templates({ onSetDate }) {
     const templates = useMemo(()=>[
@@ -37,6 +37,24 @@ function Templates({ onSetDate }) {
     )
 }
 
+function Free() {
+    const [show, setShow] = useState(false)
+    const onClick = useCallback((e)=>{
+        e.preventDefault()
+        setShow(true)
+    }, [setShow])
+
+    return (
+        <>
+            <Button onClick={onClick} variant='outline'>
+                <Icon name='reminder' />
+            </Button>
+
+            {show ? <UserUpgrade onClose={()=>setShow(false)} /> : null}
+        </>
+    )
+}
+
 export default function BookmarkEditFormReminder({ item: { reminder }, onChange, onSave }) {
     const pro = useSelector(state=>isPro(state))
     const minDate = useMemo(()=>new Date(), [])
@@ -57,9 +75,7 @@ export default function BookmarkEditFormReminder({ item: { reminder }, onChange,
 
 
     if (!pro)
-        return <Button onClick={()=>ProCheck('reminders')} variant='outline'>
-            <Icon name='reminder' />
-        </Button>
+        return <Free />
 
     return reminder.date ? (<>
         <DateTime 

diff --git a/src/co/common/icon/index.module.styl b/src/co/common/icon/index.module.styl
@@ -36,6 +36,11 @@
 	height: calc(var(--icon-size) * 3);
 }
 
+.icon[data-enlarge='4'] svg, .icon[data-enlarge='4'] {
+	width: calc(var(--icon-size) * 4);
+	height: calc(var(--icon-size) * 4);
+}
+
 .icon[data-size="micro"] svg, .icon[data-size="micro"] {
 	width: 0.25rem //10px
 	height: 0.25rem //10px

diff --git a/src/co/highlights/item/view.js b/src/co/highlights/item/view.js
@@ -8,12 +8,14 @@ import { Text as Note } from '~co/common/form'
 import { ShortDate } from '~modules/format/date'
 import Button from '~co/common/button'
 import Icon from '~co/common/icon'
-import ProCheck from '~co/user/pro/check'
 import Color from './color'
+import UserUpgrade from '~co/user/upgrade'
 
 export default function HighlightsItemView({ text, color, created, pro, onScrollIntoView, onChange, onRemove, ...etc }) {
     const noteRef = useRef(null)
 
+    const [needUpgrade, setNeedUpgrade] = useState(false)
+
     const [note, setNote] = useState(()=>etc.note)
     useEffect(()=>setNote(etc.note), [etc.note])
 
@@ -25,7 +27,7 @@ export default function HighlightsItemView({ text, color, created, pro, onScroll
     const onClickNote = useCallback(e=>{
         if (pro) return
         e.preventDefault()
-        ProCheck('annotations')
+        setNeedUpgrade(true)
     }, [pro])
 
     const onFormMouseDown = useCallback(e=>{
@@ -85,6 +87,8 @@ export default function HighlightsItemView({ text, color, created, pro, onScroll
                     </div>
                 </div>
             </div>
+
+            {needUpgrade ? <UserUpgrade onClose={()=>setNeedUpgrade(false)} /> : null}
         </form>
     )
 }
diff --git a/src/co/user/pro/check.js b/src/co/user/pro/check.js
diff --git a/src/co/user/upgrade/index.js b/src/co/user/upgrade/index.js
@@ -0,0 +1,65 @@
+import s from './index.module.styl'
+import React, { useCallback } from 'react'
+import links from '~config/links'
+
+import Modal, { Content, Header } from '~co/overlay/modal'
+import Icon from '~co/common/icon'
+import Button from '~co/common/button'
+
+export default function UserUpgrade({ onClose }) {
+    const onBuyClick = useCallback(()=>onClose(), [onClose])
+
+    return (
+        <Modal 
+            className={s.modal}
+            onClose={onClose}>
+            <div className={s.container}>
+                <div className={s.intro}>
+                    <Icon className={s.icon} name='diamond_active' enlarge='4' />
+
+                    <svg className={s.noise} xmlns='http://www.w3.org/2000/svg'>
+                        <filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' /></filter>
+                        <rect width='100%' height='100%' filter='url(#noiseFilter)' />
+                    </svg>
+                </div>
+
+                <div>
+                    <Header 
+                        data-no-shadow
+                        title='Go Pro' />
+
+                    <Content className={s.content}>
+                        <p>
+                            Unlock powerful features to help you do more with the content you save. <a href={links.pro['help-learn-more']} target='_blank'>Learn more</a>
+                        </p>
+
+                        <h4>Includes</h4>
+                        <ul>
+                            <li><Icon className={s.icon} name='ai' /> Collection & tag suggestions</li>
+                            <li><Icon className={s.icon} name='sort_score' /> Full-text search</li>
+                            <li><Icon className={s.icon} name='export' /> Forever copies</li>
+                            <li><Icon className={s.icon} name='highlights' /> Annotations</li>
+                            <li><Icon className={s.icon} name='reminder_add' /> Reminders</li>
+                            <li><Icon className={s.icon} name='broken' /> Duplicate & broken links checker</li>
+                            <li><Icon className={s.icon} name='sort_-created' /> Daily backups</li>
+                        </ul>
+
+                        <p className={s.more}>
+                            And more…
+                        </p>
+
+                        <div className={s.actions}>
+                            <Button 
+                                variant='primary'
+                                href={links.pro.buy}
+                                target='_blank'
+                                onClick={onBuyClick}>
+                                Upgrade
+                            </Button>
+                        </div>
+                    </Content>
+                </div>
+            </div>
+        </Modal>
+    )
+}