@pelcro/react-pelcro-js 3.13.0-beta.10 → 3.13.0-beta.12

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 CHANGED
@@ -3634,6 +3634,7 @@ var labels$Y = {
3634
3634
  email: "Email",
3635
3635
  firstName: "First name",
3636
3636
  lastName: "Last name",
3637
+ username: "Username",
3637
3638
  phone: "Phone",
3638
3639
  submit: "Submit",
3639
3640
  required: "Required",
@@ -4567,6 +4568,7 @@ var labels$D = {
4567
4568
  email: "Address courriel",
4568
4569
  firstName: "Prénom",
4569
4570
  lastName: "Nom de famille",
4571
+ username: "Nom d'utilisateur",
4570
4572
  phone: "Numéro de téléphone",
4571
4573
  submit: "Soumettre",
4572
4574
  required: "Champs obligatoires",
@@ -5384,6 +5386,7 @@ var labels$o = {
5384
5386
  email: "이메일",
5385
5387
  firstName: "이름",
5386
5388
  lastName: "성",
5389
+ username: "사용자 이름",
5387
5390
  phone: "전화번호",
5388
5391
  submit: "제출",
5389
5392
  required: "필수 항목",
@@ -6303,6 +6306,7 @@ var labels$9 = {
6303
6306
  email: "Correo",
6304
6307
  firstName: "Nombre",
6305
6308
  lastName: "Apellido",
6309
+ username: "Nombre de usuario",
6306
6310
  phone: "Teléfono",
6307
6311
  submit: "Enviar",
6308
6312
  required: "Obligatorio",
@@ -21206,7 +21210,7 @@ function SubscriptionManageMembersModal({
21206
21210
  }
21207
21211
  SubscriptionManageMembersModal.viewId = "manage-members";
21208
21212
 
21209
- var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
21213
+ var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
21210
21214
  const initialState$f = {
21211
21215
  email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
21212
21216
  emailError: null,
@@ -21214,10 +21218,12 @@ const initialState$f = {
21214
21218
  firstNameError: null,
21215
21219
  lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
21216
21220
  lastNameError: null,
21217
- displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
21218
- phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
21221
+ username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
21222
+ usernameError: null,
21223
+ displayName: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.display_name,
21224
+ phone: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.phone,
21219
21225
  phoneError: null,
21220
- tin: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.tin,
21226
+ tin: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.tin,
21221
21227
  buttonDisabled: false,
21222
21228
  textFields: {},
21223
21229
  alert: {
@@ -21248,26 +21254,29 @@ const UserUpdateContainer = ({
21248
21254
  }, []);
21249
21255
 
21250
21256
  const loadUserDataIntoFields = () => {
21251
- var _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
21257
+ var _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12, _window$Pelcro$user$r13, _window$Pelcro$user$r14;
21252
21258
 
21253
21259
  const fields = [{
21254
21260
  type: SET_EMAIL,
21255
- payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.email
21261
+ payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.email
21256
21262
  }, {
21257
21263
  type: SET_FIRST_NAME,
21258
- payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.first_name
21264
+ payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.first_name
21259
21265
  }, {
21260
21266
  type: SET_LAST_NAME,
21261
- payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.last_name
21267
+ payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.last_name
21268
+ }, {
21269
+ type: SET_USERNAME,
21270
+ payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.username
21262
21271
  }, {
21263
21272
  type: SET_DISPLAY_NAME,
21264
- payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.display_name
21273
+ payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.display_name
21265
21274
  }, {
21266
21275
  type: SET_PHONE,
21267
- payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.phone
21276
+ payload: (_window$Pelcro$user$r13 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r13 === void 0 ? void 0 : _window$Pelcro$user$r13.phone
21268
21277
  }, {
21269
21278
  type: SET_TIN,
21270
- payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.tin
21279
+ payload: (_window$Pelcro$user$r14 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r14 === void 0 ? void 0 : _window$Pelcro$user$r14.tin
21271
21280
  }];
21272
21281
  fields.filter(field => Boolean(field.payload)).forEach(field => {
21273
21282
  dispatch(field);
@@ -21278,6 +21287,7 @@ const UserUpdateContainer = ({
21278
21287
  email,
21279
21288
  firstName,
21280
21289
  lastName,
21290
+ username,
21281
21291
  phone,
21282
21292
  tin,
21283
21293
  textFields,
@@ -21288,6 +21298,9 @@ const UserUpdateContainer = ({
21288
21298
  email: email,
21289
21299
  first_name: firstName,
21290
21300
  last_name: lastName,
21301
+ ...(username && {
21302
+ username
21303
+ }),
21291
21304
  display_name: displayName,
21292
21305
  phone: phone,
21293
21306
  tin: tin,
@@ -21373,6 +21386,18 @@ const UserUpdateContainer = ({
21373
21386
  lastName: ""
21374
21387
  });
21375
21388
 
21389
+ case SET_USERNAME:
21390
+ return lib_7({ ...state,
21391
+ username: action.payload,
21392
+ usernameError: null
21393
+ });
21394
+
21395
+ case SET_USERNAME_ERROR:
21396
+ return lib_7({ ...state,
21397
+ usernameError: action.payload,
21398
+ username: ""
21399
+ });
21400
+
21376
21401
  case SET_PHONE:
21377
21402
  return lib_7({ ...state,
21378
21403
  phone: action.payload,
@@ -21418,10 +21443,14 @@ const UserUpdateContainer = ({
21418
21443
  state,
21419
21444
  dispatch
21420
21445
  }
21421
- }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
21422
- store: store$f,
21423
- key: i
21424
- })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
21446
+ }, children.length ? children.map((child, i) => {
21447
+ if (child) {
21448
+ return /*#__PURE__*/React__default['default'].cloneElement(child, {
21449
+ store: store$f,
21450
+ key: i
21451
+ });
21452
+ }
21453
+ }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
21425
21454
  store: store$f
21426
21455
  })));
21427
21456
  };
@@ -21529,6 +21558,84 @@ const UserUpdateButton = ({
21529
21558
  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
21530
21559
  };
21531
21560
 
21561
+ function UpdateUserNameInput({
21562
+ initWithUserName = true,
21563
+ store,
21564
+ ...otherProps
21565
+ }) {
21566
+ const {
21567
+ t
21568
+ } = useTranslation("common");
21569
+ const {
21570
+ dispatch,
21571
+ state: {
21572
+ username: stateUsername,
21573
+ usernameError
21574
+ }
21575
+ } = React.useContext(store);
21576
+ const [username, setUsername] = React.useState(stateUsername);
21577
+ const [finishedTyping, setFinishedTyping] = React.useState(false);
21578
+ const handleInputChange = React.useCallback(value => {
21579
+ setUsername(value);
21580
+
21581
+ if (finishedTyping) {
21582
+ if (username !== null && username !== void 0 && username.length) {
21583
+ dispatch({
21584
+ type: SET_USERNAME,
21585
+ payload: username
21586
+ });
21587
+ } else {
21588
+ if (otherProps.required) {
21589
+ dispatch({
21590
+ type: SET_USERNAME_ERROR,
21591
+ payload: t("validation.enterUsername")
21592
+ });
21593
+ } else {
21594
+ dispatch({
21595
+ type: SET_USERNAME,
21596
+ payload: username
21597
+ });
21598
+ }
21599
+ }
21600
+ }
21601
+ }, [dispatch, username, finishedTyping]);
21602
+ React.useEffect(() => {
21603
+ handleInputChange(username);
21604
+ }, [finishedTyping, username, handleInputChange]); // Initialize username field with user's username
21605
+
21606
+ const loadFirstNameIntoField = () => {
21607
+ handleInputChange(window.Pelcro.user.read().username);
21608
+ dispatch({
21609
+ type: SET_USERNAME,
21610
+ payload: window.Pelcro.user.read().username
21611
+ });
21612
+ };
21613
+
21614
+ React.useEffect(() => {
21615
+ if (initWithUserName) {
21616
+ document.addEventListener("PelcroUserLoaded", () => {
21617
+ loadFirstNameIntoField();
21618
+ });
21619
+ loadFirstNameIntoField();
21620
+ return () => {
21621
+ document.removeEventListener("PelcroUserLoaded", handleInputChange);
21622
+ };
21623
+ }
21624
+ }, []);
21625
+ return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
21626
+ type: "text",
21627
+ error: usernameError,
21628
+ value: username,
21629
+ onChange: e => handleInputChange(e.target.value),
21630
+ onBlur: () => setFinishedTyping(true),
21631
+ onFocus: () => setFinishedTyping(false)
21632
+ }, otherProps));
21633
+ }
21634
+
21635
+ const UserUpdateUsername = props => /*#__PURE__*/React__default['default'].createElement(UpdateUserNameInput, Object.assign({
21636
+ store: store$f
21637
+ }, props));
21638
+
21532
21639
  const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
21533
21640
  store: store$f
21534
21641
  }, props));
@@ -21629,12 +21736,13 @@ const UserUpdateTin = props => /*#__PURE__*/React__default['default'].createElem
21629
21736
  }, props));
21630
21737
 
21631
21738
  const UserUpdateView = props => {
21632
- var _window$Pelcro$site$r;
21739
+ var _window$Pelcro$site$r, _window$Pelcro, _window$Pelcro$uiSett;
21633
21740
 
21634
21741
  const {
21635
21742
  t
21636
21743
  } = useTranslation("userEdit");
21637
21744
  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
21745
+ const showUsernameInput = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableLoginWithUsername;
21638
21746
  return /*#__PURE__*/React__default['default'].createElement("div", {
21639
21747
  id: "pelcro-user-update-view"
21640
21748
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21662,7 +21770,12 @@ const UserUpdateView = props => {
21662
21770
  errorId: "pelcro-input-last-name-error",
21663
21771
  label: t("labels.lastName"),
21664
21772
  required: supportsTap ? true : false
21665
- })), /*#__PURE__*/React__default['default'].createElement("div", {
21773
+ })), showUsernameInput && /*#__PURE__*/React__default['default'].createElement(UserUpdateUsername, {
21774
+ id: "pelcro-input-user-name",
21775
+ autoComplete: "user-name",
21776
+ errorId: "pelcro-input-user-name-error",
21777
+ label: t("labels.username")
21778
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
21666
21779
  className: "plc-flex plc-items-start"
21667
21780
  }, /*#__PURE__*/React__default['default'].createElement(UserUpdatePhone, {
21668
21781
  id: "pelcro-input-phone",
@@ -32911,6 +33024,7 @@ exports.UserUpdatePhone = UserUpdatePhone;
32911
33024
  exports.UserUpdateProfilePic = UserUpdateProfilePic;
32912
33025
  exports.UserUpdateTextInput = UserUpdateTextInput;
32913
33026
  exports.UserUpdateTin = UserUpdateTin;
33027
+ exports.UserUpdateUsername = UserUpdateUsername;
32914
33028
  exports.UserUpdateView = UserUpdateView;
32915
33029
  exports.VerifyLinkTokenContainer = VerifyLinkTokenContainer;
32916
33030
  exports.VerifyLinkTokenLoader = VerifyLinkTokenLoader;
package/dist/index.esm.js CHANGED
@@ -3604,6 +3604,7 @@ var labels$Y = {
3604
3604
  email: "Email",
3605
3605
  firstName: "First name",
3606
3606
  lastName: "Last name",
3607
+ username: "Username",
3607
3608
  phone: "Phone",
3608
3609
  submit: "Submit",
3609
3610
  required: "Required",
@@ -4537,6 +4538,7 @@ var labels$D = {
4537
4538
  email: "Address courriel",
4538
4539
  firstName: "Prénom",
4539
4540
  lastName: "Nom de famille",
4541
+ username: "Nom d'utilisateur",
4540
4542
  phone: "Numéro de téléphone",
4541
4543
  submit: "Soumettre",
4542
4544
  required: "Champs obligatoires",
@@ -5354,6 +5356,7 @@ var labels$o = {
5354
5356
  email: "이메일",
5355
5357
  firstName: "이름",
5356
5358
  lastName: "성",
5359
+ username: "사용자 이름",
5357
5360
  phone: "전화번호",
5358
5361
  submit: "제출",
5359
5362
  required: "필수 항목",
@@ -6273,6 +6276,7 @@ var labels$9 = {
6273
6276
  email: "Correo",
6274
6277
  firstName: "Nombre",
6275
6278
  lastName: "Apellido",
6279
+ username: "Nombre de usuario",
6276
6280
  phone: "Teléfono",
6277
6281
  submit: "Enviar",
6278
6282
  required: "Obligatorio",
@@ -21176,7 +21180,7 @@ function SubscriptionManageMembersModal({
21176
21180
  }
21177
21181
  SubscriptionManageMembersModal.viewId = "manage-members";
21178
21182
 
21179
- var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
21183
+ var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
21180
21184
  const initialState$f = {
21181
21185
  email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
21182
21186
  emailError: null,
@@ -21184,10 +21188,12 @@ const initialState$f = {
21184
21188
  firstNameError: null,
21185
21189
  lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
21186
21190
  lastNameError: null,
21187
- displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
21188
- phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
21191
+ username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
21192
+ usernameError: null,
21193
+ displayName: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.display_name,
21194
+ phone: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.phone,
21189
21195
  phoneError: null,
21190
- tin: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.tin,
21196
+ tin: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.tin,
21191
21197
  buttonDisabled: false,
21192
21198
  textFields: {},
21193
21199
  alert: {
@@ -21218,26 +21224,29 @@ const UserUpdateContainer = ({
21218
21224
  }, []);
21219
21225
 
21220
21226
  const loadUserDataIntoFields = () => {
21221
- var _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
21227
+ var _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12, _window$Pelcro$user$r13, _window$Pelcro$user$r14;
21222
21228
 
21223
21229
  const fields = [{
21224
21230
  type: SET_EMAIL,
21225
- payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.email
21231
+ payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.email
21226
21232
  }, {
21227
21233
  type: SET_FIRST_NAME,
21228
- payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.first_name
21234
+ payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.first_name
21229
21235
  }, {
21230
21236
  type: SET_LAST_NAME,
21231
- payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.last_name
21237
+ payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.last_name
21238
+ }, {
21239
+ type: SET_USERNAME,
21240
+ payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.username
21232
21241
  }, {
21233
21242
  type: SET_DISPLAY_NAME,
21234
- payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.display_name
21243
+ payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.display_name
21235
21244
  }, {
21236
21245
  type: SET_PHONE,
21237
- payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.phone
21246
+ payload: (_window$Pelcro$user$r13 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r13 === void 0 ? void 0 : _window$Pelcro$user$r13.phone
21238
21247
  }, {
21239
21248
  type: SET_TIN,
21240
- payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.tin
21249
+ payload: (_window$Pelcro$user$r14 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r14 === void 0 ? void 0 : _window$Pelcro$user$r14.tin
21241
21250
  }];
21242
21251
  fields.filter(field => Boolean(field.payload)).forEach(field => {
21243
21252
  dispatch(field);
@@ -21248,6 +21257,7 @@ const UserUpdateContainer = ({
21248
21257
  email,
21249
21258
  firstName,
21250
21259
  lastName,
21260
+ username,
21251
21261
  phone,
21252
21262
  tin,
21253
21263
  textFields,
@@ -21258,6 +21268,9 @@ const UserUpdateContainer = ({
21258
21268
  email: email,
21259
21269
  first_name: firstName,
21260
21270
  last_name: lastName,
21271
+ ...(username && {
21272
+ username
21273
+ }),
21261
21274
  display_name: displayName,
21262
21275
  phone: phone,
21263
21276
  tin: tin,
@@ -21343,6 +21356,18 @@ const UserUpdateContainer = ({
21343
21356
  lastName: ""
21344
21357
  });
21345
21358
 
21359
+ case SET_USERNAME:
21360
+ return lib_7({ ...state,
21361
+ username: action.payload,
21362
+ usernameError: null
21363
+ });
21364
+
21365
+ case SET_USERNAME_ERROR:
21366
+ return lib_7({ ...state,
21367
+ usernameError: action.payload,
21368
+ username: ""
21369
+ });
21370
+
21346
21371
  case SET_PHONE:
21347
21372
  return lib_7({ ...state,
21348
21373
  phone: action.payload,
@@ -21388,10 +21413,14 @@ const UserUpdateContainer = ({
21388
21413
  state,
21389
21414
  dispatch
21390
21415
  }
21391
- }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
21392
- store: store$f,
21393
- key: i
21394
- })) : /*#__PURE__*/React__default.cloneElement(children, {
21416
+ }, children.length ? children.map((child, i) => {
21417
+ if (child) {
21418
+ return /*#__PURE__*/React__default.cloneElement(child, {
21419
+ store: store$f,
21420
+ key: i
21421
+ });
21422
+ }
21423
+ }) : /*#__PURE__*/React__default.cloneElement(children, {
21395
21424
  store: store$f
21396
21425
  })));
21397
21426
  };
@@ -21499,6 +21528,84 @@ const UserUpdateButton = ({
21499
21528
  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
21500
21529
  };
21501
21530
 
21531
+ function UpdateUserNameInput({
21532
+ initWithUserName = true,
21533
+ store,
21534
+ ...otherProps
21535
+ }) {
21536
+ const {
21537
+ t
21538
+ } = useTranslation("common");
21539
+ const {
21540
+ dispatch,
21541
+ state: {
21542
+ username: stateUsername,
21543
+ usernameError
21544
+ }
21545
+ } = useContext(store);
21546
+ const [username, setUsername] = useState(stateUsername);
21547
+ const [finishedTyping, setFinishedTyping] = useState(false);
21548
+ const handleInputChange = useCallback(value => {
21549
+ setUsername(value);
21550
+
21551
+ if (finishedTyping) {
21552
+ if (username !== null && username !== void 0 && username.length) {
21553
+ dispatch({
21554
+ type: SET_USERNAME,
21555
+ payload: username
21556
+ });
21557
+ } else {
21558
+ if (otherProps.required) {
21559
+ dispatch({
21560
+ type: SET_USERNAME_ERROR,
21561
+ payload: t("validation.enterUsername")
21562
+ });
21563
+ } else {
21564
+ dispatch({
21565
+ type: SET_USERNAME,
21566
+ payload: username
21567
+ });
21568
+ }
21569
+ }
21570
+ }
21571
+ }, [dispatch, username, finishedTyping]);
21572
+ useEffect(() => {
21573
+ handleInputChange(username);
21574
+ }, [finishedTyping, username, handleInputChange]); // Initialize username field with user's username
21575
+
21576
+ const loadFirstNameIntoField = () => {
21577
+ handleInputChange(window.Pelcro.user.read().username);
21578
+ dispatch({
21579
+ type: SET_USERNAME,
21580
+ payload: window.Pelcro.user.read().username
21581
+ });
21582
+ };
21583
+
21584
+ useEffect(() => {
21585
+ if (initWithUserName) {
21586
+ document.addEventListener("PelcroUserLoaded", () => {
21587
+ loadFirstNameIntoField();
21588
+ });
21589
+ loadFirstNameIntoField();
21590
+ return () => {
21591
+ document.removeEventListener("PelcroUserLoaded", handleInputChange);
21592
+ };
21593
+ }
21594
+ }, []);
21595
+ return /*#__PURE__*/React__default.createElement(Input, Object.assign({
21596
+ type: "text",
21597
+ error: usernameError,
21598
+ value: username,
21599
+ onChange: e => handleInputChange(e.target.value),
21600
+ onBlur: () => setFinishedTyping(true),
21601
+ onFocus: () => setFinishedTyping(false)
21602
+ }, otherProps));
21603
+ }
21604
+
21605
+ const UserUpdateUsername = props => /*#__PURE__*/React__default.createElement(UpdateUserNameInput, Object.assign({
21606
+ store: store$f
21607
+ }, props));
21608
+
21502
21609
  const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
21503
21610
  store: store$f
21504
21611
  }, props));
@@ -21599,12 +21706,13 @@ const UserUpdateTin = props => /*#__PURE__*/React__default.createElement(Tin, Ob
21599
21706
  }, props));
21600
21707
 
21601
21708
  const UserUpdateView = props => {
21602
- var _window$Pelcro$site$r;
21709
+ var _window$Pelcro$site$r, _window$Pelcro, _window$Pelcro$uiSett;
21603
21710
 
21604
21711
  const {
21605
21712
  t
21606
21713
  } = useTranslation("userEdit");
21607
21714
  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
21715
+ const showUsernameInput = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableLoginWithUsername;
21608
21716
  return /*#__PURE__*/React__default.createElement("div", {
21609
21717
  id: "pelcro-user-update-view"
21610
21718
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -21632,7 +21740,12 @@ const UserUpdateView = props => {
21632
21740
  errorId: "pelcro-input-last-name-error",
21633
21741
  label: t("labels.lastName"),
21634
21742
  required: supportsTap ? true : false
21635
- })), /*#__PURE__*/React__default.createElement("div", {
21743
+ })), showUsernameInput && /*#__PURE__*/React__default.createElement(UserUpdateUsername, {
21744
+ id: "pelcro-input-user-name",
21745
+ autoComplete: "user-name",
21746
+ errorId: "pelcro-input-user-name-error",
21747
+ label: t("labels.username")
21748
+ }), /*#__PURE__*/React__default.createElement("div", {
21636
21749
  className: "plc-flex plc-items-start"
21637
21750
  }, /*#__PURE__*/React__default.createElement(UserUpdatePhone, {
21638
21751
  id: "pelcro-input-phone",
@@ -32660,4 +32773,4 @@ const QrCodeModal = ({
32660
32773
  };
32661
32774
  QrCodeModal.viewId = "qrcode";
32662
32775
 
32663
- export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
32776
+ export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pelcro/react-pelcro-js",
3
3
  "description": "Pelcro's React UI Elements",
4
- "version": "3.13.0-beta.10",
4
+ "version": "3.13.0-beta.12",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",