@pelcro/react-pelcro-js 4.0.0-alpha.60 → 4.0.0-alpha.62

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
@@ -3863,7 +3863,8 @@ var messages$X = {
3863
3863
  sourceUpdated: "Your payment information has been updated",
3864
3864
  cardAuthFailed: "We are unable to authenticate your payment method. Please choose a different payment method and try again.",
3865
3865
  cardAuthNotSupported: "Updating your payment method to one that requires authentication is currently not possible. Please use a different payment method or contact customer service.",
3866
- tryAgainFromInvoice: "We were unable to authenticate your payment, however your subscription was created. Please attempt to pay for the invoice using another payment method from the dashboard."
3866
+ tryAgainFromInvoice: "We were unable to authenticate your payment, however your subscription was created. Please attempt to pay for the invoice using another payment method from the dashboard.",
3867
+ paymentProcessing: "Invoice payment is currently being processed."
3867
3868
  };
3868
3869
  var errors$f = {
3869
3870
  "": ""
@@ -19852,6 +19853,7 @@ class SelectModal extends React.Component {
19852
19853
  if (filteredPlans.length) return filteredPlans;
19853
19854
  });
19854
19855
  notifyBugsnag(() => {
19856
+ // eslint-disable-next-line no-undef
19855
19857
  Bugsnag.notify("SelectModal - No data viewed", event => {
19856
19858
  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;
19857
19859
 
@@ -19956,7 +19958,7 @@ class SelectModal extends React.Component {
19956
19958
 
19957
19959
  return /*#__PURE__*/React__default['default'].createElement("div", {
19958
19960
  key: product.id,
19959
- className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
19961
+ className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
19960
19962
  }, product.image && /*#__PURE__*/React__default['default'].createElement("figure", {
19961
19963
  className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
19962
19964
  }, /*#__PURE__*/React__default['default'].createElement("img", {
@@ -19989,7 +19991,7 @@ class SelectModal extends React.Component {
19989
19991
  onClick: productButtonCallback,
19990
19992
  "data-key": product.id,
19991
19993
  id: "pelcro-select-product-back-button",
19992
- className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
19994
+ className: "plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none"
19993
19995
  }, productButtonLabel)));
19994
19996
  });
19995
19997
 
@@ -20026,41 +20028,47 @@ class SelectModal extends React.Component {
20026
20028
  _defineProperty$4(this, "renderProductTabs", () => {
20027
20029
  const {
20028
20030
  prodDescExpanded
20029
- } = this.state;
20030
-
20031
- const productButtonCallback = e => {
20032
- this.setState({
20033
- scrollToTab: false
20034
- });
20035
- this.selectProduct(e);
20036
- };
20031
+ } = this.state; // const productButtonCallback = (e) => {
20032
+ // this.setState({ scrollToTab: false });
20033
+ // this.selectProduct(e);
20034
+ // };
20037
20035
 
20038
20036
  const {
20039
20037
  name,
20040
- image,
20038
+ // image,
20041
20039
  description
20042
- } = this.state.product;
20043
- this.state.productList.map((product, index) => {
20044
- if (product.id === this.state.product.id && this.state.scrollToTab) {
20045
- this.setState(oldState => {
20046
- if (+oldState.initialTabSlide !== +index) {
20047
- return {
20048
- initialTabSlide: index
20049
- };
20050
- }
20051
- });
20052
- }
20040
+ } = this.state.product; // const tabs = this.state.productList.map((product, index) => {
20041
+ // if (
20042
+ // product.id === this.state.product.id &&
20043
+ // this.state.scrollToTab
20044
+ // ) {
20045
+ // this.setState((oldState) => {
20046
+ // if (+oldState.initialTabSlide !== +index) {
20047
+ // return { initialTabSlide: index };
20048
+ // }
20049
+ // });
20050
+ // }
20051
+ // return (
20052
+ // <div
20053
+ // key={product.id}
20054
+ // className="plc-flex plc-w-full plc-justify-center plc-text-center"
20055
+ // >
20056
+ // <button
20057
+ // onClick={(e) => productButtonCallback(e)}
20058
+ // data-key={product.id}
20059
+ // data-index={index}
20060
+ // className={`plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${
20061
+ // product.id === this.state.product.id
20062
+ // ? "plc-border-primary plc-text-primary"
20063
+ // : "plc-border-transparent plc-font-normal plc-text-gray-500"
20064
+ // }`}
20065
+ // >
20066
+ // {product.name}
20067
+ // </button>
20068
+ // </div>
20069
+ // );
20070
+ // });
20053
20071
 
20054
- return /*#__PURE__*/React__default['default'].createElement("div", {
20055
- key: product.id,
20056
- className: "plc-flex plc-w-full plc-justify-center plc-text-center"
20057
- }, /*#__PURE__*/React__default['default'].createElement("button", {
20058
- onClick: e => productButtonCallback(e),
20059
- "data-key": product.id,
20060
- "data-index": index,
20061
- className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
20062
- }, product.name));
20063
- });
20064
20072
  return /*#__PURE__*/React__default['default'].createElement("div", {
20065
20073
  className: "plc-flex plc-flex-col"
20066
20074
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -20093,15 +20101,23 @@ class SelectModal extends React.Component {
20093
20101
  return this.renderProducts();
20094
20102
  }
20095
20103
 
20104
+ const matchingItems = productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20105
+ emphasize: true
20106
+ }));
20107
+ const otherItems = allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index));
20096
20108
  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
20097
20109
  className: "plc-text-sm plc-font-semibold"
20098
- }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20099
- emphasize: true
20100
- })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
20110
+ }, this.locale("labels.restrictiveArticles.subscribeTo")), /*#__PURE__*/React__default['default'].createElement(Carousel, {
20111
+ slidesCount: matchingItems.length,
20112
+ mobileArrowDown: true
20113
+ }, matchingItems), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
20101
20114
  className: "plc-my-4"
20102
20115
  }), /*#__PURE__*/React__default['default'].createElement("h3", {
20103
20116
  className: "plc-text-sm plc-font-semibold"
20104
- }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
20117
+ }, this.locale("labels.restrictiveArticles.or")), /*#__PURE__*/React__default['default'].createElement(Carousel, {
20118
+ slidesCount: otherItems.length,
20119
+ mobileArrowDown: true
20120
+ }, otherItems)));
20105
20121
  });
20106
20122
 
20107
20123
  _defineProperty$4(this, "renderPlans", () => {
@@ -20111,7 +20127,7 @@ class SelectModal extends React.Component {
20111
20127
  const items = this.state.planList.map(plan => {
20112
20128
  var _this$state;
20113
20129
 
20114
- this.state.plan.id === plan.id ? true : false;
20130
+ // const isChecked = this.state.plan.id === plan.id ? true : false;
20115
20131
  return /*#__PURE__*/React__default['default'].createElement("div", {
20116
20132
  key: plan.id,
20117
20133
  className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
@@ -23681,6 +23697,25 @@ const PaymentMethodContainerWithoutStripe = ({
23681
23697
  content: isSubCreate ? t("messages.tryAgainFromInvoice") : t("messages.cardAuthFailed")
23682
23698
  }
23683
23699
  });
23700
+ } else if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "processing" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
23701
+ if (!isSubCreate) {
23702
+ dispatch({
23703
+ type: DISABLE_SUBMIT,
23704
+ payload: false
23705
+ });
23706
+ }
23707
+
23708
+ dispatch({
23709
+ type: LOADING,
23710
+ payload: false
23711
+ });
23712
+ return dispatch({
23713
+ type: SHOW_ALERT,
23714
+ payload: {
23715
+ type: "success",
23716
+ content: t("messages.paymentProcessing")
23717
+ }
23718
+ });
23684
23719
  } else {
23685
23720
  onSuccess(response);
23686
23721
  }
package/dist/index.esm.js CHANGED
@@ -3833,7 +3833,8 @@ var messages$X = {
3833
3833
  sourceUpdated: "Your payment information has been updated",
3834
3834
  cardAuthFailed: "We are unable to authenticate your payment method. Please choose a different payment method and try again.",
3835
3835
  cardAuthNotSupported: "Updating your payment method to one that requires authentication is currently not possible. Please use a different payment method or contact customer service.",
3836
- tryAgainFromInvoice: "We were unable to authenticate your payment, however your subscription was created. Please attempt to pay for the invoice using another payment method from the dashboard."
3836
+ tryAgainFromInvoice: "We were unable to authenticate your payment, however your subscription was created. Please attempt to pay for the invoice using another payment method from the dashboard.",
3837
+ paymentProcessing: "Invoice payment is currently being processed."
3837
3838
  };
3838
3839
  var errors$f = {
3839
3840
  "": ""
@@ -19822,6 +19823,7 @@ class SelectModal extends Component {
19822
19823
  if (filteredPlans.length) return filteredPlans;
19823
19824
  });
19824
19825
  notifyBugsnag(() => {
19826
+ // eslint-disable-next-line no-undef
19825
19827
  Bugsnag.notify("SelectModal - No data viewed", event => {
19826
19828
  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;
19827
19829
 
@@ -19926,7 +19928,7 @@ class SelectModal extends Component {
19926
19928
 
19927
19929
  return /*#__PURE__*/React__default.createElement("div", {
19928
19930
  key: product.id,
19929
- className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
19931
+ className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
19930
19932
  }, product.image && /*#__PURE__*/React__default.createElement("figure", {
19931
19933
  className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
19932
19934
  }, /*#__PURE__*/React__default.createElement("img", {
@@ -19959,7 +19961,7 @@ class SelectModal extends Component {
19959
19961
  onClick: productButtonCallback,
19960
19962
  "data-key": product.id,
19961
19963
  id: "pelcro-select-product-back-button",
19962
- className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
19964
+ className: "plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none"
19963
19965
  }, productButtonLabel)));
19964
19966
  });
19965
19967
 
@@ -19996,41 +19998,47 @@ class SelectModal extends Component {
19996
19998
  _defineProperty$4(this, "renderProductTabs", () => {
19997
19999
  const {
19998
20000
  prodDescExpanded
19999
- } = this.state;
20000
-
20001
- const productButtonCallback = e => {
20002
- this.setState({
20003
- scrollToTab: false
20004
- });
20005
- this.selectProduct(e);
20006
- };
20001
+ } = this.state; // const productButtonCallback = (e) => {
20002
+ // this.setState({ scrollToTab: false });
20003
+ // this.selectProduct(e);
20004
+ // };
20007
20005
 
20008
20006
  const {
20009
20007
  name,
20010
- image,
20008
+ // image,
20011
20009
  description
20012
- } = this.state.product;
20013
- this.state.productList.map((product, index) => {
20014
- if (product.id === this.state.product.id && this.state.scrollToTab) {
20015
- this.setState(oldState => {
20016
- if (+oldState.initialTabSlide !== +index) {
20017
- return {
20018
- initialTabSlide: index
20019
- };
20020
- }
20021
- });
20022
- }
20010
+ } = this.state.product; // const tabs = this.state.productList.map((product, index) => {
20011
+ // if (
20012
+ // product.id === this.state.product.id &&
20013
+ // this.state.scrollToTab
20014
+ // ) {
20015
+ // this.setState((oldState) => {
20016
+ // if (+oldState.initialTabSlide !== +index) {
20017
+ // return { initialTabSlide: index };
20018
+ // }
20019
+ // });
20020
+ // }
20021
+ // return (
20022
+ // <div
20023
+ // key={product.id}
20024
+ // className="plc-flex plc-w-full plc-justify-center plc-text-center"
20025
+ // >
20026
+ // <button
20027
+ // onClick={(e) => productButtonCallback(e)}
20028
+ // data-key={product.id}
20029
+ // data-index={index}
20030
+ // className={`plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${
20031
+ // product.id === this.state.product.id
20032
+ // ? "plc-border-primary plc-text-primary"
20033
+ // : "plc-border-transparent plc-font-normal plc-text-gray-500"
20034
+ // }`}
20035
+ // >
20036
+ // {product.name}
20037
+ // </button>
20038
+ // </div>
20039
+ // );
20040
+ // });
20023
20041
 
20024
- return /*#__PURE__*/React__default.createElement("div", {
20025
- key: product.id,
20026
- className: "plc-flex plc-w-full plc-justify-center plc-text-center"
20027
- }, /*#__PURE__*/React__default.createElement("button", {
20028
- onClick: e => productButtonCallback(e),
20029
- "data-key": product.id,
20030
- "data-index": index,
20031
- className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
20032
- }, product.name));
20033
- });
20034
20042
  return /*#__PURE__*/React__default.createElement("div", {
20035
20043
  className: "plc-flex plc-flex-col"
20036
20044
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -20063,15 +20071,23 @@ class SelectModal extends Component {
20063
20071
  return this.renderProducts();
20064
20072
  }
20065
20073
 
20074
+ const matchingItems = productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20075
+ emphasize: true
20076
+ }));
20077
+ const otherItems = allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index));
20066
20078
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h3", {
20067
20079
  className: "plc-text-sm plc-font-semibold"
20068
- }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20069
- emphasize: true
20070
- })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("hr", {
20080
+ }, this.locale("labels.restrictiveArticles.subscribeTo")), /*#__PURE__*/React__default.createElement(Carousel, {
20081
+ slidesCount: matchingItems.length,
20082
+ mobileArrowDown: true
20083
+ }, matchingItems), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("hr", {
20071
20084
  className: "plc-my-4"
20072
20085
  }), /*#__PURE__*/React__default.createElement("h3", {
20073
20086
  className: "plc-text-sm plc-font-semibold"
20074
- }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
20087
+ }, this.locale("labels.restrictiveArticles.or")), /*#__PURE__*/React__default.createElement(Carousel, {
20088
+ slidesCount: otherItems.length,
20089
+ mobileArrowDown: true
20090
+ }, otherItems)));
20075
20091
  });
20076
20092
 
20077
20093
  _defineProperty$4(this, "renderPlans", () => {
@@ -20081,7 +20097,7 @@ class SelectModal extends Component {
20081
20097
  const items = this.state.planList.map(plan => {
20082
20098
  var _this$state;
20083
20099
 
20084
- this.state.plan.id === plan.id ? true : false;
20100
+ // const isChecked = this.state.plan.id === plan.id ? true : false;
20085
20101
  return /*#__PURE__*/React__default.createElement("div", {
20086
20102
  key: plan.id,
20087
20103
  className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
@@ -23651,6 +23667,25 @@ const PaymentMethodContainerWithoutStripe = ({
23651
23667
  content: isSubCreate ? t("messages.tryAgainFromInvoice") : t("messages.cardAuthFailed")
23652
23668
  }
23653
23669
  });
23670
+ } else if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "processing" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
23671
+ if (!isSubCreate) {
23672
+ dispatch({
23673
+ type: DISABLE_SUBMIT,
23674
+ payload: false
23675
+ });
23676
+ }
23677
+
23678
+ dispatch({
23679
+ type: LOADING,
23680
+ payload: false
23681
+ });
23682
+ return dispatch({
23683
+ type: SHOW_ALERT,
23684
+ payload: {
23685
+ type: "success",
23686
+ content: t("messages.paymentProcessing")
23687
+ }
23688
+ });
23654
23689
  } else {
23655
23690
  onSuccess(response);
23656
23691
  }
package/dist/pelcro.css CHANGED
@@ -3041,10 +3041,6 @@ apple-pay-button {
3041
3041
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3042
3042
  }
3043
3043
 
3044
- .pelcro-root .plc-bg-primary-700{
3045
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
3046
- }
3047
-
3048
3044
  .pelcro-root .plc-bg-primary{
3049
3045
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3050
3046
  }
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": "4.0.0-alpha.60",
4
+ "version": "4.0.0-alpha.62",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",