Add to widget fields to capture users identification about bonde-clients

[gabrielrtakeda]

Introduction

It should capture users data when use match widget.

API Structure

On the API, the Activist's table follows the fields below:

field	type
id	int
name	string
email	string
phone	object
document_number	string
document_type	string
created_at	timestamp
updated_at	timestamp

Input fields

The name input should be the full name or we must add one more input, splitting in firstname and lastname and when we go to save that data, we concatenate each other.

Current

• The current MatchWidget layout is following below:

With inputs to capture users data

• Update: After selects the options of match, the name and email inputs should be shown:

- After all data has been filled up, the "Match" button enables:

With inputs error messages

• If user inputs an email that not corresponds to correct email format, it shows an error message.

Code

The inputs may be rendered by a custom component <Input /> inside /app/scripts/components/MatchWidget directory. Something like jsx code below:

<Input
  uid="input-match-name"
  type="text"
  label="Nome"
  placeholder="Insira aqui seu nome"
  required={true}
  onChange={e => { this.setState({ name: e.target.value }) }}
  show={!!selectedChoiceA}
/>

[gabrielrtakeda]

The error message is a reusable component that uses into FormWidget component too. For that reason, i'll isolate it in a separated file inside /app/components/FormUtil/Error.

Code example

<Error
  message="Email inválido"
  classes={['mb1', 'orange', 'regular']} // {array} optional, for more customizability
  styles={{ backgroundColor: '#fff' }} // {object} optional, for more customizability
/>

This file structure follows the conventions of mern-starter boilterplate for reusable components. (thanks to @igr-santos for the advices)

The <Input /> component may be inside that structure too.

[gabrielrtakeda]

Needs to split <Input /> component in <Input /> and <Label /> components.
Current <Input /> component don't follow the SRP (Single Responsibility Principle), which render an input and label element. 😞

[igr-santos]

Need have a responsibility to SRP (Single Responsibility Principle), I guess split code not is better choice, but a container with Input and Label according of props received a good choice

[gabrielrtakeda]

Suggestion

The current <Input /> component renders the html below:

<div className="mb2" style="display: block">
  <label className="h4 caps bold mb1">Nome *</label>
  <input
    id="input-match-name"
    className="field-light block full-width h3"
    onChange="function()"
    placeholder="Insira seu nome aqui"
    type="text"
    required="false"
  />
</div>

Options

The options a have are:

• Pass <label> element as a children of Input but, this isn't a good idea semantically. And because i don't want to write the line <label className="h4 caps bold mb1">Nome *</label> every time i need the <label> element.

<Input
  uid="input-match-name"
  type="text"
  placeholder="Insira aqui seu nome">
  <label className="h4 caps bold mb1">Nome *</label>
</Input>

• Or split it and treat it as a separated components.

<Label text="Nome *" />
<Input
  uid="input-match-name"
  type="text"
  placeholder="Insira aqui seu nome"
/>

Motivation

It's more a question of standardization than how components will work together.. I don't want to write every the same css classes to renders a label that already exists in another part of application.

[gabrielrtakeda]

Needs to migrate MatchWidget to new modularized structure.

[gabrielrtakeda]

Needs to refactor action types, which actually is included in WidgetActions.js file.

[gabrielrtakeda]

Needs to create an endpoint to save user and selected match data. The payload may be something like this:

Payload

// This is what API will receive as payload.
{
  "activist_match": {
    "match_id": 72,
    "activist": {
      "name": "Gabriel Ramos Takeda",
      "email": "[email protected]"
    }
  }
}

And, how we will send these data on the "activists view" side, we'll don't have any credential data. So the API must don't needs to authenticate the post request. (Maybe warning?)

[gabrielrtakeda]

API commit: nossas/bonde-server@e91e9d0

[gabrielrtakeda]

Needs to merge add-modularized-structure into add-match-widget branch and adapt according to the new modularized folder structure.

[gabrielrtakeda]

Needs to add lastname to sync with mailchimp.

Screenshot: