| 1 |
import { useState, useEffect } from '@wordpress/element'; |
| 2 |
import { useHistory } from 'react-router-dom'; |
| 3 |
import { RadioGroup } from '@headlessui/react'; |
| 4 |
import { __ } from '@wordpress/i18n'; |
| 5 |
import { useStateValue } from '../utils/StateProvider'; |
| 6 |
import Elementor from '@WizardImages/elementor.svg'; |
| 7 |
import BeaverBuilder from '@WizardImages/beaver-builder.svg'; |
| 8 |
import BlockEditor from '@WizardImages/block-editor.png'; |
| 9 |
import otherPageBuilders from '@WizardImages/other.svg'; |
| 10 |
import Bricks from '@WizardImages/bricks.png'; |
| 11 |
import { ArrowRightIcon } from '@heroicons/react/24/outline'; |
| 12 |
|
| 13 |
const mailingLists = [ |
| 14 |
{ |
| 15 |
id: 1, |
| 16 |
slug: 'gutenberg', |
| 17 |
title: 'Block Builder', |
| 18 |
image: BlockEditor, |
| 19 |
}, |
| 20 |
{ |
| 21 |
id: 2, |
| 22 |
slug: 'elementor', |
| 23 |
title: 'Elementor', |
| 24 |
image: Elementor, |
| 25 |
}, |
| 26 |
{ |
| 27 |
id: 3, |
| 28 |
slug: 'bricks-builder', |
| 29 |
title: 'Bricks', |
| 30 |
image: Bricks, |
| 31 |
}, |
| 32 |
{ |
| 33 |
id: 4, |
| 34 |
slug: 'beaver-builder', |
| 35 |
title: 'Beaver Builder', |
| 36 |
image: BeaverBuilder, |
| 37 |
}, |
| 38 |
{ |
| 39 |
id: 5, |
| 40 |
slug: 'other', |
| 41 |
title: 'Other', |
| 42 |
image: otherPageBuilders, |
| 43 |
}, |
| 44 |
]; |
| 45 |
|
| 46 |
function classNames( ...classes ) { |
| 47 |
return classes.filter( Boolean ).join( ' ' ); |
| 48 |
} |
| 49 |
|
| 50 |
function PageBuilderStep() { |
| 51 |
const [ selectedMailingLists, setSelectedMailingLists ] = useState( |
| 52 |
cartflows_wizard?.active_page_builder || mailingLists[ 0 ].slug |
| 53 |
); |
| 54 |
const [ { action_button }, dispatch ] = useStateValue(); |
| 55 |
const history = useHistory(); |
| 56 |
const handleChange = ( value ) => { |
| 57 |
setSelectedMailingLists( value ); |
| 58 |
|
| 59 |
dispatch( { |
| 60 |
status: 'SET_WIZARD_PAGE_BUILDER', |
| 61 |
selected_page_builder: value, |
| 62 |
} ); |
| 63 |
}; |
| 64 |
|
| 65 |
useEffect( () => { |
| 66 |
dispatch( { |
| 67 |
status: 'SET_NEXT_STEP', |
| 68 |
action_button: { |
| 69 |
button_text: __( 'Save & Continue', 'cartflows' ), |
| 70 |
button_class: 'install-page-builder-plugins', |
| 71 |
}, |
| 72 |
} ); |
| 73 |
|
| 74 |
const installPbPluginsProcess = function () { |
| 75 |
dispatch( { |
| 76 |
status: 'SET_NEXT_STEP', |
| 77 |
action_button: { |
| 78 |
button_text: __( 'Saving', 'cartflows' ), |
| 79 |
button_class: 'install-page-builder-plugins is-loading', |
| 80 |
}, |
| 81 |
} ); |
| 82 |
|
| 83 |
dispatch( { |
| 84 |
status: 'PROCESSING', |
| 85 |
} ); |
| 86 |
}; |
| 87 |
|
| 88 |
document.addEventListener( |
| 89 |
'wcf-page-builder-plugins-install-processing', |
| 90 |
installPbPluginsProcess, |
| 91 |
false |
| 92 |
); |
| 93 |
|
| 94 |
const installPbPluginsSuccess = function () { |
| 95 |
// Stop the processing. |
| 96 |
dispatch( { |
| 97 |
status: 'RESET', |
| 98 |
} ); |
| 99 |
|
| 100 |
history.push( { |
| 101 |
pathname: 'index.php', |
| 102 |
search: `?page=cartflow-setup&step=plugin-install`, |
| 103 |
} ); |
| 104 |
}; |
| 105 |
|
| 106 |
document.addEventListener( |
| 107 |
'wcf-page-builder-plugins-install-success', |
| 108 |
installPbPluginsSuccess, |
| 109 |
false |
| 110 |
); |
| 111 |
|
| 112 |
return () => { |
| 113 |
document.removeEventListener( |
| 114 |
'wcf-page-builder-plugins-install-processing', |
| 115 |
installPbPluginsProcess |
| 116 |
); |
| 117 |
|
| 118 |
document.removeEventListener( |
| 119 |
'wcf-page-builder-plugins-install-success', |
| 120 |
installPbPluginsSuccess |
| 121 |
); |
| 122 |
}; |
| 123 |
}, [] ); |
| 124 |
|
| 125 |
return ( |
| 126 |
<div className="wcf-container"> |
| 127 |
<div className="wcf-row text-center mt-12"> |
| 128 |
<div className="bg-white rounded mx-auto px-11"> |
| 129 |
<span className="text-sm font-medium text-primary-600 mb-10 text-center block tracking-[.24em] uppercase"> |
| 130 |
{ __( 'Step 2 of 6', 'cartflows' ) } |
| 131 |
</span> |
| 132 |
<h1 className="wcf-step-heading mb-4"> |
| 133 |
{ __( |
| 134 |
'Hi there! Tell us which page builder you use.', |
| 135 |
'cartflows' |
| 136 |
) } |
| 137 |
</h1> |
| 138 |
|
| 139 |
<div className="flex justify-center mb-10"> |
| 140 |
<RadioGroup |
| 141 |
value={ selectedMailingLists } |
| 142 |
onChange={ handleChange } |
| 143 |
> |
| 144 |
<RadioGroup.Label className="text-center overflow-hidden max-w-2xl mb-10 mx-auto text-lg font-normal text-slate-500 block"> |
| 145 |
{ __( |
| 146 |
"CartFlows works with all page builders, so don't worry if your page builder is not in the list. ", |
| 147 |
'cartflows' |
| 148 |
) } |
| 149 |
</RadioGroup.Label> |
| 150 |
|
| 151 |
<div className="wcf-pb-list-wrapper flex justify-center items-center gap-8"> |
| 152 |
{ mailingLists.map( ( mailingList ) => ( |
| 153 |
<RadioGroup.Option |
| 154 |
key={ mailingList.id } |
| 155 |
value={ mailingList.slug } |
| 156 |
data-key={ mailingList.slug } |
| 157 |
className={ ( { checked, active } ) => |
| 158 |
classNames( |
| 159 |
'wcf-pb-list--option relative border rounded shadow-sm flex justify-center cursor-pointer h-[9rem] w-[130px] transition-all duration-300 focus:outline-none hover:drop-shadow-lg hover:translate-y-[-1px] hover:shadow-[0px 4px 8px -2px rgb(9 30 66 / 25%), 0px 0px 1px rgb(9 30 66 / 31%)]', |
| 160 |
checked |
| 161 |
? 'border-transparent' |
| 162 |
: 'border-gray-300', |
| 163 |
active ? '' : '' |
| 164 |
) |
| 165 |
} |
| 166 |
> |
| 167 |
{ ( { checked, active } ) => ( |
| 168 |
<> |
| 169 |
<div className="flex-auto flex justify-center"> |
| 170 |
<div className="text-center"> |
| 171 |
<RadioGroup.Description |
| 172 |
as="img" |
| 173 |
className="block text-sm font-normal text-[#4B5563] h-[45%] rounded-full m-5" |
| 174 |
src={ |
| 175 |
mailingList.image |
| 176 |
} |
| 177 |
></RadioGroup.Description> |
| 178 |
<RadioGroup.Label |
| 179 |
as="div" |
| 180 |
className="block text-sm font-normal text-[#4B5563] mt-4" |
| 181 |
> |
| 182 |
{ |
| 183 |
mailingList.title |
| 184 |
} |
| 185 |
</RadioGroup.Label> |
| 186 |
</div> |
| 187 |
</div> |
| 188 |
|
| 189 |
<div |
| 190 |
className={ classNames( |
| 191 |
active |
| 192 |
? 'border-2' |
| 193 |
: 'border-2', |
| 194 |
checked |
| 195 |
? 'border-orange-500' |
| 196 |
: 'border-transparent', |
| 197 |
'absolute -inset-px rounded pointer-events-none' |
| 198 |
) } |
| 199 |
aria-hidden="true" |
| 200 |
/> |
| 201 |
</> |
| 202 |
) } |
| 203 |
</RadioGroup.Option> |
| 204 |
) ) } |
| 205 |
</div> |
| 206 |
</RadioGroup> |
| 207 |
|
| 208 |
<span |
| 209 |
id="wcf-selected-page-builder" |
| 210 |
data-selected-pb={ selectedMailingLists } |
| 211 |
></span> |
| 212 |
</div> |
| 213 |
|
| 214 |
<div className="flex justify-center"> |
| 215 |
<div |
| 216 |
className={ `wcf-wizard--button ${ |
| 217 |
action_button.button_class |
| 218 |
? action_button.button_class |
| 219 |
: '' |
| 220 |
}` } |
| 221 |
> |
| 222 |
{ action_button.button_text } |
| 223 |
<ArrowRightIcon |
| 224 |
className="w-5 mt-0.5 ml-1.5 stroke-2" |
| 225 |
aria-hidden="true" |
| 226 |
/> |
| 227 |
</div> |
| 228 |
</div> |
| 229 |
</div> |
| 230 |
</div> |
| 231 |
</div> |
| 232 |
); |
| 233 |
} |
| 234 |
|
| 235 |
export default PageBuilderStep; |
| 236 |
|
