@aclymatepackages/modules 2.1.18 → 2.1.20

package/dist/components/PdlCompanySelect.js

@@ -40,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"
@@ -50,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);
@@ -57,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,
@@ -125,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.18",
+  "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">
@@ -111,22 +122,21 @@ const PdlCompanySelect = ({
           <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>