fix: New plan with key and seat metric creation and test

tolgee · Mar 4, 2025 · 848b73f · 848b73f
1 parent 5ecb737
commit 848b73f
Show file tree

Hide file tree

Showing 11 changed files with 886 additions and 148 deletions.
diff --git a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
@@ -270,6 +270,7 @@ enum class Message {
   CANNOT_UPDATE_WITHOUT_MODIFICATION,
   CURRENT_SUBSCRIPTION_IS_NOT_TRIALING,
   SORTING_AND_PAGING_IS_NOT_SUPPORTED_WHEN_USING_CURSOR,
+  STRINGS_METRIC_ARE_NOT_SUPPORTED,
   ;
 
   val code: String

diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
@@ -18,11 +18,13 @@ declare namespace DataCy {
         "administration-billing-edit-custom-plan-button" |
         "administration-billing-exclusive-plan-chip" |
         "administration-billing-trial-badge" |
-        "administration-cloud-plan-field-feature" |
         "administration-cloud-plan-field-free" |
         "administration-cloud-plan-field-included-keys" |
         "administration-cloud-plan-field-included-mt-credits" |
+        "administration-cloud-plan-field-included-seats" |
         "administration-cloud-plan-field-included-translations" |
+        "administration-cloud-plan-field-metric-type" |
+        "administration-cloud-plan-field-metric-type-item" |
         "administration-cloud-plan-field-name" |
         "administration-cloud-plan-field-price-monthly" |
         "administration-cloud-plan-field-price-per-seat" |
@@ -72,6 +74,7 @@ declare namespace DataCy {
         "administration-organizations-list-item" |
         "administration-organizations-projects-button" |
         "administration-organizations-settings-button" |
+        "administration-plan-field-feature" |
         "administration-plan-field-non-commercial" |
         "administration-plan-selector" |
         "administration-subscriptions-cloud-plan-name" |

diff --git a/...src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx b/...src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
@@ -8,7 +8,8 @@ type CloudPlanModel = components['schemas']['CloudPlanRequest'];
 type EnabledFeature =
   components['schemas']['CloudPlanRequest']['enabledFeatures'][number];
 
-export type MetricType = 'STRINGS' | 'SEATS_KEYS';
+export type MetricType =
+  components['schemas']['CloudPlanRequest']['metricType'];
 
 export type CloudPlanFormData = {
   type: CloudPlanModel['type'];

diff --git a/...e/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx b/...e/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
@@ -1,20 +1,13 @@
 import { TextField } from 'tg.component/common/form/fields/TextField';
 import { useTranslate } from '@tolgee/react';
-import {
-  Box,
-  Checkbox,
-  FormControlLabel,
-  Switch,
-  Typography,
-} from '@mui/material';
-import { Field, FieldProps, useFormikContext } from 'formik';
-import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
+import { Box, FormControlLabel, Switch } from '@mui/material';
+import { useFormikContext } from 'formik';
 import React, { FC } from 'react';
 import { CloudPlanPricesAndLimits } from './CloudPlanPricesAndLimits';
 import { PlanNonCommercialSwitch } from './PlanNonCommercialSwitch';
 import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
 import { CloudPlanTypeSelectField } from './CloudPlanTypeSelectField';
-import { StripeProductSelectField } from './StripeProductSelectField';
+import { PlanStripeProductSelectField } from './PlanStripeProductSelectField';
 import { CloudPlanMetricTypeSelectField } from './CloudPlanMetricTypeSelectField';
 import { PlanEnabledFeaturesField } from './PlanEnabledFeaturesField';
 
@@ -25,7 +18,7 @@ export const CloudPlanFields: FC<{
 }> = ({ parentName, isUpdate, canEditPrices }) => {
   const { t } = useTranslate();
 
-  const { setFieldValue } = useFormikContext<any>();
+  const { setFieldValue, errors } = useFormikContext<any>();
 
   const { values } = useCloudPlanFormValues(parentName);
 
@@ -35,6 +28,8 @@ export const CloudPlanFields: FC<{
     setFieldValue(`${parentName}free`, !values.free);
   }
 
+  console.log({ errors, values });
+
   return (
     <>
       <TextField
@@ -62,7 +57,7 @@ export const CloudPlanFields: FC<{
       >
         <CloudPlanTypeSelectField parentName={parentName} />
         <CloudPlanMetricTypeSelectField parentName={parentName} />
-        <StripeProductSelectField />
+        <PlanStripeProductSelectField parentName={parentName} />
       </Box>
 
       <CloudPlanPricesAndLimits

diff --git a/...ng/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx b/...ng/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
@@ -22,7 +22,7 @@ export const CloudPlanIncludedUsage: FC<CloudPlanPricesProps> = ({
       </Typography>
       <Box
         display="grid"
-        gridTemplateColumns="repeat(4, 1fr)"
+        gridTemplateColumns="repeat(3, 1fr)"
         gap={2}
         sx={{ mt: 1 }}
       >
@@ -52,9 +52,8 @@ export const CloudPlanIncludedUsage: FC<CloudPlanPricesProps> = ({
           />
         )}
 
-        {values.metricType == 'SEATS_KEYS' && (
+        {values.metricType == 'KEYS_SEATS' && (
           <>
-            {/*TODO: Test that for fixed plan we cannot set the prices in the backend tests  */}
             <TextField
               name={`${parentName}includedUsage.keys`}
               size="small"
@@ -68,7 +67,7 @@ export const CloudPlanIncludedUsage: FC<CloudPlanPricesProps> = ({
               size="small"
               type="number"
               fullWidth
-              data-cy="administration-cloud-plan-field-included-keys"
+              data-cy="administration-cloud-plan-field-included-seats"
               label={t('administration_cloud_plan_field_included_seats')}
             />
           </>

diff --git a/...istration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx b/...istration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { Select } from 'tg.component/common/form/fields/Select';
 import { MenuItem } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
@@ -17,9 +17,9 @@ export const CloudPlanMetricTypeSelectField: FC<
   const { values } = useCloudPlanFormValues(parentName);
 
   const options = [
-    { value: 'SEATS_KEYS', label: 'Keys & Seats' },
+    { value: 'KEYS_SEATS', label: 'Keys & Seats' },
     { value: 'STRINGS', label: 'Strings' },
-  ] as { value: MetricType; label: string }[];
+  ] satisfies { value: MetricType; label: string }[];
 
   if (values.type == 'SLOTS_FIXED') {
     return null;
@@ -33,14 +33,14 @@ export const CloudPlanMetricTypeSelectField: FC<
       fullWidth
       minHeight={false}
       sx={{ flexBasis: '50%' }}
-      data-cy="administration-cloud-plan-field-type"
+      data-cy="administration-cloud-plan-field-metric-type"
       renderValue={(val) => options.find((o) => o.value === val)?.label}
     >
       {options.map(({ value, label }) => (
         <MenuItem
           key={value}
           value={value}
-          data-cy="administration-cloud-plan-field-type-item"
+          data-cy="administration-cloud-plan-field-metric-type-item"
         >
           {label}
         </MenuItem>

diff --git a/...e/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx b/...e/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
@@ -55,12 +55,15 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
 
   return (
     <>
-      <Typography sx={{ mt: 2 }}>
+      <Typography sx={{ mt: 4 }} variant="h3">
         {t('administration_cloud_plan_form_prices_title')}
       </Typography>
+      <Typography>
+        {t('administration_cloud_plan_form_prices_per_subscription')}
+      </Typography>
       <Box
         display="grid"
-        gridTemplateColumns="repeat(4, 1fr)"
+        gridTemplateColumns="repeat(2, 1fr)"
         gap={2}
         sx={{ mt: 1 }}
       >
@@ -80,6 +83,18 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
           type="number"
           fullWidth
         />
+      </Box>
+
+      <Typography>
+        {t('administration_cloud_plan_form_prices_per_usage')}
+      </Typography>
+
+      <Box
+        display="grid"
+        gridTemplateColumns="repeat(3, 1fr)"
+        gap={2}
+        sx={{ mt: 1 }}
+      >
         <TextField
           name={`${parentName}prices.perThousandMtCredits`}
           size="small"
@@ -91,7 +106,6 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
           fullWidth
           disabled={type !== 'PAY_AS_YOU_GO'}
         />
-        {/*TODO: Split usage based and subscription based prices*/}
         {metricType == 'STRINGS' && (
           <>
             <TextField
@@ -107,7 +121,7 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
             />
           </>
         )}
-        {metricType == 'SEATS_KEYS' && (
+        {metricType == 'KEYS_SEATS' && (
           <>
             <TextField
               name={`${parentName}prices.perThousandKeys`}

diff --git a/.../administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx b/.../administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
@@ -40,7 +40,7 @@ export const PlanEnabledFeaturesField: FC<EnabledFeaturesFieldProps> = ({
 
             return (
               <FormControlLabel
-                data-cy="administration-cloud-plan-field-feature"
+                data-cy="administration-plan-field-feature"
                 key={feature}
                 control={
                   <Checkbox

diff --git a/...nForm/fields/StripeProductSelectField.tsx → ...m/fields/PlanStripeProductSelectField.tsx b/...nForm/fields/StripeProductSelectField.tsx → ...m/fields/PlanStripeProductSelectField.tsx
@@ -8,9 +8,9 @@ type StripeProductSelectFieldProps = {
   parentName?: string;
 };
 
-export const StripeProductSelectField: FC<StripeProductSelectFieldProps> = ({
-  parentName,
-}) => {
+export const PlanStripeProductSelectField: FC<
+  StripeProductSelectFieldProps
+> = ({ parentName }) => {
   const productsLoadable = useBillingApiQuery({
     url: '/v2/administration/billing/stripe-products',
     method: 'get',

diff --git a/...billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts b/...billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
@@ -22,13 +22,12 @@ export const getCloudPlanInitialValues = (
             ? planData.includedUsage.translationSlots
             : planData.includedUsage.translations,
       },
-      metricType: planData.includedUsage.keys > 0 ? 'SEATS_KEYS' : 'STRINGS',
     } as CloudPlanFormData;
   }
 
   return {
     type: 'PAY_AS_YOU_GO',
-    metricType: 'SEATS_KEYS',
+    metricType: 'KEYS_SEATS',
     name: '',
     stripeProductId: '',
     prices: {