ordering-ui-admin-external 1.13.3 → 1.14.0

package/src/components/Delivery/DriversGroupsList/index.js

@@ -192,7 +192,7 @@ export const DriversGroupsList = (props) => {
                     <td>
                       <DriverManagerContainer>
                         <WrapperImage>
-                          {group?.photo ? (
+                          {group?.administrator?.photo ? (
                             <Image bgimage={group?.administrator?.photo} />
                           ) : (
                             <FaUserAlt />
@@ -232,11 +232,13 @@ export const DriversGroupsList = (props) => {
         </TableWrapper>
         {!driversGroupsState.loading && (
           <PagesBottomContainer>
-            <AddNewGroupButton
-              onClick={() => handleOpenDetails(null)}
-            >
-              {t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}
-            </AddNewGroupButton>
+            {!isFromStore && (
+              <AddNewGroupButton
+                onClick={() => handleOpenDetails(null)}
+              >
+                {t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}
+              </AddNewGroupButton>
+            )}
             {currentGroups?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

package/src/components/Delivery/DriversGroupsList/styles.js

@@ -221,5 +221,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewGroupButton = styled.div`
   cursor: pointer;
   font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

package/src/components/Delivery/UserAddForm/index.js

@@ -385,7 +385,7 @@ const UserAddFormUI = (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/Delivery/UserDetails/index.js

@@ -10,8 +10,8 @@ import { UserDetailsMenu } from '../UserDetailsMenu'
 import { UserProfileForm } from '../UserProfileForm'
 import { UserMetaFields } from '../../Users'
 import { DriverGroupSetting } from '../DriverGroupSetting'
-import { ThreeDots } from 'react-bootstrap-icons'
-import { Switch, Button } from '../../../styles'
+import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
+import { Switch, Button, IconButton } from '../../../styles'
 import { ActionsForm } from '../UserFormDetails/styles'
 import {
   UserName,
@@ -19,8 +19,10 @@ import {
   ScheduleSection,
   PersonalizationWrapper,
   DetailsHeader,
-  ActionSelectorWrapper
+  ActionSelectorWrapper,
+  RightHeader
 } from './styles'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 export const UserDetailsUI = (props) => {
   const {
@@ -38,9 +40,19 @@ export const UserDetailsUI = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
   const [currentMenuSelected, setCurrentMenuSelected] = useState('profile')
   const [isCustomField, setIsCustomField] = useState(false)
   const [isPersonalization, setIsPersonalization] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
+
+  const expandSidebar = () => {
+    const element = document.getElementById('user_lateral_bar')
+    if (!element) return
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
 
   useEffect(() => {
     setExtraOpen(false)
@@ -68,25 +80,35 @@ export const UserDetailsUI = (props) => {
             </>
           )}
         </UserName>
-        {userState.user?.id && (
-          <ActionSelectorWrapper>
-            <DropdownButton
-              menuAlign={theme?.rtl ? 'left' : 'right'}
-              title={<ThreeDots />}
-              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+        <RightHeader>
+          {width > 576 && (
+            <IconButton
+              color='black'
+              onClick={expandSidebar}
             >
-              <Dropdown.Item onClick={() => setIsCustomField(true)}>
-                {t('CUSTOM_FIELDS', 'Custom fields')}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => setIsPersonalization(true)}>
-                {t('PERSONALIZATION', 'Personalization')}
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => handleDeleteUser(userState.user?.id)}>
-                {t('DELETE', 'Delete')}
-              </Dropdown.Item>
-            </DropdownButton>
-          </ActionSelectorWrapper>
-        )}
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+          {userState.user?.id && (
+            <ActionSelectorWrapper>
+              <DropdownButton
+                menuAlign={theme?.rtl ? 'left' : 'right'}
+                title={<ThreeDots />}
+                id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+              >
+                <Dropdown.Item onClick={() => setIsCustomField(true)}>
+                  {t('CUSTOM_FIELDS', 'Custom fields')}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={() => setIsPersonalization(true)}>
+                  {t('PERSONALIZATION', 'Personalization')}
+                </Dropdown.Item>
+                <Dropdown.Item onClick={() => handleDeleteUser(userState.user?.id)}>
+                  {t('DELETE', 'Delete')}
+                </Dropdown.Item>
+              </DropdownButton>
+            </ActionSelectorWrapper>
+          )}
+        </RightHeader>
       </DetailsHeader>
 
       <UserDetailsMenu

package/src/components/Delivery/UserDetails/styles.js

@@ -82,9 +82,9 @@ export const PersonalizationWrapper = styled.div`
 
 export const ActionSelectorWrapper = styled.div`
   ${props => props.theme?.rtl ? css`
-    margin-left: 35px;
+    margin-left: 25px;
   ` : css`
-    margin-right: 35px;
+    margin-right: 25px;
   `}
   button {
     background: transparent !important;
@@ -138,7 +138,13 @@ export const ActionSelectorWrapper = styled.div`
     }
   }
 `
+
 export const ScheduleSection = styled.div`
   margin-top: 30px;
   overflow: auto;
 `
+
+export const RightHeader = styled.div`
+  display: flex;
+  align-items: center;
+`

package/src/components/Delivery/UserDetailsLateralBar/styles.js

@@ -63,7 +63,6 @@ export const LateralBarContainer = styled.div`
 `
 
 export const WrapUserDetails = styled.div`
-  max-width: 500px;
   height: 100%;
   padding: 35px 20px;
   position: relative;

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

@@ -149,7 +149,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/Delivery/UsersList/styles.js

@@ -211,7 +211,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;
 `

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { ConfigFileContext } from '../../../contexts/ConfigFileContext'
 import { useForm } from 'react-hook-form'
+import parsePhoneNumber from 'libphonenumber-js'
 import {
   LoginForm as LoginFormController,
   ReCaptcha,
@@ -9,14 +10,14 @@ import {
   useConfig
 } from 'ordering-components-admin-external'
 import { useCountdownTimer } from '../../../hooks/useCountdownTimer'
-import { Alert } from '../../Shared'
+import { Alert, InputPhoneNumber } from '../../Shared'
 import BsArrowRightShort from '@meronex/icons/bs/BsArrowRightShort'
 import MdExitToApp from '@meronex/icons/md/MdExitToApp'
 import { Button, Input } from '../../../styles'
 import { useTheme } from 'styled-components'
 import HiOutlineMail from '@meronex/icons/hi/HiOutlineMail'
 import RiLockPasswordLine from '@meronex/icons/ri/RiLockPasswordLine'
-import { Eye, EyeSlash } from 'react-bootstrap-icons'
+import { Eye, EyeSlash, Phone } from 'react-bootstrap-icons'
 import OtpInput from 'react-otp-input'
 import { formatSeconds } from '../../../utils'
 
@@ -36,12 +37,14 @@ import {
   Tab,
   CountdownTimer,
   OtpWrapper,
-  ResendCode
+  ResendCode,
+  PhoneNumberWrapper
 } from './styles'
 
 const LoginFormUI = (props) => {
   const {
     useLoginOtpEmail,
+    useLoginOptCellphone,
     useLoginByCellphone,
     handleChangeInput,
     handleButtonLoginClick,
@@ -59,7 +62,10 @@ const LoginFormUI = (props) => {
     handleChangeTab,
     generateOtpCode,
     otpState,
-    setOtpState
+    setOtpState,
+    useLoginByEmail,
+    handleChangeCredentials,
+    credentials
   } = props
   const [, t] = useLanguage()
   const [ordering] = useApi()
@@ -81,8 +87,16 @@ const LoginFormUI = (props) => {
     600, !checkPhoneCodeState?.loading && willVerifyOtpState)
 
   const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+  const isOptCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
   const onSubmit = () => {
+    if (useLoginOptCellphone && loginTab === 'otp' && otpType === 'cellphone' && !credentials?.country_phone_code && !credentials?.cellphone) {
+      setAlertState({
+        open: true,
+        content: [t('PHONE_NUMBER_IS_NOT_VALID', 'Phone number is not valid')]
+      })
+      return
+    }
     setSubmitted(true)
   }
 
@@ -112,6 +126,22 @@ const LoginFormUI = (props) => {
     }
   }
 
+  const handleChangePhoneNumber = (number, isValid) => {
+    let phoneNumberParser = null
+    let values = { country_phone_code: '', cellphone: '' }
+
+    if (isValid) {
+      phoneNumberParser = parsePhoneNumber(number)
+    }
+    if (phoneNumberParser) {
+      values = {
+        country_phone_code: phoneNumberParser.countryCallingCode,
+        cellphone: phoneNumberParser.nationalNumber
+      }
+    }
+    handleChangeCredentials(values)
+  }
+
   useEffect(() => {
     if (ordering.project === null || !submitted) return
     if (loginTab === 'otp') {
@@ -229,21 +259,41 @@ const LoginFormUI = (props) => {
           </p>
         </TitleFormSide>
 
-        {(ordering?.project && useLoginOtpEmail) && !loginWithOtpState && !willVerifyOtpState && (
+        {ordering?.project && (
           <LoginWith>
             <Tabs>
-              <Tab
-                onClick={() => handleChangeTab('email')}
-                active={loginTab === 'email'}
-              >
-                {t('LOGIN_WITH_EMAIL', 'Login with Email')}
-              </Tab>
-              <Tab
-                onClick={() => handleChangeOtpType('email')}
-                active={isOtpEmail}
-              >
-                {t('BY_OTP_EMAIL', 'by Otp Email')}
-              </Tab>
+              {useLoginByEmail && (
+                <Tab
+                  onClick={() => handleChangeTab('email')}
+                  active={loginTab === 'email'}
+                >
+                  {t('LOGIN_WITH_EMAIL', 'Login with Email')}
+                </Tab>
+              )}
+              {useLoginOtpEmail && (
+                <Tab
+                  onClick={() => handleChangeOtpType('email')}
+                  active={isOtpEmail}
+                >
+                  {t('BY_OTP_EMAIL', 'by Otp Email')}
+                </Tab>
+              )}
+              {useLoginOptCellphone && (
+                <Tab
+                  onClick={() => handleChangeOtpType('cellphone')}
+                  active={isOptCellphone}
+                >
+                  {t('BY_OTP_PHONE', 'by Otp Phone')}
+                </Tab>
+              )}
+              {useLoginByCellphone && (
+                <Tab
+                  onClick={() => handleChangeTab('cellphone')}
+                  active={loginTab === 'cellphone'}
+                >
+                  {t('LOGIN_WITH_PHONE', 'Login with phone')}
+                </Tab>
+              )}
             </Tabs>
           </LoginWith>
         )}
@@ -274,7 +324,7 @@ const LoginFormUI = (props) => {
             </InputWithIcon>
           )}
 
-          {!willVerifyOtpState && (
+          {!willVerifyOtpState && ((loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
             <InputWithIcon>
               <Input
                 type='email'
@@ -302,20 +352,30 @@ const LoginFormUI = (props) => {
             </InputWithIcon>
           )}
           {useLoginByCellphone && loginTab === 'cellphone' && !willVerifyOtpState && (
-            <Input
-              type='tel'
-              name='cellphone'
-              aria-label='cellphone'
-              placeholder='Cellphone'
-              ref={register({
-                required: t(
-                  'VALIDATION_ERROR_REQUIRED',
-                  'Cellphone is required'
-                ).replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-              })}
-              onChange={(e) => handleChangeInput(e)}
-              autoComplete='off'
-            />
+            <InputWithIcon>
+              <Input
+                type='tel'
+                name='cellphone'
+                aria-label='cellphone'
+                placeholder='Cellphone'
+                ref={register({
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'Cellphone is required'
+                  ).replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+                })}
+                onChange={(e) => handleChangeInput(e)}
+                autoComplete='off'
+              />
+              <Phone />
+            </InputWithIcon>
+          )}
+          {!willVerifyOtpState && useLoginOptCellphone && loginTab === 'otp' && otpType === 'cellphone' && (
+            <PhoneNumberWrapper>
+              <InputPhoneNumber
+                setValue={handleChangePhoneNumber}
+              />
+            </PhoneNumberWrapper>
           )}
 
           {loginTab !== 'otp' && !willVerifyOtpState && (

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

@@ -256,6 +256,22 @@ export const InputWithIcon = styled.div`
   }
 `
 
+export const PhoneNumberWrapper = styled.div`
+  margin-bottom: 20px;
+  .PhoneInputInput {
+    height: 47px;
+    border-radius: 8px !important;
+  }
+  .PhoneInputCountry {
+    padding: 8px;
+    border-radius: 8px;
+    background-color: ${props => props.theme.colors.backgroundPage};
+    * {
+      padding: 0px;
+    }
+  }
+`
+
 export const WrapperPassword = styled.div`
   position: relative;
   display: flex;