Merge pull request #1 from SuperViz/develop

Develop

.env.example

@@ -0,0 +1 @@
+DATABASE_URL=

.gitignore

@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+/.idea
 
 # debug
 npm-debug.log*
@@ -34,3 +35,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env

docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  postgres:
+    image: postgres:latest
+    environment:
+      POSTGRES_DB: activation-app
+      POSTGRES_USER: superviz
+      POSTGRES_PASSWORD: uyg@xvp5WGD8wvd7pea
+    ports:
+      - "5432:5432"

package.json

@@ -4,15 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "prisma generate && next build",
     "start": "next start",
+    "database:migrate": "prisma db push",
+    "database:generate": "prisma generate",
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^5.18.0",
     "matter-js": "^0.20.0",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/matter-js": "^0.19.7",
@@ -22,8 +26,12 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
+    "prisma": "^5.18.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  }, 
+  },
+  "prisma": {
+    "schema": "src/prisma/schema.prisma"
+  },
   "packageManager": "[email protected]"
 }

src/app/activations/enter/page.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import Button from "@/components/Button";
+import React from "react";
+import Input from "@/components/Input";
+import {useRouter} from "next/navigation";
+
+export default function Enter() {
+  const [ step, setStep ] = React.useState<number>(0)
+  const router = useRouter()
+  const questions = [
+    {
+      id: 'email',
+      type: 'email',
+      question: 'Qual seu email?',
+    },
+    {
+      id: 'name',
+      type: 'text',
+      question: 'Qual seu nome completo?',
+    },
+  ]
+
+  const initialValues = questions.reduce((prev, question) => {
+    return {
+      ...prev,
+      [question.id]: '',
+    }
+  }, {})
+
+  const [ formData, setFormData ] = React.useState<Record<string, string>>(initialValues)
+
+  const handleChangeInput = (event: React.ChangeEvent<HTMLInputElement> ) => {
+    const fieldName = event.target.getAttribute('id') as string
+    const value = event.target.value
+    setFormData({
+      ...formData,
+      [fieldName]: value
+    })
+  }
+
+  const handleNext = () => {
+    setStep((prevStep) => prevStep + 1)
+  }
+
+  const handleSubmit = () => {
+    console.log(formData)
+    router.push('/activations')
+  }
+
+  return (
+    <>
+      <div className="w-full h-full relative overflow-hidden">
+      {questions.map((question, index) => {
+        return (
+          <div 
+            key={question.id} 
+            className={`absolute bottom-[40%] left-0 w-full transition-all duration-700 ease-in-out transform ${step === index ? 
+              'translate-x-0 opacity-100' : 
+              index < step ?
+              '-translate-x-full opacity-0 pointer-events-none' :
+              'translate-x-full opacity-0 pointer-events-none'
+            }`}
+          >
+            <Input
+              label={question.question}
+              id={question.id}
+              onChange={handleChangeInput}
+              value={formData[question.id] as string}
+              type={question.type}
+            />
+          </div>
+        )
+      })}
+      </div>
+      {step < (questions.length - 1) ? (
+        <Button text="Próximo" onClick={handleNext} type="button" />
+        ) : (
+        <Button text="Começar" onClick={handleSubmit} type="button"/>  
+      )}
+
+    </>
+  )
+}

src/app/activations/layout.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import Image from "next/image";
+
+export default function ActivationsLayout({
+ children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className='flex flex-col w-full h-screen px-8 py-6'>
+      <div className="relative flex flex-col justify-between items-center z-10 h-full">
+        <Image src="/logo-sm.svg" width={109} height={80} alt="Logo Superviz"/>
+        {children}
+      </div>
+    </div>
+  )
+}

src/app/activations/page.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import Button from "@/components/Button";
+import fenderImg from "../../../public/fender-lego.png";
+import React from "react";
+import {activations, users} from "@/data/activationsData";
+import CardLink from "@/components/CardLink";
+import User from "@/components/User";
+
+export default function Activations() {
+
+
+  return (
+    <>
+      <div className="my-5 pb-5 w-screen border-b border-[#ffffff1a]">
+        <User user={users[0]} withActivations={true} withUsername={true} withStar={false} />
+      </div>
+      <p className="w-full text-center font-normal text-lg">Escolha uma ativação para participar</p>
+      {activations.map(activation => (
+        <div key={activation.color} className="w-full">
+          <CardLink activation={activation} />
+        </div>
+      ))}
+    </>
+  )
+}

src/app/api/user/activation/dto/create-activation.dto.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+import { ActivationType } from '@/global/global.types'
+
+export const CreateActivationDTO = z.object({
+  name: z.nativeEnum(ActivationType),
+  userEmail: z.string().email()
+})