ordering-ui-external 10.0.1 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectProducts/styles.js

@@ -0,0 +1,161 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-top: 50px;
+`
+export const SearchProductsWrapper = styled.div`
+  position: relative;
+  margin-top: 11px;
+
+  > input {
+    width: 100%;
+    height: 44px;
+    ${props => props.theme?.rtl ? css`
+      padding-left: 40px;
+    ` : css`
+      padding-right: 40px;
+    `}
+  }
+
+  span.loading {
+    position: absolute;
+    top: 10px;
+    ${props => props.theme?.rtl ? css`
+      left: 10px;
+    ` : css`
+      right: 10px;
+    `}
+
+    @keyframes spinner-content {
+      0% { transform: rotate(0) }
+      100% { transform: rotate(360deg) }
+    }
+
+    svg {
+      animation: spinner-content 1.85s linear infinite;
+      color: ${props => props.theme.colors.headingColor};
+    }
+  }
+`
+
+export const OptionsToSelectContainer = styled.div`
+  z-index: 100;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-x: hidden;
+  border-radius: 8px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  background-color: ${props => props.theme.colors.backgroundPage};
+  padding: 9px 0;
+
+  > p {
+    font-size: 12px;
+    margin: 0 16px;
+  }
+`
+export const SelectOption = styled.div`
+  cursor: pointer;
+  width: 100%;
+  padding: 9px 16px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: ${props => props.theme.colors.secundary};
+  }
+  span {
+    font-size: 14px;
+    &.name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 180px;
+    }
+  }
+`
+
+export const WrapperImage = styled.div`
+  position: relative;
+  max-width: 38px;
+  max-height: 38px;
+  height: 38px;
+  width: 38px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 20px;
+  ` : css`
+    margin-right: 20px;
+  `}
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+`
+export const CartProductsConatiner = styled.div`
+  margin-top: 25px;
+`
+export const CartProductsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin-bottom: 5px;
+
+  > div {
+    &:first-child {
+      cursor: initial;
+      &:hover {
+        background-color: ${props => props.theme.colors.backgroundPage};
+      }
+    }
+  }
+`
+export const ProductQuantityActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    -moz-appearance: textfield;
+    padding: 5px;
+    width: 45px;
+    text-align: center;
+    border: none;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 16px;
+  ` : css`
+    margin-right: 16px;
+  `}
+`
+export const ProductEditDeleteActions = styled.div`
+  display: flex;
+  align-items: center;
+
+  button {
+    > svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SingleProductCard/index.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import { useLanguage, useConfig, useOrder, useUtils, SingleProductCard as SingleProductCardController } from 'ordering-components-external'
+import { shape } from '../../../../../../../utils'
+import { useTheme } from 'styled-components'
+
+import {
+  CardContainer,
+  CardInfo,
+  WrapLogo,
+  WrapTags,
+  CardLogo,
+  SoldOut,
+  PriceWrapper,
+  RibbonBox,
+  TitleWrapper
+} from './styles'
+
+const SingleProductCardUI = (props) => {
+  const {
+    product
+  } = 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 cartProducts = Object.values(orderState.carts).reduce((products, _cart) => [...products, ..._cart?.products], [])
+  const productBalance = cartProducts.reduce((sum, _product) => sum + (_product.id === product?.id ? _product.quantity : 0), 0)
+
+  const totalBalance = (productBalance || 0) - removeToBalance
+
+  const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
+
+  let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance
+  maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig
+
+  const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
+
+  return (
+    <>
+      <CardContainer
+        soldOut={maxProductQuantity <= 0}
+        className='product-card'
+      >
+        <div>
+          <CardInfo soldOut={maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}>
+            <TitleWrapper>
+              <h1>{product?.name}</h1>
+            </TitleWrapper>
+            <PriceWrapper isOffPrice={product?.offer_price && product?.in_offer}>
+              <span className='current-price'>{product?.price ? parsePrice(product?.price) : ''}</span>
+              {!(maxProductQuantity <= 0) && (
+                <span className='off-price'>{product?.offer_price && product?.in_offer ? parsePrice(product?.offer_price) : ''}</span>
+              )}
+              {product?.tags && product?.tags.length > 0 && (
+                <WrapTags>
+                  {product?.tags.map((tag, i) => (
+                    <div key={i}>
+                      <img src={tag.image ?? ''} />
+                    </div>
+                  ))}
+                </WrapTags>
+              )}
+            </PriceWrapper>
+
+            <p>{product?.description}</p>
+          </CardInfo>
+          <WrapLogo
+            isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+          >
+            {product?.ribbon?.enabled && (
+              <RibbonBox
+                bgColor={product?.ribbon?.color}
+                isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+                isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+              >
+                {product?.ribbon?.text}
+              </RibbonBox>
+            )}
+            <CardLogo
+              className='image'
+              soldOut={maxProductQuantity <= 0}
+              bgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+            />
+          </WrapLogo>
+          {(maxProductQuantity <= 0) && <SoldOut isBottom={product?.ribbon?.enabled}>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
+        </div>
+      </CardContainer>
+    </>
+  )
+}
+
+export const SingleProductCard = (props) => {
+  const singleProductCardProps = {
+    ...props,
+    UIComponent: SingleProductCardUI
+  }
+  return <SingleProductCardController {...singleProductCardProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SingleProductCard/styles.js

@@ -0,0 +1,314 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const CardContainer = styled.div`
+  ${({ isShowAddButt }) => css`
+    min-height: ${isShowAddButt ? '162px' : '110px'};
+  `}
+  background: ${({ soldOut, theme }) => soldOut ? '#6c757d33' : theme?.colors?.backgroundPage};
+  border: 1px solid #E9ECEF;
+  padding: 10px;
+  border-radius: 7.6px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+  position: relative;
+
+  > div {
+    display: flex;
+    justify-content: space-between;
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.product?.components?.image?.position === 'right'
+    ? css`
+      flex-direction: row-reverse;
+    `
+    : css`
+      flex-direction: row;
+    `
+  }
+    align-items: center;
+    width: 100%;
+  }
+
+  button {
+    width: 100%;
+    margin-top: 10px;
+    padding: 4px;
+  }
+  ${({ productsRows }) => productsRows ? css`
+    width: ${() => productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)'};
+    margin: 10px 0;
+
+  ` : css`
+    width: 100%;
+    margin: 10px 0;
+    @media (min-width: 576px) {
+      margin: 10px;
+      width: calc(100% - 20px);
+    }
+
+  ${({ isCartOnProductsList }) => isCartOnProductsList ? css`
+    @media (min-width: 993px) {
+      width: calc(50% - 20px);
+      margin: 10px 20px 10px 0px;
+      ${props => props.theme?.rtl && css`
+        margin: 10px 0px 10px 20px;
+      `}
+    }
+  ` : css`
+    @media (min-width: 681px) {
+      width: calc(49% - 20px);
+    }
+
+    @media (min-width: 1440px) {
+      width: calc(33% - 20px);
+      margin: 10px 20px 10px 0px;
+      ${props => props.theme?.rtl && css`
+        margin: 10px 0px 10px 20px;
+      `}
+    }
+  `}
+  
+  `}
+`
+
+export const SoldOut = styled.span`
+  font-weight: bold;
+  position: absolute;
+  background: #495057 0% 0% no-repeat padding-box;
+  padding: 5px 10px;
+  top: 7px;
+  border-radius: 2px 0px 0px 2px;
+  right: 0px;
+  color: white;
+  font-size: 12px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+  &:first-letter {
+    text-transform: uppercase;
+  }
+
+  ${({ isBottom }) => isBottom && css`
+    bottom: 7px;
+    top: initial;
+  `}
+`
+
+export const CardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 86px;
+  ${({ isBgimage }) => css`
+    width: ${isBgimage ? 'calc(100% - 90px)' : '100%'};
+  `}
+  > * {
+    margin: 3px;
+  }
+  p {
+    color: #909BA9;
+    text-align: left;
+    font-size: 10px;
+    ${props => props.theme?.rtl && css`
+      text-align: right;
+    `}
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    white-space: pre-wrap;
+  }
+
+  span {
+    color: ${props => props.theme.colors.darkTextColor};
+    font-size: 14px;
+  }
+
+  ${({ oneLine }) => oneLine && css`
+    p {
+      -webkit-line-clamp: 1;
+    }
+  `}
+
+  @media (min-width: 1024px) {
+    p {
+      font-size: 12px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+  }
+`
+
+export const WrapLogo = styled.div`
+  position: relative;
+  max-width: 86px;
+  max-height: 86px;
+  height: 86px;
+  ${({ isBgimage }) => isBgimage && css`
+    width: 86px;
+  `}
+  ${({ theme }) => theme?.business_view?.components?.products?.components?.product?.components?.image?.position === 'right'
+    ? css`
+    margin-left: 5px;
+  `
+    : css`
+    margin-right: 5px;
+  `}
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+`
+
+export const WrapTags = styled.div`
+  display: flex;
+  margin-left: 10px;
+  margin-right: 10px;
+  overflow-x: auto;
+
+  ${({ isBgimage }) => isBgimage && css`
+    width: 50px;
+  `}
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+
+  div {
+    display: flex;
+    margin: auto;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  img {
+    width: 30px;
+    height: 30px;
+    margin-right: 5px;
+  }
+`
+
+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: 86px;
+  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>
+  )
+}
+
+export const PriceWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .current-price {
+    min-width: 64px
+  }
+  .off-price {
+    font-size: 10px;
+    color: #909BA9;
+    margin-left: 5px;
+    text-decoration: line-through;
+    ${({ isOffPrice }) => isOffPrice && css`
+      min-width: 46px;
+    `}
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0;
+    `}
+
+    @media (min-width: 1024px) {
+      font-size: 13px;
+      ${({ isOffPrice }) => isOffPrice && css`
+        min-width: 64px;
+      `}
+    }
+  }
+`
+
+export const RibbonBox = styled.div`
+  position: absolute;
+  padding: 2px 8px;
+  box-sizing: border-box;
+  z-index: 10;
+  color: ${props => props.theme.colors.colorTextSignForm};
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 13px;
+  top: -4px;
+  right: -3px;
+  background-color: ${props => props.theme.colors.primary};
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  max-width: 70px;
+  word-break: break-all;
+
+  ${props => props.theme.rtl && css`
+    left: -3px;
+    right: initial;
+  `}
+
+  ${({ bgColor }) => bgColor && css`
+    background-color: ${bgColor};
+  `}
+
+  ${({ isRoundRect }) => isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${({ isCapsule }) => isCapsule && css`
+    border-radius: 50px;
+  `}
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  h1 {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
+    color: ${props => props.theme.colors.headingColor};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0px;
+  }
+
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    svg {
+      color: ${props => props.theme.colors.danger500};
+      font-size: 16px;
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeElementsForm/index.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import { StripeElementsForm as StripeElementsFormController, useLanguage } from 'ordering-components-external'
+import { loadStripe } from '@stripe/stripe-js/pure'
+import { Elements } from '@stripe/react-stripe-js'
+import { CardForm } from '../CardForm'
+import { StripeMethodForm } from '../StripeMethodForm'
+
+import {
+  ErrorMessage
+} from './styles'
+
+const StripeElementsFormUI = (props) => {
+  const {
+    publicKey,
+    handleSource,
+    businessId,
+    requirements,
+    onNewCard,
+    toSave,
+    onCancel,
+    paymethod,
+    cart,
+    handlePlaceOrder,
+    methodsPay,
+    cartGroup
+  } = props
+  const [, t] = useLanguage()
+  return (
+    <>
+      {publicKey ? (
+        <Elements stripe={loadStripe(publicKey)}>
+          {methodsPay?.includes(paymethod) ? (
+            <StripeMethodForm
+              cart={cart}
+              cartGroup={cartGroup}
+              handleSource={handleSource}
+              onNewCard={onNewCard}
+              toSave={toSave}
+              requirements={requirements}
+              businessId={businessId}
+              handleCancel={onCancel}
+              paymethod={paymethod}
+              handlePlaceOrder={handlePlaceOrder}
+            />
+          ) : (
+            <CardForm
+              handleSource={handleSource}
+              onNewCard={onNewCard}
+              toSave={toSave}
+              isSplitForm
+              requirements={requirements}
+              businessId={businessId}
+              handleCancel={onCancel}
+              businessIds={props.businessIds}
+            />
+          )}
+        </Elements>
+      ) : (
+        <ErrorMessage>{t('SOMETHING_WRONG', 'Something is wrong!')}</ErrorMessage>
+      )}
+    </>
+  )
+}
+
+export const StripeElementsForm = (props) => {
+  const stripeElementsFormProps = {
+    ...props,
+    UIComponent: StripeElementsFormUI
+  }
+  return <StripeElementsFormController {...stripeElementsFormProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/StripeElementsForm/styles.js

@@ -0,0 +1,13 @@
+import styled, { css } from 'styled-components'
+
+export const ErrorMessage = styled.p`
+  color: #D81212;
+  font-size: 24px;
+  padding-left: 10px;
+  font-weight: bold;
+  opacity: 0.8;
+  ${props => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0px;
+  `}
+`