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

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

@@ -1,356 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * External dependencies
- */
-import { loadStripe } from '@stripe/stripe-js/pure';
-import type * as Stripe from '@stripe/stripe-js/types';
-import 'regenerator-runtime'; // Required in WP >=5.8.
-
-/**
- * Internal dependencies
- */
-import * as utils from './utils';
-import './style.scss';
-
-const getAdditionalFieldsValues = ( formElement: HTMLFormElement ) => {
-	const fields = [
-		...formElement.querySelectorAll( 'input[data-is-additional-field]' ),
-	] as HTMLInputElement[];
-	return fields.map( field => ( { name: field.name, value: field.value } ) );
-};
-
-export const processStreamlinedElements = ( parentElement = document ) =>
-	[ ...parentElement.querySelectorAll( '.stripe-payment' ) ].forEach( async el => {
-		let stripe: Stripe.Stripe | null,
-			cardElement: Stripe.StripeCardElement,
-			paymentRequest: Stripe.PaymentRequest,
-			paymentRequestToken: Stripe.Token,
-			isCardUIVisible = false;
-
-		const formElement: HTMLFormElement | null = el.closest( 'form' );
-		const messagesEl: HTMLDivElement | null = el.querySelector( '.stripe-payment__messages' );
-		if ( ! formElement || ! messagesEl ) {
-			return;
-		}
-
-		const blockWrapperElement = el.closest( '.wpbnbd' );
-		const paymentFlowCompleteEventName = `newspackPaymentFlowComplete-${
-			blockWrapperElement?.id || ''
-		}`;
-
-		const settings = utils.getSettings( formElement );
-
-		const disableForm = () => el.classList.add( 'stripe-payment--disabled' );
-		const enableForm = () => el.classList.remove( 'stripe-payment--disabled' );
-		enableForm();
-
-		// Display CC UI.
-		const displayCardUI = () => {
-			if ( isCardUIVisible ) {
-				return;
-			}
-			const inputsHiddenEl = el.querySelector( '.stripe-payment__inputs.stripe-payment--hidden' );
-			if ( inputsHiddenEl ) {
-				inputsHiddenEl.classList.remove( 'stripe-payment--hidden' );
-				isCardUIVisible = true;
-			}
-		};
-
-		const getCaptchaToken = async ( captchaSiteKey: string ) => {
-			return new Promise( ( res, rej ) => {
-				const { grecaptcha } = window;
-				if ( ! grecaptcha ) {
-					return res( '' );
-				}
-
-				if ( ! grecaptcha?.ready || ! captchaSiteKey ) {
-					rej( __( 'Error loading the reCaptcha library.', 'newspack-blocks' ) );
-				}
-
-				grecaptcha.ready( async () => {
-					try {
-						const token = await grecaptcha.execute( captchaSiteKey, { action: 'submit' } );
-						return res( token );
-					} catch ( e ) {
-						rej( e );
-					}
-				} );
-			} );
-		};
-
-		// Universal payment handling, for both card and payment request button flows.
-		// In card flow, this will happen after user submits their card data in the HTML form.
-		// In payment request flow, this will happen after the user validates the payment in
-		// the browser/OS UI.
-		const payWithSource = async (
-			source: Stripe.Source,
-			token: Stripe.Token | undefined = undefined,
-			/**
-			 * Overrides for sent donation data. In a card flow the data is
-			 * provided explicitly by the user (via the form), but in payment request flow
-			 * the data is from the payment request event.
-			 */
-			requestPayloadOverrides = {}
-		) => {
-			if ( ! stripe ) {
-				return;
-			}
-
-			// Add reCaptcha challenge to form submission, if available.
-			const captchaSiteKey = settings?.captchaSiteKey;
-			let captchaToken;
-			if ( captchaSiteKey ) {
-				try {
-					captchaToken = await getCaptchaToken( captchaSiteKey );
-				} catch ( e ) {
-					const errorMessage =
-						e instanceof Error
-							? e.message
-							: __( 'Error processing captcha request.', 'newspack-blocks' );
-					utils.renderMessages( [ errorMessage ], messagesEl );
-					return { error: true };
-				}
-			}
-			const formValues = utils.getDonationFormValues( formElement );
-
-			const additionalFields: { name: string; value: string }[] =
-				getAdditionalFieldsValues( formElement );
-
-			const apiRequestPayload = {
-				captchaToken,
-				stripe_tokenization_method: token ? token.card?.tokenization_method : 'card',
-				stripe_source_id: source.id,
-				amount: utils.getTotalAmount( formElement ),
-				email: formValues.email,
-				full_name: formValues.full_name,
-				frequency: formValues.donation_frequency,
-				newsletter_opt_in: Boolean( formValues.newsletter_opt_in ),
-				newspack_popup_id: formValues.newspack_popup_id,
-				_wp_http_referer: formValues._wp_http_referer,
-				clientId: formValues.cid,
-				additional_fields: additionalFields,
-				...requestPayloadOverrides,
-			};
-
-			const chargeResultData = await utils.sendAPIRequest( '/donate', apiRequestPayload );
-
-			// Error handling.
-			if ( chargeResultData.data?.status !== 200 && chargeResultData.message ) {
-				utils.renderMessages( [ chargeResultData.message ], messagesEl );
-				return { error: true };
-			}
-			if ( chargeResultData.error ) {
-				utils.renderMessages( [ chargeResultData.error ], messagesEl );
-				return { error: true };
-			}
-
-			const exitWithError = ( errorMessage: Stripe.StripeError[ 'message' ] ) => {
-				utils.renderMessages( [ errorMessage ], messagesEl );
-				enableForm();
-				window.dispatchEvent( new Event( paymentFlowCompleteEventName ) );
-				return { error: true };
-			};
-
-			// Additional steps handling.
-			if ( chargeResultData.client_secret ) {
-				const confirmationResult = await stripe.confirmCardPayment(
-					chargeResultData.client_secret
-				);
-
-				if ( confirmationResult.error ) {
-					return exitWithError( confirmationResult.error.message );
-				} else if ( confirmationResult.paymentIntent.status === 'succeeded' ) {
-					utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
-				} else if ( confirmationResult.paymentIntent.status === 'requires_action' ) {
-					// Could not test this flow (with 3D Secure test cards), but it's listed in the docs:
-					// https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-complete-payment
-					const { error: confirmationError } = await stripe.confirmCardPayment(
-						chargeResultData.client_secret
-					);
-					if ( confirmationError ) {
-						return exitWithError( confirmationError.message );
-					}
-					utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
-				} else {
-					return exitWithError(
-						__(
-							'Something went wrong with the payment. Please try again later.',
-							'newspack-blocks'
-						)
-					);
-				}
-			}
-
-			if ( chargeResultData.status === 'success' ) {
-				utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
-			}
-			window.dispatchEvent( new Event( paymentFlowCompleteEventName ) );
-			return {};
-		};
-
-		const initStripe = async () => {
-			stripe = await loadStripe( settings.stripePublishableKey );
-			if ( ! stripe ) {
-				return;
-			}
-			const cardElementContainer: HTMLElement | null = el.querySelector( '.stripe-payment__card' );
-			if ( ! cardElementContainer ) {
-				return;
-			}
-			const elements = stripe.elements();
-
-			// Handle card element.
-			cardElement = elements.create( 'card' );
-			cardElement.mount( cardElementContainer );
-
-			// Handle payment request button (Apple/Google Pay). This has to be initialised to see if
-			// such payments are available in the browser (canMakePayment method).
-			paymentRequest = stripe.paymentRequest( {
-				country: settings.countryCode,
-				currency: settings.currency,
-				total: utils.getPaymentRequestTotal( formElement ),
-				// Docs: Use the requestPayerName parameter to collect the payer’s billing address for Apple Pay.
-				requestPayerName: true,
-				requestPayerEmail: true,
-			} );
-
-			const rendersPaymentRequestButton = await paymentRequest.canMakePayment();
-			if ( rendersPaymentRequestButton ) {
-				paymentRequest.on( 'source', async event => {
-					const result = await payWithSource( event.source, paymentRequestToken, {
-						email: event.payerEmail,
-						full_name: event.payerName,
-					} );
-					// The UI messages are handled in payWithSource, this event listener only
-					// has to notify the browser that the payment is done.
-					event.complete( result?.error ? 'fail' : 'success' );
-				} );
-				paymentRequest.on( 'token', async event => {
-					paymentRequestToken = event.token;
-				} );
-				// Update payment request when the form values are updated.
-				formElement.addEventListener( 'change', () => {
-					paymentRequest.update( {
-						total: utils.getPaymentRequestTotal( formElement ),
-					} );
-				} );
-				// Create and mount the payment request button.
-				const prButton = elements.create( 'paymentRequestButton', {
-					paymentRequest,
-					style: {
-						paymentRequestButton: {
-							type: settings.paymentRequestType,
-							height: '46px',
-						},
-					},
-				} );
-				const prButtonElement: HTMLButtonElement | null = el.querySelector(
-					'.stripe-payment__request-button'
-				);
-				if ( ! prButtonElement ) {
-					return;
-				}
-				prButton.mount( prButtonElement );
-				prButtonElement.classList.remove( 'stripe-payment--hidden' );
-				setTimeout( () => {
-					prButtonElement.classList.remove( 'stripe-payment__request-button--invisible' );
-				}, 0 );
-			} else {
-				displayCardUI();
-			}
-
-			el.classList.remove( 'stripe-payment--invisible' );
-		};
-
-		// Initialise Stripe once the element is visible.
-		const observer = new IntersectionObserver( entries => {
-			if ( entries[ 0 ].isIntersecting ) {
-				initStripe();
-			}
-		} );
-		observer.observe( el );
-
-		// Card form unravelling.
-		const submitButtonEl: HTMLButtonElement | null = el.querySelector( 'button[type="submit"]' );
-		if ( submitButtonEl ) {
-			submitButtonEl.onclick = e => {
-				if ( ! isCardUIVisible ) {
-					e.preventDefault();
-					displayCardUI();
-				}
-			};
-		}
-
-		const updateFeesAmount = () => {
-			const feesAmountEl = el.querySelector( '#stripe-fees-amount' );
-			if ( feesAmountEl ) {
-				const formValues = Object.fromEntries( new FormData( formElement ) );
-				const feeAmount = utils.getFeeAmount( formElement );
-				if ( feeAmount === 0 ) {
-					const feesAmountContainerEl: HTMLElement | null = el.querySelector(
-						'#stripe-fees-amount-container'
-					);
-					if ( feesAmountContainerEl ) {
-						feesAmountContainerEl.style.display = 'none';
-					}
-				}
-				if ( typeof formValues.donation_frequency === 'string' ) {
-					feesAmountEl.innerHTML = `(${ settings.currencySymbol }${ feeAmount.toFixed(
-						2
-					) } ${ settings.frequencies[ formValues.donation_frequency ].toLowerCase() })`;
-				}
-			}
-		};
-
-		updateFeesAmount();
-		formElement.addEventListener( 'change', updateFeesAmount );
-
-		// Card payment flow – on form submission.
-		formElement.addEventListener( 'submit', async e => {
-			if ( ! stripe ) {
-				return;
-			}
-			e.preventDefault();
-			disableForm();
-			utils.renderMessages(
-				[ __( 'Processing payment…', 'newspack-blocks' ) ],
-				messagesEl,
-				'info'
-			);
-
-			const formValues = utils.getDonationFormValues( formElement );
-			const validationErrors = Object.values( utils.validateFormData( formValues, settings ) );
-			if ( validationErrors.length > 0 ) {
-				utils.renderMessages( validationErrors, messagesEl );
-				enableForm();
-				return;
-			}
-
-			const handleStripeSDKError = ( error: Stripe.StripeError ) => {
-				if ( error.message ) {
-					validationErrors.push( error.message );
-				}
-				utils.renderMessages( validationErrors, messagesEl );
-				enableForm();
-			};
-
-			const sourceCreationResult = await stripe.createSource( cardElement, {
-				type: 'card',
-				owner: { name: formValues.full_name, email: formValues.email },
-			} );
-			if ( sourceCreationResult.error ) {
-				handleStripeSDKError( sourceCreationResult.error );
-				return;
-			}
-			await payWithSource( sourceCreationResult.source );
-			if ( window.newspackReaderActivation?.refreshAuthentication ) {
-				window.newspackReaderActivation.refreshAuthentication();
-			}
-		} );
-	} );
-
-processStreamlinedElements();

package/src/blocks/donate/streamlined/style.scss

@@ -1,306 +0,0 @@
-@use '../../../shared/sass/colors';
-@use '../../../shared/sass/mixins';
-@use '../../../shared/sass/variables';
-
-@keyframes loader {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
-}
-
-.wp-block-newspack-blocks-donate {
-	.stripe-payment {
-		// For the initial unravelling animation.
-		position: relative;
-		&,
-		&--transition,
-		&::after {
-			transition: all 300ms ease-out;
-		}
-		&::after {
-			content: '';
-			opacity: 0;
-			pointer-events: none;
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: linear-gradient( 318deg, #d5d5d5, #fff );
-			background-size: 400% 400%;
-			animation: loader 3s ease infinite;
-			border-radius: 5px;
-		}
-
-		&__card {
-			padding: 0.34rem 0.66rem;
-			min-height: 32px;
-		}
-		input[type='text'],
-		input[type='email'],
-		&__card {
-			border: 1px solid variables.$color__border;
-			border-radius: 3px;
-		}
-		input[type='text'],
-		input[type='email'],
-		&__checkbox,
-		button,
-		.submit-button {
-			font-size: 0.7em;
-		}
-		input[type='text'],
-		input[type='email'],
-		&__messages {
-			width: 100%;
-		}
-		input[type='text'],
-		input[type='email'] {
-			border-radius: 3px;
-			font-family: sans-serif;
-
-			@include mixins.media( tablet ) {
-				font-size: 14px;
-				line-height: 1.2;
-			}
-		}
-
-		&--invisible {
-			> * {
-				opacity: 0;
-			}
-			&::after {
-				opacity: 1;
-			}
-		}
-		&--hidden {
-			display: none;
-		}
-
-		&__checkbox {
-			align-items: center;
-			display: inline-flex;
-			cursor: pointer;
-
-			input {
-				height: 1em;
-				width: 1em;
-				margin-right: 0.5em;
-			}
-		}
-
-		&__messages {
-			margin-bottom: 10px;
-			> div {
-				border: 0 solid colors.$color__info;
-				border-left-width: 4px;
-				font-size: variables.$font__size-sm;
-				margin-top: 0.76rem;
-				padding: 0.38rem 0.76rem;
-				&:empty {
-					border: 0;
-					margin: 0;
-					padding: 0;
-				}
-				&.type-error {
-					background-color: rgba( colors.$color__error, 0.075 );
-					border-color: colors.$color__error;
-				}
-				&.type-success {
-					background-color: rgba( colors.$color__success, 0.075 );
-					border-color: colors.$color__success;
-					margin: 1.12rem;
-				}
-			}
-		}
-
-		&--disabled {
-			button,
-			input {
-				pointer-events: none;
-				opacity: 0.4;
-			}
-		}
-
-		&__element {
-			margin-bottom: 0.4rem;
-		}
-
-		&__row {
-			margin-bottom: 0.5rem;
-			&--small {
-				margin-bottom: 5px;
-				line-height: 1.2;
-			}
-			&--flex {
-				display: flex;
-				align-items: flex-end;
-				justify-content: space-between;
-				flex-wrap: wrap;
-				@include mixins.media( tablet ) {
-					flex-wrap: nowrap;
-				}
-				input {
-					margin-bottom: 0.5rem;
-					@include mixins.media( tablet ) {
-						margin-bottom: 0;
-						width: 50%;
-						+ input {
-							margin-left: 0.5rem;
-						}
-					}
-				}
-			}
-			&--additional-fields {
-				display: flex;
-				flex-wrap: wrap;
-				margin-left: -0.25rem;
-				margin-right: -0.25rem;
-				> input {
-					margin-bottom: 0.5rem;
-					margin-left: 0.25rem;
-					margin-right: 0.25rem;
-				}
-			}
-		}
-
-		&__info {
-			color: colors.$color__text-light;
-			font-size: 0.7em;
-			font-style: italic;
-			padding-left: 1.5em;
-			display: none;
-			@include mixins.media( mobile ) {
-				display: block;
-			}
-		}
-
-		&__footer {
-			align-items: flex-end;
-			margin-bottom: 1.32rem;
-			margin-left: -10px;
-			margin-right: -10px;
-			> * {
-				padding-left: 10px;
-				padding-right: 10px;
-			}
-		}
-
-		&__methods {
-			display: flex;
-			flex-wrap: wrap;
-			width: 100%;
-			@include mixins.media( mobile ) {
-				width: auto;
-			}
-			button,
-			.submit-button {
-				margin-left: 0;
-				margin-right: 0;
-				margin-bottom: 0;
-				height: 46px;
-			}
-			> * {
-				&:not( :last-child ) {
-					margin-bottom: 10px;
-				}
-
-				width: 100%;
-				@include mixins.media( mobile ) {
-					width: auto;
-				}
-			}
-		}
-
-		&__request-button {
-			min-width: 190px;
-			@include mixins.media( mobile ) {
-				margin-right: 1em;
-			}
-			&--invisible {
-				opacity: 0;
-			}
-		}
-	}
-
-	&__stripe {
-		margin: 0.38rem 0.76rem 0.76rem;
-
-		@include mixins.media( tablet ) {
-			margin-left: 1.5rem;
-			margin-right: 1.5rem;
-		}
-		&--editor {
-			input:first-child {
-				margin-top: 0;
-			}
-		}
-	}
-}
-
-#stripe-fees-amount {
-	padding-left: 3px;
-}
-
-/* Alternate Style */
-
-.wpbnbd.is-style-alternate {
-	.wp-block-newspack-blocks-donate__stripe {
-		margin: 1.12rem 1.12rem 0;
-	}
-
-	.stripe-payment {
-		&__row {
-			margin-bottom: 0.56rem;
-		}
-
-		&__footer {
-			margin: 0 0 1.12rem;
-
-			> * {
-				padding: 0;
-			}
-
-			button,
-			.submit-button {
-				border-top-left-radius: 5px;
-				border-top-right-radius: 5px;
-				margin: 0;
-				width: auto;
-			}
-		}
-	}
-}
-
-/* Minimal Style */
-
-.wpbnbd.is-style-minimal {
-	.wp-block-newspack-blocks-donate__stripe {
-		margin: 0;
-		text-align: left;
-	}
-
-	.stripe-payment {
-		&__row {
-			margin-bottom: 0.56rem;
-		}
-
-		&__inputs {
-			margin-bottom: 1.12rem;
-		}
-
-		&__footer {
-			margin: 0 0 1.12rem;
-
-			> * {
-				padding: 0;
-			}
-		}
-	}
-}

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

@@ -1,18 +0,0 @@
-import 'regenerator-runtime';
-
-import { computeFeeAmount } from './utils';
-
-describe( 'Fee computation', () => {
-	it( 'computes fee with default values', () => {
-		expect( computeFeeAmount( 1, 2.9, 0.3 ) ).toBe( 0.34 );
-		expect( computeFeeAmount( 15, 2.9, 0.3 ) ).toBe( 0.76 );
-		expect( computeFeeAmount( 100, 2.9, 0.3 ) ).toBe( 3.3 );
-	} );
-	it( 'computes fee with other values', () => {
-		expect( computeFeeAmount( 15, 0, 0 ) ).toBe( 0 );
-		expect( computeFeeAmount( 15, 2.3, 0.3 ) ).toBe( 0.66 );
-		expect( computeFeeAmount( 15, 2.3, 0 ) ).toBe( 0.35 );
-		expect( computeFeeAmount( 15, 50, 0 ) ).toBe( 15 );
-		expect( computeFeeAmount( 15, 50, 10 ) ).toBe( 35 );
-	} );
-} );