ordering-ui-external 1.8.10 → 1.9.0

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

@@ -86,6 +86,7 @@ const PhoneAutocompleteUI = (props) => {
     }
     if (!inputValue) {
       setInputValue(inputValue)
+      onChangeNumber(inputValue)
     }
     if ((inputValue && inputValue.length > 10) || !(/^[0-9]+$/.test(inputValue))) {
       return
@@ -95,6 +96,7 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const onChange = (option) => {
+    if (!option) { onChangeNumber('') }
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)

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

@@ -36,7 +36,8 @@ const PlaceSpotUI = (props) => {
     setVehicle,
     setSpotState,
     handleChangeSpot,
-    setHasBusinessPlaces
+    setHasBusinessPlaces,
+    setPlaceSpotNumber
   } = props
 
   const el = useRef()
@@ -92,6 +93,7 @@ const PlaceSpotUI = (props) => {
       let spotNumber = parseFloat(e?.target?.value)
       spotNumber = isNaN(spotNumber) ? null : spotNumber
       setSpotNumber(spotNumber)
+      setPlaceSpotNumber(spotNumber)
     }
   }
 

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

@@ -508,6 +508,7 @@ export const Properties = styled.div`
 export const ProductDescription = styled.p`
   margin-top: 0px;
   white-space: pre-wrap;
+  color: #909BA9;
 `
 export const PriceContent = styled.div`
   display: flex;

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

@@ -22,7 +22,7 @@ const ProductOptionUI = (props) => {
   if (option.min === 1 && option.max === 1) {
     maxMin = t('REQUIRED', 'Required')
   } else if (option.min === 0 && option.max > 0) {
-    maxMin = `${!option?.limit_suboptions_by_max ? t('MAX_PER_SUBOPTION', 'MAX PER SUBOPTION') : t('MAX', 'Max')}. ${option.max}`
+    maxMin = `${t('MAX', 'Max')}. ${option.max}`
   } else if (option.min > 0 && option.max === 0) {
     maxMin = `${t('MIN', 'Min')}. ${option.min})`
   }

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

@@ -39,7 +39,7 @@ const ProductOptionSubOptionUI = (props) => {
     setIsScrollAvailable
   } = props
 
-  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === option?.max
+  const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
   const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()

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

@@ -147,7 +147,6 @@ export const SuboptionPrice = styled.div`
   color: ${props => props.theme.colors.darkGray};
   margin-left: 5px;
   min-width: 60px;
-  max-width: 60px;
   ${props => props.theme?.rtl && css`
     margin-right: 5px;
     margin-left: 0px;

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

@@ -24,6 +24,7 @@ import { TextArea } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { Alert } from '../Confirm'
 import { reviewCommentList } from '../../../../../utils'
+import { useTheme } from 'styled-components'
 
 const SingleProductReview = (props) => {
   const {
@@ -33,6 +34,7 @@ const SingleProductReview = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [isLike, setIsLike] = useState(true)
   const [isExtraComment, setIsExtraComment] = useState(false)
   const [comments, setComments] = useState([])

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

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+
+import {
+	Accordion,
+	AccordionSection,
+	ClosedSchedule,
+	DropdownWrapper,
+	HoursWrappers,
+} from './styles'
+import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
+
+export const ScheduleAccordion = (props) => {
+
+	const {
+		scheduleFormatted,
+		schedule,
+		weekIndex
+	} = props
+
+	const [isActive, setActiveState] = useState(false)
+	const [, t] = useLanguage()
+
+	const daysOfWeek = [
+		t('DAY7', 'Sunday'),
+		t('DAY1', 'Monday'),
+		t('DAY2', 'Tuesday'),
+		t('DAY3', 'Wednesday'),
+		t('DAY4', 'Thursday'),
+		t('DAY5', 'Friday'),
+		t('DAY6', 'Saturday'),
+	]
+
+	return (
+		<AccordionSection>
+			<Accordion
+				onClick={() => setActiveState(!isActive)}
+			>
+				<DropdownWrapper>
+					<h4>{daysOfWeek[weekIndex]}</h4>
+					<IosArrowDown />
+				</DropdownWrapper>
+				<HoursWrappers style={{ display: isActive ? 'flex' : 'none', paddingLeft: 60 }}>
+					{schedule?.lapses?.map((lapse, i) => (
+						schedule?.enabled ?
+							<p key={`${i}-${scheduleFormatted(lapse.open)}`}>
+								{scheduleFormatted(lapse.open) +
+									' - ' +
+									scheduleFormatted(lapse.close)}
+							</p>
+							:
+							<ClosedSchedule>
+								{t('CLOSED', 'Closed')}
+							</ClosedSchedule>
+					))}
+				</HoursWrappers>
+			</Accordion>
+		</AccordionSection>
+	)
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const AccordionSection = styled.div`
+  background: #FFF;
+`
+
+export const Accordion = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+export const DropdownWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`
+export const HoursWrappers = styled.div`
+  flex-direction: column;
+
+  p {
+    margin: 0px 0px 10px 0px;
+  }
+`
+
+export const ClosedSchedule = styled.p`
+  color: ${props => props.theme?.colors?.danger500}
+`

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

@@ -17,7 +17,8 @@ export const SearchBar = (props) => {
     lazyLoad,
     isCustomLayout,
     handleCustomEnter,
-    forwardRef
+    forwardRef,
+    starbucksStyle
   } = props
   const [theme] = useTheme()
   const [, t] = useLanguage()
@@ -84,6 +85,7 @@ export const SearchBar = (props) => {
         className={!isCustomLayout && 'search-bar'}
         isCustomLayout={isCustomLayout}
         hasValue={el.current?.value}
+        starbucksStyle={starbucksStyle}
       >
         <Input
           ref={(ref) => {

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

@@ -30,9 +30,17 @@ export const BusinessSearch = styled.div`
       transition: width 0.4s ease-in-out; 
     `}
 
+    ${({ starbucksStyle }) => starbucksStyle && css`
+        background-color: #F8F9FA;
+        border: 1px solid #DEE2E6;
+        font-size: 14px;
+        color: #000;
+        border-radius: 7.6px;
+    `}
+
     @media (min-width: 681px) {
       width: 100%;
-      ${({ isCustomLayout }) => !isCustomLayout && css`
+      ${({ isCustomLayout, starbucksStyle }) => !isCustomLayout && !starbucksStyle && css`
         width: 50%;
       `}
     }

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

@@ -144,9 +144,15 @@ const ServiceFormUI = (props) => {
 
   const isBusyTime = (professional) => {
     if (professional?.busy_times?.length === 0 || !dateSelected) return false
-    const valid = professional?.busy_times.some(item => {
-      return moment(item?.start).valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment(item?.end).valueOf()
+    const duration = product?.duration ?? 0
+    const busyTimes = isCartProduct
+      ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      : [...professional?.busy_times]
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
+        moment(dateSelected).valueOf() <= moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
+        moment(dateSelected).add(duration, 'minutes').valueOf() <= moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -304,7 +310,7 @@ const ServiceFormUI = (props) => {
                       ) : <FaUserAlt />}
                       <NameWrapper>
                         <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
-                        <StatusInfo available={!isBusyTime()}>
+                        <StatusInfo available={!isBusyTime(currentProfessional)}>
                           {isBusyTime(currentProfessional) ? (
                             <>
                               <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>

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

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme, useOrder } from 'ordering-components-external'
 import { usePopper } from 'react-popper'
 import {
   HeaderItem,
@@ -29,13 +29,16 @@ export const UserPopover = (props) => {
     isHome,
     optionsList,
     withLogout,
-    isCustomerMode
+    isCustomerMode,
+    handleOpenAddressModal
   } = props
   const [sessionState] = useSession()
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
+  const [orderStatus] = useOrder()
+
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -56,6 +59,8 @@ export const UserPopover = (props) => {
     { name: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
   ]
 
+  const addressRequiredPageNames = ['business_search', 'promotions']
+
   const options = isCustomerMode
     ? optionsDefault.filter(option => option.name === 'profile')
     : optionsList || optionsDefault
@@ -94,7 +99,11 @@ export const UserPopover = (props) => {
   }
 
   const handleGoToPage = (page) => {
-    events.emit('go_to_page', { page })
+    if (!orderStatus.options?.address?.location && addressRequiredPageNames.includes(page)) {
+      handleOpenAddressModal()
+    } else {
+      events.emit('go_to_page', { page })
+    }
     props.onClick && props.onClick()
   }
 

package/src/themes/pwa/src/components/MomentContent/index.js

@@ -23,7 +23,6 @@ export const MomentContent = (props) => {
   const momentProps = {
     maxDate: currentDate
   }
-
   const { width } = useWindowSize()
   const momentControl = document?.getElementById('moment_control')?.getBoundingClientRect()
 

package/src/themes/pwa/src/components/MomentControl/index.js

@@ -133,9 +133,6 @@ const MomentControlUI = (props) => {
     }
   }, [hoursList])
 
-  useEffect(() => {
-    if (isASP) handleCheckBoxChange(true)
-  }, [isAsap])
 
   return (
     <div id='moment_control'>

package/src/themes/six/src/components/BusinessController/styles.js

@@ -4,6 +4,10 @@ import styled, { css } from 'styled-components'
 export const ContainerCard = styled.div` 
   width: 100%;
   position: relative;
+  @media (min-width: 768px) {
+    padding: 7px 10px 7px 20px;
+    margin-bottom: 5px;
+  }
 `
 
 export const WrapperBusinessCard = styled.div`

package/src/themes/six/src/components/SearchBar/index.js

@@ -2,10 +2,12 @@ import React, { useRef, useEffect } from 'react'
 import { Input } from '../../styles/Inputs'
 import { useLanguage } from 'ordering-components-external'
 import AiOutlineSearch from '@meronex/icons/ai/AiOutlineSearch'
+import { Funnel } from 'react-bootstrap-icons'
 import {
   BusinessSearch,
   DeleteContent,
-  SearchWrapper
+  SearchWrapper,
+  FunnelWrapper
 } from './styles'
 export const SearchBar = (props) => {
   const {
@@ -13,7 +15,8 @@ export const SearchBar = (props) => {
     search,
     placeholder,
     lazyLoad,
-    isCustomLayout
+    isCustomLayout,
+    isStarbucks
   } = props
 
   const [, t] = useLanguage()
@@ -90,6 +93,11 @@ export const SearchBar = (props) => {
         >
           <AiOutlineSearch />
         </SearchWrapper>
+        {isStarbucks &&
+          <FunnelWrapper>
+            <Funnel />
+          </FunnelWrapper>
+        }
       </BusinessSearch>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

package/src/themes/six/src/components/SearchBar/styles.js

@@ -68,7 +68,7 @@ export const DeleteContent = styled.span`
   `}
   ${({ isClear, isHome }) => isClear && css`
     left: initial;
-    right: 20px;
+    right: 40px;
   `}
   ${props => props.theme?.rtl && css`
     transform: translate(30%, 0%);
@@ -94,6 +94,17 @@ export const DeleteContent = styled.span`
 
 export const SearchWrapper = styled(DeleteContent)``
 
+export const FunnelWrapper = styled.div`
+  svg {
+    position: absolute;
+    right: 10px !important;
+    color: #ADB5BD;
+    width: 20px;
+    height: 20px;
+    bottom: 22px;
+  }
+`
+
 export const SearchIcon = styled.div`
   background-image: url(${props => props.theme?.images?.general?.searchIcon});
   background-position: right 10px center;