ordering-ui-external 14.1.49 → 14.1.52

package/package.json

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

package/src/components/GoogleGpsButton/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { GoogleGpsButton as GpsButton } from 'ordering-components-external'
 import { GpsButtonStyle } from './styles'
 
@@ -9,9 +9,17 @@ const GoogleGpsButtonUI = (props) => {
     googleReady,
     isLoading,
     IconButton,
-    IconLoadingButton
+    IconLoadingButton,
+    geolocationState,
+    enableAutoGeolocation,
+    location
   } = props
 
+  useEffect(() => {
+    if (geolocationState?.result === 'OK' || location || !enableAutoGeolocation) return
+    handleGPS()
+  }, [geolocationState?.result, isGoogleButton, googleReady, location])
+
   return (
     <GpsButtonStyle
       className={props.className || ''}

package/src/components/VerticalOrdersLayout/styles.js

@@ -84,12 +84,12 @@ export const PastLogo = styled.div`
 `
 
 export const WrapperBusinessTitle = styled.div`
-  width: 80%;
+  width: 95%;
   display: flex;
   gap: 10px;
 
   @media (min-width: 480px) {
-    width: 95%;
+    width: 80%;
   }
 `
 

package/src/themes/callcenterOriginal/index.js

@@ -23,6 +23,7 @@ import { CardForm } from './src/components/CardForm'
 import { Cart } from './src/components/Cart'
 import { CartContent } from './src/components/CartContent'
 import { CartPopover } from './src/components/CartPopover'
+import { ConfirmAddressForm } from './src/components/ConfirmAddressForm'
 import { Checkout } from './src/components/Checkout'
 import { DriverTips } from './src/components/DriverTips'
 import { Footer } from './src/components/Footer'
@@ -103,6 +104,7 @@ export {
   CartContent,
   CartPopover,
   Checkout,
+  ConfirmAddressForm,
   DriverTips,
   Footer,
   ForgotPasswordForm,

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

@@ -293,6 +293,11 @@ const AddressFormUI = (props) => {
     window.open(url, '_blank')
   }
 
+  const handleSendSmsToCustomer = () => {
+    setUserConfirmPhone({ ...userConfirmPhone, open: true })
+    onCancel()
+  }
+
   useEffect(() => {
     if (!auth) {
       setLocationChange(formState?.changes?.location ?? orderState?.options?.address?.location ?? '')
@@ -466,9 +471,9 @@ const AddressFormUI = (props) => {
                                 googleInputRef.current = ref
                               }}
                               defaultValue={
-                                  formState?.result?.result
-                                    ? formState?.result?.result?.address
-                                    : formState?.changes?.address ?? addressValue
+                                formState?.result?.result
+                                  ? formState?.result?.result?.address
+                                  : formState?.changes?.address ?? addressValue
                               }
                               autoComplete='new-field'
                               countryCode={configState?.configs?.country_autocomplete?.value || '*'}
@@ -476,6 +481,21 @@ const AddressFormUI = (props) => {
                           </WrapAddressInput>
                         </AddressWrap>
                       )}
+                      {!(addressState?.address?.location || formState?.changes?.location) && (
+                        <WrapperMap showTabs={showTabs}>
+                          <SmsClient>
+                            <p>
+                              {t('CAN_NOT_FIND_ADDRESS', 'Can\'t find address?')}{' '}
+                            </p>
+                            <a
+                              style={{ textDecoration: 'underline', color: theme?.colors?.primary, cursor: 'pointer' }}
+                              onClick={() => handleSendSmsToCustomer()}
+                            >
+                              {t('SEND_SMS_TO_CUSTOMER', 'Send SMS to customer')}
+                            </a>
+                          </SmsClient>
+                        </WrapperMap>
+                      )}
                       {(addressState?.address?.location || formState?.changes?.location) && (
                         <WrapperMap
                           showMap={showMap || !showSpreadForm}
@@ -483,6 +503,7 @@ const AddressFormUI = (props) => {
                           addFormRestrictions={addFormRestrictions}
                           showTabs={showTabs}
                         >
+
                           {!showMap && (
                             <section>
                               <GeoAlt style={{ fontSize: 25, marginRight: 5 }} />
@@ -619,26 +640,26 @@ const AddressFormUI = (props) => {
                   address?.address &&
                   (!address?.location?.lat || !address?.location?.lng)) &&
                   Object.keys(formState?.changes).length > 0 &&
-                (
-                  <Button
-                    id='submit-btn'
-                    type='submit'
-                    disabled={formState.loading}
-                    color='primary'
-                  >
-                    {!formState.loading ? (
-                      <>
-                        {
-                          isEditing || (!auth && orderState.options?.address?.address)
-                            ? t('SAVE_AND_CONTINUE', 'Save and continue')
-                            : t('ADD_ADDRESS', 'Add address')
-                        }
-                      </>
-                    ) : (
-                      t('LOADING', 'Loading')
-                    )}
-                  </Button>
-                )}
+                  (
+                    <Button
+                      id='submit-btn'
+                      type='submit'
+                      disabled={formState.loading}
+                      color='primary'
+                    >
+                      {!formState.loading ? (
+                        <>
+                          {
+                            isEditing || (!auth && orderState.options?.address?.address)
+                              ? t('SAVE_AND_CONTINUE', 'Save and continue')
+                              : t('ADD_ADDRESS', 'Add address')
+                          }
+                        </>
+                      ) : (
+                        t('LOADING', 'Loading')
+                      )}
+                    </Button>
+                  )}
               </FormActions>
               {isAllowUnaddressOrderType && (
                 <WithoutAddressContainer>

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

@@ -245,6 +245,14 @@ export const AddressMarkContainer = styled.div`
     color: #664D03;
     font-size: 12px;
   }
+
+  ${({ blue }) => blue && css`
+      background-color: #CFF4FC;
+      border: 1px solid #9EEAF9;
+      p {
+        color: #055160;
+      }
+  `}
 `
 
 export const StreetViewText = styled.span`

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

@@ -39,7 +39,9 @@ import {
   AddressBookMark,
   AddressBookMarkContainer,
   AddressTitleContainer,
-  WithoutAddressText
+  WithoutAddressText,
+  WrapperSMS,
+  ButtonsContainer
 } from './styles'
 
 import { NotFoundSource } from '../NotFoundSource'
@@ -92,7 +94,10 @@ const AddressListUI = (props) => {
     notUseCustomerInfo,
     franchiseId,
     setIsSavedAddress,
-    isFromPhoneAutocomplete
+    isFromPhoneAutocomplete,
+    setUserConfirmPhone,
+    userConfirmPhone,
+    disabledSms
   } = props
 
   const [, t] = useLanguage()
@@ -101,7 +106,7 @@ const AddressListUI = (props) => {
   const [{ configs }] = useConfig()
   const [curAddress, setCurAddress] = useState(false)
   const [addressOpen, setAddressOpen] = useState(false)
-  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [confirm, setConfirm] = useState({ open: false, title: null, content: null, handleOnAccept: null, handleOnCancel: null })
   const theme = useTheme()
   const [{ user }] = useCustomer()
   const [addressSpreadForm, setAddressSpreadForm] = useState(null)
@@ -156,7 +161,7 @@ const AddressListUI = (props) => {
     handleCloseAddressForm()
   }
 
-  const handleSetAddress = (address) => {
+  const handleSetAddress = (address, options) => {
     if (
       checkAddress(address) &&
       isCustomerMode &&
@@ -179,7 +184,7 @@ const AddressListUI = (props) => {
       openAddress(address)
       return
     }
-    setIsSavedAddress && setIsSavedAddress(true)
+    (!options?.avoidRedirect && setIsSavedAddress) && setIsSavedAddress(true)
     handleCloseAddressForm()
     handleSetDefault(address, userCustomerSetup)
   }
@@ -222,6 +227,10 @@ const AddressListUI = (props) => {
     setEditSpreadAddress(false)
   }
 
+  const handleOnCancel = () => {
+    setConfirm({ ...confirm, open: false })
+  }
+
   /**
    * Close modals and alerts
    */
@@ -250,6 +259,18 @@ const AddressListUI = (props) => {
     }
   }, [userCustomerSetup?.imported_address_text, addressList.addresses, addressList?.loading, addressList?.error, isOpenUserData])
 
+  useEffect(() => {
+    if (!addressList?.addedBySocket) return
+    setConfirm({
+      open: true,
+      title: t('NEW_ADDRESS_REGISTERED', 'New address registered'),
+      content: t('NEW_ADDRESS_REGISTERED_CONTENT', 'The user has sent the address'),
+      handleOnAccept: () => setConfirm({ ...confirm, open: false }),
+      handleOnCancel: ''
+    })
+    handleSetAddress(addressList?.addresses[addressList?.addresses?.length - 1], { avoidRedirect: true })
+  }, [addressList?.addedBySocket])
+
   return (
     <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading}>
       <AddressHalfContainer>
@@ -260,20 +281,37 @@ const AddressListUI = (props) => {
           notUseCustomerInfo={notUseCustomerInfo}
           addFormRestrictions={addFormRestrictions}
         >
-          {
-            !addFormRestrictions && !addressOpen && !isOpenUserData && (
-              <Button
-                className='add'
-                outline
-                color={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>
-            )
-          }
+          {!addFormRestrictions && !addressOpen && !isOpenUserData && (
+            <>
+              <ButtonsContainer>
+                <Button
+                  className='add'
+                  outline
+                  color={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>
+                <Button
+                  className='add sms'
+                  color={disabledSms ? 'secondary' : 'primary'}
+                  onClick={() => setUserConfirmPhone({ open: true, result: null })}
+                  disabled={orderState?.loading || actionStatus.loading || disabledSms}
+                >
+                  {t('SEND_SMS_TO_CLIENT', 'Send SMS to client')}
+                </Button>
+              </ButtonsContainer>
+              {(userConfirmPhone?.result) && (
+                <WrapperSMS>
+                  <p>
+                    {userConfirmPhone?.result}
+                  </p>
+                </WrapperSMS>
+              )}
+            </>
+          )}
           {
             isPopover && addressOpen && (
               <AddressForm
@@ -291,6 +329,8 @@ const AddressListUI = (props) => {
                 onSaveAddress={handleSaveAddress}
                 userCustomerSetup={userCustomerSetup}
                 isAllowUnaddressOrderType={isAllowUnaddressOrderType}
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
               />
             )
           }
@@ -308,9 +348,10 @@ const AddressListUI = (props) => {
               <AddressListUl id='list'>
                 <AddressTitleContainer style={{ display: 'flex' }}>
                   <AddressTitle>{t('SELECT_ONE_OF_SAVED_PLACES', 'Select one of your saved places')}</AddressTitle>
+
                   {isAllowUnaddressOrderType && (
                     <>
-                      <p>{' '}{t('OR', 'or')}{' '}</p>
+                      <span>{' '}{t('OR', 'or')}{' '}</span>
                       <WithoutAddressText onClick={() => events.emit('go_to_page', { page: 'search' })}>{t('CONTINUE_WITHOUT_ADDRESS', 'Continue without address')}</WithoutAddressText>
                     </>
                   )}
@@ -399,6 +440,8 @@ const AddressListUI = (props) => {
                 franchiseId={franchiseId}
                 addFormRestrictions={addFormRestrictions}
                 isAllowUnaddressOrderType={isAllowUnaddressOrderType}
+                userConfirmPhone={userConfirmPhone}
+                setUserConfirmPhone={setUserConfirmPhone}
               />
             </AddressFormContainer>
           )}
@@ -480,17 +523,19 @@ const AddressListUI = (props) => {
               onSaveAddress={handleSaveAddress}
               userCustomerSetup={userCustomerSetup}
               isAllowUnaddressOrderType={isAllowUnaddressOrderType}
+              userConfirmPhone={userConfirmPhone}
+              setUserConfirmPhone={setUserConfirmPhone}
             />
           </Modal>
         )
       }
       <Confirm
-        title={t('SEARCH', 'Search')}
+        title={confirm.title || t('SEARCH', 'Search')}
         content={confirm.content}
         acceptText={t('ACCEPT', 'Accept')}
         open={confirm.open}
         onClose={() => setConfirm({ ...confirm, open: false })}
-        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onCancel={confirm.handleOnCancel ?? handleOnCancel}
         onAccept={confirm.handleOnAccept}
         closeOnBackdrop={false}
       />

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

@@ -291,8 +291,23 @@ export const AddressTitleContainer = styled.div`
   white-space: break-spaces;
 `
 
-export const WithoutAddressText = styled.p`
+export const WithoutAddressText = styled.span`
   text-decoration: underline;
   color: ${({ theme }) => theme?.colors?.primary};
   cursor: pointer;
 `
+
+export const WrapperSMS = styled.div`
+  margin-top: 20px;
+  p {
+    color: ${({ theme }) => theme?.colors?.primary}
+  }
+`
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  .sms{
+    margin-left: 20px;
+  }
+`