Current Limitation
Currently, TierLimitReachErrorModal is implemented independently in each UI page/component (already present in ~10 pages). As the trial account concept expands, this modal will be introduced to even more components, leading to duplicated logic and increased maintenance overhead.
- The modal state (
tierLimitReached, open/close handlers, localized strings) is replicated across every component that needs to show it.
- Each resource returns different error codes, making the conditional logic per-component unavoidable in its current form.
- As more pages adopt this pattern, keeping the implementations consistent becomes increasingly difficult.
Suggested Improvement
Centralize the TierLimitReachErrorModal at a higher-level component such as App.tsx (or another appropriate root component) and control its visibility through a global state mechanism — Redux or React Context.
With this in place:
- Triggering the modal becomes a simple dispatch call or context update directly from a
catch block in any component.
- No need to replicate modal JSX, state variables, or close handlers across components.
- Maintenance and future changes are isolated to a single location.
References
Version
latest
Developer Checklist
Current Limitation
Currently,
TierLimitReachErrorModalis implemented independently in each UI page/component (already present in ~10 pages). As the trial account concept expands, this modal will be introduced to even more components, leading to duplicated logic and increased maintenance overhead.tierLimitReached, open/close handlers, localized strings) is replicated across every component that needs to show it.Suggested Improvement
Centralize the
TierLimitReachErrorModalat a higher-level component such asApp.tsx(or another appropriate root component) and control its visibility through a global state mechanism — Redux or React Context.With this in place:
catchblock in any component.References
Version
latest
Developer Checklist
impact/behavioral-changeadded7.2.0-migration)configadded