@thecb/components 9.1.1-beta.3 → 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 +112 -171
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +112 -171
- 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 -12
- package/src/components/molecules/radio-group/RadioGroup.stories.js +0 -2
- package/src/components/molecules/radio-section/RadioSection.js +6 -10
- package/src/components/molecules/radio-section/RadioSection.stories.js +4 -7
- package/src/components/molecules/radio-section/radio-button/RadioButton.js +1 -3
package/dist/index.cjs.js
CHANGED
|
@@ -12402,7 +12402,7 @@ if (typeof window !== "undefined") {
|
|
|
12402
12402
|
var MotionWrapper = styled__default(motion.div).withConfig({
|
|
12403
12403
|
displayName: "Motionstyled__MotionWrapper",
|
|
12404
12404
|
componentId: "sc-1m6r1io-0"
|
|
12405
|
-
})(["position:", ";display:", ";box-sizing:border-box;padding:", ";border:", ";border-color:", ";border-
|
|
12405
|
+
})(["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) {
|
|
12406
12406
|
var position = _ref.position;
|
|
12407
12407
|
return position;
|
|
12408
12408
|
}, function (_ref2) {
|
|
@@ -22104,8 +22104,7 @@ var StyledCheckbox = styled__default.div.withConfig({
|
|
|
22104
22104
|
focusedStyles = _ref3.focusedStyles,
|
|
22105
22105
|
errorStyles = _ref3.errorStyles,
|
|
22106
22106
|
disabledStyles = _ref3.disabledStyles,
|
|
22107
|
-
disabledCheckedStyles = _ref3.disabledCheckedStyles
|
|
22108
|
-
_ref3$required = _ref3.required;
|
|
22107
|
+
disabledCheckedStyles = _ref3.disabledCheckedStyles;
|
|
22109
22108
|
return error ? styled.css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? styled.css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(["", " ", ""], checkedStyles, focused && focusedStyles) : styled.css(["", " ", ""], defaultStyles, focused && focusedStyles);
|
|
22110
22109
|
});
|
|
22111
22110
|
|
|
@@ -22168,8 +22167,7 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22168
22167
|
onChange: onChange,
|
|
22169
22168
|
tabIndex: "-1",
|
|
22170
22169
|
"aria-invalid": error,
|
|
22171
|
-
"aria-describedby": error ? "".concat(name, "-error-message") : ""
|
|
22172
|
-
required: required
|
|
22170
|
+
"aria-describedby": error ? "".concat(name, "-error-message") : ""
|
|
22173
22171
|
}), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
|
|
22174
22172
|
role: "checkbox",
|
|
22175
22173
|
error: error,
|
|
@@ -25033,9 +25031,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25033
25031
|
showErrors = _ref.showErrors,
|
|
25034
25032
|
onChange = _ref.onChange,
|
|
25035
25033
|
_ref$dataQa = _ref.dataQa,
|
|
25036
|
-
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa
|
|
25037
|
-
_ref$isRequired = _ref.isRequired,
|
|
25038
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
25034
|
+
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
|
|
25039
25035
|
return /*#__PURE__*/React__default.createElement(FormSelect$1, {
|
|
25040
25036
|
options: options,
|
|
25041
25037
|
field: field,
|
|
@@ -25045,8 +25041,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25045
25041
|
errorMessages: errorMessages,
|
|
25046
25042
|
showErrors: showErrors,
|
|
25047
25043
|
onChange: onChange,
|
|
25048
|
-
autocompleteValue: "country-name"
|
|
25049
|
-
required: isRequired
|
|
25044
|
+
autocompleteValue: "country-name"
|
|
25050
25045
|
});
|
|
25051
25046
|
};
|
|
25052
25047
|
|
|
@@ -25891,7 +25886,7 @@ var fallbackValues$k = {
|
|
|
25891
25886
|
};
|
|
25892
25887
|
|
|
25893
25888
|
var _excluded$p = ["showErrors", "themeValues"],
|
|
25894
|
-
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"
|
|
25889
|
+
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
|
|
25895
25890
|
var InputField = styled__default.input.withConfig({
|
|
25896
25891
|
displayName: "FormInput__InputField",
|
|
25897
25892
|
componentId: "sc-l094r1-0"
|
|
@@ -25926,10 +25921,7 @@ var FormattedInputField = styled__default(function (_ref8) {
|
|
|
25926
25921
|
themeValues = _ref8.themeValues,
|
|
25927
25922
|
props = _objectWithoutProperties(_ref8, _excluded$p);
|
|
25928
25923
|
|
|
25929
|
-
|
|
25930
|
-
return /*#__PURE__*/React__default.createElement(FormattedInput, isRequired ? _objectSpread2(_objectSpread2({}, props), {}, {
|
|
25931
|
-
required: true
|
|
25932
|
-
}) : _objectSpread2({}, props));
|
|
25924
|
+
return /*#__PURE__*/React__default.createElement(FormattedInput, props);
|
|
25933
25925
|
}).withConfig({
|
|
25934
25926
|
displayName: "FormInput__FormattedInputField",
|
|
25935
25927
|
componentId: "sc-l094r1-1"
|
|
@@ -25981,8 +25973,6 @@ var FormInput = function FormInput(_ref15) {
|
|
|
25981
25973
|
removeFromValue = _ref15.removeFromValue,
|
|
25982
25974
|
_ref15$dataQa = _ref15.dataQa,
|
|
25983
25975
|
dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
|
|
25984
|
-
_ref15$isRequired = _ref15.isRequired,
|
|
25985
|
-
isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
|
|
25986
25976
|
props = _objectWithoutProperties(_ref15, _excluded2);
|
|
25987
25977
|
|
|
25988
25978
|
var _useState = React.useState(false),
|
|
@@ -26069,8 +26059,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26069
26059
|
$customHeight: customHeight,
|
|
26070
26060
|
$extraStyles: extraStyles,
|
|
26071
26061
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26072
|
-
autoComplete: autocompleteValue
|
|
26073
|
-
required: isRequired
|
|
26062
|
+
autoComplete: autocompleteValue
|
|
26074
26063
|
}, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
|
|
26075
26064
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
26076
26065
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
@@ -26089,8 +26078,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26089
26078
|
$customHeight: customHeight,
|
|
26090
26079
|
$extraStyles: extraStyles,
|
|
26091
26080
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26092
|
-
autoComplete: autocompleteValue
|
|
26093
|
-
required: isRequired
|
|
26081
|
+
autoComplete: autocompleteValue
|
|
26094
26082
|
}, props))), /*#__PURE__*/React__default.createElement(Stack, {
|
|
26095
26083
|
direction: "row",
|
|
26096
26084
|
justify: "space-between",
|
|
@@ -27196,9 +27184,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
|
|
|
27196
27184
|
_ref5$handleChange = _ref5.handleChange,
|
|
27197
27185
|
handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
|
|
27198
27186
|
field = _ref5.field,
|
|
27199
|
-
config = _ref5.config
|
|
27200
|
-
_ref5$required = _ref5.required,
|
|
27201
|
-
required = _ref5$required === void 0 ? false : _ref5$required;
|
|
27187
|
+
config = _ref5.config;
|
|
27202
27188
|
|
|
27203
27189
|
var getDefaultChecked = function getDefaultChecked(value, idx) {
|
|
27204
27190
|
var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
|
|
@@ -27231,8 +27217,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
|
|
|
27231
27217
|
setValue(e.target.value);
|
|
27232
27218
|
handleChange(e);
|
|
27233
27219
|
},
|
|
27234
|
-
defaultChecked: getDefaultChecked(value, index)
|
|
27235
|
-
required: required
|
|
27220
|
+
defaultChecked: getDefaultChecked(value, index)
|
|
27236
27221
|
}), /*#__PURE__*/React__default.createElement(Text$1, {
|
|
27237
27222
|
as: "label",
|
|
27238
27223
|
htmlFor: id,
|
|
@@ -27275,9 +27260,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27275
27260
|
_ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
|
|
27276
27261
|
ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
|
|
27277
27262
|
_ref2$ariaLabel = _ref2.ariaLabel,
|
|
27278
|
-
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel
|
|
27279
|
-
_ref2$isRequired = _ref2.isRequired,
|
|
27280
|
-
isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
|
|
27263
|
+
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
|
|
27281
27264
|
var buttonBorder = {
|
|
27282
27265
|
onFocused: {
|
|
27283
27266
|
borderColor: themeValues.activeColor,
|
|
@@ -27337,8 +27320,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27337
27320
|
disabled: disabled,
|
|
27338
27321
|
onClick: toggleRadio,
|
|
27339
27322
|
"aria-describedby": ariaDescribedBy,
|
|
27340
|
-
tabIndex: "-1"
|
|
27341
|
-
required: isRequired
|
|
27323
|
+
tabIndex: "-1"
|
|
27342
27324
|
}, extraProps)), /*#__PURE__*/React__default.createElement(Motion, {
|
|
27343
27325
|
borderWidth: "1px",
|
|
27344
27326
|
borderStyle: "solid",
|
|
@@ -38731,7 +38713,7 @@ validatorFns[INCLUDED_IN] = (value, args, form) =>
|
|
|
38731
38713
|
|
|
38732
38714
|
const REQUIRED = 'validator/REQUIRED';
|
|
38733
38715
|
const REQUIRED_ERROR = 'error/REQUIRED';
|
|
38734
|
-
const required
|
|
38716
|
+
const required = createValidator(REQUIRED, REQUIRED_ERROR);
|
|
38735
38717
|
validatorFns[REQUIRED] = (value, args, form) => value !== '';
|
|
38736
38718
|
|
|
38737
38719
|
const ONLY_INTEGERS = 'validator/ONLY_INTEGERS';
|
|
@@ -39344,15 +39326,15 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39344
39326
|
}, []);
|
|
39345
39327
|
}
|
|
39346
39328
|
|
|
39347
|
-
var street1ErrorMessages = _defineProperty({}, required
|
|
39329
|
+
var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
|
|
39348
39330
|
|
|
39349
|
-
var cityErrorMessages = _defineProperty({}, required
|
|
39331
|
+
var cityErrorMessages = _defineProperty({}, required.error, "City is required");
|
|
39350
39332
|
|
|
39351
|
-
var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required
|
|
39333
|
+
var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
|
|
39352
39334
|
|
|
39353
|
-
var stateProvinceErrorMessages = _defineProperty({}, required
|
|
39335
|
+
var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required");
|
|
39354
39336
|
|
|
39355
|
-
var countryErrorMessages = _defineProperty({}, required
|
|
39337
|
+
var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
|
|
39356
39338
|
|
|
39357
39339
|
var isUS = fields.country.rawValue === "US";
|
|
39358
39340
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
@@ -39377,8 +39359,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39377
39359
|
}
|
|
39378
39360
|
},
|
|
39379
39361
|
showErrors: showErrors,
|
|
39380
|
-
dataQa: "Country"
|
|
39381
|
-
isRequired: true
|
|
39362
|
+
dataQa: "Country"
|
|
39382
39363
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
39383
39364
|
labelTextWhenNoError: "Address",
|
|
39384
39365
|
errorMessages: street1ErrorMessages,
|
|
@@ -39389,8 +39370,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39389
39370
|
return e.key === "Enter" && handleSubmit(e);
|
|
39390
39371
|
},
|
|
39391
39372
|
autocompleteValue: "address-line1",
|
|
39392
|
-
dataQa: "Address"
|
|
39393
|
-
required: true
|
|
39373
|
+
dataQa: "Address"
|
|
39394
39374
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
39395
39375
|
labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
|
|
39396
39376
|
field: fields.street2,
|
|
@@ -39400,8 +39380,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39400
39380
|
return e.key === "Enter" && handleSubmit(e);
|
|
39401
39381
|
},
|
|
39402
39382
|
autocompleteValue: "address-line2",
|
|
39403
|
-
dataQa: "Address Line 2"
|
|
39404
|
-
required: true
|
|
39383
|
+
dataQa: "Address Line 2"
|
|
39405
39384
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
39406
39385
|
labelTextWhenNoError: "City",
|
|
39407
39386
|
errorMessages: cityErrorMessages,
|
|
@@ -39412,8 +39391,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39412
39391
|
return e.key === "Enter" && handleSubmit(e);
|
|
39413
39392
|
},
|
|
39414
39393
|
autocompleteValue: "address-level2",
|
|
39415
|
-
dataQa: "City"
|
|
39416
|
-
required: true
|
|
39394
|
+
dataQa: "City"
|
|
39417
39395
|
}), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
|
|
39418
39396
|
labelTextWhenNoError: isUS ? "State" : "State or Province",
|
|
39419
39397
|
errorMessages: stateProvinceErrorMessages,
|
|
@@ -39424,8 +39402,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39424
39402
|
onKeyDown: function onKeyDown(e) {
|
|
39425
39403
|
return e.key === "Enter" && handleSubmit(e);
|
|
39426
39404
|
},
|
|
39427
|
-
dataQa: "State or Province"
|
|
39428
|
-
required: true
|
|
39405
|
+
dataQa: "State or Province"
|
|
39429
39406
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
39430
39407
|
isNum: isUS,
|
|
39431
39408
|
formatter: isUS ? zipFormat : null,
|
|
@@ -39438,8 +39415,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39438
39415
|
return e.key === "Enter" && handleSubmit(e);
|
|
39439
39416
|
},
|
|
39440
39417
|
autocompleteValue: "postal-code",
|
|
39441
|
-
dataQa: "Zip code"
|
|
39442
|
-
required: true
|
|
39418
|
+
dataQa: "Zip code"
|
|
39443
39419
|
}), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
|
|
39444
39420
|
name: "address checkbox",
|
|
39445
39421
|
title: "Save address to wallet",
|
|
@@ -39450,23 +39426,23 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39450
39426
|
|
|
39451
39427
|
var formConfig = {
|
|
39452
39428
|
street1: {
|
|
39453
|
-
validators: [required
|
|
39429
|
+
validators: [required()]
|
|
39454
39430
|
},
|
|
39455
39431
|
street2: {
|
|
39456
39432
|
validators: []
|
|
39457
39433
|
},
|
|
39458
39434
|
city: {
|
|
39459
|
-
validators: [required
|
|
39435
|
+
validators: [required()]
|
|
39460
39436
|
},
|
|
39461
39437
|
stateProvince: {
|
|
39462
|
-
validators: [required
|
|
39438
|
+
validators: [required()]
|
|
39463
39439
|
},
|
|
39464
39440
|
country: {
|
|
39465
39441
|
defaultValue: "US",
|
|
39466
|
-
validators: [required
|
|
39442
|
+
validators: [required()]
|
|
39467
39443
|
},
|
|
39468
39444
|
zip: {
|
|
39469
|
-
validators: [required
|
|
39445
|
+
validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
|
|
39470
39446
|
constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
|
|
39471
39447
|
}
|
|
39472
39448
|
};
|
|
@@ -39558,9 +39534,9 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
|
|
|
39558
39534
|
}, []);
|
|
39559
39535
|
}
|
|
39560
39536
|
|
|
39561
|
-
var currentPasswordErrorMessages = _defineProperty({}, required
|
|
39537
|
+
var currentPasswordErrorMessages = _defineProperty({}, required.error, "Current Password is required");
|
|
39562
39538
|
|
|
39563
|
-
var newPasswordErrorMessages = (_newPasswordErrorMess = {}, _defineProperty(_newPasswordErrorMess, required
|
|
39539
|
+
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);
|
|
39564
39540
|
|
|
39565
39541
|
var confirmNewPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match your new password");
|
|
39566
39542
|
|
|
@@ -39653,13 +39629,13 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
|
|
|
39653
39629
|
|
|
39654
39630
|
var formConfig$1 = {
|
|
39655
39631
|
currentPassword: {
|
|
39656
|
-
validators: [required
|
|
39632
|
+
validators: [required()]
|
|
39657
39633
|
},
|
|
39658
39634
|
newPassword: {
|
|
39659
|
-
validators: [required
|
|
39635
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
39660
39636
|
},
|
|
39661
39637
|
confirmNewPassword: {
|
|
39662
|
-
validators: [required
|
|
39638
|
+
validators: [required(), matchesField("newPassword")]
|
|
39663
39639
|
}
|
|
39664
39640
|
};
|
|
39665
39641
|
|
|
@@ -40002,9 +39978,9 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
40002
39978
|
}, []);
|
|
40003
39979
|
}
|
|
40004
39980
|
|
|
40005
|
-
var firstNameErrorMessages = _defineProperty({}, required
|
|
39981
|
+
var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
|
|
40006
39982
|
|
|
40007
|
-
var lastNameErrorMessages = _defineProperty({}, required
|
|
39983
|
+
var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
|
|
40008
39984
|
|
|
40009
39985
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
40010
39986
|
role: "form",
|
|
@@ -40019,8 +39995,7 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
40019
39995
|
onKeyDown: function onKeyDown(e) {
|
|
40020
39996
|
return e.key === "Enter" && handleSubmit(e);
|
|
40021
39997
|
},
|
|
40022
|
-
autocompleteValue: "given-name"
|
|
40023
|
-
isRequired: true
|
|
39998
|
+
autocompleteValue: "given-name"
|
|
40024
39999
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
40025
40000
|
labelTextWhenNoError: "Last Name",
|
|
40026
40001
|
dataQa: "Edit Last Name",
|
|
@@ -40031,17 +40006,16 @@ var EditNameForm = function EditNameForm(_ref) {
|
|
|
40031
40006
|
onKeyDown: function onKeyDown(e) {
|
|
40032
40007
|
return e.key === "Enter" && handleSubmit(e);
|
|
40033
40008
|
},
|
|
40034
|
-
autocompleteValue: "family-name"
|
|
40035
|
-
isRequired: true
|
|
40009
|
+
autocompleteValue: "family-name"
|
|
40036
40010
|
})));
|
|
40037
40011
|
};
|
|
40038
40012
|
|
|
40039
40013
|
var formConfig$2 = {
|
|
40040
40014
|
firstName: {
|
|
40041
|
-
validators: [required
|
|
40015
|
+
validators: [required()]
|
|
40042
40016
|
},
|
|
40043
40017
|
lastName: {
|
|
40044
|
-
validators: [required
|
|
40018
|
+
validators: [required()]
|
|
40045
40019
|
}
|
|
40046
40020
|
};
|
|
40047
40021
|
|
|
@@ -40344,9 +40318,7 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40344
40318
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
40345
40319
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
40346
40320
|
saveToWallet = _ref.saveToWallet,
|
|
40347
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
40348
|
-
_ref$isRequired = _ref.isRequired,
|
|
40349
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
40321
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked;
|
|
40350
40322
|
|
|
40351
40323
|
if (clearOnDismount) {
|
|
40352
40324
|
React.useEffect(function () {
|
|
@@ -40356,14 +40328,13 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40356
40328
|
}, []);
|
|
40357
40329
|
}
|
|
40358
40330
|
|
|
40359
|
-
var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required
|
|
40331
|
+
var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
|
|
40360
40332
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
40361
40333
|
variant: variant,
|
|
40362
40334
|
role: "form",
|
|
40363
40335
|
"aria-label": "Email address"
|
|
40364
40336
|
}, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
|
|
40365
|
-
margin: "0 0 1.125rem 0"
|
|
40366
|
-
id: "explanation"
|
|
40337
|
+
margin: "0 0 1.125rem 0"
|
|
40367
40338
|
}, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
40368
40339
|
labelTextWhenNoError: "Email address",
|
|
40369
40340
|
errorMessages: emailFieldErrorMessages,
|
|
@@ -40376,20 +40347,18 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40376
40347
|
},
|
|
40377
40348
|
isEmail: true,
|
|
40378
40349
|
autocompleteValue: "email",
|
|
40379
|
-
dataQa: "Email address"
|
|
40380
|
-
required: isRequired
|
|
40350
|
+
dataQa: "Email address"
|
|
40381
40351
|
}), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
|
|
40382
40352
|
name: "email checkbox",
|
|
40383
40353
|
title: "Save email address to wallet",
|
|
40384
40354
|
checked: walletCheckboxMarked,
|
|
40385
|
-
onChange: saveToWallet
|
|
40386
|
-
"aria-describedby": "explanation"
|
|
40355
|
+
onChange: saveToWallet
|
|
40387
40356
|
})));
|
|
40388
40357
|
};
|
|
40389
40358
|
|
|
40390
40359
|
var formConfig$3 = {
|
|
40391
40360
|
email: {
|
|
40392
|
-
validators: [required
|
|
40361
|
+
validators: [required(), isProbablyEmail()]
|
|
40393
40362
|
}
|
|
40394
40363
|
};
|
|
40395
40364
|
|
|
@@ -40456,7 +40425,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
|
|
|
40456
40425
|
}, []);
|
|
40457
40426
|
}
|
|
40458
40427
|
|
|
40459
|
-
var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required
|
|
40428
|
+
var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
|
|
40460
40429
|
return /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
40461
40430
|
labelTextWhenNoError: "Email address",
|
|
40462
40431
|
errorMessages: EmailErrorMessages,
|
|
@@ -40473,7 +40442,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
|
|
|
40473
40442
|
|
|
40474
40443
|
var formConfig$4 = {
|
|
40475
40444
|
email: {
|
|
40476
|
-
validators: [required
|
|
40445
|
+
validators: [required(), isProbablyEmail()]
|
|
40477
40446
|
}
|
|
40478
40447
|
};
|
|
40479
40448
|
|
|
@@ -42135,9 +42104,9 @@ var LoginForm = function LoginForm(_ref) {
|
|
|
42135
42104
|
}, []);
|
|
42136
42105
|
}
|
|
42137
42106
|
|
|
42138
|
-
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required
|
|
42107
|
+
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
|
|
42139
42108
|
|
|
42140
|
-
var passwordErrorMessages = _defineProperty({}, required
|
|
42109
|
+
var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
|
|
42141
42110
|
|
|
42142
42111
|
return /*#__PURE__*/React__default.createElement(FormInputColumn, {
|
|
42143
42112
|
role: "form",
|
|
@@ -42170,10 +42139,10 @@ var LoginForm = function LoginForm(_ref) {
|
|
|
42170
42139
|
|
|
42171
42140
|
var formConfig$5 = {
|
|
42172
42141
|
email: {
|
|
42173
|
-
validators: [required
|
|
42142
|
+
validators: [required(), isProbablyEmail()]
|
|
42174
42143
|
},
|
|
42175
42144
|
password: {
|
|
42176
|
-
validators: [required
|
|
42145
|
+
validators: [required()]
|
|
42177
42146
|
}
|
|
42178
42147
|
};
|
|
42179
42148
|
|
|
@@ -46778,7 +46747,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
|
|
|
46778
46747
|
}, []);
|
|
46779
46748
|
}
|
|
46780
46749
|
|
|
46781
|
-
var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required
|
|
46750
|
+
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);
|
|
46782
46751
|
|
|
46783
46752
|
var getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
|
|
46784
46753
|
var errorMessages = amountErrors;
|
|
@@ -46852,7 +46821,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
|
|
|
46852
46821
|
var createPartialAmountFormValidators = function createPartialAmountFormValidators(item, lineItems, maximum) {
|
|
46853
46822
|
var minimum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
46854
46823
|
var blockPartialPaymentOverpay = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
46855
|
-
var validators = [required
|
|
46824
|
+
var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
|
|
46856
46825
|
return lineItem != item;
|
|
46857
46826
|
}).reduce(function (acc, curr) {
|
|
46858
46827
|
return [].concat(_toConsumableArray(acc), [curr.id]);
|
|
@@ -47914,17 +47883,17 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47914
47883
|
|
|
47915
47884
|
var showTerms = !!termsContent;
|
|
47916
47885
|
|
|
47917
|
-
var nameErrors = _defineProperty({}, required
|
|
47886
|
+
var nameErrors = _defineProperty({}, required.error, "Name is required");
|
|
47918
47887
|
|
|
47919
|
-
var routingNumberErrors = (_routingNumberErrors = {}, _defineProperty(_routingNumberErrors, required
|
|
47888
|
+
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);
|
|
47920
47889
|
|
|
47921
47890
|
var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
|
|
47922
47891
|
|
|
47923
|
-
var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required
|
|
47892
|
+
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);
|
|
47924
47893
|
|
|
47925
47894
|
var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
|
|
47926
47895
|
|
|
47927
|
-
var accountTypeErrors = _defineProperty({}, required
|
|
47896
|
+
var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
|
|
47928
47897
|
|
|
47929
47898
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
47930
47899
|
variant: variant,
|
|
@@ -47940,8 +47909,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47940
47909
|
onKeyDown: function onKeyDown(e) {
|
|
47941
47910
|
return e.key === "Enter" && handleSubmit(e);
|
|
47942
47911
|
},
|
|
47943
|
-
autocompleteValue: "name"
|
|
47944
|
-
isRequired: true
|
|
47912
|
+
autocompleteValue: "name"
|
|
47945
47913
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
47946
47914
|
labelTextWhenNoError: "Routing number",
|
|
47947
47915
|
dataQa: "Routing number",
|
|
@@ -47963,8 +47931,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47963
47931
|
},
|
|
47964
47932
|
onKeyDown: function onKeyDown(e) {
|
|
47965
47933
|
return e.key === "Enter" && handleSubmit(e);
|
|
47966
|
-
}
|
|
47967
|
-
isRequired: true
|
|
47934
|
+
}
|
|
47968
47935
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
47969
47936
|
labelTextWhenNoError: "Confirm routing number",
|
|
47970
47937
|
dataQa: "Confirm routing number",
|
|
@@ -47975,7 +47942,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47975
47942
|
onKeyDown: function onKeyDown(e) {
|
|
47976
47943
|
return e.key === "Enter" && handleSubmit(e);
|
|
47977
47944
|
},
|
|
47978
|
-
isRequired: true,
|
|
47979
47945
|
isNum: true
|
|
47980
47946
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
47981
47947
|
labelTextWhenNoError: "Account number",
|
|
@@ -47984,7 +47950,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
47984
47950
|
field: fields.accountNumber,
|
|
47985
47951
|
fieldActions: actions.fields.accountNumber,
|
|
47986
47952
|
showErrors: showErrors,
|
|
47987
|
-
isRequired: true,
|
|
47988
47953
|
isNum: true,
|
|
47989
47954
|
helperModal: function helperModal() {
|
|
47990
47955
|
return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
|
|
@@ -48002,7 +47967,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48002
47967
|
}
|
|
48003
47968
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48004
47969
|
labelTextWhenNoError: "Confirm account number",
|
|
48005
|
-
isRequired: true,
|
|
48006
47970
|
dataQa: "Confirm account number",
|
|
48007
47971
|
errorMessages: confirmAccountNumberErrors,
|
|
48008
47972
|
field: fields.confirmAccountNumber,
|
|
@@ -48031,7 +47995,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48031
47995
|
field: fields.accountType
|
|
48032
47996
|
}), !hideDefaultPayment && /*#__PURE__*/React__default.createElement(Checkbox$1, {
|
|
48033
47997
|
title: "Save as Default Payment Method",
|
|
48034
|
-
required: true,
|
|
48035
47998
|
dataQa: "default-payment-ach",
|
|
48036
47999
|
name: "default-payment-ach",
|
|
48037
48000
|
onChange: toggleCheckbox,
|
|
@@ -48058,10 +48021,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48058
48021
|
|
|
48059
48022
|
var formConfig$6 = {
|
|
48060
48023
|
name: {
|
|
48061
|
-
validators: [required
|
|
48024
|
+
validators: [required()]
|
|
48062
48025
|
},
|
|
48063
48026
|
routingNumber: {
|
|
48064
|
-
validators: [required
|
|
48027
|
+
validators: [required(), hasLength(9, 9), isRoutingNumber()],
|
|
48065
48028
|
constraints: [onlyIntegers(), hasLength(0, 9)]
|
|
48066
48029
|
},
|
|
48067
48030
|
confirmRoutingNumber: {
|
|
@@ -48069,7 +48032,7 @@ var formConfig$6 = {
|
|
|
48069
48032
|
constraints: [onlyIntegers(), hasLength(0, 9)]
|
|
48070
48033
|
},
|
|
48071
48034
|
accountNumber: {
|
|
48072
|
-
validators: [required
|
|
48035
|
+
validators: [required(), hasLength(5, 17)],
|
|
48073
48036
|
constraints: [onlyIntegers(), hasLength(0, 17)]
|
|
48074
48037
|
},
|
|
48075
48038
|
confirmAccountNumber: {
|
|
@@ -48078,7 +48041,7 @@ var formConfig$6 = {
|
|
|
48078
48041
|
},
|
|
48079
48042
|
accountType: {
|
|
48080
48043
|
defaultValue: "CHECKING",
|
|
48081
|
-
validators: [required
|
|
48044
|
+
validators: [required()]
|
|
48082
48045
|
}
|
|
48083
48046
|
};
|
|
48084
48047
|
|
|
@@ -48129,14 +48092,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48129
48092
|
}
|
|
48130
48093
|
}, []);
|
|
48131
48094
|
|
|
48132
|
-
var nameOnCardErrors = _defineProperty({}, required
|
|
48095
|
+
var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
|
|
48133
48096
|
|
|
48134
|
-
var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required
|
|
48135
|
-
var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required
|
|
48136
|
-
var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required
|
|
48137
|
-
var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required
|
|
48097
|
+
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);
|
|
48098
|
+
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);
|
|
48099
|
+
var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
|
|
48100
|
+
var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
|
|
48138
48101
|
|
|
48139
|
-
var countryErrorMessages = _defineProperty({}, required
|
|
48102
|
+
var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
|
|
48140
48103
|
|
|
48141
48104
|
var isUS = fields.country.rawValue === "US";
|
|
48142
48105
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
@@ -48156,8 +48119,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48156
48119
|
}
|
|
48157
48120
|
},
|
|
48158
48121
|
showErrors: showErrors,
|
|
48159
|
-
dataQa: "Country"
|
|
48160
|
-
isRequired: true
|
|
48122
|
+
dataQa: "Country"
|
|
48161
48123
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48162
48124
|
labelTextWhenNoError: "Name on card",
|
|
48163
48125
|
dataQa: "Name on card",
|
|
@@ -48168,8 +48130,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48168
48130
|
onKeyDown: function onKeyDown(e) {
|
|
48169
48131
|
return e.key === "Enter" && handleSubmit(e);
|
|
48170
48132
|
},
|
|
48171
|
-
autocompleteValue: "cc-name"
|
|
48172
|
-
required: true
|
|
48133
|
+
autocompleteValue: "cc-name"
|
|
48173
48134
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48174
48135
|
labelTextWhenNoError: "Credit card number",
|
|
48175
48136
|
dataQa: "Credit card number",
|
|
@@ -48182,8 +48143,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48182
48143
|
return e.key === "Enter" && handleSubmit(e);
|
|
48183
48144
|
},
|
|
48184
48145
|
isNum: true,
|
|
48185
|
-
autocompleteValue: "cc-number"
|
|
48186
|
-
required: true
|
|
48146
|
+
autocompleteValue: "cc-number"
|
|
48187
48147
|
}), /*#__PURE__*/React__default.createElement(FormInputRow, {
|
|
48188
48148
|
breakpoint: isMobile ? "1000rem" : "21rem",
|
|
48189
48149
|
childGap: isMobile ? "0rem" : "1rem"
|
|
@@ -48201,8 +48161,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48201
48161
|
isNum: true,
|
|
48202
48162
|
removeFromValue: /\// // removes "/" from browser autofill
|
|
48203
48163
|
,
|
|
48204
|
-
autocompleteValue: "cc-exp"
|
|
48205
|
-
required: true
|
|
48164
|
+
autocompleteValue: "cc-exp"
|
|
48206
48165
|
}), /*#__PURE__*/React__default.createElement(FormInput$1, {
|
|
48207
48166
|
labelTextWhenNoError: "CVV",
|
|
48208
48167
|
dataQa: "CVV",
|
|
@@ -48215,8 +48174,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48215
48174
|
onKeyDown: function onKeyDown(e) {
|
|
48216
48175
|
return e.key === "Enter" && handleSubmit(e);
|
|
48217
48176
|
},
|
|
48218
|
-
autocompleteValue: "cc-csc"
|
|
48219
|
-
required: true
|
|
48177
|
+
autocompleteValue: "cc-csc"
|
|
48220
48178
|
})), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
|
|
48221
48179
|
padding: isMobile ? "0" : "0 0.5rem 0 0",
|
|
48222
48180
|
width: isMobile ? "100%" : "50%"
|
|
@@ -48232,8 +48190,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48232
48190
|
onKeyDown: function onKeyDown(e) {
|
|
48233
48191
|
return e.key === "Enter" && handleSubmit(e);
|
|
48234
48192
|
},
|
|
48235
|
-
autocompleteValue: "billing postal-code"
|
|
48236
|
-
required: true
|
|
48193
|
+
autocompleteValue: "billing postal-code"
|
|
48237
48194
|
})), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
|
|
48238
48195
|
childGap: "4px",
|
|
48239
48196
|
align: "center"
|
|
@@ -48258,25 +48215,25 @@ var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
|
|
|
48258
48215
|
var formConfig$7 = {
|
|
48259
48216
|
country: {
|
|
48260
48217
|
defaultValue: "US",
|
|
48261
|
-
validators: [required
|
|
48218
|
+
validators: [required()]
|
|
48262
48219
|
},
|
|
48263
48220
|
nameOnCard: {
|
|
48264
|
-
validators: [required
|
|
48221
|
+
validators: [required()]
|
|
48265
48222
|
},
|
|
48266
48223
|
creditCardNumber: {
|
|
48267
|
-
validators: [required
|
|
48224
|
+
validators: [required(), hasLength(15, 16)],
|
|
48268
48225
|
constraints: [onlyIntegers(), hasLength(0, 16)]
|
|
48269
48226
|
},
|
|
48270
48227
|
expirationDate: {
|
|
48271
|
-
validators: [required
|
|
48228
|
+
validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
|
|
48272
48229
|
constraints: [onlyExpirationDate(), hasLength(0, 4)]
|
|
48273
48230
|
},
|
|
48274
48231
|
cvv: {
|
|
48275
|
-
validators: [required
|
|
48232
|
+
validators: [required(), hasLength(3, 4)],
|
|
48276
48233
|
constraints: [onlyIntegers(), hasLength(0, 4)]
|
|
48277
48234
|
},
|
|
48278
48235
|
zipCode: {
|
|
48279
|
-
validators: [required
|
|
48236
|
+
validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
|
|
48280
48237
|
constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
|
|
48281
48238
|
}
|
|
48282
48239
|
};
|
|
@@ -48426,9 +48383,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48426
48383
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
48427
48384
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
48428
48385
|
saveToWallet = _ref.saveToWallet,
|
|
48429
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
48430
|
-
_ref$isRequired = _ref.isRequired,
|
|
48431
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
48386
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked;
|
|
48432
48387
|
|
|
48433
48388
|
if (clearOnDismount) {
|
|
48434
48389
|
React.useEffect(function () {
|
|
@@ -48438,7 +48393,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48438
48393
|
}, []);
|
|
48439
48394
|
}
|
|
48440
48395
|
|
|
48441
|
-
var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required
|
|
48396
|
+
var phoneErrorMessage = (_phoneErrorMessage = {}, _defineProperty(_phoneErrorMessage, required.error, "Phone number is required"), _defineProperty(_phoneErrorMessage, hasLength.error, "Phone number must be 10 digits"), _phoneErrorMessage);
|
|
48442
48397
|
return /*#__PURE__*/React__default.createElement(FormContainer$1, {
|
|
48443
48398
|
variant: variant,
|
|
48444
48399
|
role: "form",
|
|
@@ -48455,8 +48410,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48455
48410
|
},
|
|
48456
48411
|
autocompleteValue: "tel-national",
|
|
48457
48412
|
dataQa: "Phone number",
|
|
48458
|
-
isNum: true
|
|
48459
|
-
required: isRequired
|
|
48413
|
+
isNum: true
|
|
48460
48414
|
}), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
|
|
48461
48415
|
name: "phone checkbox",
|
|
48462
48416
|
title: "Save phone number to wallet",
|
|
@@ -48467,7 +48421,7 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48467
48421
|
|
|
48468
48422
|
var formConfig$8 = {
|
|
48469
48423
|
phone: {
|
|
48470
|
-
validators: [required
|
|
48424
|
+
validators: [required(), hasLength(10, 10)],
|
|
48471
48425
|
constraints: [onlyIntegers(), hasLength(0, 10)]
|
|
48472
48426
|
}
|
|
48473
48427
|
};
|
|
@@ -48505,27 +48459,20 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
48505
48459
|
_ref$handleChange = _ref.handleChange,
|
|
48506
48460
|
handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
|
|
48507
48461
|
field = _ref.field,
|
|
48508
|
-
fieldActions = _ref.fieldActions
|
|
48509
|
-
_ref$role = _ref.role,
|
|
48510
|
-
role = _ref$role === void 0 ? "radiogroup" : _ref$role,
|
|
48511
|
-
_ref$isRequired = _ref.isRequired,
|
|
48512
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
48462
|
+
fieldActions = _ref.fieldActions;
|
|
48513
48463
|
|
|
48514
48464
|
var setValue = function setValue(value) {
|
|
48515
48465
|
return fieldActions.set(value);
|
|
48516
48466
|
};
|
|
48517
48467
|
|
|
48518
48468
|
return /*#__PURE__*/React__default.createElement(StyledFieldset, {
|
|
48469
|
+
role: "radiogroup",
|
|
48470
|
+
"aria-labelledby": "radio-group-".concat(groupName, "-heading"),
|
|
48519
48471
|
$extraStyles: extraStyles
|
|
48520
48472
|
}, Heading !== null && Heading, /*#__PURE__*/React__default.createElement(Stack, {
|
|
48521
|
-
childGap: "4px"
|
|
48522
|
-
role: role,
|
|
48523
|
-
required: isRequired,
|
|
48524
|
-
"aria-labelledby": "radio-group-".concat(groupName, "-heading")
|
|
48473
|
+
childGap: "4px"
|
|
48525
48474
|
}, config.map(function (c, idx) {
|
|
48526
48475
|
return /*#__PURE__*/React__default.createElement(RadioButtonWithLabel$1, _extends({
|
|
48527
|
-
required: isRequired,
|
|
48528
|
-
role: "radio",
|
|
48529
48476
|
index: idx,
|
|
48530
48477
|
key: c.id
|
|
48531
48478
|
}, c, {
|
|
@@ -48596,13 +48543,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48596
48543
|
openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
|
|
48597
48544
|
_ref$containerStyles = _ref.containerStyles,
|
|
48598
48545
|
containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
|
|
48599
|
-
ariaDescribedBy = _ref.ariaDescribedBy
|
|
48600
|
-
_ref$role = _ref.role,
|
|
48601
|
-
role = _ref$role === void 0 ? "radiogroup" : _ref$role,
|
|
48602
|
-
_ref$required = _ref.required,
|
|
48603
|
-
required = _ref$required === void 0 ? false : _ref$required,
|
|
48604
|
-
_ref$label = _ref.label,
|
|
48605
|
-
label = _ref$label === void 0 ? "" : _ref$label;
|
|
48546
|
+
ariaDescribedBy = _ref.ariaDescribedBy;
|
|
48606
48547
|
|
|
48607
48548
|
var handleKeyDown = function handleKeyDown(id, e) {
|
|
48608
48549
|
if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
|
|
@@ -48655,11 +48596,10 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48655
48596
|
padding: "1px",
|
|
48656
48597
|
border: "1px solid ".concat(themeValues.borderColor),
|
|
48657
48598
|
borderRadius: "4px",
|
|
48658
|
-
extraStyles: containerStyles
|
|
48659
|
-
role: role,
|
|
48660
|
-
required: required
|
|
48599
|
+
extraStyles: containerStyles
|
|
48661
48600
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
48662
|
-
childGap: "0"
|
|
48601
|
+
childGap: "0",
|
|
48602
|
+
role: "radiogroup"
|
|
48663
48603
|
}, sections.filter(function (section) {
|
|
48664
48604
|
return !section.hidden;
|
|
48665
48605
|
}).map(function (section) {
|
|
@@ -48681,8 +48621,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48681
48621
|
extraStyles: borderStyles,
|
|
48682
48622
|
role: "radio",
|
|
48683
48623
|
"aria-checked": openSection === section.id,
|
|
48684
|
-
|
|
48685
|
-
|
|
48624
|
+
disabled: section.disabled,
|
|
48625
|
+
required: section === null || section === void 0 ? void 0 : section.required
|
|
48686
48626
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
48687
48627
|
childGap: "0"
|
|
48688
48628
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
@@ -48712,6 +48652,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48712
48652
|
}, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
|
|
48713
48653
|
padding: "0"
|
|
48714
48654
|
}, /*#__PURE__*/React__default.createElement(RadioButton$2, {
|
|
48655
|
+
role: "radio",
|
|
48656
|
+
required: !!(section !== null && section !== void 0 && section.required),
|
|
48715
48657
|
id: "radio-input-".concat(idString(section)),
|
|
48716
48658
|
name: idString(section),
|
|
48717
48659
|
ariaDescribedBy: ariaDescribedBy,
|
|
@@ -48720,8 +48662,7 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48720
48662
|
toggleRadio: section.disabled ? noop : function () {
|
|
48721
48663
|
return toggleOpenSection(section.id);
|
|
48722
48664
|
},
|
|
48723
|
-
tabIndex: "-1"
|
|
48724
|
-
isRequired: required
|
|
48665
|
+
tabIndex: "-1"
|
|
48725
48666
|
})), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
|
|
48726
48667
|
align: "center"
|
|
48727
48668
|
}, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
|
|
@@ -48780,12 +48721,12 @@ var RegistrationForm = function RegistrationForm(_ref) {
|
|
|
48780
48721
|
}, []);
|
|
48781
48722
|
}
|
|
48782
48723
|
|
|
48783
|
-
var firstNameErrorMessages = _defineProperty({}, required
|
|
48724
|
+
var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
|
|
48784
48725
|
|
|
48785
|
-
var lastNameErrorMessages = _defineProperty({}, required
|
|
48726
|
+
var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
|
|
48786
48727
|
|
|
48787
|
-
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required
|
|
48788
|
-
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required
|
|
48728
|
+
var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
|
|
48729
|
+
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);
|
|
48789
48730
|
|
|
48790
48731
|
var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
|
|
48791
48732
|
|
|
@@ -48861,19 +48802,19 @@ var RegistrationForm = function RegistrationForm(_ref) {
|
|
|
48861
48802
|
|
|
48862
48803
|
var formConfig$9 = {
|
|
48863
48804
|
firstName: {
|
|
48864
|
-
validators: [required
|
|
48805
|
+
validators: [required()]
|
|
48865
48806
|
},
|
|
48866
48807
|
lastName: {
|
|
48867
|
-
validators: [required
|
|
48808
|
+
validators: [required()]
|
|
48868
48809
|
},
|
|
48869
48810
|
email: {
|
|
48870
|
-
validators: [required
|
|
48811
|
+
validators: [required(), isProbablyEmail()]
|
|
48871
48812
|
},
|
|
48872
48813
|
password: {
|
|
48873
|
-
validators: [required
|
|
48814
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
48874
48815
|
},
|
|
48875
48816
|
confirmPassword: {
|
|
48876
|
-
validators: [required
|
|
48817
|
+
validators: [required(), matchesField("password")]
|
|
48877
48818
|
}
|
|
48878
48819
|
};
|
|
48879
48820
|
|
|
@@ -48954,7 +48895,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
|
|
|
48954
48895
|
}, []);
|
|
48955
48896
|
}
|
|
48956
48897
|
|
|
48957
|
-
var passwordErrorMessages = (_passwordErrorMessage = {}, _defineProperty(_passwordErrorMessage, required
|
|
48898
|
+
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);
|
|
48958
48899
|
|
|
48959
48900
|
var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
|
|
48960
48901
|
|
|
@@ -48993,10 +48934,10 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
|
|
|
48993
48934
|
|
|
48994
48935
|
var formConfig$a = {
|
|
48995
48936
|
password: {
|
|
48996
|
-
validators: [required
|
|
48937
|
+
validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
|
|
48997
48938
|
},
|
|
48998
48939
|
confirmPassword: {
|
|
48999
|
-
validators: [required
|
|
48940
|
+
validators: [required(), matchesField("password")]
|
|
49000
48941
|
}
|
|
49001
48942
|
};
|
|
49002
48943
|
|