connected api with profile, order

features/cart/components/OrderSummary.tsx

@@ -0,0 +1,176 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Textarea } from "@/components/ui/textarea"
+import { Separator } from "@/components/ui/separator"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import DeliveryTypeSelector from "./DeliveryTypeSelector"
+import type { Order, Province, DeliveryType, CartTranslations, PaymentType } from "../types"
+
+interface OrderSummaryProps {
+  order: Order
+  translations: CartTranslations
+  paymentType: PaymentType | null
+  deliveryType: DeliveryType
+  selectedRegion: string
+  selectedProvince: number | null
+  note: string
+  regionGroups: Record<string, Province[]>
+  availableRegions: string[]
+  paymentTypes: PaymentType[]
+  onPaymentTypeChange: (type: PaymentType) => void
+  onDeliveryTypeChange: (type: DeliveryType) => void
+  onRegionChange: (regionCode: string) => void
+  onProvinceChange: (provinceId: number) => void
+  onNoteChange: (note: string) => void
+  onCompleteOrder: () => void
+  isLoading: boolean
+}
+
+export default function OrderSummary({
+  order,
+  translations: t,
+  paymentType,
+  deliveryType,
+  selectedRegion,
+  selectedProvince,
+  note,
+  regionGroups,
+  availableRegions,
+  paymentTypes,
+  onPaymentTypeChange,
+  onDeliveryTypeChange,
+  onRegionChange,
+  onProvinceChange,
+  onNoteChange,
+  onCompleteOrder,
+  isLoading,
+}: OrderSummaryProps) {
+  const provincesForSelectedRegion = selectedRegion ? regionGroups[selectedRegion] || [] : []
+  const isFormValid = selectedRegion && selectedProvince && paymentType
+
+  return (
+    <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
+      {/* Payment Type */}
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
+        <div className="flex gap-2">
+          {paymentTypes.map((type) => (
+            <Card
+              key={type.id}
+              className={`flex-1 cursor-pointer transition-all ${
+                paymentType?.id === type.id 
+                  ? "border-2 border-[#005bff] bg-blue-50" 
+                  : "border-2 border-gray-200"
+              }`}
+              onClick={() => onPaymentTypeChange(type)}
+            >
+              <div className="flex flex-col items-center justify-center p-4 gap-2">
+                <span className={`text-xs font-medium ${
+                  paymentType?.id === type.id ? "text-[#005bff]" : ""
+                }`}>
+                  {type.name}
+                </span>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Delivery Type */}
+      <DeliveryTypeSelector 
+        selectedType={deliveryType} 
+        onSelect={onDeliveryTypeChange} 
+        translations={t} 
+      />
+
+      {/* Region Selection */}
+      <div className="mb-6">
+        <Label className="text-lg font-semibold mb-3 block">{t.selectRegion}</Label>
+        <RadioGroup 
+          value={selectedRegion} 
+          onValueChange={(value) => {
+            onRegionChange(value)
+            onProvinceChange(null as any)
+          }} 
+          className="flex flex-wrap gap-4"
+        >
+          {availableRegions.map((regionCode) => (
+            <div key={regionCode} className="flex items-center space-x-2">
+              <RadioGroupItem
+                value={regionCode}
+                id={`region-${regionCode}`}
+                className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white"
+              />
+              <Label htmlFor={`region-${regionCode}`} className="cursor-pointer uppercase">
+                {regionCode}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+
+      {/* Province Selection */}
+      {selectedRegion && provincesForSelectedRegion.length > 0 && (
+        <div className="mb-6">
+          <Label className="text-lg font-semibold mb-3 block">{t.selectAddress}</Label>
+          <Select 
+            value={selectedProvince?.toString() || ""} 
+            onValueChange={(value) => onProvinceChange(parseInt(value))}
+          >
+            <SelectTrigger className="rounded-xl">
+              <SelectValue placeholder={t.selectAddress} />
+            </SelectTrigger>
+            <SelectContent>
+              {provincesForSelectedRegion.map((province) => (
+                <SelectItem key={province.id} value={province.id.toString()}>
+                  {province.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* Note */}
+      <div className="mb-6">
+        <Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
+        <Textarea
+          value={note}
+          onChange={(e) => onNoteChange(e.target.value)}
+          className="rounded-xl resize-none"
+          rows={3}
+          placeholder={t.note}
+        />
+      </div>
+
+      {/* Billing */}
+      <div className="space-y-2 mb-4">
+        {order.billing.body.map((item, index) => (
+          <div key={index} className="flex justify-between text-base font-medium">
+            <span>{item.title}:</span>
+            <span>{item.value}</span>
+          </div>
+        ))}
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex justify-between items-center mb-6">
+        <span className="text-lg font-semibold">{order.billing.footer.title}:</span>
+        <span className="text-lg font-bold text-green-600">{order.billing.footer.value}</span>
+      </div>
+
+      <Button
+        onClick={onCompleteOrder}
+        disabled={!isFormValid || isLoading}
+        className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
+        size="lg"
+      >
+        {isLoading ? `${t.placeOrder}...` : t.placeOrder}
+      </Button>
+    </Card>
+  )
+}