ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Stores/BusinessSelectHeader/index.js

@@ -4,7 +4,7 @@ import {
   useLanguage,
   useUtils,
   DashboardBusinessList as BusinessListController
-} from 'ordering-components-external'
+} from 'ordering-components-'
 import { Button } from '../../../styles'
 import {
   PopMenuContatiner,

package/src/themes/callcenterOriginal/src/styles/Buttons/index.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import { darken } from 'polished'
 
 export const IconButton = styled.button`
   background-color: transparent;
@@ -69,24 +68,30 @@ export const Button = styled.button`
   background: #CCC;
   color: #FFF;
   border: 1px solid #CCC;
-  border-radius: 7.6px;
+  border-radius: ${({ borderRadius }) => !borderRadius ? '30px' : borderRadius};
   line-height: 30px;
   padding-left: 15px;
   padding-right: 15px;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
   outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: all .2s ease-in;
+
   &:active {
-    background: ${() => darken(0.07, '#CCC')};
+    background: '#CCC';
   }
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+  ${({ rectangle }) => rectangle && css`
+    border-radius: unset;
+  `}
+
   ${({ bgtransparent }) => bgtransparent && css`
-      background: transparent !important;
+    background: transparent !important;
   `}
   ${({ initialIcon }) => initialIcon && css`
     text-align: left;
@@ -100,20 +105,20 @@ export const Button = styled.button`
       padding-left: 15%
       ${props => props.theme?.rtl && css`
         padding-right: 15%;
-        padding-left: 0
+        padding-left: 0;
     `}
     }
   `}
   ${({ outline }) => outline && css`
-    background: #FFF;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
     &:hover {
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
       color: #FFF;
     }
   `}
@@ -129,11 +134,11 @@ export const Button = styled.button`
     border-radius: 50%;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
   `}
   ${({ circle, outline }) => circle && outline && css`
-    background: #FFF;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
     padding: 0;
@@ -144,18 +149,21 @@ export const Button = styled.button`
     border-radius: 50%;
     &:active {
       color: #FFF;
-      background: ${darken(0.07, '#CCC')};
+      background: '#CCC';
     }
   `}
   ${({ color }) => color === 'primary' && css`
     background: ${props => props.theme.colors.primary};
     color: ${props => props.theme.colors.primaryContrast};
     border-color: ${props => props.theme.colors.primary};
+    &:hover {
+      background: ${props => props.theme.colors.primary};
+    }
     &:active {
-      background: ${props => darken(0.07, props.theme.colors.primary)};
+      background: ${props => props.theme.colors.primary};
     }
     ${({ outline }) => outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.primary};
       border-color: ${props => props.theme.colors.primary};
       &:active {
@@ -163,7 +171,7 @@ export const Button = styled.button`
         background: ${props => props.theme.colors.primary};
       }
       &:hover {
-        background: ${props => darken(0.07, props.theme.colors.primary)};
+        background: ${props => props.theme.colors.primary};
         color: #FFF;
       }
     `}
@@ -178,12 +186,12 @@ export const Button = styled.button`
       text-align: center;
       border-radius: 50%;
       &:active {
-        border-color: ${props => darken(0.07, props.theme.colors.primary)};
-        background: ${props => darken(0.07, props.theme.colors.primary)};
+        border-color: ${props => props.theme.colors.primary};
+        background: ${props => props.theme.colors.primary};
       }
     `}
     ${({ circle, outline }) => circle && outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.primary};
       border-color: ${props => props.theme.colors.primary};
       padding: 0;
@@ -198,44 +206,49 @@ export const Button = styled.button`
       }
     `}
   `}
-  ${({ color }) => color === 'primaryContrast' && css`
-    background: ${props => props.theme.colors.primaryContrast};
+
+  ${({ color }) => color === 'lightPrimary' && css`
+    background: ${props => props.theme.colors.lightPrimary};
     color: ${props => props.theme.colors.primary};
-    border-color: ${props => props.theme.colors.primaryContrast};
+    border-color: ${props => props.theme.colors.lightPrimary};
     &:hover {
-      background: ${props => darken(0.04, props.theme.colors.primaryContrast)};
+      background: ${props => props.theme.colors.lightPrimary};
     }
     &:active {
-      background: ${props => darken(0.1, props.theme.colors.primaryContrast)};
+      background: ${props => props.theme.colors.lightPrimary};
+    }
+  `}
+  ${({ color }) => color === 'secundaryDark' && css`
+    background: ${props => props.theme.colors.secundaryDarkContrast};
+    color: ${props => props.theme.colors.secundaryDark};
+    border-color: ${props => props.theme.colors.secundaryDarkContrast};
+    &:hover {
+      background: ${props => props.theme.colors.secundaryDarkContrast};
+    }
+    &:active {
+      background: ${props => props.theme.colors.secundaryDarkContrast};
     }
-    ${({ naked }) => naked && css`
-      background: transparent;
-      border-color: transparent;
-      &:active {
-        background: transparent;
-      }
-      &:hover {
-        background: transparent;
-      }
-    `}
   `}
   ${({ color }) => color === 'secundary' && css`
     background: ${props => props.theme.colors.secundary};
     color: ${props => props.theme.colors.secundaryContrast};
     border-color: ${props => props.theme.colors.secundary};
+    &:hover {
+      background: ${props => props.theme.colors.secundary};
+    }
     &:active {
-      background: ${props => darken(0.07, props.theme.colors.secundary)};
+      background: ${props => props.theme.colors.secundary};
     }
     ${({ outline }) => outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.secundary};
       border-color: ${props => props.theme.colors.secundary};
       &:active {
         color: ${props => props.theme.colors.secundaryContrast};
-        background: ${props => darken(0.05, props.theme.colors.secundary)};
+        background: ${props => props.theme.colors.secundary};
       }
       &:hover {
-        background: ${props => darken(0.07, props.theme.colors.secundary)};
+        background: ${props => props.theme.colors.secundary};
         color: #FFF;
       }
     `}
@@ -251,12 +264,12 @@ export const Button = styled.button`
       border-radius: 50%;
       &:active {
         color: ${props => props.theme.colors.secundaryContrast};
-        border-color: ${props => darken(0.07, props.theme.colors.secundary)};
-        background: ${props => darken(0.07, props.theme.colors.secundary)};
+        border-color: ${props => props.theme.colors.secundary};
+        background: ${props => props.theme.colors.secundary};
       }
     `}
     ${({ circle, outline }) => circle && outline && css`
-      background: #FFF;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
       color: ${props => props.theme.colors.secundary};
       border-color: ${props => props.theme.colors.secundary};
       padding: 0;
@@ -272,15 +285,29 @@ export const Button = styled.button`
       }
     `}
   `}
-  ${({ color }) => color === 'gray' && css`
-    background: ${props => props.theme.colors.grayDividerColor};
-    color: ${props => props.theme.colors.darkGray};
-    border-color: ${props => props.theme.colors.grayDividerColor};
-    &:active {
-      background: ${props => darken(0.05, props.theme.colors.grayDividerColor)};
-    }
+  ${({ color }) => color === 'black' && css`
+    background: ${props => props.theme.colors.black};
+    color: ${props => props.theme.colors.white};
+    border-color: ${props => props.theme.colors.black};
     &:hover {
-      background: ${props => darken(0.07, props.theme.colors.grayDividerColor)};
+      background: ${props => props.theme.colors.black};
     }
+    &:active {
+      background: ${props => props.theme.colors.black};
+    }
+  `}
+`
+
+export const LinkButton = styled.a`
+  font-size: 14px;
+  cursor: pointer;
+  color: ${props => props.theme.colors.primary};
+  &:hover {
+    text-decoration: underline;
+  }
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    opacity: 0.5;
   `}
 `

package/src/themes/callcenterOriginal/src/styles/index.js

@@ -1,4 +1,4 @@
-import { Button, IconButton } from './Buttons'
+import { Button, IconButton, LinkButton } from './Buttons'
 import { Checkbox } from './Checkbox'
 import { Input, TextArea } from './Inputs'
 import { MultiSelect } from './MultiSelect'
@@ -10,6 +10,7 @@ import { Tabs, Tab } from './Tabs'
 export {
   Button,
   IconButton,
+  LinkButton,
   Checkbox,
   Input,
   MultiSelect,

package/src/themes/five/src/components/AddressForm/index.js

@@ -16,8 +16,7 @@ import {
   GoogleMapsMap,
   useSession,
   useOrder,
-  useConfig,
-  useOrderingTheme
+  useConfig
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'

package/src/themes/five/src/components/AddressList/index.js

@@ -19,8 +19,7 @@ import {
   useLanguage,
   useOrder,
   useCustomer,
-  useEvent,
-  useOrderingTheme
+  useEvent
 } from 'ordering-components-external'
 
 import {
@@ -76,7 +75,6 @@ const AddressListUI = (props) => {
   const [addressOpen, setAddressOpen] = useState(false)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [{ user }] = useCustomer()
   const { width } = useWindowSize()
   const isCompletedLayout = width < 769 || isProfile

package/src/themes/five/src/components/BusinessController/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react'
-import { useLanguage, useUtils, useOrder, useConfig, useSession, useOrderingTheme, BusinessController as BusinessSingleCard } from 'ordering-components-external'
+import { useLanguage, useUtils, useOrder, useConfig, useSession, BusinessController as BusinessSingleCard } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
@@ -73,14 +73,12 @@ const BusinessControllerUI = (props) => {
   const [{ auth }, { login }] = useSession()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
   const [orderState] = useOrder()
-  const [orderingTheme] = useOrderingTheme()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
 
   const favoriteRef = useRef(null)
-
-  const businessRows = orderingTheme?.theme?.business_listing_view?.components?.layout?.rows
+  const businessRows = theme?.business_listing_view?.components?.layout?.rows
   const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
   const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
   const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden

package/src/themes/five/src/components/BusinessInformation/index.js

@@ -4,8 +4,7 @@ import {
   BusinessInformation as BusinessInformationController,
   GoogleMapsMap,
   useLanguage,
-  useConfig,
-  useOrderingTheme
+  useConfig
 } from 'ordering-components-external'
 import { Modal } from '../Modal'
 import {

package/src/themes/five/src/components/BusinessInformation/styles.js

@@ -11,7 +11,7 @@ export const BussinessTitle = styled.div`
   z-index: 1000;
   display: inline-flex;
   width: 50%;
-  background: #ffffff;
+  background: ${(props) => props.theme?.colors?.backgroundPage};
   align-items: center;
   margin-left: 10px;
   margin-bottom: 10px;
@@ -76,7 +76,7 @@ export const Information = styled.div`
 
 export const BusinessContent = styled.div`
   padding: 0 10px;
-  background: #FFF;
+  background: ${props => props.theme.colors.backgroundPage};
   @media(min-width: 768px){
     padding: 0 20px;
     padding-top: 30px;

package/src/themes/five/src/components/BusinessPreorder/index.js

@@ -34,7 +34,9 @@ import {
   Day,
   DayName,
   DayNumber,
-  ClosedBusinessMsg
+  ClosedBusinessMsg,
+  CheckIcon,
+  CheckedIcon
 } from './styles'
 import { BusinessMenuList } from '../BusinessMenuList'
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -44,6 +46,7 @@ import SwiperCore, {
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
 import { getTimes } from '../../../../../utils'
+import CgRadioCheck from '@meronex/icons/cg/CgRadioCheck'
 
 SwiperCore.use([Navigation])
 
@@ -61,11 +64,15 @@ const BusinessPreorderUI = (props) => {
     handleAsap,
     isProfessional,
     isDisabled,
-    maxDays
+    maxDays,
+    hoursList,
+    cateringPreorder,
+    preorderLeadTime,
+    getActualSchedule
   } = props
 
   const { pathname } = useLocation()
-  const [{ optimizeImage }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const theme = useTheme()
   const [{ configs }] = useConfig()
   const [orderState] = useOrder()
@@ -124,17 +131,51 @@ const BusinessPreorderUI = (props) => {
   }
 
   useEffect(() => {
-    const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
-    const _times = getTimeList(dateSelected, selectedMenu)
-    setTimeList(_times)
-  }, [dateSelected, menu, business])
+    if (cateringPreorder) {
+      const schedule = business && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        setIsEnabled(false)
+        return
+      }
+      const _timeLists = hoursList
+        .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
+          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: is12Hours ? (
+              hour.startTime.includes('12')
+                ? `${hour.startTime}PM`
+                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            ),
+            endText: is12Hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
+      setIsEnabled(true)
+      setTimeList(_timeLists)
+    } else {
+      const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
+      const _times = getTimeList(dateSelected, selectedMenu)
+      setTimeList(_times)
+    }
+  }, [dateSelected, menu, business, cateringPreorder, hoursList])
 
   useEffect(() => {
     if (type === 'business_hours') setMenu(null)
   }, [type])
 
   useEffect(() => {
-    if (pathname.includes('store') || isProfessional) return
+    if (pathname.includes('store') || isProfessional || cateringPreorder) return
     handleAsap && handleAsap()
   }, [])
 
@@ -147,7 +188,7 @@ const BusinessPreorderUI = (props) => {
           <p>{business.name}</p>
         </LogoWrapper>
       )}
-      {!isProfessional && isPreOrderSetting && (
+      {!isProfessional && isPreOrderSetting && !cateringPreorder && (
         <PreorderTypeWrapper>
           <p>{t('PREORDER_TYPE', 'Preorder type')}</p>
           <SelectWrapper>
@@ -232,8 +273,18 @@ const BusinessPreorderUI = (props) => {
                     isDisabled={isDisabled}
                     isProfessional={isProfessional}
                     busyTime={isProfessional && isBusyTime(business, getMomentTime(time.value))}
+                    cateringPreorder={cateringPreorder}
                   >
-                    <span>{time.text}</span>
+                    <span>
+                      {cateringPreorder && (
+                        <CheckIcon>
+                          {timeSelected === time.value ? <CheckedIcon cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
+                        </CheckIcon>
+                      )}
+                      <p>
+                        {time.text} {cateringPreorder && `- ${time.endText}`}
+                      </p>
+                    </span>
                   </TimeItem>
                 ))}
               </>

package/src/themes/five/src/components/BusinessPreorder/styles.js

@@ -153,53 +153,75 @@ export const TimeListWrapper = styled.div`
 export const TimeItem = styled.div`
   cursor: pointer;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  ${({ isProfessional }) => isProfessional ? css`
-    background: ${props => props.theme.colors.primaryContrast};
-    color: ${props => props.theme.colors.primary};
-  ` : css`
-    background: ${props => props.theme.colors.gray200};
-  `}
-  border-radius: 7.6px;
-  padding: 5px 15px;
-  margin: 12px;
-  width: calc(50% - 24px);
-  min-width: calc(50% - 24px);
-  box-sizing: border-box;
-  user-select: none;
-
+  span {
+    font-size: 14px;
+    white-space: nowrap;
+  }
   ${({ active }) => active && css`
     background: #F5F9FF;
     color: ${props => props.theme.colors.primary};
   `}
-
-  ${({ isDisabled }) => isDisabled && css`
-    pointer-events: none;
-  `}
-  
-  ${({ busyTime }) => busyTime && css`
-    background: ${props => props.theme.colors.gray200};
-    color: ${props => props.theme.colors.lightGray};
-  `}
-
-  span {
-    font-size: 14px;
-  }
-
-  @media (min-width: 400px) {
-    width: calc(33.33% - 24px);
-    min-width: calc(33.33% - 24px);
-  }
-
-  @media (min-width: 576px) {
-    width: calc(25% - 24px);
-    min-width: calc(25% - 24px);
-  }
-
-  @media (min-width: 769px) {
-    width: calc(16.66% - 24px);
-    min-width: calc(16.66% - 24px);
+${({ cateringPreorder }) => cateringPreorder ? css`
+    background: ${(props) => props.theme?.colors?.backgroundPage};
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    
+    span {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      margin-left: 15px;
+      p{
+        position: relative;
+        bottom: 2px;
+      }
+    }
+    ${({ active }) => active && css`
+      background: #F5F9FF;
+      color: ${props => props.theme.colors.primary};
+      span {
+        p{
+          bottom: 0;
+          margin-left: 2px;
+        }
+      }
+    `}
+  ` : css`
+    justify-content: center;
+    align-items: center;
+    background: #E9ECEF;
+    border-radius: 7.6px;
+    padding: 5px 15px;
+    margin: 12px;
+    width: calc(50% - 24px);
+    min-width: calc(50% - 24px);
+    box-sizing: border-box;
+    user-select: none;
+      
+      @media (min-width: 400px) {
+        width: calc(33.33% - 24px);
+        min-width: calc(33.33% - 24px);
+      }
+      
+      @media (min-width: 576px) {
+      width: calc(25% - 24px);
+      min-width: calc(25% - 24px);
+      }
+      
+      @media (min-width: 769px) {
+        width: calc(33.33% - 24px);
+        min-width: calc(33.33% - 24px);
+        ${({ isAppoint }) => isAppoint && css`
+          width: calc(33.33% - 24px);
+          min-width: calc(33.33% - 24px);
+          span {
+            font-size: 12px;
+          }
+        `}
+      }
+    `
   }
 `
 
@@ -320,3 +342,31 @@ export const ClosedBusinessMsg = styled.div`
   font-size: 16px;
   width: 100%;
 `
+
+export const CheckIcon = styled.div`
+  margin-right: 20px;
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`
+
+export const CheckedIcon = styled.div`
+  border-radius: 50%;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 6px solid ${props => props.theme.colors?.primary};
+  margin: 2px 12px 2px 2px;
+  ${props => props.theme.rtl && css`
+    margin: 2px 2px 2px 12px;
+  `}
+  ${({ cateringPreorder }) => cateringPreorder && css`
+    width: 21px;
+    min-width: 21px;
+    height: 21px;
+    margin: 0;
+    margin-left: 1px;
+  `}
+`

package/src/themes/five/src/components/BusinessProductsCategories/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { BusinessProductsCategories as ProductsCategories, useOrderingTheme } from 'ordering-components-external'
+import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
 import { AutoScroll } from '../../../../../components/AutoScroll'
 import { useTheme } from 'styled-components'
 
@@ -23,11 +23,10 @@ const BusinessProductsCategoriesUI = (props) => {
 
   const theme = useTheme()
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
   const scrollTopSpan = 60
 
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const handleChangeCategory = (category) => {
     const isBlockScroll = window.location.search.includes('category') &&

package/src/themes/five/src/components/BusinessProductsList/index.js

@@ -147,8 +147,7 @@ const BusinessProductsListUI = (props) => {
                   handleUpdateProducts={handleUpdateProducts}
                   productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                 />
-              ))
-              }
+              ))}
             </ProductsListing>
             {isSearchMode && category?.subcategories?.length > 0 && category?.subcategories?.filter(subcategory => productsCategorySelected?.some(product => product?.category_id === subcategory?.id))?.map(subcategory => (
               <SubcategorySearchContainer key={subcategory?.id}>