Merge pull request #115 from MR-medreport/MED-98

feat(MED-98): update benefits selection in cart view

.prettierignore

@@ -1,3 +1,5 @@
 database.types.ts
 playwright-report
-*.hbs
+*.hbs
+.history
+node_modules

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">

app/home/(user)/_components/cart/cart-form-content.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { StoreCart, StoreCartLineItem } from '@medusajs/types';
+import { Loader2 } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader } from '@kit/ui/card';
+import { Checkbox } from '@kit/ui/checkbox';
+import { FormControl, FormField, FormItem, FormLabel } from '@kit/ui/form';
+import { Trans } from '@kit/ui/trans';
+
+import { cn } from '~/lib/utils';
+
+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';
+
+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>
+    </>
+  );
+}

app/home/(user)/_components/cart/cart-form.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { StoreCart } from '@medusajs/types';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+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>
+  );
+}

app/home/(user)/_components/cart/discount-code.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 
-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 { useFormContext } 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';
@@ -22,10 +20,6 @@ import {
   removePromotionCodeAction,
 } from './discount-code-actions';
 
-const DiscountCodeSchema = z.object({
-  code: z.string().min(1),
-});
-
 export default function DiscountCode({
   cart,
 }: {
@@ -35,8 +29,13 @@ export default function DiscountCode({
 }) {
   const { t } = useTranslation('cart');
 
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch('code');
+
   const { promotions = [] } = cart;
 
+  const [isAddingPromotionCode, setIsAddingPromotionCode] = useState(false);
+
   const removePromotionCode = async (code: string) => {
     const appliedCodes = promotions
       .filter((p) => p.code !== undefined)
@@ -55,57 +54,56 @@ export default function DiscountCode({
   };
 
   const addPromotionCode = async (code: string) => {
+    if (!code || code.length === 0) {
+      return;
+    }
+
+    setIsAddingPromotionCode(true);
     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'));
     }
+    setIsAddingPromotionCode(false);
   };
 
-  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
+                  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)}
+          disabled={isAddingPromotionCode}
+        >
+          <Trans i18nKey={'cart:discountCode.apply'} />
+        </Button>
+      </div>
 
       {promotions.length > 0 && (
         <div className="mt-4 flex w-full items-center">

app/home/(user)/_components/cart/index.tsx

@@ -1,28 +1,20 @@
 'use client';
 
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { formatCurrency } from '@/packages/shared/src/utils';
 import { StoreCart, StoreCartLineItem } from '@medusajs/types';
-import { Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
-import { Button } from '@kit/ui/button';
-import { Card, CardContent, CardHeader } from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
 
 import { initiatePayment } from '../../_lib/server/cart-actions';
-import AnalysisLocation from './analysis-location';
-import CartItems from './cart-items';
-import CartServiceItems from './cart-service-items';
-import DiscountCode from './discount-code';
+import CartForm, { CartFormOnSubmit } from './cart-form';
+import CartFormContent from './cart-form-content';
 import { EnrichedCartItem } from './types';
 
-const IS_DISCOUNT_SHOWN = true as boolean;
-
 export default function Cart({
   accountId,
   cart,
@@ -45,6 +37,47 @@ 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;
 
@@ -68,14 +101,17 @@ 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,
         });
@@ -94,148 +130,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>
   );
 }

app/home/(user)/_components/cart/types.ts

@@ -8,12 +8,6 @@ export interface MontonioOrderToken {
   merchantReference: string;
   merchantReferenceDisplay: string;
   paymentStatus:
-    | 'PAID'
-    | 'FAILED'
-    | 'CANCELLED'
-    | 'PENDING'
-    | 'EXPIRED'
-    | 'REFUNDED'
     | 'PAID'
     | 'FAILED'
     | 'CANCELLED'
@@ -37,3 +31,13 @@ export enum CartItemType {
 }
 
 export type EnrichedCartItem = StoreCartLineItem & { reservation: Reservation };
+
+export type GetBalanceSummarySelection = ({
+  useCompanyBenefits,
+}: {
+  useCompanyBenefits: boolean;
+}) => {
+  benefitsAmount: number;
+  benefitsAmountTotal: number;
+  montonioAmount: number;
+};

app/home/(user)/_lib/server/cart-actions.ts

@@ -9,8 +9,6 @@ import type { StoreCart, StoreOrder } from '@medusajs/types';
 import jwt from 'jsonwebtoken';
 import { z } from 'zod';
 
-import type { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
-
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { bookAppointment } from '~/lib/services/connected-online.service';
 import { sendOrderToMedipost } from '~/lib/services/medipost/medipostPrivateMessage.service';
@@ -67,12 +65,12 @@ const env = () =>
 
 export const initiatePayment = async ({
   accountId,
-  balanceSummary,
+  benefitsAmount,
   cart,
   language,
 }: {
   accountId: string;
-  balanceSummary: AccountBalanceSummary;
+  benefitsAmount: number;
   cart: StoreCart;
   language: string;
 }) => {
@@ -83,7 +81,7 @@ export const initiatePayment = async ({
       totalByMontonio,
       totalByBenefits,
       isFullyPaidByBenefits,
-    } = await initiateMultiPaymentSession(cart, balanceSummary.totalBalance);
+    } = await initiateMultiPaymentSession(cart, benefitsAmount);
 
     if (!isFullyPaidByBenefits) {
       if (!montonioPaymentSessionId) {

app/home/(user)/_lib/server/load-analysis-packages.ts

@@ -3,7 +3,7 @@ import { cache } from 'react';
 import { getAnalysisElementMedusaProductIds } from '@/utils/medusa-product';
 import { listProductTypes, listProducts } from '@lib/data/products';
 import { listRegions } from '@lib/data/regions';
-import type { StoreProduct } from '@medusajs/types';
+import type { StoreProduct, StoreProductType } from '@medusajs/types';
 
 import type { AccountWithParams } from '@kit/accounts/types/accounts';
 import type { AnalysisPackageWithVariant } from '@kit/shared/components/select-analysis-package';
@@ -118,17 +118,12 @@ async function analysisPackageElementsLoader({
 async function analysisPackagesWithVariantLoader({
   account,
   countryCode,
+  productType,
 }: {
   account: AccountWithParams;
   countryCode: string;
+  productType: StoreProductType;
 }) {
-  const productTypes = await loadProductTypes();
-  const productType = productTypes.find(
-    ({ metadata }) => metadata?.handle === 'analysis-packages',
-  );
-  if (!productType) {
-    return null;
-  }
   const analysisPackagesResponse = await listProducts({
     countryCode,
     queryParams: { limit: 100, 'type_id[0]': productType.id },
@@ -171,12 +166,23 @@ async function analysisPackagesLoader() {
     throw new Error('Account not found');
   }
 
-  const countryCodes = await loadCountryCodes();
+  const [countryCodes, productTypes] = await Promise.all([
+    loadCountryCodes(),
+    loadProductTypes(),
+  ]);
   const countryCode = countryCodes[0]!;
+  const productType = productTypes.find(
+    ({ metadata }) => metadata?.handle === 'analysis-packages',
+  );
+
+  if (!productType) {
+    return { analysisPackageElements: [], analysisPackages: [], countryCode };
+  }
 
   const analysisPackagesWithVariant = await analysisPackagesWithVariantLoader({
     account,
     countryCode,
+    productType,
   });
   if (!analysisPackagesWithVariant) {
     return { analysisPackageElements: [], analysisPackages: [], countryCode };

app/home/(user)/settings/_components/account-preferences-form.tsx

@@ -3,7 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
-import { Trans } from '@kit/ui/trans';
 import { useRevalidatePersonalAccountDataQuery } from '@kit/accounts/hooks/use-personal-account-data';
 import type { AccountWithParams } from '@kit/accounts/types/accounts';
 import { Button } from '@kit/ui/button';
@@ -12,6 +11,7 @@ import { Form } from '@kit/ui/form';
 import { LanguageSelector } from '@kit/ui/language-selector';
 import { toast } from '@kit/ui/sonner';
 import { Switch } from '@kit/ui/switch';
+import { Trans } from '@kit/ui/trans';
 
 import {
   AccountPreferences,

app/home/(user)/settings/_components/account-settings-form.tsx

@@ -3,7 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
-import { Trans } from '@kit/ui/trans';
 import { useRevalidatePersonalAccountDataQuery } from '@kit/accounts/hooks/use-personal-account-data';
 import type { AccountWithParams } from '@kit/accounts/types/accounts';
 import { Button } from '@kit/ui/button';
@@ -24,6 +23,7 @@ import {
   SelectValue,
 } from '@kit/ui/select';
 import { toast } from '@kit/ui/sonner';
+import { Trans } from '@kit/ui/trans';
 
 import {
   AccountSettings,

lib/services/medusaCart.service.ts

@@ -31,8 +31,10 @@ const env = () =>
         .min(1),
     })
     .parse({
-      medusaBackendPublicUrl: (process.env.DEV_MONTONIO_CALLBACK_URL || process.env.MEDUSA_BACKEND_PUBLIC_URL)!,
-      siteUrl: (process.env.DEV_MONTONIO_CALLBACK_URL || process.env.NEXT_PUBLIC_SITE_URL)!,
+      medusaBackendPublicUrl: (process.env.DEV_MONTONIO_CALLBACK_URL ||
+        process.env.MEDUSA_BACKEND_PUBLIC_URL)!,
+      siteUrl: (process.env.DEV_MONTONIO_CALLBACK_URL ||
+        process.env.NEXT_PUBLIC_SITE_URL)!,
     });
 
 export async function handleAddToCart({

public/locales/en/cart.json

@@ -63,7 +63,7 @@
     "promotionsTotal": "Promotions total",
     "companyBenefitsTotal": "Company benefits total",
     "subtotal": "Subtotal",
-    "benefitsTotal": "Paid with benefits",
+    "benefitsTotal": "Paid with company benefits",
     "montonioTotal": "Paid with Montonio",
     "total": "Total",
     "giftCard": "Gift card"
@@ -94,5 +94,8 @@
   "editServiceItem": {
     "title": "Edit booking",
     "description": "Edit booking details"
+  },
+  "companyBenefits": {
+    "label": "Use company benefits"
   }
 }

public/locales/et/cart.json

@@ -61,7 +61,7 @@
   "order": {
     "title": "Tellimus",
     "promotionsTotal": "Soodustuse summa",
-    "companyBenefitsTotal": "Toetuse summa",
+    "companyBenefitsTotal": "Tööandja katab",
     "subtotal": "Vahesumma",
     "benefitsTotal": "Tasutud tervisetoetusest",
     "montonioTotal": "Tasutud Montonio'ga",
@@ -94,5 +94,8 @@
   "editServiceItem": {
     "title": "Muuda broneeringut",
     "description": "Muuda broneeringu andmeid"
+  },
+  "companyBenefits": {
+    "label": "Kasuta tööandja tervisetoetust"
   }
 }

public/locales/ru/cart.json

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