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

package/src/blocks/checkout-button/edit.js

@@ -0,0 +1,385 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/* globals newspack_blocks_data */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { debounce, invert } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	BaseControl,
+	CheckboxControl,
+	TextControl,
+	SelectControl,
+	FormTokenField,
+	Button,
+	Spinner,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import './edit.scss';
+import RedirectAfterSuccess from '../../components/redirect-after-success';
+
+function getVariationName( variation ) {
+	const attributes = [];
+	for ( const attribute of variation.attributes ) {
+		attributes.push( attribute.name + ': ' + attribute.option );
+	}
+	return attributes.join( ', ' );
+}
+
+function getNYP( product ) {
+	return {
+		isNYP: newspack_blocks_data?.can_use_name_your_price && product?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
+		suggestedPrice: product?.meta_data?.find( meta => meta.key === '_suggested_price' )?.value,
+		minPrice: product?.meta_data?.find( meta => meta.key === '_min_price' )?.value,
+		maxPrice: product?.meta_data?.find( meta => meta.key === '_maximum_price' )?.value,
+	};
+}
+
+function WidthControl( { selectedWidth, setAttributes } ) {
+	function handleChange( newWidth ) {
+		// Check if we are toggling the width off
+		const width = selectedWidth === newWidth ? undefined : newWidth;
+
+		// Update attributes.
+		setAttributes( { width } );
+	}
+
+	return (
+		<ToggleGroupControl
+			label={ __( 'Width', 'newspack-blocks' ) }
+			value={ selectedWidth ? String( selectedWidth ) : undefined }
+			onChange={ value => handleChange( parseFloat( value ) ) }
+			isBlock
+			__next40pxDefaultSize
+		>
+			{ [ 25, 50, 75, 100 ].map( widthValue => (
+				<ToggleGroupControlOption key={ widthValue } label={ `${ widthValue }%` } value={ String( widthValue ) } />
+			) ) }
+		</ToggleGroupControl>
+	);
+}
+
+function ProductControl( props ) {
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( {} );
+	const [ selected, setSelected ] = useState( false );
+	const [ isChanging, setIsChanging ] = useState( false );
+	const [ productError, setProductError ] = useState( '' );
+
+	function fetchSuggestions( search ) {
+		setInFlight( true );
+		return apiFetch( {
+			// The search query is wrapped in quotes to ensure that the search is for
+			// the exact phrase, matching the behavior of the FormTokenField component.
+			path: `/wc/v2/products?search=${ encodeURIComponent( '"' + search + '"' ) }`,
+		} )
+			.then( products => {
+				const _suggestions = {};
+				products.forEach( product => {
+					if ( '' !== product.price || getNYP( product ).isNYP ) {
+						// Variable products will populate price with one of the variations prices.
+						_suggestions[ product.id ] = `${ product.id }: ${ product.name }`;
+					}
+				} );
+				setSuggestions( _suggestions );
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+	function fetchSaved() {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v2/products/${ props.value }`,
+		} )
+			.then( product => {
+				setSuggestions( { [ product.id ]: `${ product.id }: ${ product.name }` } );
+				setSelected( product );
+				setProductError( '' );
+				props.onProduct( product );
+			} )
+			.catch( () => {
+				setProductError(
+					sprintf(
+						// translators: %s: product ID.
+						__( 'Could not find a product with ID %s. Please select a different product.', 'newspack-blocks' ),
+						props.value
+					)
+				);
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+	useEffect( () => {
+		setIsChanging( false );
+		if ( props.value ) {
+			fetchSaved();
+		} else {
+			setSelected( false );
+		}
+	}, [ props.value ] );
+	function onChange( tokens ) {
+		const productName = tokens[ 0 ];
+		const productId = invert( suggestions )[ productName ];
+		setIsChanging( false );
+		props.onChange( productId );
+	}
+	const debouncedFetchProductSuggestions = debounce( fetchSuggestions, 200 );
+	const handleInputChange = value => {
+		if ( value.length > 2 ) {
+			setInFlight( true );
+			debouncedFetchProductSuggestions( value );
+		} else {
+			setInFlight( false );
+		}
+	};
+	if ( props.value && ! productError && ! selected && inFlight ) {
+		return <Spinner />;
+	}
+	return (
+		<div className="newspack-checkout-button__product-field" style={ { marginBottom: '16px' } }>
+			{ selected && ! isChanging ? (
+				<>
+					<BaseControl label={ __( 'Product', 'newspack-blocks' ) } id="selected-product-control">
+						<TextControl value={ selected.name } __next40pxDefaultSize disabled />
+						<Button
+							variant="link"
+							onClick={ () => setIsChanging( true ) }
+							aria-label={ __( 'Change the selected product', 'newspack-blocks' ) }
+						>
+							{ __( 'Edit', 'newspack-blocks' ) }
+						</Button>
+					</BaseControl>
+					{ props.children }
+				</>
+			) : (
+				<>
+					<div className="newspack-checkout-button__product-field__tokenfield">
+						<FormTokenField
+							placeholder={ props.placeholder || __( 'Type to search for a product…', 'newspack-blocks' ) }
+							label={ __( 'Product', 'newspack-blocks' ) }
+							maxLength={ 1 }
+							onChange={ onChange }
+							onInputChange={ handleInputChange }
+							suggestions={ Object.values( suggestions ) }
+							__next40pxDefaultSize
+						/>
+						{ inFlight && <Spinner /> }
+					</div>
+					{ selected && (
+						<Button variant="link" onClick={ () => setIsChanging( false ) }>
+							{ __( 'Cancel', 'newspack-blocks' ) }
+						</Button>
+					) }
+				</>
+			) }
+			{ productError && <p className="newspack-checkout-button__product-field__error">{ productError }</p> }
+		</div>
+	);
+}
+
+function CheckoutButtonEdit( props ) {
+	const { attributes, setAttributes, className } = props;
+	const { placeholder, style, text, product, price, variation, width } = attributes;
+
+	const [ productData, setProductData ] = useState( {} );
+	const [ variations, setVariations ] = useState( [] );
+	const [ nyp, setNYP ] = useState( false );
+
+	function handleProduct( data ) {
+		setProductData( data );
+		// Handle product variation data.
+		if ( data?.variations?.length ) {
+			setAttributes( { is_variable: true } );
+			apiFetch( { path: `/wc/v2/products/${ data.id }/variations?per_page=100` } )
+				.then( res => {
+					// Remove any variations without prices set.
+					const priced_variations = [];
+					res.forEach( re => {
+						if ( '' !== re.price || getNYP( re ).isNYP ) {
+							priced_variations.push( re );
+						}
+					} );
+					setVariations( priced_variations );
+				} )
+				.catch( () => setVariations( [] ) );
+		} else {
+			setAttributes( { is_variable: false } );
+			setVariations( [] );
+		}
+
+		// Handle NYP data.
+		if ( ! variation ) {
+			setNYP( getNYP( data ) );
+		}
+	}
+
+	useEffect( () => {
+		if ( variation ) {
+			apiFetch( { path: `/wc/v2/products/${ product }/variations/${ variation }` } )
+				.then( res => setNYP( getNYP( res ) ) )
+				.catch( () => setNYP( {} ) );
+		} else {
+			setNYP( getNYP( productData ) );
+		}
+	}, [ variation ] );
+
+	useEffect( () => {
+		if ( ! price && nyp?.suggestedPrice ) {
+			setAttributes( { price: nyp.suggestedPrice } );
+		}
+	}, [ nyp ] );
+
+	function setButtonText( newText ) {
+		// Remove anchor tags from button text content.
+		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
+	}
+
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<div
+				{ ...blockProps }
+				className={ classnames( blockProps.className, {
+					[ `wp-block-button` ]: true,
+					[ `has-custom-font-size` ]: blockProps.style.fontSize,
+					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+				} ) }
+			>
+				<RichText
+					aria-label={ __( 'Button text' ) }
+					placeholder={ placeholder || __( 'Add text…' ) }
+					value={ text }
+					onChange={ value => setButtonText( value ) }
+					withoutInteractiveFormatting
+					className={ classnames(
+						className,
+						'wp-block-button__link',
+						'wp-block-newspack-blocks-checkout-button__button',
+						colorProps.className,
+						borderProps.className,
+						{
+							// For backwards compatibility add style that isn't
+							// provided via block support.
+							'no-border-radius': style?.border?.radius === 0,
+						}
+					) }
+					style={ {
+						...borderProps.style,
+						...colorProps.style,
+						...spacingProps.style,
+					} }
+					identifier="text"
+				/>
+			</div>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'newspack-blocks' ) }>
+					<ProductControl
+						value={ product }
+						price={ price }
+						onChange={ value => setAttributes( { product: value, variation: '', price: '' } ) }
+						onProduct={ handleProduct }
+					>
+						{ productData?.variations?.length > 0 && (
+							<>
+								<CheckboxControl
+									label={ __( 'Allow the reader to select the variation before checkout.', 'newspack-blocks' ) }
+									checked={ ! variation }
+									onChange={ value =>
+										setAttributes( {
+											variation: value ? '' : variations[ 0 ].id.toString(),
+											price: '',
+										} )
+									}
+								/>
+								{ variations.length ? (
+									<SelectControl
+										label={ __( 'Variation', 'newspack-blocks' ) }
+										help={ __( 'Select the product variation to be added to cart.', 'newspack-blocks' ) }
+										value={ variation }
+										disabled={ ! variation }
+										options={ [
+											{ label: '--', value: '' },
+											...variations.map( item => ( {
+												label: getVariationName( item ),
+												value: item.id,
+											} ) ),
+										] }
+										onChange={ value => setAttributes( { variation: value.toString(), price: '' } ) }
+									/>
+								) : (
+									<Spinner />
+								) }
+							</>
+						) }
+					</ProductControl>
+					<WidthControl selectedWidth={ width } setAttributes={ setAttributes } />
+				</PanelBody>
+				<PanelBody title={ __( 'After purchase', 'newspack-blocks' ) }>
+					<RedirectAfterSuccess setAttributes={ setAttributes } attributes={ attributes } />
+				</PanelBody>
+				{ nyp?.isNYP && (
+					<PanelBody title={ __( 'Name Your Price', 'newspack-blocks' ) }>
+						<p>
+							{ __(
+								'This product has "Name Your Price" toggled on. You can set the custom price for this checkout.',
+								'newspack-blocks'
+							) }
+						</p>
+						<p>
+							<strong>{ __( 'Suggested price:', 'newspack-blocks' ) }</strong> { nyp.suggestedPrice || 0 }
+							{ nyp.minPrice && (
+								<>
+									<br />
+									<strong>{ __( 'Minimum price:', 'newspack-blocks' ) }</strong> { nyp.minPrice }
+								</>
+							) }
+							{ nyp.maxPrice && (
+								<>
+									<br />
+									<strong>{ __( 'Maximum price:', 'newspack-blocks' ) }</strong> { nyp.maxPrice }
+								</>
+							) }
+						</p>
+						<TextControl
+							type="number"
+							label={ __( 'Custom Price', 'newspack-blocks' ) }
+							placeholder={ nyp.suggestedPrice }
+							value={ price }
+							min={ parseFloat( nyp.minPrice ) || null }
+							max={ parseFloat( nyp.maxPrice ) || null }
+							onChange={ value => setAttributes( { price: value } ) }
+							__next40pxDefaultSize
+						/>
+					</PanelBody>
+				) }
+			</InspectorControls>
+		</>
+	);
+}
+
+export default CheckoutButtonEdit;

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

@@ -0,0 +1,67 @@
+@use "newspack-colors" as np-colors;
+
+.newspack-checkout-button {
+	&__product-field {
+		&__error {
+			color: np-colors.$error-500;
+			font-size: 0.9em;
+			margin-top: 0.5em;
+		}
+		/* Workaround for hard-coded help text in FormTokenField. */
+		.components-form-token-field__help {
+			display: none;
+		}
+		&__tokenfield {
+			position: relative;
+			.components-spinner {
+				position: absolute;
+				top: 12px;
+				right: 0;
+			}
+		}
+		.components-base-control {
+			margin: 0 0 8px;
+
+			&:last-of-type {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+
+.wp-block-newspack-blocks-checkout-button {
+	display: flex;
+
+	&.alignwide,
+	&.alignfull {
+		.wp-block-button__link {
+			width: 100%;
+		}
+	}
+	[data-align="center"] & {
+		flex-direction: column;
+
+		.wp-block-button__link {
+			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%;
+	}
+
+	&__button {
+		width: auto;
+	}
+}
+

package/src/blocks/checkout-button/editor.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name, settings } from '.';
+
+registerBlockType( name, settings );
+
+addFilter( 'blockEditor.useSetting.before', 'newspack-blocks/add-border-radius-support', ( value, path, clientId, blockName ) => {
+	if ( path === 'border.radius' && blockName === 'newspack-blocks/checkout-button' ) {
+		return true;
+	}
+	return value;
+} );

package/src/blocks/checkout-button/index.js

@@ -0,0 +1,32 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies
+ */
+import { button } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import deprecated from './deprecated';
+
+const { name } = metadata;
+
+// Name must be exported separately.
+export { name };
+
+export const settings = {
+	...metadata,
+	icon: {
+		src: button,
+		foreground: colors[ 'primary-400' ],
+	},
+	edit,
+	deprecated,
+	save: () => null, // to use view.php.
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './view.scss';

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

@@ -0,0 +1,178 @@
+<?php
+/**
+ * Checkout Button Block Front-End Functions
+ *
+ * @package Newspack_Blocks
+ */
+
+namespace Newspack_Blocks\Checkout_Button;
+
+use Newspack_Blocks;
+use Newspack_Blocks\Modal_Checkout;
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
+
+/**
+ * Register the block.
+ */
+function register_block() {
+	register_block_type_from_metadata(
+		__DIR__ . '/block.json',
+		[
+			'render_callback' => __NAMESPACE__ . '\\render_callback',
+		]
+	);
+}
+add_action( 'init', __NAMESPACE__ . '\\register_block' );
+
+/**
+ * Render the block.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string
+ */
+function render_callback( $attributes ) {
+	$product_id   = $attributes['product'] ?? '';
+	$variation_id = $attributes['variation'] ?? '';
+	$text         = $attributes['text'] ?? '';
+
+	if ( ( ! $product_id && ! $variation_id ) || ! $text ) {
+		return '';
+	}
+	$product_id = $attributes['product'];
+	if ( $attributes['is_variable'] && ! empty( $attributes['variation'] ) ) {
+		$product_id = $attributes['variation'];
+	}
+	\Newspack_Blocks\Modal_Checkout::enqueue_modal( $product_id );
+	\Newspack_Blocks::enqueue_view_assets( 'checkout-button' );
+
+	$background_color           = $attributes['backgroundColor'] ?? '';
+	$text_color                 = $attributes['textColor'] ?? '';
+	$gradient                   = $attributes['gradient'] ?? '';
+	$font_size                  = $attributes['fontSize'] ?? '';
+	$font_family                = $attributes['fontFamily'] ?? '';
+	$style                      = $attributes['style'] ?? [];
+	$text_align                 = $attributes['textAlign'] ?? '';
+	$width                      = $attributes['width'] ?? '';
+	$after_success_behavior     = $attributes['afterSuccessBehavior'] ?? '';
+	$after_success_button_label = $attributes['afterSuccessButtonLabel'] ?? '';
+	$after_success_url          = $attributes['afterSuccessURL'] ?? '';
+	$is_variable                = $attributes['is_variable'];
+
+	if ( $is_variable && $variation_id ) {
+		$product_id = $variation_id;
+	}
+
+	// Generate the button.
+	// Fall back to the legacy link-color storage path if textColor isn't set.
+	if ( ! $text_color && isset( $style['elements']['link']['color']['text'] ) ) {
+		$color = explode( '|', $style['elements']['link']['color']['text'] );
+		if ( isset( $color[2] ) ) {
+			$text_color = $color[2];
+		}
+	}
+	$button_styles = Newspack_Blocks::block_styles(
+		$attributes,
+		[
+			$width ? 'width:' . esc_attr( $width ) . '%;' : '',
+		]
+	);
+
+	$button_classes = Newspack_Blocks::block_classes(
+		'button',
+		$attributes,
+		[
+			'wp-block-button__link',
+			( $background_color || $gradient || isset( $style['color']['background'] ) || isset( $style['color']['gradient'] ) ) ? 'has-background' : '',
+			$background_color ? 'has-' . esc_attr( $background_color ) . '-background-color' : '',
+			$gradient ? 'has-' . esc_attr( $gradient ) . '-gradient-background' : '',
+			$font_size ? 'has-' . esc_attr( $font_size ) . '-font-size' : '',
+			$font_family ? 'has-' . esc_attr( $font_family ) . '-font-family' : '',
+			$text_align ? 'has-text-align-' . esc_attr( $text_align ) : '',
+			isset( $style['border']['radius'] ) && $style['border']['radius'] === 0 ? 'no-border-radius' : '',
+			( $text_color || isset( $style['color']['text'] ) ) ? 'has-text-color' : '',
+			$text_color ? 'has-' . esc_attr( $text_color ) . '-color' : '',
+		]
+	);
+
+	$button = sprintf(
+		'<button class="%1$s" style="%2$s" type="submit">%3$s</button>',
+		esc_attr( $button_classes ),
+		esc_attr( $button_styles ),
+		wp_kses_post( $text )
+	);
+
+	// Generate hidden fields for the form.
+	$hidden_fields = '<input type="hidden" name="newspack_checkout" value="1" />';
+	if ( ! Modal_Checkout::has_unsupported_payment_gateway() ) {
+		$hidden_fields .= $after_success_behavior ? '<input type="hidden" name="after_success_behavior" value="' . esc_attr( $after_success_behavior ) . '" />' : '';
+		$hidden_fields .= $after_success_button_label ? '<input type="hidden" name="after_success_button_label" value="' . esc_attr( $after_success_button_label ) . '" />' : '';
+		$hidden_fields .= $after_success_url ? '<input type="hidden" name="after_success_url" value="' . esc_attr( $after_success_url ) . '" />' : '';
+	}
+
+	ob_start();
+	/**
+	 * Fires when generating hidden fields for the checkout button.
+	 *
+	 * @param array $attributes Block attributes.
+	 */
+	do_action( 'newspack_blocks_checkout_button_hidden_fields', $attributes );
+	$hidden_fields .= ob_get_clean();
+
+	// Generate the form.
+	if ( function_exists( 'wc_get_product' ) ) {
+		$product = wc_get_product( $product_id );
+		if ( ! $product ) {
+			return '';
+		}
+
+		$price     = $product->get_price();
+		$min_price = '';
+		if ( ! empty( $attributes['price'] ) ) {
+			// Default to the price set in the block attributes.
+			$price = $attributes['price'];
+		} elseif ( class_exists( '\WC_Name_Your_Price_Helpers' ) && \WC_Name_Your_Price_Helpers::is_nyp( $product_id ) ) {
+			// Use suggested price if NYP is active and set for variation.
+			$price     = \WC_Name_Your_Price_Helpers::get_suggested_price( $product_id );
+			$min_price = \WC_Name_Your_Price_Helpers::get_minimum_price( $product_id );
+		}
+
+		// Check if the button should be output: it needs a price, or needs to be a product with variations to pick.
+		if ( $min_price && ! $price ) {
+			$price = $min_price;
+		}
+		if ( ( ! $is_variable && ! $variation_id && ! $price ) || ( $variation_id && ! $price ) ) {
+			return '';
+		}
+
+		$checkout_data = Checkout_Data::get_checkout_data( $product );
+
+		$form = sprintf(
+			'<form data-checkout="%1$s">%2$s %3$s</form>',
+			esc_attr( wp_json_encode( $checkout_data ) ),
+			$button,
+			$hidden_fields
+		);
+	} else {
+		$form = sprintf(
+			'<form>%1$s %2$s</form>',
+			$button,
+			$hidden_fields
+		);
+	}
+
+	$container_classes = Newspack_Blocks::block_classes(
+		'checkout-button',
+		$attributes,
+		[
+			'wp-block-button',
+			( $font_size || isset( $style['typography']['fontSize'] ) ) ? 'has-custom-font-size' : '',
+			$width ? 'has-custom-width wp-block-button__width-' . esc_attr( $width ) : '',
+		]
+	);
+	return sprintf(
+		'<div class="%1$s">%2$s</div>',
+		$container_classes,
+		$form
+	);
+}