Merge branch 'feature/MS-105' into 'develop'

MS-105 : Resolved bug in reimbursement search TextField and updated order printing logic

Closes MS-105

See merge request !489

src/shared/sections/order/order-details/order-details-info.tsx

@@ -355,7 +355,7 @@ export default function OrderDetailsInfo({ order }: Props) {
   );
 
   const renderBilling = (
-    <>
+    <Grid className="no-print">
       <CardHeader title="Adresse de Facturation" />
       {order?.billingAddress ? (
         <Stack spacing={1.5} sx={{ p: 3, typography: "body2" }}>
@@ -402,11 +402,11 @@ export default function OrderDetailsInfo({ order }: Props) {
           Commande n'a pas d'adresse de facturation
         </Box>
       )}
-    </>
+    </Grid>
   );
 
   const renderShipping = (
-    <>
+    <Grid className="no-print">
       <CardHeader title="Adresse de Livraison" />
       {order?.shippingAddress ? (
         <Stack spacing={1.5} sx={{ p: 3, typography: "body2" }}>
@@ -454,7 +454,7 @@ export default function OrderDetailsInfo({ order }: Props) {
         </Box>
       )}
 
-      <Stack spacing={1.5} sx={{ p: 3, typography: "body2" }}>
+      <Stack spacing={1.5} sx={{ p: 3, typography: "body2" }} className="no-print">
         <Stack direction="row">
           <Box
             component="span"
@@ -533,7 +533,7 @@ export default function OrderDetailsInfo({ order }: Props) {
           {order?.relayPointCountry}
         </Stack>
       </Stack>
-    </>
+    </Grid>
   );
 
   return (

src/shared/sections/order/refund-order/all/refund-order-table-toolbar.tsx

@@ -5,9 +5,18 @@ import InputAdornment from "@mui/material/InputAdornment";
 import { formHelperTextClasses } from "@mui/material/FormHelperText";
 import Iconify from "@/shared/components/iconify";
 import { usePopover } from "@/shared/components/custom-popover";
-import { IRefundOrderTableFilters, IRefundOrderTableFilterValue } from "@/contexts/types/refundOrder";
+import {
+  IRefundOrderTableFilters,
+  IRefundOrderTableFilterValue,
+} from "@/contexts/types/refundOrder";
 import { DateTimePicker } from "@mui/x-date-pickers";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
 import { exportRefundOrders } from "@/shared/api/refundOrders";
 
 type Props = {
@@ -21,19 +30,21 @@ export default function RefundOrderTableToolbar({
   onFilters,
   dateError,
 }: Props) {
-
   const handleFilterKeyword = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.value.length > 3) {
-        onFilters("keyword", event.target.value);
-      }
-    }, [onFilters]
+      onFilters("keyword", event.target.value);
+    },
+    [onFilters]
   );
 
-
   const handleFilterStartDate = useCallback(
     (newValue: Date | null) => {
-      newValue = newValue ? new Date(new Date(newValue).getTime() - new Date(newValue).getTimezoneOffset() * 60000) : null;
+      newValue = newValue
+        ? new Date(
+            new Date(newValue).getTime() -
+              new Date(newValue).getTimezoneOffset() * 60000
+          )
+        : null;
       onFilters("startDate", newValue);
     },
     [onFilters]
@@ -41,7 +52,12 @@ export default function RefundOrderTableToolbar({
 
   const handleFilterEndDate = useCallback(
     (newValue: Date | null) => {
-      newValue = newValue ? new Date(new Date(newValue).getTime() - new Date(newValue).getTimezoneOffset() * 60000) : null;
+      newValue = newValue
+        ? new Date(
+            new Date(newValue).getTime() -
+              new Date(newValue).getTimezoneOffset() * 60000
+          )
+        : null;
       onFilters("endDate", newValue);
     },
     [onFilters]
@@ -56,7 +72,7 @@ export default function RefundOrderTableToolbar({
     setOpenConfirmExport(false);
     exportRefundOrders(
       filters.refundMethods || [],
-      filters.keyword || '',
+      filters.keyword || "",
       filters.startDate || null,
       filters.endDate || null
     );
@@ -80,7 +96,6 @@ export default function RefundOrderTableToolbar({
           pr: { xs: 2.5, md: 1 },
         }}
       >
-
         <DateTimePicker
           label="Date début"
           value={filters.startDate}
@@ -101,7 +116,8 @@ export default function RefundOrderTableToolbar({
             textField: {
               fullWidth: true,
               error: dateError,
-              helperText: dateError && "Date fin doit être supérieure à la date début",
+              helperText:
+                dateError && "Date fin doit être supérieure à la date début",
             },
           }}
           sx={{
@@ -138,15 +154,16 @@ export default function RefundOrderTableToolbar({
           />
         </Stack>
 
-        {filters.endDate && filters.startDate
-          ? <Button
+        {filters.endDate && filters.startDate ? (
+          <Button
             variant="soft"
             color="primary"
             style={{ marginLeft: "auto", width: "150px", height: "50px" }}
             onClick={handleExportClick}
           >
             Exporter
-          </Button> :
+          </Button>
+        ) : (
           <Button
             variant="soft"
             color="primary"
@@ -155,21 +172,27 @@ export default function RefundOrderTableToolbar({
           >
             Exporter
           </Button>
-          }
+        )}
       </Stack>
 
       <Dialog open={openConfirmExport} onClose={handleCancelExport}>
         <DialogTitle>Confirmer l'export</DialogTitle>
         <DialogContent>
-          Voulez-vous vraiment exporter les commandes de remboursement avec les filtres actuels ?
+          Voulez-vous vraiment exporter les commandes de remboursement avec les
+          filtres actuels ?
           <br />
-          Cela générera un fichier CSV contenant toutes les données correspondant à vos critères.
+          Cela générera un fichier CSV contenant toutes les données
+          correspondant à vos critères.
         </DialogContent>
         <DialogActions>
           <Button onClick={handleCancelExport} color="secondary">
             Annuler
           </Button>
-          <Button onClick={handleConfirmExport} color="primary" variant="contained">
+          <Button
+            onClick={handleConfirmExport}
+            color="primary"
+            variant="contained"
+          >
             Exporter
           </Button>
         </DialogActions>

src/shared/sections/order/view/order-details-view.tsx

@@ -70,13 +70,11 @@ export default function OrderDetailsView({ orderId }: Props) {
   const printRef1 = useRef<HTMLDivElement>(null);
   const printRef2 = useRef<HTMLDivElement>(null);
   const printRef3 = useRef<HTMLDivElement>(null);
-  const printRef4 = useRef<HTMLDivElement>(null);
   const handlePrint = () => {
     if (
       printRef1.current &&
       printRef2.current &&
-      printRef3.current &&
-      printRef4.current
+      printRef3.current
     ) {
       const printWindow = window.open(" ", "_blank");
 
@@ -94,16 +92,12 @@ export default function OrderDetailsView({ orderId }: Props) {
           .join("");
 
         const printContent = `
-          <div class="first-page">
+          <div>
             ${printRef1.current.outerHTML}
             ${printRef3.current.outerHTML}
-          </div>
-          <div class="remaining-content">
             ${printRef2.current.outerHTML}
           </div>
-           <div class="remaining-content">
-            ${printRef4.current.outerHTML}
-          </div>
+
         `;
 
         printWindow.document.write(`
@@ -117,12 +111,6 @@ export default function OrderDetailsView({ orderId }: Props) {
                   .no-print {
                     display: none !important;
                   }
-                  .first-page {
-                    page-break-after: always;
-                  }
-                  .remaining-content {
-                    page-break-before: always;
-                  }
                 }
               </style>
             </head>
@@ -199,12 +187,12 @@ export default function OrderDetailsView({ orderId }: Props) {
                 ) : null}
               </Stack>
             </Grid>
-            <Grid ref={printRef3} xs={12} md={4}>
+            <Grid ref={printRef3} xs={12} md={4} >
               <OrderDetailsInfo order={selectedOrder} />
             </Grid>
           </Grid>
 
-          <Grid container spacing={3} ref={printRef4}>
+          <Grid container spacing={3} className="no-print">
             <Grid xs={12} md={12}>
               {selectedOrder &&
               selectedOrder.refundOrders &&