diff --git a/src/components/MobileCalculator.tsx b/src/components/MobileCalculator.tsx index 812a57d..a740d7a 100644 --- a/src/components/MobileCalculator.tsx +++ b/src/components/MobileCalculator.tsx @@ -116,9 +116,9 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) { const handleCustomAmountChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - if (value === '' || Number(value) >= 0) { - setCustomAmount(value); + const value = e.target.value.replace(/,/g, ''); + if (value === '' || /^\d*\.?\d*$/.test(value)) { + setCustomAmount(formatNumber(value)); } }, []); @@ -267,11 +267,10 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) { {currencies[currency].symbol}
@@ -281,11 +280,11 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) {
- {customAmount && Number(customAmount) > 0 && ( - 0 && ( + { setOffsetTons(0); - setMonetaryAmount(Number(customAmount)); + setMonetaryAmount(Number(customAmount.replace(/,/g, ''))); setShowOffsetOrder(true); }} className="w-full mt-6 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all" @@ -294,7 +293,7 @@ export function MobileCalculator({ vesselData, onOffsetClick, onBack }: Props) { initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} > - Offset {formatCurrency(Number(customAmount), getCurrencyByCode(currency))} + Offset {formatCurrency(Number(customAmount.replace(/,/g, '')), getCurrencyByCode(currency))} )} diff --git a/src/components/TripCalculator.tsx b/src/components/TripCalculator.tsx index d922aa2..9a2f7f6 100644 --- a/src/components/TripCalculator.tsx +++ b/src/components/TripCalculator.tsx @@ -97,9 +97,9 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) { const handleCustomAmountChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - if (value === '' || Number(value) >= 0) { - setCustomAmount(value); + const value = e.target.value.replace(/,/g, ''); + if (value === '' || /^\d*\.?\d*$/.test(value)) { + setCustomAmount(formatNumber(value)); } }, []); @@ -241,11 +241,10 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) { $ @@ -255,9 +254,9 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) { - {customAmount && Number(customAmount) > 0 && ( + {customAmount && Number(customAmount.replace(/,/g, '')) > 0 && ( onOffsetClick?.(0, Number(customAmount))} + onClick={() => onOffsetClick?.(0, Number(customAmount.replace(/,/g, '')))} className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors mt-6" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}