esign/apps/remix/app/components/dialogs/admin-swap-subscription-dialog.tsx

import { useEffect, useMemo, useState } from 'react';

import { useLingui } from '@lingui/react/macro';
import { Trans } from '@lingui/react/macro';

import { AppError } from '@hanzo/esign-lib/errors/app-error';
import { useZapMutation, useZapQuery, useZapUtils } from '@hanzo/esign-trpc/zap/react';
import type { TFindAdminOrganisationsResponse } from '@hanzo/esign-trpc/server/admin-router/find-admin-organisations.types';
import type {
  TSwapOrganisationSubscriptionRequest,
  TSwapOrganisationSubscriptionResponse,
} from '@hanzo/esign-trpc/server/admin-router/swap-organisation-subscription.types';
import { Alert, AlertDescription } from '@hanzo/esign-ui/primitives/alert';
import { Button } from '@hanzo/esign-ui/primitives/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@hanzo/esign-ui/primitives/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@hanzo/esign-ui/primitives/select';
import { useToast } from '@hanzo/esign-ui/primitives/use-toast';

export type AdminSwapSubscriptionDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  sourceOrganisationId: string;
  sourceOrganisationName: string;
  userId: number;
};

export const AdminSwapSubscriptionDialog = ({
  open,
  onOpenChange,
  sourceOrganisationId,
  sourceOrganisationName,
  userId,
}: AdminSwapSubscriptionDialogProps) => {
  const { t } = useLingui();
  const { toast } = useToast();

  const [selectedOrgId, setSelectedOrgId] = useState<string>('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { data: orgsData } = useZapQuery<TFindAdminOrganisationsResponse>(
    'admin.organisation.find',
    {
      ownerUserId: userId,
      perPage: 100,
    },
    {
      enabled: open,
    },
  );

  const trpcUtils = useZapUtils();

  const eligibleOrgs = useMemo(() => {
    if (!orgsData?.data) {
      return [];
    }

    return orgsData.data.filter((org) => {
      if (org.id === sourceOrganisationId) {
        return false;
      }

      const hasActiveSubscription =
        org.subscription &&
        (org.subscription.status === 'ACTIVE' || org.subscription.status === 'PAST_DUE');

      return !hasActiveSubscription;
    });
  }, [orgsData, sourceOrganisationId]);

  const selectedOrg = eligibleOrgs.find((org) => org.id === selectedOrgId);

  const { mutateAsync: swapSubscription } = useZapMutation<
    TSwapOrganisationSubscriptionResponse,
    TSwapOrganisationSubscriptionRequest
  >('admin.organisation.swapSubscription');

  const onSubmit = async () => {
    if (!selectedOrgId) {
      return;
    }

    setIsSubmitting(true);

    try {
      await swapSubscription({
        sourceOrganisationId,
        targetOrganisationId: selectedOrgId,
      });

      await trpcUtils.invalidate('admin.organisation.find');
      await trpcUtils.invalidate('admin.organisation.get');

      onOpenChange(false);

      toast({
        title: t`Success`,
        description: t`Subscription moved successfully`,
        duration: 5000,
      });
    } catch (err) {
      const error = AppError.parseError(err);

      console.error(error);

      toast({
        title: t`Error`,
        description: t`Failed to move subscription. Please try again.`,
        variant: 'destructive',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  useEffect(() => {
    if (!open) {
      setSelectedOrgId('');
    }
  }, [open]);

  return (
    <Dialog open={open} onOpenChange={(value) => !isSubmitting && onOpenChange(value)}>
      <DialogContent position="center">
        <DialogHeader>
          <DialogTitle>
            <Trans>Move Subscription</Trans>
          </DialogTitle>

          <DialogDescription>
            <Trans>
              Move the subscription from "{sourceOrganisationName}" to another organisation owned by
              this user.
            </Trans>
          </DialogDescription>
        </DialogHeader>

        <fieldset className="flex flex-col space-y-4" disabled={isSubmitting}>
          <div className="flex flex-col gap-2">
            <label className="text-sm font-medium">
              <Trans>Target Organisation</Trans>
            </label>

            <Select value={selectedOrgId} onValueChange={setSelectedOrgId}>
              <SelectTrigger>
                <SelectValue placeholder={t`Select an organisation`} />
              </SelectTrigger>
              <SelectContent>
                {eligibleOrgs.map((org) => (
                  <SelectItem key={org.id} value={org.id}>
                    {org.name} ({org.url})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {eligibleOrgs.length === 0 && orgsData && (
              <p className="text-sm text-muted-foreground">
                <Trans>No eligible organisations found. The target must be on the free plan.</Trans>
              </p>
            )}
          </div>

          {selectedOrg && (
            <Alert variant="warning">
              <AlertDescription className="mt-0">
                <Trans>
                  This will move the subscription from "{sourceOrganisationName}" to "
                  {selectedOrg.name}". The source organisation will be reset to the free plan.
                </Trans>
              </AlertDescription>
            </Alert>
          )}

          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
              <Trans>Cancel</Trans>
            </Button>

            <Button
              type="button"
              onClick={onSubmit}
              disabled={!selectedOrgId}
              loading={isSubmitting}
            >
              <Trans>Move Subscription</Trans>
            </Button>
          </DialogFooter>
        </fieldset>
      </DialogContent>
    </Dialog>
  );
};