116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { toast } from 'sonner';
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { StoreCart, StoreCartLineItem } from "@medusajs/types"
|
|
import { Form } from "@kit/ui/form";
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { useTranslation } from "react-i18next";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@kit/ui/select';
|
|
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 }: { cart: StoreCart, synlabAnalyses: StoreCartLineItem[] }) {
|
|
const { t } = useTranslation('cart');
|
|
|
|
const form = useForm<z.infer<typeof AnalysisLocationSchema>>({
|
|
defaultValues: {
|
|
locationId: cart.metadata?.partner_location_id as string ?? '',
|
|
},
|
|
resolver: zodResolver(AnalysisLocationSchema),
|
|
});
|
|
|
|
const getLocation = (locationId: string) => partnerLocations.find(({ name }) => name === locationId);
|
|
|
|
const selectedLocation = getLocation(form.watch('locationId'));
|
|
|
|
const onSubmit = async ({ locationId }: z.infer<typeof AnalysisLocationSchema>) => {
|
|
const promise = updateCartPartnerLocation({
|
|
cartId: cart.id,
|
|
lineIds: synlabAnalyses.map(({ id }) => id),
|
|
partnerLocationId: locationId,
|
|
partnerLocationName: getLocation(locationId)?.name ?? '',
|
|
});
|
|
|
|
toast.promise(promise, {
|
|
success: t(`cart:items.analysisLocation.success`),
|
|
loading: t(`cart:items.analysisLocation.loading`),
|
|
error: t(`cart:items.analysisLocation.error`),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
<Trans i18nKey={'cart:locations.description'} />
|
|
</p>
|
|
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit((data) => onSubmit(data))}
|
|
className="w-full mb-2 flex gap-x-2 flex-1"
|
|
>
|
|
<Select
|
|
value={form.watch('locationId')}
|
|
onValueChange={(value) => {
|
|
form.setValue('locationId', value, {
|
|
shouldValidate: true,
|
|
shouldDirty: true,
|
|
shouldTouch: true,
|
|
});
|
|
|
|
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>
|
|
|
|
{selectedLocation && (
|
|
<div className="flex flex-col gap-y-2 mb-4">
|
|
<p className="text-sm">
|
|
{selectedLocation.address}
|
|
</p>
|
|
<p className="text-sm">
|
|
{selectedLocation.hours}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|