ordering-ui-admin-external 1.0.0 → 1.1.1

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

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, SitesAuthSettings as SitesAuthSettingsController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
+import { Alert, SideBar } from '../../Shared'
+import { SiteSettingDetails } from '../SiteSettingDetails'
+
+import {
+  SitesListContainer,
+  SitesWrapper,
+  SiteItem
+} from './styles'
+
+const SitesAuthSettingsUI = (props) => {
+  const {
+    sitesState,
+    actionState,
+    setMoveDistance,
+    siteConfigsState,
+    handleGetSiteConfigs,
+    handleChangeConfig
+  } = props
+
+  const [, t] = useLanguage()
+  const [selectedSiteId, setSelectedSiteId] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const handleOpenSiteSettingDetails = (siteId) => {
+    handleGetSiteConfigs(siteId)
+    setSelectedSiteId(siteId)
+    setMoveDistance(500)
+  }
+
+  const handleCloseDetails = () => {
+    setSelectedSiteId(null)
+    setMoveDistance(0)
+  }
+
+  useEffect(() => {
+    if (actionState.error) {
+      setAlertState({
+        open: true,
+        content: actionState.error
+      })
+    }
+  }, [actionState.error])
+
+  return (
+    <>
+      <SitesListContainer>
+        <h1>{t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')}</h1>
+        {sitesState.loading ? (
+          <SitesWrapper>
+            {[...Array(5).keys()].map(i => (
+              <SiteItem key={i}>
+                <Skeleton width={100} height={14} />
+              </SiteItem>
+            ))}
+          </SitesWrapper>
+        ) : (
+          <SitesWrapper>
+            {sitesState.sites.map(site => (
+              <SiteItem
+                key={site.id}
+                active={site.id === selectedSiteId}
+                onClick={() => handleOpenSiteSettingDetails(site.id)}
+              >
+                <span>{site.name}</span>
+                <BsChevronRight />
+              </SiteItem>
+            ))}
+          </SitesWrapper>
+        )}
+      </SitesListContainer>
+      {selectedSiteId && (
+        <SideBar
+          isBorderShow
+          open={selectedSiteId}
+          onClose={() => handleCloseDetails()}
+        >
+          <SiteSettingDetails
+            selectedSiteId={selectedSiteId}
+            siteConfigsState={siteConfigsState}
+            handleChangeConfig={handleChangeConfig}
+          />
+        </SideBar>
+      )}
+      <Alert
+        title={t('SETTINGS', 'Settings')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const SitesAuthSettings = (props) => {
+  const sitesAuthSettinsProps = {
+    ...props,
+    UIComponent: SitesAuthSettingsUI
+  }
+  return <SitesAuthSettingsController {...sitesAuthSettinsProps} />
+}

package/src/components/Settings/SitesAuthSettings/styles.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components'
+
+export const SitesListContainer = styled.div`
+  padding: 26px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+
+  h1 {
+    font-weight: 700;
+    font-size: 20px;
+    margin: 0;
+  }
+`
+export const SitesWrapper = styled.div`
+  margin-top: 35px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  overflow: hidden;
+  > div:first-child {
+    border-top: none !important;
+  }
+
+  > div:last-child {
+    border-bottom: none !important;
+  } 
+`
+export const SiteItem = styled.div`
+  cursor: pointer;
+  padding: 12px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${props => props.theme.colors.lightGray};
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  span {
+    font-size: 14px;
+  }
+  svg {
+    font-size: 20px;
+  }
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.headingColor};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary} !important;
+    background-color: ${props => props.theme.colors.lightPrimary};
+  `}
+`

package/src/components/SidebarMenu/index.js

@@ -631,7 +631,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   </Accordion>
                 )}
-                {/* {sessionState?.user?.level !== 5 && (
+                {sessionState?.user?.level !== 5 && (
                   <Button
                     className='d-flex align-items-center'
                     variant={location.pathname === '/ordering-products' && 'primary'}
@@ -640,7 +640,7 @@ export const SidebarMenu = (props) => {
                     <WindowDock />
                     <span>{t('ORDERING_PRODUCTS', 'Ordering products')}</span>
                   </Button>
-                )} */}
+                )}
                 {sessionState?.user?.level === 0 && (
                   <Button
                     className='d-flex align-items-center'

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import {
   useLanguage,
@@ -24,38 +24,19 @@ const BusinessessListingUI = (props) => {
     getPageBusinesses,
     isOpen,
     close,
-    changeBusinessState,
-    defaultPageSize
+    changeBusinessState
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const dropdownReference = useRef()
-  const [businessesPerPage, setBusinessesPerPage] = useState(defaultPageSize ?? 6)
-  const [currentPage, setCurrentPage] = useState(1)
-  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)
   }
 
   const closeSelect = (e) => {
@@ -67,25 +48,10 @@ const BusinessessListingUI = (props) => {
     }
   }
 
-  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])
-
   useEffect(() => {
     if (!isOpen) return
-    document.addEventListener('click', closeSelect)
-    return () => document.removeEventListener('click', closeSelect)
+    document.addEventListener('mouseup', closeSelect)
+    return () => document.removeEventListener('mouseup', closeSelect)
   }, [isOpen])
 
   return (
@@ -102,36 +68,37 @@ const BusinessessListingUI = (props) => {
         </BusinessSearch>
         <BusinessList>
           {businessList.loading ? (
-            [...Array(businessesPerPage).keys()].map(i => (
+            [...Array(pagination.pageSize).keys()].map(i => (
               <OptionItem key={i}>
                 <Skeleton width={38} height={38} style={{ borderRadius: '7.6px' }} />
                 <div style={{ marginLeft: '8px', marginRight: '8px' }}>
-                  <Skeleton height={15} width={100} />
+                  <Skeleton height={15} width={140} />
                   <Skeleton height={12} width={80} style={{ marginTop: '7px' }} />
                 </div>
               </OptionItem>
             ))
           ) : (
             <>
-              {currentBusinessess && currentBusinessess.length > 0 && (
-                currentBusinessess.map(business => (
-                  <OptionItem key={business.id} onClick={() => changeBusinessState(business)}>
-                    <img src={optimizeImage(business?.logo, 'h_50,c_limit')} alt='' />
-                    <span><b>{business?.name}</b>{business?.city?.name}</span>
-                  </OptionItem>
-                ))
-              )}
+              {businessList.businesses.map(business => (
+                <OptionItem key={business.id} onClick={() => changeBusinessState(business)}>
+                  <img src={optimizeImage(business?.logo, 'h_50,c_limit')} alt='' />
+                  <div>
+                    <b>{business?.name}</b>
+                    <p>{business?.city?.name}</p>
+                  </div>
+                </OptionItem>
+              ))}
             </>
           )}
         </BusinessList>
         {pagination && (
           <WrapperPagination className='pagination-container'>
-            {!businessList.loading && totalPages > 0 && (
+            {pagination?.total && (
               <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
+                currentPage={pagination.currentPage}
+                totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
                 handleChangePage={handleChangePage}
-                defaultPageSize={businessesPerPage}
+                defaultPageSize={pagination.pageSize}
                 handleChangePageSize={handleChangePageSize}
                 isHidePagecontrol
               />
@@ -148,8 +115,10 @@ export const BusinessSelectHeader = (props) => {
     ...props,
     UIComponent: BusinessessListingUI,
     asDashboard: true,
-    initialPageSize: 50,
-    loadMorePageSize: 10,
+    loadMorePageSize: props.defaultPageSize ?? 6,
+    paginationSettings: {
+      pageSize: props.defaultPageSize ?? 6
+    },
     isSearchByBusinessName: true,
     isSearchByBusinessEmail: true,
     isSearchByBusinessPhone: true,

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

@@ -4,7 +4,7 @@ export const PopMenuContatiner = styled.div`
   position: absolute;
   left:0px;
   background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-  width: 240px;
+  width: 280px;
   border: 1px solid #E9ECEF;
   box-sizing: border-box;
   box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);
@@ -53,34 +53,39 @@ export const OptionItem = styled.div`
       margin-left: 8px;
     `}
   }
-  span {
+  > div {
     display: flex;
     flex-direction: column;
-    font-size: 12px;
-    max-width: 170px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: ${props => props.theme.colors.textGray};
+    max-width: 210px;
     b {
       font-size: 14px;
       line-height: 20px;
       font-weight: 400;
       color: ${props => props.theme.colors.textBlack};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    p {
+      margin: 0;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: ${props => props.theme.colors.textGray};
     }
   }
+  span {
+    display: flex;
+  }
 `
 export const BusinessList = styled.div`
 `
 export const WrapperPagination = styled.div`
-  display: flex;
-  justify-content: flex-end;
   margin-top: 10px;
   >div>div{
     margin: 0;
     button {
-      width: 20px;
-      height: 20px;
       font-size: 12px;
     }
   }