ordering-ui-admin-external 1.13.3 → 1.14.0

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

@@ -0,0 +1,306 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, UsersFilter } from 'ordering-components-admin-external'
+import { Input, DefaultSelect, Button } from '../../../styles'
+import { Modal } from '../../Shared'
+import { countryList } from '../../../config/constants'
+import {
+  Container,
+  FormControl,
+  FormGroup,
+  RangeSelectWrapper,
+  Option,
+  ButtonGroup
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+import { DateTypeSelector } from '../../Orders'
+
+const UserFilterGroupUI = (props) => {
+  const {
+    filterValues,
+    handleChangeValue,
+    // handleChangeCity,
+    handleChangeFilterValues,
+    handleResetFilterValues,
+    isFilterModal,
+    onClose,
+    loyaltyLevelState,
+    handleChangeDateType,
+    handleChangeFromDate,
+    handleChangeEndDate,
+    isProfessionals,
+    isManagers,
+    isCustomers
+  } = props
+
+  const [, t] = useLanguage()
+  const [phoneCodeList, setPhoneCodeList] = useState()
+  const [loyaltyLevels, setLoyaltyLevels] = useState([])
+
+  const conditions = [
+    { value: 'gt', content: <Option>{'>'}</Option> },
+    { value: 'eq', content: <Option>=</Option> },
+    { value: 'lt', content: <Option>{'<'}</Option> },
+    { value: 'ge', content: <Option>{'>='}</Option> },
+    { value: 'le', content: <Option>{'<='}</Option> }
+  ]
+
+  const enableOptions = [
+    { value: true, content: <Option>{t('YES', 'Yes')}</Option> },
+    { value: false, content: <Option>{t('NO', 'No')}</Option> }
+  ]
+
+  const userOptions = [
+    { value: 0, content: <Option>{t('ADMINISTRATOR', 'Administrator')}</Option> },
+    { value: 1, content: <Option>{t('CITY_MANAGER', 'City manager')}</Option> },
+    { value: 2, content: <Option>{t('BUSINESS_OWNER', 'Business owner')}</Option> },
+    { value: 3, content: <Option>{t('USER', 'User')}</Option> },
+    { value: 9, content: <Option>{t('CALL_CENTER_AGENT', 'Call center agent')}</Option> }
+  ]
+
+  const handleAcceptFilter = () => {
+    handleChangeFilterValues({ ...filterValues })
+    onClose()
+  }
+
+  const handleClearFilter = () => {
+    handleResetFilterValues()
+    handleChangeFilterValues({})
+  }
+
+  useEffect(() => {
+    countryList.splice(0, 1)
+    const list = countryList.map(country => ({
+      value: country.dial_code.replace('+', ''),
+      content: <Option>({country.dial_code}) {country.name}</Option>
+    }))
+    setPhoneCodeList(list)
+  }, [countryList])
+
+  useEffect(() => {
+    if (loyaltyLevelState?.loading) return
+    const levels = loyaltyLevelState?.levels.map(item => ({
+      value: item.id,
+      content: <Option>{item.name}</Option>
+    }))
+    setLoyaltyLevels(levels)
+  }, [loyaltyLevelState])
+
+  return (
+    <Modal
+      title={t('FILTER', 'Filter')}
+      width='80%'
+      padding='30px'
+      open={isFilterModal}
+      onClose={onClose}
+    >
+      <Container>
+        <FormGroup>
+          <FormControl>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              type='text'
+              placeholder={t('NAME', 'Name')}
+              autoComplete='off'
+              value={filterValues?.name || ''}
+              onChange={(e) => handleChangeValue({ name: e.target.value })}
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('EMAIL', 'Email')}</label>
+            <Input
+              type='text'
+              placeholder={t('EMAIL', 'Email')}
+              autoComplete='off'
+              value={filterValues?.email || ''}
+              onChange={(e) => handleChangeValue({ email: e.target.value })}
+            />
+          </FormControl>
+        </FormGroup>
+        <FormGroup>
+          <FormControl>
+            <label>{t('LAST_NAME', 'Last name')}</label>
+            <Input
+              type='text'
+              placeholder={t('LAST_NAME', 'Last name')}
+              autoComplete='off'
+              value={filterValues?.lastname || ''}
+              onChange={(e) => handleChangeValue({ lastname: e.target.value })}
+            />
+          </FormControl>
+          {isProfessionals ? (
+            <FormControl>
+              <label>{t('SIGN_UP_DATE', 'Sign up date')}</label>
+              <DateTypeSelector
+                filterValues={filterValues}
+                handleChangeDateType={handleChangeDateType}
+                handleChangeFromDate={handleChangeFromDate}
+                handleChangeEndDate={handleChangeEndDate}
+              />
+            </FormControl>
+          ) : (
+            <FormControl>
+              <label>{t('AMOUNT_OF_ORDERS', 'Amount of orders')}</label>
+              <RangeSelectWrapper className='range'>
+                <DefaultSelect
+                  placeholder={t('SELECT_CONDITION', 'Select a condition')}
+                  defaultValue={filterValues?.ordersCount?.condition}
+                  options={conditions}
+                  onChange={condition => handleChangeValue({ ordersCount: { ...filterValues?.ordersCount, condition } })}
+                  optionInnerMaxHeight='300px'
+                />
+                <Input
+                  type='text'
+                  placeholder={t('NUMBER', 'Number')}
+                  autoComplete='off'
+                  value={filterValues?.ordersCount?.value || ''}
+                  onKeyPress={(e) => {
+                    if (!/^[0-9]$/.test(e.key)) {
+                      e.preventDefault()
+                    }
+                  }}
+                  onChange={(e) => handleChangeValue({ ordersCount: { ...filterValues?.ordersCount, value: e.target.value } })}
+                />
+              </RangeSelectWrapper>
+            </FormControl>
+          )}
+        </FormGroup>
+        <FormGroup>
+          <FormControl>
+            <label>{t('COUNTRY_PHONE_CODE', 'Country phone code')}</label>
+            <DefaultSelect
+              placeholder={t('SELECT_OPTION', 'Select a option')}
+              defaultValue={filterValues?.countryPhoneCode}
+              options={phoneCodeList}
+              onChange={val => handleChangeValue({ countryPhoneCode: val })}
+              optionInnerMaxHeight='300px'
+              className='full-select'
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('PHONE_NUMBER', 'Phone number')}</label>
+            <Input
+              type='text'
+              placeholder={t('PHONE_NUMBER', 'Phone number')}
+              autoComplete='off'
+              onKeyPress={(e) => {
+                if (!/^[0-9]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+              value={filterValues?.cellphone || ''}
+              onChange={(e) => handleChangeValue({ cellphone: e.target.value })}
+            />
+          </FormControl>
+        </FormGroup>
+        <FormGroup>
+          <FormControl>
+            <label>{t('PHONE_VERIFIED', 'Phone verified')}</label>
+            <DefaultSelect
+              placeholder={t('SELECT_OPTION', 'Select a option')}
+              defaultValue={filterValues?.phoneVerified}
+              options={enableOptions}
+              onChange={val => handleChangeValue({ phoneVerified: val })}
+              optionInnerMaxHeight='300px'
+              className='full-select'
+            />
+          </FormControl>
+          <FormControl>
+            <label>{t('EMAIL_VERIFIED', 'Email verified')}</label>
+            <DefaultSelect
+              placeholder={t('SELECT_OPTION', 'Select a option')}
+              defaultValue={filterValues?.emailVerified}
+              options={enableOptions}
+              onChange={val => handleChangeValue({ emailVerified: val })}
+              optionInnerMaxHeight='300px'
+              className='full-select'
+            />
+          </FormControl>
+        </FormGroup>
+        {!isProfessionals && !isCustomers && (
+          <FormGroup>
+            <FormControl>
+              <label>{t('USER_TYPE', 'User type')}</label>
+              <DefaultSelect
+                placeholder={t('SELECT_OPTION', 'Select a option')}
+                defaultValue={filterValues?.userType}
+                options={userOptions.filter(user => isManagers ? user.value !== 3 : true)}
+                onChange={val => handleChangeValue({ userType: val })}
+                optionInnerMaxHeight='300px'
+                className='full-select'
+              />
+            </FormControl>
+            <FormControl>
+              <label>{t('LOYALTY_LEVEL', 'Loyalty level')}</label>
+              {loyaltyLevelState?.loading ? (
+                <Skeleton height={54} />
+              ) : (
+                <DefaultSelect
+                  placeholder={t('SELECT_OPTION', 'Select a option')}
+                  defaultValue={filterValues?.loyaltyLevel}
+                  options={loyaltyLevels}
+                  onChange={val => handleChangeValue({ loyaltyLevel: val })}
+                  optionInnerMaxHeight='300px'
+                  className='full-select'
+                />
+              )}
+            </FormControl>
+          </FormGroup>
+        )}
+        {!isProfessionals && (
+          <FormGroup>
+            <FormControl>
+              <label>{t('SIGN_UP_DATE', 'Sign up date')}</label>
+              <DateTypeSelector
+                filterValues={filterValues}
+                handleChangeDateType={handleChangeDateType}
+                handleChangeFromDate={handleChangeFromDate}
+                handleChangeEndDate={handleChangeEndDate}
+              />
+            </FormControl>
+            {isCustomers && (
+              <FormControl>
+                <label>{t('LOYALTY_LEVEL', 'Loyalty level')}</label>
+                {loyaltyLevelState?.loading ? (
+                  <Skeleton height={54} />
+                ) : (
+                  <DefaultSelect
+                    placeholder={t('SELECT_OPTION', 'Select a option')}
+                    defaultValue={filterValues?.loyaltyLevel}
+                    options={loyaltyLevels}
+                    onChange={val => handleChangeValue({ loyaltyLevel: val })}
+                    optionInnerMaxHeight='300px'
+                    className='full-select'
+                  />
+                )}
+              </FormControl>
+            )}
+          </FormGroup>
+        )}
+        <ButtonGroup>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleAcceptFilter()}
+          >
+            {t('ACCEPT', 'Accept')}
+          </Button>
+          <Button
+            color='secundaryDark'
+            borderRadius='8px'
+            onClick={() => handleClearFilter()}
+          >
+            {t('CLEAR', 'Clear')}
+          </Button>
+        </ButtonGroup>
+      </Container>
+    </Modal>
+  )
+}
+
+export const UserFilterGroup = (props) => {
+  const userFilterGroupProps = {
+    ...props,
+    UIComponent: UserFilterGroupUI
+  }
+  return <UsersFilter {...userFilterGroupProps} />
+}

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

@@ -0,0 +1,116 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  > div {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 48%;
+    }
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 15px;
+  > label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  > input {
+    width: 100%;
+    height: 54px;
+  }
+
+  & > div:not(.range) {
+    width: 100%;
+    height: 54px;
+    background-color: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+    border-radius: 8px;
+  }
+
+  .full-select, .date-filter-container {
+    > div:first-child {
+      height: 100%;
+      border-radius: 8px;
+    }
+    .list {
+      left: 0px;
+      right: auto;
+    }
+  }
+`
+
+export const RangeSelectWrapper = styled.div`
+  display: flex;
+  height: 54px;
+  .select {
+    height: 100%;
+    > div:first-child {
+      width: 75px;
+      height: 100%;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      background-color: ${props => props.theme.colors.secundary};
+      font-size: 14px;
+      border-radius: 8px;
+    }
+    .list {
+      left: 0px;
+      right: auto;
+    }
+  }
+  input {
+    width: calc(100% - 65px);
+    margin-left: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0;
+      margin-right: 15px;
+    `}
+  }
+`
+
+export const Option = styled.div`
+  color: ${props => props.theme.colors.secundaryContrast};
+  font-size: 14px;
+  white-space: nowrap;
+`
+
+export const SwitchWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  label {
+    margin-bottom: 0px;
+    font-size: 14px;
+  }
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+
+  button {
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    &:last-child {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 20px;
+      ` : css`
+        margin-left: 20px;
+      `}
+    }
+  }
+`

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

@@ -144,7 +144,7 @@ const UserProfileFormUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, UsersExportCSV as UsersExportCSVController } from 'ordering-components-admin-external'
 import { Download as DownloadIcon } from 'react-bootstrap-icons'
-import { SpinnerLoader } from '../../Shared'
+import { SpinnerLoader, Alert } from '../../Shared'
 import { Button } from '../../../styles'
 import {
   ExportContainer
@@ -14,6 +14,7 @@ const UsersExportCSVUI = (props) => {
   } = props
   const [, t] = useLanguage()
   const [popoverOpen, setPopoverOpen] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   // const handleExportAll = () => {
   //   setPopoverOpen(false)
@@ -39,6 +40,14 @@ const UsersExportCSVUI = (props) => {
     return () => document.removeEventListener('click', closePopover)
   }, [popoverOpen])
 
+  useEffect(() => {
+    if (!actionStatus.result) return
+    setAlertState({
+      open: true,
+      content: actionStatus.result
+    })
+  }, [actionStatus.result])
+
   return (
     <>
       <ExportContainer>
@@ -66,6 +75,15 @@ const UsersExportCSVUI = (props) => {
           <SpinnerLoader primary />
         )}
       </ExportContainer>
+      <Alert
+        title={t('PROFILE', 'Profile')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
     </>
   )
 }

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

@@ -23,7 +23,8 @@ import {
   UsersBottomContainer,
   VerifiedItemsContainer,
   VerifiedItem,
-  AllCheckWrapper
+  AllCheckWrapper,
+  OrdersCountWrapper
 } from './styles'
 
 export const UsersList = (props) => {
@@ -37,7 +38,8 @@ export const UsersList = (props) => {
     handleSelectedUsers,
     handleOpenUserDetails,
     handleOpenUserAddForm,
-    setSelectedUsers
+    setSelectedUsers,
+    isCustomer
   } = props
 
   const [, t] = useLanguage()
@@ -206,6 +208,11 @@ export const UsersList = (props) => {
                           ) : (
                             <FaUserAlt />
                           )}
+                          {isCustomer && (
+                            <OrdersCountWrapper isNew={user?.orders_count === 0}>
+                              {user?.orders_count || t('NEW', 'New')}
+                            </OrdersCountWrapper>
+                          )}
                         </WrapperImage>
                         <InfoBlock>
                           <p className='bold'>{user.name} {user?.lastname}</p>

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

@@ -61,6 +61,7 @@ export const UsersTable = styled.table`
 `
 
 export const WrapperImage = styled.div`
+  position: relative;
   max-width: 45px;
   max-height: 45px;
   height: 45px;
@@ -200,7 +201,7 @@ export const WrapperPagination = styled.div`
 
 export const AddNewUserButton = styled.div`
   cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   width: fit-content;
   font-size: 14px;
 `
@@ -255,3 +256,29 @@ export const AllCheckWrapper = styled.div`
   display: flex;
   align-items: center;
 `
+
+export const OrdersCountWrapper = styled.div`
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  background-color: ${props => props.theme.colors.backgroundInfo};
+  color: ${props => props.theme.colors.primary};
+  font-weight: 400;
+  font-size: 9px;
+  line-height: 12px;
+  padding: 2px 5px;
+  position: absolute;
+  top: -9px;
+  right: -5px;
+  ${props => props.theme.rtl && css`
+    left: -5px;
+    right: initial;
+  `}
+
+  ${({ isNew }) => isNew && css`
+    background-color: ${props => props.theme.colors.lightGreen};
+    color: ${props => props.theme.colors.success};
+  `}
+`

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

@@ -43,7 +43,9 @@ const UsersListingUI = (props) => {
     handleSuccessUpdate,
     handleSuccessAddUser,
     handleSuccessDeleteUser,
-    setSelectedUsers
+    setSelectedUsers,
+    handleChangeMultiFilterValues,
+    multiFilterValues
   } = props
 
   const [, t] = useLanguage()
@@ -98,6 +100,9 @@ const UsersListingUI = (props) => {
           title={headerTitle}
           searchValue={searchValue}
           onSearch={onSearch}
+          handleChangeMultiFilterValues={handleChangeMultiFilterValues}
+          multiFilterValues={multiFilterValues}
+          isManagers
         />
         <UserActiveStateFilter
           selectedUserActiveState={selectedUserActiveState}
@@ -161,6 +166,7 @@ const UsersListingUI = (props) => {
           sidebarId='user_add_form'
           open={openUserAddForm}
           onClose={() => setOpenUserAddForm(false)}
+          showExpandIcon
         >
           <UserAddForm
             handleSuccessAdd={handleSuccessAddUser}