feat(MED-98): use single <Form> in cart, add toggle for company benefits

app/home/(user)/_components/cart/discount-code.tsx

@@ -1,30 +1,21 @@
 'use client';
 
 import React from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { zodResolver } from '@hookform/resolvers/zod';
 import { convertToLocale } from '@lib/util/money';
 import { StoreCart, StorePromotion } from '@medusajs/types';
 import { Badge, Text } from '@medusajs/ui';
 import Trash from '@modules/common/icons/trash';
-import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
 
 import { Button } from '@kit/ui/button';
-import { Form, FormControl, FormField, FormItem } from '@kit/ui/form';
+import { FormControl, FormField, FormItem } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
 import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
-import {
-  addPromotionCodeAction,
-  removePromotionCodeAction,
-} from './discount-code-actions';
-
-const DiscountCodeSchema = z.object({
-  code: z.string().min(1),
-});
+import { addPromotionCodeAction, removePromotionCodeAction } from './discount-code-actions';
 
 export default function DiscountCode({
   cart,
@@ -35,6 +26,9 @@ export default function DiscountCode({
 }) {
   const { t } = useTranslation('cart');
 
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch('code');
+
   const { promotions = [] } = cart;
 
   const removePromotionCode = async (code: string) => {
@@ -55,57 +49,49 @@ export default function DiscountCode({
   };
 
   const addPromotionCode = async (code: string) => {
+    if (!code || code.length === 0) {
+      return;
+    }
+
     const loading = toast.loading(t('cart:discountCode.addLoading'));
     const result = await addPromotionCodeAction(code);
 
     toast.dismiss(loading);
     if (result.success) {
       toast.success(t('cart:discountCode.addSuccess'));
-      form.reset();
+      setValue('code', '');
     } else {
       toast.error(t('cart:discountCode.addError'));
     }
   };
 
-  const form = useForm<z.infer<typeof DiscountCodeSchema>>({
-    defaultValues: {
-      code: '',
-    },
-    resolver: zodResolver(DiscountCodeSchema),
-  });
-
   return (
     <div className="txt-medium flex h-full w-full flex-col gap-y-4 bg-white">
       <p className="text-muted-foreground text-sm">
         <Trans i18nKey={'cart:discountCode.subtitle'} />
       </p>
 
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
-          className="mb-2 flex w-full flex-1 flex-col gap-x-2 gap-y-2 sm:flex-row"
-        >
-          <FormField
-            name={'code'}
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormControl>
-                  <Input
-                    required
-                    type="text"
-                    {...field}
-                    placeholder={t('cart:discountCode.placeholder')}
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
+      <div className="mb-2 flex w-full flex-1 flex-col gap-x-2 gap-y-2 sm:flex-row">
+        <FormField
+          name={'code'}
+          render={({ field }) => (
+            <FormItem className="flex-1">
+              <FormControl>
+                <Input
+                  required
+                  type="text"
+                  {...field}
+                  placeholder={t('cart:discountCode.placeholder')}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
 
-          <Button type="submit" variant="secondary" className="h-min">
-            <Trans i18nKey={'cart:discountCode.apply'} />
-          </Button>
-        </form>
-      </Form>
+        <Button type="button" variant="secondary" className="h-min" onClick={() => addPromotionCode(currentValue)}>
+          <Trans i18nKey={'cart:discountCode.apply'} />
+        </Button>
+      </div>
 
       {promotions.length > 0 && (
         <div className="mt-4 flex w-full items-center">
@@ -133,17 +119,17 @@ export default function DiscountCode({
                       (
                       {promotion.application_method?.value !== undefined &&
                         promotion.application_method.currency_code !==
-                          undefined && (
+                        undefined && (
                           <>
                             {promotion.application_method.type === 'percentage'
                               ? `${promotion.application_method.value}%`
                               : convertToLocale({
-                                  amount: Number(
-                                    promotion.application_method.value,
-                                  ),
-                                  currency_code:
-                                    promotion.application_method.currency_code,
-                                })}
+                                amount: Number(
+                                  promotion.application_method.value,
+                                ),
+                                currency_code:
+                                  promotion.application_method.currency_code,
+                              })}
                           </>
                         )}
                       )