ordering-ui-external 1.0.0 → 1.1.1

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

@@ -24,15 +24,18 @@ export const OrderBill = styled.div`
   table {
     width: 100%;
     font-size: 14px;
+
     td span {
       unicode-bidi: bidi-override;
     }
+
     tr td:nth-child(2) {
       text-align: right;
       ${props => props.theme?.rtl && css`
         text-align: left;
     `}
     }
+
     .icon {
       display: flex;
       align-items: center;
@@ -83,6 +86,7 @@ export const OrderBill = styled.div`
 export const CouponContainer = styled.div`
   width: 100%;
   margin: 10px;
+
   input, button {
     border-radius: 7.6px;
   }
@@ -102,6 +106,7 @@ export const CheckoutAction = styled.div`
     font-size: 18px;
     color: ${props => props.theme.colors.darkTextColor};
   }
+
   button {
     padding: 10px 30px;
     min-width: 150px;
@@ -118,6 +123,7 @@ export const Divider = styled.div`
   height: 8px;
   width: 100%;
   margin-left: 0;
+
   @media (min-width: 768px) {
     width: calc(100% + 60px);
     margin-left: -30px;

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

@@ -10,7 +10,10 @@ export const CartContent = (props) => {
     carts,
     isOrderStateCarts,
     isCartPopover,
-    isForceOpenCart
+    isForceOpenCart,
+    setPreorderBusiness,
+    isOpenCart,
+    isSlideBar
   } = props
 
   const [, t] = useLanguage()
@@ -38,18 +41,10 @@ export const CartContent = (props) => {
 
   return (
     <>
-      {
-      props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))
-      }
-      {
-      props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))
-      }
       <Container>
-        <Title>{t('YOUR_CART', 'Your cart')}</Title>
+        {!isSlideBar && (
+          <Title>{t('YOUR_CART', 'Your cart')}</Title>
+        )}
         {isOrderStateCarts && carts?.length > 0 &&
           carts.map(cart => (
             <React.Fragment key={cart.uuid}>
@@ -58,11 +53,13 @@ export const CartContent = (props) => {
                   isCartPending={cart?.status === 2}
                   cart={cart}
                   isCartPopover={isCartPopover}
-                  isCheckout={window.location.pathname === `/checkout/${cart?.uuid}`}
+                  isCheckout={window.location.pathname === `/checkout/${cart?.uuid}` && !isCartPopover}
                   isForceOpenCart={isForceOpenCart}
                   currentCartUuid={currentCartUuid}
                   isProducts={cart.products.length}
                   onClickCheckout={props.onClose}
+                  setPreorderBusiness={setPreorderBusiness}
+                  isOpenCart={isOpenCart}
                 />
               )}
             </React.Fragment>
@@ -74,16 +71,6 @@ export const CartContent = (props) => {
           </NotCarts>
         )}
       </Container>
-      {
-      props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))
-      }
-      {
-      props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))
-      }
     </>
   )
 }

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

@@ -4,19 +4,25 @@ import { usePopper } from 'react-popper'
 import {
   HeaderItem,
   PopoverBody,
-  PopoverArrow
+  PopoverArrow,
+  TitleContainer,
+  Title
 } from './styles'
 
-import { useOrder, useEvent } from 'ordering-components-external'
+import { useOrder, useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { CartContent } from '../CartContent'
+import { Modal } from '../Modal'
+import { Button } from '../../styles/Buttons'
+import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
 
 export const CartPopover = (props) => {
-  const { open, auth, location, isCustomerMode } = props
+  const { open, auth, location, isCustomerMode, setPreorderBusiness } = props
   const [orderState] = useOrder()
   const theme = useTheme()
   const [events] = useEvent()
-
+  const [, t] = useLanguage()
+  const [orderingTheme] = useOrderingTheme()
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -35,6 +41,8 @@ export const CartPopover = (props) => {
 
   const { styles, attributes, forceUpdate } = popper
 
+  const isSlideBar = orderingTheme?.theme?.header?.components?.cart?.open_strategy?.type === 'slide'
+
   useEffect(() => {
     // forceUpdate && forceUpdate()
   }, [open, orderState])
@@ -100,15 +108,45 @@ export const CartPopover = (props) => {
             {props.carts?.length > 0 && <span>{props.carts?.length}</span>}
           </span>
         </HeaderItem>
-        <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
-          <CartContent
-            isCartPopover
-            carts={props.carts}
-            isOrderStateCarts={!!orderState.carts}
+        {isSlideBar ? (
+          <Modal
+            open={open}
             onClose={props.onClose}
-          />
-          <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
-        </PopoverBody>
+            hideCloseDefault
+            isSlideBar
+            slideBarPosition={orderingTheme?.theme?.header?.components?.cart?.open_strategy?.position}
+          >
+            <TitleContainer>
+              <Title>{t('MY_CART', 'My cart')}</Title>
+              <Button outline color='primary' onClick={props.onClose}>
+                <AiOutlineClose /> {t('CLOSE', 'Close')}
+              </Button>
+            </TitleContainer>
+            <CartContent
+              isCartPopover
+              carts={props.carts}
+              isOrderStateCarts={!!orderState.carts}
+              onClose={props.onClose}
+              setPreorderBusiness={setPreorderBusiness}
+              isOpenCart={open}
+              onClick={props.onClick}
+              isSlideBar={isSlideBar}
+            />
+          </Modal>
+        ) : (
+          <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
+            <CartContent
+              isCartPopover
+              carts={props.carts}
+              isOrderStateCarts={!!orderState.carts}
+              onClose={props.onClose}
+              setPreorderBusiness={setPreorderBusiness}
+              isOpenCart={open}
+              onClick={props.onClick}
+            />
+            <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
+          </PopoverBody>
+        )}
       </div>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -43,3 +43,30 @@ export const PopoverArrow = styled.div`
   border-bottom: 8px solid #FFF;
   top: -8px;
 `
+
+export const Title = styled.h1`
+  font-weight: 600;
+  font-size: 20px;
+  color: ${props => props.theme.colors.darkTextColor};
+  margin-bottom: 8px;
+  line-height: 30px;
+  margin-top: 0;
+  text-align: center;
+
+  @media (min-width: 576px) {
+    text-align: left;
+  }
+`
+
+export const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  button {
+    display: flex;
+    align-items: center;
+    border-radius: 16px;
+    svg{
+      margin-right: 5px;
+    }
+  }
+`

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import VscWarning from '@meronex/icons/vsc/VscWarning'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
+import { Modal } from '../Modal'
 import {
   Checkout as CheckoutController,
   useOrder,
@@ -106,6 +107,9 @@ const CheckoutUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(null)
   const [behalfName, setBehalfName] = useState(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [requiredFields, setRequiredFields] = useState([])
+  const [isSuccess, setIsSuccess] = useState(false)
 
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
@@ -140,7 +144,7 @@ const CheckoutUI = (props) => {
   })
 
   const handlePlaceOrder = () => {
-    if (!userErrors.length) {
+    if (!userErrors.length && !requiredFields?.length) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -148,6 +152,10 @@ const CheckoutUI = (props) => {
       handlerClickPlaceOrder && handlerClickPlaceOrder(null, body)
       return
     }
+    if (requiredFields?.length) {
+      setIsOpen(true)
+      return
+    }
     setAlertState({
       open: true,
       content: Object.values(userErrors).map(error => error)
@@ -168,11 +176,12 @@ const CheckoutUI = (props) => {
     const errors = []
     const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
     const userSelected = isCustomerMode ? customerState.user : user
+    const _requiredFields = []
 
     Object.values(validationFields?.fields?.checkout).map(field => {
       if (field?.enabled && field?.required && !notFields.includes(field.code)) {
         if (userSelected && !userSelected[field?.code]) {
-          errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+          _requiredFields.push(field?.code)
         }
       }
     })
@@ -184,8 +193,9 @@ const CheckoutUI = (props) => {
         validationFields?.fields?.checkout?.cellphone?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
-      errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+      _requiredFields.push('cellphone')
     }
+    setRequiredFields(_requiredFields)
 
     if (userSelected && userSelected?.cellphone) {
       if (userSelected?.country_phone_code) {
@@ -289,6 +299,7 @@ const CheckoutUI = (props) => {
                       isCustomerMode={isCustomerMode}
                       userData={isCustomerMode && customerState.user}
                       userId={isCustomerMode && customerState?.user?.id}
+                      isSuccess={isSuccess}
                       isCheckout
                     />
                   )}
@@ -524,6 +535,30 @@ const CheckoutUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        open={isOpen}
+        width='760px'
+        padding='30px'
+        onClose={() => setIsOpen(false)}
+      >
+        <UserDetails
+          isUserDetailsEdit={isUserDetailsEdit}
+          cartStatus={cart?.status}
+          businessId={cart?.business_id}
+          useValidationFields
+          useDefualtSessionManager
+          useSessionUser={!isCustomerMode}
+          isCustomerMode={isCustomerMode}
+          userData={isCustomerMode && customerState.user}
+          userId={isCustomerMode && customerState?.user?.id}
+          requiredFields={requiredFields}
+          setIsSuccess={setIsSuccess}
+          isCheckout
+          isEdit
+          isModal
+          onClose={() => setIsOpen(false)}
+        />
+      </Modal>
     </Container>
   )
 }

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

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils } from 'ordering-components-external'
@@ -411,10 +412,9 @@ export const Header = (props) => {
         )}
         {modalIsOpen && (
           <Modal
-            title={(modalSelected === 'address') ? t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?') : null}
             open={modalIsOpen}
             onClose={() => setModalIsOpen(false)}
-            width='700px'
+            width={modalSelected === 'address' ? '70%' : '700px'}
           >
             {modalSelected === 'cart' && (
               <CartContent
@@ -430,7 +430,6 @@ export const Header = (props) => {
                   changeOrderAddressWithDefault
                   userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
                   onCancel={() => setModalIsOpen(false)}
-                  onAccept={() => setModalIsOpen(false)}
                   isCustomerMode={isCustomerMode}
                 />
               ) : (

package/src/themes/five/src/components/HomeHero/layouts/KioskHomeHero/index.js

@@ -69,7 +69,7 @@ export const KioskHomeHero = (props) => {
             <Button
               color='primary'
               name='find-business'
-              style={{ width: 'auto' }}
+              style={{ width: 'auto', padding: '5px 20px' }}
             >
               {t('TOUCH_ANYWHERE_TO_ORDER', theme?.defaultLanguages?.TOUCH_ANYWHERE_TO_ORDER || 'Touch anywhere to order')}
             </Button>

package/src/themes/five/src/components/HomeHero/layouts/KioskHomeHero/styles.js

@@ -38,6 +38,6 @@ export const HeroContent = styled.div`
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    padding-bottom: 30px;
+    padding-bottom: 60px;
   }
 `

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

@@ -43,8 +43,8 @@ export const HorizontalOrdersLayout = (props) => {
           <BeforeComponent key={i} {...props} />))}
         {orders.length > 0 && !notOrders && ordersToShow.map(order => (
           <SingleOrderCard
-            key={order.id}
             {...props}
+            key={order.id}
             order={order}
           />
         ))}
@@ -87,8 +87,8 @@ export const HorizontalOrdersLayout = (props) => {
           <AutoScroll scrollId={activeOrders ? 'activeOrders' : (pastOrders ? 'pastOrders' : 'prevOrders')}>
             {orders.length > 0 && ordersToShow.map(order => (
               <SingleOrderCard
-                key={order.id}
                 {...props}
+                key={order.id}
                 order={order}
               />
             ))}

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

@@ -27,6 +27,7 @@ export const Price = styled.div`
     flex-direction: column;
     align-items: flex-end;
   `}
+
   h2 {
     font-size: 16px;
     margin-block-end: ${({ isBusinessesPage }) => isBusinessesPage ? '0.1em' : '1em'};
@@ -42,10 +43,12 @@ export const Price = styled.div`
     text-overflow: ellipsis;
     margin-left: 5px;
   }
+
   p[name='view-cart']{
     color: ${props => props.theme.colors.primary};
     cursor: pointer;
   }
+
   @media (min-width: 480px) {
     ${({ isCustomerMode }) => !isCustomerMode && css`
       flex-direction: row;
@@ -63,6 +66,7 @@ export const Card = styled.div`
   display: inline-block;
   text-align: left;
   transition: all 0.3s ease;
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
     min-width: 300px;
     width: 300px;
@@ -73,28 +77,35 @@ export const Card = styled.div`
     height: ${({ isBusinessesPage }) => isBusinessesPage && '300px'};
     max-height: ${({ isBusinessesPage }) => isBusinessesPage ? '300px' : '220px'};
   `}
+
   &:hover {
     box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
   }
+
   button.load-orders {
     padding: 10px 30px;
   }
+
   ${props => props.theme?.rtl && css`
     text-align: right;
   `}
+
   ${props => (props.nobg || props.isBusinessesPage) && css`
     background: transparent;
   `}
+
   ${props => props.flex && css`
     display: flex;
     align-items: center;
     justify-content: center;
   `}
+
   @media (min-width: 480px) {
     min-width: 430px;
     max-height: ${({ isBusinessesPage }) => isBusinessesPage ? '300px' : '250px'};
     width: 430px;
   }
+
   @media(min-width: 993px){
     ${({ isBusinessesPage }) => isBusinessesPage && css`
       margin: 30px 20px;
@@ -119,11 +130,14 @@ const BusinessLogoWrapperStyled = styled.div`
   align-items: center;
   border-radius: 7.6px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+
   margin-left: 8px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 8px;
   `}
+
   @media (min-width: 576px) {
     width: 86px;
     min-width: 86px;
@@ -153,6 +167,7 @@ export const ButtonWrapper = styled.div`
   top: 4px;
   display: flex;
   align-items: center;
+
   button {
     border-radius: 50px;
     font-size: 10px;
@@ -160,6 +175,7 @@ export const ButtonWrapper = styled.div`
     padding: 4px 8px;
     border: 1px solid ${props => props.theme.colors.primaryContrast};
     margin: 5px;
+
     &.reorder {
       background: ${props => props.theme.colors.primaryContrast};
       &:hover {
@@ -174,11 +190,13 @@ export const Logo = styled.div`
   height: 55px;
   filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
   border-radius: 7.6px;
+
   img {
     width: 100%;
     height: 100%;
     border-radius: 7.6px;
   }
+
   @media (min-width: 480px){
     width: 86px;
     height: 86px;

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

@@ -5,12 +5,15 @@ export const LoginContainer = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  min-height: ${({ isPopup }) => isPopup ? '410px' : 'calc(100vh - 65px)'};
   padding: 0 10px;
   box-sizing: border-box;
 
   flex-direction: column;
 
+  ${({ isPopup }) => !isPopup && css`
+    min-height: calc(100vh - 65px);
+  `}
+
   @media (min-width: 768px) {
     flex-direction: row;
   }

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

@@ -26,6 +26,8 @@ const ModalUI = (props) => {
     isProductForm,
     authModal,
     onRemove,
+    isSlideBar,
+    slideBarPosition,
     disableOverflowX
   } = props
   const [, t] = useLanguage()
@@ -56,6 +58,9 @@ const ModalUI = (props) => {
       height={props.height}
       padding={props.padding}
       isTransparent={isTransparent}
+      isSlideBar={isSlideBar}
+      slideBarPosition={slideBarPosition}
+      open={props.open}
       disableOverflowX={disableOverflowX}
       style={props.customStyle}
     >

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

@@ -27,6 +27,42 @@ export const ModalDialog = styled.div`
     max-height: 90vh;
     border-radius: 10px;
     height: auto;
+    ${({ isSlideBar, slideBarPosition, open }) => isSlideBar && css`
+      position: fixed;
+      max-height: 100vh;
+      height: 100%;
+      min-width: 0px;
+      width: 0%;
+      right: ${slideBarPosition !== 'left' ? 0 : 'initial'};
+      left: ${slideBarPosition === 'left' ? 0 : 'initial'};
+
+      ${open ? css`
+        animation: slide-in 0.25s forwards;
+        -webkit-animation: slide-in 0.25s forwards;
+      ` : css`
+        animation: slide-out 0.25s forwards;
+        -webkit-animation: slide-out 0.25s forwards; 
+      `}
+
+
+      @-webkit-keyframes slide-in {
+       100% { width: 25%; min-width: 400px; }
+      }
+
+      @keyframes slide-in {
+        100% { width: 25%; min-width: 400px; }
+      }
+
+      @keyframes slide-out {
+        0% { width: 25%; min-width: 400px; }
+        100% { width: 0%; min-width: 0px; }
+      }
+
+      @-webkit-keyframes slide-out {
+        0% { width: 25%; min-width: 400px; }
+        100% { width: 0%; min-width: 0px; }
+      }
+    `}
   }
 `