From d6bc5b577bd413ee0f8b0a58aaf9e55156a582e5 Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Sun, 4 Dec 2022 23:39:44 -0300 Subject: [PATCH 1/5] toast --- package-lock.json | 38 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 39 insertions(+) diff --git a/package-lock.json b/package-lock.json index f111408..313a469 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-dom": "^18.2.0", "react-feather": "^2.0.10", "react-hook-form": "^7.32.0", + "react-hot-toast": "^2.4.0", "react-markdown": "^8.0.3", "react-portal": "^4.2.2", "react-qr-code": "^2.0.8", @@ -9215,6 +9216,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz", + "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/google-map-react": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.0.tgz", @@ -14439,6 +14448,21 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-hot-toast": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz", + "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -25725,6 +25749,12 @@ "slash": "^3.0.0" } }, + "goober": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz", + "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==", + "requires": {} + }, "google-map-react": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.0.tgz", @@ -29585,6 +29615,14 @@ "integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==", "requires": {} }, + "react-hot-toast": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz", + "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==", + "requires": { + "goober": "^2.1.10" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 2daa961..fc639c7 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "react-dom": "^18.2.0", "react-feather": "^2.0.10", "react-hook-form": "^7.32.0", + "react-hot-toast": "^2.4.0", "react-markdown": "^8.0.3", "react-portal": "^4.2.2", "react-qr-code": "^2.0.8", From 69dc54ab3957ed72080905072b05ee3d6dd7391e Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Sun, 4 Dec 2022 23:45:49 -0300 Subject: [PATCH 2/5] feat(Ticket): include message on copy --- src/Components/Ticket/Ticket.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Components/Ticket/Ticket.tsx b/src/Components/Ticket/Ticket.tsx index 222ba00..94afe8f 100644 --- a/src/Components/Ticket/Ticket.tsx +++ b/src/Components/Ticket/Ticket.tsx @@ -3,6 +3,7 @@ import Atropos from "atropos/react"; import { AnimatePresence, motion, MotionProps } from "framer-motion"; import { useEffect, useState } from "react"; import { Facebook, Linkedin, Twitter, Copy } from "react-feather"; +import toast, { Toaster } from "react-hot-toast"; import { jsconfTheme, ViewportSizes } from "../../../styles/theme"; @@ -139,6 +140,7 @@ const TicketHeader = styled.div` display: flex; align-items: center; `; + const StyledTr = styled.div` display: flex; flex-direction: column; @@ -443,19 +445,23 @@ export const Ticket = ({ { - /* eslint-disable @typescript-eslint/no-floating-promises */ - navigator.clipboard.writeText(publicUrl).then(() => { - console.log(1); - }); + navigator.clipboard + .writeText(publicUrl) + .then(() => { + toast.success("Enlace copiado con éxito!"); + }) + .catch(() => { + toast.error("Hubo un error, intentalo nuevamente!"); + }); }} > + )} - {/* */} ); From 6e3956367e8f7d209067896747f8b09946c9ee16 Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Sun, 4 Dec 2022 23:49:38 -0300 Subject: [PATCH 3/5] feat(Ticket): use different colors on social --- src/Components/Ticket/Ticket.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Components/Ticket/Ticket.tsx b/src/Components/Ticket/Ticket.tsx index 94afe8f..bc50bab 100644 --- a/src/Components/Ticket/Ticket.tsx +++ b/src/Components/Ticket/Ticket.tsx @@ -270,9 +270,9 @@ const SocialButton = styled.button(({ theme }) => [ width: "100%", transform: "scaleX(0)", height: "4px", - bottom: 0, + bottom: "-8px", left: 0, - backgroundColor: theme.colors.social.twitter, + backgroundColor: "#fff", transformOrigin: "bottom right", transition: "transform 0.25s ease-out", }, @@ -296,7 +296,7 @@ const SocialAnchor = styled.a<{ type: "twitter" | "facebook" | "linkedin" }>( width: "100%", transform: "scaleX(0)", height: "4px", - bottom: 0, + bottom: "-8px", left: 0, backgroundColor: theme.colors.social[type], transformOrigin: "bottom right", @@ -431,7 +431,7 @@ export const Ticket = ({ )}`} target="_blank" rel="noreferrer" - type="twitter" + type="facebook" > @@ -439,7 +439,7 @@ export const Ticket = ({ href={`https://www.linkedin.com/sharing/share-offsite?url=${publicUrl}`} target="_blank" rel="noreferrer" - type="twitter" + type="linkedin" > From 33138f567350c61cdca942fdf6d82e3e29520f68 Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Sun, 4 Dec 2022 23:56:59 -0300 Subject: [PATCH 4/5] feat(ticketsSuccess): include many tickets message --- pages/tickets/success.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pages/tickets/success.tsx b/pages/tickets/success.tsx index 42f081a..ff1b378 100644 --- a/pages/tickets/success.tsx +++ b/pages/tickets/success.tsx @@ -151,6 +151,12 @@ export default function Tickets(props: PageProps) { fadeIn /> ) : null} + {(latestTickets?.length ?? 0) > 1 ? ( + + (Sabemos que tienes {latestTickets?.length} tickets pero no + podemos mostrar tantos en esta pantalla) + + ) : null} Tu compra fue exitosa. Siempre podrás ver los tickets en{" "} From 907d818890cdd17f95e30d8372d2eefe990f3b43 Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Mon, 5 Dec 2022 00:28:19 -0300 Subject: [PATCH 5/5] feat(general): show GetTickets --- pages/p/ticket/[id].tsx | 1 + src/Components/Ticket/Ticket.tsx | 14 +++++++++ src/Components/TicketSection/shared.tsx | 42 +++++++++++++++++++++++++ 3 files changed, 57 insertions(+) diff --git a/pages/p/ticket/[id].tsx b/pages/p/ticket/[id].tsx index c4f4a49..d9adb55 100644 --- a/pages/p/ticket/[id].tsx +++ b/pages/p/ticket/[id].tsx @@ -68,6 +68,7 @@ const TicketPage = ({ ticket }: { ticket: PublicTicket }) => { ticketType={ticket.ticketType} ticketSeason={ticket.ticketSeason} fadeIn + showGetTicket /> ); diff --git a/src/Components/Ticket/Ticket.tsx b/src/Components/Ticket/Ticket.tsx index bc50bab..c927b9a 100644 --- a/src/Components/Ticket/Ticket.tsx +++ b/src/Components/Ticket/Ticket.tsx @@ -6,11 +6,18 @@ import { Facebook, Linkedin, Twitter, Copy } from "react-feather"; import toast, { Toaster } from "react-hot-toast"; import { jsconfTheme, ViewportSizes } from "../../../styles/theme"; +import { GenericLink } from "../TicketSection/shared"; const SharingInfo = styled.div` text-align: center; margin-bottom: 64px; `; + +const GetTicket = styled.div` + text-align: center; + margin-bottom: 64px; +`; + const AtroposContainer = styled.div` overflow: hidden; `; @@ -335,6 +342,7 @@ export const Ticket = ({ ticketSeason, userTicketStatus, fadeIn, + showGetTicket = false, }: { userTicketId: string; userPhoto: string | null; @@ -345,6 +353,7 @@ export const Ticket = ({ ticketSeason: string; userTicketStatus: string; fadeIn: boolean; + showGetTicket?: boolean; }) => { const [loaded, setLoaded] = useState(!fadeIn); const animation = useAnimation(); @@ -459,6 +468,11 @@ export const Ticket = ({ + {showGetTicket ? ( + + Obtener Tickets + + ) : null} )} diff --git a/src/Components/TicketSection/shared.tsx b/src/Components/TicketSection/shared.tsx index 63a10ad..8f4bb8f 100644 --- a/src/Components/TicketSection/shared.tsx +++ b/src/Components/TicketSection/shared.tsx @@ -101,6 +101,48 @@ export const GenericBtn = styled(motion.button)` } `; +export const GenericLink = styled(motion.a)` + border-color: ${({ theme }) => theme.colors.jsconfYellow}; + color: ${({ theme }) => theme.colors.jsconfYellow}; + border-width: 2px; + border-style: solid; + font-weight: 700; + padding-left: 1rem; + padding-right: 1rem; + display: inline-flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + line-height: 0; + height: 50px; + transition-duration: 250ms; + transition-property: all; + cursor: pointer; + &:active, + &:focus, + &:hover { + box-shadow: 0 0.5em 0.5em -0.4em ${({ theme }) => theme.colors.jsconfRed}; + border-color: ${({ theme }) => theme.colors.jsconfRed}; + color: ${({ theme }) => theme.colors.jsconfRed}; + } + &:focus, + &:hover { + transform: translateY(-0.25em); + } + &:active { + box-shadow: none; + transform: translateY(0em); + } + &:disabled, + &:disabled:hover { + border-color: ${({ theme }) => transparentize(0.78)(theme.colors.white)}; + color: ${({ theme }) => transparentize(0.75)(theme.colors.white)}; + box-shadow: none; + cursor: not-allowed; + transform: translateY(0em); + } +`; + export const Container = styled.div` display: flex; flex-direction: column;