Merge branch 'develop' into fix/build-block-preview-focus-border-wp-6.61

impress-org · Sep 5, 2024 · 193f0b1 · 193f0b1
2 parents ff6c14b + e2f14ca
commit 193f0b1
Show file tree

Hide file tree

Showing 45 changed files with 308 additions and 244 deletions.
diff --git a/assets/src/js/admin/onboarding-wizard/index.js b/assets/src/js/admin/onboarding-wizard/index.js
@@ -4,7 +4,7 @@
 
 // Vendor dependencies
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 // Onboarding Wizard app
 import App from './app/index.js';
@@ -13,7 +13,7 @@ import App from './app/index.js';
 import './style.scss';
 
 // Render application
-ReactDOM.render(
-	<App />,
-	document.getElementById( 'onboarding-wizard-app' )
-);
+const element = document.getElementById('onboarding-wizard-app');
+if (element) {
+    createRoot(element).render(<App />);
+}
diff --git a/assets/src/js/admin/reports/app.js b/assets/src/js/admin/reports/app.js
@@ -3,14 +3,16 @@
 // Vendor dependencies
 import { HashRouter as Router } from 'react-router-dom';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 // Reports app
 import App from './app/index.js';
 
-ReactDOM.render(
-	<Router>
-		<App />
-	</Router>,
-	document.getElementById( 'reports-app' )
-);
+const element = document.getElementById('reports-app');
+if (element) {
+    createRoot(element).render(
+        <Router>
+            <App />
+        </Router>
+    );
+}
diff --git a/assets/src/js/admin/reports/widget.js b/assets/src/js/admin/reports/widget.js
@@ -1,7 +1,7 @@
 // Entry point for dashboard widget
 
 // Vendor dependencies
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import moment from 'moment';
 
 // Reports widget
@@ -30,10 +30,8 @@ const initialState = {
 const container = document.getElementById('givewp-reports-widget');
 
 if (container) {
-    ReactDOM.render(
-        <StoreProvider initialState={initialState} reducer={reducer}>
+    createRoot(container).render(<StoreProvider initialState={initialState} reducer={reducer}>
             <Widget />
-        </StoreProvider>,
-        document.getElementById('givewp-reports-widget')
+        </StoreProvider>
     );
 }
diff --git a/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx b/src/DonationForms/Blocks/DonationFormBlock/resources/app/index.tsx
@@ -92,28 +92,14 @@ roots.forEach((root) => {
     const formUrl = root.getAttribute('data-form-url');
     const formViewUrl = root.getAttribute('data-form-view-url');
 
-    if (createRoot) {
-        createRoot(root).render(
-            <DonationFormBlockApp
-                openFormButton={openFormButton}
-                formFormat={formFormat}
-                dataSrc={dataSrc}
-                embedId={embedId}
-                formUrl={formUrl}
-                formViewUrl={formViewUrl}
-            />
-        );
-    } else {
-        render(
-            <DonationFormBlockApp
-                openFormButton={openFormButton}
-                formFormat={formFormat}
-                dataSrc={dataSrc}
-                embedId={embedId}
-                formUrl={formUrl}
-                formViewUrl={formViewUrl}
-            />,
-            root
-        );
-    }
+    createRoot(root).render(
+        <DonationFormBlockApp
+            openFormButton={openFormButton}
+            formFormat={formFormat}
+            dataSrc={dataSrc}
+            embedId={embedId}
+            formUrl={formUrl}
+            formViewUrl={formViewUrl}
+        />
+    );
 });
diff --git a/src/DonationForms/FormDesigns/ClassicFormDesign/css/_inputs.scss b/src/DonationForms/FormDesigns/ClassicFormDesign/css/_inputs.scss
@@ -43,7 +43,6 @@ input[type="email"],
 textarea {
     border-width: 0.078rem;
     border-style: solid;
-    border-color: rgb(102, 102, 102);
     border-radius: 0.25rem;
     padding: 1.1875rem;
     width: 100%;
@@ -56,11 +55,6 @@ textarea {
     font-weight: 500;
     line-height: 1.2;
 
-    &[aria-invalid="true"],
-    &:invalid {
-        border-color: red;
-    }
-
     &::placeholder {
         opacity: 0.6;
     }

diff --git a/src/DonationForms/V2/resources/add-v2form.tsx b/src/DonationForms/V2/resources/add-v2form.tsx
@@ -1,15 +1,14 @@
 import {StrictMode} from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import AddForm from './components/Onboarding/Components/AddForm';
 import './colors.scss';
 
 const appContainer = document.createElement('div');
 const target = document.querySelector('.wp-header-end');
 target.parentNode.insertBefore(appContainer, target);
 
-ReactDOM.render(
+createRoot(appContainer).render(
     <StrictMode>
         <AddForm />
-    </StrictMode>,
-    appContainer
+    </StrictMode>
 );
diff --git a/src/DonationForms/V2/resources/admin-donation-forms.tsx b/src/DonationForms/V2/resources/admin-donation-forms.tsx
@@ -1,11 +1,13 @@
 import {StrictMode} from 'react';
-import ReactDOM from 'react-dom';
-import DonationFormsListTable from "./components/DonationFormsListTable";
+import {createRoot} from 'react-dom/client';
+import DonationFormsListTable from './components/DonationFormsListTable';
 import './colors.scss';
 
-ReactDOM.render(
+const root = document.getElementById('give-admin-donation-forms-root');
+
+createRoot(root).render(
     <StrictMode>
         <DonationFormsListTable />
-    </StrictMode>,
-    document.getElementById('give-admin-donation-forms-root')
+    </StrictMode>
 );
+
diff --git a/src/DonationForms/V2/resources/edit-v2form.tsx b/src/DonationForms/V2/resources/edit-v2form.tsx
@@ -1,11 +1,12 @@
 import {StrictMode} from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import EditForm from './components/Onboarding/Components/EditForm';
 import './colors.scss';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('give-admin-edit-v2form'));
+
+root.render(
     <StrictMode>
         <EditForm />
-    </StrictMode>,
-    document.getElementById('give-admin-edit-v2form')
+    </StrictMode>
 );
diff --git a/src/DonationForms/resources/app/DonationFormApp.tsx b/src/DonationForms/resources/app/DonationFormApp.tsx
@@ -1,4 +1,4 @@
-import {createRoot, render} from '@wordpress/element';
+import {createRoot} from '@wordpress/element';
 import getDefaultValuesFromSections from './utilities/getDefaultValuesFromSections';
 import Form from './form/Form';
 import {DonationFormStateProvider} from './store';
@@ -146,8 +146,4 @@ function AppPreview() {
 const root = document.getElementById('root-givewp-donation-form');
 const style = document.getElementById('root-givewp-donation-form-style');
 
-if (createRoot) {
-    createRoot(root).render(previewMode ? <AppPreview /> : <App form={form} />);
-} else {
-    render(previewMode ? <AppPreview /> : <App form={form} />, root);
-}
+createRoot(root).render(previewMode ? <AppPreview /> : <App form={form} />);
diff --git a/src/DonationForms/resources/receipt/DonationConfirmationReceiptApp.tsx b/src/DonationForms/resources/receipt/DonationConfirmationReceiptApp.tsx
@@ -79,11 +79,7 @@ function DonationConfirmationReceiptApp() {
 
 const root = document.getElementById('root-givewp-donation-confirmation-receipt');
 
-if (createRoot) {
-    createRoot(root).render(<DonationConfirmationReceiptApp />);
-} else {
-    render(<DonationConfirmationReceiptApp />, root);
-}
+createRoot(root).render(<DonationConfirmationReceiptApp />);
 
 root.scrollIntoView({
     behavior: 'smooth',

diff --git a/src/DonationForms/resources/styles/_base-overrides.scss b/src/DonationForms/resources/styles/_base-overrides.scss
@@ -83,10 +83,15 @@ input[type="password"],
 input[type="email"],
 input[type="checkbox"],
 textarea {
-    border-color: var(--givewp-primary-color);
+    border-color: rgb(102, 102, 102);
 
     &:focus {
         border-color: transparent;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
     }
+
+    &[aria-invalid="true"],
+    &:invalid {
+        border-color: red;
+    }
 }
diff --git a/src/Donations/resources/index.tsx b/src/Donations/resources/index.tsx
@@ -1,8 +1,11 @@
 import {StrictMode} from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import DonationsListTable from './components/DonationsListTable';
 
-ReactDOM.render(
-    <StrictMode>{<DonationsListTable />}</StrictMode>,
-    document.getElementById('give-admin-donations-root')
+const root = createRoot(document.getElementById('give-admin-donations-root'));
+
+root.render(
+    <StrictMode>
+        <DonationsListTable />
+    </StrictMode>
 );
diff --git a/src/DonorDashboards/resources/js/app/components/select-control/index.js b/src/DonorDashboards/resources/js/app/components/select-control/index.js
@@ -11,7 +11,7 @@ import './style.scss';
 
 import {__} from '@wordpress/i18n';
 
-const SelectControl = ({label, value, isLoading, onChange, options, placeholder, width, isClearable}) => {
+const SelectControl = ({value, options, isLoading, label = null, onChange = null, placeholder = __('Select...', 'give'), width = null, isClearable = false}) => {
     if (options && options.length < 2) {
         return null;
     }
@@ -107,14 +107,4 @@ SelectControl.propTypes = {
     isClearable: PropTypes.bool,
 };
 
-SelectControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-    options: null,
-    placeholder: __('Select...', 'give'),
-    width: null,
-    isClearable: false,
-};
-
 export default SelectControl;
diff --git a/.../js/app/components/subscription-manager/payment-method-control/authorize-control/index.js b/.../js/app/components/subscription-manager/payment-method-control/authorize-control/index.js
@@ -7,7 +7,7 @@ import {useAcceptJs} from 'react-acceptjs';
 
 import './style.scss';
 
-const AuthorizeControl = ({label, value, forwardedRef, gateway}) => {
+const AuthorizeControl = ({label = null, value = null, forwardedRef, gateway}) => {
     const [cardNumber, setCardNumber] = useState(value ? value.card_number : '');
     const [cardExpiryDate, setCardExpiryDate] = useState(
         value ? `${value.card_exp_month} \ ${value.card_exp_year}` : '',
@@ -156,10 +156,4 @@ AuthorizeControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-AuthorizeControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default AuthorizeControl;
diff --git a/...urces/js/app/components/subscription-manager/payment-method-control/card-control/index.js b/...urces/js/app/components/subscription-manager/payment-method-control/card-control/index.js
@@ -6,7 +6,7 @@ import {useAccentColor} from '../../../../hooks';
 
 import './style.scss';
 
-const CardControl = ({label, value, forwardedRef}) => {
+const CardControl = ({label = null, value = null, forwardedRef}) => {
     const [cardNumber, setCardNumber] = useState(value ? value.card_number : '');
     const [cardExpiryDate, setCardExpiryDate] = useState(
         value ? `${value.card_exp_month} \ ${value.card_exp_year}` : ''
@@ -124,10 +124,4 @@ CardControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-CardControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default CardControl;
diff --git a/...ces/js/app/components/subscription-manager/payment-method-control/square-control/index.js b/...ces/js/app/components/subscription-manager/payment-method-control/square-control/index.js
@@ -7,7 +7,7 @@ import './style.scss';
 const cardTokenizeResponse = {};
 let cardBrand = 'unknown';
 
-const SquareControl = ({label, value, forwardedRef, gateway}) => {
+const SquareControl = ({label = null, value, forwardedRef, gateway}) => {
 
     const {applicationID, locationID} = gateway;
 
@@ -78,10 +78,4 @@ SquareControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-SquareControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default SquareControl;
diff --git a/src/DonorDashboards/resources/js/app/components/text-control/index.js b/src/DonorDashboards/resources/js/app/components/text-control/index.js
@@ -3,7 +3,7 @@ import {toUniqueId} from '../../utils';
 
 import './style.scss';
 
-const TextControl = ({label, value, onChange, icon, type}) => {
+const TextControl = ({label = null, value = '', onChange = null, icon = null, type = 'text'}) => {
     const id = toUniqueId(label);
 
     return (
@@ -21,12 +21,4 @@ const TextControl = ({label, value, onChange, icon, type}) => {
     );
 };
 
-TextControl.defaultProps = {
-    label: null,
-    value: '',
-    onChange: null,
-    icon: null,
-    type: 'text',
-};
-
 export default TextControl;
diff --git a/src/DonorDashboards/resources/js/app/index.js b/src/DonorDashboards/resources/js/app/index.js
@@ -2,7 +2,7 @@
 
 // Vendor dependencies
 import {HashRouter as Router} from 'react-router-dom';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import React from 'react';
 import {Provider} from 'react-redux';
 
@@ -39,12 +39,13 @@ window.giveDonorDashboard = {
 window.addEventListener('DOMContentLoaded', (event) => {
     registerDefaultTabs();
 
-    ReactDOM.render(
+    const root = createRoot(document.getElementById('give-donor-dashboard'));
+
+    root.render(
         <Provider store={store}>
             <Router>
                 <App />
             </Router>
         </Provider>,
-        document.getElementById('give-donor-dashboard')
     );
 });
diff --git a/src/DonorDashboards/resources/js/block/color-control/index.js b/src/DonorDashboards/resources/js/block/color-control/index.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 const {useInstanceId} = wp.compose;
 const {BaseControl, ColorPalette} = wp.components;
 
-const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange, colors}) => {
+const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange = null, colors}) => {
     const instanceId = useInstanceId(ColorControl);
     const id = `give-color-control-${name}-${instanceId}`;
     return (
@@ -29,9 +29,4 @@ ColorControl.propTypes = {
     hideLabelFromVision: PropTypes.bool,
 };
 
-ColorControl.defaultProps = {
-    onChange: null,
-    options: null,
-};
-
 export default ColorControl;