ordering-ui-external 10.0.0 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Orders/Appointments/CalendarHeader.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { navigate } from 'react-big-calendar/lib/utils/constants'
+import { ChevronRight, ChevronLeft, Grid3x2 } from 'react-bootstrap-icons'
+import MdcViewWeekOutline from '@meronex/icons/mdc/MdcViewWeekOutline'
+import MdcViewWeek from '@meronex/icons/mdc/MdcViewWeek'
+import MdcViewAgendaOutline from '@meronex/icons/mdc/MdcViewAgendaOutline'
+import MdcViewDayOutline from '@meronex/icons/mdc/MdcViewDayOutline'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { IconButton } from '../../../styles'
+
+import {
+  CalendarHeaderContainer,
+  CalendarLabelContainer,
+  ViewButtonsWrapper
+} from './styles'
+
+export const CalendarHeader = (props) => {
+  const {
+    label,
+    view,
+    views,
+    onView,
+    onNavigate
+  } = props
+
+  const [, t] = useLanguage()
+
+  const viewsList = {
+    month: { title: t('MONTH', 'Month'), icon: <Grid3x2 /> },
+    week: { title: t('WEEK', 'Week'), icon: <MdcViewWeekOutline /> },
+    work_week: { title: t('WORK_WEEK', 'Work week'), icon: <MdcViewWeek /> },
+    day: { title: t('DAY', 'Day'), icon: <MdcViewDayOutline /> },
+    agenda: { title: t('AGENDA', 'Agenda'), icon: <MdcViewAgendaOutline /> }
+  }
+
+  return (
+    <CalendarHeaderContainer>
+      <CalendarLabelContainer>
+        <IconButton
+          color='black'
+          onClick={() => onNavigate(navigate.PREVIOUS)}
+        >
+          <ChevronLeft />
+        </IconButton>
+        <span className='label'>{label}</span>
+        <IconButton
+          color='black'
+          onClick={() => onNavigate(navigate.NEXT)}
+        >
+          <ChevronRight />
+        </IconButton>
+      </CalendarLabelContainer>
+      <ViewButtonsWrapper>
+        {views.map((name, i) => (
+          <OverlayTrigger
+            key={i}
+            placement='bottom'
+            overlay={
+              <Tooltip>{viewsList[name].title}</Tooltip>
+            }
+          >
+            <IconButton
+              color={view === name ? 'primary' : 'black'}
+              onClick={() => onView(name)}
+            >
+              {viewsList[name].icon}
+            </IconButton>
+          </OverlayTrigger>
+        ))}
+      </ViewButtonsWrapper>
+    </CalendarHeaderContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/Appointments/EventComponent.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useUtils, useConfig } from 'ordering-components-external'
+import { PersonFill } from 'react-bootstrap-icons'
+import {
+  EventContainer,
+  EventProfessionalPhoto
+} from './styles'
+
+export const EventComponent = (props) => {
+  const {
+    event
+  } = props
+
+  const [{ optimizeImage, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const getTime = (time) => {
+    return parseDate(time, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })
+  }
+
+  return (
+    <EventContainer>
+      <EventProfessionalPhoto>
+        {event?.professional?.photo ? (
+          <img src={optimizeImage(event?.professional?.photo, 'h_40,c_limit')} alt='' />
+        ) : (
+          <PersonFill />
+        )}
+      </EventProfessionalPhoto>
+      <div className='info'>
+        <p className='name'>{event?.professional?.name} {event?.professional?.lastname}</p>
+        <p className='date'>
+          {getTime(event.start)} - {getTime(event.end)}
+        </p>
+      </div>
+    </EventContainer>
+  )
+}

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

@@ -0,0 +1,145 @@
+import React, { useState } from 'react'
+import { useLanguage, useConfig, useUtils, Appointments as AppointmentsController } from 'ordering-components-external'
+import { List as MenuIcon, ChevronRight } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { BusinessSelectHeader } from '../../Stores/BusinessSelectHeader'
+import moment from 'moment'
+import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'
+import 'react-big-calendar/lib/css/react-big-calendar.css'
+import { CalendarHeader } from './CalendarHeader'
+import { EventComponent } from './EventComponent'
+import { OrderDetails } from '../OrderDetails'
+import { SpinnerLoader } from '../../Shared'
+
+import {
+  Container,
+  SpinnerLoaderWrapper,
+  Header,
+  HeaderTitleContainer,
+  BusinessName,
+  BusinessSelectorWrapper,
+  CalendarWrapper,
+  WarningText
+} from './styles'
+
+const localizer = momentLocalizer(moment)
+
+const AppointmentsUI = (props) => {
+  const {
+    selectedBusiness,
+    setSelectedBusiness,
+    businessCalendarEvents
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parseDate }] = useUtils()
+
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [showSelectHeader, setShowSelectHeader] = useState(false)
+  const [openDetails, setOpenDetails] = useState(false)
+  const [selectedAppointment, setSelectedAppointment] = useState(null)
+  const isEnabledAppointmentsFeature = configs?.appointments?.value
+
+  const changeBusinessState = (business) => {
+    setShowSelectHeader(false)
+    setSelectedBusiness(business)
+  }
+
+  const handleOpenDetails = (event) => {
+    setOpenDetails(true)
+    setSelectedAppointment(event)
+  }
+
+  return (
+    <Container>
+      {businessCalendarEvents.loading && (
+        <SpinnerLoaderWrapper>
+          <SpinnerLoader />
+        </SpinnerLoaderWrapper>
+      )}
+      <Header>
+        <HeaderTitleContainer>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <div>
+            <h1>{t('APPOINTMENT', 'Appointment')}</h1>
+            {isEnabledAppointmentsFeature && (
+              <BusinessSelectorWrapper>
+                <BusinessName onClick={() => setShowSelectHeader(!showSelectHeader)}>
+                  {selectedBusiness?.name || t('SELECT_BUSINESS', 'Select a business')}
+                </BusinessName>
+                {showSelectHeader && (
+                  <BusinessSelectHeader
+                    close={() => setShowSelectHeader(false)}
+                    isOpen={showSelectHeader}
+                    changeBusinessState={changeBusinessState}
+                  />
+                )}
+                <ChevronRight />
+                <span className='calendar'>{t('CALENDAR', 'Calendar')}</span>
+              </BusinessSelectorWrapper>
+            )}
+          </div>
+        </HeaderTitleContainer>
+      </Header>
+
+      {isEnabledAppointmentsFeature ? (
+        <CalendarWrapper>
+          <Calendar
+            localizer={localizer}
+            formats={{ timeGutterFormat: configs?.format_time?.value === '24' ? 'HH:mm' : 'HH:mm A' }}
+            defaultView={Views.MONTH}
+            events={businessCalendarEvents.result}
+            startAccessor={event => {
+              return moment(parseDate(event.start, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })).toDate()
+            }}
+            endAccessor={event => {
+              return moment(parseDate(event.end, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })).toDate()
+            }}
+            views={['month', 'week', 'day']}
+            showMultiDayTimes={false}
+            messages={{
+              showMore: total => `+${total} ${t('MORE', 'More')}`
+            }}
+            onSelectEvent={event => handleOpenDetails(event)}
+            components={{
+              toolbar: CalendarHeader,
+              event: EventComponent
+            }}
+          />
+        </CalendarWrapper>
+      ) : (
+        <WarningText>{t('APPOINTMENTS_FEATURE_NOT_ENABLED', 'The appointments feature is not enabled.')}</WarningText>
+      )}
+
+      {openDetails && (
+        <OrderDetails
+          isServiceOrder
+          open={openDetails}
+          orderId={selectedAppointment?.order_id}
+          onClose={() => {
+            setOpenDetails(false)
+            setSelectedAppointment(null)
+          }}
+        />
+      )}
+    </Container>
+  )
+}
+
+export const Appointments = (props) => {
+  const appointmentsProps = {
+    ...props,
+    UIComponent: AppointmentsUI
+  }
+  return <AppointmentsController {...appointmentsProps} />
+}

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

@@ -0,0 +1,196 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`
+export const SpinnerLoaderWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+  > div {
+    height: 100%;
+  }
+`
+export const Header = styled.div`
+  display: flex;
+`
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    margin: 0px;
+    line-height: 30px;
+    font-weight: 700;
+  }
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+export const BusinessName = styled.span`
+  cursor: pointer;
+`
+export const BusinessSelectorWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  margin: 3px 0;
+
+  > span {
+    font-size: 14px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.calendar {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+
+  > svg {
+    margin: 0 10px;
+  }
+`
+export const CalendarWrapper = styled.div`
+  flex: 1;
+  padding-top: 20px;
+  overflow: auto;
+
+  .rbc-calendar {
+    min-width: 728px;
+    color: ${props => props.theme.colors.lightGray};
+
+    .rbc-header {
+      padding: 7px 3px;
+      span {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${props => props.theme.colors.headingColor};
+      }
+    }
+
+    .rbc-time-view {
+      border-left: none;
+      border-right: none;
+      .rbc-allday-cell {
+        display: none;
+      }
+      .rbc-time-content {
+        border-width: 1px;
+      }
+    }
+    .rbc-event {
+      background-color: ${props => props.theme.colors.backgroundPage};
+      border: none;
+      padding: 0;
+      color: ${props => props.theme.colors.headingColor};
+    }
+    .rbc-event-label {
+      display: none;
+    }
+    .rbc-timeslot-group {
+      min-height: 60px;
+    }
+  }
+`
+export const CalendarHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+`
+export const CalendarLabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  span.label {
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0 3px;
+    color: ${props => props.theme.colors.headingColor};
+  }
+  > button {
+    > svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`
+export const ViewButtonsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  button {
+    margin: 0 3px;
+  }
+`
+export const EventContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid ${props => props.theme.colors.gray};
+  padding: 2px 5px;
+  border-radius: 8px;
+  height: 100%;
+
+  > div.info {
+    width: calc(100% - 42px);
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    p.name {
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 18px;
+      margin: 0;
+    }
+    p.date {
+      font-size: 10px;
+      line-height: 15px;
+      color: ${props => props.theme.colors.lightGray};
+      margin: 0;
+    }
+  }
+`
+export const EventProfessionalPhoto = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+  svg {
+    width: 85%;
+    height: 85%;
+  }
+`
+export const WarningText = styled.p`
+  margin-top: 30px;
+  color: ${props => props.theme.colors.danger};
+`

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

@@ -22,6 +22,7 @@ export const BusinessesSelector = (props) => {
 
   const [, t] = useLanguage()
   const [businessTypes, setBusinessTypes] = useState([])
+  const [searchValue, setSearchValue] = useState('')
 
   const Placeholder = <PlaceholderTitle>{t('SELECT_BUSINESS', 'Select business')}</PlaceholderTitle>
   const businessesLoading = [{ value: 'default', content: <Option>{t('BUSINESSES_LOADING', 'Businesses loading')}...</Option> }]
@@ -29,29 +30,31 @@ export const BusinessesSelector = (props) => {
   useEffect(() => {
     const _businessesOptionList = []
     if (!businessesList.loading) {
-      const _businessesOption = businessesList.businesses.map((business) => {
-        return {
-          value: business.id,
-          content: (
-            <Option>
-              <WrapperBusinessImage>
-                {business.logo && <BusinessImage bgimage={business.logo} />}
-              </WrapperBusinessImage>
-              <OptionContent>
-                <OptionName>
-                  {business.name}
-                </OptionName>
-                <OptionCategory>
-                  {business?.alcohol && t('ALCOHOL', 'Alcohol')}
-                  {business?.food && t('FOOD', 'Food')}
-                  {business?.groceries && t('GROCERIES', 'Groceries')}
-                  {business?.laundry && t('LAUNDRY', 'Laundry')}
-                </OptionCategory>
-              </OptionContent>
-            </Option>
-          )
-        }
-      })
+      const _businessesOption = businessesList.businesses
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((business) => {
+          return {
+            value: business.id,
+            content: (
+              <Option>
+                <WrapperBusinessImage>
+                  {business.logo && <BusinessImage bgimage={business.logo} />}
+                </WrapperBusinessImage>
+                <OptionContent>
+                  <OptionName>
+                    {business.name}
+                  </OptionName>
+                  <OptionCategory>
+                    {business?.alcohol && t('ALCOHOL', 'Alcohol')}
+                    {business?.food && t('FOOD', 'Food')}
+                    {business?.groceries && t('GROCERIES', 'Groceries')}
+                    {business?.laundry && t('LAUNDRY', 'Laundry')}
+                  </OptionCategory>
+                </OptionContent>
+              </Option>
+            )
+          }
+        })
 
       for (const option of _businessesOption) {
         _businessesOptionList.push(option)
@@ -59,7 +62,7 @@ export const BusinessesSelector = (props) => {
     }
 
     setBusinessTypes(_businessesOptionList)
-  }, [businessesList])
+  }, [businessesList, searchValue])
 
   return (
     <>
@@ -72,6 +75,11 @@ export const BusinessesSelector = (props) => {
           optionInnerMaxHeight='150px'
           optionBottomBorder
           onChange={(business) => handleChangeBusinesses(business)}
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <MultiSelect
@@ -80,6 +88,11 @@ export const BusinessesSelector = (props) => {
           optionInnerMargin='10px'
           optionInnerMaxHeight='150px'
           optionBottomBorder
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       )}
     </>