@pelcro/react-pelcro-js 3.26.0-beta.53 → 3.26.0-beta.54

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.
Files changed (3) hide show
  1. package/dist/index.cjs.js +74 -44
  2. package/dist/index.esm.js +74 -44
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -18510,6 +18510,7 @@ class BraintreeGateway {
18510
18510
  const initialState$l = {
18511
18511
  disableSubmit: false,
18512
18512
  isLoading: false,
18513
+ isSkeletonLoaded: false,
18513
18514
  disableCouponButton: false,
18514
18515
  couponObject: null,
18515
18516
  couponCode: "",
@@ -19233,6 +19234,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19233
19234
  }
19234
19235
  }
19235
19236
  };
19237
+ dispatch({
19238
+ type: SKELETON_LOADER,
19239
+ payload: true
19240
+ });
19236
19241
  return window.braintree.hostedFields.create(options);
19237
19242
  });
19238
19243
  }
@@ -19310,7 +19315,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19310
19315
  }
19311
19316
  });
19312
19317
  }
19313
- handleBraintreePayment(payload.nonce, state);
19318
+ console.log(payload);
19319
+ handleBraintreePayment(payload, state);
19314
19320
  });
19315
19321
  }).catch(error => {
19316
19322
  if (error) {
@@ -19319,16 +19325,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19319
19325
  }
19320
19326
  });
19321
19327
  };
19322
- const handleBraintreePayment = (braintreeNonce, state) => {
19328
+ const handleBraintreePayment = (braintreePaymentRequest, state) => {
19323
19329
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
19330
+ const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
19324
19331
  if (type === "createPayment") {
19325
19332
  handleBraintreeSubscription();
19326
19333
  } else if (type === "orderCreate") {
19327
19334
  purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
19328
19335
  } else if (type === "invoicePayment") {
19329
19336
  payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, dispatch);
19330
- } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
19337
+ } else if (type === "createPaymentSource") {
19331
19338
  createNewBraintreeCard();
19339
+ } else if (type === "updatePaymentSource") {
19340
+ updateBraintreeCard();
19332
19341
  } else if (type === "deletePaymentSource") {
19333
19342
  replaceBraintreeCard();
19334
19343
  }
@@ -19423,45 +19432,54 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19423
19432
  }
19424
19433
  });
19425
19434
  }
19426
-
19427
- // TODO: Implement card update
19428
- // function updateBraintreeCard() {
19429
- // const { id: paymentMethodId } = paymentMethodToEdit;
19430
-
19431
- // const { isDefault } = state;
19432
- // window.Pelcro.paymentMethods.update(
19433
- // {
19434
- // auth_token: window.Pelcro.user.read().auth_token,
19435
- // payment_method_id: paymentMethodId,
19436
- // gateway: "braintree",
19437
- // is_default: isDefault
19438
- // },
19439
- // (err, res) => {
19440
- // dispatch({ type: DISABLE_SUBMIT, payload: false });
19441
- // dispatch({ type: LOADING, payload: false });
19442
- // if (err) {
19443
- // onFailure(err);
19444
- // return dispatch({
19445
- // type: SHOW_ALERT,
19446
- // payload: {
19447
- // type: "error",
19448
- // content: getErrorMessages(err)
19449
- // }
19450
- // });
19451
- // }
19452
-
19453
- // dispatch({
19454
- // type: SHOW_ALERT,
19455
- // payload: {
19456
- // type: "success",
19457
- // content: t("messages.sourceUpdated")
19458
- // }
19459
- // });
19460
- // onSuccess(res);
19461
- // }
19462
- // );
19463
- // }
19464
-
19435
+ function updateBraintreeCard() {
19436
+ const {
19437
+ id: paymentMethodId
19438
+ } = paymentMethodToEdit;
19439
+ const {
19440
+ expirationMonth,
19441
+ expirationYear
19442
+ } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
19443
+ const {
19444
+ isDefault
19445
+ } = state;
19446
+ window.Pelcro.paymentMethods.update({
19447
+ auth_token: window.Pelcro.user.read().auth_token,
19448
+ payment_method_id: paymentMethodId,
19449
+ token: braintreeNonce,
19450
+ gateway: "braintree",
19451
+ exp_month: expirationMonth,
19452
+ exp_year: expirationYear,
19453
+ is_default: isDefault
19454
+ }, (err, res) => {
19455
+ dispatch({
19456
+ type: DISABLE_SUBMIT,
19457
+ payload: false
19458
+ });
19459
+ dispatch({
19460
+ type: LOADING,
19461
+ payload: false
19462
+ });
19463
+ if (err) {
19464
+ onFailure(err);
19465
+ return dispatch({
19466
+ type: SHOW_ALERT,
19467
+ payload: {
19468
+ type: "error",
19469
+ content: getErrorMessages(err)
19470
+ }
19471
+ });
19472
+ }
19473
+ dispatch({
19474
+ type: SHOW_ALERT,
19475
+ payload: {
19476
+ type: "success",
19477
+ content: t("messages.sourceUpdated")
19478
+ }
19479
+ });
19480
+ onSuccess(res);
19481
+ });
19482
+ }
19465
19483
  function handleBraintreeSubscription() {
19466
19484
  const payment = new Payment(new BraintreeGateway());
19467
19485
  const createSubscription = !isGift && !subscriptionIdToRenew;
@@ -21146,6 +21164,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
21146
21164
  ...state,
21147
21165
  isLoading: action.payload
21148
21166
  });
21167
+ case SKELETON_LOADER:
21168
+ return lib_7({
21169
+ ...state,
21170
+ isSkeletonLoaded: action.payload
21171
+ });
21149
21172
  case SHOW_COUPON_FIELD:
21150
21173
  return lib_7({
21151
21174
  ...state,
@@ -21613,6 +21636,11 @@ const CheckoutForm = _ref => {
21613
21636
  paymentMethodToEdit
21614
21637
  } = usePelcro();
21615
21638
  const cardProcessor = getSiteCardProcessor();
21639
+ const {
21640
+ state: {
21641
+ isSkeletonLoaded
21642
+ }
21643
+ } = React.useContext(store$l);
21616
21644
  if (selectedPaymentMethodId) {
21617
21645
  return null;
21618
21646
  }
@@ -21645,7 +21673,7 @@ const CheckoutForm = _ref => {
21645
21673
  }))));
21646
21674
  }
21647
21675
  if (cardProcessor === "braintree") {
21648
- return /*#__PURE__*/React__default['default'].createElement("div", {
21676
+ return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default['default'].createElement("div", {
21649
21677
  className: "plc-max-w-[50em]"
21650
21678
  }, /*#__PURE__*/React__default['default'].createElement("label", {
21651
21679
  htmlFor: "card-number"
@@ -21664,7 +21692,9 @@ const CheckoutForm = _ref => {
21664
21692
  }, "CVV"), /*#__PURE__*/React__default['default'].createElement("div", {
21665
21693
  id: "cvv",
21666
21694
  className: "pelcro-input-field plc-h-12 plc-bg-white"
21667
- }))));
21695
+ })))) : /*#__PURE__*/React__default['default'].createElement("div", {
21696
+ className: "plc-w-full plc-h-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
21697
+ }));
21668
21698
  }
21669
21699
  if (cardProcessor === "stripe") {
21670
21700
  if (type === "updatePaymentSource") {
package/dist/index.esm.js CHANGED
@@ -18480,6 +18480,7 @@ class BraintreeGateway {
18480
18480
  const initialState$l = {
18481
18481
  disableSubmit: false,
18482
18482
  isLoading: false,
18483
+ isSkeletonLoaded: false,
18483
18484
  disableCouponButton: false,
18484
18485
  couponObject: null,
18485
18486
  couponCode: "",
@@ -19203,6 +19204,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19203
19204
  }
19204
19205
  }
19205
19206
  };
19207
+ dispatch({
19208
+ type: SKELETON_LOADER,
19209
+ payload: true
19210
+ });
19206
19211
  return window.braintree.hostedFields.create(options);
19207
19212
  });
19208
19213
  }
@@ -19280,7 +19285,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19280
19285
  }
19281
19286
  });
19282
19287
  }
19283
- handleBraintreePayment(payload.nonce, state);
19288
+ console.log(payload);
19289
+ handleBraintreePayment(payload, state);
19284
19290
  });
19285
19291
  }).catch(error => {
19286
19292
  if (error) {
@@ -19289,16 +19295,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19289
19295
  }
19290
19296
  });
19291
19297
  };
19292
- const handleBraintreePayment = (braintreeNonce, state) => {
19298
+ const handleBraintreePayment = (braintreePaymentRequest, state) => {
19293
19299
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
19300
+ const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
19294
19301
  if (type === "createPayment") {
19295
19302
  handleBraintreeSubscription();
19296
19303
  } else if (type === "orderCreate") {
19297
19304
  purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
19298
19305
  } else if (type === "invoicePayment") {
19299
19306
  payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, dispatch);
19300
- } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
19307
+ } else if (type === "createPaymentSource") {
19301
19308
  createNewBraintreeCard();
19309
+ } else if (type === "updatePaymentSource") {
19310
+ updateBraintreeCard();
19302
19311
  } else if (type === "deletePaymentSource") {
19303
19312
  replaceBraintreeCard();
19304
19313
  }
@@ -19393,45 +19402,54 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19393
19402
  }
19394
19403
  });
19395
19404
  }
19396
-
19397
- // TODO: Implement card update
19398
- // function updateBraintreeCard() {
19399
- // const { id: paymentMethodId } = paymentMethodToEdit;
19400
-
19401
- // const { isDefault } = state;
19402
- // window.Pelcro.paymentMethods.update(
19403
- // {
19404
- // auth_token: window.Pelcro.user.read().auth_token,
19405
- // payment_method_id: paymentMethodId,
19406
- // gateway: "braintree",
19407
- // is_default: isDefault
19408
- // },
19409
- // (err, res) => {
19410
- // dispatch({ type: DISABLE_SUBMIT, payload: false });
19411
- // dispatch({ type: LOADING, payload: false });
19412
- // if (err) {
19413
- // onFailure(err);
19414
- // return dispatch({
19415
- // type: SHOW_ALERT,
19416
- // payload: {
19417
- // type: "error",
19418
- // content: getErrorMessages(err)
19419
- // }
19420
- // });
19421
- // }
19422
-
19423
- // dispatch({
19424
- // type: SHOW_ALERT,
19425
- // payload: {
19426
- // type: "success",
19427
- // content: t("messages.sourceUpdated")
19428
- // }
19429
- // });
19430
- // onSuccess(res);
19431
- // }
19432
- // );
19433
- // }
19434
-
19405
+ function updateBraintreeCard() {
19406
+ const {
19407
+ id: paymentMethodId
19408
+ } = paymentMethodToEdit;
19409
+ const {
19410
+ expirationMonth,
19411
+ expirationYear
19412
+ } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
19413
+ const {
19414
+ isDefault
19415
+ } = state;
19416
+ window.Pelcro.paymentMethods.update({
19417
+ auth_token: window.Pelcro.user.read().auth_token,
19418
+ payment_method_id: paymentMethodId,
19419
+ token: braintreeNonce,
19420
+ gateway: "braintree",
19421
+ exp_month: expirationMonth,
19422
+ exp_year: expirationYear,
19423
+ is_default: isDefault
19424
+ }, (err, res) => {
19425
+ dispatch({
19426
+ type: DISABLE_SUBMIT,
19427
+ payload: false
19428
+ });
19429
+ dispatch({
19430
+ type: LOADING,
19431
+ payload: false
19432
+ });
19433
+ if (err) {
19434
+ onFailure(err);
19435
+ return dispatch({
19436
+ type: SHOW_ALERT,
19437
+ payload: {
19438
+ type: "error",
19439
+ content: getErrorMessages(err)
19440
+ }
19441
+ });
19442
+ }
19443
+ dispatch({
19444
+ type: SHOW_ALERT,
19445
+ payload: {
19446
+ type: "success",
19447
+ content: t("messages.sourceUpdated")
19448
+ }
19449
+ });
19450
+ onSuccess(res);
19451
+ });
19452
+ }
19435
19453
  function handleBraintreeSubscription() {
19436
19454
  const payment = new Payment(new BraintreeGateway());
19437
19455
  const createSubscription = !isGift && !subscriptionIdToRenew;
@@ -21116,6 +21134,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
21116
21134
  ...state,
21117
21135
  isLoading: action.payload
21118
21136
  });
21137
+ case SKELETON_LOADER:
21138
+ return lib_7({
21139
+ ...state,
21140
+ isSkeletonLoaded: action.payload
21141
+ });
21119
21142
  case SHOW_COUPON_FIELD:
21120
21143
  return lib_7({
21121
21144
  ...state,
@@ -21583,6 +21606,11 @@ const CheckoutForm = _ref => {
21583
21606
  paymentMethodToEdit
21584
21607
  } = usePelcro();
21585
21608
  const cardProcessor = getSiteCardProcessor();
21609
+ const {
21610
+ state: {
21611
+ isSkeletonLoaded
21612
+ }
21613
+ } = useContext(store$l);
21586
21614
  if (selectedPaymentMethodId) {
21587
21615
  return null;
21588
21616
  }
@@ -21615,7 +21643,7 @@ const CheckoutForm = _ref => {
21615
21643
  }))));
21616
21644
  }
21617
21645
  if (cardProcessor === "braintree") {
21618
- return /*#__PURE__*/React__default.createElement("div", {
21646
+ return /*#__PURE__*/React__default.createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default.createElement("div", {
21619
21647
  className: "plc-max-w-[50em]"
21620
21648
  }, /*#__PURE__*/React__default.createElement("label", {
21621
21649
  htmlFor: "card-number"
@@ -21634,7 +21662,9 @@ const CheckoutForm = _ref => {
21634
21662
  }, "CVV"), /*#__PURE__*/React__default.createElement("div", {
21635
21663
  id: "cvv",
21636
21664
  className: "pelcro-input-field plc-h-12 plc-bg-white"
21637
- }))));
21665
+ })))) : /*#__PURE__*/React__default.createElement("div", {
21666
+ className: "plc-w-full plc-h-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
21667
+ }));
21638
21668
  }
21639
21669
  if (cardProcessor === "stripe") {
21640
21670
  if (type === "updatePaymentSource") {
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.26.0-beta.53",
4
+ "version": "3.26.0-beta.54",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",