A React component for Active Campaign Form using Ant Design

activecampaign.js

import fetch from 'isomorphic-unfetch';
import { notification } from 'antd';
import styled from 'styled-components';
import { Form, Input } from '@rocketseat/unform';
import * as Yup from 'yup';
import PropTypes from 'prop-types';

const FormStyled = styled(Form)`
  display: flex;
  justify-content: space-between;
  flex-direction: ${props =>
    props.position === 'vertical' ? 'column' : 'row'};

  label {
    display: ${props => props.position === 'horizontal' && 'none'};
  }
  button {
    background: #fff;
    border: 2px solid #108043;
    border-radius: 4px;
    color: #108043;
    padding: ${props => (props.position === 'horizontal' ? '5px 10px' : '5px')};
    height: 43px;
    margin-top: 5px;
    width: ${props => (props.position === 'horizontal' ? '150px' : '100%')};
    cursor: pointer;
  }

  span {
    font-size: 12px;
    color: #cf1322;
    padding: 5px 0;
  }
  input {
    padding: ${props => (props.position === 'horizontal' ? '10px' : '6px')};
    width: ${props => (props.position === 'vertical' ? '100%' : '35%')};
    height: auto;
    border: #979797 1px solid;
    border-radius: 4px;
    color: #000;
    font-size: 13px;
    margin: 5px 0;
  }

  @media (max-width: 765px) {
    flex-direction: column;
    input {
      width: 100%;
    }
    button {
      width: 100%;
    }
  }
`;

FormStyled.defaultProps = {
  position: 'vertical',
};

export default function ActiveCampaing({ id, position = 'vertical' }) {
  const schema = Yup.object().shape({
    email: Yup.string()
      .email('Informe um e-mail válido')
      .required('O e-mail é obrigatório'),
    fullname: Yup.string()
      .min(4)
      .required('O nome é obrigatório'),
  });

  function handleSubmit(data, { resetForm }) {
    const { email, fullname } = data;
    const url = `https://yourlink.activehosted.com/proc.php?u=${id}&f=${id}&s=&c=0&m=0&act=sub&v=2&fullname=${fullname}&email=${email}&jsonp=true`;
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    notification.success({
      message: 'Cadastrado com sucesso',
      description: 'Obrigado por se cadastrar!',
    });

    resetForm();
  }

  return (
    <>
      <FormStyled schema={schema} onSubmit={handleSubmit} position={position}>
        <Input
          type="text"
          name="fullname"
          placeholder="Digite seu nome"
          label="Seu nome*"
        />

        <Input
          type="text"
          name="email"
          placeholder="Digite seu e-mail"
          label="Seu e-mail*"
        />

        <button type="submit">Quero Receber</button>
      </FormStyled>
    </>
  );
}

ActiveCampaing.propTypes = {
  id: PropTypes.number.isRequired,
  position: PropTypes.string,
};