Lego 0006/rrss details (#122)

Author: joseglego

package-lock.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",

package.json

@@ -68,6 +68,7 @@ const TicketPage = ({ ticket }: { ticket: PublicTicket }) => {
         ticketType={ticket.ticketType}
         ticketSeason={ticket.ticketSeason}
         fadeIn
+        showGetTicket
       />
     </div>
   );

pages/p/ticket/[id].tsx

@@ -151,6 +151,12 @@ export default function Tickets(props: PageProps) {
               fadeIn
             />
           ) : null}
+          {(latestTickets?.length ?? 0) > 1 ? (
+            <Paragraph>
+              (Sabemos que tienes {latestTickets?.length} tickets pero no
+              podemos mostrar tantos en esta pantalla)
+            </Paragraph>
+          ) : null}
           <Paragraph>
             Tu compra fue exitosa. Siempre podrás ver los tickets en{" "}
             <Link href={"/mytickets"} passHref>

pages/tickets/success.tsx

@@ -3,13 +3,21 @@ 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";
+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;
 `;
@@ -139,6 +147,7 @@ const TicketHeader = styled.div`
   display: flex;
   align-items: center;
 `;
+
 const StyledTr = styled.div`
   display: flex;
   flex-direction: column;
@@ -268,9 +277,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",
     },
@@ -294,7 +303,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",
@@ -333,6 +342,7 @@ export const Ticket = ({
   ticketSeason,
   userTicketStatus,
   fadeIn,
+  showGetTicket = false,
 }: {
   userTicketId: string;
   userPhoto: string | null;
@@ -343,6 +353,7 @@ export const Ticket = ({
   ticketSeason: string;
   userTicketStatus: string;
   fadeIn: boolean;
+  showGetTicket?: boolean;
 }) => {
   const [loaded, setLoaded] = useState(!fadeIn);
   const animation = useAnimation();
@@ -429,33 +440,42 @@ export const Ticket = ({
                 )}`}
                 target="_blank"
                 rel="noreferrer"
-                type="twitter"
+                type="facebook"
               >
                 <Facebook size={32} />
               </SocialAnchor>
               <SocialAnchor
                 href={`https://www.linkedin.com/sharing/share-offsite?url=${publicUrl}`}
                 target="_blank"
                 rel="noreferrer"
-                type="twitter"
+                type="linkedin"
               >
                 <Linkedin size={32} />
               </SocialAnchor>
               <SocialButton
                 onClick={() => {
-                  /* 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!");
+                    });
                 }}
               >
                 <Copy size={32} />
               </SocialButton>
+              <Toaster />
             </SharingInfo>
+            {showGetTicket ? (
+              <GetTicket>
+                <GenericLink href="/tickets">Obtener Tickets</GenericLink>
+              </GetTicket>
+            ) : null}
           </MotionContainer>
         )}
       </AnimatePresence>
-
       {/* <AnimatePresence mode="popLayout" initial={false}> */}
     </AtroposContainer>
   );

src/Components/Ticket/Ticket.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;