From a52a165e8be9612bcfe105f568e3a4e862bc8055 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Wed, 27 Nov 2024 15:24:20 -0300 Subject: [PATCH 01/14] feat:(dependencies) add some libs to top browser progressbar --- package.json | 7 +++-- pnpm-lock.yaml | 80 +++++++++++++++++++++++++++++++++++++------------- 2 files changed, 65 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 5d5412f..bd7bddc 100644 --- a/package.json +++ b/package.json @@ -33,9 +33,12 @@ "@types/react-dom": "^18.3.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "date-fns": "^4.1.0", + "date-fns": "^3.0.0", + "eslint": "^8.57.1", "lucide-react": "^0.454.0", "next": "14.2.16", + "next-nprogress-bar": "^2.3.15", + "nextjs-progressbar": "^0.0.16", "postcss": "^8.4.47", "posthog-js": "^1.188.0", "prisma": "^5.22.0", @@ -55,7 +58,7 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@semantic-release/github": "^11.0.1", - "eslint": "^8.57.1", + "@types/nprogress": "^0.2.3", "eslint-config-next": "14.2.16", "prettier": "^3.3.3", "prettier-plugin-tailwindcss": "^0.6.8" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a2e21ee..a787f29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,14 +66,23 @@ importers: specifier: ^2.1.1 version: 2.1.1 date-fns: - specifier: ^4.1.0 - version: 4.1.0 + specifier: ^3.0.0 + version: 3.0.0 + eslint: + specifier: ^8.57.1 + version: 8.57.1 lucide-react: specifier: ^0.454.0 version: 0.454.0(react@18.3.1) next: specifier: 14.2.16 version: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next-nprogress-bar: + specifier: ^2.3.15 + version: 2.3.15 + nextjs-progressbar: + specifier: ^0.0.16 + version: 0.0.16(next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) postcss: specifier: ^8.4.47 version: 8.4.47 @@ -88,7 +97,7 @@ importers: version: 18.3.1 react-day-picker: specifier: ^8.10.1 - version: 8.10.1(date-fns@4.1.0)(react@18.3.1) + version: 8.10.1(date-fns@3.0.0)(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -126,9 +135,9 @@ importers: '@semantic-release/github': specifier: ^11.0.1 version: 11.0.1(semantic-release@24.2.0(typescript@5.6.3)) - eslint: - specifier: ^8.57.1 - version: 8.57.1 + '@types/nprogress': + specifier: ^0.2.3 + version: 0.2.3 eslint-config-next: specifier: 14.2.16 version: 14.2.16(eslint@8.57.1)(typescript@5.6.3) @@ -937,6 +946,9 @@ packages: '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} + '@types/nprogress@0.2.3': + resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==} + '@types/prop-types@15.7.13': resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} @@ -1380,8 +1392,8 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} - date-fns@4.1.0: - resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} + date-fns@3.0.0: + resolution: {integrity: sha512-xjDz3rNN9jp+Lh3P/4MeY4E5HkaRnEnrJCcrdRZnKdn42gJlIe6hwrrwVXePRwVR2kh1UcMnz00erYBnHF8PFA==} debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} @@ -2329,6 +2341,9 @@ packages: nerf-dart@1.0.0: resolution: {integrity: sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==} + next-nprogress-bar@2.3.15: + resolution: {integrity: sha512-8s8slKMUXvDrl7wWzKyWt6BJQThOJREpCicdbi66xAOzQ23DeIauEzMGPg1BMixnqlIRY3ayUO/ey9dafkgWcA==} + next@14.2.16: resolution: {integrity: sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==} engines: {node: '>=18.17.0'} @@ -2347,6 +2362,12 @@ packages: sass: optional: true + nextjs-progressbar@0.0.16: + resolution: {integrity: sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==} + peerDependencies: + next: '>= 6.0.0' + react: '>= 16.0.0' + no-case@3.0.4: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} @@ -2452,6 +2473,9 @@ packages: - which - write-file-atomic + nprogress@0.2.0: + resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==} + object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -4265,6 +4289,8 @@ snapshots: '@types/normalize-package-data@2.4.4': {} + '@types/nprogress@0.2.3': {} + '@types/prop-types@15.7.13': {} '@types/react-dom@18.3.1': @@ -4750,7 +4776,7 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 - date-fns@4.1.0: {} + date-fns@3.0.0: {} debug@3.2.7: dependencies: @@ -4949,8 +4975,8 @@ snapshots: '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1) eslint-plugin-react: 7.37.2(eslint@8.57.1) eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1) @@ -4969,37 +4995,37 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -5010,7 +5036,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -5821,6 +5847,10 @@ snapshots: nerf-dart@1.0.0: {} + next-nprogress-bar@2.3.15: + dependencies: + nprogress: 0.2.0 + next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 14.2.16 @@ -5846,6 +5876,14 @@ snapshots: - '@babel/core' - babel-plugin-macros + nextjs-progressbar@0.0.16(next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + dependencies: + '@types/nprogress': 0.2.3 + next: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + nprogress: 0.2.0 + prop-types: 15.8.1 + react: 18.3.1 + no-case@3.0.4: dependencies: lower-case: 2.0.2 @@ -5883,6 +5921,8 @@ snapshots: npm@10.9.1: {} + nprogress@0.2.0: {} + object-assign@4.1.1: {} object-hash@3.0.0: {} @@ -6139,9 +6179,9 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1): + react-day-picker@8.10.1(date-fns@3.0.0)(react@18.3.1): dependencies: - date-fns: 4.1.0 + date-fns: 3.0.0 react: 18.3.1 react-dom@18.3.1(react@18.3.1): From cc6cc95c766b34eac96ea0b399a1fc3be27925e0 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Wed, 27 Nov 2024 15:25:21 -0300 Subject: [PATCH 02/14] chore:(add path) styles can now be accessed with "@/styles/" --- tsconfig.json | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index e7ff90f..16e6281 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -18,9 +22,21 @@ } ], "paths": { - "@/*": ["./*"] + "@/*": [ + "./*" + ], + "@/styles": [ + "./app/_styles/*" + ] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file From 619d96e77a3344a6e5f6deed9113809d01b0c71c Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Wed, 27 Nov 2024 15:26:24 -0300 Subject: [PATCH 03/14] feat:(providers) separated client providers --- app/(authenticated)/layout.tsx | 9 ++--- app/_lib/providers/PostHogProvider.tsx | 39 ++++++++++++++++++++++ app/_lib/providers/index.tsx | 46 ++++++++------------------ app/layout.tsx | 6 ++-- 4 files changed, 60 insertions(+), 40 deletions(-) create mode 100644 app/_lib/providers/PostHogProvider.tsx diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index 6f39099..cd479d5 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -1,8 +1,9 @@ -import React, { Suspense } from "react"; +import type React from "react"; +import { Suspense } from "react"; import Header from "../_components/Header"; import { auth } from "@clerk/nextjs/server"; import { redirect } from "next/navigation"; -import { PostHogProvider } from "../_lib/providers"; +import { ClientProviders } from "../_lib/providers"; export default async function AuthenticatedLayout({ children, @@ -17,10 +18,10 @@ export default async function AuthenticatedLayout({ return ( - +
{children}
- + ); } diff --git a/app/_lib/providers/PostHogProvider.tsx b/app/_lib/providers/PostHogProvider.tsx new file mode 100644 index 0000000..704d1ef --- /dev/null +++ b/app/_lib/providers/PostHogProvider.tsx @@ -0,0 +1,39 @@ +"use client"; + +import posthog from "posthog-js"; +import { PostHogProvider as Provider } from "posthog-js/react"; +import { usePathname, useSearchParams } from "next/navigation"; +import { useEffect } from "react"; +import { env } from "../env"; +if (typeof window !== "undefined") { + posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, { + api_host: env.NEXT_PUBLIC_POSTHOG_HOST, + capture_pageview: true, + person_profiles: "always", + autocapture: true, + capture_heatmaps: true, + }); +} + +export default function PostHogProvider({ + children, +}: { + children: React.ReactNode; +}) { + const pathname = usePathname(); + const searchParams = useSearchParams(); + + useEffect(() => { + if (pathname) { + let url = window.origin + pathname; + if (searchParams?.toString()) { + url = `${url}?${searchParams.toString()}`; + } + posthog.capture("$pageview", { + $current_url: url, + }); + } + }, [pathname, searchParams]); + + return {children}; +} diff --git a/app/_lib/providers/index.tsx b/app/_lib/providers/index.tsx index 6393661..28eabf3 100644 --- a/app/_lib/providers/index.tsx +++ b/app/_lib/providers/index.tsx @@ -1,35 +1,15 @@ "use client"; -import posthog from "posthog-js"; -import { PostHogProvider as Provider } from "posthog-js/react"; -import { usePathname, useSearchParams } from "next/navigation"; -import { useEffect } from "react"; -import { env } from "../env"; -if (typeof window !== "undefined") { - posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, { - api_host: env.NEXT_PUBLIC_POSTHOG_HOST, - capture_pageview: true, - person_profiles: "always", - autocapture: true, - capture_heatmaps: true, - }); -} - -export function PostHogProvider({ children }: { children: React.ReactNode }) { - const pathname = usePathname(); - const searchParams = useSearchParams(); - - useEffect(() => { - if (pathname) { - let url = window.origin + pathname; - if (searchParams?.toString()) { - url = url + `?${searchParams.toString()}`; - } - posthog.capture("$pageview", { - $current_url: url, - }); - } - }, [pathname, searchParams]); - - return {children}; -} +import PostHogProvider from "./PostHogProvider"; + +export const ClientProviders = ({ + children, +}: { + children: React.ReactNode; +}) => { + return ( + <> + {children} + + ); +}; diff --git a/app/layout.tsx b/app/layout.tsx index 3f698ee..93e853b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,7 +3,7 @@ import { Mulish } from "next/font/google"; import "./globals.css"; import { ClerkProvider } from "@clerk/nextjs"; import { dark } from "@clerk/themes"; -import { PostHogProvider } from "./_lib/providers"; +import { ClientProviders } from "./_lib/providers"; import { Suspense } from "react"; const mulish = Mulish({ @@ -22,7 +22,7 @@ export default function RootLayout({ return ( - + - + ); From 353e2148938c5b1d628d48b3b46f3ee1e6e96da8 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Wed, 27 Nov 2024 15:27:44 -0300 Subject: [PATCH 04/14] feat(responsive) now "dashboard", "transactions", just appears on mobile --- app/_components/user-avatar-button.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/_components/user-avatar-button.tsx b/app/_components/user-avatar-button.tsx index 7046c60..60354ca 100644 --- a/app/_components/user-avatar-button.tsx +++ b/app/_components/user-avatar-button.tsx @@ -46,6 +46,7 @@ const UserAvatarButton = () => { Perfil Configurações router.push(`/dashboard?month=${new Date().getMonth() + 1}`) } @@ -55,7 +56,10 @@ const UserAvatarButton = () => { router.push("/subscriptions")}> Planos - router.push("/transactions")}> + router.push("/transactions")} + > Transações Logout From 6ba8fa25cc854a8da04f16264cb4f2eab878d58b Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Thu, 28 Nov 2024 14:00:26 -0300 Subject: [PATCH 05/14] fix:(dependencies) fix error with react day picker and date-fns --- package.json | 4 ++-- pnpm-lock.yaml | 50 ++++++++++++++++++++++++++++---------------------- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index bd7bddc..e322693 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@types/react-dom": "^18.3.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "date-fns": "^3.0.0", + "date-fns": "^4.1.0", "eslint": "^8.57.1", "lucide-react": "^0.454.0", "next": "14.2.16", @@ -43,7 +43,7 @@ "posthog-js": "^1.188.0", "prisma": "^5.22.0", "react": "^18.3.1", - "react-day-picker": "^8.10.1", + "react-day-picker": "^9.4.0", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-number-format": "^5.4.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a787f29..a8b261e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,8 +66,8 @@ importers: specifier: ^2.1.1 version: 2.1.1 date-fns: - specifier: ^3.0.0 - version: 3.0.0 + specifier: ^4.1.0 + version: 4.1.0 eslint: specifier: ^8.57.1 version: 8.57.1 @@ -96,8 +96,8 @@ importers: specifier: ^18.3.1 version: 18.3.1 react-day-picker: - specifier: ^8.10.1 - version: 8.10.1(date-fns@3.0.0)(react@18.3.1) + specifier: ^9.4.0 + version: 9.4.0(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -209,6 +209,9 @@ packages: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} + '@date-fns/tz@1.2.0': + resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==} + '@eslint-community/eslint-utils@4.4.1': resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1392,8 +1395,8 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} - date-fns@3.0.0: - resolution: {integrity: sha512-xjDz3rNN9jp+Lh3P/4MeY4E5HkaRnEnrJCcrdRZnKdn42gJlIe6hwrrwVXePRwVR2kh1UcMnz00erYBnHF8PFA==} + date-fns@4.1.0: + resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} @@ -2809,11 +2812,11 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-day-picker@8.10.1: - resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} + react-day-picker@9.4.0: + resolution: {integrity: sha512-M9WTTjIi/CWmkGk+3Uh6fKGzxCGjijUW+0M0cUhDe9BEw+uzpl/YUqC5eAur9EkaekFJFpnKHfIRmVZLMDPzyw==} + engines: {node: '>=18'} peerDependencies: - date-fns: ^2.28.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: '>=16.8.0' react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} @@ -3531,6 +3534,8 @@ snapshots: '@colors/colors@1.5.0': optional: true + '@date-fns/tz@1.2.0': {} + '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 @@ -4776,7 +4781,7 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 - date-fns@3.0.0: {} + date-fns@4.1.0: {} debug@3.2.7: dependencies: @@ -4975,8 +4980,8 @@ snapshots: '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1) eslint-plugin-react: 7.37.2(eslint@8.57.1) eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1) @@ -4995,37 +5000,37 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.13.0(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -5036,7 +5041,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.13.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -6179,9 +6184,10 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-day-picker@8.10.1(date-fns@3.0.0)(react@18.3.1): + react-day-picker@9.4.0(react@18.3.1): dependencies: - date-fns: 3.0.0 + '@date-fns/tz': 1.2.0 + date-fns: 4.1.0 react: 18.3.1 react-dom@18.3.1(react@18.3.1): From 6cf244a2345518cfc3c2e30dc06f4aaaa2f7324e Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Fri, 29 Nov 2024 23:47:46 -0300 Subject: [PATCH 06/14] refactor(calendar component): updating calendar component --- app/_components/ui/calendar.tsx | 2 +- package.json | 2 +- pnpm-lock.yaml | 20 +++++++------------- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/app/_components/ui/calendar.tsx b/app/_components/ui/calendar.tsx index 66c46ac..cc36737 100644 --- a/app/_components/ui/calendar.tsx +++ b/app/_components/ui/calendar.tsx @@ -1,6 +1,6 @@ "use client"; -import * as React from "react"; +import type * as React from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { DayPicker } from "react-day-picker"; diff --git a/package.json b/package.json index e322693..55be796 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "posthog-js": "^1.188.0", "prisma": "^5.22.0", "react": "^18.3.1", - "react-day-picker": "^9.4.0", + "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-number-format": "^5.4.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8b261e..f179045 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -96,8 +96,8 @@ importers: specifier: ^18.3.1 version: 18.3.1 react-day-picker: - specifier: ^9.4.0 - version: 9.4.0(react@18.3.1) + specifier: ^8.10.1 + version: 8.10.1(date-fns@4.1.0)(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -209,9 +209,6 @@ packages: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} - '@date-fns/tz@1.2.0': - resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==} - '@eslint-community/eslint-utils@4.4.1': resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2812,11 +2809,11 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-day-picker@9.4.0: - resolution: {integrity: sha512-M9WTTjIi/CWmkGk+3Uh6fKGzxCGjijUW+0M0cUhDe9BEw+uzpl/YUqC5eAur9EkaekFJFpnKHfIRmVZLMDPzyw==} - engines: {node: '>=18'} + react-day-picker@8.10.1: + resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} peerDependencies: - react: '>=16.8.0' + date-fns: ^2.28.0 || ^3.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} @@ -3534,8 +3531,6 @@ snapshots: '@colors/colors@1.5.0': optional: true - '@date-fns/tz@1.2.0': {} - '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 @@ -6184,9 +6179,8 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-day-picker@9.4.0(react@18.3.1): + react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1): dependencies: - '@date-fns/tz': 1.2.0 date-fns: 4.1.0 react: 18.3.1 From 9ac7003fa6f57394c39c9a2b3f3811806ed58701 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Fri, 29 Nov 2024 23:55:35 -0300 Subject: [PATCH 07/14] style(formatting): :art: format file --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 16e6281..120c0ce 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,7 @@ ], "@/styles": [ "./app/_styles/*" - ] + ], } }, "include": [ From 81a9c18717d717db57a47ed129be7465095dfb7f Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Sat, 30 Nov 2024 00:01:32 -0300 Subject: [PATCH 08/14] refactor(refactoring to import type): refactoring to import type some imports --- app/_components/ui/date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/_components/ui/date-picker.tsx b/app/_components/ui/date-picker.tsx index e26edb2..f269df5 100644 --- a/app/_components/ui/date-picker.tsx +++ b/app/_components/ui/date-picker.tsx @@ -8,7 +8,7 @@ import { cn } from "@/app/_lib/utils"; import { Button } from "./button"; import { Calendar } from "./calendar"; import { Popover, PopoverContent, PopoverTrigger } from "./popover"; -import { SelectSingleEventHandler } from "react-day-picker"; +import type { SelectSingleEventHandler } from "react-day-picker"; interface DatePickerProps { value?: Date; From 4a251b927c7693dea50a197f92c2088cea516300 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Sun, 1 Dec 2024 01:59:51 -0300 Subject: [PATCH 09/14] feat:(clerk webhook) add clerk webhook to set initial plans --- app/api/webhooks/clerk/route.ts | 39 +++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 app/api/webhooks/clerk/route.ts diff --git a/app/api/webhooks/clerk/route.ts b/app/api/webhooks/clerk/route.ts new file mode 100644 index 0000000..8bb5462 --- /dev/null +++ b/app/api/webhooks/clerk/route.ts @@ -0,0 +1,39 @@ +import type { NextApiRequest, NextApiResponse } from "next"; +import { clerkClient } from "@clerk/nextjs/server"; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse, +) { + if (req.method !== "POST") { + return res.status(405).json({ error: "Method not allowed" }); + } + + try { + const payload = req.body; + + // Verificar o evento do webhook + if (payload.type === "user.created") { + const userId = payload.data.id; + + // Atualizar os metadata do usuário + await ( + await clerkClient() + ).users.updateUser(userId, { + publicMetadata: { + stripeCustomerId: null, // Adicione isso quando integrar o Stripe + subscriptionStatus: "free", // Defina o plano inicial como "free" + }, + }); + + return res + .status(200) + .json({ message: "User metadata updated successfully" }); + } + + res.status(400).json({ error: "Unhandled event type" }); + } catch (error) { + console.error("Erro ao processar webhook Clerk:", error); + res.status(500).json({ error: "Internal Server Error" }); + } +} From 72823211b465f6629eb34df91dc7c2d04052647d Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Sun, 1 Dec 2024 02:00:49 -0300 Subject: [PATCH 10/14] refactor: updating structure --- app/_lib/env.ts | 1 + app/_styles/typography.ts | 3 +++ app/subscriptions/page.tsx | 36 +++++++++++++++++++++++++++++++++++- package.json | 2 ++ pnpm-lock.yaml | 29 +++++++++++++++++++++++++++++ 5 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 app/_styles/typography.ts diff --git a/app/_lib/env.ts b/app/_lib/env.ts index c359745..39ef154 100644 --- a/app/_lib/env.ts +++ b/app/_lib/env.ts @@ -4,4 +4,5 @@ export const env = { DATABASE_URL: process.env.DATABASE_URL ?? "", CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY ?? "", CLERK_PUBLISHABLE_KEY: process.env.CLERK_PUBLISHABLE_KEY ?? "", + CLERK_SECRET_WEBHOOK: process.env.CLERK_SECRET_WEBHOOK ?? "", }; diff --git a/app/_styles/typography.ts b/app/_styles/typography.ts new file mode 100644 index 0000000..08bf216 --- /dev/null +++ b/app/_styles/typography.ts @@ -0,0 +1,3 @@ +export const typography = { + h1: "text-2xl font-bold", +}; diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx index 616b14f..1f551fe 100644 --- a/app/subscriptions/page.tsx +++ b/app/subscriptions/page.tsx @@ -1,10 +1,44 @@ import Header from "../_components/Header"; +import { Badge } from "../_components/ui/badge"; +import { Card, CardHeader } from "../_components/ui/card"; +import { cn } from "../_lib/utils"; +import { typography } from "../_styles/typography"; const Subscriptions = () => { return ( <>
-
Subscriptions
+
+

Assinaturas

+
+ + +
+

Plano Pro

+
+ + + + +
+ + Atual + +
+
+

+ Plano Básico +

+
+

R$

+

0

+

/ mês

+
+
+ + +
+
); }; diff --git a/package.json b/package.json index 55be796..dfa72c0 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", + "@stripe/stripe-js": "^5.2.0", "@tanstack/react-table": "^8.20.5", "@types/node": "^20.17.6", "@types/react": "^18.3.12", @@ -48,6 +49,7 @@ "react-hook-form": "^7.53.1", "react-number-format": "^5.4.2", "recharts": "^2.13.3", + "stripe": "^17.4.0", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f179045..4f56a8e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@stripe/stripe-js': + specifier: ^5.2.0 + version: 5.2.0 '@tanstack/react-table': specifier: ^8.20.5 version: 8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -110,6 +113,9 @@ importers: recharts: specifier: ^2.13.3 version: 2.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + stripe: + specifier: ^17.4.0 + version: 17.4.0 tailwind-merge: specifier: ^2.5.4 version: 2.5.4 @@ -893,6 +899,10 @@ packages: resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} engines: {node: '>=18'} + '@stripe/stripe-js@5.2.0': + resolution: {integrity: sha512-2ZpEaezx3S0QPtnske175NDaLvUvaVKd4ePHpUN0QF/uV4BBBBRUy5BvQONDym+utbbW0QhSJoiRPnp4FS+4Vg==} + engines: {node: '>=12.16'} + '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} @@ -2802,6 +2812,10 @@ packages: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} + qs@6.13.1: + resolution: {integrity: sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==} + engines: {node: '>=0.6'} + queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -3148,6 +3162,10 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + stripe@17.4.0: + resolution: {integrity: sha512-sQQGZguPxe7/QYXJKtDpfzT2OAH9F8nyE2SOsVdTU793iiU33/dpaKgWaJEGJm8396Yy/6NvTLblgdHlueGLhA==} + engines: {node: '>=12.*'} + styled-jsx@5.1.1: resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} engines: {node: '>= 12.0.0'} @@ -4242,6 +4260,8 @@ snapshots: '@sindresorhus/merge-streams@4.0.0': {} + '@stripe/stripe-js@5.2.0': {} + '@swc/counter@0.1.3': {} '@swc/helpers@0.5.5': @@ -6170,6 +6190,10 @@ snapshots: punycode@2.3.1: {} + qs@6.13.1: + dependencies: + side-channel: 1.0.6 + queue-microtask@1.2.3: {} rc@1.2.8: @@ -6590,6 +6614,11 @@ snapshots: strip-json-comments@3.1.1: {} + stripe@17.4.0: + dependencies: + '@types/node': 20.17.6 + qs: 6.13.1 + styled-jsx@5.1.1(react@18.3.1): dependencies: client-only: 0.0.1 From b64db27b2b5dd3ee3943c26ff3a2dc8dc5b29bc7 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Tue, 3 Dec 2024 15:56:20 -0300 Subject: [PATCH 11/14] fix(api route to clerk webhooks): :ambulance: fixed the method name --- app/api/webhooks/clerk/route.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/api/webhooks/clerk/route.ts b/app/api/webhooks/clerk/route.ts index 8bb5462..3cd7346 100644 --- a/app/api/webhooks/clerk/route.ts +++ b/app/api/webhooks/clerk/route.ts @@ -1,10 +1,7 @@ import type { NextApiRequest, NextApiResponse } from "next"; import { clerkClient } from "@clerk/nextjs/server"; -export default async function handler( - req: NextApiRequest, - res: NextApiResponse, -) { +export default async function POST(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ error: "Method not allowed" }); } From 69ddc431cdc2f6266708d220bcfcbbf1a7280d39 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Tue, 3 Dec 2024 15:56:20 -0300 Subject: [PATCH 12/14] fix(api route to clerk webhooks): :ambulance: fixed the method name --- app/api/webhooks/clerk/route.ts | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/app/api/webhooks/clerk/route.ts b/app/api/webhooks/clerk/route.ts index 3cd7346..06925f1 100644 --- a/app/api/webhooks/clerk/route.ts +++ b/app/api/webhooks/clerk/route.ts @@ -1,13 +1,9 @@ -import type { NextApiRequest, NextApiResponse } from "next"; +import { NextResponse } from "next/server"; import { clerkClient } from "@clerk/nextjs/server"; -export default async function POST(req: NextApiRequest, res: NextApiResponse) { - if (req.method !== "POST") { - return res.status(405).json({ error: "Method not allowed" }); - } - +export async function POST(req: Request) { try { - const payload = req.body; + const payload = await req.json(); // Verificar o evento do webhook if (payload.type === "user.created") { @@ -23,14 +19,20 @@ export default async function POST(req: NextApiRequest, res: NextApiResponse) { }, }); - return res - .status(200) - .json({ message: "User metadata updated successfully" }); + return NextResponse.json({ + message: "User metadata updated successfully", + }); } - res.status(400).json({ error: "Unhandled event type" }); + return NextResponse.json( + { error: "Unhandled event type" }, + { status: 400 }, + ); } catch (error) { console.error("Erro ao processar webhook Clerk:", error); - res.status(500).json({ error: "Internal Server Error" }); + return NextResponse.json( + { error: "Internal Server Error" }, + { status: 500 }, + ); } } From 2fef33781b44190c4c1d4211a0982d305123d201 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Tue, 3 Dec 2024 15:56:20 -0300 Subject: [PATCH 13/14] fix(api route to clerk webhooks): :ambulance: fixed the method name --- app/api/webhooks/{clerk => }/route.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/api/webhooks/{clerk => }/route.ts (100%) diff --git a/app/api/webhooks/clerk/route.ts b/app/api/webhooks/route.ts similarity index 100% rename from app/api/webhooks/clerk/route.ts rename to app/api/webhooks/route.ts From 2283165ea59cdc3892db71215f3dec2875c8e788 Mon Sep 17 00:00:00 2001 From: Wesley Souza | Neo Date: Tue, 3 Dec 2024 20:44:53 -0300 Subject: [PATCH 14/14] feat(working on the subscriptions ui) updated cards ui --- app/layout.tsx | 10 +++- app/subscriptions/page.tsx | 114 +++++++++++++++++++++++++++---------- 2 files changed, 93 insertions(+), 31 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 93e853b..3814fda 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -11,7 +11,15 @@ const mulish = Mulish({ }); export const metadata: Metadata = { - title: "Finance AI", + title: "Jupiter Finance", + description: + "Uma plataforma de gerenciamento de finanças pessoais e para pequenas empresas.", + keywords: ["finance", "controle financeiro", "gerenciamento financeiro"], + applicationName: "Jupiter Finance", + authors: { + name: "Wesley Souza", + url: "https://dev-wesleysouza.vercel.app/", + }, }; export default function RootLayout({ diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx index 1f551fe..3de205f 100644 --- a/app/subscriptions/page.tsx +++ b/app/subscriptions/page.tsx @@ -1,44 +1,98 @@ +import { Check, SparklesIcon, X } from "lucide-react"; import Header from "../_components/Header"; import { Badge } from "../_components/ui/badge"; -import { Card, CardHeader } from "../_components/ui/card"; +import { + Card, + CardContent, + CardFooter, + CardHeader, +} from "../_components/ui/card"; import { cn } from "../_lib/utils"; import { typography } from "../_styles/typography"; +import { Button } from "../_components/ui/button"; +import { ScrollArea } from "../_components/ui/scroll-area"; const Subscriptions = () => { return ( <>
-
-

Assinaturas

-
- - -
-

Plano Pro

-
- - - - -
- - Atual - -
-
-

- Plano Básico -

+ +
+

Assinaturas

+
+ + +
+

+ Plano PRO +

+
+

R$

+

19

+

/ mês

+
+
+ + +
+ +

Transações ilimitadas.

+
+
+ +

Relatórios de IA ilimitados.

+
+ + + + + + + +
+ + Atual + +
+
+

+ Plano Básico +

+
+

R$

+

0

+

/ mês

+
+
+ + +
+ +

+ Apenas 10 transações por dia{" "} + 0/10 +

+
-

R$

-

0

-

/ mês

+ +

Relatórios de IA limitados.

-
- - -
-
+ + + + + + + + ); };