@stokr/components-library 0.5.4 → 0.5.5

package/dist/RegisterLiquidSteps/register-liquid.js

@@ -0,0 +1,197 @@
+import React, { useContext, useState } from 'react';
+import { navigate } from '@reach/router';
+import styled from 'styled-components/macro';
+import { AuthContext } from 'components/AuthConnect/AuthContext';
+import Background from 'components/Background/Background';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { TextButton } from 'components/TextLink/TextLink.styles';
+import { SpanButton } from 'components/SpanButton/SpanButton.styles';
+import FAQ from 'components/FAQ/FAQ';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import Input from 'components/Input/Input';
+import Form, { FormField, FormError } from 'components/Form/Form';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import CryptoAddressWrapper from 'components/CryptoAddressWrapper/CryptoAddressWrapper';
+import RefreshButton from 'components/RefreshButton/RefreshButton';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import RegisterLiquidSteps from 'components/RegisterLiquidSteps/RegisterLiquidSteps';
+// import SectionTitle from 'components/SectionTitle/SectionTitle.styles'
+import { Row, Column } from 'components/Grid/Grid.styles';
+import backgroundImage from 'static/images/covers/liquid.png';
+import ToDoTask from 'components/ToDoList/ToDoListTask';
+import { ToDoTaskState } from 'components/ToDoList/ToDoList';
+import { iconsMap } from 'components/Icon/Icon.style';
+import { Video } from 'components/video';
+import deleteRedirectCookieAndNavigate from 'utils/delete-redirect-cookie-and-navigate';
+const LiquidDescription = styled.div`
+  li {
+    font-size: 20px !important;
+    line-height: 1.5em;
+
+    img {
+      vertical-align: middle;
+      padding-bottom: 2px;
+    }
+  }
+`;
+const RegisterLiquid = ({
+  setIsModalOpen,
+  setShowComplete
+}) => {
+  const {
+    user
+  } = useContext(AuthContext);
+  const {
+    entity_name,
+    liquid_network = {}
+  } = user;
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const {
+    updateUser,
+    validateGreenWalletId
+  } = useContext(AuthContext);
+  const [isUpdatingUser, setIsUpdatingUser] = useState(false);
+  const [error, setError] = useState('');
+  const initialValues = {
+    liquidId: ''
+  };
+  const validationSchema = Yup.object().shape({
+    liquidId: Yup.string().required('Oops, this can‘t be blank')
+  });
+  const handleOnSubmit = async e => {
+    setIsUpdatingUser(true);
+    const id = e.liquidId;
+    try {
+      const {
+        valid
+      } = await validateGreenWalletId(id);
+      if (!valid) {
+        setError("This ID is incorrect. Please make sure your AMP ID starts with the letters 'GA'. (Pictured left)");
+        setIsUpdatingUser(false);
+        return;
+      }
+      await updateUser({
+        liquid_network: {
+          GAID: e.liquidId
+        }
+      });
+      setShowComplete(true);
+    } catch (error) {
+      setError('Something went wrong. Try again.');
+      setIsUpdatingUser(false);
+    }
+  };
+  const onRefreshClick = () => {
+    setError(false);
+  };
+  return /*#__PURE__*/React.createElement(Row, {
+    main: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 8,
+    mainFixed: true
+  }, /*#__PURE__*/React.createElement(Background, {
+    src: backgroundImage,
+    mobileRatio: "16:9"
+  })), /*#__PURE__*/React.createElement(Column, {
+    part: 8,
+    mainRelative: true
+  }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(LiquidDescription, null, /*#__PURE__*/React.createElement("h1", null, "REGISTER LIQUID SECURITIES ACCOUNT")))), liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "You have successfully registered your Liquid Securities Account."))), !liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RegisterLiquidSteps, {
+    noScroll: true
+  })), !liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "You can also check our step by step guide video", ' ', /*#__PURE__*/React.createElement(SpanButton, {
+    onlyText: true,
+    onClick: () => setIsVideoOpen(true),
+    style: {
+      color: 'inherit'
+    },
+    urlLink: true
+  }, "here"), "."), /*#__PURE__*/React.createElement(Video, {
+    src: require('./assets/video.mp4'),
+    isVideoOpen: true,
+    noPlayButton: true,
+    play: isVideoOpen,
+    onClose: () => setIsVideoOpen(false)
+  }))), !isUpdatingUser && !error && !liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Formik, {
+    initialValues: initialValues,
+    validationSchema: validationSchema,
+    onSubmit: handleOnSubmit
+  }, ({
+    values,
+    errors,
+    touched,
+    handleChange,
+    handleBlur
+  }) => {
+    const submitDisabled = !values.liquidId;
+    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true
+    }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+      id: "liquid-id",
+      name: "liquidId",
+      type: "input",
+      label: "AMP ID",
+      value: values.liquidId,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: !!errors.liquidId,
+      touched: !!touched.liquidId
+    }), /*#__PURE__*/React.createElement(FormError, {
+      show: errors.liquidId && touched.liquidId
+    }, errors.liquidId))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true,
+      noPaddingHorizontal: true,
+      center: true
+    }), !liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "230px",
+      type: "submit",
+      disabled: submitDisabled || isUpdatingUser || liquid_network.GAID
+    }, "REGISTER")));
+  })), (isUpdatingUser || error) && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    borderTop: true,
+    borderBottom: true,
+    center: true
+  }, /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+    noFailedIcon: true,
+    relative: true,
+    refresh: isUpdatingUser && 'Please wait while we verify your AMP ID.',
+    failed: error
+  })), error && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(RefreshButton, {
+    onClick: onRefreshClick
+  }, "TRY AGAIN")), liquid_network.GAID && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true
+  }, /*#__PURE__*/React.createElement(ToDoTask, {
+    title: "Liquid Securities Account",
+    message: "Your address is whitelisted",
+    state: ToDoTaskState.APPROVED,
+    icon: iconsMap.check
+  })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true
+  }, /*#__PURE__*/React.createElement(TextButton, {
+    onClick: () => {
+      deleteRedirectCookieAndNavigate();
+    }
+  }, liquid_network.GAID ? 'Continue' : "I'll do this later")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: "I don't have an AMP ID, what now?",
+      content: "You can install the 'Green: Bitcoin Wallet' and create an AMP Wallet in minutes. Please follow the steps as explained above."
+    }]
+  })), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'What is Liquid anyhow?',
+      content: "Liquid is a blockchain used by STOKR. It's how your investments and assets are stored."
+    }]
+  })), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: "What if I'd like to do this later?",
+      content: 'You can always skip this step and complete it from the Checklist in your Investor Dashboard at a later point in time. However, you will not be able to invest before doing so.'
+    }]
+  }))));
+};
+export default RegisterLiquid;

package/dist/RegisterModal/RegisterModal.js

@@ -0,0 +1,143 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Modal, ModalInner, ModalLinkWrap, ModalLink } from 'components/Modal/Modal';
+import Form, { FormField, FormInfo, FormError } from 'components/Form/Form';
+import Text from 'components/Text/Text.styles';
+import Input from 'components/Input/Input';
+import InputPassword from 'components/Input/InputPassword';
+import Checkbox from 'components/Checkbox/Checkbox';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+export class RegisterModal extends PureComponent {
+  initialValues = {
+    email: '',
+    password: '',
+    newsletter: false
+  };
+  validationSchema = Yup.object().shape({
+    email: Yup.string().email('Email is not valid').required('Email is required'),
+    password: Yup.string().required('Password is required'),
+    newsletter: Yup.bool() // .oneOf([true], 'Newsletter accept is required'),
+  });
+
+  render() {
+    const {
+      isModalOpen,
+      onModalClose,
+      onFormSend,
+      onModalSwitch
+    } = 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, "Start investing today"), /*#__PURE__*/React.createElement("p", null, "Create a free STOKR account to invest in exciting startups."))), /*#__PURE__*/React.createElement(ModalInner, {
+      modalBot: true
+    }, /*#__PURE__*/React.createElement(ModalLinkWrap, null, "Already have an account?", ' ', /*#__PURE__*/React.createElement(ModalLink, {
+      as: "button",
+      onClick: onModalSwitch
+    }, "Log in")))), /*#__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,
+      handleChange,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched
+    }) => {
+      const onChangeWithTouch = e => {
+        const field = e.target;
+        setFieldValue(field.name, field.value, false);
+        setFieldTouched(field.name);
+      };
+      const submitDisabled = !touched.email || !touched.password || !!errors.email || !!errors.password;
+      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPadding: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+        id: "sign-up-email",
+        name: "email",
+        type: "email",
+        label: "Your email",
+        value: values.email,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        error: !!errors.email,
+        touched: !!touched.email
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.email && touched.email
+      }, errors.email))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormInfo, null, "Your email will never be shared and is only visible to you.")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(InputPassword, {
+        id: "sign-up-password",
+        name: "password",
+        type: "password",
+        label: "Password",
+        value: values.password,
+        onChange: onChangeWithTouch,
+        onBlur: handleBlur,
+        error: !!errors.password,
+        touched: !!touched.password,
+        info: "Password input popup",
+        showStrength: true
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.password && touched.password
+      }, errors.password))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormInfo, null, "2 factor authentication can be set up later from your account settings")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Checkbox, {
+        id: "sign-up-newsletter",
+        name: "newsletter",
+        text: "I wish to receive news and updates from STOKR",
+        value: "yes",
+        checked: !!values.newsletter,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        error: !!errors.newsletter,
+        touched: !!touched.newsletter
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.newsletter && touched.newsletter
+      }, errors.newsletter))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "submit",
+        fluid: true,
+        disabled: submitDisabled
+      }, "Create account")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingBottom: true,
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/React.createElement(FormInfo, {
+        center: true
+      }, 'By signing up for STOKR, you agree to our ', /*#__PURE__*/React.createElement(Link, {
+        to: "#"
+      }, "Terms of Service."))));
+    })))));
+  }
+}
+RegisterModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired
+};
+export default RegisterModal;

package/dist/RegisterModal/RegisterModal.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RegisterModal } from './RegisterModal';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Register Modal',
+  component: RegisterModal,
+  argTypes: {
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: true,
+      required: true
+    },
+    onModalClose: {
+      type: 'function',
+      action: 'onModalClose',
+      required: true
+    },
+    onFormSend: {
+      type: 'function',
+      action: 'onFormSend',
+      required: true
+    },
+    onModalSwitch: {
+      type: 'function',
+      action: 'onModalSwitch',
+      required: true
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RegisterModal, args));
+export const RegisterModalDefault = Template.bind({});
+RegisterModalDefault.args = {};
+
+//doublecheck:
+// here story input works, why not on other inputs?

package/dist/RequestDataBox/RequestDataBox.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'components/Button/Button.styles';
+import { Box, Title, Subtitle } from './RequestDataBox.styles';
+export const RequestDataBox = ({
+  title,
+  subtitle,
+  onClick
+}) => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Subtitle, null, subtitle)), /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: onClick
+}, title));
+RequestDataBox.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};
+RequestDataBox.defaultProps = {
+  onClick: () => {}
+};
+export default RequestDataBox;

package/dist/RequestDataBox/RequestDataBox.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import RequestDataBox from './RequestDataBox';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/RequestDataBox',
+  component: RequestDataBox,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    subtitle: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    onClick: {
+      type: 'function',
+      action: 'onClick'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RequestDataBox, args));
+export const RequestDataBoxExample = Template.bind({});
+RequestDataBoxExample.args = {
+  title: 'A Title',
+  subtitle: 'A Subtitle'
+};

package/dist/RequestDataBox/RequestDataBox.styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const Box = styled.div`
+  border: 1px solid ${props => theme.cLightGrey};
+  padding: 20px 24px;
+
+  & > div {
+    margin-bottom: 12px;
+
+    ${rwd.Medium`
+      margin-bottom: 0;
+    `}
+  }
+
+  ${rwd.Medium`
+    padding: 36px 48px;
+    display: flex;
+    justify-content: space-between;
+  `}
+
+  & + & {
+    border-top: none;
+  }
+`;
+export const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-bottom: 2px;
+  letter-spacing: 0.6px;
+`;
+export const Subtitle = styled.div`
+  font-size: 9px;
+  font-style: italic;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+`;
+
+//merge: font-style: italic added from VD

package/dist/RiskQuestionnaire/RiskQuestionnaireContext.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import axios from '../../model/axios';
+import PropTypes from 'prop-types';
+export const RiskQuestionnaireContext = /*#__PURE__*/React.createContext();
+export class RiskQuestionnaireProvider extends Component {
+  state = {
+    waiting: true,
+    error: null,
+    questionnaire: null,
+    success: false,
+    id: null
+  };
+  componentDidMount() {
+    this.getData();
+  }
+  getData = async () => {
+    try {
+      const result = await axios({
+        method: 'POST',
+        url: `compilance/risk-questionnaire`
+      });
+      this.onGetDataSuccess(result.data);
+    } catch (error) {
+      console.log(`Error fetching risk questionnaire: ${error}`);
+      this.onGetDataError(error.message);
+    }
+  };
+  sendData = questionnaire => {
+    this.setState({
+      waiting: true,
+      error: null,
+      success: false
+    });
+    const {
+      updateUser
+    } = this.props;
+    return new Promise(async (resolve, reject) => {
+      try {
+        await axios({
+          method: 'POST',
+          url: `compilance/user-risk-compilance/create`,
+          data: {
+            riskQuestionnaireId: questionnaire._id
+          }
+        });
+        await updateUser({
+          is_risk_questionnaire_finished: true
+        });
+        resolve();
+      } catch (error) {
+        console.log(`Error setting user risk questionnaire status: ${error}`);
+        this.onSendDataError('Something went wrong. Please try again.');
+        reject(error);
+      }
+    });
+  };
+  onGetDataSuccess = data => {
+    const {
+      updateSteps
+    } = this.props;
+    updateSteps(data.questionSet);
+    this.setState({
+      waiting: false,
+      questionnaire: data,
+      id: data._id
+    });
+  };
+  onGetDataError = error => {
+    this.setState({
+      waiting: false,
+      error
+    });
+  };
+  onSendDataSuccess = () => {
+    this.setState({
+      waiting: false,
+      success: true
+    });
+  };
+  onSendDataError = error => {
+    this.setState({
+      waiting: false,
+      error
+    });
+  };
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      waiting,
+      error,
+      questionnaire,
+      success
+    } = this.state;
+    return /*#__PURE__*/React.createElement(RiskQuestionnaireContext.Provider, {
+      value: {
+        waiting,
+        error,
+        questionnaire,
+        sendQuestionnaire: this.sendData.bind(this, questionnaire),
+        success
+      }
+    }, children);
+  }
+}
+RiskQuestionnaireProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  updateSteps: PropTypes.func.isRequired
+};
+export const RiskQuestionnaireConsumer = RiskQuestionnaireContext.Consumer;

package/dist/RiskQuestionnaire/_styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro';
+export const RiskStep = styled.div`
+  position: relative;
+  height: 100%;
+`;
+export default RiskStep;

package/dist/SEO/SEO.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+export function SEO({
+  description,
+  lang,
+  meta,
+  keywords,
+  title,
+  author
+}) {
+  return /*#__PURE__*/React.createElement(Helmet, {
+    htmlAttributes: {
+      lang
+    },
+    title: title,
+    titleTemplate: "STOKR \u2022 %s",
+    meta: [{
+      name: 'description',
+      content: description
+    }, {
+      property: 'og:title',
+      content: title
+    }, {
+      property: 'og:description',
+      content: description
+    }, {
+      property: 'og:type',
+      content: 'website'
+    }, {
+      name: 'twitter:card',
+      content: 'summary'
+    }, {
+      name: 'twitter:creator',
+      content: author
+    }, {
+      name: 'twitter:title',
+      content: title
+    }, {
+      name: 'twitter:description',
+      content: description
+    }].concat(keywords.length > 0 ? {
+      name: 'keywords',
+      content: keywords.join(', ')
+    } : []).concat(meta)
+  });
+}
+SEO.defaultProps = {
+  lang: 'en',
+  meta: [],
+  keywords: [],
+  description: '',
+  author: ''
+};
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.instanceOf(Array),
+  keywords: PropTypes.arrayOf(PropTypes.string),
+  title: PropTypes.string.isRequired,
+  author: PropTypes.string
+};
+export default SEO;