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/billing/graphql/endSubscriptionTrialPeriod.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const END_SUBSCRIPTION_TRIAL_PERIOD = gql`
+  mutation EndSubscriptionTrialPeriod {
+    endSubscriptionTrialPeriod {
+      status
+      hasPaymentMethod
+    }
+  }
+`;

packages/twenty-front/src/modules/billing/hooks/useEndSubscriptionTrialPeriod.ts

@@ -0,0 +1,71 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { t } from '@lingui/core/macro';
+import { useState } from 'react';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { useEndSubscriptionTrialPeriodMutation } from '~/generated/graphql';
+
+export const useEndSubscriptionTrialPeriod = () => {
+  const { enqueueSnackBar } = useSnackBar();
+  const [endSubscriptionTrialPeriod] = useEndSubscriptionTrialPeriodMutation();
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const endTrialPeriod = async () => {
+    try {
+      setIsLoading(true);
+
+      const { data } = await endSubscriptionTrialPeriod();
+      const endTrialPeriodOutput = data?.endSubscriptionTrialPeriod;
+
+      const hasPaymentMethod = endTrialPeriodOutput?.hasPaymentMethod;
+
+      if (isDefined(hasPaymentMethod) && hasPaymentMethod === false) {
+        enqueueSnackBar(
+          t`No payment method found. Please update your billing details.`,
+          {
+            variant: SnackBarVariant.Error,
+          },
+        );
+
+        return;
+      }
+
+      const updatedSubscriptionStatus = endTrialPeriodOutput?.status;
+      if (
+        isDefined(updatedSubscriptionStatus) &&
+        isDefined(currentWorkspace?.currentBillingSubscription)
+      ) {
+        setCurrentWorkspace({
+          ...currentWorkspace,
+          currentBillingSubscription: {
+            ...currentWorkspace?.currentBillingSubscription,
+            status: updatedSubscriptionStatus,
+          },
+        });
+      }
+
+      enqueueSnackBar(t`Subscription activated.`, {
+        variant: SnackBarVariant.Success,
+      });
+    } catch {
+      enqueueSnackBar(
+        t`Error while ending trial period. Please contact Twenty team.`,
+        {
+          variant: SnackBarVariant.Error,
+        },
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    endTrialPeriod,
+    isLoading,
+  };
+};