@stokr/components-library 0.5.4 → 0.5.6

package/dist/ProfileHeader/ProfileHeader.js

@@ -0,0 +1,268 @@
+import React, { PureComponent, Fragment } 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 NotificationsCarousel from 'components/NotificationsCarousel/NotificationsCarousel';
+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 'context/AuthContext/AuthContext';
+import { EventDBConsumer } from 'context/EventDBContext/EventDBContext';
+import { NotificationConsumer } from 'context/NotificationContext/NotificationContext';
+import { Container, Main, AvatarBox, InfoBox, InfoInner, Badges, Badge, Stats, Stat, Togglers, Toggler, TabsContainer } from './ProfileHeader.styles';
+import hexToTimestamp from 'utils/hex-to-timestamp';
+import { BigNumber } from 'bignumber.js';
+import avatarPlaceholder from 'static/images/avatar-placeholder.png';
+import fetchData from 'api/fetch-data';
+import UserChecklist from 'components/Checklist/UserChecklist';
+class UserAvatarComponent extends React.Component {
+  state = {
+    finalAvatar: undefined
+  };
+  componentDidMount() {
+    const {
+      avatar
+    } = this.props;
+    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 => {
+    try {
+      const http = new XMLHttpRequest();
+      http.open('HEAD', avatar, true);
+      http.send();
+      if (http.status !== 404) {
+        this.setState({
+          finalAvatar: avatar
+        });
+      }
+    } catch (error) {
+      console.log('error: ', error);
+    }
+  };
+  render() {
+    const {
+      finalAvatar
+    } = this.state;
+    const {
+      authUser
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ProfileBox, {
+      name: authUser.username ? authUser.username : authUser.email,
+      pictureSrc: finalAvatar || avatarPlaceholder,
+      handleEdit: () => navigate('/settings/profile-and-privacy')
+    });
+  }
+}
+function NotificationTab({
+  isMobile,
+  notifications,
+  authUser
+}) {
+  return /*#__PURE__*/React.createElement(NotificationsCarousel, {
+    dots: true,
+    isMobile: isMobile,
+    notifications: notifications,
+    authUser: authUser
+  });
+}
+const PANEL = {
+  NOTIFICATIONS: 'notifications',
+  TODOS: 'todos'
+};
+export class ProfileHeader extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.tabScroll = /*#__PURE__*/React.createRef();
+    this.state = {
+      extendedPanel: null,
+      ether: 0,
+      euro: 0,
+      shouldRenderPage: false,
+      additionalDocsTodoList: [],
+      mandatoryTasksCount: 0,
+      walletsTasksCount: 0,
+      isFromAllowedCountry: undefined
+    };
+  }
+  async componentDidMount() {
+    const {
+      isChecklist,
+      user
+    } = this.props;
+    isChecklist && this.togglePanel(PANEL.TODOS);
+    !isChecklist && this.togglePanel(PANEL.NOTIFICATIONS);
+    this.generateTodos(user);
+  }
+  setOptionalTasks = todos => {
+    this.setState({
+      optionalTodoList: todos
+    });
+  };
+  setAdditionalDocs = todos => {
+    this.setState({
+      additionalDocsTodoList: todos
+    });
+  };
+  togglePanel = panelId => {
+    const {
+      extendedPanel
+    } = this.state;
+    this.setState({
+      extendedPanel: extendedPanel !== panelId ? panelId : null
+    });
+    const tabsNavOffsetTop = this.tabScroll.current.offsetTop;
+    let scrollToPosition = tabsNavOffsetTop + 1;
+    window.scrollTo({
+      top: scrollToPosition,
+      behavior: 'smooth'
+    });
+  };
+  render() {
+    const {
+      extendedPanel,
+      mandatoryTasksCount,
+      walletsTasksCount,
+      isFromAllowedCountry
+    } = this.state;
+    const badge = this.props.user.badge ? this.props.user.badge : 'Early Adopter';
+    return /*#__PURE__*/React.createElement(AuthConsumer, null, ({
+      authUser,
+      avatar
+    }) => /*#__PURE__*/React.createElement(EventDBConsumer, null, ({
+      totalInvestment,
+      dollarInEuro
+    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NotificationConsumer, null, ({
+      notifications,
+      toggleIsRead,
+      unreadNotificationsCount
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(AvatarBox, null, /*#__PURE__*/React.createElement(UserAvatarComponent, {
+      authUser: authUser,
+      avatar: avatar
+    })), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(InfoInner, null, /*#__PURE__*/React.createElement(Badges, null, /*#__PURE__*/React.createElement(Badge, {
+      onClick: () => {
+        this.setState({
+          extendedPanel: PANEL.TODOS
+        });
+        const tabsNavOffsetTop = this.tabScroll.current.offsetTop;
+        let scrollToPosition = tabsNavOffsetTop + 1;
+        if (window.innerWidth < 768) {
+          scrollToPosition = tabsNavOffsetTop;
+        }
+        window.scrollTo({
+          top: scrollToPosition,
+          behavior: 'smooth'
+        });
+      },
+      isClickable: true
+    }, /*#__PURE__*/React.createElement(ProfileBadge, {
+      title: mandatoryTasksCount + walletsTasksCount === 0 && isFromAllowedCountry ? 'READY TO INVEST' : 'NOT READY TO INVEST',
+      icon: mandatoryTasksCount + walletsTasksCount === 0 && /*#__PURE__*/React.createElement(VerifiedBadge, null),
+      color: "red"
+    })), /*#__PURE__*/React.createElement(Badge, {
+      borderBottom: true
+    }, /*#__PURE__*/React.createElement(ProfileBadge, {
+      title: badge,
+      withIcon: true
+    }))), /*#__PURE__*/React.createElement(Stats, null, /*#__PURE__*/React.createElement(Stat, null, /*#__PURE__*/React.createElement(ProfileStat, {
+      label: "Total Investment",
+      unit: "\u20AC",
+      value: isFinite(totalInvestment) ? totalInvestment.toFixed(2) : '',
+      eqUnit: "$",
+      eqValue: isFinite(totalInvestment) ? (totalInvestment / dollarInEuro).toFixed(2) : ''
+    })))), /*#__PURE__*/React.createElement(Togglers, null, /*#__PURE__*/React.createElement(Toggler, null, /*#__PURE__*/React.createElement(ExpandButton, {
+      greenCounter: true,
+      title: "Notifications",
+      counter: unreadNotificationsCount,
+      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
+    }, /*#__PURE__*/React.createElement(NotificationTab, {
+      isMobile: true,
+      notifications: notifications,
+      authUser: authUser
+    })))), /*#__PURE__*/React.createElement(Toggler, {
+      ref: this.tabScroll
+    }, /*#__PURE__*/React.createElement(ExpandButton, {
+      title: "Checklist",
+      counter: mandatoryTasksCount + walletsTasksCount,
+      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(UserChecklist, {
+      user: this.props.user
+      // redirectCookie
+      //additionalTasks={<AdditionalTask />}
+      // getTasksCount={taskCount => {
+      //   this.setState({
+      //     mandatoryTasksCount:
+      //       taskCount.mandatoryTasksCount,
+      //     walletsTasksCount:
+      //       taskCount.walletTasksCount,
+      //   })
+      // }}
+    })))))))), /*#__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
+    }, /*#__PURE__*/React.createElement(NotificationTab, {
+      notifications: notifications,
+      authUser: authUser
+    })), /*#__PURE__*/React.createElement(Tab, {
+      tabId: PANEL.TODOS
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(UserChecklist, {
+      user: this.props.user
+      // redirectCookie
+      //additionalTasks={<AdditionalTask />}
+      // getTasksCount={taskCount => {
+      //   this.setState({
+      //     mandatoryTasksCount:
+      //       taskCount.mandatoryTasksCount,
+      //     walletsTasksCount:
+      //       taskCount.walletTasksCount,
+      //   })
+      // }}
+    })))))))))))));
+  }
+}
+
+export default ProfileHeader;

package/dist/ProfileHeader/ProfileHeader.styles.js

@@ -0,0 +1,114 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const Container = styled.div`
+  position: relative;
+  display: block;
+`;
+export const Main = styled.div`
+  position: relative;
+  z-index: 1;
+  display: block;
+
+  ${rwd.Medium`
+    display: flex;
+    flex-direction: row;
+  `}
+`;
+export const AvatarBox = styled.div`
+  width: 100%;
+
+  ${rwd.Medium`
+    width: 31%;
+  `}
+`;
+export const InfoBox = styled.div`
+  width: 100%;
+
+  ${rwd.Medium`
+    width: 69%;
+    display: flex;
+    flex-direction: column;
+  `}
+`;
+export const InfoInner = styled.div`
+  ${rwd.Medium`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+  `}
+`;
+export const Badges = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  ${rwd.Medium`
+    flex-direction: column;
+  `}
+
+  ${rwd.Large`
+    width: 27.6%;
+  `}
+`;
+export const Badge = styled.div`
+  flex-grow: 1;
+  display: flex;
+  cursor: ${({
+  isClickable
+}) => isClickable && 'pointer'};
+
+  ${rwd.Medium`
+    flex-grow: 1;
+    height: 50%;
+  `}
+
+  ${props => props.borderTop && `
+    border-top: 1px solid ${theme.cLightGrey};
+  `};
+
+  ${props => props.borderBottom && `
+    border-bottom: 1px solid ${theme.cLightGrey};
+  `};
+`;
+export const Stats = styled.div`
+  ${rwd.Medium`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  `}
+`;
+export const Stat = styled.div`
+  flex-grow: 1;
+  display: flex;
+
+  ${rwd.Medium`
+    flex-grow: 1;
+    height: 50%;
+  `}
+
+  ${props => props.borderTop && `
+    border-top: 1px solid ${theme.cPrimaryDark};
+  `};
+
+  ${props => props.borderBottom && `
+    border-bottom: 1px solid ${theme.cPrimaryDark};
+  `};
+`;
+export const Togglers = styled.div`
+  ${rwd.Medium`
+    display: flex;
+    flex-direction: row;
+    border-right: 64px solid ${props => theme.cWarning};
+  `}
+`;
+export const Toggler = styled.div`
+  ${rwd.Medium`
+    flex-grow: 1;
+    border-left: 1px solid ${props => theme.cLightGrey};
+  `}
+`;
+export const TabsContainer = styled.div`
+  position: relative;
+  z-index: 0;
+  margin-top: -1px;
+`;

package/dist/ProfileStat/ProfileStat.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Wrapper, Label, Value, Equal } from './ProfileStat.styles';
+const lineBreaker = {
+  wordBreak: 'break-all'
+};
+export const ProfileStat = ({
+  label,
+  unit,
+  value,
+  eqUnit,
+  eqValue,
+  withBorder
+}) => /*#__PURE__*/React.createElement(Wrapper, {
+  withBorder: withBorder
+}, /*#__PURE__*/React.createElement(Label, {
+  withBorder: withBorder
+}, label), /*#__PURE__*/React.createElement(Value, {
+  style: lineBreaker
+}, unit && /*#__PURE__*/React.createElement("span", null, unit), value), eqValue && eqUnit ? /*#__PURE__*/React.createElement(Equal, null, '= ', eqUnit && /*#__PURE__*/React.createElement("span", null, eqUnit), eqValue) : '');
+ProfileStat.propTypes = {
+  label: PropTypes.string.isRequired,
+  unit: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  eqUnit: PropTypes.string,
+  eqValue: PropTypes.string.isRequired
+};
+ProfileStat.defaultProps = {
+  unit: '',
+  eqUnit: ''
+};
+export default ProfileStat;

package/dist/ProfileStat/ProfileStat.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ProfileStat } from './ProfileStat';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Profile Stat',
+  component: ProfileStat,
+  argTypes: {
+    label: {
+      type: 'string',
+      required: true
+    },
+    value: {
+      type: 'string',
+      required: true
+    },
+    unit: {
+      type: 'string'
+    },
+    eqUnit: {
+      type: 'string',
+      defaultValue: ''
+    },
+    eqValue: {
+      type: 'string',
+      defaultValue: ''
+    },
+    withBorder: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ProfileStat, args));
+export const ProfileStatExample = Template.bind({});
+ProfileStatExample.args = {
+  label: 'A Label',
+  value: '44',
+  unit: '$',
+  eqUnit: '€',
+  eqValue: '37,50'
+};
+export const ProfileStatBorderID = Template.bind({});
+ProfileStatBorderID.args = {
+  label: 'A Label',
+  value: '44',
+  unit: '$',
+  eqUnit: '€',
+  eqValue: '37,50',
+  withBorder: true
+};
+export const ProfileStatOverview = Template.bind({});
+ProfileStatOverview.args = {
+  label: 'A Label',
+  value: 'Value',
+  unit: 'Unit',
+  eqUnit: 'eq-Unit',
+  eqValue: 'eq-Value'
+};

package/dist/ProfileStat/ProfileStat.styles.js

@@ -0,0 +1,80 @@
+import styled 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;
+  text-align: center;
+  flex-grow: 1;
+  background-color: ${props => theme.cPrimary};
+  color: ${props => theme.cWhite};
+  padding: 32px;
+
+  ${props => props.withBorder && `
+    box-shadow: inset 0 0.4px 0 0 #313131;
+  `}
+
+  ${rwd.Medium`
+    padding: 12px 32px;
+    text-align: left;
+  `}
+
+  ${rwd.Large`
+    padding: 12px 64px;
+    text-align: left;
+  `}
+
+  @media screen and (max-width: 768px) {
+    max-width: 100vw;
+  }
+`;
+export const Label = styled.div`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+
+  ${props => props.withBorder && `
+    color: #88fa51;
+  `}
+`;
+export const Value = styled.div`
+  font-weight: 300;
+  font-size: 32px;
+  line-height: 36px;
+  letter-spacing: 2.43px;
+  text-transform: uppercase;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+
+  ${rwd.Medium`
+    font-size: 44px;
+    line-height: 48px;
+  `}
+
+  ${rwd.Large`
+    font-size: 55px;
+    line-height: 58px;
+  `}
+`;
+export const Equal = styled.div`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-top: 10px;
+  color: ${props => theme.cLighterGreen};
+  overflow-wrap: break-word;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+`;

package/dist/ProofOfAddress/ProofOfAddress.styles.js

@@ -0,0 +1,76 @@
+import Icon, { iconsMap } from 'components/Icon/Icon.style';
+import styled, { css } from 'styled-components/macro';
+import Button from 'components/Button/Button.styles';
+import theme from 'styles/theme';
+export const CTABox = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${Button} {
+    width: 240px;
+  }
+
+  span {
+    font-size: 11px;
+    position: relative;
+    top: -2px;
+  }
+`;
+export const FileInput = styled.input.attrs(props => ({
+  type: 'file',
+  ...props
+}))`
+  visibility: hidden;
+  position: absolute;
+  width: 0.1px;
+  height: 0.1px;
+  z-index: -1;
+`;
+export const FileInputWrapper = styled(Button).attrs({
+  as: 'label',
+  type: undefined
+})`
+  position: relative;
+  word-break: break-all;
+  margin: 0;
+`;
+export const FileInputRemove = styled(Icon).attrs({
+  icon: iconsMap.trash
+})`
+  /* position: absolute; */
+  /* top: 50%; */
+  margin-right: 10px;
+  right: 0px;
+  /* transform: translateY(-50%); */
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.3s color;
+  color: ${props => theme.cWarning};
+  border-radius: 50%;
+  border: 1px solid ${props => theme.cLightGrey};
+  padding: 10px;
+
+  &:hover {
+    color: ${props => theme.cPrimary};
+  }
+
+  ${({
+  disabled
+}) => disabled && css`
+      pointer-events: none !important;
+      opacity: 0.2;
+      cursor: default;
+    `}
+`;
+export const FileInputList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  font-size: 12px;
+  width: 100%;
+`;
+export const FileInputItem = styled.li`
+  padding: 0 46px 0 8px;
+  margin-right: 8px;
+  position: relative;
+  word-break: break-all;
+`;