diff --git a/.changeset/silver-wombats-camp.md b/.changeset/silver-wombats-camp.md new file mode 100644 index 0000000000..d17e071170 --- /dev/null +++ b/.changeset/silver-wombats-camp.md @@ -0,0 +1,6 @@ +--- +"@medusajs/admin-ui": patch +"@medusajs/admin": patch +--- + +feat(admin-ui): Add Sales Channel filter diff --git a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx index ab009a317e..6267477403 100644 --- a/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx +++ b/packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx @@ -74,7 +74,7 @@ const FilterDropdownContainer = ({ Apply - {React.Children.map(children, (child) => { + {React.Children.toArray(children).filter(Boolean).map((child) => { return (
{child} diff --git a/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx b/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx index c751549a09..206d142826 100644 --- a/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx +++ b/packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx @@ -1,13 +1,16 @@ import clsx from "clsx" -import { useAdminRegions } from "medusa-react" +import { useAdminRegions, useAdminSalesChannels } from "medusa-react" import { useEffect, useState } from "react" import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container" import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item" import SaveFilterItem from "../../../components/molecules/filter-dropdown/save-field" import TabFilter from "../../../components/molecules/filter-tab" import PlusIcon from "../../fundamentals/icons/plus-icon" +import FeatureToggle from "../../fundamentals/feature-toggle" +import { useFeatureFlag } from "../../../providers/feature-flag-provider" const REGION_PAGE_SIZE = 10 +const CHANNEL_PAGE_SIZE = 10 const statusFilters = [ "completed", @@ -58,6 +61,9 @@ const OrderFilters = ({ const [tempState, setTempState] = useState(filters) const [name, setName] = useState("") + const { isFeatureEnabled } = useFeatureFlag() + const isSalesChannelsEnabled = isFeatureEnabled("sales_channels") + const handleRemoveTab = (val) => { if (onRemoveTab) { onRemoveTab(val) @@ -116,6 +122,12 @@ const OrderFilters = ({ isLoading: isLoadingRegions, } = useAdminRegions(regionsPagination) + const { sales_channels, isLoading: isLoadingSalesChannels } = + useAdminSalesChannels( + { limit: CHANNEL_PAGE_SIZE }, + { enabled: isSalesChannelsEnabled } + ) + const handlePaginateRegions = (direction) => { if (direction > 0) { setRegionsPagination((prev) => ({ @@ -195,6 +207,21 @@ const OrderFilters = ({ open={tempState.region.open} setFilter={(v) => setSingleFilter("region", v)} /> + {isSalesChannelsEnabled && ( + ({ + value: salesChannel.id, + label: salesChannel.name, + })) || [] + } + isLoading={isLoadingSalesChannels} + filters={tempState.salesChannel.filter} + open={tempState.salesChannel.open} + setFilter={(v) => setSingleFilter("salesChannel", v)} + /> + )} { let hiddenColumns = ["sales_channel"] if (isFeatureEnabled("sales_channels")) { - defaultQueryProps.expand = defaultQueryProps.expand + ",sales_channel" + if (!defaultQueryProps.expand.includes("sales_channel")) { + defaultQueryProps.expand = defaultQueryProps.expand + ",sales_channel" + } hiddenColumns = [] } diff --git a/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts b/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts index 03da8fb7b1..95c3ea6193 100644 --- a/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts +++ b/packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts @@ -25,6 +25,10 @@ interface OrderFilterState { open: boolean filter: null | string[] | string } + salesChannel: { + open: boolean + filter: null | string[] | string + } status: { open: boolean filter: null | string[] | string @@ -94,6 +98,7 @@ const reducer = ( return { ...state, region: action.payload.region, + salesChannel: action.payload.salesChannel, fulfillment: action.payload.fulfillment, payment: action.payload.payment, status: action.payload.status, @@ -236,6 +241,10 @@ export const useOrderFilters = ( open: false, filter: null, }, + salesChannel: { + open: false, + filter: null, + }, date: { open: false, filter: null, @@ -414,6 +423,7 @@ export const useOrderFilters = ( const clean = omit(repObj, ["limit", "offset"]) const repString = qs.stringify(clean, { skipNulls: true }) + const storedString = localStorage.getItem("orders::filters") let existing: null | object = null @@ -499,10 +509,12 @@ const filterStateMap = { payment_status: "payment", created_at: "date", region_id: "region", + sales_channel_id: "salesChannel", } const stateFilterMap = { region: "region_id", + salesChannel: "sales_channel_id", status: "status", fulfillment: "fulfillment_status", payment: "payment_status", @@ -526,6 +538,10 @@ const parseQueryString = ( open: false, filter: null, }, + salesChannel: { + open: false, + filter: null, + }, payment: { open: false, filter: null, @@ -589,6 +605,15 @@ const parseQueryString = ( } break } + case "sales_channel_id": { + if (typeof value === "string" || Array.isArray(value)) { + defaultVal.salesChannel = { + open: true, + filter: value, + } + } + break + } case "payment_status": { if (typeof value === "string" || Array.isArray(value)) { defaultVal.payment = {