ordering-ui-admin-external 1.9.0 → 1.11.0

package/src/components/Users/ProfessionalSchedule/index.js

@@ -1,18 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { useLanguage, ProfessionalSchedule as ProfessionalScheduleController } from 'ordering-components-admin-external'
 import { Circle as UnCheckIcon, RecordCircleFill as CheckIcon } from 'react-bootstrap-icons'
-import { Select } from '../../../styles/Select/FirstSelect'
-import { Schedule } from '../../Shared'
+import { Schedule } from './Schedule'
 import { Button, Input } from '../../../styles'
 
 import {
   Container,
   DateRangeWrapper,
   RangeItem,
-  ScheduleWrapper,
-  SelectWrapper,
-  Option,
-  ScheduleContentWrapper,
   ButtonWrapper
 } from './styles'
 
@@ -27,33 +22,12 @@ const ProfessionalScheduleUI = (props) => {
 
   const [, t] = useLanguage()
   const [isMaxDays, setIsMaxDays] = useState(false)
-  const [scheduleType, setScheduleType] = useState('')
-
-  const defaultSchedule = [
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] },
-    { enabled: true, lapses: [{ open: { hour: 0, minute: 0 }, close: { hour: 23, minute: 59 } }] }
-  ]
-
-  const typeList = [
-    { value: 'default', content: <Option>{t('USE_DEFAULT_SCHEDULE', 'Use default schedule')}</Option> },
-    { value: 'customize', content: <Option>{t('CUSTOMIZE_SCHEDULE', 'Customize schedule')}</Option> }
-  ]
 
   const handleIndefinitelyClick = () => {
     handleChangeItem({ max_days_in_future: null })
     setIsMaxDays(false)
   }
 
-  const handleChangeScheduleType = (val) => {
-    setScheduleType(val)
-    if (val === 'default') handleChangeItem({ schedule: defaultSchedule })
-  }
-
   const handlClickFutureDay = (e) => {
     if (e.target.closest('.max_days_in_future')) return
     setIsMaxDays(true)
@@ -63,9 +37,10 @@ const ProfessionalScheduleUI = (props) => {
     handleUpdateClick && handleUpdateClick()
   }
 
+  const changeSchedule = useCallback((val) => handleChangeItem({ schedule: val }), [])
+
   useEffect(() => {
     if (typeof user?.max_days_in_future === 'number') setIsMaxDays(true)
-    if (user?.schedule) setScheduleType('customize')
   }, [user])
 
   return (
@@ -100,26 +75,11 @@ const ProfessionalScheduleUI = (props) => {
             <label>{t('INDEFINITELY_INTO_THE_FUTURE', 'Indefinitely into the future')}</label>
           </RangeItem>
         </DateRangeWrapper>
-        <ScheduleWrapper>
-          <h1>{t('SCHEDULE', 'Schedule')}</h1>
-          <SelectWrapper>
-            <Select
-              options={typeList}
-              className='select'
-              defaultValue={scheduleType}
-              placeholder={t('SELECT_OPTION', 'Select an option')}
-              onChange={(value) => handleChangeScheduleType(value)}
-            />
-          </SelectWrapper>
-          {scheduleType === 'customize' && (
-            <ScheduleContentWrapper>
-              <Schedule
-                scheduleList={user?.schedule}
-                handleChangeScheduleState={val => handleChangeItem({ schedule: val })}
-              />
-            </ScheduleContentWrapper>
-          )}
-        </ScheduleWrapper>
+        <Schedule
+          key={user?.id}
+          scheduleList={user?.schedule}
+          handleChangeScheduleState={changeSchedule}
+        />
       </Container>
       <ButtonWrapper>
         <Button

package/src/components/Users/ProfessionalSchedule/styles.js

@@ -69,55 +69,6 @@ export const ScheduleWrapper = styled.div`
     margin-bottom: 15px;
   }
 `
-
-export const SelectWrapper = styled.div`
-  margin-bottom: 15px;
-
-  > div {
-    width: 100%;
-    border: none;
-
-    > div:first-child {
-      background-color: ${props => props.theme.colors.secundary};
-      height: 43px;
-      border: none;
-      border-radius: 7.6px;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 24px;
-      color: ${props => props.theme.colors.secundaryContrast};
-    }
-    .list {
-      background-color: ${props => props.theme.colors.secundary};
-      border: none;
-      
-      .search-bar-container {
-        padding: 10px;
-        input {
-          background-color: transparent;
-          height: 44px;
-        }
-      }
-
-      .list-wrapper {
-        > div {
-          padding: 6px 10px;
-          &:hover {
-            background-color: #f2f5f7;
-          }
-        }
-      }
-    }
-  }
-`
-
-export const Option = styled.div`
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  color: ${props => props.theme.colors.secundaryContrast};
-`
-
 export const ScheduleContentWrapper = styled.div`
   border-top: 1px solid ${props => props.theme.colors.borderColor};
 `

package/src/components/Users/UserFormDetails/index.js

@@ -263,7 +263,7 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
-            {isProfessional && occupations.length > 0 && (
+            {isProfessional && occupations?.length > 0 && (
               <OccupationSelector
                 occupationId={user?.occupation_id}
                 occupations={occupations}

package/src/components/Users/UsersList/index.js

@@ -66,7 +66,7 @@ export const UsersList = (props) => {
   }
 
   const handleChangePage = (page) => {
-    getUsers(page, 10)
+    getUsers(page, paginationProps?.pageSize)
   }
 
   const handleChangePageSize = (pageSize) => {
@@ -147,7 +147,7 @@ export const UsersList = (props) => {
               </tr>
             </thead>
             {usersList.loading ? (
-              [...Array(10).keys()].map(i => (
+              [...Array(paginationProps?.pageSize || 10).keys()].map(i => (
                 <tbody key={i}>
                   <tr>
                     <td>
@@ -269,6 +269,7 @@ export const UsersList = (props) => {
           {usersList?.users.length > 0 && (
             <WrapperPagination>
               <Pagination
+                defaultPageSize={paginationProps?.pageSize}
                 currentPage={paginationProps.currentPage}
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}

package/src/components/Users/UsersList/styles.js

@@ -211,6 +211,7 @@ export const UsersBottomContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 37px;
 `
 
 export const VerifiedItem = styled.span`

package/src/components/Users/UsersListingHeader/index.js

@@ -1,18 +1,21 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { SearchBar } from '../../Shared'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 
 import {
   HeaderContainer,
   HeaderTitleContainer,
-  ActionContainer
+  ActionContainer,
+  InfoWrapper,
+  InfoContent
 } from './styles'
 
 export const UsersListingHeader = (props) => {
   const {
+    isProfessionals,
     title,
     searchValue,
     onSearch
@@ -33,6 +36,18 @@ export const UsersListingHeader = (props) => {
           </IconButton>
         )}
         <h1>{title}</h1>
+        {isProfessionals && (
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('PROFESSIONALS_INFO', 'Create, assign and manage your professionals. Once the professional link his Google account, continue synchronizing your appointments with the professionals user using the Synchronize button inside of the account. Select the stores and configure the schedules for your services.')}
+            </InfoContent>
+          </InfoWrapper>
+        )}
       </HeaderTitleContainer>
       <ActionContainer>
         <SearchBar

package/src/components/Users/UsersListingHeader/styles.js

@@ -74,3 +74,62 @@ export const ActionContainer = styled.div`
     margin-top: 0px;
   }
 `
+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/index.js

@@ -141,6 +141,7 @@ import {
 import { HomePage } from './components/Home'
 import { LoginForm, ForgotPasswordForm, QueryLogin, ResetPassword } from './components/Login'
 import {
+  AdBannersListing,
   EnterprisePromotionListing,
   CampaignListing,
   EnterprisePromotionList,
@@ -200,7 +201,8 @@ import {
   InsertVideo,
   InsertImage,
   LanguageTransSpread,
-  LanguageTransTable
+  LanguageTransTable,
+  MultiCountrySettings
 } from './components/Settings'
 import {
   BusinessBrandListing,
@@ -303,7 +305,13 @@ import {
   PaymentOptionMethods,
   BusinessPublishing,
   ServiceDetail,
-  ProductVideos
+  ProductVideos,
+  ProductStartGuide,
+  ImportersButton,
+  RestaurantSelectGuide,
+  ProductStep,
+  BusinessSync,
+  BusinessDelete
 } from './components/Stores'
 import {
   CustomersListing,
@@ -379,7 +387,7 @@ import {
 import { LogoutButton } from './components/LogoutButton'
 import { LanguageSelector } from './components/LanguageSelector'
 
-import { capitalize, verifyDecimals } from './utils'
+import { capitalize, verifyDecimals, setStorageItem, getStorageItem } from './utils'
 
 // contexts
 import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
@@ -538,6 +546,7 @@ export {
   QueryLogin,
   ResetPassword,
 
+  AdBannersListing,
   EnterprisePromotionListing,
   CampaignListing,
   EnterprisePromotionList,
@@ -600,6 +609,7 @@ export {
   InsertImage,
   LanguageTransSpread,
   LanguageTransTable,
+  MultiCountrySettings,
 
   Support,
 
@@ -704,6 +714,12 @@ export {
   BusinessPublishing,
   ServiceDetail,
   ProductVideos,
+  ProductStartGuide,
+  ImportersButton,
+  RestaurantSelectGuide,
+  ProductStep,
+  BusinessSync,
+  BusinessDelete,
 
   LogoutButton,
   LanguageSelector,
@@ -777,6 +793,8 @@ export {
 
   capitalize,
   verifyDecimals,
+  setStorageItem,
+  getStorageItem,
 
   // contexts
   ThemeContext,

package/src/styles/Select/index.js

@@ -35,7 +35,10 @@ export const Select = (props) => {
     searchBarIsCustomLayout,
     searchBarPlaceholder,
     searchBarIsNotLazyLoad,
-    className
+    className,
+    isShowCustomOption,
+    customOptionTitle,
+    handleCustomOptionClick
   } = props
   const defaultOption = options?.find(
     (option) => option.value === defaultValue
@@ -142,7 +145,7 @@ export const Select = (props) => {
         )}
         {selectedOption && (
           <Selected>
-            <Header>
+            <Header className='header'>
               {selectedOption.showOnSelected || selectedOption.content}
             </Header>
             <Chevron>
@@ -179,12 +182,24 @@ export const Select = (props) => {
                 optionBottomBorder={props.optionBottomBorder}
                 disabled={option.disabled}
                 showDisable={option?.showDisable}
-                className={option.disabled ? 'disabled' : null}
+                className={option.disabled ? 'option disabled' : 'option'}
               >
                 {option.content}
               </Option>
             ))}
           </OptionsInner>
+
+          {isShowCustomOption && (
+            <Option
+              className='option custom-option'
+              onClick={() => {
+                handleCustomOptionClick()
+                setOpen(false)
+              }}
+            >
+              {customOptionTitle}
+            </Option>
+          )}
         </Options>
       </PopoverBody>
     </div>

package/src/utils/index.js

@@ -26,6 +26,14 @@ export const getIconCard = (brand = '') => {
       return <FaCreditCard />
   }
 }
+/**
+ * Function to get unique id
+ */
+export const getUniqueId = () => {
+  const dateString = Date.now().toString(36)
+  const randomness = Math.random().toString(36).substr(2)
+  return dateString + randomness
+}
 
 /**
  * Function to convert a string in string capitalized

package/template/app.js

@@ -69,6 +69,7 @@ import { CampaignListing } from './pages/CampaignListing'
 import { Professionals } from './pages/Professionals'
 import { QueryLogin } from '../src/components/Login'
 import { PluginSettings } from './pages/PluginSettings'
+import { AdBannersList } from './pages/AdBannersList'
 import { Profile } from './pages/Profile'
 import settings from './config.json'
 import { BusinessAdd } from './pages/BusinessAdd'
@@ -284,6 +285,9 @@ export const App = () => {
                     <ProtectedRoute path='/marketing/campaign' allowedLevels={[0]}>
                       <CampaignListing />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/marketing/ad-banners' allowedLevels={[0]}>
+                      <AdBannersList />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/loyalty/rewards-programs' allowedLevels={[0]}>
                       <RewardsPrograms />

package/template/components/ListenPageChanges/index.js

@@ -52,6 +52,7 @@ export const ListenPageChanges = ({ children }) => {
     drivers_groups: '/delivery/drivers-groups',
     enterprise_promotions: '/marketing/promotions-enterprise',
     campaign: '/marketing/campaign',
+    ad_banners: '/marketing/ad-banners',
     ordering_products: '/ordering-products',
     support: '/support',
     rewards_programs: '/loyalty/rewards-programs',

package/template/helmetdata.json

@@ -349,6 +349,13 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "ad_banners": {
+    "title": "Ad banners",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "reset_password": {
     "title": "Reset Password",
     "description": "a dummy description about this page",