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

package/src/blocks/checkout-button/view.scss

@@ -0,0 +1,39 @@
+.wp-block-newspack-blocks-checkout-button {
+	&.alignwide,
+	&.alignfull {
+		button {
+			width: 100%;
+		}
+	}
+	&.aligncenter {
+		form {
+			flex-direction: column;
+		}
+		button {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+
+	&.wp-block-button__width-25 button {
+		width: 25%;
+	}
+	&.wp-block-button__width-50 button {
+		width: 50%;
+	}
+	&.wp-block-button__width-75 button {
+		width: 75%;
+	}
+	&.wp-block-button__width-100 button {
+		width: 100%;
+	}
+
+	form {
+		display: flex;
+	}
+
+	.wp-block-button__link {
+		display: inline-block;
+		width: auto;
+	}
+}

package/src/blocks/donate/block.json

@@ -0,0 +1,103 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "donate",
+	"category": "newspack",
+	"attributes": {
+		"className": {
+			"type": "string"
+		},
+		"manual": {
+			"type": "boolean"
+		},
+		"tiered": {
+			"type": "boolean",
+			"default": true
+		},
+		"amounts": {
+			"type": "object",
+			"default": {}
+		},
+		"disabledFrequencies": {
+			"type": "object",
+			"default": {}
+		},
+		"thanksText": {
+			"type": "string",
+			"default": "Your contribution is appreciated."
+		},
+		"buttonText": {
+			"type": "string",
+			"default": "Donate Now"
+		},
+		"defaultFrequency": {
+			"type": "string",
+			"default": "month"
+		},
+		"campaign": {
+			"type": "string"
+		},
+		"buttonColor": {
+			"type": "string",
+			"default": "#dd3333"
+		},
+		"suggestedAmounts": {
+			"type": "array"
+		},
+		"suggestedAmountUntiered": {
+			"type": "number"
+		},
+		"minimumDonation": {
+			"type": "number"
+		},
+		"layoutOption": {
+			"type": "string",
+			"default": "frequency"
+		},
+		"tierStyle": {
+			"type": "string",
+			"default": "grid"
+		},
+		"useModalCheckout": {
+			"type": "boolean",
+			"default": true
+		},
+		"tiersBasedOptions": {
+			"type": "array",
+			"default": [
+				{
+					"heading": "Small",
+					"description": "",
+					"buttonText": "Select",
+					"recommendLabel": ""
+				},
+				{
+					"heading": "Medium",
+					"description": "",
+					"buttonText": "Select",
+					"recommendLabel": "BEST VALUE"
+				},
+				{
+					"heading": "Large",
+					"description": "",
+					"buttonText": "Select",
+					"recommendLabel": ""
+				}
+			]
+		},
+		"afterSuccessBehavior": {
+			"type": "string"
+		},
+		"afterSuccessButtonLabel": {
+			"type": "string",
+			"default": "Continue"
+		},
+		"afterSuccessURL": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"align": false
+	}
+}

package/src/blocks/donate/consts.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DonationFrequencySlug, DonateBlockAttributes } from './types';
+
+export const FREQUENCIES: Record< DonationFrequencySlug, string > = {
+	once: __( 'One-time', 'newspack-blocks' ),
+	month: __( 'Monthly', 'newspack-blocks' ),
+	year: __( 'Annually', 'newspack-blocks' ),
+};
+
+export const FREQUENCY_SLUGS: DonationFrequencySlug[] = Object.keys( FREQUENCIES ) as DonationFrequencySlug[];
+
+export const LAYOUT_OPTIONS: { label: string; key: DonateBlockAttributes[ 'layoutOption' ] }[] = [
+	{ label: __( 'Frequency', 'newspack-blocks' ), key: 'frequency' },
+	{ label: __( 'Tiers', 'newspack-blocks' ), key: 'tiers' },
+];
+
+// The item at fourth position is the "other" value, it is not a tier.
+export const DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX = 3;

package/src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
+import { RichText } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { AmountValueInput } from './components';
+import { getColorForContrast, getFrequencyLabel, getFormattedAmount, getFrequencyLabelWithAmount } from '../utils';
+import { FREQUENCIES } from '../consts';
+import type { ComponentProps, DonationFrequencySlug } from '../types';
+import { updateBlockClassName, getFormData } from '../view';
+
+const FrequencyBasedLayout = ( props: { canUseNameYourPrice: boolean; isTiered: boolean } & ComponentProps ) => {
+	// Unique identifier to prevent collisions with other Donate blocks' labels.
+	const uid = useMemo( () => Math.random().toString( 16 ).slice( 2 ), [] );
+
+	const { attributes, settings, amounts, availableFrequencies, setAttributes, canUseNameYourPrice } = props;
+
+	const formRef = useRef< HTMLFormElement >( null );
+
+	// Add event listeners to the form.
+	useEffect( () => {
+		if ( formRef.current !== null ) {
+			const parentElement = formRef.current.closest( '.wpbnbd' );
+			if ( parentElement ) {
+				updateBlockClassName( parentElement, getFormData( formRef.current ) );
+			}
+			formRef.current.addEventListener( 'change', () => {
+				if ( formRef.current !== null && parentElement ) {
+					updateBlockClassName( parentElement, getFormData( formRef.current ) );
+				}
+			} );
+		}
+	}, [] );
+
+	// Update selected frequency when available frequencies change.
+	useEffect( () => {
+		if ( formRef.current ) {
+			const formValues = getFormData( formRef.current );
+			if ( ! formValues.donation_frequency && formRef.current.elements ) {
+				const frequencyRadioInput = formRef.current.elements[ 0 ];
+				if ( frequencyRadioInput instanceof HTMLInputElement ) {
+					frequencyRadioInput.click();
+				}
+			}
+		}
+		if ( availableFrequencies.indexOf( attributes.defaultFrequency ) === -1 ) {
+			setAttributes( { defaultFrequency: availableFrequencies[ 0 ] } );
+		}
+	}, [ attributes.disabledFrequencies ] );
+
+	// Update selected frequency when the default frequency attribute is updated.
+	useEffect( () => {
+		setSelectedFrequency( attributes.defaultFrequency );
+	}, [ attributes.defaultFrequency ] );
+
+	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
+	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
+		<>
+			<input
+				type="radio"
+				value={ frequencySlug }
+				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
+				name="donation_frequency"
+				checked={ frequencySlug === selectedFrequency }
+				onChange={ evt => setSelectedFrequency( evt.target.value as 'once' | 'month' | 'year' ) }
+			/>
+			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>{ FREQUENCIES[ frequencySlug ] }</label>
+		</>
+	);
+
+	const renderTab = ( frequencySlug: DonationFrequencySlug ) => (
+		<button
+			key={ frequencySlug }
+			role="tab"
+			className={ classNames( 'wpbnbd__button freq-label', {
+				'wpbnbd__button--active': frequencySlug === selectedFrequency,
+			} ) }
+			id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
+			onClick={ evt => {
+				evt.preventDefault();
+				setSelectedFrequency( frequencySlug );
+			} }
+		>
+			{ FREQUENCIES[ frequencySlug ] }
+		</button>
+	);
+
+	const renderFormHeader = () => {
+		return ! rendersSingleFrequency && <div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>;
+	};
+	const rendersSingleFrequency = availableFrequencies.length === 1;
+
+	const renderUntieredForm = () => (
+		<div className="wp-block-newspack-blocks-donate__options">
+			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				{ renderFormHeader() }
+				{ availableFrequencies.map( frequencySlug => {
+					const untieredAmount = amounts[ frequencySlug ][ 3 ];
+					return (
+						<div className="wp-block-newspack-blocks-donate__frequency frequency" key={ frequencySlug }>
+							{ renderFrequencySelect( frequencySlug ) }
+							<div className="input-container">
+								{ canUseNameYourPrice ? (
+									<>
+										<label className="donate-label" htmlFor={ 'newspack-' + frequencySlug + '-' + uid + '-untiered-input' }>
+											{ __( 'Donation amount', 'newspack-blocks' ) }
+											{ getFrequencyLabel( frequencySlug, true ) }
+										</label>
+										<div className="wp-block-newspack-blocks-donate__money-input money-input">
+											<span className="currency">{ settings.currencySymbol }</span>
+											<AmountValueInput
+												{ ...props }
+												frequencySlug={ frequencySlug }
+												tierIndex={ 3 }
+												id={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+											/>
+										</div>
+									</>
+								) : (
+									<>
+										<input
+											type="radio"
+											value={ untieredAmount }
+											className={ 'frequency-input' }
+											id={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+											name={ `donation_value_${ frequencySlug }` }
+											defaultChecked={ true }
+										/>
+										{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+										<label
+											className="tier-select-label tier-label"
+											htmlFor={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+										>
+											<div
+												dangerouslySetInnerHTML={ {
+													__html: getFrequencyLabelWithAmount( untieredAmount, frequencySlug ),
+												} }
+											/>
+										</label>
+									</>
+								) }
+							</div>
+						</div>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+
+	const renderTieredForm = () => (
+		<div className="wp-block-newspack-blocks-donate__options">
+			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				{ renderFormHeader() }
+				{ availableFrequencies.map( frequencySlug => (
+					<div className="wp-block-newspack-blocks-donate__frequency frequency" key={ frequencySlug }>
+						{ renderFrequencySelect( frequencySlug ) }
+
+						<div className="wp-block-newspack-blocks-donate__tiers tiers">
+							{ amounts[ frequencySlug ].map( ( suggestedAmount, index: number ) => {
+								const isOtherTier = index === 3;
+								const id = `newspack-tier-${ frequencySlug }-${ uid }-${ isOtherTier ? 'other' : index }`;
+								const tierLabel = isOtherTier ? __( 'Other', 'newspack-blocks' ) : getFormattedAmount( suggestedAmount, true );
+								return (
+									<div
+										className={ classNames(
+											'wp-block-newspack-blocks-donate__tier',
+											`wp-block-newspack-blocks-donate__tier--${ isOtherTier ? 'other' : 'frequency' }`
+										) }
+										key={ index }
+									>
+										<input
+											type="radio"
+											value={ isOtherTier ? 'other' : suggestedAmount }
+											className={ isOtherTier ? 'other-input' : 'frequency-input' }
+											id={ id }
+											name={ `donation_value_${ frequencySlug }` }
+											defaultChecked={ index === 1 }
+										/>
+										<label className="tier-select-label tier-label" htmlFor={ id }>
+											{ tierLabel }
+										</label>
+										{ isOtherTier ? (
+											<>
+												<label className="odl" htmlFor={ id + '-other-input' }>
+													{ __( 'Donation amount', 'newspack-blocks' ) }
+													{ getFrequencyLabel( frequencySlug, true ) }
+												</label>
+												<div className="wp-block-newspack-blocks-donate__money-input money-input">
+													<span className="currency">{ settings.currencySymbol }</span>
+													<input type="number" readOnly />
+												</div>
+											</>
+										) : null }
+									</div>
+								);
+							} ) }
+							{ rendersSingleFrequency ? (
+								<div className="wp-block-newspack-blocks-donate__frequency-label">{ getFrequencyLabel( frequencySlug, true ) }</div>
+							) : null }
+						</div>
+					</div>
+				) ) }
+			</div>
+		</div>
+	);
+
+	const renderButton = () => (
+		<div
+			className="submit-button"
+			style={ {
+				backgroundColor: attributes.buttonColor,
+				color: getColorForContrast( attributes.buttonColor ),
+			} }
+		>
+			<RichText
+				onChange={ ( value: string ) => setAttributes( { buttonText: value } ) }
+				placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+				value={ attributes.buttonText }
+				tagName="span"
+			/>
+		</div>
+	);
+
+	const renderFooter = () => (
+		<>
+			<p className="wp-block-newspack-blocks-donate__thanks thanks">
+				<RichText
+					onChange={ ( value: string ) => setAttributes( { thanksText: value } ) }
+					placeholder={ __( 'Thank you text…', 'newspack-blocks' ) }
+					value={ attributes.thanksText }
+					tagName="span"
+				/>
+			</p>
+			{ renderButton() }
+		</>
+	);
+
+	return (
+		<form ref={ formRef }>
+			{ props.isTiered ? renderTieredForm() : renderUntieredForm() }
+			{ renderFooter() }
+		</form>
+	);
+};
+export default FrequencyBasedLayout;

package/src/blocks/donate/edit/TierBasedLayout.tsx

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { RichText } from '@wordpress/block-editor';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { ComponentProps, DonateBlockAttributes, TierBasedOptionValue } from '../types';
+import { getColorForContrast, getFrequencyLabelWithAmount } from '../utils';
+import { FREQUENCIES, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX } from '../consts';
+
+const TierBasedLayout = ( props: ComponentProps ) => {
+	const { amounts, availableFrequencies, attributes } = props;
+	const [ currentFrequency, setCurrencyFrequency ] = useState( attributes.defaultFrequency || availableFrequencies[ 0 ] );
+
+	const displayedAmounts = amounts[ currentFrequency ].slice( 0, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX );
+
+	useEffect( () => {
+		setCurrencyFrequency( attributes.defaultFrequency || availableFrequencies[ 0 ] );
+	}, [ availableFrequencies.length, attributes.defaultFrequency ] );
+
+	const handleTierOptionChange = ( tierIndex: number, optionKey: keyof TierBasedOptionValue ) => ( value: string ) => {
+		const tiersBasedOptions: DonateBlockAttributes[ 'tiersBasedOptions' ] = [
+			...attributes.tiersBasedOptions, // The value has to be copied in order for the block editor to pick up the change.
+		];
+		tiersBasedOptions[ tierIndex ] = {
+			...tiersBasedOptions[ tierIndex ],
+			[ optionKey ]: value,
+		};
+		props.setAttributes( { tiersBasedOptions } );
+	};
+
+	const isAnyRecommended = attributes.tiersBasedOptions.some( tier => Boolean( tier.recommendLabel ) );
+
+	return (
+		<form className="wpbnbd__tiers" onSubmit={ e => e.preventDefault() }>
+			{ availableFrequencies.length > 1 && (
+				<div className="wpbnbd__tiers__selection">
+					{ availableFrequencies.map( frequencySlug => {
+						const isActive = currentFrequency === frequencySlug;
+						return (
+							<button
+								key={ frequencySlug }
+								className={ classNames( 'wpbnbd__button', {
+									'wpbnbd__button--active': isActive,
+								} ) }
+								onClick={ () => setCurrencyFrequency( frequencySlug ) }
+							>
+								{ FREQUENCIES[ frequencySlug ] }
+							</button>
+						);
+					} ) }
+				</div>
+			) }
+			<div className="wpbnbd__tiers__options">
+				{ displayedAmounts.map( ( amount, index ) => {
+					const recommendLabel = attributes.tiersBasedOptions[ index ].recommendLabel || '';
+					return (
+						<div
+							key={ index }
+							className={ classNames( 'wpbnbd__tiers__tier', {
+								'wpbnbd__tiers__tier--recommended': recommendLabel.length,
+							} ) }
+						>
+							<div className="wpbnbd__tiers__top">
+								<h2 className="wpbnbd__tiers__heading">
+									<RichText
+										onChange={ handleTierOptionChange( index, 'heading' ) }
+										placeholder={ __( 'Heading…', 'newspack-blocks' ) }
+										value={ attributes.tiersBasedOptions[ index ].heading }
+										tagName="span"
+									/>
+								</h2>
+								<h3 className="wpbnbd__tiers__recommend-label" style={ { opacity: recommendLabel ? 1 : 0.5 } }>
+									<RichText
+										onChange={ handleTierOptionChange( index, 'recommendLabel' ) }
+										placeholder={ __( '…', 'newspack-blocks' ) }
+										value={ recommendLabel }
+										tagName="span"
+									/>
+								</h3>
+							</div>
+							<div className="wpbnbd__tiers__amount">
+								<div
+									dangerouslySetInnerHTML={ {
+										__html: getFrequencyLabelWithAmount( amount, currentFrequency ),
+									} }
+								/>
+							</div>
+							<div
+								className="submit-button"
+								style={ {
+									appearance: 'button',
+									borderColor: attributes.buttonColor,
+									...( isAnyRecommended && ! recommendLabel
+										? {
+												backgroundColor: 'transparent',
+												color: attributes.buttonColor,
+										  }
+										: {
+												backgroundColor: attributes.buttonColor,
+												color: getColorForContrast( attributes.buttonColor ),
+										  } ),
+								} }
+							>
+								<RichText
+									onChange={ handleTierOptionChange( index, 'buttonText' ) }
+									placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+									value={ attributes.tiersBasedOptions[ index ].buttonText }
+									tagName="span"
+								/>
+							</div>
+							<div className="wpbnbd__tiers__description">
+								<RichText
+									onChange={ handleTierOptionChange( index, 'description' ) }
+									placeholder={ __( 'Description…', 'newspack-blocks' ) }
+									value={ attributes.tiersBasedOptions[ index ].description }
+									tagName="span"
+								/>
+							</div>
+						</div>
+					);
+				} ) }
+			</div>
+		</form>
+	);
+};
+
+export default TierBasedLayout;

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

@@ -0,0 +1,62 @@
+import type { DonateBlockAttributes, ComponentProps, DonationFrequencySlug } from '../../types';
+
+const AmountValueInput = ( {
+	frequencySlug,
+	tierIndex,
+	id,
+	label,
+	attributes,
+	settings,
+	amounts,
+	setAttributes,
+	setSettings,
+	disabled,
+	ignoreMinimumAmount,
+}: ComponentProps & {
+	frequencySlug: DonationFrequencySlug;
+	tierIndex: number;
+	id: string;
+	label?: string;
+	disabled?: boolean;
+	ignoreMinimumAmount?: boolean;
+} ) => {
+	const onChange = ( { value, frequency }: { value: string; frequency: DonationFrequencySlug } ) => {
+		const subject = attributes.manual ? attributes : settings;
+		subject.amounts[ frequency ][ tierIndex ] = parseFloat( value );
+		const update: Partial< DonateBlockAttributes > = {
+			amounts: {
+				[ frequency ]: subject.amounts[ frequency ],
+				...subject.amounts,
+			},
+		};
+
+		if ( attributes.manual ) {
+			setAttributes( update );
+		} else {
+			setSettings( update );
+		}
+	};
+	const amount = amounts[ frequencySlug ][ tierIndex ];
+	const value = settings.minimumDonation && ! ignoreMinimumAmount ? Math.max( amount, settings.minimumDonation ) : amount;
+
+	return (
+		<span key={ `${ frequencySlug }-${ tierIndex }` }>
+			{ label && <label htmlFor={ id }>{ label }</label> }
+			<input
+				type="number"
+				min={ ignoreMinimumAmount ? undefined : attributes.minimumDonation }
+				onChange={ evt =>
+					onChange( {
+						value: evt.target.value,
+						frequency: frequencySlug,
+					} )
+				}
+				value={ value }
+				id={ id }
+				disabled={ disabled }
+			/>
+		</span>
+	);
+};
+
+export default AmountValueInput;

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

@@ -0,0 +1 @@
+export { default as AmountValueInput } from './AmountValueInput';