Currency handling improvements (#437)

* Hide confusing share info when split is incorrect

* Minor UI improvements

* Use localized currency helpers and new currency input type

* Use currency input in split section

* Fix conversion errors by eliminating the number middle step

* Do not shuffle pennies on broken splits

* Fix runtime bugs

* Rewrite the test suite and fix some edge cases

* Fix missing balance metedata on simplify and make recalculate more robust

* Improve responsiveness of split text

* Negative number handling fix

* Responsive invite buttons

* Truncate large sums in split modal

* More fixes for numeric inputs

Author: krokosik

public/locales/en/common.json

@@ -89,6 +89,7 @@
     "name_required": "Name is required",
     "saving_expense": "Error while saving expense",
     "something_went_wrong": "Something went wrong",
+    "group_balances_malformed": "Group balances data is malformed, please report an issue or try recalculating.",
     "valid_email": "Enter valid email"
   }
 }

public/locales/en/expense_details.json

@@ -30,7 +30,7 @@
           },
           "adjustment": {
             "title": "Adjustment",
-            "remaining_to_split_equally": "Remaining to split eauqlly"
+            "remaining_to_split_equally": "Remaining to split equally"
           }
         }
       },

src/components/AddExpense/AddExpensePage.tsx

@@ -8,7 +8,6 @@ import { type CurrencyCode } from '~/lib/currency';
 import { cn } from '~/lib/utils';
 import { useAddExpenseStore } from '~/store/addStore';
 import { api } from '~/utils/api';
-import { toSafeBigInt } from '~/utils/numbers';
 
 import { Button } from '../ui/button';
 import { Calendar } from '../ui/calendar';
@@ -17,18 +16,18 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { CategoryPicker } from './CategoryPicker';
 import { CurrencyPicker } from './CurrencyPicker';
 import { SelectUserOrGroup } from './SelectUserOrGroup';
-import { SplitTypeSection } from './SplitTypeSection';
+import { PayerSelectionForm, SplitExpenseForm } from './SplitTypeSection';
 import { UploadFile } from './UploadFile';
 import { UserInput } from './UserInput';
 import { toast } from 'sonner';
 import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
+import { CurrencyInput } from '../ui/currency-input';
 
 export const AddOrEditExpensePage: React.FC<{
   isStorageConfigured: boolean;
   enableSendingInvites: boolean;
   expenseId?: string;
 }> = ({ isStorageConfigured, enableSendingInvites, expenseId }) => {
-  const { t, toUIDate } = useTranslationWithUtils(['expense_details']);
   const showFriends = useAddExpenseStore((s) => s.showFriends);
   const amount = useAddExpenseStore((s) => s.amount);
   const isNegative = useAddExpenseStore((s) => s.isNegative);
@@ -44,6 +43,11 @@ export const AddOrEditExpensePage: React.FC<{
   const paidBy = useAddExpenseStore((s) => s.paidBy);
   const splitType = useAddExpenseStore((s) => s.splitType);
   const fileKey = useAddExpenseStore((s) => s.fileKey);
+  const currentUser = useAddExpenseStore((s) => s.currentUser);
+  const splitShares = useAddExpenseStore((s) => s.splitShares);
+
+  const { t, toUIDate, displayName, generateSplitDescription } =
+    useTranslationWithUtils('expense_details');
 
   const {
     setCurrency,
@@ -71,10 +75,13 @@ export const AddOrEditExpensePage: React.FC<{
   const router = useRouter();
 
   const onUpdateAmount = useCallback(
-    (amt: string) => {
-      const _amt = amt.replace(',', '.');
-      setAmountStr(_amt);
-      setAmount(toSafeBigInt(_amt));
+    ({ strValue, bigIntValue }: { strValue?: string; bigIntValue?: bigint }) => {
+      if (strValue !== undefined) {
+        setAmountStr(strValue);
+      }
+      if (bigIntValue !== undefined) {
+        setAmount(bigIntValue);
+      }
     },
     [setAmount, setAmountStr],
   );
@@ -156,14 +163,6 @@ export const AddOrEditExpensePage: React.FC<{
     [setDescription],
   );
 
-  const onAmountChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { value } = e.target;
-      onUpdateAmount(value);
-    },
-    [onUpdateAmount],
-  );
-
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
@@ -203,19 +202,43 @@ export const AddOrEditExpensePage: React.FC<{
           </div>
           <div className="flex gap-2">
             <CurrencyPicker currentCurrency={currency} onCurrencyPick={onCurrencyPick} />
-            <Input
+            <CurrencyInput
               placeholder={t('ui.add_expense_details.amount_placeholder')}
-              className="text-lg placeholder:text-sm"
-              type="number"
-              inputMode="decimal"
-              value={amtStr}
-              onChange={onAmountChange}
+              currency={currency}
+              strValue={amtStr}
+              bigIntValue={amount}
+              allowNegative
+              hideSymbol
+              onValueChange={onUpdateAmount}
             />
           </div>
           <div className="h-[180px]">
             {amount && '' !== description ? (
               <>
-                <SplitTypeSection />
+                <div className="flex flex-col items-center justify-center text-sm text-gray-400 sm:mt-4 sm:flex-row">
+                  <p>
+                    {t(`ui.expense.${isNegative ? 'received_by' : 'paid_by'}`, {
+                      ns: 'common',
+                    })}
+                  </p>
+                  <PayerSelectionForm>
+                    <Button variant="ghost" className="text-primary h-8 px-1.5 py-0 text-base">
+                      {displayName(paidBy, currentUser?.id, 'dativus')}
+                    </Button>
+                  </PayerSelectionForm>
+                  <p>{t('ui.and', { ns: 'common' })} </p>
+                  <SplitExpenseForm>
+                    <Button variant="ghost" className="text-primary h-8 px-1.5 py-0 text-base">
+                      {generateSplitDescription(
+                        splitType,
+                        participants,
+                        splitShares,
+                        paidBy,
+                        currentUser,
+                      )}
+                    </Button>
+                  </SplitExpenseForm>
+                </div>
 
                 <div className="mt-4 flex items-center justify-between sm:mt-10">
                   <div className="flex flex-wrap items-center gap-4">

src/components/AddExpense/CategoryPicker.tsx

@@ -14,7 +14,7 @@ export const CategoryPicker: React.FC<{
 
   const trigger = useMemo(
     () => (
-      <div className="flex w-[70px] justify-center rounded-lg border py-2">
+      <div className="flex w-[70px] cursor-pointer justify-center rounded-lg border py-2">
         <CategoryIcon category={category} size={20} />
       </div>
     ),

src/components/AddExpense/CurrencyPicker.tsx

@@ -23,7 +23,7 @@ function CurrencyPickerInner({
 
   const trigger = useMemo(
     () => (
-      <div className="flex w-[70px] justify-center rounded-lg border py-2 text-center text-base">
+      <div className="flex w-[70px] cursor-pointer justify-center rounded-lg border py-2 text-center text-base">
         {currentCurrency}
       </div>
     ),

src/components/AddExpense/SelectUserOrGroup.tsx

@@ -93,10 +93,10 @@ export const SelectUserOrGroup: React.FC<{
             <div>{t('ui.add_expense_details.select_user_or_group.note')}</div>
           )}
         </div>
-        <div className="flex justify-center gap-4">
+        <div className="flex flex-wrap justify-center gap-x-4">
           {enableSendingInvites && (
             <Button
-              className="mt-4 w-full text-cyan-500 hover:text-cyan-500"
+              className="mt-4 text-cyan-500 hover:text-cyan-500"
               variant="outline"
               disabled={!isEmail.success}
               onClick={() => onAddEmailClick(false)}
@@ -106,7 +106,7 @@ export const SelectUserOrGroup: React.FC<{
             </Button>
           )}
           <Button
-            className="mt-4 w-full text-cyan-500 hover:text-cyan-500"
+            className="mt-4 text-cyan-500 hover:text-cyan-500"
             variant="outline"
             disabled={!isEmail.success}
             onClick={() => onAddEmailClick(false)}