feat: added handle print on donation item (#347)

Adicionado o comportamento de abrir tela de impressão ao clicar no ícone de imprimir em uma doação.
SOS-RS · Jun 6, 2024 · f3963ae · f3963ae
2 parents 73265cd + 4cbfea4
commit f3963ae
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.23.0",
     "react-select": "^5.8.0",
+    "react-to-print": "^2.15.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"

diff --git a/src/hooks/useDonations/types.ts b/src/hooks/useDonations/types.ts
@@ -10,11 +10,17 @@ export interface IUseDonationsData {
 
 export interface IDonationsData {
   id: string;
-  userId: string;
+  user: {
+    id: string;
+    name: string;
+    lastName: string;
+    phone: string;
+  };
   status: DonateOrderStatus;
   shelter: {
     id: string;
     name: string;
+    address: string;
   };
   donationOrderSupplies: {
     quantity: number;

diff --git a/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx b/src/pages/DonationsHistory/components/DonationHistoryListItem/DonationHistoryListItem.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { Fragment, createRef, useMemo, useState } from 'react';
 import { format } from 'date-fns';
 import {
   ChevronDown,
@@ -9,16 +9,29 @@ import {
   Printer,
 } from 'lucide-react';
 import clsx from 'clsx';
+import { useReactToPrint } from 'react-to-print';
 
 import { IDonationHistoryListItem } from './types';
-import { SupplyMeasureMap } from '@/lib/utils';
+import { SupplyMeasureMap, cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { DonateOrderStatus } from '@/service/donationOrder/types';
 import { DonationHistoryStatus } from '../DonationHistoryStatus';
 
 const DonationHistoryListItem = (props: IDonationHistoryListItem) => {
-  const { data: donation, onCancel, onConfirm, loading } = props;
+  const {
+    data: donation,
+    onCancel,
+    onConfirm,
+    loading,
+    className = '',
+    ...rest
+  } = props;
   const [visible, setVisible] = useState<boolean>(false);
+  const divRef = createRef<HTMLDivElement>();
+  const handlePrint = useReactToPrint({
+    removeAfterPrint: true,
+    onBeforePrint: () => setVisible(true),
+  });
   const accordeonLabel = useMemo(
     () => (visible ? 'Ocultar itens doados' : 'Mostrar itens doados'),
     [visible]
@@ -28,33 +41,61 @@ const DonationHistoryListItem = (props: IDonationHistoryListItem) => {
     [visible]
   );
 
+  if (!donation) return <Fragment />;
+
   return (
-    <div className="flex flex-col gap-2 items-start [&_*]:text-black bg-slate-100 rounded-md p-4 relative">
-      <DonationHistoryStatus
-        status={donation?.status}
-        className="absolute top-4 right-4 flex items-center justify-center gap-2"
-      >
-        <Printer className="stroke-gray-900 hover:stroke-gray-700 active:stroke-gray-800 h-5 w-5 cursor-pointer" />
-      </DonationHistoryStatus>
-      <div className="flex flex-col gap-1">
-        <small className="font-medium !text-muted-foreground">
-          Doação para
-        </small>
-        <h3 className="font-semibold">{donation.shelter.name}</h3>
+    <div
+      ref={divRef}
+      className={cn(
+        'flex flex-col gap-2 items-start bg-slate-100 rounded-md p-4 print:bg-white print:m-4',
+        className
+      )}
+      {...rest}
+    >
+      <div className="w-full flex-col items-center justify-center hidden print:flex">
+        <h1 className="text-3xl font-bold">🛟 SOS RS</h1>
+        <h4 className="text-md font-thin">sos-rs.com</h4>
+        <h2 className="text-lg font-medium mt-2">
+          O Rio Grande do Sul agradece sua doação
+        </h2>
+        <h4 className="text-md font-normal">Cada doação importa</h4>
+        <h4 className="text-md font-normal mb-2">Juntos somos mais fortes!</h4>
+      </div>
+      <div className="flex flex-col gap-1 relative w-full">
+        <DonationHistoryStatus
+          status={donation.status}
+          className="absolute top-0 right-0 flex items-center justify-center gap-2"
+          chipProps={{
+            className: 'print:bg-transparent',
+          }}
+        >
+          <Printer
+            onClick={() => handlePrint(null, () => divRef.current)}
+            className="stroke-gray-900 hover:stroke-gray-700 active:stroke-gray-800 h-5 w-5 cursor-pointer print:hidden"
+          />
+        </DonationHistoryStatus>
+        <small className="font-medium !text-muted-foreground">Doação de</small>
+        <h3 className="font-semibold !text-black">
+          {donation.user.name} {donation.user.lastName} / {donation.user.phone}
+        </h3>
+        <small className="font-medium !text-muted-foreground">para</small>
+        <h3 className="font-semibold !text-black">
+          {donation.shelter.name} em {donation.shelter.address}
+        </h3>
         <small className="text-xs text-semibold">
           às {format(new Date(donation.createdAt), "HH'h'mm 'de' dd/MM/yy")}
         </small>
       </div>
       <Button
         variant="ghost"
         size="sm"
-        className="!text-red-500 font-medium hover:bg-transparent active:bg-transparent px-0 py-0 rounded-md flex gap-2 mt-2 hover:!text-red-400 [&_svg]:hover:stroke-red-400"
+        className="!text-red-500 font-medium hover:bg-transparent active:bg-transparent px-0 py-0 rounded-md flex gap-2 mt-2 hover:!text-red-400 [&_svg]:hover:stroke-red-400 print:hidden"
         onClick={() => setVisible((prev) => !prev)}
       >
         {accordeonLabel}
         <AccordeonIcon className="stroke-red-500" />
       </Button>
-      <ul className={clsx({ hidden: !visible })}>
+      <ul className={clsx('print:mt-4', { hidden: !visible })}>
         {donation.donationOrderSupplies.map((s, idx) => (
           <li
             key={idx}
@@ -66,7 +107,7 @@ const DonationHistoryListItem = (props: IDonationHistoryListItem) => {
           </li>
         ))}
       </ul>
-      <div className="flex gap-2 justify-between w-full md:justify-end flex-wrap">
+      <div className="flex gap-2 justify-between w-full md:justify-end flex-wrap print:hidden">
         <Button
           variant="ghost"
           size="sm"

diff --git a/src/pages/DonationsHistory/components/DonationHistoryListItem/types.ts b/src/pages/DonationsHistory/components/DonationHistoryListItem/types.ts
@@ -1,6 +1,8 @@
 import { IDonationsData } from '@/hooks/useDonations/types';
+import React from 'react';
 
-export interface IDonationHistoryListItem {
+export interface IDonationHistoryListItem
+  extends React.ComponentPropsWithoutRef<'div'> {
   data: IDonationsData;
   onConfirm?: () => void;
   onCancel?: () => void;