k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MED-197: improve analysis compare page

Browse Source
This commit is contained in:
Danel Kungla
2025-10-07 18:07:59 +03:00
parent 258bd62a7f
commit 57f992a5c3
14 changed files with 218 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/home/(user)/(dashboard)/order-analysis-package/page.tsx
View File

@@ -28,17 +28,18 @@ async function OrderAnalysisPackagePage() {
<PageBody>
<div className="space-y-3 text-center">
<h3>
<Trans i18nKey={'marketing:selectPackage'} />
<Trans i18nKey="order-analysis-package:selectPackage" />
</h3>
<ComparePackagesModal
analysisPackages={analysisPackages}
analysisPackageElements={analysisPackageElements}
triggerElement={
<Button variant="secondary" className="gap-2">
<Trans i18nKey={'marketing:comparePackages'} />
<Trans i18nKey="order-analysis-package:comparePackages" />
<Scale className="size-4 stroke-[1.5px]" />
</Button>
}
countryCode={countryCode}
/>
</div>
<SelectAnalysisPackages

115
app/home/(user)/_components/compare-packages-add-to-cart-buttons.tsx Normal file
View File

@@ -0,0 +1,115 @@
'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { AnalysisPackageWithVariant } from '@/packages/shared/src/components/select-analysis-package';
import { pathsConfig } from '@/packages/shared/src/config';
import { Spinner } from '@kit/ui/makerkit/spinner';
import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import { toast } from '@kit/ui/shadcn/sonner';
import { Table, TableBody, TableCell, TableRow } from '@kit/ui/shadcn/table';
import { handleAddToCart } from '~/lib/services/medusaCart.service';
import { cn } from '~/lib/utils';
const AddToCartButton = ({
onClick,
disabled,
isLoading,
}: {
onClick: () => void;
disabled: boolean;
isLoading: boolean;
}) => {
return (
<TableCell align="center" className="xs:px-2 px-1 py-6">
<Button
onClick={onClick}
disabled={disabled}
className="xs:p-6 xs:text-sm relative p-2 text-[10px]"
>
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<Spinner />
</div>
)}
<div
className={cn({
invisible: isLoading,
})}
>
<Trans i18nKey="compare-packages-modal:selectThisPackage" />
</div>
</Button>
</TableCell>
);
};
const ComparePackagesAddToCartButtons = ({
countryCode,
standardPackage,
standardPlusPackage,
premiumPackage,
}: {
countryCode: string;
standardPackage: AnalysisPackageWithVariant;
standardPlusPackage: AnalysisPackageWithVariant;
premiumPackage: AnalysisPackageWithVariant;
}) => {
const [addedPackage, setAddedPackage] = useState<string | null>(null);
const router = useRouter();
const handleSelect = async ({ variantId }: AnalysisPackageWithVariant) => {
setAddedPackage(variantId);
try {
await handleAddToCart({
selectedVariant: { id: variantId },
countryCode,
});
setAddedPackage(null);
toast.success(
<Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />,
);
router.push(pathsConfig.app.cart);
} catch (e) {
toast.error(
<Trans
i18nKey={'order-analysis-package:analysisPackageAddToCartError'}
/>,
);
setAddedPackage(null);
console.error(e);
}
};
return (
<Table>
<TableBody>
<TableRow>
<TableCell className="w-[30vw] py-6" />
<AddToCartButton
onClick={() => handleSelect(standardPackage)}
disabled={!!addedPackage}
isLoading={addedPackage === standardPackage.variantId}
/>
<AddToCartButton
onClick={() => handleSelect(standardPlusPackage)}
disabled={!!addedPackage}
isLoading={addedPackage === standardPlusPackage.variantId}
/>
<AddToCartButton
onClick={() => handleSelect(premiumPackage)}
disabled={!!addedPackage}
isLoading={addedPackage === premiumPackage.variantId}
/>
</TableRow>
</TableBody>
</Table>
);
};
export default ComparePackagesAddToCartButtons;

21
app/home/(user)/_components/compare-packages-modal.tsx
View File

@@ -26,6 +26,9 @@ import {
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import ComparePackagesAddToCartButtons from './compare-packages-add-to-cart-buttons';
import DefaultPackageFeaturesRows from './default-package-features-rows';
export type AnalysisPackageElement = Pick<
StoreProduct,
'title' | 'id' | 'description'
@@ -35,7 +38,7 @@ export type AnalysisPackageElement = Pick<
isIncludedInPremium: boolean;
};
const CheckWithBackground = () => {
export const CheckWithBackground = () => {
return (
<div className="bg-primary w-min rounded-full p-1 text-white">
<Check className="size-3 stroke-2" />
@@ -53,7 +56,7 @@ const PackageTableHead = async ({
const { title, price, nrOfAnalyses } = product;
return (
<TableHead className="py-2">
<TableHead className="xs:content-normal content-start py-2">
<PackageHeader
title={t(title)}
tagColor="bg-cyan"
@@ -69,10 +72,12 @@ const ComparePackagesModal = async ({
analysisPackages,
analysisPackageElements,
triggerElement,
countryCode,
}: {
analysisPackages: AnalysisPackageWithVariant[];
analysisPackageElements: AnalysisPackageElement[];
triggerElement: JSX.Element;
countryCode: string;
}) => {
const { t } = await createI18nServerInstance();
@@ -110,7 +115,7 @@ const ComparePackagesModal = async ({
<p className="text-muted-foreground mx-auto w-3/5 text-sm">
{t('product:healthPackageComparison.description')}
</p>
<div className="max-h-[80vh] overflow-y-auto rounded-md border">
<div className="max-h-[50vh] overflow-y-auto rounded-md border sm:max-h-[70vh]">
<Table>
<TableHeader>
<TableRow>
@@ -121,6 +126,8 @@ const ComparePackagesModal = async ({
</TableRow>
</TableHeader>
<TableBody>
<DefaultPackageFeaturesRows />
{analysisPackageElements.map(
({
title,
@@ -136,7 +143,7 @@ const ComparePackagesModal = async ({
return (
<TableRow key={id}>
<TableCell className="py-6 sm:max-w-[30vw]">
<TableCell className="py-6 sm:w-[30vw]">
{title}{' '}
{description && (
<InfoTooltip
@@ -164,6 +171,12 @@ const ComparePackagesModal = async ({
</Table>
</div>
</div>
<ComparePackagesAddToCartButtons
countryCode={countryCode}
standardPackage={standardPackage}
premiumPackage={premiumPackage}
standardPlusPackage={standardPlusPackage}
/>
</div>
</DialogContent>
</Dialog>

46
app/home/(user)/_components/default-package-features-rows.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { Trans } from '@kit/ui/makerkit/trans';
import { TableCell, TableRow } from '@kit/ui/shadcn/table';
import { withI18n } from '~/lib/i18n/with-i18n';
import { CheckWithBackground } from './compare-packages-modal';
const DefaultPackageFeaturesRows = () => {
return (
<>
<TableRow key="digital-doctor-feedback">
<TableCell className="max-w-[30vw] py-6">
<Trans i18nKey="order-analysis-package:digitalDoctorFeedback" />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
</TableRow>
<TableRow key="give-analyses">
<TableCell className="py-6 sm:max-w-[30vw]">
<Trans i18nKey="order-analysis-package:giveAnalyses" />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
<TableCell align="center" className="py-6">
<CheckWithBackground />
</TableCell>
</TableRow>
</>
);
};
export default withI18n(DefaultPackageFeaturesRows);

14
lib/services/medusaCart.service.ts
View File

@@ -2,6 +2,7 @@
import { loadCurrentUserAccount } from '@/app/home/(user)/_lib/server/load-user-account';
import { MontonioOrderHandlerService } from '@/packages/billing/montonio/src';
import { getLogger } from '@/packages/shared/src/logger';
import { addToCart, deleteLineItem, retrieveCart } from '@lib/data/cart';
import { getCartId } from '@lib/data/cookies';
import { StoreCartLineItem, StoreProductVariant } from '@medusajs/types';
@@ -44,12 +45,17 @@ export async function handleAddToCart({
selectedVariant: Pick<StoreProductVariant, 'id'>;
countryCode: string;
}) {
try {
} catch (e) {
console.error('medusa card error: ', e);
}
const logger = await getLogger();
const ctx = {
countryCode,
selectedVariant,
};
logger.info(ctx, 'Adding to cart...');
const { account } = await loadCurrentUserAccount();
if (!account) {
logger.error(ctx, 'Account not found');
throw new Error('Account not found');
}

10
packages/features/medusa-storefront/src/lib/data/cart.ts
View File

@@ -7,6 +7,8 @@ import { sdk } from '@lib/config';
import medusaError from '@lib/util/medusa-error';
import { HttpTypes, StoreCart } from '@medusajs/types';
import { getLogger } from '@kit/shared/logger';
import {
getAuthHeaders,
getCacheOptions,
@@ -135,13 +137,21 @@ export async function addToCart({
quantity: number;
countryCode: string;
}) {
const logger = await getLogger();
const ctx = {
variantId,
quantity,
countryCode,
};
if (!variantId) {
logger.error(ctx, 'Missing variant ID when adding to cart');
throw new Error('Missing variant ID when adding to cart');
}
const cart = await getOrSetCart(countryCode);
if (!cart) {
logger.error(ctx, 'Error retrieving or creating cart');
throw new Error('Error retrieving or creating cart');
}

6
packages/shared/src/components/package-header.tsx
View File

@@ -18,14 +18,16 @@ export const PackageHeader = ({
return (
<div className="space-y-1 text-center">
<p className="text-sm sm:text-lg sm:font-medium">{title}</p>
<h2 className="text-xl sm:text-4xl">
<h2 className="xs:text-xl text-lg sm:text-4xl">
{formatCurrency({
currencyCode: 'eur',
locale: language,
value: price,
})}
</h2>
<Badge className={cn('text-xs', tagColor)}>{analysesNr}</Badge>
<Badge className={cn('xs:text-xs text-[10px]', tagColor)}>
{analysesNr}
</Badge>
</div>
);
};

1
packages/shared/src/components/select-analysis-package.tsx
View File

@@ -117,6 +117,7 @@ export default function SelectAnalysisPackage({
<Button
className="w-full text-[10px] sm:text-sm"
onClick={handleSelect}
disabled={isAddingToCart}
>
{isAddingToCart ? (
<Spinner />

2
public/locales/en/common.json
View File

@@ -72,7 +72,7 @@
"myOrders": "My orders",
"analysisResults": "Analysis results",
"orderAnalysisPackage": "Order analysis package",
"orderAnalysis": "Order analysis",
"orderAnalysis": "Order single analysis",
"orderHealthAnalysis": "Order health check",
"account": "Account",
"companyMembers": "Manage employees",

4
public/locales/en/order-analysis-package.json
View File

@@ -5,5 +5,7 @@
"selectPackage": "Select package",
"comparePackages": "Compare packages",
"analysisPackageAddedToCart": "Analysis package added to cart",
"analysisPackageAddToCartError": "Adding analysis package to cart failed"
"analysisPackageAddToCartError": "Adding analysis package to cart failed",
"digitalDoctorFeedback": "Digital doctor feedback",
"giveAnalyses": "Analyses"
}

2
public/locales/et/common.json
View File

@@ -72,7 +72,7 @@
"myOrders": "Minu tellimused",
"analysisResults": "Analüüside vastused",
"orderAnalysisPackage": "Telli analüüside pakett",
"orderAnalysis": "Telli analüüs",
"orderAnalysis": "Telli üksikanalüüs",
"orderHealthAnalysis": "Telli terviseuuring",
"account": "Konto",
"companyMembers": "Töötajate haldamine",

2
public/locales/et/dashboard.json
View File

@@ -15,7 +15,7 @@
"recommendedForYou": "Soovitused sulle",
"heroCard": {
"orderAnalysis": {
"title": "Telli analüüs",
"title": "Telli üksikanalüüs",
"description": "Telli endale sobiv analüüs"
},
"benefits": {

4
public/locales/et/order-analysis-package.json
View File

@@ -5,5 +5,7 @@
"selectPackage": "Vali pakett",
"comparePackages": "Võrdle pakette",
"analysisPackageAddedToCart": "Analüüsi pakett lisatud ostukorvi",
"analysisPackageAddToCartError": "Analüüsi paketi lisamine ostukorvi ebaõnnestus"
"analysisPackageAddToCartError": "Analüüsi paketi lisamine ostukorvi ebaõnnestus",
"digitalDoctorFeedback": "Digitaalne arsti kokkuvõte",
"giveAnalyses": "Analüüside võtmine"
}

4
public/locales/ru/order-analysis-package.json
View File

@@ -5,5 +5,7 @@
"selectPackage": "Выберите пакет",
"comparePackages": "Сравнить пакеты",
"analysisPackageAddedToCart": "Пакет анализов добавлен в корзину",
"analysisPackageAddToCartError": "Не удалось добавить пакет анализов в корзину"
"analysisPackageAddToCartError": "Не удалось добавить пакет анализов в корзину",
"digitalDoctorFeedback": "Digital doctor feedback",
"giveAnalyses": "Analyses"
}