| 1 |
import { useContext } from 'react'; |
| 2 |
import { OnboardingContext } from '../context/context'; |
| 3 |
import { useNavigate } from '@reach/router'; |
| 4 |
|
| 5 |
import Button from './button'; |
| 6 |
|
| 7 |
export default function SkipButton( props ) { |
| 8 |
const { button, className } = props, |
| 9 |
{ state, updateState } = useContext( OnboardingContext ), |
| 10 |
navigate = useNavigate(), |
| 11 |
skipStep = () => { |
| 12 |
const mutatedState = JSON.parse( JSON.stringify( state ) ); |
| 13 |
|
| 14 |
mutatedState.steps[ state.currentStep ] = 'skipped'; |
| 15 |
|
| 16 |
updateState( mutatedState ); |
| 17 |
|
| 18 |
if ( state.nextStep ) { |
| 19 |
navigate( 'onboarding/' + state.nextStep ); |
| 20 |
} |
| 21 |
}, |
| 22 |
action = button.action || skipStep; |
| 23 |
|
| 24 |
// Make sure the 'action' prop doesn't get printed on the button markup which causes an error. |
| 25 |
delete button.action; |
| 26 |
|
| 27 |
// If the button is a link, no onClick functionality should be added. |
| 28 |
button.onClick = () => { |
| 29 |
elementorCommon.events.dispatchEvent( { |
| 30 |
event: 'skip', |
| 31 |
version: '', |
| 32 |
details: { |
| 33 |
placement: elementorAppConfig.onboarding.eventPlacement, |
| 34 |
step: state.currentStep, |
| 35 |
}, |
| 36 |
} ); |
| 37 |
|
| 38 |
if ( ! button.href ) { |
| 39 |
action(); |
| 40 |
} |
| 41 |
}; |
| 42 |
|
| 43 |
return <Button buttonSettings={ button } className={ className } type="skip" />; |
| 44 |
} |
| 45 |
|
| 46 |
SkipButton.propTypes = { |
| 47 |
button: PropTypes.object.isRequired, |
| 48 |
className: PropTypes.string, |
| 49 |
}; |
| 50 |
|
