Skip to content

GitLab

Open
Created by André Sacilotto Santos@andre.santosOwner0 of 7 tasks completed0/7 tasks
Report abuse

Componente de minha reserva

Mudanças

Como testar

import { Carousel } from "@/components/carousel/carousel";
import { CardsInfoOnHover } from "@/components/cards/cardInfoOnHover";
import { createFileRoute, Link } from "@tanstack/react-router";
import { Button, DefaultButton } from "@/components/buttons/defaultButton";
import { InfoExperiencies } from "@/components/display/infoExperiencesHome";
import { Typography } from "@/components/typography/typography";
import { useTranslation } from "react-i18next";
import ReservaCard from "@/components/cards/myReservation";

export const Route = createFileRoute("/(index)/")({
  component: RouteComponent,
});

function RouteComponent() {
  const { t } = useTranslation();
  return (
    <div className="w-full overflow-x-hidden">
      <div className="relative w-full h-screen bg-main-dark-green flex items-start justify-center pt-[clamp(2rem,6vh,5rem)]">
        <img
          src="home-page-image.png"
          alt="PRÓ-MATA Centro de Pesquisas"
          className="absolute inset-0 w-full h-full object-cover"
        />

        <div className="absolute inset-0 bg-black/20"></div>

        <div className="relative z-10 max-w-[clamp(40rem,80vw,56rem)] mx-auto px-[clamp(1rem,4vw,2rem)] text-center">
          <Typography
            variant="h1_light"
            className="text-[clamp(2rem,6vw,3.75rem)] font-bold leading-tight mb-[clamp(0.75rem,1.5vw,1rem)]"
            style={{ textShadow: "0.125em 0.125em 0.25em rgba(0,0,0,0.6)" }}
          >
            {t("homePage.welcome")}
          </Typography>
          <Typography
            className="text-[clamp(2rem,6vw,3.75rem)] font-bold leading-tight italic mb-[clamp(1rem,2vw,1.5rem)] text-banner"
            style={{ textShadow: "0.125em 0.125em 0.25em rgba(0,0,0,0.6)" }}
          >
            PRÓ-MATA
          </Typography>
          <Typography
            variant="h3_light"
            className="text-[clamp(1.125rem,2.5vw,1.5rem)] font-medium mb-[clamp(1rem,2.5vw,2rem)]"
          >
            {t("homePage.subtitle")}
          </Typography>

          <div className="flex flex-col sm:flex-row gap-[clamp(0.75rem,2vw,1rem)] justify-center items-center">
            <Link to="/reserve">
              <DefaultButton
                label={t("homePage.ctaPrimary")}
                variant="primary"
                className="p-5 text-md"
              />
            </Link>
            <a
              href="https://www.pucrs.br/ima/pro-mata/"
              target="_blank"
              rel="noopener noreferrer"
            >
              <DefaultButton
                label={t("homePage.ctaSecondary")}
                variant="secondary"
                className="p-5 text-md"
              />
            </a>
          </div>
        </div>
      </div>
      <div className="h-[clamp(2.5rem,6vh,5rem)] w-full bg-main-dark-green" />
      <div className="px-4 sm:px-6 lg:px-8 py-[clamp(2rem,6vw,5rem)] flex flex-col items-center">
        <InfoExperiencies />
        <CardsInfoOnHover />
        <Carousel />
        <ReservaCard
          titulo="Pacote personalizado"
          preco={356.9}
          tipo="Pacote"
          periodo={{ inicio: new Date("2025-08-11"), fim: new Date("2025-08-15") }}
          imagem="/home-page-image.png"
          status="confirmada"
        />
        <ReservaCard
          titulo="Pacote personalizado"
          preco={356.9}
          tipo="Pacote"
          periodo={{ inicio: new Date("2025-08-11"), fim: new Date("2025-08-15") }}
          imagem="/home-page-image.png"
          status="pagamento_pendente"
        />
        <div className="flex flex-col items-center mb-[clamp(2rem,5vw,3.75rem)] justify-center">
          <Typography
            variant="h4"
            className="my-[clamp(0.75rem,2vw,1.125rem)] font-medium text-on-banner-text text-[clamp(1.125rem,2.5vw,1.5rem)]"
          >
            {t("homePage.ctaBottomTitle")}
          </Typography>
          <Link to="/reserve">
            <Button
              label={t("homePage.ctaBottom")}
              variant="gray"
              className="p-5 text-md"
            />
          </Link>
        </div>
      </div>
    </div>
  );
}

Acceptance Criteria

  • Cliente deve conseguir visualizar as informações pontuais de sua reserva
  • Cliente deve conseguir adicionar mais pessoas
  • Cliente deve conseguir visualizar sua reserva detalhada (Tela de visualizar reserva)
  • Cliente deve conseguir cancelar sua reserva
  • Usar um toast para informar do que foi feito ao cliente
  • Deve ter diferentes estado com base no status da reserva
  • Deve ser possível enviar um comprovante de pagamento/documento para aquela reserva

Screenshots da tela/componente desenvolvido

image image image image image

Observações

Algumas pendências:

  • Falta a página de visualizar reserva quando clicar em visualizar reserva, por conta de estar em code review
  • Validar nome, cpf, data de nascimento, e telefone no modal de adicionar pessoas na reserva (validar se são letras/número, e se são reais)

🔄 Sincronizado do GitHub

Sincronizado automaticamente do GitHub para GitLab AGES