@aclymatepackages/modules 4.0.1 → 4.1.1

package/dist/components/CompanyDataConfirmation.js

@@ -0,0 +1,163 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
+var _arrayImmutabilityHelpers = require("@aclymatepackages/array-immutability-helpers");
+var _atoms = require("@aclymatepackages/atoms");
+var _modules = require("@aclymatepackages/modules");
+var _regExp = require("@aclymatepackages/reg-exp");
+var _googleMaps = _interopRequireDefault(require("@aclymatepackages/google-maps"));
+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; }
+const CompanyDataConfirmation = _ref => {
+  let {
+    companyData,
+    onConfirmClick
+  } = _ref;
+  const {
+    address: existingAddress
+  } = companyData || {};
+  const {
+    coordinates: existingCoordinates
+  } = existingAddress || {};
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [modifyCompanyData, setModifyCompanyData] = (0, _react.useState)(companyData);
+  const {
+    address = null,
+    industry,
+    employeeCount,
+    isRemote = false,
+    name
+  } = modifyCompanyData || {};
+  const {
+    coordinates
+  } = address || {};
+  const {
+    lat,
+    lng
+  } = coordinates || {};
+  const editCompanyData = field => value => (0, _arrayImmutabilityHelpers.editObjectData)(setModifyCompanyData, field, value);
+  const placesAutocompleteInput = !existingCoordinates ? [/*#__PURE__*/_react.default.createElement(_modules.PlacesAutocomplete, {
+    place: address,
+    editPlace: editCompanyData("address"),
+    label: "Edit your company address"
+  })] : [];
+  const inputs = [...placesAutocompleteInput, /*#__PURE__*/_react.default.createElement(_atoms.TextField, {
+    label: "How many employees do you have?",
+    value: employeeCount,
+    setValue: editCompanyData("employeeCount"),
+    error: employeeCount && !(0, _regExp.numbersRegExpTest)(employeeCount)
+  }), /*#__PURE__*/_react.default.createElement(_modules.IndustryAutocomplete, {
+    industry: industry,
+    setIndustry: editCompanyData("industry"),
+    helperText: "We'll use this to estimate your emissions and benchmark to other similar companies"
+  }), /*#__PURE__*/_react.default.createElement(_modules.YesNoQuestion, {
+    question: "Does your company only work remotely?",
+    value: isRemote,
+    setValue: editCompanyData("isRemote"),
+    lightBackground: true
+  })];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!anchorEl && /*#__PURE__*/_react.default.createElement(_material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    p: 1,
+    style: {
+      width: "375px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 11
+  }, /*#__PURE__*/_react.default.createElement(_modules.PlacesAutocomplete, {
+    place: address,
+    editPlace: place => {
+      editCompanyData("address")(place);
+      return setAnchorEl(null);
+    },
+    label: "Edit your company address"
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: () => setAnchorEl(null)
+  }))))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h4",
+    color: "textPrimary",
+    align: "center"
+  }, "Please check and fill in some basic information about ", name)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    spacing: 2,
+    justifyContent: "center"
+  }, existingCoordinates && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 5
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_googleMaps.default, {
+    height: "225px",
+    markers: [{
+      latLng: {
+        y: lng,
+        x: lat
+      }
+    }],
+    zoom: 13
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      position: "absolute",
+      top: 0,
+      right: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: "Edit your company address"
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: e => setAnchorEl(e.currentTarget)
+  }, /*#__PURE__*/_react.default.createElement(_Edit.default, null)))))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 7
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, inputs.map((input, index) => /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    key: "input-".concat(index)
+  }, input))))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    disabled: !employeeCount || !(0, _regExp.numbersRegExpTest)(employeeCount) || !industry || !address,
+    color: "primary",
+    variant: "contained",
+    onClick: () => onConfirmClick(modifyCompanyData)
+  }, "Confirm")))));
+};
+var _default = exports.default = CompanyDataConfirmation;

package/dist/components/DbCompanySelect.js

@@ -10,6 +10,7 @@ var _react = require("react");
 var _material = require("@mui/material");
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _atoms = require("@aclymatepackages/atoms");
+var _fetchAclymateApi = _interopRequireDefault(require("@aclymatepackages/fetch-aclymate-api"));
 var _themes = require("@aclymatepackages/themes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DbCompanySelect = _ref => {
@@ -30,7 +31,19 @@ const DbCompanySelect = _ref => {
   const [selectedCompany, setSelectedCompany] = (0, _react.useState)(null);
   const fetchMatchingCompanies = async () => {
     setPdlFetchLoading(true);
-    const matchingCompanies = await matchingFunction(inputValue);
+    const matchingCompanies = await (0, _fetchAclymateApi.default)({
+      path: "/onboarding/query-matching-companies",
+      method: "POST",
+      data: {
+        name: inputValue
+      },
+      callback: _ref2 => {
+        let {
+          matchingCompanies
+        } = _ref2;
+        return matchingCompanies;
+      }
+    });
     setPdlFetchLoading(false);
     setMatchingCompanies(matchingCompanies);
     return setInputComplete(true);
@@ -57,10 +70,10 @@ const DbCompanySelect = _ref => {
     label: label,
     value: inputValue,
     setValue: setInputValue,
-    onKeyPress: _ref2 => {
+    onKeyPress: _ref3 => {
       let {
         key
-      } = _ref2;
+      } = _ref3;
       if (key === "Enter") {
         return fetchMatchingCompanies();
       }

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "AccountingChart", {
     return _AccountingChart.default;
   }
 });
+Object.defineProperty(exports, "CompanyDataConfirmation", {
+  enumerable: true,
+  get: function get() {
+    return _CompanyDataConfirmation.default;
+  }
+});
 Object.defineProperty(exports, "CompanyOnboardingInput", {
   enumerable: true,
   get: function get() {
@@ -94,4 +100,5 @@ var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsP
 var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
 var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
 var _DbCompanySelect = _interopRequireDefault(require("./components/DbCompanySelect"));
+var _CompanyDataConfirmation = _interopRequireDefault(require("./components/CompanyDataConfirmation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
     "@aclymatepackages/converters": "^1.0.0",
     "@aclymatepackages/fetch-aclymate-api": "^1.0.0",
     "@aclymatepackages/formatters": "^1.0.0",
+    "@aclymatepackages/google-maps": "^1.0.5",
     "@aclymatepackages/lists": "^1.4.14",
     "@aclymatepackages/multi-part-form": "^2.0.1",
     "@aclymatepackages/other-helpers": "^1.0.9",

package/src/components/CompanyDataConfirmation.js

@@ -0,0 +1,161 @@
+import React from "react";
+
+import { useState } from "react";
+
+import {
+  Box,
+  Grid,
+  Typography,
+  Button,
+  IconButton,
+  Menu,
+  Tooltip,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import CancelIcon from "@mui/icons-material/Cancel";
+
+import { editObjectData } from "@aclymatepackages/array-immutability-helpers";
+import { TextField } from "@aclymatepackages/atoms";
+import {
+  IndustryAutocomplete,
+  YesNoQuestion,
+  PlacesAutocomplete,
+} from "@aclymatepackages/modules";
+import { numbersRegExpTest } from "@aclymatepackages/reg-exp";
+import GoogleMap from "@aclymatepackages/google-maps";
+
+const CompanyDataConfirmation = ({ companyData, onConfirmClick }) => {
+  const { address: existingAddress } = companyData || {};
+  const { coordinates: existingCoordinates } = existingAddress || {};
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [modifyCompanyData, setModifyCompanyData] = useState(companyData);
+  const {
+    address = null,
+    industry,
+    employeeCount,
+    isRemote = false,
+    name,
+  } = modifyCompanyData || {};
+  const { coordinates } = address || {};
+  const { lat, lng } = coordinates || {};
+
+  const editCompanyData = (field) => (value) =>
+    editObjectData(setModifyCompanyData, field, value);
+
+  const placesAutocompleteInput = !existingCoordinates
+    ? [
+        <PlacesAutocomplete
+          place={address}
+          editPlace={editCompanyData("address")}
+          label="Edit your company address"
+        />,
+      ]
+    : [];
+
+  const inputs = [
+    ...placesAutocompleteInput,
+    <TextField
+      label="How many employees do you have?"
+      value={employeeCount}
+      setValue={editCompanyData("employeeCount")}
+      error={employeeCount && !numbersRegExpTest(employeeCount)}
+    />,
+    <IndustryAutocomplete
+      industry={industry}
+      setIndustry={editCompanyData("industry")}
+      helperText="We'll use this to estimate your emissions and benchmark to other similar companies"
+    />,
+    <YesNoQuestion
+      question="Does your company only work remotely?"
+      value={isRemote}
+      setValue={editCompanyData("isRemote")}
+      lightBackground
+    />,
+  ];
+
+  return (
+    <>
+      {!!anchorEl && (
+        <Menu
+          anchorEl={anchorEl}
+          open={!!anchorEl}
+          anchorOrigin={{ vertical: "top", horizontal: "right" }}
+          transformOrigin={{ vertical: "top", horizontal: "right" }}
+        >
+          <Box p={1} style={{ width: "375px" }}>
+            <Grid container>
+              <Grid item xs={11}>
+                <PlacesAutocomplete
+                  place={address}
+                  editPlace={(place) => {
+                    editCompanyData("address")(place);
+                    return setAnchorEl(null);
+                  }}
+                  label="Edit your company address"
+                />
+              </Grid>
+              <Grid item>
+                <IconButton onClick={() => setAnchorEl(null)}></IconButton>
+              </Grid>
+            </Grid>
+          </Box>
+        </Menu>
+      )}
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography variant="h4" color="textPrimary" align="center">
+            Please check and fill in some basic information about {name}
+          </Typography>
+        </Grid>
+        <Grid item container spacing={2} justifyContent="center">
+          {existingCoordinates && (
+            <Grid item xs={5}>
+              <Box position="relative">
+                <GoogleMap
+                  height="225px"
+                  markers={[{ latLng: { y: lng, x: lat } }]}
+                  zoom={13}
+                />
+                <Box style={{ position: "absolute", top: 0, right: 0 }}>
+                  <Tooltip title="Edit your company address">
+                    <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
+                      <EditIcon />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              </Box>
+            </Grid>
+          )}
+          <Grid item xs={7}>
+            <Grid container direction="column" spacing={2}>
+              {inputs.map((input, index) => (
+                <Grid item key={`input-${index}`}>
+                  {input}
+                </Grid>
+              ))}
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item container justifyContent="center">
+          <Grid item>
+            <Button
+              disabled={
+                !employeeCount ||
+                !numbersRegExpTest(employeeCount) ||
+                !industry ||
+                !address
+              }
+              color="primary"
+              variant="contained"
+              onClick={() => onConfirmClick(modifyCompanyData)}
+            >
+              Confirm
+            </Button>
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+export default CompanyDataConfirmation;

package/src/components/DbCompanySelect.js

@@ -15,7 +15,7 @@ import {
   LoadingButton,
   MatchingCompanyChips,
 } from "@aclymatepackages/atoms";
-
+import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
 import { mainTheme } from "@aclymatepackages/themes";
 
 const DbCompanySelect = ({
@@ -37,7 +37,12 @@ const DbCompanySelect = ({
   const fetchMatchingCompanies = async () => {
     setPdlFetchLoading(true);
 
-    const matchingCompanies = await matchingFunction(inputValue);
+    const matchingCompanies = await fetchAclymateApi({
+      path: `/onboarding/query-matching-companies`,
+      method: "POST",
+      data: { name: inputValue },
+      callback: ({ matchingCompanies }) => matchingCompanies,
+    });
 
     setPdlFetchLoading(false);
     setMatchingCompanies(matchingCompanies);

package/src/index.js

@@ -11,6 +11,7 @@ import EmissionsPieChart from "./components/EmissionsPieChart";
 import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
 import DbCompanySelect from "./components/DbCompanySelect";
+import CompanyDataConfirmation from "./components/CompanyDataConfirmation";
 
 export {
   AccountingChart,
@@ -26,4 +27,5 @@ export {
   useChartWarningLabels,
   EmissionsSummarySentence,
   DbCompanySelect,
+  CompanyDataConfirmation,
 };