Add search to customers

src/customers/components/CustomerList/CustomerList.tsx

@@ -1,4 +1,3 @@
-import Card from "@material-ui/core/Card";
 import {
   createStyles,
   Theme,
@@ -68,7 +67,6 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
     selected,
     isChecked
   }: CustomerListProps) => (
-    <Card>
     <Table>
       <TableHead
         colSpan={numberOfColumns}
@@ -150,7 +148,6 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
         )}
       </TableBody>
     </Table>
-    </Card>
   )
 );
 CustomerList.displayName = "CustomerList";

src/customers/components/CustomerListPage/CustomerListPage.tsx

@@ -1,23 +1,41 @@
 import Button from "@material-ui/core/Button";
-
+import Card from "@material-ui/core/Card";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
+import SearchBar from "@saleor/components/SearchBar";
 import { sectionNames } from "@saleor/intl";
-import { ListActions, PageListProps } from "@saleor/types";
+import {
+  ListActions,
+  PageListProps,
+  SearchPageProps,
+  TabPageProps
+} from "@saleor/types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
 import CustomerList from "../CustomerList/CustomerList";
 
-export interface CustomerListPageProps extends PageListProps, ListActions {
+export interface CustomerListPageProps
+  extends PageListProps,
+    ListActions,
+    SearchPageProps,
+    TabPageProps {
   customers: ListCustomers_customers_edges_node[];
 }
 
 const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
+  currentTab,
   customers,
   disabled,
+  initialSearch,
   onAdd,
+  onAll,
+  onSearchChange,
+  onTabChange,
+  onTabDelete,
+  onTabSave,
+  tabs,
   ...customerListProps
 }) => {
   const intl = useIntl();
@@ -37,11 +55,26 @@ const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
           />
         </Button>
       </PageHeader>
+      <Card>
+        <SearchBar
+          currentTab={currentTab}
+          initialSearch={initialSearch}
+          searchPlaceholder={intl.formatMessage({
+            defaultMessage: "Search Customer"
+          })}
+          tabs={tabs}
+          onAll={onAll}
+          onSearchChange={onSearchChange}
+          onTabChange={onTabChange}
+          onTabDelete={onTabDelete}
+          onTabSave={onTabSave}
+        />
         <CustomerList
           customers={customers}
           disabled={disabled}
           {...customerListProps}
         />
+      </Card>
     </Container>
   );
 };

src/customers/queries.ts

@@ -64,8 +64,15 @@ const customerList = gql`
     $before: String
     $first: Int
     $last: Int
+    $filter: CustomerFilterInput
+  ) {
+    customers(
+      after: $after
+      before: $before
+      first: $first
+      last: $last
+      filter: $filter
     ) {
-    customers(after: $after, before: $before, first: $first, last: $last) {
       edges {
         node {
           ...CustomerFragment

src/customers/types/ListCustomers.ts

@@ -2,6 +2,8 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { CustomerFilterInput } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL query operation: ListCustomers
 // ====================================================
@@ -48,4 +50,5 @@ export interface ListCustomersVariables {
   before?: string | null;
   first?: number | null;
   last?: number | null;
+  filter?: CustomerFilterInput | null;
 }

src/customers/urls.ts

@@ -1,13 +1,27 @@
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
-import { BulkAction, Dialog, Pagination, SingleAction } from "../types";
+import {
+  ActiveTab,
+  BulkAction,
+  Dialog,
+  Filters,
+  Pagination,
+  SingleAction,
+  TabActionDialog
+} from "../types";
 
 export const customerSection = "/customers/";
 
 export const customerListPath = customerSection;
-export type CustomerListUrlDialog = "remove";
+export enum CustomerListUrlFiltersEnum {
-export type CustomerListUrlQueryParams = BulkAction &
+  query = "query"
+}
+export type CustomerListUrlFilters = Filters<CustomerListUrlFiltersEnum>;
+export type CustomerListUrlDialog = "remove" | TabActionDialog;
+export type CustomerListUrlQueryParams = ActiveTab &
+  BulkAction &
+  CustomerListUrlFilters &
   Dialog<CustomerListUrlDialog> &
   Pagination;
 export const customerListUrl = (params?: CustomerListUrlQueryParams) =>

src/customers/views/CustomerList/CustomerList.tsx

@@ -5,6 +5,10 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import ActionDialog from "@saleor/components/ActionDialog";
+import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
+import SaveFilterTabDialog, {
+  SaveFilterTabDialogFormData
+} from "@saleor/components/SaveFilterTabDialog";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -15,16 +19,26 @@ import usePaginator, {
 import { commonMessages } from "@saleor/intl";
 import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
-import CustomerListPage from "../components/CustomerListPage";
+import CustomerListPage from "../../components/CustomerListPage";
-import { TypedBulkRemoveCustomers } from "../mutations";
+import { TypedBulkRemoveCustomers } from "../../mutations";
-import { TypedCustomerListQuery } from "../queries";
+import { TypedCustomerListQuery } from "../../queries";
-import { BulkRemoveCustomers } from "../types/BulkRemoveCustomers";
+import { BulkRemoveCustomers } from "../../types/BulkRemoveCustomers";
 import {
   customerAddUrl,
   customerListUrl,
+  CustomerListUrlDialog,
+  CustomerListUrlFilters,
   CustomerListUrlQueryParams,
   customerUrl
-} from "../urls";
+} from "../../urls";
+import {
+  areFiltersApplied,
+  deleteFilterTab,
+  getActiveFilters,
+  getFilterTabs,
+  getFilterVariables,
+  saveFilterTab
+} from "./filter";
 
 interface CustomerListProps {
   params: CustomerListUrlQueryParams;
@@ -44,20 +58,76 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
   );
   const intl = useIntl();
 
+  const tabs = getFilterTabs();
+
+  const currentTab =
+    params.activeTab === undefined
+      ? areFiltersApplied(params)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+
+  const changeFilterField = (filter: CustomerListUrlFilters) => {
+    reset();
+    navigate(
+      customerListUrl({
+        ...getActiveFilters(params),
+        ...filter,
+        activeTab: undefined
+      })
+    );
+  };
+
   const closeModal = () =>
     navigate(
       customerListUrl({
         ...params,
         action: undefined,
         ids: undefined
-      }),
+      })
-      true
     );
 
+  const openModal = (action: CustomerListUrlDialog, ids?: string[]) =>
+    navigate(
+      customerListUrl({
+        ...params,
+        action,
+        ids
+      })
+    );
+
+  const handleTabChange = (tab: number) => {
+    reset();
+    navigate(
+      customerListUrl({
+        activeTab: tab.toString(),
+        ...getFilterTabs()[tab - 1].data
+      })
+    );
+  };
+
+  const handleTabDelete = () => {
+    deleteFilterTab(currentTab);
+    reset();
+    navigate(customerListUrl());
+  };
+
+  const handleTabSave = (data: SaveFilterTabDialogFormData) => {
+    saveFilterTab(data.name, getActiveFilters(params));
+    handleTabChange(tabs.length + 1);
+  };
+
   const paginationState = createPaginationState(settings.rowNumber, params);
+  const queryVariables = React.useMemo(
+    () => ({
+      ...paginationState,
+      filter: getFilterVariables(params)
+    }),
+    [params]
+  );
 
   return (
-    <TypedCustomerListQuery displayLoader variables={paginationState}>
+    <TypedCustomerListQuery displayLoader variables={queryVariables}>
       {({ data, loading, refetch }) => {
         const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
           maybe(() => data.customers.pageInfo),
@@ -90,6 +160,14 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
               return (
                 <>
                   <CustomerListPage
+                    currentTab={currentTab}
+                    initialSearch={params.query || ""}
+                    onSearchChange={query => changeFilterField({ query })}
+                    onAll={() => navigate(customerListUrl())}
+                    onTabChange={handleTabChange}
+                    onTabDelete={() => openModal("delete-search")}
+                    onTabSave={() => openModal("save-search")}
+                    tabs={tabs.map(tab => tab.name)}
                     customers={maybe(() =>
                       data.customers.edges.map(edge => edge.node)
                     )}
@@ -156,6 +234,19 @@ export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
                       />
                     </DialogContentText>
                   </ActionDialog>
+                  <SaveFilterTabDialog
+                    open={params.action === "save-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleTabSave}
+                  />
+                  <DeleteFilterTabDialog
+                    open={params.action === "delete-search"}
+                    confirmButtonState="default"
+                    onClose={closeModal}
+                    onSubmit={handleTabDelete}
+                    tabName={maybe(() => tabs[currentTab - 1].name, "...")}
+                  />
                 </>
               );
             }}

src/customers/views/CustomerList/filter.ts

@@ -0,0 +1,31 @@
+import { CustomerFilterInput } from "@saleor/types/globalTypes";
+import {
+  createFilterTabUtils,
+  createFilterUtils
+} from "../../../utils/filters";
+import {
+  CustomerListUrlFilters,
+  CustomerListUrlFiltersEnum,
+  CustomerListUrlQueryParams
+} from "../../urls";
+
+export const CUSTOMER_FILTERS_KEY = "customerFilters";
+
+export function getFilterVariables(
+  params: CustomerListUrlFilters
+): CustomerFilterInput {
+  return {
+    search: params.query
+  };
+}
+
+export const {
+  deleteFilterTab,
+  getFilterTabs,
+  saveFilterTab
+} = createFilterTabUtils<CustomerListUrlFilters>(CUSTOMER_FILTERS_KEY);
+
+export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+  CustomerListUrlQueryParams,
+  CustomerListUrlFilters
+>(CustomerListUrlFiltersEnum);

src/customers/views/CustomerList/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomerList";
+export * from "./CustomerList";

src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx

@@ -60,7 +60,7 @@ const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
           currentTab={currentTab}
           initialSearch={initialSearch}
           searchPlaceholder={intl.formatMessage({
-            defaultMessage: "Search Collection"
+            defaultMessage: "Search Draft"
           })}
           tabs={tabs}
           onAll={onAll}

src/types/globalTypes.ts

@@ -370,6 +370,14 @@ export interface ConfigurationItemInput {
   value: string;
 }
 
+export interface CustomerFilterInput {
+  dateJoined?: DateRangeInput | null;
+  moneySpent?: PriceRangeInput | null;
+  numberOfOrders?: IntRangeInput | null;
+  placedOrders?: DateRangeInput | null;
+  search?: string | null;
+}
+
 export interface CustomerInput {
   defaultBillingAddress?: AddressInput | null;
   defaultShippingAddress?: AddressInput | null;
@@ -415,6 +423,11 @@ export interface FulfillmentUpdateTrackingInput {
   notifyCustomer?: boolean | null;
 }
 
+export interface IntRangeInput {
+  gte?: number | null;
+  lte?: number | null;
+}
+
 export interface MenuCreateInput {
   name: string;
   items?: (MenuItemInput | null)[] | null;