From 5d89888d386a00160b5c82cafa6befc358a9cdd6 Mon Sep 17 00:00:00 2001
From: Viktor van Wijk <viktorvanwijk@hotmail.com>
Date: Tue, 17 Dec 2024 15:35:08 +0100
Subject: [PATCH] :construction: [#4908] Add Service and FormVariablesSelect
 fields

---
 .../registrations/json/JSONOptionsForm.js     | 12 ++++
 .../json/fields/FormVariablesSelect.js        | 60 +++++++++++++++++++
 .../registrations/json/fields/Service.js      |  5 ++
 3 files changed, 77 insertions(+)
 create mode 100644 src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
 create mode 100644 src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js

diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
index b1a0a458ff..8d74b07d70 100644
--- a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
+++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
@@ -13,12 +13,21 @@ import {
 // TODO-4098: maybe create separate file (JSONOptionsFormFields) for all the fields?
 //  Though, no need to use multiple FieldSets, so adding the fields to the form is pretty
 //  straightforward.
+import FormVariablesSelect from './fields/FormVariablesSelect';
 import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
+// import Service from './fields/Service';
 
 
 const JSONOptionsForm = ({name, label, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
   const relevantErrors = filterErrors(name, validationErrors);
+
+  const formVariableOptions = [
+    {value: "1", label: "One"},
+    {value: "2", label: "Two"},
+    {value: "3", label: "Three"},
+  ]
+
   return (
     <ModalOptionsConfiguration
       name={name}
@@ -36,7 +45,9 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
     >
       <ValidationErrorsProvider errors={relevantErrors}>
         <Fieldset>
+          {/*<Service />*/}
           <RelativeAPIEndpoint />
+          <FormVariablesSelect options={formVariableOptions}/>
         </Fieldset>
       </ValidationErrorsProvider>
     </ModalOptionsConfiguration>
@@ -48,6 +59,7 @@ JSONOptionsForm.propTypes = {
   label: PropTypes.node.isRequired,
   formData: PropTypes.shape({
     relativeApiEndpoint: PropTypes.string,
+    formVariables: PropTypes.arrayOf(PropTypes.string),
   }),
   onChange: PropTypes.func.isRequired,
 };
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
new file mode 100644
index 0000000000..544c7a6d9f
--- /dev/null
+++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
@@ -0,0 +1,60 @@
+import {useField} from 'formik';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const FormVariablesSelect = ({options}) => {
+  const [fieldProps, , fieldHelpers] = useField('formVariables');
+  const {setValue} = fieldHelpers;
+
+  // TODO-4098: what does this do?
+  const values = [];
+  if (fieldProps.value && fieldProps.value.length) {
+    fieldProps.value.forEach(item => {
+      const selectedOption = options.find(option => option.value === item);
+      if (selectedOption) {
+        values.push(selectedOption);
+      }
+    });
+  }
+
+  return (
+    <FormRow>
+      <Field
+        name="formVariables"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'formVariables' label"
+            defaultMessage="Form variables"
+          />
+        }
+      >
+        <ReactSelect
+          name="formVariables"
+          options={options}
+          isMulti
+          required
+          value={values}
+          // TODO-4098: what does this do?
+          onChange={newValue => {
+            setValue(newValue.map(item => item.value));
+          }}
+        />
+      </Field>
+    </FormRow>
+  );
+};
+
+FormVariablesSelect.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+};
+
+export default FormVariablesSelect;
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js
new file mode 100644
index 0000000000..0bcf5f0f2f
--- /dev/null
+++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js
@@ -0,0 +1,5 @@
+const Service = () => {
+  return "asdf"
+}
+
+export default Service