From f0e83b53cc5f4fdd79721dfa25c716903120e6e9 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 9 Sep 2024 18:21:24 -0300 Subject: [PATCH] remove most uses of tierPlansEnabled, add notes on what seems still fuzzy --- .../components/generator-modal.tsx | 27 ++------ .../src/logo-generator/components/prompt.tsx | 5 +- .../src/logo-generator/hooks/use-checkout.ts | 8 +-- .../src/logo-generator/store/selectors.ts | 18 +---- .../quota-exceeded-message/index.tsx | 68 +------------------ .../extensions/blocks/ai-assistant/edit.js | 4 +- .../ai-assistant-plugin-sidebar/index.tsx | 5 +- .../extensions/store/wordpress-com/reducer.ts | 3 + 8 files changed, 19 insertions(+), 119 deletions(-) diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx index 485d8c7b318b6..08b4991ad6576 100644 --- a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx +++ b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx @@ -13,7 +13,6 @@ import { useState, useEffect, useCallback, useRef } from 'react'; * Internal dependencies */ import { - DEFAULT_LOGO_COST, EVENT_MODAL_OPEN, EVENT_FEEDBACK, EVENT_MODAL_CLOSE, @@ -63,14 +62,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { const requestedFeatureData = useRef< boolean >( false ); const [ needsFeature, setNeedsFeature ] = useState( false ); const [ needsMoreRequests, setNeedsMoreRequests ] = useState( false ); - const { - selectedLogo, - getAiAssistantFeature, - generateFirstPrompt, - generateLogo, - setContext, - tierPlansEnabled, - } = useLogoGenerator(); + const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext } = + useLogoGenerator(); const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors(); const siteId = siteDetails?.ID; const [ logoAccepted, setLogoAccepted ] = useState( false ); @@ -105,21 +98,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { try { const hasHistory = ! isLogoHistoryEmpty( String( siteId ) ); - const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST; - const promptCreationCost = 1; - const currentLimit = feature?.currentTier?.value || 0; - const currentUsage = feature?.usagePeriod?.requestsCount || 0; - const isUnlimited = ! tierPlansEnabled ? currentLimit > 0 : currentLimit === 1; + const currentLimit = feature?.currentTier?.value || 0; // ? shouldn't we set this to free requests limit? + const currentUsage = + currentLimit === 0 ? feature?.requestsCount : feature?.usagePeriod?.requestsCount || 0; + const isUnlimited = currentLimit > 0; const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade. // The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation. const siteNeedsMoreRequests = - ! isUnlimited && - ! hasNoNextTier && - ! hasHistory && - ( tierPlansEnabled - ? currentLimit - currentUsage < logoCost + promptCreationCost - : currentLimit < currentUsage ); + ! isUnlimited && ! hasNoNextTier && ! hasHistory && currentLimit < currentUsage; // If the site requires an upgrade, show the upgrade screen immediately. setNeedsFeature( currentLimit === 0 ); diff --git a/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx b/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx index 2eb753b0f2b52..101474b8e9dc5 100644 --- a/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx +++ b/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx @@ -21,7 +21,6 @@ import { useCheckout } from '../hooks/use-checkout.js'; import useLogoGenerator from '../hooks/use-logo-generator.js'; import useRequestErrors from '../hooks/use-request-errors.js'; import { FairUsageNotice } from './fair-usage-notice.js'; -import { UpgradeNudge } from './upgrade-nudge.js'; import './prompt.scss'; const debug = debugFactory( 'jetpack-ai-calypso:prompt-box' ); @@ -45,7 +44,6 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt getAiAssistantFeature, requireUpgrade, context, - tierPlansEnabled, } = useLogoGenerator(); const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' ); @@ -197,8 +195,7 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt ) } - { requireUpgrade && tierPlansEnabled && } - { requireUpgrade && ! tierPlansEnabled && } + { requireUpgrade && } { enhancePromptFetchError && (
{ __( 'Error enhancing prompt. Please try again.', 'jetpack-ai-client' ) } diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-checkout.ts b/projects/js-packages/ai-client/src/logo-generator/hooks/use-checkout.ts index 1d4f4802dc038..34d21b075dc70 100644 --- a/projects/js-packages/ai-client/src/logo-generator/hooks/use-checkout.ts +++ b/projects/js-packages/ai-client/src/logo-generator/hooks/use-checkout.ts @@ -20,11 +20,10 @@ import type { Selectors } from '../store/types.js'; const debug = debugFactory( 'ai-client:logo-generator:use-checkout' ); export const useCheckout = () => { - const { nextTier, tierPlansEnabled } = useSelect( select => { + const { nextTier } = useSelect( select => { const selectors: Selectors = select( STORE_NAME ); return { nextTier: selectors.getAiAssistantFeature().nextTier, - tierPlansEnabled: selectors.getAiAssistantFeature().tierPlansEnabled, }; }, [] ); @@ -35,10 +34,7 @@ export const useCheckout = () => { wpcomCheckoutUrl.searchParams.set( 'source', 'jetpack-ai-yearly-tier-upgrade-nudge' ); wpcomCheckoutUrl.searchParams.set( 'site', getSiteFragment() as string ); - wpcomCheckoutUrl.searchParams.set( - 'path', - tierPlansEnabled ? `jetpack_ai_yearly:-q-${ nextTier?.limit }` : 'jetpack_ai_yearly' - ); + wpcomCheckoutUrl.searchParams.set( 'path', 'jetpack_ai_yearly' ); /** * Open the product interstitial page diff --git a/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts b/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts index 16c984b15c7aa..9f85aa54ff3d7 100644 --- a/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts +++ b/projects/js-packages/ai-client/src/logo-generator/store/selectors.ts @@ -1,7 +1,6 @@ /** * Types */ -import { DEFAULT_LOGO_COST } from '../constants.js'; import type { AiFeatureProps, LogoGeneratorStateProp, Logo, RequestError } from './types.js'; import type { SiteDetails } from '../types.js'; @@ -120,22 +119,7 @@ const selectors = { * @return {boolean} The requireUpgrade flag. */ getRequireUpgrade( state: LogoGeneratorStateProp ): boolean { - const feature = state.features.aiAssistantFeature; - - if ( ! feature?.tierPlansEnabled ) { - return feature?.requireUpgrade; - } - const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST; - const currentLimit = feature?.currentTier?.value || 0; - const currentUsage = feature?.usagePeriod?.requestsCount || 0; - const isUnlimited = currentLimit === 1; - const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade. - - // Add a local check on top of the feature flag, based on the current usage and logo cost. - return ( - state.features.aiAssistantFeature?.requireUpgrade || - ( ! isUnlimited && ! hasNoNextTier && currentLimit - currentUsage < logoCost ) - ); + return state.features?.aiAssistantFeature?.requireUpgrade || false; }, /** diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx index 8163e41c2d46e..2be6d6ca4dd70 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx @@ -1,7 +1,6 @@ /* * External dependencies */ -import { getRedirectUrl } from '@automattic/jetpack-components'; import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Notice } from '@wordpress/components'; import { createInterpolateElement, useCallback } from '@wordpress/element'; @@ -97,7 +96,7 @@ const DefaultUpgradePrompt = ( { const { checkoutUrl } = useAICheckout(); const canUpgrade = canUserPurchasePlan(); - const { nextTier, tierPlansEnabled, currentTier, requestsCount } = useAiFeature(); + const { currentTier, requestsCount } = useAiFeature(); const { tracks } = useAnalytics(); @@ -110,13 +109,6 @@ const DefaultUpgradePrompt = ( { } ); }, [ 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( __( @@ -141,64 +133,6 @@ const DefaultUpgradePrompt = ( { ); } - 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 (
- { ( planType === PLAN_TYPE_FREE || - ( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED ) ) && ( + { planType === PLAN_TYPE_FREE && ( diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx index a7be8feb411de..463ed91449455 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx @@ -178,8 +178,7 @@ export default function AiAssistantPluginSidebar() { tracks.recordEvent( 'jetpack_ai_panel_open', { placement } ); }; - const showUsagePanel = - planType === PLAN_TYPE_FREE || ( tierPlansEnabled && planType !== PLAN_TYPE_UNLIMITED ); + const showUsagePanel = planType === PLAN_TYPE_FREE; const showFairUsageNotice = planType === PLAN_TYPE_UNLIMITED && isOverLimit; const isBreveAvailable = getBreveAvailability(); @@ -237,6 +236,8 @@ export default function AiAssistantPluginSidebar() { busy={ false } disabled={ requireUpgrade } /> + + { /* check this for removal, it will never be true */ } { requireUpgrade && tierPlansEnabled && ( = requestsLimit; // highest tier holds a soft limit so requireUpgrade is false on that case (nextTier null means highest tier) + // we shouldn't need this anymore, use requireUpgrade as it comes from backend const requireUpgrade = isOverLimit && state.features.aiAssistant.nextTier !== null; return {