ordering-ui-admin-external 1.19.3 → 1.20.0

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

@@ -1,55 +1,163 @@
 import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import parsePhoneNumber from 'libphonenumber-js'
+import OtpInput from 'react-otp-input'
 import {
   useLanguage,
   CheckPassword as CheckPasswordController
 } from 'ordering-components-admin-external'
 import { Modal } from '../Modal'
-import { Button } from '../../../styles'
+import { Alert } from '../Confirm'
+import { InputPhoneNumber } from '../InputPhoneNumber'
+import { Button, Input } from '../../../styles'
+import { useCountdownTimer } from '../../../hooks/useCountdownTimer'
+import { formatSeconds } from '../../../utils'
 
 import {
   WrapperCheckPassword,
-  ErrorText
+  FormController,
+  Tabs,
+  Tab,
+  CountdownTimer,
+  OtpWrapper,
+  ResendCode
 } from './styles'
 
 const ConfirmAdminUI = (props) => {
   const {
     checkPasswordStatus,
-    handleChangePassword,
     getCheckPassword,
-
     open,
     onClose,
-    onConfirm
+    onConfirm,
+
+    confirmTab,
+    otpType,
+    setOtpType,
+    handleChangeTab,
+    setOtpState,
+    otpState,
+    generateOtpCode,
+
+    checkCodeState,
+    credentials,
+    handleChangeInput,
+    handleChangeCredentials
   } = props
 
   const [, t] = useLanguage()
-  const { handleSubmit } = useForm()
+  const { handleSubmit, register, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+
+  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 [password, setPassword] = useState('')
+  const handleChangePhoneNumber = (number, isValid) => {
+    let phoneNumberParser = null
+    let values = { country_phone_code: '', cellphone: '' }
 
-  const handlePassword = (e) => {
-    setPassword(e.target.value)
+    if (isValid) {
+      phoneNumberParser = parsePhoneNumber(number)
+    }
+    if (phoneNumberParser) {
+      values = {
+        country_phone_code: phoneNumberParser.countryCallingCode,
+        cellphone: phoneNumberParser.nationalNumber
+      }
+    }
+    handleChangeCredentials(values)
+  }
+
+  const handleSendOtp = () => {
+    if (willVerifyOtpState) {
+      setOtpState('')
+      resetOtpLeftTime()
+      if (confirmTab === 'otp') {
+        generateOtpCode()
+        setWillVerifyOtpState(true)
+      }
+    }
   }
 
   const onSubmit = () => {
-    getCheckPassword()
+    if (confirmTab === '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
+    }
+    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(() => {
+    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(() => {
-    setPassword('')
-  }, [open])
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map((error) => error.message)
+      })
+    }
+  }, [errors])
 
   return (
     <Modal
@@ -61,28 +169,142 @@ 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')}
+              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
+              setValue={handleChangePhoneNumber}
+            />
+          </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/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/components/Shared/ImageCrop/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Cropper from 'cropperjs'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useApi, useLanguage, useSession, useUtils } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { ArrowClockwise } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
@@ -19,14 +19,20 @@ export const ImageCrop = (props) => {
     photo,
     handleChangePhoto,
     onClose,
-    aspectRatio
+    aspectRatio,
+    showAspectRatioBox,
+    useCloudinaryUrl,
+    themeId
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
-
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [{ optimizeImage }] = useUtils()
   const [cropper, setCropper] = useState()
   const [zoomValue, setZoomValue] = useState(50)
+  const [loading, setLoading] = useState(false)
   const cropperRef = useRef(null)
 
   const handleChangeZoom = (evt) => {
@@ -35,9 +41,31 @@ export const ImageCrop = (props) => {
     setZoomValue(value)
   }
 
-  const getCropData = () => {
+  const getCropData = async () => {
     if (typeof cropper !== 'undefined') {
-      handleChangePhoto(cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL())
+      let photo
+      if (useCloudinaryUrl && themeId) {
+        console.log('entra')
+        setLoading(true)
+        const response = await fetch(`${ordering.root}/themes/${themeId}/gallery`, {
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+          method: 'POST',
+          body: JSON.stringify({
+            type: 'image',
+            file: cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL()
+          })
+        })
+        const { result, error } = await response.json()
+        setLoading(false)
+        if (!error) {
+          photo = optimizeImage(result.image, 'f_auto,q_auto,w_2000,c_limit')
+        } else {
+          return
+        }
+      } else {
+        photo = cropper.getCroppedCanvas({ imageSmoothingQuality: 'high' }).toDataURL()
+      }
+      handleChangePhoto(photo)
       onClose && onClose()
     }
   }
@@ -99,6 +127,7 @@ export const ImageCrop = (props) => {
           borderRadius='7.6px'
           color='primary'
           onClick={getCropData}
+          disabled={loading}
         >
           {t('CROP', 'Crop')}
         </Button>

package/src/components/SidebarMenu/index.js

@@ -86,13 +86,13 @@ const SidebarMenuUI = (props) => {
       title: t('APPOINTMENTS', 'Appointments'),
       pageName: 'appointments',
       url: '/appointments'
+    },
+    {
+      id: 5,
+      title: t('GIFT_CARD_MANAGER', 'Gift card manager'),
+      pageName: 'giftCards',
+      url: '/gift-cards'
     }
-    // {
-    //   id: 5,
-    //   title: t('GIFT_CARD_MANAGER', 'Gift card manager'),
-    //   pageName: 'giftCards',
-    //   url: '/gift-cards'
-    // }
   ]
 
   const loyaltySubMenus = [
@@ -350,12 +350,12 @@ const SidebarMenuUI = (props) => {
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
     },
-    // {
-    //   id: 2,
-    //   title: t('CAMPAIGN', 'Campaign'),
-    //   pageName: 'campaign',
-    //   url: '/marketing/campaign'
-    // },
+    {
+      id: 2,
+      title: t('CAMPAIGN', 'Campaign'),
+      pageName: 'campaign',
+      url: '/marketing/campaign'
+    },
     {
       id: 3,
       title: t('AD_BANNERS', 'Ad banners'),
@@ -843,7 +843,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   </Accordion>
                 )}
-                {/* {sessionState?.user?.level === 0 && (
+                {sessionState?.user?.level === 0 && (
                   <Button
                     className='d-flex align-items-center'
                     variant={location.pathname === '/ordering-products' && 'primary'}
@@ -852,7 +852,7 @@ const SidebarMenuUI = (props) => {
                     <WindowDock />
                     <span>{t('ORDERING_PRODUCTS', 'Ordering products')}</span>
                   </Button>
-                )} */}
+                )}
                 {sessionState?.user?.level === 0 && (
                   <Button
                     className='d-flex align-items-center'