feat(PaymentTask): Integrate Altinn Payment Task into ProcessEditor

frontend/packages/process-editor/src/bpmnProviders/SupportedPaletteProvider.js

@@ -1,3 +1,5 @@
+import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
+
 const supportedEntries = ['create.exclusive-gateway', 'create.start-event', 'create.end-event'];
 
 class SupportedPaletteProvider {
@@ -64,6 +66,36 @@
       };
     }
 
+    function createCustomPaymentTask() {
+      const taskType = 'payment';
+
+      return function (event) {
+        const task = buildAltinnTask(taskType);
+
+        const extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+          values: [
+            bpmnFactory.create('altinn:TaskExtension', {
+              taskType: taskType,
+              actions: bpmnFactory.create('altinn:Actions', {
+                action: ['pay', 'reject'],
+              }),
+              paymentConfig: bpmnFactory.create('altinn:PaymentConfig', {
+                paymentDataType: bpmnFactory.create('altinn:PaymentDataType', {
+                  dataType: ['paymentInformation'],
+                }),
+              }),
+            }),
+          ],
+        });
+
+        modeling.updateProperties(task, {
+          extensionElements,
+        });
+
+        create.start(event, task);
+      };
+    }
+
     const buildAltinnTask = (taskType) => {
       const businessObject = bpmnFactory.create('bpmn:Task', {
         name: `Altinn ${taskType} task`,
@@ -112,6 +144,14 @@
             dragstart: createCustomSigningTask(),
           },
         },
+        'create.altinn-payment-task': {
+          group: 'activity',
+          className: `bpmn-icon-task-generic ${shouldDisplayFeature('displayPaymentTaskProcessEditor') ? 'bpmn-icon-payment-task' : 'payment-is-hidden-based-on-feature-toggle'}`,
+          title: translate('Payment'),
+          action: {
+            dragstart: createCustomPaymentTask(),
+          },
+        },
       };
       return {
         ...entries,

frontend/packages/process-editor/src/components/Canvas/Canvas.module.css

@@ -51,3 +51,13 @@ div[class*='bpmn-icon-signing-task'] {
   -webkit-mask: url('../../../img/SignTask.svg') var(--mask-icon-size);
   mask: url('../../../img/SignTask.svg') var(--mask-icon-size);
 }
+
+div[class*='bpmn-icon-payment-task'] {
+  -webkit-mask: url('../../../img/PaymentTask.svg') var(--mask-icon-size);
+  mask: url('../../../img/PaymentTask.svg') var(--mask-icon-size);
+}
+
+/* Should be removed when feature flag is removed */
+div[class*='payment-is-hidden-based-on-feature-toggle'] {
+  display: none;
+}

frontend/packages/process-editor/src/extensions/altinnCustomTasks.ts

@@ -25,6 +25,11 @@ export const altinnCustomTasks = {
           isMany: false,
           type: 'SignatureConfig',
         },
+        {
+          name: 'paymentConfig',
+          isMany: false,
+          type: 'PaymentConfig',
+        },
       ],
     },
     {
@@ -53,6 +58,27 @@ export const altinnCustomTasks = {
         },
       ],
     },
+    {
+      name: 'PaymentConfig',
+      properties: [
+        {
+          name: 'paymentDataType',
+          isMany: false,
+          type: 'PaymentDataType',
+        },
+      ],
+    },
+    {
+      name: 'PaymentDataType',
+      properties: [
+        {
+          name: 'paymentType',
+          isMany: false,
+          isAttr: false,
+          type: 'String',
+        },
+      ],
+    },
     {
       name: 'DataTypesToSign',
       properties: [

frontend/packages/shared/src/utils/featureToggleUtils.ts

@@ -8,7 +8,8 @@ export type SupportedFeatureFlags =
   | 'customizeEndEvent'
   | 'componentConfigBeta'
   | 'shouldOverrideAppLibCheck'
-  | 'resourceAccessLists';
+  | 'resourceAccessLists'
+  | 'displayPaymentTaskProcessEditor';
 
 /*
  * Please add all the features that you want to be toggle on by default here.