adapt billing banners according to user's permissions (#12005)

closes https://github.com/twentyhq/twenty/issues/11951

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

@@ -1,9 +1,14 @@
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useSettingsPermissionMap } from '@/settings/roles/hooks/useSettingsPermissionMap';
 import { SettingsPath } from '@/types/SettingsPath';
-import { useBillingPortalSessionQuery } from '~/generated/graphql';
+import { t } from '@lingui/core/macro';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  SettingPermissionType,
+  useBillingPortalSessionQuery,
+} from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const InformationBannerBillingSubscriptionPaused = () => {
   const { redirect } = useRedirect();
@@ -14,6 +19,10 @@ export const InformationBannerBillingSubscriptionPaused = () => {
     },
   });
 
+  const {
+    [SettingPermissionType.WORKSPACE]: hasPermissionToUpdateBillingDetails,
+  } = useSettingsPermissionMap();
+
   const openBillingPortal = () => {
     if (isDefined(data) && isDefined(data.billingPortalSession.url)) {
       redirect(data.billingPortalSession.url);
@@ -23,8 +32,12 @@ export const InformationBannerBillingSubscriptionPaused = () => {
   return (
     <InformationBanner
       variant="danger"
-      message={'Trial expired. Please update your billing details'}
+      message={
-      buttonTitle="Update"
+        hasPermissionToUpdateBillingDetails
+          ? t`Trial expired. Please update your billing details.`
+          : t`Trial expired. Please contact your admin`
+      }
+      buttonTitle={hasPermissionToUpdateBillingDetails ? t`Update` : undefined}
       buttonOnClick={() => openBillingPortal()}
       isButtonDisabled={loading || !isDefined(data)}
     />

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

@@ -1,16 +1,25 @@
 import { useEndSubscriptionTrialPeriod } from '@/billing/hooks/useEndSubscriptionTrialPeriod';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useSettingsPermissionMap } from '@/settings/roles/hooks/useSettingsPermissionMap';
 import { useLingui } from '@lingui/react/macro';
+import { SettingPermissionType } from '~/generated-metadata/graphql';
 
 export const InformationBannerEndTrialPeriod = () => {
   const { endTrialPeriod, isLoading } = useEndSubscriptionTrialPeriod();
   const { t } = useLingui();
 
+  const { [SettingPermissionType.WORKSPACE]: hasPermissionToEndTrialPeriod } =
+    useSettingsPermissionMap();
+
   return (
     <InformationBanner
       variant="danger"
-      message={t`No free workflow executions left. End trial period and activate your billing to continue.`}
+      message={
-      buttonTitle={t`Activate`}
+        hasPermissionToEndTrialPeriod
+          ? t`No free workflow executions left. End trial period and activate your billing to continue.`
+          : t`No free workflow executions left. Please contact your admin.`
+      }
+      buttonTitle={hasPermissionToEndTrialPeriod ? t`Activate` : undefined}
       buttonOnClick={async () => await endTrialPeriod()}
       isButtonDisabled={isLoading}
     />

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

@@ -1,9 +1,14 @@
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useSettingsPermissionMap } from '@/settings/roles/hooks/useSettingsPermissionMap';
 import { SettingsPath } from '@/types/SettingsPath';
-import { useBillingPortalSessionQuery } from '~/generated/graphql';
+import { t } from '@lingui/core/macro';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  SettingPermissionType,
+  useBillingPortalSessionQuery,
+} from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const InformationBannerFailPaymentInfo = () => {
   const { redirect } = useRedirect();
@@ -14,6 +19,10 @@ export const InformationBannerFailPaymentInfo = () => {
     },
   });
 
+  const {
+    [SettingPermissionType.WORKSPACE]: hasPermissionToUpdateBillingDetails,
+  } = useSettingsPermissionMap();
+
   const openBillingPortal = () => {
     if (isDefined(data) && isDefined(data.billingPortalSession.url)) {
       redirect(data.billingPortalSession.url);
@@ -23,8 +32,12 @@ export const InformationBannerFailPaymentInfo = () => {
   return (
     <InformationBanner
       variant="danger"
-      message={'Last payment failed. Please update your billing details.'}
+      message={
-      buttonTitle="Update"
+        hasPermissionToUpdateBillingDetails
+          ? t`Last payment failed. Please update your billing details.`
+          : t`Last payment failed. Please contact your admin.`
+      }
+      buttonTitle={hasPermissionToUpdateBillingDetails ? t`Update` : undefined}
       buttonOnClick={() => openBillingPortal()}
       isButtonDisabled={loading || !isDefined(data)}
     />

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

@@ -1,6 +1,9 @@
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
 import { useHandleCheckoutSession } from '@/billing/hooks/useHandleCheckoutSession';
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useSettingsPermissionMap } from '@/settings/roles/hooks/useSettingsPermissionMap';
+import { t } from '@lingui/core/macro';
+import { SettingPermissionType } from '~/generated-metadata/graphql';
 
 export const InformationBannerNoBillingSubscription = () => {
   const { handleCheckoutSession, isSubmitting } = useHandleCheckoutSession({
@@ -9,11 +12,18 @@ export const InformationBannerNoBillingSubscription = () => {
     requirePaymentMethod: true,
   });
 
+  const { [SettingPermissionType.WORKSPACE]: hasPermissionToSubscribe } =
+    useSettingsPermissionMap();
+
   return (
     <InformationBanner
       variant="danger"
-      message={`Your workspace does not have an active subscription`}
+      message={
-      buttonTitle="Subscribe"
+        hasPermissionToSubscribe
+          ? t`Your workspace doesn't have an active subscription.`
+          : t`Your workspace doesn't have an active subscription. Please contact your admin.`
+      }
+      buttonTitle={hasPermissionToSubscribe ? t`Subscribe` : undefined}
       buttonOnClick={() => handleCheckoutSession()}
       isButtonDisabled={isSubmitting}
     />