#323 - (marcelweikum:fix/bills)

Co-authored-by: Victor Balssa <[email protected]>
victorbalssa · Jul 29, 2024 · ab4fbd9 · ab4fbd9
1 parent 1a374bb
commit ab4fbd9
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 149 deletions.
diff --git a/src/components/Screens/HomeScreen.tsx b/src/components/Screens/HomeScreen.tsx
@@ -21,10 +21,10 @@ import PagerView from 'react-native-pager-view';
 
 import { FontAwesome, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
+import moment from 'moment';
 import { RootDispatch, RootState } from '../../store';
 import translate from '../../i18n/locale';
 import { localNumberFormat, useThemeColors } from '../../lib/common';
-import BillListItem from '../UI/Bills/BillListItem';
 
 import Pagination from '../UI/Pagination';
 import {
@@ -298,74 +298,105 @@ function InsightBudgets() {
   );
 }
 
+function formatDate(date) {
+  if (!date) {
+    return translate('date_unavailable');
+  }
+  const momentDate = moment(date);
+  const formattedDate = momentDate.isValid() ? momentDate.format('LL') : translate('date_unavailable');
+  return formattedDate;
+}
+
 function Bills() {
   const { colors } = useThemeColors();
-
-  const billsSummary = useSelector((state: RootState) => state.firefly.bills);
   const bills = useSelector((state: RootState) => state.bills.bills);
   const loading = useSelector((state: RootState) => state.loading.effects.bills?.getBills?.loading);
   const dispatch = useDispatch<RootDispatch>();
 
-  const totalPaid = useMemo(() => parseFloat(billsSummary?.paid?.monetaryValue || '0'), [billsSummary]);
-  const totalUnpaid = useMemo(() => Math.abs(parseFloat(billsSummary?.unpaid?.monetaryValue || '0')), [billsSummary]);
-  const total = useMemo(() => totalPaid + totalUnpaid, [totalPaid, totalUnpaid]);
+  useEffect(() => {
+    dispatch.bills.getBills();
+  }, [dispatch]);
 
   return (
     <AScrollView
       showsVerticalScrollIndicator={false}
       refreshControl={(
         <RefreshControl
-          refreshing={false}
+          refreshing={loading}
           onRefresh={() => Promise.all([
             dispatch.bills.getBills(),
             dispatch.firefly.getNetWorth(),
           ])}
         />
       )}
     >
-      <AStack row>
-        <AText fontSize={25} lineHeight={27} style={{ margin: 15, flex: 1 }} bold>
-          {translate('home_bills')}
-        </AText>
-
-        {total !== 0 && (
+      <AText fontSize={25} lineHeight={27} style={{ margin: 15 }} bold>
+        {translate('home_bills')}
+      </AText>
+      {bills.map((bill) => {
+        const amountPaid = parseFloat(bill.attributes.currentPaidAmount || '0');
+        const amountMin = parseFloat(bill.attributes.amountMin);
+        const percentagePaid = (amountPaid / amountMin) * 100;
+        const isPaid = amountPaid >= amountMin;
+
+        const statusText = isPaid
+          ? `${translate('bills_paid')} ${formatDate(bill.attributes.nextExpectedMatch)}`
+          : amountPaid > 0
+            ? `${percentagePaid.toFixed(0)}%`
+            : `${translate('due_by')} ${formatDate(bill.attributes.nextExpectedMatch)}`;
+
+        return (
           <AStack
-            px={6}
-            py={2}
+            key={bill.id}
             mx={15}
-            backgroundColor={colors.brandSuccessLight}
-            style={{ borderRadius: 5 }}
+            style={{
+              height: 60,
+            }}
           >
-            <AText
-              fontSize={15}
-              numberOfLines={1}
-              color={colors.brandSuccess}
-              style={{ textAlign: 'center' }}
-              bold
-            >
-              {`${((totalPaid / total) * 100).toFixed(0)}%`}
-            </AText>
-          </AStack>
-        )}
-      </AStack>
+            <AStackFlex row justifyContent="space-between">
+              <AStack
+                style={{ maxWidth: '80%' }}
+                alignItems="flex-start"
+              >
+                <AText fontSize={14} lineHeight={22} numberOfLines={1}>
+                  {bill.attributes.name}
+                </AText>
+                <AText fontSize={12} lineHeight={20} numberOfLines={1}>
+                  {localNumberFormat(bill.attributes.currencyCode, amountPaid)}
+                  {' / '}
+                  {localNumberFormat(bill.attributes.currencyCode, amountMin)}
+                </AText>
+              </AStack>
 
-      {total !== 0 && (
-        <AStack mx={15} justifyContent="flex-start">
-          <AProgressBar
-            color={colors.green}
-            value={(totalPaid / total) * 100}
-          />
-        </AStack>
-      )}
+              <ASkeleton loading={loading}>
+                <AStack alignItems="flex-end">
+                  <AStack
+                    px={6}
+                    py={2}
+                    backgroundColor={isPaid ? colors.brandSuccessLight : colors.brandNeutralLight}
+                    style={{ borderRadius: 5 }}
+                  >
+                    <AText
+                      fontSize={15}
+                      numberOfLines={1}
+                      color={isPaid ? colors.brandSuccess : colors.brandNeutral}
+                      style={{ textAlign: 'center' }}
+                      bold
+                    >
+                      {statusText}
+                    </AText>
+                  </AStack>
+                </AStack>
+              </ASkeleton>
+            </AStackFlex>
 
-      {bills.map((bill, index) => (
-        <BillListItem
-          key={bill.id}
-          bill={bill}
-          loading={loading}
-          lastItem={index + 1 === bills.length}
-        />
-      ))}
+            <AProgressBar
+              color={percentagePaid >= 50.0 ? colors.green : colors.brandWarning}
+              value={percentagePaid}
+            />
+          </AStack>
+        );
+      })}
       <AView style={{ height: 150 }} />
     </AScrollView>
   );

diff --git a/src/components/UI/Bills/BillListItem.tsx b/src/components/UI/Bills/BillListItem.tsx
diff --git a/src/i18n/locale/translations/de-DE.ts b/src/i18n/locale/translations/de-DE.ts
@@ -146,7 +146,9 @@ export default {
   // from X.X.X
   home_bills: 'Rechnungen',
   home_piggy_banks: 'Sparschweine',
-  bills_paid: 'Bezahlt',
+  bills_paid: 'Bezahlt bis',
+  due_by: 'Fällig bis',
+  date_unavailable: 'auf weiteres',
   bills_not_expected: 'Nicht erwartet',
   transaction_form_bill_label: 'Rechnung',
   configuration_transaction_form: 'Transaktionsformular',

diff --git a/src/i18n/locale/translations/en-US.ts b/src/i18n/locale/translations/en-US.ts
@@ -146,7 +146,9 @@ export default {
   // from X.X.X
   home_bills: 'Bills',
   home_piggy_banks: 'Piggy Banks',
-  bills_paid: 'Paid',
+  bills_paid: 'Paid until',
+  due_by: 'Due by',
+  date_unavailable: 'further notice',
   bills_not_expected: 'Not expected',
   transaction_form_bill_label: 'Bill',
   configuration_transaction_form: 'Transaction Form',

diff --git a/src/i18n/locale/translations/es-ES.ts b/src/i18n/locale/translations/es-ES.ts
@@ -63,6 +63,11 @@ export default {
   // from 0.7.0
   home_budgets: 'Presupuestos',
 
+  // from X.X.X
+  bills_paid: 'Pagado hasta',
+  due_by: 'Vence el',
+  date_unavailable: 'hasta nuevo aviso',
+
   // from 0.19.0
   configuration_theme: 'Personalización',
   configuration_theme_selection: 'Cambiar tema de color',

diff --git a/src/i18n/locale/translations/fr-FR.ts b/src/i18n/locale/translations/fr-FR.ts
@@ -146,7 +146,9 @@ export default {
   // from X.X.X
   home_bills: 'Factures',
   home_piggy_banks: 'Tirelires',
-  bills_paid: 'Payé',
+  bills_paid: 'Payé jusqu\'à',
+  due_by: 'Dû par',
+  date_unavailable: 'jusqu\'à nouvel ordre',
   bills_not_expected: 'Non attendu',
   transaction_form_bill_label: 'Facture',
   configuration_transaction_form: 'Formulaire',

diff --git a/src/i18n/locale/translations/id-ID.ts b/src/i18n/locale/translations/id-ID.ts
@@ -86,6 +86,11 @@ export default {
   // from 0.7.0
   home_budgets: 'Anggaran',
 
+  // from X.X.X
+  bills_paid: 'Dibayar sampai',
+  due_by: 'Jatuh tempo',
+  date_unavailable: 'lebih lanjut',
+
   // from 0.19.0
   configuration_theme: 'Kustomisasi',
   configuration_theme_selection: 'Ganti tema warna',

diff --git a/src/i18n/locale/translations/it-IT.ts b/src/i18n/locale/translations/it-IT.ts
@@ -143,7 +143,9 @@ export default {
 
   // from X.X.X
   home_bills: 'Bollette',
-  bills_paid: 'Pagato',
+  bills_paid: 'Pagato fino a',
+  due_by: 'Scadenza',
+  date_unavailable: 'ulteriore avviso',
   bills_not_expected: 'Non attesa',
   transaction_form_bill_label: 'Bolletta',
 

diff --git a/src/i18n/locale/translations/pt-BR.ts b/src/i18n/locale/translations/pt-BR.ts
@@ -131,6 +131,11 @@ export default {
   transaction_clone: 'Clonar',
   transaction_delete: 'Apagar',
 
+  // from X.X.X
+  bills_paid: 'Pago até',
+  due_by: 'Vence em',
+  date_unavailable: 'aviso prévio',
+
   // from 0.19.0
   configuration_theme: 'Personalização',
   configuration_theme_selection: 'Alterar tema de cores',

diff --git a/src/i18n/locale/translations/ru-RU.ts b/src/i18n/locale/translations/ru-RU.ts
@@ -148,7 +148,9 @@ export default {
 
   // from X.X.X
   home_bills: 'Счета',
-  bills_paid: 'Оплаченные',
+  bills_paid: 'Оплачено до',
+  due_by: 'Срок до',
+  date_unavailable: 'уведомления',
   bills_not_expected: 'Не ожидается',
   transaction_form_bill_label: 'Счёт',
 

diff --git a/src/i18n/locale/translations/sl-SI.ts b/src/i18n/locale/translations/sl-SI.ts
@@ -124,6 +124,11 @@ export default {
   period: 'Obdobje',
   currency: 'Valuta',
 
+  // from X.X.X
+  bills_paid: 'Plačano do',
+  due_by: 'Zapadlost do',
+  date_unavailable: 'obvestila',
+
   // from 0.19.0
   configuration_theme: 'Prilagoditev',
   configuration_theme_selection: 'Spremeni barvno temo',

diff --git a/src/i18n/locale/translations/vi-VN.ts b/src/i18n/locale/translations/vi-VN.ts
@@ -131,6 +131,11 @@ export default {
   transaction_clone: 'Clone',
   transaction_delete: 'Delete',
 
+  // from X.X.X
+  bills_paid: 'Đã trả đến',
+  due_by: 'Đến hạn',
+  date_unavailable: 'thông báo',
+
   // from 0.19.0
   configuration_theme: 'Tùy chỉnh',
   configuration_theme_selection: 'Thay đổi chủ đề màu',

diff --git a/src/i18n/locale/translations/zh-CN.ts b/src/i18n/locale/translations/zh-CN.ts
@@ -131,6 +131,11 @@ export default {
   transaction_clone: '克隆',
   transaction_delete: '删除',
 
+  // from X.X.X
+  bills_paid: '支付到',
+  due_by: '到期',
+  date_unavailable: '另行通知',
+
   // from 0.19.0
   configuration_theme: '定制',
   configuration_theme_selection: '更改颜色主题',