Image Studio: handle low credits warning notice from backend#108986
Draft
ariskataoka wants to merge 26 commits intotrunkfrom
Draft
Image Studio: handle low credits warning notice from backend#108986ariskataoka wants to merge 26 commits intotrunkfrom
ariskataoka wants to merge 26 commits intotrunkfrom
Conversation
…n images [5607] * Switch image container to stacked grid layout * Ensure placeholder is only updated when imageUrl is set Fixes a timing issue where imageUrl could be null or stale when `onExitComplete` fired (cherry picked from commit 2e17deae4222b4cfe6ef98eeab7a5cc501fee13f)
…h image-nav shortcut [5615] * Present using image-nav if the image studio has drafts * Move image nav shortcuts to Header component * Update shortcut disablement logic (cherry picked from commit 1787091cfabf874e56a9c8c3374f1bf38f1dd8da)
* Add padding around the filename * Display tooltip if nav button is disabled * Make buttons accessible only if there is a tooltip * Simplify and improve tooltip copy * Improve wording of the tooltip * Update tooltip copy (cherry picked from commit ddb9d1620d2d45ac3fa0cf4c0b6b4c1e4e7c465c)
* Add tracking for delete permanently * Allow null in ImageStudioCloseCallback and handle in consumers * Add useDeletePermanently hook and tests * Add delete permanently UI to sidebar and wire into main component * Disable Delete permanently when unsaved changes exist * Always show Delete permanently button, disable when appropriate * Fix getHasUnsavedChanges returning true for saved revisions * Stop tracking annotated images in draftIds Annotated images were being added to both and , causing them to incorrectly block the delete permanently button (since they can't be saved via the Save button). Changes: - Remove draftIds tracking from use-annotation.ts - Update use-draft-cleanup.ts to clean up both draftIds AND annotatedAttachmentIds on exit - Update tests accordingly Now only contains saveable drafts, while handles temporary annotation images. Both are still cleaned up on exit. * Clean up annotated images on delete permanently * Add tooltip to disabled Delete permanently button * Update tracking string * Move ConfirmationDialog inside onDeletePermanentl guard * Improve contrast for destructive button on dark sidebar * Fix delete permanently tooltip * Log error (cherry picked from commit 674f4b67efa68a90f04205584f762067fc0fa7d6)
…t orphan images [5639] * Disable stop button during upload to prevent orphan images * Use disable attribute instead of onStop to disable stop * se null for currentPhase when no backend phase info Replace 'idle' with null to accurately reflect no phase info from the backend * Fix isStopDisabled logic: use OR to disable stop during upload or annotation saving (cherry picked from commit f7131fb62fb2f0f09b5947166dfa35b0b9b7ec22)
…bar [5656] Update the toolbar button text to better communicate the AI editing capability. (cherry picked from commit 7fcc10948d8857829027df2a98f0e1b0f74abd63)
…RL [5609] * Use hash instead of qparam * Use 'ai-image-editor' instead of 'item' (cherry picked from commit 827e977355a9dc7a9727c9aeddff5dfe1bcad80d)
* Catch errors if editor store is not available * Add debug log
…5665] * Add context-aware Save button labels and auto-close to Image Studio The Save button now displays contextually appropriate labels: - "Insert" for image blocks (auto-closes after save) - "Set featured image" for featured images (auto-closes after save) - "Save" for Media Library (stays open after save) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * Fix useUnsavedChangesConfirmation tests - add getEntryPoint mock * Clarify inline comment Co-authored-by: Copilot <[email protected]> * Improve type safety: use inline type casting instead of 'as any' * Refactor auto-close logic to eliminate duplication Move auto-close behavior from integration layer to handleSaveWithNotification to consolidate exit logic in a single locatio * Centralize auto-close logic in store selector Move auto-close determination from component to a reusable store selector (getShouldAutoCloseOnSave) to create a single source of truth. * Rename to `Save & Apply` to communicate action after saving image * Update tests to reflect new auto-close behavior * Simplify save handler by moving exit logic into handleConfirmSave - Remove exit logic from the component's save handler, renaming it to handleSave (save + notification only) - handleConfirmSave in the hook now always calls onExit after saving, since the confirmation dialog context always wants to close - Remove the getShouldAutoCloseOnSave selector usage from the component * Remove unsused store function * Revert unnecessary changes --------- Co-authored-by: Claude <[email protected]> Co-authored-by: Copilot <[email protected]>
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
Dashboard Live (dotcom) (direct link)
|
Contributor
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
c46b704 to
07f6cce
Compare
) * add: Image Studio upgrade path handling in error notices Port upgrade URL detection from Big Sky plugin PR #5718. When errors contain upgrade URLs (plans, jetpack redirect, my-jetpack), notices now show an "Upgrade" action button instead of plain text. - Add parseErrorUrl utility to extract and classify URLs from errors - Add useErrorNotice hook to centralize error notice logic - Extend Notice store type to support action buttons - Update notice component and styles for actionable errors Co-Authored-By: Claude Opus 4.5 <[email protected]> * update: Image Studio upgrade notices with warning style and new messaging Sync with latest Big Sky plugin changes: - Add isPlansPageUrl field to distinguish plans pages from checkout - Change upgrade notices from error to warning type (persistent banner) - Use new copy: "You've reached your free AI limit..." - Dynamic labels: "See plans" vs "Upgrade plan" based on URL type - Render warning notices using WordPress Notice component Co-Authored-By: Claude Opus 4.5 <[email protected]> * sync: add dedicated isPlansPageUrl tests and simplify notice filtering Sync with Big Sky plugin: - Add dedicated isPlansPageUrl detection test block (5 tests) - Remove early return in notice component, use inline nullish coalescing Co-Authored-By: Claude Opus 4.5 <[email protected]> * add: unit tests for useErrorNotice hook Test the error notice display logic including plain errors, errors with URLs, and upgrade URL detection with correct button labels (See plans vs Upgrade plan). Co-Authored-By: Claude Opus 4.5 <[email protected]> * fix: improve error notice URL detection and preserve backend messages - Check hostname explicitly for jetpack.com/redirect detection to prevent false positives from URLs like evil.com/jetpack.com/redirect - Remove hardcoded upgrade copy; preserve original backend error message - Add comment explaining intentional non-dismissible warning notices - Update tests to reflect these changes Co-Authored-By: Claude Opus 4.5 <[email protected]> * fix: convert notice actions to onClick handlers with noopener protection SnackbarList actions were passing store objects through unmodified, ignoring the openInNewTab flag. Now both WarningNotice and SnackbarList convert actions to onClick handlers that open in new tabs and set opener to null for security. Co-Authored-By: Claude Opus 4.5 <[email protected]> * fix: constrain warning notice width to match snackbar notices Made-with: Cursor * fix: align upgrade button with notice text in warning banner --------- Co-authored-by: Claude Opus 4.5 <[email protected]>
Base automatically changed from
forno-216/add/image-studio-jetpack-path-to-upgrading
to
forno-194/image-studio-feature-parity
February 27, 2026 21:41
Display a dismissible warning notice when users are running low on credits. The notice appears after successful image generation when ≤5 requests remain. - Add dismissible field to Notice interface - Handle low_credits_warning notice in update-canvas-image ability - Make WarningNotice component respect dismissible property
07f6cce to
99bf910
Compare
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #
Proposed Changes
This PR adds the frontend support for displaying a dismissible "low credits" warning notice in Image Studio when the backend indicates the user is approaching their usage limit.
Why are these changes being made?
Currently, users only see a notice when they've completely exhausted their free credits. This creates a jarring experience when generation suddenly stops working.
Testing Instructions
Pre-merge Checklist