Adding error page (#121)

![image](https://user-images.githubusercontent.com/952992/205535190-001744ab-8698-45bd-803a-6d6e7744a32f.png)

Author: fforres

pages/tickets/error.tsx

@@ -0,0 +1,45 @@
+import styled from "@emotion/styled";
+import { ErrorComponent } from "../../src/Components/ErrorComponent";
+import { TicketsLayout } from "../../src/Components/Layouts/TicketsLayout";
+import { TicketsQueryQuery } from "../../src/graphql/tickets.generated";
+import { ParseQuery } from "../../src/helpers/types";
+import { ViewportSizes } from "../../styles/theme";
+
+type Page = ParseQuery<TicketsQueryQuery["page"]>;
+
+export interface PageProps {
+  seo: Page["seo"];
+}
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+  gap: 3rem;
+  transition: gap 250ms ease-in-out;
+  @media (max-width: ${ViewportSizes.Phone}px) {
+    gap: 4rem;
+  }
+  @media (min-width: ${ViewportSizes.TabletLandscape}px) {
+    gap: 6rem;
+  }
+  @media (min-width: ${ViewportSizes.Desktop}px) {
+    gap: 6rem;
+  }
+`;
+
+export default function Tickets(props: PageProps) {
+  return (
+    <Container>
+      <ErrorComponent
+        errorMessage={`No se pudo completar el pago de tu(s) ticket(s). Puede ser que tu tarjeta fuese declinada o que el procesador de pagos no pudiese comunicarse con tu institución bancaria. Porfavor intenta nuevamente. Si aun no funciona, ponte en contacto con nosotros.`}
+        mainText="Algo salio mal"
+        textoDelBoton="Navegar a /tickets"
+        url="/tickets"
+      />
+    </Container>
+  );
+}
+
+Tickets.getLayout = TicketsLayout;

src/Components/ErrorComponent/index.tsx

@@ -39,6 +39,7 @@ const ImageWrapper = styled.section`
 `;
 const H1404 = styled(H1)`
   font-size: 70px;
+  text-align: center;
   @media (min-width: ${ViewportSizes.Phone}px) {
     font-size: 120px;
   }
@@ -67,10 +68,14 @@ const Wrapper = styled.div`
 
 export const ErrorComponent = ({
   errorMessage,
+  textoDelBoton = "Volver al home",
+  mainText = "OOPS!",
   url = "/",
 }: {
   errorMessage: string;
+  mainText?: string;
   url?: string;
+  textoDelBoton?: string;
 }) => {
   return (
     <StyledBlackWrapp>
@@ -80,10 +85,10 @@ export const ErrorComponent = ({
           alt=""
         />
       </ImageWrapper>
-      <H1404>OOPS!</H1404>
+      <H1404>{mainText}</H1404>
       <Wrapper>
         <P>{errorMessage}</P>
-        <PrimaryStyledLink href={url}>Volver al home</PrimaryStyledLink>
+        <PrimaryStyledLink href={url}>{textoDelBoton}</PrimaryStyledLink>
       </Wrapper>
     </StyledBlackWrapp>
   );