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

package/src/blocks/donate/streamlined/utils.ts

@@ -1,217 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import type { DonationFormValues, DonationFormInputName, DonationSettings } from '../types';
-
-const isValidEmail = ( string: string ) => /\S+@\S+/.test( string );
-
-export const validateFormData = (
-	values: DonationFormValues,
-	settings: Partial< DonationSettings >
-) => {
-	const errors: { [ key: string ]: string } = {};
-	if ( ! isValidEmail( values.email ) ) {
-		errors.email = __( 'Email address is invalid.', 'newspack-blocks' );
-	}
-	const { minimumDonation } = settings;
-	if ( minimumDonation && parseFloat( values.amount ) < minimumDonation ) {
-		errors.amount = sprintf(
-			/* Translators: %d is minimum donation amount set in Reader Revenue wizard or block attributes. */
-			__( 'Amount must be at least %d.', 'newspack-blocks' ),
-			minimumDonation
-		);
-	}
-	if ( values.full_name.length === 0 ) {
-		errors.amount = __( 'Full name should be provided.', 'newspack-blocks' );
-	}
-	return errors;
-};
-
-/**
- * Renders UI messages in a given DOM element.
- */
-export const renderMessages = (
-	messages: ( string | undefined )[],
-	el: HTMLElement,
-	type = 'error'
-) => {
-	el.innerHTML = '';
-	messages.forEach( message => {
-		if ( ! message ) {
-			return;
-		}
-		const messageEl = document.createElement( 'div' );
-		messageEl.classList.add( `type-${ type }` );
-		messageEl.innerHTML = message;
-		el.appendChild( messageEl );
-	} );
-
-	if ( 'success' === type && el.parentElement ) {
-		el.parentElement.replaceWith( el );
-	}
-};
-
-const getCookies = () =>
-	document.cookie.split( '; ' ).reduce< { [ key: string ]: string } >( ( acc, cookieStr ) => {
-		const cookie = cookieStr.split( '=' );
-		acc[ cookie[ 0 ] ] = cookie[ 1 ];
-		return acc;
-	}, {} );
-
-/**
- * Retrieves donation settings passed via a `data-streamlined-config` HTML attribute.
- */
-export const getSettings = ( el: HTMLElement ) => {
-	const settingsElement: HTMLElement | null = el.closest( '[data-streamlined-config]' );
-	const settings = settingsElement?.getAttribute( 'data-streamlined-config' );
-	if ( ! settings ) {
-		return {};
-	}
-	const [
-		currency,
-		currencySymbol,
-		siteName,
-		isCurrencyZeroDecimal,
-		countryCode,
-		frequencies,
-		feeMultiplier,
-		feeStatic,
-		stripePublishableKey,
-		paymentRequestType,
-		captchaSiteKey,
-		minimumDonation,
-	] = JSON.parse( settings );
-	return {
-		currency: currency.toLowerCase(),
-		currencySymbol,
-		siteName,
-		isCurrencyZeroDecimal,
-		countryCode,
-		frequencies,
-		feeMultiplier: parseFloat( feeMultiplier ),
-		feeStatic: parseFloat( feeStatic ),
-		stripePublishableKey,
-		paymentRequestType,
-		captchaSiteKey,
-		minimumDonation: parseFloat( minimumDonation ),
-	};
-};
-
-/**
- * Retrieves form values from the donation form HTML element.
- */
-export const getDonationFormValues = ( formElement: HTMLFormElement ): DonationFormValues => {
-	const formValues = Object.fromEntries( new FormData( formElement ) ) as DonationFormValues;
-	const valueKey: DonationFormInputName = `donation_value_${ formValues.donation_frequency }`;
-	formValues.amount = formValues[ valueKey ];
-	if ( formValues.amount === 'other' ) {
-		formValues.amount = formValues[ `${ valueKey }_other` ];
-	}
-	if ( ! formValues.amount ) {
-		formValues.amount = formValues[ `${ valueKey }_untiered` ];
-	}
-	if (
-		formValues.cid &&
-		typeof formValues.cid === 'string' &&
-		formValues.cid.indexOf( 'CLIENT_ID' ) === 0
-	) {
-		formValues.cid = getCookies()[ 'newspack-cid' ];
-	}
-	return formValues;
-};
-
-/**
- * Computes the total amount of the donation, taking into account if the
- * donor has opted to cover the processing fee.
- */
-export const getTotalAmount = (
-	formElement: HTMLFormElement,
-	// For the payment request button (Apple/Google Pay), the amount has to be
-	// delivered in subunits.
-	{ convertToSubunit } = { convertToSubunit: false }
-) => {
-	const settings = getSettings( formElement );
-	const { amount = '0', agree_to_pay_fees: paysFees } = getDonationFormValues( formElement );
-
-	const processAmount = ( amountToProcess: number ) =>
-		convertToSubunit
-			? amountToProcess * ( settings.isCurrencyZeroDecimal ? 1 : 100 )
-			: amountToProcess;
-
-	let feesAmount = 0;
-	if ( paysFees ) {
-		feesAmount = processAmount( getFeeAmount( formElement ) || 0 );
-	}
-	return processAmount( parseFloat( amount ) ) + feesAmount;
-};
-
-/**
- * Creates a `total` value for Stripe's `paymentRequest` creation and updating.
- */
-export const getPaymentRequestTotal = ( formElement: HTMLFormElement ) => {
-	const settings = getSettings( formElement );
-	const { donation_frequency: frequency } = getDonationFormValues( formElement );
-	const frequencyLabel = settings.frequencies[ frequency ];
-	return {
-		label: `${ settings.siteName } (${ frequencyLabel })`,
-		amount: getTotalAmount( formElement, { convertToSubunit: true } ),
-	};
-};
-
-/**
- * Computes the fee amount.
- */
-export const computeFeeAmount = ( amount: number, feeMultiplier: number, feeStatic: number ) => {
-	return parseFloat(
-		( ( ( amount + feeStatic ) / ( 100 - feeMultiplier ) ) * 100 - amount ).toFixed( 2 )
-	);
-};
-
-/**
- * Given the donation form HTML element, computes the fee amount.
- */
-export const getFeeAmount = ( formElement: HTMLFormElement ) => {
-	const { feeMultiplier, feeStatic } = getSettings( formElement );
-	if (
-		undefined === feeMultiplier ||
-		undefined === feeStatic ||
-		isNaN( feeMultiplier ) ||
-		isNaN( feeStatic )
-	) {
-		return 0;
-	}
-	const { amount } = getDonationFormValues( formElement );
-	return computeFeeAmount( parseFloat( amount ), feeMultiplier, feeStatic );
-};
-
-export const sendAPIRequest = async ( endpoint: string, data: object, method = 'POST' ) =>
-	fetch( `/wp-json/newspack-blocks/v1${ endpoint }`, {
-		method,
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify( data ),
-	} ).then( async res => {
-		const responseData = await res.json();
-		if ( res.ok ) {
-			return responseData;
-		}
-		return { error: responseData };
-	} );
-
-export const renderSuccessMessageWithEmail = ( emailAddress: string, messagesEl: HTMLElement ) => {
-	const successMessage = sprintf(
-		/* Translators: %s is the email address of the current user. */
-		__(
-			'Your payment has been processed. Thank you for your contribution! You will receive a confirmation email at %s.',
-			'newspack-blocks'
-		),
-		emailAddress
-	);
-	renderMessages( [ successMessage ], messagesEl, 'success' );
-};

package/src/blocks/donate/tiers-based/view.test.js

@@ -1,209 +0,0 @@
-import * as testingLibrary from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import { encode } from 'html-entities';
-import 'regenerator-runtime';
-
-import { processTiersBasedElements } from '.';
-
-const frequencies = { once: 'Once', month: 'Monthly', year: 'Annually' };
-const stripeSettings = [ 'USD', '$', 'Testing Site', false, 'US', frequencies, '2.9', '0.3' ];
-// These amounts contain the "once" frequency on last index, which is not used in the tiers-based block.
-const amounts = { once: [ 1, 2, 3, 4 ], month: [ 5, 6, 7, 8 ], year: [ 9, 10, 11, 12 ] };
-const TIERS = [
-	{
-		heading: 'Small',
-	},
-	{
-		heading: 'Medium',
-	},
-	{
-		heading: 'Large',
-	},
-];
-const MONTH_RENEWAL_DATE = 'December 16, 2022';
-const YEAR_RENEWAL_DATE = 'December 16, 2022';
-const COLOR = '#3366ff';
-const rawTiersBasedConfig = [
-	'donation_frequency',
-	'donation_value_',
-	'month',
-	TIERS,
-	amounts,
-	MONTH_RENEWAL_DATE,
-	YEAR_RENEWAL_DATE,
-	true,
-	COLOR,
-];
-
-const createDOM = ( settings, tiersConfig ) => {
-	const parentElement = document.createElement( 'div' );
-	parentElement.innerHTML = `
-    <style>.wpbnbd__tiers__view--hidden {display:none;}</style>
-
-    <div
-        class="wp-block-newspack-blocks-donate wpbnbd wpbnbd--tiers-based is-style-alternate wpbnbd-frequencies--2"
-        data-streamlined-config="${ encode( JSON.stringify( settings ) ) }"
-        data-tiers-based-config="${ encode( JSON.stringify( tiersConfig ) ) }"
-    >
-        <form data-is-init-form="" onsubmit="return false;">
-            <div class="wpbnbd__tiers__view">
-                <input type="hidden" name="newspack_donate" value="1">
-                <input type="hidden" name="donation_frequency" value="month">
-                <div class="wpbnbd__tiers">
-                    <div class="wpbnbd__tiers__selection">
-                        <button type="button" data-frequency-slug="month" data-frequency-label=" per month" class="wpbnbd__button wpbnbd__button--active">Monthly</button>
-                        <button type="button" data-frequency-slug="year" data-frequency-label=" per year" class="wpbnbd__button ">Annually</button>
-                    </div>
-                    <div class="wpbnbd__tiers__options">
-                        ${ TIERS.map(
-													( tier, index ) => `
-                            <div class="wpbnbd__tiers__tier ">
-                                <div class="wpbnbd__tiers__top">
-                                    <h2 class="wpbnbd__tiers__heading">${ tier.heading }</h2>
-                                </div>
-                                <div class="wpbnbd__tiers__amount">
-                                    <span>
-                                        <span data-frequency-slug="month" data-amount="${ amounts.month[ index ] }" data-tier-index="${ index }">
-                                            <h3 class="wpbnbd__tiers__amount__number">$${ amounts.month[ index ] }</h3>
-                                            <span class="wpbnbd__tiers__amount__frequency"> per month</span>
-                                        </span>
-                                        <span style="display:none;" data-frequency-slug="year" data-amount="${ amounts.year[ index ] }" data-tier-index="${ index }">
-                                            <h3 class="wpbnbd__tiers__amount__number">$${ amounts.year[ index ] }</h3>
-                                            <span class="wpbnbd__tiers__amount__frequency"> per year</span>
-                                        </span>
-                                    </span>
-                                </div>
-                                <button type="submit" name="donation_value_month" value="${ amounts.month[ index ] }" data-tier-index="${ index }" style="background-color: ${ COLOR }; color: white;">Select </button>
-                                <div class="wpbnbd__tiers__description">This is the description of the plan.</div>
-                            </div>
-                        `
-												) }
-                    </div>
-                    <ul class="wpbnbd__tiers__options__dots"><li></li><li></li><li></li></ul>
-                </div>
-            </div>
-        </form>
-        <div class="wpbnbd__tiers__view wpbnbd__tiers__view--hidden">
-            <form data-is-streamlined-form="" onsubmit="return false;">
-                <button class="wpbnbd__tiers__back-button">← <span>Back</span></button>
-                <div class="wpbnbd__tiers__tier-tile">
-                    <h2>Small</h2>
-                    <div>
-                        <div>
-                            <h3>
-                                <span>$</span>
-                                <span data-amount="">${ amounts.month[ 0 ] }</span>
-                            </h3>
-                            <span data-frequency=""> per month</span>
-                        </div>
-                        <div class="wpbnbd__tiers__tier-tile__note">
-                            Renews on <span data-renews-date="">–</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="wp-block-newspack-blocks-donate__stripe stripe-payment"></div>
-                <input data-is-streamlined-input-amount="" type="hidden" name="donation_value_month" value="${
-									amounts.month[ 0 ]
-								}">
-                <input type="hidden" name="donation_frequency" value="month">
-            </form>
-        </div>
-    </div>
-	`;
-	document.body.appendChild( parentElement );
-	return document.body;
-};
-
-describe( 'Tiers-based Donate block processing', () => {
-	// Handle the API missing on JSDOM.
-	Element.prototype.scrollTo = jest.fn();
-
-	const container = createDOM( stripeSettings, rawTiersBasedConfig );
-	processTiersBasedElements( container );
-
-	it( 'initially only montly amounts are visible', () => {
-		testingLibrary
-			.getAllByText( container, 'per month' )
-			// Only first three are visible, the last "per month" is in the Stripe payment form.
-			.slice( 0, 3 )
-			.forEach( el => expect( el ).toBeVisible() );
-		testingLibrary
-			.getAllByText( container, 'per year' )
-			.forEach( el => expect( el ).not.toBeVisible() );
-
-		amounts.month.slice( 0, 3 ).forEach( amount => {
-			expect( testingLibrary.getByText( container, `$${ amount }` ) ).toBeVisible();
-		} );
-		amounts.year.slice( 0, 3 ).forEach( amount => {
-			expect( testingLibrary.getByText( container, `$${ amount }` ) ).not.toBeVisible();
-		} );
-	} );
-
-	it( 'selecting the tier switches the view', async () => {
-		const selectedTierIndex = 1;
-		const tierSelectButton = testingLibrary.getAllByText( container, 'Select' )[
-			selectedTierIndex
-		];
-		await userEvent.click( tierSelectButton );
-
-		const expectedAmount = amounts.month[ selectedTierIndex ];
-		expect(
-			// Second heading – on the tile, the first is hidden in tiers options list.
-			testingLibrary.getAllByText( container, TIERS[ selectedTierIndex ].heading )[ 1 ]
-		).toBeVisible();
-		expect( testingLibrary.getByText( container, expectedAmount ) ).toBeVisible();
-		expect( testingLibrary.getByText( container, MONTH_RENEWAL_DATE ) ).toBeVisible();
-		expect(
-			parseInt( container.querySelector( 'input[name="donation_value_month"]' ).value )
-		).toEqual( expectedAmount );
-		expect( container.querySelector( 'input[name="donation_frequency"]' ).value ).toEqual(
-			'month'
-		);
-	} );
-
-	it( 'clicking the back button switches the view back to tier selection', async () => {
-		const backButton = testingLibrary.getByText( container, 'Back' );
-		await userEvent.click( backButton );
-		expect( testingLibrary.getByText( container, 'Back' ) ).not.toBeVisible();
-	} );
-
-	it( 'after switching to annual payments, only yearly amounts are visible', async () => {
-		const annualPaymentsButton = testingLibrary.getByText( container, 'Annually' );
-		await userEvent.click( annualPaymentsButton );
-		testingLibrary
-			.getAllByText( container, 'per year' )
-			// Only first three are visible, the last "per year" is in the Stripe payment form.
-			.slice( 0, 3 )
-			.forEach( el => expect( el ).toBeVisible() );
-		testingLibrary
-			.getAllByText( container, 'per month' )
-			.forEach( el => expect( el ).not.toBeVisible() );
-
-		amounts.year.slice( 0, 3 ).forEach( amount => {
-			expect( testingLibrary.getByText( container, `$${ amount }` ) ).toBeVisible();
-		} );
-		amounts.month.slice( 0, 3 ).forEach( amount => {
-			expect( testingLibrary.getByText( container, `$${ amount }` ) ).not.toBeVisible();
-		} );
-	} );
-
-	it( 'selecting the tier after choosing annual payment switches the view', async () => {
-		const selectedTierIndex = 2;
-		const tierSelectButton = testingLibrary.getAllByText( container, 'Select' )[
-			selectedTierIndex
-		];
-		await userEvent.click( tierSelectButton );
-
-		const expectedAmount = amounts.year[ selectedTierIndex ];
-		expect(
-			// Second heading – on the tile, the first is hidden in tiers options list.
-			testingLibrary.getAllByText( container, TIERS[ selectedTierIndex ].heading )[ 1 ]
-		).toBeVisible();
-		expect( testingLibrary.getByText( container, expectedAmount ) ).toBeVisible();
-		expect( testingLibrary.getByText( container, MONTH_RENEWAL_DATE ) ).toBeVisible();
-		expect(
-			parseInt( container.querySelector( 'input[name="donation_value_year"]' ).value )
-		).toEqual( expectedAmount );
-		expect( container.querySelector( 'input[name="donation_frequency"]' ).value ).toEqual( 'year' );
-	} );
-} );