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

app/home/(user)/_components/cart/analysis-location.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import { zodResolver } from '@hookform/resolvers/zod';
 import { StoreCart, StoreCartLineItem } from '@medusajs/types';
-import { useForm } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { z } from 'zod';
 
-import { Form } from '@kit/ui/form';
 import {
   Select,
   SelectContent,
@@ -22,10 +19,6 @@ import { Trans } from '@kit/ui/trans';
 import { updateCartPartnerLocation } from '../../_lib/server/update-cart-partner-location';
 import partnerLocations from './partner-locations.json';
 
-const AnalysisLocationSchema = z.object({
-  locationId: z.string().min(1),
-});
-
 export default function AnalysisLocation({
   cart,
   synlabAnalyses,
@@ -35,21 +28,15 @@ export default function AnalysisLocation({
 }) {
   const { t } = useTranslation('cart');
 
-  const form = useForm<z.infer<typeof AnalysisLocationSchema>>({
-    defaultValues: {
-      locationId: (cart.metadata?.partner_location_id as string) ?? '',
-    },
-    resolver: zodResolver(AnalysisLocationSchema),
-  });
+  const { watch, setValue } = useFormContext();
+  const currentValue = watch('locationId');
 
   const getLocation = (locationId: string) =>
     partnerLocations.find(({ name }) => name === locationId);
 
-  const selectedLocation = getLocation(form.watch('locationId'));
+  const selectedLocation = getLocation(currentValue);
 
-  const onSubmit = async ({
-    locationId,
-  }: z.infer<typeof AnalysisLocationSchema>) => {
+  const handleUpdateCartPartnerLocation = async (locationId: string) => {
     const promise = updateCartPartnerLocation({
       cartId: cart.id,
       lineIds: synlabAnalyses.map(({ id }) => id),
@@ -70,53 +57,48 @@ export default function AnalysisLocation({
         <Trans i18nKey={'cart:locations.description'} />
       </p>
 
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit((data) => onSubmit(data))}
-          className="mb-2 flex w-full flex-1 gap-x-2"
+      <div className="mb-2 flex w-full flex-1 gap-x-2">
+        <Select
+          value={currentValue}
+          onValueChange={(value) => {
+            setValue('locationId', value, {
+              shouldValidate: true,
+              shouldDirty: true,
+              shouldTouch: true,
+            });
+
+            return handleUpdateCartPartnerLocation(value);
+          }}
         >
-          <Select
-            value={form.watch('locationId')}
-            onValueChange={(value) => {
-              form.setValue('locationId', value, {
-                shouldValidate: true,
-                shouldDirty: true,
-                shouldTouch: true,
-              });
+          <SelectTrigger>
+            <SelectValue placeholder={t('cart:locations.locationSelect')} />
+          </SelectTrigger>
 
-              return onSubmit(form.getValues());
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={t('cart:locations.locationSelect')} />
-            </SelectTrigger>
-
-            <SelectContent>
-              {Object.entries(
-                partnerLocations.reduce(
-                  (acc, curr) => ({
-                    ...acc,
-                    [curr.city]: [
-                      ...((acc[curr.city] as typeof partnerLocations) ?? []),
-                      curr,
-                    ],
-                  }),
-                  {} as Record<string, typeof partnerLocations>,
-                ),
-              ).map(([city, locations]) => (
-                <SelectGroup key={city}>
-                  <SelectLabel>{city}</SelectLabel>
-                  {locations.map((location) => (
-                    <SelectItem key={location.name} value={location.name}>
-                      {location.name}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              ))}
-            </SelectContent>
-          </Select>
-        </form>
-      </Form>
+          <SelectContent>
+            {Object.entries(
+              partnerLocations.reduce(
+                (acc, curr) => ({
+                  ...acc,
+                  [curr.city]: [
+                    ...((acc[curr.city] as typeof partnerLocations) ?? []),
+                    curr,
+                  ],
+                }),
+                {} as Record<string, typeof partnerLocations>,
+              ),
+            ).map(([city, locations]) => (
+              <SelectGroup key={city}>
+                <SelectLabel>{city}</SelectLabel>
+                {locations.map((location) => (
+                  <SelectItem key={location.name} value={location.name}>
+                    {location.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
       {selectedLocation && (
         <div className="mb-4 flex flex-col gap-y-2">