ordering-ui-admin-external 1.2.0 → 1.3.0

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

@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -35,7 +36,8 @@ export const PaymethodOptionPaypalExpress = (props) => {
     businessPaymethod,
     orderTypes,
     handleChangeBusinessPaymentState,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -203,7 +205,8 @@ export const PaymethodOptionPaypalExpress = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -219,7 +222,8 @@ export const PaymethodOptionPaypalExpress = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -240,6 +244,7 @@ export const PaymethodOptionPaypalExpress = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -9,6 +9,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -38,7 +39,8 @@ export const PaymethodOptionStripeConnect = (props) => {
     businessPaymethod,
     orderTypes,
     handleChangeBusinessPaymentState,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -247,7 +249,8 @@ export const PaymethodOptionStripeConnect = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -263,7 +266,8 @@ export const PaymethodOptionStripeConnect = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -284,6 +288,7 @@ export const PaymethodOptionStripeConnect = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -35,7 +36,8 @@ export const PaymethodOptionStripeRedirect = (props) => {
     businessPaymethod,
     orderTypes,
     handleChangeBusinessPaymentState,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -221,7 +223,8 @@ export const PaymethodOptionStripeRedirect = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -237,7 +240,8 @@ export const PaymethodOptionStripeRedirect = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -258,6 +262,7 @@ export const PaymethodOptionStripeRedirect = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -106,6 +106,7 @@ export const UsersList = (props) => {
                 <th>{t('USER', 'User')}</th>
                 <th>{t('PHONE', 'Phone')}</th>
                 <th>{t('TYPE', 'Type')}</th>
+                <th className='amout-orders '>{t('AMOUNT_OF_ORDERS', 'Amount of orders')}</th>
                 <th>{t('ACTION', 'Action')}</th>
               </tr>
             </thead>
@@ -138,6 +139,9 @@ export const UsersList = (props) => {
                     <td>
                       <Skeleton width={20} />
                     </td>
+                    <td>
+                      <Skeleton width={20} />
+                    </td>
                   </tr>
                 </tbody>
               ))
@@ -197,10 +201,15 @@ export const UsersList = (props) => {
                       </InfoBlock>
                     </td>
                     <td>
-                      <UserTypeWrapper>
+                      <UserTypeWrapper noBorder>
                         <p>{getUserType(user?.level)?.value}</p>
                       </UserTypeWrapper>
                     </td>
+                    <td>
+                      <UserTypeWrapper>
+                        <p>{user?.orders_count || t('NEW', 'New')}</p>
+                      </UserTypeWrapper>
+                    </td>
                     <td>
                       <UserEnableWrapper className='user_enable_control'>
                         <span>{t('ENABLE', 'Enable')}</span>

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

@@ -34,6 +34,12 @@ export const UsersTable = styled.table`
   thead {
     tr {
       border-bottom: solid 1px ${props => props.theme.colors.disabled};
+      th {
+        white-space: nowrap;
+        &.amout-orders {
+          width: 15%;
+        }
+      }
     }
   }
 
@@ -162,6 +168,9 @@ export const UserTypeWrapper = styled.div`
     border-right: 1px solid ${props => props.theme.colors.borderColor};
     margin-right: 20px;
   `}
+  ${({ noBorder }) => noBorder && css`
+    border: none;
+  `}
   > p {
     margin: 5px 0 0 0;
     font-size: 14px;

package/template/app.js

@@ -226,7 +226,7 @@ export const App = () => {
                       <AdvancedReports />
                     </ProtectedRoute>
 
-                    <ProtectedRoute path='/delivery/drivers-list' allowedLevels={[0]}>
+                    <ProtectedRoute path='/delivery/drivers-list' allowedLevels={[0, 5]}>
                       <DeliveryDriversList />
                     </ProtectedRoute>
                     <ProtectedRoute path='/delivery/drivers-managers' allowedLevels={[0]}>
@@ -235,25 +235,25 @@ export const App = () => {
                     <ProtectedRoute path='/delivery/drivers-companies' allowedLevels={[0]}>
                       <DriversCompaniesList />
                     </ProtectedRoute>
-                    <ProtectedRoute path='/delivery/drivers-groups' allowedLevels={[0]}>
+                    <ProtectedRoute path='/delivery/drivers-groups' allowedLevels={[0, 5]}>
                       <DriversGroupsList />
                     </ProtectedRoute>
 
-                    <ProtectedRoute path='/marketing/promotions-enterprise' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/marketing/promotions-enterprise' allowedLevels={[0]}>
                       <EnterprisePromotionList />
                     </ProtectedRoute>
-                    <ProtectedRoute path='/marketing/campaign' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/marketing/campaign' allowedLevels={[0]}>
                       <CampaignListing />
                     </ProtectedRoute>
 
-                    <ProtectedRoute path='/loyalty/rewards-programs' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/loyalty/rewards-programs' allowedLevels={[0]}>
                       <RewardsPrograms />
                     </ProtectedRoute>
 
-                    <ProtectedRoute path='/cart-recovery/open-carts' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/cart-recovery/open-carts' allowedLevels={[0]}>
                       <OpenCarts />
                     </ProtectedRoute>
-                    <ProtectedRoute path='/cart-recovery/recovery-actions' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/cart-recovery/recovery-actions' allowedLevels={[0]}>
                       <RecoveryActionListing />
                     </ProtectedRoute>
 
@@ -286,7 +286,7 @@ export const App = () => {
                     <ProtectedRoute path='/downloads/purchased-products' allowedLevels={[0]}>
                       <PurchasedProductsList />
                     </ProtectedRoute>
-                    <ProtectedRoute path='/ordering-products' allowedLevels={[0, 2]}>
+                    <ProtectedRoute path='/ordering-products' allowedLevels={[0]}>
                       <OrderingProducts />
                     </ProtectedRoute>