ordering-ui-external 13.0.4 → 13.0.5

package/_modules/themes/five/src/components/MomentControl/index.js

@@ -55,6 +55,8 @@ var MomentControlUI = function MomentControlUI(props) {
     getActualSchedule = props.getActualSchedule,
     preorderMaximumDays = props.preorderMaximumDays,
     preorderMinimumDays = props.preorderMinimumDays;
+  var scheduleItemRef = (0, _react.useRef)();
+  var timeListRef = (0, _react.useRef)();
   var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
@@ -86,6 +88,10 @@ var MomentControlUI = function MomentControlUI(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     isEnabled = _useState8[0],
     setIsEnabled = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    nextTime = _useState10[0],
+    setNextTime = _useState10[1];
   var handleCheckBoxChange = function handleCheckBoxChange(index) {
     if (index) {
       !orderState.loading && handleAsap();
@@ -165,6 +171,36 @@ var MomentControlUI = function MomentControlUI(props) {
   (0, _react.useEffect)(function () {
     setLocalMoment();
   }, []);
+  (0, _react.useEffect)(function () {
+    if (timeListRef !== null && timeListRef !== void 0 && timeListRef.current && !orderState.loading && timeSelected) {
+      var _scheduleItemRef$curr;
+      timeListRef.current.scroll({
+        left: 0,
+        top: (scheduleItemRef === null || scheduleItemRef === void 0 || (_scheduleItemRef$curr = scheduleItemRef.current) === null || _scheduleItemRef$curr === void 0 ? void 0 : _scheduleItemRef$curr.offsetTop) - 300
+      });
+    }
+  }, [timeListRef === null || timeListRef === void 0 ? void 0 : timeListRef.current, timeSelected, orderState.loading, timeList === null || timeList === void 0 ? void 0 : timeList.length]);
+  (0, _react.useEffect)(function () {
+    if (preorderMinimumDays === 0 && preorderLeadTime === 0) return;
+    var isToday = dateSelected === (0, _moment.default)().format('YYYY-MM-DD');
+    if (isCart && isToday && !(orderState !== null && orderState !== void 0 && orderState.loading) && (timeList === null || timeList === void 0 ? void 0 : timeList.length) > 0) {
+      var _timeList$;
+      setNextTime((_timeList$ = timeList === null || timeList === void 0 ? void 0 : timeList[0]) !== null && _timeList$ !== void 0 ? _timeList$ : null);
+    }
+  }, [timeList === null || timeList === void 0 ? void 0 : timeList.length]);
+  (0, _react.useEffect)(function () {
+    if (nextTime !== null && nextTime !== void 0 && nextTime.value && (timeList === null || timeList === void 0 ? void 0 : timeList.length) > 0 && isCart && !(orderState !== null && orderState !== void 0 && orderState.loading) && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
+      var _timeList$filter, _timeList$filter$find;
+      var notime = timeList === null || timeList === void 0 || (_timeList$filter = timeList.filter(function (_, i) {
+        return i !== 0;
+      })) === null || _timeList$filter === void 0 || (_timeList$filter$find = _timeList$filter.find) === null || _timeList$filter$find === void 0 ? void 0 : _timeList$filter$find.call(_timeList$filter, function (time) {
+        return (time === null || time === void 0 ? void 0 : time.value) === timeSelected;
+      });
+      if (!notime) {
+        handleChangeTime(nextTime === null || nextTime === void 0 ? void 0 : nextTime.value);
+      }
+    }
+  }, [nextTime === null || nextTime === void 0 ? void 0 : nextTime.value]);
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "moment_control"
   }, !isAppoint && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isCart && /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('WHEN_DO_WE_DELIVERY', 'When do we delivery?')), (preorderMinimumDays === 0 && preorderLeadTime === 0 || !cateringPreorder) && /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
@@ -173,7 +209,7 @@ var MomentControlUI = function MomentControlUI(props) {
       return handleCheckBoxChange(true);
     },
     isLoading: orderState === null || orderState === void 0 ? void 0 : orderState.loading
-  }, isASP ? /*#__PURE__*/_react.default.createElement(_styles.CheckedIcon, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP'), " (", (0, _moment.default)(new Date()).format('LLLL'), " - ", t('DELIVERY_TIME', 'delivery time'), ")")), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
+  }, isASP ? /*#__PURE__*/_react.default.createElement(_styles.CheckedIcon, null) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('CHECKOUT_ASAP', 'ASAP'), " (", (0, _moment.default)(new Date()).format('LLLL'), " + ", t('DELIVERY_TIME', 'delivery time'), ")")), /*#__PURE__*/_react.default.createElement(_styles.CheckBoxWrapper, {
     highlight: !isASP,
     onClick: function onClick() {
       return handleCheckBoxChange(null);
@@ -222,7 +258,9 @@ var MomentControlUI = function MomentControlUI(props) {
     }, dayName), /*#__PURE__*/_react.default.createElement(_styles.DayNumber, {
       isAppoint: isAppoint
     }, dayNumber)));
-  })))), /*#__PURE__*/_react.default.createElement(_styles.TimeListWrapper, null, isEnabled && (timeList === null || timeList === void 0 ? void 0 : timeList.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, timeList.map(function (time, i) {
+  })))), /*#__PURE__*/_react.default.createElement(_styles.TimeListWrapper, {
+    ref: timeListRef
+  }, isEnabled && (timeList === null || timeList === void 0 ? void 0 : timeList.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, timeList.map(function (time, i) {
     return /*#__PURE__*/_react.default.createElement(_styles.TimeItem, {
       key: i,
       active: timeSelected === time.value,
@@ -232,6 +270,7 @@ var MomentControlUI = function MomentControlUI(props) {
       isAppoint: isAppoint,
       cateringPreorder: cateringPreorder
     }, /*#__PURE__*/_react.default.createElement("span", null, cateringPreorder && /*#__PURE__*/_react.default.createElement(_styles.CheckIcon, null, timeSelected === time.value ? /*#__PURE__*/_react.default.createElement(_styles.CheckedIcon, {
+      ref: scheduleItemRef,
       cateringPreorder: cateringPreorder
     }) : /*#__PURE__*/_react.default.createElement(_CgRadioCheck.default, null)), /*#__PURE__*/_react.default.createElement("p", null, time.text, " ", cateringPreorder && "- ".concat(time.endText))));
   })) : /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, !business ? t('ERROR_SHEDULE_UNAVAILABLE', 'There are no schedules for this date') : t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')))) : /*#__PURE__*/_react.default.createElement(_CustomLayout.CustomLayout, {

package/_modules/themes/five/src/components/OrderDetails/styles.js

@@ -40,7 +40,7 @@ var ActionsBlock = exports.ActionsBlock = _styledComponents.default.div(_templat
   var _props$theme;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n  "])));
 });
-var OrderInfo = exports.OrderInfo = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0px 0px 35px;\n  position: relative;\n  h1, p {\n    margin: 0px;\n    color: ", ";\n  }\n  h1 {\n    margin-bottom: 5px;\n    font-weight: 600;\n    font-size: 32px;\n  }\n  p {\n    font-size: 14px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  .date {\n    margin-bottom: 6px;\n    text-transform: uppercase;\n  }\n  .types {\n    margin-bottom: 6px;\n    font-size: 16px;\n  }\n  .order-status {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  #error-subs {\n    margin: 20px 0 0;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: center;\n  }\n\n  @media (min-width: 768px) {\n    #error-subs {\n      margin: 20px 0;\n    }\n  }\n"])), function (props) {
+var OrderInfo = exports.OrderInfo = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0px 0px 35px;\n  position: relative;\n  h1, p {\n    margin: 0px;\n    color: ", ";\n  }\n  h1 {\n    margin-bottom: 5px;\n    font-weight: 600;\n    font-size: 32px;\n  }\n  p {\n    font-size: 14px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  .date {\n    margin-bottom: 6px;\n  }\n  .types {\n    margin-bottom: 6px;\n    font-size: 16px;\n  }\n  .order-status {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  #error-subs {\n    margin: 20px 0 0;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: center;\n  }\n\n  @media (min-width: 768px) {\n    #error-subs {\n      margin: 20px 0;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 });
 var ValidationText = exports.ValidationText = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "13.0.4",
+  "version": "13.0.5",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

package/src/themes/five/src/components/MomentControl/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import moment from 'moment'
 import { useLocation } from 'react-router-dom'
 import {
@@ -62,6 +62,8 @@ const MomentControlUI = (props) => {
     preorderMinimumDays
   } = props
 
+  const scheduleItemRef = useRef()
+  const timeListRef = useRef()
   const [{ configs }] = useConfig()
   const is12hours = configs?.general_hour_format?.value?.includes('hh:mm')
   const [{ parseTime }] = useUtils()
@@ -72,6 +74,7 @@ const MomentControlUI = (props) => {
   const [timeList, setTimeList] = useState([])
   const [scheduleList, setScheduleList] = useState(null)
   const [isEnabled, setIsEnabled] = useState(true)
+  const [nextTime, setNextTime] = useState(null)
 
   const handleCheckBoxChange = (index) => {
     if (index) {
@@ -167,8 +170,8 @@ const MomentControlUI = (props) => {
       _timeLists = hoursList
         .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
           moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
-        moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
-        (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
         .map(hour => {
           return {
             value: hour.startTime,
@@ -213,6 +216,32 @@ const MomentControlUI = (props) => {
     setLocalMoment()
   }, [])
 
+  useEffect(() => {
+    if (timeListRef?.current && !orderState.loading && timeSelected) {
+      timeListRef.current.scroll({
+        left: 0,
+        top: scheduleItemRef?.current?.offsetTop - 300
+      })
+    }
+  }, [timeListRef?.current, timeSelected, orderState.loading, timeList?.length])
+
+  useEffect(() => {
+    if (preorderMinimumDays === 0 && preorderLeadTime === 0) return
+    const isToday = dateSelected === moment().format('YYYY-MM-DD')
+    if (isCart && isToday && !orderState?.loading && timeList?.length > 0) {
+      setNextTime(timeList?.[0] ?? null)
+    }
+  }, [timeList?.length])
+
+  useEffect(() => {
+    if (nextTime?.value && timeList?.length > 0 && isCart && !orderState?.loading && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
+      const notime = timeList?.filter((_, i) => i !== 0)?.find?.(time => time?.value === timeSelected)
+      if (!notime) {
+        handleChangeTime(nextTime?.value)
+      }
+    }
+  }, [nextTime?.value])
+
   return (
     <div id='moment_control'>
       {!isAppoint && (
@@ -227,7 +256,7 @@ const MomentControlUI = (props) => {
               isLoading={orderState?.loading}
             >
               {isASP ? <CheckedIcon /> : <CgRadioCheck />}
-              <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} - {t('DELIVERY_TIME', 'delivery time')})</span>
+              <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} + {t('DELIVERY_TIME', 'delivery time')})</span>
             </CheckBoxWrapper>
           )}
           <CheckBoxWrapper
@@ -300,7 +329,7 @@ const MomentControlUI = (props) => {
                   </Swiper>
                 </DaysSwiper>
               </DateWrapper>
-              <TimeListWrapper>
+              <TimeListWrapper ref={timeListRef}>
                 {(isEnabled && timeList?.length > 0) ? (
                   <>
                     {timeList.map((time, i) => (
@@ -314,7 +343,7 @@ const MomentControlUI = (props) => {
                         <span>
                           {cateringPreorder && (
                             <CheckIcon>
-                              {timeSelected === time.value ? <CheckedIcon cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
+                              {timeSelected === time.value ? <CheckedIcon ref={scheduleItemRef} cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
                             </CheckIcon>
                           )}
                           <p>

package/src/themes/five/src/components/OrderDetails/styles.js

@@ -183,7 +183,6 @@ export const OrderInfo = styled.div`
   }
   .date {
     margin-bottom: 6px;
-    text-transform: uppercase;
   }
   .types {
     margin-bottom: 6px;