@automattic/newspack-blocks 2.6.2 → 3.0.0-alpha.1

package/src/blocks/donate/edit/components/AdditionalFields.tsx

@@ -1,282 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl, ToggleControl, Button, ButtonGroup, MenuItem } from '@wordpress/components';
-import { moreVertical, chevronUp, chevronDown } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
-
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import type { AdditionalField, EditProps } from '../../types';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore – these *are* exported by newspack-components.
-import { Modal, Popover } from 'newspack-components';
-
-const getUniqID = () => Math.random().toString( 36 ).substring( 2, 7 );
-const BASE_CSS_CLASSNAME = 'newspack-blocks-additional-fields-editor';
-
-type EditableKey = keyof Omit< AdditionalField, 'type' >;
-const FIELD_PROPS = [
-	[ 'label', __( 'Label', 'newspack-blocks' ) ],
-	[
-		'name',
-		__( 'Name', 'newspack-blocks' ),
-		__(
-			'Name of the field which will be sent to the payment procesor and other third parties. Field names must be unique.',
-			'newspack-blocks'
-		),
-	],
-] as [ EditableKey, string, string ][];
-
-const FieldOptions = ( { onEdit, onRemove }: { onEdit: () => void; onRemove: () => void } ) => {
-	const [ isVisible, setIsVisible ] = useState( false );
-	const toggleVisible = () => setIsVisible( ! isVisible );
-	return (
-		<div>
-			<Button
-				onClick={ toggleVisible }
-				icon={ moreVertical }
-				label={ __( 'Options', 'newspack-blocks' ) }
-			/>
-			{ isVisible && (
-				<Popover
-					position="bottom left"
-					onFocusOutside={ toggleVisible }
-					onKeyDown={ ( event: KeyboardEvent ) => ESCAPE === event.keyCode && toggleVisible }
-					className={ `${ BASE_CSS_CLASSNAME }__options-popover` }
-				>
-					<MenuItem onClick={ onEdit } isLink>
-						{ __( 'Edit', 'newspack-blocks' ) }
-					</MenuItem>
-					<MenuItem
-						isDestructive
-						onClick={ () => {
-							onRemove();
-							toggleVisible();
-						} }
-						isLink
-					>
-						{ __( 'Remove', 'newspack-blocks' ) }
-					</MenuItem>
-				</Popover>
-			) }
-		</div>
-	);
-};
-
-const FieldEditor = ( {
-	attributes,
-	setAttributes,
-	field,
-	closeEditor,
-	updateField,
-}: Pick< EditProps, 'attributes' | 'setAttributes' > & {
-	field: AdditionalField;
-	closeEditor: () => void;
-	updateField: ( key: EditableKey ) => ( value: string | boolean | number ) => void;
-} ) => {
-	const onSave = () => {
-		const fieldToSave = omit( field, [ 'isNew', 'fieldIndex' ] );
-		setAttributes( {
-			additionalFields: field.isNew
-				? [ ...attributes.additionalFields, fieldToSave ]
-				: attributes.additionalFields.map( ( _field, i ) =>
-						field.fieldIndex === i ? fieldToSave : _field
-				  ),
-		} );
-		closeEditor();
-	};
-	const onRemove = () => {
-		setAttributes( {
-			additionalFields: attributes.additionalFields.filter( ( { name } ) => name !== field.name ),
-		} );
-		closeEditor();
-	};
-	const getValidationMessage = ( key: EditableKey ) => {
-		switch ( key ) {
-			case 'name':
-				const isValid =
-					attributes.additionalFields.filter(
-						( { name }, i ) => i !== field.fieldIndex && name === field.name
-					).length === 0;
-				return ! isValid ? __( 'Name already exists.', 'newspack-blocks' ) : '';
-		}
-	};
-	return (
-		<>
-			{ FIELD_PROPS.map( ( [ key, label, help ] ) => {
-				const validationMessage = getValidationMessage( key );
-				return (
-					<div key={ key }>
-						<TextControl
-							label={ label }
-							placeholder={ label }
-							value={ field[ key ] }
-							onChange={ updateField( key ) }
-							className={ classnames( {
-								[ `${ BASE_CSS_CLASSNAME }__field-edited--name` ]: key === 'name',
-								[ `${ BASE_CSS_CLASSNAME }__field-edited--invalid` ]: validationMessage,
-							} ) }
-						/>
-						{ validationMessage && (
-							<div className={ `${ BASE_CSS_CLASSNAME }__field-edited__validation-message` }>
-								{ validationMessage }
-							</div>
-						) }
-						{ help && (
-							<div className={ `${ BASE_CSS_CLASSNAME }__field-edited__help` }>{ help }</div>
-						) }
-					</div>
-				);
-			} ) }
-			<ToggleControl
-				label={ __( 'Required', 'newspack-blocks' ) }
-				checked={ field.isRequired }
-				onChange={ updateField( 'isRequired' ) }
-			/>
-			<div className={ `${ BASE_CSS_CLASSNAME }__field-edited__width` }>
-				<div>{ __( 'Field width:', 'newspack-blocks' ) }</div>
-				<ButtonGroup>
-					{ [ 100, 66.66, 50, 33.33 ].map( width => (
-						<Button
-							key={ width }
-							onClick={ () => updateField( 'width' )( width ) }
-							isPrimary={ field.width === width }
-						>
-							{ Math.round( width ) }%
-						</Button>
-					) ) }
-				</ButtonGroup>
-			</div>
-			<div className={ `${ BASE_CSS_CLASSNAME }__edit-buttons` }>
-				<Button isLink onClick={ closeEditor }>
-					{ __( 'Cancel', 'newspack-blocks' ) }
-				</Button>
-				{ ! field.isNew && (
-					<Button variant="secondary" isDestructive onClick={ onRemove }>
-						{ __( 'Remove', 'newspack-blocks' ) }
-					</Button>
-				) }
-				<Button isPrimary onClick={ onSave }>
-					{ field.isNew ? __( 'Save', 'newspack-blocks' ) : __( 'Update', 'newspack-blocks' ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-const AdditionalFields = ( {
-	attributes,
-	setAttributes,
-}: Pick< EditProps, 'attributes' | 'setAttributes' > ) => {
-	const [ editedField, setEditedField ] = useState< AdditionalField | null >( null );
-	const moveField = ( fieldIndex: number, targetIndex: number ) => () => {
-		const withoutMovedField = attributes.additionalFields.filter( ( _, i ) => i !== fieldIndex );
-		setAttributes( {
-			additionalFields: [
-				...withoutMovedField.slice( 0, targetIndex ),
-				attributes.additionalFields[ fieldIndex ],
-				...withoutMovedField.slice( targetIndex ),
-			],
-		} );
-	};
-	return (
-		<>
-			<p>
-				{ __(
-					'Collect additional data from donors by defining custom form fields.',
-					'newspack-blocks'
-				) }
-			</p>
-			<div className={ BASE_CSS_CLASSNAME }>
-				{ attributes.additionalFields.map( ( field, i ) => {
-					const onEdit = () => setEditedField( { ...field, fieldIndex: i } );
-					return (
-						<div key={ i } className={ `${ BASE_CSS_CLASSNAME }__field` }>
-							<div className={ `${ BASE_CSS_CLASSNAME }__field__left-section` }>
-								<div>
-									<Button
-										onClick={ moveField( i, i - 1 ) }
-										icon={ chevronUp }
-										label={ __( 'Move up', 'newspack-blocks' ) }
-										disabled={ i === 0 }
-									/>
-									<Button
-										onClick={ moveField( i, i + 1 ) }
-										icon={ chevronDown }
-										label={ __( 'Move down', 'newspack-blocks' ) }
-										disabled={ i === attributes.additionalFields.length - 1 }
-									/>
-								</div>
-								<span>{ field.label }</span>
-							</div>
-
-							<FieldOptions
-								onEdit={ onEdit }
-								onRemove={ () =>
-									setAttributes( {
-										additionalFields: attributes.additionalFields.filter(
-											( value, index ) => index !== i
-										),
-									} )
-								}
-							/>
-						</div>
-					);
-				} ) }
-				<Button
-					variant="secondary"
-					onClick={ () => {
-						const newField: AdditionalField = {
-							type: 'text',
-							name: `field-${ getUniqID() }`,
-							label: `Field ${ attributes.additionalFields.length }`,
-							isRequired: false,
-							width: 100,
-							isNew: true,
-						};
-						setEditedField( newField );
-					} }
-				>
-					{ __( 'Add data field', 'newspack-blocks' ) }
-				</Button>
-			</div>
-
-			{ editedField && (
-				<Modal
-					className={ `${ BASE_CSS_CLASSNAME }__modal` }
-					title={
-						editedField.isNew
-							? __( 'Add data field', 'newspack-blocks' )
-							: __( 'Edit data field', 'newspack-blocks' )
-					}
-					onRequestClose={ () => setEditedField( null ) }
-				>
-					<FieldEditor
-						field={ editedField }
-						setAttributes={ setAttributes }
-						attributes={ attributes }
-						closeEditor={ () => setEditedField( null ) }
-						updateField={ ( key: EditableKey ) => ( value: string | boolean | number ) => {
-							setEditedField( {
-								...editedField,
-								[ key ]: value,
-							} );
-						} }
-					/>
-				</Modal>
-			) }
-		</>
-	);
-};
-
-export default AdditionalFields;

package/src/blocks/donate/streamlined/index.test.js

@@ -1,132 +0,0 @@
-import * as testingLibrary from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import fetchMock from 'fetch-mock-jest';
-import { encode } from 'html-entities';
-
-import { processStreamlinedElements } from '.';
-
-const MONTHLY_AMOUNT = 7;
-
-const createDOM = settings => {
-	const parentElement = document.createElement( 'div' );
-	parentElement.innerHTML = `
-		<style>.stripe-payment--hidden {display:none;}</style>
-		<form data-streamlined-config="${ encode( JSON.stringify( settings ) ) }">
-			<div class='frequencies'>
-				<div class='frequency'>
-					<input type="radio" value="once" id="once" name="donation_frequency">
-					<label for="once">Once</label>
-					<input type="number" name="donation_value_once" value="${ MONTHLY_AMOUNT * 12 }" />
-				</div>
-				<div class='frequency'>
-					<input type="radio" value="month" id="month" name="donation_frequency" checked>
-					<label for="month">Monthly</label>
-					<input type="number" name="donation_value_month" value="${ MONTHLY_AMOUNT }" />
-				</div>
-			</div>
-			<div class="stripe-payment">
-				<div class="stripe-payment__inputs stripe-payment--hidden">
-					<input required="" placeholder="Email" type="email" name="email" value="">
-					<input required="" placeholder="Full Name" type="text" name="full_name" value="">
-				</div>
-				<label>
-					<input type="checkbox" name="agree_to_pay_fees" checked value="true">Agree to pay fees?
-					<span id="stripe-fees-amount">($0)</span>
-				</label>
-				<div class="stripe-payment__messages"></div>
-				<button type="submit">Donate</button>
-			</div>
-			<input name="cid" type="hidden" value="cid-123" />
-		</form>
-	`;
-	document.body.appendChild( parentElement );
-	return document.body;
-};
-
-fetchMock.post(
-	'/wp-json/newspack-blocks/v1/donate',
-	{ status: 'success', client_secret: 'sec_123' },
-	// A slight delay, necessitated by the async behavior of @testing-library/user-event.
-	// See https://github.com/testing-library/user-event/pull/952
-	{ delay: 100 }
-);
-
-const frequencies = { once: 'Once', month: 'Monthly', year: 'Annually' };
-const feeMultiplier = '2.9';
-const feeStatic = '0.3';
-const settings = [ 'USD', '$', 'Testing Site', false, 'US', frequencies, feeMultiplier, feeStatic ];
-
-describe( 'Streamlined Donate block processing', () => {
-	const container = createDOM( settings );
-	processStreamlinedElements( container );
-
-	const button = testingLibrary.getByText( container, 'Donate' );
-	const emailInput = testingLibrary.getByPlaceholderText( container, 'Email' );
-	const nameInput = testingLibrary.getByPlaceholderText( container, 'Full Name' );
-
-	it( 'additional inputs are initially hidden and displayed after user clicks the button', async () => {
-		expect( emailInput ).not.toBeVisible();
-		await userEvent.click( button );
-		expect( emailInput ).toBeVisible();
-	} );
-
-	it( 'form submission with invalid values triggers validation errors', async () => {
-		await userEvent.click( button );
-		expect(
-			testingLibrary.getByText( container, 'Email address is invalid.' )
-		).toBeInTheDocument();
-		expect(
-			testingLibrary.getByText( container, 'Full name should be provided.' )
-		).toBeInTheDocument();
-
-		await userEvent.type( emailInput, 'foo@bar.com' );
-		await userEvent.click( button );
-		expect(
-			testingLibrary.queryByText( container, 'Email address is invalid.' )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'the fee amount is updated', () => {
-		expect( testingLibrary.getByText( container, '($0.52 monthly)' ) ).toBeInTheDocument();
-	} );
-
-	it( 'form can be submitted after validation passes', async () => {
-		await userEvent.type( nameInput, 'Bax' );
-		await userEvent.click( button );
-		expect(
-			testingLibrary.queryByText( container, 'Full name should be provided.' )
-		).not.toBeInTheDocument();
-		expect( testingLibrary.getByText( container, 'Processing payment…' ) ).toBeInTheDocument();
-	} );
-
-	it( 'final success message is displayed', async () => {
-		await testingLibrary.waitFor( () => {
-			expect(
-				testingLibrary.getByText(
-					container,
-					'Your payment has been processed. Thank you for your contribution! You will receive a confirmation email at foo@bar.com.'
-				)
-			).toBeInTheDocument();
-		} );
-	} );
-
-	it( 'correct payload was sent to the API', () => {
-		expect( fetchMock ).toHaveLastFetched(
-			'/wp-json/newspack-blocks/v1/donate',
-			{
-				body: {
-					stripe_source_id: 'src_123',
-					stripe_tokenization_method: 'card',
-					amount: 7.52,
-					email: 'foo@bar.com',
-					full_name: 'Bax',
-					frequency: 'month',
-					newsletter_opt_in: false,
-					clientId: 'cid-123',
-					additional_fields: [],
-				},
-			},
-			'post'
-		);
-	} );
-} );