@aclymatepackages/modules 2.1.11 → 2.1.12

package/dist/components/PdlCompanySelect.js

@@ -53,6 +53,8 @@ const CompanySelectionChip = _ref => {
 const PdlCompanySelect = _ref2 => {
   let {
     onSelectCompany,
+    label = "Enter your company's name",
+    actionLabel = "Please select your company from these options",
     apiKey
   } = _ref2;
   const [inputValue, setInputValue] = (0, _react.useState)("");
@@ -94,7 +96,6 @@ const PdlCompanySelect = _ref2 => {
     } = _ref4;
     return selectedCompanyId === meta.id;
   }) || {};
-  console.log("selected company name: ", selectedCompanyName);
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 2,
@@ -103,7 +104,7 @@ const PdlCompanySelect = _ref2 => {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_atoms.TextField, {
     disabled: pdlFetchLoading,
-    label: "Enter your company's name",
+    label: label,
     value: inputValue,
     setValue: setInputValue,
     onKeyPress: _ref5 => {
@@ -131,7 +132,7 @@ const PdlCompanySelect = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h6",
     align: "center"
-  }, "Please select your company from these options")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, actionLabel)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     container: true,
     spacing: 2,

package/package.json

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

package/src/components/PdlCompanySelect.js

@@ -35,7 +35,12 @@ const CompanySelectionChip = ({
   </Grid>
 );
 
-const PdlCompanySelect = ({ onSelectCompany, apiKey }) => {
+const PdlCompanySelect = ({
+  onSelectCompany,
+  label = "Enter your company's name",
+  actionLabel = "Please select your company from these options",
+  apiKey,
+}) => {
   const [inputValue, setInputValue] = useState("");
   const [matchingCompanies, setMatchingCompanies] = useState([]);
   const [inputComplete, setInputComplete] = useState(false);
@@ -74,14 +79,13 @@ const PdlCompanySelect = ({ onSelectCompany, apiKey }) => {
 
   const { name: selectedCompanyName } =
     matchingCompanies.find(({ meta }) => selectedCompanyId === meta.id) || {};
-  console.log("selected company name: ", selectedCompanyName);
 
   return (
     <Grid container spacing={2} direction="column">
       <Grid item>
         <TextField
           disabled={pdlFetchLoading}
-          label="Enter your company's name"
+          label={label}
           value={inputValue}
           setValue={setInputValue}
           onKeyPress={({ key }) => {
@@ -112,7 +116,7 @@ const PdlCompanySelect = ({ onSelectCompany, apiKey }) => {
         <>
           <Grid item>
             <Typography variant="h6" align="center">
-              Please select your company from these options
+              {actionLabel}
             </Typography>
           </Grid>
           <Grid item container spacing={2} justifyContent="center">

package/dist/components/CompaniesAutocomplete.js

@@ -1,124 +0,0 @@
-"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 _formatters = require("@aclymatepackages/formatters");
-var _otherHelpers = require("@aclymatepackages/other-helpers");
-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 CompaniesAutocomplete = _ref => {
-  let {
-    setCompanyName,
-    onSelectCompany,
-    label,
-    variant = "outlined",
-    size = "medium",
-    disabled,
-    helperText = "",
-    id,
-    style,
-    textFieldProps,
-    pdlApiKey
-  } = _ref;
-  const [nextStepIsLoading, setNextStepIsLoading] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)("");
-  const [options, setOptions] = (0, _react.useState)([]);
-  const pdlClient = (0, _react.useMemo)(() => new _peopledatalabs.default({
-    apiKey: pdlApiKey
-  }), [pdlApiKey]);
-  const fetchCompanies = async value => {
-    setNextStepIsLoading(true);
-    const autocompleteParamsObj = {
-      field: "company",
-      text: value || inputValue,
-      size: 10,
-      pretty: true
-    };
-    return await pdlClient.autocomplete(autocompleteParamsObj).then(_ref2 => {
-      let {
-        data
-      } = _ref2;
-      const capitalizedCompanyNamesOptions = data.map(_ref3 => {
-        let {
-            name
-          } = _ref3,
-          otherProps = _objectWithoutProperties(_ref3, _excluded);
-        return _objectSpread({
-          name: (0, _formatters.ucFirstLetters)(name)
-        }, otherProps);
-      });
-      setNextStepIsLoading(false);
-      setOptions(capitalizedCompanyNamesOptions);
-      return data;
-    }).catch(() => setOptions([]));
-  };
-  const onInputChange = (_, newInputValue) => {
-    if (newInputValue === "I don't see my company") {
-      setNextStepIsLoading(false);
-      return setCompanyName(inputValue);
-    }
-    setNextStepIsLoading(false);
-    setInputValue(newInputValue);
-    if (newInputValue === "") {
-      return setOptions([]);
-    }
-    return fetchCompanies();
-  };
-  const isError = !!inputValue && (0, _otherHelpers.incorrectNameCheck)(inputValue, 60);
-  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    container: true,
-    spacing: 1,
-    direction: "column"
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Autocomplete, {
-    id: id || "companies-autocomplete",
-    freeSolo: true,
-    options: [...options, "I don't see my company"],
-    getOptionLabel: option => typeof option === "string" ? option : option.name || "",
-    filterOptions: option => option,
-    autoComplete: true,
-    includeInputInList: true,
-    disabled: disabled,
-    renderInput: params => /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
-      id: "companies-autocomplete-input"
-    }, params, {
-      label: label,
-      variant: variant,
-      error: isError,
-      size: size,
-      autoComplete: "off",
-      helperText: isError ? "This company name is not valid" : helperText || "",
-      style: style
-    }, textFieldProps)),
-    getOptionSelected: (option, value) => option === "" || option.name === value.name || option === value,
-    value: inputValue,
-    onChange: (_, newValue) => {
-      setOptions(newValue ? [newValue, ...options] : options);
-      return onSelectCompany(newValue);
-    },
-    onInputChange: onInputChange
-  })), nextStepIsLoading && /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, null)));
-};
-var _default = exports.default = CompaniesAutocomplete;

package/src/components/CompaniesAutocomplete.js

@@ -1,125 +0,0 @@
-import React, { useState, useMemo } from "react";
-import PDLJS from "peopledatalabs";
-
-import { LinearProgress, TextField, Autocomplete, Grid } from "@mui/material";
-
-import { ucFirstLetters } from "@aclymatepackages/formatters";
-import { incorrectNameCheck } from "@aclymatepackages/other-helpers";
-
-const CompaniesAutocomplete = ({
-  setCompanyName,
-  onSelectCompany,
-  label,
-  variant = "outlined",
-  size = "medium",
-  disabled,
-  helperText = "",
-  id,
-  style,
-  textFieldProps,
-  pdlApiKey,
-}) => {
-  const [nextStepIsLoading, setNextStepIsLoading] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [options, setOptions] = useState([]);
-
-  const pdlClient = useMemo(
-    () =>
-      new PDLJS({
-        apiKey: pdlApiKey,
-      }),
-    [pdlApiKey]
-  );
-
-  const fetchCompanies = async (value) => {
-    setNextStepIsLoading(true);
-    const autocompleteParamsObj = {
-      field: "company",
-      text: value || inputValue,
-      size: 10,
-      pretty: true,
-    };
-
-    return await pdlClient
-      .autocomplete(autocompleteParamsObj)
-      .then(({ data }) => {
-        const capitalizedCompanyNamesOptions = data.map(
-          ({ name, ...otherProps }) => ({
-            name: ucFirstLetters(name),
-            ...otherProps,
-          })
-        );
-        setNextStepIsLoading(false);
-        setOptions(capitalizedCompanyNamesOptions);
-        return data;
-      })
-      .catch(() => setOptions([]));
-  };
-
-  const onInputChange = (_, newInputValue) => {
-    if (newInputValue === "I don't see my company") {
-      setNextStepIsLoading(false);
-      return setCompanyName(inputValue);
-    }
-
-    setNextStepIsLoading(false);
-    setInputValue(newInputValue);
-    if (newInputValue === "") {
-      return setOptions([]);
-    }
-
-    return fetchCompanies();
-  };
-
-  const isError = !!inputValue && incorrectNameCheck(inputValue, 60);
-
-  return (
-    <Grid container spacing={1} direction="column">
-      <Grid item>
-        <Autocomplete
-          id={id || "companies-autocomplete"}
-          freeSolo
-          options={[...options, "I don't see my company"]}
-          getOptionLabel={(option) =>
-            typeof option === "string" ? option : option.name || ""
-          }
-          filterOptions={(option) => option}
-          autoComplete
-          includeInputInList
-          disabled={disabled}
-          renderInput={(params) => (
-            <TextField
-              id="companies-autocomplete-input"
-              {...params}
-              label={label}
-              variant={variant}
-              error={isError}
-              size={size}
-              autoComplete="off"
-              helperText={
-                isError ? "This company name is not valid" : helperText || ""
-              }
-              style={style}
-              {...textFieldProps}
-            />
-          )}
-          getOptionSelected={(option, value) =>
-            option === "" || option.name === value.name || option === value
-          }
-          value={inputValue}
-          onChange={(_, newValue) => {
-            setOptions(newValue ? [newValue, ...options] : options);
-            return onSelectCompany(newValue);
-          }}
-          onInputChange={onInputChange}
-        />
-      </Grid>
-      {nextStepIsLoading && (
-        <Grid item>
-          <LinearProgress />
-        </Grid>
-      )}
-    </Grid>
-  );
-};
-export default CompaniesAutocomplete;