Skip to content

Commit 5182a46

Browse files
caropi30Felipe Torres (fforres)
caropi30
and
Felipe Torres (fforres)
authored
Tickets Landing (#44)
Co-authored-by: Felipe Torres (fforres) <[email protected]>
1 parent cd14e40 commit 5182a46

37 files changed

+12559
-30092
lines changed

‎graphql.schema.json

+1,328
Large diffs are not rendered by default.

‎package-lock.json

-30,057
This file was deleted.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@
3636
"react-dom": "^18.2.0",
3737
"react-hook-form": "^7.32.0",
3838
"react-portal": "^4.2.2",
39+
"react-qr-code": "^2.0.8",
3940
"react-spinners": "^0.13.4",
4041
"react-tsparticles": "^2.1.3",
4142
"react-use": "^17.4.0",
43+
"ts-essentials": "^9.3.0",
4244
"tsparticles": "^2.1.3",
4345
"tsparticles-engine": "^2.1.3",
4446
"urql": "^2.2.0"

‎pages/tickets.tsx

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { useState, useEffect } from "react";
2+
import { lazy, Suspense } from "react";
3+
import type { NextPage } from "next";
4+
import dynamic from "next/dynamic";
5+
import styled from "@emotion/styled";
6+
import {
7+
TicketsQueryDocument,
8+
TicketsQueryQuery,
9+
TicketsQueryQueryVariables,
10+
} from "../src/graphql/tickets.generated";
11+
import { urlQlient } from "../src/graphql/urql";
12+
import { ParseQuery } from "../src/helpers/types";
13+
import Seo from "../src/Components/Seo";
14+
import EventSchema from "../src/Components/schema/event";
15+
import Hero from "../src/Components/sections/Hero";
16+
import { ViewportSizes } from "../styles/theme";
17+
18+
const NavBar = dynamic(() => import("../src/Components/NavBar/NavBar"), {
19+
ssr: false,
20+
});
21+
22+
const TicketBanner = lazy(() => import("../src/Components/Banner/Ticket"));
23+
const TicketCard = lazy(() => import("../src/Components/Card/Ticket"));
24+
const TicketCart = lazy(() => import("../src/Components/Cart/CartContainer"));
25+
const UnShoppedTicket = lazy(
26+
() => import("../src/Components/Card/UnShoppedTicket")
27+
);
28+
const ShoppedTicket = lazy(
29+
() => import("../src/Components/Card/ShoppedTicket")
30+
);
31+
32+
type Page = ParseQuery<TicketsQueryQuery["page"]>;
33+
34+
export type PageProps = {
35+
navData: Page["navBar"];
36+
whyItems: Page["whyBlockCollection"];
37+
heroData: Page["heroBlock"]; //
38+
39+
//seo: Page["seo"];
40+
};
41+
42+
const Container = styled.section`
43+
display: flex;
44+
flex-direction: column;
45+
width: 100vw;
46+
max-width: 1440px;
47+
min-height: calc(100vh - 100px);
48+
`;
49+
const StyledBlackWrapp = styled.section`
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
background-color: ${({ theme }) => theme.elements.global.backgroundColor};
54+
`;
55+
56+
const Title = styled.h1`
57+
line-height: 80px;
58+
text-align: center;
59+
@media (max-width: ${ViewportSizes.Phone}px) {
60+
font-size: 32px;
61+
}
62+
@media (max-width: ${ViewportSizes.TabletLandscape}px) {
63+
}
64+
@media (min-width: ${ViewportSizes.Desktop}px) {
65+
font-size: 80px;
66+
}
67+
`;
68+
69+
const Grid = styled.div`
70+
@media (max-width: ${ViewportSizes.TabletLandscape}px) {
71+
}
72+
@media (min-width: ${ViewportSizes.Desktop}px) {
73+
}
74+
`;
75+
76+
const Ticket: NextPage<PageProps> = (props) => {
77+
const [login, setLogin] = useState(true);
78+
const [ticketAvailability, setTicketAvailability] = useState(true);
79+
const [buyedTicket, setBuyedTicket] = useState(false);
80+
81+
return (
82+
<StyledBlackWrapp>
83+
<Container>
84+
<Suspense fallback={null}>
85+
<NavBar {...props.navData} />
86+
</Suspense>
87+
<Suspense fallback={null}>
88+
<TicketBanner {...props.heroData} />
89+
</Suspense>
90+
{/* {props.whyItems.items.map((elem, index) => {
91+
return (
92+
<Suspense key={`why-card-${index}`} fallback={null}>
93+
<TicketCard
94+
number={index + 1}
95+
{...elem}
96+
key={`why-card-${index}`}
97+
/>
98+
</Suspense>
99+
);
100+
})} */}
101+
{props.whyItems.items.map((elem: any, index: any) => {
102+
console.log(elem);
103+
const LogState = JSON.parse(
104+
elem.extendedDescription.json.content[0].content[0].value
105+
);
106+
console.log(LogState);
107+
if (
108+
login === LogState.loggedin &&
109+
ticketAvailability === LogState.ticket
110+
) {
111+
return (
112+
<Suspense key={`why-card-${index}`} fallback={null}>
113+
<TicketCard
114+
number={index + 1}
115+
{...elem}
116+
key={`why-card-${index}`}
117+
/>
118+
</Suspense>
119+
);
120+
} else {
121+
return null;
122+
}
123+
})}
124+
<TicketCart />
125+
{/* <Suspense>
126+
<UnShoppedTicket />
127+
<StyledBlackWrapp>
128+
<Title>TUS TICKETS</Title>
129+
<Grid>
130+
<ShoppedTicket />
131+
<ShoppedTicket />
132+
</Grid>
133+
</StyledBlackWrapp>
134+
</Suspense> */}
135+
</Container>
136+
</StyledBlackWrapp>
137+
);
138+
};
139+
140+
export async function getStaticProps() {
141+
const queryResults = await urlQlient
142+
.query<TicketsQueryQuery, TicketsQueryQueryVariables>(
143+
TicketsQueryDocument,
144+
{
145+
id: "2izkVq9L0r7BEeoZbEAEsC",
146+
locale: "es-CL",
147+
isPreview: Boolean(process.env.NEXT_PUBLIC_CONTENTFUL_IS_PREVIEW),
148+
}
149+
)
150+
.toPromise();
151+
152+
const page = queryResults.data?.page as Page;
153+
const props: PageProps = {
154+
navData: page?.navBar,
155+
heroData: page?.heroBlock,
156+
whyItems: page?.whyBlockCollection,
157+
};
158+
159+
return {
160+
props,
161+
};
162+
}
163+
164+
export default Ticket;

‎public/images/email-icon.svg

+4
Loading

‎public/images/github-icon.svg

+3
Loading

‎public/images/gmail-icon.svg

+3
Loading

‎public/images/mercado-pago.svg

+9
Loading

‎public/images/stripo.svg

+9
Loading

‎src/Components/Banner/Ticket.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { lazy, Suspense } from "react";
2+
import styled from "@emotion/styled";
3+
import { PageProps } from "../../../pages/why";
4+
import { H1 } from "../core/Typography";
5+
import { ViewportSizes } from "../../../styles/theme";
6+
7+
const Image = lazy(() => import("../core/Image"));
8+
9+
const Container = styled.section`
10+
display: flex;
11+
position: relative;
12+
flex-direction: row;
13+
max-width: 1440px;
14+
height: 100vh;
15+
padding: 16px;
16+
align-items: flex-start;
17+
max-height: 240px;
18+
> h1 {
19+
z-index: 3;
20+
font-size: 48px;
21+
line-height: 48px;
22+
font-weight: 400;
23+
width: 100%;
24+
max-width: 250px;
25+
}
26+
27+
img {
28+
right: 16px;
29+
top: 80px;
30+
width: calc(100% - 33px) !important;
31+
min-height: 112px;
32+
object-position: center center;
33+
}
34+
35+
@media (min-width: 500px) {
36+
margin-bottom: 100px;
37+
}
38+
39+
@media (min-width: ${ViewportSizes.Phone}px) {
40+
padding: 48px;
41+
align-items: center;
42+
max-height: 420px;
43+
> h1 {
44+
width: 70%;
45+
max-width: 100%;
46+
font-size: 120px;
47+
line-height: 120px;
48+
}
49+
50+
img {
51+
top: 70px;
52+
right: 48px;
53+
width: 100%;
54+
object-position: center center;
55+
}
56+
}
57+
58+
@media (min-width: ${ViewportSizes.TabletLandscape}) {
59+
img {
60+
right: 153px;
61+
}
62+
> h1 {
63+
width: 50%;
64+
}
65+
}
66+
`;
67+
68+
const BannerTicket = (props: PageProps["heroData"]) => {
69+
return (
70+
<Container>
71+
<H1 color="#F45B69">{props.tile}</H1>
72+
<Suspense fallback={null}>
73+
<Image
74+
mobile={props?.background?.url!}
75+
alt={props?.background?.title! || ""}
76+
style={{
77+
position: "absolute",
78+
maxWidth: "864px",
79+
borderRadius: "0px 32px 0px 0px",
80+
aspectRatio: "864 / 273",
81+
objectFit: "cover",
82+
zIndex: 2,
83+
}}
84+
/>
85+
</Suspense>
86+
</Container>
87+
);
88+
};
89+
90+
export default BannerTicket;

‎src/Components/Button/Login.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import styled from "@emotion/styled";
2+
import { ViewportSizes } from "../../../styles/theme";
3+
4+
type ButtonInfo = {
5+
id: number | string;
6+
text?: string;
7+
icon?: string;
8+
};
9+
10+
const IconLogin = styled.img`
11+
width: 40% !important;
12+
height: 20px;
13+
`;
14+
15+
const TertiaryButton = styled.button`
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
margin: 0.5rem auto;
20+
width: 100%;
21+
height: 50px;
22+
background-color: #fff !important;
23+
border: 1px solid #000;
24+
border-radius: 5px;
25+
26+
p {
27+
font-size: 1rem;
28+
font-weight: 700;
29+
color: #000;
30+
width: 70%;
31+
}
32+
@media (max-width: ${ViewportSizes.Phone}px) {
33+
justify-content: center;
34+
35+
p {
36+
width: 60%;
37+
}
38+
}
39+
40+
@media (min-width: ${ViewportSizes.TabletLandscape}) {
41+
p {
42+
width: 50%;
43+
}
44+
}
45+
@media (min-width: ${ViewportSizes.Desktop}px) {
46+
}
47+
`;
48+
49+
const LoginButton = (props: ButtonInfo) => {
50+
return (
51+
<TertiaryButton key={props?.id!}>
52+
<IconLogin src={props?.icon!} className="loginIcon" />
53+
<p>{props?.text!} </p>
54+
</TertiaryButton>
55+
);
56+
};
57+
58+
export default LoginButton;

‎src/Components/Button/Payment.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import styled from "@emotion/styled";
2+
import { ViewportSizes } from "../../../styles/theme";
3+
4+
type ButtonInfo = {
5+
id: number | string;
6+
text?: string;
7+
icon?: string;
8+
};
9+
10+
const IconLogin = styled.img`
11+
width: 30% !important;
12+
height: 19.51px;
13+
14+
@media (max-width: ${ViewportSizes.Phone}px) {
15+
width: 40% !important;
16+
}
17+
`;
18+
19+
const TertiaryButton = styled.button`
20+
display: flex;
21+
flex-direction: row;
22+
background-color: #fff !important;
23+
border: 1px solid #000;
24+
margin-bottom: 0.5rem;
25+
padding: 0.5rem;
26+
width: 100%;
27+
justify-content: center;
28+
29+
img {
30+
width: 50% !important;
31+
margin: 0.5rem 0;
32+
height: unset !important;
33+
}
34+
@media (max-width: ${ViewportSizes.Phone}px) {
35+
}
36+
37+
@media (min-width: ${ViewportSizes.TabletLandscape}) {
38+
}
39+
@media (min-width: ${ViewportSizes.Desktop}px) {
40+
img {
41+
width: 35% !important;
42+
}
43+
:active {
44+
background-color: #F0E040 "important;
45+
}
46+
}
47+
`;
48+
49+
const PaymentButton = (props: ButtonInfo) => {
50+
return (
51+
<TertiaryButton key={props?.id!}>
52+
<IconLogin src={props?.icon!} className="loginIcon" />
53+
</TertiaryButton>
54+
);
55+
};
56+
57+
export default PaymentButton;

0 commit comments

Comments
 (0)