@pelcro/react-pelcro-js 3.22.0-beta.1 → 3.22.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.
Files changed (3) hide show
  1. package/dist/index.cjs.js +82 -49
  2. package/dist/index.esm.js +82 -49
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -8707,7 +8707,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
8707
8707
  if (!Array.isArray(items)) return;
8708
8708
  let totalWithoutDividingBy100 = 0;
8709
8709
  for (const item of items) {
8710
- totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
8710
+ totalWithoutDividingBy100 += parseFloat(item !== null && item !== void 0 && item.price || (item === null || item === void 0 ? void 0 : item.price) === 0 ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
8711
8711
  }
8712
8712
  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
8713
8713
  };
@@ -14042,12 +14042,9 @@ class SelectModal extends React.Component {
14042
14042
  const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
14043
14043
  const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
14044
14044
  const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
14045
- const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.map(product => {
14045
+ const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
14046
14046
  const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
14047
- return {
14048
- ...product,
14049
- plans: filteredPlans
14050
- };
14047
+ if (filteredPlans.length) return filteredPlans;
14051
14048
  });
14052
14049
  const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
14053
14050
  const filteredPlans = product.plans.filter(plan => {
@@ -14058,7 +14055,7 @@ class SelectModal extends React.Component {
14058
14055
  });
14059
14056
  notifyBugsnag(() => {
14060
14057
  Bugsnag.notify("SelectModal - No data viewed", event => {
14061
- var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe;
14058
+ var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
14062
14059
  event.addMetadata("MetaData", {
14063
14060
  site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
14064
14061
  user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
@@ -14075,13 +14072,13 @@ class SelectModal extends React.Component {
14075
14072
  userCountry: userCountry,
14076
14073
  userLanguage: userLanguage,
14077
14074
  siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
14078
- currency_mismatch: productsMatchingUserCurrency.length === 0,
14079
- country_restrictions: productsMatchingUserCountry.length === 0,
14080
- language_mismatch: productsMatchingUserCountry.filter(product => product.plans.length).filter(productMatchPageLanguage).length === 0
14075
+ products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
14076
+ currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
14077
+ country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
14078
+ language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
14081
14079
  });
14082
14080
  });
14083
14081
  });
14084
- console.log("bugsnag Triggered");
14085
14082
  }
14086
14083
  });
14087
14084
  _defineProperty$3(this, "componentWillUnmount", () => {
@@ -16357,6 +16354,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16357
16354
  onFailure = () => {},
16358
16355
  ...props
16359
16356
  } = _ref;
16357
+ const [vantivPaymentRequest, setVantivPaymentRequest] = React.useState(null);
16358
+ const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
16360
16359
  const {
16361
16360
  t
16362
16361
  } = useTranslation("payment");
@@ -16399,7 +16398,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16399
16398
  }, []);
16400
16399
 
16401
16400
  /*====== Start Tap integration ========*/
16402
- const submitUsingTap = () => {
16401
+ const submitUsingTap = state => {
16403
16402
  var _ref2, _ref3, _ref4, _state$updatedPrice;
16404
16403
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16405
16404
  if (isUsingExistingPaymentMethod) {
@@ -16494,7 +16493,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16494
16493
  content: null
16495
16494
  }
16496
16495
  });
16497
- handleTapPayment(tapID);
16496
+ handleTapPayment(tapID, state);
16498
16497
  }
16499
16498
  };
16500
16499
 
@@ -16507,7 +16506,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16507
16506
  }
16508
16507
  });
16509
16508
  };
16510
- function handleTapPayment(paymentRequest) {
16509
+ function handleTapPayment(paymentRequest, state) {
16511
16510
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16512
16511
  if (type === "createPayment") {
16513
16512
  handleTapSubscription();
@@ -16685,7 +16684,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16685
16684
  };
16686
16685
  /*====== End Tap integration ========*/
16687
16686
 
16688
- const submitUsingVantiv = () => {
16687
+ const submitUsingVantiv = state => {
16689
16688
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16690
16689
  if (isUsingExistingPaymentMethod) {
16691
16690
  // no need to create a new source using vantiv
@@ -16703,7 +16702,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16703
16702
  orderId: orderId
16704
16703
  });
16705
16704
  };
16706
- function handleVantivPayment(paymentRequest) {
16705
+ function handleVantivPayment(paymentRequest, couponCode) {
16707
16706
  if (paymentRequest) {
16708
16707
  const SUCCESS_STATUS = "870";
16709
16708
  if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16769,7 +16768,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16769
16768
  const renewSubscription = !isGift && subscriptionIdToRenew;
16770
16769
  const giftSubscriprition = isGift && !subscriptionIdToRenew;
16771
16770
  const renewGift = isRenewingGift;
16772
- const couponCode = state.couponCode || window.Pelcro.coupon.getFromUrl() || "";
16773
16771
  if (renewGift) {
16774
16772
  return payment.execute({
16775
16773
  type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16855,7 +16853,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16855
16853
  height: "245",
16856
16854
  timeout: 50000,
16857
16855
  div: "eProtectiframe",
16858
- callback: handleVantivPayment,
16856
+ callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
16859
16857
  showCvv: true,
16860
16858
  numYears: 8,
16861
16859
  placeholderText: {
@@ -16870,6 +16868,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16870
16868
  });
16871
16869
  }
16872
16870
  }, [selectedPaymentMethodId]);
16871
+
16872
+ //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
16873
+ React.useEffect(() => {
16874
+ if (vantivPaymentRequest) {
16875
+ handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
16876
+ }
16877
+ }, [vantivPaymentRequest]);
16873
16878
  React.useEffect(() => {
16874
16879
  whenUserReady(() => {
16875
16880
  if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
@@ -16998,6 +17003,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16998
17003
  });
16999
17004
  if (err) {
17000
17005
  onFailure(err);
17006
+
17007
+ //reset the coupon code in local state
17008
+ setUpdatedCouponCode("");
17001
17009
  dispatch({
17002
17010
  type: SET_COUPON_ERROR,
17003
17011
  payload: getErrorMessages(err)
@@ -17056,6 +17064,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17056
17064
  type: SET_COUPON,
17057
17065
  payload: res.data.coupon
17058
17066
  });
17067
+
17068
+ //set the coupon code in local state to be able to use with Vantiv
17069
+ setUpdatedCouponCode(res.data.coupon.code);
17059
17070
  dispatch({
17060
17071
  type: SET_PERCENT_OFF,
17061
17072
  payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -17126,6 +17137,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17126
17137
  const debouncedApplyCouponCode = React.useRef(debounce(onApplyCouponCode, 1000)).current;
17127
17138
  const removeAppliedCoupon = state => {
17128
17139
  state.couponCode = "";
17140
+
17141
+ //reset the coupon code in local state
17142
+ setUpdatedCouponCode("");
17129
17143
  dispatch({
17130
17144
  type: SET_COUPON_ERROR,
17131
17145
  payload: ""
@@ -17806,11 +17820,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17806
17820
  disableSubmit: true,
17807
17821
  isLoading: true
17808
17822
  }, (state, dispatch) => {
17823
+ if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
17824
+ return submitPayment(state);
17825
+ }
17809
17826
  if (getSiteCardProcessor() === "vantiv") {
17810
17827
  return submitUsingVantiv();
17811
17828
  }
17812
17829
  if (getSiteCardProcessor() === "tap") {
17813
- return submitUsingTap();
17830
+ return submitUsingTap(state);
17814
17831
  }
17815
17832
  if (selectedPaymentMethodId) {
17816
17833
  // pay with selected method (source) if exists already
@@ -17969,11 +17986,12 @@ const PaymentMethodContainer = props => {
17969
17986
  }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
17970
17987
  store: store$k
17971
17988
  }, props))));
17972
- } else {
17989
+ } else if (cardProcessor !== "stripe") {
17973
17990
  return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
17974
17991
  store: store$k
17975
17992
  }, props));
17976
17993
  }
17994
+ return null;
17977
17995
  };
17978
17996
 
17979
17997
  const StripeInputStyle = {
@@ -18812,7 +18830,8 @@ function PaymentMethodView(_ref) {
18812
18830
  showCoupon,
18813
18831
  showExternalPaymentMethods,
18814
18832
  showSubscriptionButton,
18815
- showOrderButton
18833
+ showOrderButton,
18834
+ order
18816
18835
  } = _ref;
18817
18836
  const {
18818
18837
  t
@@ -18825,7 +18844,15 @@ function PaymentMethodView(_ref) {
18825
18844
  const isUserPhone = Boolean(window.Pelcro.user.read().phone);
18826
18845
  return /*#__PURE__*/React__default['default'].createElement("div", {
18827
18846
  className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
18828
- }, cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
18847
+ }, order && !Array.isArray(order) && /*#__PURE__*/React__default['default'].createElement("div", {
18848
+ className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
18849
+ }, /*#__PURE__*/React__default['default'].createElement("p", {
18850
+ className: "plc-text-gray-600"
18851
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
18852
+ className: "plc-tracking-wider plc-uppercase"
18853
+ }, order === null || order === void 0 ? void 0 : order.name), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
18854
+ className: "plc-text-xl plc-font-semibold plc-text-primary-600"
18855
+ }, getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
18829
18856
  className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
18830
18857
  }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
18831
18858
  className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -20599,6 +20626,16 @@ function SubscriptionManageMembersList(props) {
20599
20626
  icon: /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null)
20600
20627
  };
20601
20628
  }, []);
20629
+ const showMemberData = React.useCallback(member => {
20630
+ var _member$customer, _member$customer2, _member$customer3, _member$customer4;
20631
+ let data;
20632
+ if ((member === null || member === void 0 ? void 0 : member.status) !== "active") {
20633
+ data = member === null || member === void 0 ? void 0 : member.invitation_email;
20634
+ return data;
20635
+ }
20636
+ data = (member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) || (member === null || member === void 0 ? void 0 : (_member$customer2 = member.customer) === null || _member$customer2 === void 0 ? void 0 : _member$customer2.first_name) + " " + (member === null || member === void 0 ? void 0 : (_member$customer3 = member.customer) === null || _member$customer3 === void 0 ? void 0 : _member$customer3.last_name) || (member === null || member === void 0 ? void 0 : (_member$customer4 = member.customer) === null || _member$customer4 === void 0 ? void 0 : _member$customer4.username) || "-----";
20637
+ return data;
20638
+ }, []);
20602
20639
  if (loading) {
20603
20640
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
20604
20641
  className: "plc-animate-pulse"
@@ -20635,32 +20672,27 @@ function SubscriptionManageMembersList(props) {
20635
20672
  type: HANDLE_REMOVE_MEMBER
20636
20673
  });
20637
20674
  };
20638
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, members === null || members === void 0 ? void 0 : members.map(member => {
20639
- var _member$customer;
20640
- return /*#__PURE__*/React__default['default'].createElement("tr", {
20641
- key: member.id,
20642
- className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
20643
- }, /*#__PURE__*/React__default['default'].createElement("td", {
20644
- className: "plc-truncate plc-text-left",
20645
- title: member === null || member === void 0 ? void 0 : member.invitation_email
20646
- }, member.status === "active" ? /*#__PURE__*/React__default['default'].createElement("span", {
20647
- className: "plc-font-semibold plc-text-gray-500"
20648
- }, member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) : /*#__PURE__*/React__default['default'].createElement("span", {
20649
- className: "plc-font-semibold plc-text-gray-500"
20650
- }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default['default'].createElement("td", {
20651
- className: "plc-py-2"
20652
- }, /*#__PURE__*/React__default['default'].createElement("span", {
20653
- className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
20654
- }, getMemberStatus(member).icon, getMemberStatus(member).title)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
20655
- variant: "ghost",
20656
- className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
20657
- icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
20658
- onClick: () => onRemoveClick(member.id),
20659
- disabled: member.id === removeMemberId,
20660
- isLoading: member.id === removeMemberId,
20661
- "data-key": member.id
20662
- }, t("labels.remove"))));
20663
- }));
20675
+ return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, members === null || members === void 0 ? void 0 : members.map(member => /*#__PURE__*/React__default['default'].createElement("tr", {
20676
+ key: member.id,
20677
+ className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
20678
+ }, /*#__PURE__*/React__default['default'].createElement("td", {
20679
+ className: "plc-truncate plc-text-left",
20680
+ title: showMemberData(member)
20681
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
20682
+ className: "plc-font-semibold plc-text-gray-500"
20683
+ }, showMemberData(member))), /*#__PURE__*/React__default['default'].createElement("td", {
20684
+ className: "plc-py-2"
20685
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
20686
+ className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
20687
+ }, getMemberStatus(member).icon, getMemberStatus(member).title)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
20688
+ variant: "ghost",
20689
+ className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
20690
+ icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
20691
+ onClick: () => onRemoveClick(member.id),
20692
+ disabled: member.id === removeMemberId,
20693
+ isLoading: member.id === removeMemberId,
20694
+ "data-key": member.id
20695
+ }, t("labels.remove"))))));
20664
20696
  }
20665
20697
 
20666
20698
  /**
@@ -24274,7 +24306,8 @@ const OrderCreateView = props => {
24274
24306
  type: "orderCreate",
24275
24307
  showCoupon: true,
24276
24308
  showExternalPaymentMethods: false,
24277
- showOrderButton: showOrderButton
24309
+ showOrderButton: showOrderButton,
24310
+ order: order
24278
24311
  }, props))));
24279
24312
  };
24280
24313
 
package/dist/index.esm.js CHANGED
@@ -8677,7 +8677,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
8677
8677
  if (!Array.isArray(items)) return;
8678
8678
  let totalWithoutDividingBy100 = 0;
8679
8679
  for (const item of items) {
8680
- totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
8680
+ totalWithoutDividingBy100 += parseFloat(item !== null && item !== void 0 && item.price || (item === null || item === void 0 ? void 0 : item.price) === 0 ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
8681
8681
  }
8682
8682
  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
8683
8683
  };
@@ -14012,12 +14012,9 @@ class SelectModal extends Component {
14012
14012
  const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
14013
14013
  const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
14014
14014
  const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
14015
- const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.map(product => {
14015
+ const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
14016
14016
  const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
14017
- return {
14018
- ...product,
14019
- plans: filteredPlans
14020
- };
14017
+ if (filteredPlans.length) return filteredPlans;
14021
14018
  });
14022
14019
  const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
14023
14020
  const filteredPlans = product.plans.filter(plan => {
@@ -14028,7 +14025,7 @@ class SelectModal extends Component {
14028
14025
  });
14029
14026
  notifyBugsnag(() => {
14030
14027
  Bugsnag.notify("SelectModal - No data viewed", event => {
14031
- var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe;
14028
+ var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
14032
14029
  event.addMetadata("MetaData", {
14033
14030
  site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
14034
14031
  user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
@@ -14045,13 +14042,13 @@ class SelectModal extends Component {
14045
14042
  userCountry: userCountry,
14046
14043
  userLanguage: userLanguage,
14047
14044
  siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
14048
- currency_mismatch: productsMatchingUserCurrency.length === 0,
14049
- country_restrictions: productsMatchingUserCountry.length === 0,
14050
- language_mismatch: productsMatchingUserCountry.filter(product => product.plans.length).filter(productMatchPageLanguage).length === 0
14045
+ products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
14046
+ currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
14047
+ country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
14048
+ language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
14051
14049
  });
14052
14050
  });
14053
14051
  });
14054
- console.log("bugsnag Triggered");
14055
14052
  }
14056
14053
  });
14057
14054
  _defineProperty$3(this, "componentWillUnmount", () => {
@@ -16327,6 +16324,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16327
16324
  onFailure = () => {},
16328
16325
  ...props
16329
16326
  } = _ref;
16327
+ const [vantivPaymentRequest, setVantivPaymentRequest] = useState(null);
16328
+ const [updatedCouponCode, setUpdatedCouponCode] = useState("");
16330
16329
  const {
16331
16330
  t
16332
16331
  } = useTranslation("payment");
@@ -16369,7 +16368,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16369
16368
  }, []);
16370
16369
 
16371
16370
  /*====== Start Tap integration ========*/
16372
- const submitUsingTap = () => {
16371
+ const submitUsingTap = state => {
16373
16372
  var _ref2, _ref3, _ref4, _state$updatedPrice;
16374
16373
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16375
16374
  if (isUsingExistingPaymentMethod) {
@@ -16464,7 +16463,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16464
16463
  content: null
16465
16464
  }
16466
16465
  });
16467
- handleTapPayment(tapID);
16466
+ handleTapPayment(tapID, state);
16468
16467
  }
16469
16468
  };
16470
16469
 
@@ -16477,7 +16476,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16477
16476
  }
16478
16477
  });
16479
16478
  };
16480
- function handleTapPayment(paymentRequest) {
16479
+ function handleTapPayment(paymentRequest, state) {
16481
16480
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16482
16481
  if (type === "createPayment") {
16483
16482
  handleTapSubscription();
@@ -16655,7 +16654,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16655
16654
  };
16656
16655
  /*====== End Tap integration ========*/
16657
16656
 
16658
- const submitUsingVantiv = () => {
16657
+ const submitUsingVantiv = state => {
16659
16658
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
16660
16659
  if (isUsingExistingPaymentMethod) {
16661
16660
  // no need to create a new source using vantiv
@@ -16673,7 +16672,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16673
16672
  orderId: orderId
16674
16673
  });
16675
16674
  };
16676
- function handleVantivPayment(paymentRequest) {
16675
+ function handleVantivPayment(paymentRequest, couponCode) {
16677
16676
  if (paymentRequest) {
16678
16677
  const SUCCESS_STATUS = "870";
16679
16678
  if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16739,7 +16738,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16739
16738
  const renewSubscription = !isGift && subscriptionIdToRenew;
16740
16739
  const giftSubscriprition = isGift && !subscriptionIdToRenew;
16741
16740
  const renewGift = isRenewingGift;
16742
- const couponCode = state.couponCode || window.Pelcro.coupon.getFromUrl() || "";
16743
16741
  if (renewGift) {
16744
16742
  return payment.execute({
16745
16743
  type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16825,7 +16823,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16825
16823
  height: "245",
16826
16824
  timeout: 50000,
16827
16825
  div: "eProtectiframe",
16828
- callback: handleVantivPayment,
16826
+ callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
16829
16827
  showCvv: true,
16830
16828
  numYears: 8,
16831
16829
  placeholderText: {
@@ -16840,6 +16838,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16840
16838
  });
16841
16839
  }
16842
16840
  }, [selectedPaymentMethodId]);
16841
+
16842
+ //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
16843
+ useEffect(() => {
16844
+ if (vantivPaymentRequest) {
16845
+ handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
16846
+ }
16847
+ }, [vantivPaymentRequest]);
16843
16848
  useEffect(() => {
16844
16849
  whenUserReady(() => {
16845
16850
  if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
@@ -16968,6 +16973,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
16968
16973
  });
16969
16974
  if (err) {
16970
16975
  onFailure(err);
16976
+
16977
+ //reset the coupon code in local state
16978
+ setUpdatedCouponCode("");
16971
16979
  dispatch({
16972
16980
  type: SET_COUPON_ERROR,
16973
16981
  payload: getErrorMessages(err)
@@ -17026,6 +17034,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17026
17034
  type: SET_COUPON,
17027
17035
  payload: res.data.coupon
17028
17036
  });
17037
+
17038
+ //set the coupon code in local state to be able to use with Vantiv
17039
+ setUpdatedCouponCode(res.data.coupon.code);
17029
17040
  dispatch({
17030
17041
  type: SET_PERCENT_OFF,
17031
17042
  payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -17096,6 +17107,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17096
17107
  const debouncedApplyCouponCode = useRef(debounce(onApplyCouponCode, 1000)).current;
17097
17108
  const removeAppliedCoupon = state => {
17098
17109
  state.couponCode = "";
17110
+
17111
+ //reset the coupon code in local state
17112
+ setUpdatedCouponCode("");
17099
17113
  dispatch({
17100
17114
  type: SET_COUPON_ERROR,
17101
17115
  payload: ""
@@ -17776,11 +17790,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17776
17790
  disableSubmit: true,
17777
17791
  isLoading: true
17778
17792
  }, (state, dispatch) => {
17793
+ if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
17794
+ return submitPayment(state);
17795
+ }
17779
17796
  if (getSiteCardProcessor() === "vantiv") {
17780
17797
  return submitUsingVantiv();
17781
17798
  }
17782
17799
  if (getSiteCardProcessor() === "tap") {
17783
- return submitUsingTap();
17800
+ return submitUsingTap(state);
17784
17801
  }
17785
17802
  if (selectedPaymentMethodId) {
17786
17803
  // pay with selected method (source) if exists already
@@ -17939,11 +17956,12 @@ const PaymentMethodContainer = props => {
17939
17956
  }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
17940
17957
  store: store$k
17941
17958
  }, props))));
17942
- } else {
17959
+ } else if (cardProcessor !== "stripe") {
17943
17960
  return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
17944
17961
  store: store$k
17945
17962
  }, props));
17946
17963
  }
17964
+ return null;
17947
17965
  };
17948
17966
 
17949
17967
  const StripeInputStyle = {
@@ -18782,7 +18800,8 @@ function PaymentMethodView(_ref) {
18782
18800
  showCoupon,
18783
18801
  showExternalPaymentMethods,
18784
18802
  showSubscriptionButton,
18785
- showOrderButton
18803
+ showOrderButton,
18804
+ order
18786
18805
  } = _ref;
18787
18806
  const {
18788
18807
  t
@@ -18795,7 +18814,15 @@ function PaymentMethodView(_ref) {
18795
18814
  const isUserPhone = Boolean(window.Pelcro.user.read().phone);
18796
18815
  return /*#__PURE__*/React__default.createElement("div", {
18797
18816
  className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
18798
- }, cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
18817
+ }, order && !Array.isArray(order) && /*#__PURE__*/React__default.createElement("div", {
18818
+ className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
18819
+ }, /*#__PURE__*/React__default.createElement("p", {
18820
+ className: "plc-text-gray-600"
18821
+ }, /*#__PURE__*/React__default.createElement("span", {
18822
+ className: "plc-tracking-wider plc-uppercase"
18823
+ }, order === null || order === void 0 ? void 0 : order.name), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
18824
+ className: "plc-text-xl plc-font-semibold plc-text-primary-600"
18825
+ }, getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
18799
18826
  className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
18800
18827
  }, /*#__PURE__*/React__default.createElement(SvgLock, {
18801
18828
  className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -20569,6 +20596,16 @@ function SubscriptionManageMembersList(props) {
20569
20596
  icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
20570
20597
  };
20571
20598
  }, []);
20599
+ const showMemberData = useCallback(member => {
20600
+ var _member$customer, _member$customer2, _member$customer3, _member$customer4;
20601
+ let data;
20602
+ if ((member === null || member === void 0 ? void 0 : member.status) !== "active") {
20603
+ data = member === null || member === void 0 ? void 0 : member.invitation_email;
20604
+ return data;
20605
+ }
20606
+ data = (member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) || (member === null || member === void 0 ? void 0 : (_member$customer2 = member.customer) === null || _member$customer2 === void 0 ? void 0 : _member$customer2.first_name) + " " + (member === null || member === void 0 ? void 0 : (_member$customer3 = member.customer) === null || _member$customer3 === void 0 ? void 0 : _member$customer3.last_name) || (member === null || member === void 0 ? void 0 : (_member$customer4 = member.customer) === null || _member$customer4 === void 0 ? void 0 : _member$customer4.username) || "-----";
20607
+ return data;
20608
+ }, []);
20572
20609
  if (loading) {
20573
20610
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
20574
20611
  className: "plc-animate-pulse"
@@ -20605,32 +20642,27 @@ function SubscriptionManageMembersList(props) {
20605
20642
  type: HANDLE_REMOVE_MEMBER
20606
20643
  });
20607
20644
  };
20608
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, members === null || members === void 0 ? void 0 : members.map(member => {
20609
- var _member$customer;
20610
- return /*#__PURE__*/React__default.createElement("tr", {
20611
- key: member.id,
20612
- className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
20613
- }, /*#__PURE__*/React__default.createElement("td", {
20614
- className: "plc-truncate plc-text-left",
20615
- title: member === null || member === void 0 ? void 0 : member.invitation_email
20616
- }, member.status === "active" ? /*#__PURE__*/React__default.createElement("span", {
20617
- className: "plc-font-semibold plc-text-gray-500"
20618
- }, member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) : /*#__PURE__*/React__default.createElement("span", {
20619
- className: "plc-font-semibold plc-text-gray-500"
20620
- }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default.createElement("td", {
20621
- className: "plc-py-2"
20622
- }, /*#__PURE__*/React__default.createElement("span", {
20623
- className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
20624
- }, getMemberStatus(member).icon, getMemberStatus(member).title)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
20625
- variant: "ghost",
20626
- className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
20627
- icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
20628
- onClick: () => onRemoveClick(member.id),
20629
- disabled: member.id === removeMemberId,
20630
- isLoading: member.id === removeMemberId,
20631
- "data-key": member.id
20632
- }, t("labels.remove"))));
20633
- }));
20645
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, members === null || members === void 0 ? void 0 : members.map(member => /*#__PURE__*/React__default.createElement("tr", {
20646
+ key: member.id,
20647
+ className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
20648
+ }, /*#__PURE__*/React__default.createElement("td", {
20649
+ className: "plc-truncate plc-text-left",
20650
+ title: showMemberData(member)
20651
+ }, /*#__PURE__*/React__default.createElement("span", {
20652
+ className: "plc-font-semibold plc-text-gray-500"
20653
+ }, showMemberData(member))), /*#__PURE__*/React__default.createElement("td", {
20654
+ className: "plc-py-2"
20655
+ }, /*#__PURE__*/React__default.createElement("span", {
20656
+ className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
20657
+ }, getMemberStatus(member).icon, getMemberStatus(member).title)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
20658
+ variant: "ghost",
20659
+ className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
20660
+ icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
20661
+ onClick: () => onRemoveClick(member.id),
20662
+ disabled: member.id === removeMemberId,
20663
+ isLoading: member.id === removeMemberId,
20664
+ "data-key": member.id
20665
+ }, t("labels.remove"))))));
20634
20666
  }
20635
20667
 
20636
20668
  /**
@@ -24244,7 +24276,8 @@ const OrderCreateView = props => {
24244
24276
  type: "orderCreate",
24245
24277
  showCoupon: true,
24246
24278
  showExternalPaymentMethods: false,
24247
- showOrderButton: showOrderButton
24279
+ showOrderButton: showOrderButton,
24280
+ order: order
24248
24281
  }, props))));
24249
24282
  };
24250
24283
 
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.22.0-beta.1",
4
+ "version": "3.22.0-beta.11",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",