@stokr/components-library 0.5.4 → 0.5.5

package/dist/ProfileBadge/ProfileBadge.styles.js

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  padding: 32px;
+
+  ${rwd.Medium`
+    padding: 12px;
+  `}
+
+  ${props => props.color === 'white' && `
+    color: ${theme.cBlack};
+    background-color: ${theme.cWhite};
+
+    svg {
+      stroke: ${theme.cBlack};
+    }
+  `}
+  
+  ${props => props.color === 'red' && `
+    color: ${theme.cWhite};
+    background-color: ${theme.cWarning};
+
+    svg {
+      stroke: ${theme.cWhite};
+    }
+  `}
+`;
+export const Title = styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+
+  ${({
+  centerVertically
+}) => centerVertically && css`
+      margin-bottom: 0;
+    `}
+`;

package/dist/ProfileBox/ProfileBox.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Background from 'components/Background/Background';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import { Container, ImageWrapper, EditButton, Name, EditIcon } from './ProfileBox.styles';
+const lineBreaker = {
+  wordBreak: 'break-all'
+};
+export const ProfileBox = ({
+  pictureSrc,
+  name,
+  handleEdit
+}) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Background, {
+  src: pictureSrc
+})), /*#__PURE__*/React.createElement(EditButton, {
+  onClick: handleEdit
+}, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Name, {
+  style: lineBreaker
+}, name, /*#__PURE__*/React.createElement(EditIcon, null)))));
+ProfileBox.propTypes = {
+  pictureSrc: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  handleEdit: PropTypes.func
+};
+ProfileBox.defaultProps = {
+  handleEdit: () => {},
+  name: ''
+};
+export default ProfileBox;

package/dist/ProfileBox/ProfileBox.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ProfileBox } from './ProfileBox';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Profile Box',
+  component: ProfileBox,
+  argTypes: {
+    pictureSrc: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      defaultValue: ''
+    },
+    handleEdit: {
+      type: 'function',
+      action: 'handleEdit',
+      defaultValue: () => {}
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ProfileBox, args));
+export const ProfileBoxDefault = Template.bind({});
+ProfileBoxDefault.args = {
+  pictureSrc: 'static/images/avatar.png'
+};

package/dist/ProfileBox/ProfileBox.styles.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components/macro';
+import { Container as BackgroundContainer } from 'components/Background/Background.styles';
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+export const ImageWrapper = styled.div`
+  flex-grow: 1;
+  min-height: 300px;
+
+  ${BackgroundContainer} {
+    width: 100%;
+    padding-top: 100%;
+  }
+`;
+export const EditButton = styled.button`
+  display: block;
+  width: 100%;
+  color: ${props => props.theme.cBlack};
+  border-bottom: 1px solid ${props => props.theme.cLightGrey};
+  transition: color 0.2s;
+
+  &:focus,
+  &:hover {
+    color: ${props => props.theme.cPrimary};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  & > div {
+    width: 100%;
+  }
+`;
+export const Name = styled.div`
+  position: relative;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  text-align: center;
+`;
+export const EditIcon = styled.i.attrs({
+  className: 'ion-md-create'
+})`
+  margin-left: 12px;
+
+  &:before {
+    transform: rotate(-15deg);
+  }
+`;
+export const AddmoreIcon = styled.i.attrs({
+  className: 'ion-ios-add-circle-outline'
+})`
+  margin-left: 12px;
+  font-size: 30px;
+`;

package/dist/ProfileHeader/ProfileHeader-CLb4.js

@@ -0,0 +1,401 @@
+import React, { PureComponent } from 'react';
+import { Collapse } from 'react-collapse';
+import { navigate } from '@reach/router';
+import ProfileBox from 'components/ProfileBox/ProfileBox';
+import ProfileBadge from 'components/ProfileBadge/ProfileBadge';
+import ProfileStat from 'components/ProfileStat/ProfileStat';
+import ExpandButton from 'components/ExpandButton/ExpandButton';
+import NotificationItem from 'components/NotificationItem/NotificationItem';
+import NotificationsCarousel from 'components/NotificationsCarousel/NotificationsCarousel';
+import { NotificationSlide } from 'components/NotificationsCarousel/NotificationsCarousel.styles';
+import ToDoList, { ToDoTaskState
+// ToDoTaskMessage,
+} from 'components/ToDoList/ToDoList';
+import Tabs, { Tab } from 'components/Tabs/Tabs';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import { VerifiedBadge } from 'components/SvgIcons';
+import { DisplayOnBreakpoint } from 'styles/rwd';
+import { AuthConsumer } from 'components/AuthConnect/AuthContext';
+import { NotificationConsumer } from 'components/NotificationContext/NotificationContext';
+import { Container, Main, AvatarBox, InfoBox, InfoInner, Badges, Badge, Stats, Stat, Togglers, Toggler, TabsContainer } from './ProfileHeader.styles';
+import { BigNumber } from 'bignumber.js';
+import user from 'api/user';
+import avatarPlaceholder from 'static/images/avatar-placeholder.png';
+import Cookies from 'js-cookie';
+import axios from '../../model/axios';
+
+// const avatarInvestor = require('static/images/avatarinvestor.png')
+
+class UserAvatarComponent extends React.Component {
+  state = {
+    finalAvatar: undefined
+  };
+  componentDidMount() {
+    const {
+      avatar
+    } = this.props;
+
+    // console.log(avatar);
+
+    this.checkUserPhoto(avatar);
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      avatar
+    } = this.props;
+    if (!avatar && avatar !== prevProps.avatar) {
+      this.setState({
+        finalAvatar: undefined
+      });
+    }
+    if (avatar !== prevProps.avatar) {
+      this.checkUserPhoto(avatar);
+    }
+  }
+  checkUserPhoto = avatar => {
+    const http = new XMLHttpRequest();
+    http.open('HEAD', avatar, false);
+    http.send();
+    // console.log(http);
+
+    if (http.status !== 404) {
+      this.setState({
+        finalAvatar: avatar
+      });
+    }
+  };
+  render() {
+    const {
+      finalAvatar
+    } = this.state;
+    const {
+      auth
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ProfileBox, {
+      name: auth.name ? auth.name : auth.email,
+      pictureSrc: finalAvatar || avatarPlaceholder,
+      handleEdit: () => navigate('/settings/profile-and-privacy')
+    });
+  }
+}
+
+// class UserAvatarComponent extends React.Component {
+//   state = {
+//     photo: avatarPlaceholder
+//   }
+
+//   componentDidMount() {
+//     const { avatar } = this.props;
+
+//     console.log(avatar);
+
+//     this.checkUserPhoto(avatar);
+//   }
+
+//   checkUserPhoto = (avatar) => {
+//     const http = new XMLHttpRequest();
+//     http.open('HEAD', avatar, false);
+//     http.send();
+//     // console.log(http);
+
+//     if (http.status !== 404) {
+//       this.setState({
+//         photo: avatar
+//       });
+//     }
+//   }
+
+//   render() {
+//     const { photo } = this.state;
+//     const { auth } = this.props;
+
+//     return (
+//       <ProfileBox
+//         name={auth.name ? auth.name : auth.email}
+//         // pictureSrc={avatarPlaceholder}
+//         pictureSrc={photo}
+//         handleEdit={() => navigate("/settings/profile-and-privacy")}
+//       />
+//     )
+//   }
+// }
+
+const notificationTab = (isMobile = false) => /*#__PURE__*/React.createElement(NotificationConsumer, null, ({
+  notifications,
+  markAsRead
+}) => /*#__PURE__*/React.createElement(NotificationsCarousel, {
+  dots: true,
+  isMobile: isMobile
+}, notifications.map(notificationItem => {
+  const {
+    _id,
+    notification
+  } = notificationItem;
+  return /*#__PURE__*/React.createElement(NotificationSlide, {
+    key: _id
+  }, /*#__PURE__*/React.createElement(NotificationItem, {
+    type: notification.type,
+    title: notification.content.title,
+    text: notification.content.text,
+    progress: notification.content.progress,
+    transfer: notification.content.transfer,
+    handleCloseClick: () => {
+      markAsRead(_id);
+    }
+  }));
+}), !isMobile && /*#__PURE__*/React.createElement(NotificationSlide, null)));
+
+// const todos = (
+//   <ComponentWrapper>
+//     <ToDoList
+//       successText="Almost done! Please complete all tasks in order to invest."
+//       tasks={[
+//         {
+//           title: "Verify Email",
+//           message: "Email verified",
+//           state: ToDoTaskState.APPROVED,
+//           link: "/"
+//         },
+//         {
+//           title: "Verify Identity",
+//           message: "Regected. Please re-apply",
+//           state: ToDoTaskState.REJECTED,
+//           link: "/verify-identity"
+//         },
+//         {
+//           title: "Register Ethereum Address",
+//           message: "In progress",
+//           state: ToDoTaskState.IN_PROGRESS,
+//           link: "/register-ethereum"
+//         },
+//         {
+//           title: "Complete Risk Questionnaire",
+//           message: "Approved",
+//           state: ToDoTaskState.APPROVED,
+//           link: "/risk-questionnaire"
+//         },
+//         {
+//           title: "Skipped task",
+//           message: "",
+//           state: ToDoTaskState.SKIPPED,
+//           link: "/"
+//         },
+//         {
+//           title: "Edited Task",
+//           message: "Draft",
+//           state: ToDoTaskState.DRAFT,
+//           link: "/"
+//         }
+//       ]}
+//     />
+//   </ComponentWrapper>
+// );
+
+const PANEL = {
+  NOTIFICATIONS: 'notifications',
+  TODOS: 'todos'
+};
+export class ProfileHeader extends PureComponent {
+  state = {
+    extendedPanel: null,
+    ether: 0,
+    euro: 0,
+    shouldRenderPage: false,
+    todoList: []
+  };
+  async componentDidMount() {
+    let addresses = [];
+    try {
+      const userData = await user('get');
+      if (userData.user.investor_eth_addresses) {
+        addresses = userData.user.investor_eth_addresses.map(obj => {
+          return obj.address;
+        });
+      }
+      this.setState(prevState => ({
+        ...prevState,
+        shouldRenderPage: true
+      }));
+      this.generateTodos(this.props.user);
+      const accessToken = await Cookies.getJSON('STOKR_ACCESS_TOKEN');
+      const request = {
+        method: 'GET',
+        url: `${process.env.REACT_APP_EVENTDB_ENDPOINT}/investor/ether-balance?addresses=${addresses.join()}`,
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+          //accept: `application/json`,
+        }
+      };
+
+      const EDB_Request = await axios(request);
+      if (EDB_Request && EDB_Request.etherBalance && EDB_Request.currentEtherPrice) {
+        const ether = EDB_Request.etherBalance.totalEtherBalance;
+        const euro = EDB_Request.currentEtherPrice * ether;
+        this.setState({
+          ether: new BigNumber(ether).toFixed(5),
+          euro: new BigNumber(euro).toFixed(2)
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      // TODO: TO BE CLEANED UP
+    }
+  }
+
+  setTodos = todos => {
+    this.setState(prevState => ({
+      ...prevState,
+      todoList: todos
+    }));
+  };
+  generateTodos = userData => {
+    // console.log(userData);
+
+    if (userData.user_type === 'investor_entity') {
+      this.setTodos([{
+        title: 'Verify Email',
+        message: 'Verified',
+        state: ToDoTaskState.APPROVED
+        // tooltip: 'Example tooltip',
+      }, {
+        title: 'Register Ethereum Address',
+        message: userData.investor_eth_addresses ? 'Completed and approved' : 'Set up a blockchain address to safely store tokens and ether profit distributions.',
+        state: userData.investor_eth_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
+        link: `https://signup.${process.env.REACT_APP_WEBSITE_DOMAIN}/register-ethereum`
+
+        // tooltip: 'Example tooltip',
+      }, {
+        title: 'Risk Questionnaire',
+        message: userData.is_risk_questionnaire_finished ? 'Completed and approved' : 'Read the risks, tick the boxes, ta-da!',
+        state: userData.is_risk_questionnaire_finished ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
+        link: !userData.is_risk_questionnaire_finished && `https://signup.${process.env.REACT_APP_WEBSITE_DOMAIN}/risk-questionnaire`
+
+        // tooltip: 'Example tooltip',
+      }]);
+    } else {
+      this.setTodos([{
+        title: 'Verify Email',
+        message: 'Verified',
+        state: ToDoTaskState.APPROVED
+        // tooltip: 'Example tooltip',
+      }, {
+        title: 'Verify Identity',
+        message: userData.kyc_status === 'in_progress' ? 'Pending approval' : userData.kyc_status === 'approved' ? 'Completed and approved' : 'Scan your ID to get the green light from the anti-fraud squad.',
+        state: userData.kyc_status === 'in_progress' ? ToDoTaskState.IN_PROGRESS : userData.kyc_status === 'approved' ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
+        link: !userData.kyc_status && `https://signup.${process.env.REACT_APP_WEBSITE_DOMAIN}/verify-identity`
+
+        // tooltip: 'Example tooltip',
+      }, {
+        title: 'Register Ethereum Address',
+        message: userData.investor_eth_addresses ? 'Completed and approved' : 'Set up a blockchain address to safely store tokens and ether profit distributions.',
+        state: userData.investor_eth_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
+        link: `https://signup.${process.env.REACT_APP_WEBSITE_DOMAIN}/register-ethereum`
+
+        // tooltip: 'Example tooltip',
+      }, {
+        title: 'Risk Questionnaire',
+        message: userData.is_risk_questionnaire_finished ? 'Completed and approved' : 'Read the risks, tick the boxes, ta-da!',
+        state: userData.is_risk_questionnaire_finished ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
+        link: !userData.is_risk_questionnaire_finished && `https://signup.${process.env.REACT_APP_WEBSITE_DOMAIN}/risk-questionnaire`
+        // tooltip: 'Example tooltip',
+      }]);
+    }
+
+    this.setState(prevState => ({
+      ...prevState,
+      shouldRenderPage: true
+    }));
+  };
+  togglePanel = panelId => {
+    const {
+      extendedPanel
+    } = this.state;
+    this.setState({
+      extendedPanel: extendedPanel !== panelId ? panelId : null
+    });
+  };
+  render() {
+    const {
+      extendedPanel,
+      ether,
+      euro,
+      todoList
+      // shouldRenderPage,
+    } = this.state;
+    const pendingTasksCount = todoList.reduce((count, task) => {
+      if (task.state === ToDoTaskState.APPROVED || task.state === ToDoTaskState.IN_PROGRESS) {
+        return count;
+      }
+      return count + 1;
+    }, 0);
+    return /*#__PURE__*/React.createElement(AuthConsumer, null, ({
+      auth,
+      avatar
+    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(AvatarBox, null, /*#__PURE__*/React.createElement(UserAvatarComponent, {
+      auth: auth,
+      avatar: avatar
+    })), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(InfoInner, null, /*#__PURE__*/React.createElement(Badges, null, /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(ProfileBadge, {
+      title: "KYC Status",
+      icon: /*#__PURE__*/React.createElement(VerifiedBadge, null),
+      color: "red"
+    })), /*#__PURE__*/React.createElement(Badge, {
+      borderBottom: true
+    }, /*#__PURE__*/React.createElement(ProfileBadge, {
+      title: "Early Adopter",
+      withIcon: true
+    }))), /*#__PURE__*/React.createElement(Stats, null, /*#__PURE__*/React.createElement(Stat, null, /*#__PURE__*/React.createElement(ProfileStat, {
+      label: "Ether balance",
+      unit: "ETH",
+      value: ether.toString(),
+      eqUnit: "\u20AC",
+      eqValue: euro.toString()
+    })))), /*#__PURE__*/React.createElement(Togglers, null, /*#__PURE__*/React.createElement(Toggler, null, /*#__PURE__*/React.createElement(NotificationConsumer, null, ({
+      notifications
+    }) => /*#__PURE__*/React.createElement(ExpandButton, {
+      title: "Notifications",
+      counter: notifications.length,
+      isOpened: extendedPanel === PANEL.NOTIFICATIONS,
+      onClick: () => {
+        this.togglePanel(PANEL.NOTIFICATIONS);
+      }
+    })), /*#__PURE__*/React.createElement(DisplayOnBreakpoint, {
+      down: true,
+      breakpoint: "Medium"
+    }, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: extendedPanel === PANEL.NOTIFICATIONS
+    }, notificationTab(true)))), /*#__PURE__*/React.createElement(Toggler, null, /*#__PURE__*/React.createElement(ExpandButton, {
+      title: "Checklist",
+      counter: pendingTasksCount,
+      isOpened: extendedPanel === PANEL.TODOS,
+      onClick: () => {
+        this.togglePanel(PANEL.TODOS);
+      }
+    }), /*#__PURE__*/React.createElement(DisplayOnBreakpoint, {
+      down: true,
+      breakpoint: "Medium"
+    }, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: extendedPanel === PANEL.TODOS
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ToDoList, {
+      successText: "Almost done!",
+      tasks: this.state.todoList
+    })))))))), /*#__PURE__*/React.createElement(DisplayOnBreakpoint, {
+      up: true,
+      breakpoint: "Medium"
+    }, /*#__PURE__*/React.createElement(TabsContainer, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      borderBottom: true
+    }, /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: extendedPanel !== null
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      activeTab: extendedPanel
+    }, /*#__PURE__*/React.createElement(Tab, {
+      tabId: PANEL.NOTIFICATIONS
+    }, notificationTab()), /*#__PURE__*/React.createElement(Tab, {
+      tabId: PANEL.TODOS
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ToDoList, {
+      successText: "Almost done!",
+      tasks: this.state.todoList
+    }))))))))));
+  }
+}
+export default ProfileHeader;