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. -->
This commit is contained in:
Harshit Raizada
2026-07-13 21:04:09 +05:30
committed by GitHub
parent 5426536004
commit fd7935f343
2 changed files with 12 additions and 2 deletions
@@ -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';
@@ -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