ordering-ui-admin-external 1.14.3 → 1.15.1

package/src/components/MyProducts/OrderingWebsite/styles.js

@@ -122,6 +122,7 @@ export const MoreSettingsHeader = styled.div`
     font-size: 16px;
     line-height: 24px;
     text-align: center;
+    margin-bottom: 34px;
   }
 `
 
@@ -345,9 +346,105 @@ export const ContentWrapper = styled.div`
 
 export const WebsiteButtonWrapper = styled.div`
   display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
+  margin-top: 20px;
   button {
     height: 44px;
   }
 `
+
+export const TabWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const Tabs = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  color: ${props => props.theme.colors.lightGray};
+  padding-bottom: 14px;
+  transition: all 0.2s ease-out;
+  :not(:last-child) {
+    margin-right: 32px;
+  }
+  ${({ active }) => active && css`
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    padding-bottom: 13px;
+    color: ${props => props.theme.colors.headingColor};
+    border-bottom: 1px solid ${props => props.theme.colors.headingColor};
+  `}
+`
+
+export const HeaderInfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    /* display: block; */
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  > a {
+    color: ${props => props.theme.colors.primary};
+    margin: 0 5px;
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`

package/src/components/MyProducts/PosApp/index.js

@@ -15,7 +15,7 @@ export const PosApp = () => {
       brand: theme.images.myProducts.myPosAppBrand
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
-    live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
+    live_description: t('POS_APP_FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
     brand_title: t('YOUR_BRANDED_POS', 'Your Branded POS'),
     brand_description: t('POS_BRANDED_DESCRIPTION', 'The POS is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet or device you add it to.'),
     demo_book_message: 'I would like to book a Demo about the POS app , can you assist me?',

package/src/components/MyProducts/StoreApp/index.js

@@ -15,10 +15,10 @@ export const StoreApp = () => {
       brand: theme.images.myProducts.storeAppBrand
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
-    live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
+    live_description: t('STORE_APP_FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
     demo_book_message: 'I would like to book a Demo about the Store app , can you assist me?',
     brand_title: t('YOUR_BRANDED_APP', 'Your Branded App'),
-    brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
+    brand_description: t('STORE_APP_BRANDED_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
     purchase_message: 'I would like to know about the Store app, can you assist me?',
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/store-app-2-0/id1608192050' },

package/src/components/OrderingProducts/OrderingProductDetails/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, SiteDetails as SiteDetailsController } from 'ordering-components-admin-external'
 import { DefaultSelect, IconButton } from '../../../styles'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
@@ -23,6 +24,8 @@ const OrderingProductDetailsUI = (props) => {
     handleDeleteSite
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('general')
   const { width } = useWindowSize()
@@ -57,6 +60,25 @@ const OrderingProductDetailsUI = (props) => {
     setIsExpand(prev => !prev)
   }
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setSelectedTab(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      if (id) {
+        history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(selectedTab)
+    }
+  }, [])
+
   return (
     <Container>
       <DetailHeaderContainer>
@@ -89,7 +111,7 @@ const OrderingProductDetailsUI = (props) => {
             <Tab
               key={tab.key}
               active={selectedTab === tab.key}
-              onClick={() => setSelectedTab(tab.key)}
+              onClick={() => handleTabClick(tab.key)}
             >
               {tab.content}
             </Tab>

package/src/components/OrderingProducts/OrderingProductsListing/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   SitesList as SitesListController
@@ -35,6 +36,8 @@ const OrderingProductsUI = (props) => {
     handleSuccessUpdateSites
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
 
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -53,14 +56,18 @@ const OrderingProductsUI = (props) => {
     getSites(expectedPage, pageSize)
   }
 
-  const onClickProduct = (product) => {
+  const onClickProduct = (product, isInitialRender) => {
     setSelectedSite(product)
     setOpenDetails(true)
+    if (product && !isInitialRender) {
+      history.replace(`${location.pathname}?id=${product?.id}`)
+    }
   }
 
   const handleCloseDetail = () => {
     setOpenDetails(false)
     setSelectedSite(null)
+    history.replace(`${location.pathname}`)
   }
 
   useEffect(() => {
@@ -71,6 +78,15 @@ const OrderingProductsUI = (props) => {
     })
   }, [sitesListState?.error])
 
+  useEffect(() => {
+    if (sitesListState.loading) return
+    const productId = query.get('id')
+    if (productId) {
+      const initProduct = sitesListState.sites.find(site => site.id === Number(productId))
+      if (initProduct) onClickProduct(initProduct, true)
+    }
+  }, [sitesListState])
+
   return (
     <>
       <OrderingProductsContainer>

package/src/components/Orders/DeliveriesManager/index.js

@@ -62,7 +62,6 @@ const DeliveriesManagerUI = (props) => {
     if (id === null) setIsOpenOrderDetail(false)
     else {
       setOrderDetailId(id)
-      onOrderRedirect(id)
       setIsOpenOrderDetail(true)
     }
   }, [])

package/src/components/Orders/Messages/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useUtils, useLanguage, useSession, Messages as MessagesController } from 'ordering-components-admin-external'
 import { useForm, Controller } from 'react-hook-form'
 import { useTheme } from 'styled-components'
@@ -83,6 +84,8 @@ export const MessagesUI = (props) => {
     orderDetailClose
   } = props
 
+  const routerHistory = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const { handleSubmit, setValue, errors, control } = useForm()
@@ -92,7 +95,7 @@ export const MessagesUI = (props) => {
   const messageInputRef = useRef(null)
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [tabActive, setTabActive] = useState({ orderHistory: true, logistics: false, logistic_information: false })
+  const [tabActive, setTabActive] = useState('order_history')
   const [messageSearchValue, setMessageSearchValue] = useState('')
   const [filteredMessages, setFilteredMessages] = useState([])
   const [load, setLoad] = useState(0)
@@ -101,8 +104,6 @@ export const MessagesUI = (props) => {
   const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
 
-  console.log(order?.status)
-
   const adminMessageList = [
     { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
     { key: 'message_2', text: t('ADMIN_MESSAGE_2', 'admin_message_2') },
@@ -378,6 +379,25 @@ export const MessagesUI = (props) => {
     }
   }, [canRead])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setTabActive(tab)
+    if (!isInitialRender) {
+      const orderId = query.get('id')
+      const section = query.get('section')
+      routerHistory.replace(`${location.pathname}?id=${orderId}&section=${section}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    if (!history) return
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick('order_history')
+    }
+  }, [history])
+
   return (
     <MessagesContainer>
       <WrapperContainer onClick={handleChangeTour}>
@@ -414,13 +434,13 @@ export const MessagesUI = (props) => {
               )}
               {history && (
                 <WrapperHitoryHeader>
-                  <TabItem active={tabActive.orderHistory} onClick={() => setTabActive({ orderHistory: true, logistics: false, logistic_information: false })}>
+                  <TabItem active={tabActive === 'order_history'} onClick={() => handleTabClick('order_history')}>
                     {t('MOBILE_ORDER_HISTORY', 'Order History')}
                   </TabItem>
-                  <TabItem active={tabActive.logistics} onClick={() => setTabActive({ orderHistory: false, logistics: true, logistic_information: false })}>
+                  <TabItem active={tabActive === 'logistics'} onClick={() => handleTabClick('logistics')}>
                     {t('LOGISTICS', 'Logistics')}
                   </TabItem>
-                  <TabItem active={tabActive.logistic_information} onClick={() => setTabActive({ orderHistory: false, logistics: false, logistic_information: true })}>
+                  <TabItem active={tabActive === 'logistic_information'} onClick={() => handleTabClick('logistic_information')}>
                     {t('LOGISTIC_INFORMATION', 'Logistics information')}
                   </TabItem>
                 </WrapperHitoryHeader>
@@ -491,7 +511,7 @@ export const MessagesUI = (props) => {
           {
             !messages.loading && (
               <>
-                {!tabActive.logistic_information && (
+                {!tabActive === 'logistic_information' && (
                   <MessageConsole>
                     <BubbleConsole>
                       {t('ORDER_PLACED_FOR', 'Order placed for')} {' '}
@@ -512,12 +532,12 @@ export const MessagesUI = (props) => {
                 )}
                 {history && (
                   <>
-                    {tabActive.logistics && (
+                    {tabActive === 'logistics' && (
                       <WrapperLogistics>
                         <Logistics orderId={order.id} />
                       </WrapperLogistics>
                     )}
-                    {tabActive.logistic_information && (
+                    {tabActive === 'logistic_information' && (
                       <WrapperLogisticInformation>
                         <OrderLogisticInformation orderId={order.id} />
                       </WrapperLogisticInformation>
@@ -526,10 +546,10 @@ export const MessagesUI = (props) => {
                 )}
                 {filteredMessages.length > 0 && filteredMessages.map((message) => (
                   <React.Fragment key={message.id}>
-                    {history && tabActive.orderHistory && (
+                    {history && tabActive === 'order_history' && (
                       <>
                         {message.type === 1 && (
-                          <MessageConsole key={message.id} style={{ display: `${tabActive.orderHistory ? 'inline-flex' : 'none'}` }}>
+                          <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
                             {message.change?.attribute !== 'driver_id' ? (
                               <BubbleConsole>
                                 {t('ORDER', 'Order')} {' '}

package/src/components/Orders/OrderDetails/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils, useSession, OrderDetails as OrderDetailsController } from 'ordering-components-admin-external'
 import { ProductItemAccordion } from '../ProductItemAccordion'
@@ -53,6 +54,8 @@ const OrderDetailsUI = (props) => {
     isServiceOrder
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [openMessages, setOpenMessages] = useState({ chat: false, history: false })
@@ -143,26 +146,28 @@ const OrderDetailsUI = (props) => {
     setUnreadAlert({ business, driver, customer })
   }
 
-  const handleOpenMessages = (openMessage) => {
-    if (openMessage === 'chat') {
+  const handleCloseMessages = () => {
+    setOpenMessages({ chat: false, history: false })
+  }
+
+  const handleShowOption = (option, isInitialRender) => {
+    if (option === 'chat') {
       setOpenMessages({ chat: true, history: false })
       setUnreadAlert({ ...unreadAlert, customer: false })
-    }
-    if (openMessage === 'history') {
+      setShowOption(null)
+    } else if (option === 'history') {
       setOpenMessages({ chat: false, history: true })
+      setShowOption(null)
+    } else {
+      setOpenMessages({ chat: false, history: false })
+      setShowOption(option)
     }
-    setShowOption(null)
     setExtraOpen(true)
-  }
 
-  const handleCloseMessages = () => {
-    setOpenMessages({ chat: false, history: false })
-  }
-
-  const handleShowOption = (option) => {
-    handleCloseMessages()
-    setExtraOpen(true)
-    setShowOption(option)
+    if (!isInitialRender) {
+      const orderId = query.get('id')
+      history.replace(`${location.pathname}?id=${orderId}&section=${option}`)
+    }
   }
 
   useEffect(() => {
@@ -218,7 +223,7 @@ const OrderDetailsUI = (props) => {
     }
     if (evt.target.closest('.driver-select')) return
     if (isTourOpen && setCurrentTourStep) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setTimeout(() => {
         isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
       }, 1)
@@ -229,7 +234,7 @@ const OrderDetailsUI = (props) => {
     if (evt.keyCode === 37 && currentTourStep === 2) setCurrentTourStep(1)
     if (evt.keyCode === 39 && currentTourStep === 1 && order?.delivery_type === 1) setCurrentTourStep(2)
     if (evt.keyCode === 39 && currentTourStep === 1 && order?.delivery_type !== 1) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setTimeout(() => {
         isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
       }, 1)
@@ -241,7 +246,7 @@ const OrderDetailsUI = (props) => {
       setIsTourFlag(false)
     }
     if ((evt.keyCode === 39 && currentTourStep === 2)) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setCurrentTourStep(3)
     }
     if (evt.keyCode === 39 && currentTourStep === 3) {
@@ -259,7 +264,7 @@ const OrderDetailsUI = (props) => {
 
   useEffect(() => {
     if (!isTourFlag) return
-    handleOpenMessages('chat')
+    handleShowOption('chat')
     setTimeout(() => {
       setCurrentTourStep(3)
     }, 1)
@@ -276,6 +281,8 @@ const OrderDetailsUI = (props) => {
     setExtraOpen(false)
     setOpenMessages({ chat: false, history: false })
     setShowOption(null)
+    const orderId = query.get('id')
+    history.replace(`${location.pathname}?id=${orderId}`)
   }
 
   useEffect(() => {
@@ -284,6 +291,14 @@ const OrderDetailsUI = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    if (loading) return
+    const section = query.get('section')
+    if (section) {
+      handleShowOption(section, true)
+    }
+  }, [loading])
+
   return (
     <Container
       isSelectedOrders={isSelectedOrders}
@@ -315,7 +330,6 @@ const OrderDetailsUI = (props) => {
             showOption={showOption}
             openMessage={openMessages}
             handleShowOption={handleShowOption}
-            handleOpenMessages={handleOpenMessages}
             isTourOpen={isTourOpen}
             currentTourStep={currentTourStep}
             setIsTourOpen={setIsTourOpen}
@@ -382,7 +396,7 @@ const OrderDetailsUI = (props) => {
               unreadAlert={unreadAlert}
               isTourOpen={isTourOpen}
               setCurrentTourStep={setCurrentTourStep}
-              handleOpenMessages={handleOpenMessages}
+              handleShowOption={handleShowOption}
             />
             <OrderProducts>
               <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>

package/src/components/Orders/OrderDetailsHeader/index.js

@@ -26,7 +26,6 @@ export const OrderDetailsHeader = (props) => {
   const {
     order,
     handleShowOption,
-    handleOpenMessages,
     actionSidebar,
     setIsTourOpen,
     isTourOpen,
@@ -81,7 +80,7 @@ export const OrderDetailsHeader = (props) => {
             <ButtonLink
               color='black'
               active={openMessage?.chat}
-              onClick={() => handleOpenMessages('chat')}
+              onClick={() => handleShowOption('chat')}
               isDisabled={isTourOpen && currentTourStep === 1}
             >
               <ChatIcon />
@@ -107,7 +106,7 @@ export const OrderDetailsHeader = (props) => {
           <ButtonLink
             color='black'
             active={openMessage?.history}
-            onClick={() => handleOpenMessages('history')}
+            onClick={() => handleShowOption('history')}
             isDisabled={isTourOpen && currentTourStep === 1}
           >
             <Diagram3 />

package/src/components/Orders/OrdersContentHeader/index.js

@@ -58,7 +58,7 @@ export const OrdersContentHeader = (props) => {
     } else {
       _filterApplied = filterValues?.groupTypes?.length || filterValues.businessIds.length > 0 || filterValues.cityIds.length > 0 ||
         filterValues.deliveryEndDatetime !== null || filterValues.deliveryFromDatetime !== null || filterValues.deliveryTypes.length > 0 ||
-        filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0
+        filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])