Enable coupon redemption

src/api/api.ts

@@ -55,6 +55,7 @@ export const api = {
   getNextInvoice: endpoint('get', '/v1/billing/next_invoice'),
   hasUnpaidInvoices: endpoint('get', '/v1/billing/has_unpaid_invoices'),
   getUsageCsv: endpoint('get', '/v1/usages/details'),
+  redeemCoupon: endpoint('post', '/v1/coupons'),
 
   // invitations
   listInvitations: endpoint('get', '/v1/organization_invitations'),

src/intl/en.json

@@ -7,6 +7,7 @@
     "back": "Back",
     "next": "Next",
     "import": "Import",
+    "send": "Send",
     "override": "Override",
     "noValue": "--",
     "notApplicable": "N/A",
@@ -2389,6 +2390,14 @@
           "upgradeRequired": "You have no invoices or payment methods",
           "cta": "Manage billing"
         },
+        "coupon": {
+          "title": "Coupon code",
+          "description": "Redeem a coupon code",
+          "placeholder": "COUPON_CODE",
+          "submit": "Redeem",
+          "couponSent": "The coupon code has been applied to your organization",
+          "hobbyPlanUpgrade": "Do you have a coupon? <upgrade>Upgrade to the Starter plan</upgrade> to apply it."
+        },
         "billingInformation": {
           "title": "Billing information",
           "description": "This information appears on your monthly invoice and should be the legal address of your home or business",

src/pages/settings/organization/billing/billing.page.tsx

@@ -1,4 +1,7 @@
+import { FeatureFlag } from 'src/hooks/feature-flag';
+
 import { BillingInformation } from './billing-information';
+import { Coupon } from './coupon';
 import { StripePortal } from './stripe-portal';
 import { Usage } from './usage';
 
@@ -7,6 +10,9 @@ export function BillingPage() {
     <>
       <Usage />
       <StripePortal />
+      <FeatureFlag feature="coupons">
+        <Coupon />
+      </FeatureFlag>
       <BillingInformation />
     </>
   );

src/pages/settings/organization/billing/coupon.tsx

@@ -0,0 +1,62 @@
+import { useMutation } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+
+import { Button } from '@koyeb/design-system';
+import { useOrganization } from 'src/api/hooks/session';
+import { useApiMutationFn } from 'src/api/use-api';
+import { notify } from 'src/application/notify';
+import { ControlledInput } from 'src/components/controlled';
+import { SectionHeader } from 'src/components/section-header';
+import { FormValues, handleSubmit } from 'src/hooks/form';
+import { useSearchParams } from 'src/hooks/router';
+import { createTranslate } from 'src/intl/translate';
+
+const T = createTranslate('pages.organizationSettings.billing.coupon');
+
+export function Coupon() {
+  const params = useSearchParams();
+  const organization = useOrganization();
+  const t = T.useTranslate();
+
+  const form = useForm({
+    defaultValues: {
+      code: params.get('coupon') ?? '',
+    },
+  });
+
+  const mutation = useMutation({
+    ...useApiMutationFn('redeemCoupon', ({ code }: FormValues<typeof form>) => ({
+      body: { code },
+    })),
+    onSuccess() {
+      form.reset();
+      notify.success(t('couponSent'));
+    },
+  });
+
+  return (
+    <section className="col gap-6">
+      <SectionHeader title={<T id="title" />} description={<T id="description" />} />
+
+      <form onSubmit={handleSubmit(form, mutation.mutateAsync)} className="row max-w-md items-center gap-4">
+        <ControlledInput
+          control={form.control}
+          disabled={organization.plan === 'hobby'}
+          name="code"
+          placeholder={t('placeholder')}
+          className="w-full"
+        />
+
+        <Button type="submit" disabled={organization.plan === 'hobby'} loading={form.formState.isSubmitting}>
+          <T id="submit" />
+        </Button>
+      </form>
+
+      {organization.plan === 'hobby' && (
+        <p className="border-l-4 border-green/50 pl-3 text-xs">
+          <T id="hobbyPlanUpgrade" />
+        </p>
+      )}
+    </section>
+  );
+}