feat: button cancelamento agendado

ctrlmais · Apr 12, 2022 · 9ea097a · 9ea097a
1 parent f8f4397
commit 9ea097a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/src/hooks/useTicket.tsx b/src/hooks/useTicket.tsx
@@ -5,13 +5,16 @@ import { useReactToPrint } from 'react-to-print';
 import { format } from 'date-fns';
 import { ClienteMetadata } from 'types/IContext';
 
+import { useToast } from 'contexts/Toast';
 import { useUser } from 'contexts/User';
 
+import { deleteSchedule } from 'services/delete/schedule';
 import { getHorarioSelecionado } from 'services/get/horarioMarcado';
 
 export function useTicket() {
   const navigate = useNavigate();
   const params = useParams();
+  const { toast } = useToast();
   const { selectHours, selectDay, setSelectHours, setSelectDay } = useUser();
 
   const [cliente, setCliente] = useState<ClienteMetadata>();
@@ -33,6 +36,37 @@ export function useTicket() {
     handlePrint();
   }
 
+  async function cancelarAgendamento(idAgendamento: string) {
+    const { data, error } = await deleteSchedule(idAgendamento);
+
+    if (error) {
+      toast.error(error.message, { id: 'toast' });
+      return;
+    }
+
+    if (data) {
+      toast.success('Agendamento cancelado com sucesso!', { id: 'toast' });
+      navigate('/');
+    }
+  }
+
+  function verificaHorarioCancelamento(dataAgendamento: ClienteMetadata) {
+    const dataAtual = new Date();
+    const dataAtualFormatted = format(dataAtual, 'yyyy-MM-dd');
+    const horaAtual = format(dataAtual, 'HH:mm:ss');
+    const dataHoraAtual = `${dataAtualFormatted}T${horaAtual}`;
+    const dataAgenda = dataAgendamento?.appointment_date;
+
+    const diff = new Date(dataAgenda).getTime() - new Date(dataHoraAtual).getTime();
+    const diffMinutes = Math.round(diff / 1000 / 60);
+
+    if (diffMinutes < 60) {
+      return true;
+    }
+
+    return false;
+  }
+
   async function buscaCliente() {
     setLoading(true);
     const { data, error, status } = await getHorarioSelecionado(params?.id || '', dayFormatted, selectHours);
@@ -74,5 +108,7 @@ export function useTicket() {
     componentToPrintRef,
     handleClickPrint,
     showPrint,
+    cancelarAgendamento,
+    verificaHorarioCancelamento,
   };
 }
diff --git a/src/pages/MyTicket/MyTicket.module.scss b/src/pages/MyTicket/MyTicket.module.scss
@@ -21,9 +21,18 @@
 
 .containerButton {
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   margin-top: 1rem;
   margin-bottom: 2rem;
+  flex-direction: column;
+  height: 20vh;
+}
+
+.containerAlert {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
 @media screen and (min-width: 839px) {

diff --git a/src/pages/MyTicket/index.tsx b/src/pages/MyTicket/index.tsx
@@ -1,5 +1,7 @@
 import { SpinnerCircular } from 'spinners-react';
+import { ClienteMetadata } from 'types/IContext';
 
+import { Alert } from 'components/Alert';
 import { Button } from 'components/Button';
 import ComponentToPrint from 'components/ComponentToPrint';
 import { Header } from 'components/Header';
@@ -13,14 +15,20 @@ import styles from './MyTicket.module.scss';
 
 export function MyTicket() {
   const { theme } = useTheme();
-  const { loading, cliente, componentToPrintRef, handleClickPrint } = useTicket();
+  const { loading, cliente, componentToPrintRef, handleClickPrint, cancelarAgendamento, verificaHorarioCancelamento } =
+    useTicket();
 
   return (
     <>
       <div className={styles.home} data-theme={theme}>
         <Header back />
 
         <div className={styles.container}>
+          {verificaHorarioCancelamento(cliente as ClienteMetadata) && (
+            <div className={styles.containerAlert}>
+              <Alert title="Você só cancelar o agendamento 1 hora antes do seu horário" warning />
+            </div>
+          )}
           <h2>Apresente esse ticket para o seu barbeiro</h2>
           {loading ? (
             <SpinnerCircular color="#ff9000" size={64} />
@@ -40,6 +48,19 @@ export function MyTicket() {
             >
               Salvar ticket
             </Button>
+            <Button
+              type="button"
+              disabled={verificaHorarioCancelamento(cliente as ClienteMetadata)}
+              style={{
+                backgroundColor: '#CA0B00',
+                color: '#FFF',
+              }}
+              onClick={() => {
+                cancelarAgendamento(cliente?.id || '');
+              }}
+            >
+              Cancelar agendamento
+            </Button>
           </div>
         </div>
       </div>