improve order analyses cards
This commit is contained in:
@@ -21,7 +21,6 @@ import { formatCurrency } from '@/packages/shared/src/utils';
|
||||
export type OrderAnalysisCard = Pick<
|
||||
StoreProduct, 'title' | 'description' | 'subtitle'
|
||||
> & {
|
||||
isAvailable: boolean;
|
||||
variant: { id: string };
|
||||
price: number | null;
|
||||
};
|
||||
@@ -64,7 +63,6 @@ export default function OrderAnalysesCards({
|
||||
variant,
|
||||
description,
|
||||
subtitle,
|
||||
isAvailable,
|
||||
price,
|
||||
}) => {
|
||||
const formattedPrice = typeof price === 'number'
|
||||
@@ -77,7 +75,7 @@ export default function OrderAnalysesCards({
|
||||
return (
|
||||
<Card
|
||||
key={title}
|
||||
variant={isAvailable ? "gradient-success" : "gradient-warning"}
|
||||
variant="gradient-success"
|
||||
className="flex flex-col justify-between"
|
||||
>
|
||||
<CardHeader className="flex-row">
|
||||
@@ -86,46 +84,44 @@ export default function OrderAnalysesCards({
|
||||
>
|
||||
<HeartPulse className="size-4 fill-green-500" />
|
||||
</div>
|
||||
{isAvailable && (
|
||||
<div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="px-2 text-black"
|
||||
onClick={() => handleSelect(variant.id)}
|
||||
>
|
||||
{variantAddingToCart === variant.id ? <Loader2 className="size-4 stroke-2 animate-spin" /> : <ShoppingCart className="size-4 stroke-2" />}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="px-2 text-black"
|
||||
onClick={() => handleSelect(variant.id)}
|
||||
>
|
||||
{variantAddingToCart === variant.id ? <Loader2 className="size-4 stroke-2 animate-spin" /> : <ShoppingCart className="size-4 stroke-2" />}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardFooter className="flex flex-col items-start gap-2">
|
||||
<h5>
|
||||
{title}
|
||||
{description && (
|
||||
<>
|
||||
{' '}
|
||||
<InfoTooltip
|
||||
content={
|
||||
<div className='flex flex-col gap-2'>
|
||||
<span>{formattedPrice}</span>
|
||||
<span>{description}</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
<CardFooter className="flex gap-2">
|
||||
<div className="flex flex-col items-start gap-2 flex-1">
|
||||
<h5>
|
||||
{title}
|
||||
{description && (
|
||||
<>
|
||||
{' '}
|
||||
<InfoTooltip
|
||||
content={
|
||||
<div className='flex flex-col gap-2'>
|
||||
<span>{formattedPrice}</span>
|
||||
<span>{description}</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</h5>
|
||||
{subtitle && (
|
||||
<CardDescription>
|
||||
{subtitle}
|
||||
</CardDescription>
|
||||
)}
|
||||
</h5>
|
||||
{isAvailable && subtitle && (
|
||||
<CardDescription>
|
||||
{subtitle}
|
||||
</CardDescription>
|
||||
)}
|
||||
{!isAvailable && (
|
||||
<CardDescription>
|
||||
<Trans i18nKey={'order-analysis:analysisNotAvailable'} />
|
||||
</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2 self-end text-sm">
|
||||
<span>{formattedPrice}</span>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -41,7 +41,7 @@ async function analysesLoader() {
|
||||
const categoryProducts = category
|
||||
? await listProducts({
|
||||
countryCode,
|
||||
queryParams: { limit: 100, category_id: category.id },
|
||||
queryParams: { limit: 100, category_id: category.id, order: 'title' },
|
||||
})
|
||||
: null;
|
||||
|
||||
@@ -51,8 +51,10 @@ async function analysesLoader() {
|
||||
|
||||
return {
|
||||
analyses:
|
||||
categoryProducts?.response.products.map<OrderAnalysisCard>(
|
||||
({ title, description, subtitle, variants, status, metadata }) => {
|
||||
categoryProducts?.response.products
|
||||
.filter(({ status, metadata }) => status === 'published' && !!metadata?.analysisIdOriginal)
|
||||
.map<OrderAnalysisCard>(
|
||||
({ title, description, subtitle, variants }) => {
|
||||
const variant = variants![0]!;
|
||||
return {
|
||||
title,
|
||||
@@ -61,8 +63,6 @@ async function analysesLoader() {
|
||||
variant: {
|
||||
id: variant.id,
|
||||
},
|
||||
isAvailable:
|
||||
status === 'published' && !!metadata?.analysisIdOriginal,
|
||||
price: variant.calculated_price?.calculated_amount ?? null,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"title": "Select analysis",
|
||||
"description": "All analysis results will appear within 1-3 days after the blood test.",
|
||||
"analysisNotAvailable": "Analysis is not available currently",
|
||||
"analysisAddedToCart": "Analysis added to cart",
|
||||
"analysisAddToCartError": "Adding analysis to cart failed"
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"title": "Vali analüüs",
|
||||
"description": "Kõikide analüüside tulemused ilmuvad 1–3 tööpäeva jooksul peale vere andmist.",
|
||||
"analysisNotAvailable": "Analüüsi tellimine ei ole hetkel saadaval",
|
||||
"analysisAddedToCart": "Analüüs lisatud ostukorvi",
|
||||
"analysisAddToCartError": "Analüüsi lisamine ostukorvi ebaõnnestus"
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"title": "Выберите анализ",
|
||||
"description": "Результаты всех анализов будут доступны в течение 1–3 рабочих дней после сдачи крови.",
|
||||
"analysisNotAvailable": "Заказ анализа в данный момент недоступен",
|
||||
"analysisAddedToCart": "Анализ добавлен в корзину",
|
||||
"analysisAddToCartError": "Не удалось добавить анализ в корзину"
|
||||
}
|
||||
Reference in New Issue
Block a user