add trial period ending banner + server logic (#11389)

Solution : 
- if user reaches his workflow usage cap + in trial period > display
banner
- end trial period if user has payment method (if not, not possible)

<img width="941" alt="Screenshot 2025-04-04 at 10 27 32"
src="https://github.com/user-attachments/assets/d7a1d5f7-9b12-4a92-a7c7-15ef8847c790"
/>

packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx

@@ -1,8 +1,10 @@
 import { InformationBannerBillingSubscriptionPaused } from '@/information-banner/components/billing/InformationBannerBillingSubscriptionPaused';
+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 { InformationBannerReconnectAccountEmailAliases } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases';
 import { InformationBannerReconnectAccountInsufficientPermissions } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions';
+import { useIsSomeMeteredProductCapReached } from '@/workspace/hooks/useIsSomeMeteredProductCapReached';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import styled from '@emotion/styled';
@@ -24,6 +26,7 @@ export const InformationBannerWrapper = () => {
   const isWorkspaceSuspended = useIsWorkspaceActivationStatusEqualsTo(
     WorkspaceActivationStatus.SUSPENDED,
   );
+  const isSomeMeteredProductCapReached = useIsSomeMeteredProductCapReached();
 
   const displayBillingSubscriptionPausedBanner =
     isWorkspaceSuspended && subscriptionStatus === SubscriptionStatus.Paused;
@@ -35,6 +38,10 @@ export const InformationBannerWrapper = () => {
     subscriptionStatus === SubscriptionStatus.PastDue ||
     subscriptionStatus === SubscriptionStatus.Unpaid;
 
+  const displayEndTrialPeriodBanner =
+    isSomeMeteredProductCapReached &&
+    subscriptionStatus === SubscriptionStatus.Trialing;
+
   return (
     <StyledInformationBannerWrapper>
       <InformationBannerReconnectAccountInsufficientPermissions />
@@ -46,6 +53,7 @@ export const InformationBannerWrapper = () => {
         <InformationBannerNoBillingSubscription />
       )}
       {displayFailPaymentInfoBanner && <InformationBannerFailPaymentInfo />}
+      {displayEndTrialPeriodBanner && <InformationBannerEndTrialPeriod />}
     </StyledInformationBannerWrapper>
   );
 };

packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerEndTrialPeriod.tsx

@@ -0,0 +1,18 @@
+import { useEndSubscriptionTrialPeriod } from '@/billing/hooks/useEndSubscriptionTrialPeriod';
+import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useLingui } from '@lingui/react/macro';
+
+export const InformationBannerEndTrialPeriod = () => {
+  const { endTrialPeriod, isLoading } = useEndSubscriptionTrialPeriod();
+  const { t } = useLingui();
+
+  return (
+    <InformationBanner
+      variant="danger"
+      message={t`No free workflow executions left. End trial period and activate your billing to continue.`}
+      buttonTitle={t`Activate`}
+      buttonOnClick={async () => await endTrialPeriod()}
+      isButtonDisabled={isLoading}
+    />
+  );
+};