@stokr/components-library 0.5.6 → 0.5.8

package/dist/components/Checklist/UserChecklist.js

@@ -0,0 +1,274 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserChecklist = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ToDoList = _interopRequireWildcard(require("components/ToDoList/ToDoList"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var UserChecklist = function UserChecklist(props) {
+  var _user$countryObj;
+  var _props$user = props.user,
+    user = _props$user === void 0 ? {} : _props$user,
+    additionalTasks = props.additionalTasks,
+    redirectCookie = props.redirectCookie,
+    getTasksCount = props.getTasksCount,
+    useRelativePath = props.useRelativePath;
+  var isFromAllowedCountry = (_user$countryObj = user.countryObj) === null || _user$countryObj === void 0 ? void 0 : _user$countryObj.isAllowed;
+  //const isFromAllowedCountry = isFromAllowedCountryFunction(user.country)
+
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    mandatoryTasks = _useState2[0],
+    setmandatoryTasks = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mandatoryTasksCount = _useState4[0],
+    setmandatoryTasksCount = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    walletTasks = _useState6[0],
+    setwalletTasks = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    walletTasksCount = _useState8[0],
+    setwalletTasksCount = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    optionalTasks = _useState10[0],
+    setoptionalTasks = _useState10[1];
+  (0, _react.useEffect)(function () {
+    generateTodos(user);
+  }, []);
+  (0, _react.useEffect)(function () {
+    //calculate mandatory count from tasks
+    if (mandatoryTasks.length > 0) {
+      if (isFromAllowedCountry) {
+        var _mandatoryTasksCount = mandatoryTasks.reduce(function (count, task) {
+          if (task.state === _ToDoList.ToDoTaskState.APPROVED || task.state === _ToDoList.ToDoTaskState.IN_PROGRESS) {
+            return count;
+          }
+          return count + 1;
+        }, 0);
+        setmandatoryTasksCount(_mandatoryTasksCount);
+      }
+    }
+  }, [mandatoryTasks, isFromAllowedCountry]);
+  (0, _react.useEffect)(function () {
+    //calculate wallet count from tasks
+    if (walletTasks.length > 0) {
+      if (isFromAllowedCountry) {
+        var _walletTasksCount = walletTasks.reduce(function (count, task) {
+          if (task.title === 'Liquid Address') {
+            if (task.state === _ToDoList.ToDoTaskState.APPROVED || task.state === _ToDoList.ToDoTaskState.IN_PROGRESS) {
+              return count;
+            }
+            return count + 1;
+          }
+          return count;
+        }, 0);
+        setwalletTasksCount(_walletTasksCount);
+      }
+    }
+  }, [walletTasks, isFromAllowedCountry]);
+  (0, _react.useEffect)(function () {
+    //if you provide function to get tasks count, pass the counter into the function
+    if (getTasksCount) {
+      getTasksCount({
+        mandatoryTasksCount: mandatoryTasksCount,
+        walletTasksCount: walletTasksCount
+      });
+    }
+  }, [mandatoryTasksCount, walletTasksCount, getTasksCount]);
+  var generateTodos = function generateTodos(userData) {
+    var country = user.country,
+      entity_name = user.entity_name,
+      investor_eth_addresses = user.investor_eth_addresses,
+      investor_algo_addresses = user.investor_algo_addresses,
+      countryObj = user.countryObj,
+      _user$liquid_network = user.liquid_network,
+      liquid_network = _user$liquid_network === void 0 ? {} : _user$liquid_network,
+      is_risk_questionnaire_finished = user.is_risk_questionnaire_finished,
+      kyc_status = user.kyc_status,
+      KYCDocuments = user.KYCDocuments,
+      lemonwayWallet = user.lemonwayWallet;
+    var platformURL = useRelativePath === true ? '' : 'https://signup.stokr.info';
+    if (entity_name) {
+      setmandatoryTasks([{
+        title: 'Verify Identity',
+        message: 'You will be contacted by our compliance team dedicated to legal entities.',
+        state: _ToDoList.ToDoTaskState.APPROVED
+        // link: '',
+      }, {
+        title: 'Risk Questionnaire',
+        message: is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
+        state: is_risk_questionnaire_finished ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: "".concat(platformURL, "/risk-questionnaire")
+      }]);
+      setwalletTasks([{
+        title: 'Liquid Address',
+        message: liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
+        state: liquid_network && liquid_network.GAID ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: "".concat(platformURL, "/register-liquid-securities")
+      }, {
+        title: 'Ethereum Address',
+        message: investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
+        state: investor_eth_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        //link: '', //`${platformURL}/register-ethereum`,
+        disabled: true
+      }, {
+        title: 'Algorand Address',
+        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
+        state: investor_algo_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        //: '',
+        openModal: _ToDoList.ToDoModal.ALGO
+      }]);
+    } else {
+      setmandatoryTasks([{
+        title: 'Country of Residence',
+        message: !country ? 'Please select your country of residence' : !isFromAllowedCountry ? 'STOKR is not yet available where you live' : 'Your country of residence has been registered',
+        state: !country ? _ToDoList.ToDoTaskState.SKIPPED : !isFromAllowedCountry ? _ToDoList.ToDoTaskState.DENIED : _ToDoList.ToDoTaskState.APPROVED,
+        link: "".concat(platformURL, "/country-of-residence")
+      }, {
+        title: 'Verify Identity',
+        message: getVerifyIdentityChecklist(isFromAllowedCountry, user).message,
+        state: getVerifyIdentityChecklist(isFromAllowedCountry, user).state,
+        link: getVerifyIdentityChecklist(isFromAllowedCountry, user).hasLink && "".concat(platformURL, "/verify-identity")
+      }, {
+        title: 'Risk Questionnaire',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : is_risk_questionnaire_finished ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: isFromAllowedCountry && "".concat(platformURL, "/risk-questionnaire")
+      }]);
+      setwalletTasks([{
+        title: 'Liquid Address',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : liquid_network && liquid_network.GAID ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        link: isFromAllowedCountry && "".concat(platformURL, "/register-liquid-securities")
+      }, {
+        title: 'Ethereum Address',
+        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
+        state: !isFromAllowedCountry ? _ToDoList.ToDoTaskState.NOT_AVAILABLE : investor_eth_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        disabled: true
+      }, {
+        title: 'Algorand Address',
+        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
+        state: investor_algo_addresses ? _ToDoList.ToDoTaskState.APPROVED : _ToDoList.ToDoTaskState.SKIPPED,
+        openModal: _ToDoList.ToDoModal.ALGO
+        //link: '',
+      }]);
+
+      setoptionalTasks([(countryObj === null || countryObj === void 0 ? void 0 : countryObj.SEPA) && {
+        title: 'Invest in Euro',
+        message: getInvestInEuroChecklist(isFromAllowedCountry, user).message,
+        state: getInvestInEuroChecklist(isFromAllowedCountry, user).state,
+        link: isFromAllowedCountry && kyc_status && kyc_status !== 'Draft' && "".concat(platformURL, "/verify-identity")
+      }, {
+        title: 'Tax ID',
+        message: !userData.taxId ? 'To invest in certain offerings, you need to provide your tax ID' : userData.taxId && 'You tax ID is submitted',
+        state: !userData.taxId ? _ToDoList.ToDoTaskState.SKIPPED : userData.taxId && _ToDoList.ToDoTaskState.APPROVED,
+        openModal: _ToDoList.ToDoModal.TAX_ID,
+        tooltip: "STOKR is an entity regulated by the Luxembourg regulator CSSF and has implemented the Common Reporting Standard (the \u201CCRS\u201D) through the law of 18 December 2015 ( the \u201CCRS Act\u201D) and some Luxembourg based entities are likely to be treated as a Luxembourg Reporting Financial Institution. \nSome of our offerings fall under this regulation. Before your invest in these offerings, we will ask you to provide your tax ID. This information is not mandatory for all our offerings.\nYour tax ID information will never be sold, and never shown publicly. We just use it to make sure you're legally allowed to invest through the STOKR interface."
+      }]);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ToDoList.default
+  // successText="Almost done!"
+  , {
+    mandatoryTasks: mandatoryTasks,
+    walletsTasks: walletTasks,
+    optionalTasks: optionalTasks,
+    additionalTasks: additionalTasks,
+    redirectCookie: redirectCookie,
+    mandatoryTasksCount: mandatoryTasksCount,
+    walletsTasksCount: walletTasksCount,
+    pendingTasksCount: mandatoryTasksCount + walletTasksCount
+  });
+};
+exports.UserChecklist = UserChecklist;
+var getVerifyIdentityChecklist = function getVerifyIdentityChecklist(isFromAllowedCountry, user) {
+  var kyc_status = user.kyc_status;
+  var message;
+  var state;
+  var hasLink = false;
+  if (!isFromAllowedCountry) {
+    message = 'Sorry, you are living in a country where this is not available';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
+    message = 'Scan your ID to get the green light from the anti-fraud squad';
+    state = _ToDoList.ToDoTaskState.SKIPPED;
+    hasLink = true;
+  } else if (kyc_status.toUpperCase() === 'REJECTED' || kyc_status.toUpperCase() === 'ESCALATED' || kyc_status.toUpperCase() === 'IN PROGRESS' || kyc_status.toUpperCase() === 'INCONCLUSIVE' || kyc_status.toUpperCase() === 'APPROVED' || kyc_status.toUpperCase() === 'PENDING') {
+    message = 'Our anti-fraud squad is still working';
+    state = _ToDoList.ToDoTaskState.IN_PROGRESS;
+  } else if (kyc_status.toUpperCase() === 'ACCEPTED') {
+    message = 'Your ID is verified';
+    state = _ToDoList.ToDoTaskState.APPROVED;
+  } else if (kyc_status.toUpperCase() === 'REAPPLY') {
+    message = 'Document unreadable. Reapply with new ID';
+    state = _ToDoList.ToDoTaskState.DENIED;
+    hasLink = true;
+  } else if (kyc_status.toUpperCase() === 'DENIED') {
+    message = 'There seems to be a problem. The compliance team will contact you.';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  }
+  return {
+    message: message,
+    state: state,
+    hasLink: hasLink
+  };
+};
+var getInvestInEuroChecklist = function getInvestInEuroChecklist(isFromAllowedCountry, user) {
+  var _KYCDocuments$status, _KYCDocuments$status2, _KYCDocuments$status3;
+  var kyc_status = user.kyc_status,
+    KYCDocuments = user.KYCDocuments,
+    lemonwayWallet = user.lemonwayWallet;
+  var message;
+  var state;
+  if (!isFromAllowedCountry) {
+    message = 'Sorry, you are living in a country where this is not available';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if ((lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '6') {
+    message = 'Your document is verified';
+    state = _ToDoList.ToDoTaskState.APPROVED;
+  } else if ((lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '3') {
+    message = 'There seems to be a problem. The compliance team will contact you';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
+    message = 'In order to pay in EURO you need to verify your identity and provide a second identity document';
+    state = _ToDoList.ToDoTaskState.NOT_AVAILABLE;
+  } else if (!KYCDocuments || (kyc_status === null || kyc_status === void 0 ? void 0 : kyc_status.toUpperCase()) === 'ACCEPTED') {
+    message = 'In order to pay in EURO you need to provide a second identity document';
+    state = _ToDoList.ToDoTaskState.SKIPPED;
+  } else if (((_KYCDocuments$status = KYCDocuments.status) === null || _KYCDocuments$status === void 0 ? void 0 : _KYCDocuments$status.toUpperCase()) === 'PENDING' || ((_KYCDocuments$status2 = KYCDocuments.status) === null || _KYCDocuments$status2 === void 0 ? void 0 : _KYCDocuments$status2.toUpperCase()) === 'APPROVED' && !lemonwayWallet || (lemonwayWallet === null || lemonwayWallet === void 0 ? void 0 : lemonwayWallet.STATUS) === '5') {
+    message = 'The Lemonway team is having a look. This usually takes up to 24 hours';
+    state = _ToDoList.ToDoTaskState.IN_PROGRESS;
+  } else if (((_KYCDocuments$status3 = KYCDocuments.status) === null || _KYCDocuments$status3 === void 0 ? void 0 : _KYCDocuments$status3.toUpperCase()) === 'REJECTED') {
+    message = 'It seems there was a problem with your second identity document. Please try again or contact the compliance team at compliance@stokr.io';
+    state = _ToDoList.ToDoTaskState.DENIED;
+  }
+  return {
+    message: message,
+    state: state
+  };
+};
+UserChecklist.propTypes = {
+  user: _propTypes.default.object.isRequired,
+  additionalTasks: _propTypes.default.any,
+  redirectCookie: _propTypes.default.bool,
+  getTasksCount: _propTypes.default.func,
+  useRelativePath: _propTypes.default.bool
+};
+var _default = UserChecklist;
+exports.default = _default;

package/dist/components/Checklist/UserChecklist.stories.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserChecklist_user_dev = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _UserChecklist = _interopRequireDefault(require("./UserChecklist"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Checklist',
+  component: _UserChecklist.default,
+  argTypes: {
+    user: {
+      type: 'object',
+      defaultValue: {},
+      required: true
+    },
+    additionalTasks: {
+      type: 'node',
+      defaultValue: null
+    },
+    redirectCookie: {
+      type: 'bool',
+      defaultValue: false
+    },
+    useRelativePath: {
+      type: 'bool',
+      defaultValue: false
+    },
+    getTasksCount: {
+      type: 'function',
+      action: 'getTasksCount'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_UserChecklist.default, args));
+};
+var userDev = {
+  _id: '61851acd5b9a890013297b12',
+  email: 'user-dev@email.com',
+  user_type: 'investor',
+  name: 'bilal',
+  lastname: 'dev',
+  username: 'user-dev',
+  entity_name: '',
+  active: true,
+  country: 'Germany',
+  //is_risk_questionnaire_finished: true,
+  kyc_status: 'Accepted',
+  investor_algo_addresses: [{
+    name: 'another test',
+    address: 'TVNC3QHY5LXKBMX7RGJG3B25EJPW73V5WMMEMUB33V2HEPEA2H77UPOYTQ',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'my algo test',
+    address: 'YFQD2RZIIZQSO67F6MG3DJVXLMF2QU4EKGBPVXVIF3XTLKGWUZ36WMG56A',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test algosigner',
+    address: 'Y4UGMCSV3B43Y7QAM2VUVPETDDO5JVHDRB3ZC5MBF2VTUTCP4X437A65JU',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test new address',
+    address: 'B36KBEDYKBUSEMNRITZFFE7VINEPMP5MJTNUCRM5S5AP6GNWMWW4B5PEQI',
+    whitelistedAssets: ['20918100', '92363258']
+  }, {
+    address: 'E3Q6B5Q7JHFCEWBGGXJGEMXVAL6MSJBUHCGURZRMASRTJFDD6RQTJHPF4A',
+    whitelistedAssets: ['20918100', '20013569']
+  }, {
+    name: 'test 30/05',
+    address: 'RTQWXHRWZCBT5FF474T4DTL3VRVHERY3Q6LWLMPP24IXNOYIXBDQXJ2Z6M',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'test info 01/06',
+    address: 'U4EIZEMPRGC77P6HJSFCLWYE4NUMNILU5DBZCKV44QMJ3TQOADRETVVAZU',
+    whitelistedAssets: ['20918100', '92363258']
+  }],
+  liquid_network: {
+    GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    dt: '2021-11-19T16:19:33.390Z',
+    '2812e39a-ad94-4368-9db4-9d98c1c00f38': {
+      id: 6020,
+      GAID: 'GA2wpGUWe8uDz9VEdNXJ5v17UwD25f',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [3],
+      creator: 22,
+      whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f']
+    },
+    whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr'],
+    '35c3c8ed-59a3-4a87-9612-b48236aeab3b': {
+      id: 273,
+      GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [24],
+      creator: 62,
+      whitelisted_gaids: ['GA2skwb5v5nKaaAKNd61knuRJC47Jr']
+    }
+  },
+  pass_reset: '',
+  taxId: '4355',
+  countryObj: {
+    _id: '630e0361b8d1fb0007929bc4',
+    name: 'Germany',
+    ISO2: 'DE',
+    ISO3: 'DEU',
+    isAllowed: true,
+    SEPA: true,
+    'infinite-fleet': true,
+    'la-boulangerie': true
+  }
+};
+var UserChecklist_user_dev = Template.bind({});
+exports.UserChecklist_user_dev = UserChecklist_user_dev;
+UserChecklist_user_dev.args = {
+  user: userDev,
+  useRelativePath: true,
+  getTasksCount: function getTasksCount(data) {
+    console.log(data);
+  }
+};

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ComponentScroll = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCustomScrollbars = require("react-custom-scrollbars-2");
+var _ComponentScroll = require("./ComponentScroll.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var ComponentScroll = function ComponentScroll(props) {
+  var children = props.children,
+    noMobileScroll = props.noMobileScroll,
+    autoHeight = props.autoHeight,
+    autoHeightMax = props.autoHeightMax,
+    autoHeightMin = props.autoHeightMin,
+    offset = props.offset,
+    barPadding = props.barPadding,
+    topPadding = props.topPadding,
+    className = props.className,
+    handleScroll = props.handleScroll;
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearTimeout(timer);
+    };
+  }, []);
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    scroll = _useState2[0],
+    setScroll = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    debounce = _useState4[0],
+    setDebounce = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timer = _useState6[0],
+    setTimer = _useState6[1];
+  var setRef = function setRef(el) {
+    if (scroll) return;
+    setScroll(el);
+  };
+  var _onMouseMove = function onMouseMove() {
+    if (!debounce) {
+      setDebounce(true);
+      refreshScrollBar();
+    }
+    clearTimeout(timer);
+    setTimer(setTimeout(onDebounce, 300));
+  };
+  var onDebounce = function onDebounce() {
+    setDebounce(false);
+    refreshScrollBar();
+  };
+  var refreshScrollBar = function refreshScrollBar() {
+    if (!scroll) return;
+    scroll.handleScroll();
+  };
+  var _onScroll = function onScroll(e) {
+    handleScroll && handleScroll(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.Container, {
+    className: className,
+    noMobileScroll: noMobileScroll
+  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Outer, {
+    offset: offset,
+    barPadding: barPadding,
+    topPadding: topPadding
+  }, /*#__PURE__*/_react.default.createElement(_reactCustomScrollbars.Scrollbars, {
+    ref: function ref() {
+      return setRef();
+    },
+    style: {
+      height: '100%'
+    },
+    renderTrackHorizontal: function renderTrackHorizontal(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackH, props);
+    },
+    renderThumbHorizontal: function renderThumbHorizontal(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbH, props);
+    },
+    renderTrackVertical: function renderTrackVertical(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackV, props);
+    },
+    renderThumbVertical: function renderThumbVertical(props) {
+      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbV, props);
+    },
+    hideTracksWhenNotNeeded: true,
+    onMouseMove: function onMouseMove() {
+      return _onMouseMove();
+    },
+    onScroll: function onScroll(e) {
+      return _onScroll(e.target.value);
+    },
+    autoHeight: autoHeight,
+    autoHeightMax: autoHeightMax,
+    autoHeightMin: autoHeightMin,
+    universal: true
+  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Inner, {
+    offset: offset
+  }, children))));
+};
+exports.ComponentScroll = ComponentScroll;
+ComponentScroll.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
+  noMobileScroll: _propTypes.default.bool,
+  autoHeight: _propTypes.default.bool,
+  autoHeightMax: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  autoHeightMin: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  barPadding: _propTypes.default.number,
+  topPadding: _propTypes.default.number,
+  offset: _propTypes.default.number,
+  handleScroll: _propTypes.default.func
+};
+ComponentScroll.defaultProps = {
+  className: '',
+  noMobileScroll: false,
+  autoHeight: false,
+  autoHeightMax: 0,
+  autoHeightMin: 0,
+  barPadding: 32,
+  topPadding: 0,
+  offset: 0,
+  handleScroll: null
+};
+var _default = ComponentScroll;
+exports.default = _default;

package/dist/components/ComponentScroll/ComponentScroll.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScrollAutoHeight2000 = exports.ScrollAutoHeight1000 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentScroll = require("./ComponentScroll");
+var _SvgIcons = require("components/SvgIcons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/ComponentScroll',
+  component: _ComponentScroll.ComponentScroll,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    className: {
+      type: 'string',
+      defaultValue: ''
+    },
+    noMobileScroll: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    autoHeight: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    autoHeightMax: {
+      type: 'number or string',
+      defaultValue: 0
+    },
+    autoHeightMin: {
+      type: 'number or string',
+      defaultValue: 0
+    },
+    barPadding: {
+      type: 'number',
+      defaultValue: 32
+    },
+    topPadding: {
+      type: 'number',
+      defaultValue: 0
+    },
+    offset: {
+      type: 'number',
+      defaultValue: 0
+    },
+    handleScroll: {
+      type: 'function',
+      defaultValue: null
+    },
+    setRef: {
+      type: 'function',
+      action: 'setRef'
+    },
+    onMouseMove: {
+      type: 'function',
+      action: 'mouseMove'
+    },
+    onDebounce: {
+      type: 'function',
+      action: 'debounceRefresh'
+    },
+    refreshScrollBar: {
+      type: 'function',
+      action: 'refreshScrollbar'
+    },
+    onScroll: {
+      type: 'function',
+      action: 'handleScroll'
+    }
+  },
+  parameters: {
+    backgrounds: {
+      default: 'grey'
+    }
+  }
+}; //making default background grey in story as this reveals height /offset properties ..
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args);
+};
+var ScrollAutoHeight1000 = Template.bind({});
+exports.ScrollAutoHeight1000 = ScrollAutoHeight1000;
+ScrollAutoHeight1000.args = {
+  children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  autoHeight: true,
+  autoHeightMax: 1000,
+  autoHeightMin: 1000
+};
+var ScrollAutoHeight2000 = Template.bind({});
+exports.ScrollAutoHeight2000 = ScrollAutoHeight2000;
+ScrollAutoHeight2000.args = {
+  children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
+  autoHeight: true,
+  autoHeightMax: 2000,
+  autoHeightMin: 2000
+};