Skip to content

Commit

Permalink
Merge pull request #6 from SuperViz/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
carlossantos74 authored Aug 23, 2024
2 parents bf6812b + 18ed200 commit dccec01
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 42 deletions.
Binary file removed public/blob-para-qrcode.png
Binary file not shown.
Binary file added public/fender-lego-tv.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions src/app/api/webhooks/newsletter/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { NextRequest, NextResponse } from "next/server";
import { db } from '@/lib/prisma'
import { ActivationType } from "@/global/global.types";

export async function POST(request: NextRequest): Promise<NextResponse> {
try {
const body = await request.text()
const parsed = JSON.parse(body)

const field = parsed.form_response.definition.fields.find((field: any) => field.type === 'email')
const anwser = parsed.form_response.answers.find((anwser: any) => anwser.field.ref === field.ref)

if(!anwser.email) {
return NextResponse.json({}, { status: 400 })
}

const user = await db.user.findFirst({
where: {
email: anwser.email
}
})

if(!user) {
return NextResponse.json({message: 'User Doesn\'t exists '}, { status: 404 })
}

const activation = await db.activation.findFirst({
where: {
name: ActivationType.NEWSLETTER,
userId: user.id
}
})

if(!activation) {
return NextResponse.json({message: 'Activation Doesn\'t exists '}, { status: 404 })
}

await db.activation.update({
data: {
completed: true
},
where: {
id: activation.id
}
})

return NextResponse.json({ message: 'Success' }, { status: 200 })
} catch (error) {
console.log(error)

return NextResponse.json({}, {
status: 500,
statusText: 'Internal Server Error'
})
}
}
42 changes: 23 additions & 19 deletions src/app/dashboard/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React from 'react';
import Image from "next/image";
import fenderImg from '../../../public/fender-lego.png'
import fenderImg from '../../../public/fender-lego-tv.png'
import qrcode from '../../../public/qrcode_events.superviz.com.png'
import Activations from "@/components/Activations";
import OnlineNow from "@/components/OnlineNow";
Expand All @@ -13,45 +13,49 @@ export default function Dashboard() {


return (
<div className='grid grid-cols-12 gap-14 w-full h-screen px-12 py-10'>
<div className="col-start-1 col-span-4 relative flex flex-col justify-between z-10">
<div className='grid grid-cols-12 gap-14 w-full h-screen px-12 py-10 tv:px-[9.625rem] tv:py-[5.625rem]'>
<div className="col-start-1 col-span-4 flex flex-col justify-between z-10">
<div>
<Image src="/logo-sm.svg" width={109} height={80} alt="Logo Superviz"/>
<h1 className="mt-6 text-7xl font-black">
Ganhe um LEGO<span className="text-3xl align-top">® </span>
da Fender<span className="text-3xl align-top">®</span>
<Image src="/logo-sm.svg" width={109} height={80} alt="Logo Superviz" className="tv:w-[13.5rem] object-contain"/>
<h1 className="mt-6 text-7xl font-black tv:text-[9.5rem] tv:leading-[10.5rem]">
Ganhe um LEGO<span className="text-3xl tv:text-[5rem] align-top">® </span>
da Fender<span className="text-3xl tv:text-[5rem] align-top">®</span>
</h1>
</div>
<div className="text-3xl mr-16 mb-10">
<div className="text-3xl tv:text-[4rem] tv:leading-[5.5rem] mb-10">
<p>Participe de qualquer ativação e ganhe pontos para concorrer.</p>
<p className="font-black">Quanto mais ativações, mais chances de ganhar.</p>
<p className="mt-5">🕹️ Boa sorte!</p>
</div>
</div>
<Image src={fenderImg} alt="Imagem de um Lego da Fender" className="z-0 absolute top-0 left-0" />
<div className="col-start-5 col-span-12 bg-[#C9C4D114] rounded-[40px] p-10 flex flex-col">
<Image src={fenderImg} alt="Imagem de um Lego da Fender" className="z-0 absolute top-0 left-0 max-w-[27vw] object-contain" />
<div className="col-start-5 col-span-12 bg-[#C9C4D114] rounded-[40px] p-10 flex flex-col tv:px-[4rem] tv:py-[5.375rem]">
<div className="flex justify-between">
<div>
<p className="font-black text-4xl">Veja quem já garantiu pontos e está concorrendo</p>
<p className="text-2xl mt-1.5">Aponte a câmera para o QR code pra participar</p>
<p className="font-black text-4xl tv:text-[5rem] tv:leading-[8.10rem]">Veja quem já garantiu pontos e está concorrendo</p>
<p className="text-2xl mt-1.5 tv:text-[3rem] tv:leading-[4.05rem]">Aponte a câmera para o QR code pra participar</p>
</div>
<div>
<Image src={qrcode} width={107} height={107} alt="QR Code para ativação"/>
</div>
</div>
<div className="grid grid-cols-12 gap-9 mt-9 grow">
<Activations activations={activations} />
<UsersDashboard users={users} />
<div className="col-start-1 col-span-4">
<Activations activations={activations} />
</div>
<div className="col-start-5 col-span-12">
<UsersDashboard users={users} />
</div>
</div>
<div className="flex justify-between mt-9">
<div className="flex items-center">
<span>Online agora:</span>
<div className="flex items-center tv:text-[2.12rem] tv:leading-[2.5rem]">
<span className="tv:text-[2.12rem] tv:leading-[2.5rem]">Online agora:</span>
<OnlineNow users={users.filter(user => user.isOnline)} />
</div>
<div className="flex gap-3 items-center">
<Image src="/sync-logo.svg" width={25} height={20} alt="ícone de sincronização"/>
<span>Sincronização de dados por </span>
<Image src="/logo-md.svg" width={80} height={15} alt="Superviz"/>
<Image src="/sync-logo.svg" width={25} height={20} alt="ícone de sincronização" className="tv:w-[3.125rem] object-contain"/>
<span className="tv:text-[2.12rem] tv:leading-[2.5rem]">Sincronização de dados por </span>
<Image src="/logo-md.svg" width={80} height={15} alt="Superviz" className="tv:w-[9.7rem] object-contain"/>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ html, body {
@layer components {
.activations {
.pinpoint{
width: 40px;
height: 40px;
width: 70px;
height: 70px;
position: relative;

.content{
Expand All @@ -39,7 +39,7 @@ html, body {
.circle{
stroke-dashoffset: 0;
stroke-dasharray:300;
stroke-width: 3.5;
stroke-width: 7;
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/components/Activations/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ interface IActivationsProps {
export default function Activations({ activations }: IActivationsProps) {
function Activation({activation}: { activation: IActivation }) {
return (
<div className="mt-6 flex align-center" key={activation.activationWord}>
<div className="mt-6 tv:mt-[3.125rem] flex items-center" key={activation.activationWord}>
<Circle color={activation.color} />
<span className="text-2xl font-black">
<span className="text-2xl tv:text-[3rem] tv:leading-[4rem] font-black">
{`${activation.description} `}
<ActivationWord text={activation.activationWord} color={activation.color}/>
{activation.subtext && <ActivationSubtext subtext={activation.subtext} color={activation.color} /> }
Expand All @@ -21,12 +21,12 @@ export default function Activations({ activations }: IActivationsProps) {

function Circle({ color }: { color: string}) {
return (
<span className="mr-3 activations">
<span className="mr-3 tv:mr-[1.625rem] activations">
<div className="pinpoint">
<div className="content"></div>
<div className="pinpoint-ring">
<svg viewBox="0 0 36 36">
<circle className="circle" r="16" cx="18" cy="18" fill="#ffffff1a" stroke={`#${color}`}></circle>
<svg viewBox="0 0 78 78">
<circle className="circle" r="33" cx="39" cy="39" fill="#ffffff1a" stroke={`#${color}`}></circle>
</svg>
</div>
</div>
Expand All @@ -38,7 +38,7 @@ export default function Activations({ activations }: IActivationsProps) {
return (
<>
<br/>
<span className="text-lg">{`${subtext.description} `}
<span className="text-lg tv:text-[2.25rem] tv:leading-[2.65rem]">{`${subtext.description} `}
<ActivationWord text={subtext.activationWord} color={color} />
</span>
</>
Expand All @@ -52,8 +52,8 @@ export default function Activations({ activations }: IActivationsProps) {
}

return (
<div className="col-start-1 col-span-4 p-8 bg-[#7e7a88]/10 rounded-2xl h-fit">
<p className="text-xl">Ativações</p>
<div className="p-8 bg-[#7e7a88]/10 rounded-2xl h-fit tv:p-[4rem]">
<p className="text-xl tv:text-[2.75rem] tv:leading-[3.2rem]">Ativações</p>
{activations.map((act) => (
<Activation key={act.color} activation={act} />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/OnlineNow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function OnlineNow({ users }: IOnlineNowProps) {
function OtherUsers() {
return (
<div
className="ml-3 bg-white/40 h-9 w-9 rounded-full text-white text-lg font-black flex items-center justify-center">
className="ml-3 bg-white/40 h-9 w-9 tv:h-[4.5rem] tv:w-[4.5rem] rounded-full text-white text-lg font-black flex items-center justify-center">
<span className="bg-white h-1 w-1 rounded-full"></span>
<span className="ml-1 bg-white h-1 w-1 rounded-full"></span>
<span className="ml-1 bg-white h-1 w-1 rounded-full"></span>
Expand Down
18 changes: 9 additions & 9 deletions src/components/User/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface IUserProps {
export default function User({ user, withActivations, withUsername, withStar = false }: IUserProps) {
const firstLetter = user.name.at(0) ?? 'U'
const activationsNumber = user.activations.length
const usernameMargin = 8 - (4 - activationsNumber) * 7
const usernameMargin = 8 - (4 - activationsNumber) * 15
const userHasStar = activationsNumber === Object.keys(ActivationEnum).length && user.activations.every(activation => activation.isCompleted)

if (!withActivations) {
Expand All @@ -28,30 +28,30 @@ export default function User({ user, withActivations, withUsername, withStar = f
return (
<div className={`${user.isOnline ? '' : 'opacity-20'} flex flex-col items-center justify-center`}>
{userHasStar && withStar && <p className="mb-1">⭐️</p>}
<div className="relative h-24 w-24">
<div className="relative h-52 w-52">
<div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
<UserBase letter={firstLetter.toUpperCase()}/>
</div>
<UserActivations user={user} />
</div>
{withUsername && <p style={{ marginTop: `${usernameMargin}px`}}>{user.name}</p>}
{withUsername && <p style={{ marginTop: `${usernameMargin}px`}} className="text-2xl">{user.name}</p>}
</div>
)
}

function UserBase({letter}: { letter: string }) {
return (
<div
className="bg-white h-8 w-8 rounded-full flex items-center justify-center">
<span className="text-[#26242A] text-lg font-black">{letter}</span>
className="bg-white h-[4.5rem] w-[4.5rem] rounded-full flex items-center justify-center">
<span className="text-[#26242A] text-lg tv:text-[2.25rem] font-black">{letter}</span>
</div>
)
}

function UserActivations({ user }: { user: IUser}) {
return (
<div className="flex items-center justify-center">
<svg viewBox={`0 0 90 90`}>
<svg viewBox={`0 0 200 200`}>
{Object.keys(ActivationEnum).map((activation) => (
<defs key={activation}>
<linearGradient id={`gradientRing-${ActivationEnum[activation as keyof typeof ActivationEnum]}`} x1="0%" y1="0%" x2="100%" y2="100%">
Expand All @@ -61,7 +61,7 @@ function UserActivations({ user }: { user: IUser}) {
</defs>
))}
{user.activations.map((activation, index) => {
const radius = 21 + index * 7
const radius = 45 + index * 15
return (
<ActivationsRings key={index} activation={activation} radius={radius} username={user.name} />
)
Expand All @@ -73,7 +73,7 @@ function UserActivations({ user }: { user: IUser}) {

function ActivationsRings({username, activation, radius}: {username: string, activation: IUserActivation, radius: number}) {
return (
<circle key={`${username}-${activation.color}`} className={activation.isCompleted ? '' : 'spin'} cx="45" cy="45" r={radius} fill="none"
stroke={`${activation.isCompleted ? `#${activation.color}` : `url(#gradientRing-${activation.color})`}`} strokeWidth="5"/>
<circle key={`${username}-${activation.color}`} className={activation.isCompleted ? '' : 'spin'} cx="100" cy="100" r={radius} fill="none"
stroke={`${activation.isCompleted ? `#${activation.color}` : `url(#gradientRing-${activation.color})`}`} strokeWidth="11"/>
)
}
4 changes: 2 additions & 2 deletions src/components/UsersDashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function UsersDashboard({ users }: IUsersDashboardProps) {
const containerWidth = containerRef.current!.clientWidth;
const containerHeight = containerRef.current!.clientHeight;

const size = 16 + user.activations.length * 9.5;
const size = 36 + user.activations.length * 15;
const ball = Matter.Bodies.circle(
(Math.random() * (containerWidth - BALL_MARGIN)) + (BALL_MARGIN / 2),
(Math.random() * (containerHeight - BALL_MARGIN)) + (BALL_MARGIN / 2),
Expand Down Expand Up @@ -150,7 +150,7 @@ export default function UsersDashboard({ users }: IUsersDashboardProps) {
}, []);

return (
<div ref={containerRef} className="col-start-5 col-span-12 relative overflow-hidden w-full">
<div ref={containerRef} className="relative overflow-hidden w-full h-full">
{balls.map((ball) => (
<div
key={ball.id}
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ const config: Config = {
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
screens: {
'tv': '3200px',
}
},
plugins: [],
};
Expand Down

0 comments on commit dccec01

Please sign in to comment.