Skip to content

Commit

Permalink
Subscriptions: stop loading subscribe block and panels when module di…
Browse files Browse the repository at this point in the history 
…sabled (#39802)

Co-authored-by: Miguel Lezama <lezama@gmail.com>
  • Loading branch information
@simison @lezama
simison and lezama authored Nov 26, 2024
1 parent 609132a commit c214fbf
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 333 deletions.
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: enhancement

Subscriptions: stops loading editor functionality (i.e. the block and panels) when subscriptions module is disabled.
190 changes: 70 additions & 120 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { numberFormat, ThemeProvider } from '@automattic/jetpack-components';
import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
import {
BlockControls,
InspectorControls,
Expand All @@ -18,7 +17,6 @@ import clsx from 'clsx';
import { isEqual } from 'lodash';
import { getActiveStyleName } from '../../shared/block-styles';
import { getValidatedAttributes } from '../../shared/get-validated-attributes';
import { isNewsletterFeatureEnabled } from '../../shared/memberships/edit';
import GetAddPaidPlanButton, { paidPlanButtonText } from '../../shared/memberships/utils';
import './view.scss';
import { store as membershipProductsStore } from '../../store/membership-products';
Expand All @@ -34,13 +32,10 @@ import {
DEFAULT_SUCCESS_MESSAGE,
} from './constants';
import SubscriptionControls from './controls';
import { SubscriptionsPlaceholder } from './subscription-placeholder';
import SubscriptionSkeletonLoader from './subscription-skeleton-loader';

const { getComputedStyle } = window;
const isGradientAvailable = !! useGradient;
const useGradientIfAvailable = isGradientAvailable ? useGradient : () => ( {} );
const name = metadata.name.replace( 'jetpack/', '' );

const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
const { buttonBackgroundColor, textColor } = ownProps;
Expand Down Expand Up @@ -77,9 +72,6 @@ export function SubscriptionEdit( props ) {
} = props;

const blockProps = useBlockProps();
const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
useModuleStatus( name );

const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
if ( ! isEqual( validatedAttributes, attributes ) ) {
setAttributes( validatedAttributes );
Expand All @@ -103,12 +95,6 @@ export function SubscriptionEdit( props ) {
const activeStyleName = getActiveStyleName( metadata.styles, className );

const { subscriberCount, subscriberCountString } = useSelect( select => {
if ( ! isModuleActive ) {
return {
subscriberCounts: 0,
subscriberCountString: '',
};
}
const { emailSubscribers, socialFollowers } =
select( membershipProductsStore ).getSubscriberCounts();
let count = emailSubscribers;
Expand Down Expand Up @@ -217,118 +203,14 @@ export function SubscriptionEdit( props ) {
const previousButtonBackgroundColor = usePrevious( buttonBackgroundColor );

useEffect( () => {
if ( ! isModuleActive ) {
return;
}
if (
previousButtonBackgroundColor?.color !== borderColor?.color ||
borderColor?.color === buttonBackgroundColor?.color
) {
return;
}
setBorderColor( buttonBackgroundColor.color );
}, [
buttonBackgroundColor,
previousButtonBackgroundColor,
borderColor,
setBorderColor,
isModuleActive,
] );

let content;

const paidPlanLabel = paidPlanButtonText( hasTierPlans );

if ( isLoadingModules ) {
content = <SubscriptionSkeletonLoader />;
} else if ( ! isModuleActive ) {
content = (
<SubscriptionsPlaceholder
changeStatus={ changeStatus }
isModuleActive={ isModuleActive }
isLoading={ isChangingStatus }
/>
);
} else {
content = (
<>
<InspectorControls>
<SubscriptionControls
buttonBackgroundColor={ buttonBackgroundColor }
borderColor={ borderColor }
buttonGradient={ buttonGradient }
borderRadius={ borderRadius }
borderWeight={ borderWeight }
buttonOnNewLine={ buttonOnNewLine }
emailFieldBackgroundColor={ emailFieldBackgroundColor }
fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
fallbackTextColor={ fallbackTextColor }
fontSize={ fontSize }
includeSocialFollowers={ includeSocialFollowers }
isGradientAvailable={ isGradientAvailable }
padding={ padding }
setAttributes={ setAttributes }
setBorderColor={ setBorderColor }
setButtonBackgroundColor={ setButtonBackgroundColor }
setTextColor={ setTextColor }
showSubscribersTotal={ showSubscribersTotal }
spacing={ spacing }
subscriberCount={ subscriberCount }
textColor={ textColor }
buttonWidth={ buttonWidth }
subscribePlaceholder={ subscribePlaceholder }
submitButtonText={ submitButtonText }
successMessage={ successMessage }
/>
</InspectorControls>
{ isNewsletterFeatureEnabled() && (
<BlockControls>
<Toolbar label={ paidPlanLabel }>
<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
</Toolbar>
</BlockControls>
) }

<div style={ cssVars }>
<div className="wp-block-jetpack-subscriptions__container is-not-subscriber">
<div className="wp-block-jetpack-subscriptions__form" role="form">
<div className="wp-block-jetpack-subscriptions__form-elements">
{ activeStyleName !== 'button' && (
<TextControl
__nextHasNoMarginBottom={ true }
placeholder={ subscribePlaceholder }
disabled={ true }
className={ clsx(
emailFieldClasses,
'wp-block-jetpack-subscriptions__textfield'
) }
style={ emailFieldStyles }
/>
) }
<RichText
className={ clsx(
buttonClasses,
'wp-block-jetpack-subscriptions__button',
'wp-block-button__link'
) }
onChange={ value => setAttributes( { submitButtonText: value } ) }
style={ buttonStyles }
value={ submitButtonText }
withoutInteractiveFormatting
allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] }
/>
</div>
</div>
</div>
{ showSubscribersTotal && (
<div className="wp-block-jetpack-subscriptions__subscount">
{ subscriberCountString }
</div>
) }
</div>
</>
);
}
}, [ buttonBackgroundColor, previousButtonBackgroundColor, borderColor, setBorderColor ] );

return (
<div
Expand All @@ -341,7 +223,75 @@ export function SubscriptionEdit( props ) {
showSubscribersTotal ? 'wp-block-jetpack-subscriptions__show-subs' : undefined
) }
>
{ content }
<InspectorControls>
<SubscriptionControls
buttonBackgroundColor={ buttonBackgroundColor }
borderColor={ borderColor }
buttonGradient={ buttonGradient }
borderRadius={ borderRadius }
borderWeight={ borderWeight }
buttonOnNewLine={ buttonOnNewLine }
emailFieldBackgroundColor={ emailFieldBackgroundColor }
fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
fallbackTextColor={ fallbackTextColor }
fontSize={ fontSize }
includeSocialFollowers={ includeSocialFollowers }
isGradientAvailable={ isGradientAvailable }
padding={ padding }
setAttributes={ setAttributes }
setBorderColor={ setBorderColor }
setButtonBackgroundColor={ setButtonBackgroundColor }
setTextColor={ setTextColor }
showSubscribersTotal={ showSubscribersTotal }
spacing={ spacing }
subscriberCount={ subscriberCount }
textColor={ textColor }
buttonWidth={ buttonWidth }
subscribePlaceholder={ subscribePlaceholder }
submitButtonText={ submitButtonText }
successMessage={ successMessage }
/>
</InspectorControls>
<BlockControls>
<Toolbar label={ paidPlanButtonText( hasTierPlans ) }>
<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
</Toolbar>
</BlockControls>
<div style={ cssVars }>
<div className="wp-block-jetpack-subscriptions__container is-not-subscriber">
<div className="wp-block-jetpack-subscriptions__form" role="form">
<div className="wp-block-jetpack-subscriptions__form-elements">
{ activeStyleName !== 'button' && (
<TextControl
__nextHasNoMarginBottom={ true }
placeholder={ subscribePlaceholder }
disabled={ true }
className={ clsx(
emailFieldClasses,
'wp-block-jetpack-subscriptions__textfield'
) }
style={ emailFieldStyles }
/>
) }
<RichText
className={ clsx(
buttonClasses,
'wp-block-jetpack-subscriptions__button',
'wp-block-button__link'
) }
onChange={ value => setAttributes( { submitButtonText: value } ) }
style={ buttonStyles }
value={ submitButtonText }
withoutInteractiveFormatting
allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] }
/>
</div>
</div>
</div>
{ showSubscribersTotal && (
<div className="wp-block-jetpack-subscriptions__subscount">{ subscriberCountString }</div>
) }
</div>
</div>
);
}
Expand Down
Loading

0 comments on commit c214fbf

Please sign in to comment.