@aclymatepackages/modules 2.1.17 → 2.1.20

package/dist/components/PdlCompanySelect.js

@@ -1,6 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -16,7 +15,6 @@ var _atoms = require("@aclymatepackages/atoms");
 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); }
 const CompanySelectionChip = _ref => {
   let {
     id,
@@ -42,7 +40,8 @@ const CompanySelectionChip = _ref => {
 };
 const PdlCompanySelect = _ref2 => {
   let {
-    onSelectCompany,
+    onCompanyNotFound,
+    onCompanySelected,
     matchingFunction,
     label = "Enter your company's name",
     actionLabel = "Please select your company from these options"
@@ -52,6 +51,7 @@ const PdlCompanySelect = _ref2 => {
   const [inputComplete, setInputComplete] = (0, _react.useState)(false);
   const [pdlFetchLoading, setPdlFetchLoading] = (0, _react.useState)(false);
   const [selectedCompanyId, setSelectedCompanyId] = (0, _react.useState)(null);
+  const [nextStepLoading, setNextStepLoading] = (0, _react.useState)(false);
   const fetchMatchingCompanies = async () => {
     setPdlFetchLoading(true);
     const matchingCompanies = await matchingFunction(inputValue);
@@ -59,14 +59,19 @@ const PdlCompanySelect = _ref2 => {
     setMatchingCompanies(matchingCompanies);
     return setInputComplete(true);
   };
-  const {
-    name: selectedCompanyName
-  } = matchingCompanies.find(_ref3 => {
+  const onSelectCompany = async (companyId, name) => {
+    setNextStepLoading(true);
+    if (!companyId || companyId === "none") {
+      return await onCompanyNotFound(name);
+    }
+    return await onCompanySelected(companyId, name);
+  };
+  const selectedCompany = matchingCompanies.find(_ref3 => {
     let {
       id
     } = _ref3;
     return selectedCompanyId === id;
-  }) || {};
+  });
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 2,
@@ -113,12 +118,13 @@ const PdlCompanySelect = _ref2 => {
       name,
       id
     } = _ref5;
-    return /*#__PURE__*/_react.default.createElement(CompanySelectionChip, _extends({
+    return /*#__PURE__*/_react.default.createElement(CompanySelectionChip, {
       key: "company-list-item-".concat(idx),
       name: name,
       isSelected: selectedCompanyId === id,
-      setSelectedCompanyId: setSelectedCompanyId
-    }, meta));
+      setSelectedCompanyId: setSelectedCompanyId,
+      id: id
+    });
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     container: true,
@@ -126,13 +132,18 @@ const PdlCompanySelect = _ref2 => {
     justifyContent: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
-  }, selectedCompanyId ? /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, selectedCompanyId ? /*#__PURE__*/_react.default.createElement(_atoms.LoadingButton, {
+    isLoading: nextStepLoading,
+    label: "Choose This Company",
     variant: "contained",
     color: "secondary",
-    onClick: () => onSelectCompany(selectedCompanyId, selectedCompanyName)
-  }, "Choose this company") : /*#__PURE__*/_react.default.createElement(_material.Button, {
+    onClick: () => onSelectCompany(selectedCompany)
+  }) : /*#__PURE__*/_react.default.createElement(_atoms.LoadingButton, {
+    isLoading: nextStepLoading,
     color: "primary",
-    onClick: () => onSelectCompany("none", inputValue)
-  }, "I don't see my company")))));
+    onClick: () => onSelectCompany("none", inputValue),
+    label: "I don't see my company",
+    variant: "text"
+  })))));
 };
 var _default = exports.default = PdlCompanySelect;

package/package.json

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

package/src/components/PdlCompanySelect.js

@@ -6,13 +6,12 @@ import {
   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 { TextField, LoadingButton } from "@aclymatepackages/atoms";
 
 const CompanySelectionChip = ({
   id,
@@ -34,7 +33,8 @@ const CompanySelectionChip = ({
 );
 
 const PdlCompanySelect = ({
-  onSelectCompany,
+  onCompanyNotFound,
+  onCompanySelected,
   matchingFunction,
   label = "Enter your company's name",
   actionLabel = "Please select your company from these options",
@@ -44,6 +44,7 @@ const PdlCompanySelect = ({
   const [inputComplete, setInputComplete] = useState(false);
   const [pdlFetchLoading, setPdlFetchLoading] = useState(false);
   const [selectedCompanyId, setSelectedCompanyId] = useState(null);
+  const [nextStepLoading, setNextStepLoading] = useState(false);
 
   const fetchMatchingCompanies = async () => {
     setPdlFetchLoading(true);
@@ -55,8 +56,18 @@ const PdlCompanySelect = ({
     return setInputComplete(true);
   };
 
-  const { name: selectedCompanyName } =
-    matchingCompanies.find(({ id }) => selectedCompanyId === id) || {};
+  const onSelectCompany = async (companyId, name) => {
+    setNextStepLoading(true);
+    if (!companyId || companyId === "none") {
+      return await onCompanyNotFound(name);
+    }
+
+    return await onCompanySelected(companyId, name);
+  };
+
+  const selectedCompany = matchingCompanies.find(
+    ({ id }) => selectedCompanyId === id
+  );
 
   return (
     <Grid container spacing={2} direction="column">
@@ -104,29 +115,28 @@ const PdlCompanySelect = ({
                 name={name}
                 isSelected={selectedCompanyId === id}
                 setSelectedCompanyId={setSelectedCompanyId}
-                {...meta}
+                id={id}
               />
             ))}
           </Grid>
           <Grid item container spacing={2} justifyContent="center">
             <Grid item>
               {selectedCompanyId ? (
-                <Button
+                <LoadingButton
+                  isLoading={nextStepLoading}
+                  label="Choose This Company"
                   variant="contained"
                   color="secondary"
-                  onClick={() =>
-                    onSelectCompany(selectedCompanyId, selectedCompanyName)
-                  }
-                >
-                  Choose this company
-                </Button>
+                  onClick={() => onSelectCompany(selectedCompany)}
+                />
               ) : (
-                <Button
+                <LoadingButton
+                  isLoading={nextStepLoading}
                   color="primary"
                   onClick={() => onSelectCompany("none", inputValue)}
-                >
-                  I don't see my company
-                </Button>
+                  label="I don't see my company"
+                  variant="text"
+                />
               )}
             </Grid>
           </Grid>