/* * External dependencies */ import { getRedirectUrl } from '@automattic/jetpack-components'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { createInterpolateElement, useCallback } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import debugFactory from 'debug'; /* * Internal dependencies */ import { Nudge as StandardNudge } from '../../../../shared/components/upgrade-nudge'; import useAICheckout from '../../hooks/use-ai-checkout'; import useAiFeature from '../../hooks/use-ai-feature'; import { canUserPurchasePlan } from '../../lib/connection'; import { LightNudge } from './light-nudge'; import type { ReactElement } from 'react'; import './style.scss'; type UpgradePromptProps = { placement?: string; description?: string; useLightNudge?: boolean; }; const debug = debugFactory( 'jetpack-ai-assistant:upgrade-prompt' ); /** * The default upgrade prompt for the AI Assistant block, containing the Upgrade button and linking * to the checkout page or the Jetpack AI interstitial page. * * @param {UpgradePromptProps} props - Component props. * @returns {ReactElement} the Nudge component with the prompt. */ const DefaultUpgradePrompt = ( { placement = null, description = null, useLightNudge = false, }: UpgradePromptProps ): ReactElement => { const Nudge = useLightNudge ? LightNudge : StandardNudge; const { checkoutUrl } = useAICheckout(); const canUpgrade = canUserPurchasePlan(); const { nextTier, tierPlansEnabled, currentTier, requestsCount } = useAiFeature(); const { tracks } = useAnalytics(); const handleUpgradeClick = useCallback( () => { debug( 'upgrade', placement ); tracks.recordEvent( 'jetpack_ai_upgrade_button', { current_tier_slug: currentTier?.slug, requests_count: requestsCount, placement: placement, } ); }, [ currentTier, requestsCount, tracks, placement ] ); const handleContactUsClick = useCallback( () => { debug( 'contact us', placement ); tracks.recordEvent( 'jetpack_ai_upgrade_contact_us', { placement: placement, } ); }, [ tracks, placement ] ); if ( ! canUpgrade ) { const cantUpgradeDescription = createInterpolateElement( __( 'Congratulations on exploring Jetpack AI and reaching the free requests limit! Reach out to the site administrator to upgrade and keep using Jetpack AI.', 'jetpack' ), { strong: , } ); return ( ); } if ( tierPlansEnabled ) { if ( ! nextTier ) { const contactHref = getRedirectUrl( 'jetpack-ai-tiers-more-requests-contact' ); const contactUsDescription = __( 'You have reached the request limit for your current plan.', 'jetpack' ); return ( ); } const upgradeDescription = createInterpolateElement( sprintf( /* Translators: number of requests */ __( 'You have reached the requests limit for your current plan. Upgrade now to increase your requests limit to %d.', 'jetpack' ), nextTier.limit ), { strong: , } ); return ( ); } return ( Upgrade now to keep using it.', 'jetpack' ), { strong: , } ) } goToCheckoutPage={ handleUpgradeClick } visible={ true } align={ null } title={ null } context={ null } target="_blank" /> ); }; /** * The VIP upgrade prompt, with a single text message recommending that the user reach * out to their VIP account team. * * @param {object} props - Component props. * @param {string} props.description - The description to display in the prompt. * @param {boolean} props.useLightNudge - Wheter to use the light variant of the nudge, or the standard one. * @returns {ReactElement} the Nudge component with the prompt. */ const VIPUpgradePrompt = ( { description = null, useLightNudge = false, }: { description?: string; useLightNudge?: boolean; } ): ReactElement => { const Nudge = useLightNudge ? LightNudge : StandardNudge; const vipDescription = createInterpolateElement( __( "You've reached the Jetpack AI rate limit. Please reach out to your VIP account team.", 'jetpack' ), { strong: , } ); return ( ); }; const UpgradePrompt = props => { const { upgradeType } = useAiFeature(); // If the user is on a VIP site, show the VIP upgrade prompt. if ( upgradeType === 'vip' ) { return VIPUpgradePrompt( { description: props.description, useLightNudge: props?.useLightNudge, } ); } return DefaultUpgradePrompt( props ); }; export default UpgradePrompt;