Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Image Studio: handle low credits warning notice from backend#108986

Draft
ariskataoka wants to merge 26 commits intotrunkfrom
forno-223/add/image-studio-low-credits-warning
Draft

Image Studio: handle low credits warning notice from backend#108986
ariskataoka wants to merge 26 commits intotrunkfrom
forno-223/add/image-studio-low-credits-warning

Conversation

@ariskataoka
Copy link
Member

@ariskataoka ariskataoka commented Feb 27, 2026

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

  • Follow the instructions from wpcom 205745

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

t-wright and others added 24 commits February 27, 2026 09:45
…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]>
@matticbot
Copy link
Contributor

matticbot commented Feb 27, 2026

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • agents-manager
  • help-center
  • notifications
  • odyssey-stats
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug forno-223/add/image-studio-low-credits-warning on your sandbox.

@ariskataoka ariskataoka force-pushed the forno-223/add/image-studio-low-credits-warning branch from c46b704 to 07f6cce Compare February 27, 2026 21:28
)

* 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
@ariskataoka ariskataoka force-pushed the forno-223/add/image-studio-low-credits-warning branch from 07f6cce to 99bf910 Compare February 27, 2026 22:22
Base automatically changed from forno-194/image-studio-feature-parity to trunk March 2, 2026 14:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants