diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/Onboarding.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/Onboarding.tsx
index 40200856c9..64526feeb5 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/Onboarding.tsx
+++ b/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 = () => {
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withButtons.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withButtons.tsx
index 6ced9a04b0..0a40af8eb1 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withButtons.tsx
+++ b/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;
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withText.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withText.tsx
index 40abeb1b14..880931cd61 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withText.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/filters/withText.tsx
@@ -13,52 +13,38 @@ const TextContent = ({title, description, stepNumber, stepCount}) => {
);
return (
-
-
+
+
{stepCountText}
{title}
-
{description}
+
{description}
);
};
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 = (
-
+
);
const tempContainer = document.createElement('div');
- render( Component ?? content, tempContainer);
+ render(Component ?? content, tempContainer);
return {
...step,
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx
index 8e91eca1e1..d1618d8df3 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx
+++ b/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
(function (resolve) {
+ document.dispatchEvent(new CustomEvent('openToolsMenu'));
+ setTimeout(function () {
+ resolve();
+ }, 100);
+ });
+ },
+};
+
+const renderToolSteps = !!window.onboardingTourData.autoStartSchemaTour;
+
+if (renderToolSteps) {
+ schemaSteps.push(toolSteps);
+}
+
+export default schemaSteps;
diff --git a/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx b/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
index 21fba31629..60010804ea 100644
--- a/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
@@ -257,6 +257,7 @@ const HeaderContainer = ({SecondarySidebarButtons = null, showSidebar, toggleSho
{mode !== EditorMode.settings && (