Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make default payment block plan names dynamic #25397

Merged
merged 3 commits into from
Aug 5, 2022
Merged

Make default payment block plan names dynamic #25397

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
765a598
Make default payment block plan names dynamic
dsas Aug 5, 2022
c88a579
changelog
dsas Aug 5, 2022
b81ac9c
Merge branch 'trunk' into update/payment-button-product-names
mmtr Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-payment-button-product-names
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: enhancement

When adding a payment plan, the plan name field will update according to the other options selected, unless it's already been modified.
21 changes: 17 additions & 4 deletions ...ins/jetpack/extensions/shared/components/product-management-controls/inspector-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { lock } from '@wordpress/icons';
import { useEffect } from 'react';
import { store as membershipProductsStore } from '../../../store/membership-products';
import { CURRENCY_OPTIONS } from '../../currencies';
import { API_STATE_NOT_REQUESTING, API_STATE_REQUESTING } from './constants';
import { useProductManagementContext } from './context';
import { getMessageByProductType } from './utils';
import { getMessageByProductType, getTitleByProps } from './utils';

const DEFAULT_CURRENCY = 'USD';
const DEFAULT_PRICE = 5;
Expand All @@ -41,6 +42,7 @@ export default function ProductManagementInspectorControl() {
const [ title, setTitle ] = useState(
getMessageByProductType( 'default new product title', productType )
);
const [ isCustomTitle, setIsCustomTitle ] = useState( false );
const [ currency, setCurrency ] = useState( DEFAULT_CURRENCY );
const [ price, setPrice ] = useState( DEFAULT_PRICE );
const [ interval, setInterval ] = useState( DEFAULT_INTERVAL );
Expand Down Expand Up @@ -71,9 +73,8 @@ export default function ProductManagementInspectorControl() {
success => {
setApiState( API_STATE_NOT_REQUESTING );
if ( success ) {
const defaultTitle = getMessageByProductType( 'default new product title', productType );
setPrice( DEFAULT_PRICE );
setTitle( defaultTitle );
setIsCustomTitle( false );
setInterval( DEFAULT_INTERVAL );
setIsMarkedAsDonation( DEFAULT_IS_MARKED_AS_DONATION );
setIsCustomAmount( DEFAULT_IS_CUSTOM_AMOUNT );
Expand All @@ -83,6 +84,15 @@ export default function ProductManagementInspectorControl() {
);
};

useEffect( () => {
// If the user has manually selected a title then that should be left as-is, don't overwrite it
if ( isCustomTitle ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I could get rid of this state by checking if the current title from the state matches anything that getTitleByProps could return?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, that could work, but it's fine to leave this as-is. The other benefit of getting rid of this state is that if the user undoes their changes and goes back to a default title, we'd be again changing the title according to the type/interval. In other words:

  1. User changes title to "My Subscription"
  2. User changes interval to "Yearly"
  3. User changes title to "Yearly Subscription"
  4. User changes type to "Donation"

The isCustomTitle check would keep the title as "Yearly Subscription", but if replace it with a check against the default values, the title will change to "Yearly Donation".

Anyway, this is an edge case, so feel free to ignore this!

return;
}
setTitle( getTitleByProps( isMarkedAsDonation, interval ) );
setIsCustomTitle( false );
}, [ interval, isMarkedAsDonation, isCustomTitle ] );

return (
<InspectorControls>
{ siteSlug && (
Expand Down Expand Up @@ -112,7 +122,10 @@ export default function ProductManagementInspectorControl() {
<TextControl
id="new-product-title"
label={ __( 'Name', 'jetpack' ) }
onChange={ value => setTitle( value ) }
onChange={ value => {
setTitle( value );
setIsCustomTitle( true );
} }
value={ title }
/>
</PanelRow>
Expand Down
14 changes: 14 additions & 0 deletions projects/plugins/jetpack/extensions/shared/components/product-management-controls/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,17 @@ const messages = {
export function getMessageByProductType( message, productType = PRODUCT_TYPE_PAYMENT_PLAN ) {
return messages?.[ message ]?.[ productType ] || null;
}

const titles = {
'false,1 month': __( 'Monthly Subscription', 'jetpack' ),
'true,1 month': __( 'Monthly Donation', 'jetpack' ),
'false,1 year': __( 'Yearly Subscription', 'jetpack' ),
'true,1 year': __( 'Yearly Donation', 'jetpack' ),
'false,one-time': __( 'Subscription', 'jetpack' ),
'true,one-time': __( 'Donation', 'jetpack' ),
};

export function getTitleByProps( isDonation, interval ) {
const key = [ isDonation, interval ];
return titles[ key ] ?? '';
}