@licklist/design 0.44.486-dev.83 → 0.44.486

package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx

@@ -0,0 +1,95 @@
+import React, { useContext, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Form, Button, Row, Col } from "react-bootstrap";
+import { useForm } from "react-hook-form";
+import {
+  ORDER_STATUS_PENDING,
+  ORDER_STATUS_CANCELLED,
+  ORDER_STATUS_COMPLETED,
+  ORDER_STATUS_ACTION_REQUIRED,
+} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import {
+  BookingContext,
+  BookingFilters,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+
+const ORDER_STATUSES_FOR_UPDATE = [
+  ORDER_STATUS_PENDING,
+  ORDER_STATUS_CANCELLED,
+  ORDER_STATUS_COMPLETED,
+  ORDER_STATUS_ACTION_REQUIRED,
+];
+
+export type AdditionalFilterSectionProps = {
+  onAddFiltersClick?: () => void;
+  onCancelFilterClick?: () => void;
+  onRefreshClick?: () => void;
+  onFullscreenButtonClick?: () => void;
+  isFilterOpen?: boolean;
+};
+
+export const AdditionalFilterSection = () => {
+  const { t } = useTranslation("Design");
+  const { filters, setFilters } = useContext(BookingContext);
+
+  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
+    defaultValues: filters,
+  });
+
+  const onFormSubmit = (values: Partial<BookingFilters>) => {
+    setFilters(values);
+  };
+
+  useEffect(() => {
+    reset(filters);
+  }, [filters, reset]);
+
+  return (
+    <div className="additional-filter-section">
+      <Form onSubmit={handleSubmit(onFormSubmit)}>
+        <Row>
+          <Col md="3">
+            <Form.Group>
+              <Form.Label>{t("staffMember")}</Form.Label>
+              <Form.Control {...register("staffMember")} as="select">
+                <option value="">{t("Design:choose")}</option>
+              </Form.Control>
+            </Form.Group>
+          </Col>
+
+          <Col md="3">
+            <Form.Group>
+              <Form.Label>{t("bookingStatus")}</Form.Label>
+              <Form.Control {...register("status")} as="select">
+                <option value="">{t("Design:choose")}</option>
+                {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
+                  <option
+                    key={ORDER_STATUSES_FOR_UPDATE[key]}
+                    value={ORDER_STATUSES_FOR_UPDATE[key]}
+                  >
+                    {t(`Design:${ORDER_STATUSES_FOR_UPDATE[key]}`)}
+                  </option>
+                ))}
+              </Form.Control>
+            </Form.Group>
+          </Col>
+
+          <Col md="3">
+            <Form.Group>
+              <Form.Label>{t("date")}</Form.Label>
+              <Form.Control {...register("date")} type="date" />
+            </Form.Group>
+          </Col>
+
+          <Col md="3" className="d-flex align-items-end">
+            <Form.Group>
+              <Button type="submit" className="shadow-none">
+                {t("apply")}
+              </Button>
+            </Form.Group>
+          </Col>
+        </Row>
+      </Form>
+    </div>
+  );
+};

package/src/sales/booking/filter/components/MainFilterSection.tsx

@@ -0,0 +1,131 @@
+import React, { useContext, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Form, Button } from "react-bootstrap";
+import clsx from "clsx";
+import useDebounce from "use-debounce/lib/useDebounce";
+import { BookingContext } from "@licklist/plugins/dist/context/booking/BookingContext";
+import Icon from "../../../../static/Icon";
+import { BookingFilterProps } from "../BookingFilter";
+import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refresh.svg";
+import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
+import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
+
+export type MainFilterSectionProps = BookingFilterProps;
+
+const DEBOUNCE_QUERY_TIME = 300;
+
+export const MainFilterSection = ({
+  isFilterOpen,
+  onAddFiltersClick,
+  onCancelFilterClick,
+  onRefreshClick,
+  onFullscreenButtonClick,
+  autoFocusOnMount,
+  isFullscreenMode,
+}: MainFilterSectionProps) => {
+  const { t } = useTranslation("Design");
+  const { filters, onQueryChange } = useContext(BookingContext);
+  const { search = "" } = filters;
+
+  const [queryValue, setQueryValue] = useState<string>(search);
+  const [debouncedQueryValue] = useDebounce(queryValue, DEBOUNCE_QUERY_TIME);
+
+  const onSearchQueryChange = ({ target: { value } }) => {
+    setQueryValue(value);
+  };
+
+  const onSearchQueryBlur = ({ target: { value } }) => {
+    onQueryChange(value);
+  };
+
+  useEffect(() => {
+    onQueryChange(debouncedQueryValue);
+  }, [onQueryChange, debouncedQueryValue]);
+
+  useEffect(() => {
+    if (queryValue !== search) {
+      setQueryValue(search);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search]);
+
+  return (
+    <div className="main-filter-section">
+      <div className="search">
+        <Form.Group>
+          <Form.Label>{t("searchBookings")}:</Form.Label>
+          <div className="control-with-icon">
+            <Icon
+              type="search"
+              width="1rem"
+              height="1rem"
+              className="search-icon"
+            />
+            <Form.Control
+              value={queryValue}
+              onChange={onSearchQueryChange}
+              onBlur={onSearchQueryBlur}
+              placeholder={t("searchBookingsPlaceholder")}
+              autoFocus={autoFocusOnMount}
+            />
+          </div>
+        </Form.Group>
+      </div>
+      <div className="buttons">
+        {isFilterOpen ? (
+          <Button
+            variant="link"
+            className="shadow-none cancel-button"
+            onClick={onCancelFilterClick}
+          >
+            <div className="icon">
+              <Icon type="plus" style={{ width: 10 }} />
+            </div>
+            {t("cancel")}
+          </Button>
+        ) : (
+          <Button
+            variant="link"
+            className="shadow-none add-filters-button"
+            onClick={onAddFiltersClick}
+          >
+            <div className="icon">
+              <Icon type="plus" style={{ width: 10 }} />
+            </div>
+            {t("addFilters")}
+          </Button>
+        )}
+
+        <div className="separator" />
+
+        <Button
+          variant="link"
+          className="shadow-none refresh-button"
+          onClick={onRefreshClick}
+        >
+          <div className="icon">
+            <RefreshIcon />
+          </div>
+          {t("refresh")}
+        </Button>
+
+        <div className="separator active" />
+
+        <Button
+          variant="link"
+          className={clsx(
+            "shadow-none",
+            !isFullscreenMode && "fullscreen-button",
+            isFullscreenMode && "minimize-button"
+          )}
+          onClick={onFullscreenButtonClick}
+        >
+          <div className="icon">
+            {isFullscreenMode ? <MinimizeIcon /> : <FullscreenIcon />}
+          </div>
+          {t(isFullscreenMode ? "minimize" : "fullScreen")}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/sales/booking/filter/components/ResultTagButton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Icon from "../../../../static/Icon";
+
+export type ResultTagButtonProps = {
+  tagKey: string;
+  value: string;
+  onRemoveClick: (tagKey: string) => void;
+};
+
+export const ResultTagButton = ({
+  tagKey,
+  value,
+  onRemoveClick,
+}: ResultTagButtonProps) => {
+  const onButtonClick = () => {
+    onRemoveClick(tagKey);
+  };
+
+  return (
+    <div className="result-tag rounded-pill shadow-none">
+      {value}
+      <div
+        className="icon"
+        role="button"
+        tabIndex={0}
+        onClick={onButtonClick}
+        onKeyUp={onButtonClick}
+      >
+        <Icon type="plus" style={{ width: 10 }} color="#727272" />
+      </div>
+    </div>
+  );
+};

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -0,0 +1,68 @@
+import React, { useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
+import {
+  BookingContext,
+  BookingFilters,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+import { ResultTagButton } from "./ResultTagButton";
+
+const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+
+export const SearchingForSection = () => {
+  const { t } = useTranslation("Design");
+  const { filters, setFilters } = useContext(BookingContext);
+
+  const filteredFilters = useMemo(() => {
+    return SEARCHING_FOR_FILTER_KEYS.reduce(
+      (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        if (filters[currentKey]) {
+          return { ...prevValues, [currentKey]: filters[currentKey] };
+        }
+
+        return prevValues;
+      },
+      {}
+    );
+  }, [filters]);
+
+  const resetAllFilters = () => {
+    setFilters({ isFilterOpen: true });
+  };
+
+  const onResetSelectedFilter = (key: string) => {
+    setFilters({ ...filters, [key]: "" });
+  };
+
+  if (!Object.keys(filteredFilters).length) {
+    return null;
+  }
+
+  const { search, ...allFilters } = filteredFilters;
+
+  return (
+    <div className="searching-for-section">
+      <div className="tags">
+        <p className="label">{t("Design:searchingFor")}:</p>
+        <p className="search-query-param">{search}</p>
+        {Object.keys(allFilters).map((key: string) => {
+          return (
+            <ResultTagButton
+              key={key}
+              tagKey={key}
+              value={allFilters[key]}
+              onRemoveClick={onResetSelectedFilter}
+            />
+          );
+        })}
+        <Button
+          variant="link"
+          className="shadow-none"
+          onClick={resetAllFilters}
+        >
+          {t("clear")}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/sales/booking/filter/index.ts

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

package/src/sales/booking/index.ts

@@ -1 +1,3 @@
+export * from "./tabs";
+export * from "./filter";
 export * from "./results";

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -4,10 +4,6 @@ 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";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import {
-  ORDER_SOURCE_IFRAME,
-  ORDER_SOURCE_MANUAL,
-} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
 import { BookingResults } from "./BookingResults";
 
 export default {
@@ -25,7 +21,6 @@ Default.args = {
     {
       id: 1,
       people: 2,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 1,
@@ -47,6 +42,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 1,
         name: "testEvent1",
@@ -65,7 +61,6 @@ Default.args = {
     {
       id: 2,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 2,
@@ -87,6 +82,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 2,
         name: "testEvent2",
@@ -106,8 +102,6 @@ Default.args = {
     {
       id: 3,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
-
       products: [
         {
           id: 3,
@@ -141,6 +135,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -159,7 +154,6 @@ Default.args = {
     {
       id: 4,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 3,
@@ -172,6 +166,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -191,7 +186,6 @@ Default.args = {
     {
       id: 5,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -204,6 +198,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -219,7 +214,6 @@ Default.args = {
     {
       id: 6,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -232,6 +226,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -246,7 +241,6 @@ Default.args = {
     {
       id: 7,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -259,6 +253,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/booking/results/BookingResults.tsx

@@ -1,20 +1,17 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { ResultCard } from "./components/ResultCard";
 import { BACKGROUND_COLOR_CLASSNAMES } from "./constants";
 
 export type BookingResultsProps = {
   orders?: Order[] | null;
   onCardClick?: (id: number) => void;
-  staffMembers?: User[] | null;
 };
 
 export const BookingResults = ({
   orders,
   onCardClick,
-  staffMembers,
 }: BookingResultsProps) => {
   const { t } = useTranslation("Design");
 
@@ -25,14 +22,10 @@ export const BookingResults = ({
       ) : (
         <div className="booking-results-wrapper">
           {orders?.map((order, index) => {
-            const staffMember = staffMembers?.find(
-              (staff) => staff.id === order?.orderMetadata?.created_by
-            );
             return (
               <ResultCard
                 key={order.id}
                 order={order}
-                staffMember={staffMember}
                 className={
                   BACKGROUND_COLOR_CLASSNAMES[
                     index % BACKGROUND_COLOR_CLASSNAMES.length

package/src/sales/booking/results/components/ResultCard.tsx

@@ -2,23 +2,13 @@ import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
-import { useIntl } from "react-intl";
-import {
-  Order,
-  ORDER_SOURCE_MANUAL,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import * as Config from "@licklist/core/dist/Config";
-import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
-import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
   className: string;
   order: Order;
-  staffMember?: User;
   onCardClick?: (id: number) => void;
 };
 
@@ -27,28 +17,10 @@ export type ResultCardProps = {
 export const ResultCard = ({
   order,
   className,
-  staffMember,
   onCardClick,
 }: ResultCardProps) => {
   const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
-
-  const {
-    id,
-    people,
-    user,
-    status,
-    startDate,
-    products,
-    source,
-    totalAmount,
-    event,
-    menu,
-    remainingToPay,
-  } = order;
-
-  const productList = products.map((product) => product.name)?.join(", ") || "";
-  const activityName = event?.name || menu?.name || "";
+  const { id, people, user, status, startDate } = order;
 
   const onClick = () => {
     if (!onCardClick) return;
@@ -77,44 +49,16 @@ export const ResultCard = ({
           {user.email && <p>{user.email}</p>}
           {user.userDetail?.phone && <p>{user.userDetail?.phone}</p>}
           <p>------</p>
-          <p>
-            {t("activity")}: {activityName}{" "}
-          </p>
-          {source === ORDER_SOURCE_MANUAL && staffMember && (
-            <p>
-              {t("staff")}: {`${staffMember.firstName} ${staffMember.lastName}`}
-            </p>
-          )}
+          <p>{t("activity")}: </p>
+          <p>{t("staff")}: </p>
           <p>
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate, false)}
-          </p>
-          <p>
-            {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
-          </p>
-          <p className="products" title={productList}>
-            {t("products")}: {productList}
-          </p>
-          {!!remainingToPay && (
-            <p>
-              {t("remainingAmount")}:{" "}
-              {formatNumber(remainingToPay, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              })}
-            </p>
-          )}
-          <p>
-            {t("paidAmount")}:{" "}
-            {formatNumber(totalAmount, {
-              style: "currency",
-              currency: Config.Currency.GBP,
-            })}
+            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
           </p>
           <p>
-            {t("source")}: {t(getOrderSourceTitle(source))}
+            {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}
           </p>
         </div>
       </div>

package/src/sales/booking/results/constants.ts

@@ -3,5 +3,4 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
   "random-color-yellow",
   "random-color-green",
   "random-color-pink",
-  "random-color-violet",
 ];

package/src/sales/booking/results/index.ts

@@ -1,3 +1,2 @@
 export { BookingResults } from "./BookingResults";
-export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

package/src/sales/booking/tabs/BookingTabs.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { BookingTabs, BookingTabsProps } from "./BookingTabs";
+
+export default {
+  title: "Sales/Booking/Tabs",
+  component: BookingTabs,
+} as Meta;
+
+export const Default: Story<BookingTabsProps> = () => {
+  return (
+    <BookingContextProvider>
+      <BookingTabs>Bookings</BookingTabs>
+    </BookingContextProvider>
+  );
+};