MED-197: improve analysis compare page
This commit is contained in:
Danel Kungla
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user