ordering-ui-admin-external 1.9.0 → 1.11.0

package/src/components/Profile/ProfilePage/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   flex: 1;
@@ -27,12 +27,19 @@ export const UserImage = styled.div`
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   width: 216px;
   height: 216px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
   }
+  svg {
+    width: 80%;
+    height: 80%;
+  }
 `
 export const UserInfoWrapper = styled.div`
   margin: 0 26px;
@@ -63,3 +70,62 @@ export const ButtonsGroup = styled.div`
     height: 44px;
   }
 `
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`

package/src/components/Settings/Cms/styles.js

@@ -206,7 +206,7 @@ export const PagesBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewPageButton = styled.div`

package/src/components/Settings/CountriesList/styles.js

@@ -157,7 +157,7 @@ export const PagesBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewPageButton = styled.div`

package/src/components/Settings/DoordashConnect/index.js

@@ -101,7 +101,7 @@ const DoordashConnectUI = (props) => {
                 '1.- Doordash account. \n' +
                 '2.- The advanced logistics module must be active. \n' +
                 '3.- Package of Ordering. \n' +
-                '4.- This is only available for United States currently.'
+                '4.- This is only available for United States, Canada and Australia currently.'
               )}
             </p>
           </Paragraph>

package/src/components/Settings/IntegrationListing/index.js

@@ -137,7 +137,7 @@ export const IntegrationListing = (props) => {
               <img src={theme.images.general.lalamove} />
             </IconWrapper>
             <SettingItemContent>
-              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with lalamove')}</h5>
+              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with Lalamove')}</h5>
               <p>{t('CONNECT_LALAMOVE_DESCRIPTION', 'Send orders directly to your drivers in LalaMove and keep customers happy with their deliveries.')}</p>
             </SettingItemContent>
           </SettingItemContainer>

package/src/components/Settings/LanguageTransTable/styles.js

@@ -75,7 +75,7 @@ export const TransBottomContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   row-gap: 10px;
-  margin: 15px 0;
+  margin: 15px 0 38px 0;
 `
 
 export const AddNewTransButton = styled.div`

package/src/components/Settings/index.js

@@ -29,6 +29,7 @@ import { InsertVideo } from './InsertVideo'
 import { InsertImage } from './InsertImage'
 import { LanguageTransSpread } from './LanguageTransSpread'
 import { LanguageTransTable } from './LanguageTransTable'
+import { MultiCountrySettings } from './MultiCountrySettings'
 
 export {
   Cms,
@@ -61,5 +62,6 @@ export {
   InsertVideo,
   InsertImage,
   LanguageTransSpread,
-  LanguageTransTable
+  LanguageTransTable,
+  MultiCountrySettings
 }

package/src/components/Shared/ColumnAllowSettingPopover/styles.js

@@ -6,6 +6,7 @@ export const HeaderItem = styled.div`
 `
 
 export const PopoverBody = styled.div`
+  position: fixed !important;
   z-index: 1001;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
   border: 1px solid ${props => props.theme.colors?.borderColor};

package/src/components/Shared/ImageCrop/index.js

@@ -18,7 +18,8 @@ export const ImageCrop = (props) => {
   const {
     photo,
     handleChangePhoto,
-    onClose
+    onClose,
+    aspectRatio
   } = props
 
   const [, t] = useLanguage()
@@ -48,15 +49,23 @@ export const ImageCrop = (props) => {
 
   useEffect(() => {
     if (!cropperRef.current || !photo) return
-
-    const _cropper = new Cropper(cropperRef.current, {
-      // aspectRatio: 16 / 9,
-      dragMode: 'move',
-      zoomable: false,
-      toggleDragModeOnDblclick: false
-    })
+    let _cropper
+    if (aspectRatio) {
+      _cropper = new Cropper(cropperRef.current, {
+        aspectRatio: aspectRatio,
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false
+      })
+    } else {
+      _cropper = new Cropper(cropperRef.current, {
+        dragMode: 'move',
+        zoomable: false,
+        toggleDragModeOnDblclick: false
+      })
+    }
     setCropper(_cropper)
-  }, [photo])
+  }, [photo, aspectRatio])
 
   return (
     <Container>

package/src/components/Shared/Modal/styles.js

@@ -16,7 +16,7 @@ export const ModalDialog = styled.div`
   box-sizing: border-box;
   margin-top: auto;
   margin-bottom: auto;
-  overflow: hidden;
+  overflow: auto;
   max-height: calc(var(--vh, 1vh) * 90);
   @media (max-width: 860px) {
     width: 80%;

package/src/components/Shared/Schedule/styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const ScheduleContainer = styled.div`
-  min-width: 400px;
+  min-width: 320px;
 `
 
 export const TimeScheduleItemContainer = styled.div`
@@ -18,7 +18,7 @@ export const TimeScheduleItemContainer = styled.div`
       font-size: 13px;
       font-weight: 600;
       margin: 0px;
-      padding: 0 16px;
+      padding: 0 10px;
     }
 
     &:first-child {
@@ -42,7 +42,7 @@ export const TimeScheduleItemContainer = styled.div`
         }
   
         svg {
-          font-size: 20px;
+          font-size: 18px;
           cursor: pointer;
         }
       }
@@ -56,7 +56,7 @@ export const TimeScheduleItemContainer = styled.div`
       > span {
         svg {
           cursor: pointer;
-          font-size: 20px;
+          font-size: 18px;
           color: ${props => props.theme.colors.primary};
           ${props => props.theme?.rtl ? css`
             margin-left: 10px;
@@ -68,15 +68,26 @@ export const TimeScheduleItemContainer = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: 450px) {
     > div {
       h4 {
         font-size: 14px;
+        padding: 0 16px;
       }
       &:nth-child(2) {
         p {
           font-size: 14px;
         }
+        svg {
+          font-size: 20px;
+        }
+      }
+      &:nth-child(3) {
+        > span {
+          svg {
+            font-size: 20px;
+          }
+        }
       }
     }
   }
@@ -96,6 +107,7 @@ export const SelectWrapper = styled.div`
     > div {
       padding-left: 13px;
       padding-right: 13px;
+      font-size: 13px;
       > div:last-child {
         margin: 0px;
       }
@@ -111,8 +123,13 @@ export const SelectWrapper = styled.div`
     }
   }
 
-  @media (min-width: 380px) {
+  @media (min-width: 450px) {
     width: 100px;
+    .select {
+      > div {
+        font-size: 16px;
+      }
+    }
   }
 `
 
@@ -137,19 +154,22 @@ export const IconWrapper = styled.span`
 export const TrashIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   ${({ isHide }) => isHide ? css`
     opacity: 0;
     pointer-events: none;
   ` : css`
     opacity: 1;
   `}
+  @media (min-width: 450px) {
+    width: 56px;
+  }
 `
 
 export const AddScheduleIconWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 56px;
+  width: 50px;
   > svg {
     color: ${props => props.theme.colors.primary};
     ${props => props.theme?.rtl ? css`
@@ -161,4 +181,8 @@ export const AddScheduleIconWrapper = styled.div`
       color: ${props => props.theme.colors.lightGray};
     }
   }
+
+  @media (min-width: 450px) {
+    width: 56px;
+  }
 `

package/src/components/Shared/SelectSites/index.js

@@ -20,7 +20,7 @@ export const SelectSites = (props) => {
     handleSelectAllSites,
     handleSelectNoneSites,
     handleUpdateClick,
-    handleAddPromotion
+    handleAddClick
   } = props
 
   const [, t] = useLanguage()
@@ -78,7 +78,7 @@ export const SelectSites = (props) => {
         color='primary'
         disabled={isDisabled}
         onClick={() => {
-          isAddMode ? handleAddPromotion() : handleUpdateClick()
+          isAddMode ? handleAddClick() : handleUpdateClick()
         }}
       >
         {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}

package/src/components/SidebarMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react'
+import React, { useEffect, useContext, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { LogoutButton } from '../LogoutButton'
 import {
@@ -19,7 +19,8 @@ import {
   Cart3,
   Cash,
   BagCheck,
-  CloudDownload
+  CloudDownload,
+  X as CloseIcon
 } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { SidebarMenu as SidebarMenuController, useEvent, useLanguage, useSession, useConfig, useApi } from 'ordering-components-admin-external'
@@ -41,7 +42,8 @@ import {
   SubMenu,
   LanguageSelectorContainer,
   LogoWrapper,
-  PoweredWrapper
+  PoweredWrapper,
+  MobileMessage
 } from './styles'
 
 const SidebarMenuUI = (props) => {
@@ -57,6 +59,9 @@ const SidebarMenuUI = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const windowSize = useWindowSize()
   const isPoweredByOrderingModule = configs?.powered_by_ordering_module?.value
+  const isEnabledAppointmentsFeature = configs?.appointments?.value
+
+  const [showMessage, setShowMessage] = useState(false)
 
   const ordersSubMenus = [
     {
@@ -205,6 +210,8 @@ const SidebarMenuUI = (props) => {
     // }
   ]
 
+  const buisnessOwnerUsersMenuIncluded = [3]
+
   const settingsSubMenus = [
     {
       id: 1,
@@ -322,12 +329,18 @@ const SidebarMenuUI = (props) => {
       title: t('PROMOTION_AUTOMATION', 'Promotions automation'),
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
-    }
+    },
     // {
     //   id: 2,
     //   title: t('CAMPAIGN', 'Campaign'),
     //   pageName: 'campaign',
     //   url: '/marketing/campaign'
+    // },
+    // {
+    //   id: 3,
+    //   title: t('AD_BANNERS', 'Ad banners'),
+    //   pageName: 'ad_banners',
+    //   url: '/marketing/ad-banners'
     // }
   ]
 
@@ -359,8 +372,22 @@ const SidebarMenuUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      setShowMessage(true)
+    }
+  }, [])
+
   return (
     <>
+      {showMessage && (
+        <MobileMessage>
+          <div>
+            <CloseIcon onClick={() => setShowMessage(false)} />
+            {t('FOR_THE_BEST_EXPERIENCE_WHILE_SETTING_UP', 'For the best experience while setting up your project, we recommend using a computer.')}
+          </div>
+        </MobileMessage>
+      )}
       <SidebarContainer
         id='side_bar'
         isCollapse={isCollapse}
@@ -452,13 +479,25 @@ const SidebarMenuUI = (props) => {
                           {ordersSubMenus.map(item => (
                             !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
                             !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
-                              <SubMenu
-                                key={item.id}
-                                active={location.pathname.includes(item.url)}
-                                onClick={() => handleGoToPage({ page: item.pageName })}
-                              >
-                                {firstLetterCapital(item.title)}
-                              </SubMenu>
+                              item.pageName === 'appointments' ? (
+                                isEnabledAppointmentsFeature && (
+                                  <SubMenu
+                                    key={item.id}
+                                    active={location.pathname.includes(item.url)}
+                                    onClick={() => handleGoToPage({ page: item.pageName })}
+                                  >
+                                    {firstLetterCapital(item.title)}
+                                  </SubMenu>
+                                )
+                              ) : (
+                                <SubMenu
+                                  key={item.id}
+                                  active={location.pathname.includes(item.url)}
+                                  onClick={() => handleGoToPage({ page: item.pageName })}
+                                >
+                                  {firstLetterCapital(item.title)}
+                                </SubMenu>
+                              )
                             )
                           ))}
                         </MenuContent>
@@ -509,7 +548,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level === 0 && (
+                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 2) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='4'
@@ -525,15 +564,32 @@ const SidebarMenuUI = (props) => {
                       </ContextAwareToggle>
                       <Accordion.Collapse eventKey='4'>
                         <MenuContent>
-                          {usersSubMenus.map(item => (
-                            <SubMenu
-                              key={item.id}
-                              active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
-                              onClick={() => handleGoToPage({ page: item.pageName })}
-                            >
-                              {item.title}
-                            </SubMenu>
-                          ))}
+                          {
+                            (sessionState?.user?.level === 2
+                              ? usersSubMenus.filter(menu => buisnessOwnerUsersMenuIncluded.includes(menu.id))
+                              : usersSubMenus
+                            ).map(item => (
+                              item.pageName === 'professionals' ? (
+                                isEnabledAppointmentsFeature && (
+                                  <SubMenu
+                                    key={item.id}
+                                    active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
+                                    onClick={() => handleGoToPage({ page: item.pageName })}
+                                  >
+                                    {item.title}
+                                  </SubMenu>
+                                )
+                              ) : (
+                                <SubMenu
+                                  key={item.id}
+                                  active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
+                                  onClick={() => handleGoToPage({ page: item.pageName })}
+                                >
+                                  {item.title}
+                                </SubMenu>
+                              )
+                            ))
+                          }
                         </MenuContent>
                       </Accordion.Collapse>
                     </MenuContainer>

package/src/components/SidebarMenu/styles.js

@@ -240,3 +240,29 @@ export const PoweredWrapper = styled.div`
   font-size: 14px;
   font-weight: 600;
 `
+
+export const MobileMessage = styled.div`
+  position: fixed;
+  top: 100px;
+  left: calc(50% - 130px);
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  width: 260px;
+  > div {
+    padding: 15px 15px 10px 15px;
+    font-size: 12px;
+    line-height: 18px;
+    position: relative;
+    > svg {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      cursor: pointer;
+      font-size: 21px;
+    }
+  }
+`

package/src/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -15,7 +15,8 @@ export const BusinessDetails = (props) => {
     formState,
     handleChangeAddress,
     handleChangeInput,
-    handleChangeCenter
+    handleChangeCenter,
+    placeId
   } = props
 
   const [, t] = useLanguage()
@@ -45,7 +46,7 @@ export const BusinessDetails = (props) => {
           <Input
             name='name'
             placeholder={t('NAME', 'Name')}
-            defaultValue={formState?.changes?.name ?? ''}
+            value={formState?.changes?.name ?? ''}
             onChange={e => {
               handleChangeInput([{ name: 'name', value: e.target.value }, { name: 'slug', value: stringToSlug(e.target.value) }], true)
             }}
@@ -53,21 +54,23 @@ export const BusinessDetails = (props) => {
         </FormControl>
         <FormControl>
           <label>{t('ADDRESS', 'Address')}</label>
-          <GoogleAutocompleteInput
-            name='address'
-            className='input-autocomplete'
-            apiKey={googleMapsApiKey}
-            placeholder={t('ADDRESS', 'Address')}
-            onChangeAddress={(e) => {
-              handleChangeAddress(e)
-            }}
-            onChange={(e) => {
-              handleChangeInput(e)
-            }}
-            defaultValue={formState?.changes?.address ?? ''}
-            autoComplete='new-password'
-            countryCode={configs?.country_autocomplete?.value || '*'}
-          />
+          {googleMapsApiKey && (
+            <GoogleAutocompleteInput
+              name='address'
+              className='input-autocomplete'
+              apiKey={googleMapsApiKey}
+              placeholder={t('ADDRESS', 'Address')}
+              onChangeAddress={(e) => {
+                handleChangeAddress(e)
+              }}
+              onChange={(e) => {
+                handleChangeInput(e)
+              }}
+              defaultValue={formState?.changes?.address ?? ''}
+              autoComplete='new-password'
+              countryCode={configs?.country_autocomplete?.value || '*'}
+            />
+          )}
         </FormControl>
         <FormControl>
           <label>{t('ZIPCODE', 'Zipcode')}</label>
@@ -80,23 +83,25 @@ export const BusinessDetails = (props) => {
         </FormControl>
         <GoogleMapContainer>
           <label>{t('GOOGLE_PLACE_ID', 'Google place ID')}</label>
-          <p>{googleMapsApiKey}</p>
-          <WrapperMap>
-            <GoogleMapsMap
-              apiKey={configs?.google_maps_api_key?.value}
-              location={formState?.changes?.location ?? defaultPosition}
-              mapControls={googleMapsControls}
-              handleChangeCenter={handleChangeCenter}
-              isFitCenter
-            />
-          </WrapperMap>
+          <p>{placeId ?? googleMapsApiKey}</p>
+          {configs?.google_maps_api_key?.value && (
+            <WrapperMap>
+              <GoogleMapsMap
+                apiKey={configs?.google_maps_api_key?.value}
+                location={formState?.changes?.location ?? defaultPosition}
+                mapControls={googleMapsControls}
+                handleChangeCenter={handleChangeCenter}
+                isFitCenter
+              />
+            </WrapperMap>
+          )}
         </GoogleMapContainer>
         <FormControl noBottom>
-          <label>{t('INT_NUMBER', 'Int. number')}</label>
+          <label>{t('PHONE_NUMBER', 'Phone number')}</label>
           <Input
             name='cellphone'
-            placeholder={t('INT_NUMBER', 'Int. number')}
-            defaultValue={formState?.changes?.cellphone ?? ''}
+            placeholder={t('PHONE_NUMBER', 'Phone number')}
+            value={formState?.changes?.cellphone ?? ''}
             onChange={handleChangeInput}
           />
         </FormControl>

package/src/components/Stores/BusinessAdd/BusinessDetails/styles.js

@@ -70,6 +70,7 @@ export const GoogleMapContainer = styled.div`
     line-height: 24px;
     margin: 0;
     color: ${props => props.theme.colors.lightGray};
+    word-break: break-all;
   }
 `
 

package/src/components/Stores/BusinessAdd/Photos/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'
 import { useLanguage, ExamineClick, DragAndDrop, useUtils } from 'ordering-components-admin-external'
 import { Image as DumyPhoto, X as CloseIcon } from 'react-bootstrap-icons'
 import { Alert, Modal, ImageCrop, DragScroll } from '../../../Shared'
-import { bytesConverter } from '../../../../utils'
+import { bytesConverter, getUniqueId } from '../../../../utils'
 import {
   PhotosContainer,
   ContentWrapper,
@@ -48,12 +48,6 @@ export const Photos = (props) => {
     handleChangeGallery(updatedGallery)
   }
 
-  const getUniqueId = () => {
-    const dateString = Date.now().toString(36)
-    const randomness = Math.random().toString(36).substr(2)
-    return dateString + randomness
-  }
-
   const handleFiles = (files) => {
     if (files.length === 1) {
       const type = files[0].type.split('/')[0]