112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { StoreCart, StoreCartLineItem } from '@medusajs/types';
|
|
import { useFormContext } from 'react-hook-form';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { toast } from 'sonner';
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@kit/ui/select';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { updateCartPartnerLocation } from '../../_lib/server/update-cart-partner-location';
|
|
import partnerLocations from './partner-locations.json';
|
|
|
|
export default function AnalysisLocation({
|
|
cart,
|
|
synlabAnalyses,
|
|
}: {
|
|
cart: StoreCart;
|
|
synlabAnalyses: StoreCartLineItem[];
|
|
}) {
|
|
const { t } = useTranslation('cart');
|
|
|
|
const { watch, setValue } = useFormContext();
|
|
const currentValue = watch('locationId');
|
|
|
|
const getLocation = (locationId: string) =>
|
|
partnerLocations.find(({ name }) => name === locationId);
|
|
|
|
const selectedLocation = getLocation(currentValue);
|
|
|
|
const handleUpdateCartPartnerLocation = async (locationId: string) => {
|
|
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="txt-medium flex h-full w-full flex-col gap-y-4 bg-white">
|
|
<p className="text-muted-foreground text-sm">
|
|
<Trans i18nKey={'cart:locations.description'} />
|
|
</p>
|
|
|
|
<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);
|
|
}}
|
|
>
|
|
<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>
|
|
</div>
|
|
|
|
{selectedLocation && (
|
|
<div className="mb-4 flex flex-col gap-y-2">
|
|
<p className="text-sm">{selectedLocation.address}</p>
|
|
<p className="text-sm">{selectedLocation.hours}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|