From 79c2612239638b9d9c2f0defeabdf6b7586e550c Mon Sep 17 00:00:00 2001 From: dkoo Date: Tue, 16 Jan 2024 18:30:57 -0700 Subject: [PATCH 01/14] =?UTF-8?q?fix(donate):=20don=E2=80=99t=20require=20?= =?UTF-8?q?Name=20Your=20Price=20extension?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- includes/class-newspack-blocks.php | 10 +++++++ src/blocks/checkout-button/edit.js | 6 ++++- src/blocks/donate/edit/index.tsx | 15 +++++++---- ...s-newspack-blocks-donate-renderer-base.php | 27 ++++++++++--------- .../donate/styles/style-variations.scss | 12 +++++++++ 5 files changed, 51 insertions(+), 19 deletions(-) diff --git a/includes/class-newspack-blocks.php b/includes/class-newspack-blocks.php index e16601c20..22a9cbc33 100644 --- a/includes/class-newspack-blocks.php +++ b/includes/class-newspack-blocks.php @@ -231,6 +231,15 @@ function( $tax ) { return apply_filters( 'newspack_blocks_home_page_block_custom_taxonomies', $custom_taxonomies ); } + /** + * Check if the Name Your Price extension is available. + * + * @return bool + */ + public static function is_nyp_available() { + return class_exists( 'WC_Name_Your_Price_Helpers' ); + } + /** * Enqueue block scripts and styles for editor. */ @@ -259,6 +268,7 @@ public static function enqueue_block_editor_assets() { 'has_recaptcha' => class_exists( 'Newspack\Recaptcha' ) && \Newspack\Recaptcha::can_use_captcha(), 'recaptcha_url' => admin_url( 'admin.php?page=newspack-connections-wizard' ), 'custom_taxonomies' => self::get_custom_taxonomies(), + 'nyp_is_available' => self::is_nyp_available(), ]; if ( class_exists( 'WP_REST_Newspack_Author_List_Controller' ) ) { diff --git a/src/blocks/checkout-button/edit.js b/src/blocks/checkout-button/edit.js index 5d4bc5dc8..d532c7480 100644 --- a/src/blocks/checkout-button/edit.js +++ b/src/blocks/checkout-button/edit.js @@ -1,4 +1,6 @@ /* eslint-disable @wordpress/no-unsafe-wp-apis */ +/* globals newspack_blocks_data */ + /** * External dependencies */ @@ -47,7 +49,9 @@ function getVariationName( variation ) { function getNYP( product ) { return { - isNYP: product?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ), + isNYP: + newspack_blocks_data?.nyp_is_available && + 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, diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx index 10f2551ba..b2556de18 100644 --- a/src/blocks/donate/edit/index.tsx +++ b/src/blocks/donate/edit/index.tsx @@ -1,3 +1,5 @@ +/* globals newspack_blocks_data */ + /** * External dependencies */ @@ -153,7 +155,10 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { // Editor bug – initially, the default style is selected, but the class not applied. if ( className.indexOf( 'is-style' ) === -1 ) { - className = className + ' is-style-default'; + className += ' is-style-default'; + } + if ( ! newspack_blocks_data?.nyp_is_available ) { + className += ' wpbnbd--nyp-disabled'; } const getWrapperClassNames = ( classes: string[] = [] ) => classNames( @@ -401,18 +406,18 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { } /> - { window.newspack_blocks_data.supports_recaptcha && ( + { newspack_blocks_data.supports_recaptcha && (

{ sprintf( // translators: %s is either 'enabled' or 'disabled'. __( 'reCAPTCHA v3 is currently %s.', 'newspack' ), - window.newspack_blocks_data.has_recaptcha + newspack_blocks_data.has_recaptcha ? __( 'enabled', 'newspack' ) : __( 'disabled', 'newspack' ) ) }

- { ! window.newspack_blocks_data.has_recaptcha && ( + { ! newspack_blocks_data.has_recaptcha && (

{ __( "It's highly recommended that you enable reCAPTCHA v3 protection to prevent spambots from using this form!", @@ -421,7 +426,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {

) }

- + { __( 'Configure your reCAPTCHA settings.', 'newspack' ) }

diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php index 9d5809e95..801e66457 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php @@ -112,20 +112,21 @@ function ( $item ) { $classname = 'is-style-default'; } - $layout_version = ( $is_tiers_based ? 'tiers' : 'frequency' ); - $container_classnames = implode( - ' ', - [ - 'wp-block-newspack-blocks-donate', - 'wpbnbd', - 'wpbnbd--' . $layout_version . '-based', - 'wpbnbd--platform-' . $configuration['platform'], - $classname, - 'wpbnbd-frequencies--' . count( $configuration['frequencies'] ), - ] - ); - $configuration['container_classnames'] = $container_classnames; + $layout_version = ( $is_tiers_based ? 'tiers' : 'frequency' ); + $class_names = [ + 'wp-block-newspack-blocks-donate', + 'wpbnbd', + 'wpbnbd--' . $layout_version . '-based', + 'wpbnbd--platform-' . $configuration['platform'], + $classname, + 'wpbnbd-frequencies--' . count( $configuration['frequencies'] ), + ]; + + if ( ! Newspack_Blocks::is_nyp_available() ) { + $class_names[] = 'wpbnbd--nyp-disabled'; + } + $configuration['container_classnames'] = implode( ' ', $class_names ); $configuration['is_rendering_stripe_payment_form'] = false; if ( Newspack_Blocks::is_rendering_stripe_payment_form() ) { diff --git a/src/blocks/donate/styles/style-variations.scss b/src/blocks/donate/styles/style-variations.scss index 494ae75d0..941913d5c 100644 --- a/src/blocks/donate/styles/style-variations.scss +++ b/src/blocks/donate/styles/style-variations.scss @@ -167,6 +167,12 @@ width: calc( 100% + 2px ); } } + + @include mixins.media( mobile ) { + &.wpbnbd--nyp-disabled .frequencies input[type='radio']:checked ~ .tiers { + grid-template-columns: repeat( 3, 1fr ); + } + } } /* Minimal Style */ @@ -328,4 +334,10 @@ min-width: 50%; } } + + @include mixins.media( mobile ) { + &.wpbnbd--nyp-disabled .frequency input[type='radio']:checked ~ .tiers { + grid-template-columns: repeat( 3, 1fr ); + } + } } From db8797e6299f79ad2875d2cddf98ad1475df85e3 Mon Sep 17 00:00:00 2001 From: dkoo Date: Fri, 19 Jan 2024 13:21:12 -0700 Subject: [PATCH 02/14] feat(donate): force untiered and non-manual when NYP is available --- includes/class-modal-checkout.php | 24 +- includes/class-newspack-blocks.php | 6 +- src/blocks/checkout-button/edit.js | 2 +- .../donate/edit/FrequencyBasedLayout.tsx | 89 +++++-- src/blocks/donate/edit/index.tsx | 251 +++++++++--------- src/blocks/donate/frequency-based/style.scss | 5 + ...s-newspack-blocks-donate-renderer-base.php | 27 +- ...blocks-donate-renderer-frequency-based.php | 16 ++ ...ack-blocks-donate-renderer-tiers-based.php | 16 -- 9 files changed, 249 insertions(+), 187 deletions(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index bec59c382..6d795ea27 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -219,20 +219,18 @@ function ( $item ) { } /** Apply NYP custom price */ - if ( class_exists( 'WC_Name_Your_Price_Helpers' ) ) { - $is_product_nyp = \WC_Name_Your_Price_Helpers::is_nyp( $product_id ); - $price = filter_input( INPUT_GET, 'price', FILTER_SANITIZE_FULL_SPECIAL_CHARS ); - if ( $is_product_nyp ) { - if ( empty( $price ) ) { - $price = \WC_Name_Your_Price_Helpers::get_suggested_price( $product_id ); - } - $min_price = \WC_Name_Your_Price_Helpers::get_minimum_price( $product_id ); - $max_price = \WC_Name_Your_Price_Helpers::get_maximum_price( $product_id ); - $price = ! empty( $max_price ) ? min( $price, $max_price ) : $price; - $price = ! empty( $min_price ) ? max( $price, $min_price ) : $price; - - $cart_item_data['nyp'] = (float) \WC_Name_Your_Price_Helpers::standardize_number( $price ); + $is_product_nyp = \Newspack_Blocks::can_use_name_your_price() ? \WC_Name_Your_Price_Helpers::is_nyp( $product_id ) : false; + $price = filter_input( INPUT_GET, 'price', FILTER_SANITIZE_FULL_SPECIAL_CHARS ); + if ( $is_product_nyp ) { + if ( empty( $price ) ) { + $price = \WC_Name_Your_Price_Helpers::get_suggested_price( $product_id ); } + $min_price = \WC_Name_Your_Price_Helpers::get_minimum_price( $product_id ); + $max_price = \WC_Name_Your_Price_Helpers::get_maximum_price( $product_id ); + $price = ! empty( $max_price ) ? min( $price, $max_price ) : $price; + $price = ! empty( $min_price ) ? max( $price, $min_price ) : $price; + + $cart_item_data['nyp'] = (float) \WC_Name_Your_Price_Helpers::standardize_number( $price ); } /** diff --git a/includes/class-newspack-blocks.php b/includes/class-newspack-blocks.php index 22a9cbc33..f33757341 100644 --- a/includes/class-newspack-blocks.php +++ b/includes/class-newspack-blocks.php @@ -234,9 +234,9 @@ function( $tax ) { /** * Check if the Name Your Price extension is available. * - * @return bool + * @return bool True if available, false if not. */ - public static function is_nyp_available() { + public static function can_use_name_your_price() { return class_exists( 'WC_Name_Your_Price_Helpers' ); } @@ -268,7 +268,7 @@ public static function enqueue_block_editor_assets() { 'has_recaptcha' => class_exists( 'Newspack\Recaptcha' ) && \Newspack\Recaptcha::can_use_captcha(), 'recaptcha_url' => admin_url( 'admin.php?page=newspack-connections-wizard' ), 'custom_taxonomies' => self::get_custom_taxonomies(), - 'nyp_is_available' => self::is_nyp_available(), + 'can_use_name_your_price' => self::can_use_name_your_price(), ]; if ( class_exists( 'WP_REST_Newspack_Author_List_Controller' ) ) { diff --git a/src/blocks/checkout-button/edit.js b/src/blocks/checkout-button/edit.js index d532c7480..dfd27eaa3 100644 --- a/src/blocks/checkout-button/edit.js +++ b/src/blocks/checkout-button/edit.js @@ -50,7 +50,7 @@ function getVariationName( variation ) { function getNYP( product ) { return { isNYP: - newspack_blocks_data?.nyp_is_available && + 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, diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx index cd70edc42..423ec7371 100644 --- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx +++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx @@ -1,3 +1,5 @@ +/* globals newspack_blocks_data */ + /** * External dependencies */ @@ -65,8 +67,8 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = } }, [ attributes.defaultFrequency ] ); - const isRenderingStripePaymentForm = - window.newspack_blocks_data?.is_rendering_stripe_payment_form; + const isRenderingStripePaymentForm = newspack_blocks_data?.is_rendering_stripe_payment_form; + const canUseNameYourPrice = newspack_blocks_data?.can_use_name_your_price; const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency ); @@ -103,6 +105,17 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = ); + const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => { + switch ( frequencySlug ) { + case 'once': + return ''; + case 'month': + return __( ' per month', 'newspack-blocks' ); + case 'year': + return __( ' per year', 'newspack-blocks' ); + } + }; + // This code is fired on tab select and updates aria elements, tabindex states, and radio buttons const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' ); @@ -110,31 +123,57 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
{ availableFrequencies.map( renderTab ) }
- { availableFrequencies.map( frequencySlug => ( -
- { renderFrequencySelect( frequencySlug ) } -
- -
- { settings.currencySymbol } - + { availableFrequencies.map( frequencySlug => { + const untieredAmount = amounts[ frequencySlug ][ 3 ]; + return ( +
+ { renderFrequencySelect( frequencySlug ) } +
+ { canUseNameYourPrice ? ( + <> + +
+ { settings.currencySymbol } + +
+ + ) : ( + <> + + + + ) }
-
- ) ) } + ); + } ) }
); diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx index b2556de18..fd80f1d8d 100644 --- a/src/blocks/donate/edit/index.tsx +++ b/src/blocks/donate/edit/index.tsx @@ -143,21 +143,22 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { return } className="component-placeholder__align-center" />; } - const isTiered = attributes.manual ? attributes.tiered : settings.tiered; + const canUseNameYourPrice = newspack_blocks_data?.can_use_name_your_price; + const isManual = attributes.manual && canUseNameYourPrice; + const isTiered = isManual ? attributes.tiered : settings.tiered; const isTierBasedLayoutEnabled = isTiered && attributes.layoutOption === 'tiers'; - const amounts = attributes.manual ? attributes.amounts : settings.amounts; + const amounts = isManual ? attributes.amounts : settings.amounts; + const availableFrequencies = FREQUENCY_SLUGS.filter( slug => - attributes.manual - ? ! attributes.disabledFrequencies[ slug ] - : ! settings.disabledFrequencies[ slug ] + isManual ? ! attributes.disabledFrequencies[ slug ] : ! settings.disabledFrequencies[ slug ] ); // Editor bug – initially, the default style is selected, but the class not applied. if ( className.indexOf( 'is-style' ) === -1 ) { className += ' is-style-default'; } - if ( ! newspack_blocks_data?.nyp_is_available ) { + if ( ! canUseNameYourPrice ) { className += ' wpbnbd--nyp-disabled'; } const getWrapperClassNames = ( classes: string[] = [] ) => @@ -170,7 +171,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { `wpbnbd-frequencies--${ availableFrequencies.length }` ); - const minimumDonation = attributes.manual ? attributes.minimumDonation : settings.minimumDonation; + const minimumDonation = isManual ? attributes.minimumDonation : settings.minimumDonation; const displayedAmounts = { ...amounts }; Object.keys( amounts ).forEach( frequency => { const amountsWithMinimum = amounts[ frequency ].map( amount => @@ -260,126 +261,128 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { /> ) } - - setAttributes( { manual: ! attributes.manual } ) } - label={ __( 'Configure manually', 'newspack-blocks' ) } - /> - { attributes.manual ? ( - <> - setAttributes( { tiered: ! attributes.tiered } ) } - label={ __( 'Tiered', 'newspack-blocks' ) } - /> - { attributes.tiered ? ( - <> -
- { FREQUENCY_SLUGS.map( ( frequency: DonationFrequencySlug ) => { - const isFrequencyDisabled = attributes.disabledFrequencies[ frequency ]; - const disabledDisplayedFrequencyCount = Object.values( - pick( attributes.disabledFrequencies, FREQUENCY_SLUGS ) - ).filter( Boolean ).length; - const isOnlyOneFrequencyActive = - FREQUENCY_SLUGS.length - disabledDisplayedFrequencyCount === 1; - return ( - - { - setAttributes( { - disabledFrequencies: { - ...attributes.disabledFrequencies, - [ frequency ]: ! isFrequencyDisabled, - }, - } ); - } } - /> - { ! isFrequencyDisabled && ( -
- { amounts[ frequency ].reduce( - ( acc: boolean, suggestedAmount: number ) => - suggestedAmount < minimumDonation ? true : acc, - false - ) && renderMinAmountWarning() } + { canUseNameYourPrice && ( + + setAttributes( { manual: ! attributes.manual } ) } + label={ __( 'Configure manually', 'newspack-blocks' ) } + /> + { isManual ? ( + <> + setAttributes( { tiered: ! attributes.tiered } ) } + label={ __( 'Tiered', 'newspack-blocks' ) } + /> + { isTiered ? ( + <> +
+ { FREQUENCY_SLUGS.map( ( frequency: DonationFrequencySlug ) => { + const isFrequencyDisabled = attributes.disabledFrequencies[ frequency ]; + const disabledDisplayedFrequencyCount = Object.values( + pick( attributes.disabledFrequencies, FREQUENCY_SLUGS ) + ).filter( Boolean ).length; + const isOnlyOneFrequencyActive = + FREQUENCY_SLUGS.length - disabledDisplayedFrequencyCount === 1; + return ( + + { + setAttributes( { + disabledFrequencies: { + ...attributes.disabledFrequencies, + [ frequency ]: ! isFrequencyDisabled, + }, + } ); + } } + /> + { ! isFrequencyDisabled && ( +
+ { amounts[ frequency ].reduce( + ( acc: boolean, suggestedAmount: number ) => + suggestedAmount < minimumDonation ? true : acc, + false + ) && renderMinAmountWarning() } - { amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => { - // The "Other" tier is no longer customizable and should always render empty for tiered layout. - if ( tierIndex === 3 ) { - return null; - } - return ( - - ); - } ) } -
- ) } - - ); - } ) } -
- - ) : ( -
-
- { FREQUENCY_SLUGS.reduce( - ( acc: boolean, frequencySlug: DonationFrequencySlug ) => - amounts[ frequencySlug ][ 3 ] < attributes.minimumDonation ? true : acc, - false - ) && renderMinAmountWarning() } + { amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => { + // The "Other" tier is no longer customizable and should always render empty for tiered layout. + if ( tierIndex === 3 ) { + return null; + } + return ( + + ); + } ) } +
+ ) } + + ); + } ) } +
+ + ) : ( +
+
+ { FREQUENCY_SLUGS.reduce( + ( acc: boolean, frequencySlug: DonationFrequencySlug ) => + amounts[ frequencySlug ][ 3 ] < attributes.minimumDonation ? true : acc, + false + ) && renderMinAmountWarning() } - { FREQUENCY_SLUGS.map( ( frequencySlug: DonationFrequencySlug ) => ( - - ) ) } + { FREQUENCY_SLUGS.map( ( frequencySlug: DonationFrequencySlug ) => ( + + ) ) } +
-
- ) } - setAttributes( { minimumDonation: value } ) } - value={ attributes.minimumDonation } - /> - - ) : ( -

- { __( - 'The Donate Block allows you to collect donations from readers. The fields are automatically defined based on your donation settings.', - 'newspack-blocks' - ) } -
-
- - { __( 'Edit donation settings', 'newspack-blocks' ) } - -

- ) } - + ) } + setAttributes( { minimumDonation: value } ) } + value={ attributes.minimumDonation } + /> + + ) : ( +

+ { __( + 'The Donate Block allows you to collect donations from readers. The fields are automatically defined based on your donation settings.', + 'newspack-blocks' + ) } +
+
+ + { __( 'Edit donation settings', 'newspack-blocks' ) } + +

+ ) } + + ) } $multiplied_amounts, ]; } - if ( isset( $attributes['tiered'] ) ) { - $configuration['tiered'] = $attributes['tiered']; - } + $configuration['tiered'] = $attributes['tiered'] && Newspack_Blocks::can_use_name_your_price(); if ( isset( $attributes['amounts'] ) && ! empty( $attributes['amounts'] ) ) { $configuration['amounts'] = $attributes['amounts']; } @@ -122,7 +139,7 @@ function ( $item ) { 'wpbnbd-frequencies--' . count( $configuration['frequencies'] ), ]; - if ( ! Newspack_Blocks::is_nyp_available() ) { + if ( ! Newspack_Blocks::can_use_name_your_price() ) { $class_names[] = 'wpbnbd--nyp-disabled'; } diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php index 17c5608a5..52feefda6 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php @@ -154,6 +154,7 @@ class='wp-block-newspack-blocks-donate__frequency frequency' >
+
+ + -untiered-input' + checked + /> + +
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php index 52b76f83d..b36790511 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php @@ -13,22 +13,6 @@ * Renders the tiers-based Donate block. */ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate_Renderer_Base { - /** - * Get frequency label. - * - * @param string $frequency_slug Frequency slug. - */ - private static function get_frequency_label( $frequency_slug ) { - switch ( $frequency_slug ) { - case 'once': - return ' ' . __( 'once', 'newspack-blocks' ); - case 'month': - return ' ' . __( 'per month', 'newspack-blocks' ); - case 'year': - return ' ' . __( 'per year', 'newspack-blocks' ); - } - } - /** * Get displayed amounts. * From c7c5b5cc6638c1ef0d8f10f87c2ce6f3823533c7 Mon Sep 17 00:00:00 2001 From: dkoo Date: Fri, 19 Jan 2024 14:03:34 -0700 Subject: [PATCH 03/14] fix: typescript lint errors --- src/blocks/donate/edit/FrequencyBasedLayout.tsx | 7 +++---- src/blocks/donate/edit/index.tsx | 12 +++++------- src/types/index.d.ts | 5 +++-- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx index 423ec7371..8d4eb2472 100644 --- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx +++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx @@ -1,5 +1,3 @@ -/* globals newspack_blocks_data */ - /** * External dependencies */ @@ -67,8 +65,9 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = } }, [ attributes.defaultFrequency ] ); - const isRenderingStripePaymentForm = newspack_blocks_data?.is_rendering_stripe_payment_form; - const canUseNameYourPrice = newspack_blocks_data?.can_use_name_your_price; + const isRenderingStripePaymentForm = + window.newspack_blocks_data?.is_rendering_stripe_payment_form; + const canUseNameYourPrice = window.newspack_blocks_data?.can_use_name_your_price; const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency ); diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx index fd80f1d8d..3ddf5c03b 100644 --- a/src/blocks/donate/edit/index.tsx +++ b/src/blocks/donate/edit/index.tsx @@ -1,5 +1,3 @@ -/* globals newspack_blocks_data */ - /** * External dependencies */ @@ -143,7 +141,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { return } className="component-placeholder__align-center" />; } - const canUseNameYourPrice = newspack_blocks_data?.can_use_name_your_price; + const canUseNameYourPrice = window.newspack_blocks_data?.can_use_name_your_price; const isManual = attributes.manual && canUseNameYourPrice; const isTiered = isManual ? attributes.tiered : settings.tiered; const isTierBasedLayoutEnabled = isTiered && attributes.layoutOption === 'tiers'; @@ -409,18 +407,18 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { } /> - { newspack_blocks_data.supports_recaptcha && ( + { window.newspack_blocks_data.supports_recaptcha && (

{ sprintf( // translators: %s is either 'enabled' or 'disabled'. __( 'reCAPTCHA v3 is currently %s.', 'newspack' ), - newspack_blocks_data.has_recaptcha + window.newspack_blocks_data.has_recaptcha ? __( 'enabled', 'newspack' ) : __( 'disabled', 'newspack' ) ) }

- { ! newspack_blocks_data.has_recaptcha && ( + { ! window.newspack_blocks_data.has_recaptcha && (

{ __( "It's highly recommended that you enable reCAPTCHA v3 protection to prevent spambots from using this form!", @@ -429,7 +427,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {

) }

- + { __( 'Configure your reCAPTCHA settings.', 'newspack' ) }

diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 552f44dd4..b43c2bf8f 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -9,6 +9,7 @@ declare global { supports_recaptcha: boolean; has_recaptcha: boolean; recaptcha_url: string; + can_use_name_your_price: boolean; }; grecaptcha: any; newspackReaderActivation: { @@ -44,7 +45,7 @@ declare global { clientId: string; attributes: { // eslint-disable-next-line @typescript-eslint/no-explicit-any - [ key: string ]: any; + [key: string]: any; }; innerBlocks: Block[]; }; @@ -54,4 +55,4 @@ declare global { }; } -export {}; +export { }; From 9f528b8692a2c76a62e6dfe2a043358cf866d232 Mon Sep 17 00:00:00 2001 From: Derrick Koo Date: Thu, 25 Jan 2024 14:56:58 -0700 Subject: [PATCH 04/14] Update src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php Co-authored-by: Miguel Peixe --- .../frontend/class-newspack-blocks-donate-renderer-base.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php index 560304076..549b3a964 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php @@ -53,7 +53,7 @@ public static function get_configuration( $attributes ) { $is_manual = Newspack_Blocks::can_use_name_your_price() && $attributes['manual']; /* If block is in "manual" mode, override certain state properties with values stored in attributes */ - if ( $is_manual ?? false ) { + if ( $is_manual ) { // Migrate old attributes. if ( empty( $attributes['amounts'] ) && isset( $attributes['suggestedAmounts'] ) ) { $other_amount = $configuration['amounts']['month'][3]; From a985f00b591d51e5c504e8ce6695e62a31fa0734 Mon Sep 17 00:00:00 2001 From: dkoo Date: Fri, 26 Jan 2024 11:33:48 -0700 Subject: [PATCH 05/14] fix: undefined array key warning --- .../frontend/class-newspack-blocks-donate-renderer-base.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php index 549b3a964..a0c5340be 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php @@ -50,7 +50,7 @@ public static function get_configuration( $attributes ) { $configuration['defaultFrequency'] = $attributes['defaultFrequency']; - $is_manual = Newspack_Blocks::can_use_name_your_price() && $attributes['manual']; + $is_manual = Newspack_Blocks::can_use_name_your_price() && ! empty( $attributes['manual'] ); /* If block is in "manual" mode, override certain state properties with values stored in attributes */ if ( $is_manual ) { From 308181d5f63bb0800e5be61cb6145d3d77c60e79 Mon Sep 17 00:00:00 2001 From: dkoo Date: Fri, 26 Jan 2024 14:36:33 -0700 Subject: [PATCH 06/14] fix: hide layout options if NYP not available --- src/blocks/donate/edit/index.tsx | 40 +++++++++++++++++--------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx index c73d15395..e7aa9396d 100644 --- a/src/blocks/donate/edit/index.tsx +++ b/src/blocks/donate/edit/index.tsx @@ -219,25 +219,27 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => { -
- { LAYOUT_OPTIONS.map( ( { label, key } ) => { - const isSelected = - key === 'tiers' ? isTierBasedLayoutEnabled : ! isTierBasedLayoutEnabled; - return ( - - ); - } ) } -
- { ! isTiered && ( + { canUseNameYourPrice && ( +
+ { LAYOUT_OPTIONS.map( ( { label, key } ) => { + const isSelected = + key === 'tiers' ? isTierBasedLayoutEnabled : ! isTierBasedLayoutEnabled; + return ( + + ); + } ) } +
+ ) } + { canUseNameYourPrice && ! isTiered && ( { __( 'Tiers layout is disabled if the block is set to render untiered.', From 37010689c6fbdb18e7f76761488de7c92a60fcfe Mon Sep 17 00:00:00 2001 From: dkoo Date: Mon, 29 Jan 2024 17:38:36 -0700 Subject: [PATCH 07/14] fix: make amount + frequency label translatable --- .../donate/edit/FrequencyBasedLayout.tsx | 25 ++++++------- src/blocks/donate/edit/TierBasedLayout.tsx | 30 ++++++---------- ...s-newspack-blocks-donate-renderer-base.php | 33 ++++++++++++++++- ...blocks-donate-renderer-frequency-based.php | 2 +- ...ack-blocks-donate-renderer-tiers-based.php | 3 +- src/blocks/donate/styles/view.scss | 13 +++++++ src/blocks/donate/utils.ts | 35 +++++++++++++++++++ 7 files changed, 102 insertions(+), 39 deletions(-) diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx index fdbaeaa86..4b44c88e0 100644 --- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx +++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx @@ -14,7 +14,7 @@ import { RichText } from '@wordpress/block-editor'; * Internal dependencies */ import { AmountValueInput } from './components'; -import { getColorForContrast } from '../utils'; +import { getColorForContrast, getFrequencyLabel } from '../utils'; import { FREQUENCIES } from '../consts'; import type { ComponentProps, DonationFrequencySlug } from '../types'; @@ -89,17 +89,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = ); - const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => { - switch ( frequencySlug ) { - case 'once': - return ''; - case 'month': - return __( ' per month', 'newspack-blocks' ); - case 'year': - return __( ' per year', 'newspack-blocks' ); - } - }; - // This code is fired on tab select and updates aria elements, tabindex states, and radio buttons const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' ); @@ -148,9 +137,15 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = className="tier-select-label tier-label" htmlFor={ `newspack-${ frequencySlug }-${ uid }-untiered-input` } > - { settings.currencySymbol + - untieredAmount.toFixed( 2 ).replace( /\.?0*$/, '' ) + - getFrequencyLabel( frequencySlug ) } +
) } diff --git a/src/blocks/donate/edit/TierBasedLayout.tsx b/src/blocks/donate/edit/TierBasedLayout.tsx index a699d12ef..0d886f7ba 100644 --- a/src/blocks/donate/edit/TierBasedLayout.tsx +++ b/src/blocks/donate/edit/TierBasedLayout.tsx @@ -15,20 +15,9 @@ import type { DonateBlockAttributes, TierBasedOptionValue, } from '../types'; -import { getColorForContrast } from '../utils'; +import { getColorForContrast, getFrequencyLabel } from '../utils'; import { FREQUENCIES, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX } from '../consts'; -const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => { - switch ( frequencySlug ) { - case 'once': - return __( 'once', 'newspack-blocks' ); - case 'month': - return __( 'per month', 'newspack-blocks' ); - case 'year': - return __( 'per year', 'newspack-blocks' ); - } -}; - const TierBasedLayout = ( props: ComponentProps ) => { const { amounts, availableFrequencies, attributes } = props; const [ currentFrequency, setCurrencyFrequency ] = useState( availableFrequencies[ 0 ] ); @@ -108,14 +97,15 @@ const TierBasedLayout = ( props: ComponentProps ) => {
-

- { props.settings.currencySymbol } - { amount } -

- - { ' ' } - { getFrequencyLabel( currentFrequency ) } - +
$100 + * per month + */ + $formatted_amount = sprintf( + _x( // phpcs:ignore WordPress.WP.I18n.MissingTranslatorsComment + '%1$s %2$s', + '%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.', + 'newspack-blocks' + ), + '

' . $currency_symbol . $amount . '

', + '' . self::get_frequency_label( $frequency, $hide_once_label ) . '' + ); + + return $formatted_amount; + } + /** * Get configuration, based on block attributes and global settings. * diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php index e9e3aa461..ab60d4a27 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php @@ -180,7 +180,7 @@ class='donate-label' class='tier-select-label tier-label' for='newspack--untiered-input' > - +
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php index 1c9d3695d..5bbc68cfa 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php @@ -61,8 +61,7 @@ private static function render_single_tier( $attributes, $index, $amount, $selec data-amount="" data-tier-index="" > -

- + diff --git a/src/blocks/donate/styles/view.scss b/src/blocks/donate/styles/view.scss index 15128d607..1927a52f3 100644 --- a/src/blocks/donate/styles/view.scss +++ b/src/blocks/donate/styles/view.scss @@ -19,6 +19,19 @@ } } + &__tiers { + &__amount { + margin-bottom: 16px; + &__number { + display: inline; + font-size: 29px; + } + &__frequency { + font-size: 13px; + } + } + } + mark { background-color: transparent; } diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index f2ad326c0..83c76d128 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -1,3 +1,4 @@ +import { __, _x, sprintf } from '@wordpress/i18n'; import type { DonationFrequencySlug } from './types'; const hexToRGB = ( hex: string ): number[] => { @@ -48,3 +49,37 @@ export const getMigratedAmount = ( untieredAmount * multiplier, ]; }; + +export const getFrequencyLabel = ( + currencySymbol: string, + amount: string, + frequencySlug: DonationFrequencySlug +) => { + let frequencyLabel = ''; + switch ( frequencySlug ) { + case 'once': + frequencyLabel = __( 'once', 'newspack-blocks' ); + break; + case 'month': + frequencyLabel = __( 'per month', 'newspack-blocks' ); + break; + case 'year': + frequencyLabel = __( 'per year', 'newspack-blocks' ); + break; + } + + /* + * Translators: This formatted HTML string displays the amount and frequency of a donation. The relative order may depend on the language being translated to. + * Example string:

$100

+ * per month + */ + return sprintf( + _x( + '%1$s %2$s', + '%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.', + 'newspack-blocks' + ), + `

${ currencySymbol }${ amount }

`, + `${ frequencyLabel }` + ); +}; From 42e145bb855ed28e0ef2c9974d28f3682127962b Mon Sep 17 00:00:00 2001 From: dkoo Date: Mon, 29 Jan 2024 17:40:31 -0700 Subject: [PATCH 08/14] chore: remove unused variables --- includes/class-modal-checkout.php | 5 ++--- .../frontend/class-newspack-blocks-donate-renderer-base.php | 4 +--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index 6d795ea27..b04296e56 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -219,9 +219,8 @@ function ( $item ) { } /** Apply NYP custom price */ - $is_product_nyp = \Newspack_Blocks::can_use_name_your_price() ? \WC_Name_Your_Price_Helpers::is_nyp( $product_id ) : false; - $price = filter_input( INPUT_GET, 'price', FILTER_SANITIZE_FULL_SPECIAL_CHARS ); - if ( $is_product_nyp ) { + $price = filter_input( INPUT_GET, 'price', FILTER_SANITIZE_FULL_SPECIAL_CHARS ); + if ( \Newspack_Blocks::can_use_name_your_price() ? \WC_Name_Your_Price_Helpers::is_nyp( $product_id ) : false ) { if ( empty( $price ) ) { $price = \WC_Name_Your_Price_Helpers::get_suggested_price( $product_id ); } diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php index 78972b8aa..2063591fb 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php @@ -81,10 +81,8 @@ public static function get_configuration( $attributes ) { $configuration['defaultFrequency'] = $attributes['defaultFrequency']; - $is_manual = Newspack_Blocks::can_use_name_your_price() && ! empty( $attributes['manual'] ); - /* If block is in "manual" mode, override certain state properties with values stored in attributes */ - if ( $is_manual ) { + if ( Newspack_Blocks::can_use_name_your_price() && ! empty( $attributes['manual'] ) ) { // Migrate old attributes. if ( empty( $attributes['amounts'] ) && isset( $attributes['suggestedAmounts'] ) ) { $other_amount = $configuration['amounts']['month'][3]; From 3a15ae5228b9fe26905eaf151c4c45551a84670d Mon Sep 17 00:00:00 2001 From: dkoo Date: Mon, 29 Jan 2024 17:43:36 -0700 Subject: [PATCH 09/14] fix: eslint errors --- src/blocks/donate/edit/TierBasedLayout.tsx | 7 +------ src/blocks/donate/utils.ts | 1 + 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/blocks/donate/edit/TierBasedLayout.tsx b/src/blocks/donate/edit/TierBasedLayout.tsx index 0d886f7ba..a6000efa3 100644 --- a/src/blocks/donate/edit/TierBasedLayout.tsx +++ b/src/blocks/donate/edit/TierBasedLayout.tsx @@ -9,12 +9,7 @@ import classNames from 'classnames'; /** * Internal dependencies */ -import type { - ComponentProps, - DonationFrequencySlug, - DonateBlockAttributes, - TierBasedOptionValue, -} from '../types'; +import type { ComponentProps, DonateBlockAttributes, TierBasedOptionValue } from '../types'; import { getColorForContrast, getFrequencyLabel } from '../utils'; import { FREQUENCIES, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX } from '../consts'; diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index 83c76d128..cd6048b0b 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -74,6 +74,7 @@ export const getFrequencyLabel = ( * per month */ return sprintf( + // eslint-disable-next-line @wordpress/i18n-translator-comments _x( '%1$s %2$s', '%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.', From 5f9479a5152ecca9b7f62dcf03d612e12b856932 Mon Sep 17 00:00:00 2001 From: dkoo Date: Wed, 31 Jan 2024 16:55:26 -0700 Subject: [PATCH 10/14] refactor: use wc and wcs methods to get formatted price --- includes/class-newspack-blocks.php | 40 +++++++++++++++ .../donate/edit/FrequencyBasedLayout.tsx | 1 - src/blocks/donate/edit/TierBasedLayout.tsx | 1 - ...s-newspack-blocks-donate-renderer-base.php | 29 ----------- ...blocks-donate-renderer-frequency-based.php | 2 +- ...ack-blocks-donate-renderer-tiers-based.php | 4 +- src/blocks/donate/styles/view.scss | 16 +++--- src/blocks/donate/tiers-based/style.scss | 7 --- src/blocks/donate/utils.ts | 51 +++++++++---------- 9 files changed, 72 insertions(+), 79 deletions(-) diff --git a/includes/class-newspack-blocks.php b/includes/class-newspack-blocks.php index ab3a9a695..34949e45c 100644 --- a/includes/class-newspack-blocks.php +++ b/includes/class-newspack-blocks.php @@ -267,6 +267,7 @@ public static function enqueue_block_editor_assets() { 'recaptcha_url' => admin_url( 'admin.php?page=newspack-connections-wizard' ), 'custom_taxonomies' => self::get_custom_taxonomies(), 'can_use_name_your_price' => self::can_use_name_your_price(), + 'tier_amounts_template' => self::get_formatted_amount(), ]; if ( class_exists( 'WP_REST_Newspack_Author_List_Controller' ) ) { @@ -1538,5 +1539,44 @@ public static function get_sanitized_image_attributes() { ], ]; } + + /** + * Get a formatted HTML string containing amount and frequency of a donation. + * + * @param float $amount Amount. + * @param string $frequency Frequency. + * @param bool $hide_once_label Whether to hide the "once" label. + * + * @return string + */ + public static function get_formatted_amount( $amount = 0, $frequency = 'day', $hide_once_label = false ) { + if ( ! function_exists( 'wcs_price_string' ) ) { + return \wc_price( $amount ); + } + $price_args = [ + 'recurring_amount' => $amount, + 'subscription_period' => 'once' === $frequency ? 'day' : $frequency, + ]; + $wc_formatted_amount = \wcs_price_string( $price_args ); + + // A '0' value means we want a placeholder string to replace in the editor. + if ( 0 === $amount ) { + preg_match( '/<\/span>(.*)<\/bdi>/', $wc_formatted_amount, $matches ); + if ( ! empty( $matches[1] ) ) { + $wc_formatted_amount = str_replace( $matches[1], 'AMOUNT_PLACEHOLDER', $wc_formatted_amount ); + } + } + + // A 'day' frequency means we want a placeholder string to replace in the editor. + if ( 'day' === $frequency ) { + $wc_formatted_amount = preg_replace( '/ \/ ?.*/', 'FREQUENCY_PLACEHOLDER', $wc_formatted_amount ); + } elseif ( 'once' === $frequency ) { + $once_label = $hide_once_label ? '' : __( ' once', 'newspack-blocks' ); + $wc_formatted_amount = preg_replace( '/ \/ ?.*/', $once_label, $wc_formatted_amount ); + } + $wc_formatted_amount = str_replace( ' / ', __( ' per ', 'newspack-blocks' ), $wc_formatted_amount ); + + return '' . $wc_formatted_amount . ''; + } } Newspack_Blocks::init(); diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx index 4b44c88e0..b3970b98e 100644 --- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx +++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx @@ -140,7 +140,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
{
$100 - * per month - */ - $formatted_amount = sprintf( - _x( // phpcs:ignore WordPress.WP.I18n.MissingTranslatorsComment - '%1$s %2$s', - '%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.', - 'newspack-blocks' - ), - '

' . $currency_symbol . $amount . '

', - '' . self::get_frequency_label( $frequency, $hide_once_label ) . '' - ); - - return $formatted_amount; - } - /** * Get configuration, based on block attributes and global settings. * diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php index ab60d4a27..9f6de96b5 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php @@ -180,7 +180,7 @@ class='donate-label' class='tier-select-label tier-label' for='newspack--untiered-input' > - +
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php index 5bbc68cfa..db0db5a9f 100644 --- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php +++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php @@ -61,7 +61,7 @@ private static function render_single_tier( $attributes, $index, $amount, $selec data-amount="" data-tier-index="" > - + @@ -146,7 +146,7 @@ class="wpbnbd__button $amount ) : ?>
diff --git a/src/blocks/donate/styles/view.scss b/src/blocks/donate/styles/view.scss index 1927a52f3..d46dd9dd0 100644 --- a/src/blocks/donate/styles/view.scss +++ b/src/blocks/donate/styles/view.scss @@ -19,16 +19,12 @@ } } - &__tiers { - &__amount { - margin-bottom: 16px; - &__number { - display: inline; - font-size: 29px; - } - &__frequency { - font-size: 13px; - } + &__tiers__amount__value { + font-size: 13px; + .woocommerce-Price-amount { + display: inline; + font-size: 29px; + font-weight: 700; } } diff --git a/src/blocks/donate/tiers-based/style.scss b/src/blocks/donate/tiers-based/style.scss index 8251d89ed..d992e3ab5 100644 --- a/src/blocks/donate/tiers-based/style.scss +++ b/src/blocks/donate/tiers-based/style.scss @@ -99,13 +99,6 @@ } &__amount { margin-bottom: 16px; - &__number { - display: inline; - font-size: 29px; - } - &__frequency { - font-size: 13px; - } } button[type='submit'], .submit-button { diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index cd6048b0b..ed551480c 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -1,3 +1,5 @@ +/* globals newspack_blocks_data */ + import { __, _x, sprintf } from '@wordpress/i18n'; import type { DonationFrequencySlug } from './types'; @@ -51,36 +53,29 @@ export const getMigratedAmount = ( }; export const getFrequencyLabel = ( - currencySymbol: string, amount: string, - frequencySlug: DonationFrequencySlug + frequencySlug: DonationFrequencySlug, + hideOnceLabel = false ) => { - let frequencyLabel = ''; - switch ( frequencySlug ) { - case 'once': - frequencyLabel = __( 'once', 'newspack-blocks' ); - break; - case 'month': - frequencyLabel = __( 'per month', 'newspack-blocks' ); - break; - case 'year': - frequencyLabel = __( 'per year', 'newspack-blocks' ); - break; + const template = newspack_blocks_data?.tier_amounts_template; + + if ( ! template ) { + return ''; } - /* - * Translators: This formatted HTML string displays the amount and frequency of a donation. The relative order may depend on the language being translated to. - * Example string:

$100

- * per month - */ - return sprintf( - // eslint-disable-next-line @wordpress/i18n-translator-comments - _x( - '%1$s %2$s', - '%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.', - 'newspack-blocks' - ), - `

${ currencySymbol }${ amount }

`, - `${ frequencyLabel }` - ); + const frequency = + // eslint-disable-next-line no-nested-ternary + frequencySlug === 'once' + ? hideOnceLabel + ? '' + : __( ' once', 'newspack-blocks' ) + : sprintf( + // Translators: %s is the frequency (e.g. per month, per year). + _x( ' per %s', 'per `Frequency`', 'newspack-blocks' ), + frequencySlug + ); + + return template + .replace( 'AMOUNT_PLACEHOLDER', amount ) + .replace( 'FREQUENCY_PLACEHOLDER', frequency ); }; From 977db4b18e5e9196a63cd5303bf646ae54dbb1e8 Mon Sep 17 00:00:00 2001 From: dkoo Date: Wed, 31 Jan 2024 16:59:08 -0700 Subject: [PATCH 11/14] fix: add missing TS type --- src/blocks/donate/utils.ts | 2 +- src/types/index.d.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index ed551480c..7f3bb5006 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -57,7 +57,7 @@ export const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug, hideOnceLabel = false ) => { - const template = newspack_blocks_data?.tier_amounts_template; + const template = window.newspack_blocks_data?.tier_amounts_template; if ( ! template ) { return ''; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index d1c516006..e6af0fc8d 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -9,6 +9,7 @@ declare global { has_recaptcha: boolean; recaptcha_url: string; can_use_name_your_price: boolean; + tier_amounts_template: string; }; grecaptcha: any; newspackReaderActivation: { From 2b653710e076978c9f98891d2118bf6b05e70831 Mon Sep 17 00:00:00 2001 From: dkoo Date: Wed, 31 Jan 2024 17:40:14 -0700 Subject: [PATCH 12/14] fix: add missing TS type --- src/blocks/donate/utils.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index 7f3bb5006..b851dcee8 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -1,5 +1,3 @@ -/* globals newspack_blocks_data */ - import { __, _x, sprintf } from '@wordpress/i18n'; import type { DonationFrequencySlug } from './types'; From 5b8470cd35fdc1d24113ebb60ebeb220dbbc622c Mon Sep 17 00:00:00 2001 From: dkoo Date: Mon, 5 Feb 2024 16:54:25 -0700 Subject: [PATCH 13/14] fix: avoid NaN with empty number inputs --- src/blocks/donate/edit/FrequencyBasedLayout.tsx | 5 +---- src/blocks/donate/edit/TierBasedLayout.tsx | 5 +---- src/blocks/donate/utils.ts | 6 ++++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx index b3970b98e..0a3305df5 100644 --- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx +++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx @@ -139,10 +139,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) = >
diff --git a/src/blocks/donate/edit/TierBasedLayout.tsx b/src/blocks/donate/edit/TierBasedLayout.tsx index fb8a3d841..e4b72affb 100644 --- a/src/blocks/donate/edit/TierBasedLayout.tsx +++ b/src/blocks/donate/edit/TierBasedLayout.tsx @@ -94,10 +94,7 @@ const TierBasedLayout = ( props: ComponentProps ) => {
diff --git a/src/blocks/donate/utils.ts b/src/blocks/donate/utils.ts index b851dcee8..917615aa9 100644 --- a/src/blocks/donate/utils.ts +++ b/src/blocks/donate/utils.ts @@ -51,7 +51,7 @@ export const getMigratedAmount = ( }; export const getFrequencyLabel = ( - amount: string, + amount: number, frequencySlug: DonationFrequencySlug, hideOnceLabel = false ) => { @@ -61,6 +61,8 @@ export const getFrequencyLabel = ( return ''; } + const formattedAmount = ( amount || 0 ).toFixed( 2 ).replace( /\.?0*$/, '' ); + const frequency = // eslint-disable-next-line no-nested-ternary frequencySlug === 'once' @@ -74,6 +76,6 @@ export const getFrequencyLabel = ( ); return template - .replace( 'AMOUNT_PLACEHOLDER', amount ) + .replace( 'AMOUNT_PLACEHOLDER', formattedAmount ) .replace( 'FREQUENCY_PLACEHOLDER', frequency ); }; From 9f041dbd8011f4db39c34f6ee362863ebb5dffea Mon Sep 17 00:00:00 2001 From: dkoo Date: Tue, 6 Feb 2024 11:18:22 -0700 Subject: [PATCH 14/14] fix: show minimum suggestion warning for null values --- src/blocks/donate/edit/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx index e7aa9396d..1641b5aa0 100644 --- a/src/blocks/donate/edit/index.tsx +++ b/src/blocks/donate/edit/index.tsx @@ -304,7 +304,9 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
{ amounts[ frequency ].reduce( ( acc: boolean, suggestedAmount: number ) => - suggestedAmount < minimumDonation ? true : acc, + ! suggestedAmount || suggestedAmount < minimumDonation + ? true + : acc, false ) && renderMinAmountWarning() } @@ -341,7 +343,10 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
{ FREQUENCY_SLUGS.reduce( ( acc: boolean, frequencySlug: DonationFrequencySlug ) => - amounts[ frequencySlug ][ 3 ] < attributes.minimumDonation ? true : acc, + ! amounts[ frequencySlug ][ 3 ] || + amounts[ frequencySlug ][ 3 ] < attributes.minimumDonation + ? true + : acc, false ) && renderMinAmountWarning() }