feat: [UEPR-44] handled interaction with highlighted element

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

@@ -11,12 +11,15 @@ const DriverJourney = ({configProps, driverObj}) => {
 
     useEffect(() => {
         const driverSteps = steps.map((step, index) => {
-            const {sectionComponents = {}, ...popoverProps} = step.popover;
+            const {sectionComponents = {}, callback, ...popoverProps} = step.popover;
             return {
                 ...step,
                 popover: {
                     ...popoverProps,
                     onPopoverRender: popover => {
+                        if (callback) {
+                            callback();
+                        }
                         const portalData = [];
                         for (const [section, component] of Object.entries(
                             sectionComponents

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

@@ -138,8 +138,8 @@ const openTutorial = (onActivateDeck, tutorial, driverObj) => {
     driverObj.destroy();
 };
 
-const ownOptingPicked = (setIsOnOwnOptionPicked, driverObg) => {
+const ownOptingPicked = (setCanViewTutorialsHighlight, driverObg) => {
-    setIsOnOwnOptionPicked(true);
+    setCanViewTutorialsHighlight(true);
     driverObg.destroy();
 };
 
@@ -165,7 +165,7 @@ const EditorJourneyDescription = ({title, descriptionData}) => (
     </>
 );
 
-const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
+const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight}) => {
     const [driverObj] = useState(() => (
         driver()
     ));
@@ -290,7 +290,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
@@ -318,7 +318,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
@@ -347,7 +347,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
@@ -375,7 +375,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
@@ -403,7 +403,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
@@ -431,13 +431,13 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
                             {
                                 imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
                                 text: intl.formatMessage(messages.onMyOwnTitle),
-                                handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
+                                handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
                             }
                         ]}
                     />
                 }
             }
-        }], [onActivateDeck, setIsOnOwnOptionPicked]
+        }], [onActivateDeck, setCanViewTutorialsHighlight]
     );
 
     return (
@@ -463,7 +463,7 @@ EditorJourneyDescription.propTypes = {
 
 EditorJourney.propTypes = {
     onActivateDeck: PropTypes.func,
-    setIsOnOwnOptionPicked: PropTypes.func
+    setCanViewTutorialsHighlight: PropTypes.func
 };
 
 module.exports = EditorJourney;

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

@@ -2,6 +2,8 @@ const React = require('react');
 const {driver} = require('driver.js');
 const DriverJourney = require('../driver-journey/driver-journey.jsx');
 const {defineMessages, useIntl} = require('react-intl');
+const {useState} = require('react');
+const PropTypes = require('prop-types');
 require('./project-journey.scss');
 
 const messages = defineMessages({
@@ -17,8 +19,8 @@ const messages = defineMessages({
     }
 });
 
-const ProjectJourney = () => {
+const ProjectJourney = ({setCanViewProjectJourney}) => {
-    const [driverObj] = React.useState(() => (
+    const [driverObj] = useState(() => (
         driver()
     ));
     
@@ -27,12 +29,26 @@ const ProjectJourney = () => {
     const steps = [{
         element: 'div[class^="stage_green-flag-overlay-wrapper"] > div',
         popover: {
+            callback: () => {
+                const greenFlagButton = document.querySelector('div[class^="stage_green-flag-overlay-wrapper"] > div');
+                greenFlagButton.addEventListener('click', () => {
+                    setCanViewProjectJourney(false);
+                    driverObj.destroy();
+                });
+            },
             description: intl.formatMessage(messages.playProject)
         }
     },
     {
         element: '.remix-button',
         popover: {
+            callback: () => {
+                const remixButton = document.querySelector('.remix-button');
+                remixButton.addEventListener('click', () => {
+                    setCanViewProjectJourney(false);
+                    driverObj.destroy();
+                });
+            },
             description: intl.formatMessage(messages.remixProject)
         }
     }];
@@ -45,6 +61,9 @@ const ProjectJourney = () => {
                     'next',
                     'previous'
                 ],
+                onDestroyed: () => {
+                    setCanViewProjectJourney(false);
+                },
                 nextBtnText: 'Next',
                 prevBtnText: 'Previous',
                 showProgress: false,
@@ -55,4 +74,8 @@ const ProjectJourney = () => {
     );
 };
 
+ProjectJourney.propTypes = {
+    setCanViewProjectJourney: PropTypes.func
+};
+
 module.exports = ProjectJourney;

src/components/journeys/tutorials-highlight/tutorials-highlight.jsx

@@ -3,6 +3,7 @@ const {driver} = require('driver.js');
 const DriverJourney = require('../driver-journey/driver-journey.jsx');
 const {defineMessages, useIntl} = require('react-intl');
 const PropTypes = require('prop-types');
+const {useState} = require('react');
 require('./tutorials-highlight.scss');
 
 const messages = defineMessages({
@@ -13,8 +14,8 @@ const messages = defineMessages({
     }
 });
 
-const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
+const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => {
-    const [driverObj] = React.useState(() => (
+    const [driverObj] = useState(() => (
         driver()
     ));
     
@@ -24,6 +25,13 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
         element: '.tutorials-button',
         popover: {
             showButtons: ['close'],
+            callback: () => {
+                const tutorialsButton = document.querySelector('.tutorials-button');
+                tutorialsButton.addEventListener('click', () => {
+                    setCanViewTutorialsHighlight(false);
+                    driverObj.destroy();
+                });
+            },
             side: 'bottom',
             description: intl.formatMessage(messages.tutorialsHighlight)
         }
@@ -36,7 +44,7 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
                 showProgress: false,
                 overlayOpacity: 0,
                 onDestroyed: () => {
-                    setIsOnOwnOptionPicked(false);
+                    setCanViewTutorialsHighlight(false);
                 },
                 steps: steps
             }}
@@ -46,7 +54,7 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
 };
 
 TutorialsHighlight.propTypes = {
-    setIsOnOwnOptionPicked: PropTypes.func
+    setCanViewTutorialsHighlight: PropTypes.func
 };
 
 module.exports = TutorialsHighlight;

src/views/preview/presentation.jsx

@@ -150,6 +150,9 @@ const PreviewPresentation = ({
     visibilityInfo
 }) => {
     const [hasSubmittedComment, setHasSubmittedComment] = useState(false);
+    const [canViewProjectJourney, setCanViewProjectJourney] = useState(
+        queryString.parse(location.search, {parseBooleans: true}).showJourney
+    );
     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 ||
@@ -259,8 +262,8 @@ const PreviewPresentation = ({
                 <React.Fragment>
                     {
                         isProjectLoaded &&
-                        queryString.parse(location.search, {parseBooleans: true}).showJourney &&
+                        canViewProjectJourney &&
-                        <ProjectJourney />
+                        <ProjectJourney setCanViewProjectJourney={setCanViewProjectJourney} />
                     }
                     {showEmailConfirmationBanner && <EmailConfirmationBanner
                         /* eslint-disable react/jsx-no-bind */

src/views/preview/project-view.jsx

@@ -50,7 +50,7 @@ const TutorialsHighlight = require('../../components/journeys/tutorials-highligh
 
 const IntlGUIWithProjectHandler = ({...props}) => {
     const [showJourney, setShowJourney] = useState(false);
-    const [isOnOwnOptionPicked, setIsOnOwnOptionPicked] = useState(false);
+    const [canViewTutorialsHighlight, setCanViewTutorialsHighlight] = useState(false);
     const prevProjectId = usePrevious(props.projectId);
 
     useEffect(() => {
@@ -72,10 +72,14 @@ const IntlGUIWithProjectHandler = ({...props}) => {
             {showJourney && (
                 <EditorJourney
                     onActivateDeck={props.onActivateDeck}
-                    setIsOnOwnOptionPicked={setIsOnOwnOptionPicked}
+                    setCanViewTutorialsHighlight={setCanViewTutorialsHighlight}
+                />
+            )}
+            {canViewTutorialsHighlight && (
+                <TutorialsHighlight
+                    setCanViewTutorialsHighlight={setCanViewTutorialsHighlight}
                 />
             )}
-            {isOnOwnOptionPicked && <TutorialsHighlight setIsOnOwnOptionPicked={setIsOnOwnOptionPicked} />}
         </>
     );
 };