V2 Payment Features (#4974)

* Added ability to add seats to enterprise * first logged in date on people page * Remove Premium config section * Cleanup add seat flow * Shrink numbers in plan * Make editing text a server feature in the highlights * default to dollar pricing * clear checkout logic when crash * Recongnise location and find pricing * Payment successful page --------- Co-authored-by: Connor Yoh <[email protected]>
2026-07-16 03:20:46 +02:00 · 2025-11-24 16:38:07 +00:00
parent 050408639b
commit 5d18184e46
37 changed files with 2321 additions and 685 deletions
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+
+interface UpdateSeatsModalProps {
+  opened: boolean;
+  onClose: () => void;
+  currentSeats: number;
+  minimumSeats: number;
+  _onSuccess?: () => void;
+  onError?: (error: string) => void;
+  onUpdateSeats?: (newSeats: number) => Promise<string>; // Returns billing portal URL
+}
+
+type UpdateState = {
+  status: 'idle' | 'loading' | 'error';
+  error?: string;
+};
+
+const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
+  opened,
+  onClose,
+  currentSeats,
+  minimumSeats,
+  _onSuccess,
+  onError,
+  onUpdateSeats,
+}) => {
+  const { t } = useTranslation();
+  const [state, setState] = useState<UpdateState>({ status: 'idle' });
+  const [newSeatCount, setNewSeatCount] = useState<number>(minimumSeats);
+
+  // Reset seat count when modal opens
+  useEffect(() => {
+    if (opened) {
+      setNewSeatCount(minimumSeats);
+      setState({ status: 'idle' });
+    }
+  }, [opened, minimumSeats]);
+
+  const handleUpdateSeats = async () => {
+    if (!onUpdateSeats) {
+      setState({
+        status: 'error',
+        error: 'Update function not provided',
+      });
+      return;
+    }
+
+    if (newSeatCount < minimumSeats) {
+      setState({
+        status: 'error',
+        error: t(
+          'billing.seatCountTooLow',
+          'Seat count must be at least {{minimum}} (current number of users)',
+          { minimum: minimumSeats }
+        ),
+      });
+      return;
+    }
+
+    if (newSeatCount === currentSeats) {
+      setState({
+        status: 'error',
+        error: t('billing.seatCountUnchanged', 'Please select a different seat count'),
+      });
+      return;
+    }
+
+    try {
+      setState({ status: 'loading' });
+
+      // Call the update function (will call manage-billing)
+      const portalUrl = await onUpdateSeats(newSeatCount);
+
+      // Redirect to Stripe billing portal
+      console.log('Redirecting to Stripe billing portal:', portalUrl);
+      window.location.href = portalUrl;
+
+      // Note: No need to call onSuccess here since we're redirecting
+      // The return flow will handle success notification
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to update seat count';
+      setState({
+        status: 'error',
+        error: errorMessage,
+      });
+      onError?.(errorMessage);
+    }
+  };
+
+  const handleClose = () => {
+    setState({ status: 'idle' });
+    setNewSeatCount(currentSeats);
+    onClose();
+  };
+
+  const renderContent = () => {
+    if (state.status === 'loading') {
+      return (
+        <Stack align="center" justify="center" style={{ padding: '2rem 0' }}>
+          <Loader size="lg" />
+          <Text size="sm" c="dimmed" mt="md">
+            {t('billing.preparingUpdate', 'Preparing seat update...')}
+          </Text>
+        </Stack>
+      );
+    }
+
+    return (
+      <Stack gap="lg">
+        {state.status === 'error' && (
+          <Alert color="red" title={t('common.error', 'Error')}>
+            {state.error}
+          </Alert>
+        )}
+
+        <Stack gap="md" mt="md">
+          <Group justify="space-between">
+            <Text size="sm" fw={500}>
+              {t('billing.currentSeats', 'Current Seats')}:
+            </Text>
+            <Text size="sm" fw={600}>
+              {currentSeats}
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Text size="sm" fw={500}>
+              {t('billing.minimumSeats', 'Minimum Seats')}:
+            </Text>
+            <Text size="sm" c="dimmed">
+              {minimumSeats} {t('billing.basedOnUsers', '(current users)')}
+            </Text>
+          </Group>
+        </Stack>
+
+        <NumberInput
+          label={t('billing.newSeatCount', 'New Seat Count')}
+          description={t(
+            'billing.newSeatCountDescription',
+            'Select the number of seats for your enterprise license'
+          )}
+          value={newSeatCount}
+          onChange={(value) => setNewSeatCount(typeof value === 'number' ? value : minimumSeats)}
+          min={minimumSeats}
+          max={10000}
+          step={1}
+          size="md"
+          styles={{
+            input: {
+              fontSize: '1.5rem',
+              fontWeight: 500,
+              textAlign: 'center',
+            },
+          }}
+        />
+
+        <Alert color="blue" title={t('billing.whatHappensNext', 'What happens next?')}>
+          <Text size="sm">
+            {t(
+              'billing.stripePortalRedirect',
+              'You will be redirected to Stripe\'s billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.'
+            )}
+          </Text>
+        </Alert>
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="outline" onClick={handleClose}>
+            {t('common.cancel', 'Cancel')}
+          </Button>
+          <Button
+            onClick={handleUpdateSeats}
+            disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}
+          >
+            {t('billing.updateSeats', 'Update Seats')}
+          </Button>
+        </Group>
+      </Stack>
+    );
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      title={
+        <Text fw={600} size="lg">
+          {t('billing.updateEnterpriseSeats', 'Update Enterprise Seats')}
+        </Text>
+      }
+      size="md"
+      centered
+      withCloseButton={true}
+      closeOnEscape={true}
+      closeOnClickOutside={false}
+      zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+    >
+      {renderContent()}
+    </Modal>
+  );
+};
+
+export default UpdateSeatsModal;