#268 - (feature/bills-tab-home)

src/components/Screens/HomeScreen.tsx

@@ -22,6 +22,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 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 {
@@ -244,6 +245,76 @@ function InsightBudgets() {
   );
 }
 
+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]);
+
+  return (
+    <AScrollView
+      showsVerticalScrollIndicator={false}
+      refreshControl={(
+        <RefreshControl
+          refreshing={false}
+          onRefresh={() => dispatch.bills.getBills()}
+        />
+      )}
+    >
+      <AStack row>
+        <AText fontSize={25} lineHeight={27} style={{ margin: 15, flex: 1 }} bold>
+          {translate('home_bills')}
+        </AText>
+
+        {total !== 0 && (
+          <AStack
+            px={6}
+            py={2}
+            mx={15}
+            backgroundColor={colors.brandSuccessLight}
+            style={{ borderRadius: 5 }}
+          >
+            <AText
+              fontSize={15}
+              numberOfLines={1}
+              color={colors.brandSuccess}
+              style={{ textAlign: 'center' }}
+              bold
+            >
+              {`${((totalPaid / total) * 100).toFixed(0)}%`}
+            </AText>
+          </AStack>
+        )}
+      </AStack>
+
+      {total !== 0 && (
+        <AStack mx={15} justifyContent="flex-start">
+          <AProgressBar
+            color={colors.green}
+            value={(totalPaid / total) * 100}
+          />
+        </AStack>
+      )}
+
+      {bills.map((bill, index) => (
+        <BillListItem
+          key={bill.id}
+          bill={bill}
+          loading={loading}
+          lastItem={index + 1 === bills.length}
+        />
+      ))}
+      <AView style={{ height: 150 }} />
+    </AScrollView>
+  );
+}
+
 function NetWorth() {
   const { colors } = useThemeColors();
   const hideBalance = useSelector((state: RootState) => state.configuration.hideBalance);
@@ -338,6 +409,7 @@ export default function HomeScreen() {
     <Ionicons key="wallet" name="wallet" size={22} color={colors.text} />,
     <Ionicons key="pricetag" name="pricetags" size={22} color={colors.text} />,
     <MaterialCommunityIcons key="progress-check" name="progress-check" size={22} color={colors.text} />,
+    <Ionicons key="calendar-clear" name="calendar-clear" size={22} color={colors.text} />,
   ];
 
   useEffect(() => {
@@ -365,6 +437,7 @@ export default function HomeScreen() {
           dispatch.accounts.getAccounts();
           dispatch.categories.getInsightCategories();
           dispatch.budgets.getInsightBudgets();
+          dispatch.bills.getBills();
         }
       };
 
@@ -437,6 +510,7 @@ export default function HomeScreen() {
             <AssetsAccounts key="1" />
             <InsightCategories key="2" />
             <InsightBudgets key="3" />
+            <Bills key="4" />
           </AnimatedPagerView>
         </AView>
       </View>

src/components/UI/Bills/BillListItem.tsx

@@ -0,0 +1,82 @@
+import moment from 'moment/moment';
+import React, { useMemo } from 'react';
+import translate from '../../../i18n/locale';
+import { useThemeColors } from '../../../lib/common';
+import { BillType } from '../../../models/bills';
+import { ASkeleton, AStack, AText } from '../ALibrary';
+
+type Props = {
+  bill: BillType;
+  loading: boolean;
+  lastItem: boolean;
+}
+
+export default function BillListItem({ bill, loading, lastItem }: Props) {
+  const { colors } = useThemeColors();
+  const paidDate = useMemo(() => bill.attributes.paidDates[0]?.date || null, [bill]);
+
+  const statusColor = useMemo(() => {
+    // The bill is paid
+    if (paidDate !== null) {
+      return colors.green;
+    }
+
+    // The bill is not expected in the current period
+    if (bill.attributes.nextExpectedMatch === null) {
+      return colors.brandStyle4;
+    }
+
+    // The bill should be paid by now
+    if (moment(bill.attributes.nextExpectedMatch).diff(moment(), 'days') < 0) {
+      return colors.brandWarning;
+    }
+
+    // The expected date is in the future
+    return undefined;
+  }, [paidDate]);
+
+  const billContent = useMemo(() => {
+    if (paidDate !== null) {
+      return translate('bills_paid');
+    }
+
+    if (bill.attributes.nextExpectedMatch === null) {
+      return translate('bills_not_expected');
+    }
+
+    return moment(bill.attributes.nextExpectedMatch).format('ll');
+  }, [bill, paidDate]);
+
+  return (
+    <AStack
+      key={bill.id}
+      row
+      mx={15}
+      style={{
+        height: 45,
+        borderColor: colors.listBorderColor,
+        borderBottomWidth: lastItem ? 0 : 0.5,
+      }}
+      justifyContent="space-between"
+    >
+      <AText
+        fontSize={14}
+        maxWidth="60%"
+        numberOfLines={1}
+      >
+        {bill.attributes.name}
+      </AText>
+
+      <ASkeleton loading={loading}>
+        <AText
+          fontSize={14}
+          maxWidth={100}
+          numberOfLines={1}
+          color={statusColor}
+        >
+          {billContent}
+        </AText>
+      </ASkeleton>
+    </AStack>
+  );
+}

src/i18n/locale/translations/en-US.ts

@@ -143,4 +143,8 @@ export default {
   configuration_logout_alert_title: 'Logout',
   load_more: 'Load more',
 
+  // from X.X.X
+  home_bills: 'Bills',
+  bills_paid: 'Paid',
+  bills_not_expected: 'Not expected',
 };

src/models/bills.ts

@@ -0,0 +1,82 @@
+import { createModel } from '@rematch/core';
+import moment from 'moment/moment';
+import { RootModel } from './index';
+
+export type BillType = {
+  id: string,
+  type: string,
+  attributes: {
+    name: string,
+    active: boolean;
+    amountMin: string,
+    amountMax: string,
+    currencyId: string,
+    currencyCode: string,
+    currencySymbol: string,
+    nextExpectedMatch: string | null,
+    payDates: string[],
+    paidDates: {
+      transactionGroupId: string,
+      transactionJournalId: string,
+      date: string,
+    }[],
+  },
+}
+
+type BillsStateType = {
+  bills: BillType[],
+}
+
+const INITIAL_STATE = {
+  bills: [],
+} as BillsStateType;
+
+export default createModel<RootModel>()({
+
+  state: INITIAL_STATE,
+
+  reducers: {
+    setBills(state, payload): BillsStateType {
+      const {
+        bills = state.bills,
+      } = payload;
+
+      return {
+        ...state,
+        bills,
+      };
+    },
+
+    resetState() {
+      return INITIAL_STATE;
+    },
+  },
+
+  effects: (dispatch) => ({
+    /**
+     * Get bills
+     *
+     * @returns {Promise}
+     */
+    async getBills(_: void, rootState): Promise<void> {
+      const {
+        firefly: {
+          rangeDetails: {
+            start,
+            end,
+          },
+        },
+      } = rootState;
+
+      const { data: bills } = await dispatch.configuration.apiFetch({ url: `/api/v1/bills?start=${start}&end=${end}` }) as { data: BillType[] };
+
+      const sortedBills = [...bills]
+        // Order by next expected date
+        .sort((a, b) => moment(a.attributes.nextExpectedMatch).diff(moment(b.attributes.nextExpectedMatch)))
+        // Make sure all paid bills are at the end of the list
+        .sort((a, b) => a.attributes.paidDates.length - b.attributes.paidDates.length);
+
+      dispatch.bills.setBills({ bills: sortedBills });
+    },
+  }),
+});

src/models/firefly.ts

@@ -48,6 +48,7 @@ export type FireflyStateType = {
   earned: HomeDisplayType[],
   balance: HomeDisplayType[],
   accounts: AssetAccountType[],
+  bills: { paid: HomeDisplayType | null, unpaid: HomeDisplayType | null },
   earnedChart: { x: number, y: number }[],
   spentChart:{ x: number, y: number }[],
 }
@@ -102,6 +103,7 @@ const INITIAL_STATE = {
   accounts: [],
   earnedChart: [],
   spentChart: [],
+  bills: { paid: null, unpaid: null },
 } as FireflyStateType;
 
 export default createModel<RootModel>()({
@@ -118,6 +120,7 @@ export default createModel<RootModel>()({
         accounts = state.accounts,
         earnedChart = state.earnedChart,
         spentChart = state.spentChart,
+        bills = state.bills,
       } = payload;
 
       return {
@@ -129,6 +132,7 @@ export default createModel<RootModel>()({
         accounts,
         earnedChart,
         spentChart,
+        bills,
       };
     },
 
@@ -242,6 +246,7 @@ export default createModel<RootModel>()({
         const balance = [];
         const earned = [];
         const spent = [];
+        const bills = { paid: null, unpaid: null };
         Object.keys(summary).forEach((key) => {
           if (key.includes('net-worth-in')) {
             netWorth.push(summary[key]);
@@ -255,13 +260,20 @@ export default createModel<RootModel>()({
           if (key.includes('spent-in')) {
             spent.push(summary[key]);
           }
+          if (key.includes('bills-paid-in')) {
+            bills.paid = summary[key];
+          }
+          if (key.includes('bills-unpaid-in')) {
+            bills.unpaid = summary[key];
+          }
         });
 
         dispatch.firefly.setData({
           netWorth,
           balance,
           earned,
           spent,
+          bills,
         });
       }
     },

src/models/index.ts

@@ -1,5 +1,6 @@
 import { Models } from '@rematch/core';
 import accounts from './accounts';
+import bills from './bills';
 import budgets from './budgets';
 import categories from './categories';
 import configuration from './configuration';
@@ -9,6 +10,7 @@ import transactions from './transactions';
 
 export interface RootModel extends Models<RootModel> {
   accounts: typeof accounts
+  bills: typeof bills
   budgets: typeof budgets
   categories: typeof categories
   configuration: typeof configuration
@@ -19,6 +21,7 @@ export interface RootModel extends Models<RootModel> {
 
 export const models: RootModel = {
   accounts,
+  bills,
   budgets,
   categories,
   configuration,