✨ [#4650] Improve email registration plugin options form

* Added fieldsets to group related options together
* Use a shorter form field label and describe the behaviour in the
  help text
* Filter down the available variables to compatible data types (only
  strings and arrays can produce valid values)
* Updated stories to provide some available variables in the context
* Mark toEmails configuration field as required, since it always is
* Clean up the formik hook/props usage
* Ensure that the 'empty' value is normalized when calling the onChange
  behaviour to normalize formik data types to what the backend expects

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -403,6 +403,73 @@ export default {
         label: 'textfield2',
       },
     },
+    availableFormVariables: [
+      {
+        dataFormat: '',
+        dataType: 'string',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        formDefinition: null,
+        initialValue: '',
+        isSensitiveData: false,
+        key: 'textField1',
+        name: 'textfield1',
+        prefillAttribute: '',
+        prefillPlugin: '',
+        source: 'component',
+      },
+      {
+        dataFormat: '',
+        dataType: 'string',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        formDefinition: null,
+        initialValue: '',
+        isSensitiveData: false,
+        key: 'textField2',
+        name: 'textfield2',
+        prefillAttribute: '',
+        prefillPlugin: '',
+        source: 'component',
+      },
+      {
+        dataFormat: '',
+        dataType: 'string',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        formDefinition: null,
+        initialValue: '',
+        isSensitiveData: false,
+        key: 'userDefinedVar1',
+        name: 'User defined string',
+        prefillAttribute: '',
+        prefillPlugin: '',
+        source: 'user_defined',
+      },
+      {
+        dataFormat: '',
+        dataType: 'array',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        formDefinition: null,
+        initialValue: [],
+        isSensitiveData: false,
+        key: 'userDefinedVar2',
+        name: 'User defined array',
+        prefillAttribute: '',
+        prefillPlugin: '',
+        source: 'user_defined',
+      },
+      {
+        dataFormat: '',
+        dataType: 'float',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        formDefinition: null,
+        initialValue: null,
+        isSensitiveData: false,
+        key: 'userDefinedVar3',
+        name: 'User defined float',
+        prefillAttribute: '',
+        prefillPlugin: '',
+        source: 'user_defined',
+      },
+    ],
     registrationPluginsVariables: [
       {
         pluginIdentifier: 'stuf-zds-create-zaak',

src/openforms/js/components/admin/form_design/registrations/email/EmailOptionsForm.js

@@ -23,6 +23,7 @@ const EmailOptionsForm = ({name, label, schema, formData, onChange}) => {
         />
       }
       initialFormData={{
+        toEmailsFromVariable: '', // ensure an initial value is provided
         ...formData,
         // ensure we have a blank row initially
         toEmails: formData.toEmails?.length ? formData.toEmails : [''],

src/openforms/js/components/admin/form_design/registrations/email/EmailOptionsFormFields.js

@@ -36,9 +36,26 @@ const EmailOptionsFormFields = ({name, schema}) => {
   const relevantErrors = filterErrors(name, validationErrors);
   return (
     <ValidationErrorsProvider errors={relevantErrors}>
-      <Fieldset>
+      <Fieldset
+        title={
+          <FormattedMessage
+            description="Email registration: recipients fieldset title"
+            defaultMessage="Recipients"
+          />
+        }
+      >
         <EmailRecipients />
         <EmailRecipientsFromVariable />
+      </Fieldset>
+
+      <Fieldset
+        title={
+          <FormattedMessage
+            description="Email registration: content fieldset title"
+            defaultMessage="Content"
+          />
+        }
+      >
         <EmailSubject />
         <EmailContentTemplateHTML />
         <EmailContentTemplateText />

src/openforms/js/components/admin/form_design/registrations/email/fields/EmailRecipients.js

@@ -19,6 +19,7 @@ const EmailRecipients = () => {
             defaultMessage="The email addresses to which the submission details will be sent"
           />
         }
+        required
       >
         <ArrayInput
           name="toEmails"

src/openforms/js/components/admin/form_design/registrations/email/fields/EmailRecipientsFromVariable.js

@@ -7,34 +7,35 @@ import FormRow from 'components/admin/forms/FormRow';
 import VariableSelection from 'components/admin/forms/VariableSelection';
 
 const EmailRecipientsFromVariable = () => {
-  const [fieldProps, , fieldHelpers] = useField('toEmailsFromVariable');
-  const {setValue} = fieldHelpers;
+  const [fieldProps, , {setValue}] = useField('toEmailsFromVariable');
   return (
     <FormRow>
       <Field
         name="toEmailsFromVariable"
         label={
           <FormattedMessage
             description="Email registration options 'toEmailsFromVariable' label"
-            defaultMessage="Using a variable to decide to which email address the
-            submission details will be sent"
+            defaultMessage="Variable containing email addresses"
           />
         }
         helpText={
           <FormattedMessage
             description="Email registration options 'toEmailsFromVariable' helpText"
-            defaultMessage="The email address described in this variable will be used
-            for the mailing. If a variable is selected, the general registration
-            addresses will be used as fallback option. "
+            defaultMessage={`If specified, the recipient email addresses will be taken
+            from the selected variable. You must still specify 'regular' email addresses
+            as a fallback, in case something is wrong with the variable.
+            `}
           />
         }
       >
         <VariableSelection
-          name="toEmailsFromVariable"
-          value={fieldProps.value}
+          {...fieldProps}
+          isClearable
           onChange={event => {
-            setValue(event.target.value);
+            const newValue = event.target.value;
+            setValue(newValue == null ? '' : newValue);
           }}
+          filter={variable => ['string', 'array'].includes(variable.dataType)}
         />
       </Field>
     </FormRow>

src/openforms/js/lang/nl.json

@@ -1229,7 +1229,7 @@
     "originalDefault": "Something went wrong while retrieving the available products defined in the selected case. Please check that the services in the selected API group are configured correctly."
   },
   "LeVpdf": {
-    "defaultMessage": "Plugin-insellingen: e-mail",
+    "defaultMessage": "Plugin-instellingen: e-mail",
     "description": "Email registration options modal title",
     "originalDefault": "Plugin configuration: Email"
   },