ordering-ui-external 1.4.4 → 1.5.0

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

@@ -4,7 +4,8 @@ import {
   Messages as MessagesController,
   useUtils,
   useLanguage,
-  useSession
+  useSession,
+  useEvent
 } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import IosSend from '@meronex/icons/ios/IosSend'
@@ -90,6 +91,7 @@ const MessagesUI = (props) => {
   const { handleSubmit, register, errors, setValue } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [{ user }] = useSession()
+  const [events] = useEvent()
   const [{ parseDate, parseTime }] = useUtils()
   const buttonRef = useRef(null)
   const [modalImage, setModalImage] = useState({ open: false, src: '' })
@@ -299,6 +301,10 @@ const MessagesUI = (props) => {
     })
   }
 
+  const goToBusiness = (slug) => {
+    events.emit('go_to_page', { page: 'business', params: { business_slug: slug} })
+  }
+
   const MapMessages = ({ messages }) => {
     return (
       <>
@@ -575,7 +581,7 @@ const MessagesUI = (props) => {
                       onClick={() => onMessages({ business: true, driver: false })}
                       isCursor
                     >
-                      <Image>
+                      <Image onClick={() => goToBusiness(order?.business?.slug)}>
                         <ImageWithFallback
                           src={order.business?.logo || theme.images?.dummies?.businessLogo}
                           fallback={<FaUserAlt />}

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

@@ -47,17 +47,30 @@ export const CustomerInfoContainer = styled.div`
   padding: 30px 25px;
   margin-top: 48px;
   display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
+
 export const CustomerDetails = styled.div`
   flex: 1;
   > div {
     display: flex;
+    flex-direction: column;
     margin-top: 24px;
   }
+
+  @media (min-width: 576px) {
+    > div {
+      flex-direction: row;
+    }
+  }
 `
 export const PaymentDetails = styled.div`
   flex: 1;
-  h3.address {
+  h3 {
     margin-top: 30px;
   }
   p {
@@ -65,6 +78,12 @@ export const PaymentDetails = styled.div`
     line-height: 24px;
     margin: 10px 0;
   }
+
+  @media (min-width: 576px) {
+    h3:not(.address) {
+      margin-top: 0;
+    }
+  }
 `
 export const PhotoWrapper = styled.div`
   width: 75px;
@@ -154,6 +173,7 @@ export const SingleOrderHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
 
   > div {
     > div {
@@ -173,6 +193,10 @@ export const SingleOrderHeader = styled.div`
   button {
     height: 43px;
   }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
 export const OrderBusinessDetails = styled.div`
   display: flex;
@@ -181,8 +205,14 @@ export const OrderBusinessDetails = styled.div`
 `
 export const OrderBusinessWrapper = styled.div`
   display: flex;
+  flex-direction: column;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
 export const BusinessData = styled.div`
+  margin-top: 10px;
   p {
     font-size: 14px;
     line-height: 21px;
@@ -191,6 +221,9 @@ export const BusinessData = styled.div`
       font-weight: 500;
     }
   }
+  @media (min-width: 576px) {
+    margin-top: 0px;
+  }
 `
 export const ActionsBlock = styled.div`
   display: flex;

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

@@ -67,7 +67,7 @@ export const MyOrders = (props) => {
       {hideOrders && !allEmpty && (
         <h2>{t('PREVIOUSLY_ORDERED', 'Previously ordered')}</h2>
       )}
-      {!hideOrders && (
+      {!hideOrders && !props.hideOptions && (
         <ProfileOptions value='orders' />
       )}
       <Container hideOrders={hideOrders}>
@@ -135,7 +135,7 @@ export const MyOrders = (props) => {
                       setIsEmptyPreorder={setIsEmptyPreorder}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyPreorder && <Divider />}
                   </>
                 )}
                 {(selectItem === 'all' || selectItem === 'active') && (
@@ -147,7 +147,7 @@ export const MyOrders = (props) => {
                       setIsEmptyActive={setIsEmptyActive}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyActive && <Divider />}
                   </>
                 )}
                 {(selectItem === 'all' || selectItem === 'past') && (
@@ -159,7 +159,7 @@ export const MyOrders = (props) => {
                       setIsEmptyPast={setIsEmptyPast}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyPast && <Divider />}
                   </>
                 )}
               </>

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components'
 import { useLocation } from 'react-router-dom'
 import { useLanguage, useEvent, useOrder, useSession } from 'ordering-components-external'
 import BsHouse from '@meronex/icons/bs/BsHouse'
@@ -10,6 +11,9 @@ import FaRegUser from '@meronex/icons/fa/FaRegUser'
 import { CartContent } from '../CartContent'
 import { Modal } from '../Modal'
 import { AddressForm } from '../AddressForm'
+import { LoginForm } from '../LoginForm'
+import { SignUpForm } from '../SignUpForm'
+import { ForgotPasswordForm } from '../ForgotPasswordForm'
 
 import {
   NavigationBarContainer,
@@ -17,63 +21,114 @@ import {
 } from './styles'
 
 export const NavigationBar = () => {
+  const theme = useTheme()
   const [, t] = useLanguage()
   const location = useLocation()
   const [events] = useEvent()
   const [orderState] = useOrder()
-  const [{ auth }] = useSession()
+  const [{ auth }, { login }] = useSession()
   const [isCart, setIsCart] = useState(false)
   const [isAddress, setIsAddress] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
 
   const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
 
   const handleGoToPage = (data) => {
-    events.emit('go_to_page', data)
+    auth
+      ? events.emit('go_to_page', data)
+      : handleOpenLoginSignUp('login')
   }
 
   const handleChangeExplore = () => {
-    if (auth) handleGoToPage({ page: 'search' })
-    else setIsAddress(true)
+    auth
+      ? handleGoToPage({ page: 'search' })
+      : setIsAddress(true)
+  }
+
+  const handleOpenLoginSignUp = (index) => {
+    setModalPageToShow(index)
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setModalPageToShow(null)
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const itemlist = {
+    home: {
+      key: 'home',
+      text: t('HOME', 'Home'),
+      active: location.pathname === '/search' || isAddress,
+      onClick: handleChangeExplore
+    },
+    browse: {
+      key: 'browse',
+      active: location.pathname === '/business_search',
+      onClick: () => handleGoToPage({ page: 'business_search' }),
+      text: t('EXPLORE', 'Explore')
+    },
+    cart: {
+      key: 'cart',
+      active: isCart,
+      text: t('MY_CART', 'My cart'),
+      onClick: () => setIsCart(true)
+    },
+    orders: {
+      key: 'orders',
+      active: location.pathname === '/profile/orders',
+      text: t('ORDERS', 'Orders'),
+      onClick: () => handleGoToPage({ page: 'orders' })
+    },
+    profile: {
+      key: 'profile',
+      active: location.pathname === '/profile',
+      text: t('PROFILE', 'Profile'),
+      onClick: () => handleGoToPage({ page: 'profile' })
+    }
+  }
+
+  const getIcon = (icon) => {
+    return icon === 'home'
+      ? <BsHouse />
+      : icon === 'browse'
+        ? <BsSearch />
+        : icon === 'orders'
+          ? <BsCardChecklist />
+          : icon === 'cart'
+            ? <AiOutlineShoppingCart />
+            : <FaRegUser />
   }
 
   return (
     <>
       <NavigationBarContainer>
-        <NavigationLink
-          active={location.pathname === '/search' || isAddress}
-          onClick={handleChangeExplore}
-        >
-          <BsHouse />
-          <p>{t('HOME', 'Home')}</p>
-        </NavigationLink>
-        <NavigationLink
-          active={location.pathname === '/business_search'}
-          onClick={() => handleGoToPage({ page: 'business_search' })}
-        >
-          <BsSearch />
-          <p>{t('BROWSE', 'Browse')}</p>
-        </NavigationLink>
-        <NavigationLink
-          active={location.pathname === '/profile/orders'}
-          onClick={() => handleGoToPage({ page: 'orders' })}
-        >
-          <BsCardChecklist />
-          <p>{t('ORDERS', 'Orders')}</p>
-        </NavigationLink>
-        <NavigationLink
-          active={isCart}
-          onClick={() => setIsCart(true)}
-        >
-          <AiOutlineShoppingCart />
-          <p>{t('MY_CART', 'My cart')}</p>
-        </NavigationLink>
-        <NavigationLink
-          active={location.pathname === '/profile'}
-          onClick={() => handleGoToPage({ page: 'profile' })}
-        >
-          <FaRegUser />
-          <p>{t('PROFILE', 'Profile')}</p>
-        </NavigationLink>
+        {Object.values(itemlist).map(item => (
+          <NavigationLink
+            key={item.key}
+            active={item.active}
+            onClick={() => item.onClick()}
+          >
+            {getIcon(item.key)}
+            <p>{item.text}</p>
+          </NavigationLink>
+        ))}
       </NavigationBarContainer>
       <Modal
         open={isCart}
@@ -99,6 +154,65 @@ export const NavigationBar = () => {
           onSaveAddress={() => setIsAddress(false)}
         />
       </Modal>
+      <Modal
+        open={modalPageToShow && !auth}
+        onRemove={() => 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
+          />
+        )}
+        {modalPageToShow === 'forgotpassword' && (
+          <ForgotPasswordForm
+            elementLinkToLogin={
+              <a
+                onClick={
+                  (e) => handleCustomModalClick(e, { page: 'login' })
+                } href='#'
+              >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+              </a>
+            }
+            isPopup
+          />
+        )}
+      </Modal>
     </>
   )
 }

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

@@ -7,12 +7,12 @@ export const NavigationBarContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 15px 10vw;
-  position: sticky;
+  position: fixed;
   bottom: 0px;
   left: 0px;
   width: 100%;
   box-sizing: border-box;
-  z-index: 100;
+  z-index: 1005;
 `
 
 export const NavigationLink = styled.div`

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

@@ -11,7 +11,7 @@ import { useTheme } from 'styled-components'
 import { Modal } from '../Modal'
 import { Confirm } from '../Confirm'
 import { StripeElementsForm } from '../StripeElementsForm'
-
+import { getIconCard } from '../../../../../utils'
 import { NotFoundSource } from '../NotFoundSource'
 
 import {
@@ -148,7 +148,7 @@ export const PaymentCard = (props) => {
     handleDeleteCard,
     card,
     handleCardClick,
-    onSelectCard
+    onSelectCard 
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -156,18 +156,6 @@ export const PaymentCard = (props) => {
   const cardActionsRef = useRef(null)
   const actionWrapperRef = useRef(null)
 
-  const getIconCard = (brand = '') => {
-    const value = brand.toLowerCase()
-    switch (value) {
-      case 'visa':
-        return theme.images?.general?.visa
-      case 'mastercard':
-        return theme.images?.general?.mastercard
-      default:
-        return theme.images?.general?.credit
-    }
-  }
-
   const handleClickOutside = (e) => {
     if (!isShowActions) return
     const outsideCalendar = !cardActionsRef.current?.contains(e.target)

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

@@ -10,6 +10,7 @@ import { Cash, CreditCard } from 'react-bootstrap-icons'
 import {
   PaymentOptions as PaymentOptionsController,
   useLanguage,
+  useOrder,
   useSession
 } from 'ordering-components-external'
 
@@ -94,10 +95,12 @@ const PaymentOptionsUI = (props) => {
     onPaymentChange,
     setCreateOrder,
     onPlaceOrderClick,
-    handlePlaceOrder
+    handlePlaceOrder,
+    paymethods
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
+  const [{ loading: loadingOptions }] = useOrder()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const paymethodSelected = props.paySelected || props.paymethodSelected
@@ -108,8 +111,10 @@ const PaymentOptionsUI = (props) => {
 
   const includeKioskPaymethods = ['cash', 'card_delivery']
 
+  const list = paymethods ? paymethods?.map(pay => pay.paymethod) : paymethodsList?.paymethods
+
   const popupMethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square', 'google_pay', 'apple_pay']
-  const supportedMethods = paymethodsList.paymethods.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
+  const supportedMethods = list?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
 
   const handlePaymentMethodClick = (paymethod) => {
     if (cart?.balance > 0) {
@@ -131,7 +136,7 @@ const PaymentOptionsUI = (props) => {
   }
 
   useEffect(() => {
-    if (supportedMethods.length === 1 && !paymethodSelected && !popupMethods.includes(supportedMethods[0]?.gateway)) {
+    if (supportedMethods?.length === 1 && !paymethodSelected && !popupMethods.includes(supportedMethods[0]?.gateway)) {
       handlePaymethodClick && handlePaymethodClick(supportedMethods[0])
     }
   }, [supportedMethods])
@@ -168,7 +173,8 @@ const PaymentOptionsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <PaymentMethodsContainer>
         <PaymentMethodsList className='payments-list'>
-          {supportedMethods.length > 0 && (
+          {!(paymethodsList.loading || isLoading || loadingOptions) &&
+          supportedMethods.length > 0 && (
             supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
               <React.Fragment key={paymethod.id}>
                 {
@@ -191,7 +197,7 @@ const PaymentOptionsUI = (props) => {
             ))
           )}
 
-          {(paymethodsList.loading || isLoading) && (
+          {(paymethodsList.loading || isLoading || loadingOptions) && (
             [...Array(5).keys()].map(i => (
               <PayCard key={i} isSkeleton>
                 <Skeleton key={i} width={100} height={60} style={{ marginLeft: '10px' }} />
@@ -205,7 +211,7 @@ const PaymentOptionsUI = (props) => {
             />
           )}
 
-          {!(paymethodsList.loading || isLoading) &&
+          {!(paymethodsList.loading || isLoading || loadingOptions) &&
             !paymethodsList.error &&
             (!paymethodsList?.paymethods || supportedMethods.length === 0) &&
             (
@@ -290,7 +296,7 @@ const PaymentOptionsUI = (props) => {
               paymethod={isOpenMethod?.paymethod}
               businessId={props.businessId}
               publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
-              clientSecret={isOpenMethod?.paymethod?.credentials.publishable}
+              clientSecret={isOpenMethod?.paymethod?.credentials?.publishable}
               payType={paymethodsList?.name}
               onSelectCard={handlePaymethodDataChange}
               onCancel={() => handlePaymethodClick(null)}

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

@@ -109,6 +109,11 @@ export const CardItemContent = styled.div`
     font-size: 22px;
   }
 
+  img {
+      width: 24px;
+      height: 20px;
+  }
+
   .brand svg {
     font-size: 26px;
   }

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

@@ -22,7 +22,7 @@ import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { ProductIngredient } from '../ProductIngredient'
 import { ProductOption } from '../ProductOption'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
-import { ProductShare } from '../../../../../components/ProductShare'
+import { ProductShare } from '../ProductShare'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
@@ -91,7 +91,8 @@ const ProductOptionsUI = (props) => {
     handleSave,
     handleChangeIngredientState,
     handleChangeSuboptionState,
-    handleChangeCommentState
+    handleChangeCommentState,
+    productAddedToCartLength
   } = props
 
   const { product, loading, error } = productObject
@@ -375,6 +376,7 @@ const ProductOptionsUI = (props) => {
               slug={businessSlug}
               categoryId={product?.category_id}
               productId={product?.id}
+              product={product}
             />
           ) : (
             <div style={{ height: 30 }} />
@@ -640,15 +642,15 @@ const ProductOptionsUI = (props) => {
               <div className='price-amount-block'>
                 <div className='price'>
                   <h4>{productCart.total && parsePrice(productCart.total)}</h4>
-                  {product?.minimum_per_order && productCart?.quantity <= product?.minimum_per_order && productCart?.quantity !== 1 && <span>{t('MINIMUM_TO_ORDER', 'Minimum _number_ to order').replace('_number_', product?.minimum_per_order)}</span>}
-                  {product?.maximum_per_order && productCart?.quantity >= product?.maximum_per_order && <span>{t('MAXIMUM_TO_ORDER', 'Max. _number_ to order'.replace('_number_', product?.maximum_per_order))}</span>}
+                  {product?.minimum_per_order && (productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order && productCart?.quantity !== 1 && <span>{t('MINIMUM_TO_ORDER', 'Minimum _number_ to order').replace('_number_', product?.minimum_per_order)}</span>}
+                  {product?.maximum_per_order && (productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && <span>{t('MAXIMUM_TO_ORDER', 'Max. _number_ to order'.replace('_number_', product?.maximum_per_order))}</span>}
                 </div>
                 {
                   productCart && !isSoldOut && maxProductQuantity > 0 && (
                     <div className={isHaveWeight ? 'incdec-control show-weight-unit' : 'incdec-control'}>
                       <FiMinusCircle
                         onClick={decrement}
-                        className={`${productCart.quantity === 1 || !productCart.quantity || isSoldOut || (productCart?.quantity <= product?.minimum_per_order) ? 'disabled' : ''}`}
+                        className={`${productCart.quantity === 1 || !productCart.quantity || isSoldOut || ((productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order) ? 'disabled' : ''}`}
                       />
                       {
                         qtyBy?.pieces && (
@@ -669,7 +671,7 @@ const ProductOptionsUI = (props) => {
                       )}
                       <FiPlusCircle
                         onClick={increment}
-                        className={`${maxProductQuantity <= 0 || productCart.quantity >= maxProductQuantity || (productCart.quantity >= product?.maximum_per_order && product?.maximum_per_order) || isSoldOut ? 'disabled' : ''}`}
+                        className={`${maxProductQuantity <= 0 || (productCart?.quantity + productAddedToCartLength) >= maxProductQuantity || ((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) || isSoldOut ? 'disabled' : ''}`}
                       />
                       {isHaveWeight && (
                         <WeightUnitSwitch>
@@ -687,7 +689,7 @@ const ProductOptionsUI = (props) => {
                   className={`add ${(maxProductQuantity === 0 || Object.keys(errors).length > 0) ? 'disabled' : ''}`}
                   color='primary'
                   onClick={() => handleSaveProduct()}
-                  disabled={orderState.loading || productCart?.quantity === 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
+                  disabled={orderState.loading || productCart?.quantity === 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
                 >
                   {orderState.loading ? (
                     <span>{t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading')}</span>