@shipengine/elements 2.20.0 → 2.22.0

package/cjs/elements/labels-grid/hooks/use-labels-grid.cjs

@@ -0,0 +1,246 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var useGetServiceName = require('../../../hooks/use-get-service-name.cjs');
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+var useTrackingStatusFilter = require('./use-tracking-status-filter.cjs');
+var usePager = require('../../../components/pager/usePager.cjs');
+
+const PAGE_SIZE = 20;
+const useLabelsGrid = ({
+  labelStatus,
+  showShipmentIdFilter,
+  showLabelIdFilter,
+  showTrackingStatusFilter,
+  fetchShipments,
+  sortDir
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const initialFilters = {
+    labelId: {
+      enabled: !!showLabelIdFilter,
+      value: ""
+    },
+    shipmentId: {
+      enabled: !!showShipmentIdFilter,
+      value: ""
+    },
+    trackingStatus: {
+      enabled: !!showTrackingStatusFilter,
+      value: []
+    }
+  };
+  const theme = react.useTheme();
+  const {
+    getServiceName
+  } = useGetServiceName.useGetServiceName();
+  const {
+    page,
+    pageSize,
+    pagerProps
+  } = usePager.usePager(PAGE_SIZE);
+  const [filters, setFilters] = React.useState(initialFilters);
+  const clearAllFilters = () => {
+    setFilters(initialFilters);
+  };
+  // This will refresh the pagination when a filter is applied
+  const onSetFilters = newFilters => {
+    pagerProps.onPageSelect(1);
+    setFilters(newFilters);
+  };
+  const hasActiveFilterValue = React.useCallback(value => {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (value !== null && typeof value === "object") {
+      return Object.keys(value).length > 0;
+    }
+    if (typeof value === "string") {
+      return value.trim() !== "";
+    }
+    return Boolean(value);
+  }, []);
+  const isAnyFilterActive = Object.keys(filters).some(key => {
+    const filter = filters[key];
+    return (filter === null || filter === void 0 ? void 0 : filter.enabled) && hasActiveFilterValue(filter === null || filter === void 0 ? void 0 : filter.value);
+  });
+  const isAnyFilterEnabled = Object.keys(filters).some(key => {
+    const filter = filters[key];
+    return filter === null || filter === void 0 ? void 0 : filter.enabled;
+  });
+  React.useEffect(() => {
+    const updatedFilters = {
+      labelId: {
+        enabled: !!showLabelIdFilter,
+        value: ""
+      },
+      shipmentId: {
+        enabled: !!showShipmentIdFilter,
+        value: ""
+      },
+      trackingStatus: {
+        enabled: !!showTrackingStatusFilter,
+        value: []
+      }
+    };
+    setFilters(updatedFilters);
+  }, [showLabelIdFilter, showShipmentIdFilter, showTrackingStatusFilter]);
+  const isTrackingStatusFilterActive = React.useMemo(() => {
+    var _a, _b;
+    return !!(((_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.enabled) && hasActiveFilterValue((_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value));
+  }, [(_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.enabled, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, hasActiveFilterValue]);
+  // Use tracking status filter hook when the filter is active
+  const {
+    labels: trackingFilteredLabels,
+    isLoading: isTrackingFilterLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
+    paginationInfo: statusFilteredPaginationInfo
+  } = useTrackingStatusFilter.useTrackingStatusFilter({
+    currentPage: page,
+    isActive: isTrackingStatusFilterActive,
+    labelStatus,
+    pageSize,
+    shipmentId: ((_c = filters.shipmentId) === null || _c === void 0 ? void 0 : _c.value) || undefined,
+    sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
+    trackingStatusFilters: ((_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value) || []
+  });
+  // Use regular API pagination when tracking status filter is not active
+  const {
+    data: listLabelsData,
+    isLoading: isListLabelsLoading,
+    isError: isListLabelsError
+  } = reactApi.useListLabels({
+    enabled: !isTrackingStatusFilterActive,
+    queryFnParams: {
+      labelStatus,
+      page,
+      pageSize,
+      shipmentId: filters.shipmentId.value || undefined,
+      sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc"
+    }
+  });
+  const labels = React.useMemo(() => {
+    // If tracking status filter is active, use the filtered labels from the hook
+    if (isTrackingStatusFilterActive) {
+      return trackingFilteredLabels.map(label => Object.assign(Object.assign({}, label), {
+        bodyCellStyles: {
+          color: label.status === "voided" ? theme.palette.gray[400] : undefined
+        },
+        serviceName: getServiceName(label)
+      }));
+    }
+    // Otherwise, use the regular API pagination
+    if (!(listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels)) {
+      return [];
+    }
+    // No need to filter by tracking status here since that's handled by useTrackingStatusFilter
+    // when the tracking status filter is active
+    return listLabelsData.labels.map(label => Object.assign(Object.assign({}, label), {
+      bodyCellStyles: {
+        color: label.status === "voided" ? theme.palette.gray[400] : undefined
+      },
+      serviceName: getServiceName(label)
+    }));
+  }, [isTrackingStatusFilterActive, trackingFilteredLabels, listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels, theme.palette.gray, getServiceName]);
+  const {
+    data: listShipmentsData,
+    isFetching: isListShipmentsLoading,
+    isError: isListShipmentsError
+  } = reactApi.useListSalesOrderShipments({
+    // An empty array here should disable the query
+    shipmentIds: fetchShipments ? labels === null || labels === void 0 ? void 0 : labels.map(label => label.shipmentId) : []
+  });
+  const {
+    data: labelFilterData,
+    isError: isLabelFilterError,
+    isInitialLoading: isLabelFilterLoading
+  } = reactApi.useGetLabel(((_e = filters.labelId) === null || _e === void 0 ? void 0 : _e.value) || undefined);
+  const isLabelFilterActive = (_f = filters.labelId) === null || _f === void 0 ? void 0 : _f.value;
+  const isStatusFilteredOut = (status, filter) => {
+    return (filter === null || filter === void 0 ? void 0 : filter.length) && !filter.includes(status);
+  };
+  const getLabelById = labelById => {
+    var _a, _b, _c, _d;
+    // Check if filter by label id is active and there are no errors
+    if (isLabelFilterActive && !isLabelFilterError) {
+      let labelPassFilters = true;
+      // Check if label filtered by id has same status if defined
+      if (labelStatus && labelStatus !== (labelById === null || labelById === void 0 ? void 0 : labelById.status)) {
+        labelPassFilters = false;
+      }
+      // Check if shipment filter has the same value if defined
+      if (((_a = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _a === void 0 ? void 0 : _a.value) !== "" && ((_b = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _b === void 0 ? void 0 : _b.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.shipmentId)) {
+        labelPassFilters = false;
+      }
+      if (
+      // If Label status is voided and voided status is filtered out, don't show the label
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) === "voided" && isStatusFilteredOut("voided", (_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.value) ||
+      //  If Label status is not voided and tracking status is filtered out, don't show the label
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) !== "voided" && (labelById === null || labelById === void 0 ? void 0 : labelById.trackingStatus) && isStatusFilteredOut(labelById.trackingStatus, (_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value)) {
+        labelPassFilters = false;
+      }
+      return labelPassFilters ? labelById : undefined;
+    }
+    return undefined;
+  };
+  const labelFilteredById = getLabelById(labelFilterData);
+  const labelFilteredByIdHasErrors = isLabelFilterActive && (isLabelFilterError || !labelFilteredById);
+  const getGridData = () => {
+    if (labelFilteredById) {
+      return [Object.assign(Object.assign({}, labelFilteredById), {
+        bodyCellStyles: {
+          color: labelFilteredById.status === "voided" ? theme.palette.gray[400] : undefined
+        },
+        serviceName: getServiceName(labelFilteredById)
+      })];
+    } else if (labelFilteredByIdHasErrors) {
+      return [];
+    } else if (labels && fetchShipments && listShipmentsData) {
+      return labels.map(label => {
+        const shipment = listShipmentsData === null || listShipmentsData === void 0 ? void 0 : listShipmentsData.find(shipment => shipment.shipmentId === label.shipmentId);
+        return Object.assign(Object.assign({}, label), {
+          shipmentNumber: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentNumber
+        });
+      });
+    } else if (labels) {
+      return labels;
+    }
+    return [];
+  };
+  return {
+    clearAllFilters,
+    filters,
+    getGridData,
+    hasMoreUnfetchedResults: isTrackingStatusFilterActive ? hasMoreUnfetchedResults : false,
+    isAnyFilterActive,
+    isError: isListLabelsError || isListShipmentsError && fetchShipments,
+    isFetchingNextPage: isTrackingStatusFilterActive ? isFetchingNextPage : false,
+    // Calculate isLoading based on which query should be active
+    isLoading:
+    // Always include label filter loading when label ID filter is active
+    isLabelFilterActive && isLabelFilterLoading || (
+    // For tracking status filter
+    isTrackingStatusFilterActive ? isTrackingFilterLoading // Use tracking filter loading when active
+    : isListLabelsLoading || isListShipmentsLoading && fetchShipments),
+    labels,
+    pageConfig: {
+      currentPage: labelFilteredById ? 1 : isTrackingStatusFilterActive ? statusFilteredPaginationInfo.currentPage : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.page) || 0,
+      pagerProps,
+      pagesAmount: labelFilteredById ? 1 : isTrackingStatusFilterActive ? (statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalPages) || 1 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.pages) || 0,
+      pageSize,
+      showPagination: labelFilteredById ? false : isTrackingStatusFilterActive ? ((statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalCount) || 0) > pageSize : ((listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0) > pageSize,
+      totalElements: labelFilteredById ? 1 : isTrackingStatusFilterActive ? (statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalCount) || 0 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0
+    },
+    setFilters: onSetFilters,
+    shouldShowFilters: isAnyFilterEnabled
+  };
+};
+
+exports.useLabelsGrid = useLabelsGrid;

package/cjs/elements/labels-grid/hooks/use-tracking-status-filter.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+
+const MIN_RESULTS = 20; // Minimum number of filtered results needed to stop fetching
+const MAX_PAGES = 5; // Maximum number of pages to fetch if we have enough results
+const useTrackingStatusFilter = ({
+  isActive,
+  labelStatus,
+  shipmentId,
+  trackingStatusFilters,
+  sortDir,
+  currentPage,
+  pageSize
+}) => {
+  const [allLabels, setAllLabels] = React.useState([]);
+  const {
+    data: infiniteData,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage
+  } = reactApi.useListLabelsInfinite({
+    enabled: isActive,
+    queryFnParams: {
+      labelStatus,
+      pageSize: 100,
+      shipmentId,
+      sortDir
+    }
+  });
+  React.useEffect(() => {
+    if (isActive && (infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages)) {
+      const allLabelsFromPages = infiniteData.pages.flatMap(page => page.labels || []);
+      setAllLabels(allLabelsFromPages);
+    }
+  }, [isActive, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages]);
+  const filteredLabels = React.useMemo(() => {
+    if (!isActive || !trackingStatusFilters.length) {
+      return allLabels;
+    }
+    return allLabels.filter(label => {
+      if (label.status === "voided") {
+        return trackingStatusFilters.includes("voided");
+      }
+      return trackingStatusFilters.includes(label.trackingStatus);
+    });
+  }, [isActive, allLabels, trackingStatusFilters]);
+  const totalCount = filteredLabels.length;
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const paginatedLabels = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, filteredLabels.length);
+    return filteredLabels.slice(startIndex, endIndex);
+  }, [filteredLabels, currentPage, pageSize]);
+  // Check if we have enough data for the next page
+  const hasDataForNextPage = React.useMemo(() => {
+    const nextPageStart = currentPage * pageSize;
+    return nextPageStart < filteredLabels.length;
+  }, [currentPage, pageSize, filteredLabels.length]);
+  // Check if we have more unfetched results
+  const hasMoreUnfetchedResults = React.useMemo(() => {
+    return hasNextPage && (infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages) && infiniteData.pages.length >= MAX_PAGES && filteredLabels.length >= MIN_RESULTS;
+  }, [hasNextPage, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages, filteredLabels.length]);
+  // Trigger fetchNextPage
+  React.useEffect(() => {
+    // Don't fetch if not active or already fetching
+    if (!isActive || isFetchingNextPage) return;
+    // Continue fetching if we don't have minimum results yet
+    if (filteredLabels.length < MIN_RESULTS && hasNextPage) {
+      fetchNextPage();
+      return;
+    }
+    // Continue fetching if we don't have data for the next page
+    if (!hasDataForNextPage && hasNextPage) {
+      fetchNextPage();
+      return;
+    }
+    // Stop fetching if we've reached max pages and have enough results
+    if ((infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages) && infiniteData.pages.length >= MAX_PAGES && filteredLabels.length >= MIN_RESULTS && hasDataForNextPage) {
+      return;
+    }
+    // Otherwise, fetch next page if available
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isActive, currentPage, pageSize, filteredLabels.length, hasNextPage, isFetchingNextPage, fetchNextPage, hasDataForNextPage, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages]);
+  return {
+    allLabelsCount: totalCount,
+    fetchNextPage,
+    filteredLabelsCount: totalCount,
+    hasMorePages: hasNextPage,
+    hasMoreUnfetchedResults,
+    isFetchingNextPage,
+    isLoading: isLoading || filteredLabels.length === 0 && isFetchingNextPage,
+    labels: paginatedLabels,
+    paginationInfo: {
+      currentPage,
+      pageSize,
+      totalCount,
+      totalPages
+    }
+  };
+};
+
+exports.useTrackingStatusFilter = useTrackingStatusFilter;

package/cjs/elements/labels-grid/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var labelsGrid = require('./labels-grid.cjs');
+
+
+
+exports.LabelsGrid = labelsGrid;