diff --git a/src/components/journeys/driver-journey/driver-journey.jsx b/src/components/journeys/driver-journey/driver-journey.jsx index bcdc86c68..dfe7fa5f0 100644 --- a/src/components/journeys/driver-journey/driver-journey.jsx +++ b/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 diff --git a/src/components/journeys/editor-journey/editor-journey.jsx b/src/components/journeys/editor-journey/editor-journey.jsx index ebdc99f89..01c7582c7 100644 --- a/src/components/journeys/editor-journey/editor-journey.jsx +++ b/src/components/journeys/editor-journey/editor-journey.jsx @@ -138,8 +138,8 @@ const openTutorial = (onActivateDeck, tutorial, driverObj) => { driverObj.destroy(); }; -const ownOptingPicked = (setIsOnOwnOptionPicked, driverObg) => { - setIsOnOwnOptionPicked(true); +const ownOptingPicked = (setCanViewTutorialsHighlight, driverObg) => { + 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; diff --git a/src/components/journeys/project-journey/project-journey.jsx b/src/components/journeys/project-journey/project-journey.jsx index 8c2b45f3a..8b765259a 100644 --- a/src/components/journeys/project-journey/project-journey.jsx +++ b/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 [driverObj] = React.useState(() => ( +const ProjectJourney = ({setCanViewProjectJourney}) => { + 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; diff --git a/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx b/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx index 8d413221f..79c2c7e5a 100644 --- a/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx +++ b/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 [driverObj] = React.useState(() => ( +const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => { + 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; diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index d601374cb..70dcd8932 100644 --- a/src/views/preview/presentation.jsx +++ b/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 = ({ { isProjectLoaded && - queryString.parse(location.search, {parseBooleans: true}).showJourney && - + canViewProjectJourney && + } {showEmailConfirmationBanner && { 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 && ( + )} + {canViewTutorialsHighlight && ( + )} - {isOnOwnOptionPicked && } ); };