-
+ <>
+
+ { __(
+ 'Add this site to Automattic for Agencies by connecting now',
+ 'automattic-for-agencies-client'
+ ) }
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+ { createInterpolateElement(
+ __(
+ 'By clicking the
connect this site button, you agree to our
Terms of Service and to
share details with WordPress.com.',
+ 'automattic-for-agencies-client'
+ ),
+ {
+ strong:
,
+ tosLink: (
+
+ ),
+ shareDetailsLink: (
+
+ ),
+ }
+ ) }
+
+
+
+
+
+ );
+}
+
+/**
+ * Detail Sharing Content
+ * The copy for the "share details" information linked from the TOS.
+ *
+ * @param {object} props - Component props
+ * @param {Function} props.onCloseSharingDetailsClick - Callback to close the sharing details.
+ *
+ * @returns {React.Component} The `DetailSharingContent` component.
+ */
+function DetailSharingContent( { onCloseSharingDetailsClick } ) {
+ return (
+ <>
+
+
+
+
+
+
{ __( 'What data is synced from your site', 'automattic-for-agencies-client' ) }
+
+ { __(
+ 'Your privacy matters to us. We sync only the necessary data required to provide our Automattic for Agencies portal experiences.',
+ 'automattic-for-agencies-client'
+ ) }
+
+
+
+
+ Options: to sync site options data.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Callables: to sync for callables.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Constants: to sync for constants.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Full_Sync_Immediately: to do a full resync of the database.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Updates: to sync data about plugin, theme, and core updates.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Plugins: to sync plugin data such as deletions and installations.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Users: to sync changes to users.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Meta: to sync meta information users and other relevant objects.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Stats: to sync heartbeat stats.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+
+
{ __( 'Data we will not sync', 'automattic-for-agencies-client' ) }
+
- Posts: to sync post data.', 'automattic-for-agencies-client' ),
+ { strong:
- Comments: to sync comments data.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
- Attachments: to sync added and updated attachments.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Menus: to sync changes to the navigation menu.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Import: to sync after an import action.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
+
+ Terms: to sync terms and taxonomy tables.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
- Term_Relationships: to sync terms and taxonomy relationships.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
- Network_Options: to sync multi-site network options.',
+ 'automattic-for-agencies-client'
+ ),
+ { strong:
-
+
+
+ );
+}
+
+/**
+ * Connection Card component.
+ *
+ * @returns {React.Component} The `ConnectionCard` component.
+ */
+export default function ConnectionCard() {
+ // Toggle the card content between the default connection content and the sharing details content linked from the TOS.
+ const [ showSharingDetails, setShowSharingDetails ] = useState( false );
+ const onShowSharingDetailsClick = useCallback( () => setShowSharingDetails( true ), [] );
+ const onCloseSharingDetailsClick = useCallback( () => setShowSharingDetails( false ), [] );
+
+ return (
+
+
+ { showSharingDetails ? (
+
);
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss
index a0607c6e09227..dc958b36da4a0 100644
--- a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss
+++ b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss
@@ -1,44 +1,145 @@
.card {
- min-height: 452px;
display: flex;
flex-direction: column;
gap: 24px;
+ padding: 32px 48px;
+
+ 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;
+ }
+}
+
+.card--connection {
+ padding: 80px 48px;
@media (max-width: 959px) {
- min-height: auto;
+ padding: 16px;
}
}
-.card__heading {
- font-size: 36px;
- line-height: 40px;
- letter-spacing: -1%;
- margin: 0;
+.card--sharing {
+ gap: 32px;
+
+ @media (max-width: 959px) {
+ padding: 16px;
+ }
+}
- @media (max-width: 659px) {
- font-size: 24px;
- line-height: 32px;
- }
+.card__prose {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
}
-.check-list {
+.checklist {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
+
+ li {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 0;
+ font-size: 16px;
+ line-height: 22px;
+ letter-spacing: -2%;
+ }
+
+ li svg {
+ margin-top: -1px;
+ flex-shrink: 0;
+ }
+
+ .card--sharing & li {
+ font-size: 14px;
+ }
}
-.check-list li {
+.site-connection {
display: flex;
- // align-items: center;
- gap: 4px;
- margin-bottom: 0;
- font-size: 16px;
- line-height: 22px;
- letter-spacing: -2%;
+ flex-direction: column;
+ gap: 16px;
+
+ .terms-of-service {
+ font-size: 13px;
+ color: var(--jp-black);
+ max-width: 460px;
+
+ }
+
+ .terms-of-service__link {
+ color: var(--automattic-blue-60);
+ white-space: nowrap;
+ text-decoration: underline;
+ }
+
+ :global {
+ .components-button.is-link {
+ color: var(--automattic-blue-60);
+ white-space: nowrap;
+ text-decoration: underline;
+ }
+ }
+
}
-.check-list li svg {
- margin-top: -1px;
- flex-shrink: 0;
+.connect-button-wrapper {
+ :global {
+ .components-button {
+ background-color: var(--automattic-blue-60);
+ min-width: 178px;
+ }
+ }
+}
+
+:global {
+ .components-button.components-button--back {
+ font-size: 14px;
+ color: var(--jp-black);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ svg {
+ width: 14px;
+ height: 14px;
+ margin-right: 4px;
+ margin-top: 1px;
+ }
+ }
}
\ No newline at end of file
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/left-arrow/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/left-arrow/index.jsx
new file mode 100644
index 0000000000000..824e33b8c69d2
--- /dev/null
+++ b/projects/plugins/automattic-for-agencies-client/src/js/components/left-arrow/index.jsx
@@ -0,0 +1,10 @@
+const LeftArrow = () => (
+
+
+
+
+);
+
+export default LeftArrow;