File

libs/core-forms/src/lib/backend-integration-plugin/backend-integration-plugin.ts

Index

Methods

Methods

registerActions
registerActions()
Returns : void


type: plugin title: backend-integration-plugin description: This plugin transforms the input data of a dynamic form and sends it to the CoreForms backend

⚠️ This plugin is for internal usage only!

How to use the Turnstile custom component?

  1. In your pfe.jsonc file, add the CORE_FORMS_BACKEND_INTEGRATION to the onPageLeaveActions of the page where the data should be sent to the backend
"pages": [
  {
    "pageId": "some-page-id",
    "onPageLeaveActions": [
      {
        "type": "CORE_FORMS_BACKEND_INTEGRATION"
      }
    ]
  }
]
  1. Add the @allianz/taly-core-forms package to the libraries array of the pages.jsonc file
"libraries": [
  {
    "package": "@allianz/taly-core-forms",
    "version": "CURRENT_VERSION"
  }
]
  1. Add the BackendIntegrationPluginModule with the options below to the plugins array of the pages.jsonc file. talyPrefix describes how the dynamic form ids have to start to be recognized by the plugin.
"plugins": [
  {
    "package": "@allianz/taly-core-forms",
    "modules": [
      {
        "name": "BackendIntegrationPluginModule",
        "options": {
          "formId": "1740391937943_v3",
          "tenant": "sandbox",
          "site": "coreforms",
          "instance": "emeaprd",
          "referrer": "https://allianz-emea-prd.adobecqms.net/content/onemarketing/sandbox/coreforms/en_GB/ccoreforms/bb-test-form.html",
          "talyTurnstileFormfieldId": "turnstile-token",
          "talyPrefix": "core-forms-"
        }
      }
    ]
  }
],
  1. Ensure that exactly one Turnstile custom component is added to your form with the id (talyTurnstileFormfieldId) you specified in step 2. This Turnstile custom component has to be a child of a dynamic form with an id starting with the talyPrefix you defined in step 2.

Example Configuration:

The snippet below shows an example pages.jsonc configuration of the backend and turnstile plugin in combination with a dynamic form with one input field.

  "libraries": [
    {
      "package": "@allianz/taly-core-forms",
      "version": ""
    }
  ],
  "plugins": [
    {
      "package": "@allianz/taly-core-forms",
      "modules": [
        {
          "name": "BackendIntegrationPluginModule",
          "options": {
            "formId": "123456789",
            "tenant": "sandbox",
            "site": "coreforms",
            "instance": "emeaprd",
            "referrer": "https://allianz-emea-prd.adobecqms.net/content/onemarketing/sandbox/coreforms/en_GB/ccoreforms/bb-test-form.html",
            "talyTurnstileFormfieldId": "turnstile-token",
            "talyPrefix": "core-forms-"
          }
        }
      ]
    },
    {
      "package": "@allianz/taly-core-forms",
      "modules": [
        {
          "name": "TurnstileComponentPluginModule"
        }
      ]
    }
  ],
  "pages": [
    {
      "id": "first-page",
      "blocks": [
        {
          "id": "core-forms-my-dynamic-form1",
          "form": {
            "layout": "ONE_COLUMN",
            "fields": [
              {
                "id": "street",
                "type": "INPUT",
                "label": "street",
                "inputType": "text"
              },
              {
                "type": "CUSTOM_COMPONENT",
                "name": "TurnstileComponent",
                "id": "turnstile-token",
                "config": {
                  "sitekey": "1x00000000000000000000AA"
                }
              }
            ]
          }
        }
      ],
    }
  ]

import { PfeActionsService, PfeBusinessService } from '@allianz/ngx-pfe';
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import {
  CORE_FORMS_BACKEND_INTEGRATION_PLUGIN_OPTIONS,
  CoreFormsBackendIntegrationPluginOptions
} from './backend-integration-plugin.module';

@Injectable()
export class BackendIntegrationPlugin {
  private readonly pfeActionService = inject(PfeActionsService);
  private readonly pfeBusinessService = inject(PfeBusinessService);
  private readonly http = inject(HttpClient);
  private options = inject<CoreFormsBackendIntegrationPluginOptions>(
    CORE_FORMS_BACKEND_INTEGRATION_PLUGIN_OPTIONS
  );

  registerActions() {
    this.pfeActionService.registerAction(
      'CORE_FORMS_BACKEND_INTEGRATION',
      this.sendFormDataCoreFormsBackend.bind(this)
    );
  }

  private sendFormDataCoreFormsBackend(): Promise<void> {
    const { talyTurnstileFormfieldId, talyPrefix } = this.options;
    if (!talyTurnstileFormfieldId) {
      throw new Error(
        'Please specify the id of the field containing the Turnstile via the talyTurnstileFormfieldId in the plugin options'
      );
    }
    if (!talyPrefix) {
      throw new Error(
        'Please specify the talyPrefix of the relevant dynamic form ids in the options'
      );
    }

    const fields = this.getCoreFormsState(talyPrefix);

    const turnstileToken = fields?.[talyTurnstileFormfieldId];

    if (!turnstileToken || typeof turnstileToken !== 'string') {
      throw new Error('Could not find the turnstile token in the form');
    }

    delete fields[talyTurnstileFormfieldId];

    return this.postFormData(turnstileToken, fields);
  }

  private postFormData(
    turnstileToken: string,
    fieldsForBackend: Record<string, unknown>
  ): Promise<void> {
    const { formId, tenant, site, instance, referrer } = this.options;
    if (!formId || !tenant || !site || !instance || !referrer) {
      throw new Error(
        'Please specify the formId, tenant, site, instance and referrer in the options'
      );
    }

    const url = 'https://forms.di-api.allianz.com/prd/forms';
    const data = JSON.stringify({
      version: 1,
      formId,
      tenant,
      site,
      instance,
      referrer,
      fields: fieldsForBackend,
      turnstileCaptcha: {
        cfturnstileresponse: turnstileToken
      },
      captchaType: 'turnstile'
    });

    const options = {
      hostname: 'forms.di-api.allianz.com',
      port: 443,
      path: '/prd/forms',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        accept: 'application/json'
      }
    };

    return new Promise<void>((resolve) => {
      this.http.post<{ message: string }>(url, data, options).subscribe({
        next: (response) => {
          this.pfeBusinessService.storeValueByExpression(
            '$.coreFormSubmissionSuccessful',
            response.message === 'successful'
          );
          resolve();
        },
        error: () => {
          this.pfeBusinessService.storeValueByExpression('$.coreFormSubmissionSuccessful', false);
          resolve();
        }
      });
    });
  }

  private getCoreFormsState(prefix: string): Record<string, unknown> {
    const pfeState = this.pfeBusinessService.getFullState();

    return Object.entries(pfeState)
      .filter(([formKey]) => formKey.startsWith(prefix)) // Filter keys that start with the prefix
      .filter(([, formfields]) => typeof formfields === 'object' && formfields !== null)
      .reduce<Record<string, unknown>>((relevantFields, [, formfields]) => {
        Object.entries(formfields).forEach(([formfieldKey, formfieldValue]) => {
          if (relevantFields[formfieldKey]) {
            console.warn(
              `The form field with id "${formfieldKey}" is present in more than one form with prefix "${prefix}". Please provide a unique id for each field.`
            );
            return;
          }
          if (formfieldValue !== null) {
            relevantFields[formfieldKey] = formfieldValue;
          }
        });
        return relevantFields;
      }, {});
  }
}

results matching ""

    No results matching ""