ordering-ui-external 1.0.1 → 1.1.2

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

@@ -0,0 +1,82 @@
+import styled from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  margin: 0px auto;
+  max-width: 350px;
+
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 18px;
+  }
+
+  > button {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 0px;
+    transition: all 0.3s linear;
+
+    &:hover {
+      background-color: ${props => props.theme.colors.primaryContrast};
+    }
+  }
+
+  @media (min-width: 576px) {
+    max-width: 500px;
+  }
+`
+
+export const DownTimer = styled.h4`
+  text-align: center;
+  margin: 0px;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 36px;
+`
+
+export const OtpWrapper = styled.div`
+  padding-top: 18px;
+
+  .otp-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0px;
+    
+    .otp-input {
+      width: 50px !important;
+      height: 55px;
+      border: 1px solid #DEE2E6;
+      border-radius: 7.6px;
+      background-color: #FFF;
+      outline: none;
+      font-size: 20px;
+      font-weight: bold; 
+
+      &:focus{
+        border-color: ${() => darken(0.07, '#DEE2E6')} !important;
+      }
+
+      &::placeholder,
+      &::-webkit-input-placeholder {
+        color: #B1BCCC;
+      }
+      &:-ms-input-placeholder {
+        color: #B1BCCC;
+      }
+    }
+  }
+
+  @media (min-width: 576px) {
+    .otp-container {
+      .otp-input {
+        width: 100px !important;
+        height: 105px;
+        font-size: 36px;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import BiCaretUp from '@meronex/icons/bi/BiCaretUp'
+
+import { CategoryTab } from './styles'
+
+export const AccordionDropdown = (props) => {
+  const {
+    item,
+    spaceTab,
+    isOpen,
+    isSelected,
+    handleClickItem,
+    IterateCategories
+  } = props
+
+  return (
+    <div className="accordion-item">
+      <CategoryTab
+        active={isSelected}
+        className={'accordion-title'}
+        categorySpace={spaceTab}
+        onClick={() => handleClickItem()}
+      >
+        <span>
+          {item.name}
+        </span>
+        <BiCaretUp
+          className='rotate'
+          style={{
+            transform: isOpen
+              ? 'rotate(0deg)'
+              : 'rotate(180deg)'
+          }}
+        />
+      </CategoryTab>
+      {isOpen && (
+        <div className="accordion-content">
+          <IterateCategories
+            list={item.subcategories}
+            isSub={true}
+            currentCat={item}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components'
+
+export const CategoryTab = styled.div`
+  padding: 10px 15px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: ${props => props.categorySpace ?? 0}px;
+  border-radius: 8px;
+  text-align: left;
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 80%;
+  }
+
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.primaryContrast};
+    font-weight: bold;
+  `}
+`

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

@@ -159,28 +159,22 @@ export const BusinessBasicInformation = (props) => {
               </BusinessInfoItem>
             </BusinessInfo>
           </BusinessContent>
-          {!isSkeleton ? (
-            <>
-              {(categoryState.products.length !== 0 || searchValue) && !errorQuantityProducts && (
-                <WrapperSearch>
-                  <SearchBar
-                    onSearch={handleChangeSearch}
-                    search={searchValue}
-                    placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
-                    lazyLoad={businessState?.business?.lazy_load_products_recommended}
-                  />
-                  <Select
-                    notAsync
-                    notReload
-                    options={sortByOptions}
-                    defaultValue={sortByValue}
-                    onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
-                  />
-                </WrapperSearch>
-              )}
-            </>
-          ) : (
-            <Skeleton width={300} height={40} />
+          {!errorQuantityProducts && (
+            <WrapperSearch>
+              <SearchBar
+                onSearch={handleChangeSearch}
+                search={searchValue}
+                placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
+                lazyLoad={businessState?.business?.lazy_load_products_recommended}
+              />
+              <Select
+                notAsync
+                notReload
+                options={sortByOptions}
+                defaultValue={sortByValue}
+                onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+              />
+            </WrapperSearch>
           )}
         </BusinessInnerContainer>
 

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

@@ -75,7 +75,7 @@ const BusinessProductsCategoriesUI = (props) => {
               <>
                 {[...Array(4).keys()].map(i => (
                   <Tab key={i}>
-                    <Skeleton width={100} />
+                    <Skeleton width={150} height={25} />
                   </Tab>
                 ))}
               </>

package/src/themes/four/src/components/BusinessProductsCategories/layouts/groceries/index.js

@@ -0,0 +1,125 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
+import { AccordionDropdown } from '../../../AccordionDropdown'
+
+import {
+  CategoriesContainer,
+  CategoriesWrap,
+  CategoryTab
+} from './styles'
+
+const SPACE_CONTANT = 25
+
+const categorySpace = {
+  1: 1,
+  2: 2 * SPACE_CONTANT,
+  3: 3 * SPACE_CONTANT,
+  4: 4 * SPACE_CONTANT,
+  5: 5 * SPACE_CONTANT
+}
+
+const BusinessProductsCategoriesUI = (props) => {
+  const {
+    isSkeleton,
+    categories,
+    handlerClickCategory,
+    categorySelected,
+    featured,
+    openCategories
+  } = props
+
+  const IterateCategories = ({ list, isSub, currentCat }) => {
+    return (
+      <>
+        {list?.length && list?.map(category => (
+          <div key={category?.id ?? category?.name}>
+            {(category?.subcategories?.length > 0 || isSub) ? (
+              <>
+                {category?.subcategories?.length > 0 && (
+                  <>
+                    <div className='accordion'>
+                      <AccordionDropdown
+                        item={category}
+                        isSelected={categorySelected?.id === category.id}
+                        isOpen={openCategories?.includes(category.id)}
+                        spaceTab={categorySpace[category?.level ?? 1]}
+                        handleClickItem={() => handlerClickCategory(category)}
+                        IterateCategories={IterateCategories}
+                      />
+                    </div>
+                  </>
+                )}
+                {isSub && !category?.subcategories?.length && (
+                  <CategoryTab
+                    active={categorySelected?.id === category.id}
+                    className={`${category.id === 'featured' ? 'special' : ''}`}
+                    categorySpace={categorySpace[category?.level ?? 1]}
+                    onClick={() => handlerClickCategory(category)}
+                  >
+                    <span>
+                      {category.name}
+                    </span>
+                  </CategoryTab>
+                )}
+              </>
+            ) : (
+              <CategoryTab
+                active={categorySelected?.id === category.id}
+                className={`${category.id === 'featured' ? 'special' : ''}`}
+                categorySpace={categorySpace[category?.level ?? 1]}
+                onClick={() => handlerClickCategory(category)}
+              >
+                <span>
+                  {category.name}
+                </span>
+              </CategoryTab>
+            )}
+          </div>
+        ))}
+
+        {list && list?.length === 0 && isSub && (
+          <CategoryTab
+            active={categorySelected?.id === category.id}
+            className={`${category.id === 'featured' ? 'special' : ''}`}
+            categorySpace={categorySpace[category?.level ?? 1]}
+            onClick={() => handlerClickCategory(category)}
+          >
+            <span>
+              {currentCat.name}
+            </span>
+          </CategoryTab>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <CategoriesContainer className='category-lists' featured={featured}>
+      {!isSkeleton ? (
+        <CategoriesWrap variant='primary'>
+          {categories?.length && <IterateCategories list={categories} />}
+        </CategoriesWrap>
+      ) : (
+        <CategoriesWrap variant='primary'>
+          {[...Array(4).keys()].map(i => (
+            <div key={i}>
+              <Skeleton width={100} />
+            </div>
+          ))}
+        </CategoriesWrap>
+      )}
+    </CategoriesContainer>
+  )
+}
+
+export const BusinessProductsCategories = (props) => {
+  const businessProductsCategoriesProps = {
+    ...props,
+    UIComponent: BusinessProductsCategoriesUI
+  }
+
+  return (
+    <ProductsCategories {...businessProductsCategoriesProps} />
+  )
+}

package/src/themes/four/src/components/BusinessProductsCategories/layouts/groceries/styles.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components'
+
+export const CategoriesWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+export const CategoriesContainer = styled.div`
+  display: flex;
+  overflow-x: auto;
+  padding-bottom: 0;
+  background: ${props => props.theme.colors.backgroundPage};
+  z-index: 1000;
+  top: 0;
+  text-align: center;
+
+  div.category {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  div.special{
+    ${props => !props.featured && css`
+      display: none;
+    `}
+  }
+`;
+
+export const CategoryTab = styled.div`
+  padding: 10px 15px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: ${props => props.categorySpace ?? 0}px;
+  border-radius: 8px;
+  text-align: left;
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 80%;
+  }
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.primaryContrast};
+    font-weight: bold;
+  `}
+`

package/src/themes/four/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -0,0 +1,237 @@
+import React from 'react'
+import { ProductsList, useLanguage, useConfig } from 'ordering-components-external'
+
+import { Button } from '../../../../styles/Buttons'
+import { SingleProductCard } from '../../../SingleProductCard'
+import { NotFoundSource } from '../../../NotFoundSource'
+
+import {
+  ProductsContainer,
+  ProductsListing,
+  WrapAllCategories,
+  ErrorMessage,
+  WrapperNotFound
+} from './styles'
+
+const BusinessProductsListUI = (props) => {
+  const {
+    errors,
+    business,
+    businessId,
+    category,
+    categories,
+    categoryState,
+    isBusinessLoading,
+    onProductClick,
+    handleSearchRedirect,
+    searchValue,
+    isCartOnProductsList,
+    handleClearSearch,
+    errorQuantityProducts,
+    categoriesState,
+    onClickCategory,
+    currentCart
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
+
+  return (
+    <ProductsContainer>
+      {category?.id && (
+        <WrapAllCategories id='container'>
+          <div className='category-title'>
+            {
+              category?.image && (
+                <img src={category.image} />
+              )
+            }
+            <h3>{category.name}</h3>
+          </div>
+          <ProductsListing>
+            {
+              categoryState?.products?.map(product => (
+                <SingleProductCard
+                  key={product?.id}
+                  isLayoutOne
+                  isSoldOut={(product?.inventoried && !product?.quantity)}
+                  product={product}
+                  businessId={businessId}
+                  onProductClick={onProductClick}
+                  isCartOnProductsList={isCartOnProductsList}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                />
+              ))
+            }
+          </ProductsListing>
+        </WrapAllCategories>
+      )}
+
+      {
+        !category?.id && categories.filter(category => category?.id === 'featured').map((category) => {
+          const featProducts = business?.lazy_load_products_recommended
+            ? categoriesState?.featured?.products?.some(product => product.featured) ? categoriesState?.featured?.products : []
+            : categoryState?.products?.filter(product => product.featured) ?? []
+          return (
+            featProducts?.length > 0 && (
+              <WrapAllCategories key={category?.id}>
+                <div className='wrap-header'>
+                  <div className='category-title'>
+                    <h3>{t('FEATURED', 'Featured')}</h3>
+                  </div>
+                  <Button
+                    color='primary'
+                    onClick={() => onClickCategory(category)}
+                  >
+                    {t('MORE', 'More')}
+                  </Button>
+                </div>
+                <ProductsListing>
+                  {featProducts?.map(product => product.featured && (
+                    <SingleProductCard
+                      key={product?.id}
+                      isLayoutOne
+                      isSoldOut={(product?.inventoried && !product?.quantity)}
+                      product={product}
+                      businessId={businessId}
+                      onProductClick={onProductClick}
+                      isCartOnProductsList={isCartOnProductsList}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    />
+                  ))}
+                  {!categoryState?.loading && featProducts?.length && (
+                    <SingleProductCard
+                      useCustomFunctionality
+                      onCustomClick={() => onClickCategory(category)}
+                      isCartOnProductsList={isCartOnProductsList}
+                      customText={t('MORE', 'More')}
+                      customStyle={{
+                        display: 'flex',
+                        justifyContent: 'center'
+                      }}
+                    />
+                  )}
+                </ProductsListing>
+              </WrapAllCategories>
+            )
+          )
+        })
+      }
+
+      {
+        !category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
+          const products = !isUseParentCategory
+            ? categoryState?.products?.filter(product => product?.category_id === category?.id) ?? []
+            : categoryState?.products?.filter(product => category?.children?.some(cat => cat.category_id === product?.category_id)) ?? []
+          return (
+            <React.Fragment key={category?.id}>
+              {
+                products.length > 0 && (
+                  <WrapAllCategories id='container'>
+                    <div className='wrap-header'>
+                      <div className='category-title'>
+                        {
+                          category?.image && (
+                            <img src={category.image} />
+                          )
+                        }
+                        <h3>{category.name}</h3>
+                      </div>
+                      <Button
+                        onClick={() => onClickCategory(category)}
+                        color='primary'
+                      >
+                        {t('MORE', 'More')}
+                      </Button>
+                    </div>
+                    <ProductsListing>
+                      {
+                        products.map(product => (
+                          <SingleProductCard
+                            key={product?.id}
+                            isLayoutOne
+                            isSoldOut={product?.inventoried && !product?.quantity}
+                            businessId={businessId}
+                            product={product}
+                            onProductClick={onProductClick}
+                            isCartOnProductsList={isCartOnProductsList}
+                            productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                          />
+                        ))
+                      }
+                      {!categoryState?.loading && products?.length && (
+                        <SingleProductCard
+                          useCustomFunctionality
+                          onCustomClick={() => onClickCategory(category)}
+                          isCartOnProductsList={isCartOnProductsList}
+                          customText={t('MORE', 'More')}
+                          customStyle={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 8px'
+                          }}
+                        />
+                      )}
+                      {
+                        categoryState?.loading && (i + 1) === _categories.length && [...Array(categoryState?.pagination?.nextPageItems).keys()].map(i => (
+                          <SingleProductCard
+                            key={`skeleton:${i}`}
+                            isSkeleton
+                          />
+                        ))
+                      }
+                    </ProductsListing>
+                  </WrapAllCategories>
+                )
+              }
+            </React.Fragment>
+          )
+        })
+      }
+
+      {
+        (categoryState?.loading || isBusinessLoading) && (
+          <ProductsListing>
+            {[...Array(categoryState?.pagination.nextPageItems).keys()].map(i => (
+              <SingleProductCard
+                key={`skeleton:${i}`}
+                isSkeleton
+              />
+            ))}
+          </ProductsListing>
+        )
+      }
+
+      {
+        !categoryState?.loading && !isBusinessLoading && categoryState?.products?.length === 0 && !((searchValue && errorQuantityProducts) || (!searchValue && !errorQuantityProducts)) && (
+          <WrapperNotFound>
+            <NotFoundSource
+              content={!searchValue ? t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time') : t('ERROR_NOT_FOUND_PRODUCTS', 'No products found, please change filters.')}
+              btnTitle={!searchValue ? t('SEARCH_REDIRECT', 'Go to Businesses') : t('CLEAR_FILTERS', 'Clear filters')}
+              onClickButton={() => !searchValue ? handleSearchRedirect() : handleClearSearch('')}
+            />
+          </WrapperNotFound>
+        )
+      }
+
+      {errors && errors.length > 0 && (
+        errors.map((e, i) => (
+          <ErrorMessage key={i}>ERROR: [{e}]</ErrorMessage>
+        ))
+      )}
+    </ProductsContainer>
+  )
+}
+
+export const BusinessProductsList = (props) => {
+  const businessProductsListProps = {
+    ...props,
+    UIComponent: BusinessProductsListUI
+  }
+
+  return (
+    <ProductsList {...businessProductsListProps} />
+  )
+}

package/src/themes/four/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components'
+
+export const ProductsContainer = styled.div`
+  background: ${props => props.theme.colors.backgroundPage};
+`
+
+export const ErrorMessage = styled.div`
+  padding: 20px;
+  width: 100%;
+  background-color: #CCCCCC;
+  margin: 0px 15px;
+  color: #D81313;
+  font-weight: bold;
+`
+
+export const ProductsListing = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const WrapAllCategories = styled.div`
+  .category-title {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    ${props => props.theme?.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+
+    img {
+      border-radius: 7.6px;
+      min-width: 41px;
+      min-height: 41px;
+      height: 41px;
+      width: 41px;
+    }
+  }
+  .wrap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 24px;
+    color: ${props => props.theme?.colors.darkTextColor};
+    margin-left: 10px;
+    margin-top: 0;
+    ${props => props.theme?.rtl && css`
+      margin-right: 10px;
+      margin-left: 0;
+    `}
+  }
+`
+
+export const WrapperNotFound = styled.div`
+  height: 500px;
+  > div{
+    height: 100%;
+  }
+`