Social: Add resharing and scheduling to the unified modal

[manzoorwanijk]

Completes SOCIAL-245

Proposed changes:

This PR adds resharing functionality to the unified modal for Jetpack Social. When viewing a published post, users can now schedule or share posts to social media from the unified preview modal.

Core Changes

1. Dynamic Footer Actions in NavigatorModal (components/navigator-modal/footer.tsx)

• Enhanced the NavigatorModal component to support dynamic footer actions
• Footer actions can now be either static button props or render functions that receive a navigate callback
• This allows buttons to perform actions and then programmatically close the modal

2. Decoupled Share and Schedule Buttons

This makes them more reusable and easier to integrate into different contexts (like the unified modal footer).

• ScheduleButton (components/schedule-button/index.tsx):

  • Removed prop-based configuration (isBusy, isDisabled, onChange, onConfirm)
  • Now manages its own state and business logic internally

• SharePostButton (components/share-post/index.jsx):

  • Now manages disabled state internally based on resharing availability and ongoing operations
  • Added a send icon as per the new designs

3. Conditional Footer Actions Hook (unified-modal/social-post-preview/use-footer-actions.tsx)

• New hook that returns appropriate footer actions based on post state
• For published posts with republishing feature: Shows Schedule + Share buttons
• For unpublished posts: Shows only Save Changes button
• Share button automatically closes modal on completion via the navigate callback

4. Updated Modal Screen Configuration (unified-modal/social-post-preview/use-modal-screen.tsx)

• Added dynamic modal title based on post status:
  • Published posts: "Customize and share to social media"
  • Draft posts: "Preview and customize"

5. Simplified Settings Section (social-post-modal/settings-section.tsx)

• Removed redundant state management and prop drilling
• Now simply renders ScheduleButton and SharePostButton without configuration

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Testing Instructions:

Test Case 1: Resharing buttons appear for published posts

1. Open an already published post in the WordPress editor
2. Open the Jetpack sidebar
3. Click the "Preview & share" button to open the unified modal
4. Expected:
   • Modal title should be "Customize and share to social media"
   • Footer should show two buttons: "Schedule" and "Share"
   • The Share button should have a send icon
   • Footer should display "Ready to share to X account(s)" text

Test Case 2: Save Changes button appears for draft posts

1. Create a new draft post (not published)
2. Click "Preview and customize" button
3. The unified modal should open
4. Expected:
   • Modal title should be "Preview and customize"
   • Footer should show a single "Save Changes" button (no Schedule/Share buttons)

Test Case 3: Schedule button functionality

1. Open a published post
2. Open the unified modal via "Preview & share" button
3. Click the "Schedule" button in the modal footer
4. Expected:
   • A date/time picker dropdown should appear
   • Select a future date and time
   • Click "Confirm"
   • A success notice should appear

Test Case 4: Share button functionality

1. Open a published post
2. Open the unified modal via "Preview & share" button
3. Click the "Share" button in the modal footer
4. Expected:
   • The post should be immediately shared to all enabled social connections
   • The Share button should show a loading state (spinner) while sharing
   • The modal should close automatically after sharing completes
   • A success notice should appear

• Buttons disabled when no connection is enabled
  
• Buttons are enabled
  
• Schedule popover
  
• Scheduled posts
  
  

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/social/add-resharing-to-unified-modal branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/social/add-resharing-to-unified-modal

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/social/add-resharing-to-unified-modal

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[Copilot]

Pull request overview

This PR implements resharing and scheduling functionality within the unified modal for Jetpack Social. When viewing a published post, users can now schedule or immediately share posts to social media directly from the unified preview modal. The implementation decouples the Share and Schedule button components to make them self-contained and reusable, while enhancing the NavigatorModal component to support dynamic footer actions that can programmatically control modal closure.

Key Changes:

• Enhanced NavigatorModal footer to support both static button props and dynamic render functions that receive a navigate callback for programmatic modal control
• Created a new useFooterActions hook that conditionally returns appropriate footer buttons based on post publication status and feature availability
• Refactored ScheduleButton and SharePostButton to be self-contained components that manage their own state and business logic internally

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
projects/js-packages/components/components/navigator-modal/footer.tsx	Enhanced footer to support both static button props and function-based actions with navigate callback
projects/js-packages/components/components/navigator-modal/stories/index.stories.tsx	Updated storybook examples to demonstrate new function-based footer actions pattern
projects/js-packages/publicize-components/src/components/schedule-button/index.tsx	Refactored to be self-contained component managing its own state, removing external prop configuration
projects/js-packages/publicize-components/src/components/share-post/index.jsx	Updated to manage disabled state internally and added send icon
projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx	Simplified by removing redundant state management now handled by button components
projects/js-packages/publicize-components/src/components/unified-modal/social-post-preview/use-footer-actions.tsx	New hook providing conditional footer actions based on post status and republishing feature availability
projects/js-packages/publicize-components/src/components/unified-modal/social-post-preview/use-modal-screen.tsx	Updated to use dynamic footer actions and conditional modal title based on post publication status
projects/js-packages/publicize-components/changelog/update-social-add-resharing-to-unified-modal	Changelog entry for publicize-components package
projects/js-packages/components/changelog/update-social-add-resharing-to-unified-modal	Changelog entry for components package

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 5 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/publicize-components/src/components/schedule-button/index.tsx	26/31 (83.87%)	-16.13%	5 💔
projects/js-packages/components/components/navigator-modal/footer.tsx	0/12 (0.00%)	0.00%	4 💔
projects/js-packages/publicize-components/src/components/share-post/index.jsx	0/41 (0.00%)	0.00%	2 ❤️‍🩹
projects/js-packages/publicize-components/src/components/unified-modal/social-post-preview/use-modal-screen.tsx	0/11 (0.00%)	0.00%	2 ❤️‍🩹
projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx	0/4 (0.00%)	0.00%	-9 💚

2 files are newly checked for coverage.

File	Coverage
projects/js-packages/publicize-components/src/components/unified-modal/social-post-preview/scheduled-posts.tsx	0/5 (0.00%) 💔
projects/js-packages/publicize-components/src/components/unified-modal/social-post-preview/use-footer-actions.tsx	0/9 (0.00%) 💔

Full summary · PHP report · JS report

_{Coverage check overridden by Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR .}

[gmjuhasz]

This looks and works good overall! I noticed that when scheduling/resharing, there is a second between saving/sharing, when the buttons become active again. Maybe we could wait for both to complete before reenabling the actions?

CleanShot.2025-12-15.at.13.14.35.mp4

Not for this PR, but also wondering if we should increase the height of the modal to be taller fitting more content without scrlloing.

[manzoorwanijk]

noticed that when scheduling/resharing, there is a second between saving/sharing, when the buttons become active again.

Thank you for catching that. It's the same on trunk.

Screen.Recording.2025-12-15.at.6.52.19.PM.mov

May be we can fix it as a separate PR?

wondering if we should increase the height of the modal to be taller fitting more content without scrlloing.

Totally agree on that

[gmjuhasz]

This works well, I could reshare, and it worked as trunk