116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
'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;
|