ordering-ui-external 1.8.9 → 1.9.0

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>