From dec781498e4fa9d8f9618806a738084ea3a59c76 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Fri, 4 Oct 2024 19:43:37 +0700 Subject: [PATCH 1/8] change folder name and hierachy --- src/app/invest/1/page.tsx | 144 ------------------ src/app/invest/page.tsx | 299 ++++++++++++++++---------------------- src/app/overview/page.tsx | 191 ++++++++++++++++++++++++ src/app/page.tsx | 2 +- tests/test-2.spec.ts | 26 +++- 5 files changed, 337 insertions(+), 325 deletions(-) delete mode 100644 src/app/invest/1/page.tsx create mode 100644 src/app/overview/page.tsx diff --git a/src/app/invest/1/page.tsx b/src/app/invest/1/page.tsx deleted file mode 100644 index a1a39a1..0000000 --- a/src/app/invest/1/page.tsx +++ /dev/null @@ -1,144 +0,0 @@ -"use client"; - -import { Separator } from "@/components/ui/separator"; -import { Input } from "@/components/ui/input"; -import { CardsPaymentMethod } from "@/components/paymentMethod"; -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; -import { Button } from "@/components/ui/button"; -import { useState } from "react"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, - DialogFooter, - DialogClose, -} from "@/components/ui/dialog"; -import { useRouter } from "next/navigation"; -import { toast } from "react-hot-toast"; - -const term_data = [ - { - term: "Minimum Investment", - description: "The minimum investment amount is $500.", - }, - { - term: "Investment Horizon", - description: "Investments are typically locked for a minimum of 12 months.", - }, - { - term: "Fees", - description: "A management fee of 2% will be applied annually.", - }, - { - term: "Returns", - description: "Expected annual returns are between 8% and 12%.", - }, - { - term: "Risk Disclosure", - description: "Investments carry risks, including the loss of principal.", - }, - { - term: "Withdrawal Policy", - description: "Withdrawals can be made after the lock-in period.", - }, -]; - -export default function Invest() { - const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false)); - const [error, setError] = useState(""); - const router = useRouter(); // Initialize the router - - const handleCheckboxChange = (index) => { - const updatedCheckedTerms = [...checkedTerms]; - updatedCheckedTerms[index] = !updatedCheckedTerms[index]; - setCheckedTerms(updatedCheckedTerms); - }; - - const handleTermServiceClick = () => { - if (checkedTerms.some((checked) => !checked)) { - setError("Please accept all terms before proceeding with the investment."); - } else { - setError(""); - handleInvestmentSuccess(); - } - }; - - const handleInvestmentSuccess = () => { - toast.success("You successfully invested!"); - - setTimeout(() => { - router.push("/"); - }, 1000); - }; - - return ( -
-

Invest on NVIDIA

- - -
-
-

Investment Amount

- -
- - -
-

Payment Information

- -
- - -
-

Terms and Services

- - - - Select - Term - Description - - - - {term_data.map((item, index) => ( - - - handleCheckboxChange(index)} /> - - {item.term} - {item.description} - - ))} - -
-
- - - - - - - - Are you absolutely sure? - This action cannot be undone. This will permanently! - - - - - - - - {error &&

{error}

} - - -
-
- ); -} diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 7df681b..80850fd 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -1,191 +1,144 @@ "use client"; -import React, { useState, useEffect } from "react"; -import Image from "next/image"; -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; -import { Card, CardContent } from "@/components/ui/card"; -import CountUp from "react-countup"; -import { Progress } from "@/components/ui/progress"; import { Separator } from "@/components/ui/separator"; +import { Input } from "@/components/ui/input"; +import { CardsPaymentMethod } from "@/components/paymentMethod"; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Button } from "@/components/ui/button"; -import { ShareIcon, StarIcon } from "lucide-react"; -import { Toaster, toast } from "react-hot-toast"; -import useSession from "@/lib/supabase/useSession"; -import { redirect } from "next/navigation"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; -import Link from "next/link"; +import { useState } from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, + DialogFooter, + DialogClose, +} from "@/components/ui/dialog"; +import { useRouter } from "next/navigation"; +import { toast } from "react-hot-toast"; + +const term_data = [ + { + term: "Minimum Investment", + description: "The minimum investment amount is $500.", + }, + { + term: "Investment Horizon", + description: "Investments are typically locked for a minimum of 12 months.", + }, + { + term: "Fees", + description: "A management fee of 2% will be applied annually.", + }, + { + term: "Returns", + description: "Expected annual returns are between 8% and 12%.", + }, + { + term: "Risk Disclosure", + description: "Investments carry risks, including the loss of principal.", + }, + { + term: "Withdrawal Policy", + description: "Withdrawals can be made after the lock-in period.", + }, +]; export default function Invest() { - const [progress, setProgress] = useState(0); - const [tab, setTab] = useState("Pitch"); - const { session, loading } = useSession(); - const user = session?.user; - const [sessionLoaded, setSessionLoaded] = useState(false); - const [isFollow, setIsFollow] = useState(false); + const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false)); + const [error, setError] = useState(""); + const router = useRouter(); // Initialize the router - useEffect(() => { - // set sessionLoaded to true once session is confirmed - if (!loading) { - setSessionLoaded(true); - } - }, [loading]); - const handleClick = (item: string) => { - setTab(item); + const handleCheckboxChange = (index: number) => { + const updatedCheckedTerms = [...checkedTerms]; + updatedCheckedTerms[index] = !updatedCheckedTerms[index]; + setCheckedTerms(updatedCheckedTerms); }; - const handleShare = () => { - const currentUrl = window.location.href; - if (document.hasFocus()) { - navigator.clipboard.writeText(currentUrl).then(() => { - toast.success("URL copied to clipboard!"); - }); - } - }; - const handleFollow = () => { - if (user) { - setIsFollow((prevState) => !prevState); - // save follow to database + const handleTermServiceClick = () => { + if (checkedTerms.some((checked) => !checked)) { + setError("Please accept all terms before proceeding with the investment."); } else { - redirect("/login"); + setError(""); + handleInvestmentSuccess(); } }; - useEffect(() => { - // percent success - const timer = setTimeout(() => setProgress(66), 500); - return () => clearTimeout(timer); - }, []); + + const handleInvestmentSuccess = () => { + toast.success("You successfully invested!"); + + setTimeout(() => { + router.push("/"); + }, 1000); + }; + return ( -
+
+

Invest on NVIDIA

+ +
- -
-
-
- {/* Name, star and share button packed */} -
-
- logo -
NVIDIA
-
-
-
- - - - - - -

Follow NIVIDIA

- - - -
-
- -
-
-
- {/* end of pack */} -

World's first non-metal sustainable battery

-
- {["Technology", "Gaming"].map((tag) => ( - - {tag} - - ))} -
-
- {/* image carousel */} -
- - - {Array.from({ length: 5 }).map((_, index) => ( - - - - ))} - {" "} - - - - - - {/* boiler plate for an actual pictures */} - - - - - - - - - - - - - - - - - -
-
-
-

- -

-

5% raised of $5M max goal

- -

- {" "} - -

-

Investors

-
- -

- hours -

-

Left to invest

- -
-
+
+

Investment Amount

+
-
- {/* menu */} - -
- {/* Card section */} -
- {/* Cards */} - - - - {tab} - - - + + +
+

Payment Information

+ +
+ + +
+

Terms and Services

+ + + + Select + Term + Description + + + + {term_data.map((item, index) => ( + + + handleCheckboxChange(index)} /> + + {item.term} + {item.description} + + ))} + +
+
+ + + + + + + + Are you absolutely sure? + This action cannot be undone. This will permanently! + + + + + + + + {error &&

{error}

} + +
); -} +} \ No newline at end of file diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx new file mode 100644 index 0000000..f34d3cc --- /dev/null +++ b/src/app/overview/page.tsx @@ -0,0 +1,191 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import Image from "next/image"; +import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +import { Card, CardContent } from "@/components/ui/card"; +import CountUp from "react-countup"; +import { Progress } from "@/components/ui/progress"; +import { Separator } from "@/components/ui/separator"; +import { Button } from "@/components/ui/button"; +import { ShareIcon, StarIcon } from "lucide-react"; +import { Toaster, toast } from "react-hot-toast"; +import useSession from "@/lib/supabase/useSession"; +import { redirect } from "next/navigation"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import Link from "next/link"; + +export default function Invest() { + const [progress, setProgress] = useState(0); + const [tab, setTab] = useState("Pitch"); + const { session, loading } = useSession(); + const user = session?.user; + const [sessionLoaded, setSessionLoaded] = useState(false); + const [isFollow, setIsFollow] = useState(false); + + useEffect(() => { + // set sessionLoaded to true once session is confirmed + if (!loading) { + setSessionLoaded(true); + } + }, [loading]); + const handleClick = (item: string) => { + setTab(item); + }; + + const handleShare = () => { + const currentUrl = window.location.href; + if (document.hasFocus()) { + navigator.clipboard.writeText(currentUrl).then(() => { + toast.success("URL copied to clipboard!"); + }); + } + }; + const handleFollow = () => { + if (user) { + setIsFollow((prevState) => !prevState); + // save follow to database + } else { + redirect("/login"); + } + }; + useEffect(() => { + // percent success + const timer = setTimeout(() => setProgress(66), 500); + return () => clearTimeout(timer); + }, []); + return ( +
+
+ +
+
+
+ {/* Name, star and share button packed */} +
+
+ logo +
NVIDIA
+
+
+
+ + + + + + +

Follow NIVIDIA

+ + + +
+
+ +
+
+
+ {/* end of pack */} +

World's first non-metal sustainable battery

+
+ {["Technology", "Gaming"].map((tag) => ( + + {tag} + + ))} +
+
+ {/* image carousel */} +
+ + + {Array.from({ length: 5 }).map((_, index) => ( + + + + ))} + {" "} + + + + + + {/* boiler plate for an actual pictures */} + + + + + + + + + + + + + + + + + +
+
+
+

+ +

+

5% raised of $5M max goal

+ +

+ {" "} + +

+

Investors

+
+ +

+ hours +

+

Left to invest

+ +
+
+
+
+ {/* menu */} + +
+ {/* Card section */} +
+ {/* Cards */} + + + + {tab} + + + +
+
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 8650999..e370b63 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -78,7 +78,7 @@ export default function Home() {

The deals attracting the most interest right now

- + { await page.goto('http://127.0.0.1:3000/'); + + // Start Investing await page.getByRole('button', { name: 'Start Investing' }).click(); + // Filter by AI tag await page.locator('button').filter({ hasText: 'Tags' }).click(); await page.getByLabel('AI', { exact: true }).click(); - await page.locator('span#tag', { hasText: 'AI' }); + const aiTag = page.locator('span#tag', { hasText: 'AI' }); + await expect(aiTag).toBeVisible(); + // Filter by Technology tag await page.locator('button').filter({ hasText: 'AI' }).click(); await page.getByLabel('Technology').click(); - await page.locator('span#tag', { hasText: 'Technology' }); + const techTag = page.locator('span#tag', { hasText: 'Technology' }); + await expect(techTag).toBeVisible(); + // Filter by Consumer Electronics tag await page.locator('button').filter({ hasText: 'Technology' }).click(); - await page.getByText('Consumer Electronics').click(); - await page.locator('span#tag', { hasText: 'Consumer Electronics' }); + await page.getByLabel('Consumer Electronics').click(); + const consumerElectronicsTag = page.locator('span#tag', { hasText: 'Consumer Electronics' }); + await expect(consumerElectronicsTag).toBeVisible(); + // Filter by Software tag await page.locator('button').filter({ hasText: 'Consumer Electronics' }).click(); await page.getByLabel('Software').click(); - await page.locator('span#tag', { hasText: 'Software' }); + const softwareTag = page.locator('span#tag', { hasText: 'Software' }); + await expect(softwareTag).toBeVisible(); + // Filter by Internet tag await page.locator('button').filter({ hasText: 'Software' }).click(); await page.getByLabel('Internet').click(); - await page.locator('span#tag', { hasText: 'Internet' }); -}); \ No newline at end of file + const internetTag = page.locator('span#tag', { hasText: 'Internet' }); + await expect(internetTag).toBeVisible(); +}); From faab0b0fd542e35fa4222cb18e010dbb4d1cdd3f Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Fri, 4 Oct 2024 20:10:51 +0700 Subject: [PATCH 2/8] Update component and pages to responsive --- src/app/invest/page.tsx | 12 ++--- src/app/overview/page.tsx | 2 +- src/components/paymentMethod.tsx | 79 ++++++++++++++++++++++++-------- 3 files changed, 67 insertions(+), 26 deletions(-) diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 80850fd..97ca4b3 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -75,24 +75,24 @@ export default function Invest() { }; return ( -
-

Invest on NVIDIA

+
+

Invest on NVIDIA

-

Investment Amount

+

Investment Amount

-
-

Payment Information

+
+

Payment Information

-
+

Terms and Services

diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx index f34d3cc..cd07319 100644 --- a/src/app/overview/page.tsx +++ b/src/app/overview/page.tsx @@ -148,7 +148,7 @@ export default function Invest() {

Left to invest

diff --git a/src/components/paymentMethod.tsx b/src/components/paymentMethod.tsx index 36eccc6..634b5b6 100644 --- a/src/components/paymentMethod.tsx +++ b/src/components/paymentMethod.tsx @@ -2,26 +2,47 @@ import { Icons } from "./ui/icons"; import { Button } from "./ui/button"; -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "./ui/card"; import { Input } from "./ui/input"; import { Label } from "./ui/label"; import { RadioGroup, RadioGroupItem } from "./ui/radio-group"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "./ui/select"; export function CardsPaymentMethod() { return ( - + - Payment Method - Add a new payment method to your account. + Payment Method + + Add a new payment method to your account. + - -
- + +
+
-
- +
+
-
- +
+
-
- - + +
+
+ + +
+
+ + +
From 77055190816757df91024dc1f56b29587cb5ca93 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Fri, 4 Oct 2024 20:18:23 +0700 Subject: [PATCH 3/8] Refactor component and page structure for responsiveness --- src/app/invest/page.tsx | 35 ++++++++++++++++++++++++-------- src/components/paymentMethod.tsx | 2 +- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 97ca4b3..e7b47ff 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -3,7 +3,14 @@ import { Separator } from "@/components/ui/separator"; import { Input } from "@/components/ui/input"; import { CardsPaymentMethod } from "@/components/paymentMethod"; -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; import { Button } from "@/components/ui/button"; import { useState } from "react"; import { @@ -47,7 +54,9 @@ const term_data = [ ]; export default function Invest() { - const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false)); + const [checkedTerms, setCheckedTerms] = useState( + Array(term_data.length).fill(false) + ); const [error, setError] = useState(""); const router = useRouter(); // Initialize the router @@ -59,7 +68,9 @@ export default function Invest() { const handleTermServiceClick = () => { if (checkedTerms.some((checked) => !checked)) { - setError("Please accept all terms before proceeding with the investment."); + setError( + "Please accept all terms before proceeding with the investment." + ); } else { setError(""); handleInvestmentSuccess(); @@ -88,7 +99,7 @@ export default function Invest() {

Payment Information

- +
@@ -106,7 +117,11 @@ export default function Invest() { {term_data.map((item, index) => ( - handleCheckboxChange(index)} /> + handleCheckboxChange(index)} + /> {item.term} {item.description} @@ -123,7 +138,9 @@ export default function Invest() { Are you absolutely sure? - This action cannot be undone. This will permanently! + + This action cannot be undone. This will permanently! + - {error &&

{error}

} + {error && ( +

{error}

+ )}
); -} \ No newline at end of file +} diff --git a/src/components/paymentMethod.tsx b/src/components/paymentMethod.tsx index 634b5b6..859de89 100644 --- a/src/components/paymentMethod.tsx +++ b/src/components/paymentMethod.tsx @@ -23,7 +23,7 @@ import { export function CardsPaymentMethod() { return ( - + Payment Method From 56b2188590831dff5a48f63419005b83e2935ecf Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Fri, 4 Oct 2024 20:20:16 +0700 Subject: [PATCH 4/8] Refactor component and page structure for responsiveness --- src/components/paymentMethod.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/paymentMethod.tsx b/src/components/paymentMethod.tsx index 859de89..16b294e 100644 --- a/src/components/paymentMethod.tsx +++ b/src/components/paymentMethod.tsx @@ -32,7 +32,7 @@ export function CardsPaymentMethod() { -
+
-
+
-
+
Date: Fri, 4 Oct 2024 20:25:32 +0700 Subject: [PATCH 5/8] Refactor component and page structure for responsiveness --- src/app/invest/page.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index e7b47ff..9f72caa 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -93,13 +93,18 @@ export default function Invest() {

Investment Amount

- +

Payment Information

- +
From 0b7a9736438ec12eec7c1a78a60844a2d80c2a34 Mon Sep 17 00:00:00 2001 From: sirin Date: Sat, 5 Oct 2024 03:59:17 +0700 Subject: [PATCH 6/8] fix: make extendableCard and deals page more responsive --- src/app/deals/page.tsx | 2 +- src/components/extendableCard.tsx | 76 ++++++++++++++----------------- 2 files changed, 34 insertions(+), 44 deletions(-) diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index 85a375b..ff09810 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -104,7 +104,7 @@ export default function Deals() {

The deals attracting the most interest right now

{/* block for all the deals */} -
+
{filteredData.map((item, index) => ( -
- Card image -
-
-
- {props.name} +
+ {/* Image */} +
+ + {/* Info 0 overlaps Image */} +
+
+ {props.name} +
+

{props.description}

- - {/* Default content (visible when not hovered) */} -
+
+ {/* Info 1 (Hidden on hover) */} +
+
Joined {props.joinDate}
-
+
{props.location}
-
+
{props.tags.map((tag) => ( ))}
- - {/* Hover content (appears when hovered) */} -
-

{props.description}

-
-
-
-
-

- ${props.totalRaised.toLocaleString()} committed and reserved -

-
-

- {props.totalInvestor.toLocaleString()} investors -

-
-

- ${props.minInvestment.toLocaleString()} min. investment -

-
-
-
-
+
+ {/* Info 2 (Visible on hover) */} +
+
+

+ ${props.totalRaised.toLocaleString()} committed and reserved +

+
+

+ {props.totalInvestor.toLocaleString()} investors +

+
+

+ ${props.minInvestment.toLocaleString()} min. investment +

); From e4c3275102a75145ffa9e387f724ed0d15ce7857 Mon Sep 17 00:00:00 2001 From: sirin Date: Sat, 5 Oct 2024 14:30:10 +0700 Subject: [PATCH 7/8] style: make business cards + index and deals page more responsive --- src/app/deals/page.tsx | 30 ++-- src/app/page.tsx | 231 +++++++++++++++--------------- src/components/extendableCard.tsx | 121 ++++++++++------ 3 files changed, 211 insertions(+), 171 deletions(-) diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index ff09810..6aff49f 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -18,6 +18,7 @@ export default function Deals() { joinDate: "December 2021", location: "Bangkok, Thailand", tags: ["AI", "Technology"], + imageUri: "/login.png", minInvestment: 10000, totalInvestor: 58400, totalRaised: 9000000, @@ -29,6 +30,7 @@ export default function Deals() { joinDate: "February 2020", location: "Cupertino, California, USA", tags: ["Consumer Electronics", "Software"], + imageUri: "/money.png", minInvestment: 10000, totalInvestor: 58400, totalRaised: 9000000, @@ -40,6 +42,7 @@ export default function Deals() { joinDate: "April 2019", location: "Mountain View, California, USA", tags: ["Internet", "Search Engine"], + imageUri: "/money.png", minInvestment: 10000, totalInvestor: 5000, totalRaised: 1500000000, @@ -50,6 +53,7 @@ export default function Deals() { joinDate: "January 2018", location: "California, USA", tags: ["Technology", "Software"], + imageUri: null, minInvestment: 250, totalInvestor: 5000, totalRaised: 1500000, @@ -59,18 +63,19 @@ export default function Deals() { const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data; return ( -
-
+
+

Investment Opportunities


Browse current investment opportunities on B2DVenture.

All companies are vetted & pass due diligence.

- {/* filters */} -
+ + {/* Filters */} +
+ +
+
+ {/* Logo or Brand */} +
+
B2DVentures
+
+ + {/* Navigation Links */} +
+ + Home + + + About Us + + + Services + + + Contact + +
+ {/* Copyright */} +
+ © {new Date().getFullYear()} B2DVentures. All rights reserved. +
+
+
+ + ); +}