Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 1x 1x 1x 1x | import { useUpgradeFlow } from '@automattic/jetpack-shared-extension-utils';
import { Nudge } from '@automattic/jetpack-shared-extension-utils/components';
import { useSelect } from '@wordpress/data';
import { __, _x, sprintf } from '@wordpress/i18n';
export const UPGRADE_NUDGE_TITLE = __( 'Premium Block', 'jetpack' );
export const /** translators: %s: name of the plan. */
UPGRADE_NUDGE_PLAN_DESCRIPTION = __( 'Upgrade to %s to use this premium block', 'jetpack' );
export const UPGRADE_NUDGE_DESCRIPTION = __(
'Upgrade your plan to use this premium block',
'jetpack'
);
export const UPGRADE_NUDGE_BUTTON_TEXT = _x(
'Upgrade',
'Call to action to buy a new plan',
'jetpack'
);
const UpgradePlanBanner = ( {
onRedirect,
align,
className,
title = UPGRADE_NUDGE_TITLE,
description = null,
buttonText = UPGRADE_NUDGE_BUTTON_TEXT,
visible = true,
requiredPlan,
context,
} ) => {
const [ checkoutUrl, goToCheckoutPage, isRedirecting ] = useUpgradeFlow(
requiredPlan,
onRedirect
);
const upgradeDescription = useSelect(
select => {
if ( description ) {
return description;
}
const planSelector = select( 'wordpress-com/plans' );
const plan = planSelector && planSelector.getPlan( requiredPlan );
if ( plan ) {
return sprintf( UPGRADE_NUDGE_PLAN_DESCRIPTION, plan.product_name_short );
}
return null;
},
[ description, requiredPlan ]
);
return (
upgradeDescription && (
<Nudge
align={ align }
buttonText={ buttonText }
checkoutUrl={ checkoutUrl }
className={ className }
context={ context }
description={ upgradeDescription }
goToCheckoutPage={ goToCheckoutPage }
isRedirecting={ isRedirecting }
title={ title }
visible={ visible }
/>
)
);
};
export default UpgradePlanBanner;
|