ordering-ui-external 1.4.5 → 1.5.1

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/OrderDetails/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import {
   useLanguage,
@@ -12,6 +12,7 @@ import {
   useOrderingTheme
 } from 'ordering-components-external'
 import RiUser2Fill from '@meronex/icons/ri/RiUser2Fill'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
 import { Button } from '../../styles/Buttons'
 import { NotFoundSource } from '../NotFoundSource'
@@ -65,7 +66,9 @@ import {
   OrderStatusAndLinkContainer,
   LinkWrapper,
   MapWrapper,
-  BusinessExternalWrapper
+  BusinessExternalWrapper,
+  ProfessionalWrapper,
+  ProfessionalBlock
 } from './styles'
 import { useTheme } from 'styled-components'
 import { TaxInformation } from '../TaxInformation'
@@ -285,6 +288,45 @@ const OrderDetailsUI = (props) => {
     handleReorder(order.id)
   }
 
+  const getProductList = () => {
+    const professionalList = order?.products.reduce((prev, current) => {
+      const found = prev.find(item => item.id === current?.calendar_event?.professional?.id)
+      if (found || !current?.calendar_event) {
+        return prev
+      }
+      return [...prev, current?.calendar_event?.professional]
+    }, [])
+
+    return (
+      <>
+        {professionalList?.length > 0 && professionalList.map((professional, i) => (
+          <ProfessionalBlock key={i}>
+            <ProfessionalWrapper>
+              {professional?.photo
+                ? <img src={professional?.photo} alt='' />
+                : <FaUserAlt />}
+              <p>{professional?.name} {professional?.lastname}</p>
+            </ProfessionalWrapper>
+            {order?.products.filter(product => product?.calendar_event?.professional?.id === professional?.id).map(product => (
+              <ProductItemAccordion
+                key={product.id}
+                product={product}
+              />
+            ))}
+          </ProfessionalBlock>
+        ))}
+        {order?.products.filter(product => !product?.calendar_event).map(product => (
+          <ProductItemAccordion
+            key={product.id}
+            product={product}
+          />
+        ))}
+      </>
+    )
+  }
+
+  const sortedProductList = useMemo(() => getProductList(), [order?.products])
+
   const ActionsSectionProps = {
     order,
     handleBusinessRedirect,
@@ -661,12 +703,7 @@ const OrderDetailsUI = (props) => {
                 <OrderHeaderInfoSection />
                 <OrderActionsSection />
               </HeaderTitle>
-              {order?.products?.length && order?.products.map(product => (
-                <ProductItemAccordion
-                  key={product.id}
-                  product={product}
-                />
-              ))}
+              {sortedProductList}
               <OrderBillSection
                 order={order}
                 setOpenTaxModal={setOpenTaxModal}

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

@@ -737,3 +737,53 @@ export const BusinessExternalWrapper = styled.div`
     width: 50%;
   }
 `
+
+export const ProfessionalWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0px 10px 10px 10px;
+
+  > img {
+    width: 55px;
+    height: 55px;
+    min-width: 55px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+
+  > svg {
+    width: 55px;
+    height: 55px;
+    min-width: 55px;
+  }
+
+  > p {
+    font-weight: 600;
+    font-size: 17px;
+    line-height: 26px;
+    margin-left: 14px;
+
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 14px;
+    `}
+  }
+
+  @media (min-width: 411px) {
+    > img {
+      width: 65px;
+      height: 65px;
+      min-width: 65px;
+    }
+    > svg {
+      width: 65px;
+      height: 65px;
+      min-width: 65px;
+    }
+  }
+`
+
+export const ProfessionalBlock = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors.disabled};
+  margin-bottom: 15px;
+`

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>