ordering-ui-external 1.4.5 → 1.5.1

package/src/components/LogoutButton/index.js

@@ -13,7 +13,7 @@ import {
 } from '../SidebarMenu/styles'
 
 const LogoutButtonUI = (props) => {
-  const { onCustomClick } = props
+  const { onCustomClick, hideText } = props
   const [, t] = useLanguage()
 
   const isHome = window.location.pathname === '/' || window.location.pathname === '/home'
@@ -40,16 +40,18 @@ const LogoutButtonUI = (props) => {
   }
 
   return (
-    <MenuLink onClick={handleLogOutClick} isHome={isHome}>
-      <WrappContent>
+    <MenuLink id='logoutbtn' onClick={handleLogOutClick} isHome={isHome} style={props.styleContainer}>
+      <WrappContent style={props.styleWrappContent}>
         <MenuLinkIcon isHome={isHome}>
           <FaSignOutAlt />
         </MenuLinkIcon>
-        <MenuLinkText>
-          <TextInfo isHome={isHome}>
-            {t('LOGOUT', 'Logout')}
-          </TextInfo>
-        </MenuLinkText>
+        {!hideText && (
+          <MenuLinkText>
+            <TextInfo isHome={isHome}>
+              {t('LOGOUT', 'Logout')}
+            </TextInfo>
+          </MenuLinkText>
+        )}
         <MenuLinkSeparator>
           <div>
             <hr />

package/src/components/PaymentOptions/index.js

@@ -8,9 +8,10 @@ import FaCcStripe from '@meronex/icons/fa/FaCcStripe'
 import FaStripeS from '@meronex/icons/fa/FaStripeS'
 import GrStripe from '@meronex/icons/gr/GrStripe'
 import EnPaypal from '@meronex/icons/en/EnPaypal'
-import {
+import { 
   PaymentOptions as PaymentOptionsController,
   useLanguage,
+  useOrder,
   useSession
 } from 'ordering-components-external'
 
@@ -83,10 +84,14 @@ const PaymentOptionsUI = (props) => {
     setCardData,
     onPlaceOrderClick,
     setCreateOrder,
-    handlePlaceOrder
+    handlePlaceOrder,
+    paymethods
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
+  const [{ loading: loadingOptions }] = useOrder()
+
+  const list = paymethods ? paymethods?.map(pay => pay.paymethod) : paymethodsList?.paymethods
 
   const paymethodSelected = props.paySelected || props.paymethodSelected
 
@@ -100,10 +105,10 @@ const PaymentOptionsUI = (props) => {
   }
 
   useEffect(() => {
-    if (paymethodsList.paymethods.length === 1) {
-      handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
+    if (list?.length === 1) {
+      handlePaymethodClick && handlePaymethodClick(list[0])
     }
-  }, [paymethodsList.paymethods])
+  }, [list])
 
   useEffect(() => {
     if (paymethodSelected?.gateway !== 'cash' && errorCash) {
@@ -134,8 +139,9 @@ const PaymentOptionsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <PaymentMethodsContainer>
         <PaymentMethodsList className='payments-list'>
-          {paymethodsList.paymethods.length > 0 && (
-            paymethodsList.paymethods.sort((a, b) => a.id - b.id).map(paymethod => (
+          {!(paymethodsList.loading || isLoading || loadingOptions) &&
+          list?.length > 0 && (
+            list?.sort((a, b) => a.id - b.id).map(paymethod => (
               <React.Fragment key={paymethod.id}>
                 {
                   (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
@@ -154,8 +160,7 @@ const PaymentOptionsUI = (props) => {
               </React.Fragment>
             ))
           )}
-
-          {(paymethodsList.loading || isLoading) && (
+          {(paymethodsList.loading || isLoading || loadingOptions) && (
             [...Array(5).keys()].map(i => (
               <PayCard key={i} isSkeleton>
                 <Skeleton key={i} width={100} height={60} style={{ marginLeft: '10px' }} />
@@ -169,9 +174,9 @@ const PaymentOptionsUI = (props) => {
             />
           )}
 
-          {!(paymethodsList.loading || isLoading) &&
+          {!(paymethodsList.loading || isLoading || loadingOptions) &&
             !paymethodsList.error &&
-            (!paymethodsList?.paymethods || paymethodsList.paymethods.length === 0) &&
+            !(list || list?.length) &&
             (
               <p>{t('NO_PAYMENT_METHODS', 'No payment methods!')}</p>
             )}

package/src/components/SpinnerLoader/styles.js

@@ -6,6 +6,7 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 2001;
   flex-direction: column;
 `
 

package/src/components/UserProfileForm/index.js

@@ -9,6 +9,7 @@ import {
   useOrderingTheme
 } from 'ordering-components-external'
 
+import { useWindowSize } from '../../hooks/useWindowSize'
 import { UserFormDetailsUI } from '../UserFormDetails'
 import { UserFormDetailsUI as UserFormDetailsFiveUI } from '../../themes/five/src/components/UserFormDetails'
 import { AddressList } from '../AddressList'
@@ -35,6 +36,7 @@ import {
   SkeletonWrapper,
   WrapperForm
 } from './styles'
+import { LogoutButton } from '../LogoutButton'
 
 const UserProfileFormUI = (props) => {
   const {
@@ -53,6 +55,7 @@ const UserProfileFormUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const inputRef = useRef(null)
   const [orderingTheme] = useOrderingTheme()
+  const windowSize = useWindowSize()
 
   const showCustomerPicture = !orderingTheme?.theme?.profile?.components?.picture?.hidden
   const showCustomerName = !orderingTheme?.theme?.profile?.components?.name?.hidden
@@ -119,7 +122,7 @@ const UserProfileFormUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {!isHiddenAddress && (
+      {!isHiddenAddress && !props.hideOptions && (
         <ProfileOptions value='account' />
       )}
       <Container>
@@ -141,7 +144,7 @@ const UserProfileFormUI = (props) => {
                             </UploadImageIcon>
                           )
                         : formState?.changes?.photo && formState.result.error &&
-                        <img src={formState?.changes?.photo} alt='user image' loading='lazy' />
+                          <img src={formState?.changes?.photo} alt='user image' loading='lazy' />
                       )}
                   </DragAndDrop>
                 </ExamineClick>
@@ -177,6 +180,13 @@ const UserProfileFormUI = (props) => {
                       {t('EDIT', 'Edit')}
                     </Button>
                   )}
+                  {windowSize.width <= 576 && props.showLogout && (
+                    <LogoutButton
+                      hideText
+                      styleContainer={{ margin: 'auto', width: 24 }}
+                      styleWrappContent={{ paddingRight: 0, paddingLeft: 0 }}
+                    />
+                  )}
                 </UserData>
               )
             ) : (

package/src/components/UserProfileForm/styles.js

@@ -110,7 +110,7 @@ export const UserData = styled.div`
     font-size: 20px
   }
 
-  > * {
+  > *:not(#logoutbtn) {
     margin: 5px 0;
     width: 75%;
   }

package/src/hooks/useRecaptcha.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import { useConfig, useLanguage, useToast, ToastType } from 'ordering-components-external'
+
+/**
+ * Hook to mangage Recaptcha version
+ * @param {boolean} enableRecaptcha
+ */
+export const useRecaptcha = (enableRecaptcha) => {
+  const [{ configs }] = useConfig()
+  const [reCaptchaConfig, setRecaptchaConfig] = useState({ version: 'v3', siteKey: '' })
+  const [, { showToast }] = useToast()
+  const [, t] = useLanguage()
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableRecaptcha && reCaptchaConfig?.siteKey === '') {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value,
+          error: false
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value,
+          error: false
+        })
+        return
+      }
+      showToast(ToastType.Error, t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key'))
+    }
+  }, [configs, enableRecaptcha])
+
+  return [reCaptchaConfig]
+}

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

@@ -26,7 +26,7 @@ export const FormControl = styled.form`
   input {
     box-sizing: border-box;
     margin: 10px 0px;
-    height: 43px;
+    height: 50px;
     width: 100%;
     &.internal_number,
     &.zipcode {
@@ -106,6 +106,7 @@ export const AddressWrap = styled.div`
   justify-content: space-between;
   align-items: center;
   position: relative;
+  margin-top: -11px;
 
   button {
     height: 41px;
@@ -204,7 +205,7 @@ export const WrapperMap = styled.div`
 export const WrapperSkeleton = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 9px 10px;
 
   span {
     width: 100%;

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

@@ -79,7 +79,7 @@ const AddressListUI = (props) => {
   const { width } = useWindowSize()
   const isCompletedLayout = width < 769 || isProfile
   const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-    (address, i, self) =>
+    (address, i, self) => address.address &&
       i === self.findIndex(obj => (
         address.address === obj.address &&
         address.address_notes === obj.address_notes &&

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

@@ -252,9 +252,9 @@ export const CloseIcon = styled.div`
 
 export const TitleFormContainer = styled.div`
   display: flex; 
-  align-items: center;
+  align-items: flex-start;
   h1 {
-    margin: auto;
+    margin: 0 auto;
     font-size: 24px;
   }
 `

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

@@ -33,7 +33,8 @@ import {
   SearchIconWrapper,
   SearchComponentContainer,
   SocialList,
-  IconWrapper
+  IconWrapper,
+  BusinessInfoWrapper
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
 
@@ -377,81 +378,83 @@ export const BusinessBasicInformation = (props) => {
           business={businessState.business}
         />
       )}
-      {!isInfoShrunken && (
-        <BusinessInfoComponent />
-      )}
-      <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
-        {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
-        {showLogo && (
-          <BusinessContent>
-            <WrapperBusinessLogo>
-              {!loading ? (
-                <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
-              ) : (
-                <Skeleton height={70} width={70} />
-              )}
-            </WrapperBusinessLogo>
-          </BusinessContent>
-        )}
-        {isInfoShrunken && (
+      <BusinessInfoWrapper>
+        {!isInfoShrunken && (
           <BusinessInfoComponent />
         )}
-        {!loading && (
-          <>
-            {isInfoShrunken && (
-              <SearchComponentContainer>
-                <SearchComponent />
-              </SearchComponentContainer>
-            )}
-            <BusinessMoreDetail>
-              <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
-            </BusinessMoreDetail>
-          </>
-        )}
-        <Modal
-          width='70%'
-          open={openBusinessInformation}
-          onClose={setOpenBusinessInformation}
-          padding='0'
-          hideCloseDefault
-          isTransparent
-        >
-          <BusinessInformation
-            business={business}
-            getBusinessType={getBusinessType}
-            optimizeImage={optimizeImage}
+        <BusinessContainer bgimage={business?.header || theme?.images?.dummies?.businessHeader} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
+          {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
+          {showLogo && (
+            <BusinessContent>
+              <WrapperBusinessLogo>
+                {!loading ? (
+                  <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+                ) : (
+                  <Skeleton height={70} width={70} />
+                )}
+              </WrapperBusinessLogo>
+            </BusinessContent>
+          )}
+          {isInfoShrunken && (
+            <BusinessInfoComponent />
+          )}
+          {!loading && (
+            <>
+              {isInfoShrunken && (
+                <SearchComponentContainer>
+                  <SearchComponent />
+                </SearchComponentContainer>
+              )}
+              <BusinessMoreDetail>
+                <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
+              </BusinessMoreDetail>
+            </>
+          )}
+          <Modal
+            width='70%'
+            open={openBusinessInformation}
             onClose={setOpenBusinessInformation}
-          />
-        </Modal>
-        <Modal
-          width='70%'
-          open={isBusinessReviews}
-          onClose={() => setIsBusinessReviews(false)}
-          padding='20px'
-        >
-          <BusinessReviews
-            businessId={business.id}
-            reviews={business.reviews?.reviews}
-            businessName={business.name}
-            stars={business.reviews?.total}
-          />
-        </Modal>
-        <Modal
-          open={isPreOrder}
-          width={isCustomerMode ? '700px' : '760px'}
-          onClose={() => setIsPreOrder(false)}
-          padding={isCustomerMode && '20px'}
-        >
-          {isCustomerMode ? (
-            <MomentContent onClose={() => setIsPreOrder(false)} />
-          ) : (
-            <BusinessPreorder
+            padding='0'
+            hideCloseDefault
+            isTransparent
+          >
+            <BusinessInformation
               business={business}
-              handleClick={() => setIsPreOrder(false)}
+              getBusinessType={getBusinessType}
+              optimizeImage={optimizeImage}
+              onClose={setOpenBusinessInformation}
             />
-          )}
-        </Modal>
-      </BusinessContainer>
+          </Modal>
+          <Modal
+            width='70%'
+            open={isBusinessReviews}
+            onClose={() => setIsBusinessReviews(false)}
+            padding='20px'
+          >
+            <BusinessReviews
+              businessId={business.id}
+              reviews={business.reviews?.reviews}
+              businessName={business.name}
+              stars={business.reviews?.total}
+            />
+          </Modal>
+          <Modal
+            open={isPreOrder}
+            width={isCustomerMode ? '700px' : '760px'}
+            onClose={() => setIsPreOrder(false)}
+            padding={isCustomerMode && '20px'}
+          >
+            {isCustomerMode ? (
+              <MomentContent onClose={() => setIsPreOrder(false)} />
+            ) : (
+              <BusinessPreorder
+                business={business}
+                handleClick={() => setIsPreOrder(false)}
+              />
+            )}
+          </Modal>
+        </BusinessContainer>
+      </BusinessInfoWrapper>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -14,9 +14,8 @@ export const BusinessContainer = styled.div`
   object-fit: cover;
   background-position: center;
   min-height: 200px;
-  justify-content: center;
+  justify-content: start;
   align-items: flex-end;
-  border-radius: 7.6px;
 
   ${props => props.isSkeleton && css`
     background-color: #cccccc;
@@ -40,27 +39,45 @@ export const BusinessContainer = styled.div`
     padding: 0;
   }
 
-  @media (min-width: 490px) {
-    justify-content: flex-start;
+  @media (min-width: 576px) {
+    border-radius: 7.6px;
   }
+
+
 `
 
 export const BusinessContent = styled.div`
-  border-radius: 10px;
-  margin: 10px;
-  max-height: 124px;
-  width: 124px;
+  margin: 0;
+  margin-left: 35px;
+  margin-bottom: -35px;
+  max-height: 80px;
+  width: 80px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+
+  @media (min-width: 576px) {
+    border-radius: 10px;
+    margin: 10px;
+    max-height: 124px;
+    width: 124px;
+  }
 
-  @media (min-width: 426px) {
+  @media (min-width: 768px) {
     margin: 25px;
   }
 `
 
 export const WrapperBusinessLogo = styled.div`
-  max-width: 124px;
-  max-height: 124px;
-  height: 124px;
-  width: 124px;
+  max-width: 80px;
+  max-height: 80px;
+  width: 80px;
+  height: 80px;
+  
+  @media (min-width: 576px) {
+    max-width: 124px;
+    max-height: 124px;
+    height: 124px;
+    width: 124px;
+  }
 `
 
 const BusinessLogoStyled = styled.div`
@@ -73,8 +90,11 @@ const BusinessLogoStyled = styled.div`
   background-size: cover;
   object-fit: cover;
   background-position: center;
-  min-height: 124px;
+  min-height: 80px;
   border-radius: 7.6px;
+  @media (min-width: 576px) {
+    min-height: 124px;
+  }
 `
 export const BusinessLogo = (props) => {
   const style = {}
@@ -141,18 +161,31 @@ export const BusinessInfoItem = styled.div`
 `
 
 export const BusinessInfoContainer = styled.div`
-  padding: 10px 0px;
-  margin-bottom: 15px;
+  padding-top: 40px;
+  padding-left: 5px;
+  padding-right: 5px;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
+  box-sizing: border-box;
+  align-items: flex-end;
+
+  @media (min-width: 576px) {
+    padding-top: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
+    margin-top: 10px;
+  }
 
-  @media (min-width: 700px) {
+  @media (min-width: 768px) {
     flex-direction: row;
+    margin-bottom: 25px;
   }
 `
 
-export const BusinessInfoContent = styled.div``
+export const BusinessInfoContent = styled.div`
+  width: 100%;
+`
 
 export const WrapperSearch = styled.div`
   margin: 15px 0px 0px;
@@ -296,9 +329,17 @@ export const TitleWrapper = styled.div`
   flex-wrap: wrap;
 
   h2 {
-    font-weight: 600;
-    font-size: 32px;
+    font-size: 24px;
+    line-height: 36px;
     margin: 0 0 10px 0;
+    font-weight: 600;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @media (min-width: 768px) {
+      font-size: 32px;
+    }
   }
 `
 
@@ -404,3 +445,11 @@ export const IconWrapper = styled.a`
     }
   }
 `
+
+export const BusinessInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  @media (min-width: 768px) {
+    flex-direction: column;
+  }
+`

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

@@ -8,7 +8,7 @@ import { Modal } from '../Modal'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
-import { convertHoursToMinutes, shape } from '../../../../../utils'
+import { convertHoursToMinutes, LightenDarkenColor, shape } from '../../../../../utils'
 
 import {
   ContainerCard,
@@ -145,6 +145,8 @@ const BusinessControllerUI = (props) => {
           {business?.ribbon?.enabled && (
             <RibbonBox
               bgColor={business?.ribbon?.color}
+              colorText={LightenDarkenColor(business?.ribbon?.color, -200)}
+              borderRibbon={LightenDarkenColor(business?.ribbon?.color, -200)}
               isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
               isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
             >

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

@@ -449,6 +449,14 @@ export const RibbonBox = styled.div`
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${({ colorText }) => colorText && css`
+    color: ${colorText};
+  `}
+
+  ${({ borderRibbon }) => borderRibbon && css`
+    border: 1px solid ${borderRibbon};
+  `}
 `
 
 export const FavoriteWrapper = styled.div`

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import {
   BusinessListingSearchContainer,
   FiltersContainer,
@@ -55,6 +55,8 @@ import { Modal } from '../Modal'
 import { ProductForm } from '../ProductForm'
 import { MaxSectionItem } from './MaxSectionItem'
 
+const PIXELS_TO_SCROLL = 300
+
 export const BusinessListingSearchUI = (props) => {
   const {
     businessesSearchList,
@@ -99,6 +101,14 @@ export const BusinessListingSearchUI = (props) => {
 
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
 
+  const handleScroll = useCallback(() => {
+    const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
+    const badScrollPosition = innerHeightScrolltop < document.documentElement?.offsetHeight
+    const hasMore = !(paginationProps?.totalPages === paginationProps?.currentPage)
+    if (badScrollPosition || businessesSearchList?.loading || businessesSearchList.error?.length > 0 || !hasMore) return
+    handleSearchbusinessAndProducts()
+  }, [businessesSearchList.loading, paginationProps])
+
   const handleChangeBrandFilter = (brandId) => {
     let franchiseIds = [...filters?.franchise_ids]
     if (filters?.franchise_ids?.includes(brandId)) franchiseIds = filters?.franchise_ids?.filter(item => item !== brandId)
@@ -124,6 +134,11 @@ export const BusinessListingSearchUI = (props) => {
     setCurProduct({ business: null, product: null })
   }
 
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
   return (
     <BusinessListingSearchContainer>
       <BusinessesTitle>