✨ [#3457] Expose new fields in Ogone payment options

Added the com template and title template configuration fields to the configuration options modal.
open-formulieren · Dec 17, 2024 · 0343550 · 0343550
1 parent a45e537
commit 0343550
Show file tree

Hide file tree

Showing 6 changed files with 308 additions and 1 deletion.
diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json
@@ -2293,6 +2293,60 @@
       "value": "The data entered in this component will be removed in accordance with the privacy settings."
     }
   ],
+  "JHQfjZ": [
+    {
+      "type": 0,
+      "value": "Optional custom template for the the description, included in the payment overviews for the backoffice. Use this to link the payment back to a particular process or form."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " You can use all form variables (using their keys) and the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "public_reference"
+        }
+      ],
+      "type": 8,
+      "value": "code"
+    },
+    {
+      "type": 0,
+      "value": " template variable. If unspecified, a default description is used."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Note"
+        }
+      ],
+      "type": 8,
+      "value": "strong"
+    },
+    {
+      "type": 0,
+      "value": ": the length of the result is capped to 100 characters."
+    }
+  ],
   "JKq3TC": [
     {
       "type": 0,
@@ -3887,6 +3941,12 @@
       "value": "The processing (\"verwerking\") for queries to the BRP Persoon API."
     }
   ],
+  "ZSvQcR": [
+    {
+      "type": 0,
+      "value": "TITLE parameter"
+    }
+  ],
   "ZdZ2Mb": [
     {
       "type": 0,
@@ -4445,6 +4505,12 @@
       "value": "'Save row' text"
     }
   ],
+  "eZJFP7": [
+    {
+      "type": 0,
+      "value": "COM parameter"
+    }
+  ],
   "ee4oWr": [
     {
       "type": 0,
@@ -6243,6 +6309,36 @@
       "value": "The content of the submission confirmation page. It can contain variables that will be templated from the submitted form data. If not specified, the global template will be used."
     }
   ],
+  "vikURf": [
+    {
+      "type": 0,
+      "value": "Optional custom template for the title displayed on the payment page."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " You can use all form variables (using their keys) and the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "public_reference"
+        }
+      ],
+      "type": 8,
+      "value": "code"
+    },
+    {
+      "type": 0,
+      "value": " template variable. If unspecified, a default description is used."
+    }
+  ],
   "vlY36U": [
     {
       "type": 0,

diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json
@@ -2314,6 +2314,60 @@
       "value": "Gegevens opgevoerd in dit component worden geschoond volgens de privacy-instellingen."
     }
   ],
+  "JHQfjZ": [
+    {
+      "type": 0,
+      "value": "Optional custom template for the the description, included in the payment overviews for the backoffice. Use this to link the payment back to a particular process or form."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " You can use all form variables (using their keys) and the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "public_reference"
+        }
+      ],
+      "type": 8,
+      "value": "code"
+    },
+    {
+      "type": 0,
+      "value": " template variable. If unspecified, a default description is used."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "Note"
+        }
+      ],
+      "type": 8,
+      "value": "strong"
+    },
+    {
+      "type": 0,
+      "value": ": the length of the result is capped to 100 characters."
+    }
+  ],
   "JKq3TC": [
     {
       "type": 0,
@@ -3905,6 +3959,12 @@
       "value": "De waarde voor \"verwerking\" die meegestuurd wordt bij het bevragen van de BRP Personen API. Mogelijke waarden hiervoor zijn afhankelijk van je gateway-leverancier."
     }
   ],
+  "ZSvQcR": [
+    {
+      "type": 0,
+      "value": "TITLE parameter"
+    }
+  ],
   "ZdZ2Mb": [
     {
       "type": 0,
@@ -4467,6 +4527,12 @@
       "value": "'Groep bewaren'-tekst"
     }
   ],
+  "eZJFP7": [
+    {
+      "type": 0,
+      "value": "COM parameter"
+    }
+  ],
   "ee4oWr": [
     {
       "type": 0,
@@ -6265,6 +6331,36 @@
       "value": "De inhoud van bevestigingspagina na het versturen van de inzending. Dit sjabloon mag variabelen bevatten met inzendings-gegevens. Laat dit veld leeg om de standaardinstelling te gebruiken."
     }
   ],
+  "vikURf": [
+    {
+      "type": 0,
+      "value": "Optional custom template for the title displayed on the payment page."
+    },
+    {
+      "children": [
+      ],
+      "type": 8,
+      "value": "br"
+    },
+    {
+      "type": 0,
+      "value": " You can use all form variables (using their keys) and the "
+    },
+    {
+      "children": [
+        {
+          "type": 0,
+          "value": "public_reference"
+        }
+      ],
+      "type": 8,
+      "value": "code"
+    },
+    {
+      "type": 0,
+      "value": " template variable. If unspecified, a default description is used."
+    }
+  ],
   "vlY36U": [
     {
       "type": 0,

diff --git a/...openforms/js/components/admin/form_design/payments/ogone_legacy/OgoneLegacyOptionsForm.js b/...openforms/js/components/admin/form_design/payments/ogone_legacy/OgoneLegacyOptionsForm.js
@@ -11,7 +11,7 @@ import {
 import {getChoicesFromSchema} from 'utils/json-schema';
 
 import OptionsConfiguration from '../OptionsConfiguration';
-import {MerchantID} from './fields';
+import {ComTemplate, MerchantID, TitleTemplate} from './fields';
 
 const OgoneLegacyOptionsForm = ({schema, formData, onSubmit}) => {
   const validationErrors = useContext(ValidationErrorContext);
@@ -41,6 +41,8 @@ const OgoneLegacyOptionsForm = ({schema, formData, onSubmit}) => {
       <ValidationErrorsProvider errors={relevantErrors}>
         <Fieldset>
           <MerchantID options={merchantChoices} />
+          <TitleTemplate />
+          <ComTemplate />
         </Fieldset>
       </ValidationErrorsProvider>
     </OptionsConfiguration>

diff --git a/src/openforms/js/components/admin/form_design/payments/ogone_legacy/fields.js b/src/openforms/js/components/admin/form_design/payments/ogone_legacy/fields.js
@@ -1,8 +1,10 @@
+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 {TextInput} from 'components/admin/forms/Inputs';
 import ReactSelect from 'components/admin/forms/ReactSelect';
 
 export const MerchantID = ({options}) => (
@@ -21,6 +23,7 @@ export const MerchantID = ({options}) => (
           defaultMessage="Which merchant should be used for payments related to this form."
         />
       }
+      required
     >
       <ReactSelect name="merchantId" options={options} required />
     </Field>
@@ -35,3 +38,73 @@ MerchantID.propTypes = {
     })
   ).isRequired,
 };
+
+export const TitleTemplate = () => {
+  const [fieldProps] = useField('titleTemplate');
+  return (
+    <FormRow>
+      <Field
+        name="titleTemplate"
+        label={
+          <FormattedMessage
+            description="Ogone legacy payment options 'titleTemplate' label"
+            defaultMessage="TITLE parameter"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="Ogone legacy payment options 'titleTemplate' help text"
+            defaultMessage={`Optional custom template for the title displayed on the payment page.<br></br>
+            You can use all form variables (using their keys) and the <code>public_reference</code>
+            template variable. If unspecified, a default description is used.`}
+            values={{
+              br: () => <br />,
+              code: chunks => <code>{chunks}</code>,
+            }}
+          />
+        }
+      >
+        <TextInput {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+TitleTemplate.propTypes = {};
+
+export const ComTemplate = () => {
+  const [fieldProps] = useField('comTemplate');
+  return (
+    <FormRow>
+      <Field
+        name="comTemplate"
+        label={
+          <FormattedMessage
+            description="Ogone legacy payment options 'comTemplate' label"
+            defaultMessage="COM parameter"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="Ogone legacy payment options 'comTemplate' help text"
+            defaultMessage={`Optional custom template for the the description, included in the
+            payment overviews for the backoffice. Use this to link the payment back to a particular
+            process or form.<br></br>
+            You can use all form variables (using their keys) and the <code>public_reference</code>
+            template variable. If unspecified, a default description is used.<br></br>
+            <strong>Note</strong>: the length of the result is capped to 100 characters.`}
+            values={{
+              br: () => <br />,
+              code: chunks => <code>{chunks}</code>,
+              strong: chunks => <strong>{chunks}</strong>,
+            }}
+          />
+        }
+      >
+        <TextInput {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+ComTemplate.propTypes = {};