ordering-ui-admin-external 1.9.0 → 1.11.0

package/src/components/Marketing/PageBanner/index.js

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, AdBannersList as AdBannersListController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { SideBar, Alert, SearchBar } from '../../Shared'
+import { Button, Switch, IconButton } from '../../../styles'
+import { ChevronRight, InfoCircle } from 'react-bootstrap-icons'
+import { BannerDetails } from '../BannerDetails'
+import {
+  Container,
+  HeaderContainer,
+  BannersHeader,
+  BannersListWrapper,
+  BannerItemWrapper,
+  BannerTitleConatiner,
+  BannerActionsWrapper,
+  EnableWrapper,
+  AddNewBanner,
+  InfoWrapper,
+  InfoContent,
+  SearchBarWrapper
+} from './styles'
+
+const PageBannersUI = (props) => {
+  const {
+    title,
+    bannerInfo,
+    bannersListState,
+    setMoveDistance,
+    sitesState,
+    actionState,
+    handleSuccessUpdate,
+    handleUpdateBanner,
+    handleSuccessAdd,
+    defaultPosition,
+    handleSuccessDelete,
+    aspectRatio,
+    isSearhShow
+  } = props
+  const [, t] = useLanguage()
+  const [openItemsDetail, setOpenItemsDetail] = useState(false)
+  const [selectedBanner, setSelectedBanner] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [], handleOnAccept: null })
+  const [searchValue, setSearchValue] = useState('')
+  const [bannerMoveDistance, setBannerMoveDistance] = useState(0)
+
+  const handleOpenBannerItemsDetail = (e, banner) => {
+    const isInvalid = e.target.closest('.banner-enabled')
+    if (isInvalid) return
+    setSelectedBanner(banner)
+    setOpenItemsDetail(true)
+    setMoveDistance(500)
+  }
+
+  const handleCloseDetail = () => {
+    setMoveDistance(0)
+    setOpenItemsDetail(false)
+    setSelectedBanner(null)
+  }
+
+  useEffect(() => {
+    if (!actionState?.error || actionState.loading) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState])
+
+  useEffect(() => {
+    setSearchValue('')
+    handleCloseDetail()
+  }, [defaultPosition])
+
+  return (
+    <>
+      <Container>
+        <HeaderContainer>
+          <div>
+            <h1>{title}</h1>
+            <InfoWrapper>
+              <IconButton
+                color='primary'
+              >
+                <InfoCircle />
+              </IconButton>
+              <InfoContent>{bannerInfo}</InfoContent>
+            </InfoWrapper>
+          </div>
+
+          <Button
+            color='lightPrimary'
+            borderRadius='8px'
+            onClick={e => handleOpenBannerItemsDetail(e, {})}
+          >
+            {t('ADD_BANNER', 'Add banner')}
+          </Button>
+        </HeaderContainer>
+
+        {isSearhShow && (
+          <SearchBarWrapper>
+            <SearchBar
+              search={searchValue}
+              isCustomLayout
+              onSearch={(value) => setSearchValue(value)}
+              placeholder={t('SEARCH', 'Search')}
+            />
+          </SearchBarWrapper>
+        )}
+
+        <BannersHeader>
+          {t('BANNERS', 'Banners')}
+        </BannersHeader>
+        <BannersListWrapper>
+          {bannersListState.loading ? (
+            [...Array(10).keys()].map(i => (
+              <BannerItemWrapper key={i}>
+                <BannerTitleConatiner>
+                  <Skeleton width={100} />
+                </BannerTitleConatiner>
+                <BannerActionsWrapper>
+                  <EnableWrapper>
+                    <Skeleton width={100} />
+                  </EnableWrapper>
+                  <Skeleton width={20} />
+                </BannerActionsWrapper>
+              </BannerItemWrapper>
+            ))
+          ) : (
+            bannersListState.banners.filter(item => item.name.toUpperCase().includes(searchValue.toUpperCase())).map(banner => (
+              <BannerItemWrapper
+                key={banner.id}
+                active={selectedBanner?.id === banner.id}
+                onClick={e => handleOpenBannerItemsDetail(e, banner)}
+              >
+                <BannerTitleConatiner>
+                  {banner?.name}
+                </BannerTitleConatiner>
+                <BannerActionsWrapper>
+                  <EnableWrapper className='banner-enabled'>
+                    <span>{t('ENABLE', 'Enable')}</span>
+                    <Switch
+                      defaultChecked={banner.enabled}
+                      onChange={enabled => handleUpdateBanner({ enabled: enabled }, banner.id)}
+                    />
+                  </EnableWrapper>
+                  <ChevronRight />
+                </BannerActionsWrapper>
+              </BannerItemWrapper>
+            ))
+          )}
+        </BannersListWrapper>
+        {!bannersListState.loading && (
+          <AddNewBanner
+            onClick={e => handleOpenBannerItemsDetail(e, {})}
+          >
+            {t('ADD_BANNER', 'Add banner')}
+          </AddNewBanner>
+        )}
+      </Container>
+
+      {openItemsDetail && (
+        <SideBar
+          isBorderShow
+          open={openItemsDetail}
+          onClose={() => {
+            handleCloseDetail()
+            setBannerMoveDistance(0)
+          }}
+          moveDistance={bannerMoveDistance}
+          defaultSideBarWidth={500 + bannerMoveDistance}
+        >
+          <BannerDetails
+            banner={selectedBanner}
+            sitesState={sitesState}
+            handleSuccessUpdate={handleSuccessUpdate}
+            handleSuccessAdd={handleSuccessAdd}
+            handleSuccessDelete={handleSuccessDelete}
+            onClose={() => handleCloseDetail()}
+            defaultPosition={defaultPosition}
+            aspectRatio={aspectRatio}
+            setBannerMoveDistance={setBannerMoveDistance}
+          />
+        </SideBar>
+      )}
+
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => alertState?.handleOnAccept ? alertState.handleOnAccept() : setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const PageBanners = (props) => {
+  const bannersProps = {
+    ...props,
+    UIComponent: PageBannersUI
+  }
+  return <AdBannersListController {...bannersProps} />
+}

package/src/components/Marketing/PageBanner/styles.js

@@ -0,0 +1,167 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 40px;
+  ` : css`
+    margin-right: 40px;
+  `}
+
+  > div {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    h1 {
+      font-size: 20px;
+      font-weight: 700;
+      margin: 0;
+      flex: 1;
+    }
+  }
+
+  button {
+    height: 44px;
+  }
+`
+export const BannersHeader = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors.disabled};
+  padding-bottom: 9px;
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 33px;
+`
+export const BannersListWrapper = styled.div`
+`
+export const BannerItemWrapper = styled.div`
+  cursor: pointer;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 15px 0;
+  display: flex;
+  justify-content: space-between;
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  ${({ active }) => active && css`
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+    background-color: ${props => props.theme.colors.lightPrimary};
+  `}
+`
+export const BannerTitleConatiner = styled.div`
+  font-size: 14px;
+`
+export const BannerActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+    padding-right: 24px;
+  ` : css`
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+    padding-left: 24px;
+  `}
+`
+export const EnableWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  > span {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+  ${props => props.theme?.rtl ? css`
+    margin-left: 50px;
+  ` : css`
+    margin-right: 50px;
+  `}
+`
+export const AddNewBanner = styled.div`
+  width: fit-content;
+  cursor: pointer;
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 14px;
+  margin-top: 15px;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+export const InfoWrapper = styled.div`
+  ${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;
+  `}
+  span {
+    display: block;
+    user-select: none;
+    color: ${props => props.theme.colors.primary};
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (min-width: 576px) {
+    min-width: 250px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin-top: 33px;
+  margin-bottom: 10px;
+`

package/src/components/Marketing/index.js

@@ -26,6 +26,7 @@ import { CampaignWhatsapp } from './CampaignWhatsapp'
 import { CampaignNotification } from './CampaignNotification'
 import { CampaignPopup } from './CampaignPopup'
 import { CampaignWebHook } from './CampaignWebHook'
+import { AdBannersListing } from './AdBannersListing'
 
 export {
   EnterprisePromotionListing,
@@ -55,5 +56,6 @@ export {
   CampaignWhatsapp,
   CampaignNotification,
   CampaignPopup,
-  CampaignWebHook
+  CampaignWebHook,
+  AdBannersListing
 }

package/src/components/Messages/MessagesListing/index.js

@@ -62,7 +62,7 @@ const MessagesListingUI = (props) => {
 
   return (
     <>
-      <MessagesListingContainer>
+      <MessagesListingContainer id='deliveryDashboard'>
         <OrdersContentHeader
           isDisableControl
           title={t('MESSAGES', 'Messages')}

package/src/components/MyProducts/OrderingWebsite/styles.js

@@ -184,7 +184,8 @@ export const ImageFormGroup = styled.div`
 `
 
 export const LogoImage = styled.div`
-  width: 450px;
+  max-width: 450px;
+  width: 100%;
   height: 100px;
   position: relative;
   border-radius: 8px;
@@ -208,11 +209,11 @@ export const LogoImage = styled.div`
 
 export const BackgroundImage = styled(LogoImage)`
   height: 213px;
-  width: 320px;
+  max-width: 320px;
 
   @media (min-width: 768px) {
     height: 427px;
-    width: 640px;
+    max-width: 640px;
   }
 `
 

package/src/components/OrderingProducts/OrderingProductsListing/index.js

@@ -168,6 +168,7 @@ const OrderingProductsUI = (props) => {
                 totalPages={paginationProps?.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             )}
           </PagesBottomContainer>

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

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useUtils, useConfig } from 'ordering-components-admin-external'
-import moment from 'moment'
 import { PersonFill } from 'react-bootstrap-icons'
 import {
   EventContainer,
@@ -12,12 +11,11 @@ export const EventComponent = (props) => {
     event
   } = props
 
-  const [{ optimizeImage }] = useUtils()
+  const [{ optimizeImage, parseDate }] = useUtils()
   const [{ configs }] = useConfig()
-  const is24Format = configs?.format_time?.value === '24'
 
-  const getTime = (date) => {
-    return is24Format ? moment(date).format('HH:mm') : moment(date).format('HH:mm A')
+  const getTime = (time) => {
+    return parseDate(time, { outputFormat: (configs?.format_time?.value === '12') ? 'hh:mm a' : 'HH:mm' })
   }
 
   return (

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage, useConfig, Appointments as AppointmentsController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, useUtils, Appointments as AppointmentsController } from 'ordering-components-admin-external'
 import { List as MenuIcon, ChevronRight } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
@@ -20,7 +20,8 @@ import {
   HeaderTitleContainer,
   BusinessName,
   BusinessSelectorWrapper,
-  CalendarWrapper
+  CalendarWrapper,
+  WarningText
 } from './styles'
 
 const localizer = momentLocalizer(moment)
@@ -34,10 +35,13 @@ const AppointmentsUI = (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)
@@ -68,48 +72,54 @@ const AppointmentsUI = (props) => {
           )}
           <div>
             <h1>{t('APPOINTMENT', 'Appointment')}</h1>
-            <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>
+            {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>
 
-      <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(event.start, 'YYYY-MM-DD HH:mm:ss').toDate()
-          }}
-          endAccessor={event => {
-            return moment(event.end, '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>
+      {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

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

@@ -190,3 +190,7 @@ export const EventProfessionalPhoto = styled.div`
     height: 85%;
   }
 `
+export const WarningText = styled.p`
+  margin-top: 30px;
+  color: ${props => props.theme.colors.danger};
+`

package/src/components/Orders/DeliveriesManager/index.js

@@ -69,7 +69,7 @@ const DeliveriesManagerUI = (props) => {
 
   return (
     <>
-      <DeliveriesContainer>
+      <DeliveriesContainer id='deliveryDashboard'>
         <OrdersContentHeader
           isDisableControl
           title={t('DELIVERY_DASHBOARD', 'Delivery dashboard')}

package/src/components/Orders/DeliveryDashboard/index.js

@@ -58,6 +58,7 @@ export const DeliveryDashboard = (props) => {
             selectedOrderCard={interActionMapOrder}
             handleOrderCardClick={handleLocation}
             handleUpdateDriverLocation={handleUpdateDriverLocation}
+            isDelivery
           />
         </WrapperOrderlist>
       </OrdersContainer>

package/src/components/Orders/DeliveryDashboard/styles.js

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

package/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/components/Orders/DriversList/index.js

@@ -4,6 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import BsDot from '@meronex/icons/bs/BsDot'
 import { useTheme } from 'styled-components'
 import { getStarWidth } from '../../../utils'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 import {
   DriversListContainer,
   DriverCard,
@@ -28,11 +29,14 @@ export const DriversList = (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) => {

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

@@ -73,7 +73,7 @@ const DriversManagerUI = (props) => {
 
   return (
     <>
-      <DriversContainer>
+      <DriversContainer id='driverDashboard'>
         <DriversHeader>
           <HeaderTitleContainer>
             {isCollapse && (

package/src/components/Orders/Messages/styles.js

@@ -402,10 +402,11 @@ export const WrapperDeleteImage = styled.div`
 
 export const WrapperSendMessageButton = styled.div`
   white-space: nowrap;
-  width: fit-content;
+  width: 80px;
 
   button {
     height: 43px;
+    width: 100%;
     svg {
        width: 1.5em;
        height: 1.5em; 
@@ -429,6 +430,7 @@ export const WrapperSendMessageButton = styled.div`
   }
 
   @media (min-width: 480px) {
+    width: fit-content;
     button {
       svg {
         margin-right: 10px;