@pelcro/react-pelcro-js 3.38.0 → 3.40.0

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
@@ -11635,7 +11635,7 @@ const debounce = (func, waitTime) => {
11635
11635
  timeout = setTimeout(later, waitTime);
11636
11636
  };
11637
11637
  };
11638
- function getSiteCardProcessor() {
11638
+ function getSiteCardProcessor$1() {
11639
11639
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
11640
11640
  if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
11641
11641
  return "vantiv";
@@ -12196,27 +12196,26 @@ const showPaymentMethodUpdateFromUrl = () => {
12196
12196
  return switchView("login");
12197
12197
  }
12198
12198
  whenUserReady(() => {
12199
- const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
12200
- const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
12201
- if (!window.Stripe && !supportsVantiv && !supportsTap) {
12202
- document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
12203
- return switchView("payment-method-update");
12204
- });
12205
- return;
12199
+ const cardProcessor = getSiteCardProcessor();
12200
+
12201
+ // Only load appropriate SDK based on processor
12202
+ if (cardProcessor === "braintree" && document.querySelector("#braintree-hosted-fields-sdk")) {
12203
+ return switchView("payment-method-update");
12204
+ }
12205
+ if (cardProcessor === "vantiv" && document.querySelector("#vantiv-eprotect-sdk")) {
12206
+ return switchView("payment-method-update");
12207
+ }
12208
+ if (cardProcessor === "tap" && document.querySelector("#tap-sdk")) {
12209
+ return switchView("payment-method-update");
12206
12210
  }
12207
12211
 
12208
- //vantiv
12209
- if (supportsVantiv) {
12210
- document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
12212
+ // Only load Stripe if it's the configured processor
12213
+ if (cardProcessor === "stripe" && !window.Stripe) {
12214
+ document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
12211
12215
  return switchView("payment-method-update");
12212
12216
  });
12213
12217
  return;
12214
12218
  }
12215
-
12216
- //Tap
12217
- if (supportsTap && document.querySelector("#tap-sdk")) {
12218
- return switchView("payment-method-update");
12219
- }
12220
12219
  return switchView("payment-method-update");
12221
12220
  });
12222
12221
  });
@@ -17724,7 +17723,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17724
17723
  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
17725
17724
  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
17726
17725
  const skipPayment = (_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.skipPaymentForFreePlans;
17727
- const cardProcessor = getSiteCardProcessor();
17726
+ const cardProcessor = getSiteCardProcessor$1();
17728
17727
  React.useEffect(() => {
17729
17728
  if (window.Pelcro.coupon.getFromUrl()) {
17730
17729
  dispatch({
@@ -20424,16 +20423,16 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20424
20423
  if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
20425
20424
  return submitPayment(state);
20426
20425
  }
20427
- if (getSiteCardProcessor() === "vantiv") {
20426
+ if (getSiteCardProcessor$1() === "vantiv") {
20428
20427
  return submitUsingVantiv(state);
20429
20428
  }
20430
- if (getSiteCardProcessor() === "tap") {
20429
+ if (getSiteCardProcessor$1() === "tap") {
20431
20430
  return submitUsingTap(state);
20432
20431
  }
20433
- if (getSiteCardProcessor() === "cybersource") {
20432
+ if (getSiteCardProcessor$1() === "cybersource") {
20434
20433
  return submitUsingCybersource(state, dispatch);
20435
20434
  }
20436
- if (getSiteCardProcessor() === "braintree") {
20435
+ if (getSiteCardProcessor$1() === "braintree") {
20437
20436
  return submitUsingBraintree(state, dispatch);
20438
20437
  }
20439
20438
  if (selectedPaymentMethodId) {
@@ -20610,9 +20609,10 @@ const PaymentMethodContainer = props => {
20610
20609
  const {
20611
20610
  whenUserReady
20612
20611
  } = usePelcro.getStore();
20613
- const cardProcessor = getSiteCardProcessor();
20612
+ const cardProcessor = getSiteCardProcessor$1();
20614
20613
  React.useEffect(() => {
20615
20614
  whenUserReady(() => {
20615
+ // Only load Stripe if it's the configured processor
20616
20616
  if (!window.Stripe && cardProcessor === "stripe") {
20617
20617
  document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
20618
20618
  setIsStripeLoaded(true);
@@ -20620,7 +20620,9 @@ const PaymentMethodContainer = props => {
20620
20620
  }
20621
20621
  });
20622
20622
  }, []);
20623
- if (isStripeLoaded) {
20623
+
20624
+ // Ensure we only render Stripe components when Stripe is the processor
20625
+ if (isStripeLoaded && cardProcessor === "stripe") {
20624
20626
  return /*#__PURE__*/React__default['default'].createElement(es_13, {
20625
20627
  apiKey: window.Pelcro.environment.stripe,
20626
20628
  stripeAccount: window.Pelcro.site.read().account_id,
@@ -20823,7 +20825,7 @@ const CheckoutForm = _ref => {
20823
20825
  selectedPaymentMethodId,
20824
20826
  paymentMethodToEdit
20825
20827
  } = usePelcro();
20826
- const cardProcessor = getSiteCardProcessor();
20828
+ const cardProcessor = getSiteCardProcessor$1();
20827
20829
  const {
20828
20830
  state: {
20829
20831
  isSkeletonLoaded
@@ -20912,6 +20914,10 @@ const CheckoutForm = _ref => {
20912
20914
  if (cardProcessor === "stripe") {
20913
20915
  if (type === "updatePaymentSource") {
20914
20916
  var _paymentMethodToEdit$2;
20917
+ const currentProcessor = getSiteCardProcessor$1();
20918
+ if (currentProcessor !== "stripe") {
20919
+ return null;
20920
+ }
20915
20921
  return /*#__PURE__*/React__default['default'].createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
20916
20922
  className: "plc-tracking-widest plc-flex-grow plc-text-center",
20917
20923
  value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$2 = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$2 === void 0 ? void 0 : _paymentMethodToEdit$2.last4}`,
@@ -22037,7 +22043,7 @@ function PaymentMethodUpdateSetDefault(props) {
22037
22043
  *
22038
22044
  */
22039
22045
  function PaymentMethodView(_ref) {
22040
- var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
22046
+ var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro2, _window$Pelcro2$uiSet;
22041
22047
  let {
22042
22048
  onSuccess,
22043
22049
  onGiftRenewalSuccess,
@@ -22053,7 +22059,7 @@ function PaymentMethodView(_ref) {
22053
22059
  const {
22054
22060
  t
22055
22061
  } = useTranslation("checkoutForm");
22056
- const cardProcessor = getSiteCardProcessor();
22062
+ const cardProcessor = getSiteCardProcessor$1();
22057
22063
  const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
22058
22064
  const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
22059
22065
  const supportsCybersource = Boolean((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.cybersource_gateway_settings);
@@ -22081,7 +22087,9 @@ function PaymentMethodView(_ref) {
22081
22087
  target: "_blank",
22082
22088
  href: "https://www.stripe.com/us/customers",
22083
22089
  isButton: false
22084
- }, "Stripe"))), /*#__PURE__*/React__default['default'].createElement("form", {
22090
+ }, "Stripe"))), ((_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.warningMessage) && /*#__PURE__*/React__default['default'].createElement("div", {
22091
+ className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-yellow-600 plc-border plc-border-yellow-400 plc-rounded plc-bg-yellow-50 plc-mt-4"
22092
+ }, (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.warningMessage), /*#__PURE__*/React__default['default'].createElement("form", {
22085
22093
  action: "javascript:void(0);",
22086
22094
  className: "plc-w-full plc-mt-2 plc-font-semibold plc-text-gray-600 pelcro-form"
22087
22095
  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, {
package/dist/index.esm.js CHANGED
@@ -11605,7 +11605,7 @@ const debounce = (func, waitTime) => {
11605
11605
  timeout = setTimeout(later, waitTime);
11606
11606
  };
11607
11607
  };
11608
- function getSiteCardProcessor() {
11608
+ function getSiteCardProcessor$1() {
11609
11609
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
11610
11610
  if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
11611
11611
  return "vantiv";
@@ -12166,27 +12166,26 @@ const showPaymentMethodUpdateFromUrl = () => {
12166
12166
  return switchView("login");
12167
12167
  }
12168
12168
  whenUserReady(() => {
12169
- const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
12170
- const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
12171
- if (!window.Stripe && !supportsVantiv && !supportsTap) {
12172
- document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
12173
- return switchView("payment-method-update");
12174
- });
12175
- return;
12169
+ const cardProcessor = getSiteCardProcessor();
12170
+
12171
+ // Only load appropriate SDK based on processor
12172
+ if (cardProcessor === "braintree" && document.querySelector("#braintree-hosted-fields-sdk")) {
12173
+ return switchView("payment-method-update");
12174
+ }
12175
+ if (cardProcessor === "vantiv" && document.querySelector("#vantiv-eprotect-sdk")) {
12176
+ return switchView("payment-method-update");
12177
+ }
12178
+ if (cardProcessor === "tap" && document.querySelector("#tap-sdk")) {
12179
+ return switchView("payment-method-update");
12176
12180
  }
12177
12181
 
12178
- //vantiv
12179
- if (supportsVantiv) {
12180
- document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
12182
+ // Only load Stripe if it's the configured processor
12183
+ if (cardProcessor === "stripe" && !window.Stripe) {
12184
+ document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
12181
12185
  return switchView("payment-method-update");
12182
12186
  });
12183
12187
  return;
12184
12188
  }
12185
-
12186
- //Tap
12187
- if (supportsTap && document.querySelector("#tap-sdk")) {
12188
- return switchView("payment-method-update");
12189
- }
12190
12189
  return switchView("payment-method-update");
12191
12190
  });
12192
12191
  });
@@ -17694,7 +17693,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17694
17693
  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
17695
17694
  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
17696
17695
  const skipPayment = (_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.skipPaymentForFreePlans;
17697
- const cardProcessor = getSiteCardProcessor();
17696
+ const cardProcessor = getSiteCardProcessor$1();
17698
17697
  useEffect(() => {
17699
17698
  if (window.Pelcro.coupon.getFromUrl()) {
17700
17699
  dispatch({
@@ -20394,16 +20393,16 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20394
20393
  if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
20395
20394
  return submitPayment(state);
20396
20395
  }
20397
- if (getSiteCardProcessor() === "vantiv") {
20396
+ if (getSiteCardProcessor$1() === "vantiv") {
20398
20397
  return submitUsingVantiv(state);
20399
20398
  }
20400
- if (getSiteCardProcessor() === "tap") {
20399
+ if (getSiteCardProcessor$1() === "tap") {
20401
20400
  return submitUsingTap(state);
20402
20401
  }
20403
- if (getSiteCardProcessor() === "cybersource") {
20402
+ if (getSiteCardProcessor$1() === "cybersource") {
20404
20403
  return submitUsingCybersource(state, dispatch);
20405
20404
  }
20406
- if (getSiteCardProcessor() === "braintree") {
20405
+ if (getSiteCardProcessor$1() === "braintree") {
20407
20406
  return submitUsingBraintree(state, dispatch);
20408
20407
  }
20409
20408
  if (selectedPaymentMethodId) {
@@ -20580,9 +20579,10 @@ const PaymentMethodContainer = props => {
20580
20579
  const {
20581
20580
  whenUserReady
20582
20581
  } = usePelcro.getStore();
20583
- const cardProcessor = getSiteCardProcessor();
20582
+ const cardProcessor = getSiteCardProcessor$1();
20584
20583
  useEffect(() => {
20585
20584
  whenUserReady(() => {
20585
+ // Only load Stripe if it's the configured processor
20586
20586
  if (!window.Stripe && cardProcessor === "stripe") {
20587
20587
  document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
20588
20588
  setIsStripeLoaded(true);
@@ -20590,7 +20590,9 @@ const PaymentMethodContainer = props => {
20590
20590
  }
20591
20591
  });
20592
20592
  }, []);
20593
- if (isStripeLoaded) {
20593
+
20594
+ // Ensure we only render Stripe components when Stripe is the processor
20595
+ if (isStripeLoaded && cardProcessor === "stripe") {
20594
20596
  return /*#__PURE__*/React__default.createElement(es_13, {
20595
20597
  apiKey: window.Pelcro.environment.stripe,
20596
20598
  stripeAccount: window.Pelcro.site.read().account_id,
@@ -20793,7 +20795,7 @@ const CheckoutForm = _ref => {
20793
20795
  selectedPaymentMethodId,
20794
20796
  paymentMethodToEdit
20795
20797
  } = usePelcro();
20796
- const cardProcessor = getSiteCardProcessor();
20798
+ const cardProcessor = getSiteCardProcessor$1();
20797
20799
  const {
20798
20800
  state: {
20799
20801
  isSkeletonLoaded
@@ -20882,6 +20884,10 @@ const CheckoutForm = _ref => {
20882
20884
  if (cardProcessor === "stripe") {
20883
20885
  if (type === "updatePaymentSource") {
20884
20886
  var _paymentMethodToEdit$2;
20887
+ const currentProcessor = getSiteCardProcessor$1();
20888
+ if (currentProcessor !== "stripe") {
20889
+ return null;
20890
+ }
20885
20891
  return /*#__PURE__*/React__default.createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Input, {
20886
20892
  className: "plc-tracking-widest plc-flex-grow plc-text-center",
20887
20893
  value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$2 = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$2 === void 0 ? void 0 : _paymentMethodToEdit$2.last4}`,
@@ -22007,7 +22013,7 @@ function PaymentMethodUpdateSetDefault(props) {
22007
22013
  *
22008
22014
  */
22009
22015
  function PaymentMethodView(_ref) {
22010
- var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
22016
+ var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro2, _window$Pelcro2$uiSet;
22011
22017
  let {
22012
22018
  onSuccess,
22013
22019
  onGiftRenewalSuccess,
@@ -22023,7 +22029,7 @@ function PaymentMethodView(_ref) {
22023
22029
  const {
22024
22030
  t
22025
22031
  } = useTranslation("checkoutForm");
22026
- const cardProcessor = getSiteCardProcessor();
22032
+ const cardProcessor = getSiteCardProcessor$1();
22027
22033
  const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
22028
22034
  const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
22029
22035
  const supportsCybersource = Boolean((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.cybersource_gateway_settings);
@@ -22051,7 +22057,9 @@ function PaymentMethodView(_ref) {
22051
22057
  target: "_blank",
22052
22058
  href: "https://www.stripe.com/us/customers",
22053
22059
  isButton: false
22054
- }, "Stripe"))), /*#__PURE__*/React__default.createElement("form", {
22060
+ }, "Stripe"))), ((_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.warningMessage) && /*#__PURE__*/React__default.createElement("div", {
22061
+ className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-yellow-600 plc-border plc-border-yellow-400 plc-rounded plc-bg-yellow-50 plc-mt-4"
22062
+ }, (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.warningMessage), /*#__PURE__*/React__default.createElement("form", {
22055
22063
  action: "javascript:void(0);",
22056
22064
  className: "plc-w-full plc-mt-2 plc-font-semibold plc-text-gray-600 pelcro-form"
22057
22065
  }, /*#__PURE__*/React__default.createElement(PaymentMethodContainer, {
package/dist/pelcro.css CHANGED
@@ -1845,6 +1845,11 @@ apple-pay-button {
1845
1845
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
1846
1846
  }
1847
1847
 
1848
+ .pelcro-root .plc-bg-yellow-50 {
1849
+ --tw-bg-opacity: 1;
1850
+ background-color: rgba(255, 251, 235, var(--tw-bg-opacity));
1851
+ }
1852
+
1848
1853
  .pelcro-root .plc-bg-yellow-100 {
1849
1854
  --tw-bg-opacity: 1;
1850
1855
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
@@ -1962,6 +1967,11 @@ apple-pay-button {
1962
1967
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
1963
1968
  }
1964
1969
 
1970
+ .pelcro-root .plc-border-yellow-400 {
1971
+ --tw-border-opacity: 1;
1972
+ border-color: rgba(251, 191, 36, var(--tw-border-opacity));
1973
+ }
1974
+
1965
1975
  .pelcro-root .plc-border-green-400 {
1966
1976
  --tw-border-opacity: 1;
1967
1977
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
@@ -2834,6 +2844,11 @@ apple-pay-button {
2834
2844
  color: rgba(245, 158, 11, var(--tw-text-opacity));
2835
2845
  }
2836
2846
 
2847
+ .pelcro-root .plc-text-yellow-600 {
2848
+ --tw-text-opacity: 1;
2849
+ color: rgba(217, 119, 6, var(--tw-text-opacity));
2850
+ }
2851
+
2837
2852
  .pelcro-root .plc-text-yellow-700 {
2838
2853
  --tw-text-opacity: 1;
2839
2854
  color: rgba(180, 83, 9, var(--tw-text-opacity));
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.38.0",
4
+ "version": "3.40.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",