Release 5.3.0 (#458)

* adding fixes for getting items from the api

* paycek

* paycek

* paycek

* Apply suggestions from code review

Co-authored-by: Ivan Ramljak <22823970+piqusy@users.noreply.github.com>
Co-authored-by: Davorin Prislin <81157133+dadadavorin@users.noreply.github.com>

* fixing pr issues

---------

Co-authored-by: Ivan Ramljak <22823970+piqusy@users.noreply.github.com>
Co-authored-by: Davorin Prislin <81157133+dadadavorin@users.noreply.github.com>

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [5.3.0]
+
+### Added
+
+- New Integration for `PayCek payment`.
+
 ## [5.2.0]
 
 ### Added
@@ -752,6 +758,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 - Initial production release.
 
+[5.3.0]: https://github.com/infinum/eightshift-forms/compare/5.2.0...5.3.0
 [5.2.0]: https://github.com/infinum/eightshift-forms/compare/5.1.10...5.2.0
 [5.1.10]: https://github.com/infinum/eightshift-forms/compare/5.1.9...5.1.10
 [5.1.9]: https://github.com/infinum/eightshift-forms/compare/5.1.8...5.1.9

eightshift-forms.php

@@ -6,7 +6,7 @@
  * Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level.
  * Author: WordPress team @Infinum
  * Author URI: https://eightshift.com/
- * Version: 5.2.0
+ * Version: 5.3.0
  * Text Domain: eightshift-forms
  *
  * @package EightshiftForms

src/Blocks/components/form/assets/form.js

@@ -454,14 +454,6 @@ export class Form {
 					this.enrichment.deleteLocalStorage(this.state.getStateEnrichmentFormPrefillStorageName(formId));
 				}
 
-				// Do normal success without redirect.
-				// Do the actual redirect after some time for custom form processed externally.
-				if (data?.[this.state.getStateResponseOutputKey('processExternally')]) {
-					setTimeout(() => {
-						this.state.getStateFormElement().submit();
-					}, parseInt(this.state.getStateSettingsRedirectionTimeout(formId), 10));
-				}
-
 				// Return to original first step.
 				if (isFinalStep) {
 					this.steps.resetSteps(formId);
@@ -470,9 +462,14 @@ export class Form {
 				// Set output results.
 				this.utils.setResultsOutput(formId, data);
 
-				if (this.state.getStateFormType(formId) === 'corvus') {
-					import('./corvus').then(({ Corvus }) => {
-						new Corvus().init(data?.[this.state.getStateResponseOutputKey('postExternallyData')]);
+				// Process payment gateways and external.
+				if (data?.[this.state.getStateResponseOutputKey('processExternally')]) {
+					import('./payment-gateways').then(({ PaymentGateways }) => {
+						new PaymentGateways({
+							utils: this.utils,
+							state: this.state,
+							response: data?.[this.state.getStateResponseOutputKey('processExternally')],
+						}).init();
 					});
 				}
 			}

src/Blocks/components/form/assets/payment-gateways.js

@@ -0,0 +1,86 @@
+/**
+ * PaymentGateways class.
+ */
+export class PaymentGateways {
+	constructor({
+		utils,
+		state,
+		response,
+	}) {
+		/** @type {import('./utils').Utils} */
+		this.utils = utils;
+		/** @type {import('./state').State} */
+		this.state = state;
+
+		this.response = response;
+	}
+
+	/**
+	 * Initialize the payment gateway.
+	 * @returns {void}
+	 */
+	init() {
+		const {
+			type,
+			url,
+			params,
+		} = this.response;
+
+		if (type === 'SUBMIT') {
+			this.initFormActionSubmit(url, params);
+		}
+
+		if (type === 'POST') {
+			this.initFormSubmitBuilder(url, params);
+		}
+
+		if (type === 'GET') {
+			this.initUrlRedirect(url);
+		}
+	}
+
+	/**
+	 * Submit the form action.
+	 *
+	 * @returns {void}
+	 */
+	initFormActionSubmit() {
+		this.state.getStateFormElement().submit();
+	}
+
+	/**
+	 * Redirect to the given URL.
+	 * @param {string} url
+	 * @returns {void}
+	 */
+	initUrlRedirect(url) {
+		window.location.href = url;
+	}
+
+	/**
+	 * Submit a form with the given URL and parameters.
+	 * @param {string} url
+	 * @param {Record<string, string>} params
+	 * @returns {void}
+	 */
+	initFormSubmitBuilder(url, params) {
+		// Create a form element.
+		const form = document.createElement('form');
+		form.method = 'POST';
+		form.action = url;
+
+		// Populate hidden fields with parameters
+		Object.entries(params).forEach(([key, value]) => {
+			const hiddenField = document.createElement('input');
+			hiddenField.type = 'hidden';
+			hiddenField.name = key;
+			hiddenField.value = String(value);
+			form.appendChild(hiddenField);
+		});
+
+		// Append form to body, submit it, then remove it
+		document.body.appendChild(form);
+		form.submit();
+		document.body.removeChild(form);
+	}
+}

src/Blocks/custom/corvus/manifest.json

@@ -2,7 +2,7 @@
 	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/block.json",
 	"blockName": "corvus",
 	"title": "Corvus form",
-	"description" : "Corvus issues application form",
+	"description" : "Corvus payment form",
 	"category": "eightshift-forms",
 	"icon": {
 		"src": "esf-form-corvus"

src/Blocks/custom/form-selector/manifest.json

@@ -28,6 +28,7 @@
 				"eightshift-forms/talentlyft",
 				"eightshift-forms/jira",
 				"eightshift-forms/corvus",
+				"eightshift-forms/paycek",
 				"eightshift-forms/pipedrive",
 				"eightshift-forms/calculator"
 			]
@@ -228,6 +229,40 @@
 				]
 			]
 		},
+		{
+			"label": "Paycek",
+			"slug": "paycek",
+			"blockName": "eightshift-forms/paycek",
+			"innerBlocks": [
+				[
+					"eightshift-forms/input",
+					{
+						"inputInputFieldLabel": "E-mail",
+						"inputInputType": "email",
+						"inputInputName": "email",
+						"inputInputIsRequired": true,
+						"inputInputIsEmail": true,
+						"inputInputDisabledOptions": [
+							"inputInputIsRequired",
+							"inputInputName"
+						]
+					}
+				],
+				[
+					"eightshift-forms/input",
+					{
+						"inputInputFieldLabel": "Amount",
+						"inputInputIsRequired": true,
+						"inputInputType": "number",
+						"inputInputIsNumber": true,
+						"inputInputName": "amount"
+					}
+				],
+				[
+					"eightshift-forms/submit"
+				]
+			]
+		},
 		{
 			"label": "Pipedrive",
 			"slug": "pipedrive",

src/Blocks/custom/paycek/components/paycek-editor.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { select } from '@wordpress/data';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { props, checkAttr, BlockInserter, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { FormEditor } from '../../../components/form/components/form-editor';
+
+export const PaycekEditor = ({ attributes, setAttributes, clientId }) => {
+	const manifest = select(STORE_NAME).getBlock('paycek');
+
+	const {
+		blockClass,
+	} = attributes;
+
+	const paycekAllowedBlocks = checkAttr('paycekAllowedBlocks', attributes, manifest);
+
+	return (
+		<div className={blockClass}>
+			<FormEditor
+				{...props('form', attributes, {
+					setAttributes,
+					formContent: <InnerBlocks
+						allowedBlocks={(typeof paycekAllowedBlocks === 'undefined') || paycekAllowedBlocks}
+						templateLock={false}
+						renderAppender={() => <BlockInserter clientId={clientId} />}
+					/>
+				})}
+			/>
+		</div>
+	);
+};

src/Blocks/custom/paycek/components/paycek-options.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { select } from '@wordpress/data';
+import { IntegrationsInternalOptions } from '../../../components/integrations/components/integrations-internal-options';
+import { STORE_NAME } from '@eightshift/frontend-libs/scripts';
+
+export const PaycekOptions = ({
+	attributes,
+	setAttributes,
+	clientId,
+}) => {
+	const manifest = select(STORE_NAME).getBlock('paycek');
+
+	const {
+		title,
+	} = manifest;
+
+	return (
+		<IntegrationsInternalOptions
+			title={title}
+			clientId={clientId}
+			attributes={attributes}
+			setAttributes={setAttributes}
+		/>
+	);
+};

src/Blocks/custom/paycek/manifest.json

@@ -0,0 +1,38 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/block.json",
+	"blockName": "paycek",
+	"title": "PayCek form",
+	"description" : "PayCek payment form",
+	"category": "eightshift-forms",
+	"icon": {
+		"src": "esf-form-paycek"
+	},
+	"keywords": [
+		"paycek"
+	],
+	"example": {
+	},
+	"components": {
+		"form": "form",
+		"step": "step"
+	},
+	"hasInnerBlocks": true,
+	"attributes": {
+		"paycekAllowedBlocks": {
+			"type": "array",
+			"default": []
+		},
+		"paycekIntegrationId": {
+			"type": "string"
+		},
+		"paycekFormPostId": {
+			"type": "string"
+		},
+		"paycekFormDataTypeSelector": {
+			"type": "string"
+		}
+	},
+	"parent": [
+		"eightshift-forms/form-selector"
+	]
+}

src/Blocks/custom/paycek/paycek-block.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PaycekEditor } from './components/paycek-editor';
+import { PaycekOptions } from './components/paycek-options';
+
+export const Paycek = (props) => {
+	return (
+		<>
+			<InspectorControls>
+				<PaycekOptions {...props} />
+			</InspectorControls>
+			<PaycekEditor {...props} />
+		</>
+	);
+};

src/Blocks/custom/paycek/paycek-hooks.js

@@ -0,0 +1,33 @@
+/* global esFormsLocalization */
+
+import { addFilter } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
+import { STORE_NAME } from '@eightshift/frontend-libs/scripts/editor';
+import { isArray } from 'lodash';
+
+// Provide additional blocks to the forms.
+export const hooks = () => {
+	const { blockName } = select(STORE_NAME).getBlock('paycek');
+	const namespace = select(STORE_NAME).getSettingsNamespace();
+
+	// All adding additional blocks to the custom form builder.
+	addFilter('blocks.registerBlockType', `${namespace}/${blockName}`, (settings, name) => {
+		if (name === `${namespace}/${blockName}`) {
+			if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.additionalBlocks)) {
+				esFormsLocalization.additionalBlocks.forEach((element) => {
+					if (!settings.attributes.paycekAllowedBlocks.default.includes(element)) {
+						settings.attributes.paycekAllowedBlocks.default.push(element);
+					}
+				});
+			}
+
+			select(STORE_NAME).getSettings().allowedBlocksBuilderIntegrationAdditionalBlocksList.forEach((element) => {
+				if (!settings.attributes.paycekAllowedBlocks.default.includes(element)) {
+					settings.attributes.paycekAllowedBlocks.default.push(element);
+				}
+			});
+		}
+
+		return settings;
+	});
+};