@licklist/design 0.44.476-dev.0 → 0.44.476-dev.10

package/dist/table/ReactTableHelperComponent.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("clsx")),u=require("lodash"),c=require("./FilterHelperComponent.js"),d=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),m=require("./PerPageHelperComponent.js"),g=require("@tanstack/react-table");require("./utils/index.js");var f=require("./hooks/useTableQueryOptions.js");var _=r.forwardRef((function(e,_){var v,C,y=e.paginator,h=e.headers,E=e.renderItemFn,b=e.isLoading,S=e.striped,q=void 0===S||S,w=e.bordered,R=void 0===w||w,P=e.displaySearchBar,k=void 0===P||P,F=e.displayPerPageSelect,H=void 0===F||F,T=e.displayShowingSection,x=void 0===T||T,L=e.externalFilters,D=void 0===L?{}:L,O=e.initialOptions,j=void 0===O?{}:O,N=e.columns,I=e.sortableColumns,K=void 0===I?[]:I,M=e.renderRow,A=t.__rest(e,["paginator","headers","renderItemFn","isLoading","striped","bordered","displaySearchBar","displayPerPageSelect","displayShowingSection","externalFilters","initialOptions","columns","sortableColumns","renderRow"]),U=i.useLocation().pathname,B=f.useTableQueryOptions({initialOptions:j,externalFilters:D}),G=B.sortKey,Q=B.sortDirection,V=B.options,z=B.setOptions,J=B.optionsCache,W=B.setOptionsCache,X=B.cachedExternalFilters,Y=B.setCachedExternalFilters,Z=r.useMemo((function(){return N||h?N&&!h?N.map((function(e){var r=e.accessorKey,n=K.includes(r);return t.__assign(t.__assign({},e),{meta:{className:p.getHeaderClasses({isSortable:n,key:r,title:r},G,Q),onClick:n?function(){return re(r)}:void 0}})})):h.map((function(e){return"string"==typeof e?{accessorKey:e.toLowerCase(),header:function(){return e},meta:{className:p.getHeaderClasses(e,G,Q)}}:{accessorKey:(null==e?void 0:e.key)||e.title.toLowerCase(),header:function(){return e.title},meta:{onClick:function(){return e.isSortable&&re(e.key)},className:p.getHeaderClasses(e,G,Q),style:{width:(null==e?void 0:e.width)||"auto"}}}})):[]}),[h,N,G,Q,K]),$=g.useReactTable(t.__assign({data:y.data,columns:Z,getCoreRowModel:g.getCoreRowModel()},A)),ee=$.getHeaderGroups,te=$.getRowModel;r.useImperativeHandle(_,(function(){return{options:V}})),r.useEffect((function(){if(!u.isEqual(J,V)||!u.isEqual(X,D)){W(V),Y(D);var e=new URLSearchParams(t.__assign(t.__assign({},V),D));a.redirectTo([U,e.toString()].join("?"))}}),[U,V,D]);var re=function(e){var r=p.DEFAULT_SORT_DIRECTION;z(G===e?function(n){return r=p.getSortDirection(n.sortDirection,r),t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})}:function(n){return t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})})};return n.createElement("div",{className:l("table-helper",b?"py-5":"py-1")},n.createElement(o.LoaderIndicator,{isLoaded:!b},n.createElement(s.Row,null,n.createElement(s.Col,null,H&&n.createElement(m.PerPageHelperComponent,{onChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(v=null==y?void 0:y.per_page)&&void 0!==v?v:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,k&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){z((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(C=V.filter)&&void 0!==C?C:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:q,bordered:R,hover:!0},n.createElement("thead",null,ee().map((function(e){return n.createElement("tr",{key:e.id},e.headers.map((function(e){var t=e.column.columnDef.meta;return n.createElement("th",{key:e.id,className:null==t?void 0:t.className,onClick:null==t?void 0:t.onClick,style:null==t?void 0:t.style},g.flexRender(e.column.columnDef.header,e.getContext()))})))}))),n.createElement("tbody",null,te().rows.map((function(e,t){return E?E(e.original,t):M(e)}))))))),n.createElement(d.PaginationHelperComponent,{displayShowingSection:x,paginator:y,onPageChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))}));exports.ReactTableHelperComponent=_;

package/dist/table/TableHelperComponent.d.ts

@@ -19,11 +19,10 @@ export interface TableHelperComponentProps {
     };
     initialOptions?: Partial<ITableProps>;
 }
-export declare type ExtendedTableOptions = ITableProps & {
-    [key: string]: any;
-};
 /**
  * TableHelperComponent
+ * @deprecated use new ReactTableHelperComponent
+ * for default tables
  * @param props
  * @constructor
  */

package/dist/table/TableHelperComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAOlF,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CACvC;AAED,oBAAY,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AASxE;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsP7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAQlF,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CACvC;AAUD;;;;;;GAMG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsP7D;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/table/hooks/useTableQueryOptions.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TableComponentProps, ExtendedTableOptions } from "../types";
+export declare const useTableQueryOptions: <T extends object>({ initialOptions, externalFilters, }: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
+    page: number;
+    perPage: number;
+    sortKey: string;
+    sortDirection: string;
+    filter: string;
+    optionsCache: ExtendedTableOptions;
+    setOptionsCache: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
+    options: ExtendedTableOptions;
+    setOptions: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
+    cachedExternalFilters: {
+        [key: string]: any;
+    };
+    setCachedExternalFilters: import("react").Dispatch<import("react").SetStateAction<{
+        [key: string]: any;
+    }>>;
+};
+//# sourceMappingURL=useTableQueryOptions.d.ts.map

package/dist/table/hooks/useTableQueryOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/table/hooks/useTableQueryOptions.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CA2ChC,CAAC"}

package/dist/table/hooks/useTableQueryOptions.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),i=(e(r),e(require("@licklist/plugins/dist/hooks/Query/useQuery"))),s=require("../utils/index.js");exports.useTableQueryOptions=function(e){var o=e.initialOptions,a=void 0===o?{}:o,n=e.externalFilters,l=void 0===n?{}:n,u=i(),p=Number(s.getFilterOptionsValue(u,a,"page")),c=Number(s.getFilterOptionsValue(u,a,"perPage")),g=String(s.getFilterOptionsValue(u,a,"sortKey")),d=String(s.getFilterOptionsValue(u,a,"sortDirection")),O=String(s.getFilterOptionsValue(u,a,"filter")),f=t.__read(r.useState(),2),y=f[0],F=f[1],_=t.__read(r.useState({page:p,perPage:c,sortKey:g,sortDirection:d,filter:O}),2),b=_[0],x=_[1],S=t.__read(r.useState(l),2);return{page:p,perPage:c,sortKey:g,sortDirection:d,filter:O,optionsCache:y,setOptionsCache:F,options:b,setOptions:x,cachedExternalFilters:S[0],setCachedExternalFilters:S[1]}};

package/dist/table/index.d.ts

@@ -4,4 +4,5 @@ export * from "./PerPageHelperComponent";
 export * from "./StaticTable";
 export * from "./TableHelperComponent";
 export * from "./MenuButton";
+export * from "./ReactTableHelperComponent";
 //# sourceMappingURL=index.d.ts.map

package/dist/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}

package/dist/table/types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, CSSProperties } from "react";
+import { TableOptions, ColumnDef, Row as TableRow } from "@tanstack/react-table";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
+export declare type ReactTableHelperRow<T extends object> = TableRow<T>;
+export declare type ExtendedTableOptions = ITableProps & {
+    [key: string]: any;
+};
+export interface TableComponentProps<T extends object> extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
+    paginator?: ILengthAwarePaginator<T>;
+    isLoading?: boolean;
+    striped?: boolean;
+    bordered?: boolean;
+    displaySearchBar?: boolean;
+    displayPerPageSelect?: boolean;
+    displayShowingSection?: boolean;
+    externalFilters?: {
+        [key: string]: any;
+    };
+    initialOptions?: Partial<ITableProps>;
+    sortableColumns?: string[];
+}
+export declare type TableColumnMeta = {
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare type TableComponentPropsWithOldTableData<T extends object> = {
+    headers: ITableHeader[];
+    renderItemFn: (row: T, index: number) => void;
+    columns?: never;
+    renderRow?: never;
+};
+export declare type TableComponentPropsWithReactTableData<T extends object> = {
+    headers?: never;
+    renderItemFn?: never;
+    columns: ColumnDef<T, any>[];
+    renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,QAAQ,EAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAElF,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEhE,oBAAY,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAExE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CACnD,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,iBAAiB,CAAC;IACrE,SAAS,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,oBAAY,mCAAmC,CAAC,CAAC,SAAS,MAAM,IAAI;IAClE,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,oBAAY,qCAAqC,CAAC,CAAC,SAAS,MAAM,IAAI;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACvD,CAAC"}

package/dist/table/utils/index.d.ts

@@ -1,3 +1,4 @@
 import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
+export { flexRender } from "@tanstack/react-table";
 export declare const getFilterOptionsValue: (query: URLSearchParams, initialOptions: Partial<ITableProps>, key: keyof ITableProps) => string | number;
 //# sourceMappingURL=index.d.ts.map

package/dist/table/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAWlF,eAAO,MAAM,qBAAqB,UACzB,eAAe,kBACN,QAAQ,WAAW,CAAC,OAC/B,MAAM,WAAW,oBAWvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAGlF,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAUnD,eAAO,MAAM,qBAAqB,UACzB,eAAe,kBACN,QAAQ,WAAW,CAAC,OAC/B,MAAM,WAAW,oBAWvB,CAAC"}

package/dist/table/utils/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("@licklist/plugins/dist/services/Table/TableService"))&&"object"==typeof e&&"default"in e?e.default:e,r={page:t.DEFAULT_PAGE,perPage:t.DEFAULT_PER_PAGE,sortDirection:t.DEFAULT_SORT_DIRECTION,sortKey:t.DEFAULT_SORT_KEY,filter:""};exports.getFilterOptionsValue=function(e,t,i){return e.get(i)?e.get(i):t[i]?t[i]:r[i]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("@licklist/plugins/dist/services/Table/TableService"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("@tanstack/react-table"),i={page:t.DEFAULT_PAGE,perPage:t.DEFAULT_PER_PAGE,sortDirection:t.DEFAULT_SORT_DIRECTION,sortKey:t.DEFAULT_SORT_KEY,filter:""};Object.defineProperty(exports,"flexRender",{enumerable:!0,get:function(){return r.flexRender}}),exports.getFilterOptionsValue=function(e,t,r){return e.get(r)?e.get(r):t[r]?t[r]:i[r]};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.476-dev.0",
+  "version": "0.44.476-dev.10",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -71,6 +71,7 @@
     "@storybook/react": "6.3.12",
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
+    "@tanstack/react-table": "8.10.6",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "11.2.5",
     "@testing-library/react-hooks": "5.1.0",

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
+
+export default {
+  title: "Customers/Filter",
+  component: CustomerFilter,
+} as Meta;
+
+export const Default: Story<CustomerFilterProps> = () => {
+  const [values, setValues] = useState({
+    first_name: "",
+    last_name: "",
+    email: "",
+    phone: "",
+  });
+
+  return <CustomerFilter values={values} onChange={setValues} />;
+};

package/src/customers/components/filter/CustomerFilter.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { TextField } from "../../../static/TextField";
+
+type CustomerFilterValues = {
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+};
+
+const FILTER_FIELDS = {
+  first_name: "firstName",
+  last_name: "lastName",
+  email: "email",
+  phone: "phone",
+};
+
+export interface CustomerFilterProps {
+  values: CustomerFilterValues;
+  onChange: (values: CustomerFilterValues) => void;
+}
+
+export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
+  const { t } = useTranslation(["Design"]);
+
+  return (
+    <div className="customers-filter d-flex">
+      <div className="d-flex customers-filter-items">
+        {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
+          const label = t(FILTER_FIELDS[filterKeyName]);
+
+          return (
+            <TextField
+              key={filterKeyName}
+              className={clsx("mb-0")}
+              type="text"
+              label={label}
+              value={values[filterKeyName]}
+              onChange={(event) =>
+                onChange({ ...values, [filterKeyName]: event.target.value })
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/customers/components/filter/index.ts

@@ -0,0 +1,2 @@
+export { CustomerFilter } from "./CustomerFilter";
+export type { CustomerFilterProps } from "./CustomerFilter";

package/src/customers/components/index.ts

@@ -0,0 +1 @@
+export * from "./filter";

package/src/customers/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -15,7 +15,6 @@ import { StepsForm } from "./components/StepsForm";
 import { Page, PageBody, PageHeader } from "../page";
 import { StepsFormRef } from "./components/StepsForm/StepsForm";
 import { BookingSummaryFooter } from "./components/BookingSummaryFooter";
-import { sanitizeFormValues } from "./components/BookingSummary/utils";
 import { Order } from "../../types";
 // eslint-disable-next-line max-len
 import { RenderNumberOfPeopleInputComponent } from "../event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent";
@@ -267,10 +266,7 @@ export function Default() {
                 };
 
                 const shouldShowPeopleInput = useMemo(() => {
-                  const { numberOfPeople, ...orderProducts } =
-                    sanitizeFormValues(formValues);
-
-                  const values = Object.values(orderProducts).filter(
+                  const values = Object.values(formValues).filter(
                     Boolean
                   ) as Order[];
                   const filteredValues = values.filter(
@@ -347,6 +343,7 @@ export function Default() {
                             date="29 Sept 2022 at 09:00"
                             menuSteps={menuSteps as any}
                             formValues={formValues}
+                            peopleAmount={peopleAmount}
                             totalWithDiscount={5}
                             eventName="Glam!"
                           />

package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Meta } from "@storybook/react";
 import { BookingSummary } from "./BookingSummary";
 
@@ -139,6 +139,7 @@ export function Default() {
         <BookingSummary
           date="29 Sept 2022 at 09:00"
           menuSteps={menuSteps as any}
+          peopleAmount={5}
           formValues={{
             "3": {
               id: 3,
@@ -161,7 +162,6 @@ export function Default() {
               price: 1,
               productsCategoryId: 1,
             },
-            numberOfPeople: 5,
           }}
           totalWithDiscount={5}
           transactionFee={0.01}

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -6,7 +6,6 @@ import { LoaderIndicator } from "../../../../static";
 import { MenuStep, Order } from "../../../../types";
 import { ProductsByMenuStep } from "./components/ProductsByMenuStep";
 import { BookingSummaryProps } from "./types";
-import { sanitizeFormValues } from "./utils";
 import { SummaryTotal } from "./components/SummaryTotal";
 import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
@@ -20,21 +19,15 @@ export const BookingSummary = ({
   productsWithErrors,
   isLoading,
   hasPeopleInput,
+  peopleAmount,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
 
-  const [numberOfPeople = 0, orderProducts] = useMemo(() => {
-    const { numberOfPeople, ...orderProducts } = sanitizeFormValues(formValues);
+  const orderProducts = useMemo(() => {
+    const products = Object.values(formValues).filter(Boolean) as Order[];
 
-    const products = Object.keys(orderProducts).map(
-      (productId) => orderProducts[productId]
-    ) as Order[];
-
-    return [
-      numberOfPeople as number,
-      products.filter((prod) => prod.quantity !== 0),
-    ];
+    return products?.filter((prod) => prod?.quantity !== 0);
   }, [formValues]);
 
   if (isLoading) {
@@ -67,12 +60,12 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!isNotShownPeopleAmount && numberOfPeople > 0 && (
+              {!isNotShownPeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">
                     <p className="m-0">{t("people")}:</p>
-                    <p className="price">{numberOfPeople}</p>
+                    <p className="price">{peopleAmount}</p>
                   </div>
                 </>
               )}

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Order } from "../../../../../../types";
 import { BookingSummaryProps } from "../../types";
-import { sanitizeFormValues, cartSumByOrderProducts } from "../../utils";
+import { cartSumByOrderProducts } from "../../utils";
 import { SummaryTotalBlock } from "./components/SummaryTotalBlock";
 
 export const SummaryTotal = ({
@@ -15,17 +14,10 @@ export const SummaryTotal = ({
   "formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment"
 >) => {
   const { t } = useTranslation("Design");
-  const [, orderProducts] = useMemo(() => {
-    const { numberOfPeople, ...orderProducts } = sanitizeFormValues(formValues);
+  const orderProducts = useMemo(() => {
+    const products = Object.values(formValues).filter(Boolean);
 
-    const products = Object.keys(orderProducts).map(
-      (productId) => orderProducts[productId]
-    ) as Order[];
-
-    return [
-      numberOfPeople as number,
-      products.filter((prod) => prod.quantity !== 0),
-    ];
+    return products.filter((prod) => prod?.quantity !== 0);
   }, [formValues]);
 
   const cartSum = isFreePayment

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -8,7 +8,7 @@ export type BookingSummaryProps = {
   date: string;
   menuSteps: MenuStep[];
   formValues: {
-    [key: string]: Order | number;
+    [key: string]: Order;
   };
   totalWithDiscount?: number;
   isNotShownPeopleAmount?: boolean;
@@ -18,4 +18,5 @@ export type BookingSummaryProps = {
   isFreePayment?: boolean;
   productsWithErrors?: ProductQuantityCheckResponse["products"];
   isLoading?: boolean;
+  peopleAmount: number;
 };

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -1,25 +1,4 @@
 import { Order } from "../../../../../types";
-import { BookingSummaryProps } from "../types";
-
-export const sanitizeFormValues = (
-  formValues: BookingSummaryProps["formValues"]
-) =>
-  Object.keys(formValues).reduce(
-    (
-      prevValues: {
-        [key: string]: Order | number;
-      },
-      currentKey: string
-    ) => {
-      const value = formValues[currentKey];
-      if (value) {
-        return { ...prevValues, [currentKey]: value };
-      }
-
-      return prevValues;
-    },
-    {}
-  );
 
 export const cartSumByOrderProducts = (orderProducts: Order[]) =>
   orderProducts.reduce((prevSumValue: number, product) => {

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx

@@ -174,7 +174,12 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
 
   return (
     <OrderProcessContext.Provider
-      value={{ orderFormValues, setOrderFormValues, formValues, setFormValues }}
+      value={{
+        orderFormValues,
+        setOrderFormValues,
+        formValues,
+        setFormValues,
+      }}
     >
       {children}
     </OrderProcessContext.Provider>
@@ -403,6 +408,8 @@ const MENU_STEPS = [
 
 export function Default() {
   const { formValues, setFormValues } = useContext(OrderProcessContext);
+  const [peopleAmount] = useState(0);
+
   return (
     <div className="snippet">
       <OrderProcessContextProvider>
@@ -434,6 +441,7 @@ export function Default() {
                 <BookingSummary
                   date="29 Sept 2022 at 09:00"
                   menuSteps={menuSteps as any}
+                  peopleAmount={peopleAmount}
                   formValues={formValues}
                   totalWithDiscount={5}
                   eventName="Glam!"

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -183,7 +183,7 @@ export const RyftPaymentForm = ({
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-3 px-1">
+        <div className="submit-button-wrapper mt-3 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/index.ts

@@ -32,3 +32,4 @@ export * from "./typeahead-helper";
 export * from "./zone";
 export * from "./resource";
 export * from "./virtualized";
+export * from "./customers";

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -99,7 +99,7 @@ export function ProductCategoriesControl({
   });
   const [productCategoryState, setProductCategoryState] = useState<
     Record<number, { price: number; quantity: number }>
-  >([]);
+  >({});
 
   const productCategories: ProductCategory[] = useWatch({
     control,
@@ -168,14 +168,15 @@ export function ProductCategoriesControl({
         return sum + Number(product.totalQuantity);
       }, 0);
 
-      setProductCategoryState({
+      setProductCategoryState((prevState) => ({
+        ...prevState,
         // New added categories will have uniqueId
         // but existing have already assigned Id.
         [productCategory?.id || productCategory.uniqueId]: {
           price,
           quantity,
         },
-      });
+      }));
     });
   }, [productCategories]);
 

package/src/product-set/form/StepsControl.tsx

@@ -45,7 +45,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
 
   const getDefaultStepsValues = (): Step => ({
     id: null,
-    name: "",
+    name: `${t("step")} ${fields.length + 1}`,
     productCategories: [],
     weight: 0,
     hasMap: false,

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -32,7 +32,9 @@ export const SelectMenu = ({
     <div>
       {(!menus || !menus.length) && !isLoading ? (
         <div className="no-results-content">
-          <span className="no-results-found">{t("App:noResultsFound")}</span>
+          <span className="no-results-found">
+            {t("App:noResultsFoundForSelectedDate")}
+          </span>
         </div>
       ) : (
         <>

package/src/sales/notes/NotesTableRow.tsx

@@ -6,7 +6,10 @@ import { useTranslation } from "react-i18next";
 import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
 import { capitalize } from "lodash";
 import { DateTime } from "luxon";
-import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import {
+  DATE_TIME_FORMAT,
+  DATE_TIME_FULL_FORMAT,
+} from "@licklist/core/dist/Config";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table";
 import { Icon } from "../../static";
@@ -25,7 +28,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
   const date = DateTime.fromFormat(
     note.updatedAt,
     DATE_TIME_FULL_FORMAT
-  ).toFormat(DATE_FORMAT);
+  ).toFormat(DATE_TIME_FORMAT);
 
   return (
     <tr onClick={onClick}>
@@ -33,7 +36,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
       <td className="note-author">
         {capitalize(note.user.firstName)} {capitalize(note.user.lastName)}
       </td>
-      <td className="note-date">{date}</td>
+      <td className="text-nowrap">{date}</td>
       <td>
         <div className="controls">
           <span className="btn btn-sm eye">

package/src/sales/notes/note-form/NoteForm.tsx

@@ -19,7 +19,12 @@ export const NoteForm = ({
   onClose,
   defaultValues = { note: "" },
 }: NoteFormProps) => {
-  const { register, handleSubmit } = useForm<FormModel>({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+  } = useForm<FormModel>({
     mode: "onChange",
     defaultValues,
   });
@@ -37,9 +42,18 @@ export const NoteForm = ({
         <Form.Control
           as="textarea"
           rows={5}
+          isInvalid={!!errors.note}
           placeholder={t("writeYourNoteHere")}
-          {...register("note")}
+          {...register("note", {
+            required: {
+              value: true,
+              message: t("Validation:fieldRequired"),
+            },
+          })}
         />
+        <Form.Control.Feedback type="invalid">
+          {errors.note?.message}
+        </Form.Control.Feedback>
       </Form.Group>
 
       <footer className="d-flex">
@@ -52,7 +66,11 @@ export const NoteForm = ({
         >
           {t("close")}
         </Button>
-        <Button type="reset" variant="danger" className="ml-2">
+        <Button
+          variant="danger"
+          className="ml-2"
+          onClick={() => setValue("note", "")}
+        >
           {t("delete")}
         </Button>
       </footer>

package/src/styles/customers/Filter.scss

@@ -0,0 +1,34 @@
+.customers-filter {
+  gap: 0.5rem;
+
+  @include media-breakpoint-down(sm) {
+    label {
+      font-size: 0.8rem;
+    }
+  }
+  
+  @include media-breakpoint-up(md) {
+    label {
+      font-size: 0.9rem;
+    }
+  }
+  
+  @include media-breakpoint-up(lg) {
+    label {
+      font-size: 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    flex-direction: column;
+  }
+
+  .customers-filter-items {
+    gap: 0.5rem;
+  
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
+      gap: 0rem;  
+    }
+  } 
+}

package/src/styles/customers/_index.scss

@@ -0,0 +1 @@
+@import "./Filter.scss";

package/src/styles/iframe-events/Event.scss

@@ -91,11 +91,9 @@
 
   &__select-product {
     width: 10.5rem !important;
-    margin-top: 1rem;
   }
 
   &__unselect-product {
-    margin-top: 1rem;
     width: 10.5rem !important;
     background-color: $snippet-elements-button-color !important;
     color: $snippet-elements-button-background-color !important;

package/src/styles/packages.scss

@@ -35,3 +35,4 @@
 @import "./skeleton";
 @import "./virtualized/";
 @import "./error";
+@import "./customers/";