ordering-ui-external 1.7.1 → 1.8.0

package/src/themes/five/src/components/SingleProductCard/layouts/starbucks/index.js

@@ -0,0 +1,313 @@
+import React, { useRef, useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useLanguage, useConfig, useOrder, useUtils, useSession, useOrderingTheme, SingleProductCard as SingleProductCardController } from 'ordering-components-external'
+import { shape } from '../../../../../../../utils'
+import { useIntersectionObserver } from '../../../../../../../hooks/useIntersectionObserver'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { Modal } from '../../../Modal'
+import { LoginForm } from '../../../LoginForm'
+import { SignUpForm } from '../../../SignUpForm'
+import { ForgotPasswordForm } from '../../../ForgotPasswordForm'
+import { Alert } from '../../../Confirm'
+import MdAddCircleOutline from '@meronex/icons/ios/MdAddCircleOutline'
+import {
+  CardContainer,
+  CardInfo,
+  WrapLogo,
+  CardLogo,
+  SoldOut,
+  PriceWrapper,
+  QuantityContainer,
+  RibbonBox,
+  TitleWrapper,
+  LastOrder,
+  SkeletonCardInfo,
+  SkeletonCardLogo,
+  AddButton,
+  SkeletonWrapper
+} from './styles'
+
+const SingleProductCardUI = (props) => {
+  const {
+    product,
+    isSoldOut,
+    isSkeleton,
+    onProductClick,
+    isCartOnProductsList,
+    useCustomFunctionality,
+    onCustomClick,
+    customText,
+    customStyle,
+    useKioskApp,
+    productAddedToCartLength,
+    handleFavoriteProduct,
+    isFavorite,
+    isPreviously
+  } = props
+
+  const [, t] = useLanguage()
+  const [$element, isObserved] = useIntersectionObserver()
+  const [stateConfig] = useConfig()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+  const [orderState] = useOrder()
+  const [{ auth }, { login }] = useSession()
+  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
+  const favoriteRef = useRef(null)
+
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const editMode = typeof product?.code !== 'undefined'
+  const isObservedValidation = isObserved || useKioskApp
+
+  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
+
+  const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
+  // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
+
+  let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance
+  maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig
+
+  const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
+
+  const handleClickProduct = (e) => {
+    if (favoriteRef?.current?.contains(e.target)) return
+    if (productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order) {
+      setAlertState({
+        open: true,
+        content: [t('PRODUCT_ON_MAXIMUM_ORDER', 'The product is on maximum order')]
+      })
+      return
+    }
+
+    if (isFavorite) {
+      onProductClick && onProductClick()
+      return
+    }
+    (!isSkeleton && !useCustomFunctionality && onProductClick && onProductClick(product, product?.business?.slug)) ||
+      (useCustomFunctionality && onCustomClick && onCustomClick())
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+    } else {
+      setModalPageToShow('login')
+      setIsModalOpen(true)
+    }
+  }
+
+  const closeAuthModal = () => {
+    setIsModalOpen(false)
+    setModalPageToShow(null)
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  return (
+    <>
+      <CardContainer
+        ref={$element}
+        soldOut={isSoldOut || maxProductQuantity <= 0}
+        onClick={handleClickProduct}
+        isCartOnProductsList={isCartOnProductsList}
+        style={useCustomFunctionality && customStyle}
+        className='product-card'
+        isShowAddButt={!useCustomFunctionality && !hideAddButton && !isSkeleton}
+      // productsRows={productsRows}
+      >
+        {isObservedValidation ? (
+          <>
+            <div>
+              {!useCustomFunctionality && (
+                <>
+                  <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')} oneLine={isPreviously}>
+                    <>
+                      {!isSkeleton ? (
+                        <WrapLogo isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}>
+                          {!isSkeleton && productAddedToCartLength > 0 && (
+                            <QuantityContainer>
+                              <span>{productAddedToCartLength}</span>
+                            </QuantityContainer>
+                          )}
+                          {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={isSoldOut || maxProductQuantity <= 0}
+                            bgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+                          />
+                        </WrapLogo>
+                      ) : (
+                        <Skeleton height={75} width={75} />
+                      )}
+                      {!isSkeleton ? (
+                        <PriceWrapper>
+                          <span>{product?.price ? parsePrice(product?.price) : ''}</span>
+                          {!(isSoldOut || maxProductQuantity <= 0) && (
+                            <span className='off-price'>{product?.offer_price && product?.in_offer ? parsePrice(product?.offer_price) : ''}</span>
+                          )}
+                        </PriceWrapper>
+                      ) : (
+                        <Skeleton width={100} />
+                      )}
+                      {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
+                      {!useKioskApp && !isPreviously && (
+                        !isSkeleton ? (
+                          <span onClick={() => handleChangeFavorite()} ref={favoriteRef}>
+                            {product?.favorite ? <Like /> : <DisLike />}
+                          </span>
+                        ) : (<Skeleton width={16} height={16} />)
+                      )}
+                    </>
+                    {/* {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)} */}
+                    {isPreviously && (!isSkeleton ? (<LastOrder>{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}</LastOrder>) : (<Skeleton width={80} />))}
+                  </CardInfo>
+
+                  {(isSoldOut || maxProductQuantity <= 0) && <SoldOut isBottom={product?.ribbon?.enabled}>{t('SOLD_OUT', 'SOLD OUT')}</SoldOut>}
+                </>
+              )}
+              {useCustomFunctionality && customText && (
+                <span style={{ fontSize: 16, fontWeight: 500 }}>{customText}</span>
+              )}
+            </div>
+            {!useCustomFunctionality && !hideAddButton && !isSkeleton && (
+              <AddButton>
+                <MdAddCircleOutline disabled={productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order} />
+              </AddButton>
+            )}
+          </>
+        ) : (
+          <SkeletonWrapper>
+            <SkeletonCardLogo>
+              <Skeleton height={75} width={75} />
+            </SkeletonCardLogo>
+            <SkeletonCardInfo>
+              <Skeleton width={100} />
+              <Skeleton width={100} />
+              <Skeleton width={100} />
+            </SkeletonCardInfo>
+          </SkeletonWrapper>
+        )}
+      </CardContainer>
+      <Modal
+        open={isModalOpen}
+        onRemove={() => closeAuthModal()}
+        onClose={() => closeAuthModal()}
+        width='50%'
+        authModal
+      >
+        {modalPageToShow === 'login' && (
+          <LoginForm
+            handleSuccessLogin={handleSuccessLogin}
+            elementLinkToSignup={
+              <a
+                onClick={
+                  (e) => handleCustomModalClick(e, { page: 'signup' })
+                } href='#'
+              >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
+              </a>
+            }
+            elementLinkToForgotPassword={
+              <a
+                onClick={
+                  (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
+                } href='#'
+              >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
+              </a>
+            }
+            useLoginByCellphone
+            isPopup
+          />
+        )}
+        {modalPageToShow === 'signup' && (
+          <SignUpForm
+            elementLinkToLogin={
+              <a
+                onClick={
+                  (e) => handleCustomModalClick(e, { page: 'login' })
+                } href='#'
+              >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+              </a>
+            }
+            useLoginByCellphone
+            useChekoutFileds
+            handleSuccessSignup={handleSuccessSignup}
+            isPopup
+            closeModal={() => closeAuthModal()}
+          />
+        )}
+        {modalPageToShow === 'forgotpassword' && (
+          <ForgotPasswordForm
+            elementLinkToLogin={
+              <a
+                onClick={
+                  (e) => handleCustomModalClick(e, { page: 'login' })
+                } href='#'
+              >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+              </a>
+            }
+            isPopup
+          />
+        )}
+      </Modal>
+      <Alert
+        title={t('PRODUCT', 'Product')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const SingleProductCard = (props) => {
+  const singleProductCardProps = {
+    ...props,
+    UIComponent: SingleProductCardUI
+  }
+  return <SingleProductCardController {...singleProductCardProps} />
+}

package/src/themes/five/src/components/SingleProductCard/layouts/starbucks/styles.js

@@ -0,0 +1,353 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const CardContainer = styled.div`
+  ${({ isShowAddButt }) => css`
+    min-height: ${isShowAddButt ? '230px' : '200px'};
+    max-height: ${isShowAddButt ? '230px' : '200px'};
+  `}
+  background: ${({ soldOut }) => soldOut ? '#6c757d33' : '#FFF'};
+  padding: 10px;
+  border-radius: 7.6px;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  > div {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  ${({ productsRows }) => productsRows ? css`
+    width: ${() => productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)'};
+    margin: 10px;
+  ` : css`
+  width: 100%;
+  margin: 10px 0px;
+
+  @media (min-width: 380px) {
+    margin: 10px;
+    width: calc(100% - 20px);
+  }
+  @media (min-width: 480px) {
+    margin: 10px;
+    width: calc(50% - 20px);
+  }
+  ${({ isCartOnProductsList }) => isCartOnProductsList ? css`
+    @media (min-width: 993px) {
+      width: calc(25% - 20px); // 4 per row
+      margin: 10px 20px 10px 0px;
+      ${props => props.theme?.rtl && css`
+        margin: 10px 0px 10px 20px;
+      `}
+    }
+  ` : css`
+    @media (min-width: 681px) {
+      width: calc(33% - 20px);
+    }
+
+    @media (min-width: 993px) {
+      width: calc(25% - 20px);
+    }
+
+    @media (min-width: 1440px) {
+      width: calc(20% - 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;
+  width: 100%;
+  > * {
+    margin: 3px;
+  }
+  ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'pfchangs' && css`
+    
+  `}
+  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;
+    text-align: center;
+  }
+
+  span {
+    color: ${props => props.theme.colors.darkTextColor};
+    font-size: 14px;
+  }
+
+  ${({ oneLine }) => oneLine && css`
+    p {
+      -webkit-line-clamp: 1;
+    }
+  `}
+
+  h1 {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    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;
+    text-align: center;
+    svg {
+      color: ${props => props.theme.colors.danger500};
+      font-size: 16px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    p {
+      font-size: 12px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+  }
+`
+
+export const WrapLogo = styled.div`
+  position: relative;
+  max-width: 100px;
+  max-height: 100px;
+  height: 100px;
+  align-self: center;
+  ${({ isBgimage }) => isBgimage && css`
+    width: 100px;
+  `}
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 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: ${({ theme }) => theme?.business_view?.components?.products?.components?.photo?.components?.style?.borderRadius || '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;
+  justify-content: center;
+  .off-price {
+    ${({ hasOffer }) => !hasOffer && css`
+      display: none;
+    `}
+    font-size: 10px;
+    color: #909BA9;
+    text-decoration: line-through;
+    text-align: center;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0;
+    `}
+
+    @media (min-width: 1024px) {
+      font-size: 13px;
+    }
+  }
+`
+
+export const QuantityContainer = styled.div`
+  background: ${({ theme }) => theme.colors.primary};
+  color: #fff;
+  position: absolute;
+  left: 100%;
+  bottom: 100%;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  border-radius: 50%;
+  transform: translate(-20px, 80%);
+  z-index: 100;
+  span{
+    color: #fff
+  }
+  @media (min-width: 768px) {
+    transform: translate(-50%, 80%);
+  }
+`
+
+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;
+  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 LastOrder = styled.span`
+  color: ${props => props.theme.colors.primary};
+  font-weight: 400;
+  font-size: 10px !important;
+  margin: 0px 3px;
+`
+
+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;
+    }
+  }
+`
+export const SkeletonCardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 10px);
+  > * {
+    margin: 3px;
+  }
+`
+export const SkeletonCardLogo = styled.div`
+  max-width: 100px;
+  max-height: 100px;
+  width: 100px;
+  height: 100px;
+  margin-left: 5px;
+  span{
+    border-radius: ${({ theme }) => theme?.business_view?.components?.products?.components?.photo?.components?.style?.borderRadius || '10px'};
+  }
+  ${props => props.theme?.rtl && css`
+    margin-right: 5px;
+    margin-left: 0px;
+  `}
+`
+
+export const AddButton = styled.div`
+  display: flex;
+  width: 100%;
+  
+  svg {
+    width: 30px;
+    height: 30px;
+    color: #016341;
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  text-align: center;
+`

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

@@ -52,6 +52,7 @@ const StripeElementsFormUI = (props) => {
               handleSource={handleSource}
               onNewCard={onNewCard}
               toSave={toSave}
+              isSplitForm
               requirements={requirements}
               businessId={businessId}
               handleCancel={onCancel}

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

@@ -43,6 +43,7 @@ export const UserPopover = (props) => {
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
   const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
 
   const extraOptions = [
     { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account', isActive: true },
@@ -121,6 +122,7 @@ export const UserPopover = (props) => {
       <HeaderItem
         isPhoto={sessionState?.user?.photo}
         isHome={isHome}
+        isChew={isChew}
         ref={referenceElement}
         isOpen={open}
         onClick={props.onClick}

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

@@ -8,7 +8,7 @@ export const HeaderItem = styled.div`
   padding: 7px 13px;
   margin: 0px;
 
-  ${({ isOpen }) => isOpen && css`
+  ${({ isOpen, isChew }) => (isOpen && !isChew) && css`
     background: #F8F9FA;
   `}
 
@@ -27,7 +27,7 @@ export const HeaderItem = styled.div`
       margin-left: 20px;
       margin-right: 0;
     `}
-    color: ${props => props.theme.colors.darkTextColor};
+    color: ${props => props.isChew ? props.theme.colors.backgroundPage : props.theme.colors.darkTextColor};
   }
 
   img {