Split PublicizeForm component (#34612)

* Jetpack Social | Warn the user that their scheduled posts won't get shared if they will get over limits. (#34183) * Enhance RecordBarMeter component with `className` * Add changelog * Add store types * Update store selectors and actions * Update consumer hook to use new selectors * Create useShareLimits hook * Move `ShareCounter` to publicize-components and name it `ShareLimitsBar` * Create separate notice components * Fix the post editor notices * Update Jetpack Social admin page to use the new meter bar * Remove unused code left after #34111 * Add changelog * Fix share count * Update index.js * Include active connections count for notices * Fix i18n build error * Enhance RecordBarMeter component with `className` * Add changelog * Extract constants and improve types * Extract messages to utility function * Enhance RecordBarMeter component with `className` * Add changelog * Fix up versions * Revert "Remove unused code left after #34111" This reverts commit ca45999. * Use @wordpress/element instead of react * Fix messaging * Let TS infer type * Combine the share limits logic into a single useSelect call * Fix the limits shown even after a paid plan * Add unit tests for sharing data store (#34206) * Enhance RecordBarMeter component with `className` * Add changelog * Add store types * Update store selectors and actions * Update consumer hook to use new selectors * Create useShareLimits hook * Move `ShareCounter` to publicize-components and name it `ShareLimitsBar` * Create separate notice components * Fix the post editor notices * Update Jetpack Social admin page to use the new meter bar * Remove unused code left after #34111 * Add changelog * Fix share count * Update index.js * Include active connections count for notices * Fix i18n build error * Enhance RecordBarMeter component with `className` * Add changelog * Extract constants and improve types * Add types/jest * Add tests for sharesData selectors * Add tests for useShareLimits hook * rename to *.test.js * extract utility * Create add-tests-for-sharing-data * Update shares-data.test.js * Extract messages to utility function * Use the messages from utility function * Enhance RecordBarMeter component with `className` * Add changelog * Fix up versions * Revert "Remove unused code left after #34111" This reverts commit ca45999. * Use @wordpress/element instead of react * Fix messaging * Let TS infer type * Combine the share limits logic into a single useSelect call * Fix the limits shown even after a paid plan * Enhance RecordBarMeter component with `className` * Add changelog * Enhance RecordBarMeter component with `className` * Add changelog * Jetpack Social | Warn the user that their scheduled posts won't get shared if they will get over limits. (#34183) * Enhance RecordBarMeter component with `className` * Add changelog * Add store types * Update store selectors and actions * Update consumer hook to use new selectors * Create useShareLimits hook * Move `ShareCounter` to publicize-components and name it `ShareLimitsBar` * Create separate notice components * Fix the post editor notices * Update Jetpack Social admin page to use the new meter bar * Remove unused code left after #34111 * Add changelog * Fix share count * Update index.js * Include active connections count for notices * Fix i18n build error * Enhance RecordBarMeter component with `className` * Add changelog * Extract constants and improve types * Extract messages to utility function * Enhance RecordBarMeter component with `className` * Add changelog * Fix up versions * Revert "Remove unused code left after #34111" This reverts commit ca45999. * Use @wordpress/element instead of react * Fix messaging * Let TS infer type * Combine the share limits logic into a single useSelect call * Fix the limits shown even after a paid plan * Update tests * Fix up versions * Jetpack Social| Fix scheduled post double count (#34323) * Update store selectors and resolvers to save initial connections * Update useShareLimits hook to subtract scheduled post if editing one * Update ShareCountInfo to subtract the scheduled post from count * Add changelog * Fix versions * changelog!!!! * Jetpack Social | Warn the user that their scheduled posts won't get shared if they will get over limits. (#34183) * Enhance RecordBarMeter component with `className` * Add changelog * Add store types * Update store selectors and actions * Update consumer hook to use new selectors * Create useShareLimits hook * Move `ShareCounter` to publicize-components and name it `ShareLimitsBar` * Create separate notice components * Fix the post editor notices * Update Jetpack Social admin page to use the new meter bar * Remove unused code left after #34111 * Add changelog * Fix share count * Update index.js * Include active connections count for notices * Fix i18n build error * Enhance RecordBarMeter component with `className` * Add changelog * Extract constants and improve types * Extract messages to utility function * Enhance RecordBarMeter component with `className` * Add changelog * Fix up versions * Revert "Remove unused code left after #34111" This reverts commit ca45999. * Use @wordpress/element instead of react * Fix messaging * Let TS infer type * Combine the share limits logic into a single useSelect call * Fix the limits shown even after a paid plan * Delete unused PublicizePanel component * Create smaller components out of PublicizeForm * Use the newly created smaller components in `PublicizeForm` * Update types.ts * Fix jsdocs * Fix up versions * changelog * Clean up PublicizeForm consumer component * Restore changes messed up in rebase * Restore description * Fix types * Fix types for test written in TS
Automattic · Dec 14, 2023 · a8efe5a · a8efe5a
1 parent 70c2217
commit a8efe5a
Show file tree

Hide file tree

Showing 20 changed files with 996 additions and 901 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/publicize-components/changelog/update-split-publicize-form-component b/projects/js-packages/publicize-components/changelog/update-split-publicize-form-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Splitted PublicizeForm component into smaller ones
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
@@ -54,6 +54,7 @@
 		"@testing-library/dom": "8.20.1",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.5.1",
+		"@types/jest": "29.5.10",
 		"@types/react": "18.2.33",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.30.0",
 		"@wordpress/core-data": "6.24.0",

diff --git a/projects/js-packages/publicize-components/src/components/form/advanced-plan-nudge.tsx b/projects/js-packages/publicize-components/src/components/form/advanced-plan-nudge.tsx
@@ -0,0 +1,44 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { getSiteFragment } from '@automattic/jetpack-shared-extension-utils';
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { usePublicizeConfig } from '../../..';
+import useDismissNotice from '../../hooks/use-dismiss-notice';
+import Notice from '../notice';
+
+const MONTH_IN_SECONDS = 30 * 24 * 60 * 60;
+
+export const AdvancedPlanNudge: React.FC = () => {
+	const { shouldShowAdvancedPlanNudge } = usePublicizeConfig();
+
+	const { dismissNotice, shouldShowNotice, NOTICES } = useDismissNotice();
+	const onAdvancedNudgeDismiss = useCallback(
+		() => dismissNotice( NOTICES.advancedUpgradeEditor, 3 * MONTH_IN_SECONDS ),
+		[ dismissNotice, NOTICES ]
+	);
+
+	return (
+		shouldShowAdvancedPlanNudge &&
+		shouldShowNotice( NOTICES.advancedUpgradeEditor ) && (
+			<Notice onDismiss={ onAdvancedNudgeDismiss } type={ 'highlight' }>
+				{ createInterpolateElement(
+					__(
+						'Need more reach? Unlock custom media sharing with the <upgradeLink>Advanced Plan</upgradeLink>',
+						'jetpack'
+					),
+					{
+						upgradeLink: (
+							<ExternalLink
+								href={ getRedirectUrl( 'jetpack-social-advanced-site-checkout', {
+									site: getSiteFragment(),
+									query: 'redirect_to=' + encodeURIComponent( window.location.href ),
+								} ) }
+							/>
+						),
+					}
+				) }
+			</Notice>
+		)
+	);
+};
diff --git a/projects/js-packages/publicize-components/src/components/form/auto-conversion-notice.tsx b/projects/js-packages/publicize-components/src/components/form/auto-conversion-notice.tsx
@@ -0,0 +1,44 @@
+import { Button } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { usePublicizeConfig } from '../../..';
+import useDismissNotice from '../../hooks/use-dismiss-notice';
+import Notice from '../notice';
+import styles from './styles.module.scss';
+
+export const AutoConversionNotice: React.FC = () => {
+	const { dismissNotice, shouldShowNotice, NOTICES } = useDismissNotice();
+
+	const onAutoConversionNoticeDismiss = useCallback(
+		() => dismissNotice( NOTICES.autoConversion ),
+		[ dismissNotice, NOTICES ]
+	);
+	const { adminUrl, jetpackSharingSettingsUrl } = usePublicizeConfig();
+
+	return (
+		shouldShowNotice( NOTICES.autoConversion ) && (
+			<Notice
+				type={ 'warning' }
+				actions={ [
+					<Button onClick={ onAutoConversionNoticeDismiss } key="dismiss" variant="primary">
+						{ __( 'Got it', 'jetpack' ) }
+					</Button>,
+					<Button
+						className={ styles[ 'change-settings-button' ] }
+						key="change-settings"
+						href={ adminUrl || jetpackSharingSettingsUrl }
+						target="_blank"
+						rel="noreferrer noopener"
+					>
+						{ __( 'Change settings', 'jetpack' ) }
+					</Button>,
+				] }
+			>
+				{ __(
+					'When your post is published, the selected image will be converted for maximum compatibility across your connected social networks.',
+					'jetpack'
+				) }
+			</Notice>
+		)
+	);
+};
diff --git a/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx b/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx
@@ -0,0 +1,34 @@
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { _n } from '@wordpress/i18n';
+import { usePublicizeConfig } from '../../..';
+import useSocialMediaConnections from '../../hooks/use-social-media-connections';
+import Notice from '../notice';
+import { checkConnectionCode } from './utils';
+
+export const BrokenConnectionsNotice: React.FC = () => {
+	const { connections } = useSocialMediaConnections();
+
+	const brokenConnections = connections.filter( connection =>
+		checkConnectionCode( connection, 'broken' )
+	);
+
+	const { connectionsAdminUrl } = usePublicizeConfig();
+	return (
+		brokenConnections.length > 0 && (
+			<Notice type={ 'error' }>
+				{ createInterpolateElement(
+					_n(
+						'One of your social connections is broken. Reconnect them on the <fixLink>connection management</fixLink> page.',
+						'Some of your social connections are broken. Reconnect them on the <fixLink>connection management</fixLink> page.',
+						brokenConnections.length,
+						'jetpack'
+					),
+					{
+						fixLink: <ExternalLink href={ connectionsAdminUrl } />,
+					}
+				) }
+			</Notice>
+		)
+	);
+};
diff --git a/projects/js-packages/publicize-components/src/components/form/connections-list.tsx b/projects/js-packages/publicize-components/src/components/form/connections-list.tsx
@@ -0,0 +1,95 @@
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { usePublicizeConfig } from '../../..';
+import useAttachedMedia from '../../hooks/use-attached-media';
+import useFeaturedImage from '../../hooks/use-featured-image';
+import useImageGeneratorConfig from '../../hooks/use-image-generator-config';
+import useMediaDetails from '../../hooks/use-media-details';
+import useMediaRestrictions, { NO_MEDIA_ERROR } from '../../hooks/use-media-restrictions';
+import useSocialMediaConnections from '../../hooks/use-social-media-connections';
+import { store as socialStore } from '../../social-store';
+import PublicizeConnection from '../connection';
+import PublicizeSettingsButton from '../settings-button';
+import styles from './styles.module.scss';
+
+export const ConnectionsList: React.FC = () => {
+	const { connections, toggleById, enabledConnections } = useSocialMediaConnections();
+	const { isPublicizeEnabled, isPublicizeDisabledBySitePlan } = usePublicizeConfig();
+	const { isEnabled: isSocialImageGeneratorEnabledForPost } = useImageGeneratorConfig();
+	const { showShareLimits, numberOfSharesRemaining } = useSelect( select => {
+		return {
+			showShareLimits: select( socialStore ).showShareLimits(),
+			numberOfSharesRemaining: select( socialStore ).numberOfSharesRemaining(),
+		};
+	}, [] );
+
+	const outOfConnections = showShareLimits && numberOfSharesRemaining <= enabledConnections.length;
+
+	const isAutoConversionEnabled = useSelect(
+		select => select( socialStore ).isAutoConversionEnabled(),
+		[]
+	);
+
+	const { attachedMedia, shouldUploadAttachedMedia } = useAttachedMedia();
+	const featuredImageId = useFeaturedImage();
+	const mediaId = attachedMedia[ 0 ]?.id || featuredImageId;
+
+	const { validationErrors, isConvertible } = useMediaRestrictions(
+		connections,
+		useMediaDetails( mediaId )[ 0 ],
+		{
+			isSocialImageGeneratorEnabledForPost,
+			shouldUploadAttachedMedia,
+		}
+	);
+	const shouldAutoConvert = isAutoConversionEnabled && isConvertible;
+
+	const isConnectionEnabled = useCallback(
+		( { enabled, is_healthy = true, connection_id } ) =>
+			enabled &&
+			! isPublicizeDisabledBySitePlan &&
+			false !== is_healthy &&
+			( ! validationErrors[ connection_id ] || shouldAutoConvert ) &&
+			validationErrors[ connection_id ] !== NO_MEDIA_ERROR,
+		[ isPublicizeDisabledBySitePlan, validationErrors, shouldAutoConvert ]
+	);
+
+	return (
+		<ul className={ styles[ 'connections-list' ] }>
+			{ connections.map( conn => {
+				const {
+					display_name,
+					enabled,
+					id,
+					service_name,
+					toggleable,
+					profile_picture,
+					is_healthy,
+					connection_id,
+				} = conn;
+				const currentId = connection_id ? connection_id : id;
+				return (
+					<PublicizeConnection
+						disabled={
+							! isPublicizeEnabled ||
+							( ! enabled && toggleable && outOfConnections ) ||
+							false === is_healthy ||
+							( validationErrors[ currentId ] !== undefined && ! shouldAutoConvert ) ||
+							validationErrors[ currentId ] === NO_MEDIA_ERROR
+						}
+						enabled={ isConnectionEnabled( conn ) }
+						key={ currentId }
+						id={ currentId }
+						label={ display_name }
+						name={ service_name }
+						toggleConnection={ toggleById }
+						profilePicture={ profile_picture }
+					/>
+				);
+			} ) }
+			<li>
+				<PublicizeSettingsButton />
+			</li>
+		</ul>
+	);
+};