ordering-ui-admin-external 1.24.2 → 1.25.0

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

@@ -45,6 +45,7 @@ const ProductDetailsUI = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const [showOption, setShowOption] = useState(null)
 
   const handleShowOption = (option, isInitialRender) => {
@@ -80,20 +81,18 @@ const ProductDetailsUI = (props) => {
       if (width <= 500) {
         document.getElementById('product_details').style.width = '100vw'
       } else {
-        if (extraOpen && width >= 1000) {
-          document.getElementById('product_details').style.width = '1000px'
+        if (isExpand) {
+          document.getElementById('product_details').style.width = '100vw'
         } else {
-          document.getElementById('product_details').style.width = '500px'
+          if (extraOpen && width >= 1000) {
+            document.getElementById('product_details').style.width = '1000px'
+          } else {
+            document.getElementById('product_details').style.width = '500px'
+          }
         }
       }
     }
   }
-  useEffect(() => {
-    // if (width > 1000) {
-    //   setIsExtendExtraOpen(false)
-    // }
-    toggleMainContent()
-  }, [width])
 
   useEffect(() => {
     if (!open) return
@@ -101,13 +100,8 @@ const ProductDetailsUI = (props) => {
   }, [open])
 
   useEffect(() => {
-    if (width < 1000) return
-    if (extraOpen) {
-      document.getElementById('product_details').style.width = '1000px'
-    } else {
-      toggleMainContent()
-    }
-  }, [extraOpen])
+    toggleMainContent()
+  }, [extraOpen, isExpand, width])
 
   useEffect(() => {
     setExtraOpen(false)
@@ -142,6 +136,8 @@ const ProductDetailsUI = (props) => {
           showOption={showOption}
           handleShowOption={handleShowOption}
           extraOpen={extraOpen}
+          isExpand={isExpand}
+          setIsExpand={setIsExpand}
         />
       )}
       {extraOpen && (

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

@@ -6,7 +6,7 @@ import {
   ProductExtraOptionDetails as ProductExtraOptionDetailsController
 } from 'ordering-components-admin-external'
 import BiImage from '@meronex/icons/bi/BiImage'
-import { IconButton, Input } from '../../../styles'
+import { IconButton, Input, LinkButton } from '../../../styles'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { bytesConverter } from '../../../utils'
@@ -400,12 +400,12 @@ const ProductExtraOptionDetailsUI = (props) => {
         )}
         {!isAddForm && (
           <AddNewOptionButton>
-            <span
+            <LinkButton
               className='add-option-btn'
               onClick={() => setIsAddForm(true)}
             >
               {t('ADD_SUBOPTION', 'Add suboption')}
-            </span>
+            </LinkButton>
           </AddNewOptionButton>
         )}
       </ModifierOptionsContainer>

package/src/components/Stores/ProductExtraOptionDetails/styles.js

@@ -287,13 +287,4 @@ export const AdddSubOptionForm = styled.form`
 
 export const AddNewOptionButton = styled.div`
   margin-top: 15px;
-  font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
-  span {
-    cursor: pointer;
-  }
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ProductExtras as ProductExtrasController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { Button, Checkbox } from '../../../styles'
+import { Button, Checkbox, LinkButton } from '../../../styles'
 import { Alert, Confirm, Modal } from '../../Shared'
 import { ProductExtraOptions } from '../ProductExtraOptions'
 import { ChevronRight } from 'react-bootstrap-icons'
@@ -17,7 +17,7 @@ import {
   MoreContainer,
   Details,
   ExtraAddForm,
-  AddButton,
+  AddButtonWrapper,
   DragImageWrapper
 } from './styles'
 
@@ -201,11 +201,13 @@ const ProductExtrasUI = (props) => {
             />
           </ExtraAddForm>
         )}
-        <AddButton
-          onClick={() => handleOpenAddForm()}
-        >
-          {t('ADD_PRODUCT_OPTION', 'Add product option')}
-        </AddButton>
+        <AddButtonWrapper>
+          <LinkButton
+            onClick={() => handleOpenAddForm()}
+          >
+            {t('ADD_PRODUCT_OPTION', 'Add product option')}
+          </LinkButton>
+        </AddButtonWrapper>
       </ProductExtrasContainer>
       {width >= 1000 ? (
         <>

package/src/components/Stores/ProductExtras/styles.js

@@ -99,15 +99,8 @@ export const Details = styled.div`
   }
 `
 
-export const AddButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
+export const AddButtonWrapper = styled.div`
   padding: 12px 0;
-  color: ${props => props.theme.colors.lightGray};
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `
 
 export const ExtraAddForm = styled.form`

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { Button } from '../../../styles'
+import { Button, LinkButton } from '../../../styles'
 import { ProductIngredientDetails } from '../ProductIngredientDetails'
 import { Modal } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
@@ -12,7 +12,7 @@ import {
   IngredientContainer,
   Header,
   IngredientOption,
-  AddIngredientButton
+  AddIngredientButtonWrapper
 } from './styles'
 
 export const ProductIngredient = (props) => {
@@ -81,11 +81,13 @@ export const ProductIngredient = (props) => {
             <ChevronRight />
           </IngredientOption>
         ))}
-        <AddIngredientButton
-          onClick={() => handleOpenIngredient(null)}
-        >
-          {t('ADD_INGREDIENT', 'Add ingredient')}
-        </AddIngredientButton>
+        <AddIngredientButtonWrapper>
+          <LinkButton
+            onClick={() => handleOpenIngredient(null)}
+          >
+            {t('ADD_INGREDIENT', 'Add ingredient')}
+          </LinkButton>
+        </AddIngredientButtonWrapper>
       </IngredientContainer>
 
       {width >= 1000 ? (

package/src/components/Stores/ProductIngredient/styles.js

@@ -64,13 +64,6 @@ export const IngredientOption = styled.div`
     border-bottom: 1px solid ${props => props.theme.colors.primary};
   `}
 `
-export const AddIngredientButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
+export const AddIngredientButtonWrapper = styled.div`
   padding: 12px 0;
-  color: ${props => props.theme.colors.lightGray};
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `

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

@@ -16,13 +16,12 @@ import { SelectPosGuide } from '../SelectPosGuide'
 const ProductStepUI = (props) => {
   const {
     onClose,
-    businessList,
+    businessListState,
     setBusiness,
     actionState,
     handleImport,
     handleChangeAddress,
     business,
-    isLoading,
     orderingBusiness,
     countriesState,
     handleOpenCategoryDetails
@@ -53,12 +52,11 @@ const ProductStepUI = (props) => {
           setBusiness={setBusiness}
           setStep={setStep}
           onClose={onClose}
-          businessList={businessList}
+          businessListState={businessListState}
           handleImport={handleImport}
           handleChangeAddress={handleChangeAddress}
           orderingBusiness={orderingBusiness}
           business={business}
-          isLoading={isLoading}
         />
       )}
       {step === 3 && option === 2 && actionState?.loading && (
@@ -91,6 +89,29 @@ const ProductStepUI = (props) => {
           </ButtonWrapper>
         </ImportMenuContainer>
       )}
+      {step === 3 && option === 2 && !actionState?.loading && actionState?.error && (
+        <ImportMenuContainer>
+          <h2>{t('ERROR', 'Error')}</h2>
+          {actionState.error && typeof actionState.error === 'string' && actionState.error}
+          {actionState.error && typeof actionState.error === 'object' && Array.isArray(actionState.error) && (
+            <ul>
+              {actionState.error.map((item, i) => (
+                <React.Fragment key={i}>
+                  {Array.isArray(item) ? (
+                    item.map((err, index) => (
+                      typeof err === 'string' && (
+                        <li key={index}>{t(err.toUpperCase(), err)}</li>
+                      )
+                    ))
+                  ) : (
+                    typeof item === 'string' && <li>{t(item.toUpperCase(), item)}</li>
+                  )}
+                </React.Fragment>
+              ))}
+            </ul>
+          )}
+        </ImportMenuContainer>
+      )}
       {step === 2 && option === 3 && (
         <UploadMenuGuide
           handleBack={() => setStep(1)}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import BiImage from '@meronex/icons/bi/BiImage'
@@ -43,7 +43,8 @@ export const ProductSummary = (props) => {
     productCart,
     handleDeleteProduct,
     showProductOption,
-    extraOpen
+    isExpand,
+    setIsExpand
   } = props
 
   const [, t] = useLanguage()
@@ -54,7 +55,6 @@ export const ProductSummary = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isProductPreview, setIsProductPreview] = useState(false)
   const [selectedView, setSelectedView] = useState('desktop')
-  const [isExpand, setIsExpand] = useState(false)
 
   const productConfigOptions = [
     {
@@ -138,10 +138,6 @@ export const ProductSummary = (props) => {
     setIsExpand(prev => !prev)
   }
 
-  useEffect(() => {
-    if (extraOpen) setIsExpand(false)
-  }, [extraOpen])
-
   return (
     <>
       <ProductDetailsContainer disabled={productState.loading}>

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

@@ -3,7 +3,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ProductTagsList as ProductTagsController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { SearchBar, SideBar } from '../../Shared'
-import { Button, Checkbox } from '../../../styles'
+import { Button, Checkbox, LinkButton } from '../../../styles'
 import { ChevronRight, Image as ImageIcon } from 'react-bootstrap-icons'
 import { ProductTagDetails } from '../ProductTagDetails'
 
@@ -147,10 +147,12 @@ const ProductTagsListUI = (props) => {
         )}
 
         {!tagsState.loading && (
-          <AddNewLabel
-            onClick={e => handleOpenProductTagDetail(e, null)}
-          >
-            {t('ADD_NEW_LABEL', 'Add new label')}
+          <AddNewLabel>
+            <LinkButton
+              onClick={e => handleOpenProductTagDetail(e, null)}
+            >
+              {t('ADD_NEW_LABEL', 'Add new label')}
+            </LinkButton>
           </AddNewLabel>
         )}
       </TagsListContainer>

package/src/components/Stores/ProductTagsList/styles.js

@@ -74,12 +74,5 @@ export const TagImageWrapper = styled.div`
   }
 `
 export const AddNewLabel = styled.div`
-  width: fit-content;
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
   margin: 15px 0;
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `

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

@@ -16,13 +16,12 @@ import {
 export const RestaurantSelectGuide = (props) => {
   const {
     setBusiness,
-    businessList,
+    businessListState,
     setStep,
     onClose,
     handleImport,
     handleChangeAddress,
     orderingBusiness,
-    isLoading,
     business
   } = props
 
@@ -38,12 +37,12 @@ export const RestaurantSelectGuide = (props) => {
   }
 
   const handleSelectBusiness = (id) => {
-    const _business = businessList.find(item => item._id === id)
+    const _business = businessListState.businesses?.find(item => item._id === id)
     setBusiness(_business)
   }
 
   useEffect(() => {
-    const _options = businessList?.map(item => {
+    const _options = businessListState.businesses?.map(item => {
       return {
         value: item._id,
         content: (
@@ -56,7 +55,7 @@ export const RestaurantSelectGuide = (props) => {
       }
     })
     setOptions(_options)
-  }, [businessList])
+  }, [businessListState?.businesses])
 
   return (
     <Container>
@@ -76,7 +75,7 @@ export const RestaurantSelectGuide = (props) => {
           countryCode={configs?.country_autocomplete?.value || '*'}
         />
       </SearchWrapper>
-      {isLoading && (
+      {businessListState.loading && (
         <SelectWrapper>
           <label>
             <Skeleton height={15} width={100} />
@@ -84,24 +83,55 @@ export const RestaurantSelectGuide = (props) => {
           <Skeleton height={44} />
         </SelectWrapper>
       )}
-      {!isLoading && options?.length > 0 && (
-        <SelectWrapper>
-          <label>{t('SELECT_YOUR_RESTAURANT', 'Select your restaurant')}</label>
-          <Select
-            options={options}
-            className='select'
-            defaultValue={business?._id || ''}
-            placeholder={t('SELECT_BUSINESS', 'Select a Business')}
-            onChange={(value) => handleSelectBusiness(value)}
-            searchBarIsCustomLayout
-            searchBarIsNotLazyLoad
-          />
-        </SelectWrapper>
-      )}
-      {!isLoading && options.length === 0 && (
-        <EmptyData>
-          {t('NO_RESULT', 'There are no results')}
-        </EmptyData>
+      {!businessListState.loading && (
+        <>
+          {!businessListState.error ? (
+            <>
+              {options?.length > 0 && (
+                <SelectWrapper>
+                  <label>{t('SELECT_YOUR_RESTAURANT', 'Select your restaurant')}</label>
+                  <Select
+                    options={options}
+                    className='select'
+                    defaultValue={business?._id || ''}
+                    placeholder={t('SELECT_BUSINESS', 'Select a Business')}
+                    onChange={(value) => handleSelectBusiness(value)}
+                    searchBarIsCustomLayout
+                    searchBarIsNotLazyLoad
+                  />
+                </SelectWrapper>
+              )}
+              {options.length === 0 && (
+                <EmptyData>
+                  {t('NO_RESULT', 'There are no results')}
+                </EmptyData>
+              )}
+            </>
+          ) : (
+            <>
+              <EmptyData>
+                {businessListState.error && typeof businessListState.error === 'string' && businessListState.error}
+                {businessListState.error && typeof businessListState.error === 'object' && Array.isArray(businessListState.error) && (
+                  <ul>
+                    {businessListState.error.map((item, i) => (
+                      <React.Fragment key={i}>
+                        {Array.isArray(item) ? (
+                          item.map((err, index) => (
+                            typeof err === 'string' && (
+                              <li key={index}>{t(err.toUpperCase(), err)}</li>
+                            )
+                          ))
+                        ) : (
+                          typeof item === 'string' && <li>{t(item.toUpperCase(), item)}</li>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </ul>
+                )}
+              </EmptyData>
+            </>
+          )}
+        </>
       )}
       <ButtonWrapper>
         <span onClick={() => onClose()}>{t('SKIP', 'Skip')}</span>

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

@@ -138,6 +138,20 @@ export const SeoOptions = (props) => {
     descriptionRef.current.value = data?.description
   }
 
+  const onUpdateClick = () => {
+    if (formState?.changes?.slug) {
+      const format = /[ `!@#$%^&*()+\-=[\]{};':"\\|,.<>/?~]/
+      if (format.test(formState?.changes?.slug)) {
+        setAlertState({
+          open: true,
+          content: [t('SLUG_NOT_ALLOWED_SPECIAL_CHARACTERS', 'The slug is not allowed special characters.')]
+        })
+        return
+      }
+    }
+    handleUpdateClick()
+  }
+
   useEffect(() => {
     titleRef.current.value = data?.seo_title ?? ''
     descriptionRef.current.value = data?.seo_description ?? ''
@@ -268,7 +282,7 @@ export const SeoOptions = (props) => {
             color='primary'
             borderRadius='5px'
             disabled={formState.loading || Object.keys(formState?.changes).length === 0}
-            onClick={() => handleUpdateClick()}
+            onClick={() => onUpdateClick()}
           >
             {formState.loading ? t('UPDATING', 'Updating') : t('SAVE', 'Save')}
           </Button>

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

@@ -33,7 +33,8 @@ const SingleBusinessUI = (props) => {
     handleOpenBusinessDetails,
     detailsBusinessId,
     businessIds,
-    handleChangeBusinessIds
+    handleChangeBusinessIds,
+    citiesList
   } = props
 
   const [, t] = useLanguage()
@@ -49,6 +50,11 @@ const SingleBusinessUI = (props) => {
     handleOpenBusinessDetails(businessState?.business)
   }
 
+  const getCityName = (id) => {
+    const found = citiesList?.find(city => city.id === id)
+    return found?.name || ''
+  }
+
   return (
     <>
       {viewMethod === 'list' && (
@@ -125,7 +131,7 @@ const SingleBusinessUI = (props) => {
                       </WrapperImage>
                       <InfoBlock>
                         <p className='bold'>{businessState?.business?.name}</p>
-                        <p>{businessState?.business?.city?.name}</p>
+                        <p>{getCityName(businessState?.business?.city_id)}</p>
                       </InfoBlock>
                     </BusinessGeneralInfo>
                   </td>
@@ -201,7 +207,7 @@ const SingleBusinessUI = (props) => {
               </BusinessHeader>
               <BusinessContent>
                 <h1>{businessState?.business?.name}</h1>
-                <p>{businessState?.business?.city?.name}</p>
+                <p>{getCityName(businessState?.business?.city_id)}</p>
                 <BusinessActionContainer>
                   <span>{t('ID', 'ID')} {businessState?.business?.id}</span>
                   <BusinessEnableWrapper className='business_enable_control'>

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

@@ -35,7 +35,8 @@ const CustomerDetailsUI = (props) => {
     userState,
     handleDeleteUser,
     handleParentSidebarMove,
-    handleChangeActiveUser
+    handleChangeActiveUser,
+    setSideBarWidth
   } = props
 
   const history = useHistory()
@@ -72,7 +73,8 @@ const CustomerDetailsUI = (props) => {
 
   const handleClickMenu = (key, isInitialRender) => {
     setShowOption(key)
-    handleParentSidebarMove(500)
+    setSideBarWidth(isExpand ? width : 1000)
+    handleParentSidebarMove(isExpand ? width / 2 : 500)
     setIsOpenMenu(true)
     if (!isInitialRender) {
       const enabled = query.get('enabled')
@@ -82,6 +84,7 @@ const CustomerDetailsUI = (props) => {
   }
 
   const handleCloseMenu = () => {
+    setSideBarWidth(isExpand ? width : 500)
     handleParentSidebarMove(0)
     setShowOption(null)
     setIsOpenMenu(false)
@@ -104,10 +107,6 @@ const CustomerDetailsUI = (props) => {
     setShowOption(null)
   }, [userState?.user?.id])
 
-  useEffect(() => {
-    if (isOpenMenu) setIsExpand(false)
-  }, [isOpenMenu])
-
   useEffect(() => {
     if (userState.loading) return
     const section = query.get('section')
@@ -216,11 +215,10 @@ const CustomerDetailsUI = (props) => {
 
       {isOpenMenu && (
         <SideBar
-          sidebarId='customer_details_menu'
           open={isOpenMenu}
           onClose={() => handleCloseMenu()}
           isBorderShow
-          defaultSideBarWidth={500 + menuMoveDistance}
+          defaultSideBarWidth={isExpand ? width / 2 : 500 + menuMoveDistance}
           moveDistance={menuMoveDistance}
         >
           {showOption === 'user_details' && (

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

@@ -61,6 +61,7 @@ const CustomersListingUI = (props) => {
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
   const [openUser, setOpenUser] = useState(null)
   const [openUserAddForm, setOpenUserAddForm] = useState(false)
+  const [sideBarWidth, setSideBarWidth] = useState(500)
   const [moveDistance, setMoveDistance] = useState(0)
 
   const orderList = [
@@ -73,6 +74,7 @@ const CustomersListingUI = (props) => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
     setQueryId(null)
+    setSideBarWidth(500)
     moveDistance && setMoveDistance(0)
     const enabled = selectedUserActiveState ? 'active' : 'inactive'
     history.replace(`${location.pathname}?enabled=${enabled}`)
@@ -187,7 +189,7 @@ const CustomersListingUI = (props) => {
           sidebarId='customer_details'
           open={isOpenUserDetails}
           onClose={() => handleBackRedirect()}
-          defaultSideBarWidth={500 + moveDistance}
+          defaultSideBarWidth={sideBarWidth}
           moveDistance={moveDistance}
         >
           <CustomerDetails
@@ -197,6 +199,7 @@ const CustomersListingUI = (props) => {
             handleSuccessDeleteUser={handleSuccessDeleteUser}
             onClose={() => handleBackRedirect()}
             handleParentSidebarMove={val => setMoveDistance(val)}
+            setSideBarWidth={setSideBarWidth}
             handleChangeActiveUser={handleChangeActiveUser}
           />
         </SideBar>

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

@@ -4,7 +4,7 @@ import { useLanguage, useUtils } from 'ordering-components-admin-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
 import { Envelope, Phone, CheckSquareFill, Square } from 'react-bootstrap-icons'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { ConfirmAdmin, Pagination, ColumnAllowSettingPopover } from '../../Shared'
 
 import {
@@ -19,7 +19,6 @@ import {
   UserTypeWrapper,
   UserEnableWrapper,
   WrapperPagination,
-  AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
   VerifiedItem,
@@ -311,9 +310,9 @@ export const ProfessionalList = (props) => {
           </UsersTable>
         </UserTableWrapper>
         <UsersBottomContainer>
-          <AddNewUserButton onClick={() => handleOpenUserAddForm()}>
+          <LinkButton onClick={() => handleOpenUserAddForm()}>
             {t('ADD_NEW_USER', 'Add new user')}
-          </AddNewUserButton>
+          </LinkButton>
           {usersList?.users.length > 0 && (
             <WrapperPagination>
               <Pagination

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

@@ -189,13 +189,6 @@ export const WrapperPagination = styled.div`
   align-items: center;
 `
 
-export const AddNewUserButton = styled.div`
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-  width: fit-content;
-  font-size: 14px;
-`
-
 export const UsersBottomContainer = styled.div`
   display: flex;
   flex-wrap: wrap;