improvements to onboarding with a 30s intro video, and a few flow imp…

…rovements (like doing all the loading in the background)
WorldBrain · Mar 3, 2024 · 981f11f · 981f11f
1 parent 6208cb8
commit 981f11f
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 64 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/authentication/components/AuthDialog/index.tsx b/src/authentication/components/AuthDialog/index.tsx
@@ -133,6 +133,7 @@ export default class AuthDialog extends StatefulUIElement<Props, State, Event> {
                                                 null,
                                             )
                                         })}
+                                        autoFocus
                                     />
                                 </TextInputContainer>
                                 {this.state.email.length > 0 && (
@@ -718,7 +719,7 @@ const DisplayNameContainer = styled.div`
 
 const InfoText = styled.div`
     color: ${(props) => props.theme.colors.greyScale5};
-    font-size: 18px;
+    font-size: 16px;
     text-align: center;
     margin-top: 10px;
 `
@@ -800,6 +801,7 @@ const ContentBox = styled.div`
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+    max-width: 380px;
 `
 
 const Title = styled.div`

diff --git a/src/dashboard-refactor/search-results/index.tsx b/src/dashboard-refactor/search-results/index.tsx
@@ -59,6 +59,7 @@ import type { ImageSupportInterface } from 'src/image-support/background/types'
 import PageCitations from 'src/citations/PageCitations'
 import type { RemoteCopyPasterInterface } from 'src/copy-paster/background/types'
 import { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
+import TutorialBox from '@worldbrain/memex-common/lib/common-ui/components/tutorial-box'
 
 const timestampToString = (timestamp: number) =>
     timestamp === -1 ? undefined : formatDayGroupTime(timestamp)
@@ -159,6 +160,7 @@ export interface State {
     showTutorialVideo: boolean
     showHorizontalScrollSwitch: string
     showPopoutsForResultBox: number
+    tutorialId: string
 }
 
 export default class SearchResultsContainer extends React.Component<
@@ -286,6 +288,7 @@ export default class SearchResultsContainer extends React.Component<
         tutorialState: undefined,
         showHorizontalScrollSwitch: 'none',
         showPopoutsForResultBox: null,
+        tutorialId: null,
     }
 
     private getLocalListIdsForCacheIds = (listIds: string[]): number[] =>
@@ -768,10 +771,23 @@ export default class SearchResultsContainer extends React.Component<
         })
     }
 
+    renderTutorialBox() {
+        if (this.state.tutorialId != null) {
+            return (
+                <TutorialBox
+                    tutorialId={this.state.tutorialId}
+                    onTutorialClose={() => this.setState({ tutorialId: null })}
+                    getRootElement={this.props.getRootElement}
+                    isHeadless={true}
+                />
+            )
+        }
+    }
+
     private renderOnboardingTutorials() {
         let title
         let videoURL
-        let readURL
+        let tutorialId
         let onDismiss
 
         if (
@@ -780,42 +796,32 @@ export default class SearchResultsContainer extends React.Component<
         ) {
             if (this.props.searchType === 'pages') {
                 title =
-                    'Learn the basics about saving and searching what you read online'
+                    'Learn the basics about saving, annotating & searching what you read online'
                 videoURL =
                     'https://share.descript.com/embed/QTnFzKBo7XM?autoplay=1'
-                readURL = 'https://links.memex.garden/memexbasics'
+                tutorialId = 'memexBasics'
                 onDismiss = () => this.dismissTutorials(this.props.searchType)
             }
             if (this.props.searchType === 'notes') {
                 title =
                     'Learn the basics about adding highlights and notes to web content, PDFs and videos'
                 videoURL =
                     'https://share.descript.com/embed/0HGxOo3duKu?autoplay=1'
-                readURL = 'https://links.memex.garden/webhighlights'
+                tutorialId = 'annotatePages'
                 onDismiss = () => this.dismissTutorials(this.props.searchType)
             }
             if (this.props.searchType === 'videos') {
                 title =
                     'Learn the basics about adding highlights to videos on Youtube, Vimeo and HTML5 videos'
-                videoURL =
-                    'https://share.descript.com/embed/4yYXrC63L95?autoplay=1'
-                readURL = 'https://links.memex.garden/videoAnnotations'
-                onDismiss = () => this.dismissTutorials(this.props.searchType)
-            }
-            if (this.props.searchType === 'twitter') {
-                title =
-                    'Learn the basics about saving and annotating tweets on the web and on mobile'
-                videoURL =
-                    'https://share.descript.com/embed/TVgEKP80LqR?autoplay=1'
-                readURL = 'https://links.memex.garden/tweets'
+                videoURL = 'https://share.descript.com/embed/ex9smd7BmLt'
+                tutorialId = 'annotateVideos'
                 onDismiss = () => this.dismissTutorials(this.props.searchType)
             }
             if (this.props.searchType === 'pdf') {
                 title =
                     'Learn the basics about annotating PDFs on the web and your hard drive'
-                videoURL =
-                    'https://share.descript.com/embed/Vl7nXyy3sLb?autoplay=1'
-                readURL = 'https://links.memex.garden/PDFannotations'
+                videoURL = 'https://share.descript.com/embed/DikJKfzZqyo'
+                tutorialId = 'annotatePDFs'
                 onDismiss = () => this.dismissTutorials(this.props.searchType)
             }
         }
@@ -832,7 +838,7 @@ export default class SearchResultsContainer extends React.Component<
                 </MobileAdContainer>
             )
             videoURL = 'https://share.descript.com/embed/Vl7nXyy3sLb?autoplay=1'
-            readURL = 'https://links.memex.garden/mobileApp'
+            tutorialId = 'https://links.memex.garden/mobileApp'
             onDismiss = this.props.onDismissMobileAd
         }
 
@@ -852,7 +858,9 @@ export default class SearchResultsContainer extends React.Component<
                                 iconPosition="right"
                                 icon="longArrowRight"
                                 label="Read More"
-                                onClick={() => window.open(readURL, '_blank')}
+                                onClick={() =>
+                                    this.setState({ tutorialId: tutorialId })
+                                }
                             />
 
                             <PrimaryAction
@@ -1205,6 +1213,7 @@ export default class SearchResultsContainer extends React.Component<
                         ref={this.ResultsScrollContainerRef}
                     >
                         {this.renderOnboardingTutorials()}
+                        {this.renderTutorialBox()}
                         {this.renderResultsByDay()}
                         {this.props.areResultsExhausted &&
                             this.props.searchState === 'success' &&

diff --git a/src/in-page-ui/tooltip/content_script/components/index.tsx b/src/in-page-ui/tooltip/content_script/components/index.tsx
@@ -45,6 +45,7 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
                         onTooltipInit={props.onTooltipInit}
                         {...props.params}
                         context="extension"
+                        getRootElement={() => props.mount.rootElement}
                     />
                 </ThemeProvider>
             </StyleSheetManager>

diff --git a/src/overview/onboarding/screens/onboarding/index.tsx b/src/overview/onboarding/screens/onboarding/index.tsx
@@ -144,50 +144,49 @@ export default class OnboardingScreen extends StatefulUIElement<
     )
     private renderBasicIntro = () => (
         <WelcomeBox>
-            <Title>
-                The one thing you need <br />
-                to get started
-            </Title>
+            <Title>The absolute basics in 30 seconds</Title>
             <DescriptionText>
+                Highly recommended to not skip this
+            </DescriptionText>
+            <VideoBox>
+                <VideoIntro src="https://share.descript.com/embed/3YRS6Db30JN" />
+            </VideoBox>
+            {/* <DescriptionText>
                 Every website has a small Memex icon in the bottom right corner.{' '}
                 <br /> It's the jumping point for everything Memex.
-            </DescriptionText>
-
-            {this.state.hoveredOverOnboardingIcon ? (
-                <ContinueButton>
-                    <PrimaryAction
-                        label={'Continue'}
-                        icon={'longArrowRight'}
-                        onClick={() =>
-                            this.processEvent('goToNextOnboardingStep', {
-                                step: 'ChooseOnboardingOption',
-                            })
-                        }
-                        type="primary"
-                        size={'large'}
-                    />
-                </ContinueButton>
-            ) : (
-                <>
-                    <MemexActionButtonIntro
-                        onMouseEnter={() => {
-                            this.processEvent('hoverOverOnboardingIcon', null)
-                        }}
-                        src={'img/memexActionButtonIntro.svg'}
-                    />
-                    <ContinueButtonNotif>
-                        Hover over the icon here to continue{' '}
-                        <ContinueIcon>
-                            <Icon
-                                icon={'longArrowRight'}
-                                hoverOff
-                                heightAndWidth="24px"
-                                color="prime1"
-                            />
-                        </ContinueIcon>
-                    </ContinueButtonNotif>
-                </>
-            )}
+            </DescriptionText> */}
+
+            {/* {this.state.hoveredOverOnboardingIcon ? ( */}
+            <ContinueButton>
+                <PrimaryAction
+                    label={'Continue'}
+                    icon={'longArrowRight'}
+                    onClick={() => this.props.navToDashboard()}
+                    type="primary"
+                    size={'large'}
+                />
+            </ContinueButton>
+            {/* // ) : (
+            //     <>
+            //         <MemexActionButtonIntro
+            //             onMouseEnter={() => {
+            //                 this.processEvent('hoverOverOnboardingIcon', null)
+            //             }}
+            //             src={'img/memexActionButtonIntro.svg'}
+            //         />
+            //         <ContinueButtonNotif>
+            //             Hover over the icon here to continue{' '}
+            //             <ContinueIcon>
+            //                 <Icon
+            //                     icon={'longArrowRight'}
+            //                     hoverOff
+            //                     heightAndWidth="24px"
+            //                     color="prime1"
+            //                 />
+            //             </ContinueIcon>
+            //         </ContinueButtonNotif>
+            //     </>
+            // )} */}
         </WelcomeBox>
     )
     private renderOnboardingOptions = () => (
@@ -934,3 +933,17 @@ const GoToDashboard = styled.span`
     color: ${(props) => props.theme.colors.prime1};
     font-size: 15px;
 `
+
+const VideoBox = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+`
+
+const VideoIntro = styled.iframe`
+    border: 1px solid ${(props) => props.theme.colors.greyScale1};
+    border-radius: 10px;
+    width: 800px;
+    height: 450px;
+`
diff --git a/src/overview/onboarding/screens/onboarding/logic.ts b/src/overview/onboarding/screens/onboarding/logic.ts
@@ -179,6 +179,9 @@ export default class Logic extends UILogic<State, Event> {
     }
 
     private async _onUserLogIn(newSignUp: boolean) {
+        this.emitMutation({
+            welcomeStep: { $set: 'basicIntro' },
+        })
         this.emitMutation({
             newSignUp: { $set: newSignUp },
             loadState: { $set: 'running' },
@@ -278,8 +281,11 @@ export default class Logic extends UILogic<State, Event> {
 
     onUserLogIn: EventHandler<'onUserLogIn'> = async ({ event }) => {
         this.emitMutation({
-            loadState: { $set: 'running' },
+            welcomeStep: { $set: 'basicIntro' },
         })
+        // this.emitMutation({
+        //     loadState: { $set: 'running' },
+        // })
         await this.checkIfAutoOpenLinkAvailable()
         await this._onUserLogIn(!!event.newSignUp)
     }

diff --git a/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx b/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
@@ -466,6 +466,7 @@ export class AnnotationsSidebarContainer<
                         this.processEvent('setSelectedList', { unifiedListId })
                     }}
                     getRootElement={this.props.getRootElement}
+                    autoFocus
                 />
             ),
             getListDetailsById: this.getListDetailsById,
@@ -620,6 +621,7 @@ export class AnnotationsSidebarContainer<
                     closePicker()
                 }}
                 getRootElement={this.props.getRootElement}
+                autoFocus
             />
         )
     }