ordering-ui-external 10.6.1 → 10.7.0

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

@@ -290,6 +290,7 @@ const OrderDetailsUI = (props) => {
               <ProductItemAccordion
                 key={product.id}
                 product={product}
+                showArrowIcon
               />
             ))}
           </ProfessionalBlock>
@@ -298,6 +299,7 @@ const OrderDetailsUI = (props) => {
           <ProductItemAccordion
             key={product.id}
             product={product}
+            showArrowIcon
           />
         ))}
       </>

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

@@ -114,9 +114,11 @@ const OrdersOptionUI = (props) => {
     const outsideModal = !window.document.getElementById('app-modals') ||
       !window.document.getElementById('app-modals').contains(e.target)
     if (outsideModal) {
-      const _businessId = 'businessId:' + reorderState?.result?.business_id
-      sessionStorage.setItem('adjust-cart-products', _businessId)
-      onRedirectPage && onRedirectPage({ page: 'business', params: { store: reorderState?.result?.business?.slug } })
+      if (reorderState?.result?.business?.slug) {
+        const _businessId = 'businessId:' + reorderState?.result?.business_id
+        sessionStorage.setItem('adjust-cart-products', _businessId)
+        onRedirectPage && onRedirectPage({ page: 'business', params: { store: reorderState?.result?.business?.slug } })
+      }
     }
   }
 

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

@@ -23,7 +23,9 @@ SwiperCore.use([Navigation])
 const PageBannerUI = (props) => {
   const {
     pageBannerState,
-    isCustomerMode
+    isCustomerMode,
+    handleCustomProductBannerClick,
+    business
   } = props
 
   const [{ site }] = useSite()
@@ -116,9 +118,15 @@ const PageBannerUI = (props) => {
       slug = action.url.split('store/')[1]?.split('?')[0]
       const paramString = action.url.split('?')[1]
       const urlParams = new URLSearchParams(paramString)
-      const product = urlParams.get('product')
-      const category = urlParams.get('category')
-      onProductRedirect({ slug, category, product })
+      const productId = urlParams.get('product')
+      const categoryId = urlParams.get('category')
+      const foundCategory = business?.categories?.find(category => category.id === Number(categoryId))
+      const foundProduct = foundCategory?.products?.find(product => product.id === Number(productId))
+      if (business?.slug === slug && foundProduct) {
+        handleCustomProductBannerClick(foundProduct)
+      } else {
+        onProductRedirect({ slug, category: categoryId, product: productId })
+      }
     }
   }
 
@@ -136,6 +144,8 @@ const PageBannerUI = (props) => {
               spaceBetween={0}
               shortSwipes={false}
               loop={pageBannerState.banner?.items.length > 1}
+              touchStartPreventDefault={false}
+              slidesPerView={1}
             >
               {pageBannerState.banner?.items.map((img, i) => (
                 <SwiperSlide

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

@@ -13,9 +13,8 @@ import { Modal } from '../Modal'
 import { SignUpForm } from '../SignUpForm'
 import { Button } from '../../styles/Buttons'
 import { Alert } from '../Confirm'
-import { UserDetails } from '../UserDetails'
 import { AddressList } from '../AddressList'
-
+import { UserDetails } from '../UserDetails'
 import {
   PhoneContainer,
   ContentWrapper,

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

@@ -82,6 +82,8 @@ export const ProductItemAccordion = (props) => {
     return product
   }
 
+  const showArrowIcon = props.showArrowIcon && (productInfo()?.ingredients?.length > 0 || productInfo()?.options?.length > 0 || product?.comment)
+
   const toggleAccordion = (e) => {
     const isActionsClick = productSelect.current?.contains(e.target) || productActionsEdit.current?.contains(e.target) || productActionsDelete.current?.contains(e.target)
     if ((!product?.valid_menu && isCartProduct) || isActionsClick) return
@@ -206,6 +208,8 @@ export const ProductItemAccordion = (props) => {
             )}
           </ProductInfo>
 
+          {showArrowIcon && <IosArrowDown className={`${setRotate}`} />}
+
           {product.valid && (
             <>
               {(product?.valid || !isCartProduct) && windowSize.width > 410 && (

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

@@ -88,7 +88,8 @@ export const RenderProductsLayout = (props) => {
     handleChangePriceFilterValues,
     priceFilterValues,
     handleUpdateProfessionals,
-    isCustomerMode
+    isCustomerMode,
+    handleCustomProductBannerClick
   } = props
 
   const theme = useTheme()
@@ -198,6 +199,8 @@ export const RenderProductsLayout = (props) => {
                   position='web_business_page'
                   businessId={businessState?.business?.id}
                   isCustomerMode={isCustomerMode}
+                  handleCustomProductBannerClick={handleCustomProductBannerClick}
+                  business={businessState?.business}
                 />
               </PageBannerWrapper>
             )}

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

@@ -11,7 +11,7 @@ export const Header = styled.div`
   h1 {
     font-weight: 500;
     font-size: 20px;
-    color: ${props => props.theme.colors.darkTextColor};
+    color: ${props => props.theme.colors.darkTextColor}; 
     margin: 0px 10px 0px 0px;
     ${props => props.theme?.rtl && css`
       margin: 0px 0px 0px 10px;
@@ -91,7 +91,7 @@ export const TitleContainer = styled.div`
     font-size: 24px;
   }
   ${({ isAddressFormOpen }) => isAddressFormOpen && css`
-      h1{
+      h1{ 
         width: 75%;
       }
   `}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components-external'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController, useConfig } from 'ordering-components-external'
 import { InfoCircle } from 'react-bootstrap-icons'
 import { Alert } from '../../../src/components/Confirm'
 import { Modal } from '../Modal'
@@ -15,7 +15,6 @@ import {
   ButtonsContainer,
   ButtonWrapper
 } from './styles'
-import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 const SocketStatusUI = (props) => {
   const {
@@ -28,7 +27,8 @@ const SocketStatusUI = (props) => {
   const [{ parseDate }] = useUtils()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [openModal, setOpenModal] = useState(false)
-  const windowSize = useWindowSize()
+  const [{ configs }] = useConfig()
+  const isEnabledBtn = configs?.white_label_module?.value
 
   const closeAlert = () => {
     setAlertState({
@@ -57,7 +57,7 @@ const SocketStatusUI = (props) => {
         </IconButton>
         <InfoContent>
           {t('WEBSOCKET_STATUS_APP_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh your app and update the status as well. Need help? Contact our Customer support team here:')}
-          <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+          {!isEnabledBtn && <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>}
         </InfoContent>
       </InfoWrapper>
       <ButtonWrapper>