profile-builder
/
form-builder
/
blocks
/
src
/
blocks
/
field-gdpr-communication-preferences
/
edit.js
edit.js in User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor 4.0.3, at form-builder/blocks/src/blocks/field-gdpr-communication-preferences/edit.js
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { PanelBody, CheckboxControl } from '@wordpress/components'; |
| 3 | import BaseFieldEdit from '../../components/BaseFieldEdit'; |
| 4 | |
| 5 | // Fixed preference vocabulary: value => label. Must match the legacy add-on's |
| 6 | // front-end map (add-ons-free/gdpr-communication-preferences/front-end/ |
| 7 | // gdpr-communication-preferences.php — $checkbox_labels) and the admin options |
| 8 | // order (admin/manage-fields.php: Email, Telephone, SMS, Post). |
| 9 | const PREFERENCES = [ |
| 10 | { value: 'email', label: __( 'Email', 'profile-builder' ) }, |
| 11 | { value: 'phone', label: __( 'Telephone', 'profile-builder' ) }, |
| 12 | { value: 'sms', label: __( 'SMS', 'profile-builder' ) }, |
| 13 | { value: 'post', label: __( 'Post', 'profile-builder' ) }, |
| 14 | ]; |
| 15 | |
| 16 | function csvList( csv ) { |
| 17 | if ( ! csv ) return []; |
| 18 | return csv.split( ',' ).map( ( v ) => v.trim() ).filter( Boolean ); |
| 19 | } |
| 20 | |
| 21 | function labelFor( value ) { |
| 22 | const found = PREFERENCES.find( ( p ) => p.value === value ); |
| 23 | return found ? found.label : value; |
| 24 | } |
| 25 | |
| 26 | export default function Edit( props ) { |
| 27 | const { attributes, setAttributes } = props; |
| 28 | const enabled = csvList( attributes[ 'gdpr-communication-preferences' ] ); |
| 29 | |
| 30 | // Toggle membership while preserving existing order — append on enable, |
| 31 | // filter on disable — so a saved custom order (e.g. from the classic editor) |
| 32 | // survives instead of being rebuilt from the fixed vocabulary order. The CSV |
| 33 | // order IS the front-end display order; `-sort-order` is a legacy admin-only |
| 34 | // persistence aid the front-end never reads, so the block leaves it alone. |
| 35 | const toggle = ( value, checked ) => { |
| 36 | let list = csvList( attributes[ 'gdpr-communication-preferences' ] ); |
| 37 | if ( checked ) { |
| 38 | if ( ! list.includes( value ) ) list.push( value ); |
| 39 | } else { |
| 40 | list = list.filter( ( v ) => v !== value ); |
| 41 | } |
| 42 | setAttributes( { 'gdpr-communication-preferences': list.join( ',' ) } ); |
| 43 | }; |
| 44 | |
| 45 | const extraPanels = ( |
| 46 | <PanelBody title={ __( 'Communication Preferences', 'profile-builder' ) }> |
| 47 | <p style={ { marginBottom: '0.75em' } }> |
| 48 | { __( 'Select which communication channels users can opt into.', 'profile-builder' ) } |
| 49 | </p> |
| 50 | { PREFERENCES.map( ( p ) => ( |
| 51 | <CheckboxControl |
| 52 | key={ p.value } |
| 53 | label={ p.label } |
| 54 | checked={ enabled.includes( p.value ) } |
| 55 | onChange={ ( c ) => toggle( p.value, c ) } |
| 56 | /> |
| 57 | ) ) } |
| 58 | </PanelBody> |
| 59 | ); |
| 60 | |
| 61 | return ( |
| 62 | <BaseFieldEdit { ...props } inspectorPanels={ extraPanels }> |
| 63 | <ul className="wppb-fb-checkboxes" style={ { listStyle: 'none', margin: 0, padding: 0 } }> |
| 64 | { enabled.length > 0 ? ( |
| 65 | enabled.map( ( value ) => ( |
| 66 | <li key={ value } style={ { marginBottom: '5px' } }> |
| 67 | <input type="checkbox" disabled /> |
| 68 | <label style={ { marginLeft: '5px' } }>{ labelFor( value ) }</label> |
| 69 | </li> |
| 70 | ) ) |
| 71 | ) : ( |
| 72 | <div>{ __( '(no preferences enabled)', 'profile-builder' ) }</div> |
| 73 | ) } |
| 74 | </ul> |
| 75 | </BaseFieldEdit> |
| 76 | ); |
| 77 | } |
| 78 |