@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/blocks/donate/styles/view.scss

@@ -0,0 +1,45 @@
+@use "newspack-colors" as np-colors;
+@use "../../../shared/sass/variables";
+@use "./style-variations";
+
+.wpbnbd {
+	&__button,
+	.tab-container .freq-label {
+		border: 0 solid np-colors.$neutral-300;
+		background: np-colors.$neutral-000;
+		color: np-colors.$neutral-600;
+		line-height: variables.$font__line-height-body;
+		text-overflow: ellipsis;
+		text-align: center;
+		&--active,
+		&:focus,
+		&:hover {
+			color: np-colors.$neutral-900;
+		}
+	}
+
+	&__tiers__amount__value,
+	.tier-frequency {
+		font-size: 13px;
+	}
+
+	.woocommerce-Price-amount,
+	.price-amount {
+		display: inline;
+		font-family: var(--newspack-theme-font-heading, sans-serif);
+		font-size: 29px;
+		font-weight: 700;
+	}
+
+	mark {
+		background-color: transparent;
+	}
+
+	&--selected {
+		&-other {
+			.wp-block-newspack-blocks-donate__frequency-label {
+				display: none;
+			}
+		}
+	}
+}

package/src/blocks/donate/tiers-based/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import handleTiersBasedElement from './view';
+
+/**
+ * Specify a function to execute when the DOM is fully loaded.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/dom-ready/
+ *
+ * @param {Function} callback A function to execute after the DOM is ready.
+ * @return {void}
+ */
+function domReady( callback: () => void ): void {
+	if ( typeof document === 'undefined' ) {
+		return;
+	}
+	if (
+		document.readyState === 'complete' || // DOMContentLoaded + Images/Styles/etc loaded, so we call directly.
+		document.readyState === 'interactive' // DOMContentLoaded fires at this point, so we call directly.
+	) {
+		return void callback();
+	}
+	// DOMContentLoaded has not fired yet, delay callback until then.
+	document.addEventListener( 'DOMContentLoaded', callback );
+}
+
+export const processTiersBasedElements = ( parentEl = document ) => {
+	const elements = parentEl.querySelectorAll( '.wpbnbd--tiers-based' ) as NodeListOf< HTMLElement >;
+	elements.forEach( handleTiersBasedElement );
+};
+
+if ( typeof window !== 'undefined' ) {
+	domReady( () => processTiersBasedElements() );
+}

package/src/blocks/donate/tiers-based/slider.ts

@@ -0,0 +1,64 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import debounce from 'lodash/debounce';
+
+import type { Configuration } from './types';
+
+const findClosestIndex = ( arr: number[], num: number ) => {
+	const closest =
+		arr.reduce( ( acc, val ) => {
+			if ( Math.abs( val - num ) < Math.abs( acc ) ) {
+				return val - num;
+			}
+			return acc;
+		}, Infinity ) + num;
+	return arr.indexOf( closest );
+};
+
+export const setupSlider = ( parentEl: HTMLElement, configuration: Configuration ) => {
+	const optionsEl = parentEl.querySelector( '.wpbnbd__tiers__options' );
+	const optionsDotsEl = parentEl.querySelector( '.wpbnbd__tiers__options__dots' );
+	if ( ! optionsEl || ! optionsDotsEl || ! configuration ) {
+		return;
+	}
+	const getOptions = () =>
+		Array.from( optionsEl.children ).map( ( optionEl: Element ) => ( {
+			el: optionEl,
+			width: optionEl.clientWidth,
+		} ) );
+	let options: { el: Element; width: number }[] = getOptions();
+	const initialOptionIndex = Math.round( options.length / 2 ) - 1;
+	const getOptionWidth = () => options[ initialOptionIndex ].width;
+	const getOptionsOffsets = () => options.map( ( option, index ) => optionWidth * index );
+
+	let optionWidth = getOptionWidth();
+	let optionsOffsets = getOptionsOffsets();
+	const initialScrollOffset = initialOptionIndex * optionWidth;
+
+	window.addEventListener( 'resize', () => {
+		options = getOptions();
+		optionWidth = getOptionWidth();
+		optionsOffsets = getOptionsOffsets();
+		optionsEl.scrollTo( initialScrollOffset, 0 );
+	} );
+
+	const optionsDots = Array.from( optionsDotsEl.children ) as HTMLElement[];
+
+	const handleScroll = debounce( () => {
+		const closestIndex = findClosestIndex( optionsOffsets, optionsEl.scrollLeft );
+		optionsDots.forEach( ( dotEl, index ) => {
+			dotEl.style.backgroundColor = index === closestIndex ? configuration.buttonColor : '';
+		} );
+	}, 100 );
+	optionsEl.addEventListener( 'scroll', handleScroll );
+
+	optionsDots.forEach( ( dotEl, index ) => {
+		dotEl.addEventListener( 'click', () => {
+			optionsEl.scrollTo( {
+				left: index * optionWidth,
+				behavior: 'smooth',
+			} );
+		} );
+	} );
+
+	optionsEl.scrollTo( initialScrollOffset, 0 );
+};

package/src/blocks/donate/tiers-based/style.scss

@@ -0,0 +1,185 @@
+@use "newspack-colors" as np-colors;
+@use "../../../shared/sass/variables";
+
+.wpbnbd--tiers-based {
+	.wpbnbd {
+		&__button,
+		.submit-button {
+			border-width: 1px;
+			border-color: transparent;
+			border-radius: 0;
+			background: none;
+			&--active {
+				border-color: np-colors.$neutral-300;
+			}
+		}
+		&__tiers {
+			&__view {
+				&--hidden {
+					display: none;
+				}
+			}
+			&__selection {
+				display: flex;
+				justify-content: center;
+				margin-bottom: 14px;
+				button,
+				.submit-button {
+					font-size: 13px;
+					white-space: nowrap;
+				}
+			}
+			&__options {
+				display: flex;
+				margin-left: -10px;
+				margin-right: -10px;
+
+				// Slider.
+				&__dots {
+					display: none;
+				}
+				@media screen and ( max-width: 600px ) {
+					overflow-x: scroll;
+					scroll-snap-type: x mandatory;
+					scroll-padding: 10%;
+					&__dots {
+						display: flex;
+						justify-content: center;
+						margin-top: 1em;
+						list-style: none;
+						li {
+							height: 8px;
+							width: 36px;
+							border-radius: 50px;
+							background: np-colors.$neutral-300;
+							margin: 0 5px;
+						}
+					}
+				}
+			}
+			&__tier {
+				// Slider.
+				flex: 1;
+				@media screen and ( max-width: 600px ) {
+					width: 80%;
+					flex: 0 0 auto;
+				}
+
+				display: flex;
+				scroll-snap-align: start;
+				flex-direction: column;
+				margin-left: 10px;
+				margin-right: 10px;
+				padding: 19px 14px;
+				background: np-colors.$neutral-000;
+				border: 1px solid np-colors.$neutral-300;
+				border-radius: 5px;
+				&--recommended {
+					border: 2px solid np-colors.$neutral-900;
+				}
+			}
+			&__top {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 7px;
+			}
+			&__heading {
+				font-size: 16px;
+				font-weight: bold;
+				margin: 0;
+			}
+			&__recommend-label {
+				height: 17px;
+				padding: 2px 7px;
+				margin: 0;
+				background-color: np-colors.$neutral-600;
+				color: np-colors.$neutral-000;
+				border-radius: 2px;
+				font-size: 11px;
+			}
+			&__amount {
+				margin-bottom: 16px;
+			}
+			button[type="submit"],
+			.submit-button {
+				border-radius: 3px;
+				border: 2px solid;
+				font-size: 14px;
+				line-height: 1;
+				padding: 10px 16px;
+				margin-bottom: 16px;
+			}
+			&__description {
+				flex: 1;
+				line-height: 1.4;
+				font-size: 13px;
+			}
+
+			&__back-button {
+				background: none;
+				padding: 0;
+				margin-bottom: 13px;
+				color: np-colors.$neutral-600;
+				span {
+					text-decoration: underline;
+				}
+				&:hover,
+				&:focus {
+					color: np-colors.$neutral-900;
+					background: none;
+				}
+			}
+			&__tier-tile {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 17px;
+				padding: 5px 14px 16px;
+				border: 2px solid np-colors.$neutral-900;
+				border-radius: 4px;
+				h2 {
+					font-size: 0.8em;
+					margin-top: 13px;
+				}
+				h3 {
+					display: inline-block;
+					font-size: 19px;
+					padding-top: 6px;
+					margin: 0 0 7px;
+				}
+				> div {
+					text-align: right;
+				}
+				[data-amount] {
+					font-weight: bold;
+					font-size: 1.4em;
+				}
+				[data-frequency] {
+					font-size: 0.7em;
+				}
+				&__note {
+					font-size: 0.6em;
+				}
+			}
+		}
+	}
+
+	&.wpbnbd--tier-style-list {
+		.wpbnbd__tiers {
+			&__options {
+				display: grid;
+				gap: var(--newspack-ui-spacer-2, 12px);
+				margin: 0 !important;
+				overflow: hidden;
+
+				&__dots {
+					display: none;
+				}
+			}
+
+			&__tier {
+				margin: 0 !important;
+				width: 100%;
+			}
+		}
+	}
+}

package/src/blocks/donate/tiers-based/types.ts

@@ -0,0 +1,3 @@
+import { parseTiersBasedConfig } from './utils';
+
+export type Configuration = ReturnType< typeof parseTiersBasedConfig >;

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

@@ -0,0 +1,38 @@
+import { parseTiersBasedConfig } from './utils';
+
+describe( 'tiers-based config processing', () => {
+	it( 'decodes a tiers-based config', () => {
+		expect(
+			parseTiersBasedConfig(
+				'["donation_frequency","donation_value_","once",[{"heading":"Small"},{"heading":"Medium"},{"heading":"Large"}],{"once":[9,20,90,20],"month":[7,15,30,15],"year":[84,180,360,180]},"February 09, 2024","January 09, 2025","#dd3333"]'
+			)
+		).toEqual( {
+			amounts: {
+				month: [ 7, 15, 30, 15 ],
+				once: [ 9, 20, 90, 20 ],
+				year: [ 84, 180, 360, 180 ],
+			},
+			buttonColor: '#dd3333',
+			initialFrequency: 'once',
+			params: {
+				frequency: 'donation_frequency',
+				tierPrefix: 'donation_value_',
+			},
+			renewsAt: {
+				month: 'February 09, 2024',
+				year: 'January 09, 2025',
+			},
+			tiersBasedOptions: [
+				{
+					heading: 'Small',
+				},
+				{
+					heading: 'Medium',
+				},
+				{
+					heading: 'Large',
+				},
+			],
+		} );
+	} );
+} );

package/src/blocks/donate/tiers-based/utils.ts

@@ -0,0 +1,21 @@
+export const parseTiersBasedConfig = ( rawConfig = '' ) => {
+	try {
+		const items = JSON.parse( rawConfig );
+		return {
+			params: {
+				frequency: items[ 0 ],
+				tierPrefix: items[ 1 ],
+			},
+			initialFrequency: items[ 2 ],
+			tiersBasedOptions: items[ 3 ],
+			amounts: items[ 4 ],
+			renewsAt: {
+				month: items[ 5 ] as string,
+				year: items[ 6 ] as string,
+			},
+			buttonColor: items[ 7 ],
+		};
+	} catch ( error ) {
+		return false;
+	}
+};

package/src/blocks/donate/tiers-based/view.ts

@@ -0,0 +1,132 @@
+import { setupSlider } from './slider';
+import { parseTiersBasedConfig } from './utils';
+
+const BUTTON_ACTIVE_CLASSNAME = 'wpbnbd__button--active';
+
+const getSelectedAmountSelector = ( frequency: string ) => `.wpbnbd__tiers__amount [data-frequency-slug="${ frequency }"]`;
+
+type SelectedFrequency = 'month' | 'year';
+
+export default ( parentEl: HTMLElement ) => {
+	const config = parseTiersBasedConfig( parentEl.getAttribute( 'data-tiers-based-config' ) || '' );
+	if ( ! config ) {
+		return;
+	}
+	const frequencyButtonsEls = parentEl.querySelectorAll( '.wpbnbd__tiers__selection button' );
+	const amountsEls: NodeListOf< HTMLElement > = parentEl.querySelectorAll( '.wpbnbd__tiers__amount [data-frequency-slug]' );
+	const frequencyInputEl = parentEl.querySelector( `input[name="${ config.params.frequency }"]` );
+	const initFormEl = parentEl.querySelector( 'form[data-is-init-form]' );
+	if ( ! frequencyButtonsEls || ! amountsEls || ! frequencyInputEl || ! initFormEl ) {
+		return;
+	}
+
+	setupSlider( parentEl, config );
+
+	let selectedFrequency: SelectedFrequency = config.initialFrequency;
+
+	// Frequency choosing interaction.
+	frequencyButtonsEls.forEach( buttonEl => {
+		buttonEl.addEventListener( 'click', () => {
+			const maybeSelectedFrequency = buttonEl.getAttribute( 'data-frequency-slug' ) as SelectedFrequency | null;
+			if ( ! maybeSelectedFrequency ) {
+				return;
+			}
+
+			selectedFrequency = maybeSelectedFrequency;
+
+			// Set hidden input value.
+			frequencyInputEl.setAttribute( 'value', selectedFrequency );
+
+			// Toggle the amount & frequency UI.
+			amountsEls.forEach( amountEl => ( amountEl.style.display = 'none' ) );
+			const selectedAmountEls: NodeListOf< HTMLElement > = parentEl.querySelectorAll( getSelectedAmountSelector( selectedFrequency ) );
+			selectedAmountEls.forEach( el => ( el.style.display = 'inline' ) );
+
+			// Toggle the frequency buttons' active states.
+			frequencyButtonsEls.forEach( el => {
+				if ( selectedFrequency === el.getAttribute( 'data-frequency-slug' ) ) {
+					el.classList.add( BUTTON_ACTIVE_CLASSNAME );
+				} else {
+					el.classList.remove( BUTTON_ACTIVE_CLASSNAME );
+				}
+			} );
+
+			// Update the value attributes in the form's submit buttons.
+			const submitButtonsEls = parentEl.querySelectorAll( 'button[type="submit"]' );
+			submitButtonsEls.forEach( ( _buttonEl: Element ) => {
+				if ( ! selectedFrequency ) {
+					return;
+				}
+				_buttonEl.setAttribute( 'name', `${ config.params.tierPrefix }${ selectedFrequency }` );
+				const buttonTierIndex = _buttonEl.getAttribute( 'data-tier-index' );
+				const amountEl = document.querySelector(
+					`${ getSelectedAmountSelector( selectedFrequency ) }[data-tier-index="${ buttonTierIndex }"]`
+				);
+				if ( ! amountEl ) {
+					return;
+				}
+				const value = amountEl.getAttribute( 'data-amount' );
+				if ( value ) {
+					_buttonEl.setAttribute( 'value', value );
+				}
+			} );
+		} );
+	} );
+
+	// View transitions.
+	const backButton = parentEl.querySelector( 'button.wpbnbd__tiers__back-button' ) as HTMLElement;
+	const tierSelectionButtonsEls = parentEl.querySelectorAll( '.wpbnbd__tiers__tier button' );
+	const viewEls = parentEl.querySelectorAll( '.wpbnbd__tiers__view' );
+	const toggleView = () => viewEls.forEach( viewEl => viewEl.classList.toggle( 'wpbnbd__tiers__view--hidden' ) );
+
+	tierSelectionButtonsEls.forEach( buttonEl => {
+		buttonEl.addEventListener( 'click', () => {
+			const tierIndex = parseInt( buttonEl.getAttribute( 'data-tier-index' ) || '' );
+
+			// Remove hidden index and value inputs from tiers form.
+			const hiddenIndexInputEl = initFormEl.querySelector( 'input[name="donation_tier_index"]' );
+			const hiddenValueInputEl = initFormEl.querySelector( `input[name="donation_value_${ selectedFrequency }"]` );
+			if ( hiddenIndexInputEl ) {
+				hiddenIndexInputEl.remove();
+			}
+			if ( hiddenValueInputEl ) {
+				hiddenValueInputEl.remove();
+			}
+
+			// Append hidden index input to tiers form.
+			const indexInputEl = document.createElement( 'input' );
+			const valueInputEl = document.createElement( 'input' );
+			indexInputEl.setAttribute( 'type', 'hidden' );
+			valueInputEl.setAttribute( 'type', 'hidden' );
+			indexInputEl.setAttribute( 'name', 'donation_tier_index' );
+			valueInputEl.setAttribute( 'name', `donation_value_${ selectedFrequency }` );
+			indexInputEl.setAttribute( 'value', tierIndex.toString() );
+			valueInputEl.setAttribute( 'value', config.amounts[ selectedFrequency ][ tierIndex ] );
+			initFormEl.appendChild( indexInputEl );
+			initFormEl.appendChild( valueInputEl );
+
+			const tierHeadingEl: HTMLElement | null = parentEl.querySelector( '.wpbnbd__tiers__tier-tile h2' );
+			const tierAmountEl: HTMLElement | null = parentEl.querySelector( '.wpbnbd__tiers__tier-tile span[data-amount]' );
+			const tierFrequencyLabelEl: HTMLElement | null = parentEl.querySelector( '.wpbnbd__tiers__tier-tile span[data-frequency]' );
+			const renewsOnEl: HTMLElement | null = parentEl.querySelector( '.wpbnbd__tiers__tier-tile span[data-renews-date]' );
+			if ( isNaN( tierIndex ) || ! tierHeadingEl || ! tierAmountEl || ! tierFrequencyLabelEl || ! renewsOnEl ) {
+				return;
+			}
+
+			const tierOption = config.tiersBasedOptions[ tierIndex ];
+			const frequencyLabel = parentEl.querySelector( `[data-frequency-slug="${ selectedFrequency }"]` )?.getAttribute( 'data-frequency-label' );
+			tierHeadingEl.textContent = tierOption.heading;
+			tierFrequencyLabelEl.textContent = frequencyLabel || '';
+			tierAmountEl.textContent = config.amounts[ selectedFrequency ][ tierIndex ];
+			renewsOnEl.textContent = config.renewsAt[ selectedFrequency ];
+
+			toggleView();
+		} );
+	} );
+
+	window.addEventListener( `newspackPaymentFlowComplete-${ parentEl.id }`, () => {
+		if ( backButton ) {
+			backButton.style.display = 'none';
+		}
+	} );
+};

package/src/blocks/donate/types.ts

@@ -0,0 +1,96 @@
+import { FREQUENCY_SLUGS } from './consts';
+
+export type DonationFrequencySlug = 'once' | 'month' | 'year';
+
+export type DonationFormInputName = `donation_value_${ DonationFrequencySlug }`;
+type DonationFormInputOtherName = `donation_value_${ DonationFrequencySlug }_other`;
+type DonationFormInputUntieredName = `donation_value_${ DonationFrequencySlug }_untiered`;
+
+export type DonationFormValues = Record< DonationFormInputName, string > &
+	Record< DonationFormInputOtherName, string > &
+	Record< DonationFormInputUntieredName, string > & {
+		amount: string;
+		donation_frequency: DonationFrequencySlug;
+		email: string;
+		full_name: string;
+		cid?: string;
+		agree_to_pay_fees?: string;
+		newsletter_opt_in?: string;
+		newspack_popup_id?: string;
+		prompt_title?: string;
+		_wp_http_referer?: string;
+	};
+
+export type DonationSettings = {
+	currency: string;
+	currencySymbol: string;
+	siteName: string;
+	isCurrencyZeroDecimal: boolean;
+	countryCode: string;
+	availableFrequencies: typeof FREQUENCY_SLUGS;
+	feeMultiplier: number;
+	feeStatic: number;
+	captchaSiteKey: string;
+	minimumDonation: number;
+	amounts: DonationAmounts;
+	tiered: boolean;
+	disabledFrequencies: Record< DonationFrequencySlug, boolean >;
+	platform: string;
+};
+
+export type EditState = Pick< DonationSettings, 'amounts' | 'currencySymbol' | 'tiered' | 'disabledFrequencies' | 'minimumDonation' | 'platform' >;
+
+export type DonationAmountsArray = [ number, number, number, number ];
+export type DonationAmounts = Record< DonationFrequencySlug, DonationAmountsArray >;
+
+export type OverridableConfiguration = {
+	amounts: DonationAmounts;
+	tiered: boolean;
+	disabledFrequencies: Record< DonationFrequencySlug, boolean >;
+	minimumDonation: number;
+};
+
+export type TierBasedOptionValue = {
+	heading: string;
+	description: string;
+	buttonText: string;
+	recommendLabel: string;
+};
+
+export type DonateBlockAttributes = OverridableConfiguration & {
+	buttonText: string;
+	buttonColor: string;
+	thanksText: string;
+	defaultFrequency: DonationFrequencySlug;
+	campaign: string;
+	className: string;
+	layoutOption: 'frequency' | 'tiers';
+	// For tiers-based layout option.
+	tiersBasedOptions: [ TierBasedOptionValue, TierBasedOptionValue, TierBasedOptionValue ];
+	tierStyle: 'grid' | 'list';
+	// Manual mode enables block-level overrides of the global Donate settings.
+	manual: boolean;
+	// Post-checkout button option.
+	afterSuccessBehavior: string;
+	afterSuccessButtonLabel: string;
+	afterSuccessURL: string;
+	// Legacy attributes.
+	suggestedAmounts?: [ number, number, number ];
+	suggestedAmountUntiered?: number;
+	minimumDonation: number;
+};
+
+export type ComponentProps = {
+	attributes: DonateBlockAttributes;
+	settings: EditState;
+	setAttributes: ( attributes: Partial< DonateBlockAttributes > ) => void;
+	setSettings: ( settings: Partial< EditState > ) => void;
+	amounts: DonationAmounts;
+	availableFrequencies: typeof FREQUENCY_SLUGS;
+};
+
+export type EditProps = {
+	attributes: DonateBlockAttributes;
+	setAttributes: ( attributes: Partial< DonateBlockAttributes > ) => void;
+	className: string;
+};