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 = {