Introduce new filters to draft orders (#5380)

* Introduce filers to draft orders

* Add method to old filters query params

* Remove not used handlers

* Fix lint

* Fix for data range

* Add changeset

* Remove snapshot

* Add mapper

* Improve filters

* Fix query variables

* Update .changeset/silver-items-unite.md

Co-authored-by: Wojciech Mista <[email protected]>

* Fix get date value

* Generate feature flag

* Display new filters base on a feature flag

* Extract messages

* Add tests

---------

Co-authored-by: Wojciech Mista <[email protected]>

.changeset/silver-items-unite.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+List of draft orders now use new filters

.featureFlags/draft_orders_filters.md

@@ -0,0 +1,11 @@
+---
+name: draft_orders_filters
+displayName: Draft orders filtering
+enabled: true
+payload: "default"
+visible: true
+---
+
+![new filters](./images/draft-orders-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,15 +1,20 @@
 // @ts-nocheck
 
-import L78751 from "./images/discounts-list.png"
-import H47779 from "./images/improved_refunds.png"
-import D04851 from "./images/page-filters.png"
-import X74083 from "./images/vouchers-filters.png"
+import V92679 from "./images/discounts-list.png"
+import Z34507 from "./images/draft-orders-filters.png"
+import R14220 from "./images/improved_refunds.png"
+import T12026 from "./images/page-filters.png"
+import Q15387 from "./images/vouchers-filters.png"
 
-const discounts_rules = () => (<><p><img src={L78751} alt="Discount rules"/></p>
+const discounts_rules = () => (<><p><img src={V92679} 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={H47779} alt="Improved refunds"/></p>
+const draft_orders_filters = () => (<><p><img src={Z34507} 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 improved_refunds = () => (<><p><img src={R14220} 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,11 +24,11 @@ const improved_refunds = () => (<><p><img src={H47779} alt="Improved refunds"/><
 </ul>
 
 </>)
-const pages_filters = () => (<><p><img src={D04851} alt="new filters"/>
+const pages_filters = () => (<><p><img src={T12026} 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 vouchers_filters = () => (<><p><img src={X74083} alt="new filters"/>
+const vouchers_filters = () => (<><p><img src={Q15387} 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>
 </>)
@@ -37,6 +42,15 @@ export const AVAILABLE_FLAGS = [{
     enabled: true,
     payload: "default",
   }
+},{
+  name: "draft_orders_filters",
+  displayName: "Draft orders filtering",
+  component: draft_orders_filters,
+  visible: true,
+  content: {
+    enabled: true,
+    payload: "default",
+  }
 },{
   name: "improved_refunds",
   displayName: "Improved refunds",

src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx

@@ -0,0 +1,15 @@
+import { FilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/FilterAPIProvider";
+
+export const useDraftOrderFilterAPIProvider = (): FilterAPIProvider => {
+  const fetchRightOptions = async () => {
+    return [];
+  };
+  const fetchLeftOptions = async () => {
+    return [];
+  };
+
+  return {
+    fetchRightOptions,
+    fetchLeftOptions,
+  };
+};

src/components/ConditionalFilter/API/InitialStateResponse.ts

@@ -31,6 +31,9 @@ export interface InitialState {
   giftCard: ItemOption[];
 }
 
+const isDateField = (name: string) =>
+  ["created", "updatedAt", "startDate", "endDate"].includes(name);
+
 export class InitialStateResponse implements InitialState {
   constructor(
     public category: ItemOption[] = [],
@@ -58,6 +61,10 @@ export class InitialStateResponse implements InitialState {
       return this.attribute[token.name].choices.filter(({ value }) => token.value.includes(value));
     }
 
+    if (isDateField(token.name)) {
+      return token.value;
+    }
+
     if (token.isAttribute()) {
       const attr = this.attribute[token.name];
 

src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts

@@ -133,7 +133,9 @@ export const toPageFetchingParams = (p: PageFetchingParams, c: UrlToken) => {
 
   return p;
 };
-export const getFetchingPrams = (type: "product" | "order" | "discount" | "voucher" | "page") => {
+export const getFetchingPrams = (
+  type: "product" | "order" | "discount" | "voucher" | "page" | "draft-order",
+) => {
   switch (type) {
     case "product":
       return emptyFetchingParams;

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -21,7 +21,7 @@ import { prepareStructure } from "./utils";
 
 export const useUrlValueProvider = (
   locationSearch: string,
-  type: "product" | "order" | "discount" | "voucher" | "page",
+  type: "product" | "order" | "discount" | "voucher" | "page" | "draft-order",
   initialState?:
     | InitialAPIState
     | InitialOrderAPIState

src/components/ConditionalFilter/constants.ts

@@ -348,12 +348,28 @@ export const STATIC_PAGE_OPTIONS: LeftOperand[] = [
   },
 ];
 
+export const STATIC_DRAFT_ORDER_OPTIONS: LeftOperand[] = [
+  {
+    value: "customer",
+    label: "Customer",
+    type: "customer",
+    slug: "customer",
+  },
+  {
+    value: "created",
+    label: "Created",
+    type: "created",
+    slug: "created",
+  },
+];
+
 export const STATIC_OPTIONS = [
   ...STATIC_PRODUCT_OPTIONS,
   ...STATIC_DISCOUNT_OPTIONS,
   ...STATIC_ORDER_OPTIONS,
   ...STATIC_VOUCHER_OPTIONS,
   ...STATIC_PAGE_OPTIONS,
+  ...STATIC_DRAFT_ORDER_OPTIONS,
 ];
 
 export const ATTRIBUTE_INPUT_TYPE_CONDITIONS = {

src/components/ConditionalFilter/context/provider.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 
 import { useDiscountFilterAPIProvider } from "../API/DiscountFiltersAPIProvider";
+import { useDraftOrderFilterAPIProvider } from "../API/DraftOrderFilterAPIProvider";
 import { useInitialOrderState } from "../API/initialState/orders/useInitialOrderState";
 import { useInitialPageState } from "../API/initialState/page/useInitialPageState";
 import { useProductInitialAPIState } from "../API/initialState/useInitialAPIState";
@@ -11,6 +12,7 @@ import { useProductFilterAPIProvider } from "../API/ProductFilterAPIProvider";
 import { useVoucherAPIProvider } from "../API/VoucherFilterAPIProvider";
 import {
   STATIC_DISCOUNT_OPTIONS,
+  STATIC_DRAFT_ORDER_OPTIONS,
   STATIC_ORDER_OPTIONS,
   STATIC_PAGE_OPTIONS,
   STATIC_PRODUCT_OPTIONS,
@@ -149,3 +151,28 @@ export const ConditionalPageFilterProvider: FC<{
     </ConditionalFilterContext.Provider>
   );
 };
+
+export const ConditionalDraftOrderFilterProvider: FC<{
+  locationSearch: string;
+}> = ({ children, locationSearch }) => {
+  const apiProvider = useDraftOrderFilterAPIProvider();
+
+  const valueProvider = useUrlValueProvider(locationSearch, "draft-order");
+  const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_DRAFT_ORDER_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

@@ -3,6 +3,7 @@ import { ConditionOptions } from "./FilterElement/ConditionOptions";
 import { ConditionSelected } from "./FilterElement/ConditionSelected";
 import { ExpressionValue } from "./FilterElement/FilterElement";
 import {
+  creatDraftOrderQueryVariables,
   createPageQueryVariables,
   createProductQueryVariables,
   creatVoucherQueryVariables,
@@ -243,6 +244,63 @@ describe("ConditionalFilter / queryVariables / createPageQueryVariables", () =>
   });
 });
 
+describe("ConditionalFilter / queryVariables / creatDraftOrderQueryVariables", () => {
+  it("should return empty variables for empty filters", () => {
+    // Arrange
+    const filters: FilterContainer = [];
+    const expectedOutput = {};
+    // Act
+    const result = creatDraftOrderQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should create variables with selected filters", () => {
+    // Arrange
+    const filters: FilterContainer = [
+      new FilterElement(
+        new ExpressionValue("customer", "Customer", "customer"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("customer"),
+          new ConditionSelected(
+            { label: "customer1", slug: "customer1", value: "value1" },
+            { type: "text", label: "is", value: "input-1" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+      "AND",
+      new FilterElement(
+        new ExpressionValue("created", "Created", "created"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("customer"),
+          new ConditionSelected(
+            ["2025-02-01", "2025-02-05"],
+            { type: "date.range", label: "between", value: "input-3" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+    ];
+    const expectedOutput = {
+      created: { gte: "2025-02-01", lte: "2025-02-05" },
+      customer: "value1",
+    };
+    // Act
+    const result = creatDraftOrderQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+});
+
 describe("ConditionalFilter / queryVariables / mapStaticQueryPartToLegacyVariables", () => {
   it("should return queryPart if it is not an object", () => {
     // Arrange

src/components/ConditionalFilter/queryVariables.ts

@@ -5,6 +5,7 @@ import {
   DateTimeRangeInput,
   DecimalFilterInput,
   GlobalIdFilterInput,
+  OrderDraftFilterInput,
   PageFilterInput,
   ProductWhereInput,
   PromotionWhereInput,
@@ -93,6 +94,7 @@ const getRangeQueryPartByType = (value: [string, string], type: string) => {
       return { valuesRange: { lte: parseFloat(lte), gte: parseFloat(gte) } };
   }
 };
+
 const getQueryPartByType = (value: string, type: string, what: "lte" | "gte") => {
   switch (type) {
     case "datetime":
@@ -103,6 +105,7 @@ const getQueryPartByType = (value: string, type: string, what: "lte" | "gte") =>
       return { valuesRange: { [what]: parseFloat(value) } };
   }
 };
+
 const createAttributeQueryPart = (
   attributeSlug: string,
   selected: ConditionSelected,
@@ -284,3 +287,15 @@ export const createPageQueryVariables = (value: FilterContainer): PageFilterInpu
     return p;
   }, {} as PageFilterInput);
 };
+
+export const creatDraftOrderQueryVariables = (value: FilterContainer): OrderDraftFilterInput => {
+  return value.reduce((p, c) => {
+    if (typeof c === "string" || Array.isArray(c)) return p;
+
+    p[c.value.value as keyof OrderDraftFilterInput] = mapStaticQueryPartToLegacyVariables(
+      createStaticQueryPart(c.condition.selected),
+    );
+
+    return p;
+  }, {} as OrderDraftFilterInput);
+};