Update Inputs

econominhas · Nov 18, 2023 · a1239e5 · a1239e5
1 parent 425e57a
commit a1239e5
Show file tree

Hide file tree

Showing 29 changed files with 311 additions and 208 deletions.
diff --git a/src/app/(private)/gastos/page.tsx b/src/app/(private)/gastos/page.tsx
diff --git a/src/app/(public)/adicionar-cartao/page.tsx b/src/app/(public)/adicionar-cartao/page.tsx
@@ -57,6 +57,7 @@ const AddCard = () => {
 			<main className="min-h-[100dvh] w-full flex flex-col pt-2 container-padding">
 				<form className="flex justify-center flex-col">
 					<SelectInput
+						id="cardProviderId"
 						label="Cartão"
 						toBeSelectedLabel="Selecionar cartão"
 						data={cardProviders.filter((c) => c.type === cardType)}
@@ -73,6 +74,7 @@ const AddCard = () => {
 					<Space />
 
 					<TextInput
+						id="lastFourDigits"
 						label="Últimos 4 digitos"
 						numeric
 						maxLength={4}
@@ -85,6 +87,7 @@ const AddCard = () => {
 					{cardType === CardTypeEnum.POSTPAID && (
 						<>
 							<SelectInput
+								id="dueDay"
 								label="Dia de vencimento"
 								disabled={!state.cardProviderId}
 								data={
@@ -105,6 +108,7 @@ const AddCard = () => {
 							<Space />
 
 							<MoneyInput
+								id="limit"
 								label="Limite"
 								value={state.limit}
 								onChange={(val) => setData("limit", val)}
@@ -113,6 +117,7 @@ const AddCard = () => {
 							<Space />
 
 							<SelectInput
+								id="payAt"
 								label="Pagar no"
 								data={[
 									{
@@ -135,13 +140,14 @@ const AddCard = () => {
 							<Space />
 
 							<SelectInput
+								id="payWithBankAccountId"
 								label="Pagar com a conta"
 								data={bankAccounts}
 								fieldNames={{
 									id: "bankAccountId",
 									label: "name",
-									color: "color",
-									iconUrl: "iconUrl",
+									color: "bank.color",
+									iconUrl: "bank.iconUrl",
 								}}
 								value={state.payWithBankAccountId}
 								onChange={(val) => setData("payWithBankAccountId", val)}
@@ -152,6 +158,7 @@ const AddCard = () => {
 					{cardType === CardTypeEnum.PREPAID && (
 						<>
 							<MoneyInput
+								id="balance"
 								label="Saldo"
 								value={state.balance}
 								onChange={(val) => setData("balance", val)}

diff --git a/src/app/(public)/adicionar-conta/page.tsx b/src/app/(public)/adicionar-conta/page.tsx
@@ -38,6 +38,7 @@ const AddAccount = () => {
 			<main className="min-h-[100dvh] w-full flex flex-col pt-2 container-padding">
 				<form className="flex justify-center flex-col">
 					<SelectInput
+						id="bankId"
 						label="Instituição financeira"
 						toBeSelectedLabel="Selecionar instituição financeira"
 						data={bankProviders}
@@ -53,6 +54,7 @@ const AddAccount = () => {
 					<Space />
 
 					<TextInput
+						id="accountNumber"
 						label="Número da conta"
 						numeric
 						mask="99999-9"
@@ -64,6 +66,7 @@ const AddAccount = () => {
 					<Space />
 
 					<TextInput
+						id="branch"
 						label="Agência"
 						numeric
 						maxLength={3}
@@ -74,6 +77,7 @@ const AddAccount = () => {
 					<Space />
 
 					<MoneyInput
+						id="balance"
 						label="Saldo"
 						value={state.balance}
 						onChange={(val) => setData("balance", val)}
@@ -82,6 +86,7 @@ const AddAccount = () => {
 					<Space />
 
 					<TextInput
+						id="name"
 						label="Nome"
 						placeholder={
 							state.bankId ? bankProvidersData[state.bankId].name : undefined

diff --git a/src/app/(public)/cartao/[cardId]/page.tsx b/src/app/(public)/cartao/[cardId]/page.tsx
@@ -20,19 +20,22 @@ const Card = ({ params }: Props) => {
 			<main className="min-h-[100dvh] w-full flex flex-col items-center container-padding gap-2">
 				<img
 					className="rounded-full max-w-24 max-h-24"
-					src={card.iconUrl}
+					src={card.cardProvider.iconUrl}
 					alt={card.name}
 				/>
 
 				<h2 className="font-bold text-2xl">{card.name}</h2>
 
 				<div className="flex flex-col w-full">
 					<span>Número: **** {card.lastFourDigits}</span>
-					<span>Bandeira: {card.network}</span>
+					<span>Bandeira: {card.cardProvider.network}</span>
 					{card.type === CardTypeEnum.POSTPAID && (
 						<>
 							<span>Dia de vencimento: {card.dueDay}</span>
-							<span>Fecha: {card.statementDays} dias antes do vencimento</span>
+							<span>
+								Fecha: {card.cardProvider.statementDays} dias antes do
+								vencimento
+							</span>
 							<span>Limite: {formatMoney(card.limit)}</span>
 							<span>Pago no: {card.payAt}</span>
 							<span>Pago com: {card.payWithBankAccountId}</span>

diff --git a/src/app/(public)/carteira/page.tsx b/src/app/(public)/carteira/page.tsx
@@ -63,7 +63,7 @@ const Wallet = () => {
 							<WalletItem
 								key={ba.bankAccountId}
 								redirectTo={`/conta-bancaria/${ba.bankAccountId}`}
-								iconUrl={ba.iconUrl}
+								iconUrl={ba.bank.iconUrl}
 								label={formatBankAccountNumber(ba.accountNumber)}
 								name={ba.name}
 								valueLabel="Saldo"
@@ -91,7 +91,7 @@ const Wallet = () => {
 							<WalletItem
 								key={c.cardId}
 								redirectTo={`/cartao/${c.cardId}`}
-								iconUrl={c.iconUrl}
+								iconUrl={c.cardProvider.iconUrl}
 								label={`**** ${c.lastFourDigits}`}
 								name={c.name}
 								valueLabel="Fatura"
@@ -122,7 +122,7 @@ const Wallet = () => {
 							<WalletItem
 								key={c.cardId}
 								redirectTo={`/cartao/${c.cardId}`}
-								iconUrl={c.iconUrl}
+								iconUrl={c.cardProvider.iconUrl}
 								label={`**** ${c.lastFourDigits}`}
 								name={c.name}
 								valueLabel="Saldo"

diff --git a/src/app/(public)/conta-bancaria/[bankAccountId]/page.tsx b/src/app/(public)/conta-bancaria/[bankAccountId]/page.tsx
@@ -19,7 +19,7 @@ const BankAccount = ({ params }: Props) => {
 			<main className="min-h-[100dvh] w-full flex flex-col items-center container-padding gap-2">
 				<img
 					className="rounded-full max-w-24 max-h-24"
-					src={bankAccount.iconUrl}
+					src={bankAccount.bank.iconUrl}
 					alt={bankAccount.name}
 				/>
 

diff --git a/src/app/(public)/conta/page.tsx b/src/app/(public)/conta/page.tsx
@@ -1,17 +1,17 @@
-import {
-	bankAccounts,
-	cards,
-	categories,
-	plans,
-	transactions,
-} from "assets/data";
+import { bankAccounts, cards, categories, plans } from "assets/data";
 import { Header } from "components/Header";
-import { Icon } from "components/Icon";
+import { Icon, IconType } from "components/Icon";
 import { Space } from "components/Space";
 import Link from "next/link";
 import { CardTypeEnum } from "types/enums/card-type";
 
-const premiumBenefits = [
+interface PremiumBenefit {
+	title: string;
+	description: string;
+	icon: IconType;
+}
+
+const premiumBenefits: Array<PremiumBenefit> = [
 	{
 		title: "Contas bancárias ilimitadas",
 		description: "Adicione quantas contas bancárias quiser",
@@ -32,6 +32,11 @@ const premiumBenefits = [
 		description: "Adicione quantas categorias quiser",
 		icon: "category",
 	},
+	{
+		title: "Transações recorrentes ilimitadas",
+		description: "Adicione quantas transações recorrentes quiser",
+		icon: "clock",
+	},
 	{
 		title: "Gere relatórios",
 		description:
@@ -56,6 +61,25 @@ const premiumBenefits = [
 	},
 ];
 
+const GOOGLE_LINK_AUTH = process.env["GOOGLE_LINK_AUTH"];
+
+interface LimitItemProp {
+	label: string;
+	curAmount: number;
+	limit: number;
+}
+
+const LimitItem = ({ label, curAmount, limit }: LimitItemProp) => {
+	return (
+		<div className="container-padding rounded border flex flex-col items-center">
+			<div className="text-xs">{label}</div>
+			<div className="text-3xl font-bold">
+				{curAmount}/{limit}
+			</div>
+		</div>
+	);
+};
+
 const Account = () => {
 	return (
 		<>
@@ -65,41 +89,40 @@ const Account = () => {
 				<section>
 					<h2 className="font-bold text-lg text-center">Resumo da sua conta</h2>
 
-					<div className="flex flex-col gap-1 px-4">
-						<span>
-							Contas: {Object.keys(bankAccounts).length}/
-							{plans.free.limits.bankAccounts}
-						</span>
-						<span>
-							Cartões de crédito:{" "}
-							{
+					<div className="grid grid-cols-2 gap-2">
+						<LimitItem
+							label="Contas bancárias"
+							curAmount={Object.keys(bankAccounts).length}
+							limit={plans.free.limits.bankAccounts}
+						/>
+						<LimitItem
+							label="Cartões de crédito"
+							curAmount={
 								Object.values(cards).filter(
 									(c) => c.type === CardTypeEnum.POSTPAID,
 								).length
 							}
-							/{plans.free.limits.postpaidCard}
-						</span>
-						<span>
-							Vales:{" "}
-							{
+							limit={plans.free.limits.postpaidCard}
+						/>
+						<LimitItem
+							label="Vales"
+							curAmount={
 								Object.values(cards).filter(
 									(c) => c.type === CardTypeEnum.PREPAID,
 								).length
 							}
-							/{plans.free.limits.prepaidCard}
-						</span>
-						<span>
-							Categorias: {Object.keys(categories).length}/
-							{plans.free.limits.categories}
-						</span>
-						<span>
-							Transações: {transactions.length}/
-							{plans.free.limits.transactionsPerMonth}
-						</span>
-						<span>
-							Transações recorrentes: {0}/
-							{plans.free.limits.recurrentTransactions}
-						</span>
+							limit={plans.free.limits.prepaidCard}
+						/>
+						<LimitItem
+							label="Categorias"
+							curAmount={Object.keys(categories).length}
+							limit={plans.free.limits.categories}
+						/>
+						<LimitItem
+							label="Transações recorrentes"
+							curAmount={Object.keys(categories).length}
+							limit={plans.free.limits.recurrentTransactions}
+						/>
 					</div>
 				</section>
 
@@ -114,10 +137,12 @@ const Account = () => {
 
 					<div className="flex flex-col gap-2">
 						{premiumBenefits.map(({ title, description, icon }) => (
-							<div key={title} className="flex flex-row items-center gap-2">
-								<Icon icon={icon} size={6} className="mx-4" />
+							<div key={title} className="grid grid-cols-5 items-center gap-2">
+								<div className="col-span-1 flex justify-center">
+									<Icon icon={icon} size={6} />
+								</div>
 
-								<div>
+								<div className="col-span-4">
 									<span className="font-bold">{title}</span>
 									<p className="text-sm">{description}</p>
 								</div>
@@ -138,6 +163,20 @@ const Account = () => {
 
 				<div className="divider" />
 
+				<section>
+					<Link
+						type="button"
+						title="Logar com google"
+						className="btn btn-google w-full normal-case"
+						href={GOOGLE_LINK_AUTH || "#"}
+					>
+						<Icon icon="google" className="mr-2" />
+						Vincular conta ao Google
+					</Link>
+				</section>
+
+				<div className="divider" />
+
 				<section className="flex flex-col gap-2">
 					<Link
 						href="/logout"

diff --git a/src/app/(public)/criar-categoria/page.tsx b/src/app/(public)/criar-categoria/page.tsx
@@ -50,6 +50,7 @@ const AddCategory = () => {
 				<section className="w-full">
 					<form>
 						<TextInput
+							id="name"
 							label="Nome"
 							value={state.name}
 							onChange={(v) => setData("name", v)}

diff --git a/src/app/(public)/editar-categoria/[categoryId]/Content/index.tsx b/src/app/(public)/editar-categoria/[categoryId]/Content/index.tsx
@@ -48,6 +48,7 @@ export const Content = ({ category }: Props) => {
 			<section className="w-full">
 				<form>
 					<TextInput
+						id="name"
 						label="Nome"
 						value={state.name}
 						onChange={(v) => setData("name", v)}

diff --git a/src/app/(public)/login/telefone/page.tsx b/src/app/(public)/login/telefone/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { TextInput } from "components/Inputs/Text";
+import { PhoneInput } from "components/Inputs/Phone";
 import { useRouter } from "next/navigation";
 import { useForm, useFormState } from "react-hook-form";
+import { CountryEnum } from "types/enums/country";
 
 interface IForm {
 	phone: string;
@@ -39,9 +40,10 @@ const Phone = () => {
 				className="flex items-center justify-center flex-col gap-6"
 				onSubmit={handleSubmit(onSubmit)}
 			>
-				<TextInput
+				<PhoneInput
+					id="phone"
 					label="Telefone"
-					mask="(99) 99999?-9999"
+					country={CountryEnum.BR}
 					value=""
 					onChange={(val: string) => {}}
 				/>