edit.js
205 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { |
| 3 | TextControl, |
| 4 | ToggleControl, |
| 5 | PanelBody, |
| 6 | SelectControl, |
| 7 | BaseControl, |
| 8 | } from '@wordpress/components'; |
| 9 | import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; |
| 10 | import globeIcon from '../../../lib/img/globe@2x.webp'; |
| 11 | import PhoneFieldVisualPreview from './preview'; |
| 12 | |
| 13 | const { |
| 14 | ToolBarFields, |
| 15 | BlockName, |
| 16 | BlockLabel, |
| 17 | BlockDescription, |
| 18 | AdvancedFields, |
| 19 | FieldWrapper, |
| 20 | BlockAdvancedValue, |
| 21 | } = JetFBComponents; |
| 22 | |
| 23 | const { |
| 24 | useUniqueNameOnDuplicate, |
| 25 | } = JetFBHooks; |
| 26 | |
| 27 | export default function IntlPhoneEdit( props ) { |
| 28 | const { |
| 29 | attributes, |
| 30 | setAttributes, |
| 31 | isSelected, |
| 32 | editProps: { uniqKey, attrHelp }, |
| 33 | } = props; |
| 34 | |
| 35 | const blockProps = useBlockProps(); |
| 36 | useUniqueNameOnDuplicate(); |
| 37 | |
| 38 | return [ |
| 39 | <ToolBarFields |
| 40 | key={ uniqKey( 'ToolBarFields' ) } |
| 41 | { ...props } |
| 42 | />, |
| 43 | isSelected && ( |
| 44 | <InspectorControls key={ uniqKey( 'InspectorControls' ) }> |
| 45 | <PanelBody title={ __( 'General', 'jet-form-builder' ) }> |
| 46 | <BlockLabel /> |
| 47 | <BlockName /> |
| 48 | <BlockDescription /> |
| 49 | </PanelBody> |
| 50 | |
| 51 | <PanelBody title={ __( 'Value', 'jet-form-builder' ) }> |
| 52 | <BlockAdvancedValue /> |
| 53 | </PanelBody> |
| 54 | |
| 55 | <PanelBody |
| 56 | title={ __( 'Field', 'jet-form-builder' ) } |
| 57 | initialOpen={ false } |
| 58 | > |
| 59 | <TextControl |
| 60 | label={ __( 'Default Country', 'jet-form-builder' ) } |
| 61 | value={ attributes.default_country } |
| 62 | onChange={ ( newValue ) => setAttributes( { default_country: newValue } ) } |
| 63 | help={ __( 'ISO country code (e.g., "US", "UA") or "auto" for IP detection.', 'jet-form-builder' ) } |
| 64 | /> |
| 65 | |
| 66 | <BaseControl |
| 67 | id={ uniqKey( 'preferredCountries' ) } |
| 68 | label={ __( 'Preferred Countries', 'jet-form-builder' ) } |
| 69 | help={ __( 'Comma-separated country codes (e.g., "US, GB, UA").', 'jet-form-builder' ) } |
| 70 | > |
| 71 | <TextControl |
| 72 | value={ attributes.preferred_countries } |
| 73 | onChange={ ( newValue ) => { |
| 74 | setAttributes( { preferred_countries: newValue } ); |
| 75 | } } |
| 76 | placeholder="US, GB, UA" |
| 77 | /> |
| 78 | </BaseControl> |
| 79 | |
| 80 | <BaseControl |
| 81 | id={ uniqKey( 'onlyCountries' ) } |
| 82 | label={ __( 'Only Countries', 'jet-form-builder' ) } |
| 83 | help={ __( 'Show only these countries (e.g., "US, CA, MX").', 'jet-form-builder' ) } |
| 84 | > |
| 85 | <TextControl |
| 86 | value={ attributes.only_countries } |
| 87 | onChange={ ( newValue ) => { |
| 88 | setAttributes( { only_countries: newValue } ); |
| 89 | } } |
| 90 | placeholder="US, CA, MX" |
| 91 | /> |
| 92 | </BaseControl> |
| 93 | |
| 94 | { attributes.only_countries.length <= 0 && ( |
| 95 | <BaseControl |
| 96 | id={ uniqKey( 'excludeCountries' ) } |
| 97 | label={ __( 'Exclude Countries', 'jet-form-builder' ) } |
| 98 | help={ __( 'Exclude these countries (e.g., "US, BY")', 'jet-form-builder' ) } |
| 99 | > |
| 100 | <TextControl |
| 101 | value={ attributes.exclude_countries } |
| 102 | onChange={ ( newValue ) => { |
| 103 | setAttributes( { exclude_countries: newValue } ); |
| 104 | } } |
| 105 | placeholder="US, BY" |
| 106 | /> |
| 107 | </BaseControl> |
| 108 | ) } |
| 109 | |
| 110 | <ToggleControl |
| 111 | label={ __( 'Separate Dial Code', 'jet-form-builder' ) } |
| 112 | checked={ attributes.separate_dial_code } |
| 113 | onChange={ () => setAttributes( { separate_dial_code: ! attributes.separate_dial_code } ) } |
| 114 | help={ __( |
| 115 | "Display the selected country's international dial code next to the input, so it looks like it's part of the typed number.", |
| 116 | 'jet-form-builder' |
| 117 | ) |
| 118 | } |
| 119 | /> |
| 120 | |
| 121 | <SelectControl |
| 122 | label={ __( 'Save Format', 'jet-form-builder' ) } |
| 123 | value={ attributes.save_format } |
| 124 | options={ [ |
| 125 | { label: __( 'E.164', 'jet-form-builder' ), value: 'e164' }, |
| 126 | { label: __( 'International', 'jet-form-builder' ), value: 'international' }, |
| 127 | ] } |
| 128 | onChange={ ( newValue ) => setAttributes( { save_format: newValue } ) } |
| 129 | help={ __( |
| 130 | 'Save format: E.164 (+12015553333) or International (+1 201-555-3333).', |
| 131 | 'jet-form-builder' |
| 132 | ) } |
| 133 | /> |
| 134 | |
| 135 | </PanelBody> |
| 136 | |
| 137 | <PanelBody |
| 138 | title={ __( 'Additional Settings', 'jet-form-builder' ) } |
| 139 | initialOpen={ false } |
| 140 | > |
| 141 | <ToggleControl |
| 142 | label={ __( 'Use Global ipinfo.io Token', 'jet-form-builder' ) } |
| 143 | checked={ attributes.use_global } |
| 144 | onChange={ () => setAttributes( { use_global: ! attributes.use_global } ) } |
| 145 | help={ |
| 146 | <> |
| 147 | { __( 'Use', 'jet-form-builder' ) + ' ' } |
| 148 | <a |
| 149 | href={ window.JetFormEditorData?.global_settings_url + '#phone-field-tab' } |
| 150 | target="_blank" |
| 151 | rel="noopener noreferrer" |
| 152 | > |
| 153 | { __( 'Global Settings', 'jet-form-builder' ) } |
| 154 | </a> |
| 155 | </> |
| 156 | } |
| 157 | /> |
| 158 | |
| 159 | { ! attributes.use_global && ( |
| 160 | <TextControl |
| 161 | label={ __( 'ipinfo.io API Token', 'jet-form-builder' ) } |
| 162 | value={ attributes.ipinfo_token } |
| 163 | onChange={ ( newValue ) => setAttributes( { ipinfo_token: newValue } ) } |
| 164 | help={ __( 'Optional: API token for IP-based country detection (50k free requests/month)', 'jet-form-builder' ) } |
| 165 | /> |
| 166 | ) } |
| 167 | </PanelBody> |
| 168 | |
| 169 | <PanelBody |
| 170 | title={ __( 'Validation Messages', 'jet-form-builder' ) } |
| 171 | initialOpen={ false } |
| 172 | > |
| 173 | <TextControl |
| 174 | label={ __( 'Required Field Message', 'jet-form-builder' ) } |
| 175 | value={ attributes.validation_message_required } |
| 176 | onChange={ ( newValue ) => setAttributes( { validation_message_required: newValue } ) } |
| 177 | placeholder={ __( 'Required field is empty', 'jet-form-builder' ) } |
| 178 | /> |
| 179 | |
| 180 | <TextControl |
| 181 | label={ __( 'Invalid Phone Message', 'jet-form-builder' ) } |
| 182 | value={ attributes.validation_message_invalid } |
| 183 | onChange={ ( newValue ) => setAttributes( { validation_message_invalid: newValue } ) } |
| 184 | placeholder={ __( 'Please enter a valid phone number', 'jet-form-builder' ) } |
| 185 | /> |
| 186 | </PanelBody> |
| 187 | |
| 188 | <AdvancedFields { ...props } /> |
| 189 | </InspectorControls> |
| 190 | ), |
| 191 | <div { ...blockProps } key={ uniqKey( 'viewBlock' ) }> |
| 192 | <FieldWrapper |
| 193 | key={ uniqKey( 'FieldWrapper' ) } |
| 194 | { ...props } |
| 195 | > |
| 196 | <PhoneFieldVisualPreview |
| 197 | separateDialCode={ attributes.separate_dial_code } |
| 198 | globeIcon={globeIcon} |
| 199 | placeholder={ attributes.default } |
| 200 | /> |
| 201 | </FieldWrapper> |
| 202 | </div>, |
| 203 | ]; |
| 204 | } |
| 205 |