@aclymatepackages/modules 4.3.4 → 5.0.0

package/dist/components/IndustryAutocomplete.js

@@ -1,57 +1,109 @@
 "use strict";
 
-require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.promise.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireWildcard(require("react"));
-var _Autocomplete = _interopRequireDefault(require("@mui/lab/Autocomplete"));
+var _react = require("react");
 var _material = require("@mui/material");
-var _lists = require("@aclymatepackages/lists");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CustomPopper = props => /*#__PURE__*/_react.default.createElement(_material.Popper, _extends({}, props, {
-  style: {
-    width: "fit-content"
-  }
-}));
+var _atoms = require("@aclymatepackages/atoms");
+var _otherHelpers = require("@aclymatepackages/other-helpers");
 const IndustryAutocomplete = _ref => {
   let {
     industry,
     setIndustry,
-    style,
-    variant = "outlined",
-    label,
-    helperText,
-    textFieldProps
+    fetchNaicsCodes,
+    questionText = "What does your company do?"
   } = _ref;
-  const [inputValue, setInputValue] = (0, _react.useState)("");
-  return /*#__PURE__*/_react.default.createElement("div", {
-    onClick: e => e.stopPropagation(),
-    onFocus: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
-    id: "company-industry-autocomplete",
-    options: _lists.threeDigitNaicsCodesIndustries,
-    getOptionLabel: option => typeof option === "string" ? option : option.label,
-    renderInput: params => /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({}, params, {
-      label: label || "Company Industry",
-      fullWidth: true,
-      size: "small",
-      variant: variant,
-      style: style,
-      helperText: helperText
-    }, textFieldProps)),
-    inputValue: inputValue,
-    onInputChange: (e, newInputValue) => setInputValue(newInputValue),
-    onChange: (event, newValue) => setIndustry(newValue || null),
-    value: industry !== null && industry !== void 0 ? industry : null,
-    getOptionSelected: (option, value) => option.label === value.label,
-    PopperComponent: CustomPopper
-  }));
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [naicsCodesOptions, setNaicsCodesOptions] = (0, _react.useState)([]);
+  const [companyDescription, setCompanyDescription] = (0, _react.useState)("");
+  const industryTitle = (industry === null || industry === void 0 ? void 0 : industry.naicsTitle) || (industry === null || industry === void 0 ? void 0 : industry.label) || null;
+  const onSearch = async () => {
+    setLoading(true);
+    const options = await fetchNaicsCodes(companyDescription);
+    setNaicsCodesOptions(options || []);
+    setLoading(false);
+  };
+  const onSelectOption = _ref2 => {
+    let {
+      code,
+      description,
+      tonsCo2ePerDollar
+    } = _ref2;
+    setIndustry({
+      naicsCode: code,
+      naicsTitle: description,
+      tonsCo2ePerDollar
+    });
+    setNaicsCodesOptions([]);
+  };
+  const onDeleteCurrentIndustry = () => {
+    setIndustry(null);
+    setNaicsCodesOptions([]);
+  };
+  const showCurrentChip = !!industryTitle && !naicsCodesOptions.length;
+  const showOptions = !!naicsCodesOptions.length;
+  const showSearchInput = !showCurrentChip && !showOptions;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSearchInput && /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/React.createElement(_atoms.SearchActionInput, {
+    label: questionText,
+    value: companyDescription,
+    setValue: setCompanyDescription,
+    searchLoading: loading,
+    searchFunction: onSearch
+  })), showCurrentChip && /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true,
+    alignSelf: "center"
+  }, /*#__PURE__*/React.createElement(_material.Chip, {
+    label: (0, _otherHelpers.truncateText)(industryTitle, 50),
+    onDelete: onDeleteCurrentIndustry
+  })), showOptions && /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React.createElement(_material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, "Select your company's industry")), /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    justifyContent: "center",
+    spacing: 2
+  }, naicsCodesOptions.map((_ref3, idx) => {
+    let {
+      code,
+      description,
+      tonsCo2ePerDollar
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(_material.Grid, {
+      item: true,
+      key: "naics-chip-".concat(idx)
+    }, /*#__PURE__*/React.createElement(_atoms.DefaultSelectableChip, {
+      label: (0, _otherHelpers.truncateText)(description, 50),
+      onClick: () => onSelectOption({
+        code,
+        description,
+        tonsCo2ePerDollar
+      }),
+      isSelected: (industry === null || industry === void 0 ? void 0 : industry.naicsCode) === code
+    }));
+  })), /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/React.createElement(_material.Button, {
+    color: "primary",
+    onClick: () => setNaicsCodesOptions([])
+  }, "Choose Different Categories")))));
 };
 var _default = exports.default = IndustryAutocomplete;

package/package.json

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

package/src/components/IndustryAutocomplete.js

@@ -1,56 +1,99 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import Autocomplete from "@mui/lab/Autocomplete";
-import { TextField, Popper } from "@mui/material";
+import { Grid, Typography, Chip, Button } from "@mui/material";
 
-import { threeDigitNaicsCodesIndustries } from "@aclymatepackages/lists";
-
-const CustomPopper = (props) => (
-  <Popper {...props} style={{ width: "fit-content" }} />
-);
+import {
+  DefaultSelectableChip,
+  SearchActionInput
+} from "@aclymatepackages/atoms";
+import { truncateText } from "@aclymatepackages/other-helpers";
 
 const IndustryAutocomplete = ({
   industry,
   setIndustry,
-  style,
-  variant = "outlined",
-  label,
-  helperText,
-  textFieldProps,
+  fetchNaicsCodes,
+  questionText = "What does your company do?"
 }) => {
-  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [naicsCodesOptions, setNaicsCodesOptions] = useState([]);
+  const [companyDescription, setCompanyDescription] = useState("");
+
+  const industryTitle = industry?.naicsTitle || industry?.label || null;
+
+  const onSearch = async () => {
+    setLoading(true);
+    const options = await fetchNaicsCodes(companyDescription);
+    setNaicsCodesOptions(options || []);
+    setLoading(false);
+  };
+
+  const onSelectOption = ({ code, description, tonsCo2ePerDollar }) => {
+    setIndustry({ naicsCode: code, naicsTitle: description, tonsCo2ePerDollar });
+    setNaicsCodesOptions([]);
+  };
+
+  const onDeleteCurrentIndustry = () => {
+    setIndustry(null);
+    setNaicsCodesOptions([]);
+  };
+
+  const showCurrentChip = !!industryTitle && !naicsCodesOptions.length;
+  const showOptions = !!naicsCodesOptions.length;
+  const showSearchInput = !showCurrentChip && !showOptions;
 
   return (
-    <div
-      onClick={(e) => e.stopPropagation()}
-      onFocus={(e) => e.stopPropagation()}
-    >
-      <Autocomplete
-        id="company-industry-autocomplete"
-        options={threeDigitNaicsCodesIndustries}
-        getOptionLabel={(option) =>
-          typeof option === "string" ? option : option.label
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label={label || "Company Industry"}
-            fullWidth
-            size="small"
-            variant={variant}
-            style={style}
-            helperText={helperText}
-            {...textFieldProps}
+    <>
+      {showSearchInput && (
+        <Grid item>
+          <SearchActionInput
+            label={questionText}
+            value={companyDescription}
+            setValue={setCompanyDescription}
+            searchLoading={loading}
+            searchFunction={onSearch}
+          />
+        </Grid>
+      )}
+      {showCurrentChip && (
+        <Grid item alignSelf="center">
+          <Chip
+            label={truncateText(industryTitle, 50)}
+            onDelete={onDeleteCurrentIndustry}
           />
-        )}
-        inputValue={inputValue}
-        onInputChange={(e, newInputValue) => setInputValue(newInputValue)}
-        onChange={(event, newValue) => setIndustry(newValue || null)}
-        value={industry ?? null}
-        getOptionSelected={(option, value) => option.label === value.label}
-        PopperComponent={CustomPopper}
-      />
-    </div>
+        </Grid>
+      )}
+      {showOptions && (
+        <Grid item container spacing={2}>
+          <Grid item xs={12}>
+            <Typography variant="h6" align="center">
+              Select your company&apos;s industry
+            </Typography>
+          </Grid>
+          <Grid item container justifyContent="center" spacing={2}>
+            {naicsCodesOptions.map(
+              ({ code, description, tonsCo2ePerDollar }, idx) => (
+                <Grid item key={`naics-chip-${idx}`}>
+                  <DefaultSelectableChip
+                    label={truncateText(description, 50)}
+                    onClick={() =>
+                      onSelectOption({ code, description, tonsCo2ePerDollar })
+                    }
+                    isSelected={industry?.naicsCode === code}
+                  />
+                </Grid>
+              )
+            )}
+          </Grid>
+          <Grid item container justifyContent="center">
+            <Grid item>
+              <Button color="primary" onClick={() => setNaicsCodesOptions([])}>
+                Choose Different Categories
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      )}
+    </>
   );
 };
 export default IndustryAutocomplete;