-
Notifications
You must be signed in to change notification settings - Fork 805
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Jetpack Social | Warn the user that their scheduled posts won't get s…
…hared 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
- Loading branch information
1 parent
c3390c2
commit 1d3bc80
Showing
27 changed files
with
617 additions
and
205 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
...ts/js-packages/publicize-components/changelog/fix-jetpack-social-sheduled-posts-messaging
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: fixed | ||
|
|
||
| Fixed Jetpack Social scheduled post messaging |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
projects/js-packages/publicize-components/src/components/form/share-count-info.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { ThemeProvider } from '@automattic/jetpack-components'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { store as socialStore } from '../../social-store'; | ||
| import { ShareLimitsBar } from '../share-limits-bar'; | ||
| import styles from './styles.module.scss'; | ||
|
|
||
| export const ShareCountInfo: React.FC = () => { | ||
| const { showShareLimits, scheduledSharesCount, shareCount, shareLimit, activeConnections } = | ||
| useSelect( select => { | ||
| const store = select( socialStore ); | ||
|
|
||
| return { | ||
| showShareLimits: store.showShareLimits(), | ||
| scheduledSharesCount: store.getScheduledSharesCount(), | ||
| shareCount: store.getSharesUsedCount(), | ||
| shareLimit: store.getShareLimit(), | ||
| activeConnections: store.getEnabledConnections(), | ||
| }; | ||
| }, [] ); | ||
|
|
||
| if ( ! showShareLimits ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <ShareLimitsBar | ||
| maxCount={ shareLimit } | ||
| currentCount={ shareCount } | ||
| scheduledCount={ scheduledSharesCount } | ||
| className={ styles[ 'bar-wrapper' ] } | ||
| activeConnectionsCount={ activeConnections.length } | ||
| /> | ||
| </ThemeProvider> | ||
| ); | ||
| }; |
60 changes: 60 additions & 0 deletions
60
projects/js-packages/publicize-components/src/components/form/share-count-notice.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { getRedirectUrl } from '@automattic/jetpack-components'; | ||
| import { getSiteFragment } from '@automattic/jetpack-shared-extension-utils'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { store as editorStore } from '@wordpress/editor'; | ||
| import { createInterpolateElement, useCallback } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useShareLimits } from '../../hooks/use-share-limits'; | ||
| import { store as socialStore } from '../../social-store'; | ||
| import Notice from '../notice'; | ||
| import styles from './styles.module.scss'; | ||
|
|
||
| export const ShareCountNotice: React.FC = () => { | ||
| const { isEditedPostDirty } = useSelect( editorStore, [] ); | ||
| const { autosave } = useDispatch( editorStore ); | ||
|
|
||
| const showShareLimits = useSelect( select => select( socialStore ).showShareLimits(), [] ); | ||
|
|
||
| const autosaveAndRedirect = useCallback( | ||
| async ev => { | ||
| const target = ev.target.getAttribute( 'target' ); | ||
| if ( isEditedPostDirty() && ! target ) { | ||
| ev.preventDefault(); | ||
| await autosave(); | ||
| window.location.href = ev.target.href; | ||
| } | ||
| if ( target ) { | ||
| ev.preventDefault(); | ||
| window.open( ev.target.href, target, 'noreferrer' ); | ||
| } | ||
| }, | ||
| [ autosave, isEditedPostDirty ] | ||
| ); | ||
| const { noticeType, message } = useShareLimits(); | ||
|
|
||
| if ( ! showShareLimits ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Notice type={ noticeType }> | ||
| { message } | ||
| <br /> | ||
| { createInterpolateElement( | ||
| __( '<upgradeLink>Upgrade now</upgradeLink> to share more.', 'jetpack' ), | ||
| { | ||
| upgradeLink: ( | ||
| <a | ||
| className={ styles[ 'upgrade-link' ] } | ||
| href={ getRedirectUrl( 'jetpack-social-basic-plan-block-editor', { | ||
| site: getSiteFragment(), | ||
| query: 'redirect_to=' + encodeURIComponent( window.location.href ), | ||
| } ) } | ||
| onClick={ autosaveAndRedirect } | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| </Notice> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { RecordMeterBar, Text } from '@automattic/jetpack-components'; | ||
| import { useMemo } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import styles from './styles.module.scss'; | ||
|
|
||
| export type ShareLimitsBarProps = { | ||
| currentCount: number; | ||
| scheduledCount: number; | ||
| activeConnectionsCount?: number; | ||
| maxCount: number; | ||
| text?: string; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export const ShareLimitsBar = ( { | ||
| currentCount, | ||
| maxCount, | ||
| scheduledCount, | ||
| activeConnectionsCount, | ||
| text, | ||
| className, | ||
| }: ShareLimitsBarProps ) => { | ||
| const items = useMemo( () => { | ||
| return [ | ||
| { | ||
| count: currentCount, | ||
| backgroundColor: 'var(--jp-gray-90)', | ||
| label: __( 'Shares used', 'jetpack' ), | ||
| }, | ||
| activeConnectionsCount !== undefined && { | ||
| count: activeConnectionsCount, | ||
| backgroundColor: 'var(--jp-gray-40)', | ||
| label: __( 'Active connections', 'jetpack' ), | ||
| }, | ||
| { | ||
| count: scheduledCount, | ||
| backgroundColor: 'var(--jp-gray-20)', | ||
| label: __( 'Shares scheduled', 'jetpack' ), | ||
| }, | ||
| ].filter( Boolean ); | ||
| }, [ currentCount, scheduledCount, activeConnectionsCount ] ); | ||
| return ( | ||
| <div className={ className }> | ||
| { text ? <Text className={ styles.text }>{ text }</Text> : null } | ||
| <RecordMeterBar | ||
| totalCount={ maxCount } | ||
| items={ items } | ||
| showLegendLabelBeforeCount | ||
| className={ styles[ 'bar-wrapper' ] } | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
5 changes: 5 additions & 0 deletions
5
projects/js-packages/publicize-components/src/components/share-limits-bar/styles.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .bar-wrapper { | ||
| :global .record-meter-bar__items{ | ||
| height: 1rem; | ||
| } | ||
| } |
Oops, something went wrong.