@thecb/components 7.2.1 → 7.3.2-beta.0

package/dist/index.cjs.js

@@ -24661,7 +24661,9 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
       groupName = _ref.groupName,
       setValue = _ref.setValue,
       ariaInvalid = _ref.ariaInvalid,
-      index = _ref.index;
+      index = _ref.index,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange;
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem"
@@ -24675,7 +24677,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
     id: id,
     value: value,
     onChange: function onChange(e) {
-      return setValue(e.target.value);
+      setValue(e.target.value);
+      handleChange(e);
     },
     defaultChecked: index === 0
   }), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -40333,269 +40336,6 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), _defineProperty(_iconsMap, ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), _defineProperty(_iconsMap, ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), _defineProperty(_iconsMap, ACCOUNTS_DENTAL_ICON, AccountDentalIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), _defineProperty(_iconsMap, PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), _defineProperty(_iconsMap, PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), _defineProperty(_iconsMap, PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), _defineProperty(_iconsMap, PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), _defineProperty(_iconsMap, PROPERTIES_LAND_ICON, PropertyLandIcon), _defineProperty(_iconsMap, PROPERTIES_CAR_ICON, PropertyCarIcon), _defineProperty(_iconsMap, PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), _defineProperty(_iconsMap, PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), _defineProperty(_iconsMap, MISC_BILL_ICON, AccountBillIcon), _iconsMap);
 
-var _roleDescriptions;
-var RESEARCHER = "RESEARCHER";
-var AGENCY_ADMIN = "AGENCY_ADMIN";
-var CLIENT_ADMIN = "CLIENT_ADMIN";
-var SUPERVISOR = "SUPERVISOR";
-var CB_ADMIN = "CITYBASE_ADMIN";
-var CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
-var PROFILE = "PROFILE";
-var ADD = "ADD";
-var EDIT = "EDIT";
-var roleDescriptions = (_roleDescriptions = {}, _defineProperty(_roleDescriptions, RESEARCHER, "Researcher"), _defineProperty(_roleDescriptions, AGENCY_ADMIN, "Agency admin"), _defineProperty(_roleDescriptions, CLIENT_ADMIN, "Client admin"), _defineProperty(_roleDescriptions, SUPERVISOR, "Supervisor"), _defineProperty(_roleDescriptions, CB_ADMIN, "Citybase admin"), _roleDescriptions);
-
-var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "default" : _ref$variant,
-      fields = _ref.fields,
-      actions = _ref.actions,
-      clearOnDismount = _ref.clearOnDismount,
-      showErrors = _ref.showErrors,
-      _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
-      closeForm = _ref.closeForm,
-      allAgencyOptions = _ref.allAgencyOptions,
-      selectedAgencies = _ref.selectedAgencies,
-      allSelected = _ref.allSelected,
-      _ref$toggleSelectAllA = _ref.toggleSelectAllAgencies,
-      toggleSelectAllAgencies = _ref$toggleSelectAllA === void 0 ? noop : _ref$toggleSelectAllA,
-      selectAgency = _ref.selectAgency,
-      roleOptions = _ref.roleOptions,
-      clientOptions = _ref.clientOptions,
-      namesDisabled = _ref.namesDisabled,
-      emailDisabled = _ref.emailDisabled,
-      roleDisabled = _ref.roleDisabled,
-      selectionDisabled = _ref.selectionDisabled,
-      formType = _ref.formType,
-      openChangePasswordForm = _ref.openChangePasswordForm,
-      firstName = _ref.firstName,
-      lastName = _ref.lastName;
-  React.useEffect(function () {
-    if (formType === CREATE_CLIENT_ADMIN) {
-      actions.fields.client.addValidator(required());
-    }
-
-    if (formType !== PROFILE) {
-      actions.fields.email.addValidator(required());
-      actions.fields.role.addValidator(required());
-    }
-  }, []);
-
-  if (clearOnDismount) {
-    React.useEffect(function () {
-      return function () {
-        return actions.form.clear();
-      };
-    }, []);
-  }
-
-  var clientErrorMessages = _defineProperty({}, required.error, "Client is required");
-
-  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
-
-  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
-
-  var emailErrorMessages = _defineProperty({}, isProbablyEmail.error, "Invalid email address");
-
-  var roleErrorMessages = _defineProperty({}, required.error, "Role is required");
-
-  return /*#__PURE__*/React__default.createElement(FormContainer$1, {
-    variant: variant,
-    role: "form",
-    "aria-label": "user-info-form",
-    extraStyles: "padding: 0;"
-  }, formType === PROFILE && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1.5rem"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1.25rem",
-    borderRadius: "50%",
-    background: "#CACED8"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h4",
-    weight: "700"
-  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    weight: "700",
-    extraStyles: "padding-left: 1rem;"
-  }, firstName, " ", lastName))), formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1.5rem 1.5rem 0.5rem",
-    borderColor: GHOST_GREY,
-    borderSize: "1px",
-    borderWidthOverride: "0 0 1px 0"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "Select Client"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
-    labelTextWhenNoError: "Client",
-    errorMessages: clientErrorMessages,
-    options: clientOptions.map(function (client) {
-      return {
-        text: client,
-        value: client,
-        id: client
-      };
-    }),
-    field: fields.client,
-    fieldActions: actions.fields.client,
-    showErrors: showErrors,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    }
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: formType === PROFILE ? "1.5rem 1.5rem 0" : "1.5rem 1.5rem 0.5rem",
-    borderColor: GHOST_GREY,
-    borderSize: "1px",
-    borderWidthOverride: formType === PROFILE ? "1px 0 0" : "0 0 1px 0"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "Personal Information"), /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "First Name",
-    errorMessages: firstNameErrorMessages,
-    field: fields.firstName,
-    fieldActions: actions.fields.firstName,
-    showErrors: showErrors,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    },
-    disabled: namesDisabled,
-    autocomplete: "given-name"
-  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Last Name",
-    errorMessages: lastNameErrorMessages,
-    field: fields.lastName,
-    fieldActions: actions.fields.lastName,
-    showErrors: showErrors,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    },
-    disabled: namesDisabled,
-    autocomplete: "family-name"
-  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
-    errorMessages: emailErrorMessages,
-    field: fields.email,
-    fieldActions: actions.fields.email,
-    showErrors: showErrors,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    },
-    disabled: emailDisabled,
-    autocomplete: "email"
-  }), formType === PROFILE && /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Password",
-    errorMessages: {},
-    field: {
-      rawValue: "•••••••••••••"
-    },
-    disabled: true,
-    decorator: /*#__PURE__*/React__default.createElement(Text$1, {
-      variant: "pS",
-      color: "#15749D",
-      onClick: openChangePasswordForm,
-      extraStyles: "cursor: pointer;"
-    }, "Change Password")
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1.5rem"
-  }, formType !== PROFILE && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 0.5rem"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "User Settings"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
-    labelTextWhenNoError: "User Role",
-    errorMessages: roleErrorMessages,
-    options: roleOptions.map(function (role) {
-      return {
-        text: roleDescriptions[role],
-        value: role,
-        id: role
-      };
-    }),
-    field: fields.role,
-    fieldActions: actions.fields.role,
-    showErrors: showErrors,
-    onKeyDown: function onKeyDown(e) {
-      return e.key === "Enter" && handleSubmit(e);
-    },
-    disabled: roleDisabled
-  }))), (formType === ADD || formType === EDIT) && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem 0 1.5rem"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p"
-  }, "Select which agencies the user can view"), /*#__PURE__*/React__default.createElement(SearchableSelect$1, {
-    actions: actions,
-    fields: fields,
-    items: allAgencyOptions,
-    selectedItems: selectedAgencies,
-    allSelected: allSelected,
-    toggleSelectAllItems: toggleSelectAllAgencies,
-    selectItem: selectAgency,
-    disabled: selectionDisabled
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "1rem",
-    direction: "row",
-    justify: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    text: "Cancel",
-    action: function action() {
-      if (formType !== CREATE_CLIENT_ADMIN) {
-        toggleSelectAllAgencies(false);
-      }
-
-      closeForm();
-    },
-    variant: "secondary",
-    dataQa: "Cancel",
-    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
-  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    text: "Save",
-    action: handleSubmit,
-    variant: "primary",
-    dataQa: "Save",
-    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
-  })))));
-};
-
-var formConfig$5 = {
-  client: {
-    validators: []
-  },
-  firstName: {
-    validators: [required()]
-  },
-  lastName: {
-    validators: [required()]
-  },
-  email: {
-    validators: [isProbablyEmail()]
-  },
-  role: {
-    validators: []
-  },
-  searchTerm: {
-    validators: []
-  }
-};
-
-var _createFormState$5 = createFormState(formConfig$5),
-    reducer$5 = _createFormState$5.reducer,
-    mapStateToProps$6 = _createFormState$5.mapStateToProps,
-    mapDispatchToProps$5 = _createFormState$5.mapDispatchToProps;
-
-InternalUserInfoForm.reducer = reducer$5;
-InternalUserInfoForm.mapStateToProps = mapStateToProps$6;
-InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps$5;
-
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
 
@@ -40647,7 +40387,7 @@ var LoginForm = function LoginForm(_ref) {
   }));
 };
 
-var formConfig$6 = {
+var formConfig$5 = {
   email: {
     validators: [required(), isProbablyEmail()]
   },
@@ -40656,14 +40396,14 @@ var formConfig$6 = {
   }
 };
 
-var _createFormState$6 = createFormState(formConfig$6),
-    reducer$6 = _createFormState$6.reducer,
-    mapStateToProps$7 = _createFormState$6.mapStateToProps,
-    mapDispatchToProps$6 = _createFormState$6.mapDispatchToProps;
+var _createFormState$5 = createFormState(formConfig$5),
+    reducer$5 = _createFormState$5.reducer,
+    mapStateToProps$6 = _createFormState$5.mapStateToProps,
+    mapDispatchToProps$5 = _createFormState$5.mapDispatchToProps;
 
-LoginForm.reducer = reducer$6;
-LoginForm.mapStateToProps = mapStateToProps$7;
-LoginForm.mapDispatchToProps = mapDispatchToProps$6;
+LoginForm.reducer = reducer$5;
+LoginForm.mapStateToProps = mapStateToProps$6;
+LoginForm.mapDispatchToProps = mapDispatchToProps$5;
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -45925,7 +45665,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   })));
 };
 
-var formConfig$7 = {
+var formConfig$6 = {
   name: {
     validators: [required()]
   },
@@ -45951,14 +45691,14 @@ var formConfig$7 = {
   }
 };
 
-var _createFormState$7 = createFormState(formConfig$7),
-    reducer$7 = _createFormState$7.reducer,
-    mapStateToProps$8 = _createFormState$7.mapStateToProps,
-    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
+var _createFormState$6 = createFormState(formConfig$6),
+    reducer$6 = _createFormState$6.reducer,
+    mapStateToProps$7 = _createFormState$6.mapStateToProps,
+    mapDispatchToProps$6 = _createFormState$6.mapDispatchToProps;
 
-PaymentFormACH.reducer = reducer$7;
-PaymentFormACH.mapStateToProps = mapStateToProps$8;
-PaymentFormACH.mapDispatchToProps = mapDispatchToProps$7;
+PaymentFormACH.reducer = reducer$6;
+PaymentFormACH.mapStateToProps = mapStateToProps$7;
+PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
 
 var PaymentFormCard = function PaymentFormCard(_ref) {
   var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
@@ -46099,7 +45839,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
 
-var formConfig$8 = {
+var formConfig$7 = {
   country: {
     defaultValue: "US",
     validators: [required()]
@@ -46125,14 +45865,14 @@ var formConfig$8 = {
   }
 };
 
-var _createFormState$8 = createFormState(formConfig$8),
-    reducer$8 = _createFormState$8.reducer,
-    mapStateToProps$9 = _createFormState$8.mapStateToProps,
-    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
+var _createFormState$7 = createFormState(formConfig$7),
+    reducer$7 = _createFormState$7.reducer,
+    mapStateToProps$8 = _createFormState$7.mapStateToProps,
+    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
 
-PaymentFormCard$1.reducer = reducer$8;
-PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
-PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard$1.reducer = reducer$7;
+PaymentFormCard$1.mapStateToProps = mapStateToProps$8;
+PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$7;
 
 var DashboardIframe = styled__default.iframe.withConfig({
   displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
@@ -46305,21 +46045,21 @@ var PhoneForm = function PhoneForm(_ref) {
   })));
 };
 
-var formConfig$9 = {
+var formConfig$8 = {
   phone: {
     validators: [required(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
 
-var _createFormState$9 = createFormState(formConfig$9),
-    reducer$9 = _createFormState$9.reducer,
-    mapStateToProps$a = _createFormState$9.mapStateToProps,
-    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
+var _createFormState$8 = createFormState(formConfig$8),
+    reducer$8 = _createFormState$8.reducer,
+    mapStateToProps$9 = _createFormState$8.mapStateToProps,
+    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PhoneForm.reducer = reducer$9;
-PhoneForm.mapStateToProps = mapStateToProps$a;
-PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
+PhoneForm.reducer = reducer$8;
+PhoneForm.mapStateToProps = mapStateToProps$9;
+PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 
 var DefaultHeading = styled__default.div.withConfig({
   displayName: "RadioGroup__DefaultHeading",
@@ -46342,6 +46082,8 @@ var RadioGroup = function RadioGroup(_ref) {
   }, headingText) : _ref$heading,
       config = _ref.config,
       extraStyles = _ref.extraStyles,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
       field = _ref.field,
       fieldActions = _ref.fieldActions;
 
@@ -46362,6 +46104,7 @@ var RadioGroup = function RadioGroup(_ref) {
     }, c, {
       groupName: groupName,
       setValue: setValue,
+      handleChange: handleChange,
       "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
     }));
   })));
@@ -46686,7 +46429,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   })));
 };
 
-var formConfig$a = {
+var formConfig$9 = {
   firstName: {
     validators: [required()]
   },
@@ -46704,14 +46447,14 @@ var formConfig$a = {
   }
 };
 
-var _createFormState$a = createFormState(formConfig$a),
-    reducer$a = _createFormState$a.reducer,
-    mapStateToProps$b = _createFormState$a.mapStateToProps,
-    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
+var _createFormState$9 = createFormState(formConfig$9),
+    reducer$9 = _createFormState$9.reducer,
+    mapStateToProps$a = _createFormState$9.mapStateToProps,
+    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
 
-RegistrationForm.reducer = reducer$a;
-RegistrationForm.mapStateToProps = mapStateToProps$b;
-RegistrationForm.mapDispatchToProps = mapDispatchToProps$a;
+RegistrationForm.reducer = reducer$9;
+RegistrationForm.mapStateToProps = mapStateToProps$a;
+RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var _useContext = React.useContext(styled.ThemeContext),
@@ -46818,7 +46561,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   })));
 };
 
-var formConfig$b = {
+var formConfig$a = {
   password: {
     validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
@@ -46827,14 +46570,14 @@ var formConfig$b = {
   }
 };
 
-var _createFormState$b = createFormState(formConfig$b),
-    reducer$b = _createFormState$b.reducer,
-    mapStateToProps$c = _createFormState$b.mapStateToProps,
-    mapDispatchToProps$b = _createFormState$b.mapDispatchToProps;
+var _createFormState$a = createFormState(formConfig$a),
+    reducer$a = _createFormState$a.reducer,
+    mapStateToProps$b = _createFormState$a.mapStateToProps,
+    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
 
-ResetPasswordForm.reducer = reducer$b;
-ResetPasswordForm.mapStateToProps = mapStateToProps$c;
-ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$b;
+ResetPasswordForm.reducer = reducer$a;
+ResetPasswordForm.mapStateToProps = mapStateToProps$b;
+ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var ResetConfirmationForm$2 = function ResetConfirmationForm() {
   var _useContext = React.useContext(styled.ThemeContext),
@@ -47632,7 +47375,6 @@ exports.IconAdd = IconAdd;
 exports.IconQuitLarge = IconQuitLarge;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
-exports.InternalUserInfoForm = InternalUserInfoForm;
 exports.Jumbo = Jumbo$1;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;