@bjsdistribution/dms-client-return 0.1.58-prod → 0.1.59-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.58-prod",
+  "version": "0.1.59-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/common/expand-collapse/index.tsx

@@ -5,6 +5,7 @@ import ChevronUp from '../../assets/icons/ChevronUp';
 interface IProps {
   collapsedContent: React.ReactNode;
   children: React.ReactNode;
+  extraActions?: React.ReactNode;
 }
 
 function CollapsableForm(props: IProps) {
@@ -15,6 +16,7 @@ function CollapsableForm(props: IProps) {
         <CollapsedContent>
           {props.collapsedContent}
           <Container>
+            {props?.extraActions}
             <Text onClick={() => setIsExpanded(prev => !prev)}>
               {isExpanded ? 'COLLAPSE' : 'SHOW'}
             </Text>

package/src/components/order-view/products-info/index.tsx

@@ -5,6 +5,8 @@ import CollapsableForm from '../../../common/expand-collapse';
 import { useOrderDetails, useProductDetails } from '../store';
 import { useLoading } from '../../order-daily-overview/store/store';
 import { useAxios } from '@bjsdistribution/dms-component-library';
+import { notification, Spin } from 'antd';
+import { useState } from 'react';
 
 interface ApiResponse {
   message: string;
@@ -19,6 +21,40 @@ function ProductsInfo({ locationloading }: any) {
   const [data] = useOrderDetails();
   const returnOrder = data;
 
+  const [spinLoading, setSpinLoading] = useState<boolean>(false);
+
+  // Export functionality
+  const { fetchData: callExportCSV } = useAxios<any>({
+    endpoint: `/v1/export/csv/${returnOrder?.id}`,
+    method: 'POST',
+  });
+
+  const handleExportCSV = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSpinLoading(true);
+
+    callExportCSV()
+      .then((res: any) => {
+        const urlToDownload = res?.data?.url || res?.url;
+        if (urlToDownload) {
+          const a = document.createElement('a');
+          a.href = urlToDownload;
+          a.download = `products_export_${returnOrder?.id}.csv`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+        }
+        setSpinLoading(false);
+      })
+      .catch(err => {
+        notification.error({
+          message: 'Failed to export csv',
+          description: err?.message || 'Export error',
+        });
+        setSpinLoading(false);
+      });
+  };
+
   // For API Call
   const [, setProductsData] = useProductDetails();
   const [, setLoading] = useLoading();
@@ -52,8 +88,46 @@ function ProductsInfo({ locationloading }: any) {
     }
   }, [returnOrdersData, loading]);
 
+  const isExportDisabled = !returnOrdersData?.data || returnOrdersData?.data?.length === 0;
+
   return (
-    <CollapsableForm collapsedContent={<CollapsedContent />}>
+    <CollapsableForm
+      collapsedContent={<CollapsedContent />}
+      extraActions={
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            cursor: isExportDisabled ? 'not-allowed' : 'pointer',
+            opacity: isExportDisabled ? 0.5 : 1,
+            marginRight: '16px',
+            backgroundColor: 'rgb(243 243 243)',
+            border: '1px solid #E2E8F0',
+            padding: '6px 14px',
+            borderRadius: '10px',
+            boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+            transition: 'background-color 0.2s',
+          }}
+          onClick={(e) => {
+            if (isExportDisabled) return;
+            handleExportCSV(e);
+          }}
+          onMouseOver={(e) => {
+            if (!isExportDisabled) e.currentTarget.style.backgroundColor = '#E2E8F0';
+          }}
+          onMouseOut={(e) => {
+            if (!isExportDisabled) e.currentTarget.style.backgroundColor = 'rgb(243 243 243)';
+          }}
+        >
+          <span style={{ color: '#475569', fontFamily: 'Lato', fontSize: '13px', fontWeight: 600, whiteSpace: 'nowrap', letterSpacing: '0.3px' }}>
+            EXPORT CSV
+          </span>
+          <span style={{ marginLeft: '6px', display: 'flex', alignItems: 'center' }}>
+            <Spin spinning={spinLoading} size="small" />
+          </span>
+        </div>
+      }
+    >
       <ExpandedContent
         callReturnProducts={callReturnProducts}
         loading={loading}