A4A Plugin: Add ConnectedCard component for site connected state (#36747

)

projects/js-packages/base-styles/changelog/remove-a4a-colors

@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+Removed automattic brand colors.

projects/js-packages/base-styles/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-base-styles",
-	"version": "0.6.21",
+	"version": "0.6.22-alpha",
 	"description": "Jetpack components base styles",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/base-styles/#readme",
 	"bugs": {

projects/js-packages/base-styles/root-variables.scss

@@ -73,7 +73,4 @@
   --jp-gap: 16px;
 
   --jp-highlight: #3858e9;
-
-  --automattic-blue-60: #0088BF;
-	--automattic-blue-80: #021A23;
 }

projects/js-packages/components/changelog/add-a4a-connected-card

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added connected card to the A4A plugin.

projects/js-packages/components/package.json

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

projects/plugins/automattic-for-agencies-client/changelog/add-connected-state

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added connected state content and site disconnection flow.

projects/plugins/automattic-for-agencies-client/package.json

@@ -26,6 +26,8 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
+		"@automattic/color-studio": "2.6.0",
+		"@automattic/jetpack-api": "workspace:*",
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",

projects/plugins/automattic-for-agencies-client/src/js/components/admin-page/index.jsx

@@ -3,14 +3,14 @@ import {
 	AdminSectionHero,
 	Container,
 	Col,
-	PricingCard,
+	ThemeProvider,
 } from '@automattic/jetpack-components';
 import { CONNECTION_STORE_ID } from '@automattic/jetpack-connection';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
+import ConnectedCard from '../connected-card';
 import ConnectionCard from '../connection-card';
-import styles from './styles.module.scss';
 
 const Admin = () => {
 	const connectionStatus = useSelect(
@@ -20,69 +20,20 @@ const Admin = () => {
 	const { isUserConnected, isRegistered } = connectionStatus;
 	const showConnectionCard = ! isRegistered || ! isUserConnected;
 	return (
-		<AdminPage
-			moduleName={ __( 'Automattic For Agencies Client', 'automattic-for-agencies-client' ) }
-		>
-			<AdminSectionHero>
-				{ showConnectionCard ? (
+		<ThemeProvider targetDom={ document.body }>
+			<AdminPage
+				moduleName={ __( 'Automattic For Agencies Client', 'automattic-for-agencies-client' ) }
+			>
+				<AdminSectionHero>
 					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 						<Col sm={ 4 } md={ 8 } lg={ 12 }>
-							<ConnectionSection />
+							{ showConnectionCard ? <ConnectionCard /> : <ConnectedCard /> }
 						</Col>
 					</Container>
-				) : (
-					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
-						<Col>
-							<div id="jp-admin-notices" className="automattic-for-agencies-client-jitm-card" />
-						</Col>
-						<Col sm={ 4 } md={ 6 } lg={ 6 }>
-							<h1 className={ styles.heading }>
-								{ __( 'The plugin headline.', 'automattic-for-agencies-client' ) }
-							</h1>
-							<ul className={ styles[ 'jp-product-promote' ] }>
-								<li>
-									{ __(
-										'All the amazing things this plugin does',
-										'automattic-for-agencies-client'
-									) }
-								</li>
-								<li>
-									{ __(
-										'Presented in a list of amazing features',
-										'automattic-for-agencies-client'
-									) }
-								</li>
-								<li>
-									{ __( 'And all the benefits you will get', 'automattic-for-agencies-client' ) }
-								</li>
-							</ul>
-						</Col>
-						<Col lg={ 1 } md={ 1 } sm={ 0 } />
-						<Col sm={ 4 } md={ 5 } lg={ 5 }>
-							<PricingCard
-								title={ __( 'Automattic For Agencies Client', 'automattic-for-agencies-client' ) }
-								priceBefore={ 9 }
-								priceAfter={ 4.5 }
-								ctaText={ __(
-									'Get Automattic For Agencies Client',
-									'automattic-for-agencies-client'
-								) }
-								infoText={ __(
-									'Special introductory pricing, all renewals are at full price. 14 day money back guarantee.',
-									'automattic-for-agencies-client'
-								) }
-							/>
-						</Col>
-					</Container>
-				) }
-			</AdminSectionHero>
-		</AdminPage>
+				</AdminSectionHero>
+			</AdminPage>
+		</ThemeProvider>
 	);
 };
 
 export default Admin;
-
-const ConnectionSection = () => {
-	// const { apiNonce, apiRoot, registrationNonce } = window.automatticForAgenciesClientInitialState;
-	return <ConnectionCard />;
-};

projects/plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss

@@ -1,12 +1,67 @@
+@import '~@automattic/color-studio/dist/color-variables';
+
 .card {
-	background-color: var( --automattic-blue-80 );
+	background-color: $studio-automattic-blue-90;
 	border-radius: 14px;
 	display: flex;
 	padding: 8px;
 
 	@media ( max-width: 959px ) {
 		flex-direction: column;
 	}
+
+	h1, h2, h3, h4, h5, h6 {
+		letter-spacing: -1%;
+		margin: 0;
+	}
+
+	h1 {
+		font-size: 36px;
+		line-height: 40px;
+
+		@media (max-width: 659px) {
+			font-size: 24px;
+			line-height: 32px;
+		}
+	}
+
+	h2 {
+		font-size: 32px;
+		line-height: 35px;
+		font-weight: 510;
+
+		@media (max-width: 659px) {
+			font-size: 24px;
+			line-height: 32px;
+		}
+	}
+
+	p {
+		margin: 0;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+	}
+
+	:global {
+		.components-button.is-primary {
+			background-color: $studio-automattic-blue;
+			min-width: 178px;
+		}
+
+		.components-button.is-primary:hover {
+			background-color: $studio-automattic-blue-60;
+		}
+
+		.components-button.is-link {
+			color: $studio-automattic-blue;
+			white-space: nowrap;
+			text-decoration: underline;
+		}
+	}
 }
 
 .card__column {

projects/plugins/automattic-for-agencies-client/src/js/components/check-circle-icon/index.jsx

@@ -0,0 +1,26 @@
+import { Path, SVG, Rect } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * Checkmark Circle icon component
+ *
+ * @param {object} props        - Component props
+ * @param {string} props.color  - Color code for the checkmark
+ * @returns {React.ReactElement} Component template
+ */
+export default function CheckCircleIcon( { color = '#008A20' } ) {
+	return (
+		<SVG
+			clipRule="evenodd"
+			fillRule="evenodd"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Rect width="20" height="20" rx="10" fill={ color } />
+			<Path d="M15.2011 5.49999L8.52564 14.4777L4.65482 11.5996" stroke="white" strokeWidth="1.5" />
+		</SVG>
+	);
+}

projects/plugins/automattic-for-agencies-client/src/js/components/close-circle-icon/index.jsx

@@ -0,0 +1,31 @@
+import { Path, Rect, SVG } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * Close circle icon component
+ *
+ * @param {object} props        - Component props
+ * @param {string} props.color  - Color code for the icon
+ * @returns {React.ReactElement} Component template
+ */
+export default function CloseCircleIcon( { color = '#D63638' } ) {
+	return (
+		<SVG
+			clipRule="evenodd"
+			fillRule="evenodd"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Rect width="20" height="20" rx="10" fill={ color } />
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M9.9999 10.7956L12.7841 13.5799L13.5796 12.7844L10.7954 10.0001L13.5796 7.21591L12.7841 6.42042L9.9999 9.20465L7.21566 6.42041L6.42017 7.21591L9.20441 10.0001L6.42017 12.7844L7.21567 13.5799L9.9999 10.7956Z"
+				fill="white"
+			/>
+		</SVG>
+	);
+}