@thecb/components 9.1.1-beta.2 → 9.1.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +110 -165
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +110 -165
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/checkbox/Checkbox.js +1 -3
- package/src/components/atoms/country-dropdown/CountryDropdown.js +1 -3
- package/src/components/atoms/form-layouts/FormInput.js +3 -11
- package/src/components/atoms/layouts/Motion.styled.js +1 -1
- package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js +1 -3
- package/src/components/molecules/address-form/AddressForm.js +0 -6
- package/src/components/molecules/edit-name-form/EditNameForm.js +0 -2
- package/src/components/molecules/email-form/EmailForm.js +2 -5
- package/src/components/molecules/payment-form-ach/PaymentFormACH.js +0 -6
- package/src/components/molecules/payment-form-card/PaymentFormCard.js +0 -6
- package/src/components/molecules/phone-form/PhoneForm.js +1 -3
- package/src/components/molecules/radio-group/RadioGroup.js +7 -9
- package/src/components/molecules/radio-section/RadioSection.js +6 -8
- package/src/components/molecules/radio-section/RadioSection.stories.js +4 -5
- package/src/components/molecules/radio-section/radio-button/RadioButton.js +1 -3
package/dist/index.esm.js
CHANGED
|
@@ -12394,7 +12394,7 @@ if (typeof window !== "undefined") {
|
|
|
12394
12394
|
var MotionWrapper = styled(motion.div).withConfig({
|
|
12395
12395
|
displayName: "Motionstyled__MotionWrapper",
|
|
12396
12396
|
componentId: "sc-1m6r1io-0"
|
|
12397
|
-
})(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-
|
|
12397
|
+
})(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-width:", ";border-style:", ";border-width:", ";border-radius:", ";background-color:", ";box-shadow:", ";min-height:", ";min-width:", ";height:", ";width:", ";text-align:", ";margin:", ";&:hover,&:focus{", ";}&:active{", ";}&:disabled{", ";}", ";"], function (_ref) {
|
|
12398
12398
|
var position = _ref.position;
|
|
12399
12399
|
return position;
|
|
12400
12400
|
}, function (_ref2) {
|
|
@@ -22096,8 +22096,7 @@ var StyledCheckbox = styled.div.withConfig({
|
|
|
22096
22096
|
focusedStyles = _ref3.focusedStyles,
|
|
22097
22097
|
errorStyles = _ref3.errorStyles,
|
|
22098
22098
|
disabledStyles = _ref3.disabledStyles,
|
|
22099
|
-
disabledCheckedStyles = _ref3.disabledCheckedStyles
|
|
22100
|
-
_ref3$required = _ref3.required;
|
|
22099
|
+
disabledCheckedStyles = _ref3.disabledCheckedStyles;
|
|
22101
22100
|
return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
|
|
22102
22101
|
});
|
|
22103
22102
|
|
|
@@ -22160,8 +22159,7 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22160
22159
|
onChange: onChange,
|
|
22161
22160
|
tabIndex: "-1",
|
|
22162
22161
|
"aria-invalid": error,
|
|
22163
|
-
"aria-describedby": error ? "".concat(name, "-error-message") : ""
|
|
22164
|
-
required: required
|
|
22162
|
+
"aria-describedby": error ? "".concat(name, "-error-message") : ""
|
|
22165
22163
|
}), /*#__PURE__*/React.createElement(StyledCheckbox, {
|
|
22166
22164
|
role: "checkbox",
|
|
22167
22165
|
error: error,
|
|
@@ -25025,9 +25023,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25025
25023
|
showErrors = _ref.showErrors,
|
|
25026
25024
|
onChange = _ref.onChange,
|
|
25027
25025
|
_ref$dataQa = _ref.dataQa,
|
|
25028
|
-
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa
|
|
25029
|
-
_ref$isRequired = _ref.isRequired,
|
|
25030
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
25026
|
+
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
|
|
25031
25027
|
return /*#__PURE__*/React.createElement(FormSelect$1, {
|
|
25032
25028
|
options: options,
|
|
25033
25029
|
field: field,
|
|
@@ -25037,8 +25033,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25037
25033
|
errorMessages: errorMessages,
|
|
25038
25034
|
showErrors: showErrors,
|
|
25039
25035
|
onChange: onChange,
|
|
25040
|
-
autocompleteValue: "country-name"
|
|
25041
|
-
required: isRequired
|
|
25036
|
+
autocompleteValue: "country-name"
|
|
25042
25037
|
});
|
|
25043
25038
|
};
|
|
25044
25039
|
|
|
@@ -25883,7 +25878,7 @@ var fallbackValues$k = {
|
|
|
25883
25878
|
};
|
|
25884
25879
|
|
|
25885
25880
|
var _excluded$p = ["showErrors", "themeValues"],
|
|
25886
|
-
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"
|
|
25881
|
+
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
|
|
25887
25882
|
var InputField = styled.input.withConfig({
|
|
25888
25883
|
displayName: "FormInput__InputField",
|
|
25889
25884
|
componentId: "sc-l094r1-0"
|
|
@@ -25918,10 +25913,7 @@ var FormattedInputField = styled(function (_ref8) {
|
|
|
25918
25913
|
themeValues = _ref8.themeValues,
|
|
25919
25914
|
props = _objectWithoutProperties(_ref8, _excluded$p);
|
|
25920
25915
|
|
|
25921
|
-
|
|
25922
|
-
return /*#__PURE__*/React.createElement(FormattedInput, isRequired ? _objectSpread2(_objectSpread2({}, props), {}, {
|
|
25923
|
-
required: true
|
|
25924
|
-
}) : _objectSpread2({}, props));
|
|
25916
|
+
return /*#__PURE__*/React.createElement(FormattedInput, props);
|
|
25925
25917
|
}).withConfig({
|
|
25926
25918
|
displayName: "FormInput__FormattedInputField",
|
|
25927
25919
|
componentId: "sc-l094r1-1"
|
|
@@ -25973,8 +25965,6 @@ var FormInput = function FormInput(_ref15) {
|
|
|
25973
25965
|
removeFromValue = _ref15.removeFromValue,
|
|
25974
25966
|
_ref15$dataQa = _ref15.dataQa,
|
|
25975
25967
|
dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
|
|
25976
|
-
_ref15$isRequired = _ref15.isRequired,
|
|
25977
|
-
isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
|
|
25978
25968
|
props = _objectWithoutProperties(_ref15, _excluded2);
|
|
25979
25969
|
|
|
25980
25970
|
var _useState = useState(false),
|
|
@@ -26061,8 +26051,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26061
26051
|
$customHeight: customHeight,
|
|
26062
26052
|
$extraStyles: extraStyles,
|
|
26063
26053
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26064
|
-
autoComplete: autocompleteValue
|
|
26065
|
-
required: isRequired
|
|
26054
|
+
autoComplete: autocompleteValue
|
|
26066
26055
|
}, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
|
|
26067
26056
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
26068
26057
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
@@ -26081,8 +26070,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26081
26070
|
$customHeight: customHeight,
|
|
26082
26071
|
$extraStyles: extraStyles,
|
|
26083
26072
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26084
|
-
autoComplete: autocompleteValue
|
|
26085
|
-
required: isRequired
|
|
26073
|
+
autoComplete: autocompleteValue
|
|
26086
26074
|
}, props))), /*#__PURE__*/React.createElement(Stack, {
|
|
26087
26075
|
direction: "row",
|
|
26088
26076
|
justify: "space-between",
|
|
@@ -27188,9 +27176,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
|
|
|
27188
27176
|
_ref5$handleChange = _ref5.handleChange,
|
|
27189
27177
|
handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
|
|
27190
27178
|
field = _ref5.field,
|
|
27191
|
-
config = _ref5.config
|
|
27192
|
-
_ref5$required = _ref5.required,
|
|
27193
|
-
required = _ref5$required === void 0 ? false : _ref5$required;
|
|
27179
|
+
config = _ref5.config;
|
|
27194
27180
|
|
|
27195
27181
|
var getDefaultChecked = function getDefaultChecked(value, idx) {
|
|
27196
27182
|
var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
|
|
@@ -27223,8 +27209,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
|
|
|
27223
27209
|
setValue(e.target.value);
|
|
27224
27210
|
handleChange(e);
|
|
27225
27211
|
},
|
|
27226
|
-
defaultChecked: getDefaultChecked(value, index)
|
|
27227
|
-
required: required
|
|
27212
|
+
defaultChecked: getDefaultChecked(value, index)
|
|
27228
27213
|
}), /*#__PURE__*/React.createElement(Text$1, {
|
|
27229
27214
|
as: "label",
|
|
27230
27215
|
htmlFor: id,
|
|
@@ -27267,9 +27252,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27267
27252
|
_ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
|
|
27268
27253
|
ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
|
|
27269
27254
|
_ref2$ariaLabel = _ref2.ariaLabel,
|
|
27270
|
-
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel
|
|
27271
|
-
_ref2$isRequired = _ref2.isRequired,
|
|
27272
|
-
isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
|
|
27255
|
+
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
|
|
27273
27256
|
var buttonBorder = {
|
|
27274
27257
|
onFocused: {
|
|
27275
27258
|
borderColor: themeValues.activeColor,
|
|
@@ -27329,8 +27312,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27329
27312
|
disabled: disabled,
|
|
27330
27313
|
onClick: toggleRadio,
|
|
27331
27314
|
"aria-describedby": ariaDescribedBy,
|
|
27332
|
-
tabIndex: "-1"
|
|
27333
|
-
required: isRequired
|
|
27315
|
+
tabIndex: "-1"
|
|
27334
27316
|
}, extraProps)), /*#__PURE__*/React.createElement(Motion, {
|
|
27335
27317
|
borderWidth: "1px",
|
|
27336
27318
|
borderStyle: "solid",
|
|
@@ -38723,7 +38705,7 @@ validatorFns[INCLUDED_IN] = (value, args, form) =>
|
|
|
38723
38705
|
|
|
38724
38706
|
const REQUIRED = 'validator/REQUIRED';
|
|
38725
38707
|
const REQUIRED_ERROR = 'error/REQUIRED';
|
|
38726
|
-
const required
|
|
38708
|
+
const required = createValidator(REQUIRED, REQUIRED_ERROR);
|
|
38727
38709
|
validatorFns[REQUIRED] = (value, args, form) => value !== '';
|
|
38728
38710
|
|
|
38729
38711
|
const ONLY_INTEGERS = 'validator/ONLY_INTEGERS';
|
|
@@ -39336,15 +39318,15 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39336
39318
|
}, []);
|
|
39337
39319
|
}
|
|
39338
39320
|
|
|
39339
|
-
var street1ErrorMessages = _defineProperty({}, required
|
|
39321
|
+
var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
|
|
39340
39322
|
|
|
39341
|
-
var cityErrorMessages = _defineProperty({}, required
|
|
39323
|
+
var cityErrorMessages = _defineProperty({}, required.error, "City is required");
|
|
39342
39324
|
|
|
39343
|
-
var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required
|
|
39325
|
+
var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
|
|
39344
39326
|
|
|
39345
|
-
var stateProvinceErrorMessages = _defineProperty({}, required
|
|
39327
|
+
var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required");
|
|
39346
39328
|
|
|
39347
|
-
var countryErrorMessages = _defineProperty({}, required
|
|
39329
|
+
var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
|
|
39348
39330
|
|
|
39349
39331
|
var isUS = fields.country.rawValue === "US";
|
|
39350
39332
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
@@ -39369,8 +39351,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39369
39351
|
}
|
|
39370
39352
|
},
|
|
39371
39353
|
showErrors: showErrors,
|
|
39372
|
-
dataQa: "Country"
|
|
39373
|
-
isRequired: true
|
|
39354
|
+
dataQa: "Country"
|
|
39374
39355
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39375
39356
|
labelTextWhenNoError: "Address",
|
|
39376
39357
|
errorMessages: street1ErrorMessages,
|
|
@@ -39381,8 +39362,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39381
39362
|
return e.key === "Enter" && handleSubmit(e);
|
|
39382
39363
|
},
|
|
39383
39364
|
autocompleteValue: "address-line1",
|
|
39384
|
-
dataQa: "Address"
|
|
39385
|
-
required: true
|
|
39365
|
+
dataQa: "Address"
|
|
39386
39366
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39387
39367
|
labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
|
|
39388
39368
|
field: fields.street2,
|
|
@@ -39392,8 +39372,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39392
39372
|
return e.key === "Enter" && handleSubmit(e);
|
|
39393
39373
|
},
|
|
39394
39374
|
autocompleteValue: "address-line2",
|
|
39395
|
-
dataQa: "Address Line 2"
|
|
39396
|
-
required: true
|
|
39375
|
+
dataQa: "Address Line 2"
|
|
39397
39376
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39398
39377
|
labelTextWhenNoError: "City",
|
|
39399
39378
|
errorMessages: cityErrorMessages,
|
|
@@ -39404,8 +39383,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39404
39383
|
return e.key === "Enter" && handleSubmit(e);
|
|
39405
39384
|
},
|
|
39406
39385
|
autocompleteValue: "address-level2",
|
|
39407
|
-
dataQa: "City"
|
|
39408
|
-
required: true
|
|
39386
|
+
dataQa: "City"
|
|
39409
39387
|
}), /*#__PURE__*/React.createElement(FormStateDropdown, {
|
|
39410
39388
|
labelTextWhenNoError: isUS ? "State" : "State or Province",
|
|
39411
39389
|
errorMessages: stateProvinceErrorMessages,
|
|
@@ -39416,8 +39394,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39416
39394
|
onKeyDown: function onKeyDown(e) {
|
|
39417
39395
|
return e.key === "Enter" && handleSubmit(e);
|
|
39418
39396
|
},
|
|
39419
|
-
dataQa: "State or Province"
|
|
39420
|
-
required: true
|
|
39397
|
+
dataQa: "State or Province"
|
|
39421
39398
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39422
39399
|
isNum: isUS,
|
|
39423
39400
|
formatter: isUS ? zipFormat : null,
|
|
@@ -39430,8 +39407,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39430
39407
|
return e.key === "Enter" && handleSubmit(e);
|
|
39431
39408
|
},
|
|
39432
39409
|
autocompleteValue: "postal-code",
|
|
39433
|
-
dataQa: "Zip code"
|
|
39434
|
-
required: true
|
|
39410
|
+
dataQa: "Zip code"
|
|
39435
39411
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
39436
39412
|
name: "address checkbox",
|
|
39437
39413
|
title: "Save address to wallet",
|
|
@@ -39442,23 +39418,23 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39442
39418
|
|
|
39443
39419
|
var formConfig = {
|
|
39444
39420
|
street1: {
|
|
39445
|
-
validators: [required
|
|
39421
|
+
validators: [required()]
|
|
39446
39422
|
},
|
|
39447
39423
|
street2: {
|
|
39448
39424
|
validators: []
|
|
39449
39425
|
},
|
|
39450
39426
|
city: {
|
|
39451
|
-
validators: [required
|
|
39427
|
+
validators: [required()]
|
|
39452
39428
|
},
|
|
39453
39429
|
stateProvince: {
|
|
39454
|
-
validators: [required
|
|
39430
|
+
validators: [required()]
|
|
39455
39431
|
},
|
|
39456
39432
|
country: {
|
|
39457
39433
|
defaultValue: "US",
|
|
39458
|
-
validators: [required
|
|
39434
|
+
validators: [required()]
|
|
39459
39435
|
},
|
|
39460
39436
|
zip: {
|
|
39461
|
-
validators: [required
|
|
39437
|
+
validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
|
|
39462
39438
|
constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
|
|
39463
39439
|
}
|
|
39464
39440
|
};
|
|
@@ -39550,9 +39526,9 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
|
|
|
39550
39526
|
}, []);
|
|
39551
39527
|
}
|
|
39552
39528
|
|
|
39553
|
-
var currentPasswordErrorMessages = _defineProperty({}, required
|
|
39529
|
+
var currentPasswordErrorMessages = _defineProperty({}, required.error, "Current Password is required");
|
|
39554
39530
|
|
|
39555
|
-
var newPasswordErrorMessages = (_newPasswordErrorMess = {}, _defineProperty(_newPasswordErrorMess, required
|
|
39531
|
+
var newPasswordErrorMessages = (_newPasswordErrorMess = {}, _defineProperty(_newPasswordErrorMess, required.error, "New Password field is required."), _defineProperty(_newPasswordErrorMess, hasLength.error, "Your new password must have at least 8 characters"), _defineProperty(_newPasswordErrorMess, hasNumber.error, "Your new password must contain at least one number"), _defineProperty(_newPasswordErrorMess, hasLowercaseLetter.error, "Your new password must contain at least one lowercase letter"), _defineProperty(_newPasswordErrorMess, hasUppercaseLetter.error, "Your new password must contain at least one uppercase letter"), _defineProperty(_newPasswordErrorMess, hasSpecialCharacter.error, "Your new password must contain at least one special character (!@#$%^&*.?)"), _newPasswordErrorMess);
|
|
39556
39532
|
|
|
39557
39533
|
var confirmNewPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match your new password");
|
|
39558
39534
|
|
|
@@ -39645,13 +39621,13 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
|
|
|
39645
39621
|
|
|
39646
39622
|
var formConfig$1 = {
|
|
39647
39623
|
currentPassword: {
|
|
39648
|
-
validators: [required
|
|
39624
|
+
validators: [required()]
|
|
39649
39625
|
},
|
|
39650
39626
|
newPassword: {
|
|
39651
|
-
validators: [required
|
|
39627
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
39652
39628
|
},
|
|
39653
39629
|
confirmNewPassword: {
|
|
39654
|
-
validators: [required
|
|
39630
|
+
validators: [required(), matchesField("newPassword")]
|
|
39655
39631
|
}
|
|
39656
39632
|
};
|
|
39657
39633
|
|
|
@@ -39994,9 +39970,9 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
39994
39970
|
}, []);
|
|
39995
39971
|
}
|
|
39996
39972
|
|
|
39997
|
-
var firstNameErrorMessages = _defineProperty({}, required
|
|
39973
|
+
var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
|
|
39998
39974
|
|
|
39999
|
-
var lastNameErrorMessages = _defineProperty({}, required
|
|
39975
|
+
var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
|
|
40000
39976
|
|
|
40001
39977
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
40002
39978
|
role: "form",
|
|
@@ -40011,8 +39987,7 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
40011
39987
|
onKeyDown: function onKeyDown(e) {
|
|
40012
39988
|
return e.key === "Enter" && handleSubmit(e);
|
|
40013
39989
|
},
|
|
40014
|
-
autocompleteValue: "given-name"
|
|
40015
|
-
isRequired: true
|
|
39990
|
+
autocompleteValue: "given-name"
|
|
40016
39991
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
40017
39992
|
labelTextWhenNoError: "Last Name",
|
|
40018
39993
|
dataQa: "Edit Last Name",
|
|
@@ -40023,17 +39998,16 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
40023
39998
|
onKeyDown: function onKeyDown(e) {
|
|
40024
39999
|
return e.key === "Enter" && handleSubmit(e);
|
|
40025
40000
|
},
|
|
40026
|
-
autocompleteValue: "family-name"
|
|
40027
|
-
isRequired: true
|
|
40001
|
+
autocompleteValue: "family-name"
|
|
40028
40002
|
})));
|
|
40029
40003
|
};
|
|
40030
40004
|
|
|
40031
40005
|
var formConfig$2 = {
|
|
40032
40006
|
firstName: {
|
|
40033
|
-
validators: [required
|
|
40007
|
+
validators: [required()]
|
|
40034
40008
|
},
|
|
40035
40009
|
lastName: {
|
|
40036
|
-
validators: [required
|
|
40010
|
+
validators: [required()]
|
|
40037
40011
|
}
|
|
40038
40012
|
};
|
|
40039
40013
|
|
|
@@ -40336,9 +40310,7 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40336
40310
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
40337
40311
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
40338
40312
|
saveToWallet = _ref.saveToWallet,
|
|
40339
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
40340
|
-
_ref$isRequired = _ref.isRequired,
|
|
40341
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
40313
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked;
|
|
40342
40314
|
|
|
40343
40315
|
if (clearOnDismount) {
|
|
40344
40316
|
useEffect$1(function () {
|
|
@@ -40348,14 +40320,13 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40348
40320
|
}, []);
|
|
40349
40321
|
}
|
|
40350
40322
|
|
|
40351
|
-
var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required
|
|
40323
|
+
var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
|
|
40352
40324
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
40353
40325
|
variant: variant,
|
|
40354
40326
|
role: "form",
|
|
40355
40327
|
"aria-label": "Email address"
|
|
40356
40328
|
}, guestCheckout && /*#__PURE__*/React.createElement(Paragraph$1, {
|
|
40357
|
-
margin: "0 0 1.125rem 0"
|
|
40358
|
-
id: "explanation"
|
|
40329
|
+
margin: "0 0 1.125rem 0"
|
|
40359
40330
|
}, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(FormInput$1, {
|
|
40360
40331
|
labelTextWhenNoError: "Email address",
|
|
40361
40332
|
errorMessages: emailFieldErrorMessages,
|
|
@@ -40368,20 +40339,18 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40368
40339
|
},
|
|
40369
40340
|
isEmail: true,
|
|
40370
40341
|
autocompleteValue: "email",
|
|
40371
|
-
dataQa: "Email address"
|
|
40372
|
-
required: isRequired
|
|
40342
|
+
dataQa: "Email address"
|
|
40373
40343
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
40374
40344
|
name: "email checkbox",
|
|
40375
40345
|
title: "Save email address to wallet",
|
|
40376
40346
|
checked: walletCheckboxMarked,
|
|
40377
|
-
onChange: saveToWallet
|
|
40378
|
-
"aria-describedby": "explanation"
|
|
40347
|
+
onChange: saveToWallet
|
|
40379
40348
|
})));
|
|
40380
40349
|
};
|
|
40381
40350
|
|
|
40382
40351
|
var formConfig$3 = {
|
|
40383
40352
|
email: {
|
|
40384
|
-
validators: [required
|
|
40353
|
+
validators: [required(), isProbablyEmail()]
|
|
40385
40354
|
}
|
|
40386
40355
|
};
|
|
40387
40356
|
|
|
@@ -40448,7 +40417,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
|
|
|
40448
40417
|
}, []);
|
|
40449
40418
|
}
|
|
40450
40419
|
|
|
40451
|
-
var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required
|
|
40420
|
+
var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
|
|
40452
40421
|
return /*#__PURE__*/React.createElement(FormInput$1, {
|
|
40453
40422
|
labelTextWhenNoError: "Email address",
|
|
40454
40423
|
errorMessages: EmailErrorMessages,
|
|
@@ -40465,7 +40434,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
|
|
|
40465
40434
|
|
|
40466
40435
|
var formConfig$4 = {
|
|
40467
40436
|
email: {
|
|
40468
|
-
validators: [required
|
|
40437
|
+
validators: [required(), isProbablyEmail()]
|
|
40469
40438
|
}
|
|
40470
40439
|
};
|
|
40471
40440
|
|
|
@@ -42127,9 +42096,9 @@ var LoginForm = function LoginForm(_ref) {
|
|
|
42127
42096
|
}, []);
|
|
42128
42097
|
}
|
|
42129
42098
|
|
|
42130
|
-
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required
|
|
42099
|
+
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
|
|
42131
42100
|
|
|
42132
|
-
var passwordErrorMessages = _defineProperty({}, required
|
|
42101
|
+
var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
|
|
42133
42102
|
|
|
42134
42103
|
return /*#__PURE__*/React.createElement(FormInputColumn, {
|
|
42135
42104
|
role: "form",
|
|
@@ -42162,10 +42131,10 @@ var LoginForm = function LoginForm(_ref) {
|
|
|
42162
42131
|
|
|
42163
42132
|
var formConfig$5 = {
|
|
42164
42133
|
email: {
|
|
42165
|
-
validators: [required
|
|
42134
|
+
validators: [required(), isProbablyEmail()]
|
|
42166
42135
|
},
|
|
42167
42136
|
password: {
|
|
42168
|
-
validators: [required
|
|
42137
|
+
validators: [required()]
|
|
42169
42138
|
}
|
|
42170
42139
|
};
|
|
42171
42140
|
|
|
@@ -46770,7 +46739,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
|
|
|
46770
46739
|
}, []);
|
|
46771
46740
|
}
|
|
46772
46741
|
|
|
46773
|
-
var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required
|
|
46742
|
+
var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "There is a minimum payment of ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "There is a maximum payment of ".concat(displayCurrency(maximum))), _amountErrors);
|
|
46774
46743
|
|
|
46775
46744
|
var getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
|
|
46776
46745
|
var errorMessages = amountErrors;
|
|
@@ -46844,7 +46813,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
|
|
|
46844
46813
|
var createPartialAmountFormValidators = function createPartialAmountFormValidators(item, lineItems, maximum) {
|
|
46845
46814
|
var minimum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
46846
46815
|
var blockPartialPaymentOverpay = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
46847
|
-
var validators = [required
|
|
46816
|
+
var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
|
|
46848
46817
|
return lineItem != item;
|
|
46849
46818
|
}).reduce(function (acc, curr) {
|
|
46850
46819
|
return [].concat(_toConsumableArray(acc), [curr.id]);
|
|
@@ -47906,17 +47875,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47906
47875
|
|
|
47907
47876
|
var showTerms = !!termsContent;
|
|
47908
47877
|
|
|
47909
|
-
var nameErrors = _defineProperty({}, required
|
|
47878
|
+
var nameErrors = _defineProperty({}, required.error, "Name is required");
|
|
47910
47879
|
|
|
47911
|
-
var routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required
|
|
47880
|
+
var routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required.error, "Routing number is required"), _defineProperty(_routingNumberErrors, hasLength.error, "Routing number must be 9 digits"), _defineProperty(_routingNumberErrors, isRoutingNumber.error, "Invalid routing number"), _routingNumberErrors);
|
|
47912
47881
|
|
|
47913
47882
|
var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
|
|
47914
47883
|
|
|
47915
|
-
var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required
|
|
47884
|
+
var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required.error, "Account number is required"), _defineProperty(_accountNumberErrors, hasLength.error, "Account number must be between 5 and 17 digits"), _accountNumberErrors);
|
|
47916
47885
|
|
|
47917
47886
|
var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
|
|
47918
47887
|
|
|
47919
|
-
var accountTypeErrors = _defineProperty({}, required
|
|
47888
|
+
var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
|
|
47920
47889
|
|
|
47921
47890
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
47922
47891
|
variant: variant,
|
|
@@ -47932,8 +47901,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47932
47901
|
onKeyDown: function onKeyDown(e) {
|
|
47933
47902
|
return e.key === "Enter" && handleSubmit(e);
|
|
47934
47903
|
},
|
|
47935
|
-
autocompleteValue: "name"
|
|
47936
|
-
isRequired: true
|
|
47904
|
+
autocompleteValue: "name"
|
|
47937
47905
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
47938
47906
|
labelTextWhenNoError: "Routing number",
|
|
47939
47907
|
dataQa: "Routing number",
|
|
@@ -47955,8 +47923,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47955
47923
|
},
|
|
47956
47924
|
onKeyDown: function onKeyDown(e) {
|
|
47957
47925
|
return e.key === "Enter" && handleSubmit(e);
|
|
47958
|
-
}
|
|
47959
|
-
isRequired: true
|
|
47926
|
+
}
|
|
47960
47927
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
47961
47928
|
labelTextWhenNoError: "Confirm routing number",
|
|
47962
47929
|
dataQa: "Confirm routing number",
|
|
@@ -47967,7 +47934,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47967
47934
|
onKeyDown: function onKeyDown(e) {
|
|
47968
47935
|
return e.key === "Enter" && handleSubmit(e);
|
|
47969
47936
|
},
|
|
47970
|
-
isRequired: true,
|
|
47971
47937
|
isNum: true
|
|
47972
47938
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
47973
47939
|
labelTextWhenNoError: "Account number",
|
|
@@ -47976,7 +47942,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47976
47942
|
field: fields.accountNumber,
|
|
47977
47943
|
fieldActions: actions.fields.accountNumber,
|
|
47978
47944
|
showErrors: showErrors,
|
|
47979
|
-
isRequired: true,
|
|
47980
47945
|
isNum: true,
|
|
47981
47946
|
helperModal: function helperModal() {
|
|
47982
47947
|
return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
|
|
@@ -47994,7 +47959,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47994
47959
|
}
|
|
47995
47960
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
47996
47961
|
labelTextWhenNoError: "Confirm account number",
|
|
47997
|
-
isRequired: true,
|
|
47998
47962
|
dataQa: "Confirm account number",
|
|
47999
47963
|
errorMessages: confirmAccountNumberErrors,
|
|
48000
47964
|
field: fields.confirmAccountNumber,
|
|
@@ -48023,7 +47987,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48023
47987
|
field: fields.accountType
|
|
48024
47988
|
}), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
48025
47989
|
title: "Save as Default Payment Method",
|
|
48026
|
-
required: true,
|
|
48027
47990
|
dataQa: "default-payment-ach",
|
|
48028
47991
|
name: "default-payment-ach",
|
|
48029
47992
|
onChange: toggleCheckbox,
|
|
@@ -48050,10 +48013,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48050
48013
|
|
|
48051
48014
|
var formConfig$6 = {
|
|
48052
48015
|
name: {
|
|
48053
|
-
validators: [required
|
|
48016
|
+
validators: [required()]
|
|
48054
48017
|
},
|
|
48055
48018
|
routingNumber: {
|
|
48056
|
-
validators: [required
|
|
48019
|
+
validators: [required(), hasLength(9, 9), isRoutingNumber()],
|
|
48057
48020
|
constraints: [onlyIntegers(), hasLength(0, 9)]
|
|
48058
48021
|
},
|
|
48059
48022
|
confirmRoutingNumber: {
|
|
@@ -48061,7 +48024,7 @@ var formConfig$6 = {
|
|
|
48061
48024
|
constraints: [onlyIntegers(), hasLength(0, 9)]
|
|
48062
48025
|
},
|
|
48063
48026
|
accountNumber: {
|
|
48064
|
-
validators: [required
|
|
48027
|
+
validators: [required(), hasLength(5, 17)],
|
|
48065
48028
|
constraints: [onlyIntegers(), hasLength(0, 17)]
|
|
48066
48029
|
},
|
|
48067
48030
|
confirmAccountNumber: {
|
|
@@ -48070,7 +48033,7 @@ var formConfig$6 = {
|
|
|
48070
48033
|
},
|
|
48071
48034
|
accountType: {
|
|
48072
48035
|
defaultValue: "CHECKING",
|
|
48073
|
-
validators: [required
|
|
48036
|
+
validators: [required()]
|
|
48074
48037
|
}
|
|
48075
48038
|
};
|
|
48076
48039
|
|
|
@@ -48121,14 +48084,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48121
48084
|
}
|
|
48122
48085
|
}, []);
|
|
48123
48086
|
|
|
48124
|
-
var nameOnCardErrors = _defineProperty({}, required
|
|
48087
|
+
var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
|
|
48125
48088
|
|
|
48126
|
-
var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required
|
|
48127
|
-
var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required
|
|
48128
|
-
var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required
|
|
48129
|
-
var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required
|
|
48089
|
+
var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
|
|
48090
|
+
var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, isValidMonth.error, "Expiration month is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
|
|
48091
|
+
var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
|
|
48092
|
+
var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
|
|
48130
48093
|
|
|
48131
|
-
var countryErrorMessages = _defineProperty({}, required
|
|
48094
|
+
var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
|
|
48132
48095
|
|
|
48133
48096
|
var isUS = fields.country.rawValue === "US";
|
|
48134
48097
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
@@ -48148,8 +48111,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48148
48111
|
}
|
|
48149
48112
|
},
|
|
48150
48113
|
showErrors: showErrors,
|
|
48151
|
-
dataQa: "Country"
|
|
48152
|
-
isRequired: true
|
|
48114
|
+
dataQa: "Country"
|
|
48153
48115
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48154
48116
|
labelTextWhenNoError: "Name on card",
|
|
48155
48117
|
dataQa: "Name on card",
|
|
@@ -48160,8 +48122,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48160
48122
|
onKeyDown: function onKeyDown(e) {
|
|
48161
48123
|
return e.key === "Enter" && handleSubmit(e);
|
|
48162
48124
|
},
|
|
48163
|
-
autocompleteValue: "cc-name"
|
|
48164
|
-
required: true
|
|
48125
|
+
autocompleteValue: "cc-name"
|
|
48165
48126
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48166
48127
|
labelTextWhenNoError: "Credit card number",
|
|
48167
48128
|
dataQa: "Credit card number",
|
|
@@ -48174,8 +48135,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48174
48135
|
return e.key === "Enter" && handleSubmit(e);
|
|
48175
48136
|
},
|
|
48176
48137
|
isNum: true,
|
|
48177
|
-
autocompleteValue: "cc-number"
|
|
48178
|
-
required: true
|
|
48138
|
+
autocompleteValue: "cc-number"
|
|
48179
48139
|
}), /*#__PURE__*/React.createElement(FormInputRow, {
|
|
48180
48140
|
breakpoint: isMobile ? "1000rem" : "21rem",
|
|
48181
48141
|
childGap: isMobile ? "0rem" : "1rem"
|
|
@@ -48193,8 +48153,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48193
48153
|
isNum: true,
|
|
48194
48154
|
removeFromValue: /\// // removes "/" from browser autofill
|
|
48195
48155
|
,
|
|
48196
|
-
autocompleteValue: "cc-exp"
|
|
48197
|
-
required: true
|
|
48156
|
+
autocompleteValue: "cc-exp"
|
|
48198
48157
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48199
48158
|
labelTextWhenNoError: "CVV",
|
|
48200
48159
|
dataQa: "CVV",
|
|
@@ -48207,8 +48166,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48207
48166
|
onKeyDown: function onKeyDown(e) {
|
|
48208
48167
|
return e.key === "Enter" && handleSubmit(e);
|
|
48209
48168
|
},
|
|
48210
|
-
autocompleteValue: "cc-csc"
|
|
48211
|
-
required: true
|
|
48169
|
+
autocompleteValue: "cc-csc"
|
|
48212
48170
|
})), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
|
|
48213
48171
|
padding: isMobile ? "0" : "0 0.5rem 0 0",
|
|
48214
48172
|
width: isMobile ? "100%" : "50%"
|
|
@@ -48224,8 +48182,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48224
48182
|
onKeyDown: function onKeyDown(e) {
|
|
48225
48183
|
return e.key === "Enter" && handleSubmit(e);
|
|
48226
48184
|
},
|
|
48227
|
-
autocompleteValue: "billing postal-code"
|
|
48228
|
-
required: true
|
|
48185
|
+
autocompleteValue: "billing postal-code"
|
|
48229
48186
|
})), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
|
|
48230
48187
|
childGap: "4px",
|
|
48231
48188
|
align: "center"
|
|
@@ -48250,25 +48207,25 @@ var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
|
|
|
48250
48207
|
var formConfig$7 = {
|
|
48251
48208
|
country: {
|
|
48252
48209
|
defaultValue: "US",
|
|
48253
|
-
validators: [required
|
|
48210
|
+
validators: [required()]
|
|
48254
48211
|
},
|
|
48255
48212
|
nameOnCard: {
|
|
48256
|
-
validators: [required
|
|
48213
|
+
validators: [required()]
|
|
48257
48214
|
},
|
|
48258
48215
|
creditCardNumber: {
|
|
48259
|
-
validators: [required
|
|
48216
|
+
validators: [required(), hasLength(15, 16)],
|
|
48260
48217
|
constraints: [onlyIntegers(), hasLength(0, 16)]
|
|
48261
48218
|
},
|
|
48262
48219
|
expirationDate: {
|
|
48263
|
-
validators: [required
|
|
48220
|
+
validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
|
|
48264
48221
|
constraints: [onlyExpirationDate(), hasLength(0, 4)]
|
|
48265
48222
|
},
|
|
48266
48223
|
cvv: {
|
|
48267
|
-
validators: [required
|
|
48224
|
+
validators: [required(), hasLength(3, 4)],
|
|
48268
48225
|
constraints: [onlyIntegers(), hasLength(0, 4)]
|
|
48269
48226
|
},
|
|
48270
48227
|
zipCode: {
|
|
48271
|
-
validators: [required
|
|
48228
|
+
validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
|
|
48272
48229
|
constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
|
|
48273
48230
|
}
|
|
48274
48231
|
};
|
|
@@ -48418,9 +48375,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48418
48375
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
48419
48376
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
48420
48377
|
saveToWallet = _ref.saveToWallet,
|
|
48421
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
48422
|
-
_ref$isRequired = _ref.isRequired,
|
|
48423
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
48378
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked;
|
|
48424
48379
|
|
|
48425
48380
|
if (clearOnDismount) {
|
|
48426
48381
|
useEffect$1(function () {
|
|
@@ -48430,7 +48385,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48430
48385
|
}, []);
|
|
48431
48386
|
}
|
|
48432
48387
|
|
|
48433
|
-
var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required
|
|
48388
|
+
var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
|
|
48434
48389
|
return /*#__PURE__*/React.createElement(FormContainer$1, {
|
|
48435
48390
|
variant: variant,
|
|
48436
48391
|
role: "form",
|
|
@@ -48447,8 +48402,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48447
48402
|
},
|
|
48448
48403
|
autocompleteValue: "tel-national",
|
|
48449
48404
|
dataQa: "Phone number",
|
|
48450
|
-
isNum: true
|
|
48451
|
-
required: isRequired
|
|
48405
|
+
isNum: true
|
|
48452
48406
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
48453
48407
|
name: "phone checkbox",
|
|
48454
48408
|
title: "Save phone number to wallet",
|
|
@@ -48459,7 +48413,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48459
48413
|
|
|
48460
48414
|
var formConfig$8 = {
|
|
48461
48415
|
phone: {
|
|
48462
|
-
validators: [required
|
|
48416
|
+
validators: [required(), hasLength(10, 10)],
|
|
48463
48417
|
constraints: [onlyIntegers(), hasLength(0, 10)]
|
|
48464
48418
|
}
|
|
48465
48419
|
};
|
|
@@ -48497,23 +48451,20 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
48497
48451
|
_ref$handleChange = _ref.handleChange,
|
|
48498
48452
|
handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
|
|
48499
48453
|
field = _ref.field,
|
|
48500
|
-
fieldActions = _ref.fieldActions
|
|
48501
|
-
_ref$isRequired = _ref.isRequired,
|
|
48502
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
48454
|
+
fieldActions = _ref.fieldActions;
|
|
48503
48455
|
|
|
48504
48456
|
var setValue = function setValue(value) {
|
|
48505
48457
|
return fieldActions.set(value);
|
|
48506
48458
|
};
|
|
48507
48459
|
|
|
48508
48460
|
return /*#__PURE__*/React.createElement(StyledFieldset, {
|
|
48461
|
+
role: "radiogroup",
|
|
48462
|
+
"aria-labelledby": "radio-group-".concat(groupName, "-heading"),
|
|
48509
48463
|
$extraStyles: extraStyles
|
|
48510
48464
|
}, Heading !== null && Heading, /*#__PURE__*/React.createElement(Stack, {
|
|
48511
|
-
childGap: "4px"
|
|
48512
|
-
role: "radiogroup",
|
|
48513
|
-
"aria-labelledby": "radio-group-".concat(groupName, "-heading")
|
|
48465
|
+
childGap: "4px"
|
|
48514
48466
|
}, config.map(function (c, idx) {
|
|
48515
48467
|
return /*#__PURE__*/React.createElement(RadioButtonWithLabel$1, _extends({
|
|
48516
|
-
required: isRequired,
|
|
48517
48468
|
index: idx,
|
|
48518
48469
|
key: c.id
|
|
48519
48470
|
}, c, {
|
|
@@ -48584,13 +48535,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48584
48535
|
openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
|
|
48585
48536
|
_ref$containerStyles = _ref.containerStyles,
|
|
48586
48537
|
containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
|
|
48587
|
-
ariaDescribedBy = _ref.ariaDescribedBy
|
|
48588
|
-
_ref$role = _ref.role,
|
|
48589
|
-
role = _ref$role === void 0 ? "radiogroup" : _ref$role,
|
|
48590
|
-
_ref$required = _ref.required,
|
|
48591
|
-
required = _ref$required === void 0 ? false : _ref$required,
|
|
48592
|
-
_ref$label = _ref.label,
|
|
48593
|
-
label = _ref$label === void 0 ? "" : _ref$label;
|
|
48538
|
+
ariaDescribedBy = _ref.ariaDescribedBy;
|
|
48594
48539
|
|
|
48595
48540
|
var handleKeyDown = function handleKeyDown(id, e) {
|
|
48596
48541
|
if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
|
|
@@ -48646,8 +48591,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48646
48591
|
extraStyles: containerStyles
|
|
48647
48592
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
48648
48593
|
childGap: "0",
|
|
48649
|
-
role:
|
|
48650
|
-
required: required
|
|
48594
|
+
role: "radiogroup"
|
|
48651
48595
|
}, sections.filter(function (section) {
|
|
48652
48596
|
return !section.hidden;
|
|
48653
48597
|
}).map(function (section) {
|
|
@@ -48669,8 +48613,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48669
48613
|
extraStyles: borderStyles,
|
|
48670
48614
|
role: "radio",
|
|
48671
48615
|
"aria-checked": openSection === section.id,
|
|
48672
|
-
|
|
48673
|
-
|
|
48616
|
+
disabled: section.disabled,
|
|
48617
|
+
required: section === null || section === void 0 ? void 0 : section.required
|
|
48674
48618
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
48675
48619
|
childGap: "0"
|
|
48676
48620
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -48700,6 +48644,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48700
48644
|
}, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
|
|
48701
48645
|
padding: "0"
|
|
48702
48646
|
}, /*#__PURE__*/React.createElement(RadioButton$2, {
|
|
48647
|
+
role: "radio",
|
|
48648
|
+
required: !!(section !== null && section !== void 0 && section.required),
|
|
48703
48649
|
id: "radio-input-".concat(idString(section)),
|
|
48704
48650
|
name: idString(section),
|
|
48705
48651
|
ariaDescribedBy: ariaDescribedBy,
|
|
@@ -48708,8 +48654,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48708
48654
|
toggleRadio: section.disabled ? noop : function () {
|
|
48709
48655
|
return toggleOpenSection(section.id);
|
|
48710
48656
|
},
|
|
48711
|
-
tabIndex: "-1"
|
|
48712
|
-
isRequired: required
|
|
48657
|
+
tabIndex: "-1"
|
|
48713
48658
|
})), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
|
|
48714
48659
|
align: "center"
|
|
48715
48660
|
}, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
|
|
@@ -48768,12 +48713,12 @@ var RegistrationForm = function RegistrationForm(_ref) {
|
|
|
48768
48713
|
}, []);
|
|
48769
48714
|
}
|
|
48770
48715
|
|
|
48771
|
-
var firstNameErrorMessages = _defineProperty({}, required
|
|
48716
|
+
var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
|
|
48772
48717
|
|
|
48773
|
-
var lastNameErrorMessages = _defineProperty({}, required
|
|
48718
|
+
var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
|
|
48774
48719
|
|
|
48775
|
-
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required
|
|
48776
|
-
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required
|
|
48720
|
+
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
|
|
48721
|
+
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
|
|
48777
48722
|
|
|
48778
48723
|
var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
|
|
48779
48724
|
|
|
@@ -48849,19 +48794,19 @@ var RegistrationForm = function RegistrationForm(_ref) {
|
|
|
48849
48794
|
|
|
48850
48795
|
var formConfig$9 = {
|
|
48851
48796
|
firstName: {
|
|
48852
|
-
validators: [required
|
|
48797
|
+
validators: [required()]
|
|
48853
48798
|
},
|
|
48854
48799
|
lastName: {
|
|
48855
|
-
validators: [required
|
|
48800
|
+
validators: [required()]
|
|
48856
48801
|
},
|
|
48857
48802
|
email: {
|
|
48858
|
-
validators: [required
|
|
48803
|
+
validators: [required(), isProbablyEmail()]
|
|
48859
48804
|
},
|
|
48860
48805
|
password: {
|
|
48861
|
-
validators: [required
|
|
48806
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
48862
48807
|
},
|
|
48863
48808
|
confirmPassword: {
|
|
48864
|
-
validators: [required
|
|
48809
|
+
validators: [required(), matchesField("password")]
|
|
48865
48810
|
}
|
|
48866
48811
|
};
|
|
48867
48812
|
|
|
@@ -48942,7 +48887,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
|
|
|
48942
48887
|
}, []);
|
|
48943
48888
|
}
|
|
48944
48889
|
|
|
48945
|
-
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required
|
|
48890
|
+
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required.error, "Password is required"), _defineProperty(_passwordErrorMessage, hasLength.error, "Password must have at least 8 characters"), _defineProperty(_passwordErrorMessage, hasNumber.error, "Password must contain at least one number"), _defineProperty(_passwordErrorMessage, hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), _defineProperty(_passwordErrorMessage, hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), _defineProperty(_passwordErrorMessage, hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)"), _passwordErrorMessage);
|
|
48946
48891
|
|
|
48947
48892
|
var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
|
|
48948
48893
|
|
|
@@ -48981,10 +48926,10 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
|
|
|
48981
48926
|
|
|
48982
48927
|
var formConfig$a = {
|
|
48983
48928
|
password: {
|
|
48984
|
-
validators: [required
|
|
48929
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
48985
48930
|
},
|
|
48986
48931
|
confirmPassword: {
|
|
48987
|
-
validators: [required
|
|
48932
|
+
validators: [required(), matchesField("password")]
|
|
48988
48933
|
}
|
|
48989
48934
|
};
|
|
48990
48935
|
|