added tutorial tool, still need to integrate with metadatatool

1 files changed, 305 insertions, 200 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 8b9a3e0ec..f99496bba 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,16 +1,17 @@
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, FieldType, FieldResult } from '../../../../fields/Doc';
-import { InkTool } from '../../../../fields/InkField';
-import { StrCast } from '../../../../fields/Types';
+import { Doc } from '../../../../fields/Doc';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
-import { TopBar } from '../../topbar/TopBar';
-import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
-import './CollectionFreeFormView.scss';
-import { DocData } from '../../../../fields/DocSymbols';
-import { CollectionFreeFormView } from './CollectionFreeFormView';
+import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState';
+import { Button } from '../../../util/CurrentUserUtils';
+import { InfoState } from './CollectionFreeFormInfoState';
+import { DocButtonState } from '../../nodes/DocumentLinksButton';
+import { InkTool } from '../../../../fields/InkField';
+import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { CollectionFreeFormView } from '.';
+import { DocListCast } from '../../../../fields/Doc';
+import { ButtonType } from '../../nodes/FontIconBox/FontIconBox';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -21,265 +22,369 @@ export interface CollectionFreeFormInfoUIProps {
 
 @observer
 export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
+    _originalBackground: string | undefined;
+    public tutorialStates: { [key: string]: infoState } = {};
+
     public static Init() {
-        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => (
-            //
-            <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />
-        ));
+        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />);
     }
-    _firstDocPos = { x: 0, y: 0 };
 
     constructor(props: CollectionFreeFormInfoUIProps) {
         super(props);
         makeObservable(this);
-        this._currState = this.setupStates();
+        this.tutorialStates = {}; // Initialize an empty object
+        this.currState = this.setupStates(); // Call setupStates() here
     }
-    _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
-    get currState() { return this._currState; } // prettier-ignore
-    set currState(val) { runInAction(() => {this._currState = val;}); } // prettier-ignore
+    @observable _nextState: infoState | undefined = undefined; // Track next state
+
+    get currState() {
+        return this._currState;
+    }
+
+    set currState(val) {
+        runInAction(() => {
+            this._currState = val;
+        });
+    }
 
     componentWillUnmount(): void {
-        this._props.Document[DocData].backgroundColor = this._originalbackground;
+        this._props.Document.backgroundColor = this._originalBackground;
     }
 
-    setCurrState = (state: infoState) => {
-        if (state) {
-            this.currState = state;
-            this.currState[StateEntryFunc]?.();
-        }
+    skipToState = (newState: infoState) => {
+        runInAction(() => {
+            console.log('Transitioning to next state:', newState);
+            if (!this._currState) {
+                this._currState = newState; // Assign directly if undefined
+            } else {
+                this._currState = newState;
+            }
+        });
+    };
+
+    createNextButton = (newState: ReturnType<typeof InfoState>) => {
+        return {
+            title: 'Next',
+            toolTip: 'Next',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: `this.skipToState(${newState})`,
+            },
+            targetState: newState,
+        };
     };
 
     setupStates = () => {
-        this._originalbackground = StrCast(this._props.Document[DocData].backgroundColor);
-        //  state entry functions
-        // const setBackground = (colour: string) => () => {this._props.Document[DocData].backgroundColor = colour;} // prettier-ignore
-        // const setOpacity = (opacity: number) => () => {this._props.LayoutDoc.opacity = opacity;} // prettier-ignore
-        //  arc transition trigger conditions
-        const firstDoc = () => (this._props.childDocs().length ? this._props.childDocs()[0] : undefined);
-        const numDocs = () => this._props.childDocs().length;
+        let docCounter = this._props.childDocs().length;
+        let lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+        let linkCounter = Doc.Links(lastDocCreated)?.length;
+        let presentationCounter = DocListCast(Doc.ActivePresentation?.data).length;
+        this._originalBackground = this._props.Document.backgroundColor as string;
+
+        this.tutorialStates.multipleDocs = InfoState(
+            "Let's create a new link! Click the link icon on one document and connect it to another.",
+            {
+                // eslint-disable-next-line no-use-before-define
+                linkStarted: [
+                    () => DocumentLinksButton.StartLink,
+                    () => {
+                        linkCounter = Doc.Links(lastDocCreated).length;
+                        // eslint-disable-next-line no-use-before-define
+                        return startedLink;
+                    },
+                ],
+            },
+            'dash-create-link-board.gif'
+        );
 
-        let docX: FieldResult<FieldType>;
-        let docY: FieldResult<FieldType>;
+        this.tutorialStates.presentDocs = InfoState(
+            'Click the pin icon in the top left corner while clicking a doc to create your presentation.',
+            {
+                // eslint-disable-next-line no-use-before-define
+                docPinned: [
+                    () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter,
+                    () => {
+                        presentationCounter++;
+                        // eslint-disable-next-line no-use-before-define
+                        return pinnedDoc;
+                    },
+                ],
+            },
+            'pin-explanation.gif'
+        );
 
-        const docNewX = () => firstDoc()?.x;
-        const docNewY = () => firstDoc()?.y;
+        this.tutorialStates.nestedCollections = InfoState(
+            "Want to learn how to create a nested collection? Click the : button and add a 'collection' doc",
+            {
+                // eslint-disable-next-line no-use-before-define
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        // eslint-disable-next-line no-use-before-define
+                        return marqueeSelection;
+                    },
+                ],
+            },
+            'dash-nested-collection.gif'
+        );
+
+        this.tutorialStates.makePresentation = InfoState('Add a new document to create a presentation!', {
+            docCreated: [
+                () => this._props.childDocs().length > docCounter,
+                () => {
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    // eslint-disable-next-line no-use-before-define
+                    return this.tutorialStates.presentDocs;
+                },
+            ],
+        });
 
-        const linkStart = () => DocumentLinksButton.StartLink;
-        const linkUnstart = () => !DocumentLinksButton.StartLink;
+        const skipToLinksButton: Button = {
+            title: 'Links Tutorial',
+            toolTip: 'Skip',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: 'this.skipToState(this.tutorialStates.multipleDocs)',
+            },
+            targetState: this.tutorialStates.multipleDocs,
+        };
+
+        const skipToPinsButton: Button = {
+            title: 'Pins Tutorial',
+            toolTip: 'Skip',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: 'this.skipToState(this.tutorialStates.makePresentation)',
+            },
+            targetState: this.tutorialStates.makePresentation,
+        };
+
+        const skipToPresentationButton: Button = {
+            title: 'Collections Tutorial',
+            toolTip: 'Skip',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: 'this.skipToState(this.tutorialStates.nestedCollections)',
+            },
+            targetState: this.tutorialStates.nestedCollections,
+        };
 
-        const numDocLinks = () => Doc.Links(firstDoc())?.length;
-        const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
+        const ending = InfoState("If you have any more questions, feel free to ask Dash's AI Bot!", {});
 
-        const activeTool = () => Doc.ActiveTool;
+        // Traditional tutorial
 
-        const pin = () => DocListCast(Doc.ActivePresentation?.data);
+        const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', { docRemoved: [() => this._props.childDocs().length === 1, () => this.tutorialStates.start] }, 'documentation.png');
 
-        let trail: number;
+        const penMode = InfoState("You're in pen mode! Click and drag to draw your first masterpiece, then click the Ink button once you're done.", {
+            activePen: [() => Doc.ActiveTool !== InkTool.Ink, () => completed],
+        });
 
-        const presentationMode = () => Doc.ActivePresentation?.presentation_status;
+        const briefArtisticFeature = InfoState("Finally, want to explore the art feature of Dash? Click the 'Ink' button on the hotbar then click the pen button.", {
+            penModeActivated: [() => Doc.ActiveTool === InkTool.Ink, () => penMode],
+        });
 
-        // set of states
-        const start = InfoState(
-            'Click anywhere and begin typing to create your first text document.',
-            {
-                docCreated: [() => numDocs(), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    // eslint-disable-next-line no-use-before-define
-                    return oneDoc;
-                }],
-            }
-        ); // prettier-ignore
+        const activatePresentation = InfoState('Lastly, click the linked node and start the presentation!', {
+            presentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => briefArtisticFeature],
+        });
 
-        const oneDoc = InfoState(
-            'Hello world! You can drag and drop to move your document around.',
+        const deletePresentation = InfoState(
+            "Cool! Click 'setOnClick to follow primary link' for your linked doc and try deleting the presentation.",
             {
-                // docCreated: [() => numDocs() > 1, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX !== docNewX()) || (docY && docY !== docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    // eslint-disable-next-line no-use-before-define
-                    return movedDoc;
-                }],
-            }
-        ); // prettier-ignore
+                docRemoved: [
+                    () => this._props.childDocs().length < docCounter,
+                    () => {
+                        docCounter -= 1;
+                        return activatePresentation;
+                    },
+                ],
+            },
+            'onclick-node.gif'
+        );
 
-        const movedDoc = InfoState(
-            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (":")',
+        const trailedPresentation = InfoState(
+            'See the new dragged-in presentation? Try linking it to the highlighted doc.',
             {
-                // eslint-disable-next-line no-use-before-define
-                docCreated: [() => numDocs() === 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
+                linkAdd: [
+                    () => Doc.Links(lastDocCreated)?.length > linkCounter,
+                    () => {
+                        linkCounter += 1;
+                        return deletePresentation;
+                    },
+                ],
             },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+            'link-presentation.gif'
+        );
 
-        const multipleDocs = InfoState(
-            'Let\'s create a new link. Click the link icon on one of your documents.',
+        const pinnedPresentation = InfoState(
+            'Want to see something cool? Click the trail button on the presentation and drag it inside the canvas.',
             {
-                // eslint-disable-next-line no-use-before-define
-                linkStarted: [() => linkStart(), () => startedLink],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docAdded: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        // Last doc that is not the presentation
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2];
+                        Doc.HighlightDoc(lastDocCreated);
+                        linkCounter = Doc.Links(lastDocCreated)?.length;
+                        return trailedPresentation;
+                    },
+                ],
             },
-            'dash-create-link-board.gif'
-        ); // prettier-ignore
+            'dash-trail-explanation.gif'
+        );
 
-        const startedLink = InfoState(
-            'Now click the highlighted link icon on your other document.',
+        const pinnedDoc2 = InfoState('You pinned another doc. Press play to the right to show your presentation!', {
+            autoPresentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => pinnedPresentation],
+        });
+
+        const pinnedDoc = InfoState('You just pinned your doc. Pin another doc to add to the presentation!', {
+            // eslint-disable-next-line no-use-before-define
+            addedDoc: [
+                () => this._props.childDocs().length > docCounter,
+                () => {
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    return pinnedDoc;
+                },
+            ],
+            docPinned: [
+                () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter,
+                () => {
+                    presentationCounter++;
+                    // eslint-disable-next-line no-use-before-define
+                    return pinnedDoc2;
+                },
+            ],
+        });
+
+        const editLink = InfoState(
+            "Want to make your link visible? Click 'show link'.",
             {
-                linkUnstart: [() => linkUnstart(), () => multipleDocs],
-                // eslint-disable-next-line no-use-before-define
-                linkCreated: [() => numDocLinks(), () => madeLink],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        return this.tutorialStates.makePresentation;
+                    },
+                ],
             },
-            'dash-create-link-board.gif'
-        ); // prettier-ignore
+            'show-link.gif'
+        );
 
         const madeLink = InfoState(
             'You made your first link! You can view your links by selecting the blue dot.',
             {
-                linkCreated: [() => !numDocLinks(), () => multipleDocs],
-                linkViewed: [() => linkMenuOpen(), () => {
-                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                    // eslint-disable-next-line no-use-before-define
-                    return viewedLink;
-                }],
+                linkViewed: [() => DocButtonState.Instance.LinkEditorDocView, () => editLink],
             },
             'dash-following-link.gif'
-        ); // prettier-ignore
+        );
 
-        const viewedLink = InfoState(
-            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+        const startedLink = InfoState(
+            'Now click the highlighted link icon on your other document.',
             {
-                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
-                docCreated: [() => numDocs() === 3, () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return presentDocs;
-                }],
-                // eslint-disable-next-line no-use-before-define
-                activePen: [() => activeTool() === InkTool.Ink, () => penMode],
+                linkAdd: [
+                    () => Doc.Links(lastDocCreated)?.length > linkCounter,
+                    () => {
+                        linkCounter += 1;
+                        return madeLink;
+                    },
+                ],
             },
-            'documentation.png',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+            'dash-create-link-board.gif'
+        );
+
+        this.tutorialStates.movedDoc = InfoState("Great moves! Try creating a second document.", {
+            docCreated: [() => this._props.childDocs().length > docCounter, () => {
+                docCounter += 1
+                lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]
+                return this.tutorialStates.multipleDocs}],
+        },
+        'dash-colon-menu.gif'); // prettier-ignore
 
-        const presentDocs = InfoState(
-            'Another document! You could make a presentation. Click the pin icon in the top left corner.',
+        this.tutorialStates.start = InfoState(
+            'Welcome to Dash! Click anywhere and begin typing to create your first text document.',
             {
-                docPinned: [
-                    () => pin().length > trail,
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
                     () => {
-                        trail = pin().length;
-                        // eslint-disable-next-line no-use-before-define
-                        return pinnedDoc1;
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        return this.tutorialStates.movedDoc;
                     },
                 ],
-                docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            '/assets/dash-pin-with-view.gif'
+            undefined,
+            [skipToLinksButton, skipToPinsButton, skipToPresentationButton]
         );
 
-        const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
-            // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
-            activePen: [() => activeTool() !== InkTool.Ink, () => viewedLink],
-        }); // prettier-ignore
-
-        // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', {
-        //     docsRemoved: [() => numDocs() == 3, () => demos],
-        // }); // prettier-ignore
+        // Information on created nested collections
+        const createdMarquee = InfoState(
+            'Next, right click and drag a square to create the collection',
+            {
+                // eslint-disable-next-line no-use-before-define
+                marqueeMade: [
+                    () => this._props.childDocs().length < docCounter,
+                    () => {
+                        docCounter -= 1;
+                        return ending;
+                    },
+                ],
+            },
+            'dash-create-collection-marquee.gif'
+        );
 
-        const pinnedDoc1 = InfoState('You just pinned your doc.', {
-            docPinned: [
-                () => pin().length > trail,
+        const marqueeSelection = InfoState('Want an easier way to make a collection of docs? First add two docs you want to make a collection of', {
+            marqueeMade: [
+                () => this._props.childDocs().length > docCounter,
                 () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return pinnedDoc2;
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    return createdMarquee;
                 },
             ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
 
-        const pinnedDoc2 = InfoState(`You pinned another doc.`, {
-            docPinned: [
-                () => pin().length > trail,
-                () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return pinnedDoc3;
-                },
-            ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-        });
+        // Explanation of importing
 
-        const pinnedDoc3 = InfoState(`You pinned yet another doc.`, {
-            docPinned: [
-                () => pin().length > trail,
-                () => {
-                    trail = pin().length;
-                    return pinnedDoc2;
-                },
-            ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-        });
+        const easierImport = InfoState('Or, for easier access, you can drag any of the accepted file types from your computer or a webpage and drop it into your dashboard. This includes images, videos, audio, pdfs, and more!', {}, 'dash-', [
+            this.createNextButton(ending),
+        ]);
 
-        // const openedTrail = InfoState('This is your trails tab.', {
-        //     trailView: [() => presentationMode() === 'edit', () => editPresentationMode],
-        // });
+        this.tutorialStates.importFile = InfoState('Want to learn how to import a file? Import using the import menu on the left hand side', {}, 'dash-import.gif', [this.createNextButton(easierImport)]);
 
-        // const editPresentationMode = InfoState('You are editing your presentation.', {
-        //     manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-        //     autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-        //     docRemoved: [() => numDocs() < 3, () => demos],
-        //     docCreated: [() => numDocs() == 4, () => completed],
-        // });
+        // Editing documents
 
-        const manualPresentationMode = InfoState("You're in manual presentation mode.", {
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-            // eslint-disable-next-line no-use-before-define
-            docCreated: [() => numDocs() === 4, () => completed],
-        });
+        // Accessed by right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome
 
-        const autoPresentationMode = InfoState("You're in auto presentation mode.", {
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-            // eslint-disable-next-line no-use-before-define
-            docCreated: [() => numDocs() === 4, () => completed],
-        });
+        const extraContentsOfDoc = InfoState('Lastly, all documents also have a context-sensitive toolbar. The toolbar contents vary depending on the document type.', {}, 'context-toolbar.png', [this.createNextButton(ending)]);
 
-        const completed = InfoState(
-            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
-            { docRemoved: [() => numDocs() === 1, () => oneDoc] },
-            'documentation.png',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+        const contentsofDoc = InfoState('You can access the context of a doc through right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome', {}, 'dash-context-menu.gif', [
+            this.createNextButton(extraContentsOfDoc),
+        ]);
 
-        return start;
+        const propertiesofDoc = InfoState('You can also access the properties of a doc through the double arrows in the top right or the single arrow on the right edge of the screen', {}, 'dash-properties-pane.gif', [
+            this.createNextButton(contentsofDoc),
+        ]);
+
+        this.tutorialStates.editingDocuments = InfoState('Want to learn how to edit a document? Either left or right click the document', {}, 'document-chrome.png', [this.createNextButton(propertiesofDoc)]);
+        return this.tutorialStates.start;
     };
 
     render() {
-        return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+        if (!this.currState) return null;
+
+        return (
+            <CollectionFreeFormInfoState
+                next={this.skipToState} // This ensures skipToState is passed correctly
+                close={this._props.close}
+                infoState={this.currState}
+            />
+        );
     }
 }