Merge pull request #2800 from Automattic/feat/shipping-and-custom-fields

feat(ras-acc): support shipping, custom fields, and order notes in modal checkout
Automattic · Dec 20, 2023 · f4c8d9a · f4c8d9a
2 parents eabd8b4 + f02b0b2
commit f4c8d9a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 25 deletions.
diff --git a/assets/wizards/readerRevenue/views/donation/index.tsx b/assets/wizards/readerRevenue/views/donation/index.tsx
@@ -41,6 +41,16 @@ const FREQUENCIES: {
 };
 const FREQUENCY_SLUGS: FrequencySlug[] = Object.keys( FREQUENCIES ) as FrequencySlug[];
 
+type FieldConfig = {
+	autocomplete: string;
+	class: string[];
+	label: string;
+	priority: number;
+	required: boolean;
+	type: string;
+	validate: string[];
+};
+
 type WizardData = {
 	donation_data:
 		| { errors: { [ key: string ]: string[] } }
@@ -61,16 +71,9 @@ type WizardData = {
 		status: string;
 	};
 	available_billing_fields: {
-		[ key: string ]: {
-			autocomplete: string;
-			class: string[];
-			label: string;
-			priority: number;
-			required: boolean;
-			type: string;
-			validate: string[];
-		};
+		[ key: string ]: FieldConfig;
 	};
+	order_notes_field: FieldConfig;
 };
 
 export const DonationAmounts = () => {
@@ -258,6 +261,8 @@ const BillingFields = () => {
 		} );
 
 	const availableFields = wizardData.available_billing_fields;
+	const orderNotesField = wizardData.order_notes_field;
+	console.log( wizardData );
 	if ( ! availableFields || ! Object.keys( availableFields ).length ) {
 		return null;
 	}
@@ -267,22 +272,23 @@ const BillingFields = () => {
 		: Object.keys( availableFields );
 
 	return (
-		<>
-			<Card noBorder headerActions>
-				<SectionHeader
-					title={ __( 'Billing Fields', 'newspack' ) }
-					description={ __(
-						'Configure which billing fields should be rendered on the donation form.',
-						'newspack'
-					) }
-					noMargin
-				/>
-			</Card>
+		<Grid columns={ 1 } gutter={ 16 }>
+			<SectionHeader
+				title={ __( 'Billing Fields', 'newspack-plugin' ) }
+				description={ __(
+					'Configure which billing fields should be shown by the checkout form. Fields marked with (*) are required if shown. Note that for shippable products, address fields will always be shown.',
+					'newspack-plugin'
+				) }
+				noMargin
+			/>
 			<Grid columns={ 3 } rowGap={ 16 }>
 				{ Object.keys( availableFields ).map( fieldKey => (
 					<CheckboxControl
 						key={ fieldKey }
-						label={ availableFields[ fieldKey ].label }
+						label={
+							availableFields[ fieldKey ].label +
+							( availableFields[ fieldKey ].required ? ' *' : '' )
+						}
 						checked={ billingFields.includes( fieldKey ) }
 						disabled={ fieldKey === 'billing_email' } // Email is always required.
 						onChange={ () => {
@@ -296,8 +302,23 @@ const BillingFields = () => {
 						} }
 					/>
 				) ) }
+				{ orderNotesField && (
+					<CheckboxControl
+						label={ orderNotesField.label }
+						checked={ billingFields.includes( 'order_comments' ) }
+						onChange={ () => {
+							let newFields = [ ...billingFields ];
+							if ( billingFields.includes( 'order_comments' ) ) {
+								newFields = newFields.filter( field => field !== 'order_comments' );
+							} else {
+								newFields = [ ...newFields, 'order_comments' ];
+							}
+							changeHandler( [ 'billingFields' ] )( newFields );
+						} }
+					/>
+				) }
 			</Grid>
-		</>
+		</Grid>
 	);
 };
 
@@ -347,6 +368,7 @@ const Donation = () => {
 				</>
 			) }
 			<DonationAmounts />
+			<hr />
 			<BillingFields />
 			<div className="newspack-buttons-card">
 				<Button variant="primary" onClick={ onSave } href={ undefined }>

diff --git a/includes/wizards/class-reader-revenue-wizard.php b/includes/wizards/class-reader-revenue-wizard.php
@@ -453,13 +453,18 @@ public function fetch_all_data() {
 		$stripe_data                            = Stripe_Connection::get_stripe_data();
 		$stripe_data['can_use_stripe_platform'] = Donations::can_use_stripe_platform();
 
-		$billing_fields = [];
+		$billing_fields    = null;
+		$order_notes_field = [];
 		if ( $wc_installed && Donations::is_platform_wc() ) {
-			$checkout = new \WC_Checkout();
-			$fields   = $checkout->get_checkout_fields();
+			$checkout        = new \WC_Checkout();
+			$fields          = $checkout->get_checkout_fields();
+			$checkout_fields = $fields;
 			if ( ! empty( $fields['billing'] ) ) {
 				$billing_fields = $fields['billing'];
 			}
+			if ( ! empty( $fields['order']['order_comments'] ) ) {
+				$order_notes_field = $fields['order']['order_comments'];
+			}
 		}
 
 		$args = [
@@ -470,6 +475,7 @@ public function fetch_all_data() {
 			'donation_data'            => Donations::get_donation_settings(),
 			'donation_page'            => Donations::get_donation_page_info(),
 			'available_billing_fields' => $billing_fields,
+			'order_notes_field'        => $order_notes_field,
 			'salesforce_settings'      => [],
 			'platform_data'            => [
 				'platform' => $platform,