[V0_FILE]typescriptreact:file="api/rajaongkir/provinces.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import axios from "axios" export async function GET(req: NextRequest) { try { const response = await axios.get("https://api.rajaongkir.com/starter/province", { headers: { key: process.env.RAJAONGKIR_API_KEY, }, }) return NextResponse.json(response.data.rajaongkir) } catch (error) { console.error("Error fetching provinces:", error) return NextResponse.json({ message: "Failed to fetch provinces" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="api/rajaongkir/cities/[provinceId].ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import axios from "axios" export async function GET(req: NextRequest, { params }: { params: { provinceId: string } }) { const provinceId = params.provinceId try { const response = await axios.get(`https://api.rajaongkir.com/starter/city?province=${provinceId}`, { headers: { key: process.env.RAJAONGKIR_API_KEY, }, }) return NextResponse.json(response.data.rajaongkir) } catch (error) { console.error("Error fetching cities:", error) return NextResponse.json({ message: "Failed to fetch cities" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="api/rajaongkir/cost.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import axios from "axios" export async function POST(req: NextRequest) { try { const body = await req.json() const { origin, destination, weight, courier } = body const response = await axios.post( "https://api.rajaongkir.com/starter/cost", { origin, destination, weight, courier, }, { headers: { key: process.env.RAJAONGKIR_API_KEY, "content-type": "application/x-www-form-urlencoded", }, }, ) return NextResponse.json(response.data.rajaongkir) } catch (error) { console.error("Error calculating shipping cost:", error) return NextResponse.json({ message: "Failed to calculate shipping cost" }, { status: 500 }) } } [V0_FILE]php:file="app/Http/Controllers/RajaOngkirController.php" isEdit="true" apiKey = env('RAJAONGKIR_API_KEY'); } /** * Get all provinces */ public function getProvinces() { try { $response = Http::withHeaders([ 'accept' => 'application/json', 'key' => $this->apiKey ])->get($this->baseUrl . 'destination/province'); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to fetch provinces' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } /** * Get cities by province ID */ public function getCities($provinceId) { try { $response = Http::withHeaders([ 'accept' => 'application/json', 'key' => $this->apiKey ])->get($this->baseUrl . 'destination/city', [ 'province' => $provinceId ]); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to fetch cities' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } /** * Get domestic destinations (subdistricts) */ public function getDomesticDestinations(Request $request) { try { $response = Http::withHeaders([ 'accept' => 'application/json', 'key' => $this->apiKey ])->get($this->baseUrl . 'destination/domestic-destination', $request->all()); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to fetch destinations' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } /** * Calculate domestic shipping cost */ public function calculateDomesticShipping(Request $request) { try { $request->validate([ 'origin' => 'required', 'destination' => 'required', 'weight' => 'required|numeric|min:1', 'courier' => 'required' ]); $response = Http::withHeaders([ 'accept' => 'application/json', 'content-type' => 'application/json', 'key' => $this->apiKey ])->post($this->baseUrl . 'calculate/domestic-cost', $request->all()); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to calculate shipping cost' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } /** * Calculate international shipping cost */ public function calculateInternationalShipping(Request $request) { try { $request->validate([ 'origin' => 'required', 'destination' => 'required', 'weight' => 'required|numeric|min:1', 'courier' => 'required' ]); $response = Http::withHeaders([ 'accept' => 'application/json', 'content-type' => 'application/json', 'key' => $this->apiKey ])->post($this->baseUrl . 'calculate/international-cost', $request->all()); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to calculate international shipping cost' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } /** * Track shipment */ public function trackShipment(Request $request) { try { $request->validate([ 'waybill' => 'required', 'courier' => 'required' ]); $response = Http::withHeaders([ 'accept' => 'application/json', 'content-type' => 'application/json', 'key' => $this->apiKey ])->post($this->baseUrl . 'waybill', [ 'waybill' => $request->waybill, 'courier' => $request->courier ]); if ($response->successful()) { return response()->json($response->json()); } return response()->json([ 'message' => 'Failed to track shipment' ], 500); } catch (\Exception $e) { return response()->json([ 'message' => 'Error: ' . $e->getMessage() ], 500); } } } [V0_FILE]php:file="routes/api.php" isEdit="true" get('/user', function (Request $request) { return $request->user(); }); // Raja Ongkir API Routes Route::prefix('rajaongkir')->group(function () { Route::get('/provinces', [RajaOngkirController::class, 'getProvinces']); Route::get('/cities/{provinceId}', [RajaOngkirController::class, 'getCities']); Route::get('/destinations', [RajaOngkirController::class, 'getDomesticDestinations']); Route::post('/domestic-cost', [RajaOngkirController::class, 'calculateDomesticShipping']); Route::post('/international-cost', [RajaOngkirController::class, 'calculateInternationalShipping']); Route::post('/track', [RajaOngkirController::class, 'trackShipment']); }); [V0_FILE]typescriptreact:file="checkout.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/Components/ui/button" import { Input } from "@/Components/ui/input" import { Label } from "@/Components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/Components/ui/card" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/Components/ui/tooltip" import { Separator } from "@/Components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select" import RootLayout from "@/Layouts/Layout" import { router, usePage } from "@inertiajs/react" import axios from "axios" import { Trash2, ShoppingBag, CreditCard, User, MapPin, Phone, AlertCircle, Truck } from "lucide-react" import { Badge } from "@/Components/ui/badge" import toast from "react-hot-toast" export default function Checkout() { const user = usePage().props.auth.user const [isDeleting, setIsDeleting] = useState(null) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoadingShipping, setIsLoadingShipping] = useState(false) // Raja Ongkir states const [provinces, setProvinces] = useState([]) const [cities, setCities] = useState([]) const [destinations, setDestinations] = useState([]) const [selectedProvince, setSelectedProvince] = useState("") const [selectedCity, setSelectedCity] = useState("") const [selectedDestination, setSelectedDestination] = useState("") const [couriers, setCouriers] = useState([ { id: "jne", name: "JNE" }, { id: "pos", name: "POS Indonesia" }, { id: "tiki", name: "TIKI" }, { id: "sicepat", name: "SiCepat" }, { id: "jnt", name: "J&T" }, { id: "anteraja", name: "AnterAja" }, ]) const [selectedCourier, setSelectedCourier] = useState("") const [shippingCosts, setShippingCosts] = useState([]) const [selectedShippingService, setSelectedShippingService] = useState("") const [shippingCost, setShippingCost] = useState(0) const [formData, setFormData] = useState({ name: user.name, email: user.email, address: user.alamat, nohp: user.nohp, carts: user.carts, province: "", city: "", subdistrict: "", postal_code: "", }) // Fetch provinces on component mount useEffect(() => { fetchProvinces() }, []) // Fetch cities when province is selected useEffect(() => { if (selectedProvince) { fetchCities(selectedProvince) setSelectedCity("") setSelectedDestination("") setDestinations([]) } }, [selectedProvince]) // Fetch destinations when city is selected useEffect(() => { if (selectedCity) { fetchDestinations(selectedCity) setSelectedDestination("") } }, [selectedCity]) // Calculate shipping costs when courier and destination are selected useEffect(() => { if (selectedDestination && selectedCourier) { calculateShipping() } }, [selectedDestination, selectedCourier]) const fetchProvinces = async () => { try { const response = await axios.get("/api/rajaongkir/provinces") setProvinces(response.data.data || []) } catch (error) { console.error("Failed to fetch provinces:", error) toast.error("Failed to load provinces") } } const fetchCities = async (provinceId: string) => { try { const response = await axios.get(`/api/rajaongkir/cities/${provinceId}`) setCities(response.data.data || []) } catch (error) { console.error("Failed to fetch cities:", error) toast.error("Failed to load cities") } } const fetchDestinations = async (cityId: string) => { try { const response = await axios.get("/api/rajaongkir/destinations", { params: { city: cityId }, }) setDestinations(response.data.data || []) } catch (error) { console.error("Failed to fetch destinations:", error) toast.error("Failed to load destinations") } } const calculateShipping = async () => { if (!selectedDestination || !selectedCourier) return setIsLoadingShipping(true) try { // Assuming your store location has destination_id (e.g., Jakarta Pusat) const originDestinationId = 574 // Example: Jakarta Pusat const destinationId = selectedDestination const courier = selectedCourier // Calculate total weight (assuming each product has weight in grams) // If products don't have weight, you can set a default weight const weight = user.carts.reduce((sum: number, item: any) => sum + (item.product.weight || 1000) * item.qty, 0) const response = await axios.post("/api/rajaongkir/domestic-cost", { origin: originDestinationId, destination: destinationId, weight: weight, courier: courier, }) if (response.data.data && response.data.data.length > 0) { setShippingCosts(response.data.data[0].costs || []) } else { setShippingCosts([]) toast.error("No shipping services available for this route") } } catch (error) { console.error("Failed to calculate shipping:", error) toast.error("Failed to calculate shipping costs") } finally { setIsLoadingShipping(false) } } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleProvinceChange = (value: string) => { setSelectedProvince(value) setSelectedCity("") setSelectedDestination("") setShippingCosts([]) setSelectedShippingService("") setShippingCost(0) setFormData((prev) => ({ ...prev, province: provinces.find((p) => p.province_id === value)?.province || "" })) } const handleCityChange = (value: string) => { setSelectedCity(value) setSelectedDestination("") setShippingCosts([]) setSelectedShippingService("") setShippingCost(0) setFormData((prev) => ({ ...prev, city: cities.find((c) => c.city_id === value)?.city_name || "" })) } const handleDestinationChange = (value: string) => { setSelectedDestination(value) setShippingCosts([]) setSelectedShippingService("") setShippingCost(0) setFormData((prev) => ({ ...prev, subdistrict: destinations.find((d) => d.subdistrict_id === value)?.subdistrict_name || "", })) } const handleCourierChange = (value: string) => { setSelectedCourier(value) setShippingCosts([]) setSelectedShippingService("") setShippingCost(0) } const handleShippingServiceChange = (value: string) => { setSelectedShippingService(value) const selectedService = shippingCosts.find((service) => service.service === value) if (selectedService) { setShippingCost(selectedService.cost[0].value) } } const subtotal = user.carts.reduce((sum: any, item: any) => sum + item.product.price * item.qty, 0) const total = subtotal + shippingCost const handleDeleteItem = (itemId: number) => { setIsDeleting(itemId) router.delete(`/carts/${itemId}`, { onSuccess: () => { toast.success("Item removed") setIsDeleting(null) }, onError: () => { setIsDeleting(null) }, }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (user.carts.length === 0) { toast.error("Your cart is empty. Please add items before checkout.") return } if (!selectedShippingService) { toast.error("Please select a shipping method") return } setIsSubmitting(true) try { const response = await axios.post("/transactions", { carts: user.carts, shipping: { courier: selectedCourier, service: selectedShippingService, cost: shippingCost, address: `${formData.address}, ${formData.subdistrict}, ${formData.city}, ${formData.province}, ${formData.postal_code}`, }, }) console.log("RESPONSE", response) const snapToken = response.data.token console.log("snapToken", snapToken) // Panggil Midtrans Snap window.snap.pay(snapToken, { onSuccess: (result: any) => { console.log("Payment success:", result) router.patch(`/transactions/${result.order_id}/update-status`) }, onPending: (result: any) => { console.log("Waiting for payment:", result) }, onError: (result: any) => { console.error("Payment failed:", result) }, onClose: () => { location.reload() console.log("Payment popup closed") }, }) } catch (error: any) { console.error("Payment error:", error) toast.error(error.response?.data.message || "Error") } finally { setIsSubmitting(false) } } return (

Checkout

Complete your purchase and proceed to payment

{/* Customer Information */}

Customer Information Please verify your contact details {/* Shipping Information */} Shipping Information Enter your shipping details and select a courier

Province

City

Subdistrict

Postal Code

Street Address

Courier

{isLoadingShipping && (

Calculating shipping costs...

)} {shippingCosts.length > 0 && (

Shipping Service

)}

{/* Order Summary */}

Order Summary {user.carts.length} {user.carts.length === 1 ? "item" : "items"} in your cart {user.carts.length > 0 ? (

{user.carts.map((item: any) => (

{item.product.image ? ( {item.product.name}

) : ( )}

{item.product.name}

Qty: {item.qty} Rp {item.product.price.toLocaleString("id-ID")}

Rp {(item.product.price * item.qty).toLocaleString("id-ID")}

Remove item

))}

) : (

Your cart is empty

Add items to your cart to proceed with checkout

)} {user.carts.length > 0 && (

Subtotal Rp {subtotal.toLocaleString("id-ID")}

Shipping {shippingCost > 0 ? `Rp ${shippingCost.toLocaleString("id-ID")}` : "-"}

Total Rp {total.toLocaleString("id-ID")}

{user.carts.length > 0 && (

Secure payment powered by Midtrans

)}

) }