ordering-ui-admin-external 1.4.4 → 1.5.1

package/src/components/BusinessIntelligence/BusinessReviewList/index.js

@@ -33,49 +33,15 @@ const BusinessReviewsListingUI = (props) => {
   const [openReview, setOpenReview] = useState(false)
   const [curBusiness, setCurBusiness] = useState(null)
 
-  const [currentPage, setCurrentPage] = useState(1)
-  const [businessesPerPage, setBusinessesPerPage] = useState(10)
-  const [currentBusinessess, setCurrentBusinessess] = useState([])
-  const [totalPages, setTotalPages] = useState(null)
-
   const handleChangePage = (page) => {
-    if ((pagination.from <= page * businessesPerPage && page * businessesPerPage <= pagination.to) ||
-      (pagination.from <= page * businessesPerPage && page * businessesPerPage > pagination.total)
-    ) {
-      setCurrentPage(page)
-    } else {
-      getPageBusinesses(businessesPerPage, page)
-    }
+    getPageBusinesses(pagination.pageSize, page)
   }
 
   const handleChangePageSize = (pageSize) => {
-    setBusinessesPerPage(pageSize)
     const expectedPage = Math.ceil(pagination.from / pageSize)
-    if ((pagination.from <= expectedPage * pageSize && expectedPage * pageSize <= pagination.to) ||
-      (pagination.from <= expectedPage * pageSize && expectedPage * pageSize > pagination.total)
-    ) {
-      setCurrentPage(expectedPage)
-    } else {
-      setCurrentPage(expectedPage)
-      getPageBusinesses(pageSize, expectedPage)
-    }
+    getPageBusinesses(pageSize, expectedPage)
   }
 
-  useEffect(() => {
-    if (businessList.loading) return
-    let _totalPages
-    if (pagination?.total) {
-      _totalPages = Math.ceil(pagination?.total / businessesPerPage)
-    } else if (businessList.businesses.length > 0) {
-      _totalPages = Math.ceil(businessList.businesses.length / businessesPerPage)
-    }
-    const indexOfLastPost = currentPage * businessesPerPage
-    const indexOfFirstPost = indexOfLastPost - businessesPerPage
-    const _currentBusinessess = businessList.businesses.slice(indexOfFirstPost, indexOfLastPost)
-    setTotalPages(_totalPages)
-    setCurrentBusinessess(_currentBusinessess)
-  }, [businessList, currentPage, pagination, businessesPerPage])
-
   const handleOpenReview = (business) => {
     setCurBusiness(business)
     setOpenReview(true)
@@ -84,7 +50,6 @@ const BusinessReviewsListingUI = (props) => {
   useEffect(() => {
     if (parentSearchValue === null) return
     onSearch(parentSearchValue)
-    setCurrentPage(1)
   }, [parentSearchValue])
 
   return (
@@ -97,7 +62,7 @@ const BusinessReviewsListingUI = (props) => {
           </tr>
         </thead>
         {businessList.loading ? (
-          [...Array(businessesPerPage).keys()].map(i => (
+          [...Array(pagination.pageSize).keys()].map(i => (
             <ReviewTbody key={i}>
               <tr>
                 <td>
@@ -116,7 +81,7 @@ const BusinessReviewsListingUI = (props) => {
             </ReviewTbody>
           ))
         ) : (
-          currentBusinessess.map(business => (
+          businessList.businesses.map(business => (
             <ReviewTbody
               key={business.id}
               active={business.id === curBusiness?.id}
@@ -149,17 +114,18 @@ const BusinessReviewsListingUI = (props) => {
           ))
         )}
       </ReviewsTable>
-      <PagesBottomContainer>
-        {!businessList.loading && totalPages > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            handleChangePage={handleChangePage}
-            defaultPageSize={businessesPerPage}
-            handleChangePageSize={handleChangePageSize}
-          />
-        )}
-      </PagesBottomContainer>
+      {pagination && (
+        <PagesBottomContainer>
+          {pagination?.total > 0 && (
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
+            />
+          )}
+        </PagesBottomContainer>
+      )}
       {openReview && (
         <SideBar
           defaultSideBarWidth={550}
@@ -196,8 +162,6 @@ export const BusinessReviewList = (props) => {
     ...props,
     noActiveStatusCondition: true,
     asDashboard: true,
-    initialPageSize: 50,
-    loadMorePageSize: 10,
     isSearchByBusinessName: true,
     isSearchByBusinessEmail: true,
     isSearchByBusinessPhone: true,

package/src/components/BusinessIntelligence/ReportsAverageSales/index.js

@@ -87,6 +87,12 @@ const ReportsAverageSalesUI = (props) => {
     document.body.removeChild(downloadLink)
   }
 
+  const thObj = {
+    REPORT_HEADER_SITES: 'Sites',
+    REPORT_HEADER_ORDER_TYPES: 'Order types',
+    REPORT_HEADER_AVERAGE_TICKET: 'Average ticket'
+  }
+
   return (
     <>
       <OrderStatusContainer>
@@ -132,7 +138,7 @@ const ReportsAverageSalesUI = (props) => {
                         reportData?.content?.header?.rows.map((tr, i) => (
                           <tr key={i}>
                             {tr?.map((th, j) => (
-                              <th key={j} colspan={th.colspan}>{th.value}</th>
+                              <th key={j} colspan={th.colspan}>{t(th.value.toUpperCase(), thObj[th.value])}</th>
                             ))}
                           </tr>
                         ))
@@ -189,7 +195,7 @@ const ReportsAverageSalesUI = (props) => {
                         reportData1?.content?.header?.rows.map((tr, i) => (
                           <tr key={i}>
                             {tr?.map((th, j) => (
-                              <th key={j} colspan={th.colspan}>{th.value}</th>
+                              <th key={j} colspan={th.colspan}>{th.value?.includes("_") ? t(th.value.toUpperCase(), thObj[th.value]) : th.value}</th>
                             ))}
                           </tr>
                         ))

package/src/components/BusinessIntelligence/ReportsCustomer/index.js

@@ -75,12 +75,11 @@ const ReportsCustomerUI = (props) => {
     }
     return labels
   }
-
   const data = {
     labels: generateLabels(),
     datasets: [
       {
-        label: reportData?.content?.dataset?.dataset[0]?.label,
+        label: t(reportData?.content?.dataset?.dataset[0]?.label?.toUpperCase(), 'Report header qualification'),
         data: generateData(),
         fill: true,
         borderColor: '#2C7BE5',

package/src/components/BusinessIntelligence/ReportsPaymethodSales/index.js

@@ -102,6 +102,10 @@ const ReportsPaymethodSalesUI = (props) => {
     return hours + ':' + minutes + ':' + seconds // Return is HH : MM : SS
   }
 
+  const thObj = {
+    REPORT_HEADER_PAYMETHOD: 'Paymethod',
+  }
+
   return (
     <ReportsBusinessSpendContainer>
       <Title>{t('PAYMETHOD_SALES', 'Paymethod sales')}</Title>
@@ -146,7 +150,7 @@ const ReportsPaymethodSalesUI = (props) => {
                       reportData?.content?.header?.rows.map((tr, i) => (
                         <tr key={i}>
                           {tr?.map((th, j) => (
-                            <th key={j} colSpan={th.colspan}>{th.value}</th>
+                            <th key={j} colSpan={th.colspan}>{t(th.value.toUpperCase(), thObj[th.value])}</th>
                           ))}
                         </tr>
                       ))

package/src/components/BusinessIntelligence/ReportsSpentTIme/index.js

@@ -87,6 +87,12 @@ const ReportsSpentTimeUI = (props) => {
     document.body.removeChild(downloadLink)
   }
 
+  const thObj = {
+    REPORT_HEADER_TOTAL_VS_IDEAL: 'Report header total vs ideal',
+    REPORT_HEADER_RANK: 'Report header rank',
+    REPORT_HEADER_DRIVER_TIMES: 'Report header driver times'
+  }
+
   return (
     <ReportsBusinessSpendContainer>
       <Title>{t('DRIVER_TIME', 'Driver Time')}</Title>
@@ -131,7 +137,7 @@ const ReportsSpentTimeUI = (props) => {
                       reportData?.content?.header?.rows.map((tr, i) => (
                         <tr key={i}>
                           {tr?.map((th, j) => (
-                            <th key={j} colSpan={th.colspan}>{th.value}</th>
+                            <th key={j} colSpan={th.colspan}>{t(th.value.toUpperCase(), thObj[th.value])}</th>
                           ))}
                         </tr>
                       ))

package/src/components/Login/LoginForm/index.js

@@ -54,6 +54,7 @@ const LoginFormUI = (props) => {
   const [configFile, setConfigFile] = useContext(ConfigFileContext)
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: 'v3', siteKey: '' })
   const [submitted, setSubmitted] = useState(false)
   const [passwordSee, setPasswordSee] = useState(false)
 
@@ -78,6 +79,15 @@ const LoginFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+        setAlertState({
+          open: true,
+          content: [t('TRY_AGAIN', 'Please try again')]
+        })
+        setSubmitted(false)
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR')]
@@ -102,6 +112,21 @@ const LoginFormUI = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && configs?.security_recaptcha_auth?.value === '1') {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaVersion({ version: 'v3', siteKey: configs?.security_recaptcha_site_key_v3?.value })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+      }
+    }
+  }, [configs])
+
   useEffect(() => {
     setConfigFile({
       ...configFile,
@@ -251,9 +276,7 @@ const LoginFormUI = (props) => {
 
             {isReCaptchaEnable && (
               <ReCAPTCHAWrapper>
-                <ReCaptcha
-                  handleReCaptcha={handleReCaptcha}
-                />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCAPTCHAWrapper>
             )}
 

package/src/components/Loyalty/PointsWalletLevels/index.js

@@ -16,7 +16,8 @@ import {
   LevelName,
   Image,
   AddNewLevelButton,
-  LevelBottomContainer
+  LevelBottomContainer,
+  NotFoundSourceWrapper
 } from './styles'
 import { LoyaltyLevelDetail } from '../LoyaltyLevelDetail'
 
@@ -106,7 +107,9 @@ const PointsWalletLevelsUI = (props) => {
                 <ChevronRight />
               </LevelItemContainer>
             )) : (
-              <NotFoundSource />
+              <NotFoundSourceWrapper>
+                <NotFoundSource />
+              </NotFoundSourceWrapper>
             )}
           </>
         )}

package/src/components/Loyalty/PointsWalletLevels/styles.js

@@ -118,3 +118,9 @@ export const AddNewLevelButton = styled.div`
     color: ${props => props.theme.colors.primary};
   }
 `
+export const NotFoundSourceWrapper = styled.div`
+  > div {
+    height: initial;
+    padding: 20px;
+  }
+`

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

@@ -528,6 +528,7 @@ export const OrderDetails = (props) => {
   const orderDetailsProps = {
     ...props,
     asDashboard: true,
+    isDisableLoadMessages: true,
     UIComponent: OrderDetailsUI
   }
 

package/src/components/Settings/SettingsList/index.js

@@ -178,7 +178,7 @@ export const SettingsListUI = (props) => {
                                         defaultChecked={config?.value.split('|').includes(item?.value)}
                                         onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
                                       />
-                                      {item.text}
+                                      {t(item.text.toUpperCase())}
                                     </label>
                                   </FormGroupCheck>
                                 </FormGroupWrapper>

package/src/components/Settings/SettingsSelectUI/index.js

@@ -21,7 +21,7 @@ export const SettingsSelectUI = (props) => {
   const [, t] = useLanguage()
 
   const [options, setOptions] = useState(null)
-
+  
   useEffect(() => {
     if (!config) return
     if (config.key === 'terms_and_conditions') {

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

@@ -14,7 +14,9 @@ const CitySelectorUI = (props) => {
     isDefault,
     filterValues,
     defaultValue,
-    handleChangeCity
+    handleChangeCity,
+    position,
+    optionInnerMaxHeight
   } = props
 
   const [cityOptions, setCityOptions] = useState([])
@@ -43,6 +45,8 @@ const CitySelectorUI = (props) => {
         <>
           {isDefault ? (
             <Select
+              position={position}
+              optionInnerMaxHeight={optionInnerMaxHeight}
               placeholder={placeholder}
               defaultValue={defaultValue}
               options={cityOptions}

package/src/components/Shared/CitySelector/styles.js

@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components'
 
 export const Option = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
 
   ${({ isDefault }) => isDefault ? css`
     padding: 5px 15px;
@@ -35,6 +35,10 @@ export const Option = styled.div`
 
 export const PlaceholderTitle = styled(Option)`
   color: ${props => props.theme.colors.headingColor};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
 
   ${({ isDefault }) => isDefault ? css`
     padding: 5px 15px;

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

@@ -23,6 +23,12 @@ const ConfirmUI = (props) => {
     cancelText
   } = props
   const [, t] = useLanguage()
+
+  const errors = {
+    ERROR_REPORT_MAX_A_DAY_AS_PERIOD: 'Error report, max a day as period',
+    ERROR_REPORT_VERY_LONG_PERIOD: 'Error report, very long period'
+  }
+
   return (
     <PopupDialog
       className='popup-dialog'
@@ -39,7 +45,7 @@ const ConfirmUI = (props) => {
         {content && typeof content === 'object' && Array.isArray(content) && (
           <ul>
             {content.map((item, i) => (
-              <li key={i}>{item}</li>
+              <li key={i}>{t(item.toUpperCase(), errors[item])}</li>
             ))}
           </ul>
         )}

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

@@ -109,6 +109,8 @@ export const BusinessLocation = (props) => {
           <p>{t('CITY', 'City')}</p>
           <CitySelector
             isDefault
+            position='left'
+            optionInnerMaxHeight='300px'
             defaultValue={business?.city_id}
             handleChangeCity={handleChangeBusinessCity}
           />

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

@@ -40,6 +40,7 @@ export const WrapperCitySelector = styled.div`
     margin-bottom: 5px;
   }
   > div {
+    width: 100%;
     background: #F8F9FA;
     border: none;
   }

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-export const FormInput = styled.form`
+export const FormInput = styled.div`
   overflow: auto;
   width: 100%;
   padding: 20px;

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

@@ -21,7 +21,7 @@ import {
   CategoryNameWrapper,
   ParentCategorySelectWrapper,
   Option,
-  GenerateButtonWrapper,
+  // GenerateButtonWrapper,
   SkipButton,
   HeaderImage,
   LogoImage,
@@ -65,6 +65,7 @@ export const BusinessProductsCategoyInfo = (props) => {
     isAutoGenerate: false,
     autoCodeText: categorySelected?.slug
   })
+  const [isTouchedName, setIsTouchedName] = useState(false)
 
   const headerImageInputRef = useRef(null)
 
@@ -204,6 +205,17 @@ export const BusinessProductsCategoyInfo = (props) => {
     }
   }, [autoGenerateCode])
 
+  useEffect(() => {
+    if (typeof formState?.changes?.name === 'undefined' || !isTouchedName) return
+    const generateCode = {
+      target: {
+        name: 'slug',
+        value: stringToSlug(formState.changes.name)
+      }
+    }
+    handleChangeInput(generateCode)
+  }, [formState?.changes?.name, isTouchedName])
+
   return (
     <>
       <HeaderImage
@@ -273,7 +285,10 @@ export const BusinessProductsCategoyInfo = (props) => {
           placeholder={t('ENTER_CATEGORY_NAME', 'Enter a category name')}
           name='name'
           value={formState?.changes?.name || ''}
-          onChange={handleChangeInput}
+          onChange={e => {
+            !isTouchedName && setIsTouchedName(true)
+            handleChangeInput(e)
+          }}
           autoComplete='off'
         />
       </CategoryNameWrapper>
@@ -302,32 +317,37 @@ export const BusinessProductsCategoyInfo = (props) => {
           autoComplete='off'
         />
       </CategoryNameWrapper>
-      <CategoryNameWrapper>
-        <label>{t('SLUG', 'Slug')}</label>
-        <Input
-          name='slug'
-          placeholder={t('SLUG', 'Slug')}
-          onChange={handleChangeInput}
-          disabled={formState.loading}
-          autoComplete='off'
-          value={
-            formState?.changes?.slug || ''
-          }
-        />
-        <GenerateButtonWrapper>
-          <Button
-            color='lightPrimary'
-            borderRadius='7.6px'
-            disabled={formState.loading || !formState.changes?.name}
-            onClick={() => setAutoGenerate({
-              ...autoGenerateCode,
-              isAutoGenerate: true
-            })}
-          >
-            {formState?.loading ? t('LOADING', 'Loading') : t('AUTOGENERATE', 'Auto Generate')}
-          </Button>
-        </GenerateButtonWrapper>
-      </CategoryNameWrapper>
+      {!isAddMode && (
+        <CategoryNameWrapper>
+          <label>{t('SLUG', 'Slug')}</label>
+          <Input
+            name='slug'
+            placeholder={t('SLUG', 'Slug')}
+            onChange={handleChangeInput}
+            disabled={formState.loading}
+            autoComplete='off'
+            value={
+              formState?.changes?.slug || ''
+            }
+            onKeyPress={e => {
+              if (e.which === 32) { e.preventDefault() }
+            }}
+          />
+          {/* <GenerateButtonWrapper>
+            <Button
+              color='lightPrimary'
+              borderRadius='7.6px'
+              disabled={formState.loading || !formState.changes?.name}
+              onClick={() => setAutoGenerate({
+                ...autoGenerateCode,
+                isAutoGenerate: true
+              })}
+            >
+              {formState?.loading ? t('LOADING', 'Loading') : t('AUTOGENERATE', 'Auto Generate')}
+            </Button>
+          </GenerateButtonWrapper> */}
+        </CategoryNameWrapper>
+      )}
       <SwitchWrapper>
         <span>{t('RIBBON', 'Ribbon')}</span>
         <Switch

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

@@ -24,6 +24,7 @@ export const BusinessName = styled.h1`
   font-size: 20px;
   margin: 0px;
   font-weight: 700;
+  flex: 1;
 
   ${props => props.theme?.rtl ? css`
     margin-left: 10px;

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

@@ -14,11 +14,10 @@ export const BusinessSync = (props) => {
   const { handleParentSidebarMove } = props
 
   const [, t] = useLanguage()
-  const [selectedOption, setSelectedOption] = useState('basic')
+  const [selectedOption, setSelectedOption] = useState('deliverect')
 
   const syncOptions = [
-    { key: 'basic', name: t('BASIC', 'Basic') },
-    { key: 'synced_store', name: t('SYNCED_STORE', 'Synced store') }
+    { key: 'deliverect', name: t('DELIVERECT', 'Deliverect') }
   ]
 
   const handleChangeOption = (key) => {
@@ -42,7 +41,7 @@ export const BusinessSync = (props) => {
           </Tab>
         ))}
       </Tabs>
-      {selectedOption === 'basic' && (
+      {selectedOption === 'deliverect' && (
         <BusinessSyncBasic />
       )}
       {selectedOption === 'synced_store' && (

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

@@ -5,10 +5,11 @@ import {
   Container,
   LogoWrapper,
   Description,
-  GuideStep,
+  GetStarted,
   YoutubeVideoWrapper,
   YoutubeVideoInner
 } from './styles'
+import { Button } from '../../../styles'
 
 export const BusinessSyncBasic = () => {
   const theme = useTheme()
@@ -23,18 +24,13 @@ export const BusinessSyncBasic = () => {
         <p>{t('SYNC_DEC_FIRST', 'The easiest way to manage all your online orders.')}</p>
         <p dangerouslySetInnerHTML={{ __html: t('SYNC_DEC_SECOND', 'Deliverect integrates all your <span>online orders</span> to your <span>existing POS</span> or our <span>Delivery Manger app.</span> Restaurants large and small rely on Deliverect to reduce failures and order mistakes while speeding up order preparation.') }} />
       </Description>
-      <GuideStep>
-        <h4>{t('STEP', 'Step')}1</h4>
-        <p>{t('CREATE_ACCOUNT_WITH_DELIVERECT', 'Create your account with deliverect.')} <a href='https://www.deliverect.com/'>www.deliverect.com</a></p>
-      </GuideStep>
-      <GuideStep>
-        <h4>{t('STEP', 'Step')}2</h4>
-        <p>{t('COPY_THIS_LINK', 'Copy this link')}: <a href='https://www.deliverect.com/'>www.deliverect.com</a></p>
-      </GuideStep>
-      <GuideStep>
-        <h4>{t('STEP', 'Step')}3</h4>
-        <p>{t('CHECK_VIDEO_TO_LEARN_TO_PASTE_LINK', 'Check this video to learn where to paste the link.')}</p>
-      </GuideStep>
+      <GetStarted>
+        <h2>{t('GET_STARTED_RIGHT_HERE', 'Get started right here')}</h2>
+        <p>{t('FILL_UP_THIS_FORM_TO_REQUEST_INFORMATION', 'Fill up this form to request more information')}</p>
+        <a href='https://share.hsforms.com/1uGzNQ71IS2KXCAFC0mTBCg3neff' target='_blank' rel='noopener noreferrer'>
+          <Button color='primary'>{t('SEND_FORM', 'Send Form')}</Button>
+        </a>
+      </GetStarted>
       <YoutubeVideoWrapper>
         <YoutubeVideoInner>
           <iframe

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

@@ -30,26 +30,30 @@ export const Description = styled.div`
   }
 `
 
-export const GuideStep = styled.div`
-  margin-bottom: 30px;
-  h4 {
-    font-weight: 400;
+export const GetStarted = styled.div`
+  h2 {
+    font-weight: 500;
     font-size: 14px;
     line-height: 24px;
-    margin-bottom: 7px;
+    margin-top: 0px;
+    margin-bottom: 10px;
   }
   p {
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 8px;
     color: ${props => props.theme.colors.lightGray};
-    a {
-      color: ${props => props.theme.colors.primary};
-    }
+  }
+  button {
+    border-radius: 8px;
+    height: 44px;
   }
 `
 
 export const YoutubeVideoWrapper = styled.div`
+  margin-top: 50px;
   padding-bottom: 30px;
 `
 

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

@@ -73,13 +73,13 @@ export const BusinessesListingHeader = (props) => {
         >
           {t('ADD_NEW_STORE', 'Add new store')}
         </Button>
-        {/* <Button
+        <Button
           color='lightPrimary'
           borderRadius='8px'
           onClick={() => handleOpenSync()}
         >
           {t('SYNC', 'Sync')}
-        </Button> */}
+        </Button>
         <SearchBar
           isCustomLayout
           lazyLoad