change design for analysis-package button

packages/shared/src/components/select-analysis-package.tsx

@@ -6,11 +6,9 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import type { AdminProductVariant, StoreProduct } from '@medusajs/types';
-import { Button } from '@medusajs/ui';
 import { useTranslation } from 'react-i18next';
-import { handleAddToCart } from '../../../../lib/services/medusaCart.service';
-import { toast } from '@kit/ui/sonner';
 
+import { Button } from '@kit/ui/button';
 import {
   Card,
   CardContent,
@@ -18,12 +16,20 @@ import {
   CardFooter,
   CardHeader,
 } from '@kit/ui/card';
+import { toast } from '@kit/ui/sonner';
+import { Spinner } from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';
-import { ButtonTooltip } from './ui/button-tooltip';
-import { PackageHeader } from './package-header';
-import { pathsConfig } from '../config';
 
-export type AnalysisPackageWithVariant = Pick<StoreProduct, 'title' | 'description' | 'subtitle' | 'metadata'> & {
+import { handleAddToCart } from '~/lib/services/medusaCart.service';
+
+import { pathsConfig } from '../config';
+import { PackageHeader } from './package-header';
+import { ButtonTooltip } from './ui/button-tooltip';
+
+export type AnalysisPackageWithVariant = Pick<
+  StoreProduct,
+  'title' | 'description' | 'subtitle' | 'metadata'
+> & {
   variantId: string;
   nrOfAnalyses: number;
   price: number;
@@ -38,7 +44,7 @@ export default function SelectAnalysisPackage({
   countryCode,
 }: {
   analysisPackage: AnalysisPackageWithVariant;
-  countryCode: string,
+  countryCode: string;
 }) {
   const router = useRouter();
   const {
@@ -47,8 +53,15 @@ export default function SelectAnalysisPackage({
   } = useTranslation();
 
   const [isAddingToCart, setIsAddingToCart] = useState(false);
-  
-  const { nrOfAnalyses, variantId, title, subtitle = '', description = '', price } = analysisPackage;
+
+  const {
+    nrOfAnalyses,
+    variantId,
+    title,
+    subtitle = '',
+    description = '',
+    price,
+  } = analysisPackage;
 
   const handleSelect = async () => {
     setIsAddingToCart(true);
@@ -58,10 +71,16 @@ export default function SelectAnalysisPackage({
         countryCode,
       });
       setIsAddingToCart(false);
-      toast.success(<Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />);
+      toast.success(
+        <Trans i18nKey={'order-analysis-package:analysisPackageAddedToCart'} />,
+      );
       router.push(pathsConfig.app.cart);
     } catch (e) {
-      toast.error(<Trans i18nKey={'order-analysis-package:analysisPackageAddToCartError'} />);
+      toast.error(
+        <Trans
+          i18nKey={'order-analysis-package:analysisPackageAddToCartError'}
+        />,
+      );
       setIsAddingToCart(false);
       console.error(e);
     }
@@ -87,7 +106,7 @@ export default function SelectAnalysisPackage({
       <CardContent className="space-y-1 text-center">
         <PackageHeader
           title={title}
-          tagColor='bg-cyan'
+          tagColor="bg-cyan"
           analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
           language={language}
           price={price}
@@ -95,8 +114,15 @@ export default function SelectAnalysisPackage({
         <CardDescription>{subtitle}</CardDescription>
       </CardContent>
       <CardFooter>
-        <Button className="w-full text-[10px] sm:text-sm" onClick={handleSelect} isLoading={isAddingToCart}>
-          {!isAddingToCart && <Trans i18nKey='order-analysis-package:selectThisPackage' />}
+        <Button
+          className="w-full text-[10px] sm:text-sm"
+          onClick={handleSelect}
+        >
+          {isAddingToCart ? (
+            <Spinner />
+          ) : (
+            <Trans i18nKey="order-analysis-package:selectThisPackage" />
+          )}
         </Button>
       </CardFooter>
     </Card>