From fd7935f343d5df019b9a1c861a08fcf4ae85319f Mon Sep 17 00:00:00 2001
From: Harshit Raizada <112213410+dankgarlic1@users.noreply.github.com>
Date: Mon, 13 Jul 2026 21:04:09 +0530
Subject: [PATCH] fix(front): allow dismissing [Credits limit reached] banner
 (#22843)

Dismiss is session-only, he banner reappears on reload, because the
underlying "out of credits" condition is still true
closes #22774

fix:
<img width="1222" height="147" alt="image"
src="https://github.com/user-attachments/assets/082e68c1-d121-4e31-b261-386de8231896"
/>


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22843?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../components/InformationBannerWrapper.tsx          |  2 +-
 .../billing/InformationBannerNoMoreCredits.tsx       | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx
index 9700ed8099..0417930ef4 100644
--- a/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx
+++ b/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx
@@ -3,10 +3,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
 
 import { InformationBannerBillingSubscriptionPaused } from '@/information-banner/components/billing/InformationBannerBillingSubscriptionPaused';
-import { InformationBannerNonProductionInstance } from '@/information-banner/components/enterprise/InformationBannerNonProductionInstance';
 import { InformationBannerEndTrialPeriod } from '@/information-banner/components/billing/InformationBannerEndTrialPeriod';
 import { InformationBannerFailPaymentInfo } from '@/information-banner/components/billing/InformationBannerFailPaymentInfo';
 import { InformationBannerNoBillingSubscription } from '@/information-banner/components/billing/InformationBannerNoBillingSubscription';
+import { InformationBannerNonProductionInstance } from '@/information-banner/components/enterprise/InformationBannerNonProductionInstance';
 import { InformationBannerMaintenance } from '@/information-banner/components/maintenance/InformationBannerMaintenance';
 import { InformationBannerReconnectAccountEmailAliases } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases';
 import { InformationBannerReconnectAccountInsufficientPermissions } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions';
diff --git a/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerNoMoreCredits.tsx b/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerNoMoreCredits.tsx
index 91809bff6d..9fbeabc605 100644
--- a/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerNoMoreCredits.tsx
+++ b/packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerNoMoreCredits.tsx
@@ -1,14 +1,18 @@
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { informationBannerIsOpenComponentState } from '@/information-banner/states/informationBannerIsOpenComponentState';
 import { useCreditUpgradeAction } from '@/settings/billing/hooks/useCreditUpgradeAction';
 import { usePermissionFlagMap } from '@/settings/roles/hooks/usePermissionFlagMap';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
 import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
+const COMPONENT_INSTANCE_ID = 'information-banner-no-more-credits';
+
 const INFORMATION_BANNER_UPGRADE_CREDIT_PLAN_MODAL_ID =
   'information-banner-upgrade-credit-plan-modal';
 
@@ -21,6 +25,11 @@ export const InformationBannerNoMoreCredits = () => {
   const navigateSettings = useNavigateSettings();
   const { openModal } = useModal();
 
+  const setInformationBannerIsOpen = useSetAtomComponentState(
+    informationBannerIsOpenComponentState,
+    COMPONENT_INSTANCE_ID,
+  );
+
   const {
     nextPrice,
     nextResourceCreditsAmount,
@@ -42,7 +51,7 @@ export const InformationBannerNoMoreCredits = () => {
   return (
     <>
       <InformationBanner
-        componentInstanceId="information-banner-no-more-credits"
+        componentInstanceId={COMPONENT_INSTANCE_ID}
         color="danger"
         variant="secondary"
         message={
@@ -55,6 +64,7 @@ export const InformationBannerNoMoreCredits = () => {
         }
         buttonOnClick={buttonOnClick}
         isButtonDisabled={isUpgrading}
+        onClose={() => setInformationBannerIsOpen(false)}
       />
       {canUpgradeInline && (
         <ConfirmationModal