@aclymatepackages/modules 2.1.7 → 2.1.8

package/dist/components/PdlCompanySelect.js

@@ -0,0 +1,156 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _peopledatalabs = _interopRequireDefault(require("peopledatalabs"));
+var _material = require("@mui/material");
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _atoms = require("@aclymatepackages/atoms");
+var _formatters = require("@aclymatepackages/formatters");
+const _excluded = ["name"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const CompanySelectionChip = _ref => {
+  let {
+    id,
+    name,
+    isSelected,
+    setSelectedCompanyId
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    label: name,
+    style: {
+      color: isSelected ? "white" : "inherit"
+    },
+    onClick: () => setSelectedCompanyId(currentId => currentId === id ? null : id),
+    icon: isSelected && /*#__PURE__*/_react.default.createElement(_Check.default, {
+      style: {
+        color: "white"
+      }
+    }),
+    color: isSelected ? "primary" : "default"
+  }));
+};
+const PdlCompanySelect = _ref2 => {
+  let {
+    onSelectCompany
+  } = _ref2;
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [matchingCompanies, setMatchingCompanies] = (0, _react.useState)([]);
+  const [inputComplete, setInputComplete] = (0, _react.useState)(false);
+  const [pdlFetchLoading, setPdlFetchLoading] = (0, _react.useState)(false);
+  const [selectedCompanyId, setSelectedCompanyId] = (0, _react.useState)(null);
+  const pdlClient = (0, _react.useMemo)(() => new _peopledatalabs.default({
+    apiKey: process.env.REACT_APP_PEOPLEDATALABS_API_KEY
+  }), []);
+  const fetchMatchingCompanies = async () => {
+    setPdlFetchLoading(true);
+    const {
+      data: matchingPdlCompanies
+    } = await pdlClient.autocomplete({
+      field: "company",
+      text: inputValue,
+      size: 10,
+      pretty: true
+    });
+    const capitalizedCompanies = matchingPdlCompanies.map(_ref3 => {
+      let {
+          name
+        } = _ref3,
+        otherProps = _objectWithoutProperties(_ref3, _excluded);
+      return _objectSpread({
+        name: (0, _formatters.ucFirstLetters)(name)
+      }, otherProps);
+    });
+    setPdlFetchLoading(false);
+    setMatchingCompanies(capitalizedCompanies);
+    return setInputComplete(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 2,
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_atoms.TextField, {
+    disabled: pdlFetchLoading,
+    label: "Enter your company's name",
+    value: inputValue,
+    setValue: setInputValue,
+    onKeyPress: _ref4 => {
+      let {
+        key
+      } = _ref4;
+      if (key === "Enter") {
+        return fetchMatchingCompanies();
+      }
+    },
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+        disabled: pdlFetchLoading,
+        onClick: fetchMatchingCompanies
+      }, pdlFetchLoading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+        size: 20
+      }) : /*#__PURE__*/_react.default.createElement(_Search.default, null)))
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    justifyContent: "center"
+  }), inputComplete && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, "Please select your company from these options")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    spacing: 2,
+    justifyContent: "center"
+  }, matchingCompanies.map((_ref5, idx) => {
+    let {
+      name,
+      meta
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement(CompanySelectionChip, _extends({
+      key: "company-list-item-".concat(idx),
+      name: name,
+      isSelected: selectedCompanyId === meta.id,
+      setSelectedCompanyId: setSelectedCompanyId
+    }, meta));
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    spacing: 2,
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, selectedCompanyId ? /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: () => onSelectCompany(selectedCompanyId)
+  }, "Choose this company") : /*#__PURE__*/_react.default.createElement(_material.Button, {
+    color: "primary",
+    onClick: () => onSelectCompany("none", inputValue)
+  }, "I don't see my company")))));
+};
+var _default = exports.default = PdlCompanySelect;

package/dist/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "IndustryAutocomplete", {
     return _IndustryAutocomplete.default;
   }
 });
+Object.defineProperty(exports, "PdlCompanySelect", {
+  enumerable: true,
+  get: function get() {
+    return _PdlCompanySelect.default;
+  }
+});
 Object.defineProperty(exports, "PlacesAutocomplete", {
   enumerable: true,
   get: function get() {
@@ -143,4 +149,5 @@ var _useChartWarningLabels = _interopRequireDefault(require("./components/useCha
 var _ReportSummaryBlock = _interopRequireDefault(require("./components/ReportSummaryBlock"));
 var _ReportGraphContentLayout = _interopRequireDefault(require("./components/ReportGraphContentLayout"));
 var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
+var _PdlCompanySelect = _interopRequireDefault(require("./components/PdlCompanySelect"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",

package/src/components/PdlCompanySelect.js

@@ -0,0 +1,150 @@
+import React, { useState, useMemo } from "react";
+import PDLJS from "peopledatalabs";
+
+import {
+  Grid,
+  Chip,
+  InputAdornment,
+  CircularProgress,
+  IconButton,
+  Button,
+  Typography,
+} from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+import SearchIcon from "@mui/icons-material/Search";
+
+import { TextField } from "@aclymatepackages/atoms";
+import { ucFirstLetters } from "@aclymatepackages/formatters";
+
+const CompanySelectionChip = ({
+  id,
+  name,
+  isSelected,
+  setSelectedCompanyId,
+}) => (
+  <Grid item>
+    <Chip
+      label={name}
+      style={{ color: isSelected ? "white" : "inherit" }}
+      onClick={() =>
+        setSelectedCompanyId((currentId) => (currentId === id ? null : id))
+      }
+      icon={isSelected && <CheckIcon style={{ color: "white" }} />}
+      color={isSelected ? "primary" : "default"}
+    />
+  </Grid>
+);
+
+const PdlCompanySelect = ({ onSelectCompany }) => {
+  const [inputValue, setInputValue] = useState("");
+  const [matchingCompanies, setMatchingCompanies] = useState([]);
+  const [inputComplete, setInputComplete] = useState(false);
+  const [pdlFetchLoading, setPdlFetchLoading] = useState(false);
+  const [selectedCompanyId, setSelectedCompanyId] = useState(null);
+
+  const pdlClient = useMemo(
+    () =>
+      new PDLJS({
+        apiKey: process.env.REACT_APP_PEOPLEDATALABS_API_KEY,
+      }),
+    []
+  );
+
+  const fetchMatchingCompanies = async () => {
+    setPdlFetchLoading(true);
+
+    const { data: matchingPdlCompanies } = await pdlClient.autocomplete({
+      field: "company",
+      text: inputValue,
+      size: 10,
+      pretty: true,
+    });
+
+    const capitalizedCompanies = matchingPdlCompanies.map(
+      ({ name, ...otherProps }) => ({
+        name: ucFirstLetters(name),
+        ...otherProps,
+      })
+    );
+
+    setPdlFetchLoading(false);
+    setMatchingCompanies(capitalizedCompanies);
+    return setInputComplete(true);
+  };
+
+  return (
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <TextField
+          disabled={pdlFetchLoading}
+          label="Enter your company's name"
+          value={inputValue}
+          setValue={setInputValue}
+          onKeyPress={({ key }) => {
+            if (key === "Enter") {
+              return fetchMatchingCompanies();
+            }
+          }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment>
+                <IconButton
+                  disabled={pdlFetchLoading}
+                  onClick={fetchMatchingCompanies}
+                >
+                  {pdlFetchLoading ? (
+                    <CircularProgress size={20} />
+                  ) : (
+                    <SearchIcon />
+                  )}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </Grid>
+      <Grid item container justifyContent="center"></Grid>
+      {inputComplete && (
+        <>
+          <Grid item>
+            <Typography variant="h6" align="center">
+              Please select your company from these options
+            </Typography>
+          </Grid>
+          <Grid item container spacing={2} justifyContent="center">
+            {matchingCompanies.map(({ name, meta }, idx) => (
+              <CompanySelectionChip
+                key={`company-list-item-${idx}`}
+                name={name}
+                isSelected={selectedCompanyId === meta.id}
+                setSelectedCompanyId={setSelectedCompanyId}
+                {...meta}
+              />
+            ))}
+          </Grid>
+          <Grid item container spacing={2} justifyContent="center">
+            <Grid item>
+              {selectedCompanyId ? (
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  onClick={() => onSelectCompany(selectedCompanyId)}
+                >
+                  Choose this company
+                </Button>
+              ) : (
+                <Button
+                  color="primary"
+                  onClick={() => onSelectCompany("none", inputValue)}
+                >
+                  I don't see my company
+                </Button>
+              )}
+            </Grid>
+          </Grid>
+        </>
+      )}
+    </Grid>
+  );
+};
+export default PdlCompanySelect;

package/src/index.js

@@ -18,6 +18,7 @@ import useChartWarningLabels from "./components/useChartWarningLabels";
 import ReportSummaryBlock from "./components/ReportSummaryBlock";
 import ReportGraphContentLayout from "./components/ReportGraphContentLayout";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
+import PdlCompanySelect from "./components/PdlCompanySelect";
 
 export {
   AccountingChart,
@@ -40,4 +41,5 @@ export {
   ReportSummaryBlock,
   ReportGraphContentLayout,
   EmissionsSummarySentence,
+  PdlCompanySelect,
 };