ordering-ui-external 1.4.5 → 1.5.0

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>

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

@@ -100,7 +100,6 @@ const BusinessProductsCategoriesUI = (props) => {
     })
 
     const navbar = document.getElementById('category-lists')
-    const cart = document.getElementById('BusinessCartContainer')
     const search = document.getElementById('WrapperSearchAbsolute')
     const wrapperCategories = document.getElementById('wrapper-categories')
     const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
@@ -109,12 +108,10 @@ const BusinessProductsCategoriesUI = (props) => {
       const classAdded = navbar.classList.contains('sticky-prod-cat')
       if (!classAdded) {
         navbar && navbar.classList.add('sticky-prod-cat')
-        cart && cart.classList.add('sticky-prod-cart')
         search && search.classList.add('sticky-search')
       }
     } else {
       navbar && navbar.classList.remove('sticky-prod-cat')
-      cart && cart.classList.remove('sticky-prod-cart')
       search && search.classList.remove('sticky-search')
     }
   }
@@ -131,26 +128,17 @@ const BusinessProductsCategoriesUI = (props) => {
     style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`
     style0 += '}'
 
-    let style1 = '.sticky-prod-cart {'
+    let style1 = '.sticky-search {'
     style1 += 'position: fixed !important;'
-    style1 += 'top: 38px !important;'
-    style1 += 'right: 2.5% !important;'
-    style1 += 'width: 28.5% !important;'
-    style1 += 'margin-top: 32px !important;'
+    style1 += 'top: 0px !important;'
+    style1 += 'right: 0% !important;'
+    style1 += 'z-index: 9999 !important;'
+    style1 += 'width: 50px !important;'
+    style1 += `background-color: ${theme.colors.backgroundPage} !important;`
     style1 += '}'
 
-    let style2 = '.sticky-search {'
-    style2 += 'position: fixed !important;'
-    style2 += 'top: 0px !important;'
-    style2 += 'right: 0% !important;'
-    style2 += 'z-index: 9999 !important;'
-    style2 += 'width: 50px !important;'
-    style2 += `background-color: ${theme.colors.backgroundPage} !important;`
-    style2 += '}'
-
     styleSheet.insertRule(style0, 0)
     styleSheet.insertRule(style1, 1)
-    styleSheet.insertRule(style2, 2)
 
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)

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

@@ -10,7 +10,7 @@ export const CategoriesContainer = styled.div`
   top: 0;
   border-bottom: 1px solid #D9D9D9;
   text-align: center;
-  width: ${props => props.w ?? '100%'};
+  width: ${props => props.w || '100%'};
 
   div.category {
     text-overflow: ellipsis;

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

@@ -430,6 +430,7 @@ const BusinessProductsListingUI = (props) => {
                 professionalList={business?.professionals}
                 professionalSelected={professionalSelected}
                 handleChangeProfessional={handleChangeProfessionalSelected}
+                productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === (productModal.product || curProduct)?.id ? Cproduct?.quantity : 0) }, 0) || 0}
               />
             ) : (
               <ProductForm
@@ -438,6 +439,7 @@ const BusinessProductsListingUI = (props) => {
                 product={productModal.product || curProduct}
                 businessId={business?.id}
                 onSave={handlerProductAction}
+                productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === (productModal.product || curProduct)?.id ? Cproduct?.quantity : 0) }, 0) || 0}
               />
             )}
           </>

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

@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components'
 export const ProductsContainer = styled.div`
   width: 95%;
   margin: 20px auto 0px;
-  overflow-x: hidden;
   > svg {
     color: ${props => props.theme.colors.headingColor};
     font-size: 24px;
@@ -32,12 +31,12 @@ export const MobileCartViewWrapper = styled.div`
   left: 0;
   bottom: 0;
   background-color: white;
-  padding: 10px 25px;
+  padding: 15px 25px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  z-index: 1000;
+  z-index: 1006;
   box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);
 
   span {