@thecb/components 4.3.9 → 4.3.12

package/dist/index.cjs.js

@@ -15176,6 +15176,51 @@ var PaymentSearchIcon = function PaymentSearchIcon() {
   }))))));
 };
 
+var ResetPasswordIcon = function ResetPasswordIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "86",
+    height: "80",
+    viewBox: "0 0 86 80"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-677 -192)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(432 168)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(245 24)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M36 2.44311523L50.2941895 1.66943359 67 7.32739258 78 18.2668457 85 35.1682129 83 53.0935059 75.1977539 66.3569336 62.1745605 75.9748535 46 80 36 78z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E5E7EC",
+    d: "M46 6h17.5l11.749 10H46a1 1 0 01-1-1V7a1 1 0 011-1zm27 62L58.5 78H46a1 1 0 01-1-1v-8a1 1 0 011-1h27zm10-16l-4.506 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h37zm2-16l-.382 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h39zm-7-16l4 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h32z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#15749D",
+    d: "M45.09 0c22.091 0 40 17.909 40 40s-17.909 40-40 40C28.569 80 14.387 69.984 8.286 55.693H5a5 5 0 01-5-5V33.345a5 5 0 015-5h1.814C11.804 11.939 27.052 0 45.09 0zm33.573 55.693l-42.202-.001v20.326c2.78.667 5.682 1.02 8.667 1.02 14.84 0 27.639-8.735 33.535-21.345zm-45.24-.001l-21.83.001c4.271 9.134 12.164 16.235 21.83 19.456V55.692zm-23.41-27.345l23.41-.001V4.928C22.4 8.601 13.683 17.321 10.013 28.347zM45.128 3.038c-2.985 0-5.887.354-8.667 1.021v24.287h43.782C75.349 13.643 61.477 3.039 45.128 3.039z"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(8 38)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "11",
+    height: "7",
+    x: "0",
+    y: "2",
+    fill: "#FFF",
+    rx: "1"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#FFF",
+    strokeWidth: "2",
+    d: "M5.5-1l.205.008c.609.05 1.156.317 1.563.724C7.72.185 8 .81 8 1.5h0V3H3V1.5c0-.69.28-1.315.732-1.768A2.492 2.492 0 015.5-1h0z"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M41.5 38a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm-44 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7z"
+  }))))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -22419,13 +22464,15 @@ var SearchableSelect = function SearchableSelect(_ref) {
     padding: "0.5rem 0",
     extraStyles: "overflow-y: scroll; height: 250px;"
   }, /*#__PURE__*/React__default.createElement(Stack, null, itemList.map(function (value) {
+    var _selectedItems$find;
+
     return /*#__PURE__*/React__default.createElement(Checkbox$1, {
       key: value.name,
       title: value.name,
       name: value.name,
-      checked: selectedItems.find(function (item) {
-        return item.name === value.name;
-      }),
+      checked: (_selectedItems$find = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.name) === (value === null || value === void 0 ? void 0 : value.name);
+      })) !== null && _selectedItems$find !== void 0 ? _selectedItems$find : false,
       onChange: function onChange() {
         return handleSelect(value);
       },
@@ -37363,6 +37410,7 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
       selectAgency = _ref.selectAgency,
       roleOptions = _ref.roleOptions,
       clientOptions = _ref.clientOptions,
+      namesDisabled = _ref.namesDisabled,
       emailDisabled = _ref.emailDisabled,
       roleDisabled = _ref.roleDisabled,
       selectionDisabled = _ref.selectionDisabled,
@@ -37396,7 +37444,7 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
 
   var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
 
-  var emailErrorMessages = _defineProperty({}, required.error, "Email is required");
+  var emailErrorMessages = _defineProperty({}, isProbablyEmail.error, "Invalid email address");
 
   var roleErrorMessages = _defineProperty({}, required.error, "Role is required");
 
@@ -37463,7 +37511,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    disabled: namesDisabled
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     errorMessages: lastNameErrorMessages,
@@ -37472,7 +37521,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    disabled: namesDisabled
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email",
     errorMessages: emailErrorMessages,
@@ -40963,7 +41013,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     },
     type: "password"
   }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0" : "0.5rem 0 0"
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
     password: fields.password,
     isMobile: isMobile
@@ -41840,6 +41890,7 @@ exports.RejectedIcon = RejectedIcon;
 exports.RejectedVelocityIcon = RejectedVelocityIcon;
 exports.ResetConfirmationForm = ResetConfirmationForm$1;
 exports.ResetPasswordForm = ResetPasswordForm;
+exports.ResetPasswordIcon = ResetPasswordIcon;
 exports.ResetPasswordSuccess = ResetPasswordSuccess;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.3.9",
+  "version": "4.3.12",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/icons/ResetPasswordIcon.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+const ResetPasswordIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="86"
+      height="80"
+      viewBox="0 0 86 80"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-677 -192)">
+          <g transform="translate(432 168)">
+            <g transform="translate(245 24)">
+              <path
+                fill="#FFF"
+                d="M36 2.44311523L50.2941895 1.66943359 67 7.32739258 78 18.2668457 85 35.1682129 83 53.0935059 75.1977539 66.3569336 62.1745605 75.9748535 46 80 36 78z"
+              ></path>
+              <path
+                fill="#E5E7EC"
+                d="M46 6h17.5l11.749 10H46a1 1 0 01-1-1V7a1 1 0 011-1zm27 62L58.5 78H46a1 1 0 01-1-1v-8a1 1 0 011-1h27zm10-16l-4.506 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h37zm2-16l-.382 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h39zm-7-16l4 10H46a1 1 0 01-1-1v-8a1 1 0 011-1h32z"
+              ></path>
+              <path
+                fill="#15749D"
+                d="M45.09 0c22.091 0 40 17.909 40 40s-17.909 40-40 40C28.569 80 14.387 69.984 8.286 55.693H5a5 5 0 01-5-5V33.345a5 5 0 015-5h1.814C11.804 11.939 27.052 0 45.09 0zm33.573 55.693l-42.202-.001v20.326c2.78.667 5.682 1.02 8.667 1.02 14.84 0 27.639-8.735 33.535-21.345zm-45.24-.001l-21.83.001c4.271 9.134 12.164 16.235 21.83 19.456V55.692zm-23.41-27.345l23.41-.001V4.928C22.4 8.601 13.683 17.321 10.013 28.347zM45.128 3.038c-2.985 0-5.887.354-8.667 1.021v24.287h43.782C75.349 13.643 61.477 3.039 45.128 3.039z"
+              ></path>
+              <g transform="translate(8 38)">
+                <rect
+                  width="11"
+                  height="7"
+                  x="0"
+                  y="2"
+                  fill="#FFF"
+                  rx="1"
+                ></rect>
+                <path
+                  stroke="#FFF"
+                  strokeWidth="2"
+                  d="M5.5-1l.205.008c.609.05 1.156.317 1.563.724C7.72.185 8 .81 8 1.5h0V3H3V1.5c0-.69.28-1.315.732-1.768A2.492 2.492 0 015.5-1h0z"
+                ></path>
+              </g>
+              <path
+                fill="#FFF"
+                d="M41.5 38a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm11 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm-44 0a3.5 3.5 0 110 7 3.5 3.5 0 010-7z"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default ResetPasswordIcon;

package/src/components/atoms/icons/index.js

@@ -50,6 +50,7 @@ import NoCustomerResultsIcon from "./NoCustomerResultsIcon";
 import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
 import CustomerSearchIcon from "./CustomerSearchIcon";
 import PaymentSearchIcon from "./PaymentSearchIcon";
+import ResetPasswordIcon from "./ResetPasswordIcon";
 
 export {
   AccountsIcon,
@@ -103,5 +104,6 @@ export {
   NoCustomerResultsIcon,
   NoPaymentResultsIcon,
   CustomerSearchIcon,
-  PaymentSearchIcon
+  PaymentSearchIcon,
+  ResetPasswordIcon
 };

package/src/components/atoms/searchable-select/SearchableSelect.js

@@ -63,7 +63,10 @@ const SearchableSelect = ({
                 key={value.name}
                 title={value.name}
                 name={value.name}
-                checked={selectedItems.find(item => item.name === value.name)}
+                checked={
+                  selectedItems?.find(item => item?.name === value?.name) ??
+                  false
+                }
                 onChange={() => handleSelect(value)}
                 textExtraStyles={`margin: 0;`}
                 disabled={disabled}

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { required } from "redux-freeform";
+import { required, isProbablyEmail } from "redux-freeform";
 import { Stack, Box, Cluster } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Heading from "../../atoms/heading";
@@ -47,6 +47,7 @@ const InternalUserInfoForm = ({
   selectAgency,
   roleOptions,
   clientOptions,
+  namesDisabled,
   emailDisabled,
   roleDisabled,
   selectionDisabled,
@@ -78,7 +79,7 @@ const InternalUserInfoForm = ({
     [required.error]: "Last name is required"
   };
   const emailErrorMessages = {
-    [required.error]: "Email is required"
+    [isProbablyEmail.error]: "Invalid email address"
   };
   const roleErrorMessages = {
     [required.error]: "Role is required"
@@ -151,6 +152,7 @@ const InternalUserInfoForm = ({
             fieldActions={actions.fields.firstName}
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={namesDisabled}
           />
           <FormInput
             labelTextWhenNoError="Last Name"
@@ -159,6 +161,7 @@ const InternalUserInfoForm = ({
             fieldActions={actions.fields.lastName}
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={namesDisabled}
           />
           <FormInput
             labelTextWhenNoError="Email"

package/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -59,7 +59,7 @@ const ResetPasswordForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
       />
-      <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
+      <Box padding="0">
         <PasswordRequirements password={fields.password} isMobile={isMobile} />
       </Box>
     </FormInputColumn>