From 3584d37b1fe006ce0bf45651b56a71b749d9dc16 Mon Sep 17 00:00:00 2001 From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com> Date: Tue, 8 Oct 2024 09:37:57 -0600 Subject: [PATCH] Fix blogroll block unhelpful error when user not connected (#39638) * Add connection nudge to blogroll block * changelog * Update connection banner to show if current user is not connected --- ...ck-unhelpful-error-when-user-not-connected | 4 ++ .../components/connect-prompt/index.tsx | 35 -------------- .../extensions/blocks/ai-assistant/edit.js | 4 +- .../ai-chat/components/nudge-connect/index.js | 39 --------------- .../jetpack/extensions/blocks/ai-chat/edit.js | 4 +- .../extensions/blocks/blogroll/edit.js | 17 +++++++ .../components/connect-banner/index.tsx | 47 +++++++++++++++++++ .../components/connect-banner/style.scss | 45 ++++++++++++++++++ .../shared/components/upgrade-nudge/index.jsx | 6 +-- 9 files changed, 120 insertions(+), 81 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/fix-blogroll-block-unhelpful-error-when-user-not-connected delete mode 100644 projects/plugins/jetpack/extensions/blocks/ai-assistant/components/connect-prompt/index.tsx delete mode 100644 projects/plugins/jetpack/extensions/blocks/ai-chat/components/nudge-connect/index.js create mode 100644 projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx create mode 100644 projects/plugins/jetpack/extensions/shared/components/connect-banner/style.scss diff --git a/projects/plugins/jetpack/changelog/fix-blogroll-block-unhelpful-error-when-user-not-connected b/projects/plugins/jetpack/changelog/fix-blogroll-block-unhelpful-error-when-user-not-connected new file mode 100644 index 0000000000000..7c5157e9f931c --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-blogroll-block-unhelpful-error-when-user-not-connected @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Show connection nudge instead of error if user is not connected on blogroll block diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/connect-prompt/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/connect-prompt/index.tsx deleted file mode 100644 index a09c7e233010d..0000000000000 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/connect-prompt/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -/* - * Internal dependencies - */ -import { Nudge } from '../../../../shared/components/upgrade-nudge'; -import useAutosaveAndRedirect from '../../../../shared/use-autosave-and-redirect'; - -const ConnectPrompt = () => { - const checkoutUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`; - const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( checkoutUrl ); - - const goToCheckoutPage = event => { - autosaveAndRedirect( event ); - }; - - return ( - - ); -}; - -export default ConnectPrompt; diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js index eecedd8f92044..d56d949833921 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js @@ -26,8 +26,8 @@ import clsx from 'clsx'; */ import UsagePanel from '../../plugins/ai-assistant-plugin/components/usage-panel'; import { USAGE_PANEL_PLACEMENT_BLOCK_SETTINGS_SIDEBAR } from '../../plugins/ai-assistant-plugin/components/usage-panel/types'; +import ConnectBanner from '../../shared/components/connect-banner'; import { PLAN_TYPE_FREE, PLAN_TYPE_UNLIMITED, usePlanType } from '../../shared/use-plan-type'; -import ConnectPrompt from './components/connect-prompt'; import FeedbackControl from './components/feedback-control'; import QuotaExceededMessage, { FairUsageNotice } from './components/quota-exceeded-message'; import ToolbarControls from './components/toolbar-controls'; @@ -305,7 +305,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId, const banner = ( <> { isOverLimit && isSelected && } - { ! connected && } + { ! connected && } ); diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/components/nudge-connect/index.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/components/nudge-connect/index.js deleted file mode 100644 index fbf17fc5cf115..0000000000000 --- a/projects/plugins/jetpack/extensions/blocks/ai-chat/components/nudge-connect/index.js +++ /dev/null @@ -1,39 +0,0 @@ -/* - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -/* - * Internal dependencies - */ -import { Nudge } from '../../../../shared/components/upgrade-nudge'; -import useAutosaveAndRedirect from '../../../../shared/use-autosave-and-redirect'; - -const ConnectPrompt = () => { - const connectUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`; - const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( connectUrl ); - - if ( window?.Jetpack_Editor_Initial_State?.jetpack?.is_current_user_connected ) { - return null; - } - - const goToCheckoutPage = event => { - autosaveAndRedirect( event ); - }; - - return ( - - ); -}; - -export default ConnectPrompt; diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js index 57f0626191e8e..4b5125ba9f892 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/ai-chat/edit.js @@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import './editor.scss'; -import ConnectPrompt from './components/nudge-connect'; +import ConnectBanner from '../../shared/components/connect-banner'; import EnableJetpackSearchPrompt from './components/nudge-enable-search'; import { DEFAULT_ASK_BUTTON_LABEL, DEFAULT_PLACEHOLDER } from './constants'; import { AiChatControls } from './controls'; @@ -34,7 +34,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) { ); return (
- +
+ + + ); + } + const errorMessage = recommendationsErrorMessage || subscriptionsErrorMessage; return ( diff --git a/projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx b/projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx new file mode 100644 index 0000000000000..4c8852eb44554 --- /dev/null +++ b/projects/plugins/jetpack/extensions/shared/components/connect-banner/index.tsx @@ -0,0 +1,47 @@ +/* + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +/* + * Internal dependencies + */ +import useAutosaveAndRedirect from '../../use-autosave-and-redirect'; +import { Nudge } from '../upgrade-nudge'; +import type { MouseEvent, FC } from 'react'; + +interface ConnectBannerProps { + explanation?: string; +} + +import './style.scss'; + +const ConnectBanner: FC< ConnectBannerProps > = ( { explanation = null } ) => { + const checkoutUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`; + const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( checkoutUrl ); + + const goToCheckoutPage = ( event: MouseEvent< HTMLButtonElement > ) => { + autosaveAndRedirect( event ); + }; + + return ( +
+ +
+ { explanation && ( +
+

{ explanation }

+
+ ) } +
+
+ ); +}; + +export default ConnectBanner; diff --git a/projects/plugins/jetpack/extensions/shared/components/connect-banner/style.scss b/projects/plugins/jetpack/extensions/shared/components/connect-banner/style.scss new file mode 100644 index 0000000000000..a1f0a8e82f57c --- /dev/null +++ b/projects/plugins/jetpack/extensions/shared/components/connect-banner/style.scss @@ -0,0 +1,45 @@ +@import '@automattic/jetpack-base-styles/style'; + +.jetpack-connect-banner-nudge { + .jetpack-upgrade-plan-banner__wrapper { + flex-wrap: nowrap; + + &__description { + line-height: 24px; + } + + .components-button.is-primary { + background-color: var( --jp-white ); + color: var( --jp-black ); + margin-top: 8px; + margin-bottom: 8px; + + &:hover { + background-color: var( --jp-gray-0 ); + } + } + } +} + +.jetpack-connect-banner { + color: var( --jp-black-80 ); + background-color: var( --jp-white ); + box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.12), 0px 3px 9px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.15); + border-radius: 0 0 2px 2px; + + &__explanation { + display: flex; + padding: 8px 8px 8px 12px; + align-items: flex-end; + box-sizing: border-box; + border-radius: 6px 6px 0 0; + gap: 6px; + + p { + color: var( --jp-gray-20 ); + font-size: var( --font-label ); + padding: 6px 8px; + margin: 0; + } + } +} diff --git a/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx b/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx index e2d919cefe007..4dab71f5bfe78 100644 --- a/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx +++ b/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx @@ -5,13 +5,13 @@ import clsx from 'clsx'; import './style.scss'; export const Nudge = ( { - align, className, - title, description, + align = null, + title = null, buttonText = null, visible = true, - context, + context = null, checkoutUrl = null, goToCheckoutPage = null, isRedirecting = false,