ordering-ui-admin-external 1.8.5 → 1.10.0

package/src/components/Stores/RestaurantSelectGuide/index.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, useConfig, GoogleAutocompleteInput } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { ArrowRight, Image } from 'react-bootstrap-icons'
+import { Button } from '../../../styles'
+import {
+  Container,
+  SelectWrapper,
+  Option,
+  ButtonWrapper,
+  SearchWrapper,
+  EmptyData
+} from './styles'
+
+export const RestaurantSelectGuide = (props) => {
+  const {
+    setBusiness,
+    businessList,
+    setStep,
+    onClose,
+    handleImport,
+    handleChangeAddress,
+    orderingBusiness,
+    isLoading,
+    business
+  } = props
+
+  const [, t] = useLanguage()
+  const [options, setOptions] = useState([])
+  const [{ configs }] = useConfig()
+
+  const googleMapsApiKey = configs?.google_maps_api_key?.value
+
+  const handleSubmit = () => {
+    setStep(3)
+    handleImport()
+  }
+
+  const handleSelectBusiness = (id) => {
+    const _business = businessList.find(item => item._id === id)
+    setBusiness(_business)
+  }
+
+  useEffect(() => {
+    const _options = businessList?.map(item => {
+      return {
+        value: item._id,
+        content: (
+          <Option>
+            {item?.logo_photos[0]
+              ? <img src={item.logo_photos[0]} alt='' />
+              : <Image />}
+            {item.name}
+          </Option>)
+      }
+    })
+    setOptions(_options)
+  }, [businessList])
+
+  return (
+    <Container>
+      <h2>{t('SELECT_YOUR_RESTAURANT_FROM_THIS_LIST', 'Select your restaurant from this list.')}</h2>
+      <SearchWrapper>
+        <label>{t('ADDRESS', 'Address')}</label>
+        <GoogleAutocompleteInput
+          name='address'
+          className='input-autocomplete'
+          apiKey={googleMapsApiKey}
+          placeholder={t('ADDRESS', 'Address')}
+          onChangeAddress={(e) => {
+            handleChangeAddress(e)
+          }}
+          defaultValue={orderingBusiness?.address ?? ''}
+          autoComplete='new-password'
+          countryCode={configs?.country_autocomplete?.value || '*'}
+        />
+      </SearchWrapper>
+      {isLoading && (
+        <SelectWrapper>
+          <label>
+            <Skeleton height={15} width={100} />
+          </label>
+          <Skeleton height={44} />
+        </SelectWrapper>
+      )}
+      {!isLoading && options?.length > 0 && (
+        <SelectWrapper>
+          <label>{t('SELECT_YOUR_RESTAURANT', 'Select your restaurant')}</label>
+          <Select
+            options={options}
+            className='select'
+            defaultValue={business?._id || ''}
+            placeholder={t('SELECT_BUSINESS', 'Select a Business')}
+            onChange={(value) => handleSelectBusiness(value)}
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+          />
+        </SelectWrapper>
+      )}
+      {!isLoading && options.length === 0 && (
+        <EmptyData>
+          {t('NO_RESULT', 'There are no results')}
+        </EmptyData>
+      )}
+      <ButtonWrapper>
+        <span onClick={() => onClose()}>{t('SKIP', 'Skip')}</span>
+        <Button
+          color='primary'
+          onClick={handleSubmit}
+          disabled={!business?._id}
+        >
+          {t('CONTINUE', 'Continue')}
+          <ArrowRight />
+        </Button>
+      </ButtonWrapper>
+    </Container>
+  )
+}

package/src/components/Stores/RestaurantSelectGuide/styles.js

@@ -0,0 +1,150 @@
+import styled from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin: 0;
+  }
+`
+
+export const SelectWrapper = styled.div`
+  margin-top: 30px;
+
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  > 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 {
+        max-height: 200px;
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+  img {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
+    margin-right: 10px;
+  }
+  svg {
+    font-size: 24px;
+    border-radius: 7px;
+    margin-right: 10px;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
+  button {
+    min-width: 300px;
+    border-radius: 8px;
+    height: 44px;
+    position: relative;
+    svg {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      font-size: 21px;
+    }
+  }
+`
+
+export const SearchWrapper = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 10px 15px;
+    outline: none;
+    ::placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &:-ms-input-placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+`
+
+export const EmptyData = styled.p`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  margin-top: 30px;
+`

package/src/components/Stores/index.js

@@ -1,3 +1,4 @@
+import { BusinessAdd } from './BusinessAdd'
 import { BusinessBrandListing } from './BusinessBrandListing'
 import { BusinessesListing } from './BusinessesListing'
 import { BusinessProductsListing } from './BusinessProductsListing'
@@ -99,8 +100,13 @@ import { PaymentOptionMethods } from './PaymentOptionMethods'
 import { BusinessPublishing } from './BusinessPublishing'
 import { ServiceDetail } from './ServiceDetail'
 import { ProductVideos } from './ProductVideos'
+import { ProductStartGuide } from './ProductStartGuide'
+import { ImportersButton } from './ImportersButton'
+import { RestaurantSelectGuide } from './RestaurantSelectGuide'
+import { ProductStep } from './ProductStep'
 
 export {
+  BusinessAdd,
   BusinessBrandListing,
   BusinessesListing,
   BusinessProductsListing,
@@ -201,5 +207,9 @@ export {
   PaymentOptionMethods,
   BusinessPublishing,
   ServiceDetail,
-  ProductVideos
+  ProductVideos,
+  ProductStartGuide,
+  ImportersButton,
+  RestaurantSelectGuide,
+  ProductStep
 }

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

@@ -13,6 +13,7 @@ import { sortInputFields, bytesConverter } from '../../../utils'
 import Skeleton from 'react-loading-skeleton'
 import BiImage from '@meronex/icons/bi/BiImage'
 import { XLg } from 'react-bootstrap-icons'
+import { OccupationSelector } from '../OccupationSelector'
 
 import {
   FormContainer,
@@ -42,7 +43,8 @@ const ProfessionalAddFormUI = (props) => {
     handlechangeImage,
     handleChangeSwtich,
     onClose,
-    isService
+    isService,
+    occupations
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
@@ -221,6 +223,13 @@ const ProfessionalAddFormUI = (props) => {
             </ExamineClick>
           </Image>
         </UserImage>
+        <InputWrapper>
+          <label>{t('SPECIALIST', 'Specialist')}</label>
+          <OccupationSelector
+            occupations={occupations}
+            handleChangeOccupation={id => handleChangeInput({ target: { name: 'occupation_id', value: id } })}
+          />
+        </InputWrapper>
         {!validationFields?.loading ? (
           <>
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
@@ -292,6 +301,7 @@ const ProfessionalAddFormUI = (props) => {
                       message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
                     }
                   })}
+                  autoComplete='new-password'
                 />
               </InputWrapper>
             )}

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

@@ -321,6 +321,7 @@ export const ProfessionalList = (props) => {
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             </WrapperPagination>
           )}

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

@@ -99,6 +99,7 @@ const ProfessionalListingUI = (props) => {
     <>
       <UsersListingContainer>
         <UsersListingHeader
+          isProfessionals
           title={headerTitle}
           searchValue={searchValue}
           onSearch={onSearch}
@@ -169,6 +170,7 @@ const ProfessionalListingUI = (props) => {
           onClose={() => setOpenUserAddForm(false)}
         >
           <ProfessionalAddForm
+            occupations={occupationsState.occupations}
             handleSuccessAdd={handleSuccessAddUser}
             onClose={() => setOpenUserAddForm(false)}
           />

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

@@ -0,0 +1,32 @@
+import React, { memo } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Schedule as ScheduleController } from '../../../Shared'
+import {
+  ScheduleWrapper,
+  ScheduleContentWrapper
+} from '../styles'
+
+function SchedulePropsAreEqual (prevProps, nextProps) {
+  return JSON.stringify(prevProps.scheduleList) === JSON.stringify(nextProps.scheduleList)
+}
+
+export const Schedule = memo((props) => {
+  const {
+    handleChangeScheduleState,
+    scheduleList
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <ScheduleWrapper>
+      <h1>{t('SCHEDULE', 'Schedule')}</h1>
+      <ScheduleContentWrapper>
+        <ScheduleController
+          scheduleList={scheduleList}
+          handleChangeScheduleState={val => handleChangeScheduleState(val)}
+        />
+      </ScheduleContentWrapper>
+    </ScheduleWrapper>
+  )
+}, SchedulePropsAreEqual)

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,10 +269,12 @@ export const UsersList = (props) => {
           {usersList?.users.length > 0 && (
             <WrapperPagination>
               <Pagination
+                defaultPageSize={paginationProps?.pageSize}
                 currentPage={paginationProps.currentPage}
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             </WrapperPagination>
           )}

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;
+  }
+`