Introduce new filters to customers list page

.changeset/seven-moons-talk.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+List of customers now uses conditional filters

.featureFlags/customers_filters.md

@@ -0,0 +1,11 @@
+---
+name: customers_filters
+displayName: Customers filtering
+enabled: true
+payload: "default"
+visible: true
+---
+
+![new filters](./images/customers-filters.png)
+Experience the new look and enhanced abilities of new fitering mechanism.
+Easily combine any criteria you want, and quickly browse their values.

.featureFlags/generated.tsx

@@ -1,13 +1,18 @@
 // @ts-nocheck
 
-import V24493 from "./images/discounts-list.png"
-import J49162 from "./images/improved_refunds.png"
+import I57274 from "./images/customers-filters.png"
+import P37622 from "./images/discounts-list.png"
+import D12036 from "./images/improved_refunds.png"
 
-const discounts_rules = () => (<><p><img src={V24493} alt="Discount rules"/></p>
+const customers_filters = () => (<><p><img src={I57274} alt="new filters"/>
+Experience the new look and enhanced abilities of new fitering mechanism.
+Easily combine any criteria you want, and quickly browse their values.</p>
+</>)
+const discounts_rules = () => (<><p><img src={P37622} alt="Discount rules"/></p>
 <p>Apply the new discounts rules to narrow your promotions audience.
 Set up conditions and channels that must be fulfilled to apply defined reward.</p>
 </>)
-const improved_refunds = () => (<><p><img src={J49162} alt="Improved refunds"/></p>
+const improved_refunds = () => (<><p><img src={D12036} alt="Improved refunds"/></p>
 <h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
 <ul>
 <li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>
@@ -19,6 +24,15 @@ const improved_refunds = () => (<><p><img src={J49162} alt="Improved refunds"/><
 </>)
 
 export const AVAILABLE_FLAGS = [{
+  name: "customers_filters",
+  displayName: "Customers filtering",
+  component: customers_filters,
+  visible: true,
+  content: {
+    enabled: true,
+    payload: "default",
+  }
+},{
   name: "discounts_rules",
   displayName: "Discounts rules",
   component: discounts_rules,

src/components/ConditionalFilter/API/CustomerFilterAPIProvider.tsx

@@ -0,0 +1,16 @@
+import { FilterAPIProvider } from "./FilterAPIProvider";
+
+export const useCustomerAPIProvider = (): FilterAPIProvider => {
+  const fetchRightOptions = async () => {
+    return [];
+  };
+
+  const fetchLeftOptions = async () => {
+    return [];
+  };
+
+  return {
+    fetchRightOptions,
+    fetchLeftOptions,
+  };
+};

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -18,7 +18,7 @@ import { prepareStructure } from "./utils";
 
 export const useUrlValueProvider = (
   locationSearch: string,
-  type: "product" | "order" | "discount",
+  type: "product" | "order" | "discount" | "customer",
   initialState?: InitialAPIState | InitialOrderAPIState,
 ): FilterValueProvider => {
   const router = useRouter();

src/components/ConditionalFilter/constants.ts

@@ -68,6 +68,17 @@ export const STATIC_CONDITIONS = {
     { type: "date", label: "greater", value: "input-2" },
     { type: "date.range", label: "between", value: "input-3" },
   ],
+  dateJoined: [
+    { type: "date", label: "lower", value: "input-1" },
+    { type: "date", label: "greater", value: "input-2" },
+    { type: "date.range", label: "between", value: "input-3" },
+  ],
+  numberOfOrders: [
+    { type: "number", label: "is", value: "input-1" },
+    { type: "number", label: "lower", value: "input-1" },
+    { type: "number", label: "greater", value: "input-2" },
+    { type: "number.range", label: "between", value: "input-2" },
+  ],
   authorizeStatus: [
     {
       type: "combobox",
@@ -273,10 +284,26 @@ export const STATIC_ORDER_OPTIONS: LeftOperand[] = [
   },
 ];
 
+export const STATIC_CUSTOMER_OPTIONS: LeftOperand[] = [
+  {
+    value: "dateJoined",
+    label: "Join date",
+    type: "dateJoined",
+    slug: "dateJoined",
+  },
+  {
+    value: "numberOfOrders",
+    label: "Number of orders",
+    type: "numberOfOrders",
+    slug: "numberOfOrders",
+  },
+];
+
 export const STATIC_OPTIONS = [
   ...STATIC_PRODUCT_OPTIONS,
   ...STATIC_DISCOUNT_OPTIONS,
   ...STATIC_ORDER_OPTIONS,
+  ...STATIC_CUSTOMER_OPTIONS,
 ];
 
 export const ATTRIBUTE_INPUT_TYPE_CONDITIONS = {

src/components/ConditionalFilter/context/provider.tsx

@@ -1,3 +1,4 @@
+import { useCustomerAPIProvider } from "@dashboard/components/ConditionalFilter/API/CustomerFilterAPIProvider";
 import React, { FC } from "react";
 
 import { useDiscountFilterAPIProvider } from "../API/DiscountFiltersAPIProvider";
@@ -6,6 +7,7 @@ import { useProductInitialAPIState } from "../API/initialState/useInitialAPIStat
 import { useOrderFilterAPIProvider } from "../API/OrderFilterAPIProvider";
 import { useProductFilterAPIProvider } from "../API/ProductFilterAPIProvider";
 import {
+  STATIC_CUSTOMER_OPTIONS,
   STATIC_DISCOUNT_OPTIONS,
   STATIC_ORDER_OPTIONS,
   STATIC_PRODUCT_OPTIONS,
@@ -90,3 +92,28 @@ export const ConditionalOrderFilterProvider: FC<{
     </ConditionalFilterContext.Provider>
   );
 };
+
+export const ConditionalCustomerFilterProvider: FC<{
+  locationSearch: string;
+}> = ({ children, locationSearch }) => {
+  const apiProvider = useCustomerAPIProvider();
+
+  const valueProvider = useUrlValueProvider(locationSearch, "customer");
+  const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_CUSTOMER_OPTIONS);
+  const containerState = useContainerState(valueProvider);
+  const filterWindow = useFilterWindow();
+
+  return (
+    <ConditionalFilterContext.Provider
+      value={{
+        apiProvider,
+        valueProvider,
+        leftOperandsProvider,
+        containerState,
+        filterWindow,
+      }}
+    >
+      {children}
+    </ConditionalFilterContext.Provider>
+  );
+};

src/components/ConditionalFilter/queryVariables.test.ts

@@ -2,7 +2,11 @@ import { Condition, FilterContainer, FilterElement } from "./FilterElement";
 import { ConditionOptions } from "./FilterElement/ConditionOptions";
 import { ConditionSelected } from "./FilterElement/ConditionSelected";
 import { ExpressionValue } from "./FilterElement/FilterElement";
-import { createProductQueryVariables } from "./queryVariables";
+import {
+  createCustomerQueryVariables,
+  createProductQueryVariables,
+  mapStaticQueryPartToLegacyVariables,
+} from "./queryVariables";
 
 describe("ConditionalFilter / queryVariables / createProductQueryVariables", () => {
   it("should return empty variables for empty filters", () => {
@@ -75,3 +79,108 @@ describe("ConditionalFilter / queryVariables / createProductQueryVariables", ()
     expect(result).toEqual(expectedOutput);
   });
 });
+
+describe("ConditionalFilter / queryVariables / createCustomerQueryVariables", () => {
+  it("should return empty variables for empty filters", () => {
+    // Arrange
+    const filters: FilterContainer = [];
+    const expectedOutput = {};
+    // Act
+    const result = createCustomerQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should create variables with selected filters", () => {
+    // Arrange
+    const filters: FilterContainer = [
+      new FilterElement(
+        new ExpressionValue("dateJoined", "Date joined", "dateJoined"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("dateJoined"),
+          new ConditionSelected(
+            ["2025-02-01", "2025-02-08"],
+            { type: "number.range", label: "between", value: "input-2" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+      "AND",
+      new FilterElement(
+        new ExpressionValue("numberOfOrders", "Number of orders", "numberOfOrders"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("numberOfOrders"),
+          new ConditionSelected(
+            ["1", "100"],
+            { type: "number.range", label: "between", value: "input-2" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+    ];
+    const expectedOutput = {
+      dateJoined: { gte: "2025-02-01", lte: "2025-02-08" },
+      numberOfOrders: { gte: "1", lte: "100" },
+    };
+    // Act
+    const result = createCustomerQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+});
+
+describe("ConditionalFilter / queryVariables / mapStaticQueryPartToLegacyVariables", () => {
+  it("should return queryPart if it is not an object", () => {
+    // Arrange
+    const queryPart = "queryPart";
+    const expectedOutput = "queryPart";
+
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform range input to legacy format", () => {
+    // Arrange
+    const queryPart = { range: { lte: "value" } };
+    const expectedOutput = { lte: "value" };
+
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform eq input to legacy format", () => {
+    // Arrange
+    const queryPart = { eq: "value" };
+    const expectedOutput = "value";
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform oneOf input to legacy format", () => {
+    // Arrange
+    const queryPart = { oneOf: ["value1", "value2"] };
+    const expectedOutput = ["value1", "value2"];
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+});

src/components/ConditionalFilter/queryVariables.ts

@@ -1,5 +1,6 @@
 import {
   AttributeInput,
+  CustomerFilterInput,
   DateRangeInput,
   DateTimeFilterInput,
   DateTimeRangeInput,
@@ -57,6 +58,27 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart =>
 
   return value;
 };
+
+export const mapStaticQueryPartToLegacyVariables = (queryPart: StaticQueryPart) => {
+  if (typeof queryPart !== "object") {
+    return queryPart;
+  }
+
+  if ("range" in queryPart) {
+    return queryPart.range;
+  }
+
+  if ("eq" in queryPart) {
+    return queryPart.eq;
+  }
+
+  if ("oneOf" in queryPart) {
+    return queryPart.oneOf;
+  }
+
+  return queryPart;
+};
+
 const getRangeQueryPartByType = (value: [string, string], type: string) => {
   const [gte, lte] = value;
 
@@ -199,3 +221,24 @@ export const createOrderQueryVariables = (value: FilterContainer) => {
     return p;
   }, {} as OrderQueryVars);
 };
+
+export const createCustomerQueryVariables = (value: FilterContainer): CustomerFilterInput => {
+  return value.reduce((p, c) => {
+    if (typeof c === "string" || Array.isArray(c)) return p;
+
+    if (c.value.type === "numberOfOrders" && c.condition.selected.conditionValue?.label === "is") {
+      p["numberOfOrders"] = {
+        gte: Number(c.condition.selected.value),
+        lte: Number(c.condition.selected.value),
+      };
+
+      return p;
+    }
+
+    p[c.value.value as keyof CustomerFilterInput] = mapStaticQueryPartToLegacyVariables(
+      createStaticQueryPart(c.condition.selected),
+    );
+
+    return p;
+  }, {} as CustomerFilterInput);
+};