Merge pull request #8801 from MiroslavDionisiev/UEPR-44

[UEPR-44] Implemented custom journeys for onboarding

package.json

@@ -46,6 +46,7 @@
   "dependencies": {
     "bunyan": "1.8.15",
     "clipboard-copy": "2.0.1",
+    "driver.js": "^1.3.1",
     "express": "4.21.1",
     "express-http-proxy": "1.6.3",
     "lodash.defaults": "4.2.0",
@@ -127,7 +128,7 @@
     "postcss-loader": "4.3.0",
     "postcss-simple-vars": "5.0.2",
     "prop-types": "15.8.1",
-    "query-string": "5.1.1",
+    "query-string": "9.1.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-intl": "5.25.1",

src/components/footer/www/footer.jsx

@@ -180,7 +180,7 @@ const Footer = props => (
                         </a>
                     </dd>
                     <dd>
-                        <a href="https://www.scratchfoundation.org/DSA/">
+                        <a href="https://www.scratchfoundation.org/dsa/">
                             <FormattedMessage id="general.dsa" />
                         </a>
                     </dd>

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

@@ -0,0 +1,69 @@
+const React = require('react');
+const {useState, useEffect, isValidElement} = require('react');
+const {createPortal} = require('react-dom');
+const PropTypes = require('prop-types');
+require('driver.js/dist/driver.css');
+
+const DriverJourney = ({configProps, driverObj}) => {
+    const [renderState, setRenderState] = useState();
+
+    useEffect(() => {
+        const {steps, ...restConfig} = configProps;
+        const driverSteps = steps.map((step, index) => {
+            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
+                        )) {
+                            if (isValidElement(component)) {
+                                popover[section].style.display = 'block';
+                                popover[section].innerHTML = '';
+                                portalData.push({
+                                    parentElement: popover[section],
+                                    childElement: component
+                                });
+                            }
+                        }
+
+                        setRenderState({components: portalData, stepIndex: index});
+                    }
+                }
+            };
+        });
+
+        driverObj.setConfig({...restConfig, steps: driverSteps});
+
+        driverObj.drive();
+    }, [driverObj, configProps]);
+
+    if (!renderState) return null;
+    if (!configProps.steps[renderState.stepIndex]) return null;
+
+    return (
+        <>
+            {renderState.components.map(obj =>
+                createPortal(obj.childElement, obj.parentElement)
+            )}
+        </>
+    );
+};
+
+DriverJourney.propTypes = {
+    configProps: PropTypes.shape({
+        steps: PropTypes.arrayOf(PropTypes.object)
+    }),
+    driverObj: PropTypes.shape({
+        setConfig: PropTypes.func,
+        drive: PropTypes.func
+    })
+};
+
+module.exports = DriverJourney;