Hiding messaging when external payments are provided (#1425)

* Making function just set all the related data
Adding a blank message in case we want to put something there
Updating store names to match what they're doing now

* Setting some changes back as they are not needed
Fetching the info from the initial loading of tenant data

* Moving stuff into a hook to make it a bit simpler and sharable

src/components/admin/Billing/PricingTierDetails.tsx

@@ -1,20 +1,27 @@
 import { Skeleton, Typography } from '@mui/material';
+import { useTenantUsesExternalPayment } from 'context/fetcher/TenantBillingDetails';
 import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useBillingStore } from 'stores/Billing/Store';
+import { useTenantStore } from 'stores/Tenant/Store';
 
 function PricingTierDetails() {
+    const selectedTenant = useTenantStore((state) => state.selectedTenant);
+    const externalPaymentMethod = useTenantUsesExternalPayment(selectedTenant);
+
     const billingStoreHydrated = useBillingStore((state) => state.hydrated);
     const paymentMethodExists = useBillingStore(
         (state) => state.paymentMethodExists
     );
 
     const messageId = useMemo(
         () =>
-            paymentMethodExists
+            externalPaymentMethod
+                ? 'admin.billing.message.external'
+                : paymentMethodExists
                 ? 'admin.billing.message.paidTier'
                 : 'admin.billing.message.freeTier',
-        [paymentMethodExists]
+        [externalPaymentMethod, paymentMethodExists]
     );
 
     if (!billingStoreHydrated || typeof paymentMethodExists !== 'boolean') {

src/context/fetcher/TenantBillingDetails.tsx

@@ -2,7 +2,7 @@ import { MAX_TENANTS } from 'api/billing';
 import FullPageError from 'components/fullPage/Error';
 import { useUserInfoSummaryStore } from 'context/UserInfoSummary/useUserInfoSummaryStore';
 import { useTenantsDetailsForPayment } from 'hooks/useTenants';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useEntitiesStore_tenantsWithAdmin } from 'stores/Entities/hooks';
 import { BaseComponentProps, TenantPaymentDetails } from 'types';
@@ -14,7 +14,7 @@ const TenantContext = createContext<TenantContextData>({
     tenantBillingDetails: null,
 });
 
-const TenantBillingDetailsContextProvider = ({
+export const TenantBillingDetailsContextProvider = ({
     children,
 }: BaseComponentProps) => {
     const hasSupportRole = useUserInfoSummaryStore(
@@ -62,8 +62,21 @@ const TenantBillingDetailsContextProvider = ({
 // TODO (optimization): Consider defining a hook that returns an array of mapped tenant names.
 //   The majority of the components that call useTenantDetails do so to extract a memoized
 //   array of tenant names.
-const useTenantBillingDetails = () => {
+export const useTenantBillingDetails = () => {
     return useContext(TenantContext);
 };
 
-export { TenantBillingDetailsContextProvider, useTenantBillingDetails };
+export const useTenantUsesExternalPayment = (selectedTenant: string) => {
+    const { tenantBillingDetails } = useTenantBillingDetails();
+
+    return useMemo(() => {
+        return !tenantBillingDetails
+            ? false
+            : tenantBillingDetails.some((tenantBillingDetail) => {
+                  return (
+                      tenantBillingDetail.tenant === selectedTenant &&
+                      tenantBillingDetail.payment_provider === 'external'
+                  );
+              });
+    }, [selectedTenant, tenantBillingDetails]);
+};

src/lang/en-US/AdminPage.ts

@@ -27,6 +27,7 @@ export const AdminPage: Record<string, string> = {
     'admin.billing.header': `Billing`,
     'admin.billing.message.freeTier': `The free tier lets you try Flow with up to 2 tasks and 10GB per month without entering a credit card. Usage beyond these limits automatically starts a 30 day free trial.`,
     'admin.billing.message.paidTier': `Cloud tier.`,
+    'admin.billing.message.external': ` `,
     'admin.billing.error.details.header': `There was a network issue.`,
     'admin.billing.error.details.message': `There was an error fetching your billing details. ${Errors['error.tryAgain']}`,
     'admin.billing.error.paymentMethodsError': `There was an error connecting with our payment provider. Please try again later.`,