@automattic/jetpack-connection 0.39.11 → 0.39.13

package/CHANGELOG.md

@@ -2,10 +2,27 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.39.13] - 2025-05-05
+### Changed
+- Update package dependencies. [#43326]
+
+### Fixed
+- Linting: Address final rules in WordPress Stylelint config. [#43296]
+- Linting: Do additional stylesheet cleanup. [#43247]
+
+## [0.39.12] - 2025-04-28
+### Changed
+- Mark external links with extra markup. [#43152]
+
+### Fixed
+- Linting: Fix more Stylelint violations. [#43213]
+- Linting: Remove outdated vendor prefixes in stylesheets. [#43219]
+- My Jetpack: Fix TS type checking and the corresponding errors [#43205]
+
 ## [0.39.11] - 2025-04-14
 ### Fixed
 - Linting: Update stylesheets to use WordPress rules for fonts and colors. [#42920] [#42928]
-- Linting: Clean up various Styleline violations. [#43010]
+- Linting: Clean up various Stylelint violations. [#43010]
 - Linting: Use double colon notation for pseudo-element selectors. [#43019]
 
 ## [0.39.10] - 2025-04-07
@@ -1002,6 +1019,8 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.39.13]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.12...v0.39.13
+[0.39.12]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.11...v0.39.12
 [0.39.11]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.10...v0.39.11
 [0.39.10]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.9...v0.39.10
 [0.39.9]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.8...v0.39.9

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

@@ -53,7 +53,7 @@
 			color: var(--jp-white) !important;
 			border-radius: var(--jp-border-radius);
 			padding: 14px 24px;
-			margin: 24px 0px 32px;
+			margin: 24px 0 32px;
 			justify-content: center;
 			align-items: center;
 

package/components/connection-error-notice/styles.module.scss

@@ -20,7 +20,7 @@
 	}
 
 	// notice content
-	& :global(.components-notice__content) {
+	:global(.components-notice__content) {
 		display: flex;
 		margin: 0;
 		padding: 12px 4px;
@@ -29,14 +29,14 @@
 	}
 
 	// action button
-	& :global(.is-link) {
+	:global(.is-link) {
 		color: var( --jp-black );
 		font-size: 16px;
 		font-weight: 600;
 	}
 
 	// X close button
-	& :global(.components-notice__dismiss) {
+	:global(.components-notice__dismiss) {
 		align-self: center;
 	}
 
@@ -65,7 +65,7 @@
 			white-space: nowrap;
 		}
 
-		& :global(.components-notice__content) {
+		:global(.components-notice__content) {
 			flex-direction: row;
 			align-items: center;
 		}
@@ -76,23 +76,19 @@
 	margin-bottom: 25px;
 }
 
-.error {
-	margin-bottom: 25px;
-}
-
 .message {
 	margin-right: var( --spacing-base ); // 8px
 	flex-grow: 1;
 	display: flex;
 
 	// left icon
-	& > svg {
+	> svg {
 		flex-shrink: 0;
 		align-self: flex-start;
 		margin-right: calc( var( --spacing-base ) * 2 ); // 16px
 	}
 
-	& :global(.jp-components-spinner) {
+	:global(.jp-components-spinner) {
 		margin-right: calc( var( --spacing-base ) * 2 ); // 16px
 	}
 }

package/components/disconnect-card/style.scss

@@ -47,7 +47,7 @@
 		// smaller screens
 		@media only screen and (max-width: 782px) {
 			// When a headline is above a stats block, add some space.
-			& + .jp-disconnect-card__card-stat-block {
+			+ .jp-disconnect-card__card-stat-block {
 				margin-top: 0.5rem;
 			}
 		}

package/components/disconnect-dialog/style.scss

@@ -79,19 +79,6 @@
 		width: calc(100% - 48px); // Help with the margin on the row.
 	}
 
-	&__content{
-		background: var( --jp-white-off );
-		margin: 0;
-		padding: 2rem 1rem;
-		border-radius: 4px;
-		text-align: center;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-
 	&__actions{
 		background: var( --jp-white );
 		padding: 2rem 0;
@@ -157,9 +144,19 @@
 	}
 }
 
-// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
 .jp-connection__disconnect-dialog__content {
-
+	background: var( --jp-white-off );
+	margin: 0;
+	padding: 2rem 1rem;
+	border-radius: 4px;
+	text-align: center;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
 	@media (max-height: 900px) {
 
 		.jp-components__decorative-card {
@@ -220,6 +217,6 @@
 	}
 
 	.jp-row {
-		margin-left: 0px;
+		margin-left: 0;
 	}
 }

package/components/in-place-connection/style.scss

@@ -3,11 +3,7 @@
 }
 
 .fade-in {
-	animation: fadeIn ease 1.5s;
-	-webkit-animation: fadeIn ease 1.5s;
-	-moz-animation: fadeIn ease 1.5s;
-	-o-animation: fadeIn ease 1.5s;
-	-ms-animation: fadeIn ease 1.5s;
+	animation: fadein ease 1.5s;
 }
 
 @keyframes fadeIn {
@@ -16,31 +12,3 @@
 
 	100% {opacity:1;}
 }
-
-@-moz-keyframes fadeIn {
-
-	0% {opacity:0;}
-
-	100% {opacity:1;}
-}
-
-@-webkit-keyframes fadeIn {
-
-	0% {opacity:0;}
-
-	100% {opacity:1;}
-}
-
-@-o-keyframes fadeIn {
-
-	0% {opacity:0;}
-
-	100% {opacity:1;}
-}
-
-@-ms-keyframes fadeIn {
-
-	0% {opacity:0;}
-
-	100% {opacity:1;}
-}

package/components/manage-connection-dialog/style.scss

@@ -34,7 +34,7 @@
 
 	&__actions{
 		background: var( --jp-white );
-		margin:0px !important;
+		margin:0 !important;
 		border-top: 1px solid var( --jp-gray );
 		max-width: 1200px !important;
 		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 5 );

package/declarations.d.ts

@@ -6,3 +6,12 @@ declare module '@automattic/jetpack-script-data' {
 		connection: ConnectionScriptData;
 	}
 }
+
+declare global {
+	interface Window {
+		/**
+		 * @deprecated In favor of getScriptData from @automattic/jetpack-script-data
+		 */
+		JP_CONNECTION_INITIAL_STATE: ConnectionScriptData;
+	}
+}

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

@@ -22,17 +22,17 @@ const defaultAdminUrl = () =>
  * Custom hook that performs the needed steps
  * to concrete the checkout workflow.
  *
- * @param {object}   props                                - The props passed to the hook.
- * @param {string}   props.productSlug                    - The WordPress product slug.
- * @param {string}   props.redirectUrl                    - The URI to redirect to after checkout.
- * @param {string}   [props.siteSuffix]                   - The site suffix.
- * @param {string}   [props.adminUrl]                     - The site wp-admin url.
- * @param {boolean}  props.connectAfterCheckout           - Whether or not to conect after checkout if not connected (default false - connect before).
- * @param {Function} props.siteProductAvailabilityHandler - The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resloves true.
- * @param {Function} props.from                           - The plugin slug initiated the flow.
- * @param {number}   [props.quantity]                     - The quantity of the product to purchase.
- * @param {boolean}  [props.useBlogIdSuffix]              - Use blog ID instead of site suffix in the checkout URL.
- * @return {Function}                                      The useEffect hook.
+ * @param {object}   props                                  - The props passed to the hook.
+ * @param {string}   props.productSlug                      - The WordPress product slug.
+ * @param {string}   props.redirectUrl                      - The URI to redirect to after checkout.
+ * @param {string}   [props.siteSuffix]                     - The site suffix.
+ * @param {string}   [props.adminUrl]                       - The site wp-admin url.
+ * @param {boolean}  [props.connectAfterCheckout]           - Whether or not to conect after checkout if not connected (default false - connect before).
+ * @param {Function} [props.siteProductAvailabilityHandler] - The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resloves true.
+ * @param {string}   props.from                             - The plugin slug initiated the flow.
+ * @param {number}   [props.quantity]                       - The quantity of the product to purchase.
+ * @param {boolean}  [props.useBlogIdSuffix]                - Use blog ID instead of site suffix in the checkout URL.
+ * @return {object}                                      The useEffect hook.
  */
 export default function useProductCheckoutWorkflow( {
 	productSlug,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.39.11",
+	"version": "0.39.13",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -15,23 +15,23 @@
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.36",
-		"@automattic/jetpack-api": "^0.20.1",
-		"@automattic/jetpack-components": "^0.72.4",
+		"@automattic/jetpack-api": "^0.20.2",
+		"@automattic/jetpack-components": "^0.72.6",
 		"@automattic/jetpack-config": "^0.1.29",
-		"@automattic/jetpack-script-data": "^0.4.0",
-		"@wordpress/base-styles": "5.21.0",
-		"@wordpress/browserslist-config": "6.21.0",
-		"@wordpress/components": "29.7.0",
-		"@wordpress/data": "10.21.0",
-		"@wordpress/element": "6.21.0",
-		"@wordpress/i18n": "5.21.0",
-		"@wordpress/icons": "10.21.0",
+		"@automattic/jetpack-script-data": "^0.4.1",
+		"@wordpress/base-styles": "5.22.0",
+		"@wordpress/browserslist-config": "6.22.0",
+		"@wordpress/components": "29.8.0",
+		"@wordpress/data": "10.22.0",
+		"@wordpress/element": "6.22.0",
+		"@wordpress/i18n": "5.22.0",
+		"@wordpress/icons": "10.22.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.7.1",
+		"@automattic/jetpack-base-styles": "^0.7.3",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
 		"@storybook/addon-actions": "8.6.7",

package/types.ts

@@ -1,3 +1,55 @@
 export type ConnectionScriptData = {
+	apiRoot: string;
+	apiNonce: string;
+	registrationNonce: string;
 	calypsoEnv: string;
+	connectionStatus: {
+		isActive: boolean;
+		isStaging: boolean;
+		isRegistered: boolean;
+		isUserConnected: boolean;
+		hasConnectedOwner: boolean;
+		offlineMode: {
+			isActive: boolean;
+			constant: boolean;
+			url: boolean;
+			filter: boolean;
+			wpLocalConstant: boolean;
+		};
+		isPublic: boolean;
+	};
+	userConnectionData: {
+		currentUser: {
+			isConnected: boolean;
+			isMaster: boolean;
+			username: string;
+			id: number;
+			blogId: number;
+			wpcomUser: {
+				avatar: boolean;
+				display_name: string;
+				email: string;
+			};
+			gravatar: string;
+			permissions: {
+				admin_page?: boolean;
+				connect: boolean;
+				connect_user: boolean;
+				disconnect: boolean;
+				edit_posts?: boolean;
+				manage_modules?: boolean;
+				manage_options?: boolean;
+				manage_plugins?: boolean;
+				network_admin?: boolean;
+				network_sites_page?: boolean;
+				publish_posts?: boolean;
+				view_stats?: boolean;
+			};
+		};
+		connectionOwner: null;
+	};
+	connectedPlugins: object;
+	wpVersion: string;
+	siteSuffix: string;
+	connectionErrors: Array< string | object >;
 };