ordering-ui-external 1.0.1 → 1.1.0

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { useUtils, useLanguage, useSession, ProductForm as ProductFormController } from 'ordering-components-external'
 import { Alert } from '../Confirm'
@@ -8,7 +8,7 @@ import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
 import { useTheme } from 'styled-components'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { ChevronLeft, ChevronRight } from 'react-bootstrap-icons'
+import { ChevronLeft, ChevronRight, ChevronDown } from 'react-bootstrap-icons'
 import { BusinessPreorder } from '../BusinessPreorder'
 import { Button } from '../../styles/Buttons'
 import SwiperCore, { Navigation } from 'swiper'
@@ -31,7 +31,9 @@ import {
   InfoWrapper,
   ProfessionalPhoto,
   NameWrapper,
-  StatusInfo
+  StatusInfo,
+  DropDownWrapper,
+  DropDownTitle
 } from './styles'
 import moment from 'moment'
 SwiperCore.use([Navigation])
@@ -43,7 +45,8 @@ const ServiceFormUI = (props) => {
     handleSave,
     isSoldOut,
     maxProductQuantity,
-    productCart
+    productCart,
+    professionalList
   } = props
 
   const theme = useTheme()
@@ -52,6 +55,10 @@ const ServiceFormUI = (props) => {
   const [{ auth }, { login }] = useSession()
   const [modalPageToShow, setModalPageToShow] = useState('login')
   const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [isDropDown, setIsDropDown] = useState(false)
+  const [currentProfessional, setCurrentProfessional] = useState(null)
+
+  const dropDownRef = useRef()
 
   const closeModal = () => {
     setModalIsOpen(false)
@@ -82,7 +89,7 @@ const ServiceFormUI = (props) => {
   const [dateSelected, setDateSelected] = useState(null)
 
   const handleAddProduct = () => {
-    if (!professionalSelected?.id) {
+    if (!currentProfessional?.id) {
       setAlertState({
         open: true,
         content: [t('VALIDATION_ERROR_PROFESSIONAL_REQUIRED', 'The field professional is required')]
@@ -96,18 +103,32 @@ const ServiceFormUI = (props) => {
       })
       return
     }
-    handleSave()
+    const values = {
+      serviceTime: parseDate(dateSelected, { outputFormat: 'YYYY-MM-DD HH:mm:00' }),
+      professional: currentProfessional
+    }
+    handleSave(values)
   }
 
-  const isBusyTime = () => {
-    if (professionalSelected?.busy_times?.length === 0 || !dateSelected) return false
-    const valid = professionalSelected?.busy_times.some(item => {
+  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()
     })
     return valid
   }
 
+  const handleClickOutside = (e) => {
+    if (dropDownRef?.current.contains(e.target)) return
+    setIsDropDown(false)
+  }
+
+  const handleChangeProfessional = (professional) => {
+    setIsDropDown(false)
+    setCurrentProfessional(professional)
+  }
+
   useEffect(() => {
     const imageList = []
     imageList.push(product?.images || theme.images?.dummies?.product)
@@ -121,6 +142,18 @@ const ServiceFormUI = (props) => {
     setGallery(imageList)
   }, [product])
 
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    return () => {
+      window.removeEventListener('mouseup', handleClickOutside)
+    }
+  }, [isDropDown])
+
+  useEffect(() => {
+    if (!professionalSelected) return
+    setCurrentProfessional(professionalSelected)
+  }, [professionalSelected])
+
   return (
     <>
       <Container>
@@ -166,18 +199,18 @@ const ServiceFormUI = (props) => {
             <h2>{t('PROFESSIONALS', 'Professionals')}</h2>
             <span>{t('REQUIRED', 'Required')}</span>
           </SectionHeader>
-          <ProfessionalSelectWrapper>
-            <SelectedItem>
+          <ProfessionalSelectWrapper ref={dropDownRef}>
+            <SelectedItem onClick={() => setIsDropDown(prev => !prev)}>
               <InfoWrapper>
-                {professionalSelected?.photo ? (
+                {currentProfessional?.photo ? (
                   <ProfessionalPhoto
-                    bgimage={professionalSelected?.photo}
+                    bgimage={currentProfessional?.photo}
                   />
                 ) : <FaUserAlt />}
                 <NameWrapper>
-                  <p>{professionalSelected?.name} {professionalSelected?.lastname}</p>
+                  <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
                   <StatusInfo available={!isBusyTime()}>
-                    {isBusyTime() ? (
+                    {isBusyTime(currentProfessional) ? (
                       <>
                         <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
                       </>
@@ -187,7 +220,42 @@ const ServiceFormUI = (props) => {
                   </StatusInfo>
                 </NameWrapper>
               </InfoWrapper>
+              <ChevronDown />
             </SelectedItem>
+            {isDropDown && (
+              <DropDownWrapper>
+                <DropDownTitle>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</DropDownTitle>
+                {professionalList?.map((professional) => professional?.products?.includes(product?.id) && (
+                  <SelectedItem
+                    key={professional?.id}
+                    isDropDown
+                    active={professional?.id === currentProfessional?.id}
+                    onClick={() => handleChangeProfessional(professional)}
+                  >
+                    <InfoWrapper>
+                      {professional?.photo ? (
+                        <ProfessionalPhoto
+                          bgimage={professional?.photo}
+                        />
+                      ) : <FaUserAlt />}
+                      <NameWrapper>
+                        <p>{professional?.name} {professional?.lastname}</p>
+                        <StatusInfo available={!isBusyTime(professional)}>
+                          {isBusyTime(professional) ? (
+                            <>
+                              <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
+                            </>
+                          ) : (
+                            <span className='status'>{t('AVAILABLE', 'Available')}</span>
+                          )}
+                        </StatusInfo>
+                      </NameWrapper>
+                    </InfoWrapper>
+                  </SelectedItem>
+                ))}
+              </DropDownWrapper>
+            )}
+
           </ProfessionalSelectWrapper>
         </ProfessionalInfoWrapper>
         <ScheduleWrapper>
@@ -195,13 +263,15 @@ const ServiceFormUI = (props) => {
             <h2>{t('SCHEDULE', 'Schedule')}</h2>
             <span>{t('REQUIRED', 'Required')}</span>
           </SectionHeader>
-          <BusinessPreorder
-            business={professionalSelected}
-            isProfessional
-            maxDays={50}
-            onChangeMoment={setDateSelected}
-            useOrderContext={false}
-          />
+          {currentProfessional && (
+            <BusinessPreorder
+              business={currentProfessional}
+              isProfessional
+              maxDays={50}
+              onChangeMoment={setDateSelected}
+              useOrderContext={false}
+            />
+          )}
         </ScheduleWrapper>
         <ButtonWrapper>
           <span>{dateSelected
@@ -212,6 +282,7 @@ const ServiceFormUI = (props) => {
             <Button
               onClick={() => handleAddProduct()}
               color='primary'
+              disabled={isBusyTime(currentProfessional)}
             >
               {t('BOOK', 'Book')}
             </Button>

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

@@ -140,6 +140,7 @@ export const SectionHeader = styled.div`
 export const ScheduleWrapper = styled.div`
   padding: 0px 20px;
   margin-top: 35px;
+  margin-bottom: 15px;
   > div:last-child {
     padding: 0px;
   }
@@ -154,7 +155,7 @@ export const ButtonWrapper = styled.div`
   padding: 11px 20px 30px 20px;
   border-top: ${props => props.theme.colors.gray200};
   bottom: 0px;
-  z-index: 1;
+  z-index: 11;
 
   span {
     font-weight: 500;
@@ -173,7 +174,23 @@ export const ButtonWrapper = styled.div`
   }
 `
 
-export const ProfessionalSelectWrapper = styled.div``
+export const ProfessionalSelectWrapper = styled.div`
+  position: relative;
+`
+
+export const DropDownWrapper = styled.div`
+  position: absolute;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  top: 100%;
+  margin-top: 5px;
+  border: 1px solid ${props => props.theme.colors.gray200};
+  background-color: ${props => props.theme.colors.backgroundPage};
+  padding: 18px 16px;
+  width: 100%;
+  z-index: 10;
+  box-sizing: border-box;
+`
 
 export const SelectedItem = styled.div`
   display: flex;
@@ -183,6 +200,30 @@ export const SelectedItem = styled.div`
 
   border: 1px solid ${props => props.theme.colors.gray200};
   border-radius: 7.6px;
+  cursor: pointer;
+  transition: all 0.3s linear;
+
+  ${({ isDropDown }) => isDropDown && css`
+    border: none;
+    padding: 12px 0px;
+    border-top: 1px solid ${props => props.theme.colors.gray200};
+    border-radius: 0px;
+    &:hover {
+      background-color: ${props => props.theme.colors.grayDividerColor};
+    }
+  `}
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.gray200};
+  `}
+`
+
+export const DropDownTitle = styled.h1`
+  margin-top: 0px;
+  margin-bottom: 18px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
 `
 
 export const InfoWrapper = styled.div`

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

@@ -83,8 +83,8 @@ const SignUpBusinessUI = (props) => {
     const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
     if (!userPhoneNumber &&
       ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-      validationFields?.fields?.checkout?.cellphone?.required) ||
-      configs?.verification_phone_required?.value === '1')
+        validationFields?.fields?.checkout?.cellphone?.required) ||
+        configs?.verification_phone_required?.value === '1')
     ) {
       setAlertState({
         open: true,
@@ -140,7 +140,9 @@ const SignUpBusinessUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

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

@@ -83,8 +83,8 @@ const SignUpDriverUI = (props) => {
     const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
     if (!userPhoneNumber &&
       ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-      validationFields?.fields?.checkout?.cellphone?.required) ||
-      configs?.verification_phone_required?.value === '1')
+        validationFields?.fields?.checkout?.cellphone?.required) ||
+        configs?.verification_phone_required?.value === '1')
     ) {
       setAlertState({
         open: true,
@@ -140,7 +140,9 @@ const SignUpDriverUI = (props) => {
   const handleChangeInputEmail = (e) => {
     handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
   }
 
   useEffect(() => {

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

@@ -7,7 +7,9 @@ export const SignUpContainer = styled.div`
   min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
   padding: 0 10px;
   box-sizing: border-box;
+
   flex-direction: column;
+
   @media (min-width: 768px) {
     flex-direction: row;
   }
@@ -21,9 +23,11 @@ export const FormSide = styled(Side)`
   flex-direction: column;
   align-items: center;
   margin: auto;
+
   @media (min-width: 992px) {
     font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
   }
+
   @media (min-width: 1200px){
     font-size: ${({ isPopup }) => isPopup ? '0.9em' : '1em'};
   }
@@ -38,21 +42,26 @@ export const FormInput = styled.form`
     &::placeholder, .PhoneInputInput::placeholder {
       color: ${props => props.theme.colors?.lightGray} !important;
     }
+
     &:-ms-input-placeholder, .PhoneInputInput:-ms-input-placeholder {
       color: ${props => props.theme.colors?.lightGray} !important;
     }
+
     &::-ms-input-placeholder, .PhoneInputInput::-ms-input-placeholder {
       color: ${props => props.theme.colors?.lightGray} !important;
     }
   }
+
   div.phone_number {
     margin: 10px 0px;
     width: 100%;
   }
+
   input.form:not(:last-child) {
     margin: 5px 0px;
     padding: 8px 20px;
   }
+
   button {
     margin-top: 10px;
     padding: 5px;
@@ -68,14 +77,17 @@ export const RedirectLink = styled.div`
   flex-direction: column;
   margin: 0px;
   font-size: 17px;
+
   span {
     margin-right: 5px;
     color: black;
+
     ${props => props.theme?.rtl && css`
       margin-left: 5px;
       margin-right: 0px;
     `}
   }
+
   a {
     color: ${props => props.theme.colors.primary} !important;
     text-decoration: none;
@@ -86,26 +98,33 @@ export const RedirectLink = styled.div`
       text-decoration: underline !important;
     }
   }
+
   * {
     margin: 0px;
     padding: 0px;
   }
+
   ${({ register }) => register && css`
     width: calc(95% - 20px);
+
     @media (min-width: 481px) {
       width: ${({ isPopup }) => isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)'};
     }
   `}
+
   @media (min-width: 425px) {
     flex-direction: row;
   }
+
   @media (min-width: 768px) {
     font-size: 14px;
   }
+
   @media (min-width: 992px) {
     font-size: ${({ isPopup }) => isPopup ? '13px' : '18px'};
     flex-direction: row;
   }
+
   @media (min-width: 1200px) {
     ${({ isPopup }) => isPopup && css`
       font-size: 16px;
@@ -115,14 +134,17 @@ export const RedirectLink = styled.div`
 
 export const SocialButtons = styled.div`
   width: ${({ isPopup }) => isPopup ? '100%' : '80%'};
+
   button {
     width: 100%;
     padding: 5px 30px;
     color: #000000;
     margin-bottom: 15px;
+
     img {
       width: 30px;
     }
+
     div {
       font-size: 16px;
     }
@@ -189,6 +211,7 @@ export const LoginDivider = styled.div`
   align-items: center;
   width: 80%;
   margin: 30px 0;
+
   p {
     margin: 0;
     width: 70px;
@@ -210,6 +233,7 @@ export const InputContainer = styled.div`
   flex-direction: column;
   justify-content: flex-end;
   margin: 5px 0px;
+
   
   @media (min-width: 800px) {
     ${({ isHalf }) => isHalf && css`
@@ -224,6 +248,7 @@ export const InputWrapper = styled.div`
   input{
     box-sizing: border-box;
     width: 100%;
+
     ${props => props.theme.rtl ? css`
       padding-right: 40px !important;
     ` : css`
@@ -239,10 +264,12 @@ export const InputBeforeIcon = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
+
   ${props => props.theme?.rtl && css`
     right: 15px;
     left: initial;
   `}
+
   svg {
     font-size: 16px;
     color: #B1BCCC;
@@ -253,6 +280,7 @@ export const TermsConditionWrapper = styled.div`
   display: flex;
   align-items: center;
   margin: 10px 0;
+
   > label {
     font-size: 14px;
     ${props => props.theme?.rtl ? css`
@@ -260,6 +288,7 @@ export const TermsConditionWrapper = styled.div`
     ` : css`
       margin-left: 7px;
     `}
+
     > span:first-child {
       font-weight: 500;
       ${props => props.theme?.rtl ? css`
@@ -268,10 +297,12 @@ export const TermsConditionWrapper = styled.div`
         margin-right: 7px;
       `}
     }
+
     > a {
       color: ${props => props.theme.colors.primary} !important;
     }
   }
+
   @media (min-width: 768px) {
     > label {
       font-size: 16px;
@@ -287,6 +318,7 @@ export const BussinessAndDriverSignUp = styled.div`
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
+
   @media (min-width: 481px) {
     width: ${({ isPopup }) => isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)'};
   }
@@ -294,6 +326,7 @@ export const BussinessAndDriverSignUp = styled.div`
   @media (min-width: 993px) {
     flex-direction: row;
   }
+
   button {
     width: 100%;
     margin-top: 15px;