Merge branch 'trunk' of github.com:Automattic/wp-calypso into fix/tri…

…m-double-quotes-in-command-palette

CREDITS.md

@@ -1456,3 +1456,28 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
+
+## <https://github.com/visionmedia/page.js>
+
+### packages/calypso-router
+
+Copyright (c) 2012 TJ Holowaychuk <mailto:tj@vision-media.ca>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

apps/blaze-dashboard/package.json

@@ -28,13 +28,13 @@
 	"dependencies": {
 		"@automattic/calypso-config": "workspace:^",
 		"@automattic/calypso-polyfills": "workspace:^",
+		"@automattic/calypso-router": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
 		"@tanstack/react-query": "^4.29.1",
 		"calypso": "workspace:^",
 		"classnames": "^2.3.2",
 		"debug": "^4.3.4",
 		"moment": "^2.26.0",
-		"page": "^1.11.5",
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

apps/blaze-dashboard/src/app.jsx

@@ -3,8 +3,8 @@
  */
 import './load-config';
 import config from '@automattic/calypso-config';
+import page from '@automattic/calypso-router';
 import { QueryClient } from '@tanstack/react-query';
-import page from 'page';
 import '@automattic/calypso-polyfills';
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';

apps/blaze-dashboard/src/page-middleware/setup-context.jsx

@@ -1,6 +1,6 @@
+import page from '@automattic/calypso-router';
 import { getUrlParts } from '@automattic/calypso-url';
 import debugFactory from 'debug';
-import page from 'page';
 
 const debug = debugFactory( 'calypso' );
 

apps/blaze-dashboard/src/routes.js

@@ -1,5 +1,5 @@
 import config from '@automattic/calypso-config';
-import page from 'page';
+import page from '@automattic/calypso-router';
 import {
 	campaignDetails,
 	promoteWidget,

apps/editing-toolkit/package.json

@@ -50,6 +50,7 @@
 		"@automattic/calypso-analytics": "workspace:^",
 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-polyfills": "workspace:^",
+		"@automattic/calypso-router": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
 		"@automattic/eslint-plugin-json": "workspace:^",

apps/notifications/package.json

@@ -27,14 +27,14 @@
 	"dependencies": {
 		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-polyfills": "workspace:^",
+		"@automattic/calypso-router": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/webpack-extensive-lodash-replacement-plugin": "workspace:^",
 		"autoprefixer": "^10.2.5",
 		"calypso": "workspace:^",
 		"classnames": "^2.3.2",
 		"debug": "^4.3.3",
 		"i18n-calypso": "workspace:^",
-		"page": "^1.11.5",
 		"prop-types": "^15.7.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

apps/odyssey-stats/package.json

@@ -31,6 +31,7 @@
 	"dependencies": {
 		"@automattic/calypso-color-schemes": "workspace:^",
 		"@automattic/calypso-polyfills": "workspace:^",
+		"@automattic/calypso-router": "workspace:^",
 		"@automattic/calypso-url": "workspace:^",
 		"@automattic/components": "workspace:^",
 		"@tanstack/react-query": "4.29.1",
@@ -41,7 +42,6 @@
 		"classnames": "^2.3.2",
 		"debug": "^4.3.4",
 		"moment": "^2.26.0",
-		"page": "^1.11.5",
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

apps/odyssey-stats/src/app.tsx

@@ -4,8 +4,8 @@
 // `init-app-config` has to be the first import, because there could be packages reference it in their side effect.
 // eslint-disable-next-line import/order
 import './lib/init-app-config';
+import page from '@automattic/calypso-router';
 import { QueryClient } from '@tanstack/react-query';
-import page from 'page';
 import '@automattic/calypso-polyfills';
 import { createStore, applyMiddleware, compose, Store, Middleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';

apps/odyssey-stats/src/page-middleware/layout.tsx

@@ -1,12 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Context } from 'page';
 import { FunctionComponent } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Store } from 'redux';
 import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider';
 import { RouteProvider } from 'calypso/components/route';
 import { CalypsoReactQueryDevtools } from 'calypso/lib/react-query-devtools-helper';
 import Layout from '../components/layout';
+import type { Context } from '@automattic/calypso-router';
 
 export { render, hydrate } from 'calypso/controller/web-util';
 

apps/odyssey-stats/src/page-middleware/setup-context.ts

@@ -1,7 +1,7 @@
+import page from '@automattic/calypso-router';
 import { getUrlParts } from '@automattic/calypso-url';
 import { QueryClient } from '@tanstack/react-query';
 import debugFactory from 'debug';
-import page from 'page';
 import { Store } from 'redux';
 
 const debug = debugFactory( 'calypso' );

apps/odyssey-stats/src/routes.ts

@@ -1,5 +1,5 @@
+import page, { type Callback, type Context } from '@automattic/calypso-router';
 import { SiteDetails } from '@automattic/data-stores';
-import page, { Callback, Context } from 'page';
 import wpcom from 'calypso/lib/wp';
 import {
 	follows,

client/auth/index.js

@@ -1,5 +1,5 @@
 import config from '@automattic/calypso-config';
-import page from 'page';
+import page from '@automattic/calypso-router';
 import { storeToken } from './controller';
 
 export default () => {

client/blocks/announcement-modal/index.jsx

@@ -1,6 +1,6 @@
+import pageRouter from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
 import { Guide } from '@wordpress/components';
-import { default as pageRouter } from 'page';
 import { useSelector, useDispatch } from 'react-redux';
 import { preventWidows } from 'calypso/lib/formatting';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';

client/blocks/authentication/form-divider/index.tsx

@@ -0,0 +1,14 @@
+import { useTranslate } from 'i18n-calypso';
+import './style.scss';
+
+const FormDivider = () => {
+	const translate = useTranslate();
+
+	return (
+		<div className="auth-form__separator">
+			<div className="auth-form__separator-text">{ translate( 'or' ) }</div>
+		</div>
+	);
+};
+
+export default FormDivider;

client/blocks/authentication/index.tsx

@@ -1,12 +1,2 @@
-import { useTranslate } from 'i18n-calypso';
-import './style.scss';
-
-export const FormDivider = () => {
-	const translate = useTranslate();
-
-	return (
-		<div className="auth-form__separator">
-			<div className="auth-form__separator-text">{ translate( 'or' ) }</div>
-		</div>
-	);
-};
+export { default as FormDivider } from './form-divider';
+export { default as SocialAuthenticationForm } from './social';

client/blocks/authentication/social/index.tsx

@@ -0,0 +1,120 @@
+import config from '@automattic/calypso-config';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import AppleLoginButton from 'calypso/components/social-buttons/apple';
+import GoogleSocialButton from 'calypso/components/social-buttons/google';
+import { preventWidows } from 'calypso/lib/formatting';
+import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
+import { isWpccFlow } from 'calypso/signup/utils';
+import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
+import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
+import SocialToS from './social-tos';
+import type { IAppState } from 'calypso/state/types';
+
+interface SocialAuthenticationFormProps {
+	compact?: boolean;
+	handleGoogleResponse: ( response: any ) => void;
+	handleAppleResponse: ( response: any ) => void;
+	getRedirectUri: ( service: string ) => string;
+	trackLoginAndRememberRedirect: ( service: string ) => void;
+	socialService: string;
+	socialServiceResponse: string;
+	children: JSX.Element;
+	disableTosText?: boolean;
+	flowName: string;
+}
+
+const SocialAuthenticationForm = ( {
+	compact,
+	handleGoogleResponse,
+	handleAppleResponse,
+	getRedirectUri,
+	trackLoginAndRememberRedirect,
+	socialService,
+	socialServiceResponse,
+	children,
+	disableTosText,
+	flowName,
+}: SocialAuthenticationFormProps ) => {
+	const translate = useTranslate();
+
+	const { currentRoute, oauth2Client, isWoo } = useSelector( ( state: IAppState ) => {
+		return {
+			currentRoute: getCurrentRoute( state ),
+			oauth2Client: getCurrentOAuth2Client( state ),
+			isWoo:
+				isWooOAuth2Client( getCurrentOAuth2Client( state ) ) ||
+				isWooCommerceCoreProfilerFlow( state ),
+		};
+	} );
+
+	const shouldUseRedirectFlow = () => {
+		// If calypso is loaded in a popup, we don't want to open a second popup for social signup or login
+		// let's use the redirect flow instead in that case
+		let isPopup = typeof window !== 'undefined' && window.opener && window.opener !== window;
+
+		// Jetpack Connect-in-place auth flow contains special reserved args, so we want a popup for social signup and login.
+		// See p1HpG7-7nj-p2 for more information.
+		if ( isPopup && [ '/jetpack/connect/authorize', '/log-in/jetpack' ].includes( currentRoute ) ) {
+			isPopup = false;
+		}
+
+		// disable for oauth2 flows for now
+		return ! oauth2Client && isPopup;
+	};
+
+	const uxMode = shouldUseRedirectFlow() ? 'redirect' : 'popup';
+	const uxModeApple = config.isEnabled( 'sign-in-with-apple/redirect' ) ? 'redirect' : uxMode;
+
+	return (
+		// Note: we allow social sign-in on the Desktop app, but not social sign-up. Existing config flags do
+		// not distinguish between sign-in and sign-up but instead use the catch-all `signup/social` flag.
+		// Therefore we need to make an exception for the desktop app directly in this component because there
+		// are many places in which the social signup form is rendered based only on the presence of the
+		// `signup/social` config flag.
+		! config.isEnabled( 'desktop' ) && (
+			<div className="auth-form__social">
+				{ ! compact && <p>{ preventWidows( translate( 'Or create an account using:' ) ) }</p> }
+
+				<div className="auth-form__social-buttons">
+					<GoogleSocialButton
+						clientId={ config( 'google_oauth_client_id' ) }
+						responseHandler={ handleGoogleResponse }
+						uxMode={ uxMode }
+						redirectUri={ getRedirectUri( 'google' ) }
+						onClick={ () => {
+							trackLoginAndRememberRedirect( 'google' );
+						} }
+						socialServiceResponse={ socialService === 'google' ? socialServiceResponse : null }
+						startingPoint="signup"
+					/>
+
+					<AppleLoginButton
+						clientId={ config( 'apple_oauth_client_id' ) }
+						responseHandler={ handleAppleResponse }
+						uxMode={ uxModeApple }
+						redirectUri={ getRedirectUri( 'apple' ) }
+						onClick={ () => {
+							trackLoginAndRememberRedirect( 'apple' );
+						} }
+						socialServiceResponse={ socialService === 'apple' ? socialServiceResponse : null }
+						originalUrlPath={
+							// Since the signup form is only ever called from the user step, currently, we can rely on window.location.pathname
+							// to return back to the user step, which then allows us to continue on with the flow once the submitSignupStep action is called within the user step.
+							window?.location?.pathname
+						}
+						// Attach the query string to the state so we can pass it back to the server to show the correct UI.
+						// We need this because Apple doesn't allow to have dynamic parameters in redirect_uri.
+						queryString={ isWpccFlow( flowName ) ? window.location.search.slice( 1 ) : null }
+					/>
+					{ children }
+					{ ! isWoo && ! disableTosText && <SocialToS /> }
+				</div>
+				{ isWoo && ! disableTosText && <SocialToS /> }
+			</div>
+		)
+	);
+};
+
+export default SocialAuthenticationForm;

client/blocks/signup-form/social-signup-tos.jsx → client/blocks/authentication/social/social-tos.jsx

@@ -4,10 +4,10 @@ import { connect } from 'react-redux';
 import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
 
-function SocialSignupToS( props ) {
+function SocialAuthToS( props ) {
 	if ( isWooOAuth2Client( props.oauth2Client ) ) {
 		return (
-			<p className="signup-form__social-buttons-tos">
+			<p className="auth-form__social-buttons-tos">
 				{ props.translate(
 					"If you continue with Google or Apple and don't already have a WordPress.com account, you are creating an account and you agree to our {{tosLink}}Terms of Service{{/tosLink}}.",
 					{
@@ -27,7 +27,7 @@ function SocialSignupToS( props ) {
 	}
 
 	return (
-		<p className="signup-form__social-buttons-tos">
+		<p className="auth-form__social-buttons-tos">
 			{ props.translate(
 				'If you continue with Google or Apple, you agree to our' +
 					' {{tosLink}}Terms of Service{{/tosLink}}, and have' +
@@ -57,4 +57,4 @@ function SocialSignupToS( props ) {
 
 export default connect( ( state ) => ( {
 	oauth2Client: getCurrentOAuth2Client( state ),
-} ) )( localize( SocialSignupToS ) );
+} ) )( localize( SocialAuthToS ) );

client/blocks/blog-stickers/use-add-blog-sticker-mutation.js

@@ -17,7 +17,9 @@ export const useAddBlogStickerMutation = ( options = {} ) => {
 		...options,
 		onSuccess( ...args ) {
 			const [ , { blogId } ] = args;
-			queryClient.invalidateQueries( [ `blog-stickers`, blogId ] );
+			queryClient.invalidateQueries( {
+				queryKey: [ `blog-stickers`, blogId ],
+			} );
 			options.onSuccess?.( ...args );
 		},
 	} );

client/blocks/blog-stickers/use-remove-blog-sticker-mutation.js

@@ -19,7 +19,9 @@ export const useRemoveBlogStickerMutation = ( options = {} ) => {
 		...options,
 		onSuccess( ...args ) {
 			const [ , { blogId } ] = args;
-			queryClient.invalidateQueries( [ `blog-stickers`, blogId ] );
+			queryClient.invalidateQueries( {
+				queryKey: [ `blog-stickers`, blogId ],
+			} );
 			options.onSuccess?.( ...args );
 		},
 	} );

client/blocks/daily-post-button/index.jsx

@@ -1,8 +1,8 @@
+import page from '@automattic/calypso-router';
 import { Button, Gridicon } from '@automattic/components';
 import classnames from 'classnames';
 import { translate } from 'i18n-calypso';
 import { get, defer } from 'lodash';
-import page from 'page';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
 import { createRef, createElement, Component } from 'react';

client/blocks/daily-post-button/test/index.jsx

@@ -1,9 +1,9 @@
 /**
  * @jest-environment jsdom
  */
+import pageSpy from '@automattic/calypso-router';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import pageSpy from 'page';
 import { parse } from 'qs';
 import { reducer as ui } from 'calypso/state/ui/reducer';
 import { renderWithProvider } from 'calypso/test-helpers/testing-library';
@@ -16,7 +16,7 @@ jest.mock( 'calypso/reader/stats', () => ( {
 	recordGaEvent: () => {},
 	recordTrackForPost: () => {},
 } ) );
-jest.mock( 'page', () => jest.fn() );
+jest.mock( '@automattic/calypso-router', () => jest.fn() );
 jest.mock( 'calypso/components/sites-popover', () => () => <div data-testid="sites-popover" /> );
 
 const markPostSeen = jest.fn();