From 40bf81338c4441b542948ef772e2508b207a6b85 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Mon, 24 Feb 2025 16:01:53 +0100
Subject: [PATCH 01/16] feat: Add keys as metric > prepared entities & other
 parts of backend

---
 ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt b/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
index d3a95e459b..ddbf97a92b 100644
--- a/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
+++ b/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
@@ -5,6 +5,7 @@ import java.math.BigDecimal
 data class UsageData(
   val seatsUsage: List<ProportionalUsagePeriod>,
   val translationsUsage: List<ProportionalUsagePeriod>,
+  val keysUsage: List<ProportionalUsagePeriod>,
   val creditsUsage: SumUsageItem?,
   val subscriptionPrice: BigDecimal?,
   val appliedStripeCredits: BigDecimal?,

From 83a23d3ebd6943fbbfd1546fc76ba8cc0caea90f Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 25 Feb 2025 16:05:15 +0100
Subject: [PATCH 02/16] chore: KtLint

---
 .../hateoas/ee/PlanIncludedUsageModel.kt      |  1 +
 .../io/tolgee/hateoas/ee/PlanPricesModel.kt   |  3 +++
 .../io/tolgee/fixtures/dateFromString.kt      | 15 +++++++++++++
 .../kotlin/io/tolgee/AbstractSpringTest.kt    | 22 +++++++++++++++++++
 4 files changed, 41 insertions(+)
 create mode 100644 backend/misc/src/main/kotlin/io/tolgee/fixtures/dateFromString.kt

diff --git a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanIncludedUsageModel.kt b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanIncludedUsageModel.kt
index 644595c7f8..b05829cce8 100644
--- a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanIncludedUsageModel.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanIncludedUsageModel.kt
@@ -11,4 +11,5 @@ open class PlanIncludedUsageModel(
   var translationSlots: Long = -1L,
   var translations: Long = -1L,
   var mtCredits: Long = -1L,
+  var keys: Long = -1L,
 ) : RepresentationModel<PlanIncludedUsageModel>(), Serializable
diff --git a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanPricesModel.kt b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanPricesModel.kt
index fb3feabafd..3be6275c19 100644
--- a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanPricesModel.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/PlanPricesModel.kt
@@ -13,4 +13,7 @@ open class PlanPricesModel(
   val perThousandMtCredits: BigDecimal? = BigDecimal.ZERO,
   val subscriptionMonthly: BigDecimal = BigDecimal.ZERO,
   val subscriptionYearly: BigDecimal = BigDecimal.ZERO,
+  val perThousandKeys: BigDecimal = BigDecimal.ZERO,
 ) : RepresentationModel<PlanPricesModel>(), Serializable
+
+// TODO: Test it always counts usage, to handle situation when user switches between free plan, strings or key based plans.
diff --git a/backend/misc/src/main/kotlin/io/tolgee/fixtures/dateFromString.kt b/backend/misc/src/main/kotlin/io/tolgee/fixtures/dateFromString.kt
new file mode 100644
index 0000000000..9bba2b10ef
--- /dev/null
+++ b/backend/misc/src/main/kotlin/io/tolgee/fixtures/dateFromString.kt
@@ -0,0 +1,15 @@
+package io.tolgee.fixtures
+
+import java.time.LocalDate
+import java.time.ZoneId
+import java.time.format.DateTimeFormatter
+import java.util.*
+
+fun dateFromString(
+  dateString: String,
+  pattern: String = "yyyy-MM-dd",
+): Date {
+  val formatter = DateTimeFormatter.ofPattern(pattern)
+  val localDate = LocalDate.parse(dateString, formatter)
+  return Date.from(localDate.atStartOfDay(ZoneId.of("UTC")).toInstant())
+}
diff --git a/backend/testing/src/main/kotlin/io/tolgee/AbstractSpringTest.kt b/backend/testing/src/main/kotlin/io/tolgee/AbstractSpringTest.kt
index 9b6167ec6e..7029b96979 100644
--- a/backend/testing/src/main/kotlin/io/tolgee/AbstractSpringTest.kt
+++ b/backend/testing/src/main/kotlin/io/tolgee/AbstractSpringTest.kt
@@ -1,6 +1,7 @@
 package io.tolgee
 
 import com.fasterxml.jackson.databind.ObjectMapper
+import com.fasterxml.jackson.module.kotlin.readValue
 import io.tolgee.activity.ActivityService
 import io.tolgee.component.AllCachesProvider
 import io.tolgee.component.CurrentDateProvider
@@ -19,6 +20,8 @@ import io.tolgee.configuration.tolgee.machineTranslation.TolgeeMachineTranslatio
 import io.tolgee.constants.MtServiceType
 import io.tolgee.development.DbPopulatorReal
 import io.tolgee.development.testDataBuilder.TestDataService
+import io.tolgee.fixtures.andGetContentAsString
+import io.tolgee.fixtures.andIsOk
 import io.tolgee.repository.EmailVerificationRepository
 import io.tolgee.repository.KeyRepository
 import io.tolgee.repository.OrganizationRepository
@@ -56,6 +59,7 @@ import org.springframework.beans.factory.annotation.Autowired
 import org.springframework.boot.test.context.SpringBootTest
 import org.springframework.cache.CacheManager
 import org.springframework.context.ApplicationContext
+import org.springframework.test.web.servlet.ResultActions
 import org.springframework.transaction.PlatformTransactionManager
 import org.springframework.transaction.TransactionDefinition
 import org.springframework.transaction.TransactionStatus
@@ -223,6 +227,9 @@ abstract class AbstractSpringTest : AbstractTransactionalTest() {
   @Autowired
   lateinit var allCachesProvider: AllCachesProvider
 
+  @Autowired
+  lateinit var objectMapper: ObjectMapper
+
   @BeforeEach
   fun clearCaches() {
     allCachesProvider.getAllCaches().forEach { cacheName ->
@@ -284,4 +291,19 @@ abstract class AbstractSpringTest : AbstractTransactionalTest() {
   open fun moveCurrentDate(duration: Duration) {
     currentDateProvider.move(duration)
   }
+
+  protected inline fun <reified T> ResultActions.getContent(): T {
+    val stringContent = this.andGetContentAsString
+    return objectMapper.readValue(stringContent)
+  }
+
+  protected fun ResultActions.getIdFromResponse(): Long {
+    this.andIsOk
+    val response: Map<String, Any> = getContent()
+    try {
+      return (response["id"] as Number).toLong()
+    } catch (e: Exception) {
+      throw Error("Response does not contain id", e)
+    }
+  }
 }

From 8ef69fe35ea0556e420df7759700502407863618 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 25 Feb 2025 16:12:08 +0100
Subject: [PATCH 03/16] feat: Backend for creating plan with keys/seats metric
 & refactoring

---
 .../kotlin/io/tolgee/events/OnOrganizationNameUpdated.kt  | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/events/OnOrganizationNameUpdated.kt

diff --git a/backend/data/src/main/kotlin/io/tolgee/events/OnOrganizationNameUpdated.kt b/backend/data/src/main/kotlin/io/tolgee/events/OnOrganizationNameUpdated.kt
new file mode 100644
index 0000000000..5dcfe564c9
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/events/OnOrganizationNameUpdated.kt
@@ -0,0 +1,8 @@
+package io.tolgee.events
+
+import io.tolgee.model.Organization
+
+class OnOrganizationNameUpdated(
+  val oldName: String,
+  val organization: Organization,
+)

From b02c362c567c5a2724faae553faf9dd78c184277 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 25 Feb 2025 17:42:56 +0100
Subject: [PATCH 04/16] feat: UI for creating cloud plan > first piece

---
 .run/Frontend localhost.run.xml               |   4 +-
 e2e/cypress/support/dataCyType.d.ts           |   4 +-
 .../src/constants/GlobalValidationSchema.tsx  |   6 +-
 .../AdministrationEePlanCreateView.tsx        |   1 +
 .../components/planForm/CloudPlanFormBase.tsx |   3 +
 .../components/planForm/EePlanForm.tsx        |  46 +-
 .../planForm/fields/CloudPlanFields.tsx       | 138 +--
 .../fields/CloudPlanIncludedUsage.tsx         |  79 ++
 .../fields/CloudPlanMetricTypeSelectField.tsx |  50 +
 .../planForm/fields/CloudPlanPrices.tsx       |  69 +-
 .../fields/CloudPlanPricesAndLimits.tsx       |  41 +-
 .../fields/CloudPlanTypeSelectField.tsx       |  56 +
 .../fields/PlanEnabledFeaturesField.tsx       |  60 ++
 .../fields/StripeProductSelectField.tsx       |  54 +
 .../planForm/getCloudPlanInitialValues.ts     |  10 +-
 .../planForm/useCloudPlanFormValues.ts        |  12 +
 webapp/src/service/apiSchema.generated.ts     |   3 +
 .../src/service/billingApiSchema.generated.ts | 955 +++---------------
 18 files changed, 524 insertions(+), 1067 deletions(-)
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanTypeSelectField.tsx
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx
 create mode 100644 webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/useCloudPlanFormValues.ts

diff --git a/.run/Frontend localhost.run.xml b/.run/Frontend localhost.run.xml
index 7dc8b2b7db..cd78cf5baa 100644
--- a/.run/Frontend localhost.run.xml	
+++ b/.run/Frontend localhost.run.xml	
@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Frontend localhost" type="js.build_tools.npm">
-    <package-json value="$PROJECT_DIR$/webapp/package.json" />
+    <package-json value="$PROJECT_DIR$/public/webapp/package.json" />
     <command value="run" />
     <scripts>
       <script value="start" />
@@ -9,4 +9,4 @@
     <envs />
     <method v="2" />
   </configuration>
-</component>
+</component>
\ No newline at end of file
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
index e50057588f..815f59b31a 100644
--- a/e2e/cypress/support/dataCyType.d.ts
+++ b/e2e/cypress/support/dataCyType.d.ts
@@ -20,10 +20,13 @@ declare namespace DataCy {
         "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-translations" |
         "administration-cloud-plan-field-name" |
         "administration-cloud-plan-field-price-monthly" |
+        "administration-cloud-plan-field-price-per-seat" |
+        "administration-cloud-plan-field-price-per-thousand-keys" |
         "administration-cloud-plan-field-price-per-thousand-mt-credits" |
         "administration-cloud-plan-field-price-per-thousand-translations" |
         "administration-cloud-plan-field-price-yearly" |
@@ -44,7 +47,6 @@ declare namespace DataCy {
         "administration-ee-license-key-input" |
         "administration-ee-license-release-key-button" |
         "administration-ee-plan-cancel-button" |
-        "administration-ee-plan-field-feature" |
         "administration-ee-plan-field-free" |
         "administration-ee-plan-field-included-mt-credits" |
         "administration-ee-plan-field-included-seats" |
diff --git a/webapp/src/constants/GlobalValidationSchema.tsx b/webapp/src/constants/GlobalValidationSchema.tsx
index e97bce29af..752b68e4ab 100644
--- a/webapp/src/constants/GlobalValidationSchema.tsx
+++ b/webapp/src/constants/GlobalValidationSchema.tsx
@@ -314,8 +314,10 @@ export class Validation {
     prices: Yup.object().when('type', {
       is: 'PAY_AS_YOU_GO',
       then: Yup.object({
-        perThousandMtCredits: Yup.number().moreThan(0),
-        perThousandTranslations: Yup.number().moreThan(0),
+        perThousandMtCredits: Yup.number().min(0),
+        perThousandTranslations: Yup.number().min(0),
+        perSeat: Yup.number().min(0),
+        perThousandKeys: Yup.number().min(0),
       }),
     }),
     free: Yup.boolean(),
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
index 40263cc210..a06c3095b1 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
@@ -78,6 +78,7 @@ export const AdministrationEePlanCreateView = () => {
                 seats: 0,
                 translations: 0,
                 mtCredits: 0,
+                keys: 0,
               },
               forOrganizationIds: [],
               enabledFeatures: [],
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
index 7e78fff5b3..79cc4f3202 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
@@ -8,8 +8,11 @@ type CloudPlanModel = components['schemas']['CloudPlanRequest'];
 type EnabledFeature =
   components['schemas']['CloudPlanRequest']['enabledFeatures'][number];
 
+export type MetricType = 'STRINGS' | 'SEATS_KEYS';
+
 export type CloudPlanFormData = {
   type: CloudPlanModel['type'];
+  metricType: MetricType;
   name: string;
   prices: CloudPlanModel['prices'];
   includedUsage: CloudPlanModel['includedUsage'];
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/EePlanForm.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/EePlanForm.tsx
index 41684c1155..dcbec8b95e 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/EePlanForm.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/EePlanForm.tsx
@@ -15,6 +15,7 @@ import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
 import { Validation } from 'tg.constants/GlobalValidationSchema';
 import LoadingButton from 'tg.component/common/form/LoadingButton';
 import { EePlanOrganizations } from './EePlanOrganizations';
+import { PlanEnabledFeaturesField } from './fields/PlanEnabledFeaturesField';
 
 type SelfHostedEePlanRequest = components['schemas']['SelfHostedEePlanRequest'];
 type EnabledFeature =
@@ -39,6 +40,7 @@ type Props = {
   loading: boolean | undefined;
 };
 
+// TODO: Refactor this so it's split into smaller components
 export function EePlanForm({ planId, initialData, onSubmit, loading }: Props) {
   const { t } = useTranslate();
 
@@ -47,11 +49,6 @@ export function EePlanForm({ planId, initialData, onSubmit, loading }: Props) {
     method: 'get',
   });
 
-  const featuresLoadable = useBillingApiQuery({
-    url: '/v2/administration/billing/features',
-    method: 'get',
-  });
-
   const products = productsLoadable.data?._embedded?.stripeProducts;
 
   return (
@@ -173,44 +170,7 @@ export function EePlanForm({ planId, initialData, onSubmit, loading }: Props) {
                 label={t('administration_ee_plan_field_included_mt_credits')}
               />
             </Box>
-            <Box>
-              <Typography sx={{ mt: 2 }}>
-                {t('administration_ee_plan_form_features_title')}
-              </Typography>
-              <Field name="enabledFeatures">
-                {(props: FieldProps<string[]>) =>
-                  featuresLoadable.data?.map((feature) => {
-                    const values = props.field.value;
-
-                    const toggleField = () => {
-                      let newValues = values;
-                      if (values.includes(feature)) {
-                        newValues = values.filter((val) => val !== feature);
-                      } else {
-                        newValues = [...values, feature];
-                      }
-                      props.form.setFieldValue(props.field.name, newValues);
-                    };
-
-                    return (
-                      <FormControlLabel
-                        data-cy="administration-ee-plan-field-feature"
-                        key={feature}
-                        control={
-                          <Checkbox
-                            value={feature}
-                            checked={props.field.value.includes(feature)}
-                            onChange={toggleField}
-                          />
-                        }
-                        label={feature}
-                      />
-                    );
-                  }) || []
-                }
-              </Field>
-            </Box>
-
+            <PlanEnabledFeaturesField parentName="" />
             <FormControlLabel
               control={
                 <Switch
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
index 4eeac56c06..6485a924cc 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
@@ -4,18 +4,19 @@ import {
   Box,
   Checkbox,
   FormControlLabel,
-  MenuItem,
   Switch,
   Typography,
 } from '@mui/material';
-import { Select } from 'tg.component/common/form/fields/Select';
 import { Field, FieldProps, useFormikContext } from 'formik';
-import { SearchSelect } from 'tg.component/searchSelect/SearchSelect';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { CloudPlanPricesAndLimits } from './CloudPlanPricesAndLimits';
-import { CloudPlanFormData } from '../CloudPlanFormBase';
 import { PlanNonCommercialSwitch } from './PlanNonCommercialSwitch';
+import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
+import { CloudPlanTypeSelectField } from './CloudPlanTypeSelectField';
+import { StripeProductSelectField } from './StripeProductSelectField';
+import { CloudPlanMetricTypeSelectField } from './CloudPlanMetricTypeSelectField';
+import { PlanEnabledFeaturesField } from './PlanEnabledFeaturesField';
 
 export const CloudPlanFields: FC<{
   parentName?: string;
@@ -24,44 +25,16 @@ export const CloudPlanFields: FC<{
 }> = ({ parentName, isUpdate, canEditPrices }) => {
   const { t } = useTranslate();
 
-  const featuresLoadable = useBillingApiQuery({
-    url: '/v2/administration/billing/features',
-    method: 'get',
-  });
+  const { setFieldValue } = useFormikContext<any>();
 
-  const productsLoadable = useBillingApiQuery({
-    url: '/v2/administration/billing/stripe-products',
-    method: 'get',
-  });
-
-  const products = productsLoadable.data?._embedded?.stripeProducts;
-
-  const { setFieldValue, values: formValues } = useFormikContext<any>();
-
-  const values: CloudPlanFormData = parentName
-    ? formValues[parentName]
-    : formValues;
+  const { values } = useCloudPlanFormValues(parentName);
 
   parentName = parentName ? parentName + '.' : '';
 
-  const typeOptions = [
-    { value: 'PAY_AS_YOU_GO', label: 'Pay as you go', enabled: !values.free },
-    { value: 'FIXED', label: 'Fixed', enabled: true },
-    { value: 'SLOTS_FIXED', label: 'Slots fixed', enabled: true },
-  ];
-
-  const enabledTypeOptions = typeOptions.filter((t) => t.enabled);
-
   function onFreeChange() {
     setFieldValue(`${parentName}free`, !values.free);
   }
 
-  useEffect(() => {
-    if (!enabledTypeOptions.find((o) => o.value === values.type)) {
-      setFieldValue(`${parentName}type`, enabledTypeOptions[0].value);
-    }
-  }, [values.free]);
-
   return (
     <>
       <TextField
@@ -84,105 +57,20 @@ export const CloudPlanFields: FC<{
           display: 'grid',
           gap: 2,
           mt: 2,
-          gridTemplateColumns: '1fr 1fr',
+          gridTemplateColumns: '1fr 1fr 1fr',
         }}
       >
-        <Select
-          label={t('administration_cloud_plan_field_type')}
-          name={`${parentName}type`}
-          size="small"
-          fullWidth
-          minHeight={false}
-          sx={{ flexBasis: '50%' }}
-          data-cy="administration-cloud-plan-field-type"
-          renderValue={(val) =>
-            enabledTypeOptions.find((o) => o.value === val)?.label
-          }
-        >
-          {enabledTypeOptions.map(({ value, label }) => (
-            <MenuItem
-              key={value}
-              value={value}
-              data-cy="administration-cloud-plan-field-type-item"
-            >
-              {label}
-            </MenuItem>
-          ))}
-        </Select>
-        <Field name={`${parentName}stripeProductId`}>
-          {({ field, form, meta }: FieldProps) => {
-            return (
-              <SearchSelect
-                compareFunction={(prompt, label) =>
-                  label.toLowerCase().includes(prompt.toLowerCase())
-                }
-                SelectProps={{
-                  // @ts-ignore
-                  'data-cy': 'administration-cloud-plan-field-stripe-product',
-                  label: t('administration_cloud_plan_field_stripe_product'),
-                  size: 'small',
-                  fullWidth: true,
-                  variant: 'outlined',
-                  error: (meta.touched && meta.error) || '',
-                }}
-                value={field.value}
-                onChange={(val) => form.setFieldValue(field.name, val)}
-                items={[
-                  { value: '', name: 'None' },
-                  ...(products?.map(({ id, name }) => ({
-                    value: id,
-                    name: `${id} ${name}`,
-                  })) || []),
-                ]}
-              />
-            );
-          }}
-        </Field>
+        <CloudPlanTypeSelectField parentName={parentName} />
+        <CloudPlanMetricTypeSelectField parentName={parentName} />
+        <StripeProductSelectField />
       </Box>
 
       <CloudPlanPricesAndLimits
         parentName={parentName}
-        values={values}
         canEditPrices={canEditPrices}
       />
 
-      <Box>
-        <Typography sx={{ mt: 2 }}>
-          {t('administration_cloud_plan_form_features_title')}
-        </Typography>
-        <Field name={`${parentName}enabledFeatures`}>
-          {(props: FieldProps<string[]>) =>
-            featuresLoadable.data?.map((feature) => {
-              const values = props.field.value;
-
-              const toggleField = () => {
-                let newValues: string[];
-                if (values.includes(feature)) {
-                  newValues = values.filter((val) => val !== feature);
-                } else {
-                  newValues = [...values, feature];
-                }
-                props.form.setFieldValue(props.field.name, newValues);
-              };
-
-              return (
-                <FormControlLabel
-                  data-cy="administration-cloud-plan-field-feature"
-                  key={feature}
-                  control={
-                    <Checkbox
-                      value={feature}
-                      checked={props.field.value.includes(feature)}
-                      onChange={toggleField}
-                    />
-                  }
-                  label={feature}
-                />
-              );
-            }) || []
-          }
-        </Field>
-      </Box>
+      <PlanEnabledFeaturesField parentName={parentName} />
       <PlanNonCommercialSwitch />
     </>
   );
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
new file mode 100644
index 0000000000..51e482e752
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
@@ -0,0 +1,79 @@
+import { FC } from 'react';
+import { TextField } from 'tg.component/common/form/fields/TextField';
+import { Box, Typography } from '@mui/material';
+import { useTranslate } from '@tolgee/react';
+import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
+
+type CloudPlanPricesProps = {
+  parentName: string | undefined;
+};
+
+export const CloudPlanIncludedUsage: FC<CloudPlanPricesProps> = ({
+  parentName,
+}) => {
+  const { t } = useTranslate();
+
+  const { values } = useCloudPlanFormValues(parentName);
+
+  return (
+    <>
+      <Typography sx={{ mt: 2 }}>
+        {t('administration_cloud_plan_form_limits_title')}
+      </Typography>
+      <Box
+        display="grid"
+        gridTemplateColumns="repeat(4, 1fr)"
+        gap={2}
+        sx={{ mt: 1 }}
+      >
+        <TextField
+          name={`${parentName}includedUsage.mtCredits`}
+          size="small"
+          type="number"
+          fullWidth
+          data-cy="administration-cloud-plan-field-included-mt-credits"
+          label={t('administration_cloud_plan_field_included_mt_credits')}
+        />
+
+        {values.metricType == 'STRINGS' && (
+          <TextField
+            name={`${parentName}includedUsage.translations`}
+            size="small"
+            type="number"
+            fullWidth
+            data-cy="administration-cloud-plan-field-included-translations"
+            label={
+              values.type === 'SLOTS_FIXED'
+                ? t(
+                    'administration_cloud_plan_field_included_translation_slots'
+                  )
+                : t('administration_cloud_plan_field_included_translations')
+            }
+          />
+        )}
+
+        {values.metricType == 'SEATS_KEYS' && (
+          <>
+            {/*TODO: Test that for fixed plan we cannot set the prices in the backend tests  */}
+            <TextField
+              name={`${parentName}includedUsage.keys`}
+              size="small"
+              type="number"
+              fullWidth
+              data-cy="administration-cloud-plan-field-included-keys"
+              label={t('administration_cloud_plan_field_included_keys')}
+            />
+            <TextField
+              name={`${parentName}includedUsage.seats`}
+              size="small"
+              type="number"
+              fullWidth
+              data-cy="administration-cloud-plan-field-included-keys"
+              label={t('administration_cloud_plan_field_included_seats')}
+            />
+          </>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
new file mode 100644
index 0000000000..1ad050ed18
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
@@ -0,0 +1,50 @@
+import React, { FC, useEffect } from 'react';
+import { Select } from 'tg.component/common/form/fields/Select';
+import { MenuItem } from '@mui/material';
+import { useTranslate } from '@tolgee/react';
+import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
+import { MetricType } from '../CloudPlanFormBase';
+
+type CloudPlanMetricTypeSelectFieldProps = {
+  parentName?: string;
+};
+
+export const CloudPlanMetricTypeSelectField: FC<
+  CloudPlanMetricTypeSelectFieldProps
+> = ({ parentName }) => {
+  const { t } = useTranslate();
+
+  const { values } = useCloudPlanFormValues(parentName);
+
+  const options = [
+    { value: 'SEATS_KEYS', label: 'Keys & Seats' },
+    { value: 'STRINGS', label: 'Strings' },
+  ] as { value: MetricType; label: string }[];
+
+  if (values.type == 'SLOTS_FIXED') {
+    return null;
+  }
+
+  return (
+    <Select
+      label={t('administration_cloud_plan_field_metric_type')}
+      name={`${parentName}metricType`}
+      size="small"
+      fullWidth
+      minHeight={false}
+      sx={{ flexBasis: '50%' }}
+      data-cy="administration-cloud-plan-field-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"
+        >
+          {label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
index 3a2d66e9af..2609bdb81f 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
@@ -4,6 +4,8 @@ import { Box, Typography } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 import { CloudPlanFormData } from '../CloudPlanFormBase';
 import { useFormikContext } from 'formik';
+import { getCloudPlanInitialValues } from '../getCloudPlanInitialValues';
+import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
 
 type CloudPlanPricesProps = {
   parentName: string | undefined;
@@ -12,16 +14,16 @@ type CloudPlanPricesProps = {
 export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
   const { t } = useTranslate();
 
-  const { setFieldValue, getFieldProps } =
-    useFormikContext<CloudPlanFormData>();
-
   // Here we store the non-zero prices to be able to restore them when the plan is set back to non-free
   const [nonZeroPrices, setNonZeroPrices] =
     useState<CloudPlanFormData['prices']>();
 
-  const free = getFieldProps(`${parentName}free`).value;
-  const prices = getFieldProps(`${parentName}prices`).value;
-  const type = getFieldProps(`${parentName}type`).value;
+  const { values, setFieldValue } = useCloudPlanFormValues(parentName);
+
+  const free = values.free;
+  const prices = values.prices;
+  const type = values.type;
+  const metricType = values.metricType;
 
   function setPriceValuesZero() {
     setNonZeroPrices(prices);
@@ -30,11 +32,11 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
       {}
     );
 
-    setFieldValue(`${parentName}prices`, zeroPrices);
+    setFieldValue(`prices`, zeroPrices);
   }
 
   function setPriceValuesNonZero() {
-    setFieldValue(`${parentName}prices`, nonZeroPrices);
+    setFieldValue(`prices`, nonZeroPrices);
   }
 
   useEffect(() => {
@@ -78,17 +80,6 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
           type="number"
           fullWidth
         />
-        <TextField
-          name={`${parentName}prices.perThousandTranslations`}
-          size="small"
-          data-cy="administration-cloud-plan-field-price-per-thousand-translations"
-          label={t(
-            'administration_cloud_plan_field_price_per_thousand_translations'
-          )}
-          type="number"
-          fullWidth
-          disabled={type !== 'PAY_AS_YOU_GO'}
-        />
         <TextField
           name={`${parentName}prices.perThousandMtCredits`}
           size="small"
@@ -100,6 +91,46 @@ export const CloudPlanPrices: FC<CloudPlanPricesProps> = ({ parentName }) => {
           fullWidth
           disabled={type !== 'PAY_AS_YOU_GO'}
         />
+        {/*TODO: Split usage based and subscription based prices*/}
+        {metricType == 'STRINGS' && (
+          <>
+            <TextField
+              name={`${parentName}prices.perThousandTranslations`}
+              size="small"
+              data-cy="administration-cloud-plan-field-price-per-thousand-translations"
+              label={t(
+                'administration_cloud_plan_field_price_per_thousand_translations'
+              )}
+              type="number"
+              fullWidth
+              disabled={type !== 'PAY_AS_YOU_GO'}
+            />
+          </>
+        )}
+        {metricType == 'SEATS_KEYS' && (
+          <>
+            <TextField
+              name={`${parentName}prices.perThousandKeys`}
+              size="small"
+              data-cy="administration-cloud-plan-field-price-per-thousand-keys"
+              label={t(
+                'administration_cloud_plan_field_price_per_thousand_keys'
+              )}
+              type="number"
+              fullWidth
+              disabled={type !== 'PAY_AS_YOU_GO'}
+            />
+            <TextField
+              name={`${parentName}prices.perSeat`}
+              size="small"
+              data-cy="administration-cloud-plan-field-price-per-seat"
+              label={t('administration_cloud_plan_field_price_per_seat')}
+              type="number"
+              fullWidth
+              disabled={type !== 'PAY_AS_YOU_GO'}
+            />
+          </>
+        )}
       </Box>
     </>
   );
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPricesAndLimits.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPricesAndLimits.tsx
index 6b7537e577..d7e535d245 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPricesAndLimits.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPricesAndLimits.tsx
@@ -1,50 +1,17 @@
 import { FC } from 'react';
 import { useTranslate } from '@tolgee/react';
-import { Box, Tooltip, Typography } from '@mui/material';
-import { TextField } from 'tg.component/common/form/fields/TextField';
-import { CloudPlanFormData } from '../CloudPlanFormBase';
+import { Box, Tooltip } from '@mui/material';
 import { CloudPlanPrices } from './CloudPlanPrices';
+import { CloudPlanIncludedUsage } from './CloudPlanIncludedUsage';
 
 export const CloudPlanPricesAndLimits: FC<{
   parentName?: string;
-  values: CloudPlanFormData;
   canEditPrices: boolean;
-}> = ({ values, parentName, canEditPrices }) => {
-  const { t } = useTranslate();
-
+}> = ({ parentName, canEditPrices }) => {
   return (
     <Wrapper canEditPrices={canEditPrices}>
       <CloudPlanPrices parentName={parentName} />
-      <Typography sx={{ mt: 2 }}>
-        {t('administration_cloud_plan_form_limits_title')}
-      </Typography>
-      <Box
-        display="grid"
-        gridTemplateColumns="repeat(4, 1fr)"
-        gap={2}
-        sx={{ mt: 1 }}
-      >
-        <TextField
-          name={`${parentName}includedUsage.mtCredits`}
-          size="small"
-          type="number"
-          fullWidth
-          data-cy="administration-cloud-plan-field-included-mt-credits"
-          label={t('administration_cloud_plan_field_included_mt_credits')}
-        />
-        <TextField
-          name={`${parentName}includedUsage.translations`}
-          size="small"
-          type="number"
-          fullWidth
-          data-cy="administration-cloud-plan-field-included-translations"
-          label={
-            values.type === 'SLOTS_FIXED'
-              ? t('administration_cloud_plan_field_included_translation_slots')
-              : t('administration_cloud_plan_field_included_translations')
-          }
-        />
-      </Box>
+      <CloudPlanIncludedUsage parentName={parentName} />
     </Wrapper>
   );
 };
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanTypeSelectField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanTypeSelectField.tsx
new file mode 100644
index 0000000000..b9d5c8dadd
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanTypeSelectField.tsx
@@ -0,0 +1,56 @@
+import React, { FC, useEffect } from 'react';
+import { Select } from 'tg.component/common/form/fields/Select';
+import { MenuItem } from '@mui/material';
+import { useTranslate } from '@tolgee/react';
+import { useCloudPlanFormValues } from '../useCloudPlanFormValues';
+
+type PlanTypeSelectFieldProps = {
+  parentName?: string;
+};
+
+export const CloudPlanTypeSelectField: FC<PlanTypeSelectFieldProps> = ({
+  parentName,
+}) => {
+  const { t } = useTranslate();
+
+  const { values, setFieldValue } = useCloudPlanFormValues(parentName);
+
+  const typeOptions = [
+    { value: 'PAY_AS_YOU_GO', label: 'Pay as you go', enabled: !values.free },
+    { value: 'FIXED', label: 'Fixed', enabled: true },
+    { value: 'SLOTS_FIXED', label: 'Slots fixed (legacy)', enabled: true },
+  ];
+
+  const enabledTypeOptions = typeOptions.filter((t) => t.enabled);
+
+  useEffect(() => {
+    if (!enabledTypeOptions.find((o) => o.value === values.type)) {
+      setFieldValue(`type`, enabledTypeOptions[0].value);
+    }
+  }, [values.free]);
+
+  return (
+    <Select
+      label={t('administration_cloud_plan_field_type')}
+      name={`${parentName}type`}
+      size="small"
+      fullWidth
+      minHeight={false}
+      sx={{ flexBasis: '50%' }}
+      data-cy="administration-cloud-plan-field-type"
+      renderValue={(val) =>
+        enabledTypeOptions.find((o) => o.value === val)?.label
+      }
+    >
+      {enabledTypeOptions.map(({ value, label }) => (
+        <MenuItem
+          key={value}
+          value={value}
+          data-cy="administration-cloud-plan-field-type-item"
+        >
+          {label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
new file mode 100644
index 0000000000..d92459b7b4
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Field, FieldProps } from 'formik';
+import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
+import { useTranslate } from '@tolgee/react';
+
+type EnabledFeaturesFieldProps = {
+  parentName: string;
+};
+
+export const PlanEnabledFeaturesField: FC<EnabledFeaturesFieldProps> = ({
+  parentName,
+}) => {
+  const featuresLoadable = useBillingApiQuery({
+    url: '/v2/administration/billing/features',
+    method: 'get',
+  });
+
+  const { t } = useTranslate();
+
+  return (
+    <Box>
+      <Typography sx={{ mt: 2 }}>
+        {t('administration_cloud_plan_form_features_title')}
+      </Typography>
+      <Field name={`${parentName}enabledFeatures`}>
+        {(props: FieldProps<string[]>) =>
+          featuresLoadable.data?.map((feature) => {
+            const values = props.field.value;
+
+            const toggleField = () => {
+              let newValues: string[];
+              if (values.includes(feature)) {
+                newValues = values.filter((val) => val !== feature);
+              } else {
+                newValues = [...values, feature];
+              }
+              props.form.setFieldValue(props.field.name, newValues);
+            };
+
+            return (
+              <FormControlLabel
+                data-cy="administration-cloud-plan-field-feature"
+                key={feature}
+                control={
+                  <Checkbox
+                    value={feature}
+                    checked={props.field.value.includes(feature)}
+                    onChange={toggleField}
+                  />
+                }
+                label={feature}
+              />
+            );
+          }) || []
+        }
+      </Field>
+    </Box>
+  );
+};
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx
new file mode 100644
index 0000000000..583fffc2c6
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx
@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+import { Field, FieldProps } from 'formik';
+import { SearchSelect } from 'tg.component/searchSelect/SearchSelect';
+import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
+import { useTranslate } from '@tolgee/react';
+
+type StripeProductSelectFieldProps = {
+  parentName?: string;
+};
+
+export const StripeProductSelectField: FC<StripeProductSelectFieldProps> = ({
+  parentName,
+}) => {
+  const productsLoadable = useBillingApiQuery({
+    url: '/v2/administration/billing/stripe-products',
+    method: 'get',
+  });
+
+  const products = productsLoadable.data?._embedded?.stripeProducts;
+
+  const { t } = useTranslate();
+
+  return (
+    <Field name={`${parentName}stripeProductId`}>
+      {({ field, form, meta }: FieldProps) => {
+        return (
+          <SearchSelect
+            compareFunction={(prompt, label) =>
+              label.toLowerCase().includes(prompt.toLowerCase())
+            }
+            SelectProps={{
+              // @ts-ignore
+              'data-cy': 'administration-cloud-plan-field-stripe-product',
+              label: t('administration_cloud_plan_field_stripe_product'),
+              size: 'small',
+              fullWidth: true,
+              variant: 'outlined',
+              error: (meta.touched && meta.error) || '',
+            }}
+            value={field.value}
+            onChange={(val) => form.setFieldValue(field.name, val)}
+            items={[
+              { value: '', name: 'None' },
+              ...(products?.map(({ id, name }) => ({
+                value: id,
+                name: `${id} ${name}`,
+              })) || []),
+            ]}
+          />
+        );
+      }}
+    </Field>
+  );
+};
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
index e9bd655bd6..e33094f508 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
@@ -13,20 +13,22 @@ export const getCloudPlanInitialValues = (
         perSeat: planData.prices.perSeat ?? 0,
         subscriptionMonthly: planData.prices.subscriptionMonthly ?? 0,
         subscriptionYearly: planData.prices.subscriptionYearly ?? 0,
+        perThousandKeys: planData.prices.perThousandKeys ?? 0,
       },
       includedUsage: {
-        seats: planData.includedUsage.seats,
-        mtCredits: planData.includedUsage.mtCredits,
+        ...planData.includedUsage,
         translations:
           planData.type === 'SLOTS_FIXED'
             ? 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',
     name: '',
     stripeProductId: '',
     prices: {
@@ -35,11 +37,13 @@ export const getCloudPlanInitialValues = (
       perThousandTranslations: 0,
       subscriptionMonthly: 0,
       subscriptionYearly: 0,
+      perThousandKeys: 0,
     },
     includedUsage: {
       seats: 0,
       translations: 0,
       mtCredits: 0,
+      keys: 0,
     },
     enabledFeatures: [],
     public: false,
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/useCloudPlanFormValues.ts b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/useCloudPlanFormValues.ts
new file mode 100644
index 0000000000..52e2577895
--- /dev/null
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/useCloudPlanFormValues.ts
@@ -0,0 +1,12 @@
+import { useFormikContext } from 'formik';
+import { CloudPlanFormData } from './CloudPlanFormBase';
+
+export const useCloudPlanFormValues = (parentName?: string) => {
+  const { values, setFieldValue } = useFormikContext<any>();
+
+  return {
+    values: (parentName ? values[parentName] : values) as CloudPlanFormData,
+    setFieldValue: (name: string, value: any) =>
+      setFieldValue(`${parentName}${name}`, value),
+  };
+};
diff --git a/webapp/src/service/apiSchema.generated.ts b/webapp/src/service/apiSchema.generated.ts
index 41959fd05d..26bbf43abf 100644
--- a/webapp/src/service/apiSchema.generated.ts
+++ b/webapp/src/service/apiSchema.generated.ts
@@ -3434,6 +3434,8 @@ export interface components {
       viewLanguageIds?: number[];
     };
     PlanIncludedUsageModel: {
+      /** Format: int64 */
+      keys: number;
       /** Format: int64 */
       mtCredits: number;
       /** Format: int64 */
@@ -3445,6 +3447,7 @@ export interface components {
     };
     PlanPricesModel: {
       perSeat: number;
+      perThousandKeys: number;
       perThousandMtCredits?: number;
       perThousandTranslations?: number;
       subscriptionMonthly: number;
diff --git a/webapp/src/service/billingApiSchema.generated.ts b/webapp/src/service/billingApiSchema.generated.ts
index bcdba5ca43..b203740680 100644
--- a/webapp/src/service/billingApiSchema.generated.ts
+++ b/webapp/src/service/billingApiSchema.generated.ts
@@ -13,7 +13,7 @@ export interface paths {
   };
   "/v2/administration/billing/cloud-plans": {
     get: operations["getPlans_2"];
-    post: operations["create_2"];
+    post: operations["create_1"];
   };
   "/v2/administration/billing/cloud-plans/{planId}": {
     get: operations["getPlan_1"];
@@ -35,7 +35,7 @@ export interface paths {
   };
   "/v2/administration/billing/self-hosted-ee-plans": {
     get: operations["getPlans_1"];
-    post: operations["create_1"];
+    post: operations["create"];
   };
   "/v2/administration/billing/self-hosted-ee-plans/{planId}": {
     get: operations["getPlan"];
@@ -48,19 +48,6 @@ export interface paths {
   "/v2/administration/billing/stripe-products": {
     get: operations["getStripeProducts"];
   };
-  "/v2/administration/billing/translation-agency": {
-    get: operations["getAll_1"];
-    post: operations["create"];
-  };
-  "/v2/administration/billing/translation-agency/{agencyId}": {
-    get: operations["get_1"];
-    put: operations["update"];
-    delete: operations["delete"];
-  };
-  "/v2/administration/billing/translation-agency/{agencyId}/avatar": {
-    put: operations["uploadAvatar"];
-    delete: operations["removeAvatar"];
-  };
   "/v2/administration/organizations/{organizationId}/billing/assign-cloud-plan": {
     /** Assigns a private free plan or trial plan to an organization. */
     put: operations["assignCloudPlan"];
@@ -68,12 +55,6 @@ export interface paths {
   "/v2/administration/organizations/{organizationId}/billing/update-trial-end-date": {
     put: operations["updateTrialEndDAte"];
   };
-  "/v2/billing/translation-agency": {
-    get: operations["getAll"];
-  };
-  "/v2/billing/translation-agency/{agencyId}": {
-    get: operations["get"];
-  };
   "/v2/organizations/{organizationId}/billing/billing-info": {
     get: operations["getBillingInfo"];
   };
@@ -149,12 +130,6 @@ export interface paths {
   "/v2/organizations/{organizationId}/billing/update-subscription": {
     put: operations["updateSubscription"];
   };
-  "/v2/projects/{projectId}/billing/order-translation": {
-    post: operations["createTranslationOrder"];
-  };
-  "/v2/projects/{projectId}/billing/order-translation/preferred-agency": {
-    get: operations["getPreferredAgency"];
-  };
   "/v2/public/billing/mt-credit-prices": {
     get: operations["getMtCreditPrices"];
   };
@@ -182,9 +157,6 @@ export interface paths {
   "/v2/public/telemetry/report": {
     post: operations["report"];
   };
-  "/v2/public/translator/translate": {
-    post: operations["translate"];
-  };
 }
 
 export interface components {
@@ -262,6 +234,7 @@ export interface components {
       /** Format: int64 */
       trialEnd?: number;
     };
+    /** @example Links to avatar images */
     Avatar: {
       large: string;
       thumbnail: string;
@@ -438,39 +411,6 @@ export interface components {
         stripeProducts?: components["schemas"]["StripeProductModel"][];
       };
     };
-    CreateTaskRequest: {
-      assignees: number[];
-      description: string;
-      /**
-       * Format: int64
-       * @description Due to date in epoch format (milliseconds).
-       * @example 1661172869000
-       */
-      dueDate?: number;
-      keys: number[];
-      /**
-       * Format: int64
-       * @description Id of language, this task is attached to.
-       * @example 1
-       */
-      languageId: number;
-      name?: string;
-      type: "TRANSLATE" | "REVIEW";
-    };
-    CreateTranslationAgencyRequest: {
-      description: string;
-      email: string;
-      emailBcc: string[];
-      name: string;
-      services: string[];
-      url: string;
-    };
-    CreateTranslationOrderRequest: {
-      /** Format: int64 */
-      agencyId: number;
-      sendReadOnlyInvitation: boolean;
-      tasks: components["schemas"]["CreateTaskRequest"][];
-    };
     ErrorResponseBody: {
       code: string;
       params?: { [key: string]: unknown }[];
@@ -741,12 +681,6 @@ export interface components {
         | "current_subscription_is_not_trialing";
       params?: { [key: string]: unknown }[];
     };
-    ExampleItem: {
-      key: string;
-      keyNamespace?: string;
-      source: string;
-      target: string;
-    };
     GetMySubscriptionDto: {
       instanceId: string;
       licenseKey: string;
@@ -785,13 +719,6 @@ export interface components {
       /** @description The Total amount with tax */
       total: number;
     };
-    Metadata: {
-      closeItems: components["schemas"]["ExampleItem"][];
-      examples: components["schemas"]["ExampleItem"][];
-      keyDescription?: string;
-      languageDescription?: string;
-      projectDescription?: string;
-    };
     MtCreditsPriceModel: {
       /** Format: int64 */
       amount: number;
@@ -799,12 +726,6 @@ export interface components {
       id: number;
       price: number;
     };
-    MtResult: {
-      contextDescription?: string;
-      /** Format: int32 */
-      price: number;
-      translated?: string;
-    };
     OrganizationWithSubscriptionsModel: {
       cloudSubscription?: components["schemas"]["AdministrationCloudSubscriptionModel"];
       organization: components["schemas"]["SimpleOrganizationModel"];
@@ -838,18 +759,6 @@ export interface components {
       };
       page?: components["schemas"]["PageMetadata"];
     };
-    PagedModelTranslationAgencyModel: {
-      _embedded?: {
-        translationAgencies?: components["schemas"]["TranslationAgencyModel"][];
-      };
-      page?: components["schemas"]["PageMetadata"];
-    };
-    PagedModelTranslationAgencyPublicModel: {
-      _embedded?: {
-        translationAgencies?: components["schemas"]["TranslationAgencyPublicModel"][];
-      };
-      page?: components["schemas"]["PageMetadata"];
-    };
     PermissionModel: {
       /**
        * @deprecated
@@ -912,6 +821,8 @@ export interface components {
       viewLanguageIds?: number[];
     };
     PlanIncludedUsageModel: {
+      /** Format: int64 */
+      keys: number;
       /** Format: int64 */
       mtCredits: number;
       /** Format: int64 */
@@ -922,6 +833,8 @@ export interface components {
       translations: number;
     };
     PlanIncludedUsageRequest: {
+      /** Format: int64 */
+      keys: number;
       /** Format: int64 */
       mtCredits: number;
       /** Format: int64 */
@@ -931,6 +844,7 @@ export interface components {
     };
     PlanPricesModel: {
       perSeat: number;
+      perThousandKeys: number;
       perThousandMtCredits?: number;
       perThousandTranslations?: number;
       subscriptionMonthly: number;
@@ -938,15 +852,12 @@ export interface components {
     };
     PlanPricesRequest: {
       perSeat?: number;
+      perThousandKeys?: number;
       perThousandMtCredits?: number;
       perThousandTranslations?: number;
       subscriptionMonthly: number;
       subscriptionYearly: number;
     };
-    PreferredAgencyResponse: {
-      /** Format: int64 */
-      preferredAgencyId?: number;
-    };
     PrepareSetEeLicenceKeyModel: {
       plan: components["schemas"]["SelfHostedEePlanModel"];
       usage: components["schemas"]["UsageModel"];
@@ -1174,37 +1085,6 @@ export interface components {
       /** Format: int64 */
       usersCount: number;
     };
-    TolgeeTranslateParams: {
-      formality?: "FORMAL" | "INFORMAL" | "DEFAULT";
-      isBatch: boolean;
-      keyName?: string;
-      metadata?: components["schemas"]["Metadata"];
-      pluralFormExamples?: { [key: string]: string };
-      pluralForms?: { [key: string]: string };
-      sourceTag: string;
-      targetTag: string;
-      text: string;
-    };
-    TranslationAgencyModel: {
-      avatar?: components["schemas"]["Avatar"];
-      description?: string;
-      email?: string;
-      emailBcc: string[];
-      /** Format: int64 */
-      id: number;
-      name: string;
-      services: string[];
-      url?: string;
-    };
-    TranslationAgencyPublicModel: {
-      avatar?: components["schemas"]["Avatar"];
-      description?: string;
-      /** Format: int64 */
-      id: number;
-      name: string;
-      services: string[];
-      url?: string;
-    };
     UpdateSubscriptionPrepareRequest: {
       period: "MONTHLY" | "YEARLY";
       /**
@@ -1216,14 +1096,6 @@ export interface components {
     UpdateSubscriptionRequest: {
       token: string;
     };
-    UpdateTranslationAgencyRequest: {
-      description: string;
-      email: string;
-      emailBcc: string[];
-      name: string;
-      services: string[];
-      url: string;
-    };
     UpdateTrialEndDateRequest: {
       /** Format: int64 */
       trialEnd: number;
@@ -1384,7 +1256,7 @@ export interface operations {
       };
     };
   };
-  create_2: {
+  create_1: {
     responses: {
       /** OK */
       200: {
@@ -1830,7 +1702,7 @@ export interface operations {
       };
     };
   };
-  create_1: {
+  create: {
     responses: {
       /** OK */
       200: {
@@ -2117,25 +1989,16 @@ export interface operations {
       };
     };
   };
-  getAll_1: {
+  /** Assigns a private free plan or trial plan to an organization. */
+  assignCloudPlan: {
     parameters: {
-      query: {
-        /** Zero-based page index (0..N) */
-        page?: number;
-        /** The size of the page to be returned */
-        size?: number;
-        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
-        sort?: string[];
-        search?: string;
+      path: {
+        organizationId: number;
       };
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["PagedModelTranslationAgencyModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2169,15 +2032,21 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["AssignPlanRequest"];
+      };
+    };
   };
-  create: {
+  updateTrialEndDAte: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["TranslationAgencyModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2213,21 +2082,21 @@ export interface operations {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["CreateTranslationAgencyRequest"];
+        "application/json": components["schemas"]["UpdateTrialEndDateRequest"];
       };
     };
   };
-  get_1: {
+  getBillingInfo: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["TranslationAgencyModel"];
+          "application/json": components["schemas"]["BillingInfoModel"];
         };
       };
       /** Bad Request */
@@ -2264,17 +2133,17 @@ export interface operations {
       };
     };
   };
-  update: {
+  getBuyMoreCreditsCheckoutSessionUrl: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["TranslationAgencyModel"];
+          "application/json": components["schemas"]["BuyMoreCreditsModel"];
         };
       };
       /** Bad Request */
@@ -2312,14 +2181,15 @@ export interface operations {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["UpdateTranslationAgencyRequest"];
+        "application/json": components["schemas"]["BuyMoreCreditsRequest"];
       };
     };
   };
-  delete: {
+  /** When applied, current subscription will be cancelled at the period end. */
+  cancelSubscription: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
       };
     };
     responses: {
@@ -2359,15 +2229,19 @@ export interface operations {
       };
     };
   };
-  uploadAvatar: {
+  goToCustomerPortal: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
       };
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["GoToCustomerPortalModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2401,24 +2275,20 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "multipart/form-data": {
-          /** Format: binary */
-          avatar: string;
-        };
-      };
-    };
   };
-  removeAvatar: {
+  getExpectedUsage_1: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
       };
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["UsageModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2453,16 +2323,21 @@ export interface operations {
       };
     };
   };
-  /** Assigns a private free plan or trial plan to an organization. */
-  assignCloudPlan: {
+  /** Returns CSV file with usage detail for each time period and it's usage. */
+  getExpectedUsageDetail: {
     parameters: {
       path: {
         organizationId: number;
+        type: "SEATS" | "TRANSLATIONS" | "KEYS";
       };
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "text/csv": string;
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2496,21 +2371,28 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["AssignPlanRequest"];
-      };
-    };
   };
-  updateTrialEndDAte: {
+  getInvoices: {
     parameters: {
       path: {
         organizationId: number;
       };
+      query: {
+        /** Zero-based page index (0..N) */
+        page?: number;
+        /** The size of the page to be returned */
+        size?: number;
+        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
+        sort?: string[];
+      };
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["PagedModelInvoiceModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2544,29 +2426,19 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["UpdateTrialEndDateRequest"];
-      };
-    };
   };
-  getAll: {
+  getInvoicePdf: {
     parameters: {
-      query: {
-        /** Zero-based page index (0..N) */
-        page?: number;
-        /** The size of the page to be returned */
-        size?: number;
-        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
-        sort?: string[];
-        search?: string;
+      path: {
+        organizationId: number;
+        invoiceId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["PagedModelTranslationAgencyPublicModel"];
+          "application/pdf": string;
         };
       };
       /** Bad Request */
@@ -2603,17 +2475,18 @@ export interface operations {
       };
     };
   };
-  get: {
+  getUsage: {
     parameters: {
       path: {
-        agencyId: number;
+        organizationId: number;
+        invoiceId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["TranslationAgencyPublicModel"];
+          "application/json": components["schemas"]["UsageModel"];
         };
       };
       /** Bad Request */
@@ -2650,17 +2523,20 @@ export interface operations {
       };
     };
   };
-  getBillingInfo: {
+  /** Returns CSV file with usage detail for each time period and it's usage. */
+  getUsageDetail: {
     parameters: {
       path: {
         organizationId: number;
+        invoiceId: number;
+        type: "SEATS" | "TRANSLATIONS" | "KEYS";
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["BillingInfoModel"];
+          "text/csv": string;
         };
       };
       /** Bad Request */
@@ -2697,7 +2573,8 @@ export interface operations {
       };
     };
   };
-  getBuyMoreCreditsCheckoutSessionUrl: {
+  /** Returns list of available cloud plans for specific organization.) */
+  getCloudPlans: {
     parameters: {
       path: {
         organizationId: number;
@@ -2707,7 +2584,7 @@ export interface operations {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["BuyMoreCreditsModel"];
+          "application/json": components["schemas"]["CollectionModelCloudPlanModel"];
         };
       };
       /** Bad Request */
@@ -2743,14 +2620,8 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["BuyMoreCreditsRequest"];
-      };
-    };
   };
-  /** When applied, current subscription will be cancelled at the period end. */
-  cancelSubscription: {
+  prepareUpdateSubscription: {
     parameters: {
       path: {
         organizationId: number;
@@ -2758,7 +2629,11 @@ export interface operations {
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["SubscriptionUpdatePreviewModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2792,8 +2667,13 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateSubscriptionPrepareRequest"];
+      };
+    };
   };
-  goToCustomerPortal: {
+  refresh: {
     parameters: {
       path: {
         organizationId: number;
@@ -2803,7 +2683,7 @@ export interface operations {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["GoToCustomerPortalModel"];
+          "application/json": components["schemas"]["CloudSubscriptionModel"];
         };
       };
       /** Bad Request */
@@ -2840,7 +2720,8 @@ export interface operations {
       };
     };
   };
-  getExpectedUsage_1: {
+  /** When subscription is scheduled to cancel on the period end, it can be restored. */
+  restoreSubscription: {
     parameters: {
       path: {
         organizationId: number;
@@ -2848,11 +2729,7 @@ export interface operations {
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["UsageModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2887,19 +2764,17 @@ export interface operations {
       };
     };
   };
-  /** Returns CSV file with usage detail for each time period and it's usage. */
-  getExpectedUsageDetail: {
+  getSelfHostedPlans: {
     parameters: {
       path: {
         organizationId: number;
-        type: "SEATS" | "TRANSLATIONS";
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "text/csv": string;
+          "application/json": components["schemas"]["CollectionModelSelfHostedEePlanModel"];
         };
       };
       /** Bad Request */
@@ -2936,25 +2811,17 @@ export interface operations {
       };
     };
   };
-  getInvoices: {
+  refreshSelfHostedEeSubscriptions: {
     parameters: {
       path: {
         organizationId: number;
       };
-      query: {
-        /** Zero-based page index (0..N) */
-        page?: number;
-        /** The size of the page to be returned */
-        size?: number;
-        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
-        sort?: string[];
-      };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["PagedModelInvoiceModel"];
+          "application/json": components["schemas"]["CollectionModelSelfHostedEeSubscriptionModel"];
         };
       };
       /** Bad Request */
@@ -2991,18 +2858,17 @@ export interface operations {
       };
     };
   };
-  getInvoicePdf: {
+  setupFreeEeSubscription: {
     parameters: {
       path: {
         organizationId: number;
-        invoiceId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/pdf": string;
+          "application/json": components["schemas"]["SelfHostedEeSubscriptionModel"];
         };
       };
       /** Bad Request */
@@ -3038,443 +2904,13 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["SelfHostedEeFreeSubscribeRequest"];
+      };
+    };
   };
-  getUsage: {
-    parameters: {
-      path: {
-        organizationId: number;
-        invoiceId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["UsageModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  /** Returns CSV file with usage detail for each time period and it's usage. */
-  getUsageDetail: {
-    parameters: {
-      path: {
-        organizationId: number;
-        invoiceId: number;
-        type: "SEATS" | "TRANSLATIONS";
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "text/csv": string;
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  /** Returns list of available cloud plans for specific organization.) */
-  getCloudPlans: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["CollectionModelCloudPlanModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  prepareUpdateSubscription: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["SubscriptionUpdatePreviewModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["UpdateSubscriptionPrepareRequest"];
-      };
-    };
-  };
-  refresh: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["CloudSubscriptionModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  /** When subscription is scheduled to cancel on the period end, it can be restored. */
-  restoreSubscription: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: unknown;
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  getSelfHostedPlans: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["CollectionModelSelfHostedEePlanModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  refreshSelfHostedEeSubscriptions: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["CollectionModelSelfHostedEeSubscriptionModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
-  setupFreeEeSubscription: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["SelfHostedEeSubscriptionModel"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["SelfHostedEeFreeSubscribeRequest"];
-      };
-    };
-  };
-  getSelfHostedEeSubscriptions: {
+  getSelfHostedEeSubscriptions: {
     parameters: {
       path: {
         organizationId: number;
@@ -3812,110 +3248,6 @@ export interface operations {
       };
     };
   };
-  createTranslationOrder: {
-    parameters: {
-      query: {
-        filterState?: (
-          | "UNTRANSLATED"
-          | "TRANSLATED"
-          | "REVIEWED"
-          | "DISABLED"
-        )[];
-        filterOutdated?: boolean;
-      };
-      path: {
-        projectId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: unknown;
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["CreateTranslationOrderRequest"];
-      };
-    };
-  };
-  getPreferredAgency: {
-    parameters: {
-      path: {
-        projectId: number;
-      };
-    };
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["PreferredAgencyResponse"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-  };
   getMtCreditPrices: {
     responses: {
       /** OK */
@@ -4313,53 +3645,6 @@ export interface operations {
       };
     };
   };
-  translate: {
-    responses: {
-      /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["MtResult"];
-        };
-      };
-      /** Bad Request */
-      400: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Unauthorized */
-      401: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Forbidden */
-      403: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-      /** Not Found */
-      404: {
-        content: {
-          "application/json":
-            | components["schemas"]["ErrorResponseTyped"]
-            | components["schemas"]["ErrorResponseBody"];
-        };
-      };
-    };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["TolgeeTranslateParams"];
-      };
-    };
-  };
 }
 
 export interface external {}

From 9039c3d05ae9e9c4eb8d7b0cbfe63541641a0998 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 4 Mar 2025 08:23:33 +0100
Subject: [PATCH 05/16] fix: New plan with key and seat metric creation and
 test

---
 .../kotlin/io/tolgee/constants/Message.kt     |   1 +
 e2e/cypress/support/dataCyType.d.ts           |   5 +-
 .../components/planForm/CloudPlanFormBase.tsx |   3 +-
 .../planForm/fields/CloudPlanFields.tsx       |  19 +-
 .../fields/CloudPlanIncludedUsage.tsx         |   7 +-
 .../fields/CloudPlanMetricTypeSelectField.tsx |  10 +-
 .../planForm/fields/CloudPlanPrices.tsx       |  22 +-
 .../fields/PlanEnabledFeaturesField.tsx       |   2 +-
 ...d.tsx => PlanStripeProductSelectField.tsx} |   6 +-
 .../planForm/getCloudPlanInitialValues.ts     |   3 +-
 .../src/service/billingApiSchema.generated.ts | 956 +++++++++++++++---
 11 files changed, 886 insertions(+), 148 deletions(-)
 rename webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/{StripeProductSelectField.tsx => PlanStripeProductSelectField.tsx} (93%)

diff --git a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
index 9e41cf2fe7..80eccb4c1b 100644
--- 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
index 815f59b31a..4232670ded 100644
--- 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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
index 79cc4f3202..3f82eff143 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/CloudPlanFormBase.tsx
+++ b/webapp/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
index 6485a924cc..f41f891d30 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
+++ b/webapp/src/ee/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
index 51e482e752..349c5b762d 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanIncludedUsage.tsx
+++ b/webapp/src/ee/billing/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
index 1ad050ed18..86b6e73491 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanMetricTypeSelectField.tsx
+++ b/webapp/src/ee/billing/administration/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
index 2609bdb81f..a8889e24cd 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanPrices.tsx
+++ b/webapp/src/ee/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
index d92459b7b4..7a52485167 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanEnabledFeaturesField.tsx
+++ b/webapp/src/ee/billing/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanStripeProductSelectField.tsx
similarity index 93%
rename from webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx
rename to webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/PlanStripeProductSelectField.tsx
index 583fffc2c6..194f8afee3 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/StripeProductSelectField.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/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/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
index e33094f508..e166e0ad07 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/getCloudPlanInitialValues.ts
+++ b/webapp/src/ee/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: {
diff --git a/webapp/src/service/billingApiSchema.generated.ts b/webapp/src/service/billingApiSchema.generated.ts
index b203740680..8190ecef53 100644
--- a/webapp/src/service/billingApiSchema.generated.ts
+++ b/webapp/src/service/billingApiSchema.generated.ts
@@ -13,7 +13,7 @@ export interface paths {
   };
   "/v2/administration/billing/cloud-plans": {
     get: operations["getPlans_2"];
-    post: operations["create_1"];
+    post: operations["create_2"];
   };
   "/v2/administration/billing/cloud-plans/{planId}": {
     get: operations["getPlan_1"];
@@ -35,7 +35,7 @@ export interface paths {
   };
   "/v2/administration/billing/self-hosted-ee-plans": {
     get: operations["getPlans_1"];
-    post: operations["create"];
+    post: operations["create_1"];
   };
   "/v2/administration/billing/self-hosted-ee-plans/{planId}": {
     get: operations["getPlan"];
@@ -48,6 +48,19 @@ export interface paths {
   "/v2/administration/billing/stripe-products": {
     get: operations["getStripeProducts"];
   };
+  "/v2/administration/billing/translation-agency": {
+    get: operations["getAll_1"];
+    post: operations["create"];
+  };
+  "/v2/administration/billing/translation-agency/{agencyId}": {
+    get: operations["get_1"];
+    put: operations["update"];
+    delete: operations["delete"];
+  };
+  "/v2/administration/billing/translation-agency/{agencyId}/avatar": {
+    put: operations["uploadAvatar"];
+    delete: operations["removeAvatar"];
+  };
   "/v2/administration/organizations/{organizationId}/billing/assign-cloud-plan": {
     /** Assigns a private free plan or trial plan to an organization. */
     put: operations["assignCloudPlan"];
@@ -55,6 +68,12 @@ export interface paths {
   "/v2/administration/organizations/{organizationId}/billing/update-trial-end-date": {
     put: operations["updateTrialEndDAte"];
   };
+  "/v2/billing/translation-agency": {
+    get: operations["getAll"];
+  };
+  "/v2/billing/translation-agency/{agencyId}": {
+    get: operations["get"];
+  };
   "/v2/organizations/{organizationId}/billing/billing-info": {
     get: operations["getBillingInfo"];
   };
@@ -130,6 +149,12 @@ export interface paths {
   "/v2/organizations/{organizationId}/billing/update-subscription": {
     put: operations["updateSubscription"];
   };
+  "/v2/projects/{projectId}/billing/order-translation": {
+    post: operations["createTranslationOrder"];
+  };
+  "/v2/projects/{projectId}/billing/order-translation/preferred-agency": {
+    get: operations["getPreferredAgency"];
+  };
   "/v2/public/billing/mt-credit-prices": {
     get: operations["getMtCreditPrices"];
   };
@@ -157,6 +182,9 @@ export interface paths {
   "/v2/public/telemetry/report": {
     post: operations["report"];
   };
+  "/v2/public/translator/translate": {
+    post: operations["translate"];
+  };
 }
 
 export interface components {
@@ -194,6 +222,7 @@ export interface components {
       /** Format: int64 */
       id: number;
       includedUsage: components["schemas"]["PlanIncludedUsageModel"];
+      metricType: "KEYS_SEATS" | "STRINGS";
       name: string;
       nonCommercial: boolean;
       prices: components["schemas"]["PlanPricesModel"];
@@ -234,7 +263,6 @@ export interface components {
       /** Format: int64 */
       trialEnd?: number;
     };
-    /** @example Links to avatar images */
     Avatar: {
       large: string;
       thumbnail: string;
@@ -327,6 +355,7 @@ export interface components {
       forOrganizationIds: number[];
       free: boolean;
       includedUsage: components["schemas"]["PlanIncludedUsageRequest"];
+      metricType: "KEYS_SEATS" | "STRINGS";
       name: string;
       nonCommercial: boolean;
       /** Format: date-time */
@@ -411,6 +440,39 @@ export interface components {
         stripeProducts?: components["schemas"]["StripeProductModel"][];
       };
     };
+    CreateTaskRequest: {
+      assignees: number[];
+      description: string;
+      /**
+       * Format: int64
+       * @description Due to date in epoch format (milliseconds).
+       * @example 1661172869000
+       */
+      dueDate?: number;
+      keys: number[];
+      /**
+       * Format: int64
+       * @description Id of language, this task is attached to.
+       * @example 1
+       */
+      languageId: number;
+      name: string;
+      type: "TRANSLATE" | "REVIEW";
+    };
+    CreateTranslationAgencyRequest: {
+      description: string;
+      email: string;
+      emailBcc: string[];
+      name: string;
+      services: string[];
+      url: string;
+    };
+    CreateTranslationOrderRequest: {
+      /** Format: int64 */
+      agencyId: number;
+      sendReadOnlyInvitation: boolean;
+      tasks: components["schemas"]["CreateTaskRequest"][];
+    };
     ErrorResponseBody: {
       code: string;
       params?: { [key: string]: unknown }[];
@@ -678,9 +740,17 @@ export interface components {
         | "subscription_not_scheduled_for_cancellation"
         | "cannot_cancel_trial"
         | "cannot_update_without_modification"
-        | "current_subscription_is_not_trialing";
+        | "current_subscription_is_not_trialing"
+        | "sorting_and_paging_is_not_supported_when_using_cursor"
+        | "strings_metric_are_not_supported";
       params?: { [key: string]: unknown }[];
     };
+    ExampleItem: {
+      key: string;
+      keyNamespace?: string;
+      source: string;
+      target: string;
+    };
     GetMySubscriptionDto: {
       instanceId: string;
       licenseKey: string;
@@ -719,6 +789,13 @@ export interface components {
       /** @description The Total amount with tax */
       total: number;
     };
+    Metadata: {
+      closeItems: components["schemas"]["ExampleItem"][];
+      examples: components["schemas"]["ExampleItem"][];
+      keyDescription?: string;
+      languageDescription?: string;
+      projectDescription?: string;
+    };
     MtCreditsPriceModel: {
       /** Format: int64 */
       amount: number;
@@ -726,6 +803,12 @@ export interface components {
       id: number;
       price: number;
     };
+    MtResult: {
+      contextDescription?: string;
+      /** Format: int32 */
+      price: number;
+      translated?: string;
+    };
     OrganizationWithSubscriptionsModel: {
       cloudSubscription?: components["schemas"]["AdministrationCloudSubscriptionModel"];
       organization: components["schemas"]["SimpleOrganizationModel"];
@@ -759,6 +842,18 @@ export interface components {
       };
       page?: components["schemas"]["PageMetadata"];
     };
+    PagedModelTranslationAgencyModel: {
+      _embedded?: {
+        translationAgencies?: components["schemas"]["TranslationAgencyModel"][];
+      };
+      page?: components["schemas"]["PageMetadata"];
+    };
+    PagedModelTranslationAgencyPublicModel: {
+      _embedded?: {
+        translationAgencies?: components["schemas"]["TranslationAgencyPublicModel"][];
+      };
+      page?: components["schemas"]["PageMetadata"];
+    };
     PermissionModel: {
       /**
        * @deprecated
@@ -858,6 +953,10 @@ export interface components {
       subscriptionMonthly: number;
       subscriptionYearly: number;
     };
+    PreferredAgencyResponse: {
+      /** Format: int64 */
+      preferredAgencyId?: number;
+    };
     PrepareSetEeLicenceKeyModel: {
       plan: components["schemas"]["SelfHostedEePlanModel"];
       usage: components["schemas"]["UsageModel"];
@@ -976,6 +1075,7 @@ export interface components {
       forOrganizationIds: number[];
       free: boolean;
       includedUsage: components["schemas"]["PlanIncludedUsageRequest"];
+      metricType: "KEYS_SEATS" | "STRINGS";
       name: string;
       nonCommercial: boolean;
       /** Format: date-time */
@@ -1085,6 +1185,37 @@ export interface components {
       /** Format: int64 */
       usersCount: number;
     };
+    TolgeeTranslateParams: {
+      formality?: "FORMAL" | "INFORMAL" | "DEFAULT";
+      isBatch: boolean;
+      keyName?: string;
+      metadata?: components["schemas"]["Metadata"];
+      pluralFormExamples?: { [key: string]: string };
+      pluralForms?: { [key: string]: string };
+      sourceTag: string;
+      targetTag: string;
+      text: string;
+    };
+    TranslationAgencyModel: {
+      avatar?: components["schemas"]["Avatar"];
+      description?: string;
+      email?: string;
+      emailBcc: string[];
+      /** Format: int64 */
+      id: number;
+      name: string;
+      services: string[];
+      url?: string;
+    };
+    TranslationAgencyPublicModel: {
+      avatar?: components["schemas"]["Avatar"];
+      description?: string;
+      /** Format: int64 */
+      id: number;
+      name: string;
+      services: string[];
+      url?: string;
+    };
     UpdateSubscriptionPrepareRequest: {
       period: "MONTHLY" | "YEARLY";
       /**
@@ -1096,6 +1227,14 @@ export interface components {
     UpdateSubscriptionRequest: {
       token: string;
     };
+    UpdateTranslationAgencyRequest: {
+      description: string;
+      email: string;
+      emailBcc: string[];
+      name: string;
+      services: string[];
+      url: string;
+    };
     UpdateTrialEndDateRequest: {
       /** Format: int64 */
       trialEnd: number;
@@ -1256,7 +1395,7 @@ export interface operations {
       };
     };
   };
-  create_1: {
+  create_2: {
     responses: {
       /** OK */
       200: {
@@ -1702,7 +1841,7 @@ export interface operations {
       };
     };
   };
-  create: {
+  create_1: {
     responses: {
       /** OK */
       200: {
@@ -1989,16 +2128,25 @@ export interface operations {
       };
     };
   };
-  /** Assigns a private free plan or trial plan to an organization. */
-  assignCloudPlan: {
+  getAll_1: {
     parameters: {
-      path: {
-        organizationId: number;
+      query: {
+        /** Zero-based page index (0..N) */
+        page?: number;
+        /** The size of the page to be returned */
+        size?: number;
+        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
+        sort?: string[];
+        search?: string;
       };
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["PagedModelTranslationAgencyModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2032,21 +2180,15 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["AssignPlanRequest"];
-      };
-    };
   };
-  updateTrialEndDAte: {
-    parameters: {
-      path: {
-        organizationId: number;
-      };
-    };
+  create: {
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["TranslationAgencyModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2082,21 +2224,21 @@ export interface operations {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["UpdateTrialEndDateRequest"];
+        "application/json": components["schemas"]["CreateTranslationAgencyRequest"];
       };
     };
   };
-  getBillingInfo: {
+  get_1: {
     parameters: {
       path: {
-        organizationId: number;
+        agencyId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["BillingInfoModel"];
+          "application/json": components["schemas"]["TranslationAgencyModel"];
         };
       };
       /** Bad Request */
@@ -2133,17 +2275,17 @@ export interface operations {
       };
     };
   };
-  getBuyMoreCreditsCheckoutSessionUrl: {
+  update: {
     parameters: {
       path: {
-        organizationId: number;
+        agencyId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["BuyMoreCreditsModel"];
+          "application/json": components["schemas"]["TranslationAgencyModel"];
         };
       };
       /** Bad Request */
@@ -2181,15 +2323,14 @@ export interface operations {
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["BuyMoreCreditsRequest"];
+        "application/json": components["schemas"]["UpdateTranslationAgencyRequest"];
       };
     };
   };
-  /** When applied, current subscription will be cancelled at the period end. */
-  cancelSubscription: {
+  delete: {
     parameters: {
       path: {
-        organizationId: number;
+        agencyId: number;
       };
     };
     responses: {
@@ -2229,19 +2370,15 @@ export interface operations {
       };
     };
   };
-  goToCustomerPortal: {
+  uploadAvatar: {
     parameters: {
       path: {
-        organizationId: number;
+        agencyId: number;
       };
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["GoToCustomerPortalModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2275,20 +2412,24 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "multipart/form-data": {
+          /** Format: binary */
+          avatar: string;
+        };
+      };
+    };
   };
-  getExpectedUsage_1: {
+  removeAvatar: {
     parameters: {
       path: {
-        organizationId: number;
+        agencyId: number;
       };
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["UsageModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2323,21 +2464,16 @@ export interface operations {
       };
     };
   };
-  /** Returns CSV file with usage detail for each time period and it's usage. */
-  getExpectedUsageDetail: {
+  /** Assigns a private free plan or trial plan to an organization. */
+  assignCloudPlan: {
     parameters: {
       path: {
         organizationId: number;
-        type: "SEATS" | "TRANSLATIONS" | "KEYS";
       };
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "text/csv": string;
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2371,28 +2507,21 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["AssignPlanRequest"];
+      };
+    };
   };
-  getInvoices: {
+  updateTrialEndDAte: {
     parameters: {
       path: {
         organizationId: number;
       };
-      query: {
-        /** Zero-based page index (0..N) */
-        page?: number;
-        /** The size of the page to be returned */
-        size?: number;
-        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
-        sort?: string[];
-      };
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["PagedModelInvoiceModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2426,19 +2555,29 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateTrialEndDateRequest"];
+      };
+    };
   };
-  getInvoicePdf: {
+  getAll: {
     parameters: {
-      path: {
-        organizationId: number;
-        invoiceId: number;
+      query: {
+        /** Zero-based page index (0..N) */
+        page?: number;
+        /** The size of the page to be returned */
+        size?: number;
+        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
+        sort?: string[];
+        search?: string;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/pdf": string;
+          "application/json": components["schemas"]["PagedModelTranslationAgencyPublicModel"];
         };
       };
       /** Bad Request */
@@ -2475,18 +2614,17 @@ export interface operations {
       };
     };
   };
-  getUsage: {
+  get: {
     parameters: {
       path: {
-        organizationId: number;
-        invoiceId: number;
+        agencyId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["UsageModel"];
+          "application/json": components["schemas"]["TranslationAgencyPublicModel"];
         };
       };
       /** Bad Request */
@@ -2523,20 +2661,17 @@ export interface operations {
       };
     };
   };
-  /** Returns CSV file with usage detail for each time period and it's usage. */
-  getUsageDetail: {
+  getBillingInfo: {
     parameters: {
       path: {
         organizationId: number;
-        invoiceId: number;
-        type: "SEATS" | "TRANSLATIONS" | "KEYS";
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "text/csv": string;
+          "application/json": components["schemas"]["BillingInfoModel"];
         };
       };
       /** Bad Request */
@@ -2573,8 +2708,7 @@ export interface operations {
       };
     };
   };
-  /** Returns list of available cloud plans for specific organization.) */
-  getCloudPlans: {
+  getBuyMoreCreditsCheckoutSessionUrl: {
     parameters: {
       path: {
         organizationId: number;
@@ -2584,7 +2718,7 @@ export interface operations {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["CollectionModelCloudPlanModel"];
+          "application/json": components["schemas"]["BuyMoreCreditsModel"];
         };
       };
       /** Bad Request */
@@ -2620,8 +2754,14 @@ export interface operations {
         };
       };
     };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["BuyMoreCreditsRequest"];
+      };
+    };
   };
-  prepareUpdateSubscription: {
+  /** When applied, current subscription will be cancelled at the period end. */
+  cancelSubscription: {
     parameters: {
       path: {
         organizationId: number;
@@ -2629,11 +2769,7 @@ export interface operations {
     };
     responses: {
       /** OK */
-      200: {
-        content: {
-          "application/json": components["schemas"]["SubscriptionUpdatePreviewModel"];
-        };
-      };
+      200: unknown;
       /** Bad Request */
       400: {
         content: {
@@ -2667,13 +2803,8 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["UpdateSubscriptionPrepareRequest"];
-      };
-    };
   };
-  refresh: {
+  goToCustomerPortal: {
     parameters: {
       path: {
         organizationId: number;
@@ -2683,7 +2814,7 @@ export interface operations {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["CloudSubscriptionModel"];
+          "application/json": components["schemas"]["GoToCustomerPortalModel"];
         };
       };
       /** Bad Request */
@@ -2720,8 +2851,7 @@ export interface operations {
       };
     };
   };
-  /** When subscription is scheduled to cancel on the period end, it can be restored. */
-  restoreSubscription: {
+  getExpectedUsage_1: {
     parameters: {
       path: {
         organizationId: number;
@@ -2729,7 +2859,11 @@ export interface operations {
     };
     responses: {
       /** OK */
-      200: unknown;
+      200: {
+        content: {
+          "application/json": components["schemas"]["UsageModel"];
+        };
+      };
       /** Bad Request */
       400: {
         content: {
@@ -2764,17 +2898,19 @@ export interface operations {
       };
     };
   };
-  getSelfHostedPlans: {
+  /** Returns CSV file with usage detail for each time period and it's usage. */
+  getExpectedUsageDetail: {
     parameters: {
       path: {
         organizationId: number;
+        type: "SEATS" | "TRANSLATIONS" | "KEYS";
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["CollectionModelSelfHostedEePlanModel"];
+          "text/csv": string;
         };
       };
       /** Bad Request */
@@ -2811,17 +2947,25 @@ export interface operations {
       };
     };
   };
-  refreshSelfHostedEeSubscriptions: {
+  getInvoices: {
     parameters: {
       path: {
         organizationId: number;
       };
+      query: {
+        /** Zero-based page index (0..N) */
+        page?: number;
+        /** The size of the page to be returned */
+        size?: number;
+        /** Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported. */
+        sort?: string[];
+      };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["CollectionModelSelfHostedEeSubscriptionModel"];
+          "application/json": components["schemas"]["PagedModelInvoiceModel"];
         };
       };
       /** Bad Request */
@@ -2858,17 +3002,18 @@ export interface operations {
       };
     };
   };
-  setupFreeEeSubscription: {
+  getInvoicePdf: {
     parameters: {
       path: {
         organizationId: number;
+        invoiceId: number;
       };
     };
     responses: {
       /** OK */
       200: {
         content: {
-          "application/json": components["schemas"]["SelfHostedEeSubscriptionModel"];
+          "application/pdf": string;
         };
       };
       /** Bad Request */
@@ -2904,13 +3049,443 @@ export interface operations {
         };
       };
     };
-    requestBody: {
-      content: {
-        "application/json": components["schemas"]["SelfHostedEeFreeSubscribeRequest"];
-      };
-    };
   };
-  getSelfHostedEeSubscriptions: {
+  getUsage: {
+    parameters: {
+      path: {
+        organizationId: number;
+        invoiceId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["UsageModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  /** Returns CSV file with usage detail for each time period and it's usage. */
+  getUsageDetail: {
+    parameters: {
+      path: {
+        organizationId: number;
+        invoiceId: number;
+        type: "SEATS" | "TRANSLATIONS" | "KEYS";
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "text/csv": string;
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  /** Returns list of available cloud plans for specific organization.) */
+  getCloudPlans: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CollectionModelCloudPlanModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  prepareUpdateSubscription: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["SubscriptionUpdatePreviewModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateSubscriptionPrepareRequest"];
+      };
+    };
+  };
+  refresh: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CloudSubscriptionModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  /** When subscription is scheduled to cancel on the period end, it can be restored. */
+  restoreSubscription: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: unknown;
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  getSelfHostedPlans: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CollectionModelSelfHostedEePlanModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  refreshSelfHostedEeSubscriptions: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CollectionModelSelfHostedEeSubscriptionModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
+  setupFreeEeSubscription: {
+    parameters: {
+      path: {
+        organizationId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["SelfHostedEeSubscriptionModel"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["SelfHostedEeFreeSubscribeRequest"];
+      };
+    };
+  };
+  getSelfHostedEeSubscriptions: {
     parameters: {
       path: {
         organizationId: number;
@@ -3248,6 +3823,110 @@ export interface operations {
       };
     };
   };
+  createTranslationOrder: {
+    parameters: {
+      query: {
+        filterState?: (
+          | "UNTRANSLATED"
+          | "TRANSLATED"
+          | "REVIEWED"
+          | "DISABLED"
+        )[];
+        filterOutdated?: boolean;
+      };
+      path: {
+        projectId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: unknown;
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateTranslationOrderRequest"];
+      };
+    };
+  };
+  getPreferredAgency: {
+    parameters: {
+      path: {
+        projectId: number;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["PreferredAgencyResponse"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+  };
   getMtCreditPrices: {
     responses: {
       /** OK */
@@ -3645,6 +4324,53 @@ export interface operations {
       };
     };
   };
+  translate: {
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          "application/json": components["schemas"]["MtResult"];
+        };
+      };
+      /** Bad Request */
+      400: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Unauthorized */
+      401: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Forbidden */
+      403: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+      /** Not Found */
+      404: {
+        content: {
+          "application/json":
+            | components["schemas"]["ErrorResponseTyped"]
+            | components["schemas"]["ErrorResponseBody"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["TolgeeTranslateParams"];
+      };
+    };
+  };
 }
 
 export interface external {}

From a22070a28e29b26f1ae34cd71929040d5c14cbae Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 5 Mar 2025 17:02:47 +0100
Subject: [PATCH 06/16] chore: Test plan creation and updating & some
 refactoring

---
 .../kotlin/io/tolgee/constants/Message.kt     |  1 +
 .../io/tolgee/util/BypassableListener.kt      | 19 +++++++
 .../e2eData/AbstractE2eDataController.kt      | 50 +++----------------
 .../e2eData/PermissionsE2eDataController.kt   |  1 +
 .../io/tolgee/data/StandardTestDataResult.kt  | 24 +++++++++
 .../data/service/TestDataGeneratingService.kt | 39 +++++++++++++++
 .../planForm/fields/CloudPlanFields.tsx       |  2 -
 7 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/util/BypassableListener.kt
 create mode 100644 backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
 create mode 100644 backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt

diff --git a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
index 80eccb4c1b..4f0ccada9b 100644
--- a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
@@ -271,6 +271,7 @@ enum class Message {
   CURRENT_SUBSCRIPTION_IS_NOT_TRIALING,
   SORTING_AND_PAGING_IS_NOT_SUPPORTED_WHEN_USING_CURSOR,
   STRINGS_METRIC_ARE_NOT_SUPPORTED,
+  KEYS_SEATS_METRIC_ARE_NOT_SUPPORTED_FOR_SLOTS_FIXED_TYPE,
   ;
 
   val code: String
diff --git a/backend/data/src/main/kotlin/io/tolgee/util/BypassableListener.kt b/backend/data/src/main/kotlin/io/tolgee/util/BypassableListener.kt
new file mode 100644
index 0000000000..551a7d040a
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/util/BypassableListener.kt
@@ -0,0 +1,19 @@
+package io.tolgee.util
+
+interface BypassableListener {
+  var bypass: Boolean
+
+  fun <T> bypassingListener(fn: () -> T): T {
+    val oldBypass = bypass
+    bypass = true
+    val ret = fn()
+    bypass = oldBypass
+    return ret
+  }
+
+  fun <T> executeIfNotBypassed(fn: () -> T) {
+    if (!bypass) {
+      fn()
+    }
+  }
+}
diff --git a/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/AbstractE2eDataController.kt b/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/AbstractE2eDataController.kt
index 8c344fd869..339a112175 100644
--- a/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/AbstractE2eDataController.kt
+++ b/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/AbstractE2eDataController.kt
@@ -1,5 +1,7 @@
 package io.tolgee.controllers.internal.e2eData
 
+import io.tolgee.data.StandardTestDataResult
+import io.tolgee.data.service.TestDataGeneratingService
 import io.tolgee.development.testDataBuilder.TestDataService
 import io.tolgee.development.testDataBuilder.builders.TestDataBuilder
 import io.tolgee.service.organization.OrganizationService
@@ -40,32 +42,15 @@ abstract class AbstractE2eDataController {
   @Autowired
   private lateinit var applicationContext: ApplicationContext
 
+  @Autowired
+  private lateinit var testDataGeneratingService: TestDataGeneratingService
+
   open fun afterTestDataStored(data: TestDataBuilder) {}
 
   @GetMapping(value = ["/generate-standard"])
   @Transactional
   open fun generate(): StandardTestDataResult {
-    val data = this.testData
-    testDataService.saveTestData(data)
-    afterTestDataStored(data)
-    return getStandardResult(data)
-  }
-
-  fun getStandardResult(data: TestDataBuilder): StandardTestDataResult {
-    return StandardTestDataResult(
-      projects =
-        data.data.projects.map {
-          StandardTestDataResult.ProjectModel(name = it.self.name, id = it.self.id)
-        },
-      users =
-        data.data.userAccounts.map {
-          StandardTestDataResult.UserModel(name = it.self.name, username = it.self.username, id = it.self.id)
-        },
-      organizations =
-        data.data.organizations.map {
-          StandardTestDataResult.OrganizationModel(id = it.self.id, name = it.self.name, slug = it.self.slug)
-        },
-    )
+    return testDataGeneratingService.generate(testData, this::afterTestDataStored)
   }
 
   @GetMapping(value = ["/clean"])
@@ -82,27 +67,4 @@ abstract class AbstractE2eDataController {
       }
     }
   }
-
-  data class StandardTestDataResult(
-    val projects: List<ProjectModel>,
-    val users: List<UserModel>,
-    val organizations: List<OrganizationModel>,
-  ) {
-    data class UserModel(
-      val name: String,
-      val username: String,
-      val id: Long,
-    )
-
-    data class ProjectModel(
-      val name: String,
-      val id: Long,
-    )
-
-    data class OrganizationModel(
-      val id: Long,
-      val slug: String,
-      val name: String,
-    )
-  }
 }
diff --git a/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/PermissionsE2eDataController.kt b/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/PermissionsE2eDataController.kt
index de81eec61d..36dfbf4802 100644
--- a/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/PermissionsE2eDataController.kt
+++ b/backend/development/src/main/kotlin/io/tolgee/controllers/internal/e2eData/PermissionsE2eDataController.kt
@@ -1,6 +1,7 @@
 package io.tolgee.controllers.internal.e2eData
 
 import io.swagger.v3.oas.annotations.Hidden
+import io.tolgee.data.StandardTestDataResult
 import io.tolgee.development.testDataBuilder.builders.TestDataBuilder
 import io.tolgee.development.testDataBuilder.data.PermissionsTestData
 import io.tolgee.model.enums.ProjectPermissionType
diff --git a/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt b/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
new file mode 100644
index 0000000000..134de09217
--- /dev/null
+++ b/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
@@ -0,0 +1,24 @@
+package io.tolgee.data
+
+data class StandardTestDataResult(
+  val projects: List<ProjectModel>,
+  val users: List<UserModel>,
+  val organizations: List<OrganizationModel>,
+) {
+  data class UserModel(
+    val name: String,
+    val username: String,
+    val id: Long,
+  )
+
+  data class ProjectModel(
+    val name: String,
+    val id: Long,
+  )
+
+  data class OrganizationModel(
+    val id: Long,
+    val slug: String,
+    val name: String,
+  )
+}
diff --git a/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt b/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt
new file mode 100644
index 0000000000..a2a50458fa
--- /dev/null
+++ b/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt
@@ -0,0 +1,39 @@
+package io.tolgee.data.service
+
+import io.tolgee.data.StandardTestDataResult
+import io.tolgee.development.testDataBuilder.TestDataService
+import io.tolgee.development.testDataBuilder.builders.TestDataBuilder
+import org.springframework.stereotype.Service
+import org.springframework.transaction.annotation.Transactional
+
+@Service
+class TestDataGeneratingService(
+  private val testDataService: TestDataService
+) {
+  @Transactional
+  fun generate(
+    testData: TestDataBuilder,
+    afterTestDataStored: (TestDataBuilder) -> Unit = {}
+  ): StandardTestDataResult {
+    testDataService.saveTestData(testData)
+    afterTestDataStored(testData)
+    return getStandardResult(testData)
+  }
+
+  private fun getStandardResult(data: TestDataBuilder): StandardTestDataResult {
+    return StandardTestDataResult(
+      projects =
+      data.data.projects.map {
+        StandardTestDataResult.ProjectModel(name = it.self.name, id = it.self.id)
+      },
+      users =
+      data.data.userAccounts.map {
+        StandardTestDataResult.UserModel(name = it.self.name, username = it.self.username, id = it.self.id)
+      },
+      organizations =
+      data.data.organizations.map {
+        StandardTestDataResult.OrganizationModel(id = it.self.id, name = it.self.name, slug = it.self.slug)
+      },
+    )
+  }
+}
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
index f41f891d30..391ee57eb9 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/components/planForm/fields/CloudPlanFields.tsx
@@ -28,8 +28,6 @@ export const CloudPlanFields: FC<{
     setFieldValue(`${parentName}free`, !values.free);
   }
 
-  console.log({ errors, values });
-
   return (
     <>
       <TextField

From ac4afd96074d951ff35d4fd1c975cc27625d309b Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Fri, 7 Mar 2025 12:03:09 +0100
Subject: [PATCH 07/16] feat: Count seats and store usage

---
 .../organization/OrganizationController.kt    |  2 +-
 .../controllers/project/ProjectsController.kt |  2 +-
 .../AuthProviderChangeController.kt           |  2 +-
 .../OrganizationRoleCachingTest.kt            |  2 +-
 .../iterceptor/ActivityDatabaseInterceptor.kt |  2 +-
 .../iterceptor/PreCommitEventPublisher.kt     |  4 ++--
 .../AdditionalTestDataSaver.kt                |  4 ++++
 .../testDataBuilder/TestDataService.kt        | 22 ++++++++++++++++-
 .../io/tolgee/events/OnEntityPreUpdate.kt     |  2 ++
 .../io/tolgee/model/OrganizationRole.kt       |  8 +------
 .../main/kotlin/io/tolgee/model/Permission.kt | 24 ++++---------------
 .../main/kotlin/io/tolgee/model/Project.kt    |  4 ----
 .../organization/OrganizationRoleService.kt   |  7 +++---
 .../service/security/PermissionService.kt     |  2 +-
 .../kotlin/io/tolgee/util/loggerExtension.kt  |  4 ++++
 .../src/service/billingApiSchema.generated.ts |  3 ++-
 16 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
index 5599c1016e..948ba8c8bf 100644
--- a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
@@ -259,7 +259,7 @@ class OrganizationController(
     @PathVariable("organizationId") organizationId: Long,
     @PathVariable("userId") userId: Long,
   ) {
-    organizationRoleService.removeUser(organizationId, userId)
+    organizationRoleService.removeUser(userId, organizationId)
   }
 
   @PutMapping("/{id:[0-9]+}/avatar", consumes = [MediaType.MULTIPART_FORM_DATA_VALUE])
diff --git a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/project/ProjectsController.kt b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/project/ProjectsController.kt
index f15f89ba9d..22c9bebb34 100644
--- a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/project/ProjectsController.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/project/ProjectsController.kt
@@ -269,7 +269,7 @@ class ProjectsController(
     if (userId == authenticationFacade.authenticatedUser.id) {
       throw BadRequestException(Message.CAN_NOT_REVOKE_OWN_PERMISSIONS)
     }
-    permissionService.revoke(projectId, userId)
+    permissionService.revoke(userId, projectId)
   }
 
   @PutMapping(value = ["/{projectId:[0-9]+}/leave"])
diff --git a/backend/api/src/main/kotlin/io/tolgee/controllers/AuthProviderChangeController.kt b/backend/api/src/main/kotlin/io/tolgee/controllers/AuthProviderChangeController.kt
index 1641bfa7fa..9b320a29fa 100644
--- a/backend/api/src/main/kotlin/io/tolgee/controllers/AuthProviderChangeController.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/controllers/AuthProviderChangeController.kt
@@ -21,7 +21,7 @@ import org.springframework.web.bind.annotation.RestController
 
 @RestController
 @CrossOrigin(origins = ["*"])
-@RequestMapping("/v2/auth-provider") // TODO: I should probably use the v2
+@RequestMapping("/v2/auth-provider")
 @AuthenticationTag
 @OpenApiHideFromPublicDocs
 class AuthProviderChangeController(
diff --git a/backend/app/src/test/kotlin/io/tolgee/service/organizationRole/OrganizationRoleCachingTest.kt b/backend/app/src/test/kotlin/io/tolgee/service/organizationRole/OrganizationRoleCachingTest.kt
index 05c5330fcd..f68e1bf96f 100644
--- a/backend/app/src/test/kotlin/io/tolgee/service/organizationRole/OrganizationRoleCachingTest.kt
+++ b/backend/app/src/test/kotlin/io/tolgee/service/organizationRole/OrganizationRoleCachingTest.kt
@@ -79,7 +79,7 @@ class OrganizationRoleCachingTest : AbstractSpringTest() {
   @Test
   fun `it evicts on remove user`() {
     populateCache(testData.pepaOrg.id, testData.pepa.id)
-    organizationRoleService.removeUser(testData.pepaOrg.id, testData.pepa.id)
+    organizationRoleService.removeUser(testData.pepa.id, testData.pepaOrg.id)
     assertCacheEvicted(testData.pepaOrg.id, testData.pepa.id)
   }
 
diff --git a/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/ActivityDatabaseInterceptor.kt b/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/ActivityDatabaseInterceptor.kt
index 3ee1c35bd7..bdc9a51409 100644
--- a/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/ActivityDatabaseInterceptor.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/ActivityDatabaseInterceptor.kt
@@ -61,7 +61,7 @@ class ActivityDatabaseInterceptor : Interceptor, Logging {
     propertyNames: Array<out String>?,
     types: Array<out Type>?,
   ): Boolean {
-    preCommitEventsPublisher.onUpdate(entity)
+    preCommitEventsPublisher.onUpdate(entity, previousState, propertyNames)
     interceptedEventsManager.onFieldModificationsActivity(
       entity,
       currentState,
diff --git a/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/PreCommitEventPublisher.kt b/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/PreCommitEventPublisher.kt
index b18f25c064..69c9e411cb 100644
--- a/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/PreCommitEventPublisher.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/activity/iterceptor/PreCommitEventPublisher.kt
@@ -12,8 +12,8 @@ class PreCommitEventPublisher(private val applicationContext: ApplicationContext
     applicationContext.publishEvent(OnEntityPrePersist(this, entity))
   }
 
-  fun onUpdate(entity: Any?) {
-    applicationContext.publishEvent(OnEntityPreUpdate(this, entity))
+  fun onUpdate(entity: Any?, previousState: Array<out Any>?, propertyNames: Array<out String>?) {
+    applicationContext.publishEvent(OnEntityPreUpdate(this, entity, previousState, propertyNames))
   }
 
   fun onDelete(entity: Any?) {
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
index 671e9269fd..f5b27e03a5 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
@@ -6,4 +6,8 @@ interface AdditionalTestDataSaver {
   fun save(builder: TestDataBuilder)
 
   fun clean(builder: TestDataBuilder)
+
+  fun before(builder: TestDataBuilder) {}
+
+  fun after(builder: TestDataBuilder) {}
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
index ba2d99d180..1894b2b944 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
@@ -80,6 +80,7 @@ class TestDataService(
   fun saveTestData(builder: TestDataBuilder) {
     activityHolder.enableAutoCompletion = false
     languageStatsListener.bypass = true
+    runBeforeMethodsOfAdditionalSavers(builder)
     prepare()
 
     // Projects have to be stored in separate transaction since projectHolder's
@@ -88,8 +89,8 @@ class TestDataService(
     // To be able to save project in its separate transaction,
     // user/organization has to be stored first.
     executeInNewTransaction(transactionManager) {
-      saveOrganizationData(builder)
       saveAllUsers(builder)
+      saveOrganizationData(builder)
     }
 
     executeInNewTransaction(transactionManager) {
@@ -107,6 +108,8 @@ class TestDataService(
     updateLanguageStats(builder)
     activityHolder.enableAutoCompletion = true
     languageStatsListener.bypass = false
+
+    runAfterMethodsOfAdditionalSavers(builder)
   }
 
   @Transactional
@@ -520,4 +523,21 @@ class TestDataService(
   companion object {
     private val passwordHashCache = mutableMapOf<String, String>()
   }
+
+  private fun runBeforeMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+    executeInNewTransaction(transactionManager) {
+      additionalTestDataSavers.forEach {
+        it.before(builder)
+      }
+    }
+  }
+
+
+  private fun runAfterMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+    executeInNewTransaction(transactionManager) {
+      additionalTestDataSavers.forEach {
+        it.after(builder)
+      }
+    }
+  }
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/events/OnEntityPreUpdate.kt b/backend/data/src/main/kotlin/io/tolgee/events/OnEntityPreUpdate.kt
index 72b2802384..1c87043a64 100644
--- a/backend/data/src/main/kotlin/io/tolgee/events/OnEntityPreUpdate.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/events/OnEntityPreUpdate.kt
@@ -6,4 +6,6 @@ import org.springframework.context.ApplicationEvent
 class OnEntityPreUpdate(
   override val source: PreCommitEventPublisher,
   override val entity: Any?,
+  val previousState: Array<out Any>?,
+  val propertyNames: Array<out String>?,
 ) : ApplicationEvent(source), EntityPreCommitEvent
diff --git a/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt b/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
index 4ec93947a9..0af115cbd2 100644
--- a/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
@@ -1,13 +1,7 @@
 package io.tolgee.model
 
 import io.tolgee.model.enums.OrganizationRoleType
-import jakarta.persistence.Entity
-import jakarta.persistence.EnumType
-import jakarta.persistence.Enumerated
-import jakarta.persistence.ManyToOne
-import jakarta.persistence.OneToOne
-import jakarta.persistence.Table
-import jakarta.persistence.UniqueConstraint
+import jakarta.persistence.*
 import jakarta.validation.constraints.NotNull
 import org.hibernate.annotations.ColumnDefault
 
diff --git a/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt b/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
index 1f3dcb9562..5fdb299658 100644
--- a/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
@@ -6,26 +6,10 @@ import io.tolgee.dtos.request.project.LanguagePermissions
 import io.tolgee.model.enums.ProjectPermissionType
 import io.tolgee.model.enums.Scope
 import io.tolgee.model.translationAgency.TranslationAgency
-import jakarta.persistence.Column
-import jakarta.persistence.Entity
-import jakarta.persistence.EntityListeners
-import jakarta.persistence.EnumType
-import jakarta.persistence.Enumerated
-import jakarta.persistence.FetchType
-import jakarta.persistence.GeneratedValue
-import jakarta.persistence.GenerationType
-import jakarta.persistence.Id
-import jakarta.persistence.Index
-import jakarta.persistence.JoinColumn
-import jakarta.persistence.JoinTable
-import jakarta.persistence.ManyToMany
-import jakarta.persistence.ManyToOne
-import jakarta.persistence.OneToOne
-import jakarta.persistence.PrePersist
-import jakarta.persistence.PreUpdate
-import jakarta.persistence.Table
+import jakarta.persistence.*
 import org.hibernate.annotations.Parameter
 import org.hibernate.annotations.Type
+import org.springframework.beans.factory.annotation.Configurable
 
 @Suppress("LeakingThis")
 @Entity
@@ -156,7 +140,9 @@ class Permission(
     get() = this.stateChangeLanguages.map { it.id }.toSet()
 
   companion object {
+    @Configurable
     class PermissionListeners {
+
       @PrePersist
       @PreUpdate
       fun prePersist(permission: Permission) {
@@ -170,7 +156,7 @@ class Permission(
             permission.viewLanguages.isNotEmpty() ||
               permission.translateLanguages.isNotEmpty() ||
               permission.stateChangeLanguages.isNotEmpty()
-          )
+            )
         ) {
           throw IllegalStateException("Organization base permission cannot have language permissions")
         }
diff --git a/backend/data/src/main/kotlin/io/tolgee/model/Project.kt b/backend/data/src/main/kotlin/io/tolgee/model/Project.kt
index 81858232e3..bd04f27d74 100644
--- a/backend/data/src/main/kotlin/io/tolgee/model/Project.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/model/Project.kt
@@ -141,10 +141,6 @@ class Project(
     return findLanguageOptional(tag).orElse(null)
   }
 
-  fun getLanguage(tag: String): Language {
-    return findLanguage(tag) ?: throw NotFoundException()
-  }
-
   companion object {
     @Configurable
     class ProjectListener {
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationRoleService.kt b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationRoleService.kt
index 651de66d9f..63fe985607 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationRoleService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationRoleService.kt
@@ -27,7 +27,6 @@ import org.springframework.stereotype.Service
 import org.springframework.transaction.annotation.Transactional
 
 @Service
-@Transactional
 class OrganizationRoleService(
   private val organizationRoleRepository: OrganizationRoleRepository,
   private val authenticationFacade: AuthenticationFacade,
@@ -210,6 +209,7 @@ class OrganizationRoleService(
   }
 
   @CacheEvict(Caches.ORGANIZATION_ROLES, key = "{#organization.id, #user.id}")
+  @Transactional
   fun grantRoleToUser(
     user: UserAccount,
     organization: Organization,
@@ -228,12 +228,13 @@ class OrganizationRoleService(
   }
 
   fun leave(organizationId: Long) {
-    this.removeUser(organizationId, authenticationFacade.authenticatedUser.id)
+    this.removeUser(authenticationFacade.authenticatedUser.id, organizationId)
   }
 
+  @Transactional
   fun removeUser(
-    organizationId: Long,
     userId: Long,
+    organizationId: Long,
   ) {
     val managedBy = getManagedBy(userId)
     if (managedBy != null && managedBy.id == organizationId) {
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/security/PermissionService.kt b/backend/data/src/main/kotlin/io/tolgee/service/security/PermissionService.kt
index efcbcb71e3..994591a288 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/security/PermissionService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/security/PermissionService.kt
@@ -401,8 +401,8 @@ class PermissionService(
   }
 
   fun revoke(
-    projectId: Long,
     userId: Long,
+    projectId: Long,
   ) {
     val data = this.getProjectPermissionData(projectId, userId)
     if (data.organizationRole != null) {
diff --git a/backend/data/src/main/kotlin/io/tolgee/util/loggerExtension.kt b/backend/data/src/main/kotlin/io/tolgee/util/loggerExtension.kt
index a3a78c1b1b..db77c729b0 100644
--- a/backend/data/src/main/kotlin/io/tolgee/util/loggerExtension.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/util/loggerExtension.kt
@@ -31,6 +31,10 @@ interface Logging {
   }
 }
 
+inline fun <reified T> T.logger(): Logger {
+  return LoggerFactory.getLogger(T::class.java)
+}
+
 val <T : Logging> T.logger: Logger get() = LoggerFactory.getLogger(javaClass)
 
 fun Logger.trace(message: () -> String) {
diff --git a/webapp/src/service/billingApiSchema.generated.ts b/webapp/src/service/billingApiSchema.generated.ts
index 8190ecef53..e589cb8282 100644
--- a/webapp/src/service/billingApiSchema.generated.ts
+++ b/webapp/src/service/billingApiSchema.generated.ts
@@ -742,7 +742,8 @@ export interface components {
         | "cannot_update_without_modification"
         | "current_subscription_is_not_trialing"
         | "sorting_and_paging_is_not_supported_when_using_cursor"
-        | "strings_metric_are_not_supported";
+        | "strings_metric_are_not_supported"
+        | "keys_seats_metric_are_not_supported_for_slots_fixed_type";
       params?: { [key: string]: unknown }[];
     };
     ExampleItem: {

From 70af5e86edfda4351bf3c5e09268795dabe18402 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Mon, 10 Mar 2025 18:36:25 +0100
Subject: [PATCH 08/16] feat: Showing proper metrics in the subscriptions UI

---
 .../organization/OrganizationController.kt    | 34 +++++--
 .../hateoas/organization/PublicUsageModel.kt  | 47 ++++++++++
 .../BaseLimitsProvider.kt                     | 30 ++++++
 .../BaseTranslationsLimitProvider.kt          | 15 ---
 .../LimitsProvider.kt                         |  7 ++
 .../TranslationsLimitProvider.kt              | 21 -----
 .../io/tolgee/dtos/MtCreditBalanceDto.kt      |  4 +
 .../main/kotlin/io/tolgee/dtos/UsageLimits.kt | 26 +++++
 .../MtCreditBucketService.kt                  |  1 +
 .../organization/OrganizationStatsService.kt  | 40 ++++++--
 e2e/cypress/support/dataCyType.d.ts           |  1 +
 webapp/src/component/common/StringsHint.tsx   | 18 ++++
 .../Subscriptions/cloud/PlansCloudList.tsx    |  2 +-
 .../Subscriptions/cloud/useCloudPlans.tsx     |  1 +
 .../selfHosted/PlansSelfHostedList.tsx        |  1 +
 .../SelfHostedEeActiveSubscription.tsx        |  1 +
 .../AdministrationEePlanCreateView.tsx        |  1 +
 .../AdministrationEePlanEditView.tsx          |  1 +
 .../ee/billing/component/BillingProgress.tsx  | 39 +++++---
 .../{Usage.tsx => CriticalUsageCircle.tsx}    | 10 +-
 .../src/ee/billing/component/IncludedItem.tsx | 38 +++++++-
 .../billing/component/Plan/IncludedUsage.tsx  | 29 ++++--
 webapp/src/ee/billing/component/Plan/Plan.tsx |  1 +
 .../Plan/{ => freePlan}/FreePlan.tsx          | 60 ++++--------
 .../Plan/freePlan/FreePlanLimits.tsx          | 55 +++++++++++
 .../ee/billing/component/Plan/plansTools.ts   |  4 +-
 .../component/Price/PayAsYouGoPrices.tsx      | 33 +++++--
 .../ee/billing/component/UsageDetailed.tsx    | 94 +++++++++----------
 .../component/UserMenu/BillingMenuItem.tsx    |  8 +-
 .../ee/billing/component/getProgressData.ts   | 71 ++++++++++++++
 .../component/topBar/TrialChipTooltip.tsx     |  1 +
 webapp/src/ee/billing/component/utils.ts      | 69 --------------
 .../CurrentCloudSubscriptionInfo.tsx          | 89 +++++++++++++-----
 .../currentCloudSubscription/PlanMetric.tsx   | 25 +++--
 .../ReachingTheLimitMessage.tsx               | 16 +++-
 .../SubscriptionsTrialAlert.tsx               |  2 +-
 .../billing/limitPopover/PlanLimitPopover.tsx |  6 +-
 .../limitPopover/SpendingLimitExceeded.tsx    |  6 +-
 webapp/src/eeSetup/eeModule.ee.tsx            |  2 +-
 webapp/src/service/apiSchema.generated.ts     | 45 ++++++++-
 .../src/service/billingApiSchema.generated.ts |  3 +-
 .../BaseOrganizationSettingsView.tsx          |  4 +-
 webapp/src/views/projects/BaseProjectView.tsx |  4 +-
 webapp/src/views/projects/ProjectListView.tsx |  4 +-
 44 files changed, 651 insertions(+), 318 deletions(-)
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
 delete mode 100644 backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseTranslationsLimitProvider.kt
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/LimitsProvider.kt
 delete mode 100644 backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/TranslationsLimitProvider.kt
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
 rename webapp/src/ee/billing/component/{Usage.tsx => CriticalUsageCircle.tsx} (91%)
 rename webapp/src/ee/billing/component/Plan/{ => freePlan}/FreePlan.tsx (62%)
 create mode 100644 webapp/src/ee/billing/component/Plan/freePlan/FreePlanLimits.tsx
 create mode 100644 webapp/src/ee/billing/component/getProgressData.ts
 delete mode 100644 webapp/src/ee/billing/component/utils.ts

diff --git a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
index 948ba8c8bf..d78cc8920f 100644
--- a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
@@ -7,7 +7,7 @@ package io.tolgee.api.v2.controllers.organization
 import io.swagger.v3.oas.annotations.Operation
 import io.swagger.v3.oas.annotations.tags.Tag
 import io.tolgee.component.mtBucketSizeProvider.PayAsYouGoCreditsProvider
-import io.tolgee.component.translationsLimitProvider.TranslationsLimitProvider
+import io.tolgee.component.translationsLimitProvider.LimitsProvider
 import io.tolgee.configuration.tolgee.TolgeeProperties
 import io.tolgee.constants.Message
 import io.tolgee.dtos.queryResults.organization.OrganizationView
@@ -89,7 +89,7 @@ class OrganizationController(
   private val imageUploadService: ImageUploadService,
   private val mtCreditConsumer: MtCreditsService,
   private val organizationStatsService: OrganizationStatsService,
-  private val translationsLimitProvider: TranslationsLimitProvider,
+  private val limitsProvider: LimitsProvider,
   private val projectService: ProjectService,
   private val payAsYouGoCreditsProvider: PayAsYouGoCreditsProvider,
 ) {
@@ -311,11 +311,16 @@ class OrganizationController(
   ): PublicUsageModel {
     val organization = organizationService.get(organizationId)
     val creditBalances = mtCreditConsumer.getCreditBalances(organization.id)
-    val currentTranslationSlots = organizationStatsService.getCurrentTranslationSlotCount(organizationId)
+    val currentTranslationSlots = organizationStatsService.getTranslationSlotCount(organizationId)
     val currentPayAsYouGoMtCredits = payAsYouGoCreditsProvider.getUsedPayAsYouGoCredits(organization)
     val availablePayAsYouGoMtCredits = payAsYouGoCreditsProvider.getPayAsYouGoAvailableCredits(organization)
-    val currentTranslations = organizationStatsService.getCurrentTranslationCount(organizationId)
+    val currentTranslations = organizationStatsService.getTranslationCount(organizationId)
+    val currentSeats = organizationStatsService.getSeatCount(organizationId)
+    val currentKeys = organizationStatsService.getKeyCount(organizationId)
+    val limits = limitsProvider.getLimits(organizationId)
+
     return PublicUsageModel(
+      isPayAsYouGo = limits.isPayAsYouGo,
       organizationId = organizationId,
       creditBalance = creditBalances.creditBalance / 100,
       includedMtCredits = creditBalances.bucketSize / 100,
@@ -325,10 +330,23 @@ class OrganizationController(
       availablePayAsYouGoMtCredits = availablePayAsYouGoMtCredits,
       currentTranslations = currentTranslations,
       currentTranslationSlots = currentTranslationSlots,
-      includedTranslations = translationsLimitProvider.getPlanTranslations(organization),
-      includedTranslationSlots = translationsLimitProvider.getPlanTranslationSlots(organization),
-      translationSlotsLimit = translationsLimitProvider.getTranslationSlotsLimit(organization),
-      translationsLimit = translationsLimitProvider.getTranslationLimit(organization),
+
+      includedTranslations = limits.strings.included,
+      translationsLimit = limits.strings.limit,
+
+      includedTranslationSlots = limits.translationSlots.included,
+      translationSlotsLimit = limits.translationSlots.limit,
+
+      includedKeys = limits.keys.included,
+      keysLimit = limits.keys.limit,
+
+      includedSeats = limits.seats.included,
+      seatsLimit = limits.seats.limit,
+
+      currentKeys = currentKeys,
+      currentSeats = currentSeats,
+
+      usedMtCredits = creditBalances.usedCredits / 100,
     )
   }
 
diff --git a/backend/api/src/main/kotlin/io/tolgee/hateoas/organization/PublicUsageModel.kt b/backend/api/src/main/kotlin/io/tolgee/hateoas/organization/PublicUsageModel.kt
index f5f32fcff9..d855cd8dc5 100644
--- a/backend/api/src/main/kotlin/io/tolgee/hateoas/organization/PublicUsageModel.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/hateoas/organization/PublicUsageModel.kt
@@ -8,6 +8,11 @@ import java.io.Serializable
 @Suppress("unused")
 @Relation(collectionRelation = "plans", itemRelation = "plan")
 open class PublicUsageModel(
+  @Schema(
+    description = "Whether the current plan is pay-as-you-go of fixed. " +
+      "For pay-as-you-go plans, the spending limit is the top limit."
+  )
+  val isPayAsYouGo: Boolean,
   val organizationId: Long,
   @Schema(description = "Current balance of standard credits. Standard credits are refilled every month")
   val creditBalance: Long,
@@ -21,6 +26,10 @@ open class PublicUsageModel(
   val creditBalanceNextRefillAt: Long,
   @Schema(description = "Currently used credits over credits included in plan and extra credits")
   val currentPayAsYouGoMtCredits: Long,
+
+  @Schema(description = "Currently used credits including credits used over the limit")
+  val usedMtCredits: Long,
+
   @Schema(
     description =
       "The maximum amount organization can spend" +
@@ -57,6 +66,44 @@ open class PublicUsageModel(
         "(For pay us you go, the top limit is the spending limit)",
   )
   val translationsLimit: Long,
+
+  @Schema(
+    description =
+      "How many keys are included in current subscription plan. " +
+        "How many keys can organization use without additional costs.",
+  )
+  val includedKeys: Long,
+
+  @Schema(
+    description = """How many keys are currently stored by organization""",
+  )
+  val currentKeys: Long,
+
+  @Schema(
+    description =
+      "How many keys can be stored until reaching the limit. " +
+        "(For pay us you go, the top limit is the spending limit)",
+  )
+  val keysLimit: Long,
+
+  @Schema(
+    description =
+      "How many seats are included in current subscription plan. " +
+        "How many seats can organization use without additional costs.",
+  )
+  val includedSeats: Long,
+
+  @Schema(
+    description = """How seats are currently used by organization""",
+  )
+  val currentSeats: Long,
+
+  @Schema(
+    description =
+      "How many seats can be stored until reaching the limit. " +
+        "(For pay us you go, the top limit is the spending limit)",
+  )
+  val seatsLimit: Long,
 ) : RepresentationModel<PublicUsageModel>(), Serializable {
   @Schema(
     deprecated = true,
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
new file mode 100644
index 0000000000..caaf824a5c
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
@@ -0,0 +1,30 @@
+package io.tolgee.component.translationsLimitProvider
+
+import io.tolgee.dtos.UsageLimits
+import io.tolgee.model.Organization
+import org.springframework.stereotype.Component
+
+@Component
+class BaseLimitsProvider : LimitsProvider {
+  override fun getLimits(organizationId: Long): UsageLimits {
+    return UsageLimits(
+      isPayAsYouGo = false,
+      keys = UsageLimits.Limit(
+        included = -1,
+        limit = -1
+      ),
+      seats = UsageLimits.Limit(
+        included = -1,
+        limit = -1
+      ),
+      strings = UsageLimits.Limit(
+        included = -1,
+        limit = -1
+      ),
+      translationSlots = UsageLimits.Limit(
+        included = -1,
+        limit = -1
+      )
+    )
+  }
+}
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseTranslationsLimitProvider.kt b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseTranslationsLimitProvider.kt
deleted file mode 100644
index 83bb3bfc73..0000000000
--- a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseTranslationsLimitProvider.kt
+++ /dev/null
@@ -1,15 +0,0 @@
-package io.tolgee.component.translationsLimitProvider
-
-import io.tolgee.model.Organization
-import org.springframework.stereotype.Component
-
-@Component
-class BaseTranslationsLimitProvider : TranslationsLimitProvider {
-  override fun getTranslationSlotsLimit(organization: Organization?): Long = -1
-
-  override fun getTranslationLimit(organization: Organization?): Long = -1
-
-  override fun getPlanTranslations(organization: Organization?): Long = -1
-
-  override fun getPlanTranslationSlots(organization: Organization?): Long = -1
-}
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/LimitsProvider.kt b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/LimitsProvider.kt
new file mode 100644
index 0000000000..722b39d92f
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/LimitsProvider.kt
@@ -0,0 +1,7 @@
+package io.tolgee.component.translationsLimitProvider
+
+import io.tolgee.dtos.UsageLimits
+
+interface LimitsProvider {
+  fun getLimits(organizationId: Long): UsageLimits
+}
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/TranslationsLimitProvider.kt b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/TranslationsLimitProvider.kt
deleted file mode 100644
index cb2309fe2f..0000000000
--- a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/TranslationsLimitProvider.kt
+++ /dev/null
@@ -1,21 +0,0 @@
-package io.tolgee.component.translationsLimitProvider
-
-import io.tolgee.model.Organization
-
-interface TranslationsLimitProvider {
-  /**
-   * Returns number of translation slots limit for organization
-   * (This is for plans where useSlots = true)
-   */
-  fun getTranslationSlotsLimit(organization: Organization?): Long
-
-  /**
-   * Returns number of translations
-   * (This is for  plan types)
-   */
-  fun getTranslationLimit(organization: Organization?): Long
-
-  fun getPlanTranslations(organization: Organization?): Long
-
-  fun getPlanTranslationSlots(organization: Organization?): Long
-}
diff --git a/backend/data/src/main/kotlin/io/tolgee/dtos/MtCreditBalanceDto.kt b/backend/data/src/main/kotlin/io/tolgee/dtos/MtCreditBalanceDto.kt
index a0e61d8f30..74f281e2db 100644
--- a/backend/data/src/main/kotlin/io/tolgee/dtos/MtCreditBalanceDto.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/dtos/MtCreditBalanceDto.kt
@@ -3,7 +3,11 @@ package io.tolgee.dtos
 import java.util.*
 
 data class MtCreditBalanceDto(
+  /** Used credits in cents */
+  val usedCredits: Long,
+  /** Remaining credits in cents */
   val creditBalance: Long,
+  /** Credits included in the plan (or in the Bucket size) in cents */
   val bucketSize: Long,
   val refilledAt: Date,
   val nextRefillAt: Date,
diff --git a/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt b/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
new file mode 100644
index 0000000000..c5ed509da0
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
@@ -0,0 +1,26 @@
+package io.tolgee.dtos
+
+/**
+ * This class represents usage limits for a subscription plan
+ *
+ * Translation slots are legacy unit
+ */
+data class UsageLimits(
+  val isPayAsYouGo: Boolean,
+  val strings: Limit,
+  val keys: Limit,
+  val seats: Limit,
+
+  //
+  // Legacy units
+  //
+  val translationSlots: Limit,
+) {
+  data class Limit(
+    /** What's included in the plan */
+    val included: Long,
+
+    /** What's the maximum value before using all the usage from spending limit */
+    val limit: Long,
+  )
+}
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/machineTranslation/mtCreditsConsumption/MtCreditBucketService.kt b/backend/data/src/main/kotlin/io/tolgee/service/machineTranslation/mtCreditsConsumption/MtCreditBucketService.kt
index d07f7d3d40..2e0520db2f 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/machineTranslation/mtCreditsConsumption/MtCreditBucketService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/machineTranslation/mtCreditsConsumption/MtCreditBucketService.kt
@@ -170,6 +170,7 @@ class MtCreditBucketService(
       bucketSize = bucket.bucketSize,
       refilledAt = bucket.refilled,
       nextRefillAt = bucket.getNextRefillDate(),
+      usedCredits = bucket.bucketSize - bucket.credits,
     )
   }
 
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
index 9b7b23ae8f..17ea5b41d9 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
@@ -32,7 +32,7 @@ class OrganizationStatsService(
       .singleResult as Long
   }
 
-  fun getCurrentTranslationSlotCount(organizationId: Long): Long {
+  fun getTranslationSlotCount(organizationId: Long): Long {
     val result =
       entityManager.createNativeQuery(
         """
@@ -53,14 +53,40 @@ class OrganizationStatsService(
     return result.toLong()
   }
 
-  fun getCurrentTranslationCount(organizationId: Long): Long {
+  fun getSeatCount(organizationId: Long): Long {
     return entityManager.createQuery(
       """
-      select count(t) from Translation t where 
-        t.language.deletedAt is null and
-        t.key.project.organizationOwner.id = :organizationId and 
-        t.state <> io.tolgee.model.enums.TranslationState.UNTRANSLATED and t.key.project.deletedAt is null
+      select count(distinct ua.id) from UserAccount ua
+      left join ua.organizationRoles orl
+      left join orl.organization o on o.deletedAt is null and o.id = :organizationId
+      left join ua.permissions p 
+      left join p.project pr on pr.deletedAt is null and pr.organizationOwner.id = :organizationId 
+      where ua.deletedAt is null and ua.disabledAt is null
+        and (pr is not null or o is not null)
       """.trimIndent(),
-    ).setParameter("organizationId", organizationId).singleResult as Long? ?: 0
+    ).setParameter("organizationId", organizationId).singleResult as Long
   }
+
+  fun getTranslationCount(organizationId: Long): Long {
+    return entityManager.createQuery(
+      """
+        select count(t.id) from Translation t
+        join t.key k
+        join k.project p on p.deletedAt is null
+        join t.language l on l.deletedAt is null
+        where p.organizationOwner.id = :organizationId and t.text is not null and t.text <> ''
+        """.trimIndent(),
+    ).setParameter("organizationId", organizationId).singleResult as Long
+  }
+
+  fun getKeyCount(organizationId: Long): Long {
+    return entityManager.createQuery(
+      """
+        select count(k.id) from Key k
+        join k.project p on p.deletedAt is null
+        where p.organizationOwner.id = :organizationId
+        """.trimIndent(),
+    ).setParameter("organizationId", organizationId).singleResult as Long
+  }
+
 }
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
index 4232670ded..278a23c53e 100644
--- a/e2e/cypress/support/dataCyType.d.ts
+++ b/e2e/cypress/support/dataCyType.d.ts
@@ -140,6 +140,7 @@ declare namespace DataCy {
         "billing-plan-action-button" |
         "billing-plan-monthly-price" |
         "billing-plan-price-extra-seat" |
+        "billing-plan-price-extra-thousand-keys" |
         "billing-plan-price-extra-thousand-mt-credits" |
         "billing-plan-price-extra-thousand-strings" |
         "billing-plan-subtitle" |
diff --git a/webapp/src/component/common/StringsHint.tsx b/webapp/src/component/common/StringsHint.tsx
index 7df45c822f..22845e99ce 100644
--- a/webapp/src/component/common/StringsHint.tsx
+++ b/webapp/src/component/common/StringsHint.tsx
@@ -10,3 +10,21 @@ export const StringsHint: React.FC = ({ children }) => {
     </Tooltip>
   );
 };
+
+export const KeysHint: React.FC = ({ children }) => {
+  const { t } = useTranslate();
+  return (
+    <Tooltip disableInteractive title={t('global_keys_hint')}>
+      <StyledBillingHint>{children}</StyledBillingHint>
+    </Tooltip>
+  );
+};
+
+export const SeatsHint: React.FC = ({ children }) => {
+  const { t } = useTranslate();
+  return (
+    <Tooltip disableInteractive title={t('global_seats_hint')}>
+      <StyledBillingHint>{children}</StyledBillingHint>
+    </Tooltip>
+  );
+};
diff --git a/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx b/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx
index 84ace930c7..18624c660a 100644
--- a/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx
+++ b/webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 import { components } from 'tg.service/billingApiSchema.generated';
 import { PlanType } from '../../component/Plan/types';
 import { BillingPeriodType } from '../../component/Price/PeriodSwitch';
-import { FreePlan } from '../../component/Plan/FreePlan';
+import { FreePlan } from '../../component/Plan/freePlan/FreePlan';
 import { useCloudPlans } from './useCloudPlans';
 import { isPlanPeriodDependant } from '../../component/Plan/plansTools';
 import { CloudPlanItem } from './CloudPlanItem';
diff --git a/webapp/src/ee/billing/Subscriptions/cloud/useCloudPlans.tsx b/webapp/src/ee/billing/Subscriptions/cloud/useCloudPlans.tsx
index 3ebd7d1d7d..d284cb46e9 100644
--- a/webapp/src/ee/billing/Subscriptions/cloud/useCloudPlans.tsx
+++ b/webapp/src/ee/billing/Subscriptions/cloud/useCloudPlans.tsx
@@ -53,6 +53,7 @@ export const useCloudPlans = () => {
     hasYearlyPrice: false,
     public: true,
     nonCommercial: false,
+    metricType: 'KEYS_SEATS',
   });
 
   const parentForPublic: PlanType[] = [];
diff --git a/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx b/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx
index 77fb901413..e4191a5c5c 100644
--- a/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx
+++ b/webapp/src/ee/billing/Subscriptions/selfHosted/PlansSelfHostedList.tsx
@@ -52,6 +52,7 @@ export const PlansSelfHostedList: React.FC<BillingPlansProps> = ({
     hasYearlyPrice: false,
     public: true,
     nonCommercial: false,
+    metricType: 'KEYS_SEATS',
   });
 
   const parentForPublic: PlanType[] = [];
diff --git a/webapp/src/ee/billing/Subscriptions/selfHosted/SelfHostedEeActiveSubscription.tsx b/webapp/src/ee/billing/Subscriptions/selfHosted/SelfHostedEeActiveSubscription.tsx
index 12e943b292..c45a49681b 100644
--- a/webapp/src/ee/billing/Subscriptions/selfHosted/SelfHostedEeActiveSubscription.tsx
+++ b/webapp/src/ee/billing/Subscriptions/selfHosted/SelfHostedEeActiveSubscription.tsx
@@ -74,6 +74,7 @@ export const SelfHostedEeActiveSubscription: FC<Props> = ({
           mb={1}
         >
           <IncludedUsage
+            metricType={'KEYS_SEATS'}
             includedUsage={plan.includedUsage}
             isLegacy={isPlanLegacy(plan)}
             highlightColor={highlightColor}
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
index a06c3095b1..76f57b7d7c 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanCreateView.tsx
@@ -48,6 +48,7 @@ export const AdministrationEePlanCreateView = () => {
                   content: {
                     'application/json': {
                       ...values,
+                      metricType: 'KEYS_SEATS',
                       stripeProductId: values.stripeProductId,
                       forOrganizationIds: values.public
                         ? []
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanEditView.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanEditView.tsx
index 7024df6371..032e4e5aa7 100644
--- a/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanEditView.tsx
+++ b/webapp/src/ee/billing/administration/subscriptionPlans/AdministrationEePlanEditView.tsx
@@ -84,6 +84,7 @@ export const AdministrationEePlanEditView = () => {
                   content: {
                     'application/json': {
                       ...values,
+                      metricType: 'KEYS_SEATS',
                       stripeProductId: values.stripeProductId!,
                       forOrganizationIds: values.public
                         ? []
diff --git a/webapp/src/ee/billing/component/BillingProgress.tsx b/webapp/src/ee/billing/component/BillingProgress.tsx
index 7bc43aa035..1d6c8a3b9f 100644
--- a/webapp/src/ee/billing/component/BillingProgress.tsx
+++ b/webapp/src/ee/billing/component/BillingProgress.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { T } from '@tolgee/react';
 
 import { BILLING_CRITICAL_FRACTION } from './constants';
+import { ProgressData, ProgressItem } from './getProgressData';
 
 const DOT_SIZE = 8;
 
@@ -69,40 +70,50 @@ type StatItem = {
 };
 
 type Props = BoxProps & {
-  value: number;
-  maxValue?: number;
+  progressItem: ProgressItem;
   height?: number;
-  canGoOver?: boolean;
+  isPayAsYouGo?: boolean;
   showLabels?: boolean;
 };
 
 export const BillingProgress: React.FC<Props> = ({
-  value,
-  maxValue = 100,
+  progressItem,
   height = 6,
-  canGoOver,
+  isPayAsYouGo,
   showLabels,
   ...boxProps
 }) => {
-  const normalized = value > maxValue ? maxValue : value < 0 ? 0 : value;
+  const normalized =
+    progressItem.used > progressItem.included
+      ? progressItem.included
+      : progressItem.used < 0
+      ? 0
+      : progressItem.used;
   const critical =
-    normalized > BILLING_CRITICAL_FRACTION * maxValue && !canGoOver;
+    normalized > BILLING_CRITICAL_FRACTION * progressItem.included &&
+    !isPayAsYouGo;
   const theme = useTheme();
 
-  const extra = value > maxValue ? value - maxValue : 0;
+  const extra =
+    progressItem.used > progressItem.included
+      ? progressItem.used - progressItem.included
+      : 0;
 
-  const fullLength = value > maxValue ? value : maxValue;
+  const fullLength =
+    progressItem.used > progressItem.included
+      ? progressItem.used
+      : progressItem.included;
   const progressLength = (normalized / fullLength) * 100;
   const extraProgressLength = (extra / fullLength) * 100;
 
   const labels: StatItem[] = [];
 
-  if (maxValue - normalized) {
+  if (progressItem.included - normalized) {
     labels.push({
       label: (
         <T
           keyName="billing-progress-label-unused"
-          params={{ value: maxValue }}
+          params={{ value: progressItem.included }}
         />
       ),
       color: theme.palette.tokens._components.progressbar.background,
@@ -128,7 +139,7 @@ export const BillingProgress: React.FC<Props> = ({
       label: (
         <T keyName="billing-progress-label-over" params={{ value: extra }} />
       ),
-      color: canGoOver
+      color: isPayAsYouGo
         ? theme.palette.tokens._components.progressbar.pricing.over
         : theme.palette.tokens._components.progressbar.pricing.overForbidden,
     });
@@ -162,7 +173,7 @@ export const BillingProgress: React.FC<Props> = ({
         {Boolean(extra) && (
           <StyledExtra
             width={`${extraProgressLength}%`}
-            className={clsx({ canGoOver })}
+            className={clsx({ isPayAsYouGo: isPayAsYouGo })}
           />
         )}
       </StyledContainer>
diff --git a/webapp/src/ee/billing/component/Usage.tsx b/webapp/src/ee/billing/component/CriticalUsageCircle.tsx
similarity index 91%
rename from webapp/src/ee/billing/component/Usage.tsx
rename to webapp/src/ee/billing/component/CriticalUsageCircle.tsx
index a72b76a394..7177992370 100644
--- a/webapp/src/ee/billing/component/Usage.tsx
+++ b/webapp/src/ee/billing/component/CriticalUsageCircle.tsx
@@ -10,7 +10,7 @@ import {
   usePreferredOrganization,
 } from 'tg.globalContext/helpers';
 import { UsageDetailed } from './UsageDetailed';
-import { getProgressData } from './utils';
+import { getProgressData } from './getProgressData';
 
 export const USAGE_ELEMENT_ID = 'billing_organization_usage';
 
@@ -55,7 +55,7 @@ const StyledTitle = styled('div')`
   padding: 8px;
 `;
 
-export const Usage: FC = () => {
+export const CriticalUsageCircle: FC = () => {
   const { preferredOrganization } = usePreferredOrganization();
   const { planLimitErrors } = useOrganizationUsage();
 
@@ -80,7 +80,7 @@ export const Usage: FC = () => {
 
   const { usage } = useOrganizationUsage();
 
-  const progressData = usage && getProgressData(usage);
+  const progressData = usage && getProgressData({ usage });
 
   const showStats = planLimitErrors || progressData?.isCritical;
 
@@ -118,8 +118,8 @@ export const Usage: FC = () => {
         >
           <StyledContent className={clsx({ triggered: Boolean(trigger) })}>
             <CircularBillingProgress
-              canGoOver={progressData.isPayAsYouGo}
-              value={progressData.moreCriticalProgress}
+              canGoOver={usage.isPayAsYouGo}
+              value={progressData.mostCriticalProgress}
               maxValue={1}
             />
           </StyledContent>
diff --git a/webapp/src/ee/billing/component/IncludedItem.tsx b/webapp/src/ee/billing/component/IncludedItem.tsx
index b7d0da7e7f..1334b06263 100644
--- a/webapp/src/ee/billing/component/IncludedItem.tsx
+++ b/webapp/src/ee/billing/component/IncludedItem.tsx
@@ -2,7 +2,7 @@ import { Box, styled, SxProps } from '@mui/material';
 import { T } from '@tolgee/react';
 import { MtHint } from 'tg.component/billing/MtHint';
 import { StringSlotsHint } from './Hints';
-import { StringsHint } from 'tg.component/common/StringsHint';
+import { KeysHint, StringsHint } from 'tg.component/common/StringsHint';
 
 export const IncludedItemContainer = styled(Box)``;
 
@@ -67,7 +67,7 @@ export const IncludedStrings = ({
   );
 };
 
-export const IncludedCreadits = ({
+export const IncludedKeys = ({
   count,
   highlightColor,
   sx,
@@ -77,7 +77,37 @@ export const IncludedCreadits = ({
     <IncludedItemContainer {...{ sx, className }}>
       {count === -1 ? (
         <T
-          keyName="billing_subscription_included_credits_unlimited"
+          keyName="billing_subscription_included_keys_negotiable"
+          params={{
+            highlight: <StyledQuantity color={highlightColor} />,
+            hint: <KeysHint />,
+          }}
+        />
+      ) : (
+        <T
+          keyName="billing_subscription_included_keys"
+          params={{
+            highlight: <StyledQuantity color={highlightColor} />,
+            quantity: count,
+            hint: <KeysHint />,
+          }}
+        />
+      )}
+    </IncludedItemContainer>
+  );
+};
+
+export const IncludedCredits = ({
+  count,
+  highlightColor,
+  sx,
+  className,
+}: IncludedItemProps) => {
+  return (
+    <IncludedItemContainer {...{ sx, className }}>
+      {count === -1 ? (
+        <T
+          keyName="billing_subscription_included_credits_negotiable"
           params={{
             highlight: <StyledQuantity color={highlightColor} />,
             hint: <MtHint />,
@@ -107,7 +137,7 @@ export const IncludedSeats = ({
     <IncludedItemContainer {...{ sx, className }}>
       {count === -1 ? (
         <T
-          keyName="billing_subscription_included_seats_unlimited"
+          keyName="billing_subscription_included_seats_negotiable"
           params={{
             highlight: <StyledQuantity color={highlightColor} />,
             hint: <span />,
diff --git a/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx b/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
index f92dc1face..80d46a9812 100644
--- a/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
+++ b/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
@@ -1,7 +1,8 @@
 import { Box, SxProps, Theme } from '@mui/material';
 import { PlanType } from './types';
 import {
-  IncludedCreadits,
+  IncludedCredits,
+  IncludedKeys,
   IncludedSeats,
   IncludedStrings,
   IncludedStringSlots,
@@ -13,11 +14,13 @@ type Props = {
   highlightColor: string;
   sx?: SxProps<Theme>;
   className?: string;
+  metricType: PlanType['metricType'];
 };
 
 export const IncludedUsage = ({
   includedUsage,
   isLegacy,
+  metricType,
   highlightColor,
   sx,
   className,
@@ -36,13 +39,25 @@ export const IncludedUsage = ({
           highlightColor={highlightColor}
         />
       ) : (
-        <IncludedStrings
-          className="strings"
-          count={includedUsage?.translations ?? -1}
-          highlightColor={highlightColor}
-        />
+        <>
+          {metricType == 'STRINGS' && (
+            <IncludedStrings
+              className="strings"
+              count={includedUsage?.translations ?? -1}
+              highlightColor={highlightColor}
+            />
+          )}
+
+          {metricType == 'KEYS_SEATS' && (
+            <IncludedKeys
+              className="strings"
+              count={includedUsage?.keys ?? -1}
+              highlightColor={highlightColor}
+            />
+          )}
+        </>
       )}
-      <IncludedCreadits
+      <IncludedCredits
         className="mt-credits"
         count={includedUsage?.mtCredits ?? -1}
         highlightColor={highlightColor}
diff --git a/webapp/src/ee/billing/component/Plan/Plan.tsx b/webapp/src/ee/billing/component/Plan/Plan.tsx
index 2854591123..38c6ba4069 100644
--- a/webapp/src/ee/billing/component/Plan/Plan.tsx
+++ b/webapp/src/ee/billing/component/Plan/Plan.tsx
@@ -100,6 +100,7 @@ export const Plan: FC<Props> = ({
               <ShowAllFeaturesLink sx={{ alignSelf: 'center' }} />
             )}
             <IncludedUsage
+              metricType={plan.metricType}
               includedUsage={plan.includedUsage}
               isLegacy={isPlanLegacy(plan)}
               highlightColor={highlightColor}
diff --git a/webapp/src/ee/billing/component/Plan/FreePlan.tsx b/webapp/src/ee/billing/component/Plan/freePlan/FreePlan.tsx
similarity index 62%
rename from webapp/src/ee/billing/component/Plan/FreePlan.tsx
rename to webapp/src/ee/billing/component/Plan/freePlan/FreePlan.tsx
index 51fedcee9c..125a15d337 100644
--- a/webapp/src/ee/billing/component/Plan/FreePlan.tsx
+++ b/webapp/src/ee/billing/component/Plan/freePlan/FreePlan.tsx
@@ -2,51 +2,44 @@ import clsx from 'clsx';
 import { Box, styled, useTheme } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 
-import { PlanContainer, PlanContent } from './PlanStyles';
-import { PlanActiveBanner } from './PlanActiveBanner';
-import { PlanTitle } from './PlanTitle';
-import { PlanType } from './types';
-import { PricePrimary } from '../Price/PricePrimary';
-import { PlanFeature } from '../PlanFeature';
+import { PlanContainer, PlanContent } from '../PlanStyles';
+import { PlanActiveBanner } from '../PlanActiveBanner';
+import { PlanTitle } from '../PlanTitle';
+import { PlanType } from '../types';
+import { PricePrimary } from '../../Price/PricePrimary';
+import { PlanFeature } from '../../PlanFeature';
 import {
-  IncludedCreadits,
+  IncludedCredits,
   IncludedSeats,
   IncludedStrings,
-} from '../IncludedItem';
+} from '../../IncludedItem';
+import { FreePlanLimits } from './FreePlanLimits';
 
 const StyledPlanContent = styled(PlanContent)`
   display: grid;
   grid-template-areas:
     'title   features   price'
-    'strings mt-credits seats';
+    'metric1 metric2  metric3';
   grid-template-rows: unset;
   align-items: center;
 
   .title {
     grid-area: title;
   }
+
   .features {
     grid-area: features;
   }
+
   .price {
     grid-area: price;
   }
-  .strings {
-    grid-area: strings;
-  }
-  .mt-credits {
-    grid-area: mt-credits;
-  }
-  .seats {
-    grid-area: seats;
-  }
 
-  .features,
-  .mt-credits {
+  .features {
     justify-self: center;
   }
-  .price,
-  .seats {
+
+  .price {
     justify-self: end;
   }
 
@@ -67,6 +60,7 @@ const StyledPlanContent = styled(PlanContent)`
     .features {
       justify-self: start;
     }
+
     .price {
       justify-self: end;
     }
@@ -108,27 +102,7 @@ export const FreePlan = ({ plan, active, ended }: Props) => {
           </Box>
         )}
 
-        {plan.includedUsage && (
-          <>
-            <IncludedStrings
-              className="strings"
-              count={plan.includedUsage.translations}
-              highlightColor={highlightColor}
-            />
-
-            <IncludedCreadits
-              className="mt-credits"
-              count={plan.includedUsage.mtCredits}
-              highlightColor={highlightColor}
-            />
-
-            <IncludedSeats
-              className="seats"
-              count={plan.includedUsage.seats}
-              highlightColor={highlightColor}
-            />
-          </>
-        )}
+        <FreePlanLimits plan={plan} />
       </StyledPlanContent>
     </PlanContainer>
   );
diff --git a/webapp/src/ee/billing/component/Plan/freePlan/FreePlanLimits.tsx b/webapp/src/ee/billing/component/Plan/freePlan/FreePlanLimits.tsx
new file mode 100644
index 0000000000..ff56496984
--- /dev/null
+++ b/webapp/src/ee/billing/component/Plan/freePlan/FreePlanLimits.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FC } from 'react';
+import {
+  IncludedCredits,
+  IncludedKeys,
+  IncludedSeats,
+  IncludedStrings,
+} from '../../IncludedItem';
+import { PlanType } from '../types';
+import { useTheme } from '@mui/material';
+
+export interface FreePlanLimitsProps {
+  plan: PlanType;
+}
+
+export const FreePlanLimits: FC<FreePlanLimitsProps> = ({ plan }) => {
+  const theme = useTheme();
+  const highlightColor = theme.palette.primary.main;
+
+  return (
+    <>
+      {plan.includedUsage && (
+        <>
+          {plan.metricType == 'STRINGS' && (
+            <IncludedStrings
+              sx={{ gridArea: 'metric1' }}
+              count={plan.includedUsage.translations}
+              highlightColor={highlightColor}
+            />
+          )}
+
+          {plan.metricType == 'KEYS_SEATS' && (
+            <IncludedKeys
+              sx={{ gridArea: 'metric1' }}
+              count={plan.includedUsage.keys}
+              highlightColor={highlightColor}
+            />
+          )}
+
+          <IncludedSeats
+            sx={{ gridArea: 'metric2', justifySelf: 'center' }}
+            count={plan.includedUsage.seats}
+            highlightColor={highlightColor}
+          />
+
+          <IncludedCredits
+            sx={{ gridArea: 'metric3', justifySelf: 'end' }}
+            count={plan.includedUsage.mtCredits}
+            highlightColor={highlightColor}
+          />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/webapp/src/ee/billing/component/Plan/plansTools.ts b/webapp/src/ee/billing/component/Plan/plansTools.ts
index 05e283b57f..3bea11a41e 100644
--- a/webapp/src/ee/billing/component/Plan/plansTools.ts
+++ b/webapp/src/ee/billing/component/Plan/plansTools.ts
@@ -29,7 +29,9 @@ export function excludePreviousPlanFeatures(
   }
 }
 
-export function isPlanLegacy(plan: PlanType) {
+export function isPlanLegacy(plan: {
+  includedUsage?: PlanType['includedUsage'];
+}) {
   const slots = plan.includedUsage?.translationSlots;
   return slots !== undefined && slots !== -1;
 }
diff --git a/webapp/src/ee/billing/component/Price/PayAsYouGoPrices.tsx b/webapp/src/ee/billing/component/Price/PayAsYouGoPrices.tsx
index 8a2dafe820..8392839790 100644
--- a/webapp/src/ee/billing/component/Price/PayAsYouGoPrices.tsx
+++ b/webapp/src/ee/billing/component/Price/PayAsYouGoPrices.tsx
@@ -24,7 +24,12 @@ export const PayAsYouGoPrices = ({
   className,
   hideTitle,
 }: Props) => {
-  const { perSeat, perThousandMtCredits, perThousandTranslations } = prices;
+  const {
+    perSeat,
+    perThousandMtCredits,
+    perThousandTranslations,
+    perThousandKeys,
+  } = prices;
   const { t } = useTranslate();
   const formatPrice = useMoneyFormatter();
 
@@ -42,14 +47,6 @@ export const PayAsYouGoPrices = ({
         </StyledTitle>
       )}
 
-      {Boolean(perSeat) && (
-        <PayAsYouGoRow
-          data-cy="billing-plan-price-extra-seat"
-          firstPart={t('billing-plan-price-extra-seat')}
-          secondPart={t('billing-plan-price-per-mo', { value: perSeat })}
-        />
-      )}
-
       {Boolean(perThousandTranslations) && (
         <PayAsYouGoRow
           data-cy="billing-plan-price-extra-thousand-strings"
@@ -62,6 +59,24 @@ export const PayAsYouGoPrices = ({
         />
       )}
 
+      {Boolean(perThousandKeys) && (
+        <PayAsYouGoRow
+          data-cy="billing-plan-price-extra-thousand-keys"
+          firstPart={t('billing-plan-price-extra-thousand-keys', { num: 1000 })}
+          secondPart={t('billing-plan-price-per-mo', {
+            value: perThousandKeys,
+          })}
+        />
+      )}
+
+      {Boolean(perSeat) && (
+        <PayAsYouGoRow
+          data-cy="billing-plan-price-extra-seat"
+          firstPart={t('billing-plan-price-extra-seat')}
+          secondPart={t('billing-plan-price-per-mo', { value: perSeat })}
+        />
+      )}
+
       {Boolean(perThousandMtCredits) && (
         <PayAsYouGoRow
           data-cy="billing-plan-price-extra-thousand-mt-credits"
diff --git a/webapp/src/ee/billing/component/UsageDetailed.tsx b/webapp/src/ee/billing/component/UsageDetailed.tsx
index 45497221bc..ba4a142ff5 100644
--- a/webapp/src/ee/billing/component/UsageDetailed.tsx
+++ b/webapp/src/ee/billing/component/UsageDetailed.tsx
@@ -2,62 +2,54 @@ import { Box, Typography } from '@mui/material';
 import { T } from '@tolgee/react';
 
 import { BillingProgress } from './BillingProgress';
-import { ProgressData } from './utils';
+import { ProgressData } from './getProgressData';
 
-type Props = ProgressData;
+export const UsageDetailed: React.FC<ProgressData> = (props) => {
+  const items = [
+    {
+      getLabel: (params: { limit: number; used: number }) => (
+        <T keyName="dashboard_billing_used_translations_v2" params={params} />
+      ),
+      progress: props.translationSlotsProgress,
+    },
+    {
+      getLabel: (params: { limit: number; used: number }) => (
+        <T keyName="dashboard_billing_used_strings_v2" params={params} />
+      ),
+      progress: props.stringsProgress,
+    },
+    {
+      getLabel: (params: { limit: number; used: number }) => (
+        <T keyName="dashboard_billing_used_keys" params={params} />
+      ),
+      progress: props.keysProgress,
+    },
+    {
+      getLabel: (params: { limit: number; used: number }) => (
+        <T keyName="dashboard_billing_used_credit" params={params} />
+      ),
+      progress: props.creditProgress,
+    },
+  ];
 
-export const UsageDetailed: React.FC<Props> = ({
-  translationsUsed,
-  translationsMax,
-  creditUsed,
-  creditMax,
-  isPayAsYouGo,
-  usesSlots,
-}) => {
   return (
     <Box display="grid" gap={1}>
-      <Box>
-        <Typography variant="caption">
-          {usesSlots ? (
-            <T
-              keyName="dashboard_billing_used_translations"
-              params={{
-                available: Math.round(translationsUsed),
-                max: Math.round(translationsMax),
-              }}
+      {items
+        .filter((item) => item.progress.isInUse)
+        .map((item, index) => (
+          <Box key={index}>
+            <Typography variant="caption">
+              {item.getLabel({
+                limit: Math.round(item.progress.included),
+                used: Math.round(item.progress.used),
+              })}
+            </Typography>
+            <BillingProgress
+              progressItem={item.progress}
+              isPayAsYouGo={item.progress.isInUse}
             />
-          ) : (
-            <T
-              keyName="dashboard_billing_used_strings"
-              params={{
-                available: Math.round(translationsUsed),
-                max: Math.round(translationsMax),
-              }}
-            />
-          )}
-        </Typography>
-        <BillingProgress
-          value={translationsUsed}
-          maxValue={translationsMax}
-          canGoOver={isPayAsYouGo}
-        />
-      </Box>
-      <Box>
-        <Typography variant="caption">
-          <T
-            keyName="dashboard_billing_used_credit"
-            params={{
-              available: Math.round(creditUsed),
-              max: Math.round(creditMax),
-            }}
-          />
-        </Typography>
-        <BillingProgress
-          value={creditUsed}
-          maxValue={creditMax}
-          canGoOver={isPayAsYouGo}
-        />
-      </Box>
+          </Box>
+        ))}
     </Box>
   );
 };
diff --git a/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx b/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
index 33c91f1e86..b86b9f13a1 100644
--- a/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
+++ b/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
@@ -10,9 +10,9 @@ import {
   usePreferredOrganization,
   useUser,
 } from 'tg.globalContext/helpers';
-import { getProgressData } from '../utils';
 import { CircularBillingProgress } from '../CircularBillingProgress';
 import { BillingMenuItemsProps } from '../../../../eeSetup/EeModuleType';
+import { getProgressData } from '../getProgressData';
 
 export const BillingMenuItem: FC<BillingMenuItemsProps> = ({ onClose }) => {
   const { t } = useTranslate();
@@ -20,7 +20,7 @@ export const BillingMenuItem: FC<BillingMenuItemsProps> = ({ onClose }) => {
   const { preferredOrganization } = usePreferredOrganization();
 
   const { usage } = useOrganizationUsage();
-  const progressData = usage && getProgressData(usage);
+  const progressData = usage && getProgressData({ usage });
   const config = useConfig();
   const user = useUser()!;
 
@@ -53,9 +53,9 @@ export const BillingMenuItem: FC<BillingMenuItemsProps> = ({ onClose }) => {
         {progressData && (
           <CircularBillingProgress
             size={22}
-            value={progressData.moreCriticalProgress}
+            value={progressData.mostCriticalProgress}
             maxValue={1}
-            canGoOver={progressData.isPayAsYouGo}
+            canGoOver={usage?.isPayAsYouGo}
           />
         )}
       </Box>
diff --git a/webapp/src/ee/billing/component/getProgressData.ts b/webapp/src/ee/billing/component/getProgressData.ts
new file mode 100644
index 0000000000..fc0d2e687e
--- /dev/null
+++ b/webapp/src/ee/billing/component/getProgressData.ts
@@ -0,0 +1,71 @@
+import { components } from 'tg.service/apiSchema.generated';
+import { BILLING_CRITICAL_FRACTION } from './constants';
+
+type UsageModel = components['schemas']['PublicUsageModel'];
+
+export const getProgressData = ({ usage }: { usage: UsageModel }) => {
+  const usesSlots = usage.translationSlotsLimit !== -1;
+
+  console.log(usage);
+
+  const translationSlotsProgress = new ProgressItem(
+    usage.includedTranslationSlots,
+    usage.currentTranslationSlots
+  );
+
+  const stringsProgress = new ProgressItem(
+    usage.includedTranslations,
+    usage.currentTranslations
+  );
+
+  const keysProgress = new ProgressItem(usage.includedKeys, usage.currentKeys);
+
+  const seatsProgress = new ProgressItem(
+    usage.includedSeats,
+    usage.currentSeats
+  );
+
+  const creditProgress = new ProgressItem(
+    usage.includedMtCredits,
+    usage.usedMtCredits
+  );
+
+  const mostCriticalProgress = Math.max(
+    translationSlotsProgress.progress,
+    stringsProgress.progress,
+    keysProgress.progress,
+    seatsProgress.progress
+  );
+
+  const isCritical =
+    !usage.isPayAsYouGo &&
+    Number(mostCriticalProgress) > BILLING_CRITICAL_FRACTION;
+
+  return {
+    usesSlots,
+    translationSlotsProgress,
+    stringsProgress,
+    keysProgress,
+    seatsProgress,
+    creditProgress,
+    mostCriticalProgress,
+    isCritical,
+  };
+};
+
+export type ProgressData = ReturnType<typeof getProgressData>;
+
+export class ProgressItem {
+  isInUse: boolean;
+
+  constructor(public included: number, public used: number) {
+    this.isInUse = included > 0;
+  }
+
+  get progress() {
+    if (!this.isInUse) {
+      return 0;
+    }
+    return this.used / this.included;
+  }
+}
diff --git a/webapp/src/ee/billing/component/topBar/TrialChipTooltip.tsx b/webapp/src/ee/billing/component/topBar/TrialChipTooltip.tsx
index 77ce61e5b6..4310ab8fe2 100644
--- a/webapp/src/ee/billing/component/topBar/TrialChipTooltip.tsx
+++ b/webapp/src/ee/billing/component/topBar/TrialChipTooltip.tsx
@@ -132,6 +132,7 @@ export const TrialChipTooltip: FC<TrialChipTooltipProps> = ({
                   })}
                 />
                 <IncludedUsage
+                  metricType={plan.metricType}
                   includedUsage={plan.includedUsage}
                   isLegacy={isPlanLegacy(plan)}
                   highlightColor={highlightColor}
diff --git a/webapp/src/ee/billing/component/utils.ts b/webapp/src/ee/billing/component/utils.ts
deleted file mode 100644
index b603d44f04..0000000000
--- a/webapp/src/ee/billing/component/utils.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { components } from 'tg.service/apiSchema.generated';
-import { BILLING_CRITICAL_FRACTION } from './constants';
-
-type UsageModel = components['schemas']['PublicUsageModel'];
-
-export type ProgressData = {
-  usesSlots: boolean;
-  translationsUsed: number;
-  translationsMax: number;
-  translationsProgress: number;
-  isPayAsYouGo: boolean;
-  creditUsed: number;
-  creditMax: number;
-  creditProgress: number;
-  moreCriticalProgress: number;
-  isCritical: boolean;
-};
-
-export const getProgressData = (usage: UsageModel): ProgressData => {
-  const usesSlots = usage.translationSlotsLimit !== -1;
-  const translationsUsed = usesSlots
-    ? usage.currentTranslationSlots
-    : usage.currentTranslations;
-
-  const translationsMax = usesSlots
-    ? usage.includedTranslationSlots
-    : usage.includedTranslations;
-
-  const translationsLimit = usesSlots
-    ? usage.translationSlotsLimit
-    : usage.translationsLimit;
-  const translationsProgress = translationsUsed / translationsMax;
-  const isPayAsYouGo = translationsLimit > translationsMax;
-
-  const creditMax = usage.includedMtCredits;
-  const creditUsed =
-    creditMax - usage.creditBalance + usage.currentPayAsYouGoMtCredits;
-
-  const creditProgress = creditUsed / creditMax;
-
-  const creditProgressWithExtraUnnormalized =
-    (creditUsed - usage.extraCreditBalance) / creditMax;
-
-  const creditProgressExtra =
-    creditProgressWithExtraUnnormalized <= 0
-      ? 0
-      : creditProgressWithExtraUnnormalized;
-
-  const moreCriticalProgress = Math.max(
-    translationsProgress,
-    creditProgressExtra
-  );
-
-  const isCritical =
-    !isPayAsYouGo && Number(moreCriticalProgress) > BILLING_CRITICAL_FRACTION;
-
-  return {
-    usesSlots,
-    translationsUsed,
-    translationsMax,
-    translationsProgress,
-    isPayAsYouGo,
-    creditUsed,
-    creditMax,
-    creditProgress,
-    moreCriticalProgress,
-    isCritical,
-  };
-};
diff --git a/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx b/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
index f716a6fc9a..3ea27f1bd9 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
@@ -13,12 +13,16 @@ import {
 } from '../BillingSection';
 import { PlanMetric } from './PlanMetric';
 import { MtHint } from 'tg.component/billing/MtHint';
-import { StringsHint } from 'tg.component/common/StringsHint';
-import { getProgressData } from '../component/utils';
+import {
+  KeysHint,
+  SeatsHint,
+  StringsHint,
+} from 'tg.component/common/StringsHint';
 import { BillingPeriodInfo } from './BillingPeriodInfo';
 import { CloudEstimatedCosts } from './CloudEstimatedCosts';
 import { SubscriptionsTrialAlert } from './subscriptionsTrialAlert/SubscriptionsTrialAlert';
 import { TrialInfo } from './TrialInfo';
+import { getProgressData } from '../component/getProgressData';
 
 type CloudSubscriptionModel =
   billingComponents['schemas']['CloudSubscriptionModel'];
@@ -44,16 +48,13 @@ export const CurrentCloudSubscriptionInfo: FC<Props> = ({
   const { t } = useTranslate();
   const formatDate = useDateFormatter();
 
-  const progressData = getProgressData(usage);
+  const isPayAsYouGo =
+    activeSubscription.plan.type === 'PAY_AS_YOU_GO' &&
+    activeSubscription.status !== 'TRIALING';
 
-  const {
-    translationsUsed,
-    translationsMax,
-    creditMax,
-    creditUsed,
-    isPayAsYouGo,
-    usesSlots,
-  } = progressData;
+  const progressData = getProgressData({
+    usage: usage,
+  });
 
   const planName =
     activeSubscription.status === 'TRIALING' ? (
@@ -98,23 +99,60 @@ export const CurrentCloudSubscriptionInfo: FC<Props> = ({
               )}
           </Box>
 
-          <PlanMetric
-            name={
-              usesSlots ? (
-                t('billing_actual_used_translations')
-              ) : (
+          {activeSubscription.plan.type === 'SLOTS_FIXED' && (
+            <PlanMetric
+              name={t('billing_actual_used_translations')}
+              progress={progressData.translationSlotsProgress}
+              periodEnd={activeSubscription.currentPeriodEnd}
+              isPayAsYouGo={isPayAsYouGo}
+              data-cy="billing-actual-used-strings"
+            />
+          )}
+
+          {activeSubscription.plan.metricType === 'STRINGS' && (
+            <PlanMetric
+              name={
                 <T
                   keyName="billing_actual_used_strings_with_hint"
                   params={{ hint: <StringsHint /> }}
                 />
-              )
-            }
-            currentQuantity={translationsUsed}
-            totalQuantity={translationsMax}
-            periodEnd={activeSubscription.currentPeriodEnd}
-            isPayAsYouGo={isPayAsYouGo}
-            data-cy="billing-actual-used-strings"
-          />
+              }
+              progress={progressData.stringsProgress}
+              periodEnd={activeSubscription.currentPeriodEnd}
+              isPayAsYouGo={isPayAsYouGo}
+              data-cy="billing-actual-used-strings"
+            />
+          )}
+
+          {activeSubscription.plan.metricType === 'KEYS_SEATS' && (
+            <>
+              <PlanMetric
+                name={
+                  <T
+                    keyName="billing_actual_used_keys_with_hint"
+                    params={{ hint: <KeysHint /> }}
+                  />
+                }
+                progress={progressData.keysProgress}
+                periodEnd={activeSubscription.currentPeriodEnd}
+                isPayAsYouGo={isPayAsYouGo}
+                data-cy="billing-actual-used-strings"
+              />
+              <PlanMetric
+                name={
+                  <T
+                    keyName="billing_actual_used_seats_with_hint"
+                    params={{ hint: <SeatsHint /> }}
+                  />
+                }
+                progress={progressData.seatsProgress}
+                periodEnd={activeSubscription.currentPeriodEnd}
+                isPayAsYouGo={isPayAsYouGo}
+                data-cy="billing-actual-used-strings"
+              />
+            </>
+          )}
+
           <PlanMetric
             name={
               <T
@@ -122,8 +160,7 @@ export const CurrentCloudSubscriptionInfo: FC<Props> = ({
                 params={{ hint: <MtHint /> }}
               />
             }
-            currentQuantity={creditUsed}
-            totalQuantity={creditMax || 0}
+            progress={progressData.creditProgress}
             periodEnd={activeSubscription.currentPeriodEnd}
             isPayAsYouGo={isPayAsYouGo}
             data-cy="billing-actual-used-monthly-credits"
diff --git a/webapp/src/ee/billing/currentCloudSubscription/PlanMetric.tsx b/webapp/src/ee/billing/currentCloudSubscription/PlanMetric.tsx
index c890f92081..e354199d64 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/PlanMetric.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/PlanMetric.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useNumberFormatter } from 'tg.hooks/useLocale';
 import { BillingProgress } from '../component/BillingProgress';
 import { BILLING_CRITICAL_FRACTION } from '../component/constants';
+import { ProgressItem } from '../component/getProgressData';
 
 export const StyledMetrics = styled('div')`
   display: grid;
@@ -36,8 +37,7 @@ const StyledValue = styled('span')`
 
 type Props = {
   name: string | React.ReactNode;
-  currentQuantity: number;
-  totalQuantity?: number;
+  progress: ProgressItem;
   periodEnd?: number;
   isPayAsYouGo?: boolean;
   'data-cy'?: string;
@@ -45,19 +45,17 @@ type Props = {
 
 export const PlanMetric: React.FC<Props> = ({
   name,
-  currentQuantity,
-  totalQuantity,
+  progress,
   isPayAsYouGo,
   ...props
 }) => {
   const formatNumber = useNumberFormatter();
-  const showProgress = totalQuantity !== undefined;
-  const progress = currentQuantity / totalQuantity!;
+  const showProgress = progress.included !== undefined;
   const valueClass = isPayAsYouGo
-    ? totalQuantity && currentQuantity > totalQuantity
+    ? progress?.included && progress.used > progress.included
       ? 'over'
       : 'sufficient'
-    : progress > BILLING_CRITICAL_FRACTION
+    : progress?.progress ?? 0 > BILLING_CRITICAL_FRACTION
     ? 'low'
     : 'sufficient';
 
@@ -66,17 +64,18 @@ export const PlanMetric: React.FC<Props> = ({
       <StyledName>{name}</StyledName>
       <Box data-cy={props['data-cy']}>
         <StyledValue className={clsx({ [valueClass]: showProgress })}>
-          {formatNumber(currentQuantity)}
+          {formatNumber(progress?.used ?? 0)}
         </StyledValue>
-        <span>{showProgress ? ` / ${formatNumber(totalQuantity!)}` : ''}</span>
+        <span>
+          {showProgress ? ` / ${formatNumber(progress.included)}` : ''}
+        </span>
       </Box>
       {showProgress && (
         <StyledProgress>
           <BillingProgress
-            value={currentQuantity}
-            maxValue={totalQuantity}
+            progressItem={progress}
             height={8}
-            canGoOver={isPayAsYouGo}
+            isPayAsYouGo={isPayAsYouGo}
             showLabels
           />
         </StyledProgress>
diff --git a/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/ReachingTheLimitMessage.tsx b/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/ReachingTheLimitMessage.tsx
index e6def82151..f8184d41e9 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/ReachingTheLimitMessage.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/ReachingTheLimitMessage.tsx
@@ -10,10 +10,20 @@ export const ReachingTheLimitMessage: FC<SubscriptionsTrialAlertProps> = (
     return null;
   }
 
-  const runningOutOfMtCredits = props.usage.creditProgress > 0.9;
-  const runningOutOfTranslations = props.usage.translationsProgress > 0.9;
+  const runningOutOfMtCredits = props.usage.creditProgress.progress > 0.9;
+  const runningOutOfTranslations =
+    props.usage.translationSlotsProgress.progress > 0.9;
+  const runningOutOfKeys = props.usage.keysProgress.progress > 0.9;
+  const runningOutOfSeats = props.usage.seatsProgress.progress > 0.9;
+  const runningOutOfStrings = props.usage.stringsProgress.progress > 0.9;
 
-  if (!runningOutOfMtCredits && !runningOutOfTranslations) {
+  if (
+    !runningOutOfMtCredits &&
+    !runningOutOfTranslations &&
+    !runningOutOfKeys &&
+    !runningOutOfSeats &&
+    !runningOutOfStrings
+  ) {
     return null;
   }
 
diff --git a/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/SubscriptionsTrialAlert.tsx b/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/SubscriptionsTrialAlert.tsx
index 9b2af77e5e..c1577fd2e7 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/SubscriptionsTrialAlert.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/subscriptionsTrialAlert/SubscriptionsTrialAlert.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { Alert } from '@mui/material';
 import { components } from 'tg.service/billingApiSchema.generated';
-import { ProgressData } from '../../component/utils';
 import { TrialAlertContent } from './TrialAlertContent';
+import { ProgressData } from '../../component/getProgressData';
 
 export type SubscriptionsTrialAlertProps = {
   subscription: components['schemas']['CloudSubscriptionModel'];
diff --git a/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx b/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
index 8d0c5d7071..fc69c7d87c 100644
--- a/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
+++ b/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
@@ -15,9 +15,9 @@ import {
   useOrganizationUsage,
   usePreferredOrganization,
 } from 'tg.globalContext/helpers';
-import { USAGE_ELEMENT_ID } from '../component/Usage';
+import { USAGE_ELEMENT_ID } from '../component/CriticalUsageCircle';
 import { UsageDetailed } from '../component/UsageDetailed';
-import { getProgressData } from '../component/utils';
+import { getProgressData } from '../component/getProgressData';
 
 const StyledDialogContent = styled(DialogContent)`
   display: grid;
@@ -46,7 +46,7 @@ export const PlanLimitPopover: React.FC<Props> = ({ open, onClose }) => {
   };
 
   const anchorEl = document.getElementById(USAGE_ELEMENT_ID);
-  const progressData = usage && getProgressData(usage);
+  const progressData = usage && getProgressData({ usage });
 
   return progressData ? (
     <Popover
diff --git a/webapp/src/ee/billing/limitPopover/SpendingLimitExceeded.tsx b/webapp/src/ee/billing/limitPopover/SpendingLimitExceeded.tsx
index a40223d9f8..00102376d5 100644
--- a/webapp/src/ee/billing/limitPopover/SpendingLimitExceeded.tsx
+++ b/webapp/src/ee/billing/limitPopover/SpendingLimitExceeded.tsx
@@ -10,9 +10,9 @@ import {
 import { T } from '@tolgee/react';
 
 import { useOrganizationUsage } from 'tg.globalContext/helpers';
-import { USAGE_ELEMENT_ID } from '../component/Usage';
-import { getProgressData } from '../component/utils';
+import { USAGE_ELEMENT_ID } from '../component/CriticalUsageCircle';
 import { SpendingLimitExceededDescription } from 'tg.component/security/SignUp/SpendingLimitExceededDesciption';
+import { getProgressData } from '../component/getProgressData';
 
 const StyledDialogContent = styled(DialogContent)`
   display: grid;
@@ -32,7 +32,7 @@ export const SpendingLimitExceededPopover: React.FC<Props> = ({
   const { usage } = useOrganizationUsage();
 
   const anchorEl = document.getElementById(USAGE_ELEMENT_ID);
-  const progressData = usage && getProgressData(usage);
+  const progressData = usage && getProgressData({ usage });
 
   return progressData ? (
     <Popover
diff --git a/webapp/src/eeSetup/eeModule.ee.tsx b/webapp/src/eeSetup/eeModule.ee.tsx
index bbbaf59f80..bef20d6832 100644
--- a/webapp/src/eeSetup/eeModule.ee.tsx
+++ b/webapp/src/eeSetup/eeModule.ee.tsx
@@ -53,7 +53,7 @@ import { AdministrationSubscriptionsView } from '../ee/billing/administration/su
 
 export { TaskReference } from '../ee/task/components/TaskReference';
 export { GlobalLimitPopover } from '../ee/billing/limitPopover/GlobalLimitPopover';
-export { Usage } from '../ee/billing/component/Usage';
+export { CriticalUsageCircle } from '../ee/billing/component/CriticalUsageCircle';
 export { TranslationTaskIndicator } from '../ee/task/components/TranslationTaskIndicator';
 export { PermissionsAdvancedEe } from '../ee/PermissionsAdvanced/PermissionsAdvancedEe';
 export { TranslationsTaskDetail } from '../ee/task/components/TranslationsTaskDetail';
diff --git a/webapp/src/service/apiSchema.generated.ts b/webapp/src/service/apiSchema.generated.ts
index 26bbf43abf..02805dddf4 100644
--- a/webapp/src/service/apiSchema.generated.ts
+++ b/webapp/src/service/apiSchema.generated.ts
@@ -2022,7 +2022,9 @@ export interface components {
         | "cannot_cancel_trial"
         | "cannot_update_without_modification"
         | "current_subscription_is_not_trialing"
-        | "sorting_and_paging_is_not_supported_when_using_cursor";
+        | "sorting_and_paging_is_not_supported_when_using_cursor"
+        | "strings_metric_are_not_supported"
+        | "keys_seats_metric_are_not_supported_for_slots_fixed_type";
       params?: { [key: string]: unknown }[];
     };
     ExistenceEntityDescription: {
@@ -3808,11 +3810,21 @@ export interface components {
        * @description Date when credits were refilled. (In epoch format)
        */
       creditBalanceRefilledAt: number;
+      /**
+       * Format: int64
+       * @description How many keys are currently stored by organization
+       */
+      currentKeys: number;
       /**
        * Format: int64
        * @description Currently used credits over credits included in plan and extra credits
        */
       currentPayAsYouGoMtCredits: number;
+      /**
+       * Format: int64
+       * @description How seats are currently used by organization
+       */
+      currentSeats: number;
       /**
        * Format: int64
        * @description How many translations slots are currently used by organization
@@ -3831,11 +3843,21 @@ export interface components {
        * This option is not available anymore and this field is kept only for backward compatibility purposes and is always 0.
        */
       extraCreditBalance: number;
+      /**
+       * Format: int64
+       * @description How many keys are included in current subscription plan. How many keys can organization use without additional costs.
+       */
+      includedKeys: number;
       /**
        * Format: int64
        * @description How many credits are included in your current plan
        */
       includedMtCredits: number;
+      /**
+       * Format: int64
+       * @description How many seats are included in current subscription plan. How many seats can organization use without additional costs.
+       */
+      includedSeats: number;
       /**
        * Format: int64
        * @description How many translation slots are included in current subscription plan. How many translation slots can organization use without additional costs
@@ -3846,8 +3868,20 @@ export interface components {
        * @description How many translations are included in current subscription plan. How many translations can organization use without additional costs
        */
       includedTranslations: number;
+      /** @description Whether the current plan is pay-as-you-go of fixed. For pay-as-you-go plans, the spending limit is the top limit. */
+      isPayAsYouGo: boolean;
+      /**
+       * Format: int64
+       * @description How many keys can be stored until reaching the limit. (For pay us you go, the top limit is the spending limit)
+       */
+      keysLimit: number;
       /** Format: int64 */
       organizationId: number;
+      /**
+       * Format: int64
+       * @description How many seats can be stored until reaching the limit. (For pay us you go, the top limit is the spending limit)
+       */
+      seatsLimit: number;
       /**
        * Format: int64
        * @description How many translations can be stored within your organization
@@ -3858,6 +3892,11 @@ export interface components {
        * @description How many translations can be stored until reaching the limit. (For pay us you go, the top limit is the spending limit)
        */
       translationsLimit: number;
+      /**
+       * Format: int64
+       * @description Currently used credits including credits used over the limit
+       */
+      usedMtCredits: number;
     };
     QuickStartModel: {
       completedSteps: string[];
@@ -4484,7 +4523,9 @@ export interface components {
         | "cannot_cancel_trial"
         | "cannot_update_without_modification"
         | "current_subscription_is_not_trialing"
-        | "sorting_and_paging_is_not_supported_when_using_cursor";
+        | "sorting_and_paging_is_not_supported_when_using_cursor"
+        | "strings_metric_are_not_supported"
+        | "keys_seats_metric_are_not_supported_for_slots_fixed_type";
       params?: { [key: string]: unknown }[];
       success: boolean;
     };
diff --git a/webapp/src/service/billingApiSchema.generated.ts b/webapp/src/service/billingApiSchema.generated.ts
index e589cb8282..dbf390f2c2 100644
--- a/webapp/src/service/billingApiSchema.generated.ts
+++ b/webapp/src/service/billingApiSchema.generated.ts
@@ -323,6 +323,7 @@ export interface components {
       /** Format: int64 */
       id: number;
       includedUsage: components["schemas"]["PlanIncludedUsageModel"];
+      metricType: "KEYS_SEATS" | "STRINGS";
       name: string;
       nonCommercial: boolean;
       prices: components["schemas"]["PlanPricesModel"];
@@ -456,7 +457,7 @@ export interface components {
        * @example 1
        */
       languageId: number;
-      name: string;
+      name?: string;
       type: "TRANSLATE" | "REVIEW";
     };
     CreateTranslationAgencyRequest: {
diff --git a/webapp/src/views/organizations/components/BaseOrganizationSettingsView.tsx b/webapp/src/views/organizations/components/BaseOrganizationSettingsView.tsx
index e28355f9cc..8a6d44b709 100644
--- a/webapp/src/views/organizations/components/BaseOrganizationSettingsView.tsx
+++ b/webapp/src/views/organizations/components/BaseOrganizationSettingsView.tsx
@@ -15,7 +15,7 @@ import {
   useIsAdmin,
   usePreferredOrganization,
 } from 'tg.globalContext/helpers';
-import { Usage } from 'tg.ee';
+import { CriticalUsageCircle } from 'tg.ee';
 
 type OrganizationModel = components['schemas']['OrganizationModel'];
 
@@ -122,7 +122,7 @@ export const BaseOrganizationSettingsView: React.FC<Props> = ({
       {...otherProps}
       loading={organizationLoadable.isLoading || loading}
       navigation={[...navigationPrefix, ...(navigation || [])]}
-      navigationRight={<Usage />}
+      navigationRight={<CriticalUsageCircle />}
       menuItems={menuItems}
       hideChildrenOnLoading={false}
     >
diff --git a/webapp/src/views/projects/BaseProjectView.tsx b/webapp/src/views/projects/BaseProjectView.tsx
index b441cede03..1bfb6a6474 100644
--- a/webapp/src/views/projects/BaseProjectView.tsx
+++ b/webapp/src/views/projects/BaseProjectView.tsx
@@ -7,7 +7,7 @@ import { OrganizationSwitch } from 'tg.component/organizationSwitch/Organization
 import { LINKS, PARAMS } from 'tg.constants/links';
 import { useProject } from 'tg.hooks/useProject';
 import { BatchOperationsSummary } from './translations/BatchOperations/OperationsSummary/OperationsSummary';
-import { Usage } from 'tg.ee';
+import { CriticalUsageCircle } from 'tg.ee';
 
 type Props = BaseViewProps;
 
@@ -44,7 +44,7 @@ export const BaseProjectView: React.FC<Props> = ({
       navigationRight={
         <Box display="grid" gridAutoFlow="column" gap={1}>
           <BatchOperationsSummary />
-          <Usage />
+          <CriticalUsageCircle />
         </Box>
       }
     />
diff --git a/webapp/src/views/projects/ProjectListView.tsx b/webapp/src/views/projects/ProjectListView.tsx
index b78edb5661..4a48c019cd 100644
--- a/webapp/src/views/projects/ProjectListView.tsx
+++ b/webapp/src/views/projects/ProjectListView.tsx
@@ -14,7 +14,7 @@ import { Link } from 'react-router-dom';
 import { useIsAdmin, usePreferredOrganization } from 'tg.globalContext/helpers';
 import { OrganizationSwitch } from 'tg.component/organizationSwitch/OrganizationSwitch';
 import { QuickStartHighlight } from 'tg.component/layout/QuickStartGuide/QuickStartHighlight';
-import { Usage } from 'tg.ee';
+import { CriticalUsageCircle } from 'tg.ee';
 
 const StyledWrapper = styled('div')`
   display: flex;
@@ -86,7 +86,7 @@ export const ProjectListView = () => {
             [<OrganizationSwitch key={0} />],
             [t('projects_title'), LINKS.PROJECTS.build()],
           ]}
-          navigationRight={<Usage />}
+          navigationRight={<CriticalUsageCircle />}
           loading={listPermitted.isFetching}
         >
           <PaginatedHateoasList

From 16be19397364ff004accbc66ac2d24fcf48b33c3 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 11 Mar 2025 11:21:46 +0100
Subject: [PATCH 09/16] feat: Testing the proper metrics in the UI

---
 e2e/cypress/common/XpathBuilder.ts            | 34 +++++++------------
 e2e/cypress/support/dataCyType.d.ts           |  7 ++++
 .../src/ee/billing/component/IncludedItem.tsx | 26 ++++++--------
 .../billing/component/Plan/IncludedUsage.tsx  | 16 ++++++---
 .../CurrentCloudSubscriptionInfo.tsx          |  4 +--
 5 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/e2e/cypress/common/XpathBuilder.ts b/e2e/cypress/common/XpathBuilder.ts
index e81c80649a..82979e0790 100644
--- a/e2e/cypress/common/XpathBuilder.ts
+++ b/e2e/cypress/common/XpathBuilder.ts
@@ -1,44 +1,36 @@
 export function XPathBuilder(initialXpath = '') {
-  let xpath = initialXpath;
+  const xpath = initialXpath;
 
   function descendant(tag = '*') {
-    xpath += `//${tag}`;
-    return builder;
+    return XPathBuilder(`${xpath}//${tag}`);
   }
 
   function attributeEquals(attribute: string, value: string) {
-    xpath += `[@${attribute}='${value}']`;
-    return builder;
+    return XPathBuilder(`${xpath}[@${attribute}='${value}']`);
   }
 
   function withAttribute(attribute: string) {
-    xpath += `[@${attribute}]`;
-    return builder;
+    return XPathBuilder(`${xpath}[@${attribute}]`);
   }
 
   function closestAncestor(tag = '*') {
-    xpath += `/ancestor::${tag}`;
-    return builder;
+    return XPathBuilder(`${xpath}/ancestor::${tag}`);
   }
 
   function descendantOrSelf(tag = '*') {
-    xpath += `/descendant-or-self::${tag}`;
-    return builder;
+    return XPathBuilder(`${xpath}/descendant-or-self::${tag}`);
   }
 
   function containsText(text: string) {
-    xpath += `[contains(text(), '${text}')]`;
-    return builder;
+    return XPathBuilder(`${xpath}[contains(text(), '${text}')]`);
   }
 
   function hasText(text: string) {
-    xpath += `[text()='${text}']`;
-    return builder;
+    return XPathBuilder(`${xpath}[text()='${text}']`);
   }
 
   function withDataCy(dataCy: DataCy.Value) {
-    attributeEquals('data-cy', dataCy);
-    return builder;
+    return attributeEquals('data-cy', dataCy);
   }
 
   function getElement() {
@@ -46,11 +38,7 @@ export function XPathBuilder(initialXpath = '') {
   }
 
   function getInputUnderDataCy(dataCy: DataCy.Value) {
-    return builder
-      .descendant()
-      .withDataCy(dataCy)
-      .descendant('input')
-      .getElement();
+    return descendant().withDataCy(dataCy).descendant('input').getElement();
   }
 
   const builder = {
@@ -73,3 +61,5 @@ export function XPathBuilder(initialXpath = '') {
 export function buildXpath(initialXpath = '') {
   return XPathBuilder(initialXpath);
 }
+
+export type XpathBuilderType = ReturnType<typeof XPathBuilder>;
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
index 278a23c53e..161af35080 100644
--- a/e2e/cypress/support/dataCyType.d.ts
+++ b/e2e/cypress/support/dataCyType.d.ts
@@ -127,7 +127,9 @@ declare namespace DataCy {
         "batch-select-item" |
         "billing-actual-period" |
         "billing-actual-period-end" |
+        "billing-actual-used-keys" |
         "billing-actual-used-monthly-credits" |
+        "billing-actual-used-seats" |
         "billing-actual-used-strings" |
         "billing-estimated-costs" |
         "billing-estimated-costs-open-button" |
@@ -138,6 +140,11 @@ declare namespace DataCy {
         "billing-period-switch" |
         "billing-plan" |
         "billing-plan-action-button" |
+        "billing-plan-included-credits" |
+        "billing-plan-included-keys" |
+        "billing-plan-included-seats" |
+        "billing-plan-included-strings" |
+        "billing-plan-included-translation-slots" |
         "billing-plan-monthly-price" |
         "billing-plan-price-extra-seat" |
         "billing-plan-price-extra-thousand-keys" |
diff --git a/webapp/src/ee/billing/component/IncludedItem.tsx b/webapp/src/ee/billing/component/IncludedItem.tsx
index 1334b06263..1fb0e641e0 100644
--- a/webapp/src/ee/billing/component/IncludedItem.tsx
+++ b/webapp/src/ee/billing/component/IncludedItem.tsx
@@ -15,16 +15,16 @@ type IncludedItemProps = {
   sx?: SxProps;
   className?: string;
   highlightColor: string;
+  'data-cy'?: string;
 };
 
 export const IncludedStringSlots = ({
   count,
   highlightColor,
-  sx,
-  className,
+  ...containerProps
 }: IncludedItemProps) => {
   return (
-    <IncludedItemContainer {...{ sx, className }}>
+    <IncludedItemContainer {...containerProps}>
       <T
         keyName="billing_subscription_included_slots_strings"
         params={{
@@ -40,11 +40,10 @@ export const IncludedStringSlots = ({
 export const IncludedStrings = ({
   count,
   highlightColor,
-  sx,
-  className,
+  ...containerProps
 }: IncludedItemProps) => {
   return (
-    <IncludedItemContainer {...{ sx, className }}>
+    <IncludedItemContainer {...containerProps}>
       {count === -1 ? (
         <T
           keyName="billing_subscription_included_strings_unlimited"
@@ -70,11 +69,10 @@ export const IncludedStrings = ({
 export const IncludedKeys = ({
   count,
   highlightColor,
-  sx,
-  className,
+  ...containerProps
 }: IncludedItemProps) => {
   return (
-    <IncludedItemContainer {...{ sx, className }}>
+    <IncludedItemContainer {...containerProps}>
       {count === -1 ? (
         <T
           keyName="billing_subscription_included_keys_negotiable"
@@ -100,11 +98,10 @@ export const IncludedKeys = ({
 export const IncludedCredits = ({
   count,
   highlightColor,
-  sx,
-  className,
+  ...containerProps
 }: IncludedItemProps) => {
   return (
-    <IncludedItemContainer {...{ sx, className }}>
+    <IncludedItemContainer {...containerProps}>
       {count === -1 ? (
         <T
           keyName="billing_subscription_included_credits_negotiable"
@@ -130,11 +127,10 @@ export const IncludedCredits = ({
 export const IncludedSeats = ({
   count,
   highlightColor,
-  sx,
-  className,
+  ...containerProps
 }: IncludedItemProps) => {
   return (
-    <IncludedItemContainer {...{ sx, className }}>
+    <IncludedItemContainer {...containerProps}>
       {count === -1 ? (
         <T
           keyName="billing_subscription_included_seats_negotiable"
diff --git a/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx b/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
index 80d46a9812..324b5b8fd0 100644
--- a/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
+++ b/webapp/src/ee/billing/component/Plan/IncludedUsage.tsx
@@ -34,6 +34,7 @@ export const IncludedUsage = ({
     >
       {isLegacy ? (
         <IncludedStringSlots
+          data-cy={'billing-plan-included-translation-slots'}
           className="strings"
           count={includedUsage?.translationSlots ?? -1}
           highlightColor={highlightColor}
@@ -42,6 +43,7 @@ export const IncludedUsage = ({
         <>
           {metricType == 'STRINGS' && (
             <IncludedStrings
+              data-cy={'billing-plan-included-strings'}
               className="strings"
               count={includedUsage?.translations ?? -1}
               highlightColor={highlightColor}
@@ -50,6 +52,7 @@ export const IncludedUsage = ({
 
           {metricType == 'KEYS_SEATS' && (
             <IncludedKeys
+              data-cy={'billing-plan-included-keys'}
               className="strings"
               count={includedUsage?.keys ?? -1}
               highlightColor={highlightColor}
@@ -57,16 +60,19 @@ export const IncludedUsage = ({
           )}
         </>
       )}
-      <IncludedCredits
-        className="mt-credits"
-        count={includedUsage?.mtCredits ?? -1}
-        highlightColor={highlightColor}
-      />
       <IncludedSeats
+        data-cy={'billing-plan-included-seats'}
         className="seats"
         count={includedUsage?.seats ?? -1}
         highlightColor={highlightColor}
       />
+
+      <IncludedCredits
+        data-cy={'billing-plan-included-credits'}
+        className="mt-credits"
+        count={includedUsage?.mtCredits ?? -1}
+        highlightColor={highlightColor}
+      />
     </Box>
   );
 };
diff --git a/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx b/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
index 3ea27f1bd9..9c9092e6bd 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/CurrentCloudSubscriptionInfo.tsx
@@ -136,7 +136,7 @@ export const CurrentCloudSubscriptionInfo: FC<Props> = ({
                 progress={progressData.keysProgress}
                 periodEnd={activeSubscription.currentPeriodEnd}
                 isPayAsYouGo={isPayAsYouGo}
-                data-cy="billing-actual-used-strings"
+                data-cy="billing-actual-used-keys"
               />
               <PlanMetric
                 name={
@@ -148,7 +148,7 @@ export const CurrentCloudSubscriptionInfo: FC<Props> = ({
                 progress={progressData.seatsProgress}
                 periodEnd={activeSubscription.currentPeriodEnd}
                 isPayAsYouGo={isPayAsYouGo}
-                data-cy="billing-actual-used-strings"
+                data-cy="billing-actual-used-seats"
               />
             </>
           )}

From 9913ddebe3a9e18b77f711f97cd615d1384facff Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 11 Mar 2025 15:26:03 +0100
Subject: [PATCH 10/16] feat: Show error when keys exceeded

---
 .../GenericAutoTranslationChunkProcessor.kt   |   4 +-
 .../kotlin/io/tolgee/constants/Message.kt     |   2 +
 .../limits/KeysSpendingLimitExceeded.kt       |  10 ++
 .../limits/PlanKeysLimitExceeded.kt           |   7 ++
 .../PlanTranslationLimitExceeded.kt           |   3 +-
 .../TranslationSpendingLimitExceeded.kt       |   3 +-
 e2e/cypress/common/namespace.ts               |   6 -
 e2e/cypress/common/translations.ts            |  63 ++---------
 e2e/cypress/compounds/KeyCreateDialog.ts      | 105 ++++++++++++++++++
 e2e/cypress/compounds/NamespaceSelector.ts    |  16 +++
 e2e/cypress/compounds/TranslationsView.ts     |  22 ++++
 e2e/cypress/e2e/translations/base.cy.ts       |  26 +++--
 e2e/cypress/e2e/translations/batchJobs.cy.ts  |   2 +-
 e2e/cypress/e2e/translations/namespaces.cy.ts |   2 +-
 .../with5translations/withViews.cy.ts         |   4 +-
 .../ee/billing/component/BillingProgress.tsx  |   3 +
 .../component/CircularBillingProgress.tsx     |   8 +-
 .../billing/component/CriticalUsageCircle.tsx |   7 +-
 .../ee/billing/component/UsageDetailed.tsx    |   8 +-
 .../component/UserMenu/BillingMenuItem.tsx    |   2 +-
 .../ee/billing/component/getProgressData.ts   |   2 -
 .../billing/limitPopover/PlanLimitPopover.tsx |   2 +-
 webapp/src/service/http/ApiHttpService.tsx    |  13 ++-
 webapp/src/service/http/errorAction.ts        |  19 +++-
 24 files changed, 244 insertions(+), 95 deletions(-)
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/exceptions/limits/KeysSpendingLimitExceeded.kt
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanKeysLimitExceeded.kt
 rename backend/data/src/main/kotlin/io/tolgee/exceptions/{ => limits}/PlanTranslationLimitExceeded.kt (70%)
 rename backend/data/src/main/kotlin/io/tolgee/exceptions/{ => limits}/TranslationSpendingLimitExceeded.kt (72%)
 delete mode 100644 e2e/cypress/common/namespace.ts
 create mode 100644 e2e/cypress/compounds/KeyCreateDialog.ts
 create mode 100644 e2e/cypress/compounds/NamespaceSelector.ts
 create mode 100644 e2e/cypress/compounds/TranslationsView.ts

diff --git a/backend/data/src/main/kotlin/io/tolgee/batch/processors/GenericAutoTranslationChunkProcessor.kt b/backend/data/src/main/kotlin/io/tolgee/batch/processors/GenericAutoTranslationChunkProcessor.kt
index a42309d717..01e522deef 100644
--- a/backend/data/src/main/kotlin/io/tolgee/batch/processors/GenericAutoTranslationChunkProcessor.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/batch/processors/GenericAutoTranslationChunkProcessor.kt
@@ -10,8 +10,8 @@ import io.tolgee.constants.Message
 import io.tolgee.exceptions.FormalityNotSupportedException
 import io.tolgee.exceptions.LanguageNotSupportedException
 import io.tolgee.exceptions.OutOfCreditsException
-import io.tolgee.exceptions.PlanTranslationLimitExceeded
-import io.tolgee.exceptions.TranslationSpendingLimitExceeded
+import io.tolgee.exceptions.limits.PlanTranslationLimitExceeded
+import io.tolgee.exceptions.limits.TranslationSpendingLimitExceeded
 import io.tolgee.service.key.KeyService
 import io.tolgee.service.language.LanguageService
 import io.tolgee.service.translation.AutoTranslationService
diff --git a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
index 4f0ccada9b..489dcc13df 100644
--- a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
@@ -272,6 +272,8 @@ enum class Message {
   SORTING_AND_PAGING_IS_NOT_SUPPORTED_WHEN_USING_CURSOR,
   STRINGS_METRIC_ARE_NOT_SUPPORTED,
   KEYS_SEATS_METRIC_ARE_NOT_SUPPORTED_FOR_SLOTS_FIXED_TYPE,
+  PLAN_KEY_LIMIT_EXCEEDED,
+  KEYS_SPENDING_LIMIT_EXCEEDED,
   ;
 
   val code: String
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/KeysSpendingLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/KeysSpendingLimitExceeded.kt
new file mode 100644
index 0000000000..6a6e497a0f
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/KeysSpendingLimitExceeded.kt
@@ -0,0 +1,10 @@
+package io.tolgee.exceptions.limits
+
+import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
+
+class KeysSpendingLimitExceeded(required: Long, limit: Long) :
+  BadRequestException(
+    Message.KEYS_SPENDING_LIMIT_EXCEEDED,
+    params = listOf(required, limit),
+  )
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanKeysLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanKeysLimitExceeded.kt
new file mode 100644
index 0000000000..9d506ea0b6
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanKeysLimitExceeded.kt
@@ -0,0 +1,7 @@
+package io.tolgee.exceptions.limits
+
+import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
+
+class PlanKeysLimitExceeded(required: Long, limit: Long) :
+  BadRequestException(Message.PLAN_KEY_LIMIT_EXCEEDED, params = listOf(required, limit))
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/PlanTranslationLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanTranslationLimitExceeded.kt
similarity index 70%
rename from backend/data/src/main/kotlin/io/tolgee/exceptions/PlanTranslationLimitExceeded.kt
rename to backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanTranslationLimitExceeded.kt
index 326ea8da1f..a1c70dc4bf 100644
--- a/backend/data/src/main/kotlin/io/tolgee/exceptions/PlanTranslationLimitExceeded.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanTranslationLimitExceeded.kt
@@ -1,6 +1,7 @@
-package io.tolgee.exceptions
+package io.tolgee.exceptions.limits
 
 import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
 
 class PlanTranslationLimitExceeded(required: Long, limit: Long) :
   BadRequestException(Message.PLAN_TRANSLATION_LIMIT_EXCEEDED, params = listOf(required, limit))
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/TranslationSpendingLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/TranslationSpendingLimitExceeded.kt
similarity index 72%
rename from backend/data/src/main/kotlin/io/tolgee/exceptions/TranslationSpendingLimitExceeded.kt
rename to backend/data/src/main/kotlin/io/tolgee/exceptions/limits/TranslationSpendingLimitExceeded.kt
index d03a502673..8dc965e0c1 100644
--- a/backend/data/src/main/kotlin/io/tolgee/exceptions/TranslationSpendingLimitExceeded.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/TranslationSpendingLimitExceeded.kt
@@ -1,6 +1,7 @@
-package io.tolgee.exceptions
+package io.tolgee.exceptions.limits
 
 import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
 
 class TranslationSpendingLimitExceeded(required: Long, limit: Long) :
   BadRequestException(
diff --git a/e2e/cypress/common/namespace.ts b/e2e/cypress/common/namespace.ts
deleted file mode 100644
index 4d92f11e6b..0000000000
--- a/e2e/cypress/common/namespace.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function selectNamespace(namespace: string) {
-  cy.gcy('search-select').click();
-  cy.gcy('search-select-new').click();
-  cy.gcy('namespaces-select-text-field').type(namespace);
-  return cy.gcy('namespaces-select-confirm').click();
-}
diff --git a/e2e/cypress/common/translations.ts b/e2e/cypress/common/translations.ts
index 33a220d4fa..3a294926ca 100644
--- a/e2e/cypress/common/translations.ts
+++ b/e2e/cypress/common/translations.ts
@@ -8,9 +8,13 @@ import { HOST } from './constants';
 import { ProjectDTO } from '../../../webapp/src/service/response.types';
 import { waitForGlobalLoading } from './loading';
 import { assertMessage, dismissMenu, gcy, gcyAdvanced } from './shared';
-import { selectNamespace } from './namespace';
 import { buildXpath } from './XpathBuilder';
 import Chainable = Cypress.Chainable;
+import {
+  KeyCreateDialog,
+  KeyDialogFillProps,
+} from '../compounds/KeyCreateDialog';
+import { TranslationsView } from '../compounds/TranslationsView';
 
 export function getCellCancelButton() {
   return cy.gcy('translations-cell-cancel-button');
@@ -34,60 +38,11 @@ export const getPluralEditor = (variant: string) => {
   );
 };
 
-type Props = {
-  key: string;
-  translation?: string | Record<string, string>;
-  tag?: string;
-  namespace?: string;
-  description?: string;
-  variableName?: string;
-  assertPresenceOfNamespaceSelectBox?: boolean;
-};
-
-export function createTranslation({
-  key,
-  translation,
-  tag,
-  namespace,
-  description,
-  variableName,
-  assertPresenceOfNamespaceSelectBox,
-}: Props) {
+export function createTranslation(props: KeyDialogFillProps) {
   waitForGlobalLoading();
-  cy.gcy('translations-add-button').click();
-  if (assertPresenceOfNamespaceSelectBox != undefined) {
-    cy.gcy('namespaces-selector').should(
-      assertPresenceOfNamespaceSelectBox ? 'exist' : 'not.exist'
-    );
-  }
-  cy.gcy('translation-create-key-input').type(key);
-  if (namespace) {
-    selectNamespace(namespace);
-  }
-  if (description) {
-    cy.gcy('translation-create-description-input').type(description);
-  }
-  if (tag) {
-    cy.gcy('translations-tag-input').type(tag);
-    cy.gcy('tag-autocomplete-option').contains(`Add "${tag}"`).click();
-  }
-  if (typeof translation === 'string') {
-    cy.gcy('translation-editor').first().type(translation);
-  } else if (typeof translation === 'object') {
-    cy.gcy('key-plural-checkbox').click();
-    if (variableName) {
-      cy.gcy('key-plural-checkbox-expand').click();
-      cy.gcy('key-plural-variable-name').type(variableName);
-    }
-    Object.entries(translation).forEach(([key, value]) => {
-      gcyAdvanced({ value: 'translation-editor', variant: key })
-        .find('[contenteditable]')
-        .type(value);
-    });
-  }
-
-  cy.gcy('global-form-save-button').click();
-  assertMessage('Key created');
+  const translationsView = new TranslationsView();
+  const keyCreateDialog = translationsView.openKeyCreateDialog();
+  keyCreateDialog.fillAndSave(props);
 }
 
 export function selectLangsInLocalstorage(projectId: number, langs: string[]) {
diff --git a/e2e/cypress/compounds/KeyCreateDialog.ts b/e2e/cypress/compounds/KeyCreateDialog.ts
new file mode 100644
index 0000000000..179c7bcf88
--- /dev/null
+++ b/e2e/cypress/compounds/KeyCreateDialog.ts
@@ -0,0 +1,105 @@
+import { assertMessage, gcyAdvanced } from '../common/shared';
+import { NamespaceSelector } from './NamespaceSelector';
+
+export class KeyCreateDialog {
+  fill({
+    key,
+    translation,
+    tag,
+    namespace,
+    description,
+    plural,
+  }: KeyDialogFillProps) {
+    this.getKeyNameInput().type(key);
+    if (namespace) {
+      this.selectNamespace(namespace);
+    }
+    if (description) {
+      this.getDescriptionInput().type(description);
+    }
+    if (tag) {
+      this.addNewTag(tag);
+    }
+
+    this.setSingularTranslation(translation);
+    this.setPluralTranslation(plural);
+  }
+
+  save() {
+    cy.gcy('global-form-save-button').click();
+  }
+
+  fillAndSave(props: KeyDialogFillProps) {
+    this.fill(props);
+    this.save();
+  }
+
+  getKeyNameInput() {
+    return cy.gcy('translation-create-key-input');
+  }
+
+  getDescriptionInput() {
+    return cy.gcy('translation-create-description-input');
+  }
+
+  getTagInput() {
+    return cy.gcy('translations-tag-input');
+  }
+
+  getTagAutocompleteOption() {
+    return cy.gcy('tag-autocomplete-option');
+  }
+
+  getTranslationInput() {
+    return cy.gcy('translation-editor').first();
+  }
+
+  setSingularTranslation(translation?: string) {
+    if (!translation) {
+      return;
+    }
+    this.getTranslationInput().type(translation);
+  }
+
+  addNewTag(tag: string) {
+    this.getTagInput().type(tag);
+    this.getTagAutocompleteOption().contains(`Add "${tag}"`).click();
+  }
+
+  setPluralTranslation(plural?: KeyDialogFillProps['plural']) {
+    if (!plural) {
+      return;
+    }
+
+    cy.gcy('key-plural-checkbox').click();
+    if (plural.variableName) {
+      cy.gcy('key-plural-checkbox-expand').click();
+      cy.gcy('key-plural-variable-name').type(plural.variableName);
+    }
+    Object.entries(plural.formValues).forEach(([key, value]) => {
+      gcyAdvanced({ value: 'translation-editor', variant: key })
+        .find('[contenteditable]')
+        .type(value);
+    });
+  }
+
+  selectNamespace(namespace: string) {
+    new NamespaceSelector().selectNamespace(namespace);
+  }
+
+  getNamespaceSelectElement() {
+    return new NamespaceSelector().getNamespaceSelect();
+  }
+}
+
+export type KeyDialogFillProps = {
+  key: string;
+  translation?: string;
+  plural?: {
+    variableName?: string;
+    formValues: Record<string, string>;
+  };
+  tag?: string;
+  namespace?: string;
+  description?: string;
+};
diff --git a/e2e/cypress/compounds/NamespaceSelector.ts b/e2e/cypress/compounds/NamespaceSelector.ts
new file mode 100644
index 0000000000..f5091d904d
--- /dev/null
+++ b/e2e/cypress/compounds/NamespaceSelector.ts
@@ -0,0 +1,16 @@
+export class NamespaceSelector {
+  getNamespaceSelect() {
+    return cy.gcy('search-select');
+  }
+
+  selectNamespace(namespace: string) {
+    this.getNamespaceSelect().click();
+    cy.gcy('search-select-new').click();
+    cy.gcy('namespaces-select-text-field').type(namespace);
+    return cy.gcy('namespaces-select-confirm').click();
+  }
+}
+
+export const selectNamespace = (namespace: string) => {
+  new NamespaceSelector().selectNamespace(namespace);
+};
diff --git a/e2e/cypress/compounds/TranslationsView.ts b/e2e/cypress/compounds/TranslationsView.ts
new file mode 100644
index 0000000000..0b187f9482
--- /dev/null
+++ b/e2e/cypress/compounds/TranslationsView.ts
@@ -0,0 +1,22 @@
+import { HOST } from '../common/constants';
+import { KeyCreateDialog, KeyDialogFillProps } from './KeyCreateDialog';
+
+export class TranslationsView {
+  visit(projectId: number) {
+    return cy.visit(`${HOST}/projects/${projectId}/translations`);
+  }
+
+  getAddButton() {
+    return cy.gcy('translations-add-button');
+  }
+
+  openKeyCreateDialog() {
+    this.getAddButton().click();
+    return new KeyCreateDialog();
+  }
+
+  createKey(props: KeyDialogFillProps) {
+    const dialog = this.openKeyCreateDialog();
+    dialog.fillAndSave(props);
+  }
+}
diff --git a/e2e/cypress/e2e/translations/base.cy.ts b/e2e/cypress/e2e/translations/base.cy.ts
index 5f46dd7fad..59052a462a 100644
--- a/e2e/cypress/e2e/translations/base.cy.ts
+++ b/e2e/cypress/e2e/translations/base.cy.ts
@@ -14,6 +14,7 @@ import {
   getClosestContainingText,
 } from '../../common/xPath';
 import { visitProjectLanguages } from '../../common/shared';
+import { TranslationsView } from '../../compounds/TranslationsView';
 
 describe('Translations Base', () => {
   let project: ProjectDTO = null;
@@ -49,11 +50,15 @@ describe('Translations Base', () => {
     () => {
       cy.wait(100);
       cy.gcy('global-empty-state').should('be.visible');
-      createTranslation({
+
+      const translationsView = new TranslationsView();
+      const keyCreateDialog = translationsView.openKeyCreateDialog();
+      keyCreateDialog.getNamespaceSelectElement().should('not.exist');
+      keyCreateDialog.fillAndSave({
         key: 'Test key',
         translation: 'Translated test key',
-        assertPresenceOfNamespaceSelectBox: false,
       });
+
       cy.contains('Key created').should('be.visible');
       cy.wait(100);
       cy.xpath(getAnyContainingText('Key', 'a'))
@@ -83,7 +88,9 @@ describe('Translations Base', () => {
     cy.gcy('global-empty-state').should('be.visible');
     createTranslation({
       key: 'test-key',
-      translation: { one: '# key', other: '# keys' },
+      plural: {
+        formValues: { one: '# key', other: '# keys' },
+      },
     });
     getTranslationCell('test-key', 'en')
       .findDcy('translation-plural-parameter')
@@ -99,8 +106,10 @@ describe('Translations Base', () => {
     cy.gcy('global-empty-state').should('be.visible');
     createTranslation({
       key: 'test-key',
-      translation: { one: '# key', other: '# keys' },
-      variableName: 'testVariable',
+      plural: {
+        variableName: 'testVariable',
+        formValues: { one: '# key', other: '# keys' },
+      },
     });
     getTranslationCell('test-key', 'en')
       .findDcy('translation-plural-parameter')
@@ -116,11 +125,14 @@ describe('Translations Base', () => {
     enableNamespaces(project.id);
     cy.wait(100);
     cy.gcy('global-empty-state').should('be.visible');
-    createTranslation({
+
+    const translationsView = new TranslationsView();
+    const keyCreateDialog = translationsView.openKeyCreateDialog();
+    keyCreateDialog.getNamespaceSelectElement().should('exist');
+    keyCreateDialog.fillAndSave({
       key: 'Test key',
       translation: 'Translated test key',
       namespace: 'test-ns',
-      assertPresenceOfNamespaceSelectBox: true,
     });
 
     cy.gcy('translations-namespace-banner')
diff --git a/e2e/cypress/e2e/translations/batchJobs.cy.ts b/e2e/cypress/e2e/translations/batchJobs.cy.ts
index b88f01ca84..abbc4eb151 100644
--- a/e2e/cypress/e2e/translations/batchJobs.cy.ts
+++ b/e2e/cypress/e2e/translations/batchJobs.cy.ts
@@ -10,13 +10,13 @@ import {
 } from '../../common/batchOperations';
 import { TestDataStandardResponse } from '../../common/apiCalls/testData/generator';
 import { enableNamespaces, login } from '../../common/apiCalls/common';
-import { selectNamespace } from '../../common/namespace';
 import { assertHasState } from '../../common/state';
 import {
   assertExportLanguagesSelected,
   checkZipContent,
   getFileName,
 } from '../../common/export';
+import { selectNamespace } from '../../compounds/NamespaceSelector';
 
 describe('Batch jobs', { scrollBehavior: false }, () => {
   const downloadsFolder = Cypress.config('downloadsFolder');
diff --git a/e2e/cypress/e2e/translations/namespaces.cy.ts b/e2e/cypress/e2e/translations/namespaces.cy.ts
index ac27763d19..2dfd5355c2 100644
--- a/e2e/cypress/e2e/translations/namespaces.cy.ts
+++ b/e2e/cypress/e2e/translations/namespaces.cy.ts
@@ -11,7 +11,7 @@ import {
   getPopover,
   selectInSelect,
 } from '../../common/shared';
-import { selectNamespace } from '../../common/namespace';
+import { selectNamespace } from '../../compounds/NamespaceSelector';
 
 describe('namespaces in translations', () => {
   beforeEach(() => {
diff --git a/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts b/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
index d1be242050..afa5faf6d1 100644
--- a/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
+++ b/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
@@ -17,8 +17,8 @@ import {
   visitTranslations,
 } from '../../../common/translations';
 import { gcy } from '../../../common/shared';
-import { selectNamespace } from '../../../common/namespace';
 import { enableNamespaces } from '../../../common/apiCalls/common';
+import { selectNamespace } from '../../../compounds/NamespaceSelector';
 
 describe('Views with 5 Translations', () => {
   let project: ProjectDTO = null;
@@ -44,7 +44,7 @@ describe('Views with 5 Translations', () => {
         cy.contains('Cool key 04').should('be.visible');
       });
 
-      it('insert base into translation', () => {
+      it('inserts base into translation', () => {
         selectLangsInLocalstorage(project.id, ['en', 'cs']);
         visitTranslations(project.id);
 
diff --git a/webapp/src/ee/billing/component/BillingProgress.tsx b/webapp/src/ee/billing/component/BillingProgress.tsx
index 1d6c8a3b9f..7ef62227e3 100644
--- a/webapp/src/ee/billing/component/BillingProgress.tsx
+++ b/webapp/src/ee/billing/component/BillingProgress.tsx
@@ -92,6 +92,9 @@ export const BillingProgress: React.FC<Props> = ({
   const critical =
     normalized > BILLING_CRITICAL_FRACTION * progressItem.included &&
     !isPayAsYouGo;
+
+  console.log({ normalized, critical, progressItem, isPayAsYouGo });
+
   const theme = useTheme();
 
   const extra =
diff --git a/webapp/src/ee/billing/component/CircularBillingProgress.tsx b/webapp/src/ee/billing/component/CircularBillingProgress.tsx
index 3bd8404770..7307797973 100644
--- a/webapp/src/ee/billing/component/CircularBillingProgress.tsx
+++ b/webapp/src/ee/billing/component/CircularBillingProgress.tsx
@@ -45,19 +45,19 @@ const StyledCircleContentOver = styled(StyledCircleContent)`
 type Props = {
   value: number;
   maxValue: number;
-  canGoOver: boolean;
+  isPayAsYouGo: boolean;
   size?: number;
 };
 
 export const CircularBillingProgress = ({
   value,
   maxValue = 100,
-  canGoOver,
+  isPayAsYouGo,
   size = 28,
 }: Props) => {
   const normalized = value > maxValue ? maxValue : value < 0 ? 0 : value;
   const critical =
-    normalized > BILLING_CRITICAL_FRACTION * maxValue && !canGoOver;
+    normalized > BILLING_CRITICAL_FRACTION * maxValue && !isPayAsYouGo;
 
   const extra = value > maxValue ? value - maxValue : 0;
 
@@ -100,7 +100,7 @@ export const CircularBillingProgress = ({
             strokeDashoffset: extraProgressLength,
             transform: `scale(1, -1) rotate(${90 + rotation}deg)`,
           }}
-          className={clsx({ canGoOver })}
+          className={clsx({ isPayAsYouGo: isPayAsYouGo })}
         />
       )}
     </svg>
diff --git a/webapp/src/ee/billing/component/CriticalUsageCircle.tsx b/webapp/src/ee/billing/component/CriticalUsageCircle.tsx
index 7177992370..33c4fbb7f6 100644
--- a/webapp/src/ee/billing/component/CriticalUsageCircle.tsx
+++ b/webapp/src/ee/billing/component/CriticalUsageCircle.tsx
@@ -112,13 +112,16 @@ export const CriticalUsageCircle: FC = () => {
         <Tooltip
           title={
             <StyledTitle>
-              <UsageDetailed {...progressData} />
+              <UsageDetailed
+                {...progressData}
+                isPayAsYouGo={usage?.isPayAsYouGo}
+              />
             </StyledTitle>
           }
         >
           <StyledContent className={clsx({ triggered: Boolean(trigger) })}>
             <CircularBillingProgress
-              canGoOver={usage.isPayAsYouGo}
+              isPayAsYouGo={usage.isPayAsYouGo}
               value={progressData.mostCriticalProgress}
               maxValue={1}
             />
diff --git a/webapp/src/ee/billing/component/UsageDetailed.tsx b/webapp/src/ee/billing/component/UsageDetailed.tsx
index ba4a142ff5..696444c627 100644
--- a/webapp/src/ee/billing/component/UsageDetailed.tsx
+++ b/webapp/src/ee/billing/component/UsageDetailed.tsx
@@ -4,7 +4,9 @@ import { T } from '@tolgee/react';
 import { BillingProgress } from './BillingProgress';
 import { ProgressData } from './getProgressData';
 
-export const UsageDetailed: React.FC<ProgressData> = (props) => {
+export const UsageDetailed: React.FC<
+  ProgressData & { isPayAsYouGo: boolean }
+> = (props) => {
   const items = [
     {
       getLabel: (params: { limit: number; used: number }) => (
@@ -26,7 +28,7 @@ export const UsageDetailed: React.FC<ProgressData> = (props) => {
     },
     {
       getLabel: (params: { limit: number; used: number }) => (
-        <T keyName="dashboard_billing_used_credit" params={params} />
+        <T keyName="dashboard_billing_used_credit_v2" params={params} />
       ),
       progress: props.creditProgress,
     },
@@ -46,7 +48,7 @@ export const UsageDetailed: React.FC<ProgressData> = (props) => {
             </Typography>
             <BillingProgress
               progressItem={item.progress}
-              isPayAsYouGo={item.progress.isInUse}
+              isPayAsYouGo={props.isPayAsYouGo}
             />
           </Box>
         ))}
diff --git a/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx b/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
index b86b9f13a1..dfaeb717eb 100644
--- a/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
+++ b/webapp/src/ee/billing/component/UserMenu/BillingMenuItem.tsx
@@ -55,7 +55,7 @@ export const BillingMenuItem: FC<BillingMenuItemsProps> = ({ onClose }) => {
             size={22}
             value={progressData.mostCriticalProgress}
             maxValue={1}
-            canGoOver={usage?.isPayAsYouGo}
+            isPayAsYouGo={usage?.isPayAsYouGo}
           />
         )}
       </Box>
diff --git a/webapp/src/ee/billing/component/getProgressData.ts b/webapp/src/ee/billing/component/getProgressData.ts
index fc0d2e687e..a156df71d4 100644
--- a/webapp/src/ee/billing/component/getProgressData.ts
+++ b/webapp/src/ee/billing/component/getProgressData.ts
@@ -6,8 +6,6 @@ type UsageModel = components['schemas']['PublicUsageModel'];
 export const getProgressData = ({ usage }: { usage: UsageModel }) => {
   const usesSlots = usage.translationSlotsLimit !== -1;
 
-  console.log(usage);
-
   const translationSlotsProgress = new ProgressItem(
     usage.includedTranslationSlots,
     usage.currentTranslationSlots
diff --git a/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx b/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
index fc69c7d87c..f8033be11a 100644
--- a/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
+++ b/webapp/src/ee/billing/limitPopover/PlanLimitPopover.tsx
@@ -73,7 +73,7 @@ export const PlanLimitPopover: React.FC<Props> = ({ open, onClose }) => {
         <DialogContentText id="alert-dialog-description">
           <T keyName="plan_limit_dialog_description" />
         </DialogContentText>
-        <UsageDetailed {...progressData} />
+        <UsageDetailed {...progressData} isPayAsYouGo={usage?.isPayAsYouGo} />
       </StyledDialogContent>
 
       <DialogActions>
diff --git a/webapp/src/service/http/ApiHttpService.tsx b/webapp/src/service/http/ApiHttpService.tsx
index 1d0978c2f8..4742c202bc 100644
--- a/webapp/src/service/http/ApiHttpService.tsx
+++ b/webapp/src/service/http/ApiHttpService.tsx
@@ -61,13 +61,18 @@ export class ApiHttpService {
             if (r.status >= 400) {
               const responseData = await ApiHttpService.getResObject(r);
               const resultError = new ApiError('Api error', responseData);
-              resultError.setErrorHandler(() =>
-                handleApiError(r, responseData, init, options)
-              );
+
+              let handled = false;
+
               if (r.status === 400) {
-                errorAction(responseData.code);
+                handled = errorAction(responseData.code);
               }
 
+              if (!handled) {
+                resultError.setErrorHandler(() =>
+                  handleApiError(r, responseData, init, options)
+                );
+              }
               if (
                 r.status == 403 &&
                 responseData.code === 'expired_super_jwt_token'
diff --git a/webapp/src/service/http/errorAction.ts b/webapp/src/service/http/errorAction.ts
index 55412cf0b5..2b86e7b6f9 100644
--- a/webapp/src/service/http/errorAction.ts
+++ b/webapp/src/service/http/errorAction.ts
@@ -1,15 +1,28 @@
 import { globalContext } from 'tg.globalContext/globalActions';
 
+/**
+ * Performs action for defined error codes
+ *
+ * @return Returns true if the error is handled and other error handling should be skipped
+ */
 export const errorAction = (code: string) => {
   switch (code) {
     case 'plan_translation_limit_exceeded':
       globalContext.actions?.incrementPlanLimitErrors();
-      break;
+      return true;
     case 'translation_spending_limit_exceeded':
       globalContext.actions?.incrementSpendingLimitErrors();
-      break;
+      return true;
     case 'seats_spending_limit_exceeded':
       globalContext.actions?.incrementSpendingLimitErrors();
-      break;
+      return true;
+    case 'keys_spending_limit_exceeded':
+      globalContext.actions?.incrementSpendingLimitErrors();
+      return true;
+    case 'plan_key_limit_exceeded':
+      globalContext.actions?.incrementPlanLimitErrors();
+      return true;
+    default:
+      return false;
   }
 };

From 6e7de7303eebfb339fc4923e263a8e8966da2ba3 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Tue, 11 Mar 2025 16:41:54 +0100
Subject: [PATCH 11/16] chore: Reactor the seat counting so it happens in the
 same transaction

---
 .../repository/OrganizationRepository.kt      | 29 +++++++++++++++++++
 .../organization/OrganizationStatsService.kt  |  9 ++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt b/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
index 29e183672a..da85b5b2e1 100644
--- a/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
@@ -228,4 +228,33 @@ interface OrganizationRepository : JpaRepository<Organization, Long> {
     id: Long,
     currentUserId: Long,
   ): OrganizationView?
+
+
+  @Query(
+    """
+      select distinct o.id from Organization o
+        left join o.memberRoles orl
+        left join o.projects pr
+        left join pr.permissions perm
+        where orl.user.id = :userId or perm.user.id = :userId
+  """
+  )
+  fun getAllUsersOrganizations(userId: Long): Set<Long>
+
+  @Query(
+    """
+      select ua.id $ALL_USERS_IN_ORGANIZATION_QUERY
+    """
+  )
+  fun getAllUserIdsInOrganization(organizationId: Long): Set<Long>
+
+  companion object {
+    const val ALL_USERS_IN_ORGANIZATION_QUERY = """from UserAccount ua
+      left join ua.organizationRoles orl
+      left join orl.organization o on o.deletedAt is null and o.id = :organizationId
+      left join ua.permissions p 
+      left join p.project pr on pr.deletedAt is null and pr.organizationOwner.id = :organizationId 
+      where ua.deletedAt is null and ua.disabledAt is null
+      and (pr is not null or o is not null)"""
+  }
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
index 17ea5b41d9..069b31ed8e 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
@@ -1,5 +1,6 @@
 package io.tolgee.service.organization
 
+import io.tolgee.repository.OrganizationRepository.Companion.ALL_USERS_IN_ORGANIZATION_QUERY
 import jakarta.persistence.EntityManager
 import org.springframework.stereotype.Service
 import java.math.BigDecimal
@@ -56,13 +57,7 @@ class OrganizationStatsService(
   fun getSeatCount(organizationId: Long): Long {
     return entityManager.createQuery(
       """
-      select count(distinct ua.id) from UserAccount ua
-      left join ua.organizationRoles orl
-      left join orl.organization o on o.deletedAt is null and o.id = :organizationId
-      left join ua.permissions p 
-      left join p.project pr on pr.deletedAt is null and pr.organizationOwner.id = :organizationId 
-      where ua.deletedAt is null and ua.disabledAt is null
-        and (pr is not null or o is not null)
+      select count(distinct ua.id) $ALL_USERS_IN_ORGANIZATION_QUERY
       """.trimIndent(),
     ).setParameter("organizationId", organizationId).singleResult as Long
   }

From c38194314d676c4c38e4eb24160cdf44ec49b790 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 12 Mar 2025 09:05:45 +0100
Subject: [PATCH 12/16] feat: Prevent user from accepting invitation when
 organization is out of seats

---
 .../BaseLimitsProvider.kt                     |  3 +-
 .../kotlin/io/tolgee/constants/Message.kt     |  1 +
 .../AdditionalTestDataSaver.kt                |  8 ++-
 .../testDataBuilder/TestDataService.kt        | 50 ++++++++++++++++---
 .../builders/InvitationBuilder.kt             |  8 +++
 .../builders/OrganizationBuilder.kt           | 13 +++++
 .../builders/ProjectBuilder.kt                | 15 ++++++
 .../builders/TestDataBuilder.kt               |  1 +
 .../main/kotlin/io/tolgee/dtos/UsageLimits.kt |  1 +
 .../limits/PlanSeatLimitExceeded.kt           |  7 +++
 .../limits/SeatSpendingLimitExceeded.kt       | 10 ++++
 .../io/tolgee/model/OrganizationRole.kt       |  2 +-
 .../main/kotlin/io/tolgee/model/Permission.kt |  4 --
 .../service/invitation/InvitationService.kt   | 12 +++--
 .../io/tolgee/data/StandardTestDataResult.kt  |  7 +++
 .../data/service/TestDataGeneratingService.kt |  7 +++
 .../common/apiCalls/testData/generator.ts     |  1 +
 e2e/cypress/support/dataCyType.d.ts           |  3 ++
 .../security/AcceptInvitationView.tsx         | 33 +++++++++++-
 .../src/globalContext/useMessageService.tsx   |  6 ++-
 webapp/src/hooks/useSuccessMessage.tsx        |  2 -
 webapp/src/service/http/ApiHttpService.tsx    | 13 ++---
 webapp/src/service/http/handleApiError.tsx    |  7 +++
 .../translationTools/useErrorTranslation.ts   |  2 +
 24 files changed, 183 insertions(+), 33 deletions(-)
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/InvitationBuilder.kt
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanSeatLimitExceeded.kt
 create mode 100644 backend/data/src/main/kotlin/io/tolgee/exceptions/limits/SeatSpendingLimitExceeded.kt

diff --git a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
index caaf824a5c..b4ae2b9719 100644
--- a/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/component/translationsLimitProvider/BaseLimitsProvider.kt
@@ -24,7 +24,8 @@ class BaseLimitsProvider : LimitsProvider {
       translationSlots = UsageLimits.Limit(
         included = -1,
         limit = -1
-      )
+      ),
+      isTrial = false
     )
   }
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
index 489dcc13df..094478836d 100644
--- a/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/constants/Message.kt
@@ -274,6 +274,7 @@ enum class Message {
   KEYS_SEATS_METRIC_ARE_NOT_SUPPORTED_FOR_SLOTS_FIXED_TYPE,
   PLAN_KEY_LIMIT_EXCEEDED,
   KEYS_SPENDING_LIMIT_EXCEEDED,
+  PLAN_SEAT_LIMIT_EXCEEDED,
   ;
 
   val code: String
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
index f5b27e03a5..a070f42676 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/AdditionalTestDataSaver.kt
@@ -7,7 +7,11 @@ interface AdditionalTestDataSaver {
 
   fun clean(builder: TestDataBuilder)
 
-  fun before(builder: TestDataBuilder) {}
+  fun beforeSave(builder: TestDataBuilder) {}
 
-  fun after(builder: TestDataBuilder) {}
+  fun afterSave(builder: TestDataBuilder) {}
+
+  fun beforeClean(builder: TestDataBuilder) {}
+
+  fun afterClean(builder: TestDataBuilder) {}
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
index 1894b2b944..5bb9782be0 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/TestDataService.kt
@@ -4,11 +4,13 @@ import io.tolgee.activity.ActivityHolder
 import io.tolgee.component.eventListeners.LanguageStatsListener
 import io.tolgee.development.testDataBuilder.builders.*
 import io.tolgee.development.testDataBuilder.builders.slack.SlackUserConnectionBuilder
+import io.tolgee.model.Project
 import io.tolgee.service.TenantService
 import io.tolgee.service.automations.AutomationService
 import io.tolgee.service.bigMeta.BigMetaService
 import io.tolgee.service.contentDelivery.ContentDeliveryConfigService
 import io.tolgee.service.dataImport.ImportService
+import io.tolgee.service.invitation.InvitationService
 import io.tolgee.service.key.*
 import io.tolgee.service.language.LanguageService
 import io.tolgee.service.machineTranslation.MtServiceConfigService
@@ -67,6 +69,7 @@ class TestDataService(
   private val automationService: AutomationService,
   private val contentDeliveryConfigService: ContentDeliveryConfigService,
   private val languageStatsListener: LanguageStatsListener,
+  private val invitationService: InvitationService
 ) : Logging {
   @Transactional
   fun saveTestData(ft: TestDataBuilder.() -> Unit): TestDataBuilder {
@@ -80,7 +83,7 @@ class TestDataService(
   fun saveTestData(builder: TestDataBuilder) {
     activityHolder.enableAutoCompletion = false
     languageStatsListener.bypass = true
-    runBeforeMethodsOfAdditionalSavers(builder)
+    runBeforeSaveMethodsOfAdditionalSavers(builder)
     prepare()
 
     // Projects have to be stored in separate transaction since projectHolder's
@@ -109,11 +112,12 @@ class TestDataService(
     activityHolder.enableAutoCompletion = true
     languageStatsListener.bypass = false
 
-    runAfterMethodsOfAdditionalSavers(builder)
+    runAfterSaveMethodsOfAdditionalSavers(builder)
   }
 
   @Transactional
   fun cleanTestData(builder: TestDataBuilder) {
+    runBeforeCleanMethodsOfAdditionalSavers(builder)
     tryUntilItDoesntBreakConstraint {
       executeInNewTransaction(transactionManager) {
         builder.data.userAccounts.forEach {
@@ -131,6 +135,7 @@ class TestDataService(
           }
         }
       }
+      runAfterCleanMethodsOfAdditionalSavers(builder)
     }
 
     additionalTestDataSavers.forEach { dataSaver ->
@@ -165,6 +170,7 @@ class TestDataService(
   }
 
   private fun saveOrganizationDependants(builder: TestDataBuilder) {
+    saveOrganizationInvitations(builder)
     saveOrganizationRoles(builder)
     saveOrganizationAvatars(builder)
     saveAllMtCreditBuckets(builder)
@@ -210,6 +216,7 @@ class TestDataService(
   private fun saveAllProjectDependants(builder: ProjectBuilder) {
     saveApiKeys(builder)
     saveLanguages(builder)
+    saveProjectInvitations(builder.testDataBuilder.data.invitations, builder.self)
     savePermissions(builder)
     saveMtServiceConfigs(builder)
     saveAllNamespaces(builder)
@@ -380,7 +387,8 @@ class TestDataService(
   }
 
   private fun savePermissions(builder: ProjectBuilder) {
-    permissionService.saveAll(builder.data.permissions.map { it.self })
+    val toSave = builder.data.permissions.map { it.self }
+    permissionService.saveAll(toSave)
   }
 
   private fun saveAllKeyDependants(keyBuilders: List<KeyBuilder>) {
@@ -524,20 +532,48 @@ class TestDataService(
     private val passwordHashCache = mutableMapOf<String, String>()
   }
 
-  private fun runBeforeMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+  private fun runBeforeSaveMethodsOfAdditionalSavers(builder: TestDataBuilder) {
     executeInNewTransaction(transactionManager) {
       additionalTestDataSavers.forEach {
-        it.before(builder)
+        it.beforeSave(builder)
       }
     }
   }
 
 
-  private fun runAfterMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+  private fun runAfterSaveMethodsOfAdditionalSavers(builder: TestDataBuilder) {
     executeInNewTransaction(transactionManager) {
       additionalTestDataSavers.forEach {
-        it.after(builder)
+        it.afterSave(builder)
       }
     }
   }
+
+  private fun runBeforeCleanMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+    executeInNewTransaction(transactionManager) {
+      additionalTestDataSavers.forEach {
+        it.beforeClean(builder)
+      }
+    }
+  }
+
+  private fun runAfterCleanMethodsOfAdditionalSavers(builder: TestDataBuilder) {
+    executeInNewTransaction(transactionManager) {
+      additionalTestDataSavers.forEach {
+        it.afterClean(builder)
+      }
+    }
+  }
+
+  private fun saveOrganizationInvitations(builder: TestDataBuilder) {
+    builder.data.invitations.filter { it.self.organizationRole != null }.forEach {
+      invitationService.save(it.self)
+    }
+  }
+
+  private fun saveProjectInvitations(invitations: MutableList<InvitationBuilder>, self: Project) {
+    invitations.filter { it.self.permission?.project == self }.forEach {
+      invitationService.save(it.self)
+    }
+  }
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/InvitationBuilder.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/InvitationBuilder.kt
new file mode 100644
index 0000000000..416d5ccd59
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/InvitationBuilder.kt
@@ -0,0 +1,8 @@
+package io.tolgee.development.testDataBuilder.builders
+
+import io.tolgee.model.Invitation
+import org.apache.commons.lang3.RandomStringUtils
+
+class InvitationBuilder : BaseEntityDataBuilder<Invitation, InvitationBuilder>() {
+  override val self: Invitation = Invitation(code = RandomStringUtils.randomAlphanumeric(50))
+}
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/OrganizationBuilder.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/OrganizationBuilder.kt
index 3706e5133d..05396ea6c9 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/OrganizationBuilder.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/OrganizationBuilder.kt
@@ -7,6 +7,8 @@ import io.tolgee.model.OrganizationRole
 import io.tolgee.model.Permission
 import io.tolgee.model.SsoTenant
 import io.tolgee.model.UserAccount
+import io.tolgee.model.enums.OrganizationRoleType
+import io.tolgee.model.enums.ProjectPermissionType
 import io.tolgee.model.enums.ProjectPermissionType.VIEW
 import io.tolgee.model.slackIntegration.OrganizationSlackWorkspace
 import org.springframework.core.io.ClassPathResource
@@ -56,4 +58,15 @@ class OrganizationBuilder(
     data.tenant = builder
     return builder
   }
+
+  fun inviteUser(buildRole: OrganizationRoleBuilder.() -> Unit = {}): InvitationBuilder {
+    val invitationBuilder = InvitationBuilder()
+    testDataBuilder.data.invitations.add(invitationBuilder)
+    addRole {
+      this.invitation = invitationBuilder.self
+      type = OrganizationRoleType.OWNER
+      invitationBuilder.self.organizationRole = this
+    }.build(buildRole)
+    return invitationBuilder
+  }
 }
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/ProjectBuilder.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/ProjectBuilder.kt
index f77559cd45..0dc23eb92d 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/ProjectBuilder.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/ProjectBuilder.kt
@@ -9,6 +9,7 @@ import io.tolgee.model.contentDelivery.ContentDeliveryConfig
 import io.tolgee.model.contentDelivery.ContentStorage
 import io.tolgee.model.dataImport.Import
 import io.tolgee.model.dataImport.ImportSettings
+import io.tolgee.model.enums.ProjectPermissionType
 import io.tolgee.model.key.Key
 import io.tolgee.model.key.Namespace
 import io.tolgee.model.key.screenshotReference.KeyScreenshotReference
@@ -77,6 +78,20 @@ class ProjectBuilder(
 
   fun addTaskKey(ft: FT<TaskKey>) = addOperation(data.taskKeys, ft)
 
+  fun inviteUser(buildPermission: PermissionBuilder.() -> Unit = {}): InvitationBuilder {
+    val invitationBuilder = InvitationBuilder()
+    testDataBuilder.data.invitations.add(invitationBuilder)
+    addPermission {
+      this.project = this@ProjectBuilder.self
+      this.invitation = invitationBuilder.self
+      this.type = ProjectPermissionType.MANAGE
+      invitationBuilder.self.permission = this
+      this.user = null
+    }.build(buildPermission)
+    return invitationBuilder
+
+  }
+
   fun addKey(
     namespace: String? = null,
     keyName: String,
diff --git a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/TestDataBuilder.kt b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/TestDataBuilder.kt
index f5f07b21ad..3257515dbb 100644
--- a/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/TestDataBuilder.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/development/testDataBuilder/builders/TestDataBuilder.kt
@@ -15,6 +15,7 @@ class TestDataBuilder(fn: (TestDataBuilder.() -> Unit) = {}) {
     val projects = mutableListOf<ProjectBuilder>()
     val organizations = mutableListOf<OrganizationBuilder>()
     val mtCreditBuckets = mutableListOf<MtCreditBucketBuilder>()
+    val invitations = mutableListOf<InvitationBuilder>()
 
     /**
      * These data are populated by external modules and saved via one of the
diff --git a/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt b/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
index c5ed509da0..12240df3b7 100644
--- a/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/dtos/UsageLimits.kt
@@ -7,6 +7,7 @@ package io.tolgee.dtos
  */
 data class UsageLimits(
   val isPayAsYouGo: Boolean,
+  val isTrial: Boolean,
   val strings: Limit,
   val keys: Limit,
   val seats: Limit,
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanSeatLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanSeatLimitExceeded.kt
new file mode 100644
index 0000000000..336d513feb
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/PlanSeatLimitExceeded.kt
@@ -0,0 +1,7 @@
+package io.tolgee.exceptions.limits
+
+import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
+
+class PlanSeatLimitExceeded(required: Long, limit: Long) :
+  BadRequestException(Message.PLAN_SEAT_LIMIT_EXCEEDED, params = listOf(required, limit))
diff --git a/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/SeatSpendingLimitExceeded.kt b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/SeatSpendingLimitExceeded.kt
new file mode 100644
index 0000000000..1dfb2b940c
--- /dev/null
+++ b/backend/data/src/main/kotlin/io/tolgee/exceptions/limits/SeatSpendingLimitExceeded.kt
@@ -0,0 +1,10 @@
+package io.tolgee.exceptions.limits
+
+import io.tolgee.constants.Message
+import io.tolgee.exceptions.BadRequestException
+
+class SeatSpendingLimitExceeded(required: Long, limit: Long) :
+  BadRequestException(
+    Message.SEATS_SPENDING_LIMIT_EXCEEDED,
+    params = listOf(required, limit),
+  )
diff --git a/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt b/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
index 0af115cbd2..a31ae26a5e 100644
--- a/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/model/OrganizationRole.kt
@@ -15,7 +15,7 @@ import org.hibernate.annotations.ColumnDefault
   ],
 )
 class OrganizationRole(
-  @OneToOne
+  @OneToOne(fetch = FetchType.LAZY)
   var invitation: Invitation? = null,
   @Enumerated(EnumType.ORDINAL)
   var type: OrganizationRoleType,
diff --git a/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt b/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
index 5fdb299658..a54321c2e3 100644
--- a/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/model/Permission.kt
@@ -122,10 +122,6 @@ class Permission(
   @ManyToOne
   var project: Project? = null
 
-  val userId: Long?
-    get() = this.user?.id
-  val invitationId: Long?
-    get() = this.invitation?.id
   override val projectId: Long?
     get() = this.project?.id
   override val organizationId: Long?
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/invitation/InvitationService.kt b/backend/data/src/main/kotlin/io/tolgee/service/invitation/InvitationService.kt
index ed879b04af..bce6d79071 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/invitation/InvitationService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/invitation/InvitationService.kt
@@ -1,5 +1,6 @@
 package io.tolgee.service.invitation
 
+import io.tolgee.component.CurrentDateProvider
 import io.tolgee.component.email.InvitationEmailSender
 import io.tolgee.component.reporting.BusinessEventPublisher
 import io.tolgee.component.reporting.OnBusinessEventToCaptureEvent
@@ -20,11 +21,10 @@ import io.tolgee.security.authentication.AuthenticationFacade
 import io.tolgee.service.organization.OrganizationRoleService
 import io.tolgee.service.security.PermissionService
 import io.tolgee.util.Logging
+import io.tolgee.util.addMonths
 import org.apache.commons.lang3.RandomStringUtils
 import org.springframework.stereotype.Service
 import org.springframework.transaction.annotation.Transactional
-import java.time.Duration
-import java.time.Instant
 import java.util.*
 
 @Service
@@ -35,6 +35,7 @@ class InvitationService(
   private val permissionService: PermissionService,
   private val invitationEmailSender: InvitationEmailSender,
   private val businessEventPublisher: BusinessEventPublisher,
+  private val currentDateProvider: CurrentDateProvider,
 ) : Logging {
   @Transactional
   fun create(params: CreateProjectInvitationParams): Invitation {
@@ -64,6 +65,11 @@ class InvitationService(
     return invitationRepository.save(invitation)
   }
 
+  @Transactional
+  fun save(invitation: Invitation): Invitation {
+    return invitationRepository.save(invitation)
+  }
+
   @Transactional
   fun create(params: CreateOrganizationInvitationParams): Invitation {
     checkEmailNotAlreadyInvited(params)
@@ -94,7 +100,7 @@ class InvitationService(
 
   @Transactional
   fun removeExpired() {
-    invitationRepository.deleteAllByCreatedAtLessThan(Date.from(Instant.now().minus(Duration.ofDays(30))))
+    invitationRepository.deleteAllByCreatedAtLessThan(currentDateProvider.date.addMonths(-1))
   }
 
   @Transactional
diff --git a/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt b/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
index 134de09217..ad1aaa2199 100644
--- a/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
+++ b/backend/development/src/main/kotlin/io/tolgee/data/StandardTestDataResult.kt
@@ -4,6 +4,7 @@ data class StandardTestDataResult(
   val projects: List<ProjectModel>,
   val users: List<UserModel>,
   val organizations: List<OrganizationModel>,
+  val invitations: List<InvitationModel>
 ) {
   data class UserModel(
     val name: String,
@@ -21,4 +22,10 @@ data class StandardTestDataResult(
     val slug: String,
     val name: String,
   )
+
+  data class InvitationModel(
+    val projectId: Long?,
+    val organizationId: Long?,
+    val code: String,
+  )
 }
diff --git a/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt b/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt
index a2a50458fa..58b59b133a 100644
--- a/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt
+++ b/backend/development/src/main/kotlin/io/tolgee/data/service/TestDataGeneratingService.kt
@@ -34,6 +34,13 @@ class TestDataGeneratingService(
       data.data.organizations.map {
         StandardTestDataResult.OrganizationModel(id = it.self.id, name = it.self.name, slug = it.self.slug)
       },
+      invitations = data.data.invitations.map {
+        StandardTestDataResult.InvitationModel(
+          projectId = it.self.permission?.project?.id,
+          organizationId = it.self.permission?.organization?.id,
+          code = it.self.code
+        )
+      }
     )
   }
 }
diff --git a/e2e/cypress/common/apiCalls/testData/generator.ts b/e2e/cypress/common/apiCalls/testData/generator.ts
index f191e1272f..0f78175734 100644
--- a/e2e/cypress/common/apiCalls/testData/generator.ts
+++ b/e2e/cypress/common/apiCalls/testData/generator.ts
@@ -25,6 +25,7 @@ export type TestDataStandardResponse = {
   projects: { name: string; id: number }[];
   users: { username: string; name: string; id: number }[];
   organizations: { id: number; name: string; slug: string }[];
+  invitations: { code: string; projectId: number; organizationId: number }[];
 };
 
 export const generateTestDataObject = (resource: string) => ({
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
index 161af35080..74420ab18a 100644
--- a/e2e/cypress/support/dataCyType.d.ts
+++ b/e2e/cypress/support/dataCyType.d.ts
@@ -296,6 +296,7 @@ declare namespace DataCy {
         "integrate-select-api-key-step-content" |
         "integrate-select-api-key-step-label" |
         "integrate-weapon-selector-button" |
+        "invitation-accepted-success-message" |
         "invitation-dialog-close-button" |
         "invitation-dialog-input-field" |
         "invitation-dialog-invite-button" |
@@ -428,6 +429,7 @@ declare namespace DataCy {
         "permissions-menu-inherited-message" |
         "permissions-menu-reset-to-organization" |
         "permissions-menu-save" |
+        "plan_seat_limit_exceeded_while_accepting_invitation_message" |
         "project-ai-prompt-dialog-description-input" |
         "project-ai-prompt-dialog-save" |
         "project-dashboard-activity-chart" |
@@ -521,6 +523,7 @@ declare namespace DataCy {
         "search-select-item" |
         "search-select-new" |
         "search-select-search" |
+        "seat_spending_limit_exceeded_while_accepting_invitation_message" |
         "self-hosted-ee-active-plan" |
         "sensitive-dialog-otp-input" |
         "sensitive-dialog-password-input" |
diff --git a/webapp/src/component/security/AcceptInvitationView.tsx b/webapp/src/component/security/AcceptInvitationView.tsx
index 63d417ea57..965e965614 100644
--- a/webapp/src/component/security/AcceptInvitationView.tsx
+++ b/webapp/src/component/security/AcceptInvitationView.tsx
@@ -13,6 +13,8 @@ import { AvatarImg } from 'tg.component/common/avatar/AvatarImg';
 import LoadingButton from 'tg.component/common/form/LoadingButton';
 import { FullPageLoading } from 'tg.component/common/FullPageLoading';
 import { TranslatedError } from 'tg.translationTools/TranslatedError';
+import { ApiError } from 'tg.service/http/ApiError';
+import { useMessage } from 'tg.hooks/useSuccessMessage';
 
 export const FULL_PAGE_BREAK_POINT = '(max-width: 700px)';
 
@@ -44,6 +46,7 @@ const AcceptInvitationView: React.FC = () => {
   const history = useHistory();
   const match = useRouteMatch();
   const { t } = useTranslate();
+  const message = useMessage();
 
   useWindowTitle(t('accept_invitation_title'));
 
@@ -53,6 +56,28 @@ const AcceptInvitationView: React.FC = () => {
   const acceptCode = useApiMutation({
     url: '/v2/invitations/{code}/accept',
     method: 'get',
+    fetchOptions: {
+      disableErrorNotification: true,
+    },
+    options: {
+      onError(e: ApiError) {
+        if (e.code == 'plan_seat_limit_exceeded') {
+          message.error(
+            <span data-cy="plan_seat_limit_exceeded_while_accepting_invitation_message">
+              <T keyName="plan_seat_limit_exceeded_while_accepting_invitation_message" />
+            </span>
+          );
+          return;
+        }
+        if (e.code == 'seats_spending_limit_exceeded') {
+          message.error(
+            <span data-cy="seat_spending_limit_exceeded_while_accepting_invitation_message">
+              <T keyName="seat_spending_limit_exceeded_while_accepting_invitation_message" />
+            </span>
+          );
+        }
+      },
+    },
   });
 
   const invitationInfo = useApiQuery({
@@ -63,7 +88,7 @@ const AcceptInvitationView: React.FC = () => {
     },
     options: {
       onError(e) {
-        history.replace(LINKS.PROJECT.build());
+        history.replace(LINKS.ROOT.build());
         if (e.code) {
           messageService.error(<TranslatedError code={e.code} />);
         }
@@ -81,7 +106,11 @@ const AcceptInvitationView: React.FC = () => {
         {
           onSuccess() {
             refetchInitialData();
-            messageService.success(<T keyName="invitation_code_accepted" />);
+            messageService.success(
+              <span data-cy="invitation-accepted-success-message">
+                <T keyName="invitation_code_accepted" />
+              </span>
+            );
           },
           onSettled() {
             history.replace(LINKS.PROJECTS.build());
diff --git a/webapp/src/globalContext/useMessageService.tsx b/webapp/src/globalContext/useMessageService.tsx
index 93b2c53dc9..70a01b5c6c 100644
--- a/webapp/src/globalContext/useMessageService.tsx
+++ b/webapp/src/globalContext/useMessageService.tsx
@@ -37,7 +37,11 @@ export const useMessageService = () => {
 
   const actions = {
     showMessage(m: Message) {
-      enqueueSnackbar(m.text, { variant: m.variant, action });
+      enqueueSnackbar(m.text, {
+        variant: m.variant,
+        action,
+        style: { maxWidth: 700 },
+      });
     },
   };
 
diff --git a/webapp/src/hooks/useSuccessMessage.tsx b/webapp/src/hooks/useSuccessMessage.tsx
index c189690009..eede1a8630 100644
--- a/webapp/src/hooks/useSuccessMessage.tsx
+++ b/webapp/src/hooks/useSuccessMessage.tsx
@@ -3,8 +3,6 @@ import { messageService } from '../service/MessageService';
 export const useSuccessMessage = () =>
   messageService.success.bind(messageService);
 
-export const useErrorMessage = () => messageService.error.bind(messageService);
-
 export const useMessage = () => ({
   success: messageService.success.bind(messageService),
   error: messageService.error.bind(messageService),
diff --git a/webapp/src/service/http/ApiHttpService.tsx b/webapp/src/service/http/ApiHttpService.tsx
index 4742c202bc..6282807471 100644
--- a/webapp/src/service/http/ApiHttpService.tsx
+++ b/webapp/src/service/http/ApiHttpService.tsx
@@ -62,17 +62,10 @@ export class ApiHttpService {
               const responseData = await ApiHttpService.getResObject(r);
               const resultError = new ApiError('Api error', responseData);
 
-              let handled = false;
-
-              if (r.status === 400) {
-                handled = errorAction(responseData.code);
-              }
+              resultError.setErrorHandler(() =>
+                handleApiError(r, responseData, init, options)
+              );
 
-              if (!handled) {
-                resultError.setErrorHandler(() =>
-                  handleApiError(r, responseData, init, options)
-                );
-              }
               if (
                 r.status == 403 &&
                 responseData.code === 'expired_super_jwt_token'
diff --git a/webapp/src/service/http/handleApiError.tsx b/webapp/src/service/http/handleApiError.tsx
index c5c8ffa0cb..efe8efa6a7 100644
--- a/webapp/src/service/http/handleApiError.tsx
+++ b/webapp/src/service/http/handleApiError.tsx
@@ -7,6 +7,7 @@ import { parseErrorResponse } from 'tg.fixtures/errorFIxtures';
 import { RequestOptions } from './ApiHttpService';
 import { globalContext } from 'tg.globalContext/globalActions';
 import { LINKS } from 'tg.constants/links';
+import { errorAction } from './errorAction';
 
 export const handleApiError = (
   r: Response,
@@ -63,6 +64,12 @@ export const handleApiError = (
   }
 
   if (r.status == 400 && !options.disableErrorNotification) {
+    const handledByAction = errorAction(resObject.code);
+
+    if (handledByAction) {
+      return;
+    }
+
     const parsed = parseErrorResponse(resObject);
     parsed.forEach((message) =>
       messageService.error(<TranslatedError code={message} />)
diff --git a/webapp/src/translationTools/useErrorTranslation.ts b/webapp/src/translationTools/useErrorTranslation.ts
index a1b4ec6873..3aa251473e 100644
--- a/webapp/src/translationTools/useErrorTranslation.ts
+++ b/webapp/src/translationTools/useErrorTranslation.ts
@@ -165,6 +165,8 @@ export function useErrorTranslation() {
         return t('sso_domain_not_allowed');
       case 'sso_login_forced_for_this_account':
         return t('sso_login_forced_for_this_account');
+      case 'plan_seat_limit_exceeded':
+        return t('plan_seat_limit_exceeded');
       default:
         return code;
     }

From 5d7d527c33e2ddae5612dd4d79ae37df16961f1d Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 12 Mar 2025 10:02:43 +0100
Subject: [PATCH 13/16] feat: Prevent user from creating invitations when there
 are no more seats available

---
 .../ProjectMembersInvitationDialog.ts          | 18 ++++++++++++++++++
 .../projectMembers/ProjectMembersView.ts       | 13 +++++++++++++
 .../src/ee/billing/component/UsageDetailed.tsx |  8 ++++----
 webapp/src/service/http/errorAction.ts         |  3 +++
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts
 create mode 100644 e2e/cypress/compounds/projectMembers/ProjectMembersView.ts

diff --git a/e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts b/e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts
new file mode 100644
index 0000000000..c926ff065e
--- /dev/null
+++ b/e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts
@@ -0,0 +1,18 @@
+export class ProjectMembersInvitationDialog {
+  getEmailField() {
+    return cy.gcy('invitation-dialog-input-field');
+  }
+
+  typeEmail(email: string) {
+    this.getEmailField().type(email);
+  }
+
+  clickInvite() {
+    cy.gcy('invitation-dialog-invite-button').click();
+  }
+
+  fillAndInvite(email: string) {
+    this.typeEmail(email);
+    this.clickInvite();
+  }
+}
diff --git a/e2e/cypress/compounds/projectMembers/ProjectMembersView.ts b/e2e/cypress/compounds/projectMembers/ProjectMembersView.ts
new file mode 100644
index 0000000000..21000bceed
--- /dev/null
+++ b/e2e/cypress/compounds/projectMembers/ProjectMembersView.ts
@@ -0,0 +1,13 @@
+import { HOST } from '../../common/constants';
+import { ProjectMembersInvitationDialog } from './ProjectMembersInvitationDialog';
+
+export class ProjectMembersView {
+  visit(projectId: number) {
+    cy.visit(`${HOST}/projects/${projectId}/manage/permissions`);
+  }
+
+  openInvitationDialog() {
+    cy.gcy('invite-generate-button').click();
+    return new ProjectMembersInvitationDialog();
+  }
+}
diff --git a/webapp/src/ee/billing/component/UsageDetailed.tsx b/webapp/src/ee/billing/component/UsageDetailed.tsx
index 696444c627..52ee75ad74 100644
--- a/webapp/src/ee/billing/component/UsageDetailed.tsx
+++ b/webapp/src/ee/billing/component/UsageDetailed.tsx
@@ -10,15 +10,15 @@ export const UsageDetailed: React.FC<
   const items = [
     {
       getLabel: (params: { limit: number; used: number }) => (
-        <T keyName="dashboard_billing_used_translations_v2" params={params} />
+        <T keyName="dashboard_billing_used_strings_v2" params={params} />
       ),
-      progress: props.translationSlotsProgress,
+      progress: props.stringsProgress,
     },
     {
       getLabel: (params: { limit: number; used: number }) => (
-        <T keyName="dashboard_billing_used_strings_v2" params={params} />
+        <T keyName="dashboard_billing_used_seats" params={params} />
       ),
-      progress: props.stringsProgress,
+      progress: props.seatsProgress,
     },
     {
       getLabel: (params: { limit: number; used: number }) => (
diff --git a/webapp/src/service/http/errorAction.ts b/webapp/src/service/http/errorAction.ts
index 2b86e7b6f9..e00f888fa2 100644
--- a/webapp/src/service/http/errorAction.ts
+++ b/webapp/src/service/http/errorAction.ts
@@ -16,6 +16,9 @@ export const errorAction = (code: string) => {
     case 'seats_spending_limit_exceeded':
       globalContext.actions?.incrementSpendingLimitErrors();
       return true;
+    case 'plan_seat_limit_exceeded':
+      globalContext.actions?.incrementPlanLimitErrors();
+      return true;
     case 'keys_spending_limit_exceeded':
       globalContext.actions?.incrementSpendingLimitErrors();
       return true;

From 99432154c3a0723e41d6d72f2ce8a6c8211f891e Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 12 Mar 2025 10:31:58 +0100
Subject: [PATCH 14/16] chore: Rename the E2e compound classes so it's prefixed
 with "E2"

---
 e2e/cypress/common/translations.ts                        | 8 ++++----
 .../{KeyCreateDialog.ts => E2KeyCreateDialog.ts}          | 8 ++++----
 .../{NamespaceSelector.ts => E2NamespaceSelector.ts}      | 4 ++--
 .../{TranslationsView.ts => E2TranslationsView.ts}        | 6 +++---
 ...ationDialog.ts => E2ProjectMembersInvitationDialog.ts} | 2 +-
 .../{ProjectMembersView.ts => E2ProjectMembersView.ts}    | 6 +++---
 e2e/cypress/compounds/tasks/E2TasksView.ts                | 7 +++++++
 e2e/cypress/e2e/translations/base.cy.ts                   | 6 +++---
 e2e/cypress/e2e/translations/batchJobs.cy.ts              | 2 +-
 e2e/cypress/e2e/translations/namespaces.cy.ts             | 2 +-
 .../e2e/translations/with5translations/withViews.cy.ts    | 2 +-
 11 files changed, 30 insertions(+), 23 deletions(-)
 rename e2e/cypress/compounds/{KeyCreateDialog.ts => E2KeyCreateDialog.ts} (91%)
 rename e2e/cypress/compounds/{NamespaceSelector.ts => E2NamespaceSelector.ts} (80%)
 rename e2e/cypress/compounds/{TranslationsView.ts => E2TranslationsView.ts} (73%)
 rename e2e/cypress/compounds/projectMembers/{ProjectMembersInvitationDialog.ts => E2ProjectMembersInvitationDialog.ts} (86%)
 rename e2e/cypress/compounds/projectMembers/{ProjectMembersView.ts => E2ProjectMembersView.ts} (56%)
 create mode 100644 e2e/cypress/compounds/tasks/E2TasksView.ts

diff --git a/e2e/cypress/common/translations.ts b/e2e/cypress/common/translations.ts
index 3a294926ca..c7a9687189 100644
--- a/e2e/cypress/common/translations.ts
+++ b/e2e/cypress/common/translations.ts
@@ -11,10 +11,10 @@ import { assertMessage, dismissMenu, gcy, gcyAdvanced } from './shared';
 import { buildXpath } from './XpathBuilder';
 import Chainable = Cypress.Chainable;
 import {
-  KeyCreateDialog,
+  E2KeyCreateDialog,
   KeyDialogFillProps,
-} from '../compounds/KeyCreateDialog';
-import { TranslationsView } from '../compounds/TranslationsView';
+} from '../compounds/E2KeyCreateDialog';
+import { E2TranslationsView } from '../compounds/E2TranslationsView';
 
 export function getCellCancelButton() {
   return cy.gcy('translations-cell-cancel-button');
@@ -40,7 +40,7 @@ export const getPluralEditor = (variant: string) => {
 
 export function createTranslation(props: KeyDialogFillProps) {
   waitForGlobalLoading();
-  const translationsView = new TranslationsView();
+  const translationsView = new E2TranslationsView();
   const keyCreateDialog = translationsView.openKeyCreateDialog();
   keyCreateDialog.fillAndSave(props);
 }
diff --git a/e2e/cypress/compounds/KeyCreateDialog.ts b/e2e/cypress/compounds/E2KeyCreateDialog.ts
similarity index 91%
rename from e2e/cypress/compounds/KeyCreateDialog.ts
rename to e2e/cypress/compounds/E2KeyCreateDialog.ts
index 179c7bcf88..3a491b841f 100644
--- a/e2e/cypress/compounds/KeyCreateDialog.ts
+++ b/e2e/cypress/compounds/E2KeyCreateDialog.ts
@@ -1,7 +1,7 @@
 import { assertMessage, gcyAdvanced } from '../common/shared';
-import { NamespaceSelector } from './NamespaceSelector';
+import { E2NamespaceSelector } from './E2NamespaceSelector';
 
-export class KeyCreateDialog {
+export class E2KeyCreateDialog {
   fill({
     key,
     translation,
@@ -84,11 +84,11 @@ export class KeyCreateDialog {
   }
 
   selectNamespace(namespace: string) {
-    new NamespaceSelector().selectNamespace(namespace);
+    new E2NamespaceSelector().selectNamespace(namespace);
   }
 
   getNamespaceSelectElement() {
-    return new NamespaceSelector().getNamespaceSelect();
+    return new E2NamespaceSelector().getNamespaceSelect();
   }
 }
 
diff --git a/e2e/cypress/compounds/NamespaceSelector.ts b/e2e/cypress/compounds/E2NamespaceSelector.ts
similarity index 80%
rename from e2e/cypress/compounds/NamespaceSelector.ts
rename to e2e/cypress/compounds/E2NamespaceSelector.ts
index f5091d904d..863dc0332a 100644
--- a/e2e/cypress/compounds/NamespaceSelector.ts
+++ b/e2e/cypress/compounds/E2NamespaceSelector.ts
@@ -1,4 +1,4 @@
-export class NamespaceSelector {
+export class E2NamespaceSelector {
   getNamespaceSelect() {
     return cy.gcy('search-select');
   }
@@ -12,5 +12,5 @@ export class NamespaceSelector {
 }
 
 export const selectNamespace = (namespace: string) => {
-  new NamespaceSelector().selectNamespace(namespace);
+  new E2NamespaceSelector().selectNamespace(namespace);
 };
diff --git a/e2e/cypress/compounds/TranslationsView.ts b/e2e/cypress/compounds/E2TranslationsView.ts
similarity index 73%
rename from e2e/cypress/compounds/TranslationsView.ts
rename to e2e/cypress/compounds/E2TranslationsView.ts
index 0b187f9482..e34bf5efcf 100644
--- a/e2e/cypress/compounds/TranslationsView.ts
+++ b/e2e/cypress/compounds/E2TranslationsView.ts
@@ -1,7 +1,7 @@
 import { HOST } from '../common/constants';
-import { KeyCreateDialog, KeyDialogFillProps } from './KeyCreateDialog';
+import { E2KeyCreateDialog, KeyDialogFillProps } from './E2KeyCreateDialog';
 
-export class TranslationsView {
+export class E2TranslationsView {
   visit(projectId: number) {
     return cy.visit(`${HOST}/projects/${projectId}/translations`);
   }
@@ -12,7 +12,7 @@ export class TranslationsView {
 
   openKeyCreateDialog() {
     this.getAddButton().click();
-    return new KeyCreateDialog();
+    return new E2KeyCreateDialog();
   }
 
   createKey(props: KeyDialogFillProps) {
diff --git a/e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts b/e2e/cypress/compounds/projectMembers/E2ProjectMembersInvitationDialog.ts
similarity index 86%
rename from e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts
rename to e2e/cypress/compounds/projectMembers/E2ProjectMembersInvitationDialog.ts
index c926ff065e..72b8564a61 100644
--- a/e2e/cypress/compounds/projectMembers/ProjectMembersInvitationDialog.ts
+++ b/e2e/cypress/compounds/projectMembers/E2ProjectMembersInvitationDialog.ts
@@ -1,4 +1,4 @@
-export class ProjectMembersInvitationDialog {
+export class E2ProjectMembersInvitationDialog {
   getEmailField() {
     return cy.gcy('invitation-dialog-input-field');
   }
diff --git a/e2e/cypress/compounds/projectMembers/ProjectMembersView.ts b/e2e/cypress/compounds/projectMembers/E2ProjectMembersView.ts
similarity index 56%
rename from e2e/cypress/compounds/projectMembers/ProjectMembersView.ts
rename to e2e/cypress/compounds/projectMembers/E2ProjectMembersView.ts
index 21000bceed..cf7cfe411e 100644
--- a/e2e/cypress/compounds/projectMembers/ProjectMembersView.ts
+++ b/e2e/cypress/compounds/projectMembers/E2ProjectMembersView.ts
@@ -1,13 +1,13 @@
 import { HOST } from '../../common/constants';
-import { ProjectMembersInvitationDialog } from './ProjectMembersInvitationDialog';
+import { E2ProjectMembersInvitationDialog } from './E2ProjectMembersInvitationDialog';
 
-export class ProjectMembersView {
+export class E2ProjectMembersView {
   visit(projectId: number) {
     cy.visit(`${HOST}/projects/${projectId}/manage/permissions`);
   }
 
   openInvitationDialog() {
     cy.gcy('invite-generate-button').click();
-    return new ProjectMembersInvitationDialog();
+    return new E2ProjectMembersInvitationDialog();
   }
 }
diff --git a/e2e/cypress/compounds/tasks/E2TasksView.ts b/e2e/cypress/compounds/tasks/E2TasksView.ts
new file mode 100644
index 0000000000..5b6611c632
--- /dev/null
+++ b/e2e/cypress/compounds/tasks/E2TasksView.ts
@@ -0,0 +1,7 @@
+import { HOST } from '../../common/constants';
+
+export class E2TasksView {
+  visit(projectId: number) {
+    cy.visit(`${HOST}/projects/${projectId}/tasks`);
+  }
+}
diff --git a/e2e/cypress/e2e/translations/base.cy.ts b/e2e/cypress/e2e/translations/base.cy.ts
index 59052a462a..4dae3dca5d 100644
--- a/e2e/cypress/e2e/translations/base.cy.ts
+++ b/e2e/cypress/e2e/translations/base.cy.ts
@@ -14,7 +14,7 @@ import {
   getClosestContainingText,
 } from '../../common/xPath';
 import { visitProjectLanguages } from '../../common/shared';
-import { TranslationsView } from '../../compounds/TranslationsView';
+import { E2TranslationsView } from '../../compounds/E2TranslationsView';
 
 describe('Translations Base', () => {
   let project: ProjectDTO = null;
@@ -51,7 +51,7 @@ describe('Translations Base', () => {
       cy.wait(100);
       cy.gcy('global-empty-state').should('be.visible');
 
-      const translationsView = new TranslationsView();
+      const translationsView = new E2TranslationsView();
       const keyCreateDialog = translationsView.openKeyCreateDialog();
       keyCreateDialog.getNamespaceSelectElement().should('not.exist');
       keyCreateDialog.fillAndSave({
@@ -126,7 +126,7 @@ describe('Translations Base', () => {
     cy.wait(100);
     cy.gcy('global-empty-state').should('be.visible');
 
-    const translationsView = new TranslationsView();
+    const translationsView = new E2TranslationsView();
     const keyCreateDialog = translationsView.openKeyCreateDialog();
     keyCreateDialog.getNamespaceSelectElement().should('exist');
     keyCreateDialog.fillAndSave({
diff --git a/e2e/cypress/e2e/translations/batchJobs.cy.ts b/e2e/cypress/e2e/translations/batchJobs.cy.ts
index abbc4eb151..bd13d7602a 100644
--- a/e2e/cypress/e2e/translations/batchJobs.cy.ts
+++ b/e2e/cypress/e2e/translations/batchJobs.cy.ts
@@ -16,7 +16,7 @@ import {
   checkZipContent,
   getFileName,
 } from '../../common/export';
-import { selectNamespace } from '../../compounds/NamespaceSelector';
+import { selectNamespace } from '../../compounds/E2NamespaceSelector';
 
 describe('Batch jobs', { scrollBehavior: false }, () => {
   const downloadsFolder = Cypress.config('downloadsFolder');
diff --git a/e2e/cypress/e2e/translations/namespaces.cy.ts b/e2e/cypress/e2e/translations/namespaces.cy.ts
index 2dfd5355c2..8d86b762fe 100644
--- a/e2e/cypress/e2e/translations/namespaces.cy.ts
+++ b/e2e/cypress/e2e/translations/namespaces.cy.ts
@@ -11,7 +11,7 @@ import {
   getPopover,
   selectInSelect,
 } from '../../common/shared';
-import { selectNamespace } from '../../compounds/NamespaceSelector';
+import { selectNamespace } from '../../compounds/E2NamespaceSelector';
 
 describe('namespaces in translations', () => {
   beforeEach(() => {
diff --git a/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts b/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
index afa5faf6d1..795a31264d 100644
--- a/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
+++ b/e2e/cypress/e2e/translations/with5translations/withViews.cy.ts
@@ -18,7 +18,7 @@ import {
 } from '../../../common/translations';
 import { gcy } from '../../../common/shared';
 import { enableNamespaces } from '../../../common/apiCalls/common';
-import { selectNamespace } from '../../../compounds/NamespaceSelector';
+import { selectNamespace } from '../../../compounds/E2NamespaceSelector';
 
 describe('Views with 5 Translations', () => {
   let project: ProjectDTO = null;

From 2b93e1aba8bbd1bc450ff0a6521cc77381b03fc8 Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 12 Mar 2025 11:36:09 +0100
Subject: [PATCH 15/16] feat: Enable inviting agencies and don't count this to
 usage

---
 .../organization/OrganizationController.kt    |  2 +-
 .../repository/OrganizationRepository.kt      | 19 +++++++++-----
 .../organization/OrganizationStatsService.kt  |  6 ++---
 .../tasks/E2OrderTranslationDialog.ts         | 16 ++++++++++++
 e2e/cypress/compounds/tasks/E2TaskForm.ts     | 26 +++++++++++++++++++
 e2e/cypress/compounds/tasks/E2TasksView.ts    |  9 +++++++
 6 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 e2e/cypress/compounds/tasks/E2OrderTranslationDialog.ts
 create mode 100644 e2e/cypress/compounds/tasks/E2TaskForm.ts

diff --git a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
index d78cc8920f..dc3ab87143 100644
--- a/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/api/v2/controllers/organization/OrganizationController.kt
@@ -315,7 +315,7 @@ class OrganizationController(
     val currentPayAsYouGoMtCredits = payAsYouGoCreditsProvider.getUsedPayAsYouGoCredits(organization)
     val availablePayAsYouGoMtCredits = payAsYouGoCreditsProvider.getPayAsYouGoAvailableCredits(organization)
     val currentTranslations = organizationStatsService.getTranslationCount(organizationId)
-    val currentSeats = organizationStatsService.getSeatCount(organizationId)
+    val currentSeats = organizationStatsService.getSeatCountToCountSeats(organizationId)
     val currentKeys = organizationStatsService.getKeyCount(organizationId)
     val limits = limitsProvider.getLimits(organizationId)
 
diff --git a/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt b/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
index da85b5b2e1..19a32bd32d 100644
--- a/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/repository/OrganizationRepository.kt
@@ -230,29 +230,36 @@ interface OrganizationRepository : JpaRepository<Organization, Long> {
   ): OrganizationView?
 
 
+  /**
+   * Returns all organizations where user is counted as seat
+   * For translation agencies, we don't count them as seats
+   */
   @Query(
     """
       select distinct o.id from Organization o
         left join o.memberRoles orl
         left join o.projects pr
-        left join pr.permissions perm
+        left join pr.permissions perm on perm.agency is null
         where orl.user.id = :userId or perm.user.id = :userId
   """
   )
-  fun getAllUsersOrganizations(userId: Long): Set<Long>
+  fun getAllUsersOrganizationsToCountUsageFor(userId: Long): Set<Long>
 
   @Query(
     """
-      select ua.id $ALL_USERS_IN_ORGANIZATION_QUERY
+      select ua.id $ALL_USERS_IN_ORGANIZATION_QUERY_TO_COUNT_USAGE_FOR
     """
   )
-  fun getAllUserIdsInOrganization(organizationId: Long): Set<Long>
+  fun getAllUserIdsInOrganizationToCountSeats(organizationId: Long): Set<Long>
 
   companion object {
-    const val ALL_USERS_IN_ORGANIZATION_QUERY = """from UserAccount ua
+    /**
+     * Query to count all users in organization to count seats
+     */
+    const val ALL_USERS_IN_ORGANIZATION_QUERY_TO_COUNT_USAGE_FOR = """from UserAccount ua
       left join ua.organizationRoles orl
       left join orl.organization o on o.deletedAt is null and o.id = :organizationId
-      left join ua.permissions p 
+      left join ua.permissions p on p.agency is null
       left join p.project pr on pr.deletedAt is null and pr.organizationOwner.id = :organizationId 
       where ua.deletedAt is null and ua.disabledAt is null
       and (pr is not null or o is not null)"""
diff --git a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
index 069b31ed8e..4b9cb10b81 100644
--- a/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
+++ b/backend/data/src/main/kotlin/io/tolgee/service/organization/OrganizationStatsService.kt
@@ -1,6 +1,6 @@
 package io.tolgee.service.organization
 
-import io.tolgee.repository.OrganizationRepository.Companion.ALL_USERS_IN_ORGANIZATION_QUERY
+import io.tolgee.repository.OrganizationRepository.Companion.ALL_USERS_IN_ORGANIZATION_QUERY_TO_COUNT_USAGE_FOR
 import jakarta.persistence.EntityManager
 import org.springframework.stereotype.Service
 import java.math.BigDecimal
@@ -54,10 +54,10 @@ class OrganizationStatsService(
     return result.toLong()
   }
 
-  fun getSeatCount(organizationId: Long): Long {
+  fun getSeatCountToCountSeats(organizationId: Long): Long {
     return entityManager.createQuery(
       """
-      select count(distinct ua.id) $ALL_USERS_IN_ORGANIZATION_QUERY
+      select count(distinct ua.id) $ALL_USERS_IN_ORGANIZATION_QUERY_TO_COUNT_USAGE_FOR
       """.trimIndent(),
     ).setParameter("organizationId", organizationId).singleResult as Long
   }
diff --git a/e2e/cypress/compounds/tasks/E2OrderTranslationDialog.ts b/e2e/cypress/compounds/tasks/E2OrderTranslationDialog.ts
new file mode 100644
index 0000000000..1b4a213691
--- /dev/null
+++ b/e2e/cypress/compounds/tasks/E2OrderTranslationDialog.ts
@@ -0,0 +1,16 @@
+import { E2TaskForm } from './E2TaskForm';
+
+export class E2OrderTranslationDialog {
+  selectAgency() {
+    cy.gcy('translation-agency-item').contains('Agency 1').click();
+    cy.gcy('order-translation-next').click();
+  }
+
+  getTaskForm() {
+    return new E2TaskForm();
+  }
+
+  submit() {
+    cy.gcy('order-translation-submit').click();
+  }
+}
diff --git a/e2e/cypress/compounds/tasks/E2TaskForm.ts b/e2e/cypress/compounds/tasks/E2TaskForm.ts
new file mode 100644
index 0000000000..f20ccae745
--- /dev/null
+++ b/e2e/cypress/compounds/tasks/E2TaskForm.ts
@@ -0,0 +1,26 @@
+import { dismissMenu } from '../../common/shared';
+
+export class E2TaskForm {
+  fill({ name, languages }: { name: string | undefined; languages: string[] }) {
+    this.setName(name);
+    this.setLanguages(languages);
+  }
+
+  setName(name: string | undefined) {
+    if (name) {
+      cy.gcy('create-task-field-name').type(name);
+    }
+  }
+
+  clearStateFilters() {
+    cy.gcy('translations-state-filter-clear').click();
+  }
+
+  setLanguages(languages: string[]) {
+    cy.gcy('create-task-field-languages').click();
+    languages.forEach((l) => {
+      cy.gcy('create-task-field-languages-item').contains(l).click();
+    });
+    dismissMenu();
+  }
+}
diff --git a/e2e/cypress/compounds/tasks/E2TasksView.ts b/e2e/cypress/compounds/tasks/E2TasksView.ts
index 5b6611c632..f1b50ce024 100644
--- a/e2e/cypress/compounds/tasks/E2TasksView.ts
+++ b/e2e/cypress/compounds/tasks/E2TasksView.ts
@@ -1,7 +1,16 @@
+import { E2OrderTranslationDialog } from './E2OrderTranslationDialog';
 import { HOST } from '../../common/constants';
 
 export class E2TasksView {
+  /**
+   * Navigates to the Tasks page for the given project ID.
+   */
   visit(projectId: number) {
     cy.visit(`${HOST}/projects/${projectId}/tasks`);
   }
+
+  openOrderTranslationDialog() {
+    cy.gcy('tasks-header-order-translation').click();
+    return new E2OrderTranslationDialog();
+  }
 }

From ab7e5ce3f793a033e4a5faf9e866b83f3fa31ebf Mon Sep 17 00:00:00 2001
From: Jan Cizmar <cizmar@chlupac.com>
Date: Wed, 12 Mar 2025 17:28:37 +0100
Subject: [PATCH 16/16] feat: Correctly displaying expected usage

---
 .../io/tolgee/hateoas/ee/uasge/UsageModel.kt  |  1 +
 e2e/cypress/support/dataCyType.d.ts           |  9 +++++--
 .../hateoas/assemblers/UsageModelAssembler.kt |  1 +
 .../kotlin/io/tolgee/ee/data/UsageData.kt     |  9 ++++---
 .../{EstimatedCosts.tsx => ExpectedUsage.tsx} | 12 +++------
 ...tton.tsx => ExpectedUsageDialogButton.tsx} | 11 +++++---
 .../src/ee/billing/common/usage/ItemRow.tsx   |  4 ++-
 .../common/usage/PlanUsageEstimatedCosts.tsx  |  4 +--
 .../common/usage/ProportionalUsageItemRow.tsx | 25 +++++++++++++++++--
 .../billing/common/usage/SumUsageItemRow.tsx  |  9 ++++++-
 .../ee/billing/common/usage/UsageTable.tsx    | 12 +++++++--
 .../SelfHostedEeEstimatedCosts.tsx            | 10 ++++----
 .../CloudEstimatedCosts.tsx                   |  4 +--
 .../src/service/billingApiSchema.generated.ts |  6 ++++-
 14 files changed, 84 insertions(+), 33 deletions(-)
 rename webapp/src/ee/billing/common/usage/{EstimatedCosts.tsx => ExpectedUsage.tsx} (83%)
 rename webapp/src/ee/billing/common/usage/{UsageDialogButton.tsx => ExpectedUsageDialogButton.tsx} (85%)

diff --git a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/uasge/UsageModel.kt b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/uasge/UsageModel.kt
index b70f701ca0..d2eecb2a85 100644
--- a/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/uasge/UsageModel.kt
+++ b/backend/api/src/main/kotlin/io/tolgee/hateoas/ee/uasge/UsageModel.kt
@@ -19,5 +19,6 @@ open class UsageModel(
   val seats: AverageProportionalUsageItemModel = AverageProportionalUsageItemModel(),
   val translations: AverageProportionalUsageItemModel = AverageProportionalUsageItemModel(),
   val credits: SumUsageItemModel?,
+  val keys: AverageProportionalUsageItemModel = AverageProportionalUsageItemModel(),
   val total: BigDecimal = 0.toBigDecimal(),
 ) : RepresentationModel<UsageModel>(), Serializable
diff --git a/e2e/cypress/support/dataCyType.d.ts b/e2e/cypress/support/dataCyType.d.ts
index 74420ab18a..a4cdb4a2f2 100644
--- a/e2e/cypress/support/dataCyType.d.ts
+++ b/e2e/cypress/support/dataCyType.d.ts
@@ -131,8 +131,8 @@ declare namespace DataCy {
         "billing-actual-used-monthly-credits" |
         "billing-actual-used-seats" |
         "billing-actual-used-strings" |
-        "billing-estimated-costs" |
-        "billing-estimated-costs-open-button" |
+        "billing-expected-usage" |
+        "billing-expected-usage-open-button" |
         "billing-invoice-item-number" |
         "billing-invoice-usage-button" |
         "billing-invoices-list" |
@@ -157,6 +157,10 @@ declare namespace DataCy {
         "billing-subscriptions-self-hosted-ee-button" |
         "billing-upgrade-preview-confirm-button" |
         "billing-usage-table" |
+        "billing-usage-table-credits" |
+        "billing-usage-table-keys" |
+        "billing-usage-table-seats" |
+        "billing-usage-table-translations" |
         "billing_period_annual" |
         "cell-key-screenshot-dropzone" |
         "cell-key-screenshot-file-input" |
@@ -202,6 +206,7 @@ declare namespace DataCy {
         "edit-pat-dialog-description-input" |
         "edit-pat-dialog-title" |
         "empty-scope-dialog" |
+        "expected-usage-dialog" |
         "expiration-date-field" |
         "expiration-date-picker" |
         "expiration-select" |
diff --git a/ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/hateoas/assemblers/UsageModelAssembler.kt b/ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/hateoas/assemblers/UsageModelAssembler.kt
index f7370a6ac8..869a871c6d 100644
--- a/ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/hateoas/assemblers/UsageModelAssembler.kt
+++ b/ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/hateoas/assemblers/UsageModelAssembler.kt
@@ -18,6 +18,7 @@ class UsageModelAssembler : RepresentationModelAssembler<UsageData, UsageModel>
       subscriptionPrice = data.subscriptionPrice,
       seats = this.periodToModel(data.seatsUsage),
       translations = this.periodToModel(data.translationsUsage),
+      keys = this.periodToModel(data.keysUsage),
       credits = data.creditsUsage?.let { sumToModel(it) },
       total = data.total,
       appliedStripeCredits = data.appliedStripeCredits,
diff --git a/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt b/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
index ddbf97a92b..16c8c04b91 100644
--- a/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
+++ b/ee/backend/app/src/main/kotlin/io/tolgee/ee/data/UsageData.kt
@@ -12,8 +12,9 @@ data class UsageData(
 ) {
   val total: BigDecimal
     get() =
-      seatsUsage.sumOf { it.total } + translationsUsage.sumOf { it.total } + (
-        subscriptionPrice
-          ?: 0.toBigDecimal()
-      ) + (creditsUsage?.total ?: 0.toBigDecimal())
+      seatsUsage.sumOf { it.total } +
+        translationsUsage.sumOf { it.total } +
+        keysUsage.sumOf { it.total } +
+        (subscriptionPrice ?: 0.toBigDecimal()) +
+        (creditsUsage?.total ?: 0.toBigDecimal())
 }
diff --git a/webapp/src/ee/billing/common/usage/EstimatedCosts.tsx b/webapp/src/ee/billing/common/usage/ExpectedUsage.tsx
similarity index 83%
rename from webapp/src/ee/billing/common/usage/EstimatedCosts.tsx
rename to webapp/src/ee/billing/common/usage/ExpectedUsage.tsx
index 4022dec7ad..b0a443c5f0 100644
--- a/webapp/src/ee/billing/common/usage/EstimatedCosts.tsx
+++ b/webapp/src/ee/billing/common/usage/ExpectedUsage.tsx
@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import { useMoneyFormatter } from 'tg.hooks/useLocale';
 import { useTranslate } from '@tolgee/react';
 import { Box, Tooltip } from '@mui/material';
-import { UsageDialogButton } from './UsageDialogButton';
+import { ExpectedUsageDialogButton } from './ExpectedUsageDialogButton';
 
 export type EstimatedCostsProps = {
   useUsage: (
@@ -13,7 +13,7 @@ export type EstimatedCostsProps = {
   estimatedCosts?: number;
 };
 
-export const EstimatedCosts: FC<EstimatedCostsProps> = ({
+export const ExpectedUsage: FC<EstimatedCostsProps> = ({
   useUsage,
   estimatedCosts,
 }) => {
@@ -26,11 +26,7 @@ export const EstimatedCosts: FC<EstimatedCostsProps> = ({
   const usage = useUsage(open);
 
   return (
-    <Box
-      display="flex"
-      justifyContent="right"
-      data-cy="billing-estimated-costs"
-    >
+    <Box display="flex" justifyContent="right" data-cy="billing-expected-usage">
       <Box>
         <Tooltip
           title={t('active-plan-estimated-costs-description')}
@@ -40,7 +36,7 @@ export const EstimatedCosts: FC<EstimatedCostsProps> = ({
         </Tooltip>
         <Box textAlign="right" display="flex" alignItems="center">
           {formatMoney(estimatedCosts || 0)}
-          <UsageDialogButton
+          <ExpectedUsageDialogButton
             usageData={usage.data}
             loading={usage.isLoading}
             onOpen={() => setOpen(true)}
diff --git a/webapp/src/ee/billing/common/usage/UsageDialogButton.tsx b/webapp/src/ee/billing/common/usage/ExpectedUsageDialogButton.tsx
similarity index 85%
rename from webapp/src/ee/billing/common/usage/UsageDialogButton.tsx
rename to webapp/src/ee/billing/common/usage/ExpectedUsageDialogButton.tsx
index 5f3fbd9906..5b10483913 100644
--- a/webapp/src/ee/billing/common/usage/UsageDialogButton.tsx
+++ b/webapp/src/ee/billing/common/usage/ExpectedUsageDialogButton.tsx
@@ -7,7 +7,7 @@ import Dialog from '@mui/material/Dialog';
 import { UsageTable } from './UsageTable';
 import { EmptyListMessage } from 'tg.component/common/EmptyListMessage';
 
-export const UsageDialogButton: FC<{
+export const ExpectedUsageDialogButton: FC<{
   usageData?: components['schemas']['UsageModel'];
   loading: boolean;
   onOpen: () => void;
@@ -25,12 +25,17 @@ export const UsageDialogButton: FC<{
         <IconButton
           size="small"
           onClick={onOpen}
-          data-cy="billing-estimated-costs-open-button"
+          data-cy="billing-expected-usage-open-button"
         >
           <PieChart01 width={18} height={18} />
         </IconButton>
       </Tooltip>
-      <Dialog open={open} onClose={onClose} maxWidth="md">
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="md"
+        data-cy="expected-usage-dialog"
+      >
         <DialogTitle>{t('invoice_usage_dialog_title')}</DialogTitle>
         <DialogContent>
           {usageData ? (
diff --git a/webapp/src/ee/billing/common/usage/ItemRow.tsx b/webapp/src/ee/billing/common/usage/ItemRow.tsx
index 1ace796c42..c8b75c212d 100644
--- a/webapp/src/ee/billing/common/usage/ItemRow.tsx
+++ b/webapp/src/ee/billing/common/usage/ItemRow.tsx
@@ -3,6 +3,7 @@ import { useMoneyFormatter, useNumberFormatter } from 'tg.hooks/useLocale';
 import { IconButton, TableCell, TableRow, Tooltip } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 import { Download02 } from '@untitled-ui/icons-react';
+import React from 'react';
 
 export const ItemRow = (props: {
   item:
@@ -10,6 +11,7 @@ export const ItemRow = (props: {
     | components['schemas']['SumUsageItemModel'];
   label: string;
   onDownloadReport?: () => void;
+  tableRowProps?: React.ComponentProps<typeof TableRow>;
 }) => {
   const formatMoney = useMoneyFormatter();
   const formatNumber = useNumberFormatter();
@@ -17,7 +19,7 @@ export const ItemRow = (props: {
   const { t } = useTranslate();
 
   return (
-    <TableRow>
+    <TableRow {...props.tableRowProps}>
       <TableCell>
         {props.label}{' '}
         {props.onDownloadReport && (
diff --git a/webapp/src/ee/billing/common/usage/PlanUsageEstimatedCosts.tsx b/webapp/src/ee/billing/common/usage/PlanUsageEstimatedCosts.tsx
index b45e2c479f..094c52cbd8 100644
--- a/webapp/src/ee/billing/common/usage/PlanUsageEstimatedCosts.tsx
+++ b/webapp/src/ee/billing/common/usage/PlanUsageEstimatedCosts.tsx
@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { EstimatedCosts, EstimatedCostsProps } from './EstimatedCosts';
+import { ExpectedUsage, EstimatedCostsProps } from './ExpectedUsage';
 import { Box } from '@mui/material';
 
 export const PlanUsageEstimatedCosts: FC<EstimatedCostsProps> = (props) => {
   return (
     <Box>
-      <EstimatedCosts {...props} />
+      <ExpectedUsage {...props} />
     </Box>
   );
 };
diff --git a/webapp/src/ee/billing/common/usage/ProportionalUsageItemRow.tsx b/webapp/src/ee/billing/common/usage/ProportionalUsageItemRow.tsx
index 5d51124159..48b23c3cfc 100644
--- a/webapp/src/ee/billing/common/usage/ProportionalUsageItemRow.tsx
+++ b/webapp/src/ee/billing/common/usage/ProportionalUsageItemRow.tsx
@@ -11,7 +11,6 @@ export const ProportionalUsageItemRow = (props: {
   invoiceId?: number;
   invoiceNumber?: string;
   type: ProportionalUsageType;
-  label: string;
 }) => {
   const downloadReport = useBillingApiMutation({
     url: '/v2/organizations/{organizationId}/billing/invoices/{invoiceId}/usage/{type}.csv',
@@ -46,9 +45,15 @@ export const ProportionalUsageItemRow = (props: {
     undefined;
 
   const label = useLabel(props.type);
+  const dataCyProps = getDataCyProps(props.type);
 
   return (
-    <ItemRow label={label} item={props.item} onDownloadReport={onDownload} />
+    <ItemRow
+      label={label}
+      item={props.item}
+      onDownloadReport={onDownload}
+      tableRowProps={{ ...dataCyProps } as any}
+    />
   );
 };
 
@@ -60,5 +65,21 @@ function useLabel(type: ProportionalUsageType) {
   if (type === 'TRANSLATIONS') {
     return t('invoice_usage_dialog_table_translations_item');
   }
+  if (type === 'KEYS') {
+    return t('invoice_usage_dialog_table_keys_item');
+  }
   return '';
 }
+
+function getDataCyProps(type: ProportionalUsageType) {
+  if (type === 'SEATS') {
+    return { 'data-cy': 'billing-usage-table-seats' };
+  }
+  if (type === 'TRANSLATIONS') {
+    return { 'data-cy': 'billing-usage-table-translations' };
+  }
+  if (type === 'KEYS') {
+    return { 'data-cy': 'billing-usage-table-keys' };
+  }
+  return {};
+}
diff --git a/webapp/src/ee/billing/common/usage/SumUsageItemRow.tsx b/webapp/src/ee/billing/common/usage/SumUsageItemRow.tsx
index af7ba108e1..be7632d4b7 100644
--- a/webapp/src/ee/billing/common/usage/SumUsageItemRow.tsx
+++ b/webapp/src/ee/billing/common/usage/SumUsageItemRow.tsx
@@ -4,6 +4,13 @@ import { ItemRow } from './ItemRow';
 export const SumUsageItemRow = (props: {
   item: components['schemas']['SumUsageItemModel'];
   label: string;
+  dataCy?: string;
 }) => {
-  return <ItemRow label={props.label} item={props.item} />;
+  return (
+    <ItemRow
+      label={props.label}
+      item={props.item}
+      tableRowProps={{ 'data-cy': props.dataCy } as any}
+    />
+  );
 };
diff --git a/webapp/src/ee/billing/common/usage/UsageTable.tsx b/webapp/src/ee/billing/common/usage/UsageTable.tsx
index 6ce58701d6..bcbe056be8 100644
--- a/webapp/src/ee/billing/common/usage/UsageTable.tsx
+++ b/webapp/src/ee/billing/common/usage/UsageTable.tsx
@@ -27,7 +27,6 @@ export const UsageTable: FC<{
             type="SEATS"
             invoiceId={invoiceId}
             invoiceNumber={invoiceNumber}
-            label={t('invoice_usage_dialog_table_seats_item')}
             item={usageData.seats}
           />
         )}
@@ -37,13 +36,22 @@ export const UsageTable: FC<{
             type="TRANSLATIONS"
             invoiceId={invoiceId}
             invoiceNumber={invoiceNumber}
-            label={t('invoice_usage_dialog_table_translations_item')}
             item={usageData.translations}
           />
         )}
 
+        {usageData?.keys.total.valueOf() > 0 && (
+          <ProportionalUsageItemRow
+            type="KEYS"
+            invoiceId={invoiceId}
+            invoiceNumber={invoiceNumber}
+            item={usageData.keys}
+          />
+        )}
+
         {(usageData?.credits?.usedQuantity?.valueOf() || 0) > 0 && (
           <SumUsageItemRow
+            dataCy="billing-usage-table-credits"
             item={usageData!.credits!}
             label={t('invoice_usage_dialog_table_mt_credits_item')}
           />
diff --git a/webapp/src/ee/billing/component/ActiveSubscription/SelfHostedEeEstimatedCosts.tsx b/webapp/src/ee/billing/component/ActiveSubscription/SelfHostedEeEstimatedCosts.tsx
index a281892ca1..b7f4c26dba 100644
--- a/webapp/src/ee/billing/component/ActiveSubscription/SelfHostedEeEstimatedCosts.tsx
+++ b/webapp/src/ee/billing/component/ActiveSubscription/SelfHostedEeEstimatedCosts.tsx
@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { components } from 'tg.service/billingApiSchema.generated';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
-import { PlanUsageEstimatedCosts } from 'tg.ee.module/billing/common/usage/PlanUsageEstimatedCosts';
 import { useOrganization } from 'tg.views/organizations/useOrganization';
+import { ExpectedUsage } from '../../common/usage/ExpectedUsage';
+import { Box } from '@mui/material';
 
 export const SelfHostedEeEstimatedCosts: FC<{
   subscription: components['schemas']['SelfHostedEeSubscriptionModel'];
@@ -23,9 +24,8 @@ export const SelfHostedEeEstimatedCosts: FC<{
     });
 
   return (
-    <PlanUsageEstimatedCosts
-      useUsage={useUsage}
-      estimatedCosts={subscription.estimatedCosts}
-    />
+    <Box>
+      <ExpectedUsage useUsage={useUsage} />
+    </Box>
   );
 };
diff --git a/webapp/src/ee/billing/currentCloudSubscription/CloudEstimatedCosts.tsx b/webapp/src/ee/billing/currentCloudSubscription/CloudEstimatedCosts.tsx
index b823cd721e..038c246c65 100644
--- a/webapp/src/ee/billing/currentCloudSubscription/CloudEstimatedCosts.tsx
+++ b/webapp/src/ee/billing/currentCloudSubscription/CloudEstimatedCosts.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
-import { EstimatedCosts } from '../common/usage/EstimatedCosts';
+import { ExpectedUsage } from '../common/usage/ExpectedUsage';
 
 export const CloudEstimatedCosts: FC<{ estimatedCosts: number }> = (props) => {
   const organization = useOrganization();
@@ -18,5 +18,5 @@ export const CloudEstimatedCosts: FC<{ estimatedCosts: number }> = (props) => {
       },
     });
 
-  return <EstimatedCosts {...props} useUsage={useUsage} />;
+  return <ExpectedUsage {...props} useUsage={useUsage} />;
 };
diff --git a/webapp/src/service/billingApiSchema.generated.ts b/webapp/src/service/billingApiSchema.generated.ts
index dbf390f2c2..6653191708 100644
--- a/webapp/src/service/billingApiSchema.generated.ts
+++ b/webapp/src/service/billingApiSchema.generated.ts
@@ -744,7 +744,10 @@ export interface components {
         | "current_subscription_is_not_trialing"
         | "sorting_and_paging_is_not_supported_when_using_cursor"
         | "strings_metric_are_not_supported"
-        | "keys_seats_metric_are_not_supported_for_slots_fixed_type";
+        | "keys_seats_metric_are_not_supported_for_slots_fixed_type"
+        | "plan_key_limit_exceeded"
+        | "keys_spending_limit_exceeded"
+        | "plan_seat_limit_exceeded";
       params?: { [key: string]: unknown }[];
     };
     ExampleItem: {
@@ -1245,6 +1248,7 @@ export interface components {
       /** @description Relevant for invoices only. When there are applied stripe credits, we need to reduce the total price by this amount. */
       appliedStripeCredits?: number;
       credits?: components["schemas"]["SumUsageItemModel"];
+      keys: components["schemas"]["AverageProportionalUsageItemModel"];
       seats: components["schemas"]["AverageProportionalUsageItemModel"];
       subscriptionPrice?: number;
       total: number;