diff --git a/framer/Donation_Form.tsx b/framer/Donation_Form.tsx index 88868dd..1f877be 100644 --- a/framer/Donation_Form.tsx +++ b/framer/Donation_Form.tsx @@ -50,7 +50,9 @@ const setField = (Component: any, field: string): ComponentType => { const onTap = () => { const element = document.querySelector(`.${props.className}`); const value = element != null ? element.textContent : ""; - setStore({ [field]: value }); + setStore({ + [field]: field === "amount" ? parseFormatAmount(value) : value, + }); }; return ; @@ -186,15 +188,14 @@ export const inputAmount = (Component: any): ComponentType => { return (props: any) => { const [store, setStore] = useStore(); - const onValueChange = (amount: string) => - setStore({ amount: toAmount(amount) }); + const onValueChange = (amount: string) => setStore({ amount }); const frequency = parseFrequency(store.frequency); return ( @@ -202,12 +203,27 @@ export const inputAmount = (Component: any): ComponentType => { }; }; +export const showDonateAmount = (Component: any): ComponentType => { + return (props) => { + const [store] = useStore(); + const amount = parseFormatAmount(store.amount); + const frequency = parseFrequency(store.frequency); + const currency = + frequency === "match" + ? (store.fundraiserMatchCurrency ?? "kr.") + : frequency === "monthly" + ? "kr. pr. md." + : "kr."; + return ; + }; +}; + export const showCurrency = (Component: any): ComponentType => { return (props) => { const [store] = useStore(); const frequency = parseFrequency(store.frequency); const currency = - frequency === "match" ? (store.fundraiserMatchCurrency ?? "kr") : "kr"; + frequency === "match" ? (store.fundraiserMatchCurrency ?? "kr.") : "kr."; return ; }; }; @@ -341,7 +357,8 @@ export const withRecipientVaccinerTilSpædbørn = ( export const showAmount = (Component: any): ComponentType => { return (props) => { const [store] = useStore(); - return ; + const amount = parseFormatAmount(store.amount); + return ; }; }; @@ -374,7 +391,8 @@ const withVariant = (Component: any, getVariant: any): ComponentType => { export const withVariantAmount = (Component: any): ComponentType => { return withVariant(Component, (store: any, setStore: any) => { const frequency = parseFrequency(store.frequency); - return [`${frequency}/${store.amount}`, `${frequency}/None`]; + const amount = parseFormatAmount(store.amount); + return [`${frequency}/${amount} kr`, `${frequency}/None`]; }); }; diff --git a/framer/Wealth_Calculator.tsx b/framer/Wealth_Calculator.tsx index c053a8e..a70dbc5 100644 --- a/framer/Wealth_Calculator.tsx +++ b/framer/Wealth_Calculator.tsx @@ -41,12 +41,7 @@ const setIncomeInput = (Component, adultNo: number): ComponentType => { const [store, setStore] = useStore(); const field = `income${adultNo}`; - const onValueChange = (value: string) => { - const newNumber = Number.parseFloat(value); - if (value === "" || !Number.isNaN(newNumber)) { - setStore({ [field]: value }); - } - }; + const onValueChange = (value: string) => setStore({ [field]: value }); return ( { return calculateTotalPostTaxIncome(store) * (store.donationPct / 100); }; -const calculatePostTax = (income: number): number => { +const calculatePostTax = (amount: string): number => { + const income = parseAmount(amount); const amBidrag = income * AM_BIDRAG_PCT; const taxable = Math.max(0, income - amBidrag - PERSONFRADRAG); const bundSkat = taxable * BUNDSKAT_PCT; @@ -399,6 +395,9 @@ export const showDebug = (Component): ComponentType => { text={`${JSON.stringify( { ...store, + income1: parseAmount(store.income1), + income2: parseAmount(store.income2), + income3: parseAmount(store.income3), householdPostTaxIncome: roundNumber( calculateTotalPostTaxIncome(store), ), diff --git a/framer/helpers-donation.ts b/framer/helpers-donation.ts index bafae83..6c21eab 100644 --- a/framer/helpers-donation.ts +++ b/framer/helpers-donation.ts @@ -1,7 +1,10 @@ const canSubmitStep1 = (store: any): boolean => { + const amount = parseAmount(store.amount); + const frequency = parseFrequency(store.frequency); return ( - store.frequency !== "" && - store.amount !== "" && + frequency !== "" && + amount !== "" && + (frequency === "match" ? amount > 0 : amount >= 1) && isCprCvrValid(store.taxDeductible, store.tin) ); }; @@ -58,25 +61,8 @@ const isCprPlausible = (tin: string): boolean => { return sum % 11 === 0; }; -const toAmount = (value: string): string => { - const parsed = /^[\d\.]+$/.test(value) - ? parseInputAmount(value) - : parseAmount(value); - return parsed === "" ? "" : `${parsed.toLocaleString("da-DK")} kr`; -}; - -const parseInputAmount = (value: string): number | "" => { - return value === "" ? "" : Number.parseFloat(value); -}; - -const parseAmount = (value: string): number | "" => { - return value === "" - ? "" - : Number.parseFloat(value.replace(/\./g, "").replace(/,/g, ".")); -}; - const parseRecipient = (value: string): string => { - let index = value ? value.indexOf("(") : -1; + const index = value ? value.indexOf("(") : -1; return index > -1 ? value.slice(0, index).trim() : value; }; @@ -127,12 +113,17 @@ const prepareDonationPayload = (store: any) => { }; }; +type DonationResponse = { + redirect?: string; + bank?: { account: string; message: string }; +}; + const submitDonation = async (store: any, setStore: any) => { try { setStore({ isLoading: true }); track("Donation form step 2 submitted", parseAmount(store.amount)); - const response = await submitForm( + const response: DonationResponse = await submitForm( store.env, "donation", prepareDonationPayload(store), diff --git a/framer/helpers.ts b/framer/helpers.ts index 52531d1..19af125 100644 --- a/framer/helpers.ts +++ b/framer/helpers.ts @@ -17,18 +17,23 @@ const track = (event: string, amount?: number | "") => { } }; -// Server communication +// Danish amount inputs + +const parseAmount = (value: string): number | "" => { + const amount = + value === "" + ? "" + : Number.parseFloat(value.replace(/\./g, "").replace(/,/g, ".")); + return Number.isNaN(amount) ? "" : amount; +}; -type DonationResponse = { - redirect?: string; - bank?: { account: string; message: string }; +const parseFormatAmount = (value: string): string => { + return parseAmount(value).toLocaleString("da-DK"); }; -const submitForm = async ( - env: string, - path: string, - payload: any, -): Promise => { +// Server communication + +const submitForm = async (env: string, path: string, payload: any) => { const response = await fetch(apiUrl(env, path), { method: "POST", headers: { "Content-type": "application/json;charset=UTF-8" }, diff --git a/framer/justfile b/framer/justfile index d6beffd..9f4a874 100644 --- a/framer/justfile +++ b/framer/justfile @@ -23,4 +23,4 @@ stats: @cat Stats.tsx helpers.ts wealth-calculator: - @cat Wealth_Calculator.tsx + @cat Wealth_Calculator.tsx helpers.ts