mozrest-sdk-react-dev 0.1.62 → 0.1.64

package/mozrest-sdk.es.js

@@ -6304,6 +6304,10 @@ const NAME = "Name";
 const CREATEDAT = "Created at";
 const CHANNEL = "Channel";
 const NOTABLESAVAILABLE = "No tables available";
+const NOTES = "Notes";
+const CANCELRESERVATION = "Cancel reservation";
+const AREYOUSURECANCELRESERVATION = "Are you sure you want to cancel this reservation?";
+const CANCELREASON = "Cancel reason";
 var en = {
   errors,
   SPECIALCLOSINGDATES,
@@ -6569,7 +6573,11 @@ var en = {
   NAME,
   CREATEDAT,
   CHANNEL,
-  NOTABLESAVAILABLE
+  NOTABLESAVAILABLE,
+  NOTES,
+  CANCELRESERVATION,
+  AREYOUSURECANCELRESERVATION,
+  CANCELREASON
 };
 instance.use(initReactI18next).init({
   resources: {
@@ -96639,23 +96647,23 @@ const formatData = (data2) => {
     };
   });
 };
-const mainConatiner = "_mainConatiner_1d3x0_1";
-const btnDanger = "_btnDanger_1d3x0_5";
-const btnWarning = "_btnWarning_1d3x0_10";
-const btnSuccess = "_btnSuccess_1d3x0_15";
-const container$2 = "_container_1d3x0_20";
-const button = "_button_1d3x0_52";
-const skeleton = "_skeleton_1d3x0_60";
-const pulse$1 = "_pulse_1d3x0_1";
-const item$2 = "_item_1d3x0_63";
-const icons = "_icons_1d3x0_68";
-const column = "_column_1d3x0_73";
-const row = "_row_1d3x0_80";
-const cards = "_cards_1d3x0_100";
-const cardActive = "_cardActive_1d3x0_106";
-const cards1 = "_cards1_1d3x0_111";
-const dot$1 = "_dot_1d3x0_122";
-const formInline = "_formInline_1d3x0_134";
+const mainConatiner = "_mainConatiner_ldb0i_1";
+const btnDanger = "_btnDanger_ldb0i_5";
+const btnWarning = "_btnWarning_ldb0i_10";
+const btnSuccess = "_btnSuccess_ldb0i_15";
+const container$2 = "_container_ldb0i_20";
+const button = "_button_ldb0i_52";
+const skeleton = "_skeleton_ldb0i_60";
+const pulse$1 = "_pulse_ldb0i_1";
+const item$2 = "_item_ldb0i_63";
+const icons = "_icons_ldb0i_69";
+const column = "_column_ldb0i_74";
+const row = "_row_ldb0i_81";
+const cards = "_cards_ldb0i_101";
+const cardActive = "_cardActive_ldb0i_107";
+const cards1 = "_cards1_ldb0i_112";
+const dot$1 = "_dot_ldb0i_123";
+const formInline = "_formInline_ldb0i_135";
 var styles$8 = {
   mainConatiner,
   btnDanger,
@@ -96663,7 +96671,7 @@ var styles$8 = {
   btnSuccess,
   container: container$2,
   button,
-  "button-disable": "_button-disable_1d3x0_55",
+  "button-disable": "_button-disable_ldb0i_55",
   skeleton,
   pulse: pulse$1,
   item: item$2,
@@ -96716,7 +96724,7 @@ const SelectedDateDisplay = ({ selectedDate, onSelectDate, datesSummary }) => {
       index2 === selectedCardIndex && styles$8.cardActive
     ])
   }, /* @__PURE__ */ React__default.createElement("p", {
-    style: { fontSize: "12px", marginBottom: "5px", textAlign: "center", fontWeight: "bold" }
+    style: { fontSize: "12px", marginBottom: 0, textAlign: "center", fontWeight: "bold" }
   }, " ", d2.date.toLocaleDateString([], { weekday: "short" }).toUpperCase(), " "), /* @__PURE__ */ React__default.createElement("div", {
     style: { textAlign: "center", position: "relative", bottom: "10px" }
   }, /* @__PURE__ */ React__default.createElement("strong", {
@@ -97069,7 +97077,7 @@ const ReservationComp = ({
   }, /* @__PURE__ */ React__default.createElement("img", {
     src: logo2,
     style: { width: 25, height: 25, display: "inline-block", marginRight: 8, marginLeft: 16 }
-  }), /* @__PURE__ */ React__default.createElement("p", null, name)), /* @__PURE__ */ React__default.createElement("td", {
+  }), name), /* @__PURE__ */ React__default.createElement("td", {
     style: { textAlign: "center" }
   }, partySize), /* @__PURE__ */ React__default.createElement("td", {
     style: { textAlign: "center" }
@@ -97134,17 +97142,14 @@ var styles$6 = {
   table,
   item
 };
-const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues }) => {
+const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues, currentDate }) => {
   const { t: t2 } = useTranslation();
   const [currentDayHours, setCurrentDayHours] = useState([]);
   const {
     handleChange,
     setFieldValue,
-    validateForm,
     handleSubmit,
-    values,
-    errors: errors2,
-    isSubmitting
+    values
   } = useFormikContext();
   useEffect(() => {
     setBookingValues(values);
@@ -97154,8 +97159,10 @@ const FilterForm = ({ partyOptions, areasOptions, hoursOptions, setBookingValues
     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);
     handleSubmit();
-  }, []);
+  }, [currentDate]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: styles$6.filterRow
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -98554,7 +98561,7 @@ var require$$1 = {
 var moment = momentTimezone$1.exports = momentTimezone.exports;
 moment.tz.load(require$$1);
 var moment$1 = momentTimezone$1.exports;
-const TableFilters = ({ venueId, params, setParams, reload, setBookingValues, currentTimeZone }) => {
+const TableFilters = ({ venueId, params, setParams, reload, setBookingValues, currentTimeZone, currentDate }) => {
   const {
     data: data2,
     isLoading,
@@ -98610,19 +98617,20 @@ const TableFilters = ({ venueId, params, setParams, reload, setBookingValues, cu
     partyOptions: data2.partySizes,
     areasOptions: data2.areas,
     hoursOptions: data2.hours,
-    setBookingValues
+    setBookingValues,
+    currentDate
   })));
 };
 const TableRow = ({ row: row2, setSelectedTable }) => {
-  var _a2, _b, _c;
+  var _a2, _b;
   return /* @__PURE__ */ React__default.createElement("tr", {
     className: styles$6.item,
     onClick: () => setSelectedTable(row2)
   }, /* @__PURE__ */ React__default.createElement("td", {
-    style: { textAlign: "left" }
-  }, `${row2.name} (${(_a2 = row2.area) != null ? _a2 : "No area"})`), /* @__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" }
-  }, `${(_b = row2.minCapacity) != null ? _b : "?"} - ${(_c = row2.maxCapacity) != null ? _c : "?"}`), /* @__PURE__ */ React__default.createElement("td", {
+  }, `${(_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,
@@ -98667,7 +98675,7 @@ const GetTableAvailability = async ({
   }
   return [];
 };
-const TableAvailability = ({ venueId, setSelectedTable, setBookingValues, params, setParams, currentTimeZone }) => {
+const TableAvailability = ({ venueId, setSelectedTable, setBookingValues, params, setParams, currentTimeZone, currentDate }) => {
   const { data: data2, reload } = useFetch(GetTableAvailability, { cacheId: "reservation0dashboard0table0availability", venue_id: venueId, params });
   const handleOnSelectTable = (row2) => {
     setSelectedTable(row2);
@@ -98680,7 +98688,8 @@ const TableAvailability = ({ venueId, setSelectedTable, setBookingValues, params
     setParams,
     reload,
     setBookingValues,
-    currentTimeZone
+    currentTimeZone,
+    currentDate
   }), /* @__PURE__ */ React__default.createElement(Table, {
     data: data2 != null ? data2 : [],
     setSelectedTable: (row2) => handleOnSelectTable(row2)
@@ -98693,7 +98702,7 @@ const AddBooking = async ({
   await instance$1.post(`/resbook/venue/${venueId}/bookings`, data2);
   return { data: "created" };
 };
-const ContactDetailsFormFields = (props) => {
+const ContactDetailsFormFields = ({ isExecuting = false }) => {
   const { t: t2 } = useTranslation();
   const {
     handleChange,
@@ -98713,47 +98722,42 @@ const ContactDetailsFormFields = (props) => {
     xs: 24,
     lg: 10
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    style: { width: "90%" },
     id: "firstname",
     label: t2("FIRSTNAME")
   })), /* @__PURE__ */ React__default.createElement(Col$1, {
     xs: 20,
     lg: 10
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    style: { width: "90%" },
     id: "lastname",
     label: t2("LASTNAME")
   })), /* @__PURE__ */ React__default.createElement(Col$1, {
     xs: 20,
     lg: 10
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    style: { width: "90%" },
     id: "telephone",
     label: t2("PHONENUMBER")
   })), /* @__PURE__ */ React__default.createElement(Col$1, {
     xs: 24,
     lg: 10
   }, /* @__PURE__ */ React__default.createElement(TextInputField, {
-    style: { width: "90%" },
     id: "email",
     label: t2("EMAIL")
   })), /* @__PURE__ */ React__default.createElement(Col$1, {
     xs: 24,
     lg: 28
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: "80%" }
   }, /* @__PURE__ */ React__default.createElement(TextAreaField, {
     id: "notes",
     label: t2("SPECIALREQUESTS"),
     maxLength: 100
-  }))))), /* @__PURE__ */ React__default.createElement("div", {
+  })))), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", marginTop: 12, width: "100%" }
   }, /* @__PURE__ */ React__default.createElement(Button$3, {
     size: "small",
     mode: "primary",
     className: "w-full",
     type: "submit",
-    disabled: !isValid2
+    disabled: !isValid2,
+    isLoading: isExecuting
   }, t2("CREATERESERVATION"))));
 };
 const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreated, bookingValues, currentTimeZone, reloadMainTable }) => {
@@ -98772,7 +98776,7 @@ const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreat
     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"))
   });
-  const { execute, data: data2 } = useService(AddBooking);
+  const { execute, data: data2, isExecuting } = useService(AddBooking);
   const handleOnSubmit = async (values) => {
     var _a2, _b;
     const toSend = {
@@ -98804,14 +98808,16 @@ const ContactDetailsForm = ({ venueId, selectedTable, setSelectedTable, setCreat
     initialValues,
     onSubmit: handleOnSubmit,
     validationSchema: bookingSchema
-  }, /* @__PURE__ */ React__default.createElement(ContactDetailsFormFields, null)));
+  }, /* @__PURE__ */ React__default.createElement(ContactDetailsFormFields, {
+    isExecuting
+  })));
 };
 const ContactDetails = ({ setSelectedTable, selectedTable, venueId, setCreated, bookingValues, reloadMainTable, currentTimeZone }) => {
   var _a2, _b, _c;
   return /* @__PURE__ */ React__default.createElement("div", {
     className: ""
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", justifyContent: "start", gap: 20 }
+    style: { display: "flex", justifyContent: "start", gap: 20, marginBottom: 30 }
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     icon: "arrowLeft",
     onClick: () => setSelectedTable(null),
@@ -98831,7 +98837,7 @@ const ContactDetails = ({ setSelectedTable, selectedTable, venueId, setCreated,
   }, /* @__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 : "?"}`), /* @__PURE__ */ React__default.createElement("div", {
+  }), (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",
@@ -98852,7 +98858,7 @@ const BookingConfirmation = ({ bookingDetails }) => {
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("h1", {
     style: { textAlign: "center" }
   }, t2("BOOKINGCONFIRMED")), /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", justifyContent: "start", gap: 20 }
+    style: { display: "flex", justifyContent: "start", gap: 20, marginBottom: 30 }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex" }
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
@@ -98868,7 +98874,7 @@ const BookingConfirmation = ({ bookingDetails }) => {
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     icon: "people",
     className: "mr-2"
-  }), (_c = bookingDetails == null ? void 0 : bookingDetails.partySize) != null ? _c : "?"), /* @__PURE__ */ React__default.createElement("div", {
+  }), (_c = bookingDetails == null ? void 0 : bookingDetails.partySize) != null ? _c : "?"), (bookingDetails == null ? void 0 : bookingDetails.area) && /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex" }
   }, /* @__PURE__ */ React__default.createElement(Icon$1, {
     icon: "business",
@@ -98883,7 +98889,7 @@ const BookingConfirmation = ({ bookingDetails }) => {
     style: { color: "GrayText", marginTop: 0 }
   }, bookingDetails.notes && bookingDetails.notes.length > 0 ? bookingDetails.notes : "---"));
 };
-const CreateReservation = ({ open, onClose: onClose2, venueId, reloadMainTable, currentTimeZone }) => {
+const CreateReservation = ({ open, onClose: onClose2, venueId, reloadMainTable, currentTimeZone, currentDate }) => {
   const { t: t2 } = useTranslation();
   const [params, setParams] = useState(null);
   const [selectedTable, setSelectedTable] = useState(null);
@@ -98896,6 +98902,7 @@ const CreateReservation = ({ open, onClose: onClose2, venueId, reloadMainTable,
   return /* @__PURE__ */ React__default.createElement(Modal2, {
     open,
     onClose: onClose2,
+    width: 800,
     title: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Heading, null, t2("ADDRESERVATION")))
   }, /* @__PURE__ */ React__default.createElement("div", null, !selectedTable && !created && /* @__PURE__ */ React__default.createElement(TableAvailability, {
     venueId,
@@ -98903,7 +98910,8 @@ const CreateReservation = ({ open, onClose: onClose2, venueId, reloadMainTable,
     setBookingValues,
     params,
     setParams,
-    currentTimeZone
+    currentTimeZone,
+    currentDate
   }), selectedTable && !created && /* @__PURE__ */ React__default.createElement(ContactDetails, {
     venueId,
     setSelectedTable,
@@ -98961,7 +98969,11 @@ const TableSelectField = ({ value: value2, tableOptions, isEdit, setIsEdit }) =>
 };
 const UpdateBooking = async ({ venueId, bookingId, data: data2 }) => {
   await instance$1.put(`/resbook/venue/${venueId}/bookings/${bookingId}`, data2);
-  return { data: "created" };
+  return { data: "updated" };
+};
+const CancelBooking = async ({ venueId, bookingId, data: data2 }) => {
+  await instance$1.put(`/resbook/venue/${venueId}/bookings/${bookingId}/cancel`, data2);
+  return { data: "canceled" };
 };
 const TableSelectForm = ({ table: table2, id: id2, tableOptions, initialValues, isEdit, setIsEdit, reloadMainTable, onClose: onClose2, venueId }) => {
   const emptyVal = {
@@ -98986,9 +98998,53 @@ const TableSelectForm = ({ table: table2, id: id2, tableOptions, initialValues,
     setIsEdit
   }));
 };
-const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable, selectedRow, currentTimeZone }) => {
+const CancelReservationModal = ({ onAccept, isLoading, message: message2, title: title2, ...props }) => {
+  const { t: t2 } = useTranslation();
+  const initialValues = {
+    cancelActor: "",
+    cancelReason: ""
+  };
+  const bookingSchema = create$1().shape({
+    cancelActor: create$2().required(t2("errors.required")),
+    cancelReason: create$2()
+  });
+  return /* @__PURE__ */ React__default.createElement(Modal2, {
+    ...props,
+    title: t2("CANCELRESERVATION")
+  }, /* @__PURE__ */ React__default.createElement("h5", null, t2("AREYOUSURECANCELRESERVATION")), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Formik, {
+    initialValues,
+    validationSchema: bookingSchema,
+    onSubmit: (values, { resetForm }) => {
+      onAccept(values);
+      resetForm({ values: initialValues });
+    }
+  }, ({ values, errors: errors2, touched, isValid: isValid2 }) => /* @__PURE__ */ React__default.createElement(Form$c, null, /* @__PURE__ */ React__default.createElement(TextInputField, {
+    id: "cancelActor",
+    label: t2("FIRSTNAME")
+  }), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    id: "cancelReason",
+    label: t2("CANCELREASON"),
+    maxLength: 100
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    style: { display: "flex", justifyContent: "center", gap: 20, marginTop: 20 }
+  }, /* @__PURE__ */ React__default.createElement(Button$3, {
+    size: "small",
+    mode: "tertiary",
+    onClick: props.onClose,
+    disabled: isLoading
+  }, t2("CANCEL")), /* @__PURE__ */ React__default.createElement(Button$3, {
+    size: "small",
+    type: "submit",
+    disabled: !isValid2,
+    isLoading
+  }, t2("ACCEPT")))))));
+};
+const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable, selectedRow, currentTimeZone, setSelectedRow }) => {
   var _a2, _b, _c, _d, _e2, _f, _g;
   const { t: t2 } = useTranslation();
+  const [openCancelReservationModal, setOpenCancelReservationModal] = useState(false);
+  const onOpenCancelRevModal = () => setOpenCancelReservationModal(true);
+  const onCloseCancelRevModal = () => setOpenCancelReservationModal(false);
   const [isEdit, setIsEdit] = useState(false);
   const [initialValues, setInitialValues] = useState(null);
   const { data: data2 } = useFetch(GetTableAvailability, {
@@ -98999,6 +99055,20 @@ const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable,
       partySize: selectedRow.partySize
     } : { startSec: null }
   });
+  const { isExecuting, execute } = useService(CancelBooking, {
+    onSuccess: async () => {
+      setSelectedRow({ ...selectedRow, status: "canceled" });
+      onCloseCancelRevModal();
+      reloadMainTable();
+    }
+  });
+  const cancelReservation = async (values) => {
+    const toSend = {
+      cancelActor: values.cancelActor,
+      cancelReason: values.cancelReason
+    };
+    execute({ data: toSend, venueId, bookingId: selectedRow.id });
+  };
   useEffect(() => {
     if (selectedRow && selectedRow.table && open) {
       setInitialValues({ id: selectedRow.table.id, label: selectedRow.table.name });
@@ -99011,31 +99081,31 @@ const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable,
     onClose: onClose2,
     title: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Heading, null, t2("RESERVATIONDETAILS")))
   }, selectedRow && selectedRow.table && initialValues && /* @__PURE__ */ React__default.createElement("div", {
-    style: { display: "flex", justifyContent: "start", flexDirection: "column", fontSize: 17 }
+    style: { display: "flex", justifyContent: "start", flexDirection: "column", fontSize: 17, gap: 20 }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10, alignItems: "center" }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
   }, t2("CHANNEL"), ":"), selectedRow.bookingChannelLogo && /* @__PURE__ */ React__default.createElement("img", {
     src: selectedRow.bookingChannelLogo,
     style: { width: 25, height: 25 }
-  }), /* @__PURE__ */ React__default.createElement("p", null, (_a2 = selectedRow.bookingChannelName) != null ? _a2 : "---")), /* @__PURE__ */ React__default.createElement("div", {
+  }), /* @__PURE__ */ React__default.createElement("div", null, (_a2 = selectedRow.bookingChannelName) != null ? _a2 : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("NAME"), ":"), /* @__PURE__ */ React__default.createElement("p", null, selectedRow.name)), /* @__PURE__ */ React__default.createElement("div", {
+  }, t2("NAME"), ":"), /* @__PURE__ */ React__default.createElement("div", null, selectedRow.name)), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("PHONE"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_b = selectedRow.contact.telephone) != null ? _b : "---")), /* @__PURE__ */ React__default.createElement("div", {
+  }, t2("PHONE"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_b = selectedRow.contact.telephone) != null ? _b : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("EMAIL"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_c = selectedRow.contact.email) != null ? _c : "---")), /* @__PURE__ */ React__default.createElement("div", {
+  }, t2("EMAIL"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_c = selectedRow.contact.email) != null ? _c : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("MEALDATE"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_d = new Date(selectedRow.date).toLocaleString(void 0, {
+  }, t2("MEALDATE"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_d = new Date(selectedRow.date).toLocaleString(void 0, {
     ...currentTimeZone ? {
       timeZone: currentTimeZone
     } : {},
@@ -99047,13 +99117,13 @@ const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable,
     hour12: false
   })) != null ? _d : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("PARTYSIZE"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_e2 = selectedRow.partySize) != null ? _e2 : "---")), /* @__PURE__ */ React__default.createElement("div", {
+  }, t2("PARTYSIZE"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_e2 = selectedRow.partySize) != null ? _e2 : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("CREATEDAT"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_f = new Date(selectedRow.createAt).toLocaleString(void 0, {
+  }, t2("CREATEDAT"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_f = new Date(selectedRow.createAt).toLocaleString(void 0, {
     ...currentTimeZone ? {
       timeZone: currentTimeZone
     } : {},
@@ -99065,9 +99135,9 @@ const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable,
     hour12: false
   })) != null ? _f : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start", flexDirection: "row", gap: 10 }
-  }, /* @__PURE__ */ React__default.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: { fontWeight: "bold" }
-  }, t2("NOTES"), ":"), /* @__PURE__ */ React__default.createElement("p", null, (_g = selectedRow.notes) != null ? _g : "---")), /* @__PURE__ */ React__default.createElement("div", {
+  }, t2("NOTES"), ":"), /* @__PURE__ */ React__default.createElement("div", null, (_g = selectedRow.notes) != null ? _g : "---")), /* @__PURE__ */ React__default.createElement("div", {
     style: { display: "flex", justifyContent: "start" }
   }, /* @__PURE__ */ React__default.createElement(TableSelectForm, {
     id: selectedRow.id,
@@ -99079,7 +99149,19 @@ const ReservationDetail = ({ open, onClose: onClose2, venueId, reloadMainTable,
     reloadMainTable,
     onClose: onClose2,
     venueId
-  }))));
+  })), selectedRow && selectedRow.status && selectedRow.status !== "canceled" && /* @__PURE__ */ React__default.createElement(Button$3, {
+    style: { marginTop: 10 },
+    type: "submit",
+    className: styles$8.btnDanger,
+    onClick: () => onOpenCancelRevModal()
+  }, t2("CANCELRESERVATION"))), selectedRow && selectedRow.status && selectedRow.status !== "canceled" && /* @__PURE__ */ React__default.createElement(CancelReservationModal, {
+    width: 400,
+    message: t2("AREYOUSURECANCELRESERVATION"),
+    onAccept: cancelReservation,
+    open: openCancelReservationModal,
+    onClose: onCloseCancelRevModal,
+    isLoading: isExecuting
+  }));
 };
 const ReservationDashboard = ({
   Header: Header2,
@@ -99162,7 +99244,8 @@ const ReservationDashboard = ({
     onClick: () => onOpenCreateReservation()
   }, "Add a reservation"), /* @__PURE__ */ React__default.createElement(Button$3, {
     size: "small",
-    className: styles$8.btnDanger
+    className: styles$8.btnDanger,
+    disabled: true
   }, "Add a walk-in"))), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement(Card, {
     className: classNameConatiner,
     header: Header2
@@ -99184,12 +99267,14 @@ const ReservationDashboard = ({
     open: openCreateReservation,
     onClose: onCloseCreateReservation,
     currentTimeZone,
+    currentDate,
     venueId,
     reloadMainTable: reload
   }), /* @__PURE__ */ React__default.createElement(ReservationDetail, {
     open: openDetailReservation,
     onClose: onCloseDetailReservation,
     selectedRow,
+    setSelectedRow,
     currentTimeZone,
     venueId,
     reloadMainTable: reload

package/package.json

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