ordering-ui-external 14.1.19 → 14.1.20

package/_modules/themes/callcenterOriginal/src/components/AddressForm/index.js

@@ -38,7 +38,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var AddressFormUI = function AddressFormUI(props) {
-  var _addressState$address, _ref, _formState$changes$ad, _formState$changes, _addressState$address2, _addressState$address3, _addressState$address4, _formState$changes$lo, _formState$changes2, _configState$configs, _configState$configs2, _configState$configs3, _configState$configs4, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _props$afterMidElemen, _props$afterMidCompon, _orderState$options6, _props$afterComponent, _props$afterElements;
+  var _addressState$address, _ref, _formState$changes$ad, _formState$changes, _addressState$address2, _addressState$address3, _addressState$address4, _formState$changes$lo, _formState$changes2, _configState$configs, _configState$configs2, _configState$configs3, _configState$configs4, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _props$afterMidElemen, _props$afterMidCompon, _address$location5, _address$location6, _orderState$options6, _props$afterComponent, _props$afterElements;
   var addressesList = props.addressesList,
     googleMapsControls = props.googleMapsControls,
     formState = props.formState,
@@ -654,7 +654,7 @@ var AddressFormUI = function AddressFormUI(props) {
       return onCancel();
     },
     hoverColor: "#CCC"
-  }, t('CANCEL', 'Cancel')), Object.keys(formState === null || formState === void 0 ? void 0 : formState.changes).length > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, t('CANCEL', 'Cancel')), !(!selectedFromAutocomplete && address !== null && address !== void 0 && address.address && (!(address !== null && address !== void 0 && (_address$location5 = address.location) !== null && _address$location5 !== void 0 && _address$location5.lat) || !(address !== null && address !== void 0 && (_address$location6 = address.location) !== null && _address$location6 !== void 0 && _address$location6.lng))) && Object.keys(formState === null || formState === void 0 ? void 0 : formState.changes).length > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     id: "submit-btn",
     type: "submit",
     disabled: formState.loading,

package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -496,14 +496,15 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     showButton: true,
     cateringPreorder: !!cateringTypeString
   }, cateringValues))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
-    title: t('SELECT_A_STORE', 'Select a store'),
     open: modals.citiesOpen,
     width: "70%",
     onClose: function onClose() {
       return setModals(_objectSpread(_objectSpread({}, modals), {}, {
         citiesOpen: false
       }));
-    }
+    },
+    padding: "0px",
+    hideCloseDefault: true
   }, /*#__PURE__*/_react.default.createElement(_CitiesControl.CitiesControl, {
     cities: citiesState === null || citiesState === void 0 ? void 0 : citiesState.cities,
     handleChangeCity: handleChangeCity,

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

@@ -14,6 +14,8 @@ var _BsArrowRight = _interopRequireDefault(require("@meronex/icons/bs/BsArrowRig
 var _styles = require("./styles");
 var _Buttons = require("../../styles/Buttons");
 var _SearchBar = require("../SearchBar");
+var _styles2 = require("../Modal/styles");
+var _MdClose = _interopRequireDefault(require("@meronex/icons/md/MdClose"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,7 +49,11 @@ var CitiesControl = exports.CitiesControl = function CitiesControl(props) {
     cityState !== (orderState === null || orderState === void 0 || (_orderState$options2 = orderState.options) === null || _orderState$options2 === void 0 ? void 0 : _orderState$options2.city_id) && handleChangeCity(cityState);
     onClose && onClose();
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, orderState !== null && orderState !== void 0 && orderState.loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles2.ModalIconWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.ModalIcon, null, /*#__PURE__*/_react.default.createElement(_MdClose.default, {
+    onClick: function onClick() {
+      return onClose();
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_styles2.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_styles2.ModalTitle, null, t('SELECT_A_STORE', 'Select a store'))), orderState !== null && orderState !== void 0 && orderState.loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 40,
     count: 3,
     style: {
@@ -74,10 +80,10 @@ var CitiesControl = exports.CitiesControl = function CitiesControl(props) {
     }, (city === null || city === void 0 ? void 0 : city.id) === cityState ? /*#__PURE__*/_react.default.createElement(_RiRadioButtonFill.default, {
       className: "city-checked"
     }) : /*#__PURE__*/_react.default.createElement(_IosRadioButtonOff.default, null)), city === null || city === void 0 ? void 0 : city.name);
-  }), /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }))), /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     onClick: function onClick() {
       return handleClick();
     }
-  }, t('CONTINUE', 'Continue')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))));
+  }, t('CONTINUE', 'Continue')), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null)));
 };

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

@@ -8,9 +8,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 30px 20px;\n"])));
 var CityItem = exports.CityItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 15px 0px;\n  cursor: pointer;\n  span {\n    margin-right: 15px;\n  }\n  .city-checked{\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 });
-var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 8px;\n    font-size: 25px;\n    color: #ffffff;\n  }\n  button {\n    width: 100%;\n    padding: 5px;\n  }\n"])));
+var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  padding: 10px 20px 30px 20px;\n  background: white;\n  svg {\n    position: absolute;\n    right: 30px;\n    top: 40px;\n    font-size: 25px;\n    color: #ffffff;\n  }\n  button {\n    width: 100%;\n    padding: 5px;\n  }\n"])));
 var SearchBarContainer = exports.SearchBarContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.19",
+  "version": "14.1.20",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "13.0.29",
+    "ordering-components-external": "13.0.30",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/themes/callcenterOriginal/src/components/AddressForm/index.js

@@ -582,8 +582,7 @@ const AddressFormUI = (props) => {
                 </Button>
               )
             }
-
-            {Object.keys(formState?.changes).length > 0 && (
+            {!(!selectedFromAutocomplete && address?.address && (!address?.location?.lat || !address?.location?.lng)) && Object.keys(formState?.changes).length > 0 && (
               <Button
                 id='submit-btn'
                 type='submit'

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -540,10 +540,11 @@ const BusinessesListingUI = (props) => {
         />
       </Modal>
       <Modal
-        title={t('SELECT_A_STORE', 'Select a store')}
         open={modals.citiesOpen}
         width='70%'
         onClose={() => setModals({ ...modals, citiesOpen: false })}
+        padding='0px'
+        hideCloseDefault
       >
         <CitiesControl
           cities={citiesState?.cities}

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

@@ -8,6 +8,8 @@ import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import { ButtonWrapper, CityItem, Container, SearchBarContainer } from './styles'
 import { Button } from '../../styles/Buttons'
 import { SearchBar } from '../SearchBar'
+import { ModalHeader, ModalIcon, ModalIconWrapper, ModalTitle } from '../Modal/styles'
+import MdClose from '@meronex/icons/md/MdClose'
 
 export const CitiesControl = (props) => {
   const {
@@ -27,39 +29,54 @@ export const CitiesControl = (props) => {
   }
 
   return (
-    <Container>
-      {
-        orderState?.loading ? (
-          <Skeleton height={40} count={3} style={{ marginBottom: '10px' }} />
-        ) : (
-          <>
-            <SearchBarContainer>
-              <SearchBar
-                name='city-filter'
-                placeholder={t('SEARCH_CITIES', 'Search Cities')}
-                onSearch={(val) => setCityFilter(val)}
-                search={cityFilter}
-              />
-            </SearchBarContainer>
-            {cities?.filter(city => city?.name?.toLowerCase?.()?.includes(cityFilter?.toLowerCase?.()))?.map(city => city?.enabled && (
-              <CityItem key={city?.id} onClick={() => setCityState(city?.id === cityState ? null : city?.id)}>
-                <span className='radio'>
-                  {city?.id === cityState
-                    ? <RiRadioButtonFill className='city-checked' />
-                    : <IosRadioButtonOff />}
-                </span>
-                {city?.name}
-              </CityItem>
-            ))}
-            <ButtonWrapper>
-              <Button color='primary' onClick={() => handleClick()}>
-                {t('CONTINUE', 'Continue')}
-              </Button>
-              <BsArrowRight />
-            </ButtonWrapper>
-          </>
-        )
-      }
-    </Container>
+    <>
+      <Container>
+        <ModalIconWrapper>
+          <ModalIcon>
+            {
+              <MdClose onClick={() => onClose()} />
+            }
+          </ModalIcon>
+        </ModalIconWrapper>
+        <ModalHeader>
+          <ModalTitle>
+            {t('SELECT_A_STORE', 'Select a store')}
+          </ModalTitle>
+        </ModalHeader>
+        {
+          orderState?.loading ? (
+            <Skeleton height={40} count={3} style={{ marginBottom: '10px' }} />
+          ) : (
+            <>
+              <SearchBarContainer>
+                <SearchBar
+                  name='city-filter'
+                  placeholder={t('SEARCH_CITIES', 'Search Cities')}
+                  onSearch={(val) => setCityFilter(val)}
+                  search={cityFilter}
+                />
+              </SearchBarContainer>
+              {cities?.filter(city => city?.name?.toLowerCase?.()?.includes(cityFilter?.toLowerCase?.()))?.map(city => city?.enabled && (
+                <CityItem key={city?.id} onClick={() => setCityState(city?.id === cityState ? null : city?.id)}>
+                  <span className='radio'>
+                    {city?.id === cityState
+                      ? <RiRadioButtonFill className='city-checked' />
+                      : <IosRadioButtonOff />}
+                  </span>
+                  {city?.name}
+                </CityItem>
+              ))}
+
+            </>
+          )
+        }
+      </Container>
+      <ButtonWrapper>
+        <Button color='primary' onClick={() => handleClick()}>
+          {t('CONTINUE', 'Continue')}
+        </Button>
+        <BsArrowRight />
+      </ButtonWrapper>
+    </>
   )
 }

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components'
 
-export const Container = styled.div``
+export const Container = styled.div`
+  padding: 30px 20px;
+`
 
 export const CityItem = styled.div`
   display: flex;
@@ -19,10 +21,12 @@ export const CityItem = styled.div`
 export const ButtonWrapper = styled.div`
   position: sticky;
   bottom: 0;
+  padding: 10px 20px 30px 20px;
+  background: white;
   svg {
     position: absolute;
-    right: 10px;
-    top: 8px;
+    right: 30px;
+    top: 40px;
     font-size: 25px;
     color: #ffffff;
   }