ordering-ui-external 1.0.0 → 1.1.1

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

@@ -7,31 +7,24 @@ import {
   useLanguage,
   useOrder,
   useSession,
-  useUtils
+  useUtils,
+  useConfig
 } from 'ordering-components-external'
 
 import {
   ProductsContainer,
-  WrapContent,
-  WrapProducts,
   ProductLoading,
-  SkeletonItem,
-  WrappLayout,
-  WrapProductsCategroy
+  SkeletonItem
 } from './styles'
 
 import { NotFoundSource } from '../../../../../components/NotFoundSource'
-
-import { BusinessBasicInformation } from '../BusinessBasicInformation'
-import { BusinessProductsCategories } from '../BusinessProductsCategories'
-import { BusinessProductsList } from '../BusinessProductsList'
 import { PageNotFound } from '../../../../../components/PageNotFound'
 import { ProductForm } from '../ProductForm'
 import { FloatingButton } from '../../../../../components/FloatingButton'
 import { Modal } from '../../../../../components/Modal'
 import { UpsellingPage } from '../../../../../components/UpsellingPage'
-import { Cart } from '../Cart'
 import { useTheme } from 'styled-components'
+import { RenderProductsLayout } from '../RenderProductsLayout'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -48,6 +41,7 @@ const BusinessProductsListingUI = (props) => {
     productId,
     productModal,
     getNextProducts,
+    openCategories,
     handleChangeCategory,
     handleUpdateInitialRender,
     updateProductModal,
@@ -61,10 +55,13 @@ const BusinessProductsListingUI = (props) => {
     errorQuantityProducts
   } = props
 
+  const [{ configs }] = useConfig()
+  const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
   const { business, loading, error } = businessState
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [{ carts }] = useOrder()
+  const [{ carts }, { addProduct, updateProduct }] = useOrder()
+
   const [{ parsePrice }] = useUtils()
   const [events] = useEvent()
   const [{ auth }] = useSession()
@@ -76,22 +73,44 @@ const BusinessProductsListingUI = (props) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
   const [isCartOpen, setIsCartOpen] = useState(false)
+  const [productToIdLoading, setProductIdToLoading] = useState(null)
 
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
-
   const handler = () => {
     setOpenBusinessInformation(true)
   }
 
-  const onProductClick = (product) => {
-    onProductRedirect({
-      slug: business?.slug,
-      product: product.id,
-      category: product.category_id
-    })
-    setCurProduct(product)
-    setModalIsOpen(true)
-    events.emit('product_clicked', product)
+  const onProductClick = async (product) => {
+    if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+      setProductIdToLoading(product.id)
+      const isProductAddedToCart = currentCart?.products?.find(Cproduct => Cproduct.id === product.id)
+      const productQuantity = isProductAddedToCart?.quantity
+      const addCurrentProduct = {
+        ...product,
+        quantity: 1
+      }
+      const updateCurrentProduct = {
+        id: product.id,
+        code: isProductAddedToCart?.code,
+        quantity: productQuantity + 1
+      }
+      const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
+      if (isProductAddedToCart) {
+        await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
+      } else {
+        await addProduct(addCurrentProduct, cartData, isQuickAddProduct)
+      }
+      setProductIdToLoading(null)
+    } else {
+      onProductRedirect({
+        slug: business?.slug,
+        product: product.id,
+        category: product.category_id
+      })
+      setCurProduct(product)
+      setModalIsOpen(true)
+      events.emit('product_clicked', product)
+    }
   }
 
   const handlerProductAction = (product) => {
@@ -171,97 +190,34 @@ const BusinessProductsListingUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <ProductsContainer>
-        {
-          !loading && business?.id && (
-            <WrappLayout
-              isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
-            >
-              <div className='bp-list'>
-                <BusinessBasicInformation
-                  businessState={businessState}
-                  categoryState={categoryState}
-                  searchValue={searchValue}
-                  sortByValue={sortByValue}
-                  handleChangeSearch={handleChangeSearch}
-                  handleChangeSortBy={handleChangeSortBy}
-                  errorQuantityProducts={errorQuantityProducts}
-                  setOpenBusinessInformation={setOpenBusinessInformation}
-                  openBusinessInformation={openBusinessInformation}
-                />
-                <WrapContent>
-                  <WrapProductsCategroy>
-                    {!(business?.categories?.length === 0 && !categoryId) && (
-                      <BusinessProductsCategories
-                        categories={[{ id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') }, { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') }, ...business?.categories.sort((a, b) => a.rank - b.rank)]}
-                        categorySelected={categorySelected}
-                        onClickCategory={handleChangeCategory}
-                        featured={featuredProducts}
-                        openBusinessInformation={openBusinessInformation}
-                      />
-                    )}
-                  </WrapProductsCategroy>
-                  <WrapProducts>
-                    <BusinessProductsList
-                      categories={[
-                        { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
-                        { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') },
-                        ...business?.categories.sort((a, b) => a.rank - b.rank)
-                      ]}
-                      category={categorySelected}
-                      categoryState={categoryState}
-                      businessId={business.id}
-                      errors={errors}
-                      onProductClick={onProductClick}
-                      handleSearchRedirect={handleSearchRedirect}
-                      featured={featuredProducts}
-                      searchValue={searchValue}
-                      isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
-                      handleClearSearch={handleChangeSearch}
-                      errorQuantityProducts={errorQuantityProducts}
-                    />
-                  </WrapProducts>
-                </WrapContent>
-              </div>
-              {isCartOnProductsList && currentCart?.products?.length > 0 && (
-                <Cart
-                  isForceOpenCart
-                  cart={currentCart}
-                  isCartPending={currentCart?.status === 2}
-                  isProducts={currentCart.products.length}
-                  isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
-                  handleCartOpen={(val) => setIsCartOpen(val)}
-                />
-              )}
-            </WrappLayout>
-          )
-        }
-
-        {loading && !error && (
-          <>
-            <BusinessBasicInformation
-              businessState={{ business: {}, loading: true }}
-              isSkeleton
-              handler={handler}
-              openBusinessInformation={openBusinessInformation}
-            />
-            <WrapContent>
-              <BusinessProductsCategories
-                categories={[]}
-                isSkeleton
-                openBusinessInformation={openBusinessInformation}
-              />
-              <WrapProducts>
-                <BusinessProductsList
-                  categories={[]}
-                  category={categorySelected}
-                  categoryState={categoryState}
-                  isBusinessLoading={loading}
-                  errorQuantityProducts={errorQuantityProducts}
-                />
-              </WrapProducts>
-            </WrapContent>
-          </>
-        )}
+        <RenderProductsLayout
+          errors={errors}
+          isError={error}
+          isLoading={loading}
+          business={business}
+          categoryId={categoryId}
+          searchValue={searchValue}
+          sortByValue={sortByValue}
+          currentCart={currentCart}
+          businessState={businessState}
+          categoryState={categoryState}
+          categoriesState={props.categoriesState}
+          categorySelected={categorySelected}
+          openCategories={openCategories}
+          openBusinessInformation={openBusinessInformation}
+          isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
+          handleChangeSortBy={handleChangeSortBy}
+          errorQuantityProducts={errorQuantityProducts}
+          onClickCategory={handleChangeCategory}
+          featuredProducts={featuredProducts}
+          handler={handler}
+          onProductClick={onProductClick}
+          handleSearchRedirect={handleSearchRedirect}
+          handleChangeSearch={handleChangeSearch}
+          setOpenBusinessInformation={setOpenBusinessInformation}
+          productToIdLoading={productToIdLoading}
+          handleCartOpen={(val) => setIsCartOpen(val)}
+        />
 
         {
           !loading && business && !Object.keys(business).length && (

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

@@ -1,35 +1,7 @@
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 export const ProductsContainer = styled.div`
 `
-
-export const WrapContent = styled.div`
-  background: ${props => props.theme.colors.backgroundPage};
-  margin: 0 auto;
-  width: 91%;
-  box-sizing: border-box;
-
-  @media (min-width: 768px ){
-    width: 85%;
-    display: flex;
-    justify-content: space-between;
-    padding: 20px 0;
-  }
-`
-
-export const WrapProductsCategroy = styled.div`
-  @media (min-width: 768px) {
-    min-width: 150px;
-    max-width: 150px;
-  }
-`
-
-export const WrapProducts = styled.div`
-  @media (min-width: 768px) {
-    width: calc(100% - 170px);
-  }
-`
-
 export const ProductsNotFound = styled.div`
   display: flex;
   flex-direction: column;
@@ -66,45 +38,3 @@ export const SkeletonItem = styled.div`
     margin-bottom: 10px;
   }
 `
-
-export const WrappLayout = styled.div`
-  ${({ isCartOnProductsList }) => isCartOnProductsList && css`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .bp-list,
-    .cart {
-      width: 100%;
-    }
-
-    @media (min-width: 870px) {
-      flex-direction: row;
-      .bp-list {
-        width: 55%;
-      }
-      .cart {
-        width: calc(45% - 20px);
-        margin-left: 20px;
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .bp-list {
-        width: 60%;
-      }
-      .cart {
-        width: calc(40% - 20px);
-      }
-    }  
-
-    @media (min-width: 1200px) {
-      .bp-list {
-        width: 70%;
-      }
-      .cart {
-        width: calc(30% - 20px);
-      }
-    }  
-  `}
-`

package/src/themes/four/src/components/ForgotPasswordForm/index.js

@@ -51,7 +51,9 @@ const ForgotPasswordUI = (props) => {
   const handleChangeInputEmail = (e) => {
     hanldeChangeInput({ 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/four/src/components/LoginForm/index.js

@@ -140,7 +140,9 @@ const LoginFormUI = (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, '')
+    }
   }
 
   const handleChangePhoneNumber = (number, isValid) => {
@@ -242,10 +244,10 @@ const LoginFormUI = (props) => {
         open: true,
         content: verifyPhoneState?.result?.result || [t('ERROR', 'Error')]
       })
-    
+
     else
       resetOtpLeftTime()
-      
+
   }, [verifyPhoneState])
 
   return (
@@ -274,14 +276,14 @@ const LoginFormUI = (props) => {
                   isPopup={isPopup}
                 >
                   {
-                  props.beforeMidElements?.map((BeforeMidElements, i) => (
-                    <React.Fragment key={i}>
-                      {BeforeMidElements}
-                    </React.Fragment>))
+                    props.beforeMidElements?.map((BeforeMidElements, i) => (
+                      <React.Fragment key={i}>
+                        {BeforeMidElements}
+                      </React.Fragment>))
                   }
                   {
-                  props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-                    <BeforeMidComponents key={i} {...props} />))
+                    props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+                      <BeforeMidComponents key={i} {...props} />))
                   }
                   {useLoginByEmail && loginTab === 'email' && (
                     <Input
@@ -299,7 +301,7 @@ const LoginFormUI = (props) => {
                     <InputPhoneNumber
                       value={credentials?.cellphone}
                       setValue={handleChangePhoneNumber}
-                      handleIsValid={() => {}}
+                      handleIsValid={() => { }}
                     />
                   )}
 
@@ -341,7 +343,7 @@ const LoginFormUI = (props) => {
 
                   {(verifyPhoneState?.loading || checkPhoneCodeState?.loading) && (
                     <SpinnerLoader
-                      style={{height: 160}}
+                      style={{ height: 160 }}
                     />
                   )}
 
@@ -363,14 +365,14 @@ const LoginFormUI = (props) => {
                     </WrapperPassword>
                   )}
                   {
-                  props.afterMidElements?.map((MidElement, i) => (
-                    <React.Fragment key={i}>
-                      {MidElement}
-                    </React.Fragment>))
+                    props.afterMidElements?.map((MidElement, i) => (
+                      <React.Fragment key={i}>
+                        {MidElement}
+                      </React.Fragment>))
                   }
                   {
-                  props.afterMidComponents?.map((MidComponent, i) => (
-                    <MidComponent key={i} {...props} />))
+                    props.afterMidComponents?.map((MidComponent, i) => (
+                      <MidComponent key={i} {...props} />))
                   }
                   {(!willVerifyOtpState &&
                     <Button
@@ -378,12 +380,12 @@ const LoginFormUI = (props) => {
                       onClick={formMethods.handleSubmit(onSubmit)}
                       disabled={formState.loading}
                     >
-                    {formState.loading
-                      ? `${t('LOADING', 'Loading')}...`
-                      : loginWithOtpState
-                        ? t('GET_VERIFY_CODE', 'Get verify code')
-                        : t('LOGIN', 'Login')
-                    }
+                      {formState.loading
+                        ? `${t('LOADING', 'Loading')}...`
+                        : loginWithOtpState
+                          ? t('GET_VERIFY_CODE', 'Get verify code')
+                          : t('LOGIN', 'Login')
+                      }
                     </Button>
                   )}
                   {(loginWithOtpState && !willVerifyOtpState) && (
@@ -424,30 +426,30 @@ const LoginFormUI = (props) => {
                 Object.keys(configs).length > 0 ? (
                   <SocialButtons isPopup={isPopup}>
                     {(configs?.facebook_login?.value === 'true' ||
-                    configs?.facebook_login?.value === '1') &&
-                    configs?.facebook_id?.value &&
-                  (
-                    <FacebookLoginButton
-                      appId={configs?.facebook_id?.value}
-                      handleSuccessFacebookLogin={handleSuccessFacebook}
-                    />
-                  )}
+                      configs?.facebook_login?.value === '1') &&
+                      configs?.facebook_id?.value &&
+                      (
+                        <FacebookLoginButton
+                          appId={configs?.facebook_id?.value}
+                          handleSuccessFacebookLogin={handleSuccessFacebook}
+                        />
+                      )}
                     {configs?.apple_login_client_id?.value &&
-                  (
-                    <AppleLogin
-                      onSuccess={handleSuccessApple}
-                      onFailure={(data) => console.log('onFailure', data)}
-                    />
-                  )}
-                  
-                  {useLoginByCellphone && loginTab === 'cellphone' &&
-                  configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                    configs?.twilio_service_enabled?.value === '1')  && (
-                    <SmsLoginButton
-                      style={{ borderRadius: 8 }}
-                      handleSmsLogin={() => {setLoginWithOtpState(true)}}
-                    />
-                  )}
+                      (
+                        <AppleLogin
+                          onSuccess={handleSuccessApple}
+                          onFailure={(data) => console.log('onFailure', data)}
+                        />
+                      )}
+
+                    {useLoginByCellphone && loginTab === 'cellphone' &&
+                      configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
+                        configs?.twilio_service_enabled?.value === '1') && (
+                        <SmsLoginButton
+                          style={{ borderRadius: 8 }}
+                          handleSmsLogin={() => { setLoginWithOtpState(true) }}
+                        />
+                      )}
                   </SocialButtons>
                 ) : (
                   <SkeletonSocialWrapper>

package/src/themes/four/src/components/NotFoundSource/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+
+import {
+  NotFound,
+  NotFoundImage
+} from './styles'
+
+export const NotFoundSource = (props) => {
+  const {
+    image,
+    content,
+    btnTitle,
+    conditioned,
+    onClickButton
+  } = props
+
+  const theme = useTheme()
+
+  const errorImage = image || theme.images?.general?.notFound
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))
+      }
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))
+      }
+      <NotFound id='not-found-source'>
+        {errorImage && (
+          <NotFoundImage>
+            <img src={errorImage} alt='Not Found' width='300' height='260' loading='lazy' />
+          </NotFoundImage>
+        )}
+        {content && conditioned && !errorImage && <h1>{content}</h1>}
+        {content && !conditioned && <h1>{content}</h1>}
+        {!onClickButton && props.children && (
+          props.children
+        )}
+        {onClickButton && (
+          <div>
+            <Button
+              outline
+              color='primary'
+              onClick={() => onClickButton()}
+            >
+              {btnTitle}
+            </Button>
+          </div>
+        )}
+      </NotFound>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))
+      }
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))
+      }
+    </>
+  )
+}

package/src/themes/four/src/components/NotFoundSource/styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+export const NotFound = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  height: auto;
+  margin: 20px auto;
+
+  h1 {
+    font-size: 20px;
+    opacity: 0.5;
+    text-align: center;
+  }
+
+  @media (min-width: 840px) {
+    h1 {
+      font-size: 24px;
+    }
+  }
+`
+
+export const NotFoundImage = styled.div`
+  max-width: 300px;
+`