@stokr/components-library 0.5.3 → 0.5.5

package/dist/TransactionInfo/TransactionInfo.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TransactionInfo } from './TransactionInfo';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/TransactionInfo',
+  component: TransactionInfo,
+  argTypes: {
+    value1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    unit1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    name1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    owner1: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    unit2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    name2: {
+      type: 'string',
+      defaultValue: ''
+    },
+    owner2: {
+      type: 'string',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(TransactionInfo, args));
+export const TransactionInfoExample = Template.bind({});
+TransactionInfoExample.args = {
+  value1: 'value 1',
+  unit1: 'unit 1',
+  name1: 'name 1',
+  owner1: 'owner 1',
+  value2: 'value 2',
+  unit2: 'unit 2',
+  name2: 'name 2',
+  owner2: 'owner 2'
+};

package/dist/TransactionInfo/TransactionInfo.styles.js

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components/macro';
+import colors from 'styles/colors';
+import theme from 'styles/theme';
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const Account = styled.div``;
+export const TransferIcon = styled.div.attrs({
+  className: 'ion'
+})`
+  width: 16px;
+  height: 19px;
+  position: relative;
+  margin: auto;
+
+  &::before,
+  &::after {
+    font-size: 28px;
+    position: absolute;
+    left: 0;
+  }
+
+  &::before {
+    content: '\f117';
+    color: ${props => theme.cSuccess};
+    top: -7px;
+  }
+
+  &::after {
+    content: '\f119';
+    color: ${props => theme.cWarning};
+    top: 2px;
+  }
+`;
+export const Value = styled.div`
+  font-size: 22px;
+  font-weight: 300;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+
+  ${props => props.green && css`
+      color: ${colors.progressGreen};
+    `}
+
+  ${props => props.red && css`
+      color: ${colors.orangishRed};
+    `}
+`;
+export const Name = styled.div`
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  font-style: italic;
+  margin-bottom: 3px;
+
+  ${props => props.green && css`
+      color: ${colors.progressGreen};
+    `}
+
+  ${props => props.red && css`
+      color: ${colors.orangishRed};
+    `}
+`;

package/dist/TwoFactorModal/TwoFactorModal.js

@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Modal, ModalInner } from 'components/Modal/Modal';
+import Form, { FormField, FormError } from 'components/Form/Form';
+import Text from 'components/Text/Text.styles';
+import Input from 'components/Input/Input';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+export class TwoFactorModal extends PureComponent {
+  initialValues = {
+    fa2code: ''
+  };
+  validationSchema = Yup.object().shape({
+    fa2code: Yup.string().required('Token is required')
+  });
+  render() {
+    const {
+      isModalOpen,
+      onModalClose,
+      onFormSend
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: isModalOpen,
+      onClose: onModalClose
+    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ModalInner, {
+      modalTop: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Two Factor Authentication"), /*#__PURE__*/React.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/React.createElement(ModalInner, {
+      modalBot: true
+    })), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ModalInner, null, /*#__PURE__*/React.createElement(Formik, {
+      initialValues: this.initialValues,
+      validationSchema: this.validationSchema,
+      onSubmit: onFormSend
+    }, ({
+      values,
+      errors,
+      touched,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched
+    }) => {
+      const onChangeWithTouch = e => {
+        const field = e.target;
+        setFieldValue(field.name, field.value, false);
+        setFieldTouched(field.name);
+      };
+      const submitDisabled = !touched.fa2code || !!errors.fa2code;
+      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPadding: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+        id: "two-factor",
+        name: "fa2code",
+        type: "text",
+        label: "Token",
+        value: values.fa2code,
+        onChange: onChangeWithTouch,
+        onBlur: handleBlur,
+        error: !!errors.fa2code,
+        touched: !!touched.fa2code
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.fa2code && touched.fa2code
+      }, errors.fa2code))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "submit",
+        fluid: true,
+        disabled: submitDisabled
+      }, "Login")));
+    })))));
+  }
+}
+TwoFactorModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired
+};
+export default TwoFactorModal;

package/dist/breakdown/Breakdown.js

@@ -0,0 +1,124 @@
+/*  */
+import styled, { css } from 'styled-components';
+import dropdown from 'static/images/arrow-down-black.svg';
+import rwd, { rwdMax } from 'styles/rwd';
+export const Breakdown = styled.div`
+  text-transform: uppercase;
+  letter-spacing: 2.1px;
+  font-size: ${({
+  fontSize
+}) => fontSize ? `${fontSize}px` : '11px'};
+  white-space: ${({
+  withWordWrap
+}) => withWordWrap ? 'unset' : 'nowrap'};
+  line-height: 2.18;
+  color: inherit;
+  font-weight: bolder;
+  strong& {
+    font-weight: bold;
+  }
+
+  ${({
+  is101
+}) => is101 && css`
+      text-transform: unset;
+    `}
+
+  ${({
+  mobile
+}) => mobile && css`
+      display: none;
+
+      ${rwdMax.Mobile`
+        display: block;
+      `}
+    `}
+
+  ${({
+  nomobile
+}) => nomobile && css`
+      display: block;
+
+      ${rwdMax.Mobile`
+        display: none;
+      `}
+    `}
+
+      ${props => props.withPadding && `
+        padding:18px 16px;
+      `}
+      ${props => props.red && `
+    background: #D2200D;
+    color:white;
+        border-bottom: 1px solid #979797;
+  `}
+
+  ${({
+  alignCenter
+}) => alignCenter && css`
+      display: flex;
+      justify-content: center;
+    `}
+
+  @media screen and (max-width: 991px) {
+    ${({
+  menuWithArrow
+}) => menuWithArrow && css`
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+      `}  
+  }
+
+  ${({
+  mobileMenu
+}) => mobileMenu && css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  `}
+     ${props => props.asLink && `
+      cursor:pointer;
+      &:hover {
+        opacity: .6;
+      }
+    `}
+
+    ${props => props.withIcon && `
+      ${rwdMax.Medium`
+
+        span {
+
+
+        position:relative;
+        
+        &: before {
+          content: url(${dropdown});
+          position:absolute;
+          top: -4px;
+          right: -2em;
+          width:12px;
+          transition: transform 0.7s;
+
+        }
+        }
+
+        
+       
+      `}
+    `}
+
+     ${props => props.active && `
+       ${rwdMax.Medium`
+
+         &:before {
+           
+           transform: rotate(180deg);
+          }
+       `}
+
+      
+        `}
+`;
+export default Breakdown;

package/dist/breakdown/index.js

@@ -0,0 +1,2 @@
+export * from './Breakdown';
+export { default } from './Breakdown';

package/dist/context/Auth.js

@@ -0,0 +1,133 @@
+import axios from '../../model/axios';
+import Cookies from 'js-cookie';
+import getCookieDomain from '../../utils/get-cookie-domain';
+class Auth {
+  static setAccessToken(token) {
+    this.logout();
+    const inOneHour = 1 / 24;
+    const cookieOptions = {
+      expires: inOneHour
+    };
+    if (process.env.NODE_ENV === 'production') {
+      cookieOptions.domain = getCookieDomain();
+    }
+    Cookies.set('STOKR_ACCESS_TOKEN', token, cookieOptions);
+  }
+  static getAccessToken() {
+    return Cookies.getJSON('STOKR_ACCESS_TOKEN');
+  }
+  static logout() {
+    const cookieDomain = {};
+    if (process.env.NODE_ENV === 'production') {
+      cookieDomain.domain = getCookieDomain();
+    }
+    Cookies.remove('STOKR_ACCESS_TOKEN', cookieDomain);
+  }
+  static login(data) {
+    return new Promise((resolve, reject) => {
+      axios.post(`auth/login`, data).then(response => {
+        axios.defaults.headers.common.Authorization = `Bearer ${response.data.access_token}`;
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static twoFactor(data) {
+    return new Promise((resolve, reject) => {
+      axios.post(`auth/confirm2fa`, data).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static activateUser() {
+    const isUsingQueryParam = window.location.href.includes('?token=');
+    let token;
+    if (isUsingQueryParam) {
+      token = window.location.href.split('activateUser?token=')[1].split('&')[0];
+    } else {
+      token = window.location.href.split('activateUser/')[1].split('/')[0];
+    }
+    return new Promise((resolve, reject) => {
+      axios.post(`auth/activate`, {
+        token
+      }).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static getUser() {
+    return new Promise((resolve, reject) => {
+      axios.post(`user/get`).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static checkPrivateInvestor(data) {
+    return new Promise((resolve, reject) => {
+      axios.post(`private-investor/check`, data).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static updateUser(data) {
+    return new Promise((resolve, reject) => {
+      axios.post(`user/updateProfile`, data).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static sendWelcomeEmail() {
+    return new Promise((resolve, reject) => {
+      axios.post(`user/welcomeEmail`).then(() => {
+        resolve();
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static resendActivationEmail(data) {
+    return new Promise((resolve, reject) => {
+      axios.post(`auth/forgotPass`, data).then(() => {
+        resolve();
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static uploaProofOfAddress(data, ip) {
+    return new Promise(async (resolve, reject) => {
+      axios.post(`https://kycdocs.stokr-staging.de/kyc/upload?ip=${ip}`, data, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  static validateGreenWalletId(id) {
+    return new Promise(async (resolve, reject) => {
+      axios.post(`greenwallet/validate-gaid`, {
+        gaid: id
+      }).then(response => {
+        resolve(response.data);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+}
+export default Auth;

package/dist/context/AuthContext.js

@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+import { navigate } from '@reach/router';
+import PropTypes from 'prop-types';
+import axios from '../../model/axios';
+import Auth from './Auth';
+export const AuthContext = /*#__PURE__*/React.createContext();
+export class AuthProvider extends Component {
+  state = {
+    user: undefined,
+    isFetchingUser: true
+  };
+  componentDidMount() {
+    const isActivatingUser = window.location.href.includes('/activateUser');
+    const accessToken = Auth.getAccessToken();
+    if (isActivatingUser) {
+      this.activateUser();
+    } else if (accessToken) {
+      this.setUser(accessToken);
+    } else {
+      console.log('No access token');
+      window.location.href = `https://${process.env.REACT_APP_WEBSITE_DOMAIN}/login`;
+    }
+  }
+  activateUser = async () => {
+    try {
+      const {
+        user,
+        access_token
+      } = await Auth.activateUser();
+      axios.defaults.headers.common.Authorization = `Bearer ${access_token}`;
+      Auth.setAccessToken(access_token);
+      this.setState({
+        user,
+        isFetchingUser: false
+      });
+    } catch (error) {
+      console.log('Error activating user: ', error);
+      navigate('/oops', {
+        state: {
+          message: 'This activation token has expired.',
+          hasActivationTokenExpired: true
+        }
+      });
+      this.setState({
+        isFetchingUser: false
+      });
+    }
+  };
+  logoutUser = () => {
+    Auth.logout();
+    this.setState({
+      user: undefined
+    });
+    window.location.href = `https://${process.env.REACT_APP_WEBSITE_DOMAIN}`;
+  };
+  setUser = async accessToken => {
+    axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
+    try {
+      const {
+        user
+      } = await Auth.getUser();
+      this.setState({
+        user,
+        isFetchingUser: false
+      });
+    } catch (error) {
+      navigate('/oops');
+      this.setState({
+        isFetchingUser: false
+      });
+      console.log(`Error fetching the user: ${error}`);
+    }
+  };
+  updateUser = async data => {
+    try {
+      const {
+        user
+      } = await Auth.updateUser(data);
+      this.setState({
+        user
+      });
+    } catch (error) {
+      console.log(`Error updating the user: ${error}`);
+      throw error;
+    }
+  };
+  checkIfPrivateInvestor = async data => {
+    try {
+      const result = await Auth.checkPrivateInvestor(data);
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  };
+  resendActivationEmail = async data => {
+    try {
+      await Auth.resendActivationEmail(data);
+    } catch (error) {
+      console.log(`Error resending activation email: ${error}`);
+      throw error;
+    }
+  };
+  sendWelcomeEmail = async () => {
+    try {
+      await Auth.sendWelcomeEmail();
+    } catch (error) {
+      console.log(`Error sending welcome email: ${error}`);
+      // No need to throw error, let the app continue even if it fails
+    }
+  };
+
+  uploaProofOfAddress = async (data, ip) => {
+    try {
+      const user = await Auth.uploaProofOfAddress(data, ip);
+      this.setState({
+        user
+      });
+    } catch (error) {
+      console.log(`Error uploading proof of address: ${error}`);
+      throw error;
+    }
+  };
+  validateGreenWalletId = async id => {
+    try {
+      return Auth.validateGreenWalletId(id);
+    } catch (error) {
+      console.log(`Error validating Green Wallet ID: ${error}`);
+      throw error;
+    }
+  };
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement(AuthContext.Provider, {
+      value: {
+        ...this.state,
+        logoutUser: this.logoutUser,
+        setUser: this.setUser,
+        updateUser: this.updateUser,
+        checkIfPrivateInvestor: this.checkIfPrivateInvestor,
+        sendWelcomeEmail: this.sendWelcomeEmail,
+        resendActivationEmail: this.resendActivationEmail,
+        uploaProofOfAddress: this.uploaProofOfAddress,
+        validateGreenWalletId: this.validateGreenWalletId
+      }
+    }, children);
+  }
+}
+AuthProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export const AuthConsumer = AuthContext.Consumer;
+//export default AuthProvider

package/dist/icons/Arrow.js

@@ -0,0 +1,62 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import styled, { css } from 'styled-components';
+const iconDirection = ({
+  direction
+}) => {
+  switch (direction) {
+    case 'right':
+      return css`
+        transform: rotate(90deg) scale(-1, 1);
+      `;
+    case 'left':
+      return css`
+        transform: rotate(-90deg);
+      `;
+    case 'bottom':
+      return css`
+        transform: rotate(180deg);
+      `;
+    case 'top':
+    default:
+      return css``;
+  }
+};
+const Icon = styled.svg`
+  ${iconDirection};
+`;
+export const Arrow = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  width: "18",
+  height: "10",
+  viewBox: "0 0 18 10",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("g", {
+  id: "STO-Pages",
+  fill: "none",
+  fillRule: "evenodd",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "2.-Tablet-Pitch-Tab",
+  transform: "translate(-120 -5387)",
+  stroke: "#FFF",
+  strokeWidth: "1.5"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "Wrap-Up",
+  transform: "translate(0 5299)"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "Top",
+  transform: "translate(64 84)"
+}, /*#__PURE__*/React.createElement("g", {
+  id: "Top-Icon",
+  transform: "translate(50 5)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M9.917,5.583 L7.25,8.25",
+  id: "Stroke-1",
+  transform: "matrix(0 -1 -1 0 15.5 15.5)"
+}), /*#__PURE__*/React.createElement("polyline", {
+  id: "Stroke-3",
+  transform: "scale(1 -1) rotate(90 21.834 0)",
+  points: "13.5835 -1.4165 21.5835 6.5835 18.2505 9.9165"
+})))))));
+export default Arrow;