Skip to content

Commit

Permalink
Change CardTypeEnum
Browse files Browse the repository at this point in the history
  • Loading branch information
@henriqueleite42
henriqueleite42 committed Nov 21, 2023
1 parent d374221 commit 521cd01
Show file tree
Hide file tree
Showing 10 changed files with 250 additions and 132 deletions.
6 changes: 3 additions & 3 deletions src/app/(public)/adicionar-cartao/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -84,7 +84,7 @@ const AddCard = () => {

<Space />

{cardType === CardTypeEnum.POSTPAID && (
{isPostpaid(cardType) && (
<>
<SelectInput
id="dueDay"
Expand Down Expand Up @@ -155,7 +155,7 @@ const AddCard = () => {
</>
)}

{cardType === CardTypeEnum.PREPAID && (
{isPrepaid(cardType) && (
<>
<MoneyInput
id="balance"
Expand Down
23 changes: 13 additions & 10 deletions src/app/(public)/cartao/[cardId]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { cards } from "assets/data";
import { Header } from "components/Header";
import { Icon } from "components/Icon";
import { CardTypeEnum } from "types/enums/card-type";
import { PostpaidCard, PrepaidCard } from "types/card";
import { isPostpaid, isPrepaid } from "types/enums/card-type";
import { formatMoney } from "utils/format";

interface Props {
Expand Down Expand Up @@ -29,21 +30,23 @@ const Card = ({ params }: Props) => {
<div className="flex flex-col w-full">
<span>Número: **** {card.lastFourDigits}</span>
<span>Bandeira: {card.cardProvider.network}</span>
{card.type === CardTypeEnum.POSTPAID && (
{isPostpaid(card.type) && (
<>
<span>Dia de vencimento: {card.dueDay}</span>
<span>Dia de vencimento: {(card as PostpaidCard).dueDay}</span>
<span>
Fecha: {card.cardProvider.statementDays} dias antes do
vencimento
Fecha: {(card as PostpaidCard).cardProvider.statementDays} dias
antes do vencimento
</span>
<span>Limite: {formatMoney((card as PostpaidCard).limit)}</span>
<span>Pago no: {(card as PostpaidCard).payAt}</span>
<span>
Pago com: {(card as PostpaidCard).payWithBankAccountId}
</span>
<span>Limite: {formatMoney(card.limit)}</span>
<span>Pago no: {card.payAt}</span>
<span>Pago com: {card.payWithBankAccountId}</span>
</>
)}
{card.type === CardTypeEnum.PREPAID && (
{isPrepaid(card.type) && (
<>
<span>Saldo: {formatMoney(card.balance)}</span>
<span>Saldo: {formatMoney((card as PrepaidCard).balance)}</span>
</>
)}
</div>
Expand Down
231 changes: 152 additions & 79 deletions src/app/(public)/carteira/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import { colors } from "assets/colors";
import {
bankAccounts as bankAccountsData,
cards as cardsData,
Expand All @@ -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<Card>;
valueKey: keyof PostpaidCard | keyof PrepaidCard;
valueLabel: string;
newCardLabel: string;
cardType: CardTypeEnum;
}

const bankAccounts = Object.values(bankAccountsData);
const cards = Object.values(cardsData);

Expand All @@ -24,32 +34,85 @@ const Wallet = () => {

<main className="min-h-[100dvh] w-full flex flex-col pt-2 container-padding">
<section>
<h2 className="font-bold text-lg">Resumo</h2>
<h2 className="font-bold text-lg">Saldos</h2>

<div>
<div className="flex flex-row justify-between">
<span>Saldo bancário</span>
<span>
{formatMoney(
<div className="flex flex-col gap-1">
{[
{
title: "Bancário",
value: formatMoney(
bankAccounts.reduce((acc, cur) => acc + cur.balance, 0),
)}
</span>
</div>

<div className="flex flex-row justify-between">
<span>Fatura</span>
<span>
{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),
)}
</span>
</div>
),
},
{
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 }) => (
<div key={title} className="flex font-bold text-sm rounded">
<div
className="flex flex-row gap-2 w-3/4 items-center p-2 rounded-l"
style={{
backgroundColor: colors.gray,
}}
>
<span>{title}</span>
</div>

<div
className="w-2/5 flex flex-row items-center justify-end p-2 rounded-r"
style={{
backgroundColor: `${colors.gray}75`,
}}
>
<span>{value}</span>
</div>
</div>
))}
</div>
</section>

Expand Down Expand Up @@ -79,65 +142,75 @@ const Wallet = () => {

<Space />

<section>
<h2 className="font-bold text-lg">Cartões de crédito</h2>

<div className="flex flex-col gap-1">
{(
cards.filter(
(c) => c.type === CardTypeEnum.POSTPAID,
) as Array<PostpaidCard>
).map((c) => (
<WalletItem
key={c.cardId}
redirectTo={`/cartao/${c.cardId}`}
iconUrl={c.cardProvider.iconUrl}
label={`**** ${c.lastFourDigits}`}
name={c.name}
valueLabel="Fatura"
value={formatMoney(0)}
/>
))}

<Link
href={`/adicionar-cartao?type=${CardTypeEnum.POSTPAID}`}
className="btn"
>
<Icon icon="pluscircle" /> Adicionar novo cartão
</Link>
</div>
</section>

<Space />

<section>
<h2 className="font-bold text-lg">Vales</h2>

<div className="flex flex-col gap-1">
{(
cards.filter(
(c) => c.type === CardTypeEnum.PREPAID,
) as Array<PrepaidCard>
).map((c) => (
<WalletItem
key={c.cardId}
redirectTo={`/cartao/${c.cardId}`}
iconUrl={c.cardProvider.iconUrl}
label={`**** ${c.lastFourDigits}`}
name={c.name}
valueLabel="Saldo"
value={formatMoney(c.balance)}
/>
))}

<Link
href={`/adicionar-cartao?type=${CardTypeEnum.PREPAID}`}
className="btn"
>
<Icon icon="pluscircle" /> Adicionar novo vale
</Link>
</div>
</section>
{(
[
{
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<CardGroup>
).map(
({ title, items, valueKey, valueLabel, newCardLabel, cardType }) => (
<>
<section>
<h2 className="font-bold text-lg">{title}</h2>

<div className="flex flex-col gap-1">
{items.map((c) => (
<WalletItem
key={c.cardId}
redirectTo={`/cartao/${c.cardId}`}
iconUrl={c.cardProvider.iconUrl}
label={`**** ${c.lastFourDigits}`}
name={c.name}
valueLabel={valueLabel}
value={formatMoney(
c[valueKey as keyof (typeof items)[0]] as any,
)}
/>
))}

<Link
href={`/adicionar-cartao?type=${cardType}`}
className="btn"
>
<Icon icon="pluscircle" /> {newCardLabel}
</Link>
</div>
</section>

<Space />
</>
),
)}
</main>
</>
);
Expand Down
Loading

0 comments on commit 521cd01

Please sign in to comment.