import React, { useState, useEffect } from 'react'; // Main App component for the Shopee Fee Calculator function App() { // State variables to store user inputs and calculated fees const [productPrice, setProductPrice] = useState(''); // Harga Produk const [shippingCost, setShippingCost] = useState(''); // Biaya Pengiriman const [sellerType, setSellerType] = useState('Non-Star'); // Tipe Penjual: Non-Star, Star, Star+ const [isGratisOngkirXTRA, setIsGratisOngkirXTRA] = useState(false); // Partisipasi Gratis Ongkir XTRA const [isCashbackXTRA, setIsCashbackXTRA] = useState(false); // Partisipasi Cashback XTRA // State variables for calculated fees and net earnings const [adminFee, setAdminFee] = useState(0); // Biaya Admin const [paymentHandlingFee, setPaymentHandlingFee] = useState(0); // Biaya Penanganan Pembayaran const [gratisOngkirXTRAFee, setGratisOngkirXTRAFee] = useState(0); // Biaya Layanan Gratis Ongkir XTRA const [cashbackXTRAFee, setCashbackXTRAFee] = useState(0); // Biaya Layanan Cashback XTRA const [totalFees, setTotalFees] = useState(0); // Total Biaya const [netEarnings, setNetEarnings] = useState(0); // Pendapatan Bersih // Define fee percentages (Illustrative - please refer to Shopee's official documentation for exact figures) const FEE_PERCENTAGES = { admin: { 'Non-Star': 0.025, // 2.5% for Non-Star sellers 'Star': 0.02, // 2% for Star sellers 'Star+': 0.015 // 1.5% for Star+ sellers }, paymentHandling: 0.01, // 1% for payment handling fee gratisOngkirXTRA: 0.03, // 3% for Gratis Ongkir XTRA program cashbackXTRA: 0.02 // 2% for Cashback XTRA program }; // useEffect hook to recalculate fees whenever inputs change useEffect(() => { // Convert input values to numbers, default to 0 if empty or invalid const price = parseFloat(productPrice) || 0; const shipping = parseFloat(shippingCost) || 0; // Calculate Administrative Fee based on seller type const calculatedAdminFee = price * FEE_PERCENTAGES.admin[sellerType]; setAdminFee(calculatedAdminFee); // Calculate Payment Handling Fee const calculatedPaymentHandlingFee = price * FEE_PERCENTAGES.paymentHandling; setPaymentHandlingFee(calculatedPaymentHandlingFee); // Calculate Gratis Ongkir XTRA Fee if participating const calculatedGratisOngkirXTRAFee = isGratisOngkirXTRA ? price * FEE_PERCENTAGES.gratisOngkirXTRA : 0; setGratisOngkirXTRAFee(calculatedGratisOngkirXTRAFee); // Calculate Cashback XTRA Fee if participating const calculatedCashbackXTRAFee = isCashbackXTRA ? price * FEE_PERCENTAGES.cashbackXTRA : 0; setCashbackXTRAFee(calculatedCashbackXTRAFee); // Calculate Total Fees const totalCalculatedFees = calculatedAdminFee + calculatedPaymentHandlingFee + calculatedGratisOngkirXTRAFee + calculatedCashbackXTRAFee; setTotalFees(totalCalculatedFees); // Calculate Net Earnings const calculatedNetEarnings = price - totalCalculatedFees; setNetEarnings(calculatedNetEarnings); }, [productPrice, shippingCost, sellerType, isGratisOngkirXTRA, isCashbackXTRA]); // Dependencies for useEffect return ( ); } export default App;