Merge branch 'develop' into chore/update-enum

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 />);
+}

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>
+    );
+}

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>
     );
 }

give.php

@@ -6,7 +6,7 @@
  * Description: The most robust, flexible, and intuitive way to accept donations on WordPress.
  * Author: GiveWP
  * Author URI: https://givewp.com/
- * Version: 3.16.0
+ * Version: 3.16.1
  * Requires at least: 6.4
  * Requires PHP: 7.2
  * Text Domain: give
@@ -406,7 +406,7 @@ private function setup_constants()
     {
         // Plugin version.
         if (!defined('GIVE_VERSION')) {
-            define('GIVE_VERSION', '3.16.0');
+            define('GIVE_VERSION', '3.16.1');
         }
 
         // Plugin Root File.

includes/admin/admin-actions.php

@@ -1,6 +1,7 @@
 <?php
 
 use Give\Framework\Database\DB;
+use Give\Helpers\Utils;
 use Give\Log\ValueObjects\LogType;
 
 /**
@@ -680,6 +681,7 @@ function showReactTable () {
 /**
  * Avoid insecure usage of `unserialize` when the data could be submitted by the user.
  *
+ * @since 3.16.1 Use Utils::giveMaybeSafeUnserialize() method
  * @since 3.5.0
  *
  * @param string $data Data that might be unserialized.
@@ -688,9 +690,7 @@ function showReactTable () {
  */
 function give_maybe_safe_unserialize($data)
 {
-    return is_serialized($data)
-        ? @unserialize(trim($data), ['allowed_classes' => false])
-        : $data;
+    return Utils::maybeSafeUnserialize($data);
 }
 
 /**

includes/process-donation.php

@@ -20,6 +20,7 @@
  * Handles the donation form process.
  *
  * @access private
+ * @since 3.16.1 Use give_maybe_safe_unserialize() on $user_info data
  * @since  1.0
  *
  * @throws ReflectionException Exception Handling.
@@ -151,12 +152,13 @@ function give_process_donation_form() {
 	);
 
 	// Setup donation information.
+	$user_info = array_map('\Give\Helpers\Utils::maybeSafeUnserialize', stripslashes_deep( $user_info ));
 	$donation_data = [
 		'price'        => $price,
 		'purchase_key' => $purchase_key,
 		'user_email'   => $user['user_email'],
 		'date'         => date( 'Y-m-d H:i:s', current_time( 'timestamp' ) ),
-		'user_info'    => stripslashes_deep( $user_info ),
+		'user_info'    => $user_info,
 		'post_data'    => $post_data,
 		'gateway'      => $valid_data['gateway'],
 		'card_info'    => $valid_data['cc_info'],

readme.txt

@@ -5,7 +5,7 @@ Tags: donation, donate, recurring donations, fundraising, crowdfunding
 Requires at least: 6.4
 Tested up to: 6.6
 Requires PHP: 7.2
-Stable tag: 3.16.0
+Stable tag: 3.16.1
 License: GPLv3
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -262,6 +262,9 @@ The 2% fee on Stripe donations only applies to donations taken via our free Stri
 10. Use almost any payment gateway integration with GiveWP through our add-ons or by creating your own add-on.
 
 == Changelog ==
+= 3.16.1: September 10th, 2024 =
+* Security: Added additional protection to the option-based donation form request (CVE-2024-8353)
+
 = 3.16.0: Aug 28th, 2024 =
 * New: Added support for form taxonomy tags and categories in the visual form builder settings
 * New: Added a setting to the visual form builder to enable redirecting to an individual donation confirmation page 

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}
+        />
+    );
 });

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;
     }

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>
 );

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>
 );
+

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>
 );

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} />);

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',

src/DonationForms/resources/registrars/templates/layouts/HeaderDescription.tsx

@@ -1,8 +1,10 @@
 import type {HeaderDescriptionProps} from '@givewp/forms/propTypes';
+import {Interweave} from 'interweave';
 
 /**
+ * @unreleased Replace <p></p> tag with Interweave to be able to render the content generated through the ClassicEditor component
  * @since 3.0.0
  */
 export default function HeaderDescription({text}: HeaderDescriptionProps) {
-    return <p>{text}</p>;
+    return <Interweave content={text} />;
 }

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;
+    }
 }

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>
 );

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;

src/DonorDashboards/resources/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;