fix(reader-revenue-wizard): separate billing fields section (#3140)

Co-authored-by: Derrick Koo <[email protected]>
Co-authored-by: Thomas Guillot <[email protected]>

Author: 3 people

assets/components/src/section-header/index.js

@@ -21,7 +21,7 @@ import classnames from 'classnames';
 const SectionHeader = ( {
 	centered = false,
 	className = null,
-	description,
+	description = '',
 	heading = 2,
 	isWhite = false,
 	noMargin = false,
@@ -56,7 +56,7 @@ const SectionHeader = ( {
 			<Grid columns={ 1 } gutter={ 8 } className={ classes }>
 				{ typeof title === 'string' && <HeadingTag>{ title }</HeadingTag> }
 				{ typeof title === 'function' && <HeadingTag>{ title() }</HeadingTag> }
-				{ typeof description === 'string' && <p>{ description }</p> }
+				{ description && typeof description === 'string' && <p>{ description }</p> }
 				{ typeof description === 'function' && <p>{ description() }</p> }
 			</Grid>
 		</div>

assets/components/src/wizard/store/index.js

@@ -59,17 +59,24 @@ const actions = {
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
-	*saveWizardSettings( { slug, section = '', payloadPath = false, updatePayload = null } ) {
+	*saveWizardSettings( {
+		slug,
+		section = '',
+		payloadPath = false,
+		auxData = {},
+		updatePayload = null,
+	} ) {
 		// Optionally data can be updated before saving - an immediate update case
 		// (without an explicit "save" action).
 		if ( updatePayload ) {
 			yield actions.updateWizardSettings( { slug, ...updatePayload } );
 		}
 		const wizardState = select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( slug );
+		const data = payloadPath ? get( wizardState, payloadPath ) : wizardState;
 		const updatedData = yield actions.fetchFromAPI( {
 			path: `/newspack/v1/wizard/${ slug }/${ section }`,
 			method: 'POST',
-			data: payloadPath ? get( wizardState, payloadPath ) : wizardState,
+			data: { ...data, ...auxData },
 			isQuietFetch: true,
 		} );
 		if ( ! isEmpty( updatedData ) && ! updatedData.error ) {

assets/wizards/readerRevenue/components/money-input/style.scss

@@ -44,8 +44,11 @@
 		}
 
 		&-container {
-			p {
-				margin: 0 0 8px;
+			.input-label {
+				font-size: 11px;
+				font-weight: 500;
+				line-height: 1.4;
+				text-transform: uppercase;
 			}
 		}