ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/DriversDashboard/styles.js

@@ -11,7 +11,7 @@ export const DriversDashboardContainer = styled.div`
 
   @media (min-width: 1024px) {
     flex-direction: row;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 122px);
   }
 `
 

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

@@ -13,6 +13,8 @@ export const DriversGroupTypeSelector = (props) => {
 
   const [, t] = useLanguage()
 
+  const [searchValue, setSearchValue] = useState('')
+
   const placeholder = (
     <PlaceholderTitle>
       {t('DRIVER_GROUP', 'Driver group')}
@@ -24,21 +26,23 @@ export const DriversGroupTypeSelector = (props) => {
   useEffect(() => {
     const _groupList = []
     if (!driverGroupList.loading) {
-      const _groupsOption = driverGroupList.groups.map((group) => {
-        return {
-          value: group.id,
-          content: (
-            <Option>{group.id}. {group.name}</Option>
-          )
-        }
-      })
+      const _groupsOption = driverGroupList.groups
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((group) => {
+          return {
+            value: group.id,
+            content: (
+              <Option>{group.id}. {group.name}</Option>
+            )
+          }
+        })
 
       for (const option of _groupsOption) {
         _groupList.push(option)
       }
     }
     setGroupTypes(_groupList)
-  }, [driverGroupList])
+  }, [driverGroupList, searchValue])
 
   return (
     <>
@@ -48,12 +52,22 @@ export const DriversGroupTypeSelector = (props) => {
           defaultValue={filterValues.groupTypes}
           options={groupTypes}
           onChange={(groupType) => handleChangeGroup(groupType)}
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <MultiSelect
           defaultValue='default'
           options={groupTypesLoading}
           optionBottomBorder
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       )}
     </>

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

@@ -4,15 +4,17 @@ import Skeleton from 'react-loading-skeleton'
 import BsDot from '@meronex/icons/bs/BsDot'
 import { useTheme } from 'styled-components'
 import { getStarWidth } from '../../../../../../utils'
+import { LinkButton } from '../../../styles'
+
 import {
   DriversListContainer,
   DriverCard,
   WrapperImage,
   Image,
   DriverInfo,
-  WrapperStar,
-  AssignedOrdersCount
+  WrapperStar
 } from './styles'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
 
 export const DriversList = (props) => {
   const {
@@ -22,17 +24,21 @@ export const DriversList = (props) => {
     offlineDrivers,
     selectedDriver,
     handleChangeDriver,
-    handleOpenDriverOrders
+    handleOpenDriverOrders,
+    hidePhoto
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
+  const { width } = useWindowSize()
 
   const handleClickDriver = (e, driver) => {
     const isInvalid = e.target.closest('.driver-orders')
     if (isInvalid) return
     handleChangeDriver(driver)
+    const element = document.getElementById('driverDashboard')
+    if (width < 993 && element) element.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
   const onOpenDriverOrdersDetail = (driver) => {
@@ -70,20 +76,22 @@ export const DriversList = (props) => {
               onClick={(e) => handleClickDriver(e, driver)}
               active={selectedDriver?.id === driver.id}
             >
-              <WrapperImage>
-                <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
-              </WrapperImage>
+              {!hidePhoto && (
+                <WrapperImage>
+                  <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
+                </WrapperImage>
+              )}
               <DriverInfo>
                 <div>
                   <p>{driver.name} {driver.lastname}</p>
                   <BsDot />
-                  <AssignedOrdersCount
+                  <LinkButton
                     className='driver-orders'
                     disabled={!driver?.assigned_orders_count || driver?.assigned_orders_count === 0}
                     onClick={() => onOpenDriverOrdersDetail(driver)}
                   >
                     {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
-                  </AssignedOrdersCount>
+                  </LinkButton>
                 </div>
                 {driver?.qualification && (
                   <WrapperStar width={getStarWidth(driver?.qualification)} />

package/src/themes/callcenterOriginal/src/components/Orders/DriversList/styles.js

@@ -2,10 +2,11 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const DriversListContainer = styled.div`
-  padding: 15px 10px;
+  padding: 15px 0px;
 `
 
 export const DriverCard = styled.div`
+  min-height: 66px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -115,16 +116,6 @@ export const DriverInfo = styled.div`
   }
 `
 
-export const AssignedOrdersCount = styled.span`
-  font-size: 14px;
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-
-  ${({ disabled }) => disabled && css`
-    pointer-events: none;
-    opacity: 0.5;
-  `}
-`
 export const Timestatus = styled.div`
   width: 4px;
   height: 42px;

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

@@ -9,6 +9,7 @@ import { List as MenuIcon } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../../../../contexts/InfoShareContext'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
+import { WebsocketStatus } from '../WebsocketStatus'
 
 import {
   DriversHeader,
@@ -22,12 +23,11 @@ const DriversManagerUI = (props) => {
     onDriverRedirect,
     handleChangeSearch,
     searchValue,
-    driversIsOnline,
-    driversList
+    driversIsOnline
   } = props
 
-  const drivers = driversList?.drivers
-  const loading = driversList?.loading
+  const { drivers, loading } = props.driversList
+
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [configState] = useConfig()
@@ -74,7 +74,7 @@ const DriversManagerUI = (props) => {
 
   return (
     <>
-      <DriversContainer>
+      <DriversContainer id='driverDashboard'>
         <DriversHeader>
           <HeaderTitleContainer>
             {isCollapse && (
@@ -87,6 +87,7 @@ const DriversManagerUI = (props) => {
             )}
             <h1>{t('DRIVERS_DASHBOARD', 'Drivers dashboard')}</h1>
           </HeaderTitleContainer>
+          <WebsocketStatus />
           {!googleMapsApiKey && (
             <GoogleMapsApiKeySettingButton />
           )}

package/src/themes/callcenterOriginal/src/components/Orders/DriversOnlineOfflineFilter/styles.js

@@ -7,10 +7,11 @@ export const Container = styled.div`
 `
 
 export const Tab = styled.div`
-  padding: 10px 15px;
+  padding: 10px 0px;
   cursor: pointer;
   color: ${props => props.theme.colors?.headingColor};
   white-space: nowrap;
+  font-size: 14px;
 
   ${({ active }) => active && css`
     border-bottom: 3px solid;
@@ -20,4 +21,10 @@ export const Tab = styled.div`
   ${({ active }) => !active && css`
     color: #909BA9;
   `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
 `

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

@@ -0,0 +1,178 @@
+import React from 'react'
+import { useLanguage, GiftCardsList as GiftCardsListController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles'
+import { Pagination, SearchBar } from '../../Shared'
+
+import {
+  Container,
+  HeaderContainer,
+  HeaderTitle,
+  TabsWrapper,
+  Tab,
+  GiftCardsTableWrapper,
+  GiftCardRow,
+  UserInfoContainer,
+  PaginationWarpper,
+  ActionsWrapper
+} from './styles'
+
+const GiftCardsListingUI = (props) => {
+  const {
+    giftCards,
+    paginationProps,
+    activeStatus,
+    setActiveStatus,
+    getGiftCards,
+    searchValue,
+    onSearch
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const handleChangePage = (page) => {
+    getGiftCards(page, paginationProps.pageSize)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    getGiftCards(expectedPage, pageSize)
+  }
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <HeaderTitle>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{t('GIFT_CARD_MANAGER', 'Gift card manager')}</h1>
+        </HeaderTitle>
+        <ActionsWrapper>
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            onSearch={onSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+          />
+        </ActionsWrapper>
+      </HeaderContainer>
+      <TabsWrapper>
+        <Tab
+          active={activeStatus === 'pending'}
+          onClick={() => setActiveStatus('pending')}
+        >
+          {t('ORDER_PENDING', 'Pending')}
+        </Tab>
+        <Tab
+          active={activeStatus === 'activated'}
+          onClick={() => setActiveStatus('activated')}
+        >
+          {t('REDEEMED', 'Redeemed')}
+        </Tab>
+      </TabsWrapper>
+      <GiftCardsTableWrapper>
+        <table>
+          <thead>
+            <tr>
+              <th>{t('ID', 'ID')}</th>
+              <th>{t('PURCHASED_BY', 'Purchased by')}</th>
+              <th>{t('REDEEMED_BY', 'Redeemed by')}</th>
+              <th>{t('PURCHASED_DATE', 'Purchased date')}</th>
+              <th>{t('REDEEMED_DATE', 'Redeemed date')}</th>
+            </tr>
+          </thead>
+          {giftCards.loading ? (
+            [...Array(10).keys()].map(i => (
+              <GiftCardRow key={i}>
+                <tr>
+                  <td><Skeleton width={20} /></td>
+                  <td>
+                    <UserInfoContainer>
+                      <Skeleton width={38} height={38} />
+                      <div>
+                        <p className='name'><Skeleton width={100} /></p>
+                        <p className='phone'><Skeleton width={80} /></p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td>
+                    <UserInfoContainer>
+                      <Skeleton width={38} height={38} />
+                      <div>
+                        <p className='name'><Skeleton width={100} /></p>
+                        <p className='phone'><Skeleton width={80} /></p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td><Skeleton width={100} /></td>
+                  <td><Skeleton width={100} /></td>
+                </tr>
+              </GiftCardRow>
+            ))
+          ) : (
+            giftCards.list.map(card => (
+              <GiftCardRow key={card.id}>
+                <tr>
+                  <td>{card.id}</td>
+                  <td>
+                    <UserInfoContainer>
+                      <img src={card.author?.photo} alt='' />
+                      <div>
+                        <p className='name'>{card.author?.name} {card.author?.lastname}</p>
+                        <p className='phone'>{card.author?.cellphone}</p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td>
+                    {card.activater && (
+                      <UserInfoContainer>
+                        <img src={card.activater?.photo} alt='' />
+                        <div>
+                          <p className='name'>{card.activater?.name} {card.activater?.lastname}</p>
+                          <p className='phone'>{card.activater?.cellphone}</p>
+                        </div>
+                      </UserInfoContainer>
+                    )}
+                  </td>
+                  <td>{card.created_at}</td>
+                  <td>{card.activated_at}</td>
+                </tr>
+              </GiftCardRow>
+            ))
+          )}
+        </table>
+      </GiftCardsTableWrapper>
+      <PaginationWarpper>
+        <Pagination
+          currentPage={paginationProps.currentPage}
+          totalPages={paginationProps.totalPages}
+          handleChangePage={handleChangePage}
+          defaultPageSize={paginationProps.pageSize}
+          handleChangePageSize={handleChangePageSize}
+        />
+      </PaginationWarpper>
+    </Container>
+  )
+}
+
+export const GiftCardsListing = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: GiftCardsListingUI,
+    isSearchById: true,
+    isSearchByAuthorName: true,
+    isSearchByAuthorEmail: true,
+    isSearchByAuthorPhone: true
+  }
+  return <GiftCardsListController {...giftCardsProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/GiftCardsListing/styles.js

@@ -0,0 +1,116 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  overflow: hidden;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`
+export const HeaderTitle = styled.div`
+  display: flex;
+  align-items: center;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const ActionsWrapper = styled.div`
+  margin-top: 15px;
+  @media (min-width: 768px) {
+    margin-top: 0;
+  }
+`
+export const TabsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin: 20px 0 10px 0;
+`
+export const Tab = styled.div`
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`
+export const GiftCardsTableWrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    td, th {
+      padding: 10px 0;
+      font-size: 14px;
+    }
+    thead {
+      border-bottom: 1px solid ${props => props.theme.colors.disabled};
+    }
+  }
+`
+export const GiftCardRow = styled.tbody`
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+export const UserInfoContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  div {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 9px;
+    ` : css`
+      margin-left: 9px;
+    `}
+    p.name {
+      margin: 0;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 21px;
+    }
+    p.phone {
+      margin: 0;
+      font-size: 10px;
+      line-height: 15px;
+      color: ${props => props.theme.colors.lightGray};
+    }
+  }
+`
+export const PaginationWarpper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 20px 0;
+`

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { GoogleGpsButton as GpsButton } from 'ordering-components-external'
+import { GpsButtonStyle } from './styles'
+
+const GoogleGpsButtonUI = (props) => {
+  const {
+    handleGPS,
+    isGoogleButton,
+    googleReady,
+    isLoading,
+    IconButton,
+    IconLoadingButton
+  } = props
+
+  return (
+    <GpsButtonStyle
+      className={props.className || ''}
+      type='button'
+      disabled={(isGoogleButton && !googleReady) || isLoading}
+      onClick={handleGPS}
+    >
+      {isLoading ? (
+        IconLoadingButton ? <IconLoadingButton /> : '...'
+      ) : (
+        IconButton ? <IconButton /> : 'GPS'
+      )}
+    </GpsButtonStyle>
+  )
+}
+
+export const GoogleGpsButton = (props) => {
+  const gpsButtonProps = {
+    ...props,
+    UIComponent: GoogleGpsButtonUI
+  }
+  return (
+    <GpsButton {...gpsButtonProps} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/GoogleGpsButton/styles.js

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components'
+
+export const GpsButtonStyle = styled.button`
+  position: absolute;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  padding: 0;
+  width: 43px;
+  height: 43px;
+  line-height: 34px;
+  text-align: center;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${props => props.theme.colors.primary};
+  outline: none;
+  cursor: pointer;
+  ${props => props.theme?.rtl && css`
+    left: 0;
+    right: initial;
+  `}
+  svg {
+    color: ${props => props.theme.colors.primary};
+    font-size: 25px;
+  }
+`

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

@@ -9,11 +9,13 @@ import {
   Reason,
   SkeletonHitory
 } from './styles'
+import { Button } from '../../../styles'
 
 const LogisticsUI = (props) => {
   const {
     logisticList,
-    parseLog
+    parseLog,
+    getLogistics
   } = props
 
   const [, t] = useLanguage()
@@ -35,6 +37,13 @@ const LogisticsUI = (props) => {
         </>
       ) : (
         <WraaperLogs>
+          <Button
+            rectangle
+            color='primary'
+            onClick={() => getLogistics()}
+          >
+            {t('RELOAD', 'Reload')}
+          </Button>
           {logisticList.logs.map((log) => (
             <BubbleConsole key={log.id}>
               <div dangerouslySetInnerHTML={{

package/src/themes/callcenterOriginal/src/components/Orders/Logistics/styles.js

@@ -7,6 +7,12 @@ export const WraaperLogs = styled.div`
   justify-content: center;
   font-size: 0.8em;
   border-radius: 97px;
+
+  > button {
+    margin-bottom: 15px;
+    font-size: 14px;
+    padding: 0 25px;
+  }
 `
 export const BubbleConsole = styled.div`
   border-radius: 5px;