mozrest-sdk-react-dev 0.1.69 → 0.1.70

package/mozrest-sdk.es.js

@@ -97221,19 +97221,22 @@ const Table$1 = ({ data: data2, setSelectedRow, currentTimeZone }) => {
     onClick: (value2) => setSelectedRow(value2)
   }))))));
 };
-const container = "_container_j0ivt_1";
-const filterRow = "_filterRow_j0ivt_7";
-const table = "_table_j0ivt_37";
-const item = "_item_j0ivt_41";
+const container = "_container_1ditd_1";
+const filterRow = "_filterRow_1ditd_7";
+const table = "_table_1ditd_37";
+const item = "_item_1ditd_41";
+const timeSlot = "_timeSlot_1ditd_46";
 var styles$6 = {
   container,
   filterRow,
   table,
-  item
+  item,
+  timeSlot,
+  "timeSlot-active-true": "_timeSlot-active-true_1ditd_50",
+  "timeSlot-active-false": "_timeSlot-active-false_1ditd_53"
 };
-const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues, currentDate }) => {
+const FilterForm = ({ tableOptions, setBookingValues, currentDate, partyOptions }) => {
   const { t: t2 } = useTranslation();
-  const [currentDayHours, setCurrentDayHours] = useState([]);
   const {
     handleChange,
     setFieldValue,
@@ -97241,12 +97244,9 @@ const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues
     values
   } = useFormikContext();
   useEffect(() => {
-    setBookingValues(values);
+    setBookingValues({ ...values, partyOptions });
+    handleSubmit();
   }, [values]);
-  useEffect(() => {
-    setCurrentDayHours(hoursOptions.find((d2) => d2.weekday === hooks(values.date).format("dddd").toLocaleLowerCase()).hours.filter((d2) => d2.id));
-    setFieldValue("time", hoursOptions.find((d2) => d2.weekday === hooks(values.date).format("dddd").toLocaleLowerCase()).hours.filter((d2) => d2.id)[0]);
-  }, [values.date]);
   useEffect(() => {
     if (currentDate)
       setFieldValue("date", currentDate);
@@ -97255,12 +97255,6 @@ const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues
   return /* @__PURE__ */ React__default.createElement("div", {
     className: styles$6.filterRow
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { minWidth: 100 }
-  }, /* @__PURE__ */ React__default.createElement(SelectField, {
-    id: "partySize",
-    label: t2("PARTYSIZE"),
-    options: partyOptions
-  })), /* @__PURE__ */ React__default.createElement("div", {
     style: { minWidth: 100, marginRight: 30 }
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
     id: "date",
@@ -97273,24 +97267,10 @@ const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues
   })), /* @__PURE__ */ React__default.createElement("div", {
     style: { minWidth: 100 }
   }, /* @__PURE__ */ React__default.createElement(SelectField, {
-    id: "time",
-    label: t2("TIME"),
-    options: currentDayHours
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    style: { minWidth: 100 }
-  }, /* @__PURE__ */ React__default.createElement(SelectField, {
-    id: "area",
-    label: t2("Area"),
-    options: areasOptions
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", justifyContent: "end", flex: 1 }
-  }, /* @__PURE__ */ React__default.createElement(Button$3, {
-    style: { marginTop: 30, justifyContent: "end" },
-    mode: "secondary",
-    icon: "search",
-    size: "small",
-    onClick: () => handleSubmit()
-  }, "")));
+    id: "table",
+    label: t2("TABLE"),
+    options: tableOptions
+  })));
 };
 var momentTimezone$1 = { exports: {} };
 var momentTimezone = { exports: {} };
@@ -98668,33 +98648,25 @@ const TableFilters = ({ venueId, params, setParams, reload, setBookingValues, cu
     return /* @__PURE__ */ React__default.createElement(SkeletonFilters, null);
   }
   const initialValues = {
-    partySize: data2.partySizes ? data2.partySizes[1] : { label: "No selected", id: null },
-    time: data2.hours.find((h2) => h2.weekday == moment$1().format("dddd").toLocaleLowerCase()) ? data2.hours.find((h2) => h2.weekday == moment$1().format("dddd").toLocaleLowerCase()).hours.filter((d2) => d2.id)[0] : { label: "Closed", id: null },
-    area: data2.areas ? data2.areas[0] : { label: "No selected", id: null },
+    table: data2.tables ? data2.tables[1] : { label: "No selected", id: null },
     date: moment$1().format("YYYY-MM-DD")
   };
   const handleOnSubmit = (values) => {
-    const formatedDate = moment$1.tz(`${values.date} ${values.time.id}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3;
+    const formatedDate = moment$1.tz(`${values.date}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3;
     let auxParams = {
       ...params,
-      ...values.partySize.id ? {
-        partySize: values.partySize.id
-      } : {},
-      ...values.area.id ? {
-        area: values.area.id
-      } : {},
       ...values.date ? {
         startSec: formatedDate
+      } : {},
+      ...values.table.id ? {
+        table: values.table.id
       } : {}
     };
     if (!values.date && auxParams.startSec) {
       delete auxParams.startSec;
     }
-    if (!values.partySize.id && auxParams.partySize) {
-      delete auxParams.partySize;
-    }
-    if (!values.area.id && auxParams.area) {
-      delete auxParams.area;
+    if (!values.table.id && auxParams.table) {
+      delete auxParams.table;
     }
     setParams(auxParams);
     reload();
@@ -98703,60 +98675,42 @@ const TableFilters = ({ venueId, params, setParams, reload, setBookingValues, cu
     initialValues,
     onSubmit: handleOnSubmit
   }, /* @__PURE__ */ React__default.createElement(FilterForm, {
-    partyOptions: data2.partySizes,
-    areasOptions: data2.areas,
-    hoursOptions: data2.hours,
     setBookingValues,
-    currentDate
+    currentDate,
+    tableOptions: data2.tables.filter((t2) => t2.id),
+    partyOptions: data2.partySizes.filter((p2) => p2.id)
   })));
 };
 const TableRow = ({ row: row2, setSelectedTable }) => {
-  var _a2, _b;
-  return /* @__PURE__ */ React__default.createElement("tr", {
-    className: styles$6.item,
-    onClick: () => setSelectedTable(row2)
-  }, /* @__PURE__ */ React__default.createElement("td", {
-    style: { textAlign: "left", paddingTop: 10, paddingBottom: 10 }
-  }, `${row2.name} ${row2.area ? "(" + row2.area + ")" : ""}`), /* @__PURE__ */ React__default.createElement("td", {
-    style: { textAlign: "center" }
-  }, `${(_a2 = row2.minCapacity) != null ? _a2 : "?"} - ${(_b = row2.maxCapacity) != null ? _b : "?"}`), /* @__PURE__ */ React__default.createElement("td", {
-    style: { textAlign: "center" }
-  }, " ", row2.nextBookingIn ? /* @__PURE__ */ React__default.createElement(TimeFormatter, {
-    seconds: row2.nextBookingIn,
-    type: "minutes"
-  }) : "---"));
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: { display: "flex", gap: 3 }
+  }, row2 && row2.slots && row2.slots.length && row2.slots.length > 0 ? row2.slots.map((slot2, index2) => /* @__PURE__ */ React__default.createElement("div", {
+    key: index2,
+    onClick: () => slot2.available && setSelectedTable({ ...row2, slot: slot2 })
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames$2(styles$6["timeSlot"], styles$6[`timeSlot-active-${slot2.available ? "true" : "false"}`])
+  }, slot2.time))) : null);
 };
 const Table = ({ data: data2, setSelectedTable }) => {
   const { t: t2 } = useTranslation();
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { width: "100%", margin: "auto" }
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { overflowX: "auto" }
-  }, /* @__PURE__ */ React__default.createElement("table", {
-    className: styles$6.tableName
-  }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", {
-    style: { paddingLeft: 24, paddingRight: 24, textAlign: "left" }
-  }, "Table"), /* @__PURE__ */ React__default.createElement("th", {
-    style: { paddingLeft: 24, paddingRight: 24, textAlign: "center" }
-  }, "Capacity"), /* @__PURE__ */ React__default.createElement("th", {
-    style: { paddingLeft: 24, paddingRight: 24, textAlign: "center" }
-  }, "Next booking"))), /* @__PURE__ */ React__default.createElement("tbody", {
-    style: { backgroundColor: "white" }
+    style: { overflowX: "auto", display: "flex", flexDirection: "column", gap: 10 }
   }, data2.length && data2.length > 0 ? data2.map((table2, index2) => /* @__PURE__ */ React__default.createElement(TableRow, {
     row: table2,
     key: index2,
     setSelectedTable
   })) : /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", {
-    style: { textAlign: "center" },
-    colSpan: 10
-  }, /* @__PURE__ */ React__default.createElement("p", null, t2("NOTABLESAVAILABLE"))))))));
+    style: { textAlign: "center", width: "100%", backgroundColor: "#F8F8F8" }
+  }, /* @__PURE__ */ React__default.createElement("p", null, t2("NOTABLESAVAILABLE"))))));
 };
 const GetTableAvailability = async ({
   venue_id,
   params
 }) => {
   if (params && params.startSec) {
-    const responseData = await instance$1.get(`/resbook/venue/${venue_id}/table-availablity`, {
+    const responseData = await instance$1.get(`/resbook/venue/${venue_id}/table-availablity/map`, {
       params: { ...params, limit: 100 }
     });
     const data2 = responseData != null ? responseData : [];
@@ -98791,7 +98745,7 @@ const AddBooking = async ({
   await instance$1.post(`/resbook/venue/${venueId}/bookings`, data2);
   return { data: "created" };
 };
-const ContactDetailsFormFields = ({ isExecuting = false }) => {
+const ContactDetailsFormFields = ({ isExecuting = false, partyOptions }) => {
   const { t: t2 } = useTranslation();
   const {
     handleChange,
@@ -98810,6 +98764,13 @@ const ContactDetailsFormFields = ({ isExecuting = false }) => {
   }, /* @__PURE__ */ React__default.createElement(Col$1, {
     xs: 24,
     lg: 10
+  }, /* @__PURE__ */ React__default.createElement(SelectField, {
+    id: "partySize",
+    label: t2("PARTYSIZE"),
+    options: partyOptions
+  })), /* @__PURE__ */ React__default.createElement(Col$1, {
+    xs: 24,
+    lg: 10
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
     id: "firstname",
     label: t2("FIRSTNAME")
@@ -98850,28 +98811,31 @@ const ContactDetailsFormFields = ({ isExecuting = false }) => {
   }, t2("CREATERESERVATION"))));
 };
 const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreated, bookingValues, currentTimeZone, reloadMainTable }) => {
+  var _a2;
   const { t: t2 } = useTranslation();
   const initialValues = {
     notes: "",
     firstname: "",
     lastname: "",
     email: "",
-    telephone: ""
+    telephone: "",
+    partySize: bookingValues.partyOptions[0]
   };
   const bookingSchema = create$1().shape({
     firstname: create$2().required(t2("errors.required")),
     lastname: create$2().required(t2("errors.required")),
     notes: create$2(),
     email: create$2().required(t2("errors.required")).email(t2("errors.email")),
-    telephone: create$2().required(t2("errors.required")).matches(new RegExp(/^\+?[1-9]\d{8,14}$/), t2("errors.phone"))
+    telephone: create$2().required(t2("errors.required")).matches(new RegExp(/^\+?[1-9]\d{8,14}$/), t2("errors.phone")),
+    partySize: create$1()
   });
   const { execute, data: data2, isExecuting } = useService(AddBooking);
   const handleOnSubmit = async (values) => {
-    var _a2, _b;
+    var _a3, _b, _c;
     const toSend = {
-      partySize: bookingValues.partySize.id ? bookingValues.partySize.id : selectedTable.maxCapacity,
+      partySize: values.partySize.id ? values.partySize.id : 1,
       table: selectedTable.id,
-      date: bookingValues.date ? moment$1.tz(`${bookingValues.date} ${bookingValues.time.id}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3 : moment$1.tz(moment$1(), currentTimeZone ? currentTimeZone : "").valueOf() / 1e3,
+      date: bookingValues.date ? moment$1.tz(`${bookingValues.date} ${selectedTable.slot.time}`, currentTimeZone ? currentTimeZone : "").valueOf() / 1e3 : moment$1.tz(moment$1(), currentTimeZone ? currentTimeZone : "").valueOf() / 1e3,
       notes: values.notes,
       contact: {
         firstname: values.firstname,
@@ -98890,7 +98854,7 @@ const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreat
       setCreated(true);
     }
     setSelectedTable(null);
-    setCreated({ ...toSend, time: bookingValues.time.id, area: (_a2 = bookingValues.area.id) != null ? _a2 : null, dateString: (_b = new Date(`${bookingValues.date} ${bookingValues.time.id}`).toDateString()) != null ? _b : "?" });
+    setCreated({ ...toSend, time: selectedTable.slot.time, area: (_b = (_a3 = bookingValues == null ? void 0 : bookingValues.area) == null ? void 0 : _a3.id) != null ? _b : null, dateString: (_c = new Date(`${bookingValues.date} ${selectedTable.slot.time}`).toDateString()) != null ? _c : "?" });
     reloadMainTable();
   };
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("h4", null, t2("CONTACTDETAILS")), /* @__PURE__ */ React__default.createElement(Formik, {
@@ -98898,11 +98862,12 @@ const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreat
     onSubmit: handleOnSubmit,
     validationSchema: bookingSchema
   }, /* @__PURE__ */ React__default.createElement(ContactDetailsFormFields, {
-    isExecuting
+    isExecuting,
+    partyOptions: (_a2 = bookingValues.partyOptions) != null ? _a2 : []
   })));
 };
 const ContactDetails = ({ setSelectedTable, selectedTable, venueId, setCreated, bookingValues, reloadMainTable, currentTimeZone }) => {
-  var _a2, _b, _c;
+  var _a2;
   return /* @__PURE__ */ React__default.createElement("div", {
     className: ""
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -98921,17 +98886,7 @@ const ContactDetails = ({ setSelectedTable, selectedTable, venueId, setCreated,
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     icon: "clock",
     className: "mr-2"
-  }), (_a2 = bookingValues == null ? void 0 : bookingValues.time.id) != null ? _a2 : "---"), /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex" }
-  }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-    icon: "people",
-    className: "mr-2"
-  }), (bookingValues == null ? void 0 : bookingValues.partySize.id) ? bookingValues.partySize.id : `${(_b = selectedTable.minCapacity) != null ? _b : "?"}-${(_c = selectedTable.maxCapacity) != null ? _c : "?"}`), (bookingValues == null ? void 0 : bookingValues.area.id) && /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex" }
-  }, /* @__PURE__ */ React__default.createElement(Icon$1, {
-    icon: "business",
-    className: "mr-2"
-  }), (bookingValues == null ? void 0 : bookingValues.area.id) ? bookingValues == null ? void 0 : bookingValues.area.label : "?")), /* @__PURE__ */ React__default.createElement(ContactDetailsForm, {
+  }), (_a2 = selectedTable == null ? void 0 : selectedTable.slot.time) != null ? _a2 : "---")), /* @__PURE__ */ React__default.createElement(ContactDetailsForm, {
     venueId,
     selectedTable,
     setSelectedTable,

package/package.json

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