@licklist/design 0.44.489 → 0.44.490

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { TextField } from "../../../static/TextField";
+
+type CustomerFilterValues = {
+  name: string;
+  email: string;
+  phone: string;
+};
+
+const FILTER_FIELDS = {
+  name: "name",
+  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", "col-4", "customer-filter")}
+              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/index.ts

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

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
@@ -10,11 +11,26 @@ export default {
   title: "Sales/Guest Profile/Previous Bookings",
 } as Meta;
 
-export const Default = (args) => (
-  <div>
-    <PreviousBookings {...args} />
-  </div>
-);
+export const Default = (args) => {
+  const useProviderLink = boolean("useProviderLink", true);
+
+  const renderOrderTitleLinkByProvider = (order: Order) => {
+    return (
+      <a href={`/some_href/${order.id}`}>{order[order.orderableType]?.name}</a>
+    );
+  };
+
+  return (
+    <div>
+      <PreviousBookings
+        {...args}
+        renderOrderTitleLinkByProvider={
+          useProviderLink ? renderOrderTitleLinkByProvider : undefined
+        }
+      />
+    </div>
+  );
+};
 
 Default.args = {
   orders: [
@@ -43,6 +59,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 1,
       event: {
         id: 1,
         name: "testEvent1",
@@ -79,6 +97,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 2,
       event: {
         id: 2,
         name: "testEvent2",
@@ -128,6 +148,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -156,6 +178,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -184,6 +208,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -212,6 +238,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -239,6 +267,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,9 +8,13 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
+  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
+export const PreviousBookings = ({
+  orders,
+  renderOrderTitleLinkByProvider,
+}: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -36,13 +40,17 @@ export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
       {orders.length > 0 ? (
         <div className="events-wrapper">
           {orders.slice(0, endSlicedOrdersNumber).map((order) => {
+            const eventName = renderOrderTitleLinkByProvider
+              ? renderOrderTitleLinkByProvider(order)
+              : order[order.orderableType]?.name;
+
             return (
               <div
                 className="event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"
                 key={order.id}
               >
                 <div className="info-wrapper">
-                  <p className="label">{order.event?.name}</p>
+                  <p className="label">{eventName}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}

package/src/styles/customers/Filter.scss

@@ -0,0 +1,53 @@
+.customers-filter {
+  @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 {
+    width: 100%;
+
+    .customer-filter {
+      flex: 0 0 33.33%;
+      max-width: 33.33%;
+    }
+  
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
+
+      .customer-filter {
+        flex: 1;
+        max-width: 100%;
+      }
+    }
+
+    @include media-breakpoint-up(sm) {
+      .customer-filter {
+        &:first-child {
+          padding-left: 0;
+        }
+  
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+  } 
+}

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/";

package/src/table/ReactTableHelperComponent.tsx

@@ -0,0 +1,321 @@
+import React, {
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+  ReactElement,
+} from "react";
+import { Col, Row, Table } from "react-bootstrap";
+import { useLocation } from "react-router-dom";
+import { isEqual } from "lodash";
+import clsx from "clsx";
+import {
+  useReactTable,
+  ColumnDefResolved,
+  getCoreRowModel,
+} from "@tanstack/react-table";
+import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import TableService from "@licklist/plugins/dist/services/Table/TableService";
+import { LoaderIndicator } from "../static/loader/LoaderIndicator";
+import { FilterHelperComponent } from "./FilterHelperComponent";
+import { PaginationHelperComponent } from "./PaginationHelperComponent";
+import { PerPageHelperComponent } from "./PerPageHelperComponent";
+import { flexRender } from "./utils";
+import {
+  TableComponentProps,
+  TableComponentPropsWithOldTableData,
+  TableComponentPropsWithReactTableData,
+  TableColumnMeta,
+  ExtendedTableOptions,
+} from "./types";
+import { useTableQueryOptions } from "./hooks/useTableQueryOptions";
+
+export type { ReactTableHelperRow } from "./types";
+
+export type ReactTableHelperComponentProps<T extends object> =
+  TableComponentProps<T> &
+    (
+      | TableComponentPropsWithOldTableData<T>
+      | TableComponentPropsWithReactTableData<T>
+    );
+
+export type ReactTableHelperComponentRef = {
+  options: ExtendedTableOptions | null;
+};
+
+/**
+ * ReactTableHelperComponent
+ * simple table with our backend realization
+ * and pagination.
+ * @param props
+ * @constructor
+ */
+function WrappedReactTableHelperComponent<T extends object>(
+  props: ReactTableHelperComponentProps<T>,
+  ref: Ref<ReactTableHelperComponentRef>
+) {
+  const {
+    paginator,
+    headers,
+    renderItemFn,
+    isLoading,
+    striped = true,
+    bordered = true,
+    displaySearchBar = true,
+    displayPerPageSelect = true,
+    displayShowingSection = true,
+    externalFilters = {},
+    initialOptions = {},
+    columns,
+    sortableColumns = [],
+    renderRow,
+    ...tableProps
+  } = props;
+
+  const { pathname } = useLocation();
+
+  const {
+    sortKey,
+    sortDirection,
+    options,
+    setOptions,
+    optionsCache,
+    setOptionsCache,
+    cachedExternalFilters,
+    setCachedExternalFilters,
+  } = useTableQueryOptions({ initialOptions, externalFilters });
+
+  const tableColumns = useMemo(() => {
+    if (!columns && !headers) return [];
+
+    if (columns && !headers) {
+      return columns.map((column) => {
+        const { accessorKey } = column as ColumnDefResolved<T>;
+        const isSortable = sortableColumns.includes(accessorKey);
+
+        return {
+          ...column,
+          meta: {
+            className: TableService.getHeaderClasses(
+              { isSortable, key: accessorKey, title: accessorKey },
+              sortKey,
+              sortDirection
+            ),
+            onClick: isSortable ? () => onSort(accessorKey!) : undefined,
+          },
+        };
+      });
+    }
+
+    return headers.map((header) => {
+      if (typeof header === "string") {
+        return {
+          accessorKey: header.toLowerCase(),
+          header: () => header,
+          meta: {
+            className: TableService.getHeaderClasses(
+              header,
+              sortKey,
+              sortDirection
+            ),
+          },
+        };
+      }
+
+      return {
+        accessorKey: header?.key || header.title.toLowerCase(),
+        header: () => header.title,
+        meta: {
+          onClick: () => header.isSortable && onSort(header.key!),
+          className: TableService.getHeaderClasses(
+            header,
+            sortKey,
+            sortDirection
+          ),
+          style: { width: header?.width || "auto" },
+        },
+      };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headers, columns, sortKey, sortDirection, sortableColumns]);
+
+  const { getHeaderGroups, getRowModel } = useReactTable<T>({
+    data: paginator?.data || [],
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel<T>(),
+    ...tableProps,
+  });
+
+  useImperativeHandle(ref, () => {
+    return { options };
+  });
+
+  // Redirect to the URL with a new parameters
+  // ONLY: if any option or external filters has changed
+  useEffect(
+    () => {
+      if (
+        isEqual(optionsCache, options) &&
+        isEqual(cachedExternalFilters, externalFilters)
+      )
+        return;
+
+      setOptionsCache(options);
+      setCachedExternalFilters(externalFilters);
+
+      const nextUrlSearchParams = new URLSearchParams({
+        ...options,
+        ...externalFilters,
+      });
+
+      RouteService.redirectTo(
+        [pathname, nextUrlSearchParams.toString()].join("?")
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname, options, externalFilters]
+  );
+
+  const onSort = (key: string) => {
+    let nextDirection = TableService.DEFAULT_SORT_DIRECTION;
+
+    if (sortKey === key) {
+      setOptions((prevOptions) => {
+        nextDirection = TableService.getSortDirection(
+          prevOptions.sortDirection,
+          nextDirection
+        );
+
+        return {
+          ...prevOptions,
+          sortKey: key,
+          sortDirection: nextDirection,
+        };
+      });
+    } else {
+      setOptions((prevOptions) => ({
+        ...prevOptions,
+        sortKey: key,
+        sortDirection: nextDirection,
+      }));
+    }
+  };
+
+  const onPerPageChange = (nextPerPage: number) => {
+    setOptions((prevOptions) => ({
+      ...prevOptions,
+      perPage: nextPerPage,
+    }));
+  };
+
+  const onPageChange = (nextPage: number) => {
+    setOptions((prevOptions) => ({
+      ...prevOptions,
+      page: nextPage,
+    }));
+  };
+
+  const onFilterChange = (nextFilter: string) => {
+    setOptions(({ page: prevPage, ...prevOptions }) => {
+      let nextPage = prevPage;
+
+      if (
+        (!nextFilter && prevOptions.filter) ||
+        (nextFilter && !prevOptions.filter)
+      ) {
+        nextPage = 1;
+      }
+
+      return {
+        ...prevOptions,
+        page: nextPage,
+        filter: nextFilter,
+      };
+    });
+  };
+
+  return (
+    <div className={clsx("table-helper", isLoading ? "py-5" : "py-1")}>
+      <LoaderIndicator isLoaded={!isLoading}>
+        <Row>
+          <Col>
+            {displayPerPageSelect && (
+              <PerPageHelperComponent
+                onChangeFn={onPerPageChange}
+                defaultValue={
+                  paginator?.per_page ?? TableService.DEFAULT_PER_PAGE
+                }
+              />
+            )}
+          </Col>
+          <Col>
+            {displaySearchBar && (
+              <FilterHelperComponent
+                onClickFn={onFilterChange}
+                defaultValue={options.filter ?? ""}
+              />
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <div className="table-responsive">
+              <Table striped={striped} bordered={bordered} hover>
+                <thead>
+                  {getHeaderGroups().map((headerGroup) => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const headerMeta = header.column.columnDef
+                          .meta as TableColumnMeta;
+
+                        return (
+                          <th
+                            key={header.id}
+                            className={headerMeta?.className}
+                            onClick={headerMeta?.onClick}
+                            style={headerMeta?.style}
+                          >
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </th>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </thead>
+                <tbody>
+                  {getRowModel().rows.map((row, index) => {
+                    if (renderItemFn) {
+                      return renderItemFn(row.original, index);
+                    }
+
+                    return renderRow(row);
+                  })}
+                </tbody>
+              </Table>
+            </div>
+          </Col>
+        </Row>
+
+        <PaginationHelperComponent
+          displayShowingSection={displayShowingSection}
+          paginator={paginator}
+          onPageChangeFn={onPageChange}
+        />
+      </LoaderIndicator>
+    </div>
+  );
+}
+
+const ReactTableHelperComponent = forwardRef(
+  WrappedReactTableHelperComponent
+) as <T extends object>(
+  props: ReactTableHelperComponentProps<T> & {
+    ref?: Ref<ReactTableHelperComponentRef>;
+  }
+) => ReactElement;
+
+export { ReactTableHelperComponent };