# Profile Card

A pop over card component that displays user information and provides some relevant links.

###Installation
Add `"@influitive/profile-card": "X.X.XX"` to the projects package JSON ( replaces X.X.XX with the version you want to use)

Run `npm install`

###Usage
In your component:

```javascript
import ProfileCard from '@influitive/profile-card/lib';

<ProfileCard
  id={contactUUID}
  disableViewProfile={aBooleanProp}
  anonymous={aBooleanProp}
  disableMessage={aBooleanProp}
  children={wrappedElement} />
```

###Props
- `id` (Uuid) of the user whose information is to be display in the card.
- `disableViewProfile` (bool)  When true hides the link to the user public profile.
- `disableMessage` (bool) When true hides the link to message that contact.
- `anonymous` (bool) when true renders the generic anonymous advocate information.
- `children` (node) Corresponds to the element to be wrapped. The profile card will toggle when clicking on this element.

Extra Considerations:
You will need to style the element that is being wrapped, as the `profile-card` does not make assumptions about its children. E.g for avatar images we are normally using:

```css
.profile {
  width: 32px;
  border-radius: 100%;
}
```

###How it works
`profile-card` is just a regular component built using react-redux. When the children element is clicked an ajax call is fired to the hub's `/api/people/${id}.json`to retrieve that especific user information.

### RELEASING
We currently maintain 2 versions of profile card due to mismatched deps that break in one of the places we use this repo.
The master branch is v2 while there is also a v3 branch. Changes need to be duplicated in both branches.

- before releasing, make sure you remove node_modules and re-install. There seems to be an error when publishing where there is no lib folder, but getting fresh node_modules seems to somehow fix it. This is because each version has diff package.json.

- you can try `npm publish --dry-run`, I haven't tested this yet, but it should list all the files without actually publishing.

### Infl-fe
To run locally in infl-fe for testing purposes, follow these steps:
1. In Profile Card (v3), run:
  - `npm run buildmodule`
  - `npm pack`
  - copy resulting .tgz file name
2. In Infl-fe stop it running then run:
  - `rm -rf node_modules`
  - `yarn cache clean`
  - `yarn add ../profile-card/<tgz file> --ignore-engines
  - `yarn install --ignore-engines`
  - `yarn start`