ordering-ui-admin-external 1.5.1 → 1.6.0

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

@@ -0,0 +1,283 @@
+import React, { useRef, useEffect, useState, useContext } from 'react'
+import { ConfigFileContext } from '../../../contexts/ConfigFileContext'
+
+import { useForm } from 'react-hook-form'
+import RiLockPasswordLine from '@meronex/icons/ri/RiLockPasswordLine'
+import MdExitToApp from '@meronex/icons/md/MdExitToApp'
+
+import { Alert } from '../../Shared'
+
+import {
+  useLanguage,
+  ResetPassword as ResetPasswordController
+} from 'ordering-components-admin-external'
+
+import {
+  ResetPasswordContainer,
+  FormSide,
+  FormInput,
+  TitleFormSide,
+  HeroContainer,
+  InputWithIcon,
+  RedirectLink
+} from './styles'
+
+import { Input } from '../../../styles/Inputs'
+import { Button } from '../../../styles/Buttons'
+import { useTheme } from 'styled-components'
+
+const ResetPasswordUI = (props) => {
+  const {
+    code,
+    random,
+    project,
+    formState,
+    resetPasswordData,
+    handleResetPassword,
+    handleChangeInput,
+    redirectResetPassword,
+    onPasswordReset,
+    isSuccessfulReset,
+    elementLinkToLogin
+  } = props
+
+  const { handleSubmit, register, errors, watch, reset } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [configFile, setConfigFile] = useContext(ConfigFileContext)
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const password = useRef({})
+
+  password.current = watch('password', '')
+
+  const onSubmit = () => {
+    if (code && random) {
+      handleResetPassword()
+    } else {
+      redirectResetPassword && redirectResetPassword(resetPasswordData)
+      reset({ project: '', password: '' });
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  let timeout = null
+  const handleChangeProject = (e) => {
+    e.persist()
+    clearTimeout(timeout)
+    timeout = setTimeout(function () {
+      setConfigFile({ ...configFile, project: e.target.value })
+    }, 750)
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    } else if (!formState.loading && formState.result?.result?.length) {
+      setAlertState({
+        open: true,
+        content: formState.result?.result === 'OK' ? t('PASSWORD_RESET_SUCCESS', 'Password changed successfully') : t(formState.result?.result, 'Password changed successfully')
+      })
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (project) {
+      setConfigFile({ ...configFile, project: project })
+    }
+    return () => closeAlert()
+  }, [])
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <ResetPasswordContainer>
+        <HeroContainer bgimage={theme.images?.general?.loginHero}>
+          <img src={theme?.images?.logos?.logotypeInvert} alt='Logo login' />
+        </HeroContainer>
+        {code && random ? (
+          <FormSide>
+            <TitleFormSide>
+              <h1>{t('TITLE_RESET_PASSWORD', 'Reset password')}</h1>
+              <p>{t('SUBTITLE_RESET_PASSWORD', 'Reset your password')}</p>
+            </TitleFormSide>
+            <FormInput
+              noValidate
+              onSubmit={handleSubmit(onSubmit)}
+            >
+              { !project && (
+                <InputWithIcon>
+                  <Input
+                    type='text'
+                    name='project'
+                    aria-label='project'
+                    spellcheck='false'
+                    ref={register({
+                      required: t(
+                        'VALIDATION_ERROR_REQUIRED',
+                        'Project is required'
+                      ).replace('_attribute_', t('PROJECT', 'Project')),
+                      minLength: {
+                        message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
+                      }
+                    })}
+                    placeholder={t('PROJECT', 'Project')}
+                    onChange={(e) => handleChangeProject(e)}
+                    autoComplete="new-password"
+                    autoCapitalize='off'
+                  />
+                  <MdExitToApp />
+                </InputWithIcon>
+              )}
+              <InputWithIcon>
+                <Input
+                  type='password'
+                  name='password'
+                  aria-label='password'
+                  spellcheck='false'
+                  ref={register({
+                    required: t('VALIDATION_ERROR_PASSWORD_REQUIRED', 'The field password is required'),
+                    minLength: {
+                      value: 8,
+                      message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
+                    }
+                  })}
+                  placeholder={t('NEW_PASSWORD', 'New passowrd')}
+                  onChange={handleChangeInput}
+                  autoComplete="new-password"
+                />
+                <RiLockPasswordLine />
+              </InputWithIcon>
+              <InputWithIcon>
+                <Input
+                  type='password'
+                  name='confirm-password'
+                  aria-label='confirm-password'
+                  spellcheck='false'
+                  ref={register({
+                    required: t('VALIDATION_ERROR_PASSWORD_CONFIRM_REQUIRED', 'The field password confirm is required'),
+                    validate: value =>
+                      value === password.current || t('VALIDATION_ERROR_PASSWORDS_MATCH', 'The passwords do not match')
+                  })}
+                  placeholder={t('CONFIRM_PASSWORD', 'Confirm Password')}
+                  onChange={handleChangeInput}
+                  autoComplete="new-password"
+                />
+                <RiLockPasswordLine />
+              </InputWithIcon>
+              <Button
+                type='submit'
+                color={(formState.loading) ? 'secondary' : 'primary'}
+                disabled={(formState.loading)}
+              >
+                {!formState.loading ? t('CHANGE_PASSWORD', 'Change password') : t('LOADING', 'Loading')}
+              </Button>
+              {elementLinkToLogin && (
+                <RedirectLink register>
+                  <span>{t('SIGN_IN_MESSAGE', 'Do you want to sign in?')}</span>
+                  {elementLinkToLogin}
+                </RedirectLink>
+              )}
+            </FormInput>
+          </FormSide>
+        ) : (
+          <FormSide>
+            <TitleFormSide>
+              <h1>{t('TITLE_RESET_PASSWORD', 'Reset password')}</h1>
+              <p>{t('RESET_PASSWORD_CODES_TITLE', 'Please insert the codes')}</p>
+            </TitleFormSide>
+            <FormInput
+              noValidate
+              onSubmit={handleSubmit(onSubmit)}
+            >
+              {!code && (
+                <InputWithIcon>
+                  <Input
+                    name='code'
+                    aria-label='code'
+                    ref={register({
+                      required: t('RESET_PASSWORD_CODE_REQUIRED', 'The field code is required')
+                    })}
+                    placeholder={t('CODE', 'Code')}
+                    onChange={handleChangeInput}
+                    autoComplete='off'
+                  />
+                  <MdExitToApp />
+                </InputWithIcon>
+              )}
+              {!random && (
+                <InputWithIcon>
+                  <Input
+                    name='random'
+                    aria-label='random'
+                    ref={register({
+                      required: t('RESET_PASSWORD_RANDOM_REQUIRED', 'The field random is required')
+                    })}
+                    placeholder={t('RAMDON', 'Random')}
+                    onChange={handleChangeInput}
+                    autoComplete='off'
+                  />
+                  <MdExitToApp />
+                </InputWithIcon>
+              )}
+              <Button
+                type='submit'
+                color='primary'
+              >
+                {t('SUBMIT_CODES', 'Submit codes')}
+              </Button>
+            </FormInput>
+          </FormSide>
+        )}
+        <Alert
+          title={t('RESET_PASSWORD', 'Reset Password')}
+          content={alertState?.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => isSuccessfulReset ? onPasswordReset() : closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </ResetPasswordContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const ResetPassword = (props) => {
+  const resetPasswordProps = {
+    ...props,
+    UIComponent: ResetPasswordUI
+  }
+
+  return <ResetPasswordController {...resetPasswordProps} />
+}

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

@@ -0,0 +1,215 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const ResetPasswordContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: ${({ isPopup }) => isPopup ? '500px' : '100vh'};
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+`
+const Side = styled.div`
+  display: flex;
+  width: 100%;
+`
+export const HeroSide = styled(Side)`
+  display: none;
+
+  ${({ bgimage }) => bgimage && css`
+    background-repeat: no-repeat, repeat;
+    background-size: cover;
+    object-fit: cover;
+    background-position: center;
+  `}
+
+  @media (min-width: 992px) {
+    width: 50%;
+    text-align:  center;
+    display: block;
+    img {
+      width: 35%;
+      margin-top: 10%;
+      margin-left: -80px;
+    }
+  }
+`
+
+export const HeroContainer = (props) => {
+  const style = {}
+  style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${props.bgimage})`
+
+  return (
+    <HeroSide {...props} style={style}>
+      {props.children}
+    </HeroSide>
+  )
+}
+
+export const TitleFormSide = styled.div`
+  color: #fff;
+
+  h1 {
+    text-transform: uppercase;
+    font-size: 24px;
+    margin: 0px;
+  }
+
+  p {
+    font-size: 12px;
+    margin-top: 0px;
+    margin-bottom: 40px;
+  }
+
+  @media (min-width: 425px) {
+    h1 {
+      font-size: 24px;
+    }
+    p {
+      font-size: 16px;
+    }
+  }
+
+  @media (min-width: 769px) {
+    h1 {
+      font-size: 32px;
+    }
+    p {
+      font-size: 16px;
+      margin-bottom: 60px;
+    }
+  }  
+`
+
+export const FormSide = styled(Side)`
+  flex-direction: column;
+  justify-content: center;
+  background-color: #1C202E;
+  padding: 0 8%;
+  box-sizing: border-box;
+  height: 100vh;
+
+  @media (min-width: 769px) {
+    height: auto;
+  }
+
+  @media (min-width: 992px) {
+    margin-left: -80px;
+    border-radius: 54px 0px 0px 54px;
+    width: calc(50% + 80px);
+  }
+`
+
+export const FormInput = styled.form`
+  width: ${({ isPopup }) => isPopup ? '90%' : '100%'};
+  display: flex;
+  flex-direction: column;
+
+  * {
+    padding: 8px 0px;
+  }
+
+  input:not(:last-child) {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding-left: 60px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  button {
+    position: relative;
+    margin-top: 40px;
+    padding: 9px 5px;
+
+    svg {
+      position: absolute;
+      right: 35px;
+      top: 8px;
+      font-size: 24px;
+    }
+  }
+`
+export const InputWithIcon = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  input {
+    width: 100%;
+  }
+
+  img {
+    position: absolute;
+    width: 20px;
+    padding: 0px;
+    margin: 0 20px;
+  }
+
+  svg {
+    position: absolute;
+    font-size: 24px;
+    color: #707070;
+    padding: 0px;
+    margin: 0 20px;
+  }
+`
+export const RedirectLink = styled.div`
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 10px;
+  font-size: 17px;
+
+  span {
+    color: #FFF;
+    margin-right: 5px;
+
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `}
+  }
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    text-decoration: none;
+  }
+
+  * {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  ${({ register }) => register && css`
+    width: calc(90% - 20px);
+
+    @media (min-width: 481px) {
+      width: ${({ isPopup }) => isPopup ? 'calc(90% - 20px)' : 'calc(80% - 20px)'};
+    }
+  `}
+
+  @media (min-width: 425px) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 768px) {
+    font-size: 14px;
+  }
+
+  @media (min-width: 992px) {
+    font-size: ${({ isPopup }) => isPopup ? '13px' : '18px'};
+    flex-direction: row;
+  }
+
+  @media (min-width: 1200px) {
+    ${({ isPopup }) => isPopup && css`
+      font-size: 16px;
+    `};
+  }
+`

package/src/components/Login/index.js

@@ -1,9 +1,11 @@
 import { ForgotPasswordForm } from './ForgotPasswordForm'
 import { LoginForm } from './LoginForm'
 import { QueryLogin } from './QueryLogin'
+import { ResetPassword } from './ResetPassword'
 
 export {
   ForgotPasswordForm,
   LoginForm,
-  QueryLogin
+  QueryLogin,
+  ResetPassword
 }

package/src/components/Marketing/CampaignDetail/index.js

@@ -127,7 +127,6 @@ const CampaignDetailUI = (props) => {
         closeOnBackdrop={false}
       />
     </>
-
   )
 }
 

package/src/components/Marketing/CampaignDetailContent/index.js

@@ -7,6 +7,7 @@ import { CampaignWhatsapp } from '../CampaignWhatsapp'
 import { CampaignNotification } from '../CampaignNotification'
 import { CampaignPopup } from '../CampaignPopup'
 import { CampaignWebHook } from '../CampaignWebHook'
+import { Alert } from '../../Shared'
 
 import {
   Container,
@@ -17,12 +18,14 @@ import {
 const CampaignDetailContentUI = (props) => {
   const {
     handleChangeType,
-    contactState
+    contactState,
+    isAddMode
   } = props
 
   const [, t] = useLanguage()
   const [typeOptions, setTypeOptions] = useState(null)
   const [contactTypeSearchVal, setContactTypeSearchVal] = useState('')
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
 
   const typeList = [
     { value: 'email', content: <Option>{t('EMAIL', 'Email')}</Option> },
@@ -33,36 +36,63 @@ const CampaignDetailContentUI = (props) => {
     // { value: 'whatsapp', content: <Option>{t('WHATSAPP', 'Whatsapp')}</Option> }
   ]
 
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
   useEffect(() => {
     const options = typeList.filter(option => option?.value.toLocaleLowerCase().includes(contactTypeSearchVal.toLocaleLowerCase()))
     setTypeOptions(options)
   }, [contactTypeSearchVal])
 
+  useEffect(() => {
+    if (!contactState?.error || contactState.loading) return
+    setAlertState({
+      open: true,
+      content: contactState?.error
+    })
+  }, [contactState?.error])
+
   return (
-    <Container>
-      <SelectWrapper>
-        <label>{t('CONTACT_TYPE', 'Contact type')}</label>
-        <Select
-          options={typeOptions}
-          className='select'
-          defaultValue={contactState?.changes?.contact_type || ''}
-          placeholder={t('SELECT_OPTION', 'Select an option')}
-          onChange={(value) => handleChangeType('contact_type', value)}
-          isShowSearchBar
-          searchBarIsCustomLayout
-          searchBarIsNotLazyLoad
-          searchValue={contactTypeSearchVal}
-          handleChangeSearch={(val) => setContactTypeSearchVal(val)}
-        />
-      </SelectWrapper>
+    <>
+      <Container>
+        <SelectWrapper>
+          <label>{t('CONTACT_TYPE', 'Contact type')}</label>
+          <Select
+            options={typeOptions}
+            className='select'
+            defaultValue={contactState?.changes?.contact_type || ''}
+            placeholder={t('SELECT_OPTION', 'Select an option')}
+            onChange={(value) => handleChangeType('contact_type', value)}
+            // isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            isDisabled={!isAddMode}
+            searchValue={contactTypeSearchVal}
+            handleChangeSearch={(val) => setContactTypeSearchVal(val)}
+          />
+        </SelectWrapper>
 
-      {contactState?.changes?.contact_type === 'email' && <CampaignEmail {...props} />}
-      {contactState?.changes?.contact_type === 'sms' && <CampaignSMS {...props} />}
-      {contactState?.changes?.contact_type === 'whatsapp' && <CampaignWhatsapp {...props} />}
-      {contactState?.changes?.contact_type === 'notification' && <CampaignNotification {...props} />}
-      {contactState?.changes?.contact_type === 'popup' && <CampaignPopup {...props} />}
-      {contactState?.changes?.contact_type === 'webhook' && <CampaignWebHook {...props} />}
-    </Container>
+        {contactState?.changes?.contact_type === 'email' && <CampaignEmail {...props} />}
+        {contactState?.changes?.contact_type === 'sms' && <CampaignSMS {...props} />}
+        {contactState?.changes?.contact_type === 'whatsapp' && <CampaignWhatsapp {...props} />}
+        {contactState?.changes?.contact_type === 'notification' && <CampaignNotification {...props} />}
+        {contactState?.changes?.contact_type === 'popup' && <CampaignPopup {...props} />}
+        {contactState?.changes?.contact_type === 'webhook' && <CampaignWebHook {...props} />}
+      </Container>
+      <Alert
+        title={t('CAMPAIGN', 'Campaign')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
   )
 }
 

package/src/components/Marketing/CampaignDetailGeneral/index.js

@@ -283,7 +283,7 @@ export const CampaignDetailGeneral = (props) => {
           {!audienceState?.loading && !audienceState?.error && (
             <p>
               <span>{t('REACHING', 'Reaching')}: </span>
-              {audienceState?.audience} {t('PEOPLE', 'People')}
+              {audienceState?.pagination?.total || 0} {t('PEOPLE', 'People')}
             </p>
           )}
           <CheckBoxListWrapper>