@licklist/design 0.44.526 → 0.44.528

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

@@ -1,25 +1,45 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
+import { RegisterOptions, 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;
+  startTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
+  endTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
+  startDateLabel,
+  startTimeLabel,
+  endDateLabel,
+  endTimeLabel,
+  startTimeRules,
+  endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
     getValues,
-    setValue,
     formState: { errors },
     register,
+    trigger,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -27,21 +47,34 @@ 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(() => {
+    if (!startTime || !endTime) {
+      return;
+    }
+    trigger("endTime");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime]);
+
   return (
     <>
-      <Row className="align-items-center">
+      <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:fromDate")}</Form.Label>
+            <Form.Label>{startDateLabel ?? 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)}
             />
@@ -53,16 +86,32 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:toDate")}</Form.Label>
+            <Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
             <Form.Control
               type="date"
-              {...register("endDate", { required: true })}
+              {...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"),
+                      })}`;
+                },
+              })}
               defaultValue={endDate}
               className={endDate && "date-input-with-value"}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("endDate", value);
-              }}
               min={startDate || undefined}
               isInvalid={Boolean(errors.endDate)}
             />
@@ -73,38 +122,58 @@ function RecurrenceIntervalAndFrequencyInput({
         </Col>
       </Row>
 
-      <Row className="align-items-center">
+      <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableFrom")}</Form.Label>
+            <Form.Label>
+              {startTimeLabel ?? t("Design:availableFrom")}
+            </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false })}
+              {...register("startTime", { required: false, ...startTimeRules })}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`);
-              }}
               isInvalid={Boolean(errors.startTime)}
             />
+            <Form.Control.Feedback type="invalid">
+              {errors.startTime?.message}
+            </Form.Control.Feedback>
           </Form.Group>
         </Col>
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableTo")}</Form.Label>
+            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
             <Form.Control
               type="time"
-              {...register("endTime", { required: false })}
+              {...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, ["minutes"])
+                    ?.minutes >= 0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endTimeSmall"),
+                        min: t("Design:startTimeSmall"),
+                      })}`;
+                },
+                ...endTimeRules,
+              })}
               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

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl";
 import {
   DATE_TIME_FORMAT,
   DATE_TIME_FULL_FORMAT,
+  TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config/Date";
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
@@ -38,6 +39,7 @@ export interface RecurringDatePickerInputValues {
   byweekday?: Weekday[];
   until?: Date;
   count?: number;
+  withOutEndDate?: boolean;
 }
 
 export function RecurringDatePickerInput({
@@ -101,6 +103,11 @@ export function RecurringDatePickerInput({
         })
       : nextState.byweekday;
 
+    const endTimeNextState = nextState?.endTime
+      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
+      : "";
+    const endDateNextState = nextState?.endDate ?? "";
+
     const rrule = RRule.optionsToString({
       // @TODO: investigate if we need these fields
       // dtstart: getDateTimeObject(startDate, startTime).toJSDate(),
@@ -115,6 +122,8 @@ export function RecurringDatePickerInput({
 
     onChange({
       ...nextState,
+      endDate: endDateNextState,
+      endTime: endTimeNextState,
       rrule,
     });
   };
@@ -166,6 +175,7 @@ export function RecurringDatePickerInput({
   return (
     <FormProvider {...form}>
       <Form
+        noValidate
         onSubmit={(event) => {
           // prevents parent form submitting
           event.preventDefault();

package/src/report/form/ReportForm.tsx

@@ -15,7 +15,7 @@ export function ReportForm({
   onSubmit,
   onHide,
   hasPermission,
-}: ReportFormProps): JSX.Element {
+}: ReportFormProps) {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

package/src/sales/booking/index.ts

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

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

@@ -3,7 +3,8 @@ 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 { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,10 +56,10 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
+            {t("date")}: {formatDateStringForEvent(startDate, false)}
           </p>
           <p>
-            {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}
+            {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
           </p>
         </div>
       </div>

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

@@ -3,4 +3,5 @@ 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,2 +1,3 @@
 export { BookingResults } from "./BookingResults";
+export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

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

@@ -12,7 +12,7 @@ export 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/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(

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,7 +35,7 @@ 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>
       ) : (

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/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,10 +3,13 @@ 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 { DateTime } from "luxon";
+import { Calendar, defaultStartDay } from "../../../calendar";
+import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
 import {
@@ -24,7 +27,6 @@ import {
 } from "../../../iframe";
 import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
 import { SnippetTemplateContext } from "../context/snippetTemplate";
-import { EventCalendar } from "../../../iframe/event/event-calendar";
 
 const DEFAULT_IMAGE =
   "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
@@ -44,7 +46,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) => {
@@ -52,6 +54,10 @@ export function Preview({
     onSettingClick();
   };
 
+  const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
+  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
+  const calendarDates = getMonthCalendarDates(currentDate);
+
   return (
     <div className="w-100 h-100 snippet-template-preview">
       <Page
@@ -186,7 +192,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>
@@ -196,7 +202,13 @@ export function Preview({
                         className="mt-3 m-0"
                         containerClassName="mt-5 pt-5"
                       >
-                        <EventCalendar />
+                        <Calendar
+                          currentDate={currentDate}
+                          setCurrentDate={setCurrentDate}
+                          selectedDate={selectedDate}
+                          setSelectedDate={setSelectedDate}
+                          calendarDates={calendarDates}
+                        />
                       </SettingButton>
                     </div>
                     <div className="pt-4">
@@ -368,11 +380,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>
+  );
+}