ordering-ui-external 14.1.7 → 14.1.8

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

@@ -183,19 +183,19 @@ var UserDetailsUI = function UserDetailsUI(props) {
     }
   })), /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details'))), !isCheckoutPlace && /*#__PURE__*/_react.default.createElement(_styles.Header, {
     className: "user-form"
-  }, !isModal && /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details')), cartStatus !== 2 && (!isEdit ? /*#__PURE__*/_react.default.createElement("span", {
-    onClick: function onClick() {
-      return toggleIsEdit();
-    }
-  }, t('CHANGE_USER_DETAILS', 'Change customer details')) : /*#__PURE__*/_react.default.createElement(_FcCancel.default, {
+  }, !isModal && /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details')), cartStatus !== 2 && isEdit && /*#__PURE__*/_react.default.createElement(_FcCancel.default, {
     className: "cancel",
     onClick: function onClick() {
       return toggleEditState();
     }
-  }))), !isEdit ? /*#__PURE__*/_react.default.createElement(_styles.UserData, null, ((userData === null || userData === void 0 ? void 0 : userData.name) || (userData === null || userData === void 0 ? void 0 : userData.middle_name) || (userData === null || userData === void 0 ? void 0 : userData.lastname) || (userData === null || userData === void 0 ? void 0 : userData.second_lastname)) && /*#__PURE__*/_react.default.createElement(_styles.UserName, null, userData === null || userData === void 0 ? void 0 : userData.name, " ", userData === null || userData === void 0 ? void 0 : userData.middle_name, " ", userData === null || userData === void 0 ? void 0 : userData.lastname, " ", userData === null || userData === void 0 ? void 0 : userData.second_lastname), ((_userData$email = userData === null || userData === void 0 ? void 0 : userData.email) !== null && _userData$email !== void 0 ? _userData$email : userData === null || userData === void 0 ? void 0 : userData.guest_email) && /*#__PURE__*/_react.default.createElement("p", null, userData !== null && userData !== void 0 && userData.guest_id ? userData === null || userData === void 0 ? void 0 : userData.guest_email : userData === null || userData === void 0 ? void 0 : userData.email), (((_userData$cellphone = userData === null || userData === void 0 ? void 0 : userData.cellphone) !== null && _userData$cellphone !== void 0 ? _userData$cellphone : userData === null || userData === void 0 ? void 0 : userData.guest_cellphone) || ((_user$cellphone = user === null || user === void 0 ? void 0 : user.cellphone) !== null && _user$cellphone !== void 0 ? _user$cellphone : user === null || user === void 0 ? void 0 : user.guest_cellphone)) && /*#__PURE__*/_react.default.createElement(_styles.PhoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CountryFlag, null, (userData === null || userData === void 0 ? void 0 : userData.country_phone_code) && ((_userData$cellphone2 = userData === null || userData === void 0 ? void 0 : userData.cellphone) !== null && _userData$cellphone2 !== void 0 ? _userData$cellphone2 : userData === null || userData === void 0 ? void 0 : userData.guest_cellphone) && /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
+  })), !isEdit ? /*#__PURE__*/_react.default.createElement(_styles.UserData, null, ((userData === null || userData === void 0 ? void 0 : userData.name) || (userData === null || userData === void 0 ? void 0 : userData.middle_name) || (userData === null || userData === void 0 ? void 0 : userData.lastname) || (userData === null || userData === void 0 ? void 0 : userData.second_lastname)) && /*#__PURE__*/_react.default.createElement(_styles.UserName, null, userData === null || userData === void 0 ? void 0 : userData.name, " ", userData === null || userData === void 0 ? void 0 : userData.middle_name, " ", userData === null || userData === void 0 ? void 0 : userData.lastname, " ", userData === null || userData === void 0 ? void 0 : userData.second_lastname), ((_userData$email = userData === null || userData === void 0 ? void 0 : userData.email) !== null && _userData$email !== void 0 ? _userData$email : userData === null || userData === void 0 ? void 0 : userData.guest_email) && /*#__PURE__*/_react.default.createElement("p", null, userData !== null && userData !== void 0 && userData.guest_id ? userData === null || userData === void 0 ? void 0 : userData.guest_email : userData === null || userData === void 0 ? void 0 : userData.email), (((_userData$cellphone = userData === null || userData === void 0 ? void 0 : userData.cellphone) !== null && _userData$cellphone !== void 0 ? _userData$cellphone : userData === null || userData === void 0 ? void 0 : userData.guest_cellphone) || ((_user$cellphone = user === null || user === void 0 ? void 0 : user.cellphone) !== null && _user$cellphone !== void 0 ? _user$cellphone : user === null || user === void 0 ? void 0 : user.guest_cellphone)) && /*#__PURE__*/_react.default.createElement(_styles.PhoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CountryFlag, null, (userData === null || userData === void 0 ? void 0 : userData.country_phone_code) && ((_userData$cellphone2 = userData === null || userData === void 0 ? void 0 : userData.cellphone) !== null && _userData$cellphone2 !== void 0 ? _userData$cellphone2 : userData === null || userData === void 0 ? void 0 : userData.guest_cellphone) && /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
     onChange: function onChange() {},
     defaultCountry: (_parsePhoneNumber = (0, _libphonenumberJs.parsePhoneNumber)("+".concat(userData === null || userData === void 0 || (_userData$country_pho = userData.country_phone_code) === null || _userData$country_pho === void 0 ? void 0 : _userData$country_pho.replace('+', ''), " ").concat(userData === null || userData === void 0 || (_userData = userData[userData !== null && userData !== void 0 && userData.guest_id ? 'guest_cellphone' : 'cellphone']) === null || _userData === void 0 ? void 0 : _userData.replace("+".concat(userData === null || userData === void 0 ? void 0 : userData.country_phone_code), '')))) === null || _parsePhoneNumber === void 0 ? void 0 : _parsePhoneNumber.country
-  })), /*#__PURE__*/_react.default.createElement("p", null, userData !== null && userData !== void 0 && userData.guest_id ? userData === null || userData === void 0 ? void 0 : userData.guest_cellphone : userData === null || userData === void 0 ? void 0 : userData.cellphone))) : /*#__PURE__*/_react.default.createElement(_styles.SideForm, null, /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
+  })), /*#__PURE__*/_react.default.createElement("p", null, userData !== null && userData !== void 0 && userData.guest_id ? userData === null || userData === void 0 ? void 0 : userData.guest_cellphone : userData === null || userData === void 0 ? void 0 : userData.cellphone)), /*#__PURE__*/_react.default.createElement(_styles.ChangeCustomerText, null, cartStatus !== 2 && /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return toggleIsEdit();
+    }
+  }, t('CHANGE_USER_DETAILS', 'Change customer details')))) : /*#__PURE__*/_react.default.createElement(_styles.SideForm, null, /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
     userData: userData,
     isCustomerMode: isCustomerMode,
     setWillVerifyOtpState: setWillVerifyOtpState

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

@@ -4,20 +4,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserName = exports.UserData = exports.TitleContainer = exports.SkeletonsContainer = exports.SideForm = exports.PhoneContainer = exports.ModalIcon = exports.Header = exports.CountryFlag = exports.Container = void 0;
+exports.UserName = exports.UserData = exports.TitleContainer = exports.SkeletonsContainer = exports.SideForm = exports.PhoneContainer = exports.ModalIcon = exports.Header = exports.CountryFlag = exports.Container = exports.ChangeCustomerText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 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; }
 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 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    cursor: pointer;\n    user-select: none;\n    &:hover {\n        text-decoration: underline;\n      }\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"])), function (props) {
   return props.theme.colors.darkTextColor;
 }, function (props) {
   var _props$theme;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin: 0px 0px 0px 10px;\n  "])));
-}, function (props) {
-  return props.theme.colors.primary;
 });
 var SideForm = exports.SideForm = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 25px;\n  @media (min-width: 768px) {\n    display: flex;\n    align-items: center;\n  }\n"])));
 var UserData = exports.UserData = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  text-align: left;\n  ", "\n  position: relative;\n  > * {\n    margin: 5px 0;\n  }\n\n  p {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (props) {
@@ -34,5 +32,8 @@ 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"])));
-var SkeletonsContainer = exports.SkeletonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 25px;\n"])));
+var PhoneContainer = exports.PhoneContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  p {\n    margin: 1rem 0;\n  }\n"])));
+var SkeletonsContainer = exports.SkeletonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 25px;\n"])));
+var ChangeCustomerText = exports.ChangeCustomerText = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n    user-select: none;\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.7",
+  "version": "14.1.8",
   "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.19",
+    "ordering-components-external": "13.0.20",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/components/BusinessesMap/index.js

@@ -1,20 +1,22 @@
 import React from 'react'
 import { BusinessesMap as BusinessesMapController, GoogleMapsMap, useConfig, useOrder } from 'ordering-components-external'
 import { WrapperMap } from './styles'
+import { useTheme } from 'styled-components'
 
 const BusinessesMapUI = (props) => {
   const {
     userLocation,
     businessLocations,
     onBusinessClick,
-    setErrors
+    setErrors,
+    businessList
   } = props
 
   const [configState] = useConfig()
   const [orderState] = useOrder()
-
+  const theme = useTheme()
   const googleMapsControls = {
-    defaultZoom: 15,
+    defaultZoom: 18,
     zoomControl: true,
     streetViewControl: false,
     fullscreenControl: false,
@@ -23,7 +25,7 @@ const BusinessesMapUI = (props) => {
     mapTypeControlOptions: {
       mapTypeIds: ['roadmap', 'satellite']
     },
-    isMarkerDraggable: true
+    isMarkerDraggable: false
   }
 
   return (
@@ -36,13 +38,17 @@ const BusinessesMapUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <WrapperMap disabled={orderState.loading}>
         <GoogleMapsMap
+          useMapWithBusinessZones
+          deactiveAlerts
+          businessMap
           apiKey={configState?.configs?.google_maps_api_key?.value}
           location={userLocation}
           locations={businessLocations}
           mapControls={googleMapsControls}
           maxLimitLocation={parseInt(configState?.configs?.meters_to_change_address?.value)}
-          businessMap
           onBusinessClick={onBusinessClick}
+          businessZones={businessList?.map(business => business?.zones)}
+          fallbackIcon={theme.images?.dummies?.businessLogo}
           setErrors={setErrors}
         />
       </WrapperMap>

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -125,7 +125,7 @@ const SingleOrderCardUI = (props) => {
               className='review'
               onClick={() => setOrderSelected(order)}
             >
-              {order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
+              {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
             </Button>
           )}
           {!hideReorderButton && typeof order?.id === 'number' && (

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

@@ -439,10 +439,11 @@ const AddressFormUI = (props) => {
                 </AddressWrap>
 
                 {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
-                  <WrapperMap isEnableContinueButton={isEnableContinueButton} notUseCustomerInfo={notUseCustomerInfo}>
+                  <WrapperMap isEnableContinueButton={isEnableContinueButton} notUseCustomerInfo={notUseCustomerInfo} addFormRestrictions={addFormRestrictions}>
                     <GoogleMapsMap
                       useMapWithBusinessZones
                       deactiveAlerts
+                      avoidFitBounds
                       apiKey={googleMapsApiKey}
                       location={locationChange}
                       locations={businessesList?.businesses}
@@ -522,6 +523,7 @@ const AddressFormUI = (props) => {
                   type='button'
                   disabled={formState.loading}
                   onClick={() => onCancel()}
+                  hoverColor='#CCC'
                 >
                   {t('CANCEL', 'Cancel')}
                 </Button>

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

@@ -198,18 +198,20 @@ export const AddressTagSection = styled.div`
 `
 
 export const WrapperMap = styled.div`
+  z-index: 100;
   width: 50%;
   position: absolute;
   bottom: 2%;
   right: 0;
   padding-right: 20px;
-  ${({ isEnableContinueButton, notUseCustomerInfo }) => isEnableContinueButton ? css`
-    height: 460px;
-  ` : notUseCustomerInfo ? css`
-    height: 370px;
-  ` : css`
-    height: 480px;
-  `}
+  height: ${({ isEnableContinueButton, notUseCustomerInfo, addFormRestrictions }) =>
+    isEnableContinueButton
+      ? addFormRestrictions ? '460px' : '425px'
+      : notUseCustomerInfo
+        ? '370px'
+        : '480px'
+  };
+
   > div {
     position: relative !important;
     width: 100% !important;
@@ -237,7 +239,7 @@ export const AddressMarkContainer = styled.div`
   align-items: center;
   border-radius: 4px;
   position: absolute;
-  top: -35px;
+  top: 50px;
   width: max-content;
   p {
     margin: 0;

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

@@ -202,11 +202,15 @@ const AddressListUI = (props) => {
   }, [isOpenUserData])
 
   useEffect(() => {
-    if (userCustomerSetup?.imported_address_text && addressList.addresses?.length === 0 && !addressList?.loading && !addressList?.error) {
+    const addressValidation = addressList.addresses?.length === 0 && !addressList?.loading && !addressList?.error
+    if (userCustomerSetup?.imported_address_text && addressValidation) {
       openAddress({
         address: userCustomerSetup?.imported_address_text
       })
     }
+    if (!userCustomerSetup?.imported_address_text && addressValidation) {
+      openAddress({})
+    }
   }, [userCustomerSetup?.imported_address_text, addressList.addresses, addressList?.loading, addressList?.error])
 
   return (
@@ -228,13 +232,14 @@ const AddressListUI = (props) => {
             addFormRestrictions={addFormRestrictions}
           >
             {
-              !addFormRestrictions && (!isPopover || !addressOpen) && !isOpenUserData && (
+              !addFormRestrictions && !addressOpen && !isOpenUserData && (
                 <Button
                   className='add'
                   outline
                   color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'primary'}
                   onClick={() => openAddress({})}
                   disabled={orderState?.loading || actionStatus.loading}
+                  hoverColor='#CCC'
                 >
                   {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add New Address')}
                 </Button>
@@ -348,7 +353,7 @@ const AddressListUI = (props) => {
             )}
           </List>
           {addressOpen && !notUseCustomerInfo && (
-            <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton}>
+            <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton} addFormRestrictions={addFormRestrictions}>
               <TitleFormContainer>
                 {!addFormRestrictions && (
                   <CloseIcon>
@@ -374,6 +379,7 @@ const AddressListUI = (props) => {
               type='button'
               disabled={(addressList.loading || actionStatus.loading || orderState.loading)}
               onClick={() => onCancel()}
+              hoverColor='#CCC'
             >
               {t('CANCEL', 'Cancel')}
             </Button>

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;
   `}
@@ -219,9 +219,9 @@ export const AddressFormContainer = styled.div`
   ${({ width }) => css`
     width: ${width};
   `}
-  ${({ isEnableContinueButton }) => isEnableContinueButton && css`
+  ${({ isEnableContinueButton, addFormRestrictions }) => isEnableContinueButton && css`
     position: relative;
-    bottom: 189px;
+    bottom: ${addFormRestrictions ? '189px' : '164px'};
   `}
 `
 
@@ -234,7 +234,7 @@ export const CloseIcon = styled.div`
 `
 
 export const TitleFormContainer = styled.div`
-  display: flex;
+  display: flex; 
   align-items: center;
   margin-top: 7px;
   h1 {

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

@@ -99,7 +99,8 @@ const PhoneAutocompleteUI = (props) => {
   const handleFindClick = () => {
     if (optSelected && !(userCustomer?.id && orderState?.options?.address?.address)) {
       onChange(optSelected)
-    } else if (userCustomer?.id && orderState?.options?.address?.address) {
+    }
+    else if (userCustomer?.id && orderState?.options?.address?.address) {
       onRedirectPage && onRedirectPage('search')
     } else {
       setAlertState({ open: true, content: t('SELECT_ADDRESS_CUSTOMER', 'Please select an address for the selected customer') })

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

@@ -247,7 +247,7 @@ const SignUpFormUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <SignUpContainer isPopup={isPopup}>
         <FormSide isPopup={isPopup}>
-          <Title>{t('CREATE_NEW_USER', 'Create new user')}</Title>
+          <Title>{t('CREATE_USER', 'Create new user')}</Title>
           <FormInput
             noValidate
             isPopup={isPopup}
@@ -395,7 +395,7 @@ const SignUpFormUI = (props) => {
                 type='submit'
                 disabled={formState.loading || validationFields?.loading}
               >
-                {formState.loading ? `${t('LOADING', 'Loading')}...` : t('CREATE_NEW_USER', 'Create new user')}
+                {formState.loading ? `${t('LOADING', 'Loading')}...` : t('CREATE_USER', 'Create new user')}
               </Button>
             </ButtonContainer>
           </FormInput>
@@ -407,7 +407,7 @@ const SignUpFormUI = (props) => {
           )}
         </FormSide>
         <Alert
-          title={t('CREATE_NEW_USER', 'Create new user')}
+          title={t('CREATE_USER', 'Create new user')}
           content={alertState.content}
           acceptText={t('ACCEPT', 'Accept')}
           open={alertState.open}

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

@@ -72,18 +72,18 @@ const UserDetailsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       {(validationFields.loading || formState.loading || userState.loading) && (
         <UserData>
-          {validationFieldsLength?.map(field => (
+          {[...Array(isCustomerMode ? 1 : validationFieldsLength?.length)]?.map(field => (
             <React.Fragment key={field?.id}>
-              <Skeleton width={250} height={50} />
-              <Skeleton width={180} height={25} />
-              <Skeleton width={210} height={50} />
+              <Skeleton width={250} height={isCustomerMode ? 10 : 50} />
+              <Skeleton width={180} height={isCustomerMode ? 10 : 25} />
+              <Skeleton width={210} height={isCustomerMode ? 10 : 50} />
             </React.Fragment>
           ))}
         </UserData>
       )}
 
       {!(validationFields.loading || formState.loading || userState.loading) && (
-        <Container>
+        <Container isEdit={isEdit}>
           {isModal && (
             <TitleContainer isAddressFormOpen={isAddressFormOpen && !isEdit}>
               <ModalIcon>

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

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components'
 
-export const Container = styled.div``
+export const Container = styled.div`
+  height: ${({ isEdit }) => isEdit ? 'auto' : '145px'};
+`
 
 export const Header = styled.div`
   display: flex;

package/src/themes/callcenterOriginal/src/styles/Buttons/index.js

@@ -109,7 +109,7 @@ export const Button = styled.button`
     `}
     }
   `}
-  ${({ outline }) => outline && css`
+  ${({ outline, hoverColor }) => outline && css`
     background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
@@ -119,7 +119,7 @@ export const Button = styled.button`
     }
     &:hover {
       background: '#CCC';
-      color: #FFF;
+      color: ${hoverColor ?? '#FFF'};
     }
   `}
   ${({ circle }) => circle && css`
@@ -154,7 +154,7 @@ export const Button = styled.button`
   `}
   ${({ color }) => color === 'primary' && css`
     background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.primaryContrast};
+    color: #FFF;
     border-color: ${props => props.theme.colors.primary};
     &:hover {
       background: ${props => props.theme.colors.primary};

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

@@ -38,9 +38,7 @@ export const Text = styled.div`
   white-space: nowrap;
 
   h1{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
     width: 100%;
     font-weight: 600;
     font-size: 16px;
@@ -67,6 +65,6 @@ export const Text = styled.div`
 
 export const ToggleMap = styled.div`
   span {
-    margin: 0 auto;
+    margin: 0;
   }
 `

package/src/themes/five/src/components/BusinessBasicInformation/BusinessInfoComponent.js

@@ -59,6 +59,7 @@ export const BusinessInfoComponent = (props) => {
             {!loading ? (
               <TitleWrapper isCustomLayout={isCustomLayout} disableLeftSpace={singleBusinessRedirect}>
                 <h2 className='bold' id='business_name'>{business?.name}</h2>
+                <span id='business_name_feedback' />
                 {business?.ribbon?.enabled && (
                   <RibbonBox
                     bgColor={business?.ribbon?.color}
@@ -204,11 +205,11 @@ export const BusinessInfoComponent = (props) => {
                 <div className='preorder-Reviews'>
                   {isPreOrderSetting && (
                     <>
-                      <span onClick={() => setIsPreOrder(true)}>{t('PREORDER', 'Preorder')}</span>
+                      <span onClick={() => setIsPreOrder(true)}>{isCustomerMode ? t('CHANGE_SCHEDULE', 'Change schedule') : t('PREORDER', 'Preorder')}</span>
                       <span className='dot'>•</span>
                     </>
                   )}
-                  {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
+                  {business.reviews?.reviews && !hideReviewsPopup && !isCustomerMode && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
                 </div>
               ) : (
                 <Skeleton width={isCustomerMode ? 100 : 150} />

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

@@ -132,7 +132,7 @@ export const BusinessBasicInformation = (props) => {
   const handleScroll = () => {
     const searchElement = document.getElementById('search-component')
     if (searchElement) {
-      const limit = window.pageYOffset >= (isChew ? searchElement?.offsetTop + 40 : searchElement?.offsetTop) && window.pageYOffset > 0
+      const limit = window.scrollY >= (isChew ? searchElement?.offsetTop + 40 : searchElement?.offsetTop) && window.scrollY > 0
       if (limit) {
         const classAdded = searchElement.classList.contains('fixed-search')
         !classAdded && searchElement.classList.add('fixed-search')
@@ -140,15 +140,26 @@ export const BusinessBasicInformation = (props) => {
         searchElement && searchElement.classList.remove('fixed-search')
       }
     }
+    const backArrowElement = document.getElementById('back-arrow')
 
     const businessNameElement = document.getElementById('business_name')
+    const businessNameFeedbackElement = document.getElementById('business_name_feedback')
     if (businessNameElement) {
-      const limit = window.pageYOffset >= (isChew && searchElement ? searchElement?.offsetTop + 40 : (businessNameElement?.offsetTop - 55)) && window.pageYOffset > 0
+      const limit = window.scrollY >= (isChew && searchElement ? searchElement?.offsetTop + 40 : (businessNameElement?.offsetTop - 55)) && window.scrollY > 0
       if (limit) {
         const classAdded = businessNameElement.classList.contains('fixed-name')
         !classAdded && businessNameElement.classList.add('fixed-name')
+        if (!isChew) {
+          const classAdded2 = backArrowElement?.classList?.contains?.('fixed-arrow')
+          !classAdded2 && backArrowElement.classList.add('fixed-arrow')
+        }
+        if (businessNameFeedbackElement) businessNameFeedbackElement.style.display = 'block'
       } else {
         businessNameElement && businessNameElement.classList.remove('fixed-name')
+        if (!isChew) {
+          backArrowElement && backArrowElement.classList.remove('fixed-arrow')
+        }
+        if (businessNameFeedbackElement) businessNameFeedbackElement.style.display = 'none'
       }
     }
   }
@@ -236,10 +247,10 @@ export const BusinessBasicInformation = (props) => {
                     />
                   </WrapperFloatingSearch>
                 )}
-                {!hideInfoIcon  && (
-                <BusinessMoreDetail>
-                  <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
-                </BusinessMoreDetail>
+                {!hideInfoIcon && (
+                  <BusinessMoreDetail>
+                    <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
+                  </BusinessMoreDetail>
                 )}
               </>
             )}

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

@@ -368,7 +368,11 @@ export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
+  span {
+    height: 70px;
+    width: 1px;
+    display: none;
+  }
   h2 {
     font-size: 24px;
     line-height: 36px;
@@ -409,6 +413,7 @@ export const TitleWrapper = styled.div`
     }
     @media (min-width: 768px) {
       font-size: 32px;
+      
     }
   }
 `

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

@@ -230,8 +230,8 @@ const BusinessProductsListingUI = (props) => {
     const backArrowElement = document.getElementById('back-arrow')
     const searchElement = document.getElementById('search-component')
     if (backArrowElement) {
-      const limit = window.pageYOffset >= backArrowElement?.offsetTop && window.pageYOffset > 0
-      const limitWidth = window.pageYOffset >= searchElement?.offsetTop + 40 && window.pageYOffset > 0
+      const limit = window.scrollY >= backArrowElement?.offsetTop - 10 && window.scrollY > 0
+      const limitWidth = window.scrollY >= searchElement?.offsetTop + 45 && window.scrollY > 0
       if (isChew) {
         if (limit && !limitWidth) {
           const classWidthAdded = backArrowElement.classList.contains('fixed-arrow-width')
@@ -240,13 +240,6 @@ const BusinessProductsListingUI = (props) => {
           backArrowElement && backArrowElement.classList.remove('fixed-arrow-width')
         }
       }
-
-      if (limit) {
-        const classAdded = backArrowElement.classList.contains('fixed-arrow')
-        !classAdded && backArrowElement.classList.add('fixed-arrow')
-      } else {
-        backArrowElement && backArrowElement.classList.remove('fixed-arrow')
-      }
     }
 
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL

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

@@ -32,7 +32,7 @@ export const OrdersSection = (props) => {
             horizontal
             isBusinessesPage
             onRedirectPage={onRedirectPage}
-            titleContent={t('CARTS', 'Carts')}
+            titleContent={t('OPEN_CARTS', 'Open carts')}
             businessesIds={businessesIds}
             customArray={
               getCustomArray(orderState.carts)?.filter(cart => cart.products.length > 0)

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

@@ -418,7 +418,7 @@ const BusinessesListingUI = (props) => {
         </HightestRatedWrapper>
       )}
 
-      {(((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && !isAllCategoriesHidden) && (
+      {(((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && !isAllCategoriesHidden && !isCustomerMode) && (
         <BusinessTypeFilter
           images={props.images}
           businessTypes={props.businessTypes}
@@ -430,7 +430,7 @@ const BusinessesListingUI = (props) => {
         <SearchContainer>
           {isCustomLayout && (
             <BusinessesTitle isCustomerMode={isCustomerMode}>
-              {t('BUSINESSES', 'Businesses')}
+              {isCustomerMode ? t('SELECT_THE_BUSINESS', 'Select the business') : t('BUSINESSES', 'businesses')}
             </BusinessesTitle>
           )}
           <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>

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

@@ -261,7 +261,7 @@ export const Title = styled.h2`
   font-weight: 600;
   font-size: 24px;
   color: ${props => props.theme?.colors.headingColor};
-  margin: 0px 20px 5px 20px;
+  margin: 20px 20px 5px 20px;
 `
 
 export const TypesWrapper = styled.div`

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

@@ -692,7 +692,7 @@ const CheckoutUI = (props) => {
                 `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
               ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
                 `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-              ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
+              ) : placing ? t('PLACING_ORDER', 'Placing order') : t('PLACE_ORDER', 'Place Order')}
             </Button>
           </WrapperPlaceOrderButton>
         )}

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

@@ -7,7 +7,7 @@ export const OptionTitle = styled.div`
   h1{
     text-transform: capitalize;
     font-size: 18px;
-    margin: 18px 0;
+    margin: 0;
   }
 
   @media (min-width: 768px){

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

@@ -68,7 +68,7 @@ export const Container = styled.div`
 
   @media(min-width: 993px){
     ${({ isBusinessesPage }) => isBusinessesPage && css`
-      margin: 30px 20px;
+      margin: 20px;
       width: calc(33% - 40px);
     `}
   }