fix: more type juggling and comparison problems

src/DonationForms/Blocks/DonationFormBlock/resources/editor/Edit.tsx

@@ -54,7 +54,7 @@ export default function Edit({attributes, isSelected, setAttributes, className,
     }, []);
 
     const [isLegacyForm, isLegacyTemplate, link] = (() => {
-        const form = formOptions.find((form) => form.value === String(id));
+        const form = formOptions.find((form) => form.value === id);
 
         return [form?.isLegacyForm, form?.isLegacyTemplate, form?.link];
     })();

src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormBlockControls.tsx

@@ -1,19 +1,19 @@
 import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {InspectorControls} from '@wordpress/block-editor';
-import {Option} from '../types';
+import {FormOption} from '../hooks/useFormOptions';
 
 interface DonationFormBlockControls {
     attributes: Readonly<any>;
     setAttributes: (newAttributes: Record<string, any>) => void;
-    formOptions: Option[];
+    formOptions: FormOption[];
     isResolving: boolean;
     isLegacyTemplate: boolean;
     isLegacyForm: boolean;
 }
 
 /**
- * @unreleased updated setAttributes ID to be a number.
+ * @unreleased updated setAttributes ID to be a number and formOptions to return select options.
  * @since 3.2.0
  */
 export default function DonationFormBlockControls({
@@ -48,7 +48,7 @@ export default function DonationFormBlockControls({
                             options={[
                                 // add a disabled selector manually
                                 ...[{value: '', label: __('Select...', 'give'), disabled: true}],
-                                ...formOptions,
+                                ...formOptions.map((form) => ({label: form.label, value: String(form.value)})),
                             ]}
                             onChange={(newFormId) => {
                                 setAttributes({id: Number(newFormId)});

src/DonationForms/Blocks/DonationFormBlock/resources/editor/components/DonationFormSelector.tsx

@@ -7,16 +7,23 @@ import {reactSelectStyles, reactSelectThemeStyles} from '../styles/reactSelectSt
 import logo from '../images/givewp-logo.svg';
 
 import '../styles/index.scss';
+import {FormOption} from '../hooks/useFormOptions';
 
 // @ts-ignore
 const savePost = () => dispatch('core/editor').savePost();
 
+type DonationFormSelectorProps = {
+    formOptions: FormOption[];
+    isResolving: boolean;
+    handleSelect: (id: number) => void;
+}
+
 /**
  * @since 3.2.0
  */
-export default function DonationFormSelector({formOptions, isResolving, handleSelect}) {
-    const [selectedForm, setSelectedForm] = useState(null);
-    const form = formOptions.find(form => form.value == selectedForm);
+export default function DonationFormSelector({formOptions, isResolving, handleSelect}: DonationFormSelectorProps) {
+    const [selectedForm, setSelectedForm] = useState<number>(null);
+    const form = formOptions.find(form => form.value === selectedForm);
     const {isSaving, isDisabled} = usePostState();
 
     return (

src/DonationForms/Blocks/DonationFormBlock/resources/editor/hooks/useFormOptions.ts

@@ -1,9 +1,15 @@
 import {__} from '@wordpress/i18n';
 import {useSelect} from '@wordpress/data';
 import type {Post} from '@wordpress/core-data/src/entity-types';
-import type {Form, Option} from '../types';
+import type {Form} from '../types';
 
-type FormOption = Form & Option;
+/**
+ * @unreleased
+ */
+export interface FormOption extends Form {
+    label: string;
+    value: number;
+}
 
 /**
  * @since 3.2.0 include isLegacyForm, isLegacyFormTemplate & link.