render.js
125 lines
| 1 | import GatewaysEditor from '../components/gateways-editor'; |
| 2 | |
| 3 | const { |
| 4 | RadioControl, |
| 5 | Button, |
| 6 | } = wp.components; |
| 7 | |
| 8 | const { |
| 9 | withDispatch, |
| 10 | withSelect, |
| 11 | } = wp.data; |
| 12 | |
| 13 | const { |
| 14 | useState, |
| 15 | useEffect, |
| 16 | } = wp.element; |
| 17 | const { |
| 18 | __, |
| 19 | } = wp.i18n; |
| 20 | const { |
| 21 | compose, |
| 22 | } = wp.compose; |
| 23 | |
| 24 | const { |
| 25 | ActionModal, |
| 26 | } = JetFBComponents; |
| 27 | const { |
| 28 | withDispatchGateways, |
| 29 | withSelectGateways, |
| 30 | useMetaState, |
| 31 | } = JetFBHooks; |
| 32 | |
| 33 | const gatewaysData = window.JetFormEditorData.gateways; |
| 34 | |
| 35 | const getGatewayLabel = ( type ) => { |
| 36 | return ( |
| 37 | gatewaysData.list.find( el => el.value === type ).label |
| 38 | ); |
| 39 | }; |
| 40 | |
| 41 | function PluginGateways( props ) { |
| 42 | |
| 43 | const { |
| 44 | setGateway, |
| 45 | setGatewayScenario, |
| 46 | clearGateway, |
| 47 | clearScenario, |
| 48 | gatewayGeneral, |
| 49 | gatewayScenario, |
| 50 | } = props; |
| 51 | |
| 52 | const [ meta, setMeta ] = useMetaState( '_jf_gateways' ); |
| 53 | const [ isEdit, setEdit ] = useState( false ); |
| 54 | |
| 55 | useEffect( () => { |
| 56 | if ( isEdit ) { |
| 57 | setGateway( meta ); |
| 58 | setGatewayScenario( |
| 59 | meta[ meta.gateway ]?.scenario ); |
| 60 | } |
| 61 | else { |
| 62 | clearGateway(); |
| 63 | clearScenario(); |
| 64 | } |
| 65 | }, [ isEdit ] ); |
| 66 | |
| 67 | const closeModal = ( newMeta = false ) => { |
| 68 | if ( false !== newMeta ) { |
| 69 | setMeta( newMeta ); |
| 70 | } |
| 71 | setEdit( false ); |
| 72 | }; |
| 73 | |
| 74 | return <> |
| 75 | <RadioControl |
| 76 | key={ 'gateways_radio_control' } |
| 77 | selected={ meta.gateway ?? 'none' } |
| 78 | options={ [ |
| 79 | { label: 'None', value: 'none' }, |
| 80 | ...gatewaysData.list, |
| 81 | ] } |
| 82 | onChange={ gateway => { |
| 83 | setMeta( { ...meta, gateway } ); |
| 84 | } } |
| 85 | /> |
| 86 | { ( |
| 87 | 'none' !== meta.gateway && meta.gateway |
| 88 | ) && <Button |
| 89 | onClick={ () => setEdit( true ) } |
| 90 | icon={ 'admin-tools' } |
| 91 | style={ { |
| 92 | margin: '1em 0', |
| 93 | } } |
| 94 | isSecondary |
| 95 | > |
| 96 | { __( 'Edit', 'jet-form-builder' ) } |
| 97 | </Button> } |
| 98 | |
| 99 | { isEdit && ( |
| 100 | <ActionModal |
| 101 | classNames={ [ 'width-60' ] } |
| 102 | onRequestClose={ () => closeModal() } |
| 103 | onCancelClick={ () => closeModal() } |
| 104 | onUpdateClick={ () => closeModal( { |
| 105 | ...gatewayGeneral, |
| 106 | [ gatewayGeneral.gateway ]: { |
| 107 | ...( |
| 108 | gatewayGeneral[ gatewayGeneral.gateway ] || {} |
| 109 | ), |
| 110 | scenario: gatewayScenario, |
| 111 | }, |
| 112 | } ) } |
| 113 | title={ `Edit ${ getGatewayLabel( meta.gateway ) } Settings` } |
| 114 | > |
| 115 | <GatewaysEditor/> |
| 116 | </ActionModal> |
| 117 | ) } |
| 118 | </>; |
| 119 | } |
| 120 | |
| 121 | export default compose( |
| 122 | withDispatch( withDispatchGateways ), |
| 123 | withSelect( withSelectGateways ), |
| 124 | )( PluginGateways ); |
| 125 |