| 1 |
import React, { useState } from 'react'; |
| 2 |
import { __ } from '@wordpress/i18n'; |
| 3 |
import { useStateValue } from '../utils/StateProvider'; |
| 4 |
import { useHistory, useLocation } from 'react-router-dom'; |
| 5 |
import apiFetch from '@wordpress/api-fetch'; |
| 6 |
import { ArrowRightIcon } from '@heroicons/react/24/outline'; |
| 7 |
|
| 8 |
function FooterNavigationBar( { |
| 9 |
previousStep, |
| 10 |
nextStep, |
| 11 |
currentStep, |
| 12 |
maxSteps, |
| 13 |
} ) { |
| 14 |
const history = useHistory(); |
| 15 |
const query = new URLSearchParams( useLocation().search ); |
| 16 |
const currentActiveStep = query.get( 'step' ); |
| 17 |
const [ completedSteps, setCompletedSteps ] = useState( () => { |
| 18 |
return JSON.parse( localStorage.getItem( 'completedSteps' ) ) || []; |
| 19 |
} ); |
| 20 |
const [ |
| 21 |
{ |
| 22 |
settingsProcess, |
| 23 |
showFooterImportButton, |
| 24 |
action_button, |
| 25 |
isStoreCheckoutImported, |
| 26 |
selected_page_builder, |
| 27 |
}, |
| 28 |
] = useStateValue(); |
| 29 |
|
| 30 |
const woocommerceStatus = |
| 31 |
window.cartflows_wizard?.woocommerce_status ?? null; |
| 32 |
|
| 33 |
const isStepCompleted = |
| 34 |
completedSteps.includes( currentActiveStep ) || |
| 35 |
( currentActiveStep === 'plugin-install' && |
| 36 |
String( woocommerceStatus ).toLowerCase() === 'active' ) || |
| 37 |
[ 'store-checkout', 'optin', 'ready' ].includes( currentActiveStep ); |
| 38 |
|
| 39 |
const getNextButtonString = () => { |
| 40 |
if ( |
| 41 |
nextStep && |
| 42 |
! [ 'ready', 'store-checkout', 'optin' ].includes( |
| 43 |
currentActiveStep |
| 44 |
) |
| 45 |
) { |
| 46 |
return __( 'Next', 'cartflows' ); |
| 47 |
} else if ( |
| 48 |
[ 'store-checkout', 'optin' ].includes( currentActiveStep ) |
| 49 |
) { |
| 50 |
return __( 'Skip', 'cartflows' ); |
| 51 |
} |
| 52 |
return __( 'Finish Store Setup', 'cartflows' ); |
| 53 |
}; |
| 54 |
|
| 55 |
const handlePreviousStep = () => { |
| 56 |
if ( previousStep !== 'dashboard' ) { |
| 57 |
history.push( { |
| 58 |
pathname: 'index.php', |
| 59 |
search: `?page=cartflow-setup&step=${ previousStep }`, |
| 60 |
} ); |
| 61 |
} |
| 62 |
}; |
| 63 |
|
| 64 |
const handleNextStep = ( e ) => { |
| 65 |
e.preventDefault(); |
| 66 |
|
| 67 |
if ( ! isStepCompleted ) { |
| 68 |
return; |
| 69 |
} |
| 70 |
|
| 71 |
setCompletedSteps( ( prev ) => [ |
| 72 |
...new Set( [ ...prev, currentStep ] ), |
| 73 |
] ); |
| 74 |
|
| 75 |
if ( nextStep && settingsProcess !== 'processing' ) { |
| 76 |
history.push( { |
| 77 |
pathname: 'index.php', |
| 78 |
search: `?page=cartflow-setup&step=${ nextStep }`, |
| 79 |
} ); |
| 80 |
} |
| 81 |
|
| 82 |
if ( ! nextStep && currentActiveStep === 'ready' ) { |
| 83 |
e.target.innerText = __( 'Redirecting..', 'cartflows' ); |
| 84 |
|
| 85 |
const ajaxData = new window.FormData(); |
| 86 |
ajaxData.append( 'action', 'cartflows_onboarding_exit' ); |
| 87 |
ajaxData.append( |
| 88 |
'security', |
| 89 |
cartflows_wizard.onboarding_exit_nonce |
| 90 |
); |
| 91 |
ajaxData.append( 'current_step', currentActiveStep ); |
| 92 |
|
| 93 |
apiFetch( { url: ajaxurl, method: 'POST', body: ajaxData } ).then( |
| 94 |
( response ) => { |
| 95 |
if ( response.success ) { |
| 96 |
let redirectUrl = '?page=cartflows'; |
| 97 |
if ( isStoreCheckoutImported ) { |
| 98 |
redirectUrl += '&path=store-checkout'; |
| 99 |
} else if ( |
| 100 |
selected_page_builder !== 'bricks-builder' |
| 101 |
) { |
| 102 |
redirectUrl += '&path=library'; |
| 103 |
} |
| 104 |
window.location.href = |
| 105 |
cartflows_wizard.admin_url + redirectUrl; |
| 106 |
} |
| 107 |
} |
| 108 |
); |
| 109 |
} |
| 110 |
}; |
| 111 |
|
| 112 |
const isNextDisabled = |
| 113 |
( currentStep !== 'plugin-install' && ! isStepCompleted ) || |
| 114 |
settingsProcess === 'processing'; |
| 115 |
const paginationClass = |
| 116 |
'relative z-10 inline-flex items-center rounded-full p-1 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500'; |
| 117 |
return ( |
| 118 |
<footer className="wcf-setup-footer bg-white shadow-md-1 fixed inset-x-0 bottom-0 h-[70px] z-10"> |
| 119 |
<div className="flex items-center justify-between max-w-md mx-auto px-7 py-4 h-full"> |
| 120 |
<div className="wcf-footer-left-section"> |
| 121 |
<button |
| 122 |
type="button" |
| 123 |
onClick={ handlePreviousStep } |
| 124 |
disabled={ previousStep === 'dashboard' } |
| 125 |
> |
| 126 |
{ __( 'Back', 'cartflows' ) } |
| 127 |
</button> |
| 128 |
</div> |
| 129 |
<div className="wcf-footer--pagination hidden md:-mt-px md:flex gap-3"> |
| 130 |
{ Array( maxSteps ) |
| 131 |
.fill() |
| 132 |
.map( ( i, index ) => { |
| 133 |
return ( |
| 134 |
<span |
| 135 |
key={ index } |
| 136 |
className={ `wcf-footer-pagination--tab ${ paginationClass } ${ |
| 137 |
currentStep === index |
| 138 |
? 'bg-primary-500' |
| 139 |
: 'bg-primary-100' |
| 140 |
}` } |
| 141 |
></span> |
| 142 |
); |
| 143 |
} ) } |
| 144 |
</div> |
| 145 |
|
| 146 |
<div className="wcf-footer-right-section"> |
| 147 |
<button |
| 148 |
onClick={ handleNextStep } |
| 149 |
disabled={ isNextDisabled } |
| 150 |
className={ |
| 151 |
isNextDisabled |
| 152 |
? 'opacity-50 cursor-not-allowed' |
| 153 |
: '' |
| 154 |
} |
| 155 |
> |
| 156 |
{ getNextButtonString() } |
| 157 |
</button> |
| 158 |
</div> |
| 159 |
</div> |
| 160 |
|
| 161 |
{ currentActiveStep === 'store-checkout' && |
| 162 |
showFooterImportButton && ( |
| 163 |
<div className="wcf-import-instant-checkout absolute top-4 right-7"> |
| 164 |
<button |
| 165 |
className={ `wcf-wizard--button wcf-import-global-flow px-5 py-2 text-sm ${ action_button?.button_class }` } |
| 166 |
> |
| 167 |
{ action_button.button_text } |
| 168 |
<ArrowRightIcon |
| 169 |
className="w-5 mt-0.5 ml-1.5 stroke-2" |
| 170 |
aria-hidden="true" |
| 171 |
/> |
| 172 |
</button> |
| 173 |
</div> |
| 174 |
) } |
| 175 |
</footer> |
| 176 |
); |
| 177 |
} |
| 178 |
|
| 179 |
export default FooterNavigationBar; |
| 180 |
|
