Refactor: remove ClassicEditor from window.givewp.form.components and…

… use the new @givewp/form-builder-library npm package (#7122)

Co-authored-by: Jon Waldstein <[email protected]>

src/DonationForms/resources/app/fields/GatewayFieldNode.tsx

@@ -1,4 +1,4 @@
-import {Field} from '@givewp/forms/types';
+import type {Field} from '@givewp/forms/types';
 import registerFieldAndBuildProps from '../utilities/registerFieldAndBuildProps';
 import {useDonationFormState} from '@givewp/forms/app/store';
 import {withTemplateWrapper} from '@givewp/forms/app/templates';

src/DonationForms/resources/app/fields/GroupNode.tsx

@@ -1,9 +1,7 @@
-import {Node, Group, isField, isGroup} from '@givewp/forms/types';
+import {Group, Node} from '@givewp/forms/types';
 import {useTemplateWrapper} from '../templates';
 import type {GroupProps} from '@givewp/forms/propTypes';
-import {memo, useEffect} from '@wordpress/element';
 import SectionNode from './SectionNode';
-import useVisibilityCondition from '@givewp/forms/app/hooks/useVisibilityCondition';
 import memoNode from '@givewp/forms/app/utilities/memoNode';
 
 const formTemplates = window.givewp.form.templates;
@@ -16,7 +14,7 @@ const formTemplates = window.givewp.form.templates;
  *
  * @since 3.0.0
  */
-function GroupNode({node}: { node: Group }) {
+function GroupNode({node}: {node: Group}) {
     const Group = useTemplateWrapper<GroupProps>(formTemplates.groups[node.type], 'div', node.name);
 
     const nodeComponents = node.reduceNodes((nodes, node: Node) => {

src/DonationForms/resources/app/form/MultiStepForm/index.tsx

@@ -1,3 +1,4 @@
+import type {Form} from '@givewp/forms/types';
 import {Section} from '@givewp/forms/types';
 import {DonationFormMultiStepStateProvider} from './store';
 import {StepObject} from '@givewp/forms/app/form/MultiStepForm/types';
@@ -9,7 +10,6 @@ import SectionNode from '@givewp/forms/app/fields/SectionNode';
 import Steps from '@givewp/forms/app/form/MultiStepForm/components/Steps';
 import HeaderStep from '@givewp/forms/app/form/MultiStepForm/components/HeaderStep';
 import {DonationSummaryProvider} from '@givewp/forms/app/store/donation-summary';
-import type {Form} from '@givewp/forms/types';
 
 const FormSectionTemplate = withTemplateWrapper(window.givewp.form.templates.layouts.section, 'section');
 
@@ -72,7 +72,9 @@ export default function MultiStepForm({form}: {form: Form}) {
     }
 
     return (
-        <DonationFormMultiStepStateProvider initialState={{steps, currentStep: 0, showHeader: form.settings?.showHeader}}>
+        <DonationFormMultiStepStateProvider
+            initialState={{steps, currentStep: 0, showHeader: form.settings?.showHeader}}
+        >
             <DonationSummaryProvider>
                 <Steps steps={steps} />
             </DonationSummaryProvider>

src/DonationForms/resources/app/utilities/memoNode.ts

@@ -5,13 +5,14 @@ import {Node} from '@givewp/forms/types';
  * This is used for memoizing Node components. Node props come from the server and are never intended to change. The
  * state of a Node may change, triggering a re-render, but the props should never change.
  *
+ * @unreleased updated param and return types
  * @since 3.0.0
  */
-export default function memoNode(NodeComponent) {
-    return memo(NodeComponent, compareNodeProps);
+export default function memoNode(NodeComponent: {({node}: {node: Node}): JSX.Element}): typeof NodeComponent {
+    return memo(NodeComponent, compareNodeProps) as typeof NodeComponent;
 }
 
-type NodeProp = { node: Node };
+type NodeProp = {node: Node};
 
 function compareNodeProps(oldNode: NodeProp, newNode: NodeProp) {
     return oldNode.node.name === newNode.node.name;

src/FormBuilder/resources/js/form-builder/src/blocks/fields/amount/inspector/index.tsx

@@ -14,8 +14,8 @@ import periodLookup from '../period-lookup';
 import RecurringDonationsPromo from '@givewp/form-builder/promos/recurring-donations';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 import {useCallback, useState} from '@wordpress/element';
-import Options from '@givewp/form-builder/components/OptionsPanel';
-import {OptionProps} from '@givewp/form-builder/components/OptionsPanel/types';
+import {OptionsPanel} from '@givewp/form-builder-library';
+import type {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
 import {useEffect} from 'react';
 import {DonationAmountAttributes} from '@givewp/form-builder/blocks/fields/amount/types';
 import {subscriptionPeriod} from '@givewp/forms/registrars/templates/groups/DonationAmount/subscriptionPeriod';
@@ -184,6 +184,8 @@ const Inspector = ({attributes, setAttributes}) => {
         [recurringBillingPeriodOptions, recurringEnableOneTimeDonations]
     );
 
+    const {currency = 'USD'} = getFormBuilderWindowData();
+
     return (
         <InspectorControls>
             <PanelBody title={__('Field Settings', 'give')} initialOpen={true}>
@@ -248,8 +250,8 @@ const Inspector = ({attributes, setAttributes}) => {
 
             {priceOption === 'multi' && (
                 <PanelBody title={__('Donation Levels', 'give')} initialOpen={false}>
-                    <Options
-                        currency={true}
+                    <OptionsPanel
+                        currency={currency}
                         multiple={false}
                         options={donationLevels}
                         setOptions={handleLevelsChange}

src/FormBuilder/resources/js/form-builder/src/blocks/fields/donor-name/Edit.tsx

@@ -3,8 +3,8 @@ import {BlockEditProps} from '@wordpress/blocks';
 import {PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {InspectorControls} from '@wordpress/block-editor';
 import {useEffect, useState} from 'react';
-import Options from '@givewp/form-builder/components/OptionsPanel';
-import {OptionProps} from '@givewp/form-builder/components/OptionsPanel/types';
+import {OptionsPanel} from '@givewp/form-builder-library';
+import type {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 
 const titleLabelTransform = (token = '') => token.charAt(0).toUpperCase() + token.slice(1);
@@ -149,8 +149,7 @@ export default function Edit({
                             </div>
 
                             {!!showHonorific && !useGlobalSettings && (
-                                <Options
-                                    currency={false}
+                                <OptionsPanel
                                     multiple={false}
                                     selectable={false}
                                     options={honorificOptions}