Feature: add 'schema-find-tour' to onboarding steps (#7344)

src/FormBuilder/resources/js/form-builder/src/components/onboarding/Onboarding.tsx

@@ -39,6 +39,7 @@ function TourEffectsAndEvents() {
     const {mode} = useEditorState();
     const dispatch = useFormStateDispatch();
     const {selectBlock} = useDispatch('core/block-editor');
+    const [showToolMenu, setShowToolsMenu] = useState(!!window.onboardingTourData.autoStartSchemaTour);
 
     useEffect(() => {
         const selectAmountBlockCallback = () => {
@@ -59,7 +60,9 @@ function TourEffectsAndEvents() {
         const clickExitTourCallback = (event) => {
             var element = event.target as Element;
             if (tour.isActive() && element.classList.contains('js-exit-tour')) {
-                tour.complete();
+               const renderToolSteps = tour.steps.some(step => step.id === 'schema-find-tour');
+
+                renderToolSteps ? tour.show('schema-find-tour') : tour.complete();
             }
         }
 
@@ -80,9 +83,6 @@ function TourEffectsAndEvents() {
                 method: 'POST',
                 body: data,
             })
-
-            // Trigger tools menu
-            // Highlight
         }
 
         tour.on('complete', onTourComplete);
@@ -92,7 +92,19 @@ function TourEffectsAndEvents() {
         }
     }, [mode])
 
-    return <></>
+    useEffect(()=> {
+        const openToolsMenuCallBack = () => {
+            document.getElementById('FormBuilderSidebarToggle')?.click();
+        };
+
+        document.addEventListener('openToolsMenu', openToolsMenuCallBack);
+
+        return () => {
+            window.removeEventListener('openToolsMenu', openToolsMenuCallBack);
+        };
+    }, [mode]);
+
+    return <></>;
 }
 
 const Onboarding = () => {

src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withButtons.tsx

@@ -2,36 +2,79 @@ const withButtons = (steps) => {
     const previous = {
         classes: 'shepherd-button-secondary',
         text: 'Previous',
-        type: 'back'
+        type: 'back',
     };
+
     const next = {
         classes: 'shepherd-button-primary',
         text: 'Next',
-        type: 'next'
-    }
+        type: 'next',
+    };
+
+    const nextVariant = {
+        classes: 'shepherd-button-primary',
+        text: 'Got it',
+        type: 'next',
+    };
+
     const complete = {
         classes: 'shepherd-button-primary',
         text: 'Got it',
-        type: 'complete'
-    }
+        type: 'complete',
+    };
+
+    const okay = {
+        classes: 'shepherd-button-primary shepherd-button-primary--tools',
+        text: 'Okay',
+        type: 'complete',
+    };
+
+    const hasToolSteps = steps.some(({id}) => id === 'schema-find-tour');
+
     return steps.map((step, index) => {
+        if (index === 0) {
+            return {
+                ...step,
+                ...{
+                    buttons: [next],
+                },
+            };
+        }
+
+        if (step.id === 'schema-find-tour') {
+            return {
+                ...step,
+                ...{
+                    buttons: [okay],
+                },
+            };
+        }
 
-        if(index === 0) {
-            return {...step, ...{
-                buttons: [next]
-            }}
+        if (hasToolSteps && step.id === 'schema-edit-block') {
+            return {
+                ...step,
+                ...{
+                    buttons: [previous, nextVariant],
+                },
+            };
         }
 
-        if(index === steps.length - 1) {
-            return {...step, ...{
-                buttons: [previous, complete]
-            }}
+        if (index === steps.length - 1) {
+            return {
+                ...step,
+                ...{
+                    buttons: [previous, complete],
+                },
+            };
         }
 
-        return {...step, ...{
-                buttons: [previous, next]
-            }}
+        return {
+            ...step,
+            ...{
+                buttons: [previous, next],
+            },
+        };
     });
-}
+};
 
-export default withButtons
+export default withButtons;

src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withText.tsx

@@ -13,52 +13,38 @@ const TextContent = ({title, description, stepNumber, stepCount}) => {
     );
 
     return (
-        <div>
-            <div
-                style={{
-                    display: 'flex',
-                    backgroundColor: 'var(--givewp-blue-25)',
-                    fontSize: '12px',
-                    padding: 'var(--givewp-spacing-1) var(--givewp-spacing-3)',
-                    borderRadius: '2px',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                }}
-            >
+        <div className={'givewp-shepherd'}>
+            <div className={'givewp-shepherd__steps'}>
                 <div>{stepCountText}</div>
                 <Button variant="link" className={'js-exit-tour'}>
                     {__('Exit tour', 'give')}
                 </Button>
             </div>
             <h3
+                className={'givewp-shepherd__title'}
                 style={{
-                    fontSize: '16px',
-                    fontWeight: '700',
-                    margin: 'var(--givewp-spacing-3) 0',
                     // @ts-ignore
                     textWrap: 'balance',
                 }}
             >
                 {title}
             </h3>
-            <p style={{fontSize: '14px'}}>{description}</p>
+            <p className={'givewp-shepherd__description'}>{description}</p>
         </div>
     );
 };
 
 const withText = (steps) => {
     return steps.map((step, index) => {
+        const showToolSteps = steps.some((step: {id: string}) => step.id === 'schema-find-tour');
+        const stepCount = showToolSteps ? steps.length - 1 : steps.length;
+
         const Component = step.component;
         const content = (
-            <TextContent
-                title={step.title}
-                description={step.text}
-                stepNumber={index + 1}
-                stepCount={steps.length}
-            />
+            <TextContent title={step.title} description={step.text} stepNumber={index + 1} stepCount={stepCount} />
         );
         const tempContainer = document.createElement('div');
-        render( Component ?? content, tempContainer);
+        render(Component ?? content, tempContainer);
 
         return {
             ...step,

src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx

@@ -1,7 +1,7 @@
 import {__} from '@wordpress/i18n';
 import Placement from '@givewp/form-builder/components/onboarding/steps/types/placement';
 
-export default [
+const schemaSteps = [
     {
         id: 'schema-canvas',
         attachTo: {element: '#form-blocks-canvas', on: 'right-start' as Placement},
@@ -58,3 +58,30 @@ export default [
         },
     },
 ];
+
+const toolSteps = {
+    id: 'schema-find-tour',
+    attachTo: {element: '.givewp-block-editor-tools__tour', on: 'bottom-end' as Placement},
+    title: '',
+    highlightClass: 'givewp-block-editor-tools__item',
+    text: __(
+        'Want to view the guided tour later? Access this option in the three dots menu above at any time.',
+        'give'
+    ),
+    beforeShowPromise: function () {
+        return new Promise<void>(function (resolve) {
+            document.dispatchEvent(new CustomEvent('openToolsMenu'));
+            setTimeout(function () {
+                resolve();
+            }, 100);
+        });
+    },
+};
+
+const renderToolSteps = !!window.onboardingTourData.autoStartSchemaTour;
+
+if (renderToolSteps) {
+    schemaSteps.push(toolSteps);
+}
+
+export default schemaSteps;

src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx

@@ -257,6 +257,7 @@ const HeaderContainer = ({SecondarySidebarButtons = null, showSidebar, toggleSho
                                     <MenuGroup label={__('Support', 'give')}>
                                         {mode !== EditorMode.settings && (
                                             <MenuItem
+                                                className={'givewp-block-editor-tools__tour'}
                                                 onClick={() => {
                                                     // @ts-ignore
                                                     if (!window.tour.isActive()) {