Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial State: Replace isSocialImageGeneratorAvailable with feature check #39836

Merged
merged 6 commits into from
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check


1 change: 1 addition & 0 deletions projects/js-packages/publicize-components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export * from './src/components/share-post';
export * from './src/hooks/use-sync-post-data-to-store';
export * from './src/hooks/use-saving-post';
export * from './src/hooks/use-post-meta';
export * from './src/hooks/use-post-can-use-sig';
export * from './src/components/share-buttons';
export * from './src/components/manage-connections-modal';
export * from './src/utils/script-data';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { siteHasFeature } from '@automattic/jetpack-script-data';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { features } from '../../utils/constants';

/**
* When a post can use the Social Image Generator (SIG).
*
* @return {boolean} Whether the post can use the Social Image Generator.
*/
export function usePostCanUseSig() {
const isJetpackSocialNote = useSelect( select => {
const currentPostType = select( editorStore )
// @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript - getCurrentPostType exists on the editor store
.getCurrentPostType();

return 'jetpack-social-note' === currentPostType;
}, [] );

return ! isJetpackSocialNote && siteHasFeature( features.IMAGE_GENERATOR );
}
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default function usePublicizeConfig() {
const isRePublicizeFeatureAvailable =
isJetpackSite || getJetpackExtensionAvailability( republicizeFeatureName )?.available;
const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
const currentPostType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
const { isUserConnected } = useConnection();
const { urls } = getSocialScriptData();

Expand Down Expand Up @@ -80,11 +79,6 @@ export default function usePublicizeConfig() {
*/
const hidePublicizeFeature = isPostPublished && ! isRePublicizeFeatureAvailable;

/**\
* Returns true if the post type is a Jetpack Social Note.
*/
const isJetpackSocialNote = 'jetpack-social-note' === currentPostType;

const needsUserConnection = ! isUserConnected && ! isSimpleSite();

return {
Expand All @@ -96,11 +90,8 @@ export default function usePublicizeConfig() {
isRePublicizeUpgradableViaUpsell,
hidePublicizeFeature,
isPostAlreadyShared,
isSocialImageGeneratorAvailable:
!! getJetpackData()?.social?.isSocialImageGeneratorAvailable && ! isJetpackSocialNote,
isSocialImageGeneratorEnabled: !! getJetpackData()?.social?.isSocialImageGeneratorEnabled,
connectionsPageUrl: urls.connectionsManagementPage,
isJetpackSocialNote,
needsUserConnection,
};
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const socialImageGeneratorSettingsSelectors = {
getSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings,
isSocialImageGeneratorAvailable: state => state.socialImageGeneratorSettings.available,
isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled,
isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating,
getSocialImageGeneratorDefaultTemplate: state => state.socialImageGeneratorSettings.template,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ type SocialImageGeneratorSettingsSelectors = {
template: string;
};
};
isSocialImageGeneratorAvailable: () => boolean;
isSocialImageGeneratorEnabled: () => boolean;
isUpdatingSocialImageGeneratorSettings: () => boolean;
getSocialImageGeneratorDefaultTemplate: () => string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const features = {
ENHANCED_PUBLISHING: 'social-enhanced-publishing',
IMAGE_GENERATOR: 'social-image-generator',
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './get-supported-additional-connections';
export * from './request-external-access';
export * from './types';
export * from './script-data';
export * from './constants';
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: other
Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check


Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import {
PublicizePanel,
SocialImageGeneratorPanel,
usePublicizeConfig,
usePostCanUseSig,
PostPublishPanels,
GlobalModals,
} from '@automattic/jetpack-publicize-components';
Expand All @@ -29,7 +29,7 @@ export const name = 'publicize';
const PublicizeSettings = () => {
const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
useModuleStatus( name );
const { isSocialImageGeneratorAvailable } = usePublicizeConfig();
const postCanUseSig = usePostCanUseSig();

let children = null;
let panels = null;
Expand All @@ -50,12 +50,12 @@ const PublicizeSettings = () => {
<PublicizePanel>
<UpsellNotice />
</PublicizePanel>
{ isSocialImageGeneratorAvailable && <SocialImageGeneratorPanel /> }
{ postCanUseSig && <SocialImageGeneratorPanel /> }
</>
);
panels = (
<>
<PrePublishPanels isSocialImageGeneratorAvailable={ isSocialImageGeneratorAvailable } />
<PrePublishPanels />
<PostPublishPanels />
<GlobalModals />
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import {
SocialImageGeneratorPanel,
useSyncPostDataToStore,
useSocialMediaConnections,
usePostCanUseSig,
} from '@automattic/jetpack-publicize-components';
import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { __ } from '@wordpress/i18n';
import UpsellNotice from './components/upsell';

const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => {
const PrePublishPanels = () => {
useSyncPostDataToStore();

const { hasEnabledConnections } = useSocialMediaConnections();
const postCanUseSig = usePostCanUseSig();

return (
<>
Expand All @@ -31,7 +33,7 @@ const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => {
</PublicizePanel>
</PluginPrePublishPanel>

{ isSocialImageGeneratorAvailable && (
{ postCanUseSig && (
<PluginPrePublishPanel
initialOpen
title={ __( 'Social Image Generator', 'jetpack' ) }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check


39 changes: 20 additions & 19 deletions projects/plugins/social/src/js/components/admin-page/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import { useConnection } from '@automattic/jetpack-connection';
import {
hasSocialPaidFeatures,
store as socialStore,
features,
} from '@automattic/jetpack-publicize-components';
import { siteHasFeature } from '@automattic/jetpack-script-data';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
import React from 'react';
Expand All @@ -34,31 +36,30 @@ const Admin = () => {

const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] );

const {
isModuleEnabled,
showPricingPage,
pluginVersion,
isSocialImageGeneratorAvailable,
isUpdatingJetpackSettings,
} = useSelect( select => {
const store = select( socialStore );
return {
isModuleEnabled: store.isModuleEnabled(),
showPricingPage: store.showPricingPage(),
pluginVersion: store.getPluginVersion(),
isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(),
isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(),
};
} );
const { isModuleEnabled, showPricingPage, pluginVersion, isUpdatingJetpackSettings } = useSelect(
select => {
const store = select( socialStore );
return {
isModuleEnabled: store.isModuleEnabled(),
showPricingPage: store.showPricingPage(),
pluginVersion: store.getPluginVersion(),
isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(),
};
}
);

const hasEnabledModule = useRef( isModuleEnabled );

useEffect( () => {
if ( isModuleEnabled && ! hasEnabledModule.current && isSocialImageGeneratorAvailable ) {
if (
isModuleEnabled &&
! hasEnabledModule.current &&
siteHasFeature( features.IMAGE_GENERATOR )
) {
hasEnabledModule.current = true;
refreshJetpackSocialSettings();
}
}, [ isModuleEnabled, isSocialImageGeneratorAvailable, refreshJetpackSocialSettings ] );
}, [ isModuleEnabled, refreshJetpackSocialSettings ] );

const moduleName = `Jetpack Social ${ pluginVersion }`;

Expand Down Expand Up @@ -93,7 +94,7 @@ const Admin = () => {
<AdminSection>
<SocialModuleToggle />
{ isModuleEnabled && <SocialNotesToggle disabled={ isUpdatingJetpackSettings } /> }
{ isModuleEnabled && isSocialImageGeneratorAvailable && (
{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
) }
</AdminSection>
Expand Down
1 change: 0 additions & 1 deletion projects/plugins/social/src/js/components/types/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ type SocialImageGeneratorSettingsSelectors = {
template: string;
};
};
isSocialImageGeneratorAvailable: () => boolean;
isSocialImageGeneratorEnabled: () => boolean;
isUpdatingSocialImageGeneratorSettings: () => boolean;
getSocialImageGeneratorDefaultTemplate: () => string;
Expand Down
10 changes: 6 additions & 4 deletions projects/plugins/social/src/js/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
useSyncPostDataToStore,
PostPublishPanels,
GlobalModals,
usePostCanUseSig,
} from '@automattic/jetpack-publicize-components';
import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
import { PanelBody } from '@wordpress/components';
Expand Down Expand Up @@ -51,8 +52,9 @@ const JetpackSocialSidebar = () => {
const closeModal = useCallback( () => setIsModalOpened( false ), [] );

const { hasConnections, hasEnabledConnections } = useSocialMediaConnections();
const { isPublicizeEnabled, hidePublicizeFeature, isSocialImageGeneratorAvailable } =
usePublicizeConfig();
const { isPublicizeEnabled, hidePublicizeFeature } = usePublicizeConfig();
const postCanUseSig = usePostCanUseSig();

const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
const PanelDescription = () => (
<Description
Expand All @@ -79,7 +81,7 @@ const JetpackSocialSidebar = () => {
<PublicizePanel>
<PanelDescription />
</PublicizePanel>
{ isSocialImageGeneratorAvailable && <SocialImageGeneratorPanel /> }
{ postCanUseSig && <SocialImageGeneratorPanel /> }
<PanelBody title={ __( 'Social Previews', 'jetpack-social' ) }>
<SocialPreviewsPanel openModal={ openModal } />
</PanelBody>
Expand All @@ -95,7 +97,7 @@ const JetpackSocialSidebar = () => {
</PublicizePanel>
</PluginPrePublishPanel>

{ isSocialImageGeneratorAvailable && (
{ postCanUseSig && (
<PluginPrePublishPanel
initialOpen
title={ __( 'Social Image Generator', 'jetpack-social' ) }
Expand Down
Loading