@automattic/jetpack-connection 1.4.52 → 1.4.54

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.4.54] - 2026-06-01
+### Changed
+- Connection: Migrate ActionButton, Button, and Text consumers off @automattic/jetpack-components to @wordpress/ui equivalents; brings the package to zero migration-relevant jetpack-components imports. [#49099]
+- Update package dependencies. [#48404]
+
+## [1.4.53] - 2026-05-25
+### Added
+- Add direct `useProductCheckoutWorkflow` hook export. [#49032]
+- Expose the `useConnectionErrorNotice` hook and `ConnectionError` component via a dedicated sub-path so consumers can opt out of the full package barrel. [#48829]
+
 ## [1.4.52] - 2026-05-21
 ### Changed
 - Update package dependencies. [#48405]
@@ -1347,6 +1357,8 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.4.54]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.53...v1.4.54
+[1.4.53]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.52...v1.4.53
 [1.4.52]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.51...v1.4.52
 [1.4.51]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.50...v1.4.51
 [1.4.50]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.49...v1.4.50

package/SECURITY.md

@@ -13,7 +13,6 @@ Our HackerOne program covers the below plugin software, as well as a variety of
 * [Jetpack](https://jetpack.com/)
 * Jetpack Backup
 * Jetpack Boost
-* Jetpack CRM
 * Jetpack Protect
 * Jetpack Search
 * Jetpack Social

package/components/connect-button/index.jsx

@@ -1,5 +1,5 @@
-import { ActionButton } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import useConnection from '../use-connection';
 
@@ -39,12 +39,16 @@ const ConnectButton = props => {
 	return (
 		<>
 			{ ( ! isRegistered || ! isUserConnected ) && (
-				<ActionButton
-					label={ connectLabel }
-					onClick={ handleRegisterSite }
-					displayError={ registrationError ? true : false }
-					isLoading={ siteIsRegistering || userIsConnecting }
-				/>
+				<>
+					<Button onClick={ handleRegisterSite } loading={ siteIsRegistering || userIsConnecting }>
+						{ connectLabel }
+					</Button>
+					{ registrationError && (
+						<p className="jp-action-button__error">
+							{ __( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+						</p>
+					) }
+				</>
 			) }
 		</>
 	);

package/components/connect-screen/basic/style.scss

@@ -17,25 +17,16 @@
 		}
 	}
 
-	.jp-action-button {
+	// Structural-only: top spacing + responsive width. All other treatment
+	// (colors, padding, border-radius, font-weight) honors the
+	// @wordpress/ui Button defaults.
+	.jp-connection__connect-screen__action-button {
 		margin-top: 40px;
+		max-width: 100%;
 
-		&--button {
-			border-radius: 4px;
-			font-weight: 600;
-		}
-
-		button {
-			max-width: 100%;
-
-			&:disabled {
-				color: hsla(0, 0%, 100%, 0.4);
-			}
-
-			@media ( max-width: breakpoints.$break-medium ) {
-				max-width: none;
-				width: 100%;
-			}
+		@media ( max-width: breakpoints.$break-medium ) {
+			max-width: none;
+			width: 100%;
 		}
 	}
 

package/components/connect-screen/basic/visual.tsx

@@ -1,6 +1,7 @@
-import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
+import { TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
@@ -102,14 +103,20 @@ const ConnectScreenVisual: FC< Props > = ( {
 			<div className="jp-connection__connect-screen__tos">
 				<TermsOfService agreeButtonLabel={ buttonLabel } />
 			</div>
-			<ActionButton
-				label={ buttonLabel }
+			<Button
+				className="jp-connection__connect-screen__action-button"
 				onClick={ handleButtonClick }
-				displayError={ displayButtonError || isOfflineMode }
-				errorMessage={ getErrorMessage( errorCode, isOfflineMode ) }
-				isLoading={ buttonIsLoading }
-				isDisabled={ isOfflineMode }
-			/>
+				loading={ buttonIsLoading }
+				disabled={ isOfflineMode }
+			>
+				{ buttonLabel }
+			</Button>
+			{ ( displayButtonError || isOfflineMode ) && (
+				<p className="jp-connection__connect-screen__error">
+					{ getErrorMessage( errorCode, isOfflineMode ) ||
+						__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+				</p>
+			) }
 			<span className="jp-connection__connect-screen__loading-message" role="status">
 				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack-connection-js' ) : '' }
 			</span>

package/components/connect-screen/required-plan/style.scss

@@ -43,23 +43,12 @@
 			right: calc(var(--spacing-base) * 12);
 		}
 
-		.jp-action-button--button.components-button {
+		// Structural-only: span the pricing card width and keep the vertical
+		// rhythm inside the card. All other treatment (colors, padding,
+		// font-size, border-radius) honors the @wordpress/ui Button defaults.
+		.jp-connection__connect-screen__action-button {
 			width: 100%;
-			height: auto;
-			font-size: 18px;
-			font-weight: 500;
-			background: var(--jp-black) !important;
-			color: var(--jp-white) !important;
-			border-radius: var(--jp-border-radius);
-			padding: 14px 24px;
-			margin: 24px 0 32px;
-			justify-content: center;
-			align-items: center;
-
-			&:disabled {
-				background: var(--jp-gray) !important;
-				color: var(--jp-gray-20) !important;
-			}
+			margin: 24px 0;
 		}
 
 		.terms-of-service {
@@ -77,33 +66,31 @@
 		gap: 1ch;
 		line-height: 1;
 
-		.jp-action-button--button.components-button.is-primary {
-			display: inline;
-			color: var(--jp-black) !important;
-			background: inherit !important;
+		// Inline button styled as a text link inside the surrounding sentence.
+		// `variant="unstyled"` strips @wordpress/ui Button's chrome so we can
+		// flow it inline with the prefix copy; we keep `<button>` semantics so
+		// the element stays keyboard-focusable and screen readers announce
+		// "button" + aria-busy when in-flight (a `<Link>` couldn't do that).
+		// `inline-flex` + `align-items: center` keeps either the label or the
+		// loading spinner vertically centered within the button row, and
+		// `align-self: baseline` aligns the whole button with the prefix
+		// text's baseline inside the parent flex container.
+		.jp-connection__connect-screen__inline-action {
+			display: inline-flex;
+			align-items: center;
+			align-self: baseline;
 			text-decoration: underline;
-
-			width: auto;
-			min-width: 0;
-			height: auto;
 			font: inherit;
 			padding: 0;
+			min-width: calc(var(--spacing-base) * 8);
+			justify-content: center;
 
-			&:hover {
-				background: inherit;
-				text-decoration-thickness: var(--jp-underline-thickness);
-			}
-
-			&:focus {
-				background: inherit;
-				box-shadow: none !important;
+			// @wordpress/components Spinner ships with `margin: 5px 11px 0`
+			// for use inside button chrome we no longer have. Zero it out
+			// so the spinner sits flush in the inline-flex row.
+			.components-spinner {
+				margin: 0;
 			}
 		}
-
-		.jp-components-spinner__inner,
-		.jp-components-spinner__outer {
-			border-top-color: var(--jp-black);
-			border-right-color: var(--jp-black);
-		}
 	}
 }

package/components/connect-screen/required-plan/visual.jsx

@@ -1,11 +1,8 @@
-import {
-	ActionButton,
-	getRedirectUrl,
-	PricingCard,
-	TermsOfService,
-} from '@automattic/jetpack-components';
+import { getRedirectUrl, PricingCard, TermsOfService } from '@automattic/jetpack-components';
+import { Spinner } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
@@ -45,11 +42,15 @@ const ConnectScreenRequiredPlanVisual = props => {
 		__( 'Already have a subscription? <connectButton/>', 'jetpack-connection-js' ),
 		{
 			connectButton: (
-				<ActionButton
-					label={ __( 'Log in to get started', 'jetpack-connection-js' ) }
+				<Button
+					variant="unstyled"
+					className="jp-connection__connect-screen__inline-action"
 					onClick={ handleButtonClick }
-					isLoading={ buttonIsLoading }
-				/>
+					disabled={ buttonIsLoading }
+					aria-busy={ buttonIsLoading }
+				>
+					{ buttonIsLoading ? <Spinner /> : __( 'Log in to get started', 'jetpack-connection-js' ) }
+				</Button>
 			),
 		}
 	);
@@ -92,14 +93,20 @@ const ConnectScreenRequiredPlanVisual = props => {
 						priceAfter={ priceAfter }
 					>
 						<TermsOfService agreeButtonLabel={ buttonLabel } />
-						<ActionButton
-							label={ buttonLabel }
+						<Button
+							className="jp-connection__connect-screen__action-button"
 							onClick={ handleButtonClick }
-							displayError={ displayButtonError || isOfflineMode }
-							errorMessage={ errorMessage }
-							isLoading={ buttonIsLoading }
-							isDisabled={ isOfflineMode }
-						/>
+							loading={ buttonIsLoading }
+							disabled={ isOfflineMode }
+						>
+							{ buttonLabel }
+						</Button>
+						{ ( displayButtonError || isOfflineMode ) && (
+							<p className="jp-connection__connect-screen__error">
+								{ errorMessage ||
+									__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+							</p>
+						) }
 					</PricingCard>
 				</div>
 

package/components/manage-connection-dialog/index.jsx

@@ -3,13 +3,13 @@
  */
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import restApi from '@automattic/jetpack-api';
-import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
 import { isWoASite } from '@automattic/jetpack-script-data';
 import { Modal } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
-import { Link } from '@wordpress/ui';
+import { Button, Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState, useMemo } from 'react';
@@ -316,8 +316,7 @@ const HelpFooter = ( { onClose, disabled } ) => {
 			</div>
 			<div className="jp-connection__manage-dialog__button-wrap lg-col-span-3 md-col-span-1 sm-col-span-1">
 				<Button
-					weight="regular"
-					variant="secondary"
+					variant="outline"
 					onClick={ onClose }
 					className="jp-connection__manage-dialog__btn-dismiss"
 					disabled={ disabled }

package/hooks/use-product-checkout-workflow/index.tsx

@@ -3,8 +3,8 @@ import { getScriptData } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import debugFactory from 'debug';
 import { useEffect, useState, useMemo } from 'react';
-import { getCalypsoOrigin } from '@automattic/jetpack-connection';
 import useConnection from '../../components/use-connection';
+import getCalypsoOrigin from '../../helpers/get-calypso-origin';
 import { STORE_ID } from '../../state/store.jsx';
 import type { UseProductCheckoutWorkflowProps } from './types';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "1.4.52",
+	"version": "1.4.54",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -20,7 +20,9 @@
 	"type": "module",
 	"exports": {
 		".": "./index.jsx",
-		"./use-connection": "./components/use-connection/index.ts"
+		"./hooks/use-product-checkout-workflow": "./hooks/use-product-checkout-workflow/index.tsx",
+		"./use-connection": "./components/use-connection/index.ts",
+		"./use-connection-error-notice": "./hooks/use-connection-error-notice/index.tsx"
 	},
 	"scripts": {
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
@@ -30,7 +32,7 @@
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^1.0.13",
 		"@automattic/jetpack-api": "^1.0.26",
-		"@automattic/jetpack-components": "^1.11.3",
+		"@automattic/jetpack-components": "^1.12.1",
 		"@automattic/jetpack-config": "^1.0.11",
 		"@automattic/jetpack-script-data": "^0.6.4",
 		"@wordpress/base-styles": "8.0.0",
@@ -39,15 +41,15 @@
 		"@wordpress/data": "10.46.0",
 		"@wordpress/element": "6.46.0",
 		"@wordpress/i18n": "6.19.0",
-		"@wordpress/icons": "12.2.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/icons": "13.1.0",
+		"@wordpress/ui": "0.13.0",
 		"@wordpress/url": "4.46.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.3",
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.4",
+		"@automattic/jetpack-base-styles": "^1.2.5",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@testing-library/dom": "10.4.1",