refactor: [UEPR-44] Addressed review comments and chnage project journey behaviour

src/components/journeys/driver-journey/driver-journey.jsx

@@ -7,9 +7,8 @@ require('driver.js/dist/driver.css');
 const DriverJourney = ({configProps, driverObj}) => {
     const [renderState, setRenderState] = useState();
 
-    const {steps, ...restConfig} = configProps;
-
     useEffect(() => {
+        const {steps, ...restConfig} = configProps;
         const driverSteps = steps.map((step, index) => {
             const {sectionComponents = {}, callback, ...popoverProps} = step.popover;
             return {
@@ -43,10 +42,10 @@ const DriverJourney = ({configProps, driverObj}) => {
         driverObj.setConfig({...restConfig, steps: driverSteps});
 
         driverObj.drive();
-    }, [driverObj, steps]);
+    }, [driverObj, configProps]);
 
     if (!renderState) return null;
-    if (!steps[renderState.stepIndex]) return null;
+    if (!configProps.steps[renderState.stepIndex]) return null;
 
     return (
         <>

src/components/journeys/editor-journey/editor-journey.jsx

@@ -4,96 +4,96 @@ const FlexRow = require('../../flex-row/flex-row.jsx');
 const Button = require('../../forms/button.jsx');
 const DriverJourney = require('../driver-journey/driver-journey.jsx');
 const {defineMessages, useIntl} = require('react-intl');
-const {useMemo, useState} = require('react');
+const {useMemo, useState, useCallback} = require('react');
 const PropTypes = require('prop-types');
 
 require('./editor-journey.scss');
 
 const messages = defineMessages({
-    createTitle: {
+    createStepTitle: {
         id: 'gui.journey.controls.create',
         defaultMessage: 'Create',
-        description: 'Create modal title'
+        description: 'Create step title'
     },
-    projectGenreTitle: {
+    projectGenreStepTitle: {
         id: 'gui.journey.controls.choose.projectGenre',
         defaultMessage: 'What do you whant to create?',
-        description: 'Choose project genre modal title'
+        description: 'Choose project genre step title'
     },
-    typeTitle: {
+    typeStepTitle: {
         id: 'gui.journey.controls.choose.type',
         defaultMessage: 'Which type?',
-        description: 'Choose project type modal title'
+        description: 'Choose project type step title'
     },
-    startTitle: {
+    startStepTitle: {
         id: 'gui.journey.controls.choose.start',
         defaultMessage: 'How do you want to start?',
-        description: 'Choose way to start modal title'
+        description: 'Choose way to start step title'
     },
-    gameTitle: {
+    gameButtonText: {
         id: 'gui.journey.controls.game',
         defaultMessage: 'Game',
-        description: 'Game button title'
+        description: 'Game button text'
     },
-    animiationTitle: {
+    animiationButtonText: {
         id: 'gui.journey.controls.animation',
         defaultMessage: 'Animation',
-        description: 'Animation button title'
+        description: 'Animation button text'
     },
-    musicTitle: {
+    musicButtonText: {
         id: 'gui.journey.controls.music',
         defaultMessage: 'Music',
-        description: 'Music button title'
+        description: 'Music button text'
     },
-    clickerGameTitle: {
+    clickerGameButtonText: {
         id: 'gui.journey.controls.game.clicker',
         defaultMessage: 'Clicker Game',
-        description: 'Clicker game button title'
+        description: 'Clicker game button text'
     },
-    pongGameTitle: {
+    pongGameButtonText: {
         id: 'gui.journey.controls.game.pong',
         defaultMessage: 'Pong Game',
-        description: 'Pong game button title'
+        description: 'Pong game button text'
     },
-    characterAnimationTitle: {
+    characterAnimationButtonText: {
         id: 'gui.journey.controls.animation.character',
         defaultMessage: 'Animate a character',
-        description: 'Animate a character button title'
+        description: 'Animate a character button text'
     },
-    flyAnimationTitle: {
+    flyAnimationButtonText: {
         id: 'gui.journey.controls.animation.fly',
         defaultMessage: 'Make it fly',
-        description: 'Make it fly animation button title'
+        description: 'Make it fly animation button text'
     },
-    recordSoundTitle: {
+    recordSoundButtonText: {
         id: 'gui.journey.controls.music.record',
         defaultMessage: 'Record a sound',
-        description: 'Record a sound button title'
+        description: 'Record a sound button text'
     },
-    makeMusicTitle: {
+    makeMusicButtonText: {
         id: 'gui.journey.controls.music.make',
         defaultMessage: 'Make music',
-        description: 'Make music button title'
+        description: 'Make music button text'
     },
-    tutorialTitle: {
+    tutorialButtonText: {
         id: 'gui.journey.controls.tutorial',
         defaultMessage: 'Tutorial',
-        description: 'Tutorial button title'
+        description: 'Tutorial button text'
     },
-    starterProjectTitle: {
+    starterProjectButtonText: {
         id: 'gui.journey.controls.starterProject',
         defaultMessage: 'Starter project',
-        description: 'Starter project button title'
+        description: 'Starter project button text'
     },
-    onMyOwnTitle: {
+    onMyOwnButtonText: {
         id: 'gui.journey.controls.onMyOwn',
         defaultMessage: 'On my own',
-        description: 'On my own button title'
+        description: 'On my own button text'
     }
 });
 
-const projects = {
-    clicker: '10128368',
+const projectIds = {
+    clicker: '10000252',
     pong: '10128515',
     animateCharacter: '10128067',
     makeItFly: '114019829',
@@ -101,7 +101,7 @@ const projects = {
     makeMusic: '10012676'
 };
 
-const tutorials = {
+const tutorialIds = {
     clicker: 'Make-A-Game',
     pong: 'pong',
     animateCharacter: 'Animate-A-Character',
@@ -110,20 +110,6 @@ const tutorials = {
     makeMusic: 'Make-Music'
 };
 
-const redirectToProject = projectId => {
-    location.href = `/projects/${projectId}?showJourney=true`;
-};
-
-const openTutorial = (onActivateDeck, tutorialId, driverObj) => {
-    onActivateDeck(tutorialId);
-    driverObj.destroy();
-};
-
-const ownOptingPicked = (setCanViewTutorialsHighlight, driverObg) => {
-    setCanViewTutorialsHighlight(true);
-    driverObg.destroy();
-};
-
 const EditorJourneyDescription = ({title, descriptionData}) => (
     <>
         <div className="title">{title}</div>
@@ -146,288 +132,178 @@ const EditorJourneyDescription = ({title, descriptionData}) => (
     </>
 );
 
-const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight}) => {
+const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJourney}) => {
     const [driverObj] = useState(() => (
         driver()
     ));
     const intl = useIntl();
 
-    const steps = useMemo(
-        () => [{
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.projectGenreTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Games-Icon.png',
-                                text: intl.formatMessage(messages.gameTitle),
-                                handleOnClick: () => driverObj.moveTo(1)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Animation-Icon.png',
-                                text: intl.formatMessage(messages.animiationTitle),
-                                handleOnClick: () => driverObj.moveTo(2)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Music-Icon.png',
-                                text: intl.formatMessage(messages.musicTitle),
-                                handleOnClick: () => driverObj.moveTo(3)
-                            }
-                        ]}
-                    />
+    const createStep = useCallback((projectId, tutorialId) => ({
+        title: intl.formatMessage(messages.createStepTitle),
+        showButtons: ['close'],
+        sectionComponents: {
+            description: <EditorJourneyDescription
+                title={intl.formatMessage(messages.startStepTitle)}
+                descriptionData={[
+                    {
+                        imgSrc: '/images/onboarding-journeys/Tutorials-Icon.svg',
+                        text: intl.formatMessage(messages.tutorialButtonText),
+                        handleOnClick: () => {
+                            onActivateDeck(tutorialId);
+                            setShowJourney(false);
+                            driverObj.destroy();
+                        }
+                    },
+                    {
+                        imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.svg',
+                        text: intl.formatMessage(messages.starterProjectButtonText),
+                        handleOnClick: () => {
+                            location.href = `/projects/${projectId}?showJourney=true`;
+                            setShowJourney(false);
+                            driverObj.destroy();
+                        }
+                    },
+                    {
+                        imgSrc: '/images/onboarding-journeys/On-Own-Icon.svg',
+                        text: intl.formatMessage(messages.onMyOwnButtonText),
+                        handleOnClick: () => {
+                            setCanViewTutorialsHighlight(true);
+                            setShowJourney(false);
+                            driverObj.destroy();
+                        }
+                    }
+                ]}
+            />
+        }
+    }), [onActivateDeck, setCanViewTutorialsHighlight, setShowJourney, driverObj, intl]);
+
+    const configProps = useMemo(
+        () => ({
+            popoverClass: 'gui-journey',
+            overlayOpacity: 0,
+            onDestroyed: () => {
+                setShowJourney(false);
+            },
+            steps: [{
+                popover: {
+                    title: intl.formatMessage(messages.createStepTitle),
+                    showButtons: ['close'],
+                    sectionComponents: {
+                        description: <EditorJourneyDescription
+                            title={intl.formatMessage(messages.projectGenreStepTitle)}
+                            descriptionData={[
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Games-Icon.svg',
+                                    text: intl.formatMessage(messages.gameButtonText),
+                                    handleOnClick: () => driverObj.moveTo(1)
+                                },
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Animation-Icon.svg',
+                                    text: intl.formatMessage(messages.animiationButtonText),
+                                    handleOnClick: () => driverObj.moveTo(2)
+                                },
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Music-Icon.svg',
+                                    text: intl.formatMessage(messages.musicButtonText),
+                                    handleOnClick: () => driverObj.moveTo(3)
+                                }
+                            ]}
+                        />
+                    }
                 }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.typeTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Clicker-Game.jpg',
-                                text: intl.formatMessage(messages.clickerGameTitle),
-                                handleOnClick: () => driverObj.moveTo(4)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Pong-Game.jpg',
-                                text: intl.formatMessage(messages.pongGameTitle),
-                                handleOnClick: () => driverObj.moveTo(5)
-                            }
-                        ]}
-                    />
+            },
+            {
+                popover: {
+                    title: intl.formatMessage(messages.createStepTitle),
+                    showButtons: ['close'],
+                    sectionComponents: {
+                        description: <EditorJourneyDescription
+                            title={intl.formatMessage(messages.typeStepTitle)}
+                            descriptionData={[
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Clicker-Game.jpg',
+                                    text: intl.formatMessage(messages.clickerGameButtonText),
+                                    handleOnClick: () => driverObj.moveTo(4)
+                                },
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Pong-Game.jpg',
+                                    text: intl.formatMessage(messages.pongGameButtonText),
+                                    handleOnClick: () => driverObj.moveTo(5)
+                                }
+                            ]}
+                        />
+                    }
                 }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.typeTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Character-Animation.jpg',
-                                text: intl.formatMessage(messages.characterAnimationTitle),
-                                handleOnClick: () => driverObj.moveTo(6)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Fly-Animation.jpg',
-                                text: intl.formatMessage(messages.flyAnimationTitle),
-                                handleOnClick: () => driverObj.moveTo(7)
-                            }
-                        ]}
-                    />
+            },
+            {
+                popover: {
+                    title: intl.formatMessage(messages.createStepTitle),
+                    showButtons: ['close'],
+                    sectionComponents: {
+                        description: <EditorJourneyDescription
+                            title={intl.formatMessage(messages.typeStepTitle)}
+                            descriptionData={[
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Character-Animation.jpg',
+                                    text: intl.formatMessage(messages.characterAnimationButtonText),
+                                    handleOnClick: () => driverObj.moveTo(6)
+                                },
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Fly-Animation.jpg',
+                                    text: intl.formatMessage(messages.flyAnimationButtonText),
+                                    handleOnClick: () => driverObj.moveTo(7)
+                                }
+                            ]}
+                        />
+                    }
                 }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.typeTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Record-Music.jpg',
-                                text: intl.formatMessage(messages.recordSoundTitle),
-                                handleOnClick: () => driverObj.moveTo(8)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Make-Music.jpg',
-                                text: intl.formatMessage(messages.makeMusicTitle),
-                                handleOnClick: () => driverObj.moveTo(9)
-                            }
-                        ]}
-                    />
+            },
+            {
+                popover: {
+                    title: intl.formatMessage(messages.createStepTitle),
+                    showButtons: ['close'],
+                    sectionComponents: {
+                        description: <EditorJourneyDescription
+                            title={intl.formatMessage(messages.typeStepTitle)}
+                            descriptionData={[
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Record-Music.jpg',
+                                    text: intl.formatMessage(messages.recordSoundButtonText),
+                                    handleOnClick: () => driverObj.moveTo(8)
+                                },
+                                {
+                                    imgSrc: '/images/onboarding-journeys/Make-Music.jpg',
+                                    text: intl.formatMessage(messages.makeMusicButtonText),
+                                    handleOnClick: () => driverObj.moveTo(9)
+                                }
+                            ]}
+                        />
+                    }
                 }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () => openTutorial(onActivateDeck, tutorials.clicker, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.clicker)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () => openTutorial(onActivateDeck, tutorials.pong, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.pong)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () =>
-                                    openTutorial(onActivateDeck, tutorials.animateCharacter, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.animateCharacter)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () => openTutorial(onActivateDeck, tutorials.makeItFly, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.makeItFly)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () => openTutorial(onActivateDeck, tutorials.recordSound, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.recordSound)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        },
-        {
-            popover: {
-                title: intl.formatMessage(messages.createTitle),
-                showButtons: ['close'],
-                sectionComponents: {
-                    description: <EditorJourneyDescription
-                        title={intl.formatMessage(messages.startTitle)}
-                        descriptionData={[
-                            {
-                                imgSrc: '/images/onboarding-journeys/Tutorials-Icon.png',
-                                text: intl.formatMessage(messages.tutorialTitle),
-                                handleOnClick: () => openTutorial(onActivateDeck, tutorials.makeMusic, driverObj)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.png',
-                                text: intl.formatMessage(messages.starterProjectTitle),
-                                handleOnClick: () => redirectToProject(projects.makeMusic)
-                            },
-                            {
-                                imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
-                                text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
-                            }
-                        ]}
-                    />
-                }
-            }
-        }], [onActivateDeck, setCanViewTutorialsHighlight]
+            },
+            {
+                popover: createStep(projectIds.clicker, tutorialIds.clicker)
+            },
+            {
+                popover: createStep(projectIds.pong, tutorialIds.pong)
+            },
+            {
+                popover: createStep(projectIds.animateCharacter, tutorialIds.animateCharacter)
+            },
+            {
+                popover: createStep(projectIds.makeItFly, tutorialIds.makeItFly)
+            },
+            {
+                popover: createStep(projectIds.recordSound, tutorialIds.recordSound)
+            },
+            {
+                popover: createStep(projectIds.makeMusic, tutorialIds.makeMusic)
+            }]}), [driverObj, intl, createStep, setShowJourney]
     );
 
     return (
         <DriverJourney
-            configProps={{
-                popoverClass: 'gui-journey',
-                overlayOpacity: 0,
-                steps: steps
-            }}
+            configProps={configProps}
             driverObj={driverObj}
         />
     );
@@ -444,7 +320,8 @@ EditorJourneyDescription.propTypes = {
 
 EditorJourney.propTypes = {
     onActivateDeck: PropTypes.func,
-    setCanViewTutorialsHighlight: PropTypes.func
+    setCanViewTutorialsHighlight: PropTypes.func,
+    setShowJourney: PropTypes.func
 };
 
 module.exports = EditorJourney;

src/components/journeys/editor-journey/editor-journey.scss

@@ -50,7 +50,7 @@
 .description-wrapper {
     flex-direction: row;
     justify-content: space-evenly;
-    gap: 2rem;
+    gap: 3rem;
     margin: 3rem 4rem;
 
     .journey-option {
@@ -59,7 +59,7 @@
         gap: 1rem;
 
         img {
-            max-height: $cols2;
+            height: $cols2;
         }
     }
 }

src/components/journeys/project-journey/project-journey.jsx

@@ -9,7 +9,7 @@ require('./project-journey.scss');
 const messages = defineMessages({
     playProject: {
         id: 'project.journey.play',
-        defaultMessage: 'Click green flag to play',
+        defaultMessage: 'Click the green flag to see what this project does.',
         description: 'Play project'
     },
     remixProject: {
@@ -19,7 +19,7 @@ const messages = defineMessages({
     }
 });
 
-const ProjectJourney = ({setCanViewProjectJourney}) => {
+const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => {
     const [driverObj] = useState(() => (
         driver()
     ));
@@ -34,6 +34,10 @@ const ProjectJourney = ({setCanViewProjectJourney}) => {
                 greenFlagButton.addEventListener('click', () => {
                     setCanViewProjectJourney(false);
                     driverObj.destroy();
+                    setTimeout(() => {
+                        setShouldStopProject(true);
+                        driverObj.drive(1);
+                    }, 8000);
                 });
             },
             description: intl.formatMessage(messages.playProject)
@@ -58,14 +62,11 @@ const ProjectJourney = ({setCanViewProjectJourney}) => {
             configProps={{
                 popoverClass: 'project-journey',
                 showButtons: [
-                    'next',
-                    'previous'
+                    'close'
                 ],
                 onDestroyed: () => {
                     setCanViewProjectJourney(false);
                 },
-                nextBtnText: 'Next',
-                prevBtnText: 'Previous',
                 showProgress: false,
                 steps: steps
             }}
@@ -75,7 +76,8 @@ const ProjectJourney = ({setCanViewProjectJourney}) => {
 };
 
 ProjectJourney.propTypes = {
-    setCanViewProjectJourney: PropTypes.func
+    setCanViewProjectJourney: PropTypes.func,
+    setShouldStopProject: PropTypes.func
 };
 
 module.exports = ProjectJourney;

src/components/journeys/project-journey/project-journey.scss

@@ -1,8 +1,21 @@
 @import "../../../colors";
 
 .driver-popover.project-journey {
+    display: flex;
+    flex-direction: column;
     background-color: $ui-purple-dark;
 
+    .driver-popover-close-btn {
+        height: 2.5rem;
+        width: 2.5rem;
+        border-radius: 50%;
+        margin: 0.5rem;
+        font-size: 2rem;
+        font-weight: bold;
+        color: $type-white;
+        background-color: $ui-purple-dark;
+    }
+
     .driver-popover-arrow-side-left.driver-popover-arrow {
         border-left-color: $ui-purple-dark;;
     }
@@ -25,26 +38,4 @@
         font-weight: 700;
         font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
     }
-
-    .driver-popover-navigation-btns {
-        display: flex;
-        justify-content: space-evenly;
-
-        .driver-popover-btn-disabled {
-            opacity: 1;
-        }
-
-        button {
-            display: inline-block;
-            border: 0;
-            border-radius: 2rem;
-            cursor: pointer;
-            padding: 0.75rem 1rem;
-            font-size: 0.8rem;
-            font-weight: bold;
-    
-            background-color: $ui-white;
-            color: $ui-purple-dark;
-        }
-    }
 }

src/lib/use-previous.js

@@ -1,22 +0,0 @@
-import {useState} from 'react';
-
-export const usePrevious = (
-    value,
-    comparator = (prev, current) => prev === current
-) => {
-    const [state, setState] = useState({
-        value: value,
-        prev: null
-    });
-
-    const current = state.value;
-
-    if (!comparator(current, value)) {
-        setState({
-            value: value,
-            prev: current
-        });
-    }
-
-    return state.prev;
-};

src/views/preview/presentation.jsx

@@ -153,6 +153,7 @@ const PreviewPresentation = ({
     const [canViewProjectJourney, setCanViewProjectJourney] = useState(
         queryString.parse(location.search, {parseBooleans: true}).showJourney
     );
+    const [shouldStopProject, setShouldStopProject] = useState(false);
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
     const revisedDate = ((projectInfo.history && projectInfo.history.modified)) ? projectInfo.history.modified : '';
     const showInstructions = editable || projectInfo.instructions ||
@@ -263,7 +264,10 @@ const PreviewPresentation = ({
                     {
                         isProjectLoaded &&
                         canViewProjectJourney &&
-                        <ProjectJourney setCanViewProjectJourney={setCanViewProjectJourney} />
+                        <ProjectJourney
+                            setCanViewProjectJourney={setCanViewProjectJourney}
+                            setShouldStopProject={setShouldStopProject}
+                        />
                     }
                     {showEmailConfirmationBanner && <EmailConfirmationBanner
                         /* eslint-disable react/jsx-no-bind */
@@ -400,6 +404,7 @@ const PreviewPresentation = ({
                                     onUpdateProjectData={onUpdateProjectData}
                                     onUpdateProjectId={onUpdateProjectId}
                                     onUpdateProjectThumbnail={onUpdateProjectThumbnail}
+                                    shouldStopProject={shouldStopProject}
                                 />
                             </div>
                             <MediaQuery maxWidth={frameless.tabletPortrait - 1}>

src/views/preview/project-view.jsx

@@ -57,14 +57,14 @@ const IntlGUIWithProjectHandler = ({...props}) => {
         const isTutorialOpen = !!queryString.parse(location.search).tutorial;
 
         if (
+            (prevProjectId === 0 || prevProjectId === '0') &&
             props.projectId &&
-            prevProjectId === '0' &&
             props.projectId !== '0' &&
             !isTutorialOpen
         ) {
             setShowJourney(true);
         }
-    }, [props.projectId, prevProjectId, location]);
+    }, [props.projectId, prevProjectId]);
 
     return (
         <>
@@ -73,6 +73,7 @@ const IntlGUIWithProjectHandler = ({...props}) => {
                 <EditorJourney
                     onActivateDeck={props.onActivateDeck}
                     setCanViewTutorialsHighlight={setCanViewTutorialsHighlight}
+                    setShowJourney={setShowJourney}
                 />
             )}
             {canViewTutorialsHighlight && (

static/images/onboarding-journeys/Animation-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.25 289.31"><g id="Layer_1-2"><g><polygon points="5.62 66.87 17.11 111.29 263.82 47.87 254.29 3.94 5.62 66.87" fill="#fbaa1e"/><circle cx="152.92" cy="203.26" r="62.8" fill="#fbaa1e" stroke="#1e1e1e" stroke-miterlimit="10" stroke-width="8.09"/><g><path d="M283.6,112.42H40.71l228.64-58.13c1.95-.53,3.09-2.54,2.56-4.48l-10.48-38.46c-2.23-8.2-10.72-13.05-18.91-10.81L11.36,59.36C3.16,61.59-1.69,70.08,.54,78.27l10.05,36.91c-.07,.29-.12,.58-.12,.9v157.83c0,8.49,6.91,15.41,15.41,15.41h245.97c8.49,0,15.41-6.91,15.41-15.41V116.07c0-2.02-1.63-3.65-3.65-3.65ZM108.92,42.22l42.38,34.38-44.76,10.23-42.38-34.38,44.76-10.23Zm48.04-12.6l46.88,34.38-42.06,10.23-42.38-34.38,37.57-10.23Zm56.13-13.5l42.38,34.38-42.96,11.13-42.38-34.38,42.96-11.13Zm31.34-8.54c4.31-1.18,8.78,1.38,9.95,5.69l9.42,34.59L221.77,13.76l22.67-6.18ZM55.49,54.82l42.38,34.38-43.86,12.03L11.9,66.92c.44-.21,.9-.39,1.38-.52l42.21-11.58ZM7.45,72.72l37.9,30.88-28.24,7.7L7.59,76.35c-.33-1.21-.37-2.44-.14-3.64Zm272.5,201.19c0,4.47-3.64,8.1-8.11,8.1H25.88c-4.47,0-8.1-3.64-8.1-8.1V119.72H279.95v154.18Z" fill="#1e1e1e"/><path d="M125.19,240.95c1.16,.67,2.42,1,3.69,1s2.54-.33,3.69-1l56.09-32.38c2.31-1.34,3.69-3.73,3.69-6.4s-1.38-5.06-3.69-6.4l-56.09-32.38c-2.31-1.34-5.07-1.34-7.39,0-2.31,1.33-3.69,3.73-3.69,6.4v64.77c0,2.67,1.38,5.06,3.69,6.4Zm3.61-71.21s.04-.04,.09-.04c.01,0,.02,0,.04,0l56.09,32.38,1.83-3.16-1.79,3.18s.01,.08-.03,.13l-56.13,32.4s-.08-.03-.09-.09v-64.81Z" fill="#1e1e1e"/></g><path d="M128.8,169.74s.04-.04,.09-.04c.01,0,.02,0,.04,0l56.09,32.38,1.83-3.16-1.79,3.18s.01,.08-.03,.13l-56.13,32.4s-.08-.03-.09-.09v-64.81Z" fill="#7860aa"/></g></g></svg>

static/images/onboarding-journeys/Games-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.29 252.8"><g id="Layer_1-2"><g><circle cx="130.2" cy="124.6" r="120.27" fill="#fbaa1e"/><circle cx="132.35" cy="122.46" r="95.72" fill="#fff"/><circle cx="131.41" cy="125.24" r="30.02" fill="#7e69af"/><polygon points="13.77 75.45 38.17 94.28 60.83 82.42 32.94 65.34 13.77 75.45" fill="#7e69af"/><polygon points="35.58 37.94 63.22 51.56 62.56 77.13 34.94 59.61 35.58 37.94" fill="#7e69af"/><g><path d="M104.12,140.6l-1.56-4.03c-.21-.54-.4-1.08-.58-1.64l-1.33-4.11,8.23-2.66,1.33,4.11c.13,.4,.27,.79,.42,1.17l1.56,4.03-8.06,3.13Z" fill="#1e1e1e"/><path d="M131.7,156.54c-7.21,0-14.25-2.52-19.81-7.08l-3.34-2.74,5.49-6.68,3.34,2.74c4.02,3.3,9.11,5.12,14.33,5.12,12.46,0,22.6-10.14,22.6-22.6s-10.14-22.6-22.6-22.6c-1.1,0-2.21,.08-3.3,.24l-4.28,.62-1.24-8.56,4.28-.62c1.5-.22,3.02-.33,4.54-.33,17.23,0,31.25,14.02,31.25,31.25s-14.02,31.25-31.25,31.25Z" fill="#1e1e1e"/><path d="M75.74,120.35l-8.51-1.51,.75-4.26c.3-1.7,.68-3.41,1.11-5.07l1.1-4.18,8.36,2.19-1.1,4.18c-.38,1.44-.7,2.92-.96,4.39l-.75,4.26Z" fill="#1e1e1e"/><path d="M131.05,189.86c-15.49,0-30.44-5.6-42.1-15.78-11.54-10.08-19.1-23.94-21.29-39.02l-.62-4.28,8.56-1.24,.62,4.28c3.91,27.02,27.48,47.4,54.83,47.4,30.55,0,55.4-24.85,55.4-55.4s-24.85-55.4-55.4-55.4c-4.97,0-9.9,.66-14.65,1.96l-4.17,1.14-2.28-8.34,4.17-1.14c5.49-1.5,11.19-2.26,16.93-2.26,35.32,0,64.05,28.73,64.05,64.05s-28.73,64.05-64.05,64.05Z" fill="#1e1e1e"/><path d="M94.55,83.91l-5.16-6.94,3.47-2.58c1.46-1.08,2.98-2.11,4.52-3.07l3.68-2.27,4.55,7.35-3.68,2.27c-1.33,.82-2.65,1.72-3.91,2.65l-3.47,2.58Z" fill="#1e1e1e"/><path d="M40.15,123.75l-8.63-.57,.28-4.31c.1-1.54,.24-3.11,.42-4.64l.49-4.3,8.59,.97-.49,4.3c-.16,1.4-.29,2.83-.38,4.24l-.28,4.31Z" fill="#1e1e1e"/><path d="M130.89,224.83c-24.68,0-48.34-9.12-66.62-25.67-18.15-16.43-29.56-38.83-32.12-63.08l-.45-4.3,8.6-.91,.45,4.3c4.88,46.18,43.64,81.01,90.15,81.01,49.99,0,90.66-40.67,90.66-90.65s-40.67-90.66-90.66-90.66c-11.07,0-21.89,1.97-32.15,5.86l-4.04,1.53-3.07-8.08,4.04-1.53c11.24-4.26,23.09-6.43,35.21-6.43,54.76,0,99.3,44.55,99.3,99.3s-44.55,99.3-99.3,99.3Z" fill="#1e1e1e"/><path d="M79.04,51.02l-4.6-7.32,3.66-2.3c.94-.59,1.9-1.17,2.86-1.73l3.73-2.18,4.35,7.47-3.73,2.18c-.88,.51-1.75,1.04-2.61,1.58l-3.66,2.3Z" fill="#1e1e1e"/><rect x="69.62" y="14.07" width="8.65" height="147.15" transform="translate(-39.88 101.61) rotate(-56.84)" fill="#1e1e1e"/><polygon points="62.89 87.44 58.54 53.99 40.37 41.47 39.34 67.5 30.7 67.16 32.35 25.45 66.62 49.05 71.47 86.32 62.89 87.44" fill="#1e1e1e"/><polygon points="36.32 99.83 0 73.51 37.2 55.49 40.97 63.27 16.78 74.99 37.56 90.05 66.76 78.55 69.93 86.59 36.32 99.83" fill="#1e1e1e"/><path d="M14.47,108.08l-8.49-1.65,.82-4.24c.29-1.52,.62-3.05,.97-4.56l.98-4.21,8.42,1.96-.98,4.21c-.33,1.41-.63,2.84-.91,4.25l-.82,4.24Z" fill="#1e1e1e"/><path d="M130.89,252.8c-69.7,0-126.4-56.7-126.4-126.4,0-1.98,.05-3.98,.14-5.95l.2-4.32,8.64,.4-.2,4.32c-.09,1.84-.13,3.7-.13,5.55,0,64.93,52.82,117.75,117.75,117.75s117.75-52.82,117.75-117.75S195.82,8.65,130.89,8.65c-17.33,0-34.01,3.67-49.6,10.92l-3.92,1.82-3.65-7.84,3.92-1.82C94.38,3.95,112.29,0,130.89,0c69.7,0,126.4,56.7,126.4,126.4s-56.7,126.4-126.4,126.4Z" fill="#1e1e1e"/><path d="M59.39,32.73l-4.99-7.06,3.53-2.5c1.16-.82,2.34-1.63,3.53-2.41l3.61-2.38,4.76,7.22-3.61,2.38c-1.11,.73-2.22,1.49-3.29,2.25l-3.53,2.5Z" fill="#1e1e1e"/></g></g></g></svg>

static/images/onboarding-journeys/Music-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 328.03 253.62"><g id="Layer_1-2"><g><polygon points="84.02 101.63 76.8 115.85 109.59 139.6 119.32 126.19 84.02 101.63" fill="#f68c24"/><polygon points="75.64 121.2 2.61 236.4 21.81 251.09 105.73 138.5 76.8 115.85 75.64 121.2" fill="#7e69af" fill-rule="evenodd"/><g><path d="M299.39,50.51c.82-5.54,5.98-9.36,11.51-8.54l-15.08,101.51c-.15,10.79-13.15,20.55-30.01,22.18-17.64,1.71-32.84-6.12-33.94-17.49-1.1-11.37,12.31-21.97,29.95-23.68,10.14-.98,19.47,1.19,25.78,5.37l11.79-79.35Zm11.52-8.53c10.39,2.61,26.86,18.97,9.64,63.48-1.08,2.47-2.8,5.96-4.9,9.55-2.77,4.72-6.29,2-4.53-3.18,.86-2.54,1.6-5.08,2.13-7.45,2.52-11.39,7.88-36.27-4.83-45.65l2.49-16.75Z" fill="#231f20" fill-rule="evenodd"/><path d="M208.72,10.36c.64-2.98,3.39-4.96,6.35-4.71v-.05s.77,.16,.77,.16l45.66,9.84,5.26,1.13h0s.05,.01,.08,.02l-12.78,59.31c-.5,6.36-8.54,11.62-18.55,11.94-10.47,.33-19.14-4.87-19.35-11.62-.22-6.75,8.1-12.49,18.58-12.83,6.02-.19,11.44,1.44,15,4.15l7.94-36.86-45.14-9.72-9.47,43.95c-.5,6.36-8.54,11.62-18.55,11.94-10.47,.33-19.14-4.87-19.35-11.62-.22-6.75,8.1-12.49,18.58-12.83,6.02-.19,11.44,1.44,15,4.15l9.99-46.36Z" fill="#231f20" fill-rule="evenodd"/></g><path d="M152.13,63.42l-.64-.65c-8.53-8.02-17.19-13.27-25.99-15.74-2.6-.79-5.68-.99-9.22-.6-2.48,.13-5.88,1.56-10.19,4.31-3.88,2.12-9.01,7.3-15.39,15.54-5.26,7.09-8.64,13.12-10.13,18.1-1.33,4.93-1.54,8.61-.63,11.05,.5,1.57,1.14,3.07,1.9,4.49-2.62,3.48-4.42,6.45-5.36,8.89-.71,2.14-.61,4.49,.31,7.05,.08,.18,.18,.36,.28,.55-22.03,34.63-43.68,68.65-56.45,88.35-3.65,5.63-6.6,10.13-8.94,13.7-1.57,2.4-2.88,4.39-3.98,6.08-3.19,4.92-4.67,7.38-5.32,9.37-.96,2.96-.09,4.9,1.58,6.62,.82,.85,1.83,1.64,2.9,2.48,.35,.28,.73,.57,1.12,.87,3.3,2.53,7.93,5.91,10.9,7.17,4.43,1.88,6.26-.96,10.74-6.82l.33-.44c5.15-6.74,14.56-18.92,23.97-31.12h.01s55.17-73.13,55.17-73.13h0s.01-.02,.01-.02c.15,.03,.3,.06,.45,.08,1.6,.27,3.07-.03,4.41-.9,1.5-.77,3.29-2.36,5.38-4.75,.73-.95,2.11-3,4.12-6.13,4.39,.45,8.24-.47,11.57-2.74,.73-.28,2.45-1.8,5.16-4.54,3.18-3.75,5.78-7.28,7.81-10.59,5.45-8.01,9.27-15.56,11.46-22.65,2.34-8.79-.12-16.76-7.38-23.88Zm-43,76.11h0s0,0,0,0h0Zm-57.83,71.11c-9.41,12.19-18.82,24.37-23.97,31.12l-.33,.44c-5.24,6.85-5.25,6.43-6.79,5.77-2.5-1.06-6.79-4.15-10.17-6.74-.38-.29-.75-.58-1.1-.85-1.18-.92-2.02-1.62-2.59-2.21-1.13-1.17-1.2-1.92-.77-3.24,.48-1.48,1.67-3.53,4.94-8.58,1.09-1.69,2.39-3.67,3.97-6.07,2.34-3.57,5.29-8.07,8.95-13.71,12.65-19.51,33.98-53.04,55.77-87.29,1.02,1.1,2.29,2.27,3.85,3.51,.58,.48,1.19,.96,1.83,1.43l17.18,12.35c1.21,.8,2.43,1.45,3.66,1.95l-54.43,72.14Zm61.86-74.98c-.44,.26-.95,.43-1.51,.53l.06-.09h0c-.56,.16-1.14,.2-1.77,.15-.04,0-.07,0-.11,0-.29-.03-.58-.09-.88-.16-.12-.03-.24-.07-.36-.1-.18-.05-.36-.11-.55-.17-1.24-.44-2.67-1.15-4.3-2.12l-15.99-11.51-3.48-2.73c-1.89-1.53-3.33-3.17-4.34-4.9-.29-.58-.48-1.17-.57-1.76h0s0,0,0,0c-.03-.25-.04-.51-.03-.78,.03-.83,.23-1.75,.6-2.75l.68-1.57c.72-1.45,1.76-3.06,3.09-4.82,1.05,1.46,2.25,2.82,3.61,4.1,7.63,7.58,16.93,13.79,27.91,18.63,1.64,.67,3.22,1.19,4.74,1.56-3.26,4.88-5.53,7.71-6.8,8.47Z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><path d="M152.75,150.65c-3.52-.05-6.79-2.27-8.02-5.79-1.56-4.49,.81-9.4,5.31-10.97,9.77-3.4,16.89-11.91,18.58-22.21,.77-4.7,5.19-7.88,9.89-7.12,4.7,.77,7.88,5.2,7.11,9.89-2.7,16.54-14.16,30.23-29.92,35.71-.98,.34-1.97,.49-2.95,.48Z" fill="#fbaa1e"/><path d="M166.39,181.86c-3.49-.05-6.74-2.23-7.99-5.71-1.61-4.48,.72-9.41,5.19-11.02,20.13-7.23,34.67-24.76,37.93-45.74,.73-4.7,5.11-7.92,9.84-7.19,4.7,.73,7.92,5.14,7.19,9.84-4.23,27.22-23.06,49.95-49.13,59.31-1,.36-2.03,.52-3.03,.51Z" fill="#fbaa1e"/><path d="M70.5,31.21c3.52,.05,6.79,2.27,8.02,5.79,1.56,4.49-.81,9.4-5.31,10.97-9.77,3.4-16.89,11.91-18.58,22.21-.77,4.7-5.19,7.88-9.89,7.12-4.7-.77-7.88-5.2-7.11-9.89,2.7-16.54,14.16-30.23,29.92-35.71,.98-.34,1.97-.49,2.95-.48Z" fill="#fbaa1e"/><path d="M56.87,0c3.49,.05,6.74,2.23,7.99,5.71,1.61,4.48-.72,9.41-5.19,11.02-20.13,7.23-34.67,24.76-37.93,45.74-.73,4.7-5.11,7.92-9.84,7.19-4.7-.73-7.92-5.14-7.19-9.84C8.93,32.6,27.76,9.87,53.83,.51,54.84,.15,55.86-.01,56.87,0Z" fill="#fbaa1e"/></g></g></svg>

static/images/onboarding-journeys/On-Own-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.84 300.12"><g id="Layer_1-2"><g><path d="M183.85,193.08l-41.73,72.19c-2.09,3.61-8.19,4.02-13.64,.87-5.45-3.15-8.14-8.64-6.05-12.25l41.73-72.19,19.69,11.38Z" fill="#7e69af"/><g><g><path d="M162.09,138.64l4.81-8.32c3.3-5.71,4.88-12.39,3.77-18.9-1.66-9.7,.56-20.14,7.33-28.83,10.09-12.95,28.17-17.51,43.23-10.96,20.44,8.9,28.05,33.23,17.22,51.96-4.45,7.7-11.27,13.17-19.01,16.02-6.12,2.26-11.12,6.83-14.38,12.49l-4.93,8.54" fill="#febf10" stroke="#ffd996" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M182.72,190.73l-41.7,72.13c-.9,1.55-2.06,2.91-3.48,4.04l-32.5,27.98c-5.12,4.1-12.85-.37-11.85-6.85l8.03-42.12c.27-1.79,.87-3.47,1.76-5.03l33.46-57.87,8.25-14.26" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M184.63,172.81l1.58,.92c4.38,2.53,5.87,8.13,3.34,12.5h0c-2.53,4.38-8.13,5.87-12.5,3.34l-28.52-16.49c-4.38-2.53-5.87-8.13-3.34-12.5h0c2.53-4.38,8.13-5.87,12.5-3.34l1.58,.92" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M159.27,158.15l-4.75-2.75c-4.38-2.53-5.87-8.13-3.34-12.5h0c2.53-4.38,8.13-5.87,12.5-3.34l34.86,20.16c4.38,2.53,5.87,8.13,3.34,12.5h0c-2.53,4.38-8.13,5.87-12.5,3.34l-4.75-2.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><polygon points="119.01 282.87 107.82 276.4 96.63 269.93 97.37 295.78 119.01 282.87" fill="#231f20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M162.09,138.64l4.81-8.32c3.3-5.71,4.88-12.39,3.77-18.9-1.66-9.7,.56-20.14,7.33-28.83,10.09-12.95,28.17-17.51,43.23-10.96,20.44,8.9,28.05,33.23,17.22,51.96-4.45,7.7-11.27,13.17-19.01,16.02-6.12,2.26-11.12,6.83-14.38,12.49l-4.93,8.54" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><polyline points="191.76 109.27 193.94 127.45 210.77 120.27" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="193.94" y1="127.45" x2="188.44" y2="136.95" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="232.41" y1="60.89" x2="236.08" y2="54.56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="149.22" y1="80.45" x2="155.56" y2="84.12" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="250.64" y1="139.09" x2="256.97" y2="142.75" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="260.79" y1="100.56" x2="268.11" y2="100.56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><line x1="180.22" y1="49.75" x2="183.88" y2="56.09" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M162.79,181.32l-40.31,69.72c-2.02,3.49-7.91,3.88-13.17,.84-5.26-3.04-7.86-8.35-5.84-11.84l40.31-69.72,19.02,10.99Z" fill="#7e69af" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/><path d="M181.8,192.32l-40.31,69.72c-2.02,3.49-7.91,3.88-13.17,.84-5.26-3.04-7.86-8.35-5.84-11.84l40.31-69.72,19.02,10.99Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.32"/></g><g><path d="M312.92,249.61c-1.78,0-3.23-1.45-3.23-3.23v-62.08c0-1.78,1.45-3.23,3.23-3.23s3.23,1.45,3.23,3.23v62.08c0,1.78-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/><path d="M328.61,265.3H179.95c-1.78,0-3.23-1.45-3.23-3.23s1.45-3.23,3.23-3.23h145.43V39.45H46.3c-1.78,0-3.23-1.45-3.23-3.23s1.45-3.23,3.23-3.23H328.61c1.78,0,3.23,1.45,3.23,3.23v225.85c0,1.78-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/><path d="M65.4,265.3H33.14c-18.28,0-33.14-14.87-33.14-33.14,0-14.98,12.18-27.16,27.16-27.16,12.34,0,22.37,10.04,22.37,22.37,0,10.23-8.32,18.54-18.54,18.54-8.54,0-15.48-6.94-15.48-15.48,0-1.78,1.45-3.23,3.23-3.23s3.23,1.45,3.23,3.23c0,4.98,4.04,9.02,9.02,9.02,6.66,0,12.08-5.42,12.08-12.08,0-8.78-7.14-15.91-15.91-15.91-11.41,0-20.7,9.29-20.7,20.7,0,14.71,11.97,26.68,26.68,26.68h32.26c1.78,0,3.23,1.45,3.23,3.23s-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/><path d="M3.23,235.38c-1.78,0-3.23-1.45-3.23-3.23V27.16C0,12.18,12.18,0,27.16,0c12.34,0,22.37,10.04,22.37,22.37V227.37c0,1.78-1.45,3.23-3.23,3.23s-3.23-1.45-3.23-3.23V22.37c0-8.78-7.14-15.91-15.91-15.91C15.74,6.46,6.46,15.75,6.46,27.16V232.15c0,1.78-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/><g><path d="M18.92,107.72c-1.78,0-3.23-1.45-3.23-3.23V33.22c0-1.78,1.45-3.23,3.23-3.23s3.23,1.45,3.23,3.23V104.49c0,1.78-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/><path d="M18.92,129.78c-1.78,0-3.23-1.45-3.23-3.23v-7.34c0-1.78,1.45-3.23,3.23-3.23s3.23,1.45,3.23,3.23v7.34c0,1.78-1.45,3.23-3.23,3.23Z" fill="#1e1e1e"/></g></g></g></g></g></svg>

static/images/onboarding-journeys/Tutorials-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 349.79 255.18"><g id="Layer_1-2"><g><path d="M94.31,91.76s13.65-16.35,49.71-15.95c36.06,.41,49.29,17.02,49.33,17.06l67.63,.76c2.28,.03,4.11,1.9,4.08,4.17l-.56,49.38c-.03,2.28-1.89,4.11-4.17,4.08l-113.03-1.28h0s-2.42-.03-2.42-.03c-1.09-.01-2.15,.41-2.93,1.18l-5.9,5.77c-.78,.77-1.84,1.19-2.93,1.18l-13.09-.15c-1.09-.01-2.14-.46-2.9-1.24l-5.77-5.9c-.76-.78-1.81-1.23-2.9-1.24l-2.42-.03h0l-8.25-.09c-2.28-.03-4.1-1.89-4.08-4.17l.6-53.5h0Z" fill="#f9a11b" fill-rule="evenodd" stroke="#000" stroke-miterlimit="10" stroke-width="3.79"/><path d="M147.74,149.98h1.97s0-.01,0-.01l80.1-.51c2.36-.02,4.28,1.88,4.29,4.24l.19,43.66c0,2.36-1.89,4.28-4.25,4.3l-80.1,.51h0s-1.97,.01-1.97,.01c-1.54,0-3.02,.63-4.1,1.73l-5.32,5.38c-1.08,1.1-2.56,1.72-4.1,1.73l-12.68,.08c-1.54,.01-3.02-.59-4.11-1.67l-5.37-5.31c-1.09-1.08-2.57-1.68-4.11-1.67h-1.97s0,.01,0,.01l-8.85,.06c-2.36,.01-4.28-1.89-4.29-4.24l-.19-43.66c-.01-2.36,1.89-4.28,4.25-4.3l8.85-.06h0s1.97-.01,1.97-.01c1.54,0,3.02,.59,4.11,1.67l5.37,5.31c1.09,1.08,2.57,1.68,4.11,1.67l12.68-.08c1.54,0,3.02-.63,4.1-1.73l5.32-5.38c1.08-1.1,2.56-1.72,4.1-1.73Z" fill="#7e69af" fill-rule="evenodd" stroke="#000" stroke-miterlimit="10" stroke-width="3.79"/><g><rect x="27.95" y="59.08" width="293.9" height="168.16" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><rect x="3.03" y="3.03" width="343.72" height="249.11" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><line x1="3.03" y1="40.4" x2="346.76" y2="40.4" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><line x1="21.72" y1="21.72" x2="34.17" y2="21.72" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><line x1="46.63" y1="21.72" x2="59.08" y2="21.72" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><line x1="71.54" y1="21.72" x2="84" y2="21.72" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="6.07"/><polygon points="160.79 121.68 160.79 171.51 204.39 146.59 160.79 121.68" fill="#1e1e1e" stroke="#1e1e1e" stroke-linejoin="round" stroke-width="6.07"/></g></g></g></svg>

webpack.config.js

@@ -272,11 +272,11 @@ module.exports = {
             'process.env.ASSET_HOST': `"${process.env.ASSET_HOST || 'https://assets.scratch.mit.edu'}"`,
             'process.env.BACKPACK_HOST': `"${process.env.BACKPACK_HOST || 'https://backpack.scratch.mit.edu'}"`,
             'process.env.CLOUDDATA_HOST': `"${process.env.CLOUDDATA_HOST || 'clouddata.scratch.mit.edu'}"`,
-            'process.env.PROJECT_HOST': `"${process.env.PROJECT_HOST || 'http://localhost:8444'}"`,
+            'process.env.PROJECT_HOST': `"${process.env.PROJECT_HOST || 'https://projects.scratch.mit.edu'}"`,
             'process.env.STATIC_HOST': `"${process.env.STATIC_HOST || 'https://uploads.scratch.mit.edu'}"`,
             'process.env.SCRATCH_ENV': `"${process.env.SCRATCH_ENV || 'development'}"`,
-            'process.env.THUMBNAIL_URI': `"${process.env.THUMBNAIL_URI || '/projects/{}/thumbnail'}"`,
-            'process.env.THUMBNAIL_HOST': `"${process.env.THUMBNAIL_HOST || 'http://localhost:4001'}"`,
+            'process.env.THUMBNAIL_URI': `"${process.env.THUMBNAIL_URI || '/internalapi/project/thumbnail/{}/set/'}"`,
+            'process.env.THUMBNAIL_HOST': `"${process.env.THUMBNAIL_HOST || ''}"`,
             'process.env.DEBUG': Boolean(process.env.DEBUG),
             'process.env.GA_ID': `"${process.env.GA_ID || 'UA-000000-01'}"`,
             'process.env.GTM_ENV_AUTH': `"${process.env.GTM_ENV_AUTH || ''}"`,