From 521cd01eb3eb9124ec6468f03438482056c45ea9 Mon Sep 17 00:00:00 2001 From: Henrique Leite Date: Tue, 21 Nov 2023 06:32:25 -0300 Subject: [PATCH] Change CardTypeEnum --- src/app/(public)/adicionar-cartao/page.tsx | 6 +- src/app/(public)/cartao/[cardId]/page.tsx | 23 +- src/app/(public)/carteira/page.tsx | 231 ++++++++++++------ src/app/(public)/conta/page.tsx | 18 +- .../TransactionInOut/index.tsx | 12 +- src/assets/data.ts | 12 +- src/components/AddTransaction/index.tsx | 46 +++- src/components/BudgetCard/index.tsx | 12 +- src/types/card.ts | 4 +- src/types/enums/card-type.ts | 18 +- 10 files changed, 250 insertions(+), 132 deletions(-) diff --git a/src/app/(public)/adicionar-cartao/page.tsx b/src/app/(public)/adicionar-cartao/page.tsx index 293e91d..1d20f9f 100644 --- a/src/app/(public)/adicionar-cartao/page.tsx +++ b/src/app/(public)/adicionar-cartao/page.tsx @@ -12,7 +12,7 @@ import { TextInput } from "components/Inputs/Text"; import { Space } from "components/Space"; import { useRouter, useSearchParams } from "next/navigation"; import { useState } from "react"; -import { CardTypeEnum } from "types/enums/card-type"; +import { CardTypeEnum, isPostpaid, isPrepaid } from "types/enums/card-type"; import { PayAtEnum } from "types/enums/pay-at"; const bankAccounts = Object.values(bankAccountsData); @@ -84,7 +84,7 @@ const AddCard = () => { - {cardType === CardTypeEnum.POSTPAID && ( + {isPostpaid(cardType) && ( <> { )} - {cardType === CardTypeEnum.PREPAID && ( + {isPrepaid(cardType) && ( <> {
Número: **** {card.lastFourDigits} Bandeira: {card.cardProvider.network} - {card.type === CardTypeEnum.POSTPAID && ( + {isPostpaid(card.type) && ( <> - Dia de vencimento: {card.dueDay} + Dia de vencimento: {(card as PostpaidCard).dueDay} - Fecha: {card.cardProvider.statementDays} dias antes do - vencimento + Fecha: {(card as PostpaidCard).cardProvider.statementDays} dias + antes do vencimento + + Limite: {formatMoney((card as PostpaidCard).limit)} + Pago no: {(card as PostpaidCard).payAt} + + Pago com: {(card as PostpaidCard).payWithBankAccountId} - Limite: {formatMoney(card.limit)} - Pago no: {card.payAt} - Pago com: {card.payWithBankAccountId} )} - {card.type === CardTypeEnum.PREPAID && ( + {isPrepaid(card.type) && ( <> - Saldo: {formatMoney(card.balance)} + Saldo: {formatMoney((card as PrepaidCard).balance)} )}
diff --git a/src/app/(public)/carteira/page.tsx b/src/app/(public)/carteira/page.tsx index e37910d..4e36ad2 100644 --- a/src/app/(public)/carteira/page.tsx +++ b/src/app/(public)/carteira/page.tsx @@ -1,5 +1,6 @@ "use client"; +import { colors } from "assets/colors"; import { bankAccounts as bankAccountsData, cards as cardsData, @@ -9,11 +10,20 @@ import { Icon } from "components/Icon"; import { Space } from "components/Space"; import { WalletItem } from "components/WalletItem"; import Link from "next/link"; -import { PostpaidCard, PrepaidCard } from "types/card"; +import { Card, PostpaidCard, PrepaidCard } from "types/card"; import { CardTypeEnum } from "types/enums/card-type"; import { formatBankAccountNumber } from "utils/format"; import { formatMoney } from "utils/format"; +interface CardGroup { + title: string; + items: Array; + valueKey: keyof PostpaidCard | keyof PrepaidCard; + valueLabel: string; + newCardLabel: string; + cardType: CardTypeEnum; +} + const bankAccounts = Object.values(bankAccountsData); const cards = Object.values(cardsData); @@ -24,32 +34,85 @@ const Wallet = () => {
-

Resumo

+

Saldos

-
-
- Saldo bancário - - {formatMoney( +
+ {[ + { + title: "Bancário", + value: formatMoney( bankAccounts.reduce((acc, cur) => acc + cur.balance, 0), - )} - -
- -
- Fatura - - {formatMoney( + ), + }, + { + title: "Vale alimentação", + value: formatMoney( + cards.reduce((acc, cur) => { + if (cur.type === CardTypeEnum.VA) { + acc + cur.balance; + } + + return acc; + }, 0), + ), + }, + { + title: "Vale refeição", + value: formatMoney( cards.reduce((acc, cur) => { - if (cur.type === CardTypeEnum.POSTPAID) { - return acc + 0; + if (cur.type === CardTypeEnum.VR) { + acc + cur.balance; } return acc; }, 0), - )} - -
+ ), + }, + { + title: "Vale transporte", + value: formatMoney( + cards.reduce((acc, cur) => { + if (cur.type === CardTypeEnum.VT) { + acc + cur.balance; + } + + return acc; + }, 0), + ), + }, + // { + // title: "Faturas", + // value: formatMoney( + // cards.reduce((acc, cur) => { + // if (isPostpaid(cur.type)) { + // return acc + 0; + // } + + // return acc; + // }, 0), + // ), + // }, + ].map(({ title, value }) => ( +
+
+ {title} +
+ +
+ {value} +
+
+ ))}
@@ -79,65 +142,75 @@ const Wallet = () => { -
-

Cartões de crédito

- -
- {( - cards.filter( - (c) => c.type === CardTypeEnum.POSTPAID, - ) as Array - ).map((c) => ( - - ))} - - - Adicionar novo cartão - -
-
- - - -
-

Vales

- -
- {( - cards.filter( - (c) => c.type === CardTypeEnum.PREPAID, - ) as Array - ).map((c) => ( - - ))} - - - Adicionar novo vale - -
-
+ {( + [ + { + title: "Cartões de crédito", + items: cards.filter((c) => c.type === CardTypeEnum.CREDIT), + valueKey: "limit", // TODO Fix + valueLabel: "Fatura", + newCardLabel: "Adicionar novo cartão", + cardType: CardTypeEnum.CREDIT, + }, + { + title: "Vales Alimentação", + items: cards.filter((c) => c.type === CardTypeEnum.VA), + valueKey: "balance", + valueLabel: "Saldo", + newCardLabel: "Adicionar vale alimentação", + cardType: CardTypeEnum.VA, + }, + { + title: "Vales Refeição", + items: cards.filter((c) => c.type === CardTypeEnum.VR), + valueKey: "balance", + valueLabel: "Saldo", + newCardLabel: "Adicionar vale refeição", + cardType: CardTypeEnum.VR, + }, + { + title: "Vales Transporte", + items: cards.filter((c) => c.type === CardTypeEnum.VT), + valueKey: "balance", + valueLabel: "Saldo", + newCardLabel: "Adicionar vale transporte", + cardType: CardTypeEnum.VT, + }, + ] as Array + ).map( + ({ title, items, valueKey, valueLabel, newCardLabel, cardType }) => ( + <> +
+

{title}

+ +
+ {items.map((c) => ( + + ))} + + + {newCardLabel} + +
+
+ + + + ), + )}
); diff --git a/src/app/(public)/conta/page.tsx b/src/app/(public)/conta/page.tsx index 890d3f7..2d3f058 100644 --- a/src/app/(public)/conta/page.tsx +++ b/src/app/(public)/conta/page.tsx @@ -3,7 +3,7 @@ import { Header } from "components/Header"; import { Icon, IconType } from "components/Icon"; import { Space } from "components/Space"; import Link from "next/link"; -import { CardTypeEnum } from "types/enums/card-type"; +import { CardTypeEnum, isPrepaid } from "types/enums/card-type"; interface PremiumBenefit { title: string; @@ -28,28 +28,28 @@ const premiumBenefits: Array = [ icon: "ticket", }, { - title: "Categorias ilimitados", + title: "Categorias ilimitadas", description: "Adicione quantas categorias quiser", icon: "category", }, { - title: "Transações recorrentes ilimitadas", + title: "(Em breve) Transações recorrentes ilimitadas", description: "Adicione quantas transações recorrentes quiser", icon: "clock", }, { - title: "Gere relatórios", + title: "(Em breve) Gere relatórios", description: "Gere relatórios dos seus gastos, orçamentos e muito mais, em diversos formatos", icon: "pdf", }, { - title: "Tags", + title: "(Em breve) Tags", description: "Adicione tags as suas transações", icon: "tag", }, { - title: "Lembretes", + title: "(Em breve) Lembretes", description: "Receba lembretes para pagar suas contas", icon: "bell", }, @@ -99,7 +99,7 @@ const Account = () => { label="Cartões de crédito" curAmount={ Object.values(cards).filter( - (c) => c.type === CardTypeEnum.POSTPAID, + (c) => c.type === CardTypeEnum.CREDIT, ).length } limit={plans.free.limits.postpaidCard} @@ -107,9 +107,7 @@ const Account = () => { c.type === CardTypeEnum.PREPAID, - ).length + Object.values(cards).filter((c) => isPrepaid(c.type)).length } limit={plans.free.limits.prepaidCard} /> diff --git a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx index 945f7fb..61e8b5d 100644 --- a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx +++ b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx @@ -14,11 +14,15 @@ interface Props { const getCardType = (type: CardTypeEnum) => { switch (type) { - case CardTypeEnum.POSTPAID: + case CardTypeEnum.CREDIT: default: - return "Pós-pago"; - case CardTypeEnum.PREPAID: - return "Pré-pago"; + return "Crédito"; + case CardTypeEnum.VA: + return "Vale Alimentação"; + case CardTypeEnum.VR: + return "Vale Refeição"; + case CardTypeEnum.VT: + return "Vale Transporte"; } }; diff --git a/src/assets/data.ts b/src/assets/data.ts index 04f84cd..1a8feff 100644 --- a/src/assets/data.ts +++ b/src/assets/data.ts @@ -137,7 +137,7 @@ export const cardProviders: Record = { iconUrl: "https://logodownload.org/wp-content/uploads/2019/07/xp-investimentos-logo-8.png", color: colors.xpInvestimentos, - type: CardTypeEnum.POSTPAID, + type: CardTypeEnum.CREDIT, network: NetworkEnum.VISA, statementDays: 14, availableDueDates: ["05", "10", "15"], @@ -147,7 +147,7 @@ export const cardProviders: Record = { name: "Nubank", iconUrl: bankProviders.nubank.iconUrl, color: bankProviders.nubank.color, - type: CardTypeEnum.POSTPAID, + type: CardTypeEnum.CREDIT, network: NetworkEnum.MASTERCARD, statementDays: 14, availableDueDates: ["05", "10", "15"], @@ -158,7 +158,7 @@ export const cardProviders: Record = { iconUrl: "https://logodownload.org/wp-content/uploads/2017/09/alelo-logo-1-599x393.png", color: colors.aleloRefeicao, - type: CardTypeEnum.PREPAID, + type: CardTypeEnum.VR, network: NetworkEnum.ELO, }, }; @@ -169,7 +169,7 @@ export const cards: Record = { accountId: "foo1", cardProviderId: "xpInfinityOne", cardProvider: cardProviders["xpInfinityOne"], - type: CardTypeEnum.POSTPAID, + type: CardTypeEnum.CREDIT, name: "Xp Investimentos", // Credit cards @@ -184,7 +184,7 @@ export const cards: Record = { accountId: "foo1", cardProviderId: "nubank", cardProvider: cardProviders["nubank"], - type: CardTypeEnum.POSTPAID, + type: CardTypeEnum.CREDIT, name: "Nubank", // Credit cards @@ -199,7 +199,7 @@ export const cards: Record = { accountId: "foo1", cardProviderId: "aleloRefeicao", cardProvider: cardProviders["aleloRefeicao"], - type: CardTypeEnum.PREPAID, + type: CardTypeEnum.VR, name: "Alelo VR", lastFourDigits: "1234", diff --git a/src/components/AddTransaction/index.tsx b/src/components/AddTransaction/index.tsx index f04e8f9..d689eb6 100644 --- a/src/components/AddTransaction/index.tsx +++ b/src/components/AddTransaction/index.tsx @@ -16,16 +16,6 @@ import { TransactionTypeEnum } from "types/enums/transaction-type"; const categories = Object.values(categoriesData); const paymentMethods = [ - ...Object.values(cards).map((c) => ({ - id: `${c.cardId}#CARD`, - color: c.cardProvider.color, - name: c.cardProvider.name, - iconUrl: c.cardProvider.iconUrl, - groupLabel: - c.cardProvider.type === CardTypeEnum.POSTPAID - ? "Cartões de crédito" - : "Vales", - })), ...Object.values(bankAccounts).map((b) => ({ id: `${b.bankAccountId}#BANK`, color: b.bank.color, @@ -33,6 +23,42 @@ const paymentMethods = [ iconUrl: b.bank.iconUrl, groupLabel: "Contas bancárias", })), + ...Object.values(cards) + .filter((c) => c.type === CardTypeEnum.CREDIT) + .map((c) => ({ + id: `${c.cardId}#CARD`, + color: c.cardProvider.color, + name: c.cardProvider.name, + iconUrl: c.cardProvider.iconUrl, + groupLabel: "Cartões de crédito", + })), + ...Object.values(cards) + .filter((c) => c.type === CardTypeEnum.VA) + .map((c) => ({ + id: `${c.cardId}#CARD`, + color: c.cardProvider.color, + name: c.cardProvider.name, + iconUrl: c.cardProvider.iconUrl, + groupLabel: "Vales Alimentação", + })), + ...Object.values(cards) + .filter((c) => c.type === CardTypeEnum.VR) + .map((c) => ({ + id: `${c.cardId}#CARD`, + color: c.cardProvider.color, + name: c.cardProvider.name, + iconUrl: c.cardProvider.iconUrl, + groupLabel: "Vales Refeição", + })), + ...Object.values(cards) + .filter((c) => c.type === CardTypeEnum.VT) + .map((c) => ({ + id: `${c.cardId}#CARD`, + color: c.cardProvider.color, + name: c.cardProvider.name, + iconUrl: c.cardProvider.iconUrl, + groupLabel: "Vales Transporte", + })), ]; export const AddTransaction = () => { diff --git a/src/components/BudgetCard/index.tsx b/src/components/BudgetCard/index.tsx index f17b3db..2cebcbd 100644 --- a/src/components/BudgetCard/index.tsx +++ b/src/components/BudgetCard/index.tsx @@ -67,7 +67,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => { dataKey="value" > - + @@ -76,7 +76,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
Gasto total @@ -85,7 +85,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
{formatMoney(totalExpenses)} @@ -96,7 +96,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
Gasto planejado @@ -105,7 +105,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
{formatMoney(totalBudget)} @@ -116,7 +116,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
Saldo diff --git a/src/types/card.ts b/src/types/card.ts index e92eb9d..9f9a06a 100644 --- a/src/types/card.ts +++ b/src/types/card.ts @@ -25,7 +25,7 @@ interface BaseCard { // Credit cards export interface PostpaidCard extends BaseCard { - type: CardTypeEnum.POSTPAID; + type: CardTypeEnum.CREDIT; dueDay: number; limit: number; payAt: PayAtEnum; @@ -34,7 +34,7 @@ export interface PostpaidCard extends BaseCard { // VA, VR, VT export interface PrepaidCard extends BaseCard { - type: CardTypeEnum.PREPAID; + type: CardTypeEnum.VA | CardTypeEnum.VR | CardTypeEnum.VT; balance: number; } diff --git a/src/types/enums/card-type.ts b/src/types/enums/card-type.ts index 156db91..55ad64d 100644 --- a/src/types/enums/card-type.ts +++ b/src/types/enums/card-type.ts @@ -1,4 +1,18 @@ export enum CardTypeEnum { - "POSTPAID" = "POSTPAID", - "PREPAID" = "PREPAID", + "CREDIT" = "CREDIT", + "VA" = "VA", + "VR" = "VR", + "VT" = "VT", } + +export const isPrepaid = (type: CardTypeEnum) => { + if ([CardTypeEnum.VA, CardTypeEnum.VR, CardTypeEnum.VT].includes(type)) { + return true; + } + + return false; +}; + +export const isPostpaid = (type: CardTypeEnum) => { + return CardTypeEnum.CREDIT === type; +};