Refactor: update Honorific block to only accept labels and add field validation

package.json

@@ -69,7 +69,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.12",
         "@givewp/design-system-foundation": "^1.1.0",
-        "@givewp/form-builder-library": "^1.6.0",
+        "@givewp/form-builder-library": "^1.7.0",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^2.9.10",
         "@paypal/paypal-js": "^5.1.4",

src/DonationForms/Actions/ConvertDonationFormBlocksToFieldsApi.php

@@ -261,6 +261,8 @@ protected function createNodeFromBlockWithUniqueAttributes(BlockModel $block, in
     }
 
     /**
+     * @unreleased updated honorific field with validation
+     *
      * @since 3.0.0
      */
     protected function createNodeFromDonorNameBlock(BlockModel $block): Node
@@ -293,9 +295,14 @@ protected function createNodeFromDonorNameBlock(BlockModel $block): Node
 
 
             if ($block->hasAttribute('showHonorific') && $block->getAttribute('showHonorific') === true) {
-                $group->getNodeByName('honorific')
-                    ->label('Title')
-                    ->options(...array_values($block->getAttribute('honorifics')));
+                $options = array_filter(array_values((array)$block->getAttribute('honorifics')));
+
+                if (!empty($options)){
+                    $group->getNodeByName('honorific')
+                        ->label(__('Title', 'give'))
+                        ->options(...$options)
+                        ->rules('max:255', 'in:' . implode(',', $options));
+                    }
             } else {
                 $group->remove('honorific');
             }

src/FormBuilder/resources/js/form-builder/src/blocks/fields/donor-name/Edit.tsx

@@ -10,8 +10,22 @@ import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowDat
 const titleLabelTransform = (token = '') => token.charAt(0).toUpperCase() + token.slice(1);
 const titleValueTransform = (token = '') => token.trim().toLowerCase();
 
+type Attributes = {
+    showHonorific: boolean;
+    useGlobalSettings: boolean;
+    honorifics: string[];
+    firstNameLabel: string;
+    firstNamePlaceholder: string;
+    lastNameLabel: string;
+    lastNamePlaceholder: string;
+    requireLastName: boolean;
+}
+
 export default function Edit({
-    attributes: {
+    attributes,
+    setAttributes,
+}: BlockEditProps<any>) {
+    const {
         showHonorific,
         useGlobalSettings,
         honorifics,
@@ -20,9 +34,7 @@ export default function Edit({
         lastNameLabel,
         lastNamePlaceholder,
         requireLastName,
-    },
-    setAttributes,
-}: BlockEditProps<any>) {
+    } = attributes as Attributes;
     const [selectedTitle, setSelectedTitle] = useState<string>((Object.values(honorifics)[0] as string) ?? '');
     const [honorificOptions, setHonorificOptions] = useState<OptionProps[]>(
         Object.values(honorifics).map((token: string) => {
@@ -51,17 +63,19 @@ export default function Edit({
     }
 
     useEffect(() => {
-        const options = !!useGlobalSettings ? getFormBuilderWindowData().nameTitlePrefixes : ['Mr', 'Ms', 'Mrs'];
+        if (useGlobalSettings) {
+            const options = !!useGlobalSettings ? getFormBuilderWindowData().nameTitlePrefixes : ['Mr', 'Ms', 'Mrs'];
 
-        setOptions(
-            Object.values(options).map((token: string) => {
-                return {
-                    label: titleLabelTransform(token),
-                    value: titleValueTransform(token),
-                    checked: selectedTitle === token,
-                } as OptionProps;
-            })
-        );
+            setOptions(
+                Object.values(options).map((token: string) => {
+                    return {
+                        label: titleLabelTransform(token),
+                        value: titleValueTransform(token),
+                        checked: selectedTitle === token,
+                    } as OptionProps;
+                })
+            );
+        }
     }, [useGlobalSettings]);
 
     return (
@@ -122,7 +136,7 @@ export default function Edit({
                                     <SelectControl
                                         label={__('Options', 'give')}
                                         onChange={() => setAttributes({useGlobalSettings: !useGlobalSettings})}
-                                        value={useGlobalSettings}
+                                        value={useGlobalSettings ? 'true' : 'false'}
                                         options={[
                                             {label: __('Global', 'give'), value: 'true'},
                                             {label: __('Customize', 'give'), value: 'false'},
@@ -161,6 +175,7 @@ export default function Edit({
                                 selectable={false}
                                 options={honorificOptions}
                                 setOptions={setOptions}
+                                toggleEnabled={false}
                                 defaultControlsTooltip={__('Title Prefixes', 'give')}
                             />
                         </div>