89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { systemCurrency } from '@/lib/utils';
|
|
import { router, usePage } from '@inertiajs/react';
|
|
import { useState } from 'react';
|
|
import { CartProps } from '..';
|
|
|
|
const CartSummery = () => {
|
|
const { props } = usePage<CartProps>();
|
|
const [couponCode, setCouponCode] = useState('');
|
|
const { cart, subtotal, coupon, discountedPrice, taxAmount, totalPrice, translate } = props;
|
|
const { frontend, button, input } = translate;
|
|
const taxPercentage = taxAmount > 0 && discountedPrice > 0 ? ((taxAmount / discountedPrice) * 100).toFixed(0) : 0;
|
|
const currency = systemCurrency(props.system.fields['selling_currency']);
|
|
|
|
return (
|
|
<Card className="sticky top-24">
|
|
<CardContent className="p-6">
|
|
<h2 className="mb-4 text-xl font-bold">{frontend.payment_summary}</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">{frontend.sub_total}</span>
|
|
<span>
|
|
{subtotal} {currency?.symbol}
|
|
</span>
|
|
</div>
|
|
|
|
{coupon && (
|
|
<div className="flex justify-between text-green-600">
|
|
<span>
|
|
{frontend.discount} ({coupon.code})
|
|
</span>
|
|
<span>
|
|
- {(subtotal - discountedPrice).toFixed(2)} {currency?.symbol}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">
|
|
{frontend.tax} ({taxPercentage ?? 0}%)
|
|
</span>
|
|
<span>
|
|
+ {taxAmount.toFixed(2)} {currency?.symbol}
|
|
</span>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex justify-between font-bold">
|
|
<span>{frontend.total}</span>
|
|
<span>
|
|
{totalPrice.toFixed(2)} {currency?.symbol}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<div className="flex gap-2">
|
|
<div className="flex-1">
|
|
<Input
|
|
value={couponCode}
|
|
defaultValue={coupon ? coupon.code : ''}
|
|
onChange={(e) => setCouponCode(e.target.value)}
|
|
placeholder={input.coupon_placeholder}
|
|
/>
|
|
</div>
|
|
<Button type="button" onClick={() => router.get(route('course-cart.index', { coupon: couponCode }))}>
|
|
{button.apply}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{cart.length > 0 && (
|
|
<Button asChild size="lg" type="button" className="mt-4 w-full" disabled={cart.length === 0}>
|
|
Test
|
|
{/* <a href={route('payments.index', { from: 'web', coupon: coupon ? coupon.code : '' })}>{button.continue}</a> */}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CartSummery;
|