JetFormBuilder - Select field (multiple) limit based on user role or guest

jetformbuilder

// Reference by default https://gist.github.com/Crocoblock/25125c7db9b19c60b1043061015556d0
// In the jetformbuilder Select field - use the Advanced section - Class field name, and add: select-limit
// Dont forget to enable the multiple option
// place the code in the child theme functions.php or a custom code snippets plugin.
// You can define if the user not logged in how many select item can check. This is the : 'guest' => 1, 

// HOW TO
// In the $limits = [ add your role name like 'mycustomrole" => 4, where the "mycustomrole" is your role cap name, and the "4" is the limit

// Dont forget to target your select field, in the form gutenberg editor like the image: https://prnt.sc/Q4fqdpj3vgTH
// CSS Class name:  select-limit

// you can overwrite the select-limit css class target here:  if ( 'select-multiple' !== nodeMain.type || !nodeMain.classList.contains('select-limit') ) {
// ('select-limit') 

// In the const roleNames = { you can add the role cap name and a human readable version



function my_custom_selection_limits() {
    $user = wp_get_current_user();
    $role = is_user_logged_in() ? $user->roles[0] : 'guest'; // Default role if not logged in

    // Default WP roles: 'administrator', 'editor', 'author', 'contributor', 'subscriber'
    $limits = [
        'administrator' => 3, // Administrator limit
        'subscriber' => 2,    // Subscriber role limit
        'customer' => 1,      // WooCommerce customer role limit
        'guest' => 1,         // Guest (not logged in user) limit
        // Add your roles and their limits here
    ];

    return $limits[$role] ?? 0; // Default limit if the user's role is not defined in the list
}

add_action( 'wp_footer', 'add_custom_selection_limit_script' );
function add_custom_selection_limit_script() {
    $limitCount = my_custom_selection_limits();
    $currentRole = is_user_logged_in() ? wp_get_current_user()->roles[0] : 'guest';
    ?>
    <script type="text/javascript">
        jQuery( document ).ready( function( $ ) {
    
            let inited = false;

            $( window ).on( 'jet-form-builder/init', function() {

                if ( inited ) {
                    return;
                }

                inited = true;

                const {
                    addAction,
                } = JetPlugins.hooks;

                const roleNames = {
                    'administrator': 'Administrator',
                    'subscriber': 'Subscriber',
                    'customer': 'Customer',
                    'guest': 'Guest'
                };

                addAction(
                    'jet.fb.input.makeReactive',
                    'jet-form-builder/select-limit-restriction',
                    function ( input ) {
                        const [ nodeMain ] = input.nodes;

                        if ( 'select-multiple' !== nodeMain.type || !nodeMain.classList.contains('select-limit') ) {
                            return;
                        }

                        let limitCount = <?php echo $limitCount; ?>;
                        let currentRole = '<?php echo $currentRole; ?>';
                        const wrapper     = nodeMain.closest( '.jet-form-builder-row' );
                        const messageNode = document.createElement( 'div' );
                        messageNode.classList.add( 'warning-text' );
                        messageNode.innerHTML = 'As a <b>' + (roleNames[currentRole] || 'User') + '</b>, you can only select up to ' + limitCount + ' items.';

                        input.watch( () => {
                            const { length: count } = input.value.current;

                            const isFull = count >= limitCount;

                            for ( const node of nodeMain.options ) {
                                if ( node.selected ) {
                                    continue;
                                }

                                node.disabled = isFull;
                            }

                            if ( isFull ) {
                                wrapper.append( messageNode );
                                if ( count > limitCount ) {
                                    input.value.current = input.value.current.slice( 0, limitCount );
                                }
                            }
                            else {
                                messageNode.remove();
                            }
                        } );
                    },
                );
            } );

        } );
    </script>
    <?php
}