@bjsdistribution/dms-client-return 0.0.2 → 0.0.3

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -1,215 +1,149 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   ApplyButton,
-  // DatePickerWrap,
   FilterColumn,
   FilterRow,
   Label,
   LeftColumn,
-  // RangeSelect,
   RightColumn,
-  StyledAntSelect,
   Wrapper,
 } from './Styledfilters';
-// import {
-//   displayFormattedDate,
-//   // overviewFiltersReducerAtom,
-//   lastSundayDate,
-//   filtersReducerAtom,
-//   usefilterApplied,
-// } from './FilterStore';
-import { atom } from 'jotai';
-// import {
-//   allCustomerData,
-//   usePrevSelectedClients,
-//   useSelectedClients,
-//   useSelectedFilter,
-//   useSelectedSubClients,
-// } from '../store';
-// import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import { ApiResponse } from '../../readyforinvoice/types';
-// import { DatePicker, Tooltip } from 'antd';
-// import dayjs from 'dayjs';
-// import { compareArrays, prepareData } from '../utils';
-// import { useReadyForInvoiceView } from '../../readyforinvoice/store';
-// import { emailFiltersReducerAtom } from '../../emailInvoice/EmailFilterStore';
+import { atom, useAtom } from 'jotai';
+import { useActionType, useCustomerData, useLocationData } from '../../store';
+import { filtersReducerAtom } from './filterStore';
+import {
+  useSelectedAction,
+  useSelectedClient,
+  useSelectedLocation,
+  useTableName,
+} from '../store/store';
+import styled from 'styled-components';
+import { Select } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
+
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  // const [, setFilterAplied] = usefilterApplied();
-  // const [selectedFilter] = useSelectedFilter();
-  // const [, dispatchEmailFilters] = useAtom(emailFiltersReducerAtom);
-
-  // const [, dispatchOverviewFilters] = useAtom(overviewFiltersReducerAtom);
-  // const [, dispatchFilters] = useAtom(filtersReducerAtom);
-  // const [
-  //   readyForInvoiceView,
-  //   setReadyForInvoiceView,
-  // ] = useReadyForInvoiceView();
-  // const [prevSelectedDate, setPrevSelectedDate] = useState<
-  //   Date | string | null
-  // >(lastSundayDate); // for comparison
-  // const [selectedDate, setDate] = useState<Date | string | null>(
-  //   lastSundayDate
-  // );
-  // const [customerData, setCustomerData] = allCustomerData();
-
-  // const [
-  //   prevSelectedClients,
-  //   setPrevSelectedClients,
-  // ] = usePrevSelectedClients();
-
-  // const [selectedClients, setClients] = useSelectedClients();
-
-  // const [subAccounts, setSubaccounts] = useState<any>([]);
-
-  // const [selectedSubClients, setSelectedSubClients] = useSelectedSubClients();
-
-  // const [, setIsClicked] = useAtom(clickedState);
-
-  //API
-  // const { data: fetchedStaticData, loading: loading } = useApiHook<ApiResponse>(
-  //   {
-  //     endpoint: `/customer/`,
-  //     method: 'GET',
-  //     pagination: { page: 1, per_page: 50 },
-  //   }
-  // );
-
-  // useEffect(() => {
-  //   if (!loading) {
-  //     setCustomerData(fetchedStaticData?.data);
-  //   }
-  // }, [loading]);
-
-  // const clientOptions = customerData
-  //   ?.filter((x: any) => x.id === x?.parent_id || x?.parent_id === null)
-  //   ?.map((option: any) => ({
-  //     label: option?.name?.charAt(0)?.toUpperCase() + option?.name?.slice(1),
-  //     value: option?.id,
-  //   }));
-
-  // const selectedClientValues = selectedClients?.map(item => item?.value);
-  // const prevSelectedClientValues = prevSelectedClients?.map(
-  //   item => item?.value
-  // );
-
-  // const subAccountData = customerData
-  //   ?.filter(item => selectedClientValues?.includes(item?.parent_id))
-  //   ?.filter(x => x.id !== x.parent_id);
-
-  // const preparedData = prepareData(clientOptions, subAccountData);
-
-  // const subAccountOptions = preparedData?.filter(
-  //   (item: any) => item?.options?.length > 0
-  // );
-
-  // const handleDateChange: DatePickerProps['onChange'] = (date, _dateString) => {
-  //   setFilterAplied(true);
-  //   const newDate = date?.format('YYYY-MM-DDTHH:mm:ss');
-  //   if (newDate !== undefined) {
-  //     setDate(newDate);
-  //   } else {
-  //     setDate(null);
-  //   }
-  // };
-
-  // const handleCustomerChange = (_label: any, value: any) => {
-  //   if (value.length === 0) {
-  //     setReadyForInvoiceView(undefined);
-  //     setPrevSelectedClients(value);
-  //     dispatchOverviewFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //   }
-  //   setClients(value);
-  // };
-
-  // const onChangeSubAccount = (value: any) => {
-  //   setSubaccounts(value);
-  // };
-
-  // const ApplyFilters = () => {
-  //   setIsClicked(true);
-  //   if (
-  //     readyForInvoiceView !== 'client' &&
-  //     selectedClientValues?.length === 0
-  //   ) {
-  //     console.log('inside if rfiview');
-  //     dispatchOverviewFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //   }
-  //   if (selectedClientValues?.length > 0) {
-  //     console.log('inside if rfiview asdfasdf');
-  //     dispatchFilters({
-  //       type: 'SET_CUSTOMER_FILTER',
-  //       payload: selectedClientValues,
-  //     });
-  //     dispatchFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //     if (readyForInvoiceView !== 'client') {
-  //       setReadyForInvoiceView('client');
-  //     }
-  //   }
-  //   dispatchEmailFilters({
-  //     type: 'SET_CUSTOMER_FILTER',
-  //     payload: selectedClientValues,
-  //   });
-  //   dispatchEmailFilters({
-  //     type: 'SET_DATE_FILTERS',
-  //     payload: selectedDate,
-  //   });
-
-  //   // need to update prev selected clients state for comparison
-  //   setPrevSelectedClients(selectedClients);
-  //   setPrevSelectedDate(selectedDate);
-  //   setSelectedSubClients(subAccounts);
-  //   if (selectedClients?.length === 0) {
-  //     setIsClicked(false);
-  //   }
-  // };
-
-  // const isDifferent = () => {
-  //   let actualDate = null;
-  //   let isDateDiff;
-  //   if (selectedDate !== null) {
-  //     actualDate = new Date(selectedDate);
-  //   }
-  //   if (prevSelectedDate !== null && actualDate !== null) {
-  //     isDateDiff =
-  //       actualDate.getTime() !== new Date(prevSelectedDate).getTime();
-  //   }
-  //   if (prevSelectedDate !== null && actualDate === null) {
-  //     isDateDiff = false;
-  //   }
-  //   const isClientDiff = compareArrays(
-  //     selectedClientValues,
-  //     prevSelectedClientValues
-  //   );
-  //   const isSubAccountDiff = compareArrays(subAccounts, selectedSubClients);
-  //   const isSame = isDateDiff || isClientDiff || isSubAccountDiff;
-  //   return !isSame;
-  // };
-  const ActionOptions = [
-    { label: 'RTS', value: 'rt' },
-    { label: 'Dispose', value: 'dispose' },
-    { label: 'Pending', value: 'pending' },
-    { label: 'Re-allocated', value: 're-allocate' },
-    { label: 'Re-Del', value: 're-del' },
-    { label: 'Re-Recycle', value: 're-recycle' },
-    { label: 'Unknown', value: 'unknown' },
-  ];
-
-  const ReturnLocationOptions = [
-    { label: 'bedkingdom wf14 0dq ', value: 'bedkingdom' },
-    { label: 'cotswold returns', value: 'cotswold-returns' },
-    { label: 'appliance house c/o hdl', value: 'appliance' },
-  ];
+  const [customers] = useCustomerData();
+  const [actionType] = useActionType();
+  const [locationData] = useLocationData();
+  const [filteredLocationOptions, setFilteredLocationOptions] = useState([]);
+  const [getUuid, setUuid] = useState<any>();
+  const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
+  const [, dispatch] = useAtom(filtersReducerAtom);
+  const [
+    selectedLocationValue,
+    setSelectedLocationValue,
+  ] = useSelectedLocation();
+  const [selectedClientId, setSelectedClient] = useSelectedClient();
+  const [, setClientLabel] = useTableName();
+  const [name, setName] = useState<string>();
+  const [isButtonEnabled, setIsButtonEnabled] = useState(false);
+
+  //client options
+  const clientOptions = customers?.map((option: any) => ({
+    label:
+      option?.customer_name?.charAt(0)?.toUpperCase() +
+      option?.customer_name?.slice(1),
+    value: `${option?.id}_${option?.uuid}`,
+    id: option?.id,
+    uuid: option?.uuid,
+  }));
+
+  const actionTypeOptions = actionType?.map((option: any) => ({
+    label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
+    value: option?.id,
+  }));
+
+  const LocationOptions = locationData?.map((option: any) => ({
+    label: option?.location_name,
+    value: option?.customer_id,
+  }));
+
+  //client change
+  const handleSelectChange = (value: unknown, option: DefaultOptionType) => {
+    console.log(value, 'value');
+    const selectedLabel = option?.label as string;
+    const selectedValue = option?.id as number;
+    const selectedUuids = option?.uuid as string;
+    setSelectedClient(selectedValue);
+    setName(selectedLabel);
+    localStorage.setItem('clientName', selectedLabel);
+
+    const filteredSubLocations = locationData
+      ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
+      .map((subCat: any) => ({
+        label: subCat?.location_name,
+        value: subCat?.customer_id,
+      }));
+
+    setFilteredLocationOptions(filteredSubLocations);
+    setUuid('');
+  };
+
+  useEffect(() => {}, [getUuid, filteredLocationOptions]);
+
+  //location change
+  const handleLocationChange = (value: unknown, option: DefaultOptionType) => {
+    const selectedLabel = option?.label as string;
+    console.log(value, 'value');
+    setSelectedLocationValue(selectedLabel);
+
+    if (selectedLocationValue === selectedLabel) {
+      dispatch({
+        type: 'CLEAR_ALL_FILTERS',
+        payload: null,
+      });
+    }
+  };
+
+  //action type
+  const handleActionClick = (value: any) => {
+    setSelectedFilterValue(value);
+    if (selectedFilterValue === value) {
+      dispatch({
+        type: 'CLEAR_ALL_FILTERS',
+        payload: null,
+      });
+    }
+  };
+
+  //Apply filters
+  const applyFilters = () => {
+    if (storedName) {
+      setClientLabel(storedName);
+    }
+    if (selectedClientId) {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: selectedClientId,
+      });
+    }
+    if (selectedFilterValue) {
+      dispatch({
+        type: 'SET_ACTIONS_FILTER',
+        payload: selectedFilterValue,
+      });
+    }
+
+    if (selectedLocationValue) {
+      dispatch({
+        type: 'SET_LOCATION_FILTER',
+        payload: selectedLocationValue,
+      });
+    }
+  };
+
+  const storedName = localStorage.getItem('clientName');
+  useEffect(() => {
+    if (selectedClientId || selectedFilterValue || selectedLocationValue) {
+      setIsButtonEnabled(true);
+    } else {
+      setIsButtonEnabled(false);
+    }
+  }, [storedName, selectedFilterValue, selectedLocationValue]);
+
+  console.log('check', storedName, selectedFilterValue, selectedLocationValue);
 
   return (
     <Wrapper>
@@ -218,55 +152,58 @@ function SelectionFilter() {
           <FilterColumn>
             <Label>Clients</Label>
             <StyledAntSelect
-              options={[]}
+              options={clientOptions}
               placeholder="Select Client Name"
-              onChange={() => {}}
-              mode="multiple"
+              onChange={handleSelectChange}
               style={{ minWidth: '14vw' }}
+              allowClear
+              value={name}
             />
           </FilterColumn>
 
           <FilterColumn>
             <Label>Action Type</Label>
             <StyledAntSelect
-              options={ActionOptions}
+              options={actionTypeOptions}
               placeholder="Select Action Type"
-              // value={""}
-              onChange={() => {}}
+              value={selectedFilterValue}
+              onChange={handleActionClick}
               style={{ minWidth: '14vw' }}
-              // style={{ width: '18vw', overflow: 'hidden' }}
-              mode="multiple"
-              // maxTagCount={0}
-              // maxTagPlaceholder={(omittedValues: any) => (
-              //   <Tooltip
-              //     overlayStyle={{ pointerEvents: 'none' }}
-              //     title={omittedValues
-              //       .map(({ label }: any) => label)
-              //       .join(', ')}
-              //   >
-              //     <span>{`${omittedValues.length} selected`}</span>
-              //   </Tooltip>
-              // )}
+              allowClear
             />
           </FilterColumn>
 
           <FilterColumn>
             <Label>Location </Label>
             <StyledAntSelect
-              options={ReturnLocationOptions}
+              options={
+                filteredLocationOptions?.length > 0
+                  ? filteredLocationOptions
+                  : LocationOptions
+              }
+              value={selectedLocationValue}
               placeholder="Select Location"
-              onChange={() => {}}
-              mode="multiple"
+              onChange={handleLocationChange}
               style={{ minWidth: '14vw' }}
+              allowClear
             />
           </FilterColumn>
         </LeftColumn>
         <RightColumn>
-          <ApplyButton colors="secondary">Apply</ApplyButton>
+          <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>
+            Apply
+          </ApplyButton>
         </RightColumn>
       </FilterRow>
     </Wrapper>
   );
 }
 
+const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+`;
+
 export default SelectionFilter;

package/src/components/order-daily-overview/header-filters/Styledfilters.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@bjsdistribution/dms-component-library';
+// import { Button } from '@bjsdistribution/dms-component-library';
 import { Select } from 'antd';
 import styled from 'styled-components';
 
@@ -26,7 +26,7 @@ export const CoverPage = styled.div`
   border: 1px solid #e3e3e3;
   background: #fff;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-  padding:  20px 20px 20px 20px;
+  padding: 20px 20px 20px 20px;
   top: -60px;
 `;
 export const StatusPanel = styled.div`
@@ -92,7 +92,7 @@ export const Wrapper = styled.div`
   gap: 15px;
   flex: 1 0 0;
   border-radius: 15px;
-  background: #F8FAFC;
+  background: #f8fafc;
 `;
 
 export const StyledAntSelect = styled(Select)`
@@ -190,13 +190,25 @@ export const RangeSelect = styled.div`
   color: #8e8a85;
 `;
 
-export const ApplyButton = styled(Button)`
-  border-radius: 15px !important;
+export const ApplyButton = styled.button`
+  border-radius: 15px;
   display: flex;
-  padding: 7px 12px !important;
+  padding: 7px 12px;
   justify-content: center;
   align-items: center;
-  font-size: 14px !important;
+  font-size: 14px;
   font-family: 'Lato', sans-serif;
   background: transparent;
+  color: #3a3620;
+  border: 1px solid #3a3630;
+
+  &:not(:disabled):hover {
+    background: #feba30;
+  }
+
+  &:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 `;

package/src/components/order-daily-overview/header-filters/filterStore.ts

@@ -0,0 +1,145 @@
+import { atom, useAtom } from 'jotai';
+// import { formatDate } from '../shared/utlis';
+import { format } from 'date-fns';
+
+const date = atom(new Date());
+export const usedate = () => {
+  return useAtom(date);
+};
+
+interface Filter {
+  field: string;
+  op: string;
+  value: any;
+}
+
+interface Pagination {
+  page: number;
+  per_page: number;
+}
+
+interface FilterState {
+  'x-filters': Filter[];
+  'x-pagination': Pagination;
+}
+// let todayDate = new Date();
+const initialState: FilterState = {
+  'x-filters': [
+    // {
+    //   field: 'action_date',
+    //   op: '>=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
+    // },
+    // {
+    //   field: 'action_date',
+    //   op: '<=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
+    // },
+    // { field: 'status', op: 'count', value: '' },
+  ],
+  'x-pagination': { page: 1, per_page: 50 },
+};
+
+const filterReducer = (state: FilterState, action: any): FilterState => {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(
+            f => f.field !== 'action_date' && f.field !== 'status'
+          ),
+          {
+            field: 'action_date',
+            op: '>=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T00:00:00+00:00`,
+          },
+          {
+            field: 'action_date',
+            op: '<=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T23:59:59+00:00`,
+          },
+          { field: 'status', op: 'count', value: '' },
+        ],
+      };
+
+    case 'SET_CLIENT_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'order.customer_id'),
+          {
+            field: 'order.customer_id',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
+
+    case 'SET_ACTIONS_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(
+            f => f.field !== 'product_return_action_id'
+          ),
+          {
+            field: 'product_return_action_id',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
+
+    case 'SET_LOCATION_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'return_location'),
+          {
+            field: 'return_location',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
+
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+    default:
+      return state;
+  }
+};
+
+const filtersStateAtom = atom(initialState);
+
+export const filtersReducerAtom = atom(
+  get => get(filtersStateAtom),
+  (get, set, action) =>
+    set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))
+);