Feature/4686 email and StUF-ZDS inline form

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

@@ -56,6 +56,114 @@ export default {
           },
         },
       },
+      {
+        id: 'stuf-zds-create-zaak',
+        label: 'StUF-ZDS',
+        // real schema is defined, but irrelevant because of our react components
+        schema: {
+          type: 'object',
+          properties: {
+            zdsZaaktypeCode: {
+              type: 'string',
+              minLength: 1,
+              title: 'Zds zaaktype code',
+              description: 'Zaaktype code for newly created Zaken in StUF-ZDS',
+            },
+            zdsZaaktypeOmschrijving: {
+              type: 'string',
+              minLength: 1,
+              title: 'Zds zaaktype omschrijving',
+              description: 'Zaaktype description for newly created Zaken in StUF-ZDS',
+            },
+            zdsZaaktypeStatusCode: {
+              type: 'string',
+              minLength: 1,
+              title: 'Zds zaaktype status code',
+              description: 'Zaaktype status code for newly created zaken in StUF-ZDS',
+            },
+            zdsZaaktypeStatusOmschrijving: {
+              type: 'string',
+              minLength: 1,
+              title: 'Zds zaaktype status omschrijving',
+              description: 'Zaaktype status omschrijving for newly created zaken in StUF-ZDS',
+            },
+            zdsDocumenttypeOmschrijvingInzending: {
+              type: 'string',
+              minLength: 1,
+              title: 'Zds documenttype omschrijving inzending',
+              description: 'Documenttype description for newly created zaken in StUF-ZDS',
+            },
+            zdsZaakdocVertrouwelijkheid: {
+              type: 'string',
+              enum: [
+                'ZEER GEHEIM',
+                'GEHEIM',
+                'CONFIDENTIEEL',
+                'VERTROUWELIJK',
+                'ZAAKVERTROUWELIJK',
+                'INTERN',
+                'BEPERKT OPENBAAR',
+                'OPENBAAR',
+              ],
+              enumNames: [
+                'Zeer geheim',
+                'Geheim',
+                'Confidentieel',
+                'Vertrouwelijk',
+                'Zaakvertrouwelijk',
+                'Intern',
+                'Beperkt openbaar',
+                'Openbaar',
+              ],
+              title: 'Document confidentiality level',
+              description:
+                'Indication of the level to which extend the dossier of the ZAAK is meant to be public. This is set on the documents created for the ZAAK.',
+            },
+            paymentStatusUpdateMapping: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  formVariable: {
+                    type: 'string',
+                    minLength: 1,
+                    title: 'Form variable',
+                    description: 'The name of the form variable to be mapped',
+                  },
+                  stufName: {
+                    type: 'string',
+                    minLength: 1,
+                    title: 'StUF-ZDS name',
+                    description: 'The name in StUF-ZDS to which the form variable should be mapped',
+                  },
+                },
+                required: ['formVariable', 'stufName'],
+              },
+              title: 'payment status update variable mapping',
+              description:
+                'This mapping is used to map the variable keys to keys used in the XML that is sent to StUF-ZDS. Those keys and the values belonging to them in the submission data are included in extraElementen.',
+              default: [
+                {
+                  formVariable: 'payment_completed',
+                  stufName: 'payment_completed',
+                },
+                {
+                  formVariable: 'payment_amount',
+                  stufName: 'payment_amount',
+                },
+                {
+                  formVariable: 'payment_public_order_ids',
+                  stufName: 'payment_public_order_ids',
+                },
+                {
+                  formVariable: 'provider_payment_ids',
+                  stufName: 'provider_payment_ids',
+                },
+              ],
+            },
+          },
+        },
+      },
       {
         id: 'email',
         label: 'Email registration',
@@ -284,6 +392,37 @@ export const ConfiguredBackends = {
           folderPath: '',
         },
       },
+      {
+        key: 'backend6',
+        name: 'StUF ZDS',
+        backend: 'stuf-zds-create-zaak',
+        options: {
+          paymentStatusUpdateMapping: [
+            {
+              formVariable: 'payment_completed',
+              stufName: 'payment_completed',
+            },
+            {
+              formVariable: 'payment_amount',
+              stufName: 'payment_amount',
+            },
+            {
+              formVariable: 'payment_public_order_ids',
+              stufName: 'payment_public_order_ids',
+            },
+            {
+              formVariable: 'provider_payment_ids',
+              stufName: 'provider_payment_ids',
+            },
+          ],
+          zdsDocumenttypeOmschrijvingInzending: '',
+          zdsZaakdocVertrouwelijkheid: 'OPENBAAR',
+          zdsZaaktypeCode: '',
+          zdsZaaktypeOmschrijving: '',
+          zdsZaaktypeStatusCode: '',
+          zdsZaaktypeStatusOmschrijving: '',
+        },
+      },
     ],
     validationErrors: [
       ['form.registrationBackends.1.options.zgwApiGroup', 'You sure about this?'],

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

@@ -0,0 +1,123 @@
+import {Formik} from 'formik';
+import PropTypes from 'prop-types';
+import React, {useContext, useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {SubmitAction} from 'components/admin/forms/ActionButton';
+import Field from 'components/admin/forms/Field';
+import SubmitRow from 'components/admin/forms/SubmitRow';
+import {ValidationErrorContext} from 'components/admin/forms/ValidationErrors';
+import {ErrorIcon} from 'components/admin/icons';
+import {FormModal} from 'components/admin/modals';
+
+import EmailOptionsFormFields from './EmailOptionsFormFields';
+import {filterErrors} from './utils';
+
+const EmailOptionsForm = ({name, label, schema, formData, onChange}) => {
+  const intl = useIntl();
+  const [modalOpen, setModalOpen] = useState(false);
+  const validationErrors = useContext(ValidationErrorContext);
+  const numErrors = filterErrors(name, validationErrors).length;
+
+  return (
+    <Field name={name} label={label}>
+      <>
+        <span style={{display: 'inline-flex', gap: '10px', alignItems: 'center'}}>
+          <button
+            type="button"
+            className="button"
+            onClick={e => {
+              e.preventDefault();
+              setModalOpen(true);
+            }}
+            // admin style overrides...
+            style={{
+              paddingInline: '15px',
+              paddingBlock: '10px',
+            }}
+          >
+            <FormattedMessage
+              description="Link label to open registration options modal"
+              defaultMessage="Configure options"
+            />
+          </button>
+
+          {numErrors > 0 && (
+            <ErrorIcon
+              text={intl.formatMessage(
+                {
+                  description: 'Objects API registration validation errors icon next to button',
+                  defaultMessage: `{numErrors, plural,
+              one {There is a validation error.}
+              other {There are {numErrors} validation errors.}
+            }`,
+                },
+                {numErrors}
+              )}
+              extraClassname="fa-lg icon icon--danger icon--compact icon--no-pointer"
+            />
+          )}
+        </span>
+
+        <FormModal
+          isOpen={modalOpen}
+          title={
+            <FormattedMessage
+              description="Email registration options modal title"
+              defaultMessage="Plugin configuration: Email"
+            />
+          }
+          closeModal={() => setModalOpen(false)}
+          extraModifiers={['large']}
+        >
+          <Formik
+            initialValues={formData}
+            onSubmit={(values, actions) => {
+              onChange({formData: values});
+              actions.setSubmitting(false);
+              setModalOpen(false);
+            }}
+          >
+            {({handleSubmit}) => (
+              <>
+                <EmailOptionsFormFields name={name} schema={schema} />
+
+                <SubmitRow>
+                  <SubmitAction
+                    onClick={event => {
+                      event.preventDefault();
+                      handleSubmit(event);
+                    }}
+                  />
+                </SubmitRow>
+              </>
+            )}
+          </Formik>
+        </FormModal>
+      </>
+    </Field>
+  );
+};
+
+EmailOptionsForm.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
+  schema: PropTypes.shape({
+    type: PropTypes.oneOf(['object']),
+    properties: PropTypes.object,
+    required: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+  formData: PropTypes.shape({
+    attachFilesToEmail: PropTypes.bool,
+    attachmentFormats: PropTypes.arrayOf(PropTypes.string),
+    emailContentTemplateHtml: PropTypes.string,
+    emailContentTemplateText: PropTypes.string,
+    emailPaymentSubject: PropTypes.string,
+    emailSubject: PropTypes.string,
+    paymentEmails: PropTypes.arrayOf(PropTypes.string),
+    toEmails: PropTypes.arrayOf(PropTypes.string),
+  }),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default EmailOptionsForm;

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

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import {useContext} from 'react';
+
+import Fieldset from 'components/admin/forms/Fieldset';
+import {
+  ValidationErrorContext,
+  ValidationErrorsProvider,
+} from 'components/admin/forms/ValidationErrors';
+
+import EmailAttachmentFormatsSelect from './fields/EmailAttachmentFormatsSelect';
+import EmailContentTemplateHTML from './fields/EmailContentTemplateHTML';
+import EmailContentTemplateText from './fields/EmailContentTemplateText';
+import EmailHasAttachmentSelect from './fields/EmailHasAttachmentSelect';
+import EmailPaymentSubject from './fields/EmailPaymentSubject';
+import EmailPaymentUpdateRecipients from './fields/EmailPaymentUpdateRecipients';
+import EmailRecipients from './fields/EmailRecipients';
+import EmailSubject from './fields/EmailSubject';
+import {filterErrors, getChoicesFromSchema} from './utils';
+
+const EmailOptionsFormFields = ({name, schema}) => {
+  const validationErrors = useContext(ValidationErrorContext);
+
+  const {attachFilesToEmail, attachmentFormats} = schema.properties;
+  const attachFilesToEmailChoices = getChoicesFromSchema(
+    attachFilesToEmail.enum,
+    attachFilesToEmail.enumNames
+  ).map(([value, label]) => ({value, label}));
+  const attachmentFormatsChoices = getChoicesFromSchema(
+    attachmentFormats.items.enum,
+    attachmentFormats.items.enumNames
+  ).map(([value, label]) => ({value, label}));
+
+  const relevantErrors = filterErrors(name, validationErrors);
+  return (
+    <ValidationErrorsProvider errors={relevantErrors}>
+      <Fieldset>
+        <EmailRecipients />
+      </Fieldset>
+      <Fieldset>
+        <EmailAttachmentFormatsSelect options={attachmentFormatsChoices} />
+      </Fieldset>
+      <Fieldset>
+        <EmailPaymentUpdateRecipients />
+      </Fieldset>
+      <Fieldset>
+        <EmailHasAttachmentSelect options={attachFilesToEmailChoices} />
+
+        <EmailSubject />
+        <EmailPaymentSubject />
+
+        <EmailContentTemplateHTML />
+        <EmailContentTemplateText />
+      </Fieldset>
+    </ValidationErrorsProvider>
+  );
+};
+
+EmailOptionsFormFields.propTypes = {
+  name: PropTypes.string.isRequired,
+  schema: PropTypes.shape({
+    type: PropTypes.oneOf(['object']), // it's the JSON schema root, it has to be
+    properties: PropTypes.object,
+    required: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+};
+
+export default EmailOptionsFormFields;