ordering-ui-external 14.1.20 → 14.1.21

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

@@ -1,88 +1,88 @@
-import React from 'react'
-import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useConfig, useOrder, useUtils } from 'ordering-components-external'
-
-import {
-  CardContainer,
-  CardInfo,
-  WrapLogo,
-  CardLogo,
-  SoldOut
-} from './styles'
-import { useTheme } from 'styled-components'
-
-export const SingleProductCard = (props) => {
-  const {
-    businessId,
-    product,
-    isSoldOut,
-    isSkeleton,
-    onProductClick,
-    isCartOnProductsList
-  } = props
-
-  const [, t] = useLanguage()
-  const [stateConfig] = useConfig()
-  const [{ parsePrice, optimizeImage }] = useUtils()
-  const [orderState] = useOrder()
-  const theme = useTheme()
-
-  const editMode = typeof product?.code !== 'undefined'
-
-  const removeToBalance = editMode ? product?.quantity : 0
-  const cart = orderState.carts?.[`businessId:${businessId}`]
-  const productCart = cart?.products?.find(prod => prod.id === product?.id)
-  const totalBalance = (productCart?.quantity || 0) - removeToBalance
-
-  const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
-
-  const productBalance = (cart?.products?.reduce((sum, _product) => sum + (product && _product.id === product?.id ? _product.quantity : 0), 0) || 0) - removeToBalance
-  let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - productBalance
-  maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig
-
-  const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
-
-  return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <CardContainer
-        soldOut={isSoldOut || maxProductQuantity <= 0}
-        onClick={() => !isSkeleton && onProductClick(product)}
-        isCartOnProductsList={isCartOnProductsList}
-      >
-        <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>
-          {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
-          {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
-          {!isSkeleton ? (
-            <span>{parsePrice(product?.price)}</span>
-          ) : (
-            <Skeleton width={100} />
-          )}
-        </CardInfo>
-        {!isSkeleton ? (
-          <WrapLogo>
-            <CardLogo
-              className='image'
-              soldOut={isSoldOut || maxProductQuantity <= 0}
-              bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_200,c_limit')}
-            />
-          </WrapLogo>
-        ) : (
-          <Skeleton height={100} width={100} />
-        )}
-        {(isSoldOut || maxProductQuantity <= 0) && <SoldOut>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
-      </CardContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
-  )
-}
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, useConfig, useOrder, useUtils } from 'ordering-components-external'
+
+import {
+  CardContainer,
+  CardInfo,
+  WrapLogo,
+  CardLogo,
+  SoldOut
+} from './styles'
+import { useTheme } from 'styled-components'
+
+export const SingleProductCard = (props) => {
+  const {
+    businessId,
+    product,
+    isSoldOut,
+    isSkeleton,
+    onProductClick,
+    isCartOnProductsList
+  } = props
+
+  const [, t] = useLanguage()
+  const [stateConfig] = useConfig()
+  const [{ parsePrice, optimizeImage }] = useUtils()
+  const [orderState] = useOrder()
+  const theme = useTheme()
+
+  const editMode = typeof product?.code !== 'undefined'
+
+  const removeToBalance = editMode ? product?.quantity : 0
+  const cart = orderState.carts?.[`businessId:${businessId}`]
+  const productCart = cart?.products?.find(prod => prod.id === product?.id)
+  const totalBalance = (productCart?.quantity || 0) - removeToBalance
+
+  const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
+
+  const productBalance = (cart?.products?.reduce((sum, _product) => sum + (product && _product.id === product?.id ? _product.quantity : 0), 0) || 0) - removeToBalance
+  let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - productBalance
+  maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig
+
+  const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <CardContainer
+        soldOut={isSoldOut || maxProductQuantity <= 0}
+        onClick={() => !isSkeleton && onProductClick(product)}
+        isCartOnProductsList={isCartOnProductsList}
+      >
+        <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0}>
+          {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
+          {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
+          {!isSkeleton ? (
+            <span>{parsePrice(product?.price)}</span>
+          ) : (
+            <Skeleton width={100} />
+          )}
+        </CardInfo>
+        {!isSkeleton ? (
+          <WrapLogo>
+            <CardLogo
+              className='image'
+              soldOut={isSoldOut || maxProductQuantity <= 0}
+              bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_200,c_limit')}
+            />
+          </WrapLogo>
+        ) : (
+          <Skeleton height={100} width={100} />
+        )}
+        {(isSoldOut || maxProductQuantity <= 0) && <SoldOut>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
+      </CardContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}

package/src/themes/wow/src/components/SingleProductCard/styles.js

@@ -1,147 +1,147 @@
-import { lighten } from 'polished'
-import React from 'react'
-import styled, { css } from 'styled-components'
-
-export const CardContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: calc(100% - 40px);
-  padding: 10px;
-  margin: 10px;
-  border-radius: 10px;
-  cursor: pointer;
-  position: relative;
-
-  background: ${({ soldOut }) => soldOut ? '#B8B8B8' : '#FFF'};
-
-  ${props => (
-    props.theme.colors.backgroundPage === '#FFF' ||
-    props.theme.colors.backgroundPage === '#FFFFFF'
-  ) && css`
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
-  `}
-
-  ${({ isCartOnProductsList }) => isCartOnProductsList ? css`
-    @media (min-width: 993px) {
-      width: calc(50% - 40px);
-    }
-  ` : css`
-    @media (min-width: 681px) {
-      width: calc(50% - 40px);
-    }
-
-    @media (min-width: 993px) {
-      width: calc(33% - 40px);
-    }
-  `}
-`
-
-export const SoldOut = styled.span`
-  font-weight: bold;
-  position: absolute;
-  background: #D6D6D6 0% 0% no-repeat padding-box;
-  border-radius: 23px;
-  padding: 5px 10px;
-  top: 8px;
-  right: 6px;
-  text-transform: uppercase;
-  font-size: 14px;
-  ${props => props.theme?.rtl && css`
-    left: 6px;
-    right: initial;
-  `}
-`
-
-export const CardInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100% - 105px);
-  > * {
-    margin: 5px;
-  }
-
-  h1 {
-    font-size: 16px;
-    font-weight: ${({ soldOut }) => soldOut ? 'bold' : '500'};
-    text-align: left;
-    color: #263238;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: ${props => props.theme.colors.primary};
-  }
-
-  p {
-    font-weight: ${({ soldOut }) => soldOut ? 'bold' : '200'};
-    text-align: left;
-    ${props => props.theme?.rtl && css`
-      text-align: right;
-    `}
-
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
-
-  span {
-    color: ${({ soldOut, theme }) => soldOut ? lighten(0.05, theme.colors.primary) : theme.colors.primary};
-    font-weight: bold;
-  }
-
-  p, span {
-    font-size: 13px;
-  }
-
-  @media (min-width: 1024px) {
-    h1 {
-      font-size: 18px;
-    }
-
-    p {
-      font-size: 16px;
-    }
-
-    span {
-      font-size: 15px;
-    }
-  }
-`
-
-export const WrapLogo = styled.div`
-  max-width: 100px;
-  max-height: 100px;
-  height: 100px;
-  width: 100px;
-  margin-right: 5px;
-  ${props => props.theme?.rtl && css`
-    margin-left: 5px;
-    margin-right: 0px;
-  `}
-`
-
-const CardLogoStyled = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  background-repeat: no-repeat, repeat;
-  background-size: cover;
-  background-position: center;
-  object-fit: cover;
-  min-height: 100px;
-  border-radius: 10px;
-`
-export const CardLogo = (props) => {
-  const style = {}
-  if (props.bgimage) {
-    style.backgroundImage = `url(${props.bgimage})`
-  }
-  if (props.soldOut) {
-    style.filter = 'brightness(70%)'
-  }
-  return (
-    <CardLogoStyled {...props} style={style}>
-      {props.children}
-    </CardLogoStyled>
-  )
-}
+import { lighten } from 'polished'
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const CardContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 40px);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+
+  background: ${({ soldOut }) => soldOut ? '#B8B8B8' : '#FFF'};
+
+  ${props => (
+    props.theme.colors.backgroundPage === '#FFF' ||
+    props.theme.colors.backgroundPage === '#FFFFFF'
+  ) && css`
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
+  `}
+
+  ${({ isCartOnProductsList }) => isCartOnProductsList ? css`
+    @media (min-width: 993px) {
+      width: calc(50% - 40px);
+    }
+  ` : css`
+    @media (min-width: 681px) {
+      width: calc(50% - 40px);
+    }
+
+    @media (min-width: 993px) {
+      width: calc(33% - 40px);
+    }
+  `}
+`
+
+export const SoldOut = styled.span`
+  font-weight: bold;
+  position: absolute;
+  background: #D6D6D6 0% 0% no-repeat padding-box;
+  border-radius: 23px;
+  padding: 5px 10px;
+  top: 8px;
+  right: 6px;
+  text-transform: uppercase;
+  font-size: 14px;
+  ${props => props.theme?.rtl && css`
+    left: 6px;
+    right: initial;
+  `}
+`
+
+export const CardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 105px);
+  > * {
+    margin: 5px;
+  }
+
+  h1 {
+    font-size: 16px;
+    font-weight: ${({ soldOut }) => soldOut ? 'bold' : '500'};
+    text-align: left;
+    color: #263238;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: ${props => props.theme.colors.primary};
+  }
+
+  p {
+    font-weight: ${({ soldOut }) => soldOut ? 'bold' : '200'};
+    text-align: left;
+    ${props => props.theme?.rtl && css`
+      text-align: right;
+    `}
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  span {
+    color: ${({ soldOut, theme }) => soldOut ? lighten(0.05, theme.colors.primary) : theme.colors.primary};
+    font-weight: bold;
+  }
+
+  p, span {
+    font-size: 13px;
+  }
+
+  @media (min-width: 1024px) {
+    h1 {
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 16px;
+    }
+
+    span {
+      font-size: 15px;
+    }
+  }
+`
+
+export const WrapLogo = styled.div`
+  max-width: 100px;
+  max-height: 100px;
+  height: 100px;
+  width: 100px;
+  margin-right: 5px;
+  ${props => props.theme?.rtl && css`
+    margin-left: 5px;
+    margin-right: 0px;
+  `}
+`
+
+const CardLogoStyled = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  background-position: center;
+  object-fit: cover;
+  min-height: 100px;
+  border-radius: 10px;
+`
+export const CardLogo = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)'
+  }
+  return (
+    <CardLogoStyled {...props} style={style}>
+      {props.children}
+    </CardLogoStyled>
+  )
+}

package/src/themes/wow/src/components/SpecificBusiness/index.js

@@ -1,64 +1,64 @@
-import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components-external'
-import { useTheme } from 'styled-components'
-import HiLocationMarker from '@meronex/icons/hi/HiLocationMarker'
-import MdcClockTimeThree from '@meronex/icons/mdc/MdcClockTimeThree'
-import MdcSilverwareForkKnife from '@meronex/icons/mdc/MdcSilverwareForkKnife'
-import FaPhoneAlt from '@meronex/icons/fa/FaPhoneAlt'
-import EnDotSingle from '@meronex/icons/en/EnDotSingle'
-import { getHourMin } from '../../../../../utils'
-
-import {
-  Container,
-  BuisinessInfo,
-  InfoBlock,
-  Header,
-  WrapperBusinessLogo,
-  BusinessLogo
-} from './styles'
-export const SpecificBusiness = (props) => {
-  const {
-    business
-  } = props
-  const [, t] = useLanguage()
-  const [{ optimizeImage }] = useUtils()
-  const theme = useTheme()
-
-  return (
-    <Container>
-      <Header>
-        <WrapperBusinessLogo>
-          <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
-        </WrapperBusinessLogo>
-        <h1>{business?.name}</h1>
-      </Header>
-      <BuisinessInfo>
-        <InfoBlock>
-          <HiLocationMarker />
-          <span>{business?.address}</span>
-        </InfoBlock>
-      </BuisinessInfo>
-      <InfoBlock>
-        <MdcClockTimeThree />
-        <span className='open'>{t('OPEN', 'Open')}</span>
-        <span>{getHourMin(business?.today?.lapses[0]?.open?.hour, business?.today?.lapses[0]?.open?.minute)}</span>
-        <span>-</span>
-        <span>{getHourMin(business?.today?.lapses[0]?.close?.hour, business?.today?.lapses[0]?.close?.minute)}</span>
-      </InfoBlock>
-      <InfoBlock>
-        <MdcSilverwareForkKnife />
-        <span>{t('MENU', 'Menu')}</span>
-        <EnDotSingle />
-        {business?.menus.map(menu => (
-          <span key={menu.id}>
-            {menu?.name},
-          </span>
-        ))}
-      </InfoBlock>
-      <InfoBlock>
-        <FaPhoneAlt />
-        <span>{business?.phone}</span>
-      </InfoBlock>
-    </Container>
-  )
-}
+import React from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import HiLocationMarker from '@meronex/icons/hi/HiLocationMarker'
+import MdcClockTimeThree from '@meronex/icons/mdc/MdcClockTimeThree'
+import MdcSilverwareForkKnife from '@meronex/icons/mdc/MdcSilverwareForkKnife'
+import FaPhoneAlt from '@meronex/icons/fa/FaPhoneAlt'
+import EnDotSingle from '@meronex/icons/en/EnDotSingle'
+import { getHourMin } from '../../../../../utils'
+
+import {
+  Container,
+  BuisinessInfo,
+  InfoBlock,
+  Header,
+  WrapperBusinessLogo,
+  BusinessLogo
+} from './styles'
+export const SpecificBusiness = (props) => {
+  const {
+    business
+  } = props
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const theme = useTheme()
+
+  return (
+    <Container>
+      <Header>
+        <WrapperBusinessLogo>
+          <BusinessLogo bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+        </WrapperBusinessLogo>
+        <h1>{business?.name}</h1>
+      </Header>
+      <BuisinessInfo>
+        <InfoBlock>
+          <HiLocationMarker />
+          <span>{business?.address}</span>
+        </InfoBlock>
+      </BuisinessInfo>
+      <InfoBlock>
+        <MdcClockTimeThree />
+        <span className='open'>{t('OPEN', 'Open')}</span>
+        <span>{getHourMin(business?.today?.lapses[0]?.open?.hour, business?.today?.lapses[0]?.open?.minute)}</span>
+        <span>-</span>
+        <span>{getHourMin(business?.today?.lapses[0]?.close?.hour, business?.today?.lapses[0]?.close?.minute)}</span>
+      </InfoBlock>
+      <InfoBlock>
+        <MdcSilverwareForkKnife />
+        <span>{t('MENU', 'Menu')}</span>
+        <EnDotSingle />
+        {business?.menus.map(menu => (
+          <span key={menu.id}>
+            {menu?.name},
+          </span>
+        ))}
+      </InfoBlock>
+      <InfoBlock>
+        <FaPhoneAlt />
+        <span>{business?.phone}</span>
+      </InfoBlock>
+    </Container>
+  )
+}