ordering-ui-external 8.0.4 → 9.0.1

package/src/components/Header/index.js

@@ -39,6 +39,9 @@ import { HeaderOption } from '../HeaderOption'
 import { SidebarMenu } from '../SidebarMenu'
 import { UserDetails } from '../UserDetails'
 import { Confirm } from '../Confirm'
+import { LoginForm } from '../../themes/five/src/components/LoginForm'
+import { SignUpForm } from '../../themes/five/src/components/SignUpForm'
+import { ForgotPasswordForm } from '../../themes/five/src/components/ForgotPasswordForm'
 
 export const Header = (props) => {
   const {
@@ -48,13 +51,15 @@ export const Header = (props) => {
     isShowOrderOptions,
     isHideSignup,
     isCustomerMode,
-    isLinkedToAdmin
+    isLinkedToAdmin,
+    notificationState,
+    useModalMode
   } = props
 
   const { pathname } = useLocation()
   const [events] = useEvent()
   const [, t] = useLanguage()
-  const [{ auth }] = useSession()
+  const [{ auth }, { login }] = useSession()
   const [orderState, { refreshOrderOptions }] = useOrder()
   const [openPopover, setOpenPopover] = useState({})
   const theme = useTheme()
@@ -67,6 +72,8 @@ export const Header = (props) => {
   const [modalSelected, setModalSelected] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isFarAway, setIsFarAway] = useState(false)
+  const [authModalOpen, setAuthModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
 
   const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
 
@@ -101,6 +108,16 @@ export const Header = (props) => {
     setModalIsOpen(true)
   }
 
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+  }
+
   const handleTogglePopover = (type) => {
     setOpenPopover({
       ...openPopover,
@@ -129,6 +146,28 @@ export const Header = (props) => {
     }
   }
 
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleOpenLoginSignUp = (index) => {
+    if (isCustomerMode) {
+      events.emit('go_to_page', { page: 'home' })
+    } else {
+      setModalPageToShow(index)
+      setAuthModalOpen(true)
+    }
+  }
+
   useEffect(() => {
     events.on('cart_product_added', handleAddProduct)
     return () => events.off('cart_product_added', handleAddProduct)
@@ -243,9 +282,9 @@ export const Header = (props) => {
                 {
                   !auth && windowSize.width > 870 && !isCustomerMode && (
                     <>
-                      <MenuLink onClick={() => handleGoToPage({ page: 'signin' })} name='signin'>{t('SIGN_IN', theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
+                      <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({ page: 'signin' })} name='signin'>{t('SIGN_IN', theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
                       {!isHideSignup && (
-                        <MenuLink onClick={() => handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}</MenuLink>
+                        <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}</MenuLink>
                       )}
                     </>
                   )
@@ -404,6 +443,72 @@ export const Header = (props) => {
             </UserEdit>
           </Modal>
         )}
+        {authModalOpen && !auth && (
+          <Modal
+            open={authModalOpen}
+            onRemove={() => closeAuthModal()}
+            onClose={() => closeAuthModal()}
+            width='50%'
+            authModal
+            closeOnBackdrop
+          >
+            {modalPageToShow === 'login' && (
+              <LoginForm
+                notificationState={notificationState}
+                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
+                notificationState={notificationState}
+                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>
+        )}
         <Confirm
           title={t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
           content={confirm.content}

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -34,6 +34,8 @@ const SingleOrderCardUI = (props) => {
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
 
+  const isGiftCardOrder = !order?.business_id
+
   const handleChangeFavorite = (order) => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
   }
@@ -110,24 +112,26 @@ const SingleOrderCardUI = (props) => {
           )}
         </BusinessInformation>
       </OrderPastContent>
-      <Reorder>
-        {!hideReviewOrderButton && (
-          <Button
-            outline
-            disabled={!!order?.review}
-            color='primary'
-            className='review'
-            onClick={() => setOrderSelected(order)}
-          >
-            {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
-          </Button>
-        )}
-        {!hideReorderButton && typeof order?.id === 'number' && (
-          <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
-            {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
-          </Button>
-        )}
-      </Reorder>
+      {!isGiftCardOrder && (
+        <Reorder>
+          {!hideReviewOrderButton && (
+            <Button
+              outline
+              disabled={!!order?.review}
+              color='primary'
+              className='review'
+              onClick={() => setOrderSelected(order)}
+            >
+              {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
+            </Button>
+          )}
+          {!hideReorderButton && typeof order?.id === 'number' && (
+            <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
+              {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
+            </Button>
+          )}
+        </Reorder>
+      )}
     </SingleCard>
   )
 }

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

@@ -378,7 +378,7 @@ export const TitleWrapper = styled.div`
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    background: ${({ theme }) => theme?.colors?.white};
+    background: ${({ theme }) => theme?.colors?.backgroundPage};
     &.fixed-name {
       z-index: 10001;
       position: fixed;

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

@@ -585,7 +585,8 @@ export const BusinessProductsListing = (props) => {
     ...props,
     UIComponent: BusinessProductsListingUI,
     isInitialRender,
-    handleUpdateInitialRender: (val) => setIsInitialRender(val)
+    handleUpdateInitialRender: (val) => setIsInitialRender(val),
+    isFetchAllProducts: true
   }
 
   return (

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

@@ -50,6 +50,7 @@ import { ForgotPasswordForm } from '../ForgotPasswordForm'
 import { getDistance, getCateringValues } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
 import { SearchBar } from '../SearchBar'
+import { Button } from '../../styles/Buttons'
 
 export const Header = (props) => {
   const {
@@ -354,14 +355,14 @@ export const Header = (props) => {
                       {t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
                     </MenuLink>
                     {!isHideSignup && (
-                      <MenuLink
+                      <Button
+                        type='button'
+                        color='primary'
                         name='signup'
-                        highlight={1}
-                        style={{ whiteSpace: 'nowrap' }}
                         onClick={() => handleOpenLoginSignUp('signup')}
                       >
                         {t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}
-                      </MenuLink>
+                      </Button>
                     )}
                   </>
                 )

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

@@ -59,6 +59,8 @@ const SingleOrderCardUI = (props) => {
   const [isProductReviewed, setIsProductReviewed] = useState(false)
   const [isDriverReviewed, setIsDriverReviewed] = useState(false)
 
+  const isGiftCardOrder = !order?.business_id
+
   const handleClickCard = (e, order) => {
     if (e.target.closest('.favorite') || e.target.closest('.review') || e.target.closest('.reorder')) return
 
@@ -254,7 +256,7 @@ const SingleOrderCardUI = (props) => {
               }
             </Price>
           )}
-          {pastOrders && (
+          {pastOrders && !isGiftCardOrder && (
             <ButtonWrapper isCustomerMode={isCustomerMode}>
               {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && !hideReviewOrderButton && !isCustomerMode && (
                 <Button

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

@@ -5,7 +5,7 @@ export const CardContainer = styled.div`
   ${({ isShowAddButt }) => css`
     min-height: ${isShowAddButt ? '162px' : '110px'};
   `}
-  background: ${({ soldOut }) => soldOut ? '#6c757d33' : '#FFF'};
+  background: ${({ soldOut, theme }) => soldOut ? '#6c757d33' : theme?.colors?.backgroundPage};
   border: 1px solid #E9ECEF;
   padding: 10px;
   border-radius: 7.6px;

package/src/themes/five/src/styles/Buttons/index.js

@@ -55,6 +55,24 @@ export const Button = styled.button`
       ${theme?.general?.components?.buttons?.shadow?.components?.spread || '0px'}
       ${theme?.general?.components?.buttons?.shadow?.components?.color || '#000'};
   `}
+  ${({ theme }) => theme?.general?.components?.buttons?.color && css`
+    background: ${theme?.general?.components?.buttons?.color} !important;
+    &:active {
+      background: ${({ theme }) => darken(0.07, theme?.general?.components?.buttons?.color)} !important;
+    }
+    &:hover {
+      background: ${({ theme }) => darken(0.07, theme?.general?.components?.buttons?.color)} !important;
+    }
+  `}
+  ${({ theme }) => theme?.general?.components?.buttons?.buttonTextColor && css`
+    color: ${theme?.general?.components?.buttons?.buttonTextColor} !important;
+    &:active {
+      color: ${({ theme }) => darken(0.07, theme?.general?.components?.buttons?.buttonTextColor)} !important;
+    }
+    &:hover {
+      color: ${({ theme }) => darken(0.07, theme?.general?.components?.buttons?.buttonTextColor)} !important;
+    }
+  `}
   ${({ outline }) => outline && css`
     background: #FFF;
     color: #CCC;

package/template/app.js

@@ -536,6 +536,7 @@ export const App = () => {
                 searchValue={searchValue}
                 setSearchValue={setSearchValue}
                 notificationState={oneSignalState}
+                useModalMode
               />
             )}
             <NotNetworkConnectivity />