@stokr/components-library 0.5.6 → 0.5.7

package/dist/ProfileBadge/ProfileBadge.styles.js

@@ -1,47 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,401 +0,0 @@
-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;