framer: show donation amount on pay btn, support entering amounts in …

…danish format
giveffektivt · Nov 27, 2024 · f8c8131 · f8c8131
1 parent a133141
commit f8c8131
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 45 deletions.
diff --git 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 <Component {...props} onTap={onTap} />;
@@ -186,28 +188,42 @@ 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 (
       <Component
         {...props}
-        value={parseAmount(store.amount)}
+        value={store.amount}
         placeholder={frequency === "match" ? "0,1" : "0"}
         onValueChange={onValueChange}
       />
     );
   };
 };
 
+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 <Component {...props} title={`Donér ${amount} ${currency}`} />;
+  };
+};
+
 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 <Component {...props} text={`${currency}`} />;
   };
 };
@@ -341,7 +357,8 @@ export const withRecipientVaccinerTilSpædbørn = (
 export const showAmount = (Component: any): ComponentType => {
   return (props) => {
     const [store] = useStore();
-    return <Component {...props} text={`${store.amount}`} />;
+    const amount = parseFormatAmount(store.amount);
+    return <Component {...props} text={`${amount} kr.`} />;
   };
 };
 
@@ -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
@@ -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 (
       <Component
@@ -316,7 +311,8 @@ const calculateDonationAmount = (store): number => {
   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
@@ -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
@@ -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<DonationResponse> => {
+// 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
@@ -23,4 +23,4 @@ stats:
     @cat Stats.tsx helpers.ts
 
 wealth-calculator:
-    @cat Wealth_Calculator.tsx
+    @cat Wealth_Calculator.tsx helpers.ts