ordering-ui-external 10.9.0 → 10.9.2

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

@@ -20,14 +20,14 @@ const AddressDetailsUI = (props) => {
     googleMapsUrl,
     isCustomerMode,
     apiKey,
-    isFromCheckout
+    isFromCheckout,
+    notUseCustomerInfo
   } = props
 
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [openModal, setOpenModal] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [{ user }] = useCustomer()
 
   const handleFindBusinesses = () => {
@@ -42,6 +42,12 @@ const AddressDetailsUI = (props) => {
     return () => setOpenModal(false)
   }, [])
 
+  useEffect(() => {
+    if (isCustomerMode) {
+      setOpenModal(false)
+    }
+  }, [JSON.stringify(orderState?.options?.address?.address)])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -75,7 +81,8 @@ const AddressDetailsUI = (props) => {
           <AddressList
             isModal
             changeOrderAddressWithDefault
-            userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+            notUseCustomerInfo={notUseCustomerInfo}
+            userId={user?.id}
             onCancel={() => setOpenModal(false)}
             onAccept={() => handleFindBusinesses()}
             userCustomerSetup={isCustomerMode && user}

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

@@ -8,6 +8,7 @@ import {
   House,
   GeoAlt
 } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
 import { useForm } from 'react-hook-form'
 import {
   AddressForm as AddressFormController,
@@ -49,7 +50,9 @@ const AddressFormUI = (props) => {
     userCustomerSetup,
     businessesList,
     getBusinessDeliveryZones,
-    isEnableContinueButton
+    isEnableContinueButton,
+    address,
+    notUseCustomerInfo
   } = props
 
   const [configState] = useConfig()
@@ -57,6 +60,7 @@ const AddressFormUI = (props) => {
   const [, t] = useLanguage()
   const formMethods = useForm()
   const [{ auth }] = useSession()
+  const theme = useTheme()
 
   const [state, setState] = useState({ selectedFromAutocomplete: true })
   const [addressTag, setAddressTag] = useState(addressState?.address?.tag)
@@ -345,6 +349,12 @@ const AddressFormUI = (props) => {
     })
   }, [formMethods])
 
+  useEffect(() => {
+    if (address?.location) {
+      getBusinessDeliveryZones(address?.location)
+    }
+  }, [address])
+
   return (
     <div className='address-form'>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -412,9 +422,9 @@ const AddressFormUI = (props) => {
                 </AddressWrap>
 
                 {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
-                  <WrapperMap isEnableContinueButton={isEnableContinueButton}>
+                  <WrapperMap isEnableContinueButton={isEnableContinueButton} notUseCustomerInfo={notUseCustomerInfo}>
                     <GoogleMapsMap
-                      useLocationPin
+                      useMapWithBusinessZones
                       deactiveAlerts
                       apiKey={googleMapsApiKey}
                       location={locationChange}
@@ -423,8 +433,9 @@ const AddressFormUI = (props) => {
                       mapControls={googleMapsControls}
                       handleChangeAddressMap={handleChangeAddress}
                       setErrors={setMapErrors}
-                      maxLimitLocation={maxLimitLocation}
+                      maxLimitLocation={parseInt(maxLimitLocation, 10)}
                       businessZones={businessesList?.businesses?.map(business => business?.zones)}
+                      fallbackIcon={theme.images?.dummies?.businessLogo}
                     />
                   </WrapperMap>
                 )}

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

@@ -201,8 +201,10 @@ export const WrapperMap = styled.div`
   bottom: 2%;
   right: 0;
   padding-right: 20px;
-  ${({ isEnableContinueButton }) => isEnableContinueButton ? css`
+  ${({ isEnableContinueButton, notUseCustomerInfo }) => isEnableContinueButton ? css`
     height: 460px;
+  ` : notUseCustomerInfo ? css`
+    height: 370px;
   ` : css`
     height: 480px;
   `}

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

@@ -65,7 +65,9 @@ const AddressListUI = (props) => {
     isFromCheckout,
     isOpenUserData,
     setIsAddressFormOpen,
-    isHeader
+    isHeader,
+    notUseCustomerInfo,
+    franchiseId
   } = props
 
   const [, t] = useLanguage()
@@ -199,7 +201,13 @@ const AddressListUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading}>
         <AddressHalfContainer>
-          <List halfWidth={addressOpen} isOpenUserData={isOpenUserData} isHeader={isHeader} isEnableContinueButton={isEnableContinueButton}>
+          <List
+            halfWidth={addressOpen}
+            isOpenUserData={isOpenUserData}
+            isHeader={isHeader}
+            isEnableContinueButton={isEnableContinueButton}
+            notUseCustomerInfo={notUseCustomerInfo}
+          >
             {
               (!isPopover || !addressOpen) && !isOpenUserData && (
                 <Button
@@ -310,11 +318,13 @@ const AddressListUI = (props) => {
                   onSaveAddress={handleSaveAddress}
                   userCustomerSetup={userCustomerSetup}
                   isEnableContinueButton={isEnableContinueButton}
+                  notUseCustomerInfo={notUseCustomerInfo}
+                  franchiseId={franchiseId}
                 />
               </AddressFormContainer>
             )}
           </List>
-          {addressOpen && (
+          {addressOpen && !notUseCustomerInfo && (
             <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton}>
               <TitleFormContainer>
                 <CloseIcon>
@@ -332,7 +342,7 @@ const AddressListUI = (props) => {
           </AddressListUl>
         )}
 
-        {onCancel && onAccept && typeof orderState.options?.address === 'object' && (
+        {onCancel && onAccept && typeof orderState.options?.address === 'object' && !notUseCustomerInfo && (
           <FormActions>
             <Button
               outline

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

@@ -101,7 +101,7 @@ export const AddressItemActions = styled.div`
     cursor: pointer;
     margin: 0px 5px;
     font-size: 20px;
-    
+
     svg {
       color: #B1BCCC;
     }
@@ -171,7 +171,7 @@ export const ContinueButton = styled.div`
   width: 100%;
   position: sticky;
   bottom: 1px;
-  
+
   button {
     width: 100%;
     white-space: nowrap;
@@ -196,11 +196,11 @@ export const AddressHalfContainer = styled.div`
 export const List = styled.div`
   width: ${({ halfWidth }) => halfWidth ? '50%' : '100%'};
   padding-right: 10px;
-  ${({ isEnableContinueButton, isOpenUserData }) => isEnableContinueButton || isOpenUserData ? css`
+  ${({ isEnableContinueButton, isOpenUserData, notUseCustomerInfo }) => isEnableContinueButton || isOpenUserData || notUseCustomerInfo ? css`
     margin-top: 0px;
   ` : css`
     margin-top: 222px;
-  `} 
+  `}
   button {
     width: 100%;
   }
@@ -228,7 +228,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/Checkout/index.js

@@ -240,6 +240,7 @@ const CheckoutUI = (props) => {
                   apiKey={configs?.google_maps_api_key?.value}
                   mapConfigs={mapConfigs}
                   isCustomerMode={isCustomerMode}
+                  notUseCustomerInfo
                 />
               )
             )}

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

@@ -34,10 +34,8 @@ import { OrderTypeSelectorHeader } from '../OrderTypeSelectorHeader'
 import { CartContent } from '../CartContent'
 import { Modal } from '../Modal'
 import { MomentContent } from '../MomentContent'
-// import { AddressList } from '../AddressList'
-// import { AddressForm } from '../AddressForm'
-import { AddressList } from '../../../../five/src/components/AddressList'
-import { AddressForm } from '../../../../five/src/components/AddressForm'
+import { AddressList } from '../AddressList'
+import { AddressForm } from '../AddressForm'
 import { HeaderOption } from '../HeaderOption'
 import { SidebarMenu } from '../SidebarMenu'
 import { UserDetails } from '../UserDetails'
@@ -53,7 +51,8 @@ export const Header = (props) => {
     isShowOrderOptions,
     isHideSignup,
     isCustomerMode,
-    isShowRedirectButton
+    isShowRedirectButton,
+    franchiseId
   } = props
 
   const { pathname } = useLocation()
@@ -397,6 +396,7 @@ export const Header = (props) => {
                 isModal
                 setIsOpenUserData={setIsOpenUserData}
                 onClose={() => setCustomerModalOpen(false)}
+                franchiseId={franchiseId}
               />
               <AddressList
                 isModal
@@ -407,6 +407,7 @@ export const Header = (props) => {
                 setCustomerModalOpen={setCustomerModalOpen}
                 setIsOpenUserData={setIsOpenUserData}
                 setIsAddressFormOpen={setIsAddressFormOpen}
+                franchiseId={franchiseId}
                 isHeader
               />
             </>

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

@@ -403,7 +403,7 @@ const AddressFormUI = (props) => {
                 mapControls={googleMapsControls}
                 handleChangeAddressMap={handleChangeAddress}
                 setErrors={setMapErrors}
-                maxLimitLocation={maxLimitLocation}
+                maxLimitLocation={parseInt(maxLimitLocation, 10)}
               />
             </WrapperMap>
           )}

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

@@ -8,8 +8,10 @@ import {
   useConfig
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
-import { Alert } from '../../../../five/src/components/Confirm'
-import { Button, SignUpForm, Modal } from '../../../../five'
+import { Modal } from '../Modal'
+import { SignUpForm } from '../SignUpForm'
+import { Button } from '../../styles/Buttons'
+import { Alert } from '../Confirm'
 import { AddressList } from '../AddressList'
 import { UserDetails } from '../UserDetails'
 
@@ -27,7 +29,8 @@ import {
   AdditionalTypesContainer,
   PhoneAutocompleteContainer,
   ImageWrapper,
-  ContinueButton
+  ContinueButton,
+  NotFoundUser
 } from './styles'
 
 import MdcCellphoneAndroid from '@meronex/icons/mdc/MdcCellphoneAndroid'
@@ -47,7 +50,10 @@ const PhoneAutocompleteUI = (props) => {
     onRedirectPage,
     urlPhone,
     orderTypes,
-    localPhoneCode
+    localPhoneCode,
+    isFromUrlPhone,
+    onRedirectPhoneUrlPage
+
   } = props
   const allOrderTypes = [1, 2, 3, 4, 5]
   const pickupTypes = [2, 3, 4, 5]
@@ -76,7 +82,7 @@ const PhoneAutocompleteUI = (props) => {
   const saveCustomerUser = (user) => {
     setCustomersPhones({ ...customersPhones, users: [...customersPhones.users, user] })
     setCustomerState({ ...customerState, result: user })
-    setOpenModal({ customer: true, signup: false })
+    setOpenModal({ ...openModal, customer: true, signup: false })
   }
 
   const handleFindClick = () => {
@@ -120,14 +126,19 @@ const PhoneAutocompleteUI = (props) => {
   const onChange = (option) => {
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
-    if (!option) { onChangeNumber(''); return }
+    if (!option) {
+      onChangeNumber('')
+      if (isFromUrlPhone) {
+        onRedirectPhoneUrlPage && onRedirectPhoneUrlPage('home')
+      }
+      return
+    }
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
     if (user) {
       setCustomerState({ ...customerState, result: user })
-      setOpenModal({ signup: false, customer: true })
+      setOpenModal({ ...openModal, signup: false, customer: true })
     } else {
-      setCustomerState({ ...customerState, result: { error: false } })
-      setOpenModal({ customer: false, signup: true })
+      setOpenModal({ ...openModal, error: true })
     }
   }
 
@@ -146,6 +157,9 @@ const PhoneAutocompleteUI = (props) => {
     setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
     deleteUserCustomer(true)
+    if (isFromUrlPhone) {
+      onRedirectPhoneUrlPage && onRedirectPhoneUrlPage('home')
+    }
   }
 
   const handleChangeToPickup = () => {
@@ -162,10 +176,14 @@ const PhoneAutocompleteUI = (props) => {
   }) || []
 
   useEffect(() => {
+    if (customersPhones?.loading) return
+    if (!urlPhone && isFromUrlPhone) {
+      onRedirectPhoneUrlPage && onRedirectPhoneUrlPage('home')
+    }
     if (!urlPhone) return
     onInputChange(urlPhone, { action: 'url' })
     onChange({ value: urlPhone, label: urlPhone })
-  }, [urlPhone, customersPhones?.users?.length])
+  }, [urlPhone, customersPhones?.loading])
 
   useEffect(() => {
     if (pickupTypes.includes(orderState?.options?.type)) {
@@ -310,7 +328,7 @@ const PhoneAutocompleteUI = (props) => {
         padding='20px'
       >
         <UserEdit>
-          {!customerState?.loading && (
+          {!customerState?.loading && !customersPhones?.loading && (
             <>
               <UserDetails
                 isAddressFormOpen={isAddressFormOpen}
@@ -340,6 +358,16 @@ const PhoneAutocompleteUI = (props) => {
           )}
         </UserEdit>
       </Modal>
+      <Modal
+        open={openModal.error}
+        width='50%'
+        onClose={() => handleCloseAddressList()}
+        padding='20px'
+      >
+        <NotFoundUser>
+          <h2>{t('NO_USER_FOUND', 'No user found')}</h2>
+        </NotFoundUser>
+      </Modal>
       <Alert
         title={t('ERROR', 'Error')}
         open={alertState.open}

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

@@ -201,7 +201,7 @@ export const WrapInput = styled.div`
       width: calc(50% - 20px);
     }
   `}
-  
+
   div{
     color: #FFF;
     position: relative;
@@ -234,7 +234,7 @@ export const WrapInput = styled.div`
 `
 
 export const AutoComplete = styled.div`
-  width: 45%; 
+  width: 45%;
   button {
     position: absolute;
     left: 100%;
@@ -244,7 +244,7 @@ export const AutoComplete = styled.div`
 
 export const UserEdit = styled.div`
   > :first-child{
-     margin-bottom: 20px;  
+     margin-bottom: 20px;
   }
 `
 
@@ -394,8 +394,13 @@ export const ContinueButton = styled.span`
   position: absolute;
   right: 35px;
   bottom: 5px;
-  width: 
+  width:
   button {
     cursor: pointer;
   }
 `
+
+export const NotFoundUser = styled.div`
+  margin: 70px 0px;
+  text-align: center;
+`