ordering-ui-external 10.0.1 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Shared/ConfirmAdmin/index.js

@@ -1,55 +1,203 @@
 import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import parsePhoneNumber from 'libphonenumber-js'
 import {
   useLanguage,
-  CheckPassword as CheckPasswordController
+  CheckPassword as CheckPasswordController,
+  useSession
 } from 'ordering-components-external'
 import { Modal } from '../Modal'
-import { Button } from '../../../styles'
+import { Button, Input } from '../../../styles'
+import { Alert } from '../Confirm'
+import { useCountdownTimer } from '../../../../../../hooks/useCountdownTimer'
+import { formatSeconds } from '../../../../../../utils'
 
 import {
   WrapperCheckPassword,
-  ErrorText
+  FormController,
+  Tabs,
+  Tab,
+  CountdownTimer,
+  OtpWrapper,
+  ResendCode
 } from './styles'
+import { InputPhoneNumber } from '../InputPhoneNumber'
+import OtpInput from 'react-otp-input'
 
 const ConfirmAdminUI = (props) => {
   const {
     checkPasswordStatus,
-    handleChangePassword,
     getCheckPassword,
-
     open,
     onClose,
-    onConfirm
+    onConfirm,
+
+    confirmTab,
+    otpType,
+    setOtpType,
+    handleChangeTab,
+    setOtpState,
+    otpState,
+    generateOtpCode,
+
+    checkCodeState,
+    handleChangeInput,
+    handleChangeCredentials
   } = props
 
   const [, t] = useLanguage()
-  const { handleSubmit } = useForm()
+  const [{ user }] = useSession()
+  const { handleSubmit, register, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [userPhoneNumber, setUserPhoneNumber] = useState(null)
+  const [isValidPhoneNumber, setIsValidPhoneNumber] = useState('')
+
+  const numOtpInputs = confirmTab === 'otp' ? 6 : 4
+  const otpPlaceholder = [...Array(numOtpInputs)].fill(0).join('')
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(600, !checkCodeState?.loading && willVerifyOtpState)
+  const isOtpEmail = confirmTab === 'otp' && otpType === 'email'
+  const isOptCellphone = confirmTab === 'otp' && otpType === 'cellphone'
+
+  const handleChangeOtpType = (type) => {
+    setWillVerifyOtpState(false)
+    handleChangeTab('otp')
+    setOtpType(type)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+    setOtpState('')
+  }
+
+  const handleChangePhoneNumber = (number, isValid) => {
+    setUserPhoneNumber(number)
+    let phoneNumberParser = null
+    let values = { country_phone_code: '', cellphone: '' }
 
-  const [password, setPassword] = useState('')
+    if (isValid) {
+      phoneNumberParser = parsePhoneNumber(number)
+    }
+    if (phoneNumberParser) {
+      values = {
+        country_phone_code: phoneNumberParser.countryCallingCode,
+        cellphone: phoneNumberParser.nationalNumber
+      }
+    }
+    handleChangeCredentials(values)
+  }
 
-  const handlePassword = (e) => {
-    setPassword(e.target.value)
+  const handleSendOtp = () => {
+    if (willVerifyOtpState) {
+      setOtpState('')
+      resetOtpLeftTime()
+      if (confirmTab === 'otp') {
+        generateOtpCode()
+        setWillVerifyOtpState(true)
+      }
+    }
   }
 
   const onSubmit = () => {
-    getCheckPassword()
+    if (confirmTab === 'otp' && otpType === 'cellphone') {
+      const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
+      if (!userPhoneNumber) {
+        setAlertState({
+          open: true,
+          content: [t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.')]
+        })
+        return
+      }
+      if (!isPhoneNumberValid && userPhoneNumber) {
+        setAlertState({
+          open: true,
+          content: [t('PHONE_NUMBER_IS_NOT_VALID', 'Phone number is not valid')]
+        })
+        return
+      }
+    }
+    if (confirmTab === 'password') {
+      getCheckPassword()
+    }
+    if (confirmTab === 'otp') {
+      generateOtpCode()
+      setWillVerifyOtpState(true)
+    }
   }
 
   useEffect(() => {
-    handleChangePassword(password)
-  }, [password])
+    if (otpState?.length === numOtpInputs) {
+      if (confirmTab === 'otp') {
+        onConfirm(otpState)
+      }
+    }
+  }, [otpState])
 
   useEffect(() => {
-    if (checkPasswordStatus.loading || checkPasswordStatus.error !== null) return
+    if (checkPasswordStatus.error) {
+      setAlertState({
+        open: true,
+        content: checkPasswordStatus.error
+      })
+      return
+    }
     if (checkPasswordStatus.result === 'OK') {
       onConfirm()
     }
-  }, [checkPasswordStatus])
+  }, [checkPasswordStatus.error, checkPasswordStatus.result])
 
   useEffect(() => {
-    setPassword('')
-  }, [open])
+    if (checkCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: checkCodeState?.result?.error || [t('ERROR', 'Error')]
+      })
+    } else if (checkCodeState?.result?.result) {
+      setAlertState({
+        open: true,
+        content: t('CODE_SENT', 'The code has been sent')
+      })
+      resetOtpLeftTime()
+    }
+  }, [checkCodeState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map((error) => error.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    const _credentials = {}
+    if (user) {
+      if (user?.cellphone) {
+        let phone = null
+        if (user?.cellphone && user?.country_phone_code) {
+          phone = `+${user?.country_phone_code} ${user?.cellphone}`
+          _credentials.country_phone_code = user.country_phone_code
+          _credentials.cellphone = user.cellphone
+        } else if (user?.country_phone_code) {
+          phone = `+${user?.country_phone_code} ${user?.cellphone}`
+          _credentials.country_phone_code = user.country_phone_code
+          _credentials.cellphone = user?.cellphone
+        } else {
+          phone = user?.cellphone
+          _credentials.cellphone = user?.cellphone
+        }
+        setUserPhoneNumber(phone)
+      }
+      if (user?.email) {
+        _credentials.email = user?.email
+      }
+      handleChangeCredentials(_credentials)
+    }
+  }, [user])
 
   return (
     <Modal
@@ -61,28 +209,147 @@ const ConfirmAdminUI = (props) => {
         onSubmit={handleSubmit(onSubmit)}
       >
         <h3>{t('CONFIRM_PASSWORD', 'Confirm password')}</h3>
-        <p>{t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}</p>
-        <input
-          autoComplete='off'
-          type='password'
-          value={password}
-          placeholder={t('PASSWORD', 'password')}
-          onChange={(e) => handlePassword(e)}
-        />
-        {checkPasswordStatus?.error && (
-          <ErrorText
-            className='text-danger'
+        <Tabs>
+          <Tab
+            active={confirmTab === 'password'}
+            onClick={() => {
+              setWillVerifyOtpState(false)
+              handleChangeTab('password')
+            }}
+          >
+            {t('BY_PASSWORD', 'by Password')}
+          </Tab>
+          <Tab
+            active={isOtpEmail}
+            onClick={() => handleChangeOtpType('email')}
+          >
+            {t('BY_OTP_EMAIL', 'by Otp Email')}
+          </Tab>
+          <Tab
+            active={isOptCellphone}
+            onClick={() => handleChangeOtpType('cellphone')}
           >
-            {checkPasswordStatus.error}
-          </ErrorText>
+            {t('BY_OTP_PHONE', 'by Otp Phone')}
+          </Tab>
+        </Tabs>
+        {confirmTab === 'password' && (
+          <FormController>
+            <Input
+              type='password'
+              name='password'
+              placeholder={t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Password is required'
+                ).replace('_attribute_', t('PASSWORD', 'Password'))
+              })}
+              onChange={(e) => handleChangeInput(e)}
+              autoComplete='off'
+              autoCapitalize='off'
+            />
+          </FormController>
         )}
-        <Button
-          color='primary'
-          borderRadius='7.6px'
-        >
-          {checkPasswordStatus.loading ? t('LOADING', 'Loading') : t('CONFIRM', 'Confirm')}
-        </Button>
+        {!willVerifyOtpState && confirmTab === 'otp' && otpType === 'email' && (
+          <FormController>
+            <Input
+              type='email'
+              name='email'
+              placeholder={t('EMAIL', 'Email')}
+              defaultValue={user?.email}
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Email is required'
+                ).replace('_attribute_', t('EMAIL', 'Email')),
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t(
+                    'VALIDATION_ERROR_EMAIL',
+                    'Invalid email address'
+                  ).replace('_attribute_', t('EMAIL', 'Email'))
+                }
+              })}
+              onChange={(e) => handleChangeInput(e)}
+              autoComplete='off'
+              autoCapitalize='off'
+            />
+          </FormController>
+        )}
+        {!willVerifyOtpState && confirmTab === 'otp' && otpType === 'cellphone' && (
+          <FormController>
+            <InputPhoneNumber
+              isUser
+              user={user}
+              value={userPhoneNumber}
+              setValue={handleChangePhoneNumber}
+              handleIsValid={setIsValidPhoneNumber}
+            />
+          </FormController>
+        )}
+        {(!willVerifyOtpState &&
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={checkPasswordStatus.loading}
+          >
+            {checkPasswordStatus.loading
+              ? t('LOADING', 'Loading')
+              : confirmTab === 'otp'
+                ? t('GET_VERIFY_CODE', 'Get verify code')
+                : t('CONFIRM', 'Confirm')}
+          </Button>
+        )}
+        {willVerifyOtpState && !checkCodeState?.loading && (
+          <>
+            <CountdownTimer>
+              <span>{formatSeconds(otpLeftTime)}</span>
+            </CountdownTimer>
+
+            <OtpWrapper>
+              <OtpInput
+                value={otpState}
+                onChange={otp => setOtpState(otp)}
+                numInputs={numOtpInputs}
+                containerStyle='otp-container'
+                inputStyle='otp-input'
+                placeholder={otpPlaceholder}
+                isInputNum
+                shouldAutoFocus
+                isDisabled={otpLeftTime === 0}
+              />
+            </OtpWrapper>
+            <ResendCode
+              disabled={otpLeftTime > 520}
+              onClick={handleSendOtp}
+            >
+              {t('RESEND_AGAIN', 'Resend again')}?
+            </ResendCode>
+            <Button
+              borderRadius='8px'
+              type='button'
+              color='primary'
+              onClick={() => {
+                setWillVerifyOtpState(false)
+              }}
+            >
+              {t('CANCEL', 'Cancel')}
+            </Button>
+          </>
+        )}
+
       </WrapperCheckPassword>
+
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
     </Modal>
   )
 }

package/src/themes/callcenterOriginal/src/components/Shared/ConfirmAdmin/styles.js

@@ -1,6 +1,9 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
 
 export const WrapperCheckPassword = styled.form`
+  display: flex;
+  flex-direction: column;
   padding: 10px;
   color: ${props => props.theme.colors?.headingColor};
 
@@ -10,31 +13,104 @@ export const WrapperCheckPassword = styled.form`
     font-weight: 600;
   }
 
-  p {
-    margin-top: 25px;
+  button {
+    margin-top: 40px;
+    width: 100%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  label {
     margin-bottom: 10px;
+    font-size: 14px;
   }
 
-  input {
-    outline: none;
+  .PhoneInputInput {
+    height: 43px;
+    border-radius: 8px !important;
+  }
+  .PhoneInputCountry {
+    height: 43px;
+    padding: 8px;
     border-radius: 8px;
-    font-size: 16px;
-    border: 1px solid rgba(20, 20, 20, 0.2);
-    width: 100%;
-    padding: 10px 15px;
-    &:focus {
-      border: 1px solid ${props => props.theme.colors.primary};
+    background-color: ${props => props.theme.colors.backgroundPage};
+    * {
+      padding: 0px;
     }
   }
+`
+export const Tabs = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin: 30px 0 15px 0;
+`
 
-  button {
-    margin-top: 40px;
-    width: 150px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+export const Tab = styled.div`
+  padding: 10px 0;
+  font-size: 14px;
+  cursor: pointer;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 15px;
+  ` : css`
+    margin-right: 15px;
+  `}
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.headingColor};
+    border-bottom: 1px solid;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`
+export const CountdownTimer = styled.div`
+  margin: 15px;
+  display: flex;
+  justify-content: center;
+  
+  span {
+    font-size: 30px;
+    font-weight: 700;
+  }
+`
+export const OtpWrapper = styled.div`
+  width: 100%;
+  .otp-container{
+    display: flex;
+    justify-content: space-evenly;
+    margin: 20px;
+    
+    .otp-input{
+      width: 50px !important;
+      height: 45px;
+      border-radius: 8px;
+      background-color: ${props => props.theme.colors.backgroundPage};
+      outline: none;
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      font-size: 20px;
+      font-weight: bold; 
+
+      &:focus{
+        border-color: ${() => darken(0.07, '#CCC')} !important;
+      }
+
+      &::placeholder,
+      &::-webkit-input-placeholder {
+        color: #DBDCDB;
+      }
+      &:-ms-input-placeholder {
+        color: #DBDCDB;
+      }
+    }
   }
 `
-export const ErrorText = styled.div`
-  text-align: center;
-  margin: 10px 0;
+export const ResendCode = styled.span`
+  color: ${props => props.disabled ? props.theme.colors.disabled : props.theme.colors.primary};
+  font-size: 20px;
+  align-self: center;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 `

package/src/themes/callcenterOriginal/src/components/Shared/HtmlEditor/InsertImage/index.js

@@ -0,0 +1,172 @@
+import React, { useState, useRef, useEffect } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import {
+  useLanguage,
+  DragAndDrop,
+  ExamineClick
+} from 'ordering-components-external'
+import { Button, Input } from '../../../../styles'
+import { XLg } from 'react-bootstrap-icons'
+import BiImage from '@meronex/icons/bi/BiImage'
+import { bytesConverter } from '../../../../../../../utils'
+import { Alert, Confirm } from '../../../Shared'
+
+import {
+  InsertImageContainer,
+  ImageListContainer,
+  WrapperImage,
+  WrapperInput,
+  NewImage,
+  Image,
+  SkeletonWrapper,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  CloseButton
+} from './styles'
+
+export const InsertImage = (props) => {
+  const {
+    imageListState,
+    editorContext,
+    onClose,
+    handleRestoreEditor,
+    insertImageState,
+    handleInsertImage,
+    handleDeleteImage,
+    selectedImageUrl,
+    setSelectedImageUrl
+  } = props
+  const [, t] = useLanguage()
+  const [imageUrl, setImageUrl] = useState(null)
+  const imageInputRef = useRef(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const handleInsertClick = () => {
+    handleRestoreEditor()
+    editorContext.invoke('editor.insertImage', imageUrl)
+    onClose()
+  }
+
+  const handleClickImage = (type) => {
+    imageInputRef.current.click()
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+
+      setConfirm({
+        open: true,
+        content: t('QUESTION_ADD_GALLERY_IMAGE', 'Are you sure that you want to add this gallery image?'),
+        handleOnAccept: () => {
+          setConfirm({ ...confirm, open: false })
+          handleInsertImage(files[0])
+        }
+      })
+    }
+  }
+
+  const onDeleteClick = (imageId) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_GALLERY_ITEM', 'Are you sure that you want to delete this image?'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteImage(imageId)
+      }
+    })
+  }
+
+  useEffect(() => {
+    setImageUrl(selectedImageUrl)
+  }, [selectedImageUrl])
+
+  return (
+    <InsertImageContainer>
+      <h1>{t('INSERT_IMAGE', 'Insert image')}</h1>
+      <WrapperInput>
+        <label>{t('IMAGE_URL', 'Image URL')}</label>
+        <Input
+          value={imageUrl || ''}
+          onChange={e => setImageUrl(e.target.value)}
+        />
+      </WrapperInput>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        onClick={() => handleInsertClick()}
+      >
+        {t('INSERT', 'Insert')}
+      </Button>
+      <NewImage>
+        <Image onClick={() => handleClickImage()} isImage={insertImageState?.change?.soucre}>
+          <ExamineClick onFiles={handleFiles} childRef={(e) => { imageInputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={insertImageState.loading}>
+            <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={insertImageState.loading}>
+              {
+                insertImageState.loading
+                  ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
+                  : insertImageState?.change?.soucre && <img src={insertImageState?.change?.soucre} alt='image' loading='lazy' />
+              }
+              <UploadImageIconContainer>
+                <UploadImageIcon>
+                  <BiImage />
+                  <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
+                </UploadImageIcon>
+              </UploadImageIconContainer>
+            </DragAndDrop>
+          </ExamineClick>
+        </Image>
+      </NewImage>
+      <ImageListContainer>
+        {imageListState.images.map(image => (
+          <WrapperImage
+            key={image.id}
+            onClick={() => setSelectedImageUrl(image?.source)}
+          >
+            <CloseButton
+              onClick={() => onDeleteClick(image.id)}
+            >
+              <XLg />
+            </CloseButton>
+            <img src={image?.source} alt='' />
+          </WrapperImage>
+        ))}
+      </ImageListContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'ORDERING')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </InsertImageContainer>
+  )
+}