@licklist/design 0.44.485 → 0.44.486-dev.10

package/src/sales/manual-booking/index.ts

@@ -1,10 +1,6 @@
 export * from "./select-event";
 export * from "./number-input-horizontal";
-export * from "./category-products";
-export * from "./controll/ManualBookingStepsControll";
-export * from "./category-product";
-export * from "./final-step";
-export * from "./customer-info";
 export * from "./summary";
+export * from "./search-user";
 export * from "./select-date-type-control";
 export * from "./select-menu";

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -17,6 +17,7 @@ interface NumberInputHorizontalProps {
   max?: number;
   size?: Sizes;
   defaultValue?: number;
+  hasCurrency?: boolean;
   isLoading?: boolean;
 }
 
@@ -30,6 +31,7 @@ export const NumberInputHorizontal = forwardRef<
       className = "",
       value,
       size = "small",
+      hasCurrency,
       onChange,
       onPlusClick,
       onMinusClick,
@@ -90,7 +92,7 @@ export const NumberInputHorizontal = forwardRef<
             disabled && hasBigSize && "w-100",
           ].join(" ")}
         >
-          {size === "small" && <div className="currency">£</div>}
+          {hasCurrency && <div className="currency">£</div>}
 
           <FormControl
             ref={ref}

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<any> = (args) => {
         orderableType={orderableType}
         setOrderableType={setOrderableType}
         orderDate={orderDate}
-        setOrderDate={setOrderDate}
+        onChangeDate={setOrderDate}
         showTypeSelect={showTypeSelect}
       />
     </div>

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.tsx

@@ -9,14 +9,14 @@ import HTMLInputDateElement from "../../../types/static/HTMLInputDateElement";
 
 type SelectDateTypeControlProps = {
   orderDate: string;
-  setOrderDate: (date: string) => void;
+  onChangeDate: (date: string) => void;
   showTypeSelect?: boolean;
   orderableType?: OrderableType;
   setOrderableType: (value?: OrderableType) => void;
 };
 
 export const SelectDateTypeControl = ({
-  setOrderDate,
+  onChangeDate,
   orderDate,
   showTypeSelect,
   orderableType,
@@ -29,11 +29,11 @@ export const SelectDateTypeControl = ({
 
   const changeFromDate = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
-      if (!setOrderDate) return;
+      if (!onChangeDate) return;
 
-      setOrderDate(value);
+      onChangeDate(value);
     },
-    [setOrderDate]
+    [onChangeDate]
   );
 
   const onChangeOrderableType = useCallback(
@@ -71,7 +71,7 @@ export const SelectDateTypeControl = ({
           >
             <option value="">{t("Design:pleaseChooseOne")}</option>
             <option value="event">{t("Design:event")}</option>
-            <option value="menu">{t("Design:menu")}</option>
+            <option value="menu">{t("Design:productSet")}</option>
           </Form.Control>
         </Form.Group>
       )}

package/src/sales/manual-booking/select-event/SelectEvent.tsx

@@ -4,14 +4,14 @@ import { Card, Form } from "react-bootstrap";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
 import { rrulestr } from "rrule";
 import { DateTime } from "luxon";
-import { TransformedEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { ManualBookingEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { formatToDays, formatToHours } from "../formatDays";
 import { BlockLoader } from "../../../static/loader";
 
 interface SelectEventProps {
-  selectEvent: (event: TransformedEvent) => void;
+  selectEvent: (event: ManualBookingEvent) => void;
   isLoading: boolean;
-  events?: TransformedEvent[] | null;
+  events?: ManualBookingEvent[] | null;
 }
 
 export const SelectEvent = ({

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

@@ -1,20 +1,22 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
-import { TransformedMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { BlockLoader } from "../../../static/loader";
 import { MenuButton } from "./components/MenuButton";
 
 export type SelectMenuProps = {
   isLoading?: boolean;
-  menus?: TransformedMenu[];
-  onSelectMenu?: (menu: TransformedMenu) => void;
+  menus?: ManualBookingMenu[] | null;
+  onSelectMenu?: (menu: ManualBookingMenu) => void;
+  noMenusMessage?: string;
 };
 
 export const SelectMenu = ({
   isLoading = false,
   menus,
   onSelectMenu,
+  noMenusMessage,
 }: SelectMenuProps) => {
   const { t } = useTranslation(["App", "Sale"]);
 
@@ -33,13 +35,15 @@ export const SelectMenu = ({
       {(!menus || !menus.length) && !isLoading ? (
         <div className="no-results-content">
           <span className="no-results-found">
-            {t("App:noResultsFoundForSelectedDate")}
+            {noMenusMessage ?? t("App:noResultsFoundForSelectedDate")}
           </span>
         </div>
       ) : (
         <>
           {!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/sales/manual-booking/select-menu/components/MenuButton.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { TransformedMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 
 export type MenuButtonProps = {
-  menu: TransformedMenu;
-  onSelectMenu?: (menu: TransformedMenu) => void;
+  menu: ManualBookingMenu;
+  onSelectMenu?: (menu: ManualBookingMenu) => void;
 };
 
 export const MenuButton = ({ menu, onSelectMenu }: MenuButtonProps) => {

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/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-fields/SortableFieldItem.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
+import type {
+  DraggableSyntheticListeners,
+  UniqueIdentifier,
+} from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface Props {
+  id: UniqueIdentifier;
+}
+
+interface Context {
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}
+
+const SortableItemContext = createContext<Context>({
+  listeners: undefined,
+  ref: () => {},
+});
+
+export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
+  const { isDragging, listeners, setNodeRef, setDraggableNodeRef, transform } =
+    useSortable({ id });
+  const context = useMemo(
+    () => ({
+      listeners,
+      ref: setDraggableNodeRef,
+    }),
+    [listeners, setDraggableNodeRef]
+  );
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <SortableItemContext.Provider value={context}>
+      <div ref={setNodeRef} className="sortable-field-list" style={style}>
+        {children}
+      </div>
+    </SortableItemContext.Provider>
+  );
+}
+
+export function DragHandle() {
+  const { listeners, ref } = useContext(SortableItemContext);
+
+  return (
+    <div {...listeners} ref={ref}>
+      <div className="icon-container">
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+}

package/src/sortable-fields/SortableFieldList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type { ReactNode } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
+
+interface BaseItem {
+  id: UniqueIdentifier;
+}
+
+export interface SortableFieldListProps<T extends BaseItem> {
+  items: T[];
+  onChange(activeIndex: number, overIndex: number): void;
+  renderItem(item: T, index: number): ReactNode;
+}
+
+export function SortableFieldList<T extends BaseItem>({
+  items,
+  onChange,
+  renderItem,
+}: SortableFieldListProps<T>) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+
+          onChange(activeIndex, overIndex);
+        }
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item, index) => (
+          <div key={item.id}>{renderItem(item, index)}</div>
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+SortableFieldList.Item = SortableFieldItem;
+SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

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

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/CountryCodeSelect.tsx

@@ -52,11 +52,9 @@ function CountryCodeSelect({
           {t("chooseCountry")}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
-          <>
-            <option key={key as string} value={key as string}>
-              {en[key]}
-            </option>
-          </>
+          <option key={key as string} value={key as string}>
+            {en[key]}
+          </option>
         ))}
       </Form.Control>
       <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>

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

@@ -3,7 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { DateRange, Range } from "react-date-range";
 import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
-import type Popper from "@popperjs/core";
+import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Icon } from "..";
 import {
@@ -15,11 +15,12 @@ import {
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
-export type DateRangeInputProps = {
+type DateRangeInputProps = {
   placeholder: string;
   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 })}
@@ -138,7 +141,7 @@ export const DateRangeInput = ({
   );
 };
 
-export const sameWidthPopperModifier: Popper.Modifier<
+const sameWidthPopperModifier: Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {