feat: add button salvar ticket

ctrlmais · Apr 8, 2022 · aece97d · aece97d
1 parent 91ff8a5
commit aece97d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/pages/MyTicket/MyTicket.module.scss b/src/pages/MyTicket/MyTicket.module.scss
@@ -19,6 +19,13 @@
   }
 }
 
+.containerButton {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
 @media screen and (min-width: 839px) {
   .home {
     background: var(--background);
@@ -36,3 +43,12 @@
     }
   }
 }
+
+@media print {
+  @page {
+    margin: 0;
+  }
+  body {
+    margin: 4.6cm;
+  }
+}
diff --git a/src/pages/MyTicket/index.tsx b/src/pages/MyTicket/index.tsx
@@ -1,5 +1,7 @@
 import { SpinnerCircular } from 'spinners-react';
 
+import { Button } from 'components/Button';
+import ComponentToPrint from 'components/ComponentToPrint';
 import { Header } from 'components/Header';
 import { Ticket } from 'components/Ticket';
 
@@ -11,7 +13,7 @@ import styles from './MyTicket.module.scss';
 
 export function MyTicket() {
   const { theme } = useTheme();
-  const { loading, cliente } = useTicket();
+  const { loading, cliente, componentToPrintRef, handleClickPrint } = useTicket();
 
   return (
     <>
@@ -20,7 +22,25 @@ export function MyTicket() {
 
         <div className={styles.container}>
           <h2>Apresente esse ticket para o seu barbeiro</h2>
-          {loading ? <SpinnerCircular color="#ff9000" size={64} /> : <Ticket cliente={cliente} />}
+          {loading ? (
+            <SpinnerCircular color="#ff9000" size={64} />
+          ) : (
+            <>
+              <ComponentToPrint ref={componentToPrintRef}>
+                <Ticket cliente={cliente} />
+              </ComponentToPrint>
+            </>
+          )}
+          <div className={styles.containerButton}>
+            <Button
+              type="button"
+              onClick={() => {
+                handleClickPrint();
+              }}
+            >
+              Salvar ticket
+            </Button>
+          </div>
         </div>
       </div>
     </>