feat: move "cover fees"

src/wizards/audience/components/cover-fees-settings/index.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ActionCard,
+	Button,
+	Grid,
+	TextControl,
+	Wizard,
+} from '../../../../components/src';
+import { READER_REVENUE_WIZARD_SLUG } from '../../constants';
+
+export const CoverFeesSettings = () => {
+  const { additional_settings: settings = {} } = Wizard.useWizardData( 'reader-revenue' );
+	const { updateWizardSettings } = useDispatch( Wizard.STORE_NAMESPACE );
+	const changeHandler = ( key, value ) =>
+		updateWizardSettings( {
+			slug: READER_REVENUE_WIZARD_SLUG,
+			path: [ 'additional_settings', key ],
+			value,
+		} );
+
+	const { saveWizardSettings } = useDispatch( Wizard.STORE_NAMESPACE );
+	const onSave = () =>
+		saveWizardSettings( {
+			slug: READER_REVENUE_WIZARD_SLUG,
+			section: 'settings',
+			payloadPath: [ 'additional_settings' ],
+		} );
+
+	return (
+    <ActionCard
+      isMedium
+      title={ __( 'Collect transaction fees', 'newspack-plugin' ) }
+      description={ __( 'Allow donors to optionally cover transaction fees imposed by payment processors.', 'newspack-plugin' ) }
+      notificationLevel="info"
+      toggleChecked={ settings.allow_covering_fees }
+      toggleOnChange={ () => {
+        changeHandler( 'allow_covering_fees', ! settings.allow_covering_fees );
+        onSave();
+      } }
+      hasGreyHeader={ settings.allow_covering_fees }
+      hasWhiteHeader={ ! settings.allow_covering_fees }
+      actionContent={ settings.allow_covering_fees && (
+        <Button isPrimary onClick={ onSave }>
+          { __( 'Save Settings', 'newspack-plugin' ) }
+        </Button>
+      ) }
+    >
+      { settings.allow_covering_fees && (
+        <Grid noMargin rowGap={ 16 }>
+          <TextControl
+            type="number"
+            step="0.1"
+            value={ settings.fee_multiplier }
+            label={ __( 'Fee multiplier', 'newspack-plugin' ) }
+            onChange={ value => changeHandler( 'fee_multiplier', value ) }
+          />
+          <TextControl
+            type="number"
+            step="0.1"
+            value={ settings.fee_static }
+            label={ __( 'Fee static portion', 'newspack-plugin' ) }
+            onChange={ value => changeHandler( 'fee_static', value ) }
+          />
+          <TextControl
+            value={ settings.allow_covering_fees_label }
+            label={ __( 'Custom message', 'newspack-plugin' ) }
+            placeholder={ __(
+              'A message to explain the transaction fee option (optional).',
+              'newspack-plugin'
+            ) }
+            onChange={ value => changeHandler( 'allow_covering_fees_label', value ) }
+          />
+          <CheckboxControl
+            label={ __( 'Cover fees by default', 'newspack-plugin' ) }
+            checked={ settings.allow_covering_fees_default }
+            onChange={ () => changeHandler( 'allow_covering_fees_default', ! settings.allow_covering_fees_default ) }
+            help={ __(
+              'If enabled, the option to cover the transaction fee will be checked by default.',
+              'newspack-plugin'
+            ) }
+          />
+        </Grid>
+      ) }
+    </ActionCard>
+	);
+}

src/wizards/audience/components/payment-methods/index.js

@@ -7,7 +7,6 @@ import { ExternalLink } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { AdditionalSettings } from './additional-settings';
 import { Stripe } from './stripe';
 import { WooPayments } from './woopayments';
 import { Notice, SectionHeader, Wizard } from '../../../../components/src';
@@ -18,7 +17,6 @@ const PaymentGateways = () => {
 		payment_gateways: paymentGateways = {},
 		is_ssl,
 		errors = [],
-		additional_settings: settings = {},
 		plugin_status,
 		platform_data = {},
 	} = Wizard.useWizardData( 'reader-revenue' );
@@ -27,7 +25,6 @@ const PaymentGateways = () => {
 	}
 
 	const { stripe = false, woopayments = false } = paymentGateways;
-	const hasPaymentGateway = Object.keys( paymentGateways ).some( gateway => paymentGateways[ gateway ]?.enabled );
 	return (
 		<>
 			<SectionHeader
@@ -66,11 +63,6 @@ const PaymentGateways = () => {
 			) }
 			<Stripe stripe={ stripe } />
 			<WooPayments woopayments={ woopayments } />
-			{ hasPaymentGateway && (
-				<AdditionalSettings
-					settings={ settings }
-				/>
-			) }
 		</>
 	);
 };

src/wizards/audience/views/donations/configuration/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../../../../components/src';
 import WizardsTab from '../../../../wizards-tab';
 import { READER_REVENUE_WIZARD_SLUG } from '../../../constants';
+import { CoverFeesSettings } from '../../../components/cover-fees-settings';
 
 type FrequencySlug = 'once' | 'month' | 'year';
 
@@ -278,6 +279,8 @@ const Donation = () => {
 					{ __( 'Save Settings', 'newspack-plugin' ) }
 				</Button>
 			</div>
+			<SectionHeader title={ __( 'Additional Settings', 'newspack-plugin' ) } />
+			<CoverFeesSettings />
 		</WizardsTab>
 	);
 };