calendar/apps/web/modules/ee/deployment/components/CreateLicenseKeyForm.tsx

"use client";

import type { SessionContextValue } from "next-auth/react";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useCallback, useState } from "react";
import { Controller, useForm } from "react-hook-form";

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { Ensure } from "@calcom/types/utils";
import { showToast } from "@calcom/ui/components/toast";

import { UserPermissionRole } from "@calcom/prisma/enums";

import { Alert, AlertDescription } from "@coss/ui/components/alert";
import { Button } from "@coss/ui/components/button";
import {
  Card,
  CardFrame,
  CardFrameDescription,
  CardFrameFooter,
  CardFrameHeader,
  CardFrameTitle,
  CardPanel,
} from "@coss/ui/components/card";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@coss/ui/components/dialog";
import { Field, FieldLabel } from "@coss/ui/components/field";
import { Form } from "@coss/ui/components/form";
import { Input } from "@coss/ui/components/input";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@coss/ui/components/select";
import { ToggleGroup, Toggle } from "@coss/ui/components/toggle-group";

function CopyButton({ value }: { value: string }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(() => {
    navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, [value]);

  return (
    <Button type="button" variant="ghost" size="icon-sm" onClick={handleCopy}>
      {copied ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
    </Button>
  );
}

export const CreateANewLicenseKeyForm = () => {
  const session = useSession();
  if (session.data?.user.role !== "ADMIN") {
    return null;
  }
  // @ts-expect-error session can't be null due to the early return
  return <CreateANewLicenseKeyFormChild session={session} />;
};

enum BillingType {
  PER_BOOKING = "PER_BOOKING",
  PER_USER = "PER_USER",
}

enum BillingPeriod {
  MONTHLY = "MONTHLY",
  ANNUALLY = "ANNUALLY",
}

interface LicenseFormValues {
  billingType: BillingType;
  entityCount: number;
  entityPrice: number;
  billingPeriod: BillingPeriod;
  overages: number;
  billingEmail: string;
}

interface CouponFormValues {
  couponName: string;
  billingEmail: string;
  code: string;
  discountType: "percent" | "fixed";
  discountAmount: number;
  duration: "once" | "repeating" | "forever";
  durationInMonths: number;
}

const CreateANewLicenseKeyFormChild = ({ session }: { session: Ensure<SessionContextValue, "data"> }) => {
  const { t } = useLocale();
  const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
  const [stripeCheckoutUrl, setStripeCheckoutUrl] = useState<string | null>(null);
  const [couponCode, setCouponCode] = useState<string | null>(null);
  const isAdmin = session.data.user.role === UserPermissionRole.ADMIN;

  const licenseForm = useForm<LicenseFormValues>({
    defaultValues: {
      billingType: BillingType.PER_BOOKING,
      billingPeriod: BillingPeriod.MONTHLY,
      entityCount: 500,
      overages: 99,
      entityPrice: 50,
      billingEmail: undefined,
    },
  });

  const licenseMutation = trpc.viewer.admin.createSelfHostedLicense.useMutation({
    onSuccess: async (values) => {
      showToast("Success: We have created a stripe payment URL for this billing email", "success");
      setStripeCheckoutUrl(values.stripeCheckoutUrl);
    },
    onError: async (err) => {
      setServerErrorMessage(err.message);
    },
  });

  const watchedBillingPeriod = licenseForm.watch("billingPeriod");
  const watchedBillingEmail = licenseForm.watch("billingEmail");
  const watchedEntityCount = licenseForm.watch("entityCount");
  const watchedEntityPrice = licenseForm.watch("entityPrice");

  function calculateMonthlyPrice() {
    const occurrence = watchedBillingPeriod === "MONTHLY" ? 1 : 12;
    const sum = watchedEntityCount * watchedEntityPrice;
    return `$ ${sum / 100} / ${occurrence} months`;
  }

  return (
    <CardFrame className="w-full">
      <CardFrameHeader>
        <CardFrameTitle>Create License Key</CardFrameTitle>
        <CardFrameDescription>
          Configure pricing and generate a Stripe checkout URL for the customer.
        </CardFrameDescription>
      </CardFrameHeader>

      {!stripeCheckoutUrl ? (
        <Card>
          <CardPanel>
            <Form
              onSubmit={(event) => {
                event.preventDefault();
                licenseForm.handleSubmit((values) => {
                  licenseMutation.mutate(values);
                })(event);
              }}>
              {serverErrorMessage && (
                <Alert variant="error">
                  <AlertDescription>{serverErrorMessage}</AlertDescription>
                </Alert>
              )}

              <Controller
                name="billingPeriod"
                control={licenseForm.control}
                render={({ field: { value, onChange } }) => (
                  <Field>
                    <FieldLabel>Billing Period</FieldLabel>
                    <ToggleGroup
                      className="w-full"
                      variant="outline"
                      value={[value]}
                      onValueChange={(newValue) => {
                        if (newValue.length > 0) onChange(newValue[0]);
                      }}>
                      <Toggle value="MONTHLY" className="flex-1">
                        Monthly
                      </Toggle>
                      <Toggle value="ANNUALLY" className="flex-1">
                        Annually
                      </Toggle>
                    </ToggleGroup>
                  </Field>
                )}
              />

              <Controller
                name="billingEmail"
                control={licenseForm.control}
                rules={{ required: t("must_enter_billing_email") }}
                render={({ field: { value, onChange } }) => (
                  <Field>
                    <FieldLabel>Billing Email for Customer</FieldLabel>
                    <Input
                      placeholder="john@acme.com"
                      disabled={!isAdmin}
                      defaultValue={value}
                      onChange={onChange}
                      autoComplete="off"
                    />
                  </Field>
                )}
              />

              <Controller
                name="billingType"
                control={licenseForm.control}
                render={({ field: { value, onChange } }) => (
                  <Field>
                    <FieldLabel>Booking Type</FieldLabel>
                    <ToggleGroup
                      className="w-full"
                      variant="outline"
                      value={[value]}
                      onValueChange={(newValue) => {
                        if (newValue.length > 0) onChange(newValue[0]);
                      }}>
                      <Toggle value="PER_BOOKING" className="flex-1">
                        Per Booking
                      </Toggle>
                      <Toggle value="PER_USER" className="flex-1">
                        Per User
                      </Toggle>
                    </ToggleGroup>
                  </Field>
                )}
              />

              <div className="flex flex-wrap gap-2 *:flex-1">
                <Controller
                  name="entityCount"
                  control={licenseForm.control}
                  rules={{ required: "Must enter a total of billable users" }}
                  render={({ field: { value, onChange } }) => (
                    <Field>
                      <FieldLabel>Total entities included</FieldLabel>
                      <Input
                        type="number"
                        placeholder="100"
                        defaultValue={value}
                        onChange={(event) => onChange(+event.target.value)}
                      />
                    </Field>
                  )}
                />
                <Controller
                  name="entityPrice"
                  control={licenseForm.control}
                  rules={{ required: "Must enter fixed price per user" }}
                  render={({ field: { value, onChange } }) => (
                    <Field>
                      <FieldLabel>Fixed price per entity ($)</FieldLabel>
                      <Input
                        type="number"
                        defaultValue={value / 100}
                        onChange={(event) => onChange(+event.target.value * 100)}
                      />
                    </Field>
                  )}
                />
              </div>

              <Controller
                name="overages"
                control={licenseForm.control}
                rules={{ required: "Must enter overages" }}
                render={({ field: { value, onChange } }) => (
                  <Field>
                    <FieldLabel>Overages ($)</FieldLabel>
                    <Input
                      type="number"
                      placeholder="0.99"
                      disabled={!isAdmin}
                      defaultValue={value / 100}
                      onChange={(event) => onChange(+event.target.value * 100)}
                      autoComplete="off"
                    />
                  </Field>
                )}
              />

              <Button
                type="submit"
                disabled={licenseForm.formState.isSubmitting || licenseMutation.isPending}
                className="w-full">
                {t("continue")} - {calculateMonthlyPrice()}
              </Button>
            </Form>
          </CardPanel>
        </Card>
      ) : (
        <Card>
          <CardPanel>
            <div className="flex flex-col gap-4">
              <Field>
                <FieldLabel>Checkout URL</FieldLabel>
                <div className="flex w-full items-center gap-1">
                  <Input disabled value={stripeCheckoutUrl} className="min-w-0 flex-1" />
                  <CopyButton value={stripeCheckoutUrl} />
                </div>
              </Field>
              {couponCode && (
                <Field>
                  <FieldLabel>Coupon Code</FieldLabel>
                  <div className="flex w-full items-center gap-1">
                    <Input disabled value={couponCode} className="min-w-0 flex-1" />
                    <CopyButton value={couponCode} />
                  </div>
                </Field>
              )}
              <Button
                variant="secondary"
                className="w-full"
                onClick={() => {
                  licenseForm.reset();
                  setStripeCheckoutUrl(null);
                  setCouponCode(null);
                }}>
                Back
              </Button>
            </div>
          </CardPanel>
        </Card>
      )}

      <CardFrameFooter>
        <p className="text-muted-foreground text-xs">
          Need a coupon for this customer?{" "}
          <CreateCouponDialog
            billingEmail={watchedBillingEmail ?? ""}
            onCouponCreated={(code) => setCouponCode(code)}
          />
        </p>
      </CardFrameFooter>
    </CardFrame>
  );
};

function CreateCouponDialog({
  billingEmail,
  onCouponCreated,
}: {
  billingEmail: string;
  onCouponCreated: (code: string) => void;
}) {
  const [couponResult, setCouponResult] = useState<{
    promotionCode: string;
    couponId: string;
  } | null>(null);
  const [couponError, setCouponError] = useState<string | null>(null);
  const [open, setOpen] = useState(false);

  const couponForm = useForm<CouponFormValues>({
    defaultValues: {
      couponName: "",
      billingEmail: "",
      code: "",
      discountType: "percent",
      discountAmount: 10,
      duration: "once",
      durationInMonths: 3,
    },
  });

  const couponMutation = trpc.viewer.admin.createCoupon.useMutation({
    onSuccess: (data) => {
      showToast("Coupon created successfully", "success");
      setCouponResult(data);
      setCouponError(null);
      onCouponCreated(data.promotionCode);
    },
    onError: (err) => {
      setCouponError(err.message);
      setCouponResult(null);
    },
  });

  const watchedDuration = couponForm.watch("duration");

  function handleOpenChange(isOpen: boolean) {
    setOpen(isOpen);
    if (isOpen) {
      couponForm.setValue("billingEmail", billingEmail);
    }
    if (!isOpen) {
      couponForm.reset();
      setCouponResult(null);
      setCouponError(null);
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger
        render={
          <button
            type="button"
            className="cursor-pointer font-medium text-foreground underline underline-offset-2"
          />
        }>
        Create a coupon
      </DialogTrigger>
      <DialogPopup className="sm:max-w-md">
        <Form
          className="contents"
          onSubmit={(event) => {
            event.preventDefault();
            couponForm.handleSubmit((values) => {
              setCouponError(null);
              setCouponResult(null);
              couponMutation.mutate(values);
            })(event);
          }}>
          <DialogHeader>
            <DialogTitle>Create Coupon</DialogTitle>
            <DialogDescription>
              Create a Stripe coupon with a promotion code restricted to a specific customer.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel className="flex flex-col gap-4">
            {couponError && (
              <Alert variant="error">
                <AlertDescription>{couponError}</AlertDescription>
              </Alert>
            )}

            {couponResult && (
              <Alert variant="success">
                <AlertDescription>
                  <div className="flex flex-col gap-1">
                    <span>
                      Promo Code: <strong>{couponResult.promotionCode}</strong>
                    </span>
                    <span>
                      Coupon ID: <strong>{couponResult.couponId}</strong>
                    </span>
                  </div>
                </AlertDescription>
              </Alert>
            )}

            <Controller
              name="couponName"
              control={couponForm.control}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>Coupon Name (optional)</FieldLabel>
                  <Input placeholder="e.g. ACME Corp Discount" value={value} onChange={onChange} />
                </Field>
              )}
            />

            <Controller
              name="billingEmail"
              control={couponForm.control}
              rules={{ required: "Billing email is required" }}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>Billing Email</FieldLabel>
                  <Input
                    type="email"
                    placeholder="customer@acme.com"
                    value={value}
                    onChange={onChange}
                    required
                  />
                </Field>
              )}
            />

            <Controller
              name="code"
              control={couponForm.control}
              rules={{ required: "Promo code is required" }}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>Promo Code</FieldLabel>
                  <Input placeholder="e.g. ACME50OFF" value={value} onChange={onChange} required />
                </Field>
              )}
            />

            <Controller
              name="discountType"
              control={couponForm.control}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>Discount Type</FieldLabel>
                  <ToggleGroup
                    className="w-full"
                    variant="outline"
                    value={[value]}
                    onValueChange={(newValue) => {
                      if (newValue.length > 0) onChange(newValue[0]);
                    }}>
                    <Toggle value="percent" className="flex-1">
                      Percentage
                    </Toggle>
                    <Toggle value="fixed" className="flex-1">
                      Fixed Amount
                    </Toggle>
                  </ToggleGroup>
                </Field>
              )}
            />

            <Controller
              name="discountAmount"
              control={couponForm.control}
              rules={{ required: "Discount amount is required", min: 1 }}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>
                    Discount Amount {couponForm.watch("discountType") === "percent" ? "(%)" : "(cents)"}
                  </FieldLabel>
                  <Input
                    type="number"
                    min={1}
                    defaultValue={value}
                    onChange={(event) => {
                      const raw = event.target.value;
                      onChange(raw === "" ? "" : +raw);
                    }}
                    required
                  />
                </Field>
              )}
            />

            <Controller
              name="duration"
              control={couponForm.control}
              render={({ field: { value, onChange } }) => (
                <Field>
                  <FieldLabel>Duration</FieldLabel>
                  <Select
                    value={value}
                    onValueChange={(newValue) => {
                      if (newValue) onChange(newValue);
                    }}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select duration" />
                    </SelectTrigger>
                    <SelectPopup>
                      <SelectItem value="once">Once</SelectItem>
                      <SelectItem value="repeating">Repeating</SelectItem>
                      <SelectItem value="forever">Forever</SelectItem>
                    </SelectPopup>
                  </Select>
                </Field>
              )}
            />

            {watchedDuration === "repeating" && (
              <Controller
                name="durationInMonths"
                control={couponForm.control}
                rules={{
                  required: "Duration in months is required",
                  min: 1,
                  max: 36,
                }}
                render={({ field: { value, onChange } }) => (
                  <Field>
                    <FieldLabel>Duration in Months</FieldLabel>
                    <Input
                      type="number"
                      min={1}
                      max={36}
                      value={value}
                      onChange={(event) => onChange(+event.target.value)}
                      required
                    />
                  </Field>
                )}
              />
            )}
          </DialogPanel>
          <DialogFooter variant="bare">
            <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
            <Button type="submit" disabled={couponForm.formState.isSubmitting || couponMutation.isPending}>
              Create Coupon
            </Button>
          </DialogFooter>
        </Form>
      </DialogPopup>
    </Dialog>
  );
}