mozrest-sdk-react-dev 0.2.52 → 0.2.53

package/mozrest-sdk.es.js

@@ -102403,33 +102403,33 @@ const ReservationsAnalytics = ({ userEmail, userFullName }) => {
     totalDays
   }));
 };
-const mainConatiner = "_mainConatiner_kf4ep_1";
-const mainTableContainer = "_mainTableContainer_kf4ep_10";
-const mainSidebarContainer = "_mainSidebarContainer_kf4ep_13";
-const headerContainer = "_headerContainer_kf4ep_24";
-const buttonList = "_buttonList_kf4ep_29";
-const tableTopHeader = "_tableTopHeader_kf4ep_35";
-const tableTopHeaderContent = "_tableTopHeaderContent_kf4ep_43";
-const tableRowContainer = "_tableRowContainer_kf4ep_51";
-const tableRowCard = "_tableRowCard_kf4ep_57";
-const tableRowHour = "_tableRowHour_kf4ep_61";
-const hours = "_hours_kf4ep_72";
-const tableRowContent = "_tableRowContent_kf4ep_78";
-const rowImage = "_rowImage_kf4ep_85";
-const rowContactContainer = "_rowContactContainer_kf4ep_91";
-const rowContactText = "_rowContactText_kf4ep_97";
-const rowContactPhone = "_rowContactPhone_kf4ep_103";
-const rowSectionContainer = "_rowSectionContainer_kf4ep_110";
-const rowSectionText = "_rowSectionText_kf4ep_116";
-const rowSectionSecText = "_rowSectionSecText_kf4ep_122";
-const rowActionButton = "_rowActionButton_kf4ep_129";
-const bookingInfoContainer = "_bookingInfoContainer_kf4ep_135";
-const bookingInfoCardRow = "_bookingInfoCardRow_kf4ep_139";
-const bookingInfoCardContainer = "_bookingInfoCardContainer_kf4ep_147";
-const bookingInfoCard = "_bookingInfoCard_kf4ep_139";
-const bookingInfoCardContent = "_bookingInfoCardContent_kf4ep_159";
-const bookingInfoCardTitle = "_bookingInfoCardTitle_kf4ep_165";
-const bookingInfoCardText = "_bookingInfoCardText_kf4ep_168";
+const mainConatiner = "_mainConatiner_twygm_42";
+const mainTableContainer = "_mainTableContainer_twygm_52";
+const mainSidebarContainer = "_mainSidebarContainer_twygm_59";
+const headerContainer = "_headerContainer_twygm_68";
+const buttonList = "_buttonList_twygm_73";
+const tableTopHeader = "_tableTopHeader_twygm_79";
+const tableTopHeaderContent = "_tableTopHeaderContent_twygm_87";
+const tableRowContainer = "_tableRowContainer_twygm_95";
+const tableRowCard = "_tableRowCard_twygm_101";
+const tableRowHour = "_tableRowHour_twygm_105";
+const hours = "_hours_twygm_116";
+const tableRowContent = "_tableRowContent_twygm_122";
+const rowImage = "_rowImage_twygm_129";
+const rowContactContainer = "_rowContactContainer_twygm_135";
+const rowContactText = "_rowContactText_twygm_141";
+const rowContactPhone = "_rowContactPhone_twygm_147";
+const rowSectionContainer = "_rowSectionContainer_twygm_154";
+const rowSectionText = "_rowSectionText_twygm_160";
+const rowSectionSecText = "_rowSectionSecText_twygm_166";
+const rowActionButton = "_rowActionButton_twygm_173";
+const bookingInfoContainer = "_bookingInfoContainer_twygm_179";
+const bookingInfoCardRow = "_bookingInfoCardRow_twygm_183";
+const bookingInfoCardContainer = "_bookingInfoCardContainer_twygm_191";
+const bookingInfoCard = "_bookingInfoCard_twygm_183";
+const bookingInfoCardContent = "_bookingInfoCardContent_twygm_203";
+const bookingInfoCardTitle = "_bookingInfoCardTitle_twygm_209";
+const bookingInfoCardText = "_bookingInfoCardText_twygm_212";
 var styles$b = {
   mainConatiner,
   mainTableContainer,
@@ -102459,6 +102459,43 @@ var styles$b = {
   bookingInfoCardTitle,
   bookingInfoCardText
 };
+const TrashX = () => /* @__PURE__ */ React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("rect", {
+  width: "24",
+  height: "24",
+  fill: "none"
+}), /* @__PURE__ */ React.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2",
+  d: "M4 7h16M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3m-5 5l4 4m0-4l-4 4"
+}));
+const EyeOff = () => /* @__PURE__ */ React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, /* @__PURE__ */ React.createElement("rect", {
+  width: "24",
+  height: "24",
+  fill: "none"
+}), /* @__PURE__ */ React.createElement("g", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "2"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M10.585 10.587a2 2 0 0 0 2.829 2.828"
+}), /* @__PURE__ */ React.createElement("path", {
+  d: "M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18"
+})));
 const CalendarTime = () => /* @__PURE__ */ React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
@@ -103798,6 +103835,8 @@ const clock = () => {
 };
 var icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  TrashX,
+  EyeOff,
   CalendarTime,
   CheckBox,
   FidgetSpinner,
@@ -103895,25 +103934,26 @@ const Icon = ({
     ...props
   }, React__default.createElement(icons[icon2]));
 };
-const btn = "_btn_19wi6_1";
+const btn = "_btn_1s4ho_1";
 var styles$9 = {
   btn,
-  "btn--large": "_btn--large_19wi6_16",
-  "btn--default": "_btn--default_19wi6_20",
-  "btn--small": "_btn--small_19wi6_24",
-  "btn--mini": "_btn--mini_19wi6_28",
-  "btn--primary": "_btn--primary_19wi6_32",
-  "btn--secondary": "_btn--secondary_19wi6_40",
-  "btn--tertiary": "_btn--tertiary_19wi6_48",
-  "btn--inverted": "_btn--inverted_19wi6_56",
-  "btn--danger": "_btn--danger_19wi6_65",
-  "btn--success": "_btn--success_19wi6_73"
+  "btn--large": "_btn--large_1s4ho_16",
+  "btn--default": "_btn--default_1s4ho_20",
+  "btn--small": "_btn--small_1s4ho_24",
+  "btn--mini": "_btn--mini_1s4ho_28",
+  "btn--primary": "_btn--primary_1s4ho_32",
+  "btn--secondary": "_btn--secondary_1s4ho_39",
+  "btn--tertiary": "_btn--tertiary_1s4ho_47",
+  "btn--inverted": "_btn--inverted_1s4ho_55",
+  "btn--danger": "_btn--danger_1s4ho_64",
+  "btn--success": "_btn--success_1s4ho_72"
 };
 const Button = ({
   mode = "primary",
   size = "default",
   children,
   icon: icon2,
+  iconPosition = "left",
   isLoading,
   className,
   disabled: disabled2,
@@ -103941,7 +103981,7 @@ const Button = ({
     disabled: isLoading || disabled2,
     type: type4
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5 }
+    style: { display: "flex", flexDirection: iconPosition == "left" ? "row" : "row-reverse", alignItems: "center", justifyContent: "center", gap: 5 }
   }, IconBtn, isLoading ? "Loading ..." : children));
 };
 var isCheckBoxInput = (element) => element.type === "checkbox";
@@ -105607,11 +105647,11 @@ const SrOnly = ({ children }) => {
     className: styles$7.sronly
   }, children);
 };
-const label = "_label_13wgd_1";
+const label = "_label_180ef_1";
 var styles$6 = {
   label,
-  "label--hidden": "_label--hidden_13wgd_8",
-  "label--bold": "_label--bold_13wgd_12"
+  "label--hidden": "_label--hidden_180ef_8",
+  "label--bold": "_label--bold_180ef_12"
 };
 const tooltipContainer = "_tooltipContainer_13ux5_1";
 const tooltipBox = "_tooltipBox_13ux5_5";
@@ -105661,19 +105701,22 @@ const Label = ({
   }, tooltip2));
   return isHidden2 ? /* @__PURE__ */ React__default.createElement(SrOnly, null, label2) : label2;
 };
-const inputWrapper = "_inputWrapper_thhbw_1";
-const input$1 = "_input_thhbw_1";
-const inputIcon = "_inputIcon_thhbw_53";
+const inputWrapper = "_inputWrapper_zpxow_1";
+const input$1 = "_input_zpxow_1";
+const inputIcon = "_inputIcon_zpxow_74";
 var styles$4 = {
   inputWrapper,
   input: input$1,
-  "input--r-md": "_input--r-md_thhbw_26",
-  "input--r-sm": "_input--r-sm_thhbw_29",
-  "input--with-icon-left": "_input--with-icon-left_thhbw_32",
-  "input--with-icon-right": "_input--with-icon-right_thhbw_35",
+  "input--r-md": "_input--r-md_zpxow_36",
+  "input--r-sm": "_input--r-sm_zpxow_41",
+  "input--with-icon-left": "_input--with-icon-left_zpxow_46",
+  "input--with-icon-right": "_input--with-icon-right_zpxow_49",
+  "input--filled": "_input--filled_zpxow_52",
+  "input--borderless": "_input--borderless_zpxow_55",
+  "input--rounded": "_input--rounded_zpxow_59",
   inputIcon,
-  "inputIcon--p-left": "_inputIcon--p-left_thhbw_62",
-  "inputIcon--p-right": "_inputIcon--p-right_thhbw_65"
+  "inputIcon--p-left": "_inputIcon--p-left_zpxow_83",
+  "inputIcon--p-right": "_inputIcon--p-right_zpxow_86"
 };
 const Input2 = ({
   id: id2,
@@ -105691,16 +105734,12 @@ const Input2 = ({
   tooltip: tooltip2 = "",
   disabledTooltip = "",
   disabled: disabled2,
+  filled = false,
+  borderLess = false,
+  rounded = false,
+  customStyles: customStyles2,
   ...props
 }) => {
-  const [internalvalue, setInternalValue] = useState(value2);
-  useEffect(() => {
-    setInternalValue(value2);
-  }, [value2]);
-  function handleChange(ev) {
-    setInternalValue(ev.target.value);
-    onChange3 && onChange3(ev);
-  }
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", flexDirection: "column", justifyContent: "start", textAlign: "left" }
   }, /* @__PURE__ */ React__default.createElement(Label, {
@@ -105714,12 +105753,16 @@ const Input2 = ({
       styles$4["input"],
       styles$4[`input--h-${heigth}`],
       styles$4[`input--r-${radius}`],
-      icon2 && styles$4[`input--with-icon-${iconPosition}`]
+      icon2 && styles$4[`input--with-icon-${iconPosition}`],
+      filled == true ? styles$4[`input--filled`] : "",
+      borderLess == true ? styles$4[`input--borderless`] : "",
+      rounded == true ? styles$4[`input--rounded`] : ""
     ),
-    onChange: handleChange,
+    style: customStyles2,
+    onChange: onChange3,
     id: id2,
     name: id2,
-    value: internalvalue,
+    value: value2,
     type: type4,
     required: required4,
     disabled: disabled2,
@@ -105743,7 +105786,7 @@ const TextInputField = ({ control, name, ...props }) => {
       fieldState: { error: error3 }
     }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Input2, {
       name,
-      value: value2,
+      value: value2 || "",
       onChange: (e3) => {
         onChange3(e3);
       },
@@ -105871,7 +105914,11 @@ const index$2 = ({ filters: filters2, setFilters }) => {
     icon: "search",
     iconPosition: "left",
     iconSize: "small",
-    radius: "md"
+    radius: "md",
+    filled: true,
+    borderLess: true,
+    rounded: true,
+    customStyles: { backgroundColor: "#2F3349" }
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: styles$b.buttonList
   }, /* @__PURE__ */ React__default.createElement(Button, {
@@ -106033,19 +106080,50 @@ var styles$3 = {
   tooltip
 };
 const customStyles = {
-  control: (provided) => ({
+  control: (provided, state) => ({
     ...provided,
-    borderRadius: 4,
-    boxShadow: "none"
+    backgroundColor: "transparent",
+    border: "none",
+    borderBottom: `1px solid ${state.isFocused ? "gray" : "#bbb"}`,
+    borderRadius: 0,
+    boxShadow: state.isFocused ? "0 0 5px gray" : "none",
+    color: "#bbb",
+    padding: "4px 0"
   }),
-  indicatorsContainer: (provided, state) => {
-    if (state.isDisabled) {
-      return {
-        display: "none"
-      };
-    }
-    return provided;
-  }
+  singleValue: (provided) => ({
+    ...provided,
+    color: "#fff"
+  }),
+  input: (provided) => ({
+    ...provided,
+    color: "#bbb"
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    color: "#bbb",
+    opacity: 1
+  }),
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    color: state.isFocused ? "gray" : "#bbb"
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    backgroundColor: "transparent"
+  }),
+  menu: (provided) => ({
+    ...provided,
+    backgroundColor: "#25293C",
+    borderRadius: "4px",
+    marginTop: "4px",
+    color: "#bbb"
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    backgroundColor: state.isFocused ? "#393D54" : "#25293C",
+    color: state.isFocused ? "#fff" : "#bbb",
+    cursor: "pointer"
+  })
 };
 const Select = ({
   id: id2 = "",
@@ -106080,9 +106158,7 @@ const SelectField = ({ control, name, ...props }) => {
     }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Select, {
       name,
       value: value2,
-      onChange: (e3) => {
-        onChange3(e3);
-      },
+      onChange: onChange3,
       onBlur: onBlur2,
       ...props
     }), error3 && /* @__PURE__ */ React__default.createElement(FieldError, {
@@ -106090,7 +106166,7 @@ const SelectField = ({ control, name, ...props }) => {
     }))
   });
 };
-const input = "_input_1ufjp_1";
+const input = "_input_zx6p9_1";
 var styles$2 = {
   input
 };
@@ -106163,12 +106239,18 @@ const ActionButtons = ({ onSubmit }) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", gap: 10, justifyContent: selectedBooking ? "center" : "flex-end", alignItems: "center" }
   }, selectedBooking && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Button, {
-    mode: "danger"
-  }, t2("CANCEL")), /* @__PURE__ */ React__default.createElement(Button, null, t2("NOSHOW"))), /* @__PURE__ */ React__default.createElement(Button, {
+    mode: "danger",
+    icon: "TrashX",
+    iconPosition: "right"
+  }, t2("CANCEL")), /* @__PURE__ */ React__default.createElement(Button, {
+    icon: "EyeOff",
+    iconPosition: "right"
+  }, t2("NOSHOW"))), /* @__PURE__ */ React__default.createElement(Button, {
     mode: "success",
     type: "submit",
     icon: "check",
-    onClick: () => onSubmit()
+    onClick: () => onSubmit(),
+    iconPosition: "right"
   }, selectedBooking ? t2("UPDATE") : t2("CREATE")));
 };
 const BookingInfoCard = ({ icon: icon2 }) => {
@@ -106233,7 +106315,7 @@ const Header = () => {
   const { t: t2 } = useTranslation();
   const { selectedBooking } = useSelectedBookingContext();
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("h3", null, t2(selectedBooking ? "UPDATERESERVATION" : "ADDRESERVATION")), /* @__PURE__ */ React__default.createElement("hr", {
-    style: { width: "100%" }
+    style: { width: "100%", marginTop: 15 }
   }));
 };
 const index = ({ filtersData, venueId, reloadMainTable }) => {
@@ -106242,14 +106324,14 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
   const [currentTimeZone, setCurrentTimeZone] = useState("");
   const [partySizeOptions2, setPartySizeOptions] = useState([]);
   const [sourceOptions, setSourceOptions] = useState([]);
-  const [areaOptions, setAreaOptions] = useState([]);
+  const [timeByDayOptions, setTimeByDayOptions] = useState([]);
+  const [timeOptions, setTimeOptions] = useState([]);
   const [tableOptions, setTableOptions] = useState([]);
   const defaultValue = {
     source: { value: "reservation", label: "Reservation" },
     date: "",
-    time: "",
+    time: null,
     partySize: null,
-    area: { value: null, label: "All" },
     areaName: "",
     table: { value: null, label: "All" },
     firstName: "",
@@ -106265,7 +106347,11 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
       (value2) => value2 !== null && typeof value2 === "object" && !!value2.value
     ).required(),
     date: create$2().required(),
-    time: create$2().required(),
+    time: create$4().test(
+      "is-valid-time",
+      "Time is required",
+      (value2) => value2 !== null && typeof value2 === "object" && !!value2.value
+    ).required(),
     partySize: create$4().test(
       "is-valid-partySize",
       "Party Size is required",
@@ -106315,16 +106401,12 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     control,
     name: "partySize"
   });
-  const table2 = useWatch({
-    control,
-    name: "table"
-  });
   const { data: data2, reload, isLoading } = useFetch(
-    source2 && (source2 == null ? void 0 : source2.value) && date4 && time2 && partySize && (partySize == null ? void 0 : partySize.value) ? source2.value == "reservation" ? GetTableAvailability : GetTableWalkInAvailability : () => Promise.resolve([]),
+    source2 && (source2 == null ? void 0 : source2.value) && date4 && time2 && (time2 == null ? void 0 : time2.value) && partySize && (partySize == null ? void 0 : partySize.value) ? source2.value == "reservation" ? GetTableAvailability : GetTableWalkInAvailability : () => Promise.resolve([]),
     {
       cacheId: "reservation0dashboard0table0availability",
       venue_id: venueId,
-      params: source2 && (source2 == null ? void 0 : source2.value) ? { startSec: moment$1.tz(`${date4} ${time2}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3, partySize: partySize == null ? void 0 : partySize.value } : {}
+      params: source2 && (source2 == null ? void 0 : source2.value) ? { startSec: moment$1.tz(`${date4} ${time2 == null ? void 0 : time2.value}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3, partySize: partySize == null ? void 0 : partySize.value } : {}
     }
   );
   const { execute: executeCreate, data: responBookingCreate, isExecuting: loadingCreate } = useService(AddBooking);
@@ -106334,13 +106416,13 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     }
   });
   const onSubmit = async () => {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d;
     const data22 = await getValues();
     if (!selectedBooking) {
       const toSend = {
         partySize: (_a2 = data22 == null ? void 0 : data22.partySize) == null ? void 0 : _a2.value,
         table: (_b = data22 == null ? void 0 : data22.table) == null ? void 0 : _b.value,
-        date: data22.date ? moment$1.tz(`${data22.date} ${data22.time}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3 : moment$1.tz(moment$1(), currentTimeZone ? currentTimeZone : "").valueOf() / 1e3,
+        date: data22.date ? moment$1.tz(`${data22.date} ${(_c = data22.time) == null ? void 0 : _c.value}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3 : moment$1.tz(moment$1(), currentTimeZone ? currentTimeZone : "").valueOf() / 1e3,
         notes: data22 == null ? void 0 : data22.notes,
         contact: {
           firstname: data22 == null ? void 0 : data22.firstName,
@@ -106356,12 +106438,12 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
       });
       reloadMainTable();
     } else {
-      executeUpdate({ data: { table: (_c = data22 == null ? void 0 : data22.table) == null ? void 0 : _c.value }, venueId, bookingId: selectedBooking.id });
+      executeUpdate({ data: { table: (_d = data22 == null ? void 0 : data22.table) == null ? void 0 : _d.value }, venueId, bookingId: selectedBooking.id });
     }
   };
   useEffect(() => {
     if (data2) {
-      const tableOptions2 = selectedBooking ? [table2, ...data2.map((item2) => ({ value: item2.id, label: `${item2.name} (${item2 == null ? void 0 : item2.minCapacity} - ${item2 == null ? void 0 : item2.minCapacity})` }))] : data2.map((item2) => {
+      const tableOptions2 = data2.map((item2) => {
         var _a2, _b;
         return { value: item2.id, label: `${item2.name} ${((_a2 = item2 == null ? void 0 : item2.area) == null ? void 0 : _a2.name) ? "- " + ((_b = item2 == null ? void 0 : item2.area) == null ? void 0 : _b.name) : ""}` };
       });
@@ -106370,7 +106452,7 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
       );
       setTableOptions(uniqueTableOptions);
     }
-  }, [data2, selectedBooking]);
+  }, [data2]);
   useEffect(() => {
     if (responBookingCreate === "created") {
       setSelectedBooking(null);
@@ -106384,8 +106466,8 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     if (filtersData == null ? void 0 : filtersData.sources) {
       setSourceOptions(filtersData.sources.map((item2) => ({ value: item2.id, label: item2.label })));
     }
-    if (filtersData == null ? void 0 : filtersData.areas) {
-      setAreaOptions(filtersData.areas.map((item2) => ({ value: item2.id, label: item2.label })));
+    if (filtersData == null ? void 0 : filtersData.hours) {
+      setTimeByDayOptions(filtersData == null ? void 0 : filtersData.hours);
     }
     if ((filtersData == null ? void 0 : filtersData.tables) && !selectedBooking) {
       setTableOptions(filtersData.tables.map((item2) => ({ value: item2.id, label: item2.label })));
@@ -106397,7 +106479,6 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
   useEffect(() => {
     var _a2, _b, _c;
     if (selectedBooking) {
-      console.log(selectedBooking, "SELECTED BOOKING");
       const formattedTime = new Date(selectedBooking.date).toLocaleTimeString([], {
         ...(filtersData == null ? void 0 : filtersData.timeZone) ? {
           timeZone: filtersData == null ? void 0 : filtersData.timeZone
@@ -106409,7 +106490,7 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
       reset({
         source: { value: "reservation", label: "Reservation" },
         date: moment$1(selectedBooking.date).format("YYYY-MM-DD"),
-        time: formattedTime,
+        time: { value: formattedTime, label: formattedTime },
         partySize: partySizeOptions2.find((item2) => item2.value == selectedBooking.partySize),
         areaName: (_a2 = selectedBooking == null ? void 0 : selectedBooking.table) == null ? void 0 : _a2.areaName,
         table: { value: (_b = selectedBooking == null ? void 0 : selectedBooking.table) == null ? void 0 : _b.id, label: `${(_c = selectedBooking == null ? void 0 : selectedBooking.table) == null ? void 0 : _c.name}` },
@@ -106422,8 +106503,17 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     } else {
       reset(defaultValue);
     }
-  }, [selectedBooking, partySizeOptions2, tableOptions]);
-  return /* @__PURE__ */ React__default.createElement("form", {
+  }, [selectedBooking]);
+  useEffect(() => {
+    if (date4) {
+      const weekDay = moment$1(date4).format("dddd").toLocaleLowerCase();
+      const timeSlots = timeByDayOptions.find((item2) => item2.weekday === weekDay);
+      if (timeSlots) {
+        setTimeOptions(timeSlots.hours.map((item2) => ({ value: item2.id, label: item2.label })));
+      }
+    }
+  }, [date4]);
+  return /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", flexDirection: "column", gap: 10 },
     onSubmit: handleSubmit(onSubmit)
   }, /* @__PURE__ */ React__default.createElement(Header, null), !selectedBooking && /* @__PURE__ */ React__default.createElement("div", {
@@ -106449,19 +106539,18 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     type: "date"
   })), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "50%" }
-  }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    disabled: selectedBooking,
+  }, /* @__PURE__ */ React__default.createElement(SelectField, {
+    isDisabled: selectedBooking,
     control,
+    isClearable: true,
     id: "time",
     name: "time",
     label: "Time",
-    placeholder: "Time ...",
-    radius: "md",
-    type: "time"
+    options: timeOptions
   }))), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", gap: 10 }
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: selectedBooking ? "50%" : "100%" }
+    style: { width: "50%" }
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
     isDisabled: selectedBooking,
     control,
@@ -106470,33 +106559,15 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     name: "partySize",
     label: "Party Size",
     options: partySizeOptions2
-  })), selectedBooking ? /* @__PURE__ */ React__default.createElement("div", {
+  })), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "50%" }
-  }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    disabled: selectedBooking,
-    control,
-    id: "areaName",
-    name: "areaName",
-    label: "Area",
-    placeholder: "Area ...",
-    radius: "md"
-  })) : /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: "100%" }
-  }, /* @__PURE__ */ React__default.createElement(SelectField, {
-    control,
-    id: "table",
-    name: "table",
-    label: "Table",
-    options: tableOptions
-  }))), selectedBooking && /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
     control,
     id: "table",
     name: "table",
     label: "Table",
     options: tableOptions
-  })), /* @__PURE__ */ React__default.createElement("div", {
+  }))), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", gap: 10 }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "50%" }
@@ -106507,7 +106578,8 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     name: "firstName",
     label: "Firstname",
     placeholder: "Firstname ...",
-    radius: "md"
+    radius: "md",
+    filled: true
   })), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "50%" }
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
@@ -106517,7 +106589,8 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     name: "lastName",
     label: "Lastname",
     placeholder: "Lastname ...",
-    radius: "md"
+    radius: "md",
+    filled: true
   }))), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
@@ -106527,7 +106600,8 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     name: "email",
     label: "Email",
     placeholder: "Email ...",
-    radius: "md"
+    radius: "md",
+    filled: true
   })), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
@@ -106537,7 +106611,8 @@ const index = ({ filtersData, venueId, reloadMainTable }) => {
     name: "phone",
     label: "Phone",
     placeholder: "Phone ...",
-    radius: "md"
+    radius: "md",
+    filled: true
   })), /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(TextAreaField, {
@@ -106577,7 +106652,7 @@ function MainComponent({ venueId }) {
   const { data: filtersData, isLoading: filtersLoading, error: filtersError, reload: reloadSelectsData } = useFetch(GetCreateBookingSelectsData, {
     cacheId: "venueCapacity",
     venue_id: venueId,
-    includeAreaInTables: selectedBooking ? false : true,
+    includeAreaInTables: true,
     includeCoversInTables: false
   });
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mozrest-sdk-react-dev",
-  "version": "0.2.52",
+  "version": "0.2.53",
   "main": "mozrest-sdk.es.js",
   "keywords": ["mozrest"],
   "author": {