From 932747acd37c83f48cb97bf1b81542fb9d679ec8 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Tue, 22 Oct 2024 14:18:59 -0300 Subject: [PATCH] AI Client: make fetch error retry optional (#39848) * make reload handler optional on fetch error notice * changelog * provide empty retry handler * move condition process to modal initializer * cleanup new open handler --- ...ange-jetpack-ai-fetch-error-retry-optional | 4 +++ .../feature-fetch-failure-screen.tsx | 19 ++++++++--- .../components/generator-modal.tsx | 33 ++++++++++++++----- .../ai-client/src/logo-generator/types.ts | 2 +- ...ange-jetpack-ai-fetch-error-retry-optional | 4 +++ .../extended-blocks/core-site-logo/index.tsx | 11 ++++--- 6 files changed, 54 insertions(+), 19 deletions(-) create mode 100644 projects/js-packages/ai-client/changelog/change-jetpack-ai-fetch-error-retry-optional create mode 100644 projects/plugins/jetpack/changelog/change-jetpack-ai-fetch-error-retry-optional diff --git a/projects/js-packages/ai-client/changelog/change-jetpack-ai-fetch-error-retry-optional b/projects/js-packages/ai-client/changelog/change-jetpack-ai-fetch-error-retry-optional new file mode 100644 index 0000000000000..22ca3f2a46ba9 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/change-jetpack-ai-fetch-error-retry-optional @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +AI Client: make reload handler prop optional as it still works in a fuzzy way. The error notice (modal) will instruct to reload the page when the optional prop is not provided diff --git a/projects/js-packages/ai-client/src/logo-generator/components/feature-fetch-failure-screen.tsx b/projects/js-packages/ai-client/src/logo-generator/components/feature-fetch-failure-screen.tsx index cd1f53acdf38c..3404e7c1fbb0b 100644 --- a/projects/js-packages/ai-client/src/logo-generator/components/feature-fetch-failure-screen.tsx +++ b/projects/js-packages/ai-client/src/logo-generator/components/feature-fetch-failure-screen.tsx @@ -10,25 +10,34 @@ import type React from 'react'; export const FeatureFetchFailureScreen: React.FC< { onCancel: () => void; - onRetry: () => void; + onRetry?: () => void; } > = ( { onCancel, onRetry } ) => { const errorMessage = __( 'We are sorry. There was an error loading your Jetpack AI plan data. Please, try again.', 'jetpack-ai-client' ); + const errorMessageWithoutRetry = __( + 'We are sorry. There was an error loading your Jetpack AI plan data. Please, reload the page and try again.', + 'jetpack-ai-client' + ); + return (
- { errorMessage } + + { onRetry ? errorMessage : errorMessageWithoutRetry } +
- + { onRetry && ( + + ) }
); 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 e4d6c183d5835..dfba25feb65fa 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 @@ -45,7 +45,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { isOpen, onClose, onApplyLogo, - onReload, + onReload = null, siteDetails, context, placement, @@ -73,7 +73,8 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { site, requireUpgrade, } = useLogoGenerator(); - const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors(); + const { featureFetchError, setFeatureFetchError, firstLogoPromptFetchError, clearErrors } = + useRequestErrors(); const siteId = siteDetails?.ID; const [ logoAccepted, setLogoAccepted ] = useState( false ); const { nextTierCheckoutURL: upgradeURL } = useCheckout(); @@ -105,6 +106,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { */ const initializeModal = useCallback( async () => { try { + if ( ! siteId ) { + throw new Error( 'Site ID is missing' ); + } + + if ( ! feature?.featuresControl?.[ 'logo-generator' ]?.enabled ) { + setFeatureFetchError( 'Failed to fetch feature data' ); + throw new Error( 'Failed to fetch feature data' ); + } + const hasHistory = ! isLogoHistoryEmpty( String( siteId ) ); const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST; @@ -179,6 +189,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { isLogoHistoryEmpty, siteId, requireUpgrade, + setFeatureFetchError, ] ); const handleModalOpen = useCallback( async () => { @@ -201,6 +212,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } ); }; + const handleReload = useCallback( () => { + if ( ! onReload ) { + return; + } + closeModal(); + requestedFeatureData.current = false; + onReload(); + }, [ onReload, closeModal ] ); + const handleApplyLogo = ( mediaId: number ) => { setLogoAccepted( true ); onApplyLogo?.( mediaId ); @@ -229,7 +249,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { // Handles modal opening logic useEffect( () => { // While the modal is not open, the siteId is not set, or the feature data is not available, do nothing. - if ( ! isOpen || ! siteId || ! feature?.costs ) { + if ( ! isOpen ) { return; } @@ -238,7 +258,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { needsToHandleModalOpen.current = false; handleModalOpen(); } - }, [ isOpen, siteId, handleModalOpen, feature ] ); + }, [ isOpen, handleModalOpen ] ); let body: React.ReactNode; @@ -248,10 +268,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { body = ( { - closeModal(); - onReload?.(); - } } + onRetry={ onReload ? handleReload : null } /> ); } else if ( needsFeature || needsMoreRequests ) { diff --git a/projects/js-packages/ai-client/src/logo-generator/types.ts b/projects/js-packages/ai-client/src/logo-generator/types.ts index f25e238a9737c..e54cf774ac98e 100644 --- a/projects/js-packages/ai-client/src/logo-generator/types.ts +++ b/projects/js-packages/ai-client/src/logo-generator/types.ts @@ -16,7 +16,7 @@ export interface GeneratorModalProps { isOpen: boolean; onClose: () => void; onApplyLogo: ( mediaId: number ) => void; - onReload: () => void; + onReload?: () => void; context: string; placement: string; } diff --git a/projects/plugins/jetpack/changelog/change-jetpack-ai-fetch-error-retry-optional b/projects/plugins/jetpack/changelog/change-jetpack-ai-fetch-error-retry-optional new file mode 100644 index 0000000000000..38baa75852ac8 --- /dev/null +++ b/projects/plugins/jetpack/changelog/change-jetpack-ai-fetch-error-retry-optional @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Jetpack AI: remove reload handler for logo generator modal call diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx index 233e96aad4a65..6d34c34b5c0ac 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx +++ b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx @@ -102,10 +102,10 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { setIsLogoGeneratorModalVisible( false ); }, [] ); - const reloadModal = useCallback( () => { - closeModal(); - showModal(); - }, [ closeModal, showModal ] ); + // const reloadModal = useCallback( () => { + // closeModal(); + // showModal(); + // }, [ closeModal, showModal ] ); const applyLogoHandler = useCallback( ( mediaId: number ) => { @@ -135,7 +135,8 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { isOpen={ isLogoGeneratorModalVisible } onClose={ closeModal } onApplyLogo={ applyLogoHandler } - onReload={ reloadModal } + // reload is not working right and can end up showing a non functional modal + // onReload={ reloadModal } context={ PLACEMENT_CONTEXT } placement={ TOOL_PLACEMENT } siteDetails={ siteDetails }