react-icons/fi#FiArrowRight JavaScript Examples

StepFive = ({ activeStep }) => {
	return (
		<>
			<S.FinishWrapper>
				<S.FinishContainer>
					<S.LogoWrapper>
						<Image
							src="/logo.svg"
							alt="Plataforma Sabiá"
							width={165}
							height={48}
							layout="responsive"
						/>
					</S.LogoWrapper>

					<S.FinishTitle>{activeStep.title}</S.FinishTitle>
					<S.FinishSubtitle>{activeStep.subtitle}</S.FinishSubtitle>

					<Link href="/" passHref>
						<RectangularButton as="a" variant="round" colorVariant="green">
							Ir para a página principal
							<FiArrowRight fontSize="2rem" />
						</RectangularButton>
					</Link>
				</S.FinishContainer>
			</S.FinishWrapper>

			<S.Actions>
				<Link href="/" passHref>
					<RectangularButton as="a" variant="round" colorVariant="orange">
						Finalizar
					</RectangularButton>
				</Link>
			</S.Actions>
		</>
	);
}

StepOne = ({ activeStep, setNextStep, updateUserData }) => {
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [error, setError] = useState('');
	const form = useForm();
	const router = useRouter();
	const { requestPasswordReset } = useAuth();

	const handleSubmit = async ({ email }) => {
		setIsSubmitting(true);
		setError('');

		const response = await requestPasswordReset({ email });

		if (response.error) {
			setError(response.error.message?.[0]?.message || response.error.message);
			setIsSubmitting(false);
			return;
		}

		updateUserData({ email });
		setNextStep();
	};

	return (
		<S.Wrapper>
			<S.Form onSubmit={form.handleSubmit(handleSubmit)}>
				<S.StepTitle>{activeStep.title}</S.StepTitle>
				<S.StepSubtitle>{activeStep.subtitle}</S.StepSubtitle>

				{!!error && <Error message={error} />}

				<S.InputsWrapper>
					<InputField
						form={form}
						validation={{ required: true }}
						name="email"
						label="E-mail"
						placeholder="Digite o seu e-mail"
						variant="lightRounded"
					/>
				</S.InputsWrapper>

				<S.Actions>
					<RectangularButton
						colorVariant="green"
						variant="round"
						type="submit"
						disabled={isSubmitting}
						fullWidth
					>
						{isSubmitting ? (
							'Aguarde...'
						) : (
							<>
								Enviar e-mail
								<FiArrowRight fontSize="2rem" />
							</>
						)}
					</RectangularButton>
					<RectangularButton
						colorVariant="blue"
						onClick={() => router.push(internalPages.signIn)}
						fullWidth
					>
						<FiCornerUpLeft fontSize="2rem" />
						<span>Voltar para a tela de login</span>
					</RectangularButton>
				</S.Actions>
			</S.Form>
		</S.Wrapper>
	);
}

RenderCard = data => {
  const cate = data.data.fields.CATEGORIA
  const subcat =
    cate === 'Cuidados, ayuda y bienestar'
      ? data.data.fields.SUBCATEGORIA_CUIDADOS
      : cate === 'Educación a distancia y recursos educativos'
      ? data.data.fields.SUBCATEGORIA_EDUCACION
      : cate === 'Información Oficial'
      ? data.data.fields.SUBCATEGORIA_OFICIAL
      : cate === 'Información verificada'
      ? data.data.fields.SUBCATEGORIA_VERIFICADO
      : cate === 'Ocio y recreación durante la cuarentena'
      ? data.data.fields.SUBCATEGORIA_OCIO
      : data.data.fields.SUBCATEGORIA_OPORTUNIDADES
  return (
    <Container className="cardContainer">
      {data.data.fields.VERIFICADA === true ? (
        <Card style={{ width: '20rem', height: 'auto' }}>
          <Card.Img
            style={{ width: '100%', position: 'relative', overflow: 'hidden' }}
            variant="top"
            src={data.data.fields.IMAGEN[0].url}
          />
          <Card.Body>
            <Card.Title style={{ fontWeight: 'bold' }}>{data.data.fields.TITULO}</Card.Title>
            <div className="catContainer">
              <div
                style={{
                  backgroundColor:
                    cate === 'Información verificada'
                      ? '#74BCEB'
                      : cate === 'Información Oficial'
                      ? '#5C92D2'
                      : cate === 'Cuidados, ayuda y bienestar'
                      ? '#CB82EB'
                      : cate === 'Ocio y recreación durante la cuarentena'
                      ? '#56B69C'
                      : cate === 'Oportunidades y recomendaciones laborales'
                      ? '#7ACA9C'
                      : '#ED794A',
                }}
                className="categories"
              >
                {data.data.fields.CATEGORIA}...
              </div>
              {cate === 'Cuidados, ayuda y bienestar' ? (
                <div className="subCategories" style={{ backgroundColor: '#CB82EB' }}>
                  {data.data.fields.SUBCATEGORIA_CUIDADOS}...
                </div>
              ) : cate === 'Educación a distancia y recursos educativos' ? (
                <div className="subCategories" style={{ backgroundColor: '#ED794A' }}>
                  {data.data.fields.SUBCATEGORIA_EDUCACION}...
                </div>
              ) : cate === 'Información Oficial' ? (
                <div className="subCategories" style={{ backgroundColor: '#5C92D2' }}>
                  {data.data.fields.SUBCATEGORIA_OFICIAL}...
                </div>
              ) : cate === 'Información verificada' ? (
                <div className="subCategories" style={{ backgroundColor: '#74BCEB' }}>
                  {data.data.fields.SUBCATEGORIA_VERIFICADO}...
                </div>
              ) : cate === 'Ocio y recreación durante la cuarentena' ? (
                <div className="subCategories" style={{ backgroundColor: '#56B69C' }}>
                  {data.data.fields.SUBCATEGORIA_OCIO}...
                </div>
              ) : (
                <div className="subCategories" style={{ backgroundColor: '#7ACA9C' }}>
                  {data.data.fields.SUBCATEGORIA_OPORTUNIDADES}...
                </div>
              )}
            </div>
            <Card.Text className="description">{data.data.fields.DESCRIPCION}</Card.Text>
            <Link
              to="/colaboraDetails"
              state={{
                data: {
                  nombre: data.data.fields.TITULO,
                  descripcion: data.data.fields.DESCRIPCION,
                  categoria: data.data.fields.CATEGORIA,
                  subcategoria: subcat,
                  url: data.data.fields.IMAGEN[0].url,
                  autor: data.data.fields.AUTOR,
                  web: data.data.fields.URL,
                },
              }}
            >
              <div className="btnContainer">
                <img style={{ height: '30px', margin: 'auto', marginRight: '5px' }} src={heart} />
                <Button
                  style={{ backgroundColor: '#FB4747', borderColor: '#FB4747', borderRadius: '60px' }}
                  variant="primary"
                >
                  <FiArrowRight style={{ margin: 'auto' }} size="1.5em" />
                </Button>
              </div>
            </Link>
          </Card.Body>
        </Card>
      ) : null}
    </Container>
  )
}

StepFour = ({ activeStep, setNextStep, userData }) => {
	const [isFetching, setIsFetching] = useState(false);
	const form = useForm({
		defaultValues: {
			fullName: '',
			phone: '',
			state: '',
			city: '',
		},
	});
	const { t } = useTranslation(['account']);
	const stateRef = useRef(null);
	stateRef.current = form.watch('state');

	const { data: brazilStates = [] } = useSWR('get-brazil-states', () => getStates(), {
		revalidateOnFocus: false,
	});

	const { data: brazilStateCities = [] } = useSWR(
		stateRef.current
			? `get-brazil-state-city-${stateRef.current.value || stateRef.current}`
			: null,
		() => getStateCities(stateRef.current.value || stateRef.current, { perPage: 10 }),
		{
			revalidateOnFocus: false,
		},
	);

	const handleSubmit = async (values) => {
		setIsFetching(true);
		setCookie('token', userData.token);
		const data = mapValuesToApi(values);
		const response = await updateUser(userData.id, data);

		if (!response || response.error) {
			const errorMessage =
				typeof response.error.message === 'string'
					? response.error.message
					: response.error.message?.[0]?.message;

			toast.error(
				errorMessage ||
					'Ocorreu um erro ao atualizar suas informações. Tente novamente em instantes...',
			);
			return;
		}

		setNextStep();
	};

	return (
		<Form onSubmit={form.handleSubmit(handleSubmit)}>
			<StepTitle>{activeStep.title}</StepTitle>
			<StepSubtitle>{activeStep.subtitle}</StepSubtitle>

			<InputsWrapper>
				<InputField
					name="fullName"
					form={form}
					label="Nome"
					placeholder="Digite seu nome completo"
					variant="lightRounded"
					validation={{ required: true }}
				/>

				<MaskedInputField
					form={form}
					name="phone"
					alwaysShowMask={false}
					label="Telefone"
					placeholder="Digite seu telefone"
					validation={{ required: true }}
					mask={maskPatterns.phoneNumber.stringMask}
					pattern={maskPatterns.phoneNumber.pattern}
					formatChars={maskPatterns.phoneNumber.formatChars}
					variant="lightRounded"
				/>

				<SelectField
					form={form}
					name="state"
					label={t('account:labels.state')}
					validation={{ required: true }}
					variant="lightRounded"
					options={mapArrayOfObjectToSelect(brazilStates, 'initials', 'id')}
					instanceId="select-state-register"
					placeholder="Selecione o estado..."
					callback={() => {
						form.setValue('city_id', null);
					}}
				/>

				<SelectField
					form={form}
					name="city"
					label={t('account:labels.city')}
					placeholder={
						!stateRef.current
							? 'Selecione o estado primeiro...'
							: 'Selecione a cidade...'
					}
					variant="lightRounded"
					options={mapArrayOfObjectToSelect(brazilStateCities, 'name', 'id')}
					noOptionsMessage={() => 'Nenhuma cidade encontrada...'}
					instanceId="select-city-register"
					validation={{ required: true }}
				/>
			</InputsWrapper>

			<Actions>
				<RectangularButton
					variant="round"
					colorVariant="green"
					type="submit"
					disabled={isFetching}
				>
					Finalizar
					<FiArrowRight fontSize="2rem" />
				</RectangularButton>
			</Actions>
		</Form>
	);
}

StepThree = ({ activeStep, setNextStep, userData, updateUserData }) => {
	const verificationCodeRef = useRef();
	const [isFetching, setIsFetching] = useState(false);
	const form = useForm({
		defaultValues: { email: '', verificationCode: Array(6).fill('') },
		reValidateMode: 'onSubmit',
	});
	const verificationCode = useWatch({
		control: form.control,
		name: 'verificationCode',
	});
	const { t } = useTranslation(['error']);
	const router = useRouter();
	const shouldShowEmailField = router.pathname === internalPages.confirm_account;

	useEffect(() => {
		if (shouldShowEmailField) {
			form.setFocus('email');
			return;
		}

		if (verificationCodeRef.current) {
			verificationCodeRef.current.focus();
		}

		// We only want this to run when component is mounted
		// react-hook-form funcs is already memoized
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const handleSubmit = async (values) => {
		setIsFetching(true);

		const response = await accountConfirmation(
			values.verificationCode.join(''),
			userData.email || values.email,
		);

		if (response?.error) {
			const errorMessage =
				typeof response.error.message === 'string'
					? response.error.message
					: response.error.message[0].message;

			toast.error(
				errorMessage ||
					'Ocorreu um erro para validar seu registro. Tente novamente em alguns instantes...',
			);
			setIsFetching(false);
			form.reset();

			if (shouldShowEmailField) {
				form.setFocus('email');
			} else {
				verificationCodeRef.current.focus();
			}
			return;
		}

		updateUserData(response);
		setNextStep();
	};

	useEffect(() => {
		const isAllFilled = verificationCode.every((code) => code.length > 0);

		if (isAllFilled && !shouldShowEmailField) {
			form.handleSubmit(handleSubmit)();
		}
		// react-hook-form funcs is already memoized
		// Everytime `verificationCode` changes, `shouldShowEmailField` also change, so we don't need it here
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [verificationCode]);

	const handleResendEmailConfirmation = async () => {
		const { email } = form.getValues();

		if (!userData.email && !email) {
			form.setError('email', { message: t('error:requiredField') });
			return;
		}

		form.clearErrors();
		setIsFetching(true);
		const response = await emailConfirmation(userData.email || email);

		if (response?.error) {
			toast.error(
				response.error.message[0].message ||
					'Ocorreu um erro para efetuar seu registro. Recarregue a página e tente novamente...',
			);
			setIsFetching(false);
			return;
		}

		if (response.success) {
			toast.success(
				'Caso o e-mail informado corresponda a um usuário cadastrado, enviaremos o código de verificação para você',
			);

			if (!userData.email && !!email) updateUserData({ email });
		}

		setIsFetching(false);
	};

	return (
		<Form onSubmit={form.handleSubmit(handleSubmit)}>
			<StepTitle>{activeStep.title}</StepTitle>
			<StepSubtitle>{activeStep.subtitle}</StepSubtitle>
			<StepInfo>
				{shouldShowEmailField ? (
					<>
						Digite abaixo seu e-mail e o código de <strong>6 dígitos</strong> para
						validar sua conta
					</>
				) : (
					<>
						Digite abaixo o código de <strong>6 dígitos</strong> que enviamos para o seu
						e-mail.
					</>
				)}
			</StepInfo>
			<S.InputsWrapper>
				{shouldShowEmailField && (
					<InputField
						name="email"
						label="E-mail"
						placeholder="Digite seu e-mail"
						variant="lightRounded"
						form={form}
						validation={{ required: true }}
					/>
				)}
				<S.VerificationCodeWrapper>
					<Controller
						name="verificationCode"
						control={form.control}
						rules={{
							validate: {
								allFieldsFilled: (value) => {
									return (
										value.every((_val) => _val.length) ||
										t('error:requiredField')
									);
								},
							},
						}}
						render={({ field, fieldState }) => (
							<VerificationCodeField
								ref={verificationCodeRef}
								value={field.value}
								onChange={field.onChange}
								label={shouldShowEmailField ? 'Código de verificação' : ''}
								error={fieldState.error}
								required
							/>
						)}
					/>
					<S.ResendEmailLink>
						<RectangularButton
							disabled={isFetching}
							colorVariant="blue"
							onClick={handleResendEmailConfirmation}
						>
							Enviar novamente
						</RectangularButton>
					</S.ResendEmailLink>
				</S.VerificationCodeWrapper>
			</S.InputsWrapper>

			<Actions>
				<RectangularButton
					disabled={isFetching}
					variant="round"
					colorVariant="green"
					type="submit"
				>
					Validar
					<FiArrowRight fontSize="2rem" />
				</RectangularButton>
			</Actions>
		</Form>
	);
}

StepTwo = ({ activeStep, setNextStep, setPrevStep, updateUserData }) => {
	const [isFetching, setIsFetching] = useState(false);
	const form = useForm({
		defaultValues: {
			email: '',
			password: '',
			passwordConfirm: '',
			privacyTerms: false,
		},
	});
	const passwordField = useRef({});
	passwordField.current = form.watch('password');

	const handleSubmit = async ({ email, password }) => {
		setIsFetching(true);
		const response = await register(email, password);

		if (response.error) {
			toast.error(
				response.error.message[0].message ||
					'Ocorreu um erro para efetuar seu registro. Recarregue a página e tente novamente...',
			);
			setIsFetching(false);
			return;
		}

		updateUserData(response);
		setNextStep();
	};

	return (
		<Form onSubmit={form.handleSubmit(handleSubmit)}>
			<StepTitle>{activeStep.title}</StepTitle>
			<StepSubtitle>{activeStep.subtitle}</StepSubtitle>

			<InputsWrapper>
				<InputField
					name="email"
					form={form}
					label="Email"
					placeholder="Digite seu e-mail"
					variant="lightRounded"
					validation={{ required: true }}
				/>

				<S.PasswordWrapper>
					<InputField
						name="password"
						form={form}
						label="Senha"
						placeholder="Digite sua senha"
						variant="lightRounded"
						type="password"
						validation={{
							required: true,
							validate: {
								passwordStrength: (value) => {
									const strength = checkPasswordStrength(value);

									const isValid = Object.values(strength).every((item) => !!item);

									return isValid || '';
								},
							},
						}}
					/>
					<PasswordStrength form={form} inputToWatch="password" />
				</S.PasswordWrapper>

				<InputField
					name="passwordConfirm"
					form={form}
					label="Confirmar senha"
					placeholder="Confirme sua senha"
					variant="lightRounded"
					type="password"
					validation={{
						required: true,
						validate: {
							passwordMatch: (value) =>
								passwordField.current === value || 'As senhas não são iguais',
						},
					}}
				/>

				<S.CheckboxWrapper>
					<CheckBoxField
						form={form}
						validation={{ required: true }}
						name="terms-and-privacy"
						ariaLabel="Concordo com os termos de uso e política de privacidade da Plataforma Sabiá"
						label={
							<S.CheckboxLabel>
								Concordo com os{' '}
								<a href="/terms-of-use" target="_blank">
									termos de uso
								</a>{' '}
								e{' '}
								<a href="/privacy-policy" target="_blank">
									política de privacidade
								</a>{' '}
								da Plataforma Sabiá
							</S.CheckboxLabel>
						}
						noPadding
						variant="rounded"
					/>

					<CheckBoxField
						form={form}
						name="receive-news"
						ariaLabel="Concordo em receber novidades da Plataforma Sabiá por email. (OPCIONAL)"
						label={
							<S.CheckboxLabel>
								Concordo em receber novidades da Plataforma Sabiá por email.
								(OPCIONAL)
							</S.CheckboxLabel>
						}
						noPadding
						variant="rounded"
					/>
				</S.CheckboxWrapper>
			</InputsWrapper>

			<Actions>
				<RectangularButton
					variant="round"
					colorVariant="green"
					type="submit"
					disabled={isFetching}
				>
					Continuar
					<FiArrowRight fontSize="2rem" />
				</RectangularButton>
				<RectangularButton
					variant="text"
					colorVariant="silver"
					id="back-button"
					onClick={setPrevStep}
				>
					<FiArrowLeft fontSize="2rem" />
					Voltar
				</RectangularButton>
			</Actions>
		</Form>
	);
}

Register = ({ initialStepIndex }) => {
	const [activeStep, setActiveStep] = useState({
		...steps[initialStepIndex ?? 0],
		index: initialStepIndex ?? 0,
	});
	const [userData, setUserData] = useState({});
	const CurrentStepComponent = activeStep.component;
	const isLastStep = activeStep.index === steps.length - 1;
	const canGoToPreviousStep = activeStep.index === 1;

	const updateUserData = (data) => setUserData((prev) => ({ ...prev, ...data }));

	const setNextStep = () => {
		setActiveStep((active) => ({ ...steps[active.index + 1], index: active.index + 1 }));
	};

	const setPrevStep = () => {
		setActiveStep((active) => ({ ...steps[active.index - 1], index: active.index - 1 }));
	};

	return (
		<S.Container backgroundImage={activeStep.backgroundImage}>
			{!isLastStep && (
				<S.Sidebar>
					{canGoToPreviousStep && (
						<RectangularButton colorVariant="silver" onClick={setPrevStep}>
							<FiArrowLeft fontSize="2rem" strokeWidth={2.5} />
						</RectangularButton>
					)}

					<Link href={internalPages.home} passHref>
						<S.LogoWrapper>
							<Image
								src="/logo-mono.svg"
								alt="Plataforma Sabiá"
								width={215}
								height={65}
								layout="responsive"
							/>
						</S.LogoWrapper>
					</Link>

					<S.StepsWrapper>
						<S.StepsTitle>Cadastro de Usuários</S.StepsTitle>

						<S.Steps>
							{steps.map((step, index) => {
								const isLast = index === steps.length - 1;
								if (isLast) return null;

								const isActive = step.title === activeStep.title;
								const isCompleted = activeStep.index > index;

								return (
									<S.Step
										key={step.title}
										active={isActive}
										completed={isCompleted}
									>
										{!!isActive && <FiArrowRight />}
										{!!isCompleted && <FiCheckCircle />}

										<p>{step.title}</p>
									</S.Step>
								);
							})}
						</S.Steps>
					</S.StepsWrapper>
				</S.Sidebar>
			)}

			<S.Content>
				{!isLastStep && (
					<>
						<S.PageTitle>Cadastro de Usuários</S.PageTitle>
						<S.ProgressIndicator
							stepsLength={steps.length}
							activeStepIndex={activeStep.index}
						/>
					</>
				)}

				{CurrentStepComponent && (
					<CurrentStepComponent
						activeStep={activeStep}
						setNextStep={setNextStep}
						setPrevStep={setPrevStep}
						userData={userData}
						updateUserData={updateUserData}
					/>
				)}
			</S.Content>
		</S.Container>
	);
}