Feature/infinum fixes (#315)

* adding fixes for sync diagram

src/Blocks/assets/scripts/blocks-editor.js

@@ -18,6 +18,7 @@ import {
 	STORE_NAME,
 } from '@eightshift/frontend-libs/scripts/editor';
 import globalSettings from '../../manifest.json';
+import './store';
 
 registerBlocks(
 	globalSettings,

src/Blocks/assets/scripts/store/index.js

@@ -0,0 +1,59 @@
+import { register, createReduxStore } from '@wordpress/data';
+
+export const FORMS_STORE_NAME = `eightshift-forms`;
+
+// Set default store state.
+const DEFAULT_STATE = {
+	syncDialog: {},
+	isSyncDialogOpen: false,
+};
+
+// Define selectors - only getters.
+const selectors = {
+	getSyncDialog(state) {
+		return state?.syncDialog ?? DEFAULT_STATE.syncDialog;
+	},
+	getIsSyncDialogOpen(state) {
+		return state?.isSyncDialogOpen ?? DEFAULT_STATE.isSyncDialogOpen;
+	},
+};
+
+// Define actions - getters and setters.
+const actions = {
+	setSyncDialog(syncDialog) {
+		return {
+			type: 'SET_SYNC_DIALOG',
+			syncDialog,
+		};
+	},
+	setIsSyncDialogOpen(isSyncDialogOpen) {
+		return {
+			type: 'SET_IS_SYNC_DIALOG_OPEN',
+			isSyncDialogOpen,
+		};
+	},
+};
+
+// Define reducers - only setters.
+const reducer = ( state = DEFAULT_STATE, action ) => { // eslint-disable-line consistent-return
+	switch (action.type) {
+		case 'SET_SYNC_DIALOG': {
+			return {
+				...state,
+				syncDialog: action.syncDialog,
+			};
+		}
+		case 'SET_IS_SYNC_DIALOG_OPEN': {
+			return {
+				...state,
+				isSyncDialogOpen: action.isSyncDialogOpen,
+			};
+		}
+	}
+};
+
+register(createReduxStore(FORMS_STORE_NAME, {
+	selectors,
+	actions,
+	reducer,
+}));

src/Blocks/assets/styles/parts/_admin-theme-colors.scss

@@ -1,17 +1,3 @@
-// Create a color scheme for the WP admin.
-.wp-admin {
-	// Default ("Fresh").
-	--global-colors-esf-admin-accent: #2271B1;
-	--global-colors-esf-admin-accent-50: #2271B180;
-	--global-colors-esf-admin-accent-30: #2271B133;
-	--global-colors-esf-admin-accent-10: #2271B11A;
-	--global-colors-esf-admin-accent-05: #2271B10D;
-	--global-colors-esf-admin-accent-dark: #135E96;
-	--es-input-focus-border-color: #2271B1;
-
-	background-color: var(--esf-main-bg-color, var(--global-colors-esf-gray-100));
-}
-
 // stylelint-disable-next-line selector-max-specificity
 #adminmenu a.wp-has-current-submenu::after,
 #adminmenu > li.current > a.current::after {

src/Blocks/components/integrations/components/integrations-options.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { select, useDispatch, useSelect } from "@wordpress/data";
+import { select, useDispatch, useSelect, dispatch } from "@wordpress/data";
 import { store as noticesStore } from '@wordpress/notices';
 import { Button, PanelBody, Modal } from '@wordpress/components';
 import { icons, Select, Section, props, Control, IconLabel } from '@eightshift/frontend-libs/scripts';
@@ -15,6 +15,7 @@ import {
 	LocationsButton,
 } from '../../utils';
 import { getRestUrlByType, ROUTES } from '../../form/assets/state';
+import { FORMS_STORE_NAME } from './../../../assets/scripts/store';
 import { StepMultiflowOptions } from '../../step/components/step-multiflow-options';
 
 export const IntegrationsOptions = ({
@@ -39,8 +40,8 @@ export const IntegrationsOptions = ({
 
 	const [formItems, setFormItems] = useState([]);
 	const [formInnerItems, setFormInnerItems] = useState([]);
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [modalContent, setModalContent] = useState({});
+	const [isModalOpen, setModalOpen] = useState(select(FORMS_STORE_NAME).getIsSyncDialogOpen());
+	const [modalContent] = useState(select(FORMS_STORE_NAME).getSyncDialog());
 
 	const { createNotice } = useDispatch(noticesStore);
 
@@ -75,8 +76,8 @@ export const IntegrationsOptions = ({
 				className='es-modal-max-width-xxl es-rounded-3!'
 				title={<IconLabel icon={icons.clipboard} label={__('Sync report', 'eightshift-forms')} standalone />}
 				onRequestClose={() => {
-					setIsModalOpen(false);
-					setModalContent({});
+					setModalOpen(false);
+					dispatch(FORMS_STORE_NAME).setIsSyncDialogOpen(false);
 				}}
 			>
 				<Section
@@ -128,7 +129,6 @@ export const IntegrationsOptions = ({
 								label={
 									<span key={i}>
 										<code>{Object.keys(item)[0]}</code>: {Object.values(item)[0].join(', ')}
-
 									</span>
 								}
 								key={i}
@@ -187,7 +187,10 @@ export const IntegrationsOptions = ({
 				</Control>
 
 				<Section showIf={hasInnerBlocks} icon={icons.tools} label={__('Advanced', 'eightshift-forms')}>
-					<Control help={__('Syncs the current form with the integration. Unsaved changes will be lost!', 'eightshift-forms')}>
+					<Control
+						help={__('Syncs the current form with the integration. Unsaved changes will be lost!', 'eightshift-forms')}
+						additionalClasses={'es-border-b-gray-300 es-pb-5'}
+					>
 						<Button
 							icon={icons.loopMode}
 							onClick={() => {
@@ -203,21 +206,12 @@ export const IntegrationsOptions = ({
 											}
 										);
 									} else {
-										setModalContent(val);
-
 										createNotice(
 											val?.update ? 'success' : 'info',
 											val?.update ? __('Sync complete!', 'eightshift-forms') : __('Nothing synced, form is up-to-date', 'eightshift-forms'),
 											{
 												type: 'snackbar',
 												icon: '✅',
-												explicitDismiss: val?.update,
-												actions: val?.update ? [
-													{
-														label: __('View report', 'eightshift-forms'),
-														onClick: () => setIsModalOpen(true),
-													}
-												] : [],
 											}
 										);
 									}
@@ -227,6 +221,18 @@ export const IntegrationsOptions = ({
 						>
 							{__('Sync integration', 'eightshift-forms')}
 						</Button>
+
+						{Object.keys(modalContent).length > 0 &&
+							<Button
+								onClick={() => {
+									setModalOpen(true);
+									dispatch(FORMS_STORE_NAME).setIsSyncDialogOpen(true);
+								}}
+								className='es-rounded-1 es-mt-1 es-font-weight-500'
+							>
+								{__('View changes', 'eightshift-forms')}
+							</Button>
+						}
 					</Control>
 
 					<Control help={__('Integration data is cached to improve editor performance. If a form has been updated, cache should be cleared, followed by a sync.', 'eightshift-forms')}>
@@ -260,6 +266,10 @@ export const IntegrationsOptions = ({
 					</Control>
 				</Section>
 
+				{isModalOpen &&
+					<SyncModal />
+				}
+
 			</PanelBody>
 
 			<StepMultiflowOptions
@@ -268,8 +278,6 @@ export const IntegrationsOptions = ({
 					stepMultiflowPostId: postId,
 				})}
 			/>
-
-			{hasInnerBlocks && isModalOpen && <SyncModal />}
 		</>
 	);
 };

src/Blocks/components/utils/index.js

@@ -17,6 +17,7 @@ import {
 	lockPostEditing,
 	unlockPostEditing,
 } from '@eightshift/frontend-libs/scripts';
+import { FORMS_STORE_NAME } from './../../assets/scripts/store';
 import { ROUTES, getRestUrl, getRestUrlByType } from '../form/assets/state';
 
 /**
@@ -86,6 +87,8 @@ export const syncIntegrationBlocks = (clientId, postId) => {
 			console.log(response);
 		}
 
+		dispatch(FORMS_STORE_NAME).setSyncDialog({});
+
 		if (response.code === 200) {
 			const parentId = select('core/block-editor').getBlockParents(clientId)?.[0];
 
@@ -101,15 +104,23 @@ export const syncIntegrationBlocks = (clientId, postId) => {
 			}
 		}
 
+		if (!response?.data?.data?.update) {
+			dispatch(FORMS_STORE_NAME).setSyncDialog({});
+		} else {
+			dispatch(FORMS_STORE_NAME).setSyncDialog({
+				update: response?.data?.data?.update,
+				removed: response?.data?.data?.removed,
+				added: response?.data?.data?.added,
+				replaced: response?.data?.data?.replaced,
+				changed: response?.data?.data?.changed,
+			});
+		}
+
 		return {
 			message: response?.message,
 			debugType: response?.data?.debugType,
 			status: response?.status,
 			update: response?.data?.data?.update,
-			removed: response?.data?.data?.removed,
-			added: response?.data?.data?.added,
-			replaced: response?.data?.data?.replaced,
-			changed: response?.data?.data?.changed,
 		};
 	});
 };

src/Blocks/custom/form-selector/components/form-selector-editor.js

@@ -32,14 +32,20 @@ export const FormSelectorEditor = ({
 					<h4 className='es-mb-0! es-mx-0! es-mt-1! es-text-5 es-font-weight-500 es-color-pure-black'>{__('What type is your new form?', 'productive')}</h4>
 					<div className='es-h-spaced-wrap es-gap-2!'>
 						{forms.map((form, index) => {
-							const { label, slug } = form;
+							const { label, slug, icon } = form;
+
+							let iconComponent = icon;
+
+							if (!icon) {
+								iconComponent = utilsManifest.icons[camelCase(slug)];
+							}
 
 							return (
 								<Button
 									key={index}
 									className='es-v-spaced es-content-center! es-m-0! es-nested-w-8 es-nested-h-8 es-h-auto es-w-32 es-h-24 es-rounded-1.5 es-border es-border-cool-gray-100 es-hover-border-cool-gray-400 es-transition es-nested-m-0!'
 									onClick={() => createBlockFromTemplate(clientId, slug, forms)}
-									icon={<div dangerouslySetInnerHTML={{ __html: utilsManifest.icons[camelCase(slug)] }} />}
+									icon={<div dangerouslySetInnerHTML={{ __html: iconComponent }} />}
 								>
 									{label}
 								</Button>

src/Blocks/custom/form-selector/form-selector-overrides.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+/* global esFormsLocalization */
+
+import manifest from './manifest.json';
+
+export const overrides = {
+	...manifest,
+	forms: [
+		...manifest.forms,
+		...esFormsLocalization.formsSelectorTemplates,
+	],
+};

src/Blocks/custom/jira/jira-overrides.js

@@ -1,5 +1,4 @@
 // eslint-disable-next-line no-unused-vars
-// global esRedesignBlocksLocalization
 
 import globalManifest from '../../manifest.json';
 import manifest from './manifest.json';

src/Blocks/custom/mailer/mailer-overrides.js

@@ -1,5 +1,4 @@
 // eslint-disable-next-line no-unused-vars
-// global esRedesignBlocksLocalization
 
 import globalManifest from './../../manifest.json';
 import manifest from './manifest.json';

src/Enqueue/Blocks/EnqueueBlocks.php

@@ -292,13 +292,15 @@ public function enqueueBlockEditorScript(): void
 		$fieldStyleOptionsFilterName = Filters::getFilterName(['block', 'field', 'styleOptions']);
 		$customDataOptionsFilterName = Filters::getFilterName(['block', 'customData', 'options']);
 		$breakpointsFilterName = Filters::getFilterName(['blocks', 'breakpoints']);
+		$formSelectorTemplatesFilterName = Filters::getFilterName(['block', 'formSelector', 'formTemplates']);
 
 		$output['additionalBlocks'] = \apply_filters($additionalBlocksFilterName, []);
 		$output['formsBlockStyleOptions'] = \apply_filters($formsStyleOptionsFilterName, []);
 		$output['fieldBlockStyleOptions'] = \apply_filters($fieldStyleOptionsFilterName, []);
 		$output['customDataBlockOptions'] = \apply_filters($customDataOptionsFilterName, []);
 		$output['validationPatternsOptions'] = $this->validationPatterns->getValidationPatternsEditor();
 		$output['mediaBreakpoints'] = \apply_filters($breakpointsFilterName, []);
+		$output['formsSelectorTemplates'] = \apply_filters($formSelectorTemplatesFilterName, []);
 		$output['postType'] = \get_post_type() ? \get_post_type() : '';
 
 		$output['settings'] = [

src/Hooks/Filters.php

@@ -294,6 +294,7 @@ class Filters
 				'additionalContent' => 'additional_content',
 			],
 			'formSelector' => [
+				'formTemplates' => 'form_templates',
 				'additionalContent' => 'additional_content',
 			],
 			'field' => [
@@ -404,8 +405,6 @@ class Filters
 			SettingsJira::SETTINGS_TYPE_KEY => [
 				'map' => 'map',
 			],
-			SettingsMailer::SETTINGS_TYPE_KEY => [
-			],
 		],
 		'enrichment' => [
 			'manualMap' => 'manual_map',

src/Integrations/ActiveCampaign/ActiveCampaign.php

@@ -245,7 +245,7 @@ private function getFields(array $data, string $formId): array
 						'inputType' => 'tel',
 						'inputIsRequired' => (bool) $isRequired,
 						'inputDisabledOptions' => $this->prepareDisabledOptions('input', [
-							$isRequired ? 'textareaIsRequired' : '',
+							$isRequired ? 'inputIsRequired' : '',
 						]),
 					];
 					break;
@@ -262,7 +262,9 @@ function ($checkbox) use ($name) {
 									'checkboxLabel' => $checkbox['value'],
 									'checkboxValue' => $checkbox['value'],
 									'checkboxTracking' => $name,
-									'checkboxDisabledOptions' => $this->prepareDisabledOptions('checkbox', [], false),
+									'checkboxDisabledOptions' => $this->prepareDisabledOptions('checkbox', [
+										'checkboxValue'
+									], false),
 								];
 							},
 							$options