diff --git a/projects/plugins/social/changelog/change-social-admin-page-upsell b/projects/plugins/social/changelog/change-social-admin-page-upsell
new file mode 100644
index 0000000000000..13a39c4dabbb6
--- /dev/null
+++ b/projects/plugins/social/changelog/change-social-admin-page-upsell
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Move the admin upsell to the toggle section
diff --git a/projects/plugins/social/composer.json b/projects/plugins/social/composer.json
index 9bae898b64680..54da065ad56cc 100644
--- a/projects/plugins/social/composer.json
+++ b/projects/plugins/social/composer.json
@@ -84,6 +84,6 @@
"automattic/jetpack-autoloader": true,
"automattic/jetpack-composer-plugin": true
},
- "autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ4_4_1_alpha"
+ "autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ4_5_0_alpha"
}
}
diff --git a/projects/plugins/social/jetpack-social.php b/projects/plugins/social/jetpack-social.php
index 29b7c849eaab9..635250cd12bc3 100644
--- a/projects/plugins/social/jetpack-social.php
+++ b/projects/plugins/social/jetpack-social.php
@@ -4,7 +4,7 @@
* Plugin Name: Jetpack Social
* Plugin URI: https://wordpress.org/plugins/jetpack-social
* Description: Share your site’s posts on several social media networks automatically when you publish a new post.
- * Version: 4.4.1-alpha
+ * Version: 4.5.0-alpha
* Author: Automattic - Jetpack Social team
* Author URI: https://jetpack.com/social/
* License: GPLv2 or later
diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js
index e6e77c74d8c9a..7db187d6a593d 100644
--- a/projects/plugins/social/src/js/components/header/index.js
+++ b/projects/plugins/social/src/js/components/header/index.js
@@ -1,11 +1,9 @@
import {
Container,
- ContextualUpgradeTrigger,
Col,
H3,
Button,
SocialIcon,
- getRedirectUrl,
getUserLocale,
Text,
} from '@automattic/jetpack-components';
@@ -30,10 +28,7 @@ const Header = () => {
newPostUrl,
postsCount,
totalShareCount,
- siteSuffix,
- blogID,
showShareLimits,
- hasPaidFeatures,
useAdminUiV1,
} = useSelect( select => {
const store = select( socialStore );
@@ -44,10 +39,7 @@ const Header = () => {
newPostUrl: `${ store.getAdminUrl() }post-new.php`,
postsCount: store.getSharedPostsCount(),
totalShareCount: store.getTotalSharesCount(),
- siteSuffix: store.getSiteSuffix(),
- blogID: store.getBlogID(),
showShareLimits: store.showShareLimits(),
- hasPaidFeatures: store.hasPaidFeatures() || store.hasPaidPlan(),
useAdminUiV1: store.useAdminUiV1(),
};
} );
@@ -125,18 +117,6 @@ const Header = () => {
] }
/>
) }
- { ! hasPaidFeatures ? (
-
- ) : null }
>
diff --git a/projects/plugins/social/src/js/components/header/styles.module.scss b/projects/plugins/social/src/js/components/header/styles.module.scss
index 09a79c7c6af6a..ff444d97a5e72 100644
--- a/projects/plugins/social/src/js/components/header/styles.module.scss
+++ b/projects/plugins/social/src/js/components/header/styles.module.scss
@@ -55,10 +55,6 @@
}
}
-.cut {
- margin-top: calc( var( --spacing-base ) * 2 );
-}
-
.connection-error-col {
margin-top: 25px;
}
diff --git a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
index b1be442997781..3bfb2f23d3c81 100644
--- a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
+++ b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
@@ -1,21 +1,39 @@
-import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
+import {
+ Button,
+ ContextualUpgradeTrigger,
+ Text,
+ getRedirectUrl,
+ useBreakpointMatch,
+} from '@automattic/jetpack-components';
import { ConnectionManagement, SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
import { ExternalLink } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
import React, { useCallback } from 'react';
import ToggleSection from '../toggle-section';
import { SocialStoreSelectors } from '../types/types';
import styles from './styles.module.scss';
const SocialModuleToggle: React.FC = () => {
- const { connectionsAdminUrl, isModuleEnabled, isUpdating, useAdminUiV1 } = useSelect( select => {
+ const {
+ connectionsAdminUrl,
+ isModuleEnabled,
+ isUpdating,
+ useAdminUiV1,
+ siteSuffix,
+ blogID,
+ hasPaidFeatures,
+ } = useSelect( select => {
const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
return {
isModuleEnabled: store.isModuleEnabled(),
isUpdating: store.isUpdatingJetpackSettings(),
connectionsAdminUrl: store.getConnectionsAdminUrl(),
useAdminUiV1: store.useAdminUiV1(),
+ siteSuffix: store.getSiteSuffix(),
+ blogID: store.getBlogID(),
+ hasPaidFeatures: store.hasPaidFeatures(),
};
}, [] );
@@ -74,6 +92,21 @@ const SocialModuleToggle: React.FC = () => {
{ __( 'Learn more', 'jetpack-social' ) }
+ { ! hasPaidFeatures ? (
+
+ ) : null }
{ renderConnectionManagement() }
);
diff --git a/projects/plugins/social/src/js/components/social-module-toggle/styles.module.scss b/projects/plugins/social/src/js/components/social-module-toggle/styles.module.scss
index 637f0a145b026..14ad73dc7fa04 100644
--- a/projects/plugins/social/src/js/components/social-module-toggle/styles.module.scss
+++ b/projects/plugins/social/src/js/components/social-module-toggle/styles.module.scss
@@ -27,4 +27,13 @@
@media ( min-width: 600px ) {
grid-column: 2;
}
-}
\ No newline at end of file
+}
+
+.cut {
+ grid-column: 2;
+ margin-top: var( --spacing-base );
+
+ &.small {
+ grid-column: span 2;
+ }
+}
diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts
index d23ebcb3154ec..a2fd1de1c54df 100644
--- a/projects/plugins/social/src/js/components/types/types.ts
+++ b/projects/plugins/social/src/js/components/types/types.ts
@@ -9,6 +9,7 @@ type JetpackSettingsSelectors = {
isUpdatingJetpackSettings: () => boolean;
hasPaidPlan: () => boolean;
useAdminUiV1: () => boolean;
+ hasPaidFeatures: () => boolean;
};
type ConnectionDataSelectors = {
@@ -27,6 +28,8 @@ type SharesDataSelectors = {
type SiteDataSelectors = {
getSiteData: () => Array< object >;
getSiteTitle: () => string;
+ getSiteSuffix: () => string;
+ getBlogID: () => number;
};
type SocialImageGeneratorSettingsSelectors = {