@thecb/components 4.3.10 → 4.3.13

package/dist/index.cjs.js

@@ -15886,10 +15886,19 @@ function _assertThisInitialized(self) {
   return self;
 }
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+  _setPrototypeOf(subClass, superClass);
 }
 
 function _getPrototypeOf(o) {
@@ -15899,15 +15908,6 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _isNativeFunction(fn) {
   return Function.toString.call(fn).indexOf("[native code]") !== -1;
 }
@@ -15918,7 +15918,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -16058,7 +16058,9 @@ var ERRORS = {
   "73": "Please provide a valid CSS variable.\n\n",
   "74": "CSS variable not found and no default was provided.\n\n",
   "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
+  "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
+  "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
 /**
  * super basic version of sprintf
@@ -22464,13 +22466,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);
       },
@@ -37408,6 +37412,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,
@@ -37441,7 +37446,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");
 
@@ -37508,7 +37513,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,
@@ -37517,7 +37523,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,
@@ -40356,11 +40363,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
-      isMobile = _ref.isMobile,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
   React.useEffect(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -40424,7 +40434,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
-    breakpoint: "20rem"
+    breakpoint: isMobile ? "1000rem" : "21rem",
+    childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
     errorMessages: expirationDateErrors,
@@ -40469,6 +40480,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
+var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
+
 var formConfig$8 = {
   country: {
     defaultValue: "US",
@@ -40500,9 +40513,9 @@ var _createFormState$8 = createFormState(formConfig$8),
     mapStateToProps$9 = _createFormState$8.mapStateToProps,
     mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PaymentFormCard.reducer = reducer$8;
-PaymentFormCard.mapStateToProps = mapStateToProps$9;
-PaymentFormCard.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard$1.reducer = reducer$8;
+PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
+PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
 
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -41862,7 +41875,7 @@ exports.PasswordRequirements = PasswordRequirements;
 exports.PaymentButtonBar = PaymentButtonBar;
 exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
-exports.PaymentFormCard = PaymentFormCard;
+exports.PaymentFormCard = PaymentFormCard$1;
 exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;

package/package.json

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

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/payment-form-card/PaymentFormCard.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
+import { ThemeContext } from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -20,6 +21,7 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
+import withWindowSize from "../../withWindowSize";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -29,12 +31,12 @@ const PaymentFormCard = ({
   actions,
   showErrors,
   handleSubmit = noop,
-  isMobile,
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
   deniedCards
 }) => {
+  const { isMobile } = useContext(ThemeContext);
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -116,7 +118,10 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
         />
-        <FormInputRow breakpoint="20rem">
+        <FormInputRow
+          breakpoint={isMobile ? "1000rem" : "21rem"}
+          childGap={isMobile ? "0rem" : "1rem"}
+        >
           <FormInput
             labelTextWhenNoError="Expiration date (MM/YY)"
             errorMessages={expirationDateErrors}
@@ -172,4 +177,4 @@ const PaymentFormCard = ({
   );
 };
 
-export default PaymentFormCard;
+export default withWindowSize(PaymentFormCard);