@licklist/design 0.44.485-dev.7 → 0.44.485-dev.71

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

@@ -1,7 +1,7 @@
 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 { Controller, useForm } from "react-hook-form";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_CANCELLED,
@@ -12,6 +12,8 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
+import { FilterSectionProps } from "./SearchingForSection";
 
 const ORDER_STATUSES_FOR_UPDATE = [
   ORDER_STATUS_PENDING,
@@ -28,14 +30,22 @@ export type AdditionalFilterSectionProps = {
   isFilterOpen?: boolean;
 };
 
-export const AdditionalFilterSection = () => {
+export const AdditionalFilterSection = ({
+  staffMembers,
+  isLoading,
+}: FilterSectionProps) => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
-  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
+  const { handleSubmit, register, setValue, reset, watch, control } = useForm<
+    Partial<BookingFilters>
+  >({
     defaultValues: filters,
   });
 
+  const startDate = watch("order_date_from");
+  const endDate = watch("order_date_to");
+
   const onFormSubmit = (values: Partial<BookingFilters>) => {
     setFilters(values);
   };
@@ -47,20 +57,49 @@ export const AdditionalFilterSection = () => {
   return (
     <div className="additional-filter-section">
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <Row>
+        <Row className="additional-filter-container">
           <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.Label>{t("createdBy")}</Form.Label>
+              <Controller
+                control={control}
+                name="created_by"
+                render={({ field }) => {
+                  const filedValue = String(field?.value);
+                  return (
+                    <Form.Control
+                      as="select"
+                      value={filedValue}
+                      disabled={isLoading}
+                      onChange={field?.onChange}
+                    >
+                      <option value="" selected={filedValue === ""}>
+                        {t("Design:choose")}
+                      </option>
+                      {staffMembers?.map((member) => (
+                        <option
+                          value={member?.id}
+                          key={member?.id}
+                          selected={filedValue === String(member?.id)}
+                        >
+                          {member?.firstName} {member?.lastName}
+                        </option>
+                      ))}
+                    </Form.Control>
+                  );
+                }}
+              />
             </Form.Group>
           </Col>
 
           <Col md="3">
             <Form.Group>
               <Form.Label>{t("bookingStatus")}</Form.Label>
-              <Form.Control {...register("status")} as="select">
+              <Form.Control
+                disabled={isLoading}
+                {...register("status")}
+                as="select"
+              >
                 <option value="">{t("Design:choose")}</option>
                 {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
                   <option
@@ -74,16 +113,29 @@ export const AdditionalFilterSection = () => {
             </Form.Group>
           </Col>
 
-          <Col md="3">
+          <Col className="date-container">
             <Form.Group>
               <Form.Label>{t("date")}</Form.Label>
-              <Form.Control {...register("date")} type="date" />
+              <DateRangeInput
+                disabled={isLoading}
+                placeholder={t("date")}
+                startDate={startDate}
+                endDate={endDate}
+                onDateChange={({ startDate, endDate }) => {
+                  setValue("order_date_from", startDate);
+                  setValue("order_date_to", endDate);
+                }}
+              />
             </Form.Group>
           </Col>
 
           <Col md="3" className="d-flex align-items-end">
             <Form.Group>
-              <Button type="submit" className="shadow-none">
+              <Button
+                disabled={isLoading}
+                type="submit"
+                className="shadow-none"
+              >
                 {t("apply")}
               </Button>
             </Form.Group>

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

@@ -10,7 +10,7 @@ import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refr
 import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
 import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
 
-export type MainFilterSectionProps = BookingFilterProps;
+export type MainFilterSectionProps = Omit<BookingFilterProps, "staffMembers">;
 
 const DEBOUNCE_QUERY_TIME = 300;
 
@@ -22,6 +22,7 @@ export const MainFilterSection = ({
   onFullscreenButtonClick,
   autoFocusOnMount,
   isFullscreenMode,
+  isLoading,
 }: MainFilterSectionProps) => {
   const { t } = useTranslation("Design");
   const { filters, onQueryChange } = useContext(BookingContext);
@@ -62,6 +63,7 @@ export const MainFilterSection = ({
               className="search-icon"
             />
             <Form.Control
+              disabled={isLoading}
               value={queryValue}
               onChange={onSearchQueryChange}
               onBlur={onSearchQueryBlur}
@@ -113,6 +115,7 @@ export const MainFilterSection = ({
 
         <Button
           variant="link"
+          disabled={isLoading}
           className={clsx(
             "shadow-none",
             !isFullscreenMode && "fullscreen-button",

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

@@ -5,17 +5,47 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { ResultTagButton } from "./ResultTagButton";
 
-const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+const SEARCHING_FOR_FILTER_KEYS = [
+  "q",
+  "status",
+  "order_date_from",
+  "created_by",
+];
 
-export const SearchingForSection = () => {
+export interface FilterSectionProps {
+  staffMembers?: User[] | null;
+  isLoading: boolean;
+}
+
+export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
   const filteredFilters = useMemo(() => {
+    const selectedMember = staffMembers?.find(
+      (staffMember) => Number(filters?.created_by) === staffMember?.id
+    );
     return SEARCHING_FOR_FILTER_KEYS.reduce(
       (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        if (currentKey === "created_by" && filters[currentKey]) {
+          return {
+            ...prevValues,
+            [currentKey]: `${selectedMember?.firstName || ""} ${
+              selectedMember?.lastName || ""
+            }`,
+          };
+        }
+        if (currentKey === "order_date_from" && filters[currentKey]) {
+          return {
+            ...prevValues,
+            [currentKey]: `${filters.order_date_from || ""} - ${
+              filters?.order_date_to || ""
+            }`,
+          };
+        }
         if (filters[currentKey]) {
           return { ...prevValues, [currentKey]: filters[currentKey] };
         }
@@ -24,13 +54,17 @@ export const SearchingForSection = () => {
       },
       {}
     );
-  }, [filters]);
+  }, [filters, staffMembers]);
 
   const resetAllFilters = () => {
     setFilters({ isFilterOpen: true });
   };
 
   const onResetSelectedFilter = (key: string) => {
+    if (key === "order_date_from") {
+      setFilters({ ...filters, order_date_from: "", order_date_to: "" });
+      return;
+    }
     setFilters({ ...filters, [key]: "" });
   };
 

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

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
+import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,7 +55,7 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
+            {t("date")}: {formatDateStringForEvent(startDate)}
           </p>
           <p>
             {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}

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

@@ -21,6 +21,7 @@ export type BookingTabsProps = HasPermissionProp &
     onAddButtonClick?: () => void;
     viewType: BOOKING_TYPE;
     onSetType: (value: BOOKING_TYPE) => void;
+    hasBookingManagment: boolean;
   }>;
 
 export const BookingTabs = ({
@@ -28,6 +29,7 @@ export const BookingTabs = ({
   onReportsClick,
   onAddButtonClick,
   hasPermission = false,
+  hasBookingManagment,
   viewType,
   onSetType,
 }: BookingTabsProps) => {
@@ -50,11 +52,10 @@ export const BookingTabs = ({
                 onSetType(tabType);
               }}
             >
-              {tabType === BOOKING_LIST_TYPE ? (
-                <BookingList />
-              ) : (
+              {tabType === BOOKING_CALENDAR_TYPE && hasBookingManagment && (
                 <BookingCalendar />
               )}
+              {tabType === BOOKING_LIST_TYPE && <BookingList />}
             </Button>
           );
         })}

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -233,6 +233,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
+                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -331,6 +332,7 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t("Design:totalCoupons")}</Form.Label>
               <Form.Control
+                {...register("totalCoupons")}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_pending: false,
+    is_in_cart: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-interface Filters {
+export interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,7 +12,7 @@ interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_pending: boolean;
+  is_in_cart: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -4,7 +4,7 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
+import { ErrorModal } from "../../../iframe/order-process/components/ErrorModal/ErrorModal";
 import { MenuStep } from "../../../types";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { CategoryProducts } from "../category-products/CategoryProducts";

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

@@ -39,7 +39,9 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
+            <Form.Label className="bold-text">
+              {t("Design:productSets")}
+            </Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/setting/dashboard/index.ts

@@ -1,7 +1,5 @@
 export * from "./DashboardSettingForm";
-export * from "./snippets/form";
 export * from "./snippets/card";
 export * from "./snippet-templates/card";
 export * from "./payments/payments-form/PaymentsForm";
 export * from "./payments/payments-modal/PaymentsModal";
-export * from "./snippets/modal";

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row"
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
 import { isEqual } from "lodash";
 import {
   SnippetTemplateValues,
-  SNIPPET_TEMPLATE_TYPE_EVENT,
-  SNIPPET_TEMPLATE_TYPE_CALENDAR,
+  SNIPPET_TEMPLATE_TYPE_EVENT_LIST,
+  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import Row from "react-bootstrap/Row";
@@ -80,7 +80,7 @@ export function SnippetTemplateForm({
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <h2 className="mb-2 pb-1 border-bottom border-secondary">
-          {t("templateSettings")}
+          {t("designSettings")}
         </h2>
 
         <Row>
@@ -113,21 +113,21 @@ export function SnippetTemplateForm({
         {providerHasMap && (
           <Row>
             <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-              <Form.Label>{t("snippetType")}</Form.Label>
+              <Form.Label>{t("widgetType")}</Form.Label>
               <Form.Control
                 as="select"
                 {...register("type", {
                   required: t("Validation:fieldRequired", {
-                    attribute: t("snippetType"),
+                    attribute: t("widgetType"),
                   }) as string,
                 })}
-                placeholder={t("snippetType")}
+                placeholder={t("widgetType")}
               >
-                <option value={SNIPPET_TEMPLATE_TYPE_EVENT}>
-                  {t("snippetTypeEventList")}
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
+                  {t("widgetTypeEventList")}
                 </option>
-                <option value={SNIPPET_TEMPLATE_TYPE_CALENDAR}>
-                  {t("snippetTypeVenueMaps")}
+                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
+                  {t("widgetTypeVenueMaps")}
                 </option>
               </Form.Control>
             </Form.Group>

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { Button } from "react-bootstrap";
 import {
-  SNIPPET_TYPE_EVENT,
-  SNIPPET_TYPE_CALENDAR,
+  SNIPPET_TYPE_EVENT_LIST,
+  SNIPPET_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { IframeEventCard } from "../../../iframe/event/event-card";
@@ -44,7 +44,7 @@ export function Preview({
 
   const { setView } = useContext(SnippetTemplateViewContext);
   const {
-    template: { type = SNIPPET_TYPE_EVENT },
+    template: { type = SNIPPET_TYPE_EVENT_LIST },
   } = useContext(SnippetTemplateContext);
 
   const handleOnClick = (nextView: keyof typeof snippetTemplateViews) => {
@@ -186,7 +186,7 @@ export function Preview({
                   </div>
                 </SettingButton>
 
-                {providerHasMap && type === SNIPPET_TYPE_CALENDAR && (
+                {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
                   <>
                     <div className="pt-4">
                       <h4>{t("Calendar")}</h4>
@@ -368,11 +368,6 @@ export function Preview({
                   type="Party Doors 22:00 - 03:00"
                   cost={6}
                   date="Sat 2nd May"
-                  snippetSetting={{
-                    displayCost: true,
-                    displayType: true,
-                    displayDescription: true,
-                  }}
                   goToDetails={() => null}
                   shortDate="07/03/2023"
                 />

package/src/sortable-tree/SortableTreeItem.tsx

@@ -40,6 +40,9 @@ export interface SortableTreeItemProps {
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
   modalLabel?: string;
+  cancelChanges?: () => void;
+  edit?: () => void;
+  saveValidField?: () => void;
   modalClass?: ProductSetModalClassesType;
   isNewAdded?: boolean;
   onDelete?: () => void;
@@ -70,6 +73,9 @@ export function SortableTreeItem({
   isNewAdded = false,
   onDelete,
   validate,
+  cancelChanges,
+  saveValidField,
+  edit,
   secondaryBadge,
   setIsExpanded,
 }: SortableTreeItemProps) {
@@ -122,7 +128,26 @@ export function SortableTreeItem({
     if (!validate) setIsModalVisible(false);
 
     const success = await validate?.();
-    if (success) setIsModalVisible(false);
+
+    if (success) {
+      if (saveValidField) saveValidField();
+      setIsModalVisible(false);
+    }
+  };
+
+  const onCancel = () => {
+    if (!cancelChanges) {
+      onHide();
+      return;
+    }
+    cancelChanges();
+    setIsModalVisible(false);
+  };
+
+  const onEdit = (e) => {
+    e.stopPropagation();
+    if (edit && !isModalVisible) edit();
+    setIsModalVisible(true);
   };
 
   useEffect(() => {
@@ -258,10 +283,7 @@ export function SortableTreeItem({
                   className="border-0 open-edit-right-modal-button"
                   role="button"
                   tabIndex={0}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setIsModalVisible(true);
-                  }}
+                  onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
                   <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
@@ -291,7 +313,7 @@ export function SortableTreeItem({
                   <button
                     className="p-0 cancel-add-step-btn border-0"
                     type="button"
-                    onClick={onHide}
+                    onClick={onCancel}
                   >
                     <span>{t("Design:cancel")}</span>
                   </button>

package/src/sorting-select/SortingSelect.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SortingSelect, SortingSelectProps } from "./SortingSelect";
+
+export default {
+  title: "SortingSelect",
+} as Meta;
+
+export const Default: Story<SortingSelectProps> = (props) => {
+  return <SortingSelect {...props} />;
+};
+
+Default.args = {
+  onSortingChange: () => null,
+};

package/src/sorting-select/SortingSelect.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { Form, FormGroupProps } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  SORT_DIRECTION_ASC,
+  SORT_DIRECTION_NEWEST,
+  SORT_DIRECTION_DESC,
+  SORT_KEY_NAME,
+  SORT_KEY_CREATED_AT,
+} from "@licklist/core/dist/Config";
+
+export type SortingSelectProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formGroupProps?: FormGroupProps & Record<string, any>;
+  defaultSortKey?: string;
+  defaultSortDirection?: string;
+  onSortingChange?: (url: URLSearchParams) => void;
+};
+
+export const SortingSelect = ({
+  formGroupProps,
+  defaultSortKey = SORT_KEY_NAME,
+  defaultSortDirection = SORT_DIRECTION_ASC,
+  onSortingChange,
+}: SortingSelectProps) => {
+  const { t } = useTranslation("Design");
+  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
+  const searchParams = useQuery();
+
+  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
+    Object.fromEntries(searchParams);
+
+  const onSortingValueChange = ({ target: { value } }) => {
+    setControlValue(value);
+
+    const nextSortDirection =
+      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
+
+    const nextSortKey =
+      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
+
+    const nextSearchParams = new URLSearchParams(searchParams);
+
+    nextSearchParams.set("sortDirection", nextSortDirection);
+    nextSearchParams.set("sortKey", nextSortKey);
+
+    onSortingChange(nextSearchParams);
+  };
+
+  useEffect(() => {
+    if (sortKey === SORT_KEY_CREATED_AT) {
+      setControlValue(SORT_DIRECTION_NEWEST);
+      return;
+    }
+
+    setControlValue(sortDirection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortKey, sortDirection]);
+
+  return (
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
+        {t("App:sortBy")}:
+      </Form.Label>
+      <Form.Control
+        as="select"
+        data-testid="sorting-select"
+        onChange={onSortingValueChange}
+        custom
+        value={controlValue}
+      >
+        <option value={SORT_DIRECTION_ASC}>A-Z</option>
+        <option value={SORT_DIRECTION_DESC}>Z-A</option>
+        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};

package/src/sorting-select/index.ts

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

package/src/static/date-range-input/DateRangeInput.tsx

@@ -20,6 +20,7 @@ export type DateRangeInputProps = {
   startDate?: string;
   endDate?: string;
   months?: number;
+  disabled?: boolean;
   onDateChange?: (dates: { startDate?: string; endDate?: string }) => void;
 };
 
@@ -29,6 +30,7 @@ export const DateRangeInput = ({
   endDate,
   onDateChange,
   months = 2,
+  disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
 
@@ -123,6 +125,7 @@ export const DateRangeInput = ({
           <Form.Control
             type="input"
             placeholder={placeholder}
+            disabled={disabled}
             readOnly
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}