@licklist/design 0.44.486-dev.9 → 0.44.486

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx

@@ -0,0 +1,134 @@
+import { Button, Form, Modal } from "react-bootstrap";
+import React from "react";
+import { useId } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import Image from "../../static/Image";
+import src from "../../assets/dashboard/blockingClock.png";
+
+const WEEKDAYS = [
+  "mondayShort",
+  "tuesdayShort",
+  "wednesdayShort",
+  "thursdayShort",
+  "fridayShort",
+  "saturdayShort",
+  "sundayShort",
+];
+
+export type ResourcesBlockingModalProps = {
+  show: boolean;
+  zones: Zone[];
+  lanes: { zoneId: Zone["id"]; lanes: string[] }[];
+};
+
+export const ResourcesBlockingModal = ({
+  show,
+  zones,
+  lanes,
+}: ResourcesBlockingModalProps) => {
+  const { t } = useTranslation("Design");
+  const allId = useId();
+  const resourcesId = useId();
+
+  return (
+    <Modal centered show={show} className="resources-blocking-modal">
+      <header>
+        <span>{t("resourcesBlocking")}</span>
+        <Image src={src} />
+      </header>
+
+      <Modal.Body>
+        <div className="checkbox-with-description">
+          <span>{t("dayOfTheWeek")}</span>
+          <Form.Group className="custom-checkbox">
+            <Form.Check custom type="checkbox" id={allId}>
+              <Form.Check.Input type="checkbox" />
+              <Form.Check.Label>{t("all")}</Form.Check.Label>
+            </Form.Check>
+          </Form.Group>
+        </div>
+
+        <Form.Group className="custom-checkbox days-list">
+          {WEEKDAYS.map((weekday) => (
+            <Checkbox key={weekday} label={t(weekday)} />
+          ))}
+        </Form.Group>
+
+        <div className="date-time-inputs">
+          <Input label={t("from")} placeholder="DD.MM.YYYY" />
+          <Input label={t("until")} placeholder="DD.MM.YYYY" />
+
+          <Input label={t("startTime")} placeholder="00:00" />
+          <Input label={t("endTime")} placeholder="00:00" />
+        </div>
+
+        <Form.Group className="text-input">
+          <Form.Label>{t("textLabel")}</Form.Label>
+          <Form.Control />
+        </Form.Group>
+
+        <div className="checkbox-with-description">
+          <span>{t("resources")}</span>
+          <Form.Group className="custom-checkbox">
+            <Form.Check custom type="checkbox" id={resourcesId}>
+              <Form.Check.Input type="checkbox" />
+              <Form.Check.Label>{t("all")}</Form.Check.Label>
+            </Form.Check>
+          </Form.Group>
+        </div>
+
+        {zones.map((zone) => (
+          <Form.Group key={zone.id} className="zone-wrapper custom-checkbox">
+            <div className="zone-name">{zone.name}</div>
+
+            {lanes
+              .find((lane) => lane.zoneId === zone.id)
+              .lanes.map((lane) => (
+                <Checkbox key={lane} label={lane} className="lane" />
+              ))}
+          </Form.Group>
+        ))}
+
+        <footer>
+          <Button>Save</Button>
+          <Button variant="secondary">Close</Button>
+          <Button variant="danger">Delete</Button>
+        </footer>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+const Checkbox = ({
+  label,
+  className = "",
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const id = useId();
+
+  return (
+    <Form.Check custom type="checkbox" className={className} id={id}>
+      <Form.Check.Input type="checkbox" />
+      <Form.Check.Label>{label}</Form.Check.Label>
+    </Form.Check>
+  );
+};
+
+const Input = ({
+  label,
+  placeholder,
+}: {
+  label: string;
+  placeholder: string;
+}) => {
+  return (
+    <Form.Group className="text-input">
+      <Form.Label>{label}</Form.Label>
+
+      <Form.Control placeholder={placeholder} />
+    </Form.Group>
+  );
+};

package/src/provider/resources-blocking-modal/index.ts

@@ -0,0 +1 @@
+export { ResourcesBlockingModal } from "./ResourcesBlockingModal";

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { useIntl } from "react-intl";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -12,9 +12,7 @@ export function WorkingHoursInputDescription() {
   const values = watch("workingHours");
   const weekdays = useWeekdays("short");
   const { t } = useTranslation("Design");
-
-  if (!values) return null;
-
+  const { formatTime } = useIntl();
   return (
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i)
@@ -28,16 +26,16 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        end: formatTime(
+                          DateTime.fromISO(weekday.end).toJSDate()
                         ),
                       })
                     : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
+                        start: formatTime(
+                          DateTime.fromISO(weekday.start).toJSDate()
                         ),
                       })
                   : null}

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -1,36 +1,25 @@
-import React, { useEffect } from "react";
-import { DateTime } from "luxon";
+import React from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
   disabled?: boolean;
   minDate?: string;
-  startDateLabel?: string;
-  startTimeLabel?: string;
-  endDateLabel?: string;
-  endTimeLabel?: string;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
-  startDateLabel,
-  startTimeLabel,
-  endDateLabel,
-  endTimeLabel,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
     getValues,
+    setValue,
     formState: { errors },
     register,
-    trigger,
-    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -38,31 +27,21 @@ function RecurrenceIntervalAndFrequencyInput({
   const startTime = getValues("startTime");
   const endTime = getValues("endTime");
 
-  useEffect(() => {
-    if (!startDate || !endDate) {
-      return;
-    }
-    trigger(`endDate`);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startDate]);
-
-  useEffect(() => {
-    trigger("endTime");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime]);
-
   return (
     <>
-      <Row>
+      <Row className="align-items-center">
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
+            <Form.Label>{t("Design:fromDate")}</Form.Label>
             <Form.Control
               type="date"
               {...register("startDate", { required: true })}
               defaultValue={startDate}
               className={startDate && "date-input-with-value"}
               disabled={disabled}
+              onChange={({ target: { value } }) => {
+                setValue("startDate", value);
+              }}
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
             />
@@ -74,32 +53,16 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
+            <Form.Label>{t("Design:toDate")}</Form.Label>
             <Form.Control
               type="date"
-              {...register("endDate", {
-                required: true,
-                validate: (date) => {
-                  if (!startDate || !date) {
-                    return true;
-                  }
-                  const currentStartDate = DateTime.fromFormat(
-                    startDate,
-                    DATE_FORMAT
-                  );
-                  const currentEndDate = DateTime.fromFormat(date, DATE_FORMAT);
-                  return currentEndDate.diff(currentStartDate, ["days"]).days >=
-                    0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endDateSmall"),
-                        min: t("Design:startDateSmall"),
-                      })}`;
-                },
-              })}
+              {...register("endDate", { required: true })}
               defaultValue={endDate}
               className={endDate && "date-input-with-value"}
               disabled={disabled}
+              onChange={({ target: { value } }) => {
+                setValue("endDate", value);
+              }}
               min={startDate || undefined}
               isInvalid={Boolean(errors.endDate)}
             />
@@ -110,21 +73,19 @@ function RecurrenceIntervalAndFrequencyInput({
         </Col>
       </Row>
 
-      <Row>
+      <Row className="align-items-center">
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>
-              {startTimeLabel ?? t("Design:availableFrom")}
-            </Form.Label>
+            <Form.Label>{t("Design:availableFrom")}</Form.Label>
             <Form.Control
               type="time"
               {...register("startTime", { required: false })}
-              onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`);
-              }}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
+              onChange={({ target: { value } }) => {
+                setValue("startTime", `${value}:00`);
+              }}
               isInvalid={Boolean(errors.startTime)}
             />
           </Form.Group>
@@ -132,38 +93,18 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
+            <Form.Label>{t("Design:availableTo")}</Form.Label>
             <Form.Control
               type="time"
-              {...register("endTime", {
-                required: false,
-                validate: (time) => {
-                  if (!startTime || !time) {
-                    return true;
-                  }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
-
-                  return currentEndTime?.diff(currentStartTime, ["seconds"])
-                    ?.seconds > 0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
-                },
-              })}
-              onChange={({ target: { value } }) => {
-                setValue("endTime", `${value}:59`, { shouldValidate: true });
-              }}
+              {...register("endTime", { required: false })}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}
+              onChange={({ target: { value } }) => {
+                setValue("endTime", `${value}:59`);
+              }}
               isInvalid={Boolean(errors.endTime)}
             />
-            <Form.Control.Feedback type="invalid">
-              {errors.endTime?.message}
-            </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -166,7 +166,6 @@ export function RecurringDatePickerInput({
   return (
     <FormProvider {...form}>
       <Form
-        noValidate
         onSubmit={(event) => {
           // prevents parent form submitting
           event.preventDefault();

package/src/sales/booking/filter/BookingFilter.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { boolean } from "@storybook/addon-knobs";
+import { Meta, Story } from "@storybook/react";
+import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { BookingFilter, BookingFilterProps } from "./BookingFilter";
+
+export default {
+  title: "Sales/Booking/Filter",
+  component: BookingFilter,
+} as Meta;
+
+export const Default: Story<BookingFilterProps> = () => {
+  const isFilterOpen = boolean("isFilterOpen", false);
+  const autoFocusOnMount = boolean("autoFocusOnMount", true);
+
+  return (
+    <MemoryRouter>
+      <BookingContextProvider>
+        <BookingFilter
+          isFilterOpen={isFilterOpen}
+          autoFocusOnMount={autoFocusOnMount}
+        />
+      </BookingContextProvider>
+    </MemoryRouter>
+  );
+};

package/src/sales/booking/filter/BookingFilter.tsx

@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from "react";
+import { MainFilterSection } from "./components/MainFilterSection";
+import { AdditionalFilterSection } from "./components/AdditionalFIlterSection";
+import { SearchingForSection } from "./components/SearchingForSection";
+
+export type BookingFilterProps = PropsWithChildren<{
+  onAddFiltersClick?: () => void;
+  onCancelFilterClick?: () => void;
+  onRefreshClick?: () => void;
+  onFullscreenButtonClick?: () => void;
+  isFilterOpen?: boolean;
+  autoFocusOnMount?: boolean;
+  isFullscreenMode?: boolean;
+}>;
+
+export const BookingFilter = ({
+  isFilterOpen = true,
+  autoFocusOnMount = false,
+  isFullscreenMode = false,
+  children,
+  ...props
+}: BookingFilterProps) => {
+  return (
+    <div className="booking-filter">
+      <MainFilterSection
+        {...props}
+        isFilterOpen={isFilterOpen}
+        autoFocusOnMount={autoFocusOnMount}
+        isFullscreenMode={isFullscreenMode}
+      />
+      {isFilterOpen ? (
+        <>
+          <AdditionalFilterSection />
+          <div className="separator-horizontal" />
+          <SearchingForSection />
+        </>
+      ) : (
+        children && (
+          <>
+            <div className="separator-horizontal" />
+            {children}
+          </>
+        )
+      )}
+    </div>
+  );
+};

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>
+  );
+};