From 693c0141652dd0d24f23512538fc89cf336dadcf Mon Sep 17 00:00:00 2001 From: Joshua Dinh <75056371+JoshuaHungDinh@users.noreply.github.com> Date: Wed, 17 Apr 2024 02:19:34 +0900 Subject: [PATCH] Feature: add 'schema-find-tour' to onboarding steps (#7344) --- .../src/components/onboarding/Onboarding.tsx | 22 ++++- .../onboarding/steps/filters/withButtons.tsx | 79 ++++++++++++---- .../onboarding/steps/filters/withText.tsx | 32 ++----- .../onboarding/steps/schema-steps.tsx | 29 +++++- .../src/containers/HeaderContainer.tsx | 1 + .../form-builder/src/styles/_onboarding.scss | 91 +++++++++++++++++++ 6 files changed, 207 insertions(+), 47 deletions(-) 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 && ( { // @ts-ignore if (!window.tour.isActive()) { diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_onboarding.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_onboarding.scss index d70a71eb7d..2adb54a267 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_onboarding.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_onboarding.scss @@ -2,10 +2,12 @@ .shepherd-modal-overlay-container { z-index: 9999999999 !important; } + .shepherd-element { padding: var(--givewp-spacing-6); padding-top: var(--givewp-spacing-4); } + .shepherd-text { padding: 0; @@ -19,23 +21,29 @@ } } } + .shepherd-target { outline: solid 2px var(--wp-blue-blue-50); } + #form-blocks-canvas.shepherd-target { padding: 58px; margin: -58px; } + .shepherd-modal-overlay-container.shepherd-modal-is-visible { opacity: .3 !important; } + .shepherd-header { display: none !important; } + .shepherd-footer { margin-top: var(--givewp-spacing-5); padding: 0; } + .shepherd-button { flex: 1; font-size: 14px; @@ -45,15 +53,18 @@ &.shepherd-button-primary { color: var(--givewp-shades-white); background-color: var(--wp-admin-theme-color); + &:hover { color: var(--givewp-shades-white) !important; background-color: var(--wp-admin-theme-color-darker-10); } } + &.shepherd-button-secondary { color: var(--wp-admin-theme-color) !important; border: solid 1px var(--wp-admin-theme-color); background-color: var(--givewp-shades-white); + &:hover { color: var(--wp-admin-theme-color-darker-10) !important; border: solid 1px var(--wp-admin-theme-color-darker-10); @@ -250,3 +261,83 @@ display: none; } } + +.givewp-shepherd { + &__steps { + display: flex; + background-color: var(--givewp-blue-25); + font-size: 12px; + padding: var(--givewp-spacing-1) var(--givewp-spacing-3); + border-radius: 2px; + justify-content: space-between; + align-items: center; + } + + &__title { + font-size: 16px; + font-weight: 700; + margin: var(--givewp-spacing-3) 0; + } + + &__description { + font-size: 14px; + } +} + + +[data-shepherd-step-id="schema-find-docs"], [data-shepherd-step-id="schema-find-tour"] { + background-color: var(--givewp-green-700); + min-height: fit-content; + max-width: 400px; + width: calc(18.188rem + 2rem); + padding: var(--givewp-spacing-2) var(--givewp-spacing-4) 0 var(--givewp-spacing-4); + font-size: 0.75rem; + + &::after { + content: ''; + position: absolute; + top: -.35rem; + right: 49%; + height: 1rem; + width: .75rem; + display: block; + transform: rotate(45deg); + background-color: var(--givewp-green-700); + } + + * { + color: var(--givewp-shades-white); + background-color: transparent; + } + + .shepherd-footer { + margin-top: 0; + + .shepherd-button:last-child { + padding-bottom: .5rem; + font-weight: 600; + } + } + + .shepherd-button-primary--tools { + display: inline-block; + background: transparent; + text-align: right; + + &:hover { + background-color: transparent; + } + } + + .givewp-shepherd { + &__steps, &__title { + display: none; + } + } +} + +.givewp-block-editor-tools { + &__item { + outline: 2px solid var(--givewp-green-700); + } +}