@automattic/jetpack-connection 0.30.4 → 0.30.5

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.30.5] - 2023-10-23
+### Added
+- Added getCalypsoOrigin() helper function. [#33257]
+
 ## [0.30.4] - 2023-10-19
 ### Changed
 - Updated package dependencies. [#33687]
@@ -648,6 +652,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.30.5]: https://github.com/Automattic/jetpack-connection-js/compare/v0.30.4...v0.30.5
 [0.30.4]: https://github.com/Automattic/jetpack-connection-js/compare/v0.30.3...v0.30.4
 [0.30.3]: https://github.com/Automattic/jetpack-connection-js/compare/v0.30.2...v0.30.3
 [0.30.2]: https://github.com/Automattic/jetpack-connection-js/compare/v0.30.1...v0.30.2

package/helpers/get-calypso-origin.ts

@@ -0,0 +1,20 @@
+/**
+ * Get the Calypso origin based on the development environment.
+ *
+ * @returns {string} The Calypso url origin.
+ */
+export default function getCalypsoOrigin() {
+	const calypsoEnv =
+		typeof window !== 'undefined' && window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
+
+	switch ( calypsoEnv ) {
+		case 'development':
+			return 'http://calypso.localhost:3000/';
+		case 'wpcalypso':
+			return 'https://wpcalypso.wordpress.com/';
+		case 'horizon':
+			return 'https://horizon.wordpress.com/';
+		default:
+			return 'https://wordpress.com/';
+	}
+}

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

@@ -1,8 +1,8 @@
 import restApi from '@automattic/jetpack-api';
-import { getProductCheckoutUrl } from '@automattic/jetpack-components';
+import { getCalypsoOrigin } from '@automattic/jetpack-connection';
 import { useDispatch } from '@wordpress/data';
 import debugFactory from 'debug';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import useConnection from '../../components/use-connection';
 import { STORE_ID } from '../../state/store.jsx';
 
@@ -14,6 +14,8 @@ const {
 	apiNonce,
 	siteSuffix: defaultSiteSuffix,
 } = window?.JP_CONNECTION_INITIAL_STATE ? window.JP_CONNECTION_INITIAL_STATE : {};
+const defaultAdminUrl =
+	typeof window !== 'undefined' ? window?.myJetpackInitialState?.adminUrl : null;
 
 /**
  * Custom hook that performs the needed steps
@@ -23,6 +25,8 @@ const {
  * @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.
  * @returns {Function}				  - The useEffect hook.
@@ -31,6 +35,8 @@ export default function useProductCheckoutWorkflow( {
 	productSlug,
 	redirectUrl,
 	siteSuffix = defaultSiteSuffix,
+	adminUrl = defaultAdminUrl,
+	connectAfterCheckout = false,
 	siteProductAvailabilityHandler = null,
 	from,
 } = {} ) {
@@ -46,15 +52,55 @@ export default function useProductCheckoutWorkflow( {
 		from,
 	} );
 
-	// Build the checkout URL.
-	const checkoutProductUrl = getProductCheckoutUrl(
-		productSlug,
+	const checkoutUrl = useMemo( () => {
+		const origin = getCalypsoOrigin();
+		const shouldConnectAfterCheckout =
+			( ! isRegistered || ! isUserConnected ) && connectAfterCheckout;
+
+		const checkoutPath = shouldConnectAfterCheckout
+			? 'checkout/jetpack/'
+			: `checkout/${ siteSuffix }/`;
+
+		const productCheckoutUrl = new URL( `${ origin }${ checkoutPath }${ productSlug }` );
+
+		if ( shouldConnectAfterCheckout ) {
+			productCheckoutUrl.searchParams.set( 'connect_after_checkout', true );
+			productCheckoutUrl.searchParams.set( 'admin_url', adminUrl );
+			/**
+			 * `from_site_slug` is the Jetpack site slug (siteSuffix) passed 'from the site' via url
+			 * query arg (into Calypso), for use cases when there is not a site in context (such
+			 * as when Jetpack is not connected or the user is not logged in) but we need to know
+			 * the site we're working with). As opposed to Calypso's use of `siteSlug`
+			 * which is the site slug present when the site is in context (ie- the site is available
+			 * in State, such as when the site is connected and the user is logged in).
+			 */
+			productCheckoutUrl.searchParams.set( 'from_site_slug', siteSuffix );
+		} else {
+			productCheckoutUrl.searchParams.set( 'site', siteSuffix );
+		}
+
+		productCheckoutUrl.searchParams.set( 'source', from );
+		productCheckoutUrl.searchParams.set( 'redirect_to', redirectUrl );
+		if ( ! isUserConnected ) {
+			productCheckoutUrl.searchParams.set( 'unlinked', '1' );
+		}
+
+		return productCheckoutUrl;
+	}, [
+		connectAfterCheckout,
+		isRegistered,
 		siteSuffix,
+		productSlug,
+		adminUrl,
+		from,
 		redirectUrl,
-		isUserConnected
-	);
-	debug( 'checkoutProductUrl is %s', checkoutProductUrl );
+		isUserConnected,
+	] );
+
+	debug( 'isRegistered is %s', isRegistered );
 	debug( 'isUserConnected is %s', isUserConnected );
+	debug( 'connectAfterCheckout is %s', connectAfterCheckout );
+	debug( 'checkoutUrl is %s', checkoutUrl );
 
 	const handleAfterRegistration = () => {
 		return Promise.resolve(
@@ -66,12 +112,18 @@ export default function useProductCheckoutWorkflow( {
 			}
 			debug(
 				'handleAfterRegistration: Site does not have a product associated. Redirecting to checkout %s',
-				checkoutProductUrl
+				checkoutUrl
 			);
-			window.location.href = checkoutProductUrl;
+			window.location.href = checkoutUrl;
 		} );
 	};
 
+	const connectAfterCheckoutFlow = () => {
+		debug( 'Redirecting to connectAfterCheckout flow: %s', checkoutUrl );
+
+		window.location.href = checkoutUrl;
+	};
+
 	/**
 	 * Handler to run the checkout workflow.
 	 *
@@ -81,6 +133,11 @@ export default function useProductCheckoutWorkflow( {
 	const run = event => {
 		event && event.preventDefault();
 		setCheckoutStarted( true );
+		// By default we will connect first prior to checkout unless `props.connectAfterCheckout`
+		// is set (true), in which we will connect after purchase is completed.
+		if ( connectAfterCheckout ) {
+			return connectAfterCheckoutFlow();
+		}
 
 		if ( isRegistered ) {
 			return handleAfterRegistration();

package/index.jsx

@@ -34,6 +34,7 @@ export { default as ManageConnectionDialog } from './components/manage-connectio
  * Helpers.
  */
 export { default as thirdPartyCookiesFallbackHelper } from './helpers/third-party-cookies-fallback';
+export { default as getCalypsoOrigin } from './helpers/get-calypso-origin';
 
 /**
  * Store

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.30.4",
+	"version": "0.30.5",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -16,7 +16,7 @@
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.27",
 		"@automattic/jetpack-api": "^0.16.4",
-		"@automattic/jetpack-components": "^0.44.0",
+		"@automattic/jetpack-components": "^0.44.1",
 		"@automattic/jetpack-config": "^0.1.21",
 		"@wordpress/base-styles": "4.35.0",
 		"@wordpress/browserslist-config": "5.27.0",