ordering-ui-admin-external 1.28.1 → 1.29.3

package/src/components/Orders/OrdersDashboardControls/styles.js

@@ -4,20 +4,22 @@ export const OrderDashboardControlsContainer = styled.div`
   display: flex;
   margin-top: 10px;
 
-  button {
-    height: 42px;
-    ${props => props.theme?.rtl ? css`
-      margin-left: 14px;
-    ` : css`
-      margin-right: 14px;
-    `}
-
-    svg {
+  > div {
+    > button {
+      height: 42px;
       ${props => props.theme?.rtl ? css`
-        margin-right: 5px;
+        margin-left: 14px;
       ` : css`
-        margin-left: 5px;
+        margin-right: 14px;
       `}
+  
+      svg {
+        ${props => props.theme?.rtl ? css`
+          margin-right: 5px;
+        ` : css`
+          margin-left: 5px;
+        `}
+      }
     }
   }
 

package/src/components/Orders/OrdersExportCSV/styles.js

@@ -2,6 +2,22 @@ import styled, { css } from 'styled-components'
 
 export const ExportContainer = styled.div`
   position: relative;
+  > button {
+    height: 42px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 5px;
+      ` : css`
+        margin-left: 5px;
+      `}
+    }
+  }
 `
 
 export const PopoverContainer = styled.div`

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

@@ -166,7 +166,7 @@ const OrdersManagerUI = (props) => {
       >
         <OrdersContentHeader
           isDisableTitle={isSelectedOrders}
-          isDisableControl={isSelectedOrders}
+          isSelectedOrders={isSelectedOrders}
           title={t('ORDERS_LIST', 'Orders list')}
           searchValue={searchValue}
           driverGroupList={driverGroupList}
@@ -191,7 +191,7 @@ const OrdersManagerUI = (props) => {
           changeOrderStatus={handleOrdersStatusGroupFilter}
           numberOfOrdersByStatus={numberOfOrdersByStatus}
         />
-        <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
+        <OrderSubFilterControls>
           <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
             <OrderStatusSubFilter
               ordersStatusGroup={ordersStatusGroup}
@@ -205,6 +205,10 @@ const OrdersManagerUI = (props) => {
               filterValues={filterValues}
               handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
               handleDeleteMultiOrders={handleDeleteMultiOrders}
+              handleOpenCustomOrderDetail={(id) => {
+                setOrderDetailId(id)
+                setIsOpenOrderDetail(true)
+              }}
             />
           )}
         </OrderSubFilterControls>

package/src/components/Orders/OrdersManager/styles.js

@@ -43,6 +43,8 @@ export const OrderSubFilterControls = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
 `
 export const OrderStatusSubFilterWrapper = styled.div`
   width: 50%;

package/src/components/Shared/AutoScroll/index.js

@@ -83,6 +83,7 @@ export const AutoScroll = ({ children, modal, special, innerScroll, scrollId })
   useEffect(() => {
     if (!scrollId) return
     const element = document?.getElementById(`${autoScrollId}`)?.parentNode
+    if (!element) return
     setParentWidth(element.width)
     setParentElement(element)
   }, [scrollId])

package/src/components/Shared/LinkableText/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Linkify from 'react-linkify'
+
+export const LinkableText = (props) => {
+  const { text } = props
+  return (
+    <Linkify
+      componentDecorator={(decoratedHref, decoratedText, key) => (
+        <a target='blank' href={decoratedHref} key={key}>
+          {decoratedText}
+        </a>
+      )}
+    >
+      {text}
+    </Linkify>
+  )
+}

package/src/components/Shared/Tabs/index.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+
+export const Tabs = styled.div`
+  display: flex;  
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  padding: 10px 0;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${({ active }) => active && css`
+    border-bottom: 3px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`

package/src/components/Shared/index.js

@@ -7,6 +7,7 @@ import { DragScroll } from './DragScroll'
 import { Image } from './Image'
 import { ImageCrop } from './ImageCrop'
 import { InputPhoneNumber } from './InputPhoneNumber'
+import { LinkableText } from './LinkableText'
 import { Modal } from './Modal'
 import { MoreSidebarLayout } from './MoreSidebarLayout'
 import { NotFoundSource } from './NotFoundSource'
@@ -17,6 +18,7 @@ import { ProtectedRoute } from './ProtectedRoute'
 import { Schedule } from './Schedule'
 import { SearchBar } from './SearchBar'
 import { RangeCalendar } from './RangeCalendar'
+import { Tabs, Tab } from './Tabs'
 
 import { SelectBusinessCategories } from './SelectBusinessCategories'
 import { SelectBusinessProducts } from './SelectBusinessProducts'
@@ -42,6 +44,7 @@ export {
   Image,
   ImageCrop,
   InputPhoneNumber,
+  LinkableText,
   Modal,
   MoreSidebarLayout,
   NotFoundSource,
@@ -52,6 +55,8 @@ export {
   Schedule,
   SearchBar,
   RangeCalendar,
+  Tabs,
+  Tab,
 
   SelectBusinessCategories,
   SelectBusinessProducts,

package/src/components/SidebarMenu/index.js

@@ -388,7 +388,7 @@ const SidebarMenuUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    handleGoToLink(`https://${ordering.project}.tryordering.com`)
+    handleGoToLink(configs?.site_url?.value || `https://${ordering.project}.tryordering.com`)
   }
 
   useEffect(() => {

package/src/components/Stores/BusinessProductsListing/index.js

@@ -7,6 +7,7 @@ import RiImageAddFill from '@meronex/icons/ri/RiImageAddFill'
 import {
   useLanguage,
   useApi,
+  useConfig,
   BusinessProductsListing as BusinessProductsListingController
 } from 'ordering-components-admin-external'
 import { BusinessProductsCategoyDetails } from '../BusinessProductsCategoyDetails'
@@ -46,6 +47,7 @@ import {
   ColumnsAllowWrapper,
   ButtonWrapper
 } from './styles'
+import { checkSiteUrl } from '../../../utils'
 
 const BusinessProductsListingUI = (props) => {
   const {
@@ -83,6 +85,7 @@ const BusinessProductsListingUI = (props) => {
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [ordering] = useApi()
+  const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [viewMethod, setViewMethod] = useState('list')
   const [currentCategory, setCurrentCategory] = useState(null)
@@ -219,10 +222,10 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
-      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+    const storeUrl = configs?.site_url?.value
+      ? `${checkSiteUrl(configs?.site_url?.value)}store/${businessState?.business?.slug}`
       : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
-    window.open(url, '_blank')
+    window.open(storeUrl, '_blank')
   }
 
   const handleOpenAddBusiness = () => {

package/src/components/Stores/BusinessQRCodeOption/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { useLanguage, useApi } from 'ordering-components-admin-external'
+import { useLanguage, useApi, useConfig } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button, Input } from '../../../styles'
 import { X as Close } from 'react-bootstrap-icons'
@@ -15,6 +15,7 @@ import {
   QRCodeLayout,
   TableNumberHintText
 } from './styles'
+import { checkSiteUrl } from '../../../utils'
 
 export const BusinessQRCodeOption = (props) => {
   const {
@@ -27,6 +28,7 @@ export const BusinessQRCodeOption = (props) => {
 
   const [, t] = useLanguage()
   const [ordering] = useApi()
+  const [{ configs }] = useConfig()
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -58,8 +60,8 @@ export const BusinessQRCodeOption = (props) => {
       })
       return
     }
-    const storeUrl = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
-      ? `https://${siteState?.site?.domain}/store/${business?.slug}`
+    const storeUrl = configs?.site_url?.value
+      ? `${checkSiteUrl(configs?.site_url?.value)}store/${business?.slug}`
       : `https://${ordering.project}.tryordering.com/store/${business?.slug}`
     const tsNumber = item?.key !== 'pick_up'
       ? (item?.key === 'eat_in'

package/src/components/Stores/BusinessSummary/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useUtils, useEvent, useApi } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useEvent, useApi, useConfig } from 'ordering-components-admin-external'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -26,6 +26,7 @@ import {
   BusinessPreviewHeader,
   ButtonWrapper
 } from './styles'
+import { checkSiteUrl } from '../../../utils'
 
 export const BusinessSummary = (props) => {
   const {
@@ -46,6 +47,7 @@ export const BusinessSummary = (props) => {
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const [events] = useEvent()
+  const [{ configs }] = useConfig()
   const theme = useTheme()
   const [ordering] = useApi()
   const { width } = useWindowSize()
@@ -58,10 +60,10 @@ export const BusinessSummary = (props) => {
   }
 
   const handleOpenSite = () => {
-    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
-      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+    const storeUrl = configs?.site_url?.value
+      ? `${checkSiteUrl(configs?.site_url?.value)}store/${businessState?.business?.slug}`
       : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
-    window.open(url, '_blank')
+    window.open(storeUrl, '_blank')
   }
 
   const itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization']

package/src/components/Users/UserAddForm/index.js

@@ -39,7 +39,10 @@ const UserAddFormUI = (props) => {
     isCheckout,
     handleChangeUserType,
     handlechangeImage,
-    handleChangeSwtich
+    handleChangeSwtich,
+    defaultPhoneNumber,
+    isFromCustomOrder,
+    hideUserTypeSelector
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
@@ -59,7 +62,7 @@ const UserAddFormUI = (props) => {
     cleanFormState && cleanFormState({ result: { error: false } })
   }
 
-  const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
+  const showInputPhoneNumber = isFromCustomOrder ?? validationFields?.fields?.checkout?.cellphone?.enabled ?? false
 
   const onSubmit = () => {
     const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
@@ -198,6 +201,13 @@ const UserAddFormUI = (props) => {
     })
   }, [formMethods])
 
+  useEffect(() => {
+    if (defaultPhoneNumber) {
+      setUserPhoneNumber(defaultPhoneNumber)
+      handleChangePhoneNumber(defaultPhoneNumber, true)
+    }
+  }, [defaultPhoneNumber])
+
   return (
     <>
       <FormContainer>
@@ -308,13 +318,15 @@ const UserAddFormUI = (props) => {
               props.afterMidComponents?.map((MidComponent, i) => (
                 <MidComponent key={i} {...props} />))
               }
-              <WrapperUserTypeSelector>
-                <UserTypeSelector
-                  isPrimary
-                  defaultUserType={formState?.changes?.level}
-                  handleChangeUserType={handleChangeUserType}
-                />
-              </WrapperUserTypeSelector>
+              {!hideUserTypeSelector && (
+                <WrapperUserTypeSelector>
+                  <UserTypeSelector
+                    isPrimary
+                    defaultUserType={formState?.changes?.level ?? 3}
+                    handleChangeUserType={handleChangeUserType}
+                  />
+                </WrapperUserTypeSelector>
+              )}
               <ActionsForm>
                 <Button
                   color='primary'

package/src/components/Users/UserAddForm/styles.js

@@ -4,8 +4,8 @@ export const FormContainer = styled.div`
   width: 100%;
 
   h1 {
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 20px;
+    font-weight: 700;
     width: 100%;
     margin-bottom: 0px;
     color: ${props => props.theme.colors.headingColor};

package/src/styles/Selects/index.js

@@ -96,7 +96,7 @@ export const Options = styled.div`
 `
 
 export const OptionsInner = styled.div`
-  overflow: auto;
+  overflow-x: hidden;
   margin: ${({ optionInnerMargin }) => optionInnerMargin};
   max-height: ${({ optionInnerMaxHeight }) => optionInnerMaxHeight};
   overscroll-behavior: contain;

package/src/utils/index.js

@@ -216,6 +216,11 @@ export const findExitingCode = (countryCode) => {
   return code?.countryCode
 }
 
+export const findExitingCountryPhoneCode = (countryCode) => {
+  const code = CODES.find(code => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.phoneCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not