Merge pull request #5 from MyriadFlow/ui

update is working in phygitals

src/app/collection-congratulation/page.tsx

@@ -1,36 +1,84 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
 import { Button, Navbar } from '@/components'
 import Link from 'next/link'
-import { Suspense } from 'react'
+import { Suspense, useState } from 'react'
+import { toast, ToastContainer } from 'react-toastify'
 
 export default function Congratulations() {
-	const searchParams = useSearchParams()
+	const [showForm, setShowForm] = useState(false)
+	const [productURL, setProductURL] = useState('')
+	const [error, setError] = useState('')
 
-	const brand_name = searchParams.get('brand_name')
+	const handleSubmit = async () => {
+		if (!productURL) {
+			setError('Product URL is required.')
+			toast.warning('Product URL is required.')
+			return
+		}
+
+
+		// try {
+		// 	const response = await fetch(url, {
+		// 		method: 'POST',
+		// 		headers: headers,
+		// 		body: JSON.stringify(),
+		// 	})
+
+		// 	if (!response.ok) {
+		// 		throw new Error('Network response was not ok')
+		// 	}
+
+		// 	const data = await response.json()
+
+
+		// } catch (error) {
+		// 	console.error('Error:', error)
+		// }
+	}
 
 	return (
 		<Suspense>
 			<Navbar />
+			<ToastContainer />
 			<main className='h-screen py-12 px-16 flex flex-col gap-8 text-black'>
 				<h1 className='text-3xl font-bold'>Congratulations</h1>
 				<p>Your Collection has been launched successfully.</p>
 				<div className='py-6 '>
-					<p className='text-2xl'>Your brand doesn’t have any phygitals. </p>
+					<p className='text-2xl'>Your brand doesn’t have any phygitals. </p>
 				</div>
 				<Link href='/create-phygital'>
 					<Button className='w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl'>
 						Create phygital
 					</Button>
 				</Link>
-				{/* <Link href='/create-phygital'>
-					<Button className='w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl'>
-						Create Collection
-					</Button>
-				</Link> */}
-				<Button className='w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl'>
+				<Button
+					className='w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl'
+					onClick={() => setShowForm(true)}
+				>
 					I’m already selling the product on Shopify
 				</Button>
+				{showForm && (
+					<div className='mt-6'>
+						<div className='flex flex-col gap-4'>
+							<label>
+								Product URL*
+								<input
+									type='text'
+									className='border rounded px-2 py-1'
+									value={productURL}
+									onChange={(e) => setProductURL(e.target.value)}
+									required
+								/>
+							</label>
+							<Button
+								className='w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl mt-4'
+								onClick={handleSubmit}
+							>
+								Save
+							</Button>
+						</div>
+					</div>
+				)}
 			</main>
 		</Suspense>
 	)

src/app/create-phygital-detail/page.tsx

@@ -93,13 +93,12 @@ export default function CreatePhygitalDetail() {
 
 			const phygitalId = localStorage.getItem("PhygitalId");
 			const CollectionId = localStorage.getItem("CollectionId")
-			const phygitalResponse = await fetch(`${apiUrl}/phygitals`, {
-				method: 'POST',
+			const phygitalResponse = await fetch(`${apiUrl}/phygitals/${phygitalId}`, {
+				method: 'PUT',
 				headers: {
 					'Content-Type': 'application/json',
 				},
 				body: JSON.stringify({
-					id: phygitalId,
 					collection_id:CollectionId,
 					color: values.color,
 					size: values.size,

src/app/nfts/[id]/page.tsx

@@ -20,10 +20,10 @@ const NFTPage = ({ params}: any) => {
 
     const getCollection = async () => {
 
-        const response = await fetch(`${apiUrl}/collections${id}`)
+        const response = await fetch(`${apiUrl}/collections/brand-id/${id}`)
 
         const result: Collection[] = await response.json();
-        console.log(response);
+        console.log(result);
         setCollections(result)
     }
 
@@ -37,7 +37,7 @@ const NFTPage = ({ params}: any) => {
                 <Navbar />
                 <h1 className="text-5xl text-center mt-10">Your Collections</h1>
                 <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6'>
-                    {collections.map((collection) => (
+                    {collections?.map((collection) => (
                         <a key={collection.id} href={`/nfts/${collection.id}`}>
                             <div className='shadow-lg rounded-lg p-6'>
                                 <img

src/app/page.tsx

@@ -10,7 +10,7 @@ import Footer from '@/components/footer'
 interface Brand {
   id: string; // UUID type
   logo_image: string;
-  brand_name: string;
+  name: string;
   description: string;
 }
 
@@ -96,17 +96,17 @@ export default function Home() {
             )}
             <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6'>
               {brands.map((brand) => (
-                <a key={brand.id} href={`/nfts/${brand.id}`}>
-                  <div className='shadow-lg rounded-lg p-6'>
+                // <a key={brand.id} href={`/nfts/${brand.id}`}>
+                  <div className='shadow-lg rounded-lg p-6' key={brand.id}>
                     <img
                       src={`https://nftstorage.link/${brand.logo_image.replace('ipfs://', 'ipfs/')}`}
-                      alt={brand.brand_name}
+                      alt={brand.name}
                       className='mb-4'
                     />
-                    <h3 className='text-xl font-bold'>{brand.brand_name}</h3>
+                    <h3 className='text-xl font-bold'>{brand.name}</h3>
                     <p className='text-gray-700'>{brand.description}</p>
                   </div>
-                </a>
+                // </a>
               ))}
             </div>
           </div>