fix: add enterprise plan to platform billing (#2251)

tolgee · Apr 17, 2024 · 3ea21b8 · 3ea21b8
1 parent 8c3b6d3
commit 3ea21b8
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 60 deletions.
diff --git a/webapp/src/views/organizations/billing/Subscriptions/cloud/CloudSubscriptions.tsx b/webapp/src/views/organizations/billing/Subscriptions/cloud/CloudSubscriptions.tsx
@@ -10,6 +10,7 @@ import { useOrganizationCreditBalance } from '../../useOrganizationCreditBalance
 import { useEffect, useState } from 'react';
 import { planIsPeriodDependant } from './Plans/PlanPrice';
 import { useReportEvent } from 'tg.hooks/useReportEvent';
+import { EnterprisePlan } from './Plans/EnterprisePlan';
 
 const StyledShopping = styled('div')`
   display: grid;
@@ -89,6 +90,7 @@ export const CloudSubscriptions = () => {
                 onPeriodChange={(period) => setPeriod(period)}
                 period={period}
               />
+              <EnterprisePlan />
               <Credits />
             </StyledShopping>
           </>

diff --git a/webapp/src/views/organizations/billing/Subscriptions/cloud/Plans/CloudPlanInfo.tsx b/webapp/src/views/organizations/billing/Subscriptions/cloud/Plans/CloudPlanInfo.tsx
@@ -1,34 +1,14 @@
-import { styled } from '@mui/material';
+import React from 'react';
 import { T } from '@tolgee/react';
 
 import { useNumberFormatter } from 'tg.hooks/useLocale';
 import { components } from 'tg.service/billingApiSchema.generated';
 import { MtHint } from 'tg.component/billing/MtHint';
-import { PlanInfo } from '../../common/PlanInfo';
-import React from 'react';
 import { StringsHint } from 'tg.component/billing/StringsHint';
 
-type PlanModel = components['schemas']['CloudPlanModel'];
-
-const StyledItem = styled('div')`
-  display: grid;
-  justify-items: center;
-  color: ${({ theme }) => theme.palette.emphasis[700]};
-`;
+import { PlanMetrics } from '../../common/PlanMetrics';
 
-const StyledSpacer = styled('div')`
-  width: 1px;
-  background: ${({ theme }) => theme.palette.divider};
-`;
-
-const StyledNumber = styled('div')`
-  font-size: 24px;
-`;
-
-const StyledName = styled('div')`
-  font-size: 14px;
-  text-align: center;
-`;
+type PlanModel = components['schemas']['CloudPlanModel'];
 
 type Props = {
   plan: PlanModel;
@@ -37,18 +17,17 @@ type Props = {
 export const CloudPlanInfo: React.FC<Props> = ({ plan }) => {
   const usesSlots = plan.type === 'SLOTS_FIXED';
   const formatNumber = useNumberFormatter();
+
   return (
-    <PlanInfo>
-      <StyledItem>
-        <StyledNumber>
-          {formatNumber(
-            usesSlots
-              ? plan.includedUsage.translationSlots
-              : plan.includedUsage.translations!
-          )}
-        </StyledNumber>
-        <StyledName>
-          {plan.type === 'PAY_AS_YOU_GO' ? (
+    <PlanMetrics
+      left={{
+        number: formatNumber(
+          usesSlots
+            ? plan.includedUsage.translationSlots
+            : plan.includedUsage.translations!
+        ),
+        name:
+          plan.type === 'PAY_AS_YOU_GO' ? (
             <T
               keyName="billing_plan_strings_included_with_hint"
               params={{ hint: <StringsHint /> }}
@@ -60,21 +39,17 @@ export const CloudPlanInfo: React.FC<Props> = ({ plan }) => {
               keyName="billing_plan_strings_limit_with_hint"
               params={{ hint: <StringsHint /> }}
             />
-          )}
-        </StyledName>
-      </StyledItem>
-      <StyledSpacer />
-      <StyledItem>
-        <StyledNumber>
-          {formatNumber(plan.includedUsage.mtCredits || 0)}
-        </StyledNumber>
-        <StyledName>
+          ),
+      }}
+      right={{
+        number: formatNumber(plan.includedUsage.mtCredits || 0),
+        name: (
           <T
             keyName="billing_plan_credits_included"
             params={{ hint: <MtHint /> }}
           />
-        </StyledName>
-      </StyledItem>
-    </PlanInfo>
+        ),
+      }}
+    />
   );
 };
diff --git a/webapp/src/views/organizations/billing/Subscriptions/cloud/Plans/EnterprisePlan.tsx b/webapp/src/views/organizations/billing/Subscriptions/cloud/Plans/EnterprisePlan.tsx
@@ -0,0 +1,63 @@
+import { T } from '@tolgee/react';
+import { Button } from '@mui/material';
+
+import { MtHint } from 'tg.component/billing/MtHint';
+import { StringsHint } from 'tg.component/billing/StringsHint';
+import { StyledActionArea } from 'tg.views/organizations/billing/BillingSection';
+
+import { Plan, PlanContent } from '../../common/Plan';
+import { PlanInfoArea } from '../../common/PlanInfo';
+import { PlanTitle } from '../../common/PlanTitle';
+import { IncludedFeatures } from '../../selfHostedEe/IncludedFeatures';
+import { PlanMetrics } from '../../common/PlanMetrics';
+
+export const EnterprisePlan = () => {
+  return (
+    <Plan>
+      <PlanContent>
+        <PlanTitle title="Enterprise" />
+
+        <PlanInfoArea>
+          <PlanMetrics
+            left={{
+              number: <T keyName="billing_plan_unlimited" />,
+              name: (
+                <T
+                  keyName="billing_plan_strings_included_with_hint"
+                  params={{ hint: <StringsHint /> }}
+                />
+              ),
+            }}
+            right={{
+              number: <T keyName="billing_plan_unlimited" />,
+              name: (
+                <T
+                  keyName="billing_plan_credits_included"
+                  params={{ hint: <MtHint /> }}
+                />
+              ),
+            }}
+          />
+          <IncludedFeatures
+            features={[
+              'ACCOUNT_MANAGER',
+              'PREMIUM_SUPPORT',
+              'DEDICATED_SLACK_CHANNEL',
+              'TEAM_TRAINING',
+            ]}
+          />
+        </PlanInfoArea>
+        <StyledActionArea>
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            href="mailto:info@tolgee.io"
+          >
+            <T keyName="billing_plan_contact_us" />
+          </Button>
+        </StyledActionArea>
+      </PlanContent>
+    </Plan>
+  );
+};
diff --git a/webapp/src/views/organizations/billing/Subscriptions/common/PlanMetrics.tsx b/webapp/src/views/organizations/billing/Subscriptions/common/PlanMetrics.tsx
@@ -0,0 +1,49 @@
+import { styled } from '@mui/material';
+import { PlanInfo } from './PlanInfo';
+
+const StyledItem = styled('div')`
+  display: grid;
+  justify-items: center;
+  color: ${({ theme }) => theme.palette.emphasis[700]};
+`;
+
+const StyledSpacer = styled('div')`
+  width: 1px;
+  background: ${({ theme }) => theme.palette.divider};
+`;
+
+const StyledNumber = styled('div')`
+  font-size: 24px;
+`;
+
+const StyledName = styled('div')`
+  font-size: 14px;
+  text-align: center;
+`;
+
+type Props = {
+  left: {
+    number: React.ReactNode;
+    name: React.ReactNode;
+  };
+  right: {
+    number: React.ReactNode;
+    name: React.ReactNode;
+  };
+};
+
+export const PlanMetrics = ({ left, right }: Props) => {
+  return (
+    <PlanInfo>
+      <StyledItem>
+        <StyledNumber>{left.number}</StyledNumber>
+        <StyledName>{left.name}</StyledName>
+      </StyledItem>
+      <StyledSpacer />
+      <StyledItem>
+        <StyledNumber>{right.number}</StyledNumber>
+        <StyledName>{right.name}</StyledName>
+      </StyledItem>
+    </PlanInfo>
+  );
+};
diff --git a/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/EnterprisePlan.tsx b/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/EnterprisePlan.tsx
@@ -0,0 +1,45 @@
+import { T } from '@tolgee/react';
+import { Button } from '@mui/material';
+import { StyledActionArea } from 'tg.views/organizations/billing/BillingSection';
+
+import { Plan, PlanContent } from '../common/Plan';
+import { PlanInfoArea } from '../common/PlanInfo';
+import { PlanTitle } from '../common/PlanTitle';
+import { IncludedFeatures } from '../selfHostedEe/IncludedFeatures';
+
+export const EnterprisePlan = () => {
+  return (
+    <Plan>
+      <PlanContent>
+        <PlanTitle title="Enterprise" />
+
+        <PlanInfoArea>
+          <IncludedFeatures
+            includedUsage={{
+              seats: -1,
+            }}
+            features={[
+              'ACCOUNT_MANAGER',
+              'PREMIUM_SUPPORT',
+              'DEDICATED_SLACK_CHANNEL',
+              'DEPLOYMENT_ASSISTANCE',
+              'ASSISTED_UPDATES',
+              'BACKUP_CONFIGURATION',
+              'TEAM_TRAINING',
+            ]}
+          />
+        </PlanInfoArea>
+        <StyledActionArea>
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            href="mailto:info@tolgee.io"
+          >
+            <T keyName="billing_plan_contact_us" />
+          </Button>
+        </StyledActionArea>
+      </PlanContent>
+    </Plan>
+  );
+};
diff --git a/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/IncludedFeatures.tsx b/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/IncludedFeatures.tsx
@@ -4,7 +4,7 @@ import { T } from '@tolgee/react';
 import { Box, styled, Typography } from '@mui/material';
 import { PlanFeature } from './PlanFeature';
 import { useFeatureTranslation } from 'tg.translationTools/useFeatureTranslation';
-import { IncludedUsage } from './IncludedUsage';
+import { IncludedUsage, Usage } from './IncludedUsage';
 
 const StyledListWrapper = styled(Box)`
   display: grid;
@@ -15,7 +15,7 @@ const StyledListWrapper = styled(Box)`
 
 export const IncludedFeatures: FC<{
   features: components['schemas']['EeSubscriptionModel']['enabledFeatures'];
-  includedUsage?: components['schemas']['PlanIncludedUsageModel'];
+  includedUsage?: Usage;
 }> = ({ features, includedUsage }) => {
   const translateFeature = useFeatureTranslation();
 

diff --git a/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/IncludedUsage.tsx b/webapp/src/views/organizations/billing/Subscriptions/selfHostedEe/IncludedUsage.tsx
@@ -1,12 +1,16 @@
 import { Box } from '@mui/material';
 import { T } from '@tolgee/react';
-import { components } from 'tg.service/apiSchema.generated';
 
-interface IncludedProps {
-  included: components['schemas']['PlanIncludedUsageModel'];
+export type Usage = {
+  seats: number;
+  mtCredits?: number;
+};
+
+interface Props {
+  included: Usage;
 }
 
-export function IncludedUsage(props: IncludedProps) {
+export function IncludedUsage(props: Props) {
   return (
     <>
       {props.included.seats > 0 && (
@@ -22,14 +26,15 @@ export function IncludedUsage(props: IncludedProps) {
           <T keyName="billinb_self_hosted_plan_unlimited_seats" />
         </Box>
       )}
-      {props.included.mtCredits > 0 && (
-        <Box>
-          <T
-            keyName="billinb_self_hosted_plan_included_mtCredits"
-            params={{ mtCredits: props.included.mtCredits }}
-          />
-        </Box>
-      )}
+      {props.included.mtCredits !== undefined &&
+        props.included.mtCredits > 0 && (
+          <Box>
+            <T
+              keyName="billinb_self_hosted_plan_included_mtCredits"
+              params={{ mtCredits: props.included.mtCredits }}
+            />
+          </Box>
+        )}
     </>
   );
 }
diff --git a/.../src/views/organizations/billing/Subscriptions/selfHostedEe/SelfHostedEeSubscriptions.tsx b/.../src/views/organizations/billing/Subscriptions/selfHostedEe/SelfHostedEeSubscriptions.tsx
@@ -14,6 +14,7 @@ import { SelfHostedEeActiveSubscription } from './SelfHostedEeActiveSubscription
 import { BillingPeriodType } from '../cloud/Plans/PeriodSwitch';
 import { components } from 'tg.service/billingApiSchema.generated';
 import { useReportEvent } from 'tg.hooks/useReportEvent';
+import { EnterprisePlan } from './EnterprisePlan';
 
 type SelfHostedEeSubscriptionModel =
   components['schemas']['SelfHostedEeSubscriptionModel'];
@@ -151,6 +152,7 @@ export const SelfHostedEeSubscriptions = () => {
             onChange={setPeriod}
           />
         ))}
+        <EnterprisePlan />
       </StyledShopping>
     </>
   );