frst-components 0.20.0

package/src/components/LXP/headerContent/index.tsx

@@ -0,0 +1,121 @@
+import Button from '@components/buttons'
+import ProgressBar from '@components/LXP/progressBar'
+import { useEffect, useState } from 'react'
+import { FRSTTheme } from '../../../theme'
+import * as styledHeaderContent from './headerContent'
+import { ArrowScrollRight } from './../../../shared/icons'
+import { ThemeProvider } from 'styled-components'
+
+interface objPropiedades {
+  title?: string
+  description?: string
+  bgImg?: string
+  typeOfHeader?: 'inProgress' | 'recomendation'
+  progresso?: number
+  channel?: string
+  onClick?: () => void
+  labelButton?: string
+}
+interface HeaderContentParams {
+  textViewMore?: string
+  textViewLess?: string
+  autoplayTime?: number
+  listaRecomendacao: Array<objPropiedades>
+  style?: React.CSSProperties
+}
+
+export default function HeaderContent(props: HeaderContentParams) {
+  const [selectedContent, setSelectedContent] = useState(0)
+  const [zeroHeigthDescription, setzeroHeigthDescription] = useState(false)
+  const [textView, setTextView] = useState(props.textViewMore)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSelectedContent(selectedContent < (props.listaRecomendacao.length - 1) ? selectedContent + 1 : 0)
+      setzeroHeigthDescription(false)
+      setTextView(props.textViewMore)
+    }, props.autoplayTime ? props.autoplayTime : 10000)
+    return () => clearTimeout(timer)
+  }, [selectedContent])
+
+  function addHeigthDescription() {
+    if (zeroHeigthDescription) {
+      setzeroHeigthDescription(false)
+      setTextView(props.textViewMore)
+    } else if (!zeroHeigthDescription) {
+      setzeroHeigthDescription(true)
+      setTextView(props.textViewLess)
+    }
+  }
+
+  function RecomendationHeader(item) {
+    return (
+      <>
+        <styledHeaderContent.Title>{item.title}</styledHeaderContent.Title>
+        <styledHeaderContent.Description zeroHeigthDescription={zeroHeigthDescription}>
+          {item.description}
+        </styledHeaderContent.Description>
+        <styledHeaderContent.SpaceButtonTopViewMore
+          zeroHeigthDescription={zeroHeigthDescription}
+          onClick={addHeigthDescription}
+        >
+          <Button label={textView} variant="link" style={{ color: '#649AF3', fontWeight: '900' }} />
+          <ArrowScrollRight fill="#649AF3" width="13px" height="13px" strokeWidth={'4'} />
+        </styledHeaderContent.SpaceButtonTopViewMore>
+        <styledHeaderContent.SpaceButtonTop onClick={item.onClick}>
+          <Button label={item.labelButton} variant="primary" />
+        </styledHeaderContent.SpaceButtonTop>
+      </>
+    )
+  }
+
+  function InProgressHeader(item) {
+    return (
+      <>
+        <styledHeaderContent.Title>{item.title}</styledHeaderContent.Title>
+        <styledHeaderContent.Description zeroHeigthDescription={zeroHeigthDescription}>
+          {item.description}
+        </styledHeaderContent.Description>
+        <styledHeaderContent.SpaceButtonTopViewMore
+          zeroHeigthDescription={zeroHeigthDescription}
+          onClick={addHeigthDescription}
+        >
+          <Button label={textView} variant="link" style={{ color: '#649AF3', fontWeight: '900' }} />
+          <ArrowScrollRight fill="#649AF3" width="13px" height="13px" strokeWidth={'4'} />
+        </styledHeaderContent.SpaceButtonTopViewMore>
+        <styledHeaderContent.SpaceProgressAndButton>
+          <ProgressBar value={item.progresso} label={item.channel} style={{width: 200}}/>
+          <Button label={item.labelButton} variant="primary" handleClick={item.onClick}/>
+        </styledHeaderContent.SpaceProgressAndButton>
+      </>
+    )
+  }
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <styledHeaderContent.Container style={{...props.style}}>
+        {props.listaRecomendacao.map((item, index) => {
+          return (
+            <styledHeaderContent.HeaderImage key={index} img={item.bgImg} tmnDescription={item.description.length} onDisplay={index === selectedContent} style={{...props.style}}>
+              <>
+                {item.typeOfHeader === 'inProgress' ? (
+                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{InProgressHeader(item)}</styledHeaderContent.Content>
+                ) : (
+                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{RecomendationHeader(item)}</styledHeaderContent.Content>
+                )}
+              </>
+            </styledHeaderContent.HeaderImage>
+          )
+        })}
+        <styledHeaderContent.ListCounters>
+          {Array.from({ length : props.listaRecomendacao.length}).map((_,index) =>
+            <styledHeaderContent.Counters key={index} 
+              selected={index === selectedContent}
+              onClick={() => setSelectedContent(index)}   
+            />
+          )}
+        </styledHeaderContent.ListCounters>
+      </styledHeaderContent.Container>
+    </ThemeProvider>
+  )
+}

package/src/components/LXP/headerContent/selectedCountCircle.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+
+export default function SelectedCountCircle() {
+    return(
+        <>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8" cy="8" r="8" fill="#E0E0E0"/>
+                <svg x='3' y='3' width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="5" cy="5" r="5" fill="#FF4D0D"/>
+                </svg>
+            </svg>
+        </>
+    )
+}

package/src/components/LXP/login/index.tsx

@@ -0,0 +1,410 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './loginStyle'
+import { ILogin, ILoginTranslate } from './login'
+import * as Icons from '../../../shared/icons'
+import Button from '@components/buttons'
+import React, { useState, useEffect } from 'react'
+import TextField from '@components/form-elements/textfield'
+
+export default function Login(props: ILoginTranslate) {
+  const [email, setEmail] = useState('')
+  const [confirmEmail, setConfirmEmail] = useState('')
+  const [emailRecover, setEmailRecover] = useState('')
+  const [password, setPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [codigoNewPassword, setCodigoNewPassword] = useState('')
+  const [keepConnected, setKeepConnected] = useState(true)
+  const [step, setStep] = useState(1)
+  const [error, setError] = useState(props.isError)
+  const [colorError, setColorError] = useState(props.isError)
+  const [MsgInput1, setMsgInput1] = useState('')
+  const [MsgInput2, setMsgInput2] = useState('')
+
+  useEffect(() => {
+    setError(props.isError)
+  }, [props.isError])
+
+  const onClikLogin = () => {
+    setMsgInput1('')
+    setMsgInput2('')
+    setError(false)
+
+    if (email.length === 0) {
+      setMsgInput2(props.textErrorEmailNaoInformado ? props.textErrorEmailNaoInformado : 'E-mail não informado.')
+      setError(true)
+      return
+    }
+    if (password.length === 0) {
+      setMsgInput2(props.textErrorSenhaNaoInformado ? props.textErrorSenhaNaoInformado : 'Senha não Informada.')
+      setError(true)
+      return
+    }
+    if (props.isError) {
+      setMsgInput2(props.textErrorLoginPropsIsError ? props.textErrorLoginPropsIsError : 'E-mail ou senhas incorretos.')
+      setError(true)
+    }
+
+    props.handleClickLogin(email, password, keepConnected)
+  }
+
+  const onClickForgotPasswordChange = () => {
+    //const emailRegex = ('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
+    setMsgInput1('')
+    setMsgInput2('')
+    setError(false)
+
+    if (emailRecover.length === 0) {
+      setMsgInput2(props.textEmailErrorNaoPrenchido ? props.textEmailErrorNaoPrenchido : 'E-mail não preenchido.')
+      setError(true)
+      return
+    }
+    let regexEmail = /\S+@\S+.\S+/
+    if (!regexEmail.test(emailRecover)) {
+      setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.')
+      setError(true)
+      return
+    }
+    if (props.isError) {
+      setMsgInput2(
+        props.textEmailErrorPropsIsError
+          ? props.textEmailErrorPropsIsError
+          : 'Erro ao enviar email de recuperação de senha.'
+      )
+      setError(true)
+    }
+    props.handleClickForgotPassword(emailRecover)
+    setStep(3)
+  }
+
+  const onClickSave = () => {
+    setMsgInput1('')
+    setMsgInput2('')
+    setError(false)
+    setColorError(false)
+
+    if (confirmEmail.length === 0) {
+      setMsgInput2(
+        props.textNewPasswordErrorEmailNaoInformada
+          ? props.textNewPasswordErrorEmailNaoInformada
+          : 'Email não informado.'
+      )
+      setError(true)
+      return
+    }
+    let regexEmail = /\S+@\S+.\S+/
+    if (!regexEmail.test(confirmEmail)) {
+      setMsgInput2(props.textEmailErrorInvalido ? props.textEmailErrorInvalido : 'E-mail inválido.')
+      setError(true)
+      return
+    }
+    if (newPassword.length === 0) {
+      setMsgInput2(
+        props.textNewPasswordErrorNaoInformada ? props.textNewPasswordErrorNaoInformada : 'Nova senha não informada.'
+      )
+      setError(true)
+      return
+    }
+    if (codigoNewPassword.length === 0) {
+      setMsgInput2(props.textNewPasswordErrorCodigo ? props.textNewPasswordErrorCodigo : 'Código não informado.')
+      setError(true)
+      return
+    }
+    if (props.isError) {
+      setMsgInput2(
+        props.textNewPasswordErrorInforma ? props.textNewPasswordErrorInforma : 'Erro ao informar nova senha.'
+      )
+      setError(true)
+    }
+
+    let emailPrefix = confirmEmail.split('@')[0].split('.')[0]
+    let emailSufix = confirmEmail.split('@')[1].split('.')[0]
+
+    const validateEmailPrefix = new RegExp(emailPrefix, 'g')
+    const validateEmailSufix = new RegExp(emailSufix, 'g')
+    const validateUpperCase = new RegExp(/[A-Z]/, 'g')
+
+    if (
+      newPassword &&
+      (!newPassword.replace(/\D/g, '') ||
+        !newPassword.replace(/\d/g, '') ||
+        !newPassword.replace(/\w/g, '') ||
+        newPassword.match(/frst|falconi|FRST|FALCONI|Frst|Falconi/g) ||
+        newPassword.match(validateEmailPrefix) ||
+        newPassword.match(validateEmailSufix) ||
+        !newPassword.match(validateUpperCase) ||
+        newPassword.length < 8)
+    ) {
+      setColorError(true)
+      setError(true)
+      return
+    }
+
+    props.handleClickChangePassword(newPassword, codigoNewPassword, confirmEmail)
+  }
+
+  const handleClickCheckbox = () => {
+    setKeepConnected(!keepConnected)
+  }
+
+  const onClickForgotPassword = () => {
+    setError(false)
+    setEmailRecover('')
+    setStep(2)
+    setMsgInput2('')
+  }
+
+  const onClickNotCancel = () => {
+    setError(false)
+    setStep(1)
+    setMsgInput2('')
+  }
+
+  useEffect(() => {
+    setError(props.isError)
+    setMsgInput2(props.isError ? 'E-mail ou senhas incorretos.' : '')
+  }, [props.isError])
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      {props.variant === 'login' && step === 1 ? (
+        <Styles.Container>
+          <Styles.ContainerLogo>
+            <Icons.FRSTLogoBig />
+          </Styles.ContainerLogo>
+          <Styles.ContainerTypography>
+            <Styles.TypographyWelcome>
+              {props.textBoasVindas ? props.textBoasVindas : 'Bem-vindo'}
+            </Styles.TypographyWelcome>
+          </Styles.ContainerTypography>
+          <Styles.TypographyFill>
+            {props.textLoginInformacao ? props.textLoginInformacao : 'Para acessar, preencha os campos abaixo:'}
+          </Styles.TypographyFill>
+          <Styles.ContainerInputAndLink>
+            <Styles.ContainerIpuntAndIsIcon>
+              <Styles.ContainerEmail isError={error}>
+                <TextField
+                  error={error}
+                  helperText={MsgInput1}
+                  placeholder="Email"
+                  label="Email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  style={{ width: '100%' }}
+                />
+              </Styles.ContainerEmail>
+              {error && (
+                <Styles.IconAlert>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+            <Styles.ContainerButtonLink>
+              <Button
+                variant="link"
+                label={props.textoLabelLoginButtonLink ? props.textoLabelLoginButtonLink : 'Esqueceu a senha?'}
+                handleClick={onClickForgotPassword}
+              />
+            </Styles.ContainerButtonLink>
+            <Styles.ContainerIpuntAndIsIcon>
+              <Styles.ContainerPassword isError={error}>
+                <TextField
+                  helperText={MsgInput2}
+                  error={error}
+                  endIcon={<Icons.Viewer fill={error ? '#ff0000' : '#000000'} />}
+                  placeholder={props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha'}
+                  label={props.textInputLoginSenha ? props.textInputLoginSenha : 'Senha'}
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  style={{ width: '100%' }}
+                />
+              </Styles.ContainerPassword>
+              {error && (
+                <Styles.IconAlert style={{ paddingTop: '78px' }}>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+          </Styles.ContainerInputAndLink>
+          <Styles.ContainerConnect>
+            <Styles.ContainerCheckbox onClick={handleClickCheckbox}>
+              {keepConnected ? <Icons.CheckboxEmpty fill={'#ebeded'} /> : <Icons.CheckboxChecked />}
+              <Styles.TypographyConnect>
+                {props.textLoginConectado ? props.textLoginConectado : 'Manter-me conectado'}
+              </Styles.TypographyConnect>
+            </Styles.ContainerCheckbox>
+            <Button
+              variant="primary"
+              label={props.textLoginButton ? props.textLoginButton : 'Entrar'}
+              handleClick={onClikLogin}
+            />
+          </Styles.ContainerConnect>
+        </Styles.Container>
+      ) : props.variant === 'login' && step === 2 ? (
+        <Styles.ContainerRecover>
+          <Styles.ContainerLogoRecover>
+            <Icons.FRSTLogoBig />
+          </Styles.ContainerLogoRecover>
+          <Styles.ContainerEmailAndTypeRecoverRecover>
+            <Styles.ContainerTypographyRecover>
+              <Styles.TypographyRecover>
+                {props.textEmailCadastro
+                  ? props.textEmailCadastro
+                  : 'Digite seu e-mail de cadastro abaixo e clique em enviar.'}
+              </Styles.TypographyRecover>
+              <Styles.TypographyRecover>
+                {props.textEmailCadastro2
+                  ? props.textEmailCadastro2
+                  : 'Nós lhe enviaremos um e-mail com o link para recastrar sua senha.'}
+              </Styles.TypographyRecover>
+            </Styles.ContainerTypographyRecover>
+            <Styles.ContainerIpuntAndIsIcon>
+              <Styles.ContainerEmailRecover isError={error}>
+                <TextField
+                  error={error}
+                  helperText={MsgInput2}
+                  placeholder="Email"
+                  label="Email"
+                  type="email"
+                  value={emailRecover}
+                  onChange={(e) => setEmailRecover(e.target.value)}
+                  style={{ width: '100%' }}
+                />
+              </Styles.ContainerEmailRecover>
+              {error && (
+                <Styles.IconAlert isStep={step}>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+          </Styles.ContainerEmailAndTypeRecoverRecover>
+
+          <Styles.ContainerButtonRecover>
+            <Button
+              variant="link"
+              label={props.textEmailButtonLinkCancel ? props.textEmailButtonLinkCancel : 'Não, cancelar'}
+              handleClick={onClickNotCancel}
+            />
+            <Button
+              variant="primary"
+              label={props.textEmailButtonEnviar ? props.textEmailButtonEnviar : 'Enviar'}
+              handleClick={onClickForgotPasswordChange}
+            />
+          </Styles.ContainerButtonRecover>
+        </Styles.ContainerRecover>
+      ) : props.variant === 'newPassword' ? (
+        <Styles.Container>
+          <Styles.ContainerLogoRecover>
+            <Icons.FRSTLogoBig />
+          </Styles.ContainerLogoRecover>
+          <Styles.TypographyNewPassword>
+            {props.textNewPasswordInformacao
+              ? props.textNewPasswordInformacao
+              : 'Para criar uma nova senha, preencha os campos abaixo:'}
+          </Styles.TypographyNewPassword>
+          <Styles.ContainerPasswordNew isError={error}>
+            <Styles.ContainerIpuntAndIsIcon>
+              <TextField
+                error={error}
+                placeholder={
+                  props.textNewPasswordInputEmailPlaceholder
+                    ? props.textNewPasswordInputEmailPlaceholder
+                    : 'Por favor, insira seu e-mail aqui'
+                }
+                label={props.textNewPasswordInputEmail ? props.textNewPasswordInputEmail : 'Digite o email'}
+                type={'text'}
+                value={confirmEmail}
+                onChange={(e) => setConfirmEmail(e.target.value)}
+                style={{ width: '95%' }}
+              />
+              {error && (
+                <Styles.IconAlert>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+            <Styles.ContainerIpuntAndIsIcon>
+              <TextField
+                error={error}
+                endIcon={<Icons.Viewer fill={error ? '#ff0000' : '#000000'} />}
+                placeholder={props.textNewPasswordInput ? props.textNewPasswordInput : 'Insira sua nova senha'}
+                label={props.textNewPasswordInput ? props.textNewPasswordInput : 'Nova senha'}
+                type={'password'}
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                style={{ width: '95%' }}
+              />
+              {error && (
+                <Styles.IconAlert>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+
+            <Styles.ContainerIpuntAndIsIcon>
+              <TextField
+                helperText={MsgInput2}
+                error={error}
+                placeholder={
+                  props.textNewPasswordInputPlaceholderCodigo ? props.textNewPasswordInputPlaceholderCodigo : 'Código'
+                }
+                label={props.textNewPasswordInputCodigo ? props.textNewPasswordInputCodigo : 'Digite o Código'}
+                type={'text'}
+                value={codigoNewPassword}
+                onChange={(e) => setCodigoNewPassword(e.target.value)}
+                style={{ width: '95%' }}
+              />
+              {error && (
+                <Styles.IconAlert>
+                  <Icons.AlertCicle />
+                </Styles.IconAlert>
+              )}
+            </Styles.ContainerIpuntAndIsIcon>
+          </Styles.ContainerPasswordNew>
+
+          <Styles.ContainerTypographyNewPassword>
+            <Styles.TypographyNewPassword isColorError={colorError} style={{ fontSize: '14px' }}>
+              {props.textNewPasswordErrorSenhaForte
+                ? props.textNewPasswordErrorSenhaForte
+                : 'Use pelo menos 8 caracteres, 1 maiúscula, 1 minúscula, e um número ou caractere especial. Não use parte de seu e-mail (seunome@empresa.com) como senha.'}
+            </Styles.TypographyNewPassword>
+          </Styles.ContainerTypographyNewPassword>
+
+          <Styles.ContainerButtonRecover>
+            <Button
+              variant="link"
+              label={props.textNewPasswordButtonLink ? props.textNewPasswordButtonLink : 'Voltar Login'}
+              handleClick={props.handleClickChangePasswordCancel}
+            />
+            <Button
+              variant="primary"
+              label={props.textNewPasswordButtonSalvar ? props.textNewPasswordButtonSalvar : 'Salvar'}
+              handleClick={onClickSave}
+            />
+          </Styles.ContainerButtonRecover>
+        </Styles.Container>
+      ) : props.variant === 'login' && step === 3 ? (
+        <Styles.ContainerSendComfirmation>
+          <Styles.ContainerLogoRecover>
+            <Icons.FRSTLogoBig />
+          </Styles.ContainerLogoRecover>
+          <Styles.TypographyNewPassword>
+            {props.textConfirmacaoRespostaEmail
+              ? props.textConfirmacaoRespostaEmail
+              : 'Solicitação enviada com sucesso para o seu e-mail.'}
+          </Styles.TypographyNewPassword>
+          <Styles.ContainerButtonSendConfirmation>
+            <Button
+              variant="primary"
+              label={props.textConfirmacaoButtonRetorna ? props.textConfirmacaoButtonRetorna : 'Retornar'}
+              handleClick={props.onClickConfimationBackToLogin}
+            />
+          </Styles.ContainerButtonSendConfirmation>
+        </Styles.ContainerSendComfirmation>
+      ) : null}
+    </ThemeProvider>
+  )
+}

package/src/components/LXP/login/login.d.ts

@@ -0,0 +1,50 @@
+import React from 'react'
+
+type enumVariant = 'login' | 'newPassword'
+
+export interface ILogin {
+  variant?: enumVariant
+  style?: React.CSSProperties
+  isError?: boolean
+  handleClickLogin?: (email, password, keepConnected) => void
+  handleClickForgotPassword?: (email) => void
+  onClickConfimationBackToLogin?: () => void
+  handleClickChangePassword?: (newPassword, codigoNewPassword, confirmEmail) => void
+  handleClickChangePasswordCancel?: () => void
+}
+
+export interface ILoginTranslate extends ILogin {
+  textBoasVindas?: string
+  textLoginInformacao?: string
+  textoLabelLoginButtonLink?: string
+  textInputLoginSenha?: string
+  textLoginConectado?: string
+  textLoginButton?: string
+  textErrorEmailNaoInformado?: string
+  textErrorSenhaNaoInformado?: string
+  textErrorLoginPropsIsError?: string
+  textEmailCadastro?: string
+  textEmailCadastro2?: string
+  textEmailButtonLinkCancel?: string
+  textEmailButtonEnviar?: string
+  textEmailErrorNaoPrenchido?: string
+  textEmailErrorInvalido?: string
+  textEmailErrorPropsIsError?: string
+  textConfirmacaoRespostaEmail?: string
+  textConfirmacaoButtonRetorna?: string
+  textNewPasswordInformacao?: string
+  textNewPasswordInput?: string
+  textNewPasswordButtonLink?: string
+  textNewPasswordButtonSalvar?: string
+  textNewPasswordErrorNaoInformada?: string
+  textNewPasswordErrorSenhaForte?: string
+  textNewPasswordErrorCorfirma?: string
+  textNewPasswordErrorIguais?: string
+  textNewPasswordErrorInforma?: string
+  textNewPasswordInputCodigo?: string
+  textNewPasswordInputPlaceholderCodigo?: string
+  textNewPasswordErrorCodigo?: string
+  textNewPasswordInputEmailPlaceholder?: string
+  textNewPasswordInputEmail?: string
+  textNewPasswordErrorEmailNaoInformada?: string
+}