apply QA feedback

Author: nilscox

src/intl/en.json

@@ -2368,10 +2368,12 @@
           "cta": "Manage billing"
         },
         "coupon": {
-          "title": "Discount",
-          "description": "Enter a discount code",
+          "title": "Coupon code",
+          "description": "Redeem a coupon code",
+          "placeholder": "COUPON_CODE",
+          "submit": "Redeem",
           "couponSent": "The coupon code has been applied to your organization",
-          "hobbyPlanUpgrade": "Have a coupon? <upgrade>Upgrade to the starter plan</upgrade> to apply it."
+          "hobbyPlanUpgrade": "Do you have a coupon? <upgrade>Upgrade to the Starter plan</upgrade> to apply it."
         },
         "billingInformation": {
           "title": "Billing information",

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

@@ -1,13 +1,14 @@
+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 { notify } from 'src/application/notify';
 import { ControlledInput } from 'src/components/controlled';
 import { SectionHeader } from 'src/components/section-header';
-import { handleSubmit } from 'src/hooks/form';
+import { FormValues, handleSubmit } from 'src/hooks/form';
 import { useSearchParams } from 'src/hooks/router';
-import { createTranslate, Translate } from 'src/intl/translate';
+import { createTranslate } from 'src/intl/translate';
 
 const T = createTranslate('pages.organizationSettings.billing.coupon');
 
@@ -22,23 +23,32 @@ export function Coupon() {
     },
   });
 
+  const mutation = useMutation({
+    async mutationFn({ coupon }: FormValues<typeof form>) {
+      // eslint-disable-next-line no-console
+      console.log('Sending coupon code to API:', coupon);
+      await new Promise((r) => setTimeout(r, 1000));
+    },
+    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, ({ coupon }) => {
-          // eslint-disable-next-line no-console
-          console.log('Sending coupon code to API:', coupon);
-          form.reset();
-          notify.success(t('couponSent'));
-        })}
-        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" />
+      <form onSubmit={handleSubmit(form, mutation.mutateAsync)} className="row max-w-md items-center gap-4">
+        <ControlledInput
+          control={form.control}
+          name="coupon"
+          placeholder={t('placeholder')}
+          className="w-full"
+        />
+
+        <Button type="submit" loading={form.formState.isSubmitting}>
+          <T id="submit" />
         </Button>
       </form>