ordering-ui-external 1.0.1 → 1.1.0

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

@@ -1,165 +0,0 @@
-import React from 'react'
-import { useLanguage, useEvent, FavoriteList } from 'ordering-components-external'
-import { SingleProductCard } from '../SingleProductCard'
-import { NotFoundSource } from '../NotFoundSource'
-import { Button } from '../../styles/Buttons'
-import MdKeyboardArrowLeft from '@meronex/icons/md/MdKeyboardArrowLeft'
-import MdKeyboardArrowRight from '@meronex/icons/md/MdKeyboardArrowRight'
-
-import {
-  Container,
-  ErrorMessage,
-  BusinessListWrapper,
-  ArrowButtonWrapper,
-  ProductCard
-} from './styles'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import SwiperCore, {
-  Navigation
-} from 'swiper'
-import 'swiper/swiper-bundle.min.css'
-import 'swiper/swiper.min.css'
-
-SwiperCore.use([Navigation])
-
-const FavoriteProductsUI = (props) => {
-  const {
-    handleUpdateFavoriteList,
-    favoriteList,
-    pagination,
-    getFavoriteList
-  } = props
-
-  const [, t] = useLanguage()
-  const [events] = useEvent()
-
-  const handleGoToBusinessList = () => {
-    events.emit('go_to_page', { page: 'search' })
-  }
-
-  return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <Container>
-        {
-          !favoriteList?.loading && favoriteList?.favorites?.length === 0 && (
-            <NotFoundSource>
-              <Button
-                outline
-                color='primary'
-                onClick={() => handleGoToBusinessList()}
-                style={{ height: '44px' }}
-              >
-                {t('ADD_FAVORITE', 'Add favorite')}
-              </Button>
-            </NotFoundSource>
-          )
-        }
-        <BusinessListWrapper>
-          <ArrowButtonWrapper className='swiper-button-prev' isLoading={favoriteList?.loading}>
-            <MdKeyboardArrowLeft />
-          </ArrowButtonWrapper>
-          <Swiper
-            breakpoints={{
-              0: {
-                slidesPerView: 1,
-                spaceBetween: 0
-              },
-              400: {
-                slidesPerView: 1,
-                spaceBetween: 0
-              },
-              550: {
-                slidesPerView: 2,
-                spaceBetween: 40
-              },
-              769: {
-                slidesPerView: 3,
-                spaceBetween: 50
-              }
-            }}
-            freeMode
-            watchSlidesProgress
-            className='swiper-businesses'
-            preventClicksPropagation={false}
-            navigation={{
-              nextEl: '.swiper-button-next',
-              prevEl: '.swiper-button-prev'
-            }}
-          >
-            {!favoriteList?.loading && (
-              <>
-                {
-                  favoriteList?.favorites?.map((product, i) => (
-                    <SwiperSlide key={i}>
-                      <SingleProductCard
-                        key={i}
-                        isSoldOut={product.inventoried && !product.quantity}
-                        product={product}
-                        onProductClick={() => {}}
-                        handleUpdateProducts={handleUpdateFavoriteList}
-                      />
-                    </SwiperSlide>
-                  ))
-                }
-                {pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
-                  <SwiperSlide>
-                    <ProductCard>
-                      <Button
-                        color='primary'
-                        outline
-                        onClick={() => getFavoriteList(pagination?.currentPage + 1)}
-                      >
-                        {t('LOAD_MORE_PRODUCTS', 'Load more products')}
-                      </Button>
-                    </ProductCard>
-                  </SwiperSlide>
-                )}
-              </>
-            )}
-
-            {favoriteList?.loading && (
-              [...Array(5).keys()].map(i => (
-                <SwiperSlide key={i}>
-                  <SingleProductCard
-                    key={`skeleton:${i}`}
-                    isSkeleton
-                  />
-                </SwiperSlide>
-              ))
-            )}
-          </Swiper>
-          <ArrowButtonWrapper className='swiper-button-next' isLoading={favoriteList?.loading}>
-            <MdKeyboardArrowRight />
-          </ArrowButtonWrapper>
-        </BusinessListWrapper>
-        {favoriteList?.error && favoriteList?.error.length > 0 && favoriteList?.favorites?.length === 0 && (
-          favoriteList?.error.map((e, i) => (
-            <ErrorMessage key={i}>{t('ERROR', 'ERROR')}: [{e?.message || e}]</ErrorMessage>
-          ))
-        )}
-      </Container>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
-  )
-}
-
-export const FavoriteProducts = (props) => {
-  const favoriteProductsProps = {
-    ...props,
-    UIComponent: FavoriteProductsUI,
-    favoriteURL: 'favorite_products',
-    originalURL: 'products'
-  }
-  return <FavoriteList {...favoriteProductsProps} />
-}

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

@@ -1,87 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Container = styled.div`
-  width: 100%;
-  margin-top: 35px;
-`
-
-export const ErrorMessage = styled.span`
-  padding: 20px;
-  width: 100%;
-  margin: 0px 15px;
-  color: ${props => props.theme.colors.danger500};
-  font-weight: bold;
-`
-
-export const BusinessListWrapper = styled.div`
-  width: 100%;
-  position: relative;
-
-  .swiper-businesses {
-    padding: 5px 0px;
-    .swiper-slide {
-      height: auto;
-      > div {
-        width: 100% !important;
-        margin: 0px !important;
-        height: 100%;
-        cursor: default;
-      }
-    }
-  }
-`
-
-export const ArrowButtonWrapper = styled.div`
-  position: absolute;
-  transition: all 0.3s ease-out;
-
-  &::after {
-    display: none;
-  }
-  > svg {
-    background: ${props => props.theme.colors?.gray200};
-    display: inline-block;
-    border-radius: 50%;
-    width: 25px;
-    min-width: 25px;
-    height: 25px;
-    align-self: center;
-    color: ${props => props.theme.colors.secundaryContrast};
-    opacity: 0.8;
-  }
-  &.swiper-button-next {
-    right: 10px;
-    ${props => props.theme.rtl && css`
-      left: 10px;
-      right: initial;
-    `}
-  }
-  &.swiper-button-prev {
-    left: 10px;
-    ${props => props.theme.rtl && css`
-      right: 10px;
-      left: initial;
-    `}
-  }
-  &.swiper-button-disabled {
-    display: none;
-  }
-  &:hover {
-    transform: scale(1.07);
-  }
-  ${({ isLoading }) => isLoading && css`
-    svg {
-      display: none;
-    }
-  `}
-`
-
-export const ProductCard = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  button {
-    height: 44px;
-  }
-`