ordering-ui-admin-external 1.5.1 → 1.6.1

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

@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils } from 'ordering-components-admin-external'
-import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
-import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
-import { Envelope, Phone } from 'react-bootstrap-icons'
+import { Envelope, Phone, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { Switch } from '../../../styles'
 import { ConfirmAdmin, Pagination } from '../../Shared'
 
@@ -24,7 +22,8 @@ import {
   AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
-  VerifiedItem
+  VerifiedItem,
+  AllCheckWrapper
 } from './styles'
 
 export const UsersList = (props) => {
@@ -37,13 +36,15 @@ export const UsersList = (props) => {
     selectedUsers,
     handleSelectedUsers,
     handleOpenUserDetails,
-    handleOpenUserAddForm
+    handleOpenUserAddForm,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
 
   const [confirmAdmin, setConfirmAdmin] = useState({ open: false, handleOnConfirm: null })
+  const [isAllChecked, setIsAllChecked] = useState(false)
 
   const getUserType = (type) => {
     const userTypes = [
@@ -87,6 +88,26 @@ export const UsersList = (props) => {
     }
   }
 
+  const handleSelecteAllUser = () => {
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    if (!isAllChecked) {
+      setSelectedUsers([...selectedUsers, ...userIds])
+    } else {
+      const userIdsToDeleteSet = new Set(userIds)
+      const updatedSelectedOrderIds = selectedUsers.filter((name) => {
+        return !userIdsToDeleteSet.has(name)
+      })
+      setSelectedUsers(updatedSelectedOrderIds)
+    }
+  }
+
+  useEffect(() => {
+    if (usersList.loading) return
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    const _isAllChecked = userIds.every(elem => selectedUsers.includes(elem))
+    setIsAllChecked(_isAllChecked)
+  }, [usersList.users, selectedUsers])
+
   useEffect(() => {
     if (usersList.loading || usersList.users.length > 0 || paginationProps.totalPages <= 1) return
     if (paginationProps.currentPage !== paginationProps.totalPages) {
@@ -103,7 +124,22 @@ export const UsersList = (props) => {
           <UsersTable>
             <thead>
               <tr>
-                <th>{t('USER', 'User')}</th>
+                <th>
+                  <AllCheckWrapper>
+                    <CheckBoxWrapper
+                      className='all-checkbox'
+                      isChecked={!usersList?.loading && isAllChecked}
+                      onClick={() => handleSelecteAllUser()}
+                    >
+                      {(!usersList?.loading && isAllChecked) ? (
+                        <CheckSquareFill />
+                      ) : (
+                        <Square />
+                      )}
+                    </CheckBoxWrapper>
+                    {t('USER', 'User')}
+                  </AllCheckWrapper>
+                </th>
                 <th>{t('PHONE', 'Phone')}</th>
                 <th>{t('TYPE', 'Type')}</th>
                 <th className='amout-orders '>{t('AMOUNT_OF_ORDERS', 'Amount of orders')}</th>
@@ -159,9 +195,9 @@ export const UsersList = (props) => {
                           onClick={() => handleSelectedUsers(user.id)}
                         >
                           {selectedUsers.includes(user.id) ? (
-                            <MdCheckBox />
+                            <CheckSquareFill />
                           ) : (
-                            <MdCheckBoxOutlineBlank />
+                            <Square />
                           )}
                         </CheckBoxWrapper>
                         <WrapperImage>

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

@@ -136,7 +136,7 @@ export const CheckBoxWrapper = styled.div`
     margin-right: 10px;
   `}
   svg {
-    font-size: 24px;
+    font-size: 16px;
     color: #B1BCCC;
   }
 
@@ -144,7 +144,7 @@ export const CheckBoxWrapper = styled.div`
     svg {
       color: ${props => props.theme.colors?.primary};
     }
-`}
+  `}
 `
 
 export const InfoBlock = styled.div`
@@ -249,3 +249,8 @@ export const VerifiedItemsContainer = styled.div`
     }
   }
 `
+
+export const AllCheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { UsersList as UsersListController, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { UsersList } from '../UsersList'
 import { UsersListingHeader } from '../UsersListingHeader'
 import { UserTypeFilter } from '../UserTypeFilter'
@@ -42,7 +42,8 @@ const UsersListingUI = (props) => {
     onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
-    handleSuccessDeleteUser
+    handleSuccessDeleteUser,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
@@ -139,6 +140,7 @@ const UsersListingUI = (props) => {
           userDetailsId={openUser?.id || queryId}
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
+          setSelectedUsers={setSelectedUsers}
         />
       </UsersListingContainer>
 

package/src/contexts/ThemeContext/index.js

@@ -75,6 +75,10 @@ export const ThemeProvider = ({ children, ...props }) => {
       z-index: 3000;
     }
 
+    .modal-backdrop {
+      display: none;
+    }
+
     .popup-component {
       background-color: rgba(0, 0, 0, 0.3);
       display: flex;

package/src/index.js

@@ -139,7 +139,7 @@ import {
   GoogleGpsButton
 } from './components/Delivery'
 import { HomePage } from './components/Home'
-import { LoginForm, ForgotPasswordForm, QueryLogin } from './components/Login'
+import { LoginForm, ForgotPasswordForm, QueryLogin, ResetPassword } from './components/Login'
 import {
   EnterprisePromotionListing,
   CampaignListing,
@@ -337,12 +337,20 @@ import {
   PointsWalletBusinessDetail,
   PointsWalletBusinessList
 } from './components/Loyalty'
+import {
+  OrderingWebsite,
+  CustomerApp,
+  StoreApp,
+  DriverApp
+} from './components/MyProducts'
 import { OpenCartListing, RecoveryActionListing } from './components/CartRecovery'
 import { FreeProductsList, PurchasedProductsList } from './components/Downloads'
 
 import { Layout } from './components/Layout'
 import { SidebarMenu } from './components/SidebarMenu'
 import { NotNetworkConnectivity } from './components/NotNetworkConnectivity'
+import { ProfilePage } from './components/Profile'
+
 import {
   Alert,
   SpinnerLoader,
@@ -524,6 +532,7 @@ export {
   HomePage,
   LoginForm,
   QueryLogin,
+  ResetPassword,
 
   EnterprisePromotionListing,
   CampaignListing,
@@ -728,9 +737,16 @@ export {
   FreeProductsList,
   PurchasedProductsList,
 
+  OrderingWebsite,
+  CustomerApp,
+  StoreApp,
+  DriverApp,
+
   Layout,
   SidebarMenu,
   NotNetworkConnectivity,
+  ProfilePage,
+
   Alert,
   SpinnerLoader,
   Modal,

package/template/app.js

@@ -48,6 +48,12 @@ import { Support } from './pages/Support'
 import { AdvancedReports } from './pages/AdvancedReports'
 import { EnterprisePromotionList } from './pages/EnterprisePromotionList'
 import { Appointments } from './pages/Appointments'
+// import { GiftCardsList } from './pages/GiftCardsList'
+import { ResetPassword } from './pages/ResetPassword'
+import { OrderingWebsite } from './pages/OrderingWebsite'
+import { CustomerApp } from './pages/CustomerApp'
+import { StoreApp } from './pages/StoreApp'
+import { DriverApp } from './pages/DriverApp'
 
 import { ScrollToTop } from './components/ScrollToTop'
 import { ListenPageChanges } from './components/ListenPageChanges'
@@ -62,6 +68,7 @@ import { PurchasedProductsList } from './pages/PurchasedProductsList'
 import { Professionals } from './pages/Professionals'
 import { QueryLogin } from '../src/components/Login'
 import { PluginSettings } from './pages/PluginSettings'
+import { Profile } from './pages/Profile'
 
 export const App = () => {
   const [{ auth, loading, user }] = useSession()
@@ -131,7 +138,9 @@ export const App = () => {
                     <Route exact path='/'>
                       {
                         auth
-                          ? user?.level !== 5 ? <Redirect to='/home' /> : <Redirect to='/orders' />
+                          ? (user?.level !== 5 && user?.level !== 8)
+                            ? <Redirect to='/home' />
+                            : user?.level === 8 ? <Redirect to='/profile' /> : <Redirect to='/orders' />
                           : (queryProject && queryToken)
                             ? <QueryLogin project={queryProject} token={queryToken} />
                             : <Redirect to='/login' />
@@ -163,10 +172,33 @@ export const App = () => {
                           : <Redirect to='/home' />
                       }
                     </Route>
+
+                    <Route exact path='/password/reset'>
+                      {auth ? (
+                        <Redirect to='/' />
+                      ) : (
+                        <ResetPassword
+                          elementLinkToLogin={<Link to='/login'>{t('LOGIN', 'Login')}</Link>}
+                        />
+                      )}
+                    </Route>
+
+                    <Route exact path='/reset_password'>
+                      {auth ? (
+                        <Redirect to='/' />
+                      ) : (
+                        <ResetPassword
+                          elementLinkToLogin={<Link to='/login'>{t('LOGIN', 'Login')}</Link>}
+                        />
+                      )}
+                    </Route>
+
                     <Route exact path='/home'>
                       {
                         auth
-                          ? user?.level !== 5 ? <Home /> : <Redirect to='/orders' />
+                          ? (user?.level !== 5 && user?.level !== 8)
+                            ? <Home />
+                            : user?.level === 8 ? <Redirect to='/profile' /> : <Redirect to='/orders' />
                           : <Redirect to='/login' />
                       }
                     </Route>
@@ -180,7 +212,7 @@ export const App = () => {
                     <ProtectedRoute path='/drivers' allowedLevels={[0, 5]}>
                       <DriversList />
                     </ProtectedRoute>
-                    <ProtectedRoute path='/appointments' allowedLevels={[0]}>
+                    <ProtectedRoute path='/appointments' allowedLevels={[0, 2]}>
                       <Appointments />
                     </ProtectedRoute>
 
@@ -258,6 +290,22 @@ export const App = () => {
                       <RecoveryActionListing />
                     </ProtectedRoute>
 
+                    <ProtectedRoute path='/my-products/ordering-website' allowedLevels={[0]}>
+                      <OrderingWebsite />
+                    </ProtectedRoute>
+
+                    <ProtectedRoute path='/my-products/customer-app' allowedLevels={[0]}>
+                      <CustomerApp />
+                    </ProtectedRoute>
+
+                    <ProtectedRoute path='/my-products/store-app' allowedLevels={[0]}>
+                      <StoreApp />
+                    </ProtectedRoute>
+
+                    <ProtectedRoute path='/my-products/driver-app' allowedLevels={[0]}>
+                      <DriverApp />
+                    </ProtectedRoute>
+
                     <ProtectedRoute path='/settings/basic' allowedLevels={[0]}>
                       <BasicSettings />
                     </ProtectedRoute>
@@ -294,6 +342,10 @@ export const App = () => {
                       <OrderingProducts />
                     </ProtectedRoute>
 
+                    <ProtectedRoute path='/profile' allowedLevels={[0, 2, 5, 8]}>
+                      <Profile />
+                    </ProtectedRoute>
+
                     <Route path='*'>
                       <PageNotFound />
                     </Route>

package/template/components/ListenPageChanges/index.js

@@ -38,6 +38,10 @@ export const ListenPageChanges = ({ children }) => {
     reports: '/intelligence/reports',
     open_carts: '/cart-recovery/open-carts',
     recovery_actions: '/cart-recovery/recovery-actions',
+    ordering_website: '/my-products/ordering-website',
+    customer_app: '/my-products/customer-app',
+    store_app: '/my-products/store-app',
+    driver_app: '/my-products/driver-app',
     delivery_drivers: '/delivery/drivers-list',
     drivers_managers: '/delivery/drivers-managers',
     drivers_companies: '/delivery/drivers-companies',
@@ -48,7 +52,9 @@ export const ListenPageChanges = ({ children }) => {
     support: '/support',
     rewards_programs: '/loyalty/rewards-programs',
     free_products: '/downloads/free-products',
-    purchased_products: '/downloads/purchased-products'
+    purchased_products: '/downloads/purchased-products',
+    reset_password: '/password/reset',
+    profile: '/profile'
   }
 
   const handleGoToPage = ({ page, params = {}, search, replace = false }) => {

package/template/config.json

@@ -8,5 +8,6 @@
   },
   "socket": {
     "url": "https://socket.ordering.co"
-  }
+  },
+  "use_project_domain": true
 }

package/template/helmetdata.json

@@ -237,6 +237,34 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "ordering_website": {
+    "title": "Ordering Website",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "customer_app": {
+    "title": "Customer App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "store_app": {
+    "title": "Store App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "driver_app": {
+    "title": "Driver App",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "support": {
     "title": "Support",
     "description": "a dummy description about this page",
@@ -285,5 +313,26 @@
     "keywords": "test, dummy, data",
     "robots": "index, follow",
     "canonicalUrl": ""
+  },
+  "gift_cards": {
+    "title": "Gift Cards",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "reset_password": {
+    "title": "Reset Password",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
+  "profile": {
+    "title": "Profile",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
   }
 }

package/template/pages/CustomerApp/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { CustomerApp as CustomerAppController } from '../../../src/components/MyProducts'
+
+export const CustomerApp = (props) => {
+  return (
+    <>
+      <HelmetTags page='customer_app' />
+      <CustomerAppController {...props} />
+    </>
+  )
+}

package/template/pages/DriverApp/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { DriverApp as DriverAppController } from '../../../src/components/MyProducts'
+
+export const DriverApp = (props) => {
+  return (
+    <>
+      <HelmetTags page='driver_app' />
+      <DriverAppController {...props} />
+    </>
+  )
+}

package/template/pages/Login/index.js

@@ -1,12 +1,18 @@
 import React from 'react'
 import { LoginForm } from '../../../src/components/Login'
 import { HelmetTags } from '../../components/HelmetTags'
+import settings from '../../config.json'
 
 export const Login = (props) => {
+  const loginProps = {
+    ...props,
+    billingUrl: settings?.billing_url,
+    useProjectDomain: settings?.use_project_domain
+  }
   return (
     <>
       <HelmetTags page='login' />
-      <LoginForm {...props} />
+      <LoginForm {...loginProps} />
     </>
   )
 }

package/template/pages/OrderingWebsite/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { OrderingWebsite as OrderingWebsiteController } from '../../../src/components/MyProducts'
+
+export const OrderingWebsite = (props) => {
+  return (
+    <>
+      <HelmetTags page='ordering_website' />
+      <OrderingWebsiteController {...props} />
+    </>
+  )
+}

package/template/pages/Professionals/index.js

@@ -8,6 +8,7 @@ export const Professionals = (props) => {
   const [events] = useEvent()
   const professionalProps = {
     ...props,
+    isProfessional: true,
     headerTitle: t('PROFESSIONALS', 'Professionals'),
     defaultUserTypesSelected: [8],
     propsToFetch: [
@@ -15,7 +16,7 @@ export const Professionals = (props) => {
       'country_phone_code', 'city_id', 'city', 'address', 'addresses', 'max_days_in_future',
       'address_notes', 'dropdown_option_id', 'dropdown_option', 'location',
       'zipcode', 'level', 'enabled', 'middle_name', 'second_lastname', 'birthdate', 'drivergroups',
-      'phone_verified', 'email_verified', 'wallets'
+      'phone_verified', 'email_verified', 'wallets', 'occupation_id', 'session', 'session_strategy'
     ],
     onUserRedirect: (userId) => {
       if (!userId) {

package/template/pages/Profile/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { ProfilePage as ProfileController } from '../../../src/components/Profile'
+
+export const Profile = (props) => {
+  return (
+    <>
+      <HelmetTags page='profile' />
+      <ProfileController {...props} />
+    </>
+  )
+}

package/template/pages/ResetPassword/index.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+import { useEvent } from 'ordering-components-admin-external'
+import { HelmetTags } from '../../components/HelmetTags'
+import { ResetPassword as ResetPasswordController } from '../../../src/components/Login/ResetPassword'
+
+export const ResetPassword = (props) => {
+  const [events] = useEvent()
+  const {search} = useLocation()
+  let code, random, project
+
+  if (search) {
+    const data = search.substring(1).split('&')
+    code = data[0]
+    random = data[1]
+    project = data[2]
+  }
+
+  const codeString = code && code.split('=')[1]
+  const randomString = random && random.split('=')[1]
+  const projectString = project && project.split('=')[1]
+
+  const resetPasswordProps = {
+    ...props,
+    code: codeString,
+    random: randomString,
+    project: projectString,
+    redirectResetPassword: ({ code, random }) => {
+      events.emit('go_to_page', {
+        page: 'reset_password',
+        search: `?code=${code}&random=${random}`
+      })
+    },
+    onPasswordReset: () => (events.emit('go_to_page', { page: 'login' }))
+  }
+  return (
+    <>
+      <HelmetTags page='reset_password' />
+      <ResetPasswordController {...resetPasswordProps} />
+    </>
+  )
+}

package/template/pages/StoreApp/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { StoreApp as StoreAppController } from '../../../src/components/MyProducts'
+
+export const StoreApp = (props) => {
+  return (
+    <>
+      <HelmetTags page='store_app' />
+      <StoreAppController {...props} />
+    </>
+  )
+}