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

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,7 @@ const UserUpdateContainer = ({
21288
21298
  email: email,
21289
21299
  first_name: firstName,
21290
21300
  last_name: lastName,
21301
+ username: username,
21291
21302
  display_name: displayName,
21292
21303
  phone: phone,
21293
21304
  tin: tin,
@@ -21373,6 +21384,18 @@ const UserUpdateContainer = ({
21373
21384
  lastName: ""
21374
21385
  });
21375
21386
 
21387
+ case SET_USERNAME:
21388
+ return lib_7({ ...state,
21389
+ username: action.payload,
21390
+ usernameError: null
21391
+ });
21392
+
21393
+ case SET_USERNAME_ERROR:
21394
+ return lib_7({ ...state,
21395
+ usernameError: action.payload,
21396
+ username: ""
21397
+ });
21398
+
21376
21399
  case SET_PHONE:
21377
21400
  return lib_7({ ...state,
21378
21401
  phone: action.payload,
@@ -21529,6 +21552,84 @@ const UserUpdateButton = ({
21529
21552
  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
21530
21553
  };
21531
21554
 
21555
+ function UpdateUserNameInput({
21556
+ initWithUserName = true,
21557
+ store,
21558
+ ...otherProps
21559
+ }) {
21560
+ const {
21561
+ t
21562
+ } = useTranslation("common");
21563
+ const {
21564
+ dispatch,
21565
+ state: {
21566
+ username: stateUsername,
21567
+ usernameError
21568
+ }
21569
+ } = React.useContext(store);
21570
+ const [username, setUsername] = React.useState(stateUsername);
21571
+ const [finishedTyping, setFinishedTyping] = React.useState(false);
21572
+ const handleInputChange = React.useCallback(value => {
21573
+ setUsername(value);
21574
+
21575
+ if (finishedTyping) {
21576
+ if (username !== null && username !== void 0 && username.length) {
21577
+ dispatch({
21578
+ type: SET_USERNAME,
21579
+ payload: username
21580
+ });
21581
+ } else {
21582
+ if (otherProps.required) {
21583
+ dispatch({
21584
+ type: SET_USERNAME_ERROR,
21585
+ payload: t("validation.enterUsername")
21586
+ });
21587
+ } else {
21588
+ dispatch({
21589
+ type: SET_USERNAME,
21590
+ payload: username
21591
+ });
21592
+ }
21593
+ }
21594
+ }
21595
+ }, [dispatch, username, finishedTyping]);
21596
+ React.useEffect(() => {
21597
+ handleInputChange(username);
21598
+ }, [finishedTyping, username, handleInputChange]); // Initialize username field with user's username
21599
+
21600
+ const loadFirstNameIntoField = () => {
21601
+ handleInputChange(window.Pelcro.user.read().username);
21602
+ dispatch({
21603
+ type: SET_USERNAME,
21604
+ payload: window.Pelcro.user.read().username
21605
+ });
21606
+ };
21607
+
21608
+ React.useEffect(() => {
21609
+ if (initWithUserName) {
21610
+ document.addEventListener("PelcroUserLoaded", () => {
21611
+ loadFirstNameIntoField();
21612
+ });
21613
+ loadFirstNameIntoField();
21614
+ return () => {
21615
+ document.removeEventListener("PelcroUserLoaded", handleInputChange);
21616
+ };
21617
+ }
21618
+ }, []);
21619
+ return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
21620
+ type: "text",
21621
+ error: usernameError,
21622
+ value: username,
21623
+ onChange: e => handleInputChange(e.target.value),
21624
+ onBlur: () => setFinishedTyping(true),
21625
+ onFocus: () => setFinishedTyping(false)
21626
+ }, otherProps));
21627
+ }
21628
+
21629
+ const UserUpdateUsername = props => /*#__PURE__*/React__default['default'].createElement(UpdateUserNameInput, Object.assign({
21630
+ store: store$f
21631
+ }, props));
21632
+
21532
21633
  const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
21533
21634
  store: store$f
21534
21635
  }, props));
@@ -21662,7 +21763,12 @@ const UserUpdateView = props => {
21662
21763
  errorId: "pelcro-input-last-name-error",
21663
21764
  label: t("labels.lastName"),
21664
21765
  required: supportsTap ? true : false
21665
- })), /*#__PURE__*/React__default['default'].createElement("div", {
21766
+ })), /*#__PURE__*/React__default['default'].createElement(UserUpdateUsername, {
21767
+ id: "pelcro-input-user-name",
21768
+ autoComplete: "user-name",
21769
+ errorId: "pelcro-input-user-name-error",
21770
+ label: t("labels.username")
21771
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
21666
21772
  className: "plc-flex plc-items-start"
21667
21773
  }, /*#__PURE__*/React__default['default'].createElement(UserUpdatePhone, {
21668
21774
  id: "pelcro-input-phone",
@@ -32911,6 +33017,7 @@ exports.UserUpdatePhone = UserUpdatePhone;
32911
33017
  exports.UserUpdateProfilePic = UserUpdateProfilePic;
32912
33018
  exports.UserUpdateTextInput = UserUpdateTextInput;
32913
33019
  exports.UserUpdateTin = UserUpdateTin;
33020
+ exports.UserUpdateUsername = UserUpdateUsername;
32914
33021
  exports.UserUpdateView = UserUpdateView;
32915
33022
  exports.VerifyLinkTokenContainer = VerifyLinkTokenContainer;
32916
33023
  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,7 @@ const UserUpdateContainer = ({
21258
21268
  email: email,
21259
21269
  first_name: firstName,
21260
21270
  last_name: lastName,
21271
+ username: username,
21261
21272
  display_name: displayName,
21262
21273
  phone: phone,
21263
21274
  tin: tin,
@@ -21343,6 +21354,18 @@ const UserUpdateContainer = ({
21343
21354
  lastName: ""
21344
21355
  });
21345
21356
 
21357
+ case SET_USERNAME:
21358
+ return lib_7({ ...state,
21359
+ username: action.payload,
21360
+ usernameError: null
21361
+ });
21362
+
21363
+ case SET_USERNAME_ERROR:
21364
+ return lib_7({ ...state,
21365
+ usernameError: action.payload,
21366
+ username: ""
21367
+ });
21368
+
21346
21369
  case SET_PHONE:
21347
21370
  return lib_7({ ...state,
21348
21371
  phone: action.payload,
@@ -21499,6 +21522,84 @@ const UserUpdateButton = ({
21499
21522
  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
21500
21523
  };
21501
21524
 
21525
+ function UpdateUserNameInput({
21526
+ initWithUserName = true,
21527
+ store,
21528
+ ...otherProps
21529
+ }) {
21530
+ const {
21531
+ t
21532
+ } = useTranslation("common");
21533
+ const {
21534
+ dispatch,
21535
+ state: {
21536
+ username: stateUsername,
21537
+ usernameError
21538
+ }
21539
+ } = useContext(store);
21540
+ const [username, setUsername] = useState(stateUsername);
21541
+ const [finishedTyping, setFinishedTyping] = useState(false);
21542
+ const handleInputChange = useCallback(value => {
21543
+ setUsername(value);
21544
+
21545
+ if (finishedTyping) {
21546
+ if (username !== null && username !== void 0 && username.length) {
21547
+ dispatch({
21548
+ type: SET_USERNAME,
21549
+ payload: username
21550
+ });
21551
+ } else {
21552
+ if (otherProps.required) {
21553
+ dispatch({
21554
+ type: SET_USERNAME_ERROR,
21555
+ payload: t("validation.enterUsername")
21556
+ });
21557
+ } else {
21558
+ dispatch({
21559
+ type: SET_USERNAME,
21560
+ payload: username
21561
+ });
21562
+ }
21563
+ }
21564
+ }
21565
+ }, [dispatch, username, finishedTyping]);
21566
+ useEffect(() => {
21567
+ handleInputChange(username);
21568
+ }, [finishedTyping, username, handleInputChange]); // Initialize username field with user's username
21569
+
21570
+ const loadFirstNameIntoField = () => {
21571
+ handleInputChange(window.Pelcro.user.read().username);
21572
+ dispatch({
21573
+ type: SET_USERNAME,
21574
+ payload: window.Pelcro.user.read().username
21575
+ });
21576
+ };
21577
+
21578
+ useEffect(() => {
21579
+ if (initWithUserName) {
21580
+ document.addEventListener("PelcroUserLoaded", () => {
21581
+ loadFirstNameIntoField();
21582
+ });
21583
+ loadFirstNameIntoField();
21584
+ return () => {
21585
+ document.removeEventListener("PelcroUserLoaded", handleInputChange);
21586
+ };
21587
+ }
21588
+ }, []);
21589
+ return /*#__PURE__*/React__default.createElement(Input, Object.assign({
21590
+ type: "text",
21591
+ error: usernameError,
21592
+ value: username,
21593
+ onChange: e => handleInputChange(e.target.value),
21594
+ onBlur: () => setFinishedTyping(true),
21595
+ onFocus: () => setFinishedTyping(false)
21596
+ }, otherProps));
21597
+ }
21598
+
21599
+ const UserUpdateUsername = props => /*#__PURE__*/React__default.createElement(UpdateUserNameInput, Object.assign({
21600
+ store: store$f
21601
+ }, props));
21602
+
21502
21603
  const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
21503
21604
  store: store$f
21504
21605
  }, props));
@@ -21632,7 +21733,12 @@ const UserUpdateView = props => {
21632
21733
  errorId: "pelcro-input-last-name-error",
21633
21734
  label: t("labels.lastName"),
21634
21735
  required: supportsTap ? true : false
21635
- })), /*#__PURE__*/React__default.createElement("div", {
21736
+ })), /*#__PURE__*/React__default.createElement(UserUpdateUsername, {
21737
+ id: "pelcro-input-user-name",
21738
+ autoComplete: "user-name",
21739
+ errorId: "pelcro-input-user-name-error",
21740
+ label: t("labels.username")
21741
+ }), /*#__PURE__*/React__default.createElement("div", {
21636
21742
  className: "plc-flex plc-items-start"
21637
21743
  }, /*#__PURE__*/React__default.createElement(UserUpdatePhone, {
21638
21744
  id: "pelcro-input-phone",
@@ -32660,4 +32766,4 @@ const QrCodeModal = ({
32660
32766
  };
32661
32767
  QrCodeModal.viewId = "qrcode";
32662
32768
 
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 };
32769
+ 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.11",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",