ordering-ui-external 5.0.5 → 6.0.0

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

@@ -342,6 +342,11 @@ export const Medadata = styled.div`
 export const CallCenterInformation = styled.div`
   display: flex;
   flex-direction: column;
+  position: absolute;
+  right: 0;
+  bottom: 43px;
+  margin-right: 10px;
+  margin-bottom: 10px;
   div{
     justify-content: space-evenly;
   }
@@ -352,16 +357,12 @@ export const CallCenterInformationBullet = styled.div`
   padding: 2px;
   margin-bottom: 2px;
   border-radius: 16px;
+  background: ${({ bgcolor }) => bgcolor};
+  width: 50px;
+  color: #fff;
   svg{
     font-size: 18px;
   }
-  ${({ isCustomerMode }) => isCustomerMode ? css`
-    flex-direction: column;
-    ` : css`
-    width: 50px;
-    background: ${({ bgcolor }) => bgcolor};
-    color: #fff;
-  `}
 `
 
 export const BusinessLogoWrapper = styled.div`

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

@@ -57,10 +57,18 @@ export const BusinessInformationUI = (props) => {
   const hideAddress = theme?.business_view?.components?.information?.components?.address?.hidden
   const formatTime = configs?.general_hour_format?.value
 
-	const checkTime = (val) => (val < 10 ? `0${val}` : val);
-	const timeFormated = (time) => {
-		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
-	}
+  const fillStyle = {
+    fillColor: theme.colors.primary,
+    strokeColor: theme.colors.darkPrimaryColor,
+    fillOpacity: 0.2,
+    strokeWeight: 2,
+    editable: false
+  }
+
+  const checkTime = (val) => (val < 10 ? `0${val}` : val)
+  const timeFormated = (time) => {
+    return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+  }
 
   const handleModalImage = (src) => {
     setImage(src)
@@ -105,6 +113,8 @@ export const BusinessInformationUI = (props) => {
                           apiKey={configs?.google_maps_api_key?.value}
                           location={businessLocation.location}
                           mapControls={businessLocation.googleMapsControls || business.googleMapsControls}
+                          businessZones={business?.zones}
+                          fillStyle={fillStyle}
                         />
                       </Map>
                     )}

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

@@ -93,7 +93,7 @@ export const SectionTitle = styled.h3`
 export const Map = styled.div`
   width: calc(100% + 20px);
   margin-left: -10px;
-  height: 250px;
+  height: 300px;
   > div {
     position: relative !important;
     width: 100% !important;

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

@@ -377,7 +377,7 @@ const BusinessProductsListUI = (props) => {
         }
 
         {
-          !categoryState.loading && !isBusinessLoading && categoryState.products.length === 0 && !((searchValue && errorQuantityProducts) || (!searchValue && !errorQuantityProducts)) && (
+          !categoryState?.loading && !isBusinessLoading && categoryState?.products?.length === 0 && !((!searchValue && !errorQuantityProducts)) && (
             <WrapperNotFound>
               <NotFoundSource
                 content={!searchValue ? t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time') : t('ERROR_NOT_FOUND_PRODUCTS', 'No products found, please change filters.')}

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

@@ -85,7 +85,9 @@ const BusinessProductsListingUI = (props) => {
     priceFilterValues,
     handleUpdateProfessionals,
     isCustomerMode,
-    isCustomLayout
+    isCustomLayout,
+    notFound,
+    setNotFound
   } = props
 
   const { business, loading, error } = businessState
@@ -187,6 +189,7 @@ const BusinessProductsListingUI = (props) => {
     handleUpdateInitialRender(false)
     updateProductModal(null)
     setCurProduct(null)
+    setNotFound(false)
     onProductRedirect({
       slug: business?.slug
     })
@@ -513,8 +516,7 @@ const BusinessProductsListingUI = (props) => {
             content={productModal.error[0]?.message || productModal.error[0]}
           />
         )}
-
-        {isInitialRender && !productModal.loading && !productModal.error && !productModal.product && (
+        {isInitialRender && !productModal.loading && !productModal.error && !productModal.product && notFound && (
           <NotFoundSource
             content={t('ERROR_GET_PRODUCT', theme?.defaultLanguages?.ERROR_GET_PRODUCT || 'Sorry, we couldn\'t find the requested product.')}
           />

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

@@ -125,10 +125,11 @@ const CheckoutUI = (props) => {
   const [isOpen, setIsOpen] = useState(false)
   const [requiredFields, setRequiredFields] = useState([])
   const [isSuccess, setIsSuccess] = useState(false)
-  const [openModal, setOpenModal] = useState({ login: false, signup: false })
+  const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
   const [allowedGuest, setAllowedGuest] = useState(false)
   const [cardList, setCardList] = useState([])
   const cardsMethods = ['stripe', 'credomatic']
+  const stripePaymethods = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isTableNumberEnabled = configs?.table_numer_enabled?.value
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
@@ -180,7 +181,13 @@ const CheckoutUI = (props) => {
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
 
   const handlePlaceOrder = () => {
-    if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
+    if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
+      setOpenModal({ ...openModal, signup: true, isGuest: true })
+      return
+    }
+
+    if (!userErrors.length && (!requiredFields?.length ||
+        (allowedGuest && (paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery')))) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -263,7 +270,8 @@ const CheckoutUI = (props) => {
       user,
       token: user?.session?.access_token
     })
-    setOpenModal({ ...openModal, signup: false })
+    openModal?.isGuest && handlePlaceOrderAsGuest()
+    setOpenModal({ ...openModal, signup: false, isGuest: false })
   }
 
   const handleSuccessLogin = (user) => {
@@ -711,6 +719,7 @@ const CheckoutUI = (props) => {
           isEdit
           isModal
           handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+          isAllowGuest={paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery'}
           onClose={() => {
             setIsOpen(false)
             handlePlaceOrder()
@@ -721,7 +730,7 @@ const CheckoutUI = (props) => {
         open={openModal.signup}
         width='760px'
         padding='30px'
-        onClose={() => setOpenModal({ ...openModal, signup: false })}
+        onClose={() => setOpenModal({ ...openModal, signup: false, isGuest: false })}
       >
         <SignUpForm
           useLoginByCellphone

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

@@ -144,7 +144,7 @@ export const OriginalHomeHero = (props) => {
             <PoweredByOrdering>
               {t('POWERED_BY', 'Powered by')}
               <a href='https://www.ordering.co'>
-                {' '}{t('ORDERING_CO', 'Ordering.co')}
+                {t('ORDERING_CO', 'Ordering.co')}
               </a>
             </PoweredByOrdering>
           )}

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

@@ -275,5 +275,6 @@ export const PoweredByOrdering = styled.div`
   margin-top: 10px;
   a{
     font-weight: 600;
+    margin-left: 5px;
   }
 `

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

@@ -26,7 +26,6 @@ export const CardsContainer = styled.div`
 export const CardsContainerWrapper = styled.div`
   margin-bottom: 10px;
   display: flex;
-  overflow: auto hidden;
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;

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

@@ -390,7 +390,7 @@ const OrderDetailsUI = (props) => {
                   <PoweredByOrdering>
                     {t('POWERED_BY', 'Powered by')}
                     <a href='https://www.ordering.co'>
-                      {' '}{t('ORDERING_CO', 'Ordering.co')}
+                      {t('ORDERING_CO', 'Ordering.co')}
                     </a>
                   </PoweredByOrdering>
                 )}

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

@@ -750,6 +750,7 @@ export const PoweredByOrdering = styled.p`
   margin-bottom: 10px;
   a{
     font-weight: 600;
+    margin-left: 5px;
   }
   a:hover{
     text-decoration: underline;

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

@@ -64,7 +64,8 @@ import {
   ProductTagWrapper,
   VideoGalleryWrapper,
   TitleWrapper,
-  GuestUserLink
+  GuestUserLink,
+  LoadingWrapper
 } from './styles'
 import { useTheme } from 'styled-components'
 import { Input, TextArea } from '../../styles/Inputs'
@@ -683,103 +684,111 @@ const ProductOptionsUI = (props) => {
               }
             </ProductEdition>
             <ProductActions isColumn={(auth && !(orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)))}>
-              <div className='price-amount-block'>
-                <div className='price'>
-                  <h4>{productCart.total && parsePrice(productCart.total)}</h4>
-                  {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 + productAddedToCartLength) <= product?.minimum_per_order) ? 'disabled' : ''}`}
-                      />
-                      {
-                        qtyBy?.pieces && (
-                          <Input
-                            className='qty'
-                            value={productCart?.quantity || ''}
-                            onChange={e => onChangeProductCartQuantity(parseInt(e.target.value))}
-                            onKeyPress={(e) => {
-                              if (!/^[0-9.]$/.test(e.key)) {
-                                e.preventDefault()
-                              }
-                            }}
+              {(actionStatus?.loading || orderState.loading) ? (
+                <LoadingWrapper>
+                  <Skeleton height={35} width={150} />
+                </LoadingWrapper>
+              ) : (
+                <>
+                  <div className='price-amount-block'>
+                    <div className='price'>
+                      <h4>{productCart.total && parsePrice(productCart.total)}</h4>
+                      {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 + productAddedToCartLength) <= product?.minimum_per_order) ? 'disabled' : ''}`}
                           />
-                        )
-                      }
-                      {qtyBy?.weight_unit && (
-                        <Input className='qty' value={(productCart.quantity * product?.weight).toFixed(2)} />
-                      )}
-                      <FiPlusCircle
-                        onClick={increment}
-                        className={`${maxProductQuantity <= 0 || (productCart?.quantity + productAddedToCartLength) >= maxProductQuantity || ((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) || isSoldOut ? 'disabled' : ''}`}
-                      />
-                      {isHaveWeight && (
-                        <WeightUnitSwitch>
-                          <WeightUnitItem onClick={() => handleSwitchQtyUnit('pieces')} active={qtyBy?.pieces}>{t('PIECES', 'pcs')}</WeightUnitItem>
-                          <WeightUnitItem onClick={() => handleSwitchQtyUnit('weight_unit')} active={qtyBy?.weight_unit}>{product?.weight_unit}</WeightUnitItem>
-                        </WeightUnitSwitch>
+                          {
+                            qtyBy?.pieces && (
+                              <Input
+                                className='qty'
+                                value={productCart?.quantity || ''}
+                                onChange={e => onChangeProductCartQuantity(parseInt(e.target.value))}
+                                onKeyPress={(e) => {
+                                  if (!/^[0-9.]$/.test(e.key)) {
+                                    e.preventDefault()
+                                  }
+                                }}
+                              />
+                            )
+                          }
+                          {qtyBy?.weight_unit && (
+                            <Input className='qty' value={(productCart.quantity * product?.weight).toFixed(2)} />
+                          )}
+                          <FiPlusCircle
+                            onClick={increment}
+                            className={`${maxProductQuantity <= 0 || (productCart?.quantity + productAddedToCartLength) >= maxProductQuantity || ((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) || isSoldOut ? 'disabled' : ''}`}
+                          />
+                          {isHaveWeight && (
+                            <WeightUnitSwitch>
+                              <WeightUnitItem onClick={() => handleSwitchQtyUnit('pieces')} active={qtyBy?.pieces}>{t('PIECES', 'pcs')}</WeightUnitItem>
+                              <WeightUnitItem onClick={() => handleSwitchQtyUnit('weight_unit')} active={qtyBy?.weight_unit}>{product?.weight_unit}</WeightUnitItem>
+                            </WeightUnitSwitch>
+                          )}
+                        </div>
+                      )
+                    }
+                  </div>
+
+                  {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
+                    <Button
+                      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 + 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>
+                      ) : (
+                        <span>
+                          {editMode ? t('UPDATE', theme?.defaultLanguages?.UPDATE || 'Update') : t('ADD', theme?.defaultLanguages?.ADD || 'Add')}
+                        </span>
                       )}
-                    </div>
-                  )
-                }
-              </div>
-
-              {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
-                <Button
-                  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 + 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>
-                  ) : (
-                    <span>
-                      {editMode ? t('UPDATE', theme?.defaultLanguages?.UPDATE || 'Update') : t('ADD', theme?.defaultLanguages?.ADD || 'Add')}
-                    </span>
+                    </Button>
                   )}
-                </Button>
-              )}
 
-              {auth && !(orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
-                orderState.loading ? (
-                  <Button
-                    className='add'
-                    color='primary'
-                    disabled
-                  >
-                    {t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading')}
-                  </Button>
-                ) : (
-                  <AddressList
-                    isModal
-                    isProfile
-                    userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
-                    addressList={isNaN(userCustomer?.id) ? user.addresses : null}
-                    isProductForm
-                  />
-                )
-              )}
+                  {auth && !(orderState.options?.address_id || unaddressedTypes.includes(orderState?.options?.type)) && (
+                    orderState.loading ? (
+                      <Button
+                        className='add'
+                        color='primary'
+                        disabled
+                      >
+                        {t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading')}
+                      </Button>
+                    ) : (
+                      <AddressList
+                        isModal
+                        isProfile
+                        userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+                        addressList={isNaN(userCustomer?.id) ? user.addresses : null}
+                        isProductForm
+                      />
+                    )
+                  )}
 
-              {(!auth || isSoldOut || maxProductQuantity <= 0) && (
-                <Button
-                  className={`add ${!(productCart && !isSoldOut && maxProductQuantity > 0) ? 'soldout' : ''}`}
-                  color='primary'
-                  outline
-                  disabled={isSoldOut || maxProductQuantity <= 0}
-                  onClick={() => setModalIsOpen(true)}
-                >
-                  {isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', theme?.defaultLanguages?.SOLD_OUT || 'Sold out') : t('LOGIN_SIGNUP', theme?.defaultLanguages?.LOGIN_SIGNUP || 'Login / Sign Up')}
-                </Button>
-              )}
-              {!auth && guestCheckoutEnabled && orderTypeEnabled && (
-                <GuestUserLink onClick={handleUpdateGuest}>
-                  {actionStatus?.loading ? <Skeleton height={25} width={70} /> : t('WITH_GUEST_USER', 'With Guest user')}
-                </GuestUserLink>
+                  {(!auth || isSoldOut || maxProductQuantity <= 0) && (
+                    <Button
+                      className={`add ${!(productCart && !isSoldOut && maxProductQuantity > 0) ? 'soldout' : ''}`}
+                      color='primary'
+                      outline
+                      disabled={isSoldOut || maxProductQuantity <= 0}
+                      onClick={() => setModalIsOpen(true)}
+                    >
+                      {isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', theme?.defaultLanguages?.SOLD_OUT || 'Sold out') : t('LOGIN_SIGNUP', theme?.defaultLanguages?.LOGIN_SIGNUP || 'Login / Sign Up')}
+                    </Button>
+                  )}
+                  {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                    <GuestUserLink onClick={handleUpdateGuest}>
+                      {t('WITH_GUEST_USER', 'With Guest user')}
+                    </GuestUserLink>
+                  )}
+                </>
               )}
             </ProductActions>
           </ProductInfo>

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

@@ -637,3 +637,9 @@ export const GuestUserLink = styled.div`
     margin-right: 10px;
   `}
 `
+
+export const LoadingWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import IosArrowDown from '@meronex/icons/ios/IosArrowDown'
 import {
   Pencil,
@@ -108,6 +108,14 @@ export const ProductItemAccordion = (props) => {
     return `${quantity} x ${name} ${pos} +${price}`
   }
 
+  useEffect(() => {
+    if (setActive === 'active') {
+      setHeightState(
+        `${content.current.scrollHeight}px`
+      )
+    }
+  }, [product, setActive])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (

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

@@ -213,7 +213,7 @@ export const RenderProductsLayout = (props) => {
                 </WrapperSearch>
               </>
             )}
-            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && !categoryClicked && (
+            {!business?.loading && business?.previously_products?.length > 0 && !hidePreviousOrdered && windowSize.width < 993 && !categoryClicked && (
               <OrderItAgain
                 onProductClick={onProductClick}
                 productList={business?.previously_products}

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

@@ -99,7 +99,6 @@ export const LogoHeader = styled.div`
 `
 export const BusinessProductsListContainer = styled.div`
   background-color: ${props => props.theme.colors.backgroundPage};
-  padding: 30px 0;
   max-height: calc(100vh - 88px);
   overflow: auto;
 `

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

@@ -50,7 +50,8 @@ export const UserFormDetailsUI = (props) => {
     isOldLayout,
     requiredFields,
     handleChangeNotifications,
-    handlePlaceOrderAsGuest
+    handlePlaceOrderAsGuest,
+    isAllowGuest
   } = props
 
   const formMethods = useForm()
@@ -488,11 +489,13 @@ export const UserFormDetailsUI = (props) => {
                 >
                   {formState.loading ? t('UPDATING', 'Updating...') : t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')}
                 </Button>
-                <TextLinkWrapper>
-                  <span onClick={() => handlePlaceOrderAsGuest()}>
-                    {t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}
-                  </span>
-                </TextLinkWrapper>
+                {isAllowGuest && (
+                  <TextLinkWrapper>
+                    <span onClick={() => handlePlaceOrderAsGuest()}>
+                      {t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}
+                    </span>
+                  </TextLinkWrapper>
+                )}
               </>
             )}
           </>