libs/core-forms/src/lib/backend-integration-plugin/backend-integration-plugin.ts
Methods |
registerActions |
registerActions()
|
Returns :
void
|
⚠️ This plugin is for internal usage only!
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"
}
]
}
]
@allianz/taly-core-forms
package to the libraries
array of the pages.jsonc
file"libraries": [
{
"package": "@allianz/taly-core-forms",
"version": "CURRENT_VERSION"
}
]
BackendIntegrationPluginModule
with the options below to the plugins
array of the pages.jsonc
file. talyPrefix
describes how the dynamic form id
s 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-"
}
}
]
}
],
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.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;
}, {});
}
}