@licklist/design 0.44.484 → 0.44.485-dev.0

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.484",
+  "version": "0.44.485-dev.0",
   "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/events/event-statistic-modal/EventStatisticModal.tsx

@@ -11,7 +11,6 @@ export type EventStatisticModalProps = {
   setIsOpen: (value: boolean) => void;
   eventStatistic?: EventStatistic | null;
   title?: string;
-  date?: string;
 };
 
 export const EventStatisticModal = ({
@@ -19,11 +18,9 @@ export const EventStatisticModal = ({
   setIsOpen,
   eventStatistic,
   title,
-  date,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
-  const data = useTableData(eventStatistic, date);
-
+  const data = useTableData(eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -7,10 +7,7 @@ import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventSta
 import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
 import { StaticTableData } from "../../../table";
 
-export const useTableData = (
-  eventStatistic: EventStatistic | null,
-  date: string
-) => {
+export const useTableData = (eventStatistic: EventStatistic | null) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
   const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
@@ -31,17 +28,14 @@ export const useTableData = (
     return t(key);
   };
 
-  const transformStatisticToTableRows = (
-    statistic: EventStatistic | null,
-    date: string
-  ) => {
+  const transformStatisticToTableRows = (statistic: EventStatistic | null) => {
     if (!statistic) {
       return [];
     }
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(statistic, date).forEach(
+    convertEventStatisticToTableData(statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -83,7 +77,7 @@ export const useTableData = (
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(eventStatistic, date));
+    setTableRows(transformStatisticToTableRows(eventStatistic));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventStatistic]);
 

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,6 +1,4 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import { DateTime } from "luxon";
-import { DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 
 export const TRANSLATION_KEYS = {
   shortQuantity: "shortQuantity",
@@ -9,8 +7,7 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
-  eventStatistic: EventStatistic,
-  date: string
+  eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
   let totalQuantity = 0;
@@ -28,49 +25,49 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  const formattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_TIME_FULL_FORMAT);
+  Object.values(eventStatistic?.productCategorySummary)?.forEach(
+    (categories) => {
+      categories?.forEach(
+        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+          let quantity = 0;
 
-  eventStatistic?.productCategorySummary?.[formattedDate]?.forEach(
-    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-      let quantity = 0;
+          totalAmount += totalPerCategory || 0;
 
-      totalAmount += totalPerCategory || 0;
+          tableDataArray.push({
+            name: categoryName,
+            key: `${eventId}.${categoryName}`,
+            isBold: true,
+            isHeader: true,
+            quantity: TRANSLATION_KEYS.shortQuantity,
+            total: TRANSLATION_KEYS.total,
+          });
 
-      tableDataArray.push({
-        name: categoryName,
-        key: `${eventId}.${categoryName}`,
-        isBold: true,
-        isHeader: true,
-        quantity: TRANSLATION_KEYS.shortQuantity,
-        total: TRANSLATION_KEYS.total,
-      });
+          productsSummary?.forEach(
+            ({ productsSold, name, totalQuantity, total }) => {
+              quantity += productsSold;
 
-      productsSummary?.forEach(
-        ({ productsSold, name, totalQuantity, total }) => {
-          quantity += productsSold;
+              tableDataArray.push({
+                name,
+                key: `${eventId}.${categoryName}.${name}`,
+                quantity: totalQuantity
+                  ? `${productsSold} / ${totalQuantity}`
+                  : String(productsSold),
+                total: String(total),
+              });
+            }
+          );
 
           tableDataArray.push({
-            name,
-            key: `${eventId}.${categoryName}.${name}`,
-            quantity: totalQuantity
-              ? `${productsSold} / ${totalQuantity}`
-              : String(productsSold),
-            total: String(total),
+            name: TRANSLATION_KEYS.totalPerCategory,
+            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+            quantity,
+            total: totalPerCategory,
+            isBold: true,
           });
+
+          totalQuantity += quantity;
         }
       );
-
-      tableDataArray.push({
-        name: TRANSLATION_KEYS.totalPerCategory,
-        key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-        quantity,
-        total: totalPerCategory,
-        isBold: true,
-      });
-
-      totalQuantity += quantity;
     }
   );
 

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -110,7 +110,6 @@ export const PaymentPage = ({
           onCloseButtonClick={isIframePayment ? onGoBack : undefined}
         >
           <PaymentTimer />
-
           <div className="d-flex align-items-center justify-content-center w-100">
             {t("paymentDetails")}
           </div>

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/sales/notes/NotesTableRow.tsx

@@ -7,8 +7,8 @@ import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
 import { capitalize } from "lodash";
 import { DateTime } from "luxon";
 import {
-  DATE_TIME_FULL_FORMAT,
   DATE_TIME_FORMAT,
+  DATE_TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config";
 import { getClientTimeZone } from "@licklist/core/dist/Services";
 import { ConfirmModal } from "../../modals";

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/packages.scss

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