add coupon code input to the billing page

Author: nilscox

src/intl/en.json

@@ -7,6 +7,7 @@
     "back": "Back",
     "next": "Next",
     "import": "Import",
+    "send": "Send",
     "override": "Override",
     "noValue": "--",
     "notApplicable": "N/A",
@@ -2317,6 +2318,12 @@
           "upgradeRequired": "You have no invoices or payment methods",
           "cta": "Manage billing"
         },
+        "coupon": {
+          "title": "Discount",
+          "description": "Enter a discount code",
+          "couponSent": "The coupon code has been applied to your organization",
+          "hobbyPlanUpgrade": "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,5 @@
 import { BillingInformation } from './billing-information';
+import { Coupon } from './coupon';
 import { StripePortal } from './stripe-portal';
 import { Usage } from './usage';
 
@@ -7,6 +8,7 @@ export function BillingPage() {
     <>
       <Usage />
       <StripePortal />
+      <Coupon />
       <BillingInformation />
     </>
   );

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

@@ -0,0 +1,51 @@
+import { useForm } from 'react-hook-form';
+
+import { Button } from '@koyeb/design-system';
+import { useOrganization } from 'src/api/hooks/session';
+import { notify } from 'src/application/notify';
+import { ControlledInput } from 'src/components/controlled';
+import { SectionHeader } from 'src/components/section-header';
+import { createTranslate, Translate } from 'src/intl/translate';
+
+const T = createTranslate('pages.organizationSettings.billing.coupon');
+
+export function Coupon() {
+  const organization = useOrganization();
+  const t = T.useTranslate();
+
+  const form = useForm({
+    defaultValues: {
+      coupon: '',
+    },
+  });
+
+  const handleSubmit = (value: string) => {
+    // eslint-disable-next-line no-console
+    console.log('Sending coupon code to API:', value);
+    form.reset();
+    notify.success(t('couponSent'));
+  };
+
+  return (
+    <section className="col gap-6">
+      <SectionHeader title={<T id="title" />} description={<T id="description" />} />
+
+      <form
+        onSubmit={form.handleSubmit(({ coupon }) => handleSubmit(coupon))}
+        className="row max-w-md items-center gap-4"
+      >
+        <ControlledInput control={form.control} name="coupon" className="w-full" />
+
+        <Button type="submit">
+          <Translate id="common.send" />
+        </Button>
+      </form>
+
+      {organization.plan === 'hobby' && (
+        <p className="border-l-4 border-green/50 pl-3 text-xs">
+          <T id="hobbyPlanUpgrade" />
+        </p>
+      )}
+    </section>
+  );
+}