Merge branch 'master' into add/boost-e2e-tests

* master: (22 commits)
  Update storybook monorepo to v6.4.0 (#21897)
  Refresh the site's modules and settings after successful product activation (#21886)
  Plugin Install: Bump MC stat on success or fail. (#21893)
  Nav Unification: Use correct user capability for the Inbox menu item (#21882)
  Jetpack: Extend disconnection dialog component to handle multiple steps and accept more props (#21048)
  Disable CSSTidy property shorthand optimization in the editor or headstart (#21891)
  Connection UI: Update Composer instructions in README.md (#21890)
  Partner Compatibility: Adding a unique connection screen for customers who receive a coupon from a Jetpack partner (#21813)
  Search package: move search dashboard to package - the base (#21865)
  JITM: wrap CTA below text on small viewports (#21688)
  Licensing JS Package – fix icon positioning and width (#21878)
  JITM: new JS and CSS builder (#21874)
  Support site_intent for `/me/sites` endpoint (#21880)
  Don't render Critical CSS while generating CritCSS. (#21879)
  ConnectScreen: make button full width on small screens (#21683)
  Improve the copy of the license activation banner (#21876)
  Rename Webpack-built files back from `.min.js` and remove hashes (#21748)
  Search: Migrate more helper classes to package (#21751)
  Search: migrate/add search rest API (#21584)
  Add initial state to the connection package (#21864)
  ...

.eslintignore

@@ -47,6 +47,7 @@ projects/github-actions/*/dist
 projects/packages/*/wordpress
 projects/packages/connection-ui/build
 projects/packages/identity-crisis/build
+projects/packages/jitm/build
 projects/packages/jitm/src/js/jetpack-jitm.js
 projects/packages/lazy-images/dist
 projects/plugins/backup/build

.github/renovate.json

@@ -20,6 +20,7 @@
 				"@automattic/jetpack-connection",
 				"@automattic/jetpack-idc",
 				"@automattic/jetpack-licensing",
+				"@automattic/jetpack-partner-coupon",
 				"@automattic/jetpack-storybook",
 				"@automattic/jetpack-webpack-config",
 				"@automattic/remove-asset-webpack-plugin",

projects/js-packages/api/changelog/add-feature-dashboard-new-state-store

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Search: Added search REST API

projects/js-packages/api/changelog/update-extend-disconnect-dialog-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package version

projects/js-packages/api/index.jsx

@@ -459,6 +459,20 @@ function JetpackRestApiClient( root, nonce ) {
 			} )
 				.then( checkStatus )
 				.then( parseJsonResponse ),
+		fetchSearchPlanInfo: () =>
+			getRequest( `${ apiRoot }jetpack/v4/search/plan`, getParams )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
+		fetchSearchSettings: () =>
+			getRequest( `${ apiRoot }jetpack/v4/search/settings`, getParams )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
+		updateSearchSettings: newSettings =>
+			postRequest( `${ apiRoot }jetpack/v4/search/settings`, postParams, {
+				body: JSON.stringify( newSettings ),
+			} )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
 	};
 
 	/**

projects/js-packages/api/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-api",
-	"version": "0.7.1-alpha",
+	"version": "0.8.0-alpha",
 	"description": "Jetpack Api Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/js-packages/components/changelog/add-decorative-card-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Add a new DecorativeCard component to the components package.

projects/js-packages/components/components/decorative-card/index.jsx

@@ -0,0 +1,68 @@
+/**
+ * External Dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+
+/**
+ * A decorative card used in the disconnection flow.
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} - The DecorativeCard component.
+ */
+
+const DecorativeCard = props => {
+	const { format, icon, imageUrl } = props;
+
+	const renderIcon = () => {
+		if ( icon ) {
+			return (
+				<div className="jp-components__decorative-card__icon-container">
+					<span
+						className={
+							'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon
+						}
+					></span>
+				</div>
+			);
+		}
+	};
+
+	return (
+		<div
+			className={
+				'jp-components__decorative-card ' +
+				( format ? 'jp-components__decorative-card--' + format : '' )
+			}
+		>
+			<div
+				className="jp-components__decorative-card__image"
+				style={ { backgroundImage: imageUrl ? `url( ${ imageUrl } )` : '' } }
+			></div>
+			<div className="jp-components__decorative-card__content">
+				<div className="jp-components__decorative-card__lines"></div>
+			</div>
+			{ renderIcon() }
+		</div>
+	);
+};
+
+DecorativeCard.propTypes = {
+	/** The format of the card (horizontal or vertical) */
+	format: PropTypes.oneOf( [ 'horizontal', 'vertical' ] ),
+	/** An icon slug that can be used to show an icon (options are limited to what is in the stylesheet) */
+	icon: PropTypes.oneOf( [ 'unlink' ] ),
+	/** URL for an image to show in the card. */
+	imageUrl: PropTypes.string,
+};
+
+DecorativeCard.defaultProps = {
+	format: 'horizontal',
+};
+
+export default DecorativeCard;

projects/js-packages/components/components/decorative-card/stories/index.jsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import DecorativeCard from '../index.jsx';
+
+export default {
+	title: 'Playground/Decorative Card',
+	component: DecorativeCard,
+};
+
+// Export additional stories using pre-defined values
+const Template = args => <DecorativeCard { ...args } />;
+
+// Export Default story
+export const _default = Template.bind( {} );
+
+export const Unlink = Template.bind( {} );
+Unlink.args = {
+	icon: 'unlink',
+};

projects/js-packages/components/components/decorative-card/style.scss

@@ -0,0 +1,116 @@
+@import '~@automattic/jetpack-base-styles/style';
+
+.jp-components__decorative-card {
+	display: flex;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: 0 0 15px var( --jp-gray );
+	position: relative;
+	width: 360px;
+	max-width: 100%;
+	height: 280px;
+	margin: 0 auto;
+	margin-bottom: 3rem;
+
+	&__image,
+	&__content {
+		width: 50%;
+	}
+
+	&__image {
+		background: var( --jp-gray );
+		background-size: cover;
+		position: relative;
+
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 24px;
+			left: 24px;
+			width: 38px;
+			height: 8px;
+			background-image: url('data:image/svg+xml;uf8,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
+		}
+	}
+
+	&__content {
+		background: #FFFFFF;
+		padding: 2rem;
+	}
+
+	&__icon-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80px;
+		height: 80px;
+		background: var(--jp-red);
+		border-radius: 50px;
+	}
+
+	&__icon {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		background-position: center, center;
+		background-repeat: no-repeat;
+
+		&--unlink {
+			background-image: url('data:image/svg+xml;uf8,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
+		}
+	}
+
+	&__lines {
+		display: block;
+		width: 100%;
+		height: 12px;
+		border-radius: 6px;
+		background: #E9EFF5;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 12px;
+			border-radius: 6px;
+			background: #E9EFF5;
+			position: relative;
+			top: calc(100% + 16px);
+		}
+
+		&:after {
+			top: calc(100% + 32px);
+			width: 75%;
+		}
+	}
+
+	// Variants
+	&--vertical {
+		flex-direction: column;
+
+		.jp-components__decorative-card__image,
+		.jp-components__decorative-card__content {
+			width: 100%;
+			height: 50%;
+		}
+
+		.jp-components__decorative-card__lines {
+			max-width: 135px;
+			margin-left: auto;
+			margin-right: auto;
+
+			&::before,
+			&::after {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+}

projects/js-packages/components/index.jsx

@@ -21,3 +21,4 @@ export { default as JetpackFooter } from './components/jetpack-footer';
 export { default as Spinner } from './components/spinner';
 export { default as ActionButton } from './components/action-button';
 export { default as PricingCard } from './components/pricing-card';
+export { default as DecorativeCard } from './components/decorative-card';

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.6.4-alpha",
+	"version": "0.7.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/js-packages/connection/README.md

@@ -3,6 +3,25 @@ Connection Package
 
 The package encapsulates the Connection functionality.
 
+## Initial State
+
+The Jetpack Connection composer package can provide the initial state for the connection components to save your application from having to do one additional API request to fetch information.
+
+In order to do that, make sure to attach the Initial State inline script to your app when you enqueue it.
+
+Example:
+
+```PHP
+use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
+// ...
+function my_app_enqueue_script() {
+	// ...
+	wp_enqueue_script( 'my-app-script' );
+	wp_add_inline_script( 'my-app-script', Connection_Initial_State::render(), 'before' );
+}
+```
+
+# Components
 ## Component `ConnectScreen`
 The component implements the connection screen page, and loads the `ConnectButton` component to handle the whole connection flow.
 
@@ -267,38 +286,3 @@ export default withSelect( select => {
 	}
 } )( SampleComponent );
 ```
-
-### Reusing Connection Status 
-
-When the connection screen is loaded for the first time, it queries the API to load the current connection status.
-This request is often excessive, as the plugin can provide connection status from its own initial state.
-This will save one API request, so the connection screen will load a bit faster (significantly faster on slow connections). 
-
-To do that, you need to supply the RNA Connection package store with the data as early in the process as possible,
-before it requests the data from the API.
-
-Here's an example of how to do that:
-
-```jsx
-import { withDispatch } from '@wordpress/data';
-import { ConnectScreen, CONNECTION_STORE_ID } from '@automattic/jetpack-connection';
-
-const PluginDashboard = props => {
-	props.setConnectionStatus( props.connectionStatusFromInitialState );
-};
-
-export default withDispatch( dispatch => {
-	return {
-		setConnectionStatus: connectionStatus => {
-		    // Informing the store that we're starting the data resolution process (so it wouldn't send the API request).
-			dispatch( CONNECTION_STORE_ID ).startResolution( 'getConnectionStatus', [] );
-
-			// Supplying the data to the store.
-			dispatch( CONNECTION_STORE_ID ).setConnectionStatus( connectionStatus );
-
-			// Informing the store that resolving is complete, so it no longer needs to send that API request.
-			dispatch( CONNECTION_STORE_ID ).finishResolution( 'getConnectionStatus', [] );
-		},
-	};
-} )
-```

projects/js-packages/connection/changelog/add-feature-dashboard-new-state-store

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/js-packages/connection/changelog/add-initial-state-to-connection

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Fetches the initial state from the global variable provided by the connection package

projects/js-packages/connection/changelog/feature-move-search-dashboard-to-package

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/js-packages/connection/changelog/fix-connection-screen-cta-width

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+ConnectScreen: make button full width on small viewports

projects/js-packages/connection/changelog/update-connect-screen-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+ConnectScreen: Fix custom grid and background color.

projects/js-packages/connection/changelog/update-extend-disconnect-dialog-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Extend functionality of the disconnect modal to allow it to be used in more contexts

projects/js-packages/connection/components/connect-screen/basic/style.scss

@@ -2,7 +2,6 @@
 @import '@wordpress/base-styles/mixins';
 
 .jp-connection__connect-screen {
-
 	&__loading {
 		display: none;
 	}
@@ -19,7 +18,12 @@
 			max-width: 100%;
 
 			&:disabled {
-				color: hsla(0,0%,100%,.4);
+				color: hsla( 0, 0%, 100%, 0.4 );
+			}
+
+			@media ( max-width: $break-medium ) {
+				max-width: none;
+				width: 100%;
 			}
 		}
 	}