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 && (
+
+ ) }
+
+
+ );
+};
+
+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,