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

2025-09-30 16:21:08 +03:00
parent f477bfaa13
commit 99a530d672
10 changed files with 420 additions and 266 deletions
--- a/app/home/(user)/_components/cart/analysis-location.tsx
+++ b/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">
--- a/app/home/(user)/_components/cart/cart-form-content.tsx
+++ b/app/home/(user)/_components/cart/cart-form-content.tsx
@@ -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>
+    </>
+  );
+}
--- a/app/home/(user)/_components/cart/cart-form.tsx
+++ b/app/home/(user)/_components/cart/cart-form.tsx
@@ -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>
+  );
+};
--- a/app/home/(user)/_components/cart/discount-code.tsx
+++ b/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,
+                              })}
                          </>
                        )}
                      )
--- a/app/home/(user)/_components/cart/index.tsx
+++ b/app/home/(user)/_components/cart/index.tsx
@@ -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"
+          synlabAnalyses={synlabAnalyses}
+          ttoServiceItems={ttoServiceItems}
          unavailableLineItemIds={unavailableLineItemIds}
+          isInitiatingSession={isInitiatingSession}
+          getBalanceSummarySelection={getBalanceSummarySelection}
        />
-      </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}
-              />
-            </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>
  );
 }
--- a/app/home/(user)/_components/cart/types.ts
+++ b/app/home/(user)/_components/cart/types.ts
@@ -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;
+};
--- a/app/home/(user)/_lib/server/cart-actions.ts
+++ b/app/home/(user)/_lib/server/cart-actions.ts
@@ -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) {
--- a/public/locales/en/cart.json
+++ b/public/locales/en/cart.json
@@ -94,5 +94,8 @@
  "editServiceItem": {
    "title": "Edit booking",
    "description": "Edit booking details"
+  },
+  "companyBenefits": {
+    "label": "Use company benefits"
  }
 }
--- a/public/locales/et/cart.json
+++ b/public/locales/et/cart.json
@@ -94,5 +94,8 @@
  "editServiceItem": {
    "title": "Muuda broneeringut",
    "description": "Muuda broneeringu andmeid"
+  },
+  "companyBenefits": {
+    "label": "Kasuta ettevõtte toetust"
  }
 }
--- a/public/locales/ru/cart.json
+++ b/public/locales/ru/cart.json
@@ -94,5 +94,8 @@
  "editServiceItem": {
    "title": "Изменить бронирование",
    "description": "Изменить данные бронирования"
+  },
+  "companyBenefits": {
+    "label": "Использовать выгоды компании"
  }
 }