ordering-ui-external 14.1.44 → 14.1.45

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

@@ -7,13 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddressForm = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
-var _CgSearchLoading = _interopRequireDefault(require("@meronex/icons/cg/CgSearchLoading"));
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 var _reactHookForm = require("react-hook-form");
 var _orderingComponentsExternal = require("ordering-components-external");
 var _Confirm = require("../Confirm");
-var _GoogleGpsButton = require("../../../../../components/GoogleGpsButton");
 var _styles = require("./styles");
 var _Buttons = require("../../styles/Buttons");
 var _Inputs = require("../../styles/Inputs");
@@ -537,17 +535,7 @@ var AddressFormUI = function AddressFormUI(props) {
       defaultValue: formState !== null && formState !== void 0 && (_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.result ? formState === null || formState === void 0 || (_formState$result4 = formState.result) === null || _formState$result4 === void 0 || (_formState$result4 = _formState$result4.result) === null || _formState$result4 === void 0 ? void 0 : _formState$result4.address : (_formState$changes$ad5 = formState === null || formState === void 0 || (_formState$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28.address) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressValue,
       autoComplete: "new-field",
       countryCode: (configState === null || configState === void 0 || (_configState$configs5 = configState.configs) === null || _configState$configs5 === void 0 || (_configState$configs5 = _configState$configs5.country_autocomplete) === null || _configState$configs5 === void 0 ? void 0 : _configState$configs5.value) || '*'
-    })), /*#__PURE__*/_react.default.createElement(_GoogleGpsButton.GoogleGpsButton, {
-      className: "gps-button",
-      apiKey: googleMapsApiKey,
-      onAddress: function onAddress(e) {
-        formMethods.setValue('address', e.address);
-        handleChangeAddress(e);
-      },
-      onError: setMapErrors,
-      IconButton: _reactBootstrapIcons.GeoAlt,
-      IconLoadingButton: _CgSearchLoading.default
-    })), ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes29 = formState.changes) === null || _formState$changes29 === void 0 ? void 0 : _formState$changes29.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
+    }))), ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes29 = formState.changes) === null || _formState$changes29 === void 0 ? void 0 : _formState$changes29.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
       showMap: showMap || !showSpreadForm,
       notUseCustomerInfo: notUseCustomerInfo,
       addFormRestrictions: addFormRestrictions

package/_modules/themes/callcenterOriginal/src/components/AddressList/styles.js

@@ -30,7 +30,7 @@ var AddressItem = exports.AddressItem = _styledComponents.default.li(_templateOb
 }, function (props) {
   return props.theme.colors.lightGray;
 });
-var AddressItemActions = exports.AddressItemActions = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  a {\n    display: flex;\n    cursor: pointer;\n    margin: 0px 5px;\n    font-size: 20px;\n    \n    svg {\n      color: #B1BCCC;\n    }\n  }\n  a.disabled {\n    svg {\n      color: #CCC;\n    }\n    pointer-events: none;\n  }\n"])));
+var AddressItemActions = exports.AddressItemActions = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  a {\n    display: flex;\n    cursor: pointer;\n    margin: 0px 5px;\n    font-size: 20px;\n\n    svg {\n      color: #B1BCCC;\n    }\n  }\n  a.disabled {\n    svg {\n      color: #CCC;\n    }\n    pointer-events: none;\n  }\n"])));
 var WrappNotAddresses = exports.WrappNotAddresses = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 270px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 80%;\n  margin: 20px auto 10px;\n\n  img {\n    width: 200px;\n    height: auto;\n    aspect-ratio: attr(width) / attr(height)\n  }\n  h1 {\n    margin: 5px 0px 0px;\n    opacity: 0.5;\n    text-align: center;\n    font-size: 24px;\n  }\n"])));
 var FormActions = exports.FormActions = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  button {\n    height: 45px;\n    flex: 1;\n\n    &:last-child#second-btn {\n      margin-left: 10px;\n      ", "\n    }\n  }\n\n  @media (min-width: 769px) {\n    button {\n      &:last-child#second-btn {\n        margin-left: 25px;\n        ", "\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme3;
@@ -39,13 +39,13 @@ var FormActions = exports.FormActions = _styledComponents.default.div(_templateO
   var _props$theme4;
   return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          margin-left: 0;\n          margin-right: 25px;\n      "])));
 });
-var ContinueButton = exports.ContinueButton = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: sticky;\n  bottom: 1px;\n  \n  button {\n    width: 100%;\n    white-space: nowrap;\n    height: 50px;\n  }\n"])));
+var ContinueButton = exports.ContinueButton = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: sticky;\n  bottom: 1px;\n\n  button {\n    width: 100%;\n    white-space: nowrap;\n    height: 50px;\n  }\n"])));
 var AddressTitle = exports.AddressTitle = _styledComponents.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  margin-bottom: 25px;\n  text-align: left;\n  ", "\n"])), function (props) {
   var _props$theme5;
   return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    text-align: right;\n  "])));
 });
 var AddressHalfContainer = exports.AddressHalfContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
-var List = exports.List = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: ", ";\n  padding-right: 10px;\n  ", " \n  ", "\n  button {\n    width: 100%;\n  }\n"])), function (_ref2) {
+var List = exports.List = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: ", ";\n  padding-right: 10px;\n  ", "\n  ", "\n  button {\n    width: 100%;\n  }\n"])), function (_ref2) {
   var halfWidth = _ref2.halfWidth;
   return halfWidth ? '50%' : '100%';
 }, function (_ref3) {
@@ -66,7 +66,7 @@ var AddressFormContainer = exports.AddressFormContainer = _styledComponents.defa
   return isEnableContinueButton && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    position: relative;\n    bottom: 164px;\n  "])));
 });
 var CloseIcon = exports.CloseIcon = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  svg{\n    width: 30px;\n    height: 30px;\n  }\n"])));
-var TitleFormContainer = exports.TitleFormContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex; \n  align-items: center;\n  margin-top: 7px;\n  h1 {\n    margin: auto;\n    font-size: 24px;\n  }\n"])));
+var TitleFormContainer = exports.TitleFormContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 7px;\n  h1 {\n    margin: auto;\n    font-size: 24px;\n  }\n\n  @media (max-width: 930px) {\n    h1 {\n      font-size: 18px !important;\n    }\n  }\n"])));
 var AddressHoverInfo = exports.AddressHoverInfo = _styledComponents.default.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  background: #FFE69C;\n  border: 1px solid #FFF3CD;\n  display: flex;\n  padding: 8px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  position: absolute;\n  top: 0px;\n  left: 25px;\n  opacity: 0;\n  width: max-content;\n  p {\n    margin: 0;\n    color: #664D03;\n    font-size: 12px;\n  }\n\n"])));
 var AddressBookMark = exports.AddressBookMark = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  span {\n    opacity: 0;\n    transition: opacity 0.3s, visibility 0.3s;\n\n  }\n  &:hover + span {\n    opacity: 1;\n    transition: opacity 0.3s, visibility 0.3s;\n  }\n"])));
 var AddressBookMarkContainer = exports.AddressBookMarkContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  position: relative;\n"])));

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

@@ -188,6 +188,12 @@ var Header = exports.Header = function Header(props) {
       }
     });
   };
+  var cutCharactersName = function cutCharactersName(_ref) {
+    var str = _ref.str,
+      _ref$maxSize = _ref.maxSize,
+      maxSize = _ref$maxSize === void 0 ? 8 : _ref$maxSize;
+    return str.length <= maxSize ? str : str.slice(0, maxSize) + '...';
+  };
   (0, _react.useEffect)(function () {
     if (isCustomerMode) {
       setCustomerModalOpen(false);
@@ -228,7 +234,9 @@ var Header = exports.Header = function Header(props) {
     onClick: function onClick(e) {
       return handleClickUserCustomer(e);
     }
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("p", null, userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name, " ", userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.lastname)), /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("p", null, windowSize.width > 940 ? userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name : cutCharactersName({
+    str: userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name
+  }), ' ', windowSize.width > 940 ? userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.lastname : null)), /*#__PURE__*/_react.default.createElement("span", {
     ref: clearCustomer
   }, /*#__PURE__*/_react.default.createElement(_AiOutlineClose.default, null))), onlineStatus && windowSize.width > 820 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (isPreOrderSetting || (configState === null || configState === void 0 || (_configState$configs3 = configState.configs) === null || _configState$configs3 === void 0 || (_configState$configs3 = _configState$configs3.preorder_status_enabled) === null || _configState$configs3 === void 0 ? void 0 : _configState$configs3.value) === undefined) && /*#__PURE__*/_react.default.createElement(_styles.MomentMenu, {
     onClick: (configState === null || configState === void 0 || (_configState$configs4 = configState.configs) === null || _configState$configs4 === void 0 || (_configState$configs4 = _configState$configs4.max_days_preorder) === null || _configState$configs4 === void 0 ? void 0 : _configState$configs4.value) === -1 || (configState === null || configState === void 0 || (_configState$configs5 = configState.configs) === null || _configState$configs5 === void 0 || (_configState$configs5 = _configState$configs5.max_days_preorder) === null || _configState$configs5 === void 0 ? void 0 : _configState$configs5.value) === 0 ? null : function () {

package/_modules/themes/callcenterOriginal/src/components/UserDetails/styles.js

@@ -10,11 +10,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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 && {}.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; }
 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(["\n  height: ", ";\n"])), function (_ref) {
+var Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n\n  @media (max-width: 930px) {\n    h1 {\n      font-size: 18px !important;\n    }\n  }\n"])), function (_ref) {
   var isEdit = _ref.isEdit;
   return isEdit ? 'auto' : '145px';
 });
-var Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", "; \n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n    user-select: none;\n  }\n"])), function (props) {
+var Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", ";\n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n    user-select: none;\n  }\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 }, function (props) {
   var _props$theme;
@@ -37,4 +37,4 @@ var TitleContainer = exports.TitleContainer = _styledComponents.default.div(_tem
   return isAddressFormOpen && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      h1{\n        width: 75%;\n      }\n  "])));
 });
 var CountryFlag = exports.CountryFlag = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n  .PhoneInputCountryIcon {\n    width: 25px;\n  }\n  .PhoneInputInput {\n    display: none;\n  }\n  .PhoneInputCountrySelect {\n    display: none;\n  }\n"])));
-var PhoneContainer = exports.PhoneContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  \n  p {\n    margin: 0;\n  }\n"])));
+var PhoneContainer = exports.PhoneContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n\n  p {\n    margin: 0;\n  }\n"])));

package/package.json

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

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import CgSearchLoading from '@meronex/icons/cg/CgSearchLoading'
 import {
   Heart,
   Building,
@@ -23,7 +22,6 @@ import {
   useEvent
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
-import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'
 import {
   FormControl,
   FormActions,
@@ -458,17 +456,6 @@ const AddressFormUI = (props) => {
                               countryCode={configState?.configs?.country_autocomplete?.value || '*'}
                             />
                           </WrapAddressInput>
-                          <GoogleGpsButton
-                            className='gps-button'
-                            apiKey={googleMapsApiKey}
-                            onAddress={(e) => {
-                              formMethods.setValue('address', e.address)
-                              handleChangeAddress(e)
-                            }}
-                            onError={setMapErrors}
-                            IconButton={GeoAlt}
-                            IconLoadingButton={CgSearchLoading}
-                          />
                         </AddressWrap>
                       )}
                       {(addressState?.address?.location || formState?.changes?.location) && (

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

@@ -27,7 +27,6 @@ import {
   AddressListUl,
   AddressItem,
   AddressItemActions,
-  WrappNotAddresses,
   FormActions,
   ContinueButton,
   AddressTitle,

package/src/themes/callcenterOriginal/src/components/AddressList/styles.js

@@ -105,7 +105,7 @@ export const AddressItemActions = styled.div`
     cursor: pointer;
     margin: 0px 5px;
     font-size: 20px;
-    
+
     svg {
       color: #B1BCCC;
     }
@@ -175,7 +175,7 @@ export const ContinueButton = styled.div`
   width: 100%;
   position: sticky;
   bottom: 1px;
-  
+
   button {
     width: 100%;
     white-space: nowrap;
@@ -204,7 +204,7 @@ export const List = styled.div`
     margin-top: 0px;
   ` : css`
     margin-top: 200px;
-  `} 
+  `}
   ${({ addFormRestrictions }) => addFormRestrictions && css`
     height: 405px;
   `}
@@ -234,13 +234,19 @@ export const CloseIcon = styled.div`
 `
 
 export const TitleFormContainer = styled.div`
-  display: flex; 
+  display: flex;
   align-items: center;
   margin-top: 7px;
   h1 {
     margin: auto;
     font-size: 24px;
   }
+
+  @media (max-width: 930px) {
+    h1 {
+      font-size: 18px !important;
+    }
+  }
 `
 
 export const AddressHoverInfo = styled.span`

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

@@ -140,6 +140,8 @@ export const Header = (props) => {
     events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
   }
 
+  const cutCharactersName = ({ str, maxSize = 8 }) => str.length <= maxSize ? str : str.slice(0, maxSize) + '...'
+
   useEffect(() => {
     if (isCustomerMode) {
       setCustomerModalOpen(false)
@@ -177,7 +179,10 @@ export const Header = (props) => {
                   onClick={(e) => handleClickUserCustomer(e)}
                 >
                   <span>
-                    <p>{userCustomer?.name} {userCustomer?.lastname}</p>
+                    <p>
+                      {windowSize.width > 940 ? userCustomer?.name : cutCharactersName({ str: userCustomer?.name })}
+                      {' '}{windowSize.width > 940 ? userCustomer?.lastname : null}
+                    </p>
                   </span>
                   <span
                     ref={clearCustomer}

package/src/themes/callcenterOriginal/src/components/UserDetails/styles.js

@@ -2,6 +2,12 @@ import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   height: ${({ isEdit }) => isEdit ? 'auto' : '145px'};
+
+  @media (max-width: 930px) {
+    h1 {
+      font-size: 18px !important;
+    }
+  }
 `
 
 export const Header = styled.div`
@@ -13,7 +19,7 @@ export const Header = styled.div`
   h1 {
     font-weight: 500;
     font-size: 20px;
-    color: ${props => props.theme.colors.darkTextColor}; 
+    color: ${props => props.theme.colors.darkTextColor};
     margin: 0px 10px 0px 0px;
     ${props => props.theme?.rtl && css`
       margin: 0px 0px 0px 10px;
@@ -114,7 +120,7 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
-  
+
   p {
     margin: 0;
   }