ordering-ui-external 1.0.1 → 1.1.0

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

@@ -0,0 +1,306 @@
+import React, { useState } from 'react'
+import { useTheme } from 'styled-components'
+import { useLanguage, useConfig, useUtils } from 'ordering-components-external'
+import AiOutlineShoppingCart from '@meronex/icons/ai/AiOutlineShoppingCart'
+
+import { BusinessBasicInformation } from '../BusinessBasicInformation'
+import { BusinessProductsCategories } from '../BusinessProductsCategories'
+import { BusinessProductsList } from '../BusinessProductsList'
+import { BusinessProductsCategories as CategoriesLayoutGroceries } from '../BusinessProductsCategories/layouts/groceries'
+import { BusinessProductsList as ProductListLayoutGroceries } from '../BusinessProductsList/layouts/groceries'
+import { Modal } from '../../../../../components/Modal'
+import { Cart } from '../Cart'
+import { NotFoundSource } from '../NotFoundSource'
+import { Button } from '../../styles/Buttons'
+import {
+  Title,
+  WrappLayout,
+  WrapContent,
+  BusinessCategoryProductWrapper,
+  BusinessCategoriesContainer,
+  BusinessCartContent,
+  EmptyCart,
+  EmptyBtnWrapper
+} from './styles'
+
+const layoutOne = 'groceries'
+
+export const RenderProductsLayout = (props) => {
+  const {
+    errors,
+    isError,
+    isLoading,
+    business,
+    categoryId,
+    searchValue,
+    sortByValue,
+    currentCart,
+    businessState,
+    categoryState,
+    categorySelected,
+    openCategories,
+    openBusinessInformation,
+    isCartOnProductsList,
+    handleChangeSortBy,
+    errorQuantityProducts,
+    handler,
+    onClickCategory,
+    featuredProducts,
+    onProductClick,
+    handleSearchRedirect,
+    handleChangeSearch,
+    setOpenBusinessInformation,
+    handleCartOpen,
+    productToIdLoading
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+  const [isCartModal, setisCartModal] = useState(false)
+
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
+
+  const frontLayout = business?.front_layout
+  const businessLayout = {
+    layoutOne: frontLayout === layoutOne && isUseParentCategory
+  }
+
+  const BusinessLayout = (props) => {
+    const components = {
+      categories: businessLayout.layoutOne
+        ? CategoriesLayoutGroceries
+        : BusinessProductsCategories,
+      products_list: businessLayout.layoutOne
+        ? ProductListLayoutGroceries
+        : BusinessProductsList
+    }
+
+    const ComponentToRender = props?.component && components[props?.component]
+
+    return (
+      props?.component && (
+        <ComponentToRender {...props} />
+      )
+    )
+  }
+
+  return (
+    <>
+      {!isLoading && business?.id && (
+        <WrappLayout
+          isLayoutOne={businessLayout.layoutOne}
+          isCartOnProductsList={isCartOnProductsList}
+        >
+          {!businessLayout.layoutOne && (
+            <>
+              <div className='bp-list'>
+                <BusinessBasicInformation
+                  businessState={businessState}
+                  categoryState={categoryState}
+                  searchValue={searchValue}
+                  sortByValue={sortByValue}
+                  handleChangeSearch={handleChangeSearch}
+                  handleChangeSortBy={handleChangeSortBy}
+                  errorQuantityProducts={errorQuantityProducts}
+                  setOpenBusinessInformation={setOpenBusinessInformation}
+                  openBusinessInformation={openBusinessInformation}
+                />
+                {!errorQuantityProducts ? (
+                  <WrapContent>
+                    <BusinessCategoriesContainer>
+                      {!(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={onClickCategory}
+                          featured={featuredProducts}
+                          openBusinessInformation={openBusinessInformation}
+                        />
+                      )}
+                    </BusinessCategoriesContainer>
+                    <BusinessCategoryProductWrapper>
+                      <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}
+                        currentCart={currentCart}
+                        productToIdLoading={productToIdLoading}
+                      />
+                    </BusinessCategoryProductWrapper>
+                  </WrapContent>
+                ) : (
+                  <NotFoundSource
+                    content={t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time')}
+                    btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+                    onClickButton={() => handleSearchRedirect()}
+                  />
+                )}
+              </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) => handleCartOpen(val)}
+                />
+              )}
+            </>
+          )}
+
+          {businessLayout.layoutOne && (
+            <>
+              <BusinessBasicInformation
+                businessState={businessState}
+                categoryState={categoryState}
+                searchValue={searchValue}
+                sortByValue={sortByValue}
+                handleChangeSearch={handleChangeSearch}
+                handleChangeSortBy={handleChangeSortBy}
+                errorQuantityProducts={errorQuantityProducts}
+                setOpenBusinessInformation={setOpenBusinessInformation}
+                openBusinessInformation={openBusinessInformation}
+              />
+              {!errorQuantityProducts ? (
+                <>
+                  <WrapContent>
+                    <BusinessCategoriesContainer>
+                      {!(business?.categories?.length === 0 && !categoryId) && (
+                        <BusinessLayout
+                          component='categories'
+                          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={onClickCategory}
+                          featured={featuredProducts}
+                          openBusinessInformation={openBusinessInformation}
+                          openCategories={openCategories}
+                          business={business}
+                        />
+                      )}
+                    </BusinessCategoriesContainer>
+                    <BusinessCategoryProductWrapper>
+                      <BusinessLayout
+                        component='products_list'
+                        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}
+                        onClickCategory={onClickCategory}
+                        categoriesState={props.categoriesState}
+                        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}
+                        business={business}
+                        currentCart={currentCart}
+                      />
+                    </BusinessCategoryProductWrapper>
+                  </WrapContent>
+                </>
+              ) : (
+                <NotFoundSource
+                  content={t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time')}
+                  btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+                  onClickButton={() => handleSearchRedirect()}
+                />
+              )}
+            </>
+          )}
+        </WrappLayout>
+      )}
+
+      {isLoading && !isError && (
+        <>
+          <BusinessBasicInformation
+            isSkeleton
+            handler={handler}
+            businessState={{ business: {}, loading: true }}
+            openBusinessInformation={openBusinessInformation}
+          />
+          <WrapContent>
+            <BusinessCategoriesContainer>
+              <BusinessProductsCategories
+                isSkeleton
+                categories={[]}
+                openBusinessInformation={openBusinessInformation}
+              />
+            </BusinessCategoriesContainer>
+            <BusinessCategoryProductWrapper>
+              <BusinessProductsList
+                categories={[]}
+                category={categorySelected}
+                categoryState={categoryState}
+                isBusinessLoading={isLoading}
+                errorQuantityProducts={errorQuantityProducts}
+                productToIdLoading={productToIdLoading}
+              />
+            </BusinessCategoryProductWrapper>
+          </WrapContent>
+        </>
+      )}
+      <Modal
+        width='40%'
+        open={isCartModal}
+        onClose={() => setisCartModal(false)}
+        padding='0'
+      >
+        <BusinessCartContent isModal>
+          <Title style={{ textAlign: 'center', marginTop: '5px' }}>{t('YOUR_CART', 'Your cart')}</Title>
+          {currentCart?.products?.length > 0 ? (
+            <>
+              <Cart
+                isStore
+                isCustomMode
+                isForceOpenCart
+                cart={currentCart}
+                isCartPending={currentCart?.status === 2}
+                isProducts={currentCart.products.length}
+                isCartOnProductsList={isCartOnProductsList}
+                handleCartOpen={handleCartOpen}
+              />
+            </>
+          ) : (
+            <EmptyCart>
+              <div className='empty-content'>
+                <AiOutlineShoppingCart />
+                <p>{t('ADD_PRODUCTS_IN_YOUR_CART', 'Add products in your cart')}</p>
+              </div>
+              <EmptyBtnWrapper>
+                <span>{parsePrice(0)}</span>
+                <Button>{t('EMPTY_CART', 'Empty cart')}</Button>
+              </EmptyBtnWrapper>
+            </EmptyCart>
+          )}
+        </BusinessCartContent>
+      </Modal>
+    </>
+  )
+}

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

@@ -0,0 +1,177 @@
+import styled, { css } from 'styled-components'
+
+export const Title = styled.h1`
+  font-weight: 600;
+  font-size: 20px;
+  color: ${props => props.theme.colors.darkTextColor};
+  margin-bottom: 18px;
+`
+
+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);
+      }
+    }  
+  `}
+`
+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 BusinessCategoryProductWrapper = styled.div`
+  width: 100%;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .category-lists::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .category-lists {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  @media (min-width: 1024px) {
+    width: 70%;
+  }
+`
+
+export const BusinessCategoriesContainer = styled.div`
+  margin: 0;
+  width: 100%;
+
+  @media (min-width: 768px) {
+    width: 30%;
+
+    ${props => props.theme?.rlt ? css`
+      padding-left: 25px;
+    ` : css`
+      padding-right: 25px;
+    `}
+  }
+`
+
+export const BusinessCartContainer = styled(BusinessCategoriesContainer)`
+  display: none;
+
+  @media (min-width: 500px) {
+    display: block;
+  }
+`
+
+export const BusinessCartContent = styled.div`
+  background: white;
+  padding: 30px;
+  position: relative;
+
+  .product.accordion {
+    margin: 0;
+  }
+
+  .accordion.active {
+    padding: 10px 0;
+  }
+
+  ${({ isModal }) => !isModal && css`
+    border: 1px solid #E9ECEF;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    border-radius: 7.6px;
+  `}
+
+  @media (min-width: 1200px) {
+    position: sticky;
+    top: 0;
+  }
+
+  @media (min-width: 768px) {
+    padding: 35px 30px;
+  }
+`
+
+export const EmptyCart = styled.div`
+  .empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    svg {
+      font-size: 45px;
+      color: #B1BCCC;
+      margin-top: 10px;
+    }
+
+    p {
+      font-size: 14px;
+      color: #B1BCCC;
+      margin: 23px 0 0 0;
+    }
+  }
+`
+
+export const EmptyBtnWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+
+  span {
+    font-weight: 600;
+    font-size: 16px;
+    color: ${props => props.theme.colors.darkTextColor};
+  }
+
+  button {
+    color: #748194;
+    background: #F8F9FA;
+    border: 1px solid #F8F9FA;
+    border-radius: 7.6px;
+    height: 44px;
+    font-size: 14px;
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+`

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

@@ -160,7 +160,9 @@ const SignUpFormUI = (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(() => {
@@ -376,7 +378,7 @@ const SignUpFormUI = (props) => {
                 <>
                   {Object.keys(configs).length > 0 ? (
                     <SocialButtons isPopup={isPopup}>
-                      { isFacebookLogin && configs?.facebook_id?.value && (
+                      {isFacebookLogin && configs?.facebook_id?.value && (
                         <FacebookLoginButton
                           appId={configs?.facebook_id?.value}
                           handleSuccessFacebookLogin={handleSuccessFacebook}

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

@@ -20,7 +20,11 @@ export const SingleProductCard = (props) => {
     isSoldOut,
     isSkeleton,
     onProductClick,
-    isCartOnProductsList
+    isCartOnProductsList,
+    useCustomFunctionality,
+    onCustomClick,
+    customText,
+    customStyle
   } = props
 
   const [, t] = useLanguage()
@@ -54,31 +58,39 @@ export const SingleProductCard = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <CardContainer
         soldOut={isSoldOut || maxProductQuantity <= 0}
-        onClick={() => !isSkeleton && onProductClick(product)}
+        onClick={() => (((!isSkeleton && !useCustomFunctionality && onProductClick && onProductClick(product)) || useCustomFunctionality) && onCustomClick && onCustomClick())}
         isCartOnProductsList={isCartOnProductsList}
+        style={useCustomFunctionality && customStyle}
       >
-        {!isSkeleton ? (
-          <WrapLogo>
-            <CardLogo
-              className='image'
-              soldOut={isSoldOut || maxProductQuantity <= 0}
-              bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_200,c_limit')}
-            />
-          </WrapLogo>
-        ) : (
-          <Skeleton height={150} width={150} />
+        {!useCustomFunctionality && (
+          <>
+            {!isSkeleton ? (
+              <WrapLogo>
+                <CardLogo
+                  className='image'
+                  soldOut={isSoldOut || maxProductQuantity <= 0}
+                  bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_200,c_limit')}
+                />
+              </WrapLogo>
+            ) : (
+              <Skeleton height={150} width={150} />
+            )}
+            <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>
+              {!isSkeleton ? (
+                <span>{parsePrice(product?.price)}</span>
+              ) : (
+                <Skeleton width={100} />
+              )}
+              {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
+              {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
+            </CardInfo>
+            {(isSoldOut || maxProductQuantity <= 0) && <SoldOut>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
+            {cartAmount > 0 && <CartAmount>{cartAmount}</CartAmount>}
+          </>
+        )}
+        {useCustomFunctionality && customText && (
+          <span style={{ fontSize: 16, fontWeight: 500 }}>{customText}</span>
         )}
-        <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>
-          {!isSkeleton ? (
-            <span>{parsePrice(product?.price)}</span>
-          ) : (
-            <Skeleton width={100} />
-          )}
-          {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
-          {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
-        </CardInfo>
-        {(isSoldOut || maxProductQuantity <= 0) && <SoldOut>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
-        {cartAmount > 0 && <CartAmount>{cartAmount}</CartAmount>}
       </CardContainer>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -150,7 +150,9 @@ export const UserFormDetailsUI = (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(() => {
@@ -220,14 +222,14 @@ export const UserFormDetailsUI = (props) => {
         {!validationFields?.loading ? (
           <>
             {
-            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} />))
             }
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
               showField && showField(field.code) && (
@@ -241,9 +243,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInputEmail}
                       ref={(e) => {
@@ -260,9 +262,9 @@ export const UserFormDetailsUI = (props) => {
                       disabled={!isEdit}
                       placeholder={t(field.code.toUpperCase(), field?.name)}
                       defaultValue={
-                      formState?.result?.result
-                        ? formState?.result?.result[field.code]
-                        : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
+                        formState?.result?.result
+                          ? formState?.result?.result[field.code]
+                          : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
                       }
                       onChange={handleChangeInput}
                       ref={formMethods.register({
@@ -306,14 +308,14 @@ export const UserFormDetailsUI = (props) => {
               />
             )}
             {
-            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} />))
             }
             <ActionsForm>
               {onCancel && (

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

@@ -48,7 +48,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(() => {