@thecb/components 4.3.11 → 4.3.15

package/.tool-versions

@@ -1 +1 @@
-nodejs 15.5.0
+nodejs 15.8.0

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
@@ -35063,7 +35065,7 @@ var AddressForm = function AddressForm(_ref) {
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
-    countryCode: fields.country.rawValue,
+    countryCode: fields.country.rawValue || "US",
     field: fields.stateProvince,
     fieldActions: actions.fields.stateProvince,
     showErrors: showErrors,
@@ -37410,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,
@@ -37443,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");
 
@@ -37510,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,
@@ -37519,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,
@@ -40358,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) {
@@ -40426,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,
@@ -40471,6 +40480,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
+var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
+
 var formConfig$8 = {
   country: {
     defaultValue: "US",
@@ -40502,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;
@@ -41864,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.11",
+  "version": "4.3.15",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/address-form/AddressForm.js

@@ -91,7 +91,7 @@ const AddressForm = ({
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
           errorMessages={stateProvinceErrorMessages}
-          countryCode={fields.country.rawValue}
+          countryCode={fields.country.rawValue || "US"}
           field={fields.stateProvince}
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}

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);