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

This commit is contained in:
Karli
2025-09-30 16:21:08 +03:00
parent f477bfaa13
commit 99a530d672
10 changed files with 420 additions and 266 deletions

View File

@@ -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,21 +57,17 @@ 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={form.watch('locationId')}
value={currentValue}
onValueChange={(value) => {
form.setValue('locationId', value, {
setValue('locationId', value, {
shouldValidate: true,
shouldDirty: true,
shouldTouch: true,
});
return onSubmit(form.getValues());
return handleUpdateCartPartnerLocation(value);
}}
>
<SelectTrigger>
@@ -115,8 +98,7 @@ export default function AnalysisLocation({
))}
</SelectContent>
</Select>
</form>
</Form>
</div>
{selectedLocation && (
<div className="mb-4 flex flex-col gap-y-2">

View File

@@ -0,0 +1,215 @@
'use client';
import { formatCurrency } from '@/packages/shared/src/utils';
import { StoreCart, StoreCartLineItem } from '@medusajs/types';
import { Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader } from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import AnalysisLocation from './analysis-location';
import CartItems from './cart-items';
import CartServiceItems from './cart-service-items';
import DiscountCode from './discount-code';
import { EnrichedCartItem, GetBalanceSummarySelection } from './types';
import {
FormControl,
FormField,
FormItem,
FormLabel,
} from '@kit/ui/form';
import { Checkbox } from '@kit/ui/checkbox';
import { useFormContext } from 'react-hook-form';
import { cn } from '~/lib/utils';
const IS_DISCOUNT_SHOWN = true as boolean;
export default function CartFormContent({
cart,
synlabAnalyses,
ttoServiceItems,
unavailableLineItemIds,
isInitiatingSession,
getBalanceSummarySelection,
}: {
cart: StoreCart;
synlabAnalyses: StoreCartLineItem[];
ttoServiceItems: EnrichedCartItem[];
unavailableLineItemIds?: string[];
isInitiatingSession: boolean;
getBalanceSummarySelection: GetBalanceSummarySelection;
}) {
const {
i18n: { language },
} = useTranslation();
const { watch } = useFormContext();
const items = cart?.items ?? [];
const hasCartItems = cart && Array.isArray(items) && items.length > 0;
const isLocationsShown = synlabAnalyses.length > 0;
const useCompanyBenefits = watch('useCompanyBenefits');
const balanceSummary = getBalanceSummarySelection({ useCompanyBenefits });
const { benefitsAmount, benefitsAmountTotal, montonioAmount } = balanceSummary;
const hasBenefitsApplied = benefitsAmountTotal > 0 && !!useCompanyBenefits;
return (
<>
<div className="flex flex-col gap-y-6 bg-white">
<CartItems
cart={cart}
items={synlabAnalyses}
productColumnLabelKey="cart:items.synlabAnalyses.productColumnLabel"
/>
<CartServiceItems
cart={cart}
items={ttoServiceItems}
productColumnLabelKey="cart:items.ttoServices.productColumnLabel"
unavailableLineItemIds={unavailableLineItemIds}
/>
</div>
{hasCartItems && (
<>
<div className="flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.subtotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: cart.subtotal,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
<div className={cn("flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4", {
"py-2 sm:py-4": !hasBenefitsApplied,
})}>
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.promotionsTotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: cart.discount_total,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
{hasBenefitsApplied && (
<div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.companyBenefitsTotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: benefitsAmount,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
)}
<div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.total" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: montonioAmount,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
{benefitsAmountTotal > 0 && (
<FormField
name="useCompanyBenefits"
render={({ field }) => (
<FormItem className='mt-8'>
<div className="flex flex-row items-center gap-2 pb-1">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel>
<Trans i18nKey={'cart:companyBenefits.label'} />
</FormLabel>
</div>
</FormItem>
)}
/>
)}
</>
)}
<div className="flex flex-col gap-x-4 gap-y-6 py-4 sm:flex-row sm:py-8">
{IS_DISCOUNT_SHOWN && (
<Card className="flex w-full flex-col justify-between sm:w-1/2">
<CardHeader className="pb-4">
<h5>
<Trans i18nKey="cart:discountCode.title" />
</h5>
</CardHeader>
<CardContent className="h-full">
<DiscountCode cart={{ ...cart }} />
</CardContent>
</Card>
)}
{isLocationsShown && (
<Card className="flex w-full flex-col justify-between sm:w-1/2">
<CardHeader className="pb-4">
<h5>
<Trans i18nKey="cart:locations.title" />
</h5>
</CardHeader>
<CardContent className="h-full">
<AnalysisLocation
cart={{ ...cart }}
synlabAnalyses={synlabAnalyses}
/>
</CardContent>
</Card>
)}
</div>
<div>
<Button
className="h-10"
type="submit"
disabled={isInitiatingSession}
>
{isInitiatingSession && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
<Trans i18nKey="cart:checkout.goToCheckout" />
</Button>
</div>
</>
);
}

View File

@@ -0,0 +1,47 @@
'use client';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import type { StoreCart } from '@medusajs/types';
import { Form } from '@kit/ui/form';
const CartFormSchema = z.object({
code: z.string().optional(),
locationId: z.string().optional(),
useCompanyBenefits: z.boolean(),
});
export type CartFormOnSubmit = (data: z.infer<typeof CartFormSchema>) => Promise<void>;
export default function CartForm({
children,
cart,
onSubmit,
}: {
children: React.ReactNode;
cart: StoreCart;
onSubmit: CartFormOnSubmit;
}) {
const form = useForm<z.infer<typeof CartFormSchema>>({
defaultValues: {
code: '',
locationId: (cart.metadata?.partner_location_id as string) ?? '',
useCompanyBenefits: true,
},
resolver: zodResolver(CartFormSchema),
});
const handleSubmit: CartFormOnSubmit = async (data) => {
await onSubmit(data);
};
return (
<Form {...form}>
<form onSubmit={form.handleSubmit((data) => handleSubmit(data))}>
{children}
</form>
</Form>
);
};

View File

@@ -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,36 +49,29 @@ 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"
>
<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 }) => (
@@ -101,11 +88,10 @@ export default function DiscountCode({
)}
/>
<Button type="submit" variant="secondary" className="h-min">
<Button type="button" variant="secondary" className="h-min" onClick={() => addPromotionCode(currentValue)}>
<Trans i18nKey={'cart:discountCode.apply'} />
</Button>
</form>
</Form>
</div>
{promotions.length > 0 && (
<div className="mt-4 flex w-full items-center">

View File

@@ -1,26 +1,17 @@
'use client';
import { useState } from 'react';
import { formatCurrency } from '@/packages/shared/src/utils';
import { useCallback, useState } from 'react';
import { useRouter } from 'next/navigation';
import { StoreCart, StoreCartLineItem } from '@medusajs/types';
import { Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader } from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import AnalysisLocation from './analysis-location';
import CartItems from './cart-items';
import CartServiceItems from './cart-service-items';
import DiscountCode from './discount-code';
import { initiatePayment } from '../../_lib/server/cart-actions';
import { useRouter } from 'next/navigation';
import { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
import { EnrichedCartItem } from './types';
const IS_DISCOUNT_SHOWN = true as boolean;
import { initiatePayment } from '../../_lib/server/cart-actions';
import { EnrichedCartItem } from './types';
import CartForm, { CartFormOnSubmit } from './cart-form';
import CartFormContent from './cart-form-content';
export default function Cart({
accountId,
@@ -44,6 +35,44 @@ export default function Cart({
const [unavailableLineItemIds, setUnavailableLineItemIds] =
useState<string[]>();
const getBalanceSummarySelection = useCallback(({ useCompanyBenefits }: {
useCompanyBenefits: boolean;
}): {
benefitsAmount: number;
benefitsAmountTotal: number;
montonioAmount: number;
} => {
if (!cart) {
return {
benefitsAmount: 0,
benefitsAmountTotal: 0,
montonioAmount: 0,
};
}
const benefitsAmountTotal = balanceSummary?.totalBalance ?? 0;
const cartTotal = cart.total;
if (!useCompanyBenefits) {
return {
benefitsAmount: 0,
benefitsAmountTotal,
montonioAmount: cartTotal,
};
}
const benefitsAmount = benefitsAmountTotal > cartTotal
? cartTotal
: benefitsAmountTotal;
const montonioAmount = benefitsAmount > 0
? cartTotal - benefitsAmount
: cartTotal;
return {
benefitsAmount,
benefitsAmountTotal,
montonioAmount,
};
}, [balanceSummary, cart]);
const items = cart?.items ?? [];
const hasCartItems = cart && Array.isArray(items) && items.length > 0;
@@ -67,13 +96,14 @@ export default function Cart({
);
}
async function initiateSession() {
const initiateSession: CartFormOnSubmit = async ({ useCompanyBenefits }) => {
setIsInitiatingSession(true);
try {
const { benefitsAmount } = getBalanceSummarySelection({ useCompanyBenefits });
const { url, isFullyPaidByBenefits, orderId, unavailableLineItemIds } = await initiatePayment({
accountId,
balanceSummary: balanceSummary!,
benefitsAmount,
cart: cart!,
language,
});
@@ -92,142 +122,20 @@ export default function Cart({
console.error('Failed to initiate payment', error);
setIsInitiatingSession(false);
}
}
const isLocationsShown = synlabAnalyses.length > 0;
const companyBenefitsTotal = balanceSummary?.totalBalance ?? 0;
const montonioTotal = cart && companyBenefitsTotal > 0 ? cart.total - companyBenefitsTotal : cart.total;
};
return (
<div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 lg:px-4">
<div className="flex flex-col gap-y-6 bg-white">
<CartItems
<CartForm cart={cart} onSubmit={initiateSession}>
<CartFormContent
cart={cart}
items={synlabAnalyses}
productColumnLabelKey="cart:items.synlabAnalyses.productColumnLabel"
/>
<CartServiceItems
cart={cart}
items={ttoServiceItems}
productColumnLabelKey="cart:items.ttoServices.productColumnLabel"
unavailableLineItemIds={unavailableLineItemIds}
/>
</div>
{hasCartItems && (
<>
<div className="flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.subtotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: cart.subtotal,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
<div className="flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.promotionsTotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: cart.discount_total,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
{companyBenefitsTotal > 0 && (
<div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="text-muted-foreground ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.companyBenefitsTotal" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: (companyBenefitsTotal > cart.total ? cart.total : companyBenefitsTotal),
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
)}
<div className="flex gap-x-4 px-4 sm:justify-end sm:px-6">
<div className="w-full sm:mr-[42px] sm:w-auto">
<p className="ml-0 text-sm font-bold">
<Trans i18nKey="cart:order.total" />
</p>
</div>
<div className={`sm:mr-[112px] sm:w-[50px]`}>
<p className="text-right text-sm">
{formatCurrency({
value: montonioTotal < 0 ? 0 : montonioTotal,
currencyCode: cart.currency_code,
locale: language,
})}
</p>
</div>
</div>
</>
)}
<div className="flex flex-col gap-x-4 gap-y-6 py-4 sm:flex-row sm:py-8">
{IS_DISCOUNT_SHOWN && (
<Card className="flex w-full flex-col justify-between sm:w-1/2">
<CardHeader className="pb-4">
<h5>
<Trans i18nKey="cart:discountCode.title" />
</h5>
</CardHeader>
<CardContent className="h-full">
<DiscountCode cart={{ ...cart }} />
</CardContent>
</Card>
)}
{isLocationsShown && (
<Card className="flex w-full flex-col justify-between sm:w-1/2">
<CardHeader className="pb-4">
<h5>
<Trans i18nKey="cart:locations.title" />
</h5>
</CardHeader>
<CardContent className="h-full">
<AnalysisLocation
cart={{ ...cart }}
synlabAnalyses={synlabAnalyses}
ttoServiceItems={ttoServiceItems}
unavailableLineItemIds={unavailableLineItemIds}
isInitiatingSession={isInitiatingSession}
getBalanceSummarySelection={getBalanceSummarySelection}
/>
</CardContent>
</Card>
)}
</div>
<div>
<Button
className="h-10"
onClick={initiateSession}
disabled={isInitiatingSession}
>
{isInitiatingSession && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
<Trans i18nKey="cart:checkout.goToCheckout" />
</Button>
</div>
</CartForm>
</div>
);
}

View File

@@ -36,3 +36,11 @@ export enum CartItemType {
}
export type EnrichedCartItem = StoreCartLineItem & { reservation: Reservation };
export type GetBalanceSummarySelection = ({ useCompanyBenefits }: {
useCompanyBenefits: boolean;
}) => {
benefitsAmount: number;
benefitsAmountTotal: number;
montonioAmount: number;
};

View File

@@ -6,7 +6,6 @@ import jwt from 'jsonwebtoken';
import type { StoreCart, StoreOrder } from "@medusajs/types";
import { initiateMultiPaymentSession, placeOrder } from "@lib/data/cart";
import type { AccountBalanceSummary } from "@kit/accounts/services/account-balance.service";
import { handleNavigateToPayment } from "~/lib/services/medusaCart.service";
import { loadCurrentUserAccount } from "./load-user-account";
import { getOrderedAnalysisIds } from "~/lib/services/medusaOrder.service";
@@ -58,12 +57,12 @@ const env = () =>
export const initiatePayment = async ({
accountId,
balanceSummary,
benefitsAmount,
cart,
language,
}: {
accountId: string;
balanceSummary: AccountBalanceSummary;
benefitsAmount: number;
cart: StoreCart;
language: string;
}) => {
@@ -74,7 +73,7 @@ export const initiatePayment = async ({
totalByMontonio,
totalByBenefits,
isFullyPaidByBenefits,
} = await initiateMultiPaymentSession(cart, balanceSummary.totalBalance);
} = await initiateMultiPaymentSession(cart, benefitsAmount);
if (!isFullyPaidByBenefits) {
if (!montonioPaymentSessionId) {

View File

@@ -94,5 +94,8 @@
"editServiceItem": {
"title": "Edit booking",
"description": "Edit booking details"
},
"companyBenefits": {
"label": "Use company benefits"
}
}

View File

@@ -94,5 +94,8 @@
"editServiceItem": {
"title": "Muuda broneeringut",
"description": "Muuda broneeringu andmeid"
},
"companyBenefits": {
"label": "Kasuta ettevõtte toetust"
}
}

View File

@@ -94,5 +94,8 @@
"editServiceItem": {
"title": "Изменить бронирование",
"description": "Изменить данные бронирования"
},
"companyBenefits": {
"label": "Использовать выгоды компании"
}
}