ordering-ui-external 2.0.4 → 2.1.1

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

@@ -11,7 +11,8 @@ import {
   PaymentOptions as PaymentOptionsController,
   useLanguage,
   useOrder,
-  useSession
+  useSession,
+  useValidationFields
 } from 'ordering-components-external'
 
 import { Modal } from '../Modal'
@@ -30,7 +31,8 @@ import {
   PaymentMethodsList,
   PayCard,
   PayCardSelected,
-  CardItemContent
+  CardItemContent,
+  Container
 } from './styles'
 
 const stripeOptions = ['stripe_direct', 'stripe', 'stripe_connect']
@@ -100,8 +102,9 @@ const PaymentOptionsUI = (props) => {
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
+  const [{ options }] = useOrder()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-
+  const [validationFields] = useValidationFields()
   const paymethodSelected = props.paySelected || props.paymethodSelected
 
   const methodsPay = ['google_pay', 'apple_pay']
@@ -116,11 +119,25 @@ const PaymentOptionsUI = (props) => {
   const supportedMethods = list?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
 
   const handlePaymentMethodClick = (paymethod) => {
+    if (paymethod?.gateway === 'paypal' &&
+      options.type === 1 &&
+      validationFields?.fields?.checkout?.driver_tip?.enabled &&
+      validationFields?.fields?.checkout?.driver_tip?.required &&
+      (Number(cart?.driver_tip) <= 0)
+    ) {
+      setAlertState({
+        open: true,
+        content: [t('DRIVER_TIPS_REQUIRED', 'Driver tips is required, please select a driver tip before select this paymethod')]
+      })
+      return
+    }
+
     if (cart?.balance > 0) {
       const isPopupMethod = popupMethods.includes(paymethod?.gateway)
       handlePaymethodClick(paymethod, isPopupMethod)
       return
     }
+
     setAlertState({
       open: true,
       content: [t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method')]
@@ -227,7 +244,6 @@ const PaymentOptionsUI = (props) => {
             setErrorCash={props.setErrorCash}
           />
         )}
-
         {isOpenMethod?.paymethod?.gateway === 'stripe' && isOpenMethod.paymethod?.gateway === 'stripe' && (
           <PaymentOptionStripe
             paymethod={isOpenMethod?.paymethod}
@@ -310,7 +326,12 @@ const PaymentOptionsUI = (props) => {
           className='modal-info'
           onClose={() => handlePaymethodClick(null)}
         >
-          {stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && (
+          {!isOpenMethod?.paymethod?.credentials?.publishable &&
+            <Container>
+              <p>{t('ADD_PUBLISHABLE_KEY', 'Please add a stripe key')}</p>
+            </Container>
+          }
+          {isOpenMethod?.paymethod?.credentials?.publishable && stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && (
             <StripeElementsForm
               methodsPay={methodsPay}
               paymethod={isOpenMethod?.paymethod?.gateway}

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

@@ -14,6 +14,10 @@ export const PaymentMethodsList = styled.div`
   margin-left: -15px;
 `
 
+export const Container = styled.div`
+  margin: 0 auto;
+`
+
 export const PayCard = styled.div`
   width: calc(50% - 30px);
   cursor: pointer;

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

@@ -92,11 +92,18 @@ export const QuantityControl = styled.div`
   svg {
     color: ${props => props.theme.colors.primary};
     font-size: 20px;
-    margin-right: 3px;
+    margin-right: 6px;
     ${props => props.theme?.rtl && css`
-      margin-left: 3px;
+      margin-left: 6px;
       margin-right: 0px;
     `}
+    @media (min-width: 425px) {
+      margin-right: 3px
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
   }
 
   svg[disabled] {
@@ -104,12 +111,20 @@ export const QuantityControl = styled.div`
   }
 
   svg:last-child {
-    margin-left: 3px;
+    margin-left: 6px;
     margin-right: 0;
     ${props => props.theme?.rtl && css`
-      margin-right: 3px;
+      margin-right: 6px;
       margin-left: 0px;
   `}
+    @media (min-width: 425px) {
+      margin-left: 3px;
+      margin-right: 0;
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
   }
 `
 
@@ -167,7 +182,12 @@ export const LeftOptionContainer = styled.div`
 
 export const RightOptionContainer = styled.div`
   display: flex;
+  flex-direction: column;
   width: 25%;
   align-items: center;
   justify-content: space-between;
+
+  @media (min-width: 425px) {
+    flex-direction: row;
+  }
 `

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

@@ -1,27 +1,23 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
-import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { Heart as DisLike, HeartFill as Like, InfoCircle } from 'react-bootstrap-icons'
 import {
   Container,
   ProfessionalItem,
-  ProfessionalPhoto,
   ContentWrapper,
-  ProfessionalListing,
-  InfoWrapper,
-  HeartIconWrapper,
-  IconWrapper
+  ProfessionalListing
 } from './styles'
 import { Modal } from '../Modal'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { AutoScroll } from '../AutoScroll'
 import { ProfessionalInfo } from '../ProfessionalInfo'
+import { SingleProfessionalCard } from '../SingleProfessionalCard'
 
 export const ProfessionalFilter = (props) => {
   const {
     professionals,
     professionalSelected,
-    handleChangeProfessionalSelected
+    handleChangeProfessionalSelected,
+    handleUpdateProfessionals
   } = props
 
   const [, t] = useLanguage()
@@ -30,22 +26,22 @@ export const ProfessionalFilter = (props) => {
   const [currentProfessional, setCurrentProfessional] = useState(null)
 
   const handleOpenProfile = (e, professional) => {
-    if (e.target.closest('.info')) return
+    if (e.target.closest('.info') || e.target.closest('.favorite')) return
     setCurrentProfessional(professional)
     setOpen(true)
   }
 
-  const handleOpenReview = (professional) => {
-    setReviewOpen(true)
-    setCurrentProfessional(professional)
-  }
-
   const handleCloseProfile = () => {
     setCurrentProfessional(null)
     setOpen(false)
     setReviewOpen(false)
   }
 
+  const onUpdateProfessionals = (id, changes) => {
+    const updatedProfessional = professionals.find(professional => professional.id === id)
+    handleUpdateProfessionals({ ...updatedProfessional, ...changes })
+  }
+
   return (
     <>
       <Container>
@@ -59,23 +55,15 @@ export const ProfessionalFilter = (props) => {
               >
                 <p>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</p>
               </ProfessionalItem>
-              {professionals.map((professional, i) => (
-                <ProfessionalItem
-                  key={i}
+              {professionals.map(professional => (
+                <SingleProfessionalCard
+                  isSmallPhoto
+                  handleProfessionalClick={handleOpenProfile}
                   active={professional?.id === professionalSelected?.id}
-                  onClick={(e) => handleOpenProfile(e, professional)}
-                >
-                  {professional?.photo ? <ProfessionalPhoto bgimage={professional?.photo} /> : <FaUserAlt />}
-                  <InfoWrapper>
-                    <p className='name'>{professional?.name} {professional?.lastname}</p>
-                    <IconWrapper>
-                      <InfoCircle className='info' onClick={() => handleOpenReview(professional)} />
-                      <HeartIconWrapper>
-                        {professional?.favorite ? <Like /> : <DisLike />}
-                      </HeartIconWrapper>
-                    </IconWrapper>
-                  </InfoWrapper>
-                </ProfessionalItem>
+                  key={professional.id}
+                  professional={professional}
+                  handleUpdateProfessionals={onUpdateProfessionals}
+                />
               ))}
             </AutoScroll>
           </ProfessionalListing>

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

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import React from 'react'
 
 export const Container = styled.div`
   > h2 {
@@ -18,7 +17,7 @@ export const ProfessionalItem = styled.div`
   border: 1px solid ${props => props.theme.colors.gray200};
   border-radius: 7.6px;
   cursor: pointer;
-  margin: 0px 6px;
+  margin: 10px 6px;
   transition: all 0.3s linear;
   width: 205px;
   min-width: 205px;
@@ -54,35 +53,6 @@ export const ProfessionalItem = styled.div`
   `}
 `
 
-const ProfessionalPhotoStyled = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  background-repeat: no-repeat, repeat;
-  background-size: cover;
-  background-position: center;
-  object-fit: cover;
-  height: 42px;
-  width: 42px;
-  min-width: 42px;
-  border-radius: 7.6px;
-  margin-right: 12px;
-  ${props => props.theme.rtl && css`
-    margin-left: 12px;
-    margin-right: 0px;
-  `}
-`
-export const ProfessionalPhoto = (props) => {
-  const style = {}
-  if (props.bgimage) {
-    style.backgroundImage = `url(${props.bgimage})`
-  }
-  return (
-    <ProfessionalPhotoStyled {...props} style={style}>
-      {props.children}
-    </ProfessionalPhotoStyled>
-  )
-}
-
 export const ContentWrapper = styled.div`
   overflow: auto hidden;
   width: 100%;
@@ -91,29 +61,3 @@ export const ContentWrapper = styled.div`
 export const ProfessionalListing = styled.div`
   display: flex;
 `
-
-export const InfoWrapper = styled.div`
-  width: calc(100% - 54px);
-`
-
-export const HeartIconWrapper = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  svg {
-    color: ${props => props.theme.colors.danger500};
-      font-size: 16px;
-  }
-`
-
-export const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  .info {
-    margin-right: 10px;
-    ${props => props.theme.rtl && css`
-      margin-left: 10px;
-      margin-right: 0px;
-    `}
-  }
-`

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

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { useLanguage, useConfig, useUtils, useOrderingTheme } from 'ordering-components-external'
 import CgSearch from '@meronex/icons/cg/CgSearch'
-import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 import { Cart3 } from 'react-bootstrap-icons'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessBasicInformation as BusinessBasicInformationRed } from '../../../../seven'
@@ -33,8 +32,7 @@ import {
   ProfessionalFilterWrapper,
   WrapperSearchAbsolute,
   NearBusiness,
-  PageBannerWrapper,
-  CategorySelectedContainer
+  PageBannerWrapper
 } from './styles'
 
 import { SearchProducts as SearchProductsOriginal } from '../../../../../themes/five/src/components/SearchProducts'
@@ -46,6 +44,7 @@ import { OrderItAgain } from '../OrderItAgain'
 import { ProfessionalBusinessFilter } from '../ProfessionalBusinessFilter'
 import { PageBanner } from '../PageBanner'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { scrollTo } from '../../../../../utils'
 
 const layoutOne = 'groceries'
 
@@ -86,7 +85,8 @@ export const RenderProductsLayout = (props) => {
     professionalSelected,
     onBusinessClick,
     handleChangePriceFilterValues,
-    priceFilterValues
+    priceFilterValues,
+    handleUpdateProfessionals
   } = props
 
   const theme = useTheme()
@@ -121,6 +121,7 @@ export const RenderProductsLayout = (props) => {
   }
   const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
   const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
+  const hidePreviousOrdered = theme?.business_view?.components?.products_ordered?.hidden
 
   const BusinessLayoutCategories = businessLayout.layoutOne
     ? CategoriesLayoutGroceries
@@ -142,6 +143,19 @@ export const RenderProductsLayout = (props) => {
     handleSaveProduct()
   }, [categorySelected])
 
+  useEffect(() => {
+    if (windowSize.width < 993 && categoryClicked && document.getElementsByClassName('category-title')) {
+      const extraHeight = 80
+      const top = document.getElementsByClassName('category-title')[0].offsetTop - extraHeight
+      window.scrollTo({
+        top: top,
+        behavior: 'smooth'
+      })
+    } else {
+      window.scroll(0, 0)
+    }
+  }, [categoryClicked])
+
   return (
     <>
       {!isLoading && business?.id && (
@@ -172,6 +186,8 @@ export const RenderProductsLayout = (props) => {
                 errorQuantityProducts={errorQuantityProducts}
                 sortByValue={sortByValue}
                 categoryClicked={categoryClicked}
+                categorySelected={categorySelected}
+                setCategoryClicked={setCategoryClicked}
               />
             )}
 
@@ -193,6 +209,13 @@ export const RenderProductsLayout = (props) => {
                 </WrapperSearch>
               </>
             )}
+            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && windowSize.width < 993 && !categoryClicked && (
+              <OrderItAgain
+                onProductClick={onProductClick}
+                productList={business?.previously_products}
+                businessId={business?.id}
+              />
+            )}
             {!businessLayout.layoutOne && (
               <BusinessContent isCustomLayout={isCustomLayout || useKioskApp} id='wrapper-categories'>
                 <BusinessCategoryProductWrapper showCartOnProductList={showCartOnProductList}>
@@ -212,6 +235,7 @@ export const RenderProductsLayout = (props) => {
                           professionals={business?.professionals}
                           professionalSelected={professionalSelected}
                           handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                          handleUpdateProfessionals={handleUpdateProfessionals}
                         />
                       </ProfessionalFilterWrapper>
                     </>
@@ -267,13 +291,6 @@ export const RenderProductsLayout = (props) => {
                     )}
                   </div>
                   <WrapContent id='businessProductList'>
-                    {!business?.loading && business?.previously_products?.length > 0 && (
-                      <OrderItAgain
-                        onProductClick={onProductClick}
-                        productList={business?.previously_products}
-                        businessId={business?.id}
-                      />
-                    )}
                     <BusinessLayoutProductsList
                       categories={[
                         { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
@@ -320,6 +337,7 @@ export const RenderProductsLayout = (props) => {
                             isProducts={currentCart.products.length}
                             isCartOnProductsList={isCartOnProductsList}
                             handleCartOpen={handleCartOpen}
+                            businessConfigs={business?.configs}
                           />
                         </>
                       ) : (
@@ -348,6 +366,7 @@ export const RenderProductsLayout = (props) => {
                       professionals={business?.professionals}
                       professionalSelected={professionalSelected}
                       handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                      handleUpdateProfessionals={handleUpdateProfessionals}
                     />
                   </ProfessionalFilterWrapper>
                 )}
@@ -355,7 +374,7 @@ export const RenderProductsLayout = (props) => {
                   <BusinessCategoriesContainer offSticky>
                     {!(business?.categories?.length === 0 && !categoryId) && (
                       <>
-                        {(!categoryClicked || windowSize.width >= 993) ? (
+                        {(!categoryClicked || windowSize.width >= 993) && (
                           <BusinessLayoutCategories
                             component='categories'
                             categories={[
@@ -373,10 +392,6 @@ export const RenderProductsLayout = (props) => {
                             useKioskApp={useKioskApp}
                             setCategoryClicked={setCategoryClicked}
                           />
-                        ) : (
-                          <CategorySelectedContainer onClick={() => setCategoryClicked(false)}>
-                            <BsCaretLeftFill /> {categorySelected?.name}
-                          </CategorySelectedContainer>
                         )}
                       </>
                     )}
@@ -384,7 +399,7 @@ export const RenderProductsLayout = (props) => {
                   {(categoryClicked || windowSize.width >= 993) && (
                     <BusinessCategoryProductWrapper>
                       <WrapContent isGroceries id='groceries'>
-                        {!business?.loading && business?.previously_products?.length > 0 && (
+                        {!business?.loading && business?.previously_products?.length > 0 && windowSize.width >= 993 && (
                           <OrderItAgain
                             onProductClick={onProductClick}
                             productList={business?.previously_products}
@@ -484,6 +499,7 @@ export const RenderProductsLayout = (props) => {
                 isProducts={currentCart.products.length}
                 isCartOnProductsList={isCartOnProductsList}
                 handleCartOpen={handleCartOpen}
+                businessConfigs={business?.configs}
               />
             </>
           ) : (

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

@@ -224,21 +224,3 @@ export const PageBannerWrapper = styled.div`
     border-radius: 8px;
   }
 `
-
-export const CategorySelectedContainer = styled.div`
-  display: inline;
-  margin-left: 10px;
-  color: ${({ theme }) => theme?.colors?.primary};
-  padding-right: 5px;
-  cursor: pointer;
-  p{
-    margin: 0;
-  }
-  svg {
-    position: relative;
-    top: 2px;
-    margin-right: 3px;
-    width: 14px;
-    height: 14px;
-  }
-`

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

@@ -36,7 +36,6 @@ import {
   NameWrapper,
   StatusInfo,
   DropDownWrapper,
-  DropDownTitle,
   EmptyProfessional,
   SkeletonBlock,
   OrderTimeWrapper,
@@ -143,16 +142,24 @@ const ServiceFormUI = (props) => {
   }
 
   const isBusyTime = (professional) => {
-    if (professional?.busy_times?.length === 0 || !dateSelected) return false
+    if (!dateSelected) return false
+    const startDay = moment(dateSelected).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
     const duration = product?.duration ?? 0
+    const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
     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(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())
+        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -328,7 +335,6 @@ const ServiceFormUI = (props) => {
                 </SelectedItem>
                 {isDropDown && (
                   <DropDownWrapper>
-                    <DropDownTitle>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</DropDownTitle>
                     {professionalListState?.professionals?.map((professional) => (
                       <SelectedItem
                         key={professional?.id}

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

@@ -213,7 +213,7 @@ export const SelectedItem = styled.div`
   ${({ isDropDown }) => isDropDown && css`
     border: none;
     padding: 12px 0px;
-    border-top: 1px solid ${props => props.theme.colors.gray200};
+    border-bottom: 1px solid ${props => props.theme.colors.gray200};
     border-radius: 0px;
     &:hover {
       background-color: ${props => props.theme.colors.grayDividerColor};
@@ -225,14 +225,6 @@ export const SelectedItem = styled.div`
   `}
 `
 
-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`
   display: flex;
   align-items: center;

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

@@ -324,6 +324,12 @@ const SignUpFormUI = (props) => {
     }
   }, [recaptchaConfig])
 
+  const preventWhiteSpaceOnKeyDown = (e) => {
+    if (e.key === " ") {
+      e.preventDefault()
+    }
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -417,6 +423,7 @@ const SignUpFormUI = (props) => {
                                             : null,
                                           pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                         })}
+                                        onKeyDown={preventWhiteSpaceOnKeyDown}
                                         required={!!field.required}
                                         autoComplete='on'
                                         isError={formMethods.errors?.email && !notValidationFields.includes(field.code)}