fix: Billing fixes

- Remove subscribe button for free plans in the UI
- Throw proper error on backend
- Move billing frontend to ee directory

backend/data/src/main/kotlin/io/tolgee/constants/Message.kt

@@ -235,6 +235,10 @@ enum class Message {
  SLACK_WORKSPACE_ALREADY_CONNECTED,
  SLACK_CONNECTION_ERROR,
  EMAIL_VERIFICATION_CODE_NOT_VALID,
+ CANNOT_SUBSCRIBE_TO_FREE_PLAN,
+ PLAN_AUTO_ASSIGNMENT_ONLY_FOR_FREE_PLANS,
+ PLAN_AUTO_ASSIGNMENT_ONLY_FOR_PRIVATE_PLANS,
+ PLAN_AUTO_ASSIGNMENT_ORGANIZATION_IDS_NOT_IN_FOR_ORGANIZATION_IDS,
  ;
 
  val code: String

e2e/cypress/support/dataCyType.d.ts

@@ -1,5 +1,5 @@
 declare namespace DataCy {
- export type Value =
+ export type Value = 
  "account-security-initial-password-set" |
  "account-security-set-password-instructions-sent" |
  "active-plan-license-key-input" |
@@ -9,7 +9,6 @@ declare namespace DataCy {
  "activity-detail-dialog" |
  "add-box" |
  "administration-access-message" |
- "administration-cloud-plan-field-auto-assign-to-selected" |
  "administration-cloud-plan-field-feature" |
  "administration-cloud-plan-field-free" |
  "administration-cloud-plan-field-included-mt-credits" |
@@ -23,6 +22,7 @@ declare namespace DataCy {
  "administration-cloud-plan-field-stripe-product" |
  "administration-cloud-plan-field-type" |
  "administration-cloud-plan-field-type-item" |
+ "administration-cloud-plan-organization-assign-switch" |
  "administration-cloud-plan-submit-button" |
  "administration-cloud-plans-item" |
  "administration-cloud-plans-item-delete" |
@@ -558,4 +558,4 @@ declare namespace DataCy {
  "webhooks-item-test" |
  "webhooks-list-item" |
  "webhooks-subtitle"
-}
+}

webapp/src/component/billing/ActiveSubscription/SelfHostedEeEstimatedCosts.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { components } from 'tg.service/billingApiSchema.generated';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
-import { PlanUsageEstimatedCosts } from 'tg.views/organizations/billing/common/usage/PlanUsageEstimatedCosts';
+import { PlanUsageEstimatedCosts } from 'tg.ee/billing/common/usage/PlanUsageEstimatedCosts';
 import { useOrganization } from 'tg.views/organizations/useOrganization';
 
 export const SelfHostedEeEstimatedCosts: FC<{

webapp/src/views/organizations/billing/CurrentUsage/CurrentUsage.tsx → webapp/src/ee/billing/CurrentUsage/CurrentUsage.tsx

@@ -15,7 +15,7 @@ import { PlanMetric } from './PlanMetric';
 import { MtHint } from 'tg.component/billing/MtHint';
 import { EstimatedCosts } from '../common/usage/EstimatedCosts';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
-import { useOrganization } from '../../useOrganization';
+import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { getProgressData } from 'tg.component/billing/utils';
 import { StringsHint } from 'tg.component/billing/Hints';
 

webapp/src/views/organizations/billing/CustomerPortal/CustomerPortal.tsx → webapp/src/ee/billing/CustomerPortal/CustomerPortal.tsx

@@ -1,12 +1,12 @@
-import { Button, styled, Typography, Box } from '@mui/material';
+import { Box, Button, styled, Typography } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 
 import { useBillingApiMutation } from 'tg.service/http/useQueryApi';
 import { useOrganization } from 'tg.views/organizations/useOrganization';
 import {
  StyledBillingSection,
- StyledBillingSectionTitle,
  StyledBillingSectionHeader,
+ StyledBillingSectionTitle,
 } from '../BillingSection';
 import StripeLogoSvg from 'tg.svgs/stripeLogo.svg?react';
 

webapp/src/views/organizations/billing/Invoices/InvoiceUsage.tsx → webapp/src/ee/billing/Invoices/InvoiceUsage.tsx

@@ -11,7 +11,7 @@ import { components } from 'tg.service/billingApiSchema.generated';
 import { useTranslate } from '@tolgee/react';
 import { useBillingApiQuery } from 'tg.service/http/useQueryApi';
 import Dialog from '@mui/material/Dialog';
-import { useOrganization } from '../../useOrganization';
+import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { EmptyListMessage } from 'tg.component/common/EmptyListMessage';
 import { TotalTable } from '../common/usage/TotalTable';
 import { UsageTable } from '../common/usage/UsageTable';

webapp/src/views/organizations/billing/Invoices/OrganizationInvoicesView.tsx → webapp/src/ee/billing/Invoices/OrganizationInvoicesView.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
 import { useTranslate } from '@tolgee/react';
 
-import { BaseOrganizationSettingsView } from '../../components/BaseOrganizationSettingsView';
+import { BaseOrganizationSettingsView } from 'tg.views/organizations/components/BaseOrganizationSettingsView';
 import { LINKS } from 'tg.constants/links';
-import { useOrganization } from '../../useOrganization';
+import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { CustomerPortal } from '../CustomerPortal/CustomerPortal';
 import { Invoices } from './Invoices';
 import { styled } from '@mui/material';

webapp/src/views/organizations/billing/OrganizationBillingTestClockHelperView.tsx → webapp/src/ee/billing/OrganizationBillingTestClockHelperView.tsx

@@ -6,9 +6,9 @@ import {
 } from 'react';
 import { useTranslate } from '@tolgee/react';
 
-import { BaseOrganizationSettingsView } from '../components/BaseOrganizationSettingsView';
+import { BaseOrganizationSettingsView } from 'tg.views/organizations/components/BaseOrganizationSettingsView';
 import { LINKS } from 'tg.constants/links';
-import { useOrganization } from '../useOrganization';
+import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { UseQueryResult } from 'react-query';
 import { useApiMutation, useApiQuery } from 'tg.service/http/useQueryApi';
 import {

webapp/src/views/organizations/billing/Subscriptions/OrganizationSubscriptionsView.tsx → webapp/src/ee/billing/Subscriptions/OrganizationSubscriptionsView.tsx

@@ -2,9 +2,9 @@ import { FunctionComponent, useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { T, useTranslate } from '@tolgee/react';
 
-import { BaseOrganizationSettingsView } from '../../components/BaseOrganizationSettingsView';
+import { BaseOrganizationSettingsView } from 'tg.views/organizations/components/BaseOrganizationSettingsView';
 import { LINKS, PARAMS } from 'tg.constants/links';
-import { useOrganization } from '../../useOrganization';
+import { useOrganization } from 'tg.views/organizations/useOrganization';
 import { useBillingApiMutation } from 'tg.service/http/useQueryApi';
 import { useMessage } from 'tg.hooks/useSuccessMessage';
 import { PlansCloud } from './cloud/PlansCloud';

webapp/src/views/organizations/billing/Subscriptions/cloud/CloudPlanAction.tsx → webapp/src/ee/billing/Subscriptions/cloud/CloudPlanAction.tsx

@@ -1,6 +1,6 @@
 import { Box, styled } from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
-import { PrepareUpgradeDialog } from 'tg.views/organizations/billing/PrepareUpgradeDialog';
+import { PrepareUpgradeDialog } from '../../PrepareUpgradeDialog';
 
 import { usePlan } from 'tg.component/billing/Plan/usePlan';
 import { confirmation } from 'tg.hooks/confirmation';
@@ -24,6 +24,7 @@ type Props = {
  custom?: boolean;
  planId: number;
  period: BillingPeriodType;
+ show?: boolean;
 };
 
 export const PlanAction = ({
@@ -33,6 +34,7 @@ export const PlanAction = ({
  organizationHasSomeSubscription,
  planId,
  period,
+ show,
 }: Props) => {
  const {
  cancelMutation,
@@ -85,19 +87,22 @@ export const PlanAction = ({
  }
 
  const { loading, onClick, label } = getLabelAndAction();
+ const shouldShow = show == undefined || show;
 
  return (
  <StyledContainer>
- <LoadingButton
- data-cy="billing-plan-action-button"
- variant="contained"
- color={custom ? 'info' : 'primary'}
- size="medium"
- loading={loading}
- onClick={onClick}
- >
- {label}
- </LoadingButton>
+ {shouldShow && (
+ <LoadingButton
+ data-cy="billing-plan-action-button"
+ variant="contained"
+ color={custom ? 'info' : 'primary'}
+ size="medium"
+ loading={loading}
+ onClick={onClick}
+ >
+ {label}
+ </LoadingButton>
+ )}
  {prepareUpgradeMutation.data && (
  <PrepareUpgradeDialog
  data={prepareUpgradeMutation.data}

webapp/src/views/organizations/billing/Subscriptions/cloud/PlansCloudList.tsx → webapp/src/ee/billing/Subscriptions/cloud/PlansCloudList.tsx

@@ -136,6 +136,7 @@ export const PlansCloudList: React.FC<BillingPlansProps> = ({
  active={isActive(plan)}
  ended={isEnded(plan)}
  custom={custom}
+ show={!plan.free}
  organizationHasSomeSubscription={
  !activeSubscription.plan.free
  }

webapp/src/views/administration/AdministrationCloudPlanCreateView.tsx → webapp/src/ee/billing/administration/AdministrationCloudPlanCreateView.tsx

@@ -1,12 +1,12 @@
 import { Box, Typography } from '@mui/material';
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import { useHistory } from 'react-router-dom';
 
 import { DashboardPage } from 'tg.component/layout/DashboardPage';
 import { LINKS } from 'tg.constants/links';
 import { useMessage } from 'tg.hooks/useSuccessMessage';
 import { useBillingApiMutation } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { CloudPlanForm } from './components/CloudPlanForm';
 
 export const AdministrationCloudPlanCreateView = () => {
@@ -85,7 +85,7 @@ export const AdministrationCloudPlanCreateView = () => {
  public: true,
  forOrganizationIds: [],
  free: false,
- autoAssign: false,
+ autoAssignOrganizationIds: [],
  }}
  />
  </Box>

webapp/src/views/administration/AdministrationCloudPlanEditView.tsx → webapp/src/ee/billing/administration/AdministrationCloudPlanEditView.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { SpinnerProgress } from 'tg.component/SpinnerProgress';
 
@@ -10,7 +10,7 @@ import {
  useBillingApiMutation,
  useBillingApiQuery,
 } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { CloudPlanForm } from './components/CloudPlanForm';
 
 export const AdministrationCloudPlanEditView = () => {
@@ -71,7 +71,7 @@ export const AdministrationCloudPlanEditView = () => {
  loading={planEditLoadable.isLoading}
  initialData={{
  ...planData,
- autoAssign: false,
+ autoAssignOrganizationIds: [],
  includedUsage: {
  seats: planData.includedUsage.seats,
  mtCredits: planData.includedUsage.mtCredits,

webapp/src/views/administration/AdministrationCloudPlansView.tsx → webapp/src/ee/billing/administration/AdministrationCloudPlansView.tsx

@@ -1,12 +1,12 @@
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import {
- ListItem,
- ListItemText,
- Paper,
- Button,
  Box,
+ Button,
  Chip,
  IconButton,
+ ListItem,
+ ListItemText,
+ Paper,
 } from '@mui/material';
 
 import { DashboardPage } from 'tg.component/layout/DashboardPage';
@@ -15,7 +15,7 @@ import {
  useBillingApiMutation,
  useBillingApiQuery,
 } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { Link } from 'react-router-dom';
 import { Delete } from '@mui/icons-material';
 import { useMessage } from 'tg.hooks/useSuccessMessage';

webapp/src/views/administration/AdministrationEeLicenseView.tsx → webapp/src/ee/billing/administration/AdministrationEeLicenseView.tsx

@@ -3,11 +3,11 @@ import { Box, styled } from '@mui/material';
 
 import { DashboardPage } from 'tg.component/layout/DashboardPage';
 import { useApiQuery } from 'tg.service/http/useQueryApi';
-import { SetupLicenceKey } from './eeLicense/SetupLicenceKey';
-import { ActiveEeLicense } from './eeLicense/ActiveEeLicense';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { SetupLicenceKey } from '../../eeLicense/SetupLicenceKey';
+import { ActiveEeLicense } from '../../eeLicense/ActiveEeLicense';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { LINKS } from 'tg.constants/links';
-import { EeLicenseHint } from './eeLicense/EeLicenseHint';
+import { EeLicenseHint } from '../../eeLicense/EeLicenseHint';
 
 const StyledWrapper = styled('div')`
  display: flex;

webapp/src/views/administration/AdministrationEePlanCreateView.tsx → webapp/src/ee/billing/administration/AdministrationEePlanCreateView.tsx

@@ -1,12 +1,12 @@
 import { Box, Typography } from '@mui/material';
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import { useHistory } from 'react-router-dom';
 
 import { DashboardPage } from 'tg.component/layout/DashboardPage';
 import { LINKS } from 'tg.constants/links';
 import { useMessage } from 'tg.hooks/useSuccessMessage';
 import { useBillingApiMutation } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { EePlanForm } from './components/EePlanForm';
 
 export const AdministrationEePlanCreateView = () => {

webapp/src/views/administration/AdministrationEePlanEditView.tsx → webapp/src/ee/billing/administration/AdministrationEePlanEditView.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { SpinnerProgress } from 'tg.component/SpinnerProgress';
@@ -10,7 +10,7 @@ import {
  useBillingApiMutation,
  useBillingApiQuery,
 } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { EePlanForm } from './components/EePlanForm';
 
 export const AdministrationEePlanEditView = () => {

webapp/src/views/administration/AdministrationEePlansView.tsx → webapp/src/ee/billing/administration/AdministrationEePlansView.tsx

@@ -1,12 +1,12 @@
-import { useTranslate, T } from '@tolgee/react';
+import { T, useTranslate } from '@tolgee/react';
 import {
- ListItem,
- ListItemText,
- Paper,
- Button,
  Box,
+ Button,
  Chip,
  IconButton,
+ ListItem,
+ ListItemText,
+ Paper,
 } from '@mui/material';
 
 import { DashboardPage } from 'tg.component/layout/DashboardPage';
@@ -15,7 +15,7 @@ import {
  useBillingApiMutation,
  useBillingApiQuery,
 } from 'tg.service/http/useQueryApi';
-import { BaseAdministrationView } from './components/BaseAdministrationView';
+import { BaseAdministrationView } from 'tg.views/administration/components/BaseAdministrationView';
 import { Link } from 'react-router-dom';
 import { Delete } from '@mui/icons-material';
 import { useMessage } from 'tg.hooks/useSuccessMessage';

webapp/src/ee/billing/administration/components/AssignSwitchCheckbox.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { FormControlLabel, Switch } from '@mui/material';
+import { useFormikContext } from 'formik';
+import { CloudPlanFormData } from './CloudPlanForm';
+import { useTranslate } from '@tolgee/react';
+
+type AssignCheckboxProps = {
+ organizationId: number;
+};
+
+export const AssignSwitchCheckbox: FC<AssignCheckboxProps> = (props) => {
+ const { setFieldValue, values } = useFormikContext<CloudPlanFormData>();
+
+ const value = values.autoAssignOrganizationIds;
+ const checked = value.includes(props.organizationId);
+
+ const { t } = useTranslate();
+
+ const getNewValue = (value: number[], organizationId: number) => {
+ if (value.includes(organizationId)) {
+ return value.filter((id) => id !== organizationId);
+ }
+ return [...value, organizationId];
+ };
+
+ const isInList = values.forOrganizationIds.includes(props.organizationId);
+
+ const onChange = () => {
+ const newValue = getNewValue(value, props.organizationId);
+ setFieldValue('autoAssignOrganizationIds', newValue);
+ };
+
+ return (
+ <>
+ {values.free && (
+ <FormControlLabel
+ sx={{ ml: 1 }}
+ disabled={!isInList}
+ control={<Switch checked={checked} onChange={onChange} />}
+ data-cy="administration-cloud-plan-organization-assign-switch"
+ label={t('administration_cloud_plan_organization_field_auto_assign')}
+ />
+ )}
+ </>
+ );
+};