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 = {