@pelcro/react-pelcro-js 4.0.0-alpha.55 → 4.0.0-alpha.56

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 (4) hide show
  1. package/dist/index.cjs.js +1702 -1991
  2. package/dist/index.esm.js +1703 -1989
  3. package/dist/pelcro.css +51 -71
  4. package/package.json +5 -5
package/dist/index.cjs.js CHANGED
@@ -33,23 +33,23 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
33
  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
34
34
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
35
35
 
36
- function _typeof$3(obj) {
36
+ function _typeof$4(obj) {
37
37
  "@babel/helpers - typeof";
38
38
 
39
39
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
40
- _typeof$3 = function _typeof(obj) {
40
+ _typeof$4 = function _typeof(obj) {
41
41
  return typeof obj;
42
42
  };
43
43
  } else {
44
- _typeof$3 = function _typeof(obj) {
44
+ _typeof$4 = function _typeof(obj) {
45
45
  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
46
46
  };
47
47
  }
48
48
 
49
- return _typeof$3(obj);
49
+ return _typeof$4(obj);
50
50
  }
51
51
 
52
- function _defineProperty$5(obj, key, value) {
52
+ function _defineProperty$6(obj, key, value) {
53
53
  if (key in obj) {
54
54
  Object.defineProperty(obj, key, {
55
55
  value: value,
@@ -76,7 +76,7 @@ function _objectSpread$7(target) {
76
76
  }
77
77
 
78
78
  ownKeys.forEach(function (key) {
79
- _defineProperty$5(target, key, source[key]);
79
+ _defineProperty$6(target, key, source[key]);
80
80
  });
81
81
  }
82
82
 
@@ -140,7 +140,7 @@ module.exports = _typeof;
140
140
  module.exports["default"] = module.exports, module.exports.__esModule = true;
141
141
  });
142
142
 
143
- var _typeof$2 = unwrapExports(_typeof_1);
143
+ var _typeof$3 = unwrapExports(_typeof_1);
144
144
 
145
145
  function _assertThisInitialized$1(self) {
146
146
  if (self === void 0) {
@@ -151,7 +151,7 @@ function _assertThisInitialized$1(self) {
151
151
  }
152
152
 
153
153
  function _possibleConstructorReturn$1(self, call) {
154
- if (call && (_typeof$2(call) === "object" || typeof call === "function")) {
154
+ if (call && (_typeof$3(call) === "object" || typeof call === "function")) {
155
155
  return call;
156
156
  }
157
157
 
@@ -720,7 +720,7 @@ var Translator = function (_EventEmitter) {
720
720
  value: function translate(keys, options, lastKey) {
721
721
  var _this2 = this;
722
722
 
723
- if (_typeof$3(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
723
+ if (_typeof$4(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
724
724
  options = this.options.overloadTranslationOptionHandler(arguments);
725
725
  }
726
726
 
@@ -1906,11 +1906,11 @@ function get() {
1906
1906
  appendNamespaceToCIMode: false,
1907
1907
  overloadTranslationOptionHandler: function handle(args) {
1908
1908
  var ret = {};
1909
- if (_typeof$3(args[1]) === 'object') ret = args[1];
1909
+ if (_typeof$4(args[1]) === 'object') ret = args[1];
1910
1910
  if (typeof args[1] === 'string') ret.defaultValue = args[1];
1911
1911
  if (typeof args[2] === 'string') ret.tDescription = args[2];
1912
1912
 
1913
- if (_typeof$3(args[2]) === 'object' || _typeof$3(args[3]) === 'object') {
1913
+ if (_typeof$4(args[2]) === 'object' || _typeof$4(args[3]) === 'object') {
1914
1914
  var options = args[3] || args[2];
1915
1915
  Object.keys(options).forEach(function (key) {
1916
1916
  ret[key] = options[key];
@@ -2298,7 +2298,7 @@ var I18n = function (_EventEmitter) {
2298
2298
  var fixedT = function fixedT(key, opts) {
2299
2299
  var options;
2300
2300
 
2301
- if (_typeof$3(opts) !== 'object') {
2301
+ if (_typeof$4(opts) !== 'object') {
2302
2302
  for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
2303
2303
  rest[_key3 - 2] = arguments[_key3];
2304
2304
  }
@@ -2550,7 +2550,7 @@ module.exports = _defineProperty;
2550
2550
  module.exports["default"] = module.exports, module.exports.__esModule = true;
2551
2551
  });
2552
2552
 
2553
- var _defineProperty$4 = unwrapExports(defineProperty);
2553
+ var _defineProperty$5 = unwrapExports(defineProperty);
2554
2554
 
2555
2555
  /**
2556
2556
  * This file automatically generated from `pre-publish.js`.
@@ -2612,9 +2612,9 @@ module.exports["default"] = module.exports, module.exports.__esModule = true;
2612
2612
 
2613
2613
  var _createClass$1 = unwrapExports(createClass);
2614
2614
 
2615
- function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2615
+ function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2616
2616
 
2617
- function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2617
+ function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2618
2618
  var defaultOptions$1 = {
2619
2619
  bindI18n: 'languageChanged',
2620
2620
  bindI18nStore: '',
@@ -2739,9 +2739,9 @@ function getDisplayName(Component) {
2739
2739
  return Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown');
2740
2740
  }
2741
2741
 
2742
- function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2742
+ function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2743
2743
 
2744
- function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2744
+ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2745
2745
 
2746
2746
  function hasChildren$1(node, checkLength) {
2747
2747
  if (!node) return false;
@@ -2800,7 +2800,7 @@ function nodesToString(children, i18nOptions) {
2800
2800
  }
2801
2801
  } else if (child === null) {
2802
2802
  warn$1("Trans: the passed in value is invalid - seems you passed in a null child.");
2803
- } else if (_typeof$2(child) === 'object') {
2803
+ } else if (_typeof$3(child) === 'object') {
2804
2804
  var format = child.format,
2805
2805
  clone = _objectWithoutProperties$2(child, ["format"]);
2806
2806
 
@@ -2830,7 +2830,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
2830
2830
  var childrenArray = getAsArray(childs);
2831
2831
  childrenArray.forEach(function (child) {
2832
2832
  if (typeof child === 'string') return;
2833
- if (hasChildren$1(child)) getData(getChildren(child));else if (_typeof$2(child) === 'object' && !React__default['default'].isValidElement(child)) Object.assign(data, child);
2833
+ if (hasChildren$1(child)) getData(getChildren(child));else if (_typeof$3(child) === 'object' && !React__default['default'].isValidElement(child)) Object.assign(data, child);
2834
2834
  });
2835
2835
  }
2836
2836
 
@@ -2866,8 +2866,8 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
2866
2866
  }, tmp) : tmp;
2867
2867
  var isElement = React__default['default'].isValidElement(child);
2868
2868
  var isValidTranslationWithChildren = isElement && hasChildren$1(node, true) && !node.voidElement;
2869
- var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$2(child) === 'object' && child.dummy && !isElement;
2870
- var isKnownComponent = _typeof$2(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
2869
+ var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$3(child) === 'object' && child.dummy && !isElement;
2870
+ var isKnownComponent = _typeof$3(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
2871
2871
 
2872
2872
  if (typeof child === 'string') {
2873
2873
  mem.push(child);
@@ -2904,7 +2904,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
2904
2904
 
2905
2905
  mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
2906
2906
  }
2907
- } else if (_typeof$2(child) === 'object' && !isElement) {
2907
+ } else if (_typeof$3(child) === 'object' && !isElement) {
2908
2908
  var content = node.children[0] ? translationContent : null;
2909
2909
  if (content) mem.push(content);
2910
2910
  } else if (node.children.length === 1 && translationContent) {
@@ -3097,11 +3097,11 @@ module.exports = _slicedToArray;
3097
3097
  module.exports["default"] = module.exports, module.exports.__esModule = true;
3098
3098
  });
3099
3099
 
3100
- var _slicedToArray = unwrapExports(slicedToArray);
3100
+ var _slicedToArray$1 = unwrapExports(slicedToArray);
3101
3101
 
3102
- function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
3102
+ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
3103
3103
 
3104
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3104
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3105
3105
  function useTranslation(ns) {
3106
3106
  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
3107
3107
  var i18nFromProps = props.i18n;
@@ -3144,7 +3144,7 @@ function useTranslation(ns) {
3144
3144
  }
3145
3145
 
3146
3146
  var _useState = React.useState(getT),
3147
- _useState2 = _slicedToArray(_useState, 2),
3147
+ _useState2 = _slicedToArray$1(_useState, 2),
3148
3148
  t = _useState2[0],
3149
3149
  setT = _useState2[1];
3150
3150
 
@@ -3197,9 +3197,9 @@ function useTranslation(ns) {
3197
3197
  });
3198
3198
  }
3199
3199
 
3200
- function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
3200
+ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
3201
3201
 
3202
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3202
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3203
3203
  function withTranslation(ns) {
3204
3204
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
3205
3205
  return function Extend(WrappedComponent) {
@@ -3208,7 +3208,7 @@ function withTranslation(ns) {
3208
3208
  rest = _objectWithoutProperties$2(_ref, ["forwardedRef"]);
3209
3209
 
3210
3210
  var _useTranslation = useTranslation(ns, rest),
3211
- _useTranslation2 = _slicedToArray(_useTranslation, 3),
3211
+ _useTranslation2 = _slicedToArray$1(_useTranslation, 3),
3212
3212
  t = _useTranslation2[0],
3213
3213
  i18n = _useTranslation2[1],
3214
3214
  ready = _useTranslation2[2];
@@ -3930,7 +3930,7 @@ var labels$V = {
3930
3930
  addresses: "Addresses",
3931
3931
  myProfile: "My Profile",
3932
3932
  basicData: "Basic Data",
3933
- paymentSource: "Payment Cards",
3933
+ paymentSource: "Payment methods",
3934
3934
  addCard: "Add Card",
3935
3935
  actions: "Actions",
3936
3936
  expiresOn: "Ends",
@@ -7463,7 +7463,7 @@ middleware.devtools;
7463
7463
  var middleware_3 = middleware.persist;
7464
7464
  middleware.redux;
7465
7465
 
7466
- function _defineProperty$3(obj, key, value) {
7466
+ function _defineProperty$4(obj, key, value) {
7467
7467
  if (key in obj) {
7468
7468
  Object.defineProperty(obj, key, {
7469
7469
  value: value,
@@ -7529,11 +7529,11 @@ function warn(s) {
7529
7529
  console.warn('[react-ga]', s);
7530
7530
  }
7531
7531
 
7532
- function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
7532
+ function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
7533
7533
 
7534
- function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
7534
+ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
7535
7535
 
7536
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
7536
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(source, true).forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
7537
7537
 
7538
7538
  function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
7539
7539
 
@@ -7545,7 +7545,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
7545
7545
 
7546
7546
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
7547
7547
 
7548
- function _possibleConstructorReturn(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
7548
+ function _possibleConstructorReturn(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
7549
7549
 
7550
7550
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
7551
7551
 
@@ -7555,7 +7555,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
7555
7555
 
7556
7556
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
7557
7557
 
7558
- function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7558
+ function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7559
7559
  var NEWTAB = '_blank';
7560
7560
  var MIDDLECLICK = 1;
7561
7561
 
@@ -7577,7 +7577,7 @@ function (_Component) {
7577
7577
 
7578
7578
  _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(OutboundLink)).call.apply(_getPrototypeOf2, [this].concat(args)));
7579
7579
 
7580
- _defineProperty$2(_assertThisInitialized(_this), "handleClick", function (event) {
7580
+ _defineProperty$3(_assertThisInitialized(_this), "handleClick", function (event) {
7581
7581
  var _this$props = _this.props,
7582
7582
  target = _this$props.target,
7583
7583
  eventLabel = _this$props.eventLabel,
@@ -7632,11 +7632,11 @@ function (_Component) {
7632
7632
  return OutboundLink;
7633
7633
  }(React.Component);
7634
7634
 
7635
- _defineProperty$2(OutboundLink$1, "trackLink", function () {
7635
+ _defineProperty$3(OutboundLink$1, "trackLink", function () {
7636
7636
  warn('ga tracking not enabled');
7637
7637
  });
7638
7638
 
7639
- _defineProperty$2(OutboundLink$1, "propTypes", {
7639
+ _defineProperty$3(OutboundLink$1, "propTypes", {
7640
7640
  eventLabel: PropTypes__default['default'].string.isRequired,
7641
7641
  target: PropTypes__default['default'].string,
7642
7642
  to: PropTypes__default['default'].string,
@@ -7644,7 +7644,7 @@ _defineProperty$2(OutboundLink$1, "propTypes", {
7644
7644
  trackerNames: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)
7645
7645
  });
7646
7646
 
7647
- _defineProperty$2(OutboundLink$1, "defaultProps", {
7647
+ _defineProperty$3(OutboundLink$1, "defaultProps", {
7648
7648
  target: null,
7649
7649
  to: null,
7650
7650
  onClick: null,
@@ -7755,13 +7755,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
7755
7755
 
7756
7756
  function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
7757
7757
 
7758
- function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
7758
+ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
7759
7759
 
7760
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
7760
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
7761
7761
 
7762
- function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7762
+ function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7763
7763
 
7764
- function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
7764
+ function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
7765
7765
 
7766
7766
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
7767
7767
 
@@ -7856,7 +7856,7 @@ function initialize(configsOrTrackingId, options) {
7856
7856
 
7857
7857
  if (Array.isArray(configsOrTrackingId)) {
7858
7858
  configsOrTrackingId.forEach(function (config) {
7859
- if (_typeof(config) !== 'object') {
7859
+ if (_typeof$1(config) !== 'object') {
7860
7860
  warn('All configs must be an object');
7861
7861
  return;
7862
7862
  }
@@ -7903,7 +7903,7 @@ function set(fieldsObject, trackerNames) {
7903
7903
  return;
7904
7904
  }
7905
7905
 
7906
- if (_typeof(fieldsObject) !== 'object') {
7906
+ if (_typeof$1(fieldsObject) !== 'object') {
7907
7907
  warn('Expected `fieldsObject` arg to be an Object');
7908
7908
  return;
7909
7909
  }
@@ -8198,7 +8198,7 @@ var plugin = {
8198
8198
  var requireString = trackerName ? "".concat(trackerName, ".require") : 'require'; // Optional Fields
8199
8199
 
8200
8200
  if (options) {
8201
- if (_typeof(options) !== 'object') {
8201
+ if (_typeof$1(options) !== 'object') {
8202
8202
  warn('Expected `options` arg to be an Object');
8203
8203
  return;
8204
8204
  }
@@ -8368,11 +8368,11 @@ var Defaults = /*#__PURE__*/Object.freeze({
8368
8368
  'default': core
8369
8369
  });
8370
8370
 
8371
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
8371
+ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
8372
8372
 
8373
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
8373
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
8374
8374
 
8375
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8375
+ function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8376
8376
  OutboundLink$1.origTrackLink = OutboundLink$1.trackLink;
8377
8377
  OutboundLink$1.trackLink = outboundLink;
8378
8378
  var OutboundLink = OutboundLink$1;
@@ -8917,7 +8917,7 @@ dist.ReactGAImplementation;
8917
8917
 
8918
8918
  class PelcroActions {
8919
8919
  constructor(storeSetter, storeGetter) {
8920
- _defineProperty$3(this, "resetState", () => {
8920
+ _defineProperty$4(this, "resetState", () => {
8921
8921
  const {
8922
8922
  view,
8923
8923
  cartItems,
@@ -8926,7 +8926,7 @@ class PelcroActions {
8926
8926
  this.set(otherStateFields);
8927
8927
  });
8928
8928
 
8929
- _defineProperty$3(this, "switchView", view => {
8929
+ _defineProperty$4(this, "switchView", view => {
8930
8930
  var _window$Pelcro$site$r;
8931
8931
 
8932
8932
  // view switching guards
@@ -8959,7 +8959,7 @@ class PelcroActions {
8959
8959
  });
8960
8960
  });
8961
8961
 
8962
- _defineProperty$3(this, "resetView", () => {
8962
+ _defineProperty$4(this, "resetView", () => {
8963
8963
  const {
8964
8964
  switchView,
8965
8965
  resetState
@@ -8968,7 +8968,7 @@ class PelcroActions {
8968
8968
  resetState();
8969
8969
  });
8970
8970
 
8971
- _defineProperty$3(this, "switchToPaymentView", () => {
8971
+ _defineProperty$4(this, "switchToPaymentView", () => {
8972
8972
  const {
8973
8973
  switchView,
8974
8974
  resetView,
@@ -8990,7 +8990,7 @@ class PelcroActions {
8990
8990
  return resetView();
8991
8991
  });
8992
8992
 
8993
- _defineProperty$3(this, "switchToCheckoutForm", () => {
8993
+ _defineProperty$4(this, "switchToCheckoutForm", () => {
8994
8994
  const {
8995
8995
  switchView,
8996
8996
  product,
@@ -9016,7 +9016,7 @@ class PelcroActions {
9016
9016
  }
9017
9017
  });
9018
9018
 
9019
- _defineProperty$3(this, "switchToAddressView", () => {
9019
+ _defineProperty$4(this, "switchToAddressView", () => {
9020
9020
  const {
9021
9021
  switchView
9022
9022
  } = this.get();
@@ -9028,7 +9028,7 @@ class PelcroActions {
9028
9028
  }
9029
9029
  });
9030
9030
 
9031
- _defineProperty$3(this, "setProduct", id => {
9031
+ _defineProperty$4(this, "setProduct", id => {
9032
9032
  const product = window.Pelcro.product.getById(id);
9033
9033
  if (!product) return console.error("invalid product id");
9034
9034
  this.set({
@@ -9036,7 +9036,7 @@ class PelcroActions {
9036
9036
  });
9037
9037
  });
9038
9038
 
9039
- _defineProperty$3(this, "setPlan", id => {
9039
+ _defineProperty$4(this, "setPlan", id => {
9040
9040
  const plan = window.Pelcro.plan.getById(id);
9041
9041
  if (!plan) return console.error("invalid plan id");
9042
9042
  this.set({
@@ -9044,7 +9044,7 @@ class PelcroActions {
9044
9044
  });
9045
9045
  });
9046
9046
 
9047
- _defineProperty$3(this, "setSubscriptionToCancel", id => {
9047
+ _defineProperty$4(this, "setSubscriptionToCancel", id => {
9048
9048
  var _window$Pelcro$subscr;
9049
9049
 
9050
9050
  const subscriptions = (_window$Pelcro$subscr = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
@@ -9059,7 +9059,7 @@ class PelcroActions {
9059
9059
  });
9060
9060
  });
9061
9061
 
9062
- _defineProperty$3(this, "setSubscriptionToSuspend", id => {
9062
+ _defineProperty$4(this, "setSubscriptionToSuspend", id => {
9063
9063
  var _window$Pelcro$subscr2;
9064
9064
 
9065
9065
  const subscriptions = (_window$Pelcro$subscr2 = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr2 !== void 0 ? _window$Pelcro$subscr2 : [];
@@ -9074,7 +9074,7 @@ class PelcroActions {
9074
9074
  });
9075
9075
  });
9076
9076
 
9077
- _defineProperty$3(this, "setSubscriptionToManageMembers", id => {
9077
+ _defineProperty$4(this, "setSubscriptionToManageMembers", id => {
9078
9078
  var _window$Pelcro$subscr3, _subscriptionToManage;
9079
9079
 
9080
9080
  const subscriptions = (_window$Pelcro$subscr3 = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr3 !== void 0 ? _window$Pelcro$subscr3 : [];
@@ -9094,7 +9094,7 @@ class PelcroActions {
9094
9094
  return true;
9095
9095
  });
9096
9096
 
9097
- _defineProperty$3(this, "setInvoice", id => {
9097
+ _defineProperty$4(this, "setInvoice", id => {
9098
9098
  var _window$Pelcro$invoic;
9099
9099
 
9100
9100
  const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
@@ -9111,7 +9111,7 @@ class PelcroActions {
9111
9111
  return true;
9112
9112
  });
9113
9113
 
9114
- _defineProperty$3(this, "setSelectedMembership", id => {
9114
+ _defineProperty$4(this, "setSelectedMembership", id => {
9115
9115
  var _window$Pelcro$user$r, _window$Pelcro$user$r2;
9116
9116
 
9117
9117
  const memberships = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.memberships) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
@@ -9128,14 +9128,14 @@ class PelcroActions {
9128
9128
  return true;
9129
9129
  });
9130
9130
 
9131
- _defineProperty$3(this, "setCouponCode", couponCode => {
9131
+ _defineProperty$4(this, "setCouponCode", couponCode => {
9132
9132
  if (!couponCode) return console.error("invalid coupon code");
9133
9133
  this.set({
9134
9134
  couponCode
9135
9135
  });
9136
9136
  });
9137
9137
 
9138
- _defineProperty$3(this, "logout", (displayLogin = true) => {
9138
+ _defineProperty$4(this, "logout", (displayLogin = true) => {
9139
9139
  var _window, _window$Pelcro, _window$Pelcro$uiSett;
9140
9140
 
9141
9141
  const {
@@ -9172,7 +9172,7 @@ class PelcroActions {
9172
9172
  }
9173
9173
  });
9174
9174
 
9175
- _defineProperty$3(this, "addToCart", itemSkuId => {
9175
+ _defineProperty$4(this, "addToCart", itemSkuId => {
9176
9176
  const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
9177
9177
 
9178
9178
  if (!itemToAdd) {
@@ -9214,7 +9214,7 @@ class PelcroActions {
9214
9214
  return true;
9215
9215
  });
9216
9216
 
9217
- _defineProperty$3(this, "removeFromCart", itemSkuId => {
9217
+ _defineProperty$4(this, "removeFromCart", itemSkuId => {
9218
9218
  const {
9219
9219
  cartItems
9220
9220
  } = this.get();
@@ -9252,7 +9252,7 @@ class PelcroActions {
9252
9252
  return true;
9253
9253
  });
9254
9254
 
9255
- _defineProperty$3(this, "purchaseItem", itemSkuId => {
9255
+ _defineProperty$4(this, "purchaseItem", itemSkuId => {
9256
9256
  const quickPurchaseItem = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
9257
9257
 
9258
9258
  if (!quickPurchaseItem) {
@@ -9288,7 +9288,7 @@ class PelcroActions {
9288
9288
  switchToAddressView();
9289
9289
  });
9290
9290
 
9291
- _defineProperty$3(this, "setPaymentMethodToEdit", id => {
9291
+ _defineProperty$4(this, "setPaymentMethodToEdit", id => {
9292
9292
  window.Pelcro.paymentMethods.getPaymentMethod({
9293
9293
  auth_token: window.Pelcro.user.read().auth_token,
9294
9294
  payment_method_id: id
@@ -9306,7 +9306,7 @@ class PelcroActions {
9306
9306
  });
9307
9307
  });
9308
9308
 
9309
- _defineProperty$3(this, "setPaymentMethodToDelete", id => {
9309
+ _defineProperty$4(this, "setPaymentMethodToDelete", id => {
9310
9310
  window.Pelcro.paymentMethods.getPaymentMethod({
9311
9311
  auth_token: window.Pelcro.user.read().auth_token,
9312
9312
  payment_method_id: id
@@ -9336,7 +9336,7 @@ class PelcroActions {
9336
9336
 
9337
9337
  class PelcroCallbacks {
9338
9338
  constructor() {
9339
- _defineProperty$3(this, "whenSiteReady", callback => {
9339
+ _defineProperty$4(this, "whenSiteReady", callback => {
9340
9340
  var _window$Pelcro$site$r;
9341
9341
 
9342
9342
  if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.settings) {
@@ -9348,7 +9348,7 @@ class PelcroCallbacks {
9348
9348
  }
9349
9349
  });
9350
9350
 
9351
- _defineProperty$3(this, "whenUserReady", (callback, listenerOptions) => {
9351
+ _defineProperty$4(this, "whenUserReady", (callback, listenerOptions) => {
9352
9352
  var _window$Pelcro$user$r;
9353
9353
 
9354
9354
  if ((_window$Pelcro$user$r = window.Pelcro.user.read()) !== null && _window$Pelcro$user$r !== void 0 && _window$Pelcro$user$r.id) {
@@ -9360,7 +9360,7 @@ class PelcroCallbacks {
9360
9360
  }
9361
9361
  });
9362
9362
 
9363
- _defineProperty$3(this, "whenEcommerceLoaded", callback => {
9363
+ _defineProperty$4(this, "whenEcommerceLoaded", callback => {
9364
9364
  var _window$Pelcro$ecomme;
9365
9365
 
9366
9366
  if ((_window$Pelcro$ecomme = window.Pelcro.ecommerce.products.read()) !== null && _window$Pelcro$ecomme !== void 0 && _window$Pelcro$ecomme.length) {
@@ -9563,6 +9563,17 @@ const userHasAddress = () => {
9563
9563
  const addresses = (_window$Pelcro$user$r2 = (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.addresses) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
9564
9564
  return addresses.length > 0;
9565
9565
  };
9566
+ /** check wether or not the user have any billing addresses
9567
+ * @return {boolean} true if the user have at least one billing address, false otherwise
9568
+ */
9569
+
9570
+ const userHasBillingAddress = () => {
9571
+ var _window$Pelcro$user$r4, _window$Pelcro$user$r5;
9572
+
9573
+ const addresses = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.addresses) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
9574
+ const billingAddresses = addresses.filter(address => address.type == "billing");
9575
+ return billingAddresses.length > 0;
9576
+ };
9566
9577
  const calcAndFormatItemsTotal = (items, currency) => {
9567
9578
  if (!Array.isArray(items)) return;
9568
9579
  let totalWithoutDividingBy100 = 0;
@@ -9603,9 +9614,9 @@ const isValidViewFromURL = viewID => {
9603
9614
  const queryParamEmail = window.Pelcro.helpers.getURLParameter("email");
9604
9615
 
9605
9616
  if (queryParamEmail && window.Pelcro.user.isAuthenticated()) {
9606
- var _window$Pelcro$user$r4;
9617
+ var _window$Pelcro$user$r6;
9607
9618
 
9608
- if (queryParamEmail !== ((_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email)) {
9619
+ if (queryParamEmail !== ((_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email)) {
9609
9620
  console.error("email query parameter and user account email are different, url email query parameter must match user email if user is logged in");
9610
9621
  return false;
9611
9622
  }
@@ -9648,7 +9659,7 @@ const disableScroll = () => {
9648
9659
  }
9649
9660
  };
9650
9661
  const trackSubscriptionOnGA = () => {
9651
- var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
9662
+ var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r7, _window$Pelcro$user$r8;
9652
9663
 
9653
9664
  const {
9654
9665
  product,
@@ -9670,7 +9681,7 @@ const trackSubscriptionOnGA = () => {
9670
9681
  return;
9671
9682
  }
9672
9683
 
9673
- const currencyCode = (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency;
9684
+ const currencyCode = (_window$Pelcro$user$r7 = (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.currency) !== null && _window$Pelcro$user$r7 !== void 0 ? _window$Pelcro$user$r7 : plan.currency;
9674
9685
 
9675
9686
  if (enableReactGA4) {
9676
9687
  ReactGA4.event("purchase", {
@@ -9724,9 +9735,9 @@ const trackSubscriptionOnGA = () => {
9724
9735
  */
9725
9736
 
9726
9737
  const userHasPaymentMethod = () => {
9727
- var _window$Pelcro$user$r7, _window$Pelcro$user$r8;
9738
+ var _window$Pelcro$user$r9, _window$Pelcro$user$r10;
9728
9739
 
9729
- const sources = (_window$Pelcro$user$r7 = (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.sources) !== null && _window$Pelcro$user$r7 !== void 0 ? _window$Pelcro$user$r7 : [];
9740
+ const sources = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.sources) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : [];
9730
9741
  return sources.length > 0;
9731
9742
  };
9732
9743
  /**
@@ -9777,6 +9788,14 @@ const getPaymentCardIcon = name => {
9777
9788
  }), /*#__PURE__*/React__default['default'].createElement("path", {
9778
9789
  fill: "#FFF",
9779
9790
  d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
9791
+ })),
9792
+ bacs_debit: /*#__PURE__*/React__default['default'].createElement("svg", {
9793
+ className: "plc-w-12 plc-text-gray-500",
9794
+ xmlns: "http://www.w3.org/2000/svg",
9795
+ viewBox: "0 0 512 512"
9796
+ }, /*#__PURE__*/React__default['default'].createElement("path", {
9797
+ fill: "currentColor",
9798
+ d: "M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
9780
9799
  }))
9781
9800
  };
9782
9801
  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -9804,10 +9823,10 @@ function getDateWithoutTime(dateObject) {
9804
9823
  return date;
9805
9824
  }
9806
9825
  function userMustVerifyEmail() {
9807
- var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
9826
+ var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
9808
9827
 
9809
9828
  const isEmailVerificationEnabled = (_window$Pelcro$site$r3 = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.email_verify_enabled) !== null && _window$Pelcro$site$r3 !== void 0 ? _window$Pelcro$site$r3 : false;
9810
- const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
9829
+ const isUserEmailVerified = (_window$Pelcro$user$r11 = (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.email_confirm) !== null && _window$Pelcro$user$r11 !== void 0 ? _window$Pelcro$user$r11 : false;
9811
9830
  return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
9812
9831
  }
9813
9832
  function notifyBugsnag(callback, startOptions) {
@@ -10016,13 +10035,13 @@ var _onClick = /*#__PURE__*/new WeakMap();
10016
10035
 
10017
10036
  class SaveToMetadataButtonClass {
10018
10037
  constructor() {
10019
- _defineProperty$3(this, "authenticated", () => {
10038
+ _defineProperty$4(this, "authenticated", () => {
10020
10039
  _classPrivateFieldGet(this, _onClick).call(this, _classPrivateFieldGet(this, _saveToMetadata));
10021
10040
 
10022
10041
  _classPrivateFieldGet(this, _markAllSavedButtons).call(this);
10023
10042
  });
10024
10043
 
10025
- _defineProperty$3(this, "unauthenticated", () => {
10044
+ _defineProperty$4(this, "unauthenticated", () => {
10026
10045
  const {
10027
10046
  switchView
10028
10047
  } = usePelcro.getStore();
@@ -11116,6 +11135,9 @@ const Notification = ({
11116
11135
  }) => {
11117
11136
  return /*#__PURE__*/React__default['default'].createElement(Toaster, Object.assign({
11118
11137
  containerClassName: "pelcro-notification-container",
11138
+ containerStyle: {
11139
+ zIndex: 9999999
11140
+ },
11119
11141
  toastOptions: {
11120
11142
  success: {
11121
11143
  className: "pelcro-notification-success",
@@ -11199,10 +11221,10 @@ toast.confirm = (onConfirm, {
11199
11221
  className: "plc-space-y-2 sm:plc-space-y-0 sm:plc-space-x-2"
11200
11222
  }, /*#__PURE__*/React__default['default'].createElement(Button, {
11201
11223
  variant: "solid",
11202
- className: "plc-text-xs plc-bg-red-500 hover:plc-bg-red-600",
11224
+ className: "plc-text-xs plc-bg-red-500 hover:plc-bg-red-600 plc-min-h-0",
11203
11225
  onClick: onConfirmClick
11204
11226
  }, confirmButtonLabel !== null && confirmButtonLabel !== void 0 ? confirmButtonLabel : translations.labels.confirm), /*#__PURE__*/React__default['default'].createElement(Button, {
11205
- className: "plc-text-xs",
11227
+ className: "plc-text-xs plc-min-h-0",
11206
11228
  variant: "outline",
11207
11229
  onClick: () => toast.dismiss(t.id)
11208
11230
  }, closeButtonLabel !== null && closeButtonLabel !== void 0 ? closeButtonLabel : translations.labels.close))), {
@@ -11689,175 +11711,6 @@ function shouldBlurContent(entitlements) {
11689
11711
  return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
11690
11712
  }
11691
11713
 
11692
- var pure$1 = createCommonjsModule(function (module, exports) {
11693
-
11694
- Object.defineProperty(exports, '__esModule', { value: true });
11695
-
11696
- function _typeof(obj) {
11697
- "@babel/helpers - typeof";
11698
-
11699
- if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
11700
- _typeof = function (obj) {
11701
- return typeof obj;
11702
- };
11703
- } else {
11704
- _typeof = function (obj) {
11705
- return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
11706
- };
11707
- }
11708
-
11709
- return _typeof(obj);
11710
- }
11711
-
11712
- var V3_URL = 'https://js.stripe.com/v3';
11713
- var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
11714
- var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
11715
- var findScript = function findScript() {
11716
- var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
11717
-
11718
- for (var i = 0; i < scripts.length; i++) {
11719
- var script = scripts[i];
11720
-
11721
- if (!V3_URL_REGEX.test(script.src)) {
11722
- continue;
11723
- }
11724
-
11725
- return script;
11726
- }
11727
-
11728
- return null;
11729
- };
11730
-
11731
- var injectScript = function injectScript(params) {
11732
- var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
11733
- var script = document.createElement('script');
11734
- script.src = "".concat(V3_URL).concat(queryString);
11735
- var headOrBody = document.head || document.body;
11736
-
11737
- if (!headOrBody) {
11738
- throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
11739
- }
11740
-
11741
- headOrBody.appendChild(script);
11742
- return script;
11743
- };
11744
-
11745
- var registerWrapper = function registerWrapper(stripe, startTime) {
11746
- if (!stripe || !stripe._registerWrapper) {
11747
- return;
11748
- }
11749
-
11750
- stripe._registerWrapper({
11751
- name: 'stripe-js',
11752
- version: "1.21.1",
11753
- startTime: startTime
11754
- });
11755
- };
11756
-
11757
- var stripePromise = null;
11758
- var loadScript = function loadScript(params) {
11759
- // Ensure that we only attempt to load Stripe.js at most once
11760
- if (stripePromise !== null) {
11761
- return stripePromise;
11762
- }
11763
-
11764
- stripePromise = new Promise(function (resolve, reject) {
11765
- if (typeof window === 'undefined') {
11766
- // Resolve to null when imported server side. This makes the module
11767
- // safe to import in an isomorphic code base.
11768
- resolve(null);
11769
- return;
11770
- }
11771
-
11772
- if (window.Stripe && params) {
11773
- console.warn(EXISTING_SCRIPT_MESSAGE);
11774
- }
11775
-
11776
- if (window.Stripe) {
11777
- resolve(window.Stripe);
11778
- return;
11779
- }
11780
-
11781
- try {
11782
- var script = findScript();
11783
-
11784
- if (script && params) {
11785
- console.warn(EXISTING_SCRIPT_MESSAGE);
11786
- } else if (!script) {
11787
- script = injectScript(params);
11788
- }
11789
-
11790
- script.addEventListener('load', function () {
11791
- if (window.Stripe) {
11792
- resolve(window.Stripe);
11793
- } else {
11794
- reject(new Error('Stripe.js not available'));
11795
- }
11796
- });
11797
- script.addEventListener('error', function () {
11798
- reject(new Error('Failed to load Stripe.js'));
11799
- });
11800
- } catch (error) {
11801
- reject(error);
11802
- return;
11803
- }
11804
- });
11805
- return stripePromise;
11806
- };
11807
- var initStripe = function initStripe(maybeStripe, args, startTime) {
11808
- if (maybeStripe === null) {
11809
- return null;
11810
- }
11811
-
11812
- var stripe = maybeStripe.apply(undefined, args);
11813
- registerWrapper(stripe, startTime);
11814
- return stripe;
11815
- };
11816
- var validateLoadParams = function validateLoadParams(params) {
11817
- var errorMessage = "invalid load parameters; expected object of shape\n\n {advancedFraudSignals: boolean}\n\nbut received\n\n ".concat(JSON.stringify(params), "\n");
11818
-
11819
- if (params === null || _typeof(params) !== 'object') {
11820
- throw new Error(errorMessage);
11821
- }
11822
-
11823
- if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === 'boolean') {
11824
- return params;
11825
- }
11826
-
11827
- throw new Error(errorMessage);
11828
- };
11829
-
11830
- var loadParams;
11831
- var loadStripeCalled = false;
11832
- var loadStripe = function loadStripe() {
11833
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
11834
- args[_key] = arguments[_key];
11835
- }
11836
-
11837
- loadStripeCalled = true;
11838
- var startTime = Date.now();
11839
- return loadScript(loadParams).then(function (maybeStripe) {
11840
- return initStripe(maybeStripe, args, startTime);
11841
- });
11842
- };
11843
-
11844
- loadStripe.setLoadParameters = function (params) {
11845
- if (loadStripeCalled) {
11846
- throw new Error('You cannot change load parameters after calling loadStripe');
11847
- }
11848
-
11849
- loadParams = validateLoadParams(params);
11850
- };
11851
-
11852
- exports.loadStripe = loadStripe;
11853
- });
11854
-
11855
- unwrapExports(pure$1);
11856
- pure$1.loadStripe;
11857
-
11858
- var pure = pure$1;
11859
- var pure_1 = pure.loadStripe;
11860
-
11861
11714
  /**
11862
11715
  * Extracts error message from the response error object
11863
11716
  * @param {Object} error Error object
@@ -12036,16 +11889,14 @@ const initPaywalls = () => {
12036
11889
  };
12037
11890
  const loadPaymentSDKs = () => {
12038
11891
  // Lazy load stripe's SDK
12039
- const {
12040
- whenUserReady
12041
- } = usePelcro.getStore();
11892
+ // const { whenUserReady } = usePelcro.getStore();
12042
11893
  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
12043
- const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
12044
- whenUserReady(() => {
12045
- if (!window.Stripe && !supportsVantiv && !supportsTap) {
12046
- pure_1(window.Pelcro.environment.stripe);
12047
- }
12048
- });
11894
+ const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings); // whenUserReady(() => {
11895
+ // if (!window.Stripe && !supportsVantiv && !supportsTap) {
11896
+ // loadStripe(window.Pelcro.environment.stripe);
11897
+ // }
11898
+ // });
11899
+
12049
11900
  window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk"); // Load PayPal SDKs
12050
11901
 
12051
11902
  const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -19924,7 +19775,7 @@ class SelectModal extends React.Component {
19924
19775
 
19925
19776
  super(props);
19926
19777
 
19927
- _defineProperty$3(this, "componentDidMount", () => {
19778
+ _defineProperty$4(this, "componentDidMount", () => {
19928
19779
  if (this.props.product) {
19929
19780
  const {
19930
19781
  product
@@ -20009,15 +19860,15 @@ class SelectModal extends React.Component {
20009
19860
  }
20010
19861
  });
20011
19862
 
20012
- _defineProperty$3(this, "componentWillUnmount", () => {
19863
+ _defineProperty$4(this, "componentWillUnmount", () => {
20013
19864
  document.removeEventListener("keydown", this.handleSubmit);
20014
19865
  });
20015
19866
 
20016
- _defineProperty$3(this, "handleSubmit", e => {
19867
+ _defineProperty$4(this, "handleSubmit", e => {
20017
19868
  if (e.key === "Enter" && !this.state.disabled) this.submitOption();
20018
19869
  });
20019
19870
 
20020
- _defineProperty$3(this, "onProductChange", e => {
19871
+ _defineProperty$4(this, "onProductChange", e => {
20021
19872
  const product = window.Pelcro.product.list()[e.target.selectedIndex];
20022
19873
  this.setState({
20023
19874
  product: product,
@@ -20025,19 +19876,19 @@ class SelectModal extends React.Component {
20025
19876
  });
20026
19877
  });
20027
19878
 
20028
- _defineProperty$3(this, "onPlanChange", e => {
19879
+ _defineProperty$4(this, "onPlanChange", e => {
20029
19880
  this.setState({
20030
19881
  plan: this.state.product.plans[e.target.selectedIndex]
20031
19882
  });
20032
19883
  });
20033
19884
 
20034
- _defineProperty$3(this, "onIsGiftChange", e => {
19885
+ _defineProperty$4(this, "onIsGiftChange", e => {
20035
19886
  this.setState({
20036
19887
  isGift: e.target.checked
20037
19888
  });
20038
19889
  });
20039
19890
 
20040
- _defineProperty$3(this, "countStartPrice", arr => {
19891
+ _defineProperty$4(this, "countStartPrice", arr => {
20041
19892
  let startingPlan = arr[0];
20042
19893
 
20043
19894
  for (const plan of arr) {
@@ -20055,7 +19906,7 @@ class SelectModal extends React.Component {
20055
19906
  }, "/", " ", startingPlan.interval_count > 1 ? `${startingPlan.interval_count} ${startingPlan.interval_translated}` : `${startingPlan.interval_translated}`));
20056
19907
  });
20057
19908
 
20058
- _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
19909
+ _defineProperty$4(this, "renderOneProduct", (product, index, options) => {
20059
19910
  var _product$description, _product$description2;
20060
19911
 
20061
19912
  const isPlanMode = Boolean(this.state.mode === "plan");
@@ -20121,7 +19972,7 @@ class SelectModal extends React.Component {
20121
19972
  }, productButtonLabel)));
20122
19973
  });
20123
19974
 
20124
- _defineProperty$3(this, "renderProducts", () => {
19975
+ _defineProperty$4(this, "renderProducts", () => {
20125
19976
  const isPlanMode = Boolean(this.state.mode === "plan");
20126
19977
 
20127
19978
  if (isPlanMode) {
@@ -20137,21 +19988,21 @@ class SelectModal extends React.Component {
20137
19988
  }, items);
20138
19989
  });
20139
19990
 
20140
- _defineProperty$3(this, "handleScrollLeft", () => {
19991
+ _defineProperty$4(this, "handleScrollLeft", () => {
20141
19992
  this.productsTabRef.current.scrollLeft -= 100; // Adjust the scroll value as needed
20142
19993
  });
20143
19994
 
20144
- _defineProperty$3(this, "handleScrollRight", () => {
19995
+ _defineProperty$4(this, "handleScrollRight", () => {
20145
19996
  this.productsTabRef.current.scrollLeft += 100; // Adjust the scroll value as needed
20146
19997
  });
20147
19998
 
20148
- _defineProperty$3(this, "toggleProdDescExpanded", () => {
19999
+ _defineProperty$4(this, "toggleProdDescExpanded", () => {
20149
20000
  this.setState({
20150
20001
  prodDescExpanded: !this.state.prodDescExpanded
20151
20002
  });
20152
20003
  });
20153
20004
 
20154
- _defineProperty$3(this, "renderProductTabs", () => {
20005
+ _defineProperty$4(this, "renderProductTabs", () => {
20155
20006
  const {
20156
20007
  prodDescExpanded
20157
20008
  } = this.state;
@@ -20208,7 +20059,7 @@ class SelectModal extends React.Component {
20208
20059
  }, "Read more"))))));
20209
20060
  });
20210
20061
 
20211
- _defineProperty$3(this, "renderMatchingProductsFirst", () => {
20062
+ _defineProperty$4(this, "renderMatchingProductsFirst", () => {
20212
20063
  const isPlanMode = Boolean(this.state.mode === "plan");
20213
20064
 
20214
20065
  if (isPlanMode) {
@@ -20232,7 +20083,7 @@ class SelectModal extends React.Component {
20232
20083
  }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
20233
20084
  });
20234
20085
 
20235
- _defineProperty$3(this, "renderPlans", () => {
20086
+ _defineProperty$4(this, "renderPlans", () => {
20236
20087
  const {
20237
20088
  disableGifting
20238
20089
  } = this.props;
@@ -20282,7 +20133,7 @@ class SelectModal extends React.Component {
20282
20133
  }, items);
20283
20134
  });
20284
20135
 
20285
- _defineProperty$3(this, "selectProduct", e => {
20136
+ _defineProperty$4(this, "selectProduct", e => {
20286
20137
  const id = e.target.dataset.key;
20287
20138
 
20288
20139
  for (const product of this.state.productList) {
@@ -20309,7 +20160,7 @@ class SelectModal extends React.Component {
20309
20160
  }
20310
20161
  });
20311
20162
 
20312
- _defineProperty$3(this, "selectPlan", (e, isGift) => {
20163
+ _defineProperty$4(this, "selectPlan", (e, isGift) => {
20313
20164
  const id = e.target.dataset.key;
20314
20165
 
20315
20166
  for (const plan of this.state.planList) {
@@ -20324,7 +20175,7 @@ class SelectModal extends React.Component {
20324
20175
  }
20325
20176
  });
20326
20177
 
20327
- _defineProperty$3(this, "goBack", () => {
20178
+ _defineProperty$4(this, "goBack", () => {
20328
20179
  this.setState({
20329
20180
  disabled: true,
20330
20181
  mode: "product",
@@ -20332,7 +20183,7 @@ class SelectModal extends React.Component {
20332
20183
  });
20333
20184
  });
20334
20185
 
20335
- _defineProperty$3(this, "submitOption", (product, isGift) => {
20186
+ _defineProperty$4(this, "submitOption", (product, isGift) => {
20336
20187
  const {
20337
20188
  setView
20338
20189
  } = this.props;
@@ -20357,7 +20208,7 @@ class SelectModal extends React.Component {
20357
20208
  return switchToPaymentView();
20358
20209
  });
20359
20210
 
20360
- _defineProperty$3(this, "displayLoginView", () => {
20211
+ _defineProperty$4(this, "displayLoginView", () => {
20361
20212
  this.props.setView("login");
20362
20213
  });
20363
20214
 
@@ -20443,1143 +20294,975 @@ class SelectModal extends React.Component {
20443
20294
 
20444
20295
  const SelectModalWithTrans = withTranslation("select")(SelectModal);
20445
20296
 
20446
- var Provider_1 = createCommonjsModule(function (module, exports) {
20447
-
20448
- Object.defineProperty(exports, "__esModule", {
20449
- value: true
20450
- });
20451
- exports.providerContextTypes = undefined;
20452
-
20297
+ function ownKeys(object, enumerableOnly) {
20298
+ var keys = Object.keys(object);
20453
20299
 
20300
+ if (Object.getOwnPropertySymbols) {
20301
+ var symbols = Object.getOwnPropertySymbols(object);
20454
20302
 
20455
- var _react2 = _interopRequireDefault(React__default['default']);
20456
-
20457
-
20458
-
20459
- var _propTypes2 = _interopRequireDefault(PropTypes__default['default']);
20460
-
20461
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20303
+ if (enumerableOnly) {
20304
+ symbols = symbols.filter(function (sym) {
20305
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
20306
+ });
20307
+ }
20462
20308
 
20463
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
20309
+ keys.push.apply(keys, symbols);
20310
+ }
20464
20311
 
20465
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20312
+ return keys;
20313
+ }
20466
20314
 
20467
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
20315
+ function _objectSpread2(target) {
20316
+ for (var i = 1; i < arguments.length; i++) {
20317
+ var source = arguments[i] != null ? arguments[i] : {};
20468
20318
 
20469
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20319
+ if (i % 2) {
20320
+ ownKeys(Object(source), true).forEach(function (key) {
20321
+ _defineProperty(target, key, source[key]);
20322
+ });
20323
+ } else if (Object.getOwnPropertyDescriptors) {
20324
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
20325
+ } else {
20326
+ ownKeys(Object(source)).forEach(function (key) {
20327
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
20328
+ });
20329
+ }
20330
+ }
20470
20331
 
20471
- // TODO(jez) 'sync' and 'async' are bad tag names.
20472
- // TODO(jez) What if redux also uses this.context.tag?
20473
- var providerContextTypes = exports.providerContextTypes = {
20474
- tag: _propTypes2.default.string.isRequired,
20475
- stripe: _propTypes2.default.object,
20476
- addStripeLoadListener: _propTypes2.default.func
20477
- };
20332
+ return target;
20333
+ }
20478
20334
 
20479
- var getOrCreateStripe = function getOrCreateStripe(apiKey, options) {
20480
- /**
20481
- * Note that this is not meant to be a generic memoization solution.
20482
- * This is specifically a solution for `StripeProvider`s being initialized
20483
- * and destroyed regularly (with the same set of props) when users only
20484
- * use `StripeProvider` for the subtree that contains their checkout form.
20485
- */
20486
- window.Stripe.__cachedInstances = window.Stripe.__cachedInstances || {};
20487
- var cacheKey = 'key=' + apiKey + ' options=' + JSON.stringify(options);
20335
+ function _typeof(obj) {
20336
+ "@babel/helpers - typeof";
20488
20337
 
20489
- var stripe = window.Stripe.__cachedInstances[cacheKey] || window.Stripe(apiKey, options);
20490
- window.Stripe.__cachedInstances[cacheKey] = stripe;
20338
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
20339
+ _typeof = function (obj) {
20340
+ return typeof obj;
20341
+ };
20342
+ } else {
20343
+ _typeof = function (obj) {
20344
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
20345
+ };
20346
+ }
20491
20347
 
20492
- return stripe;
20493
- };
20348
+ return _typeof(obj);
20349
+ }
20494
20350
 
20495
- var ensureStripeShape = function ensureStripeShape(stripe) {
20496
- if (stripe && stripe.elements && stripe.createSource && stripe.createToken && stripe.createPaymentMethod && stripe.handleCardPayment) {
20497
- return stripe;
20351
+ function _defineProperty(obj, key, value) {
20352
+ if (key in obj) {
20353
+ Object.defineProperty(obj, key, {
20354
+ value: value,
20355
+ enumerable: true,
20356
+ configurable: true,
20357
+ writable: true
20358
+ });
20498
20359
  } else {
20499
- throw new Error("Please pass a valid Stripe object to StripeProvider. You can obtain a Stripe object by calling 'Stripe(...)' with your publishable key.");
20360
+ obj[key] = value;
20500
20361
  }
20501
- };
20502
20362
 
20503
- var Provider = function (_React$Component) {
20504
- _inherits(Provider, _React$Component);
20363
+ return obj;
20364
+ }
20505
20365
 
20506
- // on the other hand: childContextTypes is *required* to use context.
20507
- function Provider(props) {
20508
- _classCallCheck(this, Provider);
20366
+ function _slicedToArray(arr, i) {
20367
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
20368
+ }
20509
20369
 
20510
- var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
20370
+ function _arrayWithHoles(arr) {
20371
+ if (Array.isArray(arr)) return arr;
20372
+ }
20511
20373
 
20512
- if (_this.props.apiKey && _this.props.stripe) {
20513
- throw new Error("Please pass either 'apiKey' or 'stripe' to StripeProvider, not both.");
20514
- } else if (_this.props.apiKey) {
20515
- if (!window.Stripe) {
20516
- throw new Error("Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn't available yet (it's loading asynchronously, or you're using server-side rendering), see https://github.com/stripe/react-stripe-elements#advanced-integrations");
20517
- } else {
20518
- var _this$props = _this.props,
20519
- _apiKey = _this$props.apiKey;
20520
- _this$props.children;
20521
- var options = _objectWithoutProperties(_this$props, ['apiKey', 'children']);
20522
-
20523
- var _stripe = getOrCreateStripe(_apiKey, options);
20524
- _this._meta = { tag: 'sync', stripe: _stripe };
20525
- _this._register();
20526
- }
20527
- } else if (_this.props.stripe) {
20528
- // If we already have a stripe instance (in the constructor), we can behave synchronously.
20529
- var _stripe2 = ensureStripeShape(_this.props.stripe);
20530
- _this._meta = { tag: 'sync', stripe: _stripe2 };
20531
- _this._register();
20532
- } else if (_this.props.stripe === null) {
20533
- _this._meta = {
20534
- tag: 'async',
20535
- stripe: null
20536
- };
20537
- } else {
20538
- throw new Error("Please pass either 'apiKey' or 'stripe' to StripeProvider. If you're using 'stripe' but don't have a Stripe instance yet, pass 'null' explicitly.");
20539
- }
20374
+ function _iterableToArrayLimit(arr, i) {
20375
+ var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
20540
20376
 
20541
- _this._didWarn = false;
20542
- _this._didWakeUpListeners = false;
20543
- _this._listeners = [];
20544
- return _this;
20545
- }
20546
- // Even though we're using flow, also use PropTypes so we can take advantage of developer warnings.
20377
+ if (_i == null) return;
20378
+ var _arr = [];
20379
+ var _n = true;
20380
+ var _d = false;
20547
20381
 
20382
+ var _s, _e;
20548
20383
 
20549
- Provider.prototype.getChildContext = function getChildContext() {
20550
- var _this2 = this;
20384
+ try {
20385
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
20386
+ _arr.push(_s.value);
20551
20387
 
20552
- // getChildContext is run after the constructor, so we WILL have access to
20553
- // the initial state.
20554
- //
20555
- // However, context doesn't update in respnse to state changes like you
20556
- // might expect: context is pulled by the child, not pushed by the parent.
20557
- if (this._meta.tag === 'sync') {
20558
- return {
20559
- tag: 'sync',
20560
- stripe: this._meta.stripe
20561
- };
20562
- } else {
20563
- return {
20564
- tag: 'async',
20565
- addStripeLoadListener: function addStripeLoadListener(fn) {
20566
- if (_this2._meta.stripe) {
20567
- fn(_this2._meta.stripe);
20568
- } else {
20569
- _this2._listeners.push(fn);
20570
- }
20571
- }
20572
- };
20388
+ if (i && _arr.length === i) break;
20573
20389
  }
20574
- };
20575
-
20576
- Provider.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
20577
- var apiKeyChanged = this.props.apiKey && prevProps.apiKey && this.props.apiKey !== prevProps.apiKey;
20578
-
20579
- var stripeInstanceChanged = this.props.stripe && prevProps.stripe && this.props.stripe !== prevProps.stripe;
20580
- if (!this._didWarn && (apiKeyChanged || stripeInstanceChanged) && window.console && window.console.error) {
20581
- this._didWarn = true;
20582
- // eslint-disable-next-line no-console
20583
- console.error('StripeProvider does not support changing the apiKey parameter.');
20584
- return;
20390
+ } catch (err) {
20391
+ _d = true;
20392
+ _e = err;
20393
+ } finally {
20394
+ try {
20395
+ if (!_n && _i["return"] != null) _i["return"]();
20396
+ } finally {
20397
+ if (_d) throw _e;
20585
20398
  }
20399
+ }
20586
20400
 
20587
- if (!this._didWakeUpListeners && this.props.stripe) {
20588
- // Wake up the listeners if we've finally been given a StripeShape
20589
- this._didWakeUpListeners = true;
20590
- var _stripe3 = ensureStripeShape(this.props.stripe);
20591
- this._meta.stripe = _stripe3;
20592
- this._register();
20593
- this._listeners.forEach(function (fn) {
20594
- fn(_stripe3);
20595
- });
20596
- }
20597
- };
20401
+ return _arr;
20402
+ }
20598
20403
 
20599
- Provider.prototype._register = function _register() {
20600
- var stripe = this._meta.stripe;
20404
+ function _unsupportedIterableToArray$1(o, minLen) {
20405
+ if (!o) return;
20406
+ if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
20407
+ var n = Object.prototype.toString.call(o).slice(8, -1);
20408
+ if (n === "Object" && o.constructor) n = o.constructor.name;
20409
+ if (n === "Map" || n === "Set") return Array.from(o);
20410
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
20411
+ }
20601
20412
 
20413
+ function _arrayLikeToArray$1(arr, len) {
20414
+ if (len == null || len > arr.length) len = arr.length;
20602
20415
 
20603
- if (!stripe || !stripe._registerWrapper) {
20604
- return;
20605
- }
20416
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
20606
20417
 
20607
- stripe._registerWrapper({
20608
- name: 'react-stripe-elements',
20609
- version: '6.1.2'
20610
- });
20611
- };
20418
+ return arr2;
20419
+ }
20612
20420
 
20613
- Provider.prototype.render = function render() {
20614
- return _react2.default.Children.only(this.props.children);
20615
- };
20421
+ function _nonIterableRest() {
20422
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
20423
+ }
20616
20424
 
20617
- return Provider;
20618
- }(_react2.default.Component);
20425
+ var usePrevious = function usePrevious(value) {
20426
+ var ref = React__default['default'].useRef(value);
20427
+ React__default['default'].useEffect(function () {
20428
+ ref.current = value;
20429
+ }, [value]);
20430
+ return ref.current;
20431
+ };
20619
20432
 
20620
- Provider.propTypes = {
20621
- apiKey: _propTypes2.default.string,
20622
- // PropTypes.object is the only way we can accept a Stripe instance
20623
- // eslint-disable-next-line react/forbid-prop-types
20624
- stripe: _propTypes2.default.object,
20625
- children: _propTypes2.default.node
20433
+ var isUnknownObject = function isUnknownObject(raw) {
20434
+ return raw !== null && _typeof(raw) === 'object';
20626
20435
  };
20627
- Provider.childContextTypes = providerContextTypes;
20628
- Provider.defaultProps = {
20629
- apiKey: undefined,
20630
- stripe: undefined,
20631
- children: null
20436
+ var isPromise = function isPromise(raw) {
20437
+ return isUnknownObject(raw) && typeof raw.then === 'function';
20438
+ }; // We are using types to enforce the `stripe` prop in this lib,
20439
+ // but in an untyped integration `stripe` could be anything, so we need
20440
+ // to do some sanity validation to prevent type errors.
20441
+
20442
+ var isStripe = function isStripe(raw) {
20443
+ return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
20632
20444
  };
20633
- exports.default = Provider;
20634
- });
20635
20445
 
20636
- unwrapExports(Provider_1);
20637
- Provider_1.providerContextTypes;
20446
+ var PLAIN_OBJECT_STR = '[object Object]';
20447
+ var isEqual = function isEqual(left, right) {
20448
+ if (!isUnknownObject(left) || !isUnknownObject(right)) {
20449
+ return left === right;
20450
+ }
20638
20451
 
20639
- var Elements_1 = createCommonjsModule(function (module, exports) {
20452
+ var leftArray = Array.isArray(left);
20453
+ var rightArray = Array.isArray(right);
20454
+ if (leftArray !== rightArray) return false;
20455
+ var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
20456
+ var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
20457
+ if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so
20458
+ // fallback to reference check.
20640
20459
 
20641
- Object.defineProperty(exports, "__esModule", {
20642
- value: true
20643
- });
20644
- exports.elementContextTypes = exports.injectContextTypes = undefined;
20460
+ if (!leftPlainObject && !leftArray) return left === right;
20461
+ var leftKeys = Object.keys(left);
20462
+ var rightKeys = Object.keys(right);
20463
+ if (leftKeys.length !== rightKeys.length) return false;
20464
+ var keySet = {};
20645
20465
 
20646
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
20466
+ for (var i = 0; i < leftKeys.length; i += 1) {
20467
+ keySet[leftKeys[i]] = true;
20468
+ }
20647
20469
 
20470
+ for (var _i = 0; _i < rightKeys.length; _i += 1) {
20471
+ keySet[rightKeys[_i]] = true;
20472
+ }
20648
20473
 
20474
+ var allKeys = Object.keys(keySet);
20649
20475
 
20650
- var _react2 = _interopRequireDefault(React__default['default']);
20476
+ if (allKeys.length !== leftKeys.length) {
20477
+ return false;
20478
+ }
20651
20479
 
20480
+ var l = left;
20481
+ var r = right;
20652
20482
 
20483
+ var pred = function pred(key) {
20484
+ return isEqual(l[key], r[key]);
20485
+ };
20653
20486
 
20654
- var _propTypes2 = _interopRequireDefault(PropTypes__default['default']);
20487
+ return allKeys.every(pred);
20488
+ };
20655
20489
 
20490
+ var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) {
20491
+ if (!isUnknownObject(options)) {
20492
+ return null;
20493
+ }
20656
20494
 
20495
+ return Object.keys(options).reduce(function (newOptions, key) {
20496
+ var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]);
20657
20497
 
20658
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20498
+ if (immutableKeys.includes(key)) {
20499
+ if (isUpdated) {
20500
+ console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property."));
20501
+ }
20659
20502
 
20660
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
20503
+ return newOptions;
20504
+ }
20661
20505
 
20662
- function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
20506
+ if (!isUpdated) {
20507
+ return newOptions;
20508
+ }
20663
20509
 
20664
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20510
+ return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key]));
20511
+ }, null);
20512
+ };
20665
20513
 
20666
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
20514
+ var INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
20515
+ // integration `stripe` could be anything, so we need to do some sanity
20516
+ // validation to prevent type errors.
20667
20517
 
20668
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20518
+ var validateStripe = function validateStripe(maybeStripe) {
20519
+ var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
20669
20520
 
20670
- var injectContextTypes = exports.injectContextTypes = {
20671
- getRegisteredElements: _propTypes2.default.func.isRequired,
20672
- elements: _propTypes2.default.object
20673
- };
20521
+ if (maybeStripe === null || isStripe(maybeStripe)) {
20522
+ return maybeStripe;
20523
+ }
20674
20524
 
20675
- var elementContextTypes = exports.elementContextTypes = {
20676
- addElementsLoadListener: _propTypes2.default.func.isRequired,
20677
- registerElement: _propTypes2.default.func.isRequired,
20678
- unregisterElement: _propTypes2.default.func.isRequired
20525
+ throw new Error(errorMsg);
20679
20526
  };
20680
20527
 
20681
- var Elements = function (_React$Component) {
20682
- _inherits(Elements, _React$Component);
20683
-
20684
- function Elements(props, context) {
20685
- _classCallCheck(this, Elements);
20528
+ var parseStripeProp = function parseStripeProp(raw) {
20529
+ var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
20686
20530
 
20687
- var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
20531
+ if (isPromise(raw)) {
20532
+ return {
20533
+ tag: 'async',
20534
+ stripePromise: Promise.resolve(raw).then(function (result) {
20535
+ return validateStripe(result, errorMsg);
20536
+ })
20537
+ };
20538
+ }
20688
20539
 
20689
- _this._elements = null;
20540
+ var stripe = validateStripe(raw, errorMsg);
20690
20541
 
20691
- _this.handleRegisterElement = function (element, impliedTokenType, impliedSourceType, impliedPaymentMethodType) {
20692
- _this.setState(function (prevState) {
20693
- return {
20694
- registeredElements: [].concat(_toConsumableArray(prevState.registeredElements), [_extends({
20695
- element: element
20696
- }, impliedTokenType ? { impliedTokenType: impliedTokenType } : {}, impliedSourceType ? { impliedSourceType: impliedSourceType } : {}, impliedPaymentMethodType ? { impliedPaymentMethodType: impliedPaymentMethodType } : {})])
20697
- };
20698
- });
20542
+ if (stripe === null) {
20543
+ return {
20544
+ tag: 'empty'
20699
20545
  };
20546
+ }
20700
20547
 
20701
- _this.handleUnregisterElement = function (el) {
20702
- _this.setState(function (prevState) {
20703
- return {
20704
- registeredElements: prevState.registeredElements.filter(function (_ref) {
20705
- var element = _ref.element;
20706
- return element !== el;
20707
- })
20708
- };
20709
- });
20710
- };
20548
+ return {
20549
+ tag: 'sync',
20550
+ stripe: stripe
20551
+ };
20552
+ };
20711
20553
 
20712
- var _this$props = _this.props;
20713
- _this$props.children;
20714
- var options = _objectWithoutProperties(_this$props, ['children']);
20554
+ var registerWithStripeJs = function registerWithStripeJs(stripe) {
20555
+ if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
20556
+ return;
20557
+ }
20715
20558
 
20716
- if (_this.context.tag === 'sync') {
20717
- _this._elements = _this.context.stripe.elements(options);
20718
- }
20559
+ stripe._registerWrapper({
20560
+ name: 'react-stripe-js',
20561
+ version: "2.5.0"
20562
+ });
20719
20563
 
20720
- _this.state = {
20721
- registeredElements: []
20722
- };
20723
- return _this;
20564
+ stripe.registerAppInfo({
20565
+ name: 'react-stripe-js',
20566
+ version: "2.5.0",
20567
+ url: 'https://stripe.com/docs/stripe-js/react'
20568
+ });
20569
+ };
20570
+ var CustomCheckoutSdkContext = /*#__PURE__*/React__default['default'].createContext(null);
20571
+ CustomCheckoutSdkContext.displayName = 'CustomCheckoutSdkContext';
20572
+ var parseCustomCheckoutSdkContext = function parseCustomCheckoutSdkContext(ctx, useCase) {
20573
+ if (!ctx) {
20574
+ throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CustomCheckoutProvider> provider."));
20724
20575
  }
20725
20576
 
20726
- Elements.prototype.getChildContext = function getChildContext() {
20727
- var _this2 = this;
20577
+ return ctx;
20578
+ };
20579
+ var CustomCheckoutContext = /*#__PURE__*/React__default['default'].createContext(null);
20580
+ CustomCheckoutContext.displayName = 'CustomCheckoutContext';
20581
+ ({
20582
+ stripe: PropTypes__default['default'].any,
20583
+ options: PropTypes__default['default'].shape({
20584
+ clientSecret: PropTypes__default['default'].string.isRequired,
20585
+ elementsOptions: PropTypes__default['default'].object
20586
+ }).isRequired
20587
+ });
20588
+ var useElementsOrCustomCheckoutSdkContextWithUseCase = function useElementsOrCustomCheckoutSdkContextWithUseCase(useCaseString) {
20589
+ var customCheckoutSdkContext = React__default['default'].useContext(CustomCheckoutSdkContext);
20590
+ var elementsContext = React__default['default'].useContext(ElementsContext);
20728
20591
 
20729
- return {
20730
- addElementsLoadListener: function addElementsLoadListener(fn) {
20731
- // Return the existing elements instance if we already have one.
20732
- if (_this2.context.tag === 'sync') {
20733
- // This is impossible, but we need to make flow happy.
20734
- if (!_this2._elements) {
20735
- throw new Error('Expected elements to be instantiated but it was not.');
20736
- }
20592
+ if (customCheckoutSdkContext && elementsContext) {
20593
+ throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CustomCheckoutProvider> and <Elements> providers."));
20594
+ }
20737
20595
 
20738
- fn(_this2._elements);
20739
- } else {
20740
- _this2.context.addStripeLoadListener(function (stripe) {
20741
- if (_this2._elements) {
20742
- fn(_this2._elements);
20743
- } else {
20744
- var _props = _this2.props;
20745
- _props.children;
20746
- var options = _objectWithoutProperties(_props, ['children']);
20596
+ if (customCheckoutSdkContext) {
20597
+ return parseCustomCheckoutSdkContext(customCheckoutSdkContext, useCaseString);
20598
+ }
20747
20599
 
20748
- _this2._elements = stripe.elements(options);
20749
- fn(_this2._elements);
20750
- }
20751
- });
20752
- }
20753
- },
20754
- registerElement: this.handleRegisterElement,
20755
- unregisterElement: this.handleUnregisterElement,
20756
- getRegisteredElements: function getRegisteredElements() {
20757
- return _this2.state.registeredElements;
20758
- },
20759
- elements: this._elements
20760
- };
20761
- };
20600
+ return parseElementsContext(elementsContext, useCaseString);
20601
+ };
20762
20602
 
20763
- Elements.prototype.render = function render() {
20764
- return _react2.default.Children.only(this.props.children);
20765
- };
20603
+ var ElementsContext = /*#__PURE__*/React__default['default'].createContext(null);
20604
+ ElementsContext.displayName = 'ElementsContext';
20605
+ var parseElementsContext = function parseElementsContext(ctx, useCase) {
20606
+ if (!ctx) {
20607
+ throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
20608
+ }
20766
20609
 
20767
- return Elements;
20768
- }(_react2.default.Component);
20610
+ return ctx;
20611
+ };
20612
+ var CartElementContext = /*#__PURE__*/React__default['default'].createContext(null);
20613
+ CartElementContext.displayName = 'CartElementContext';
20614
+ var parseCartElementContext = function parseCartElementContext(ctx, useCase) {
20615
+ if (!ctx) {
20616
+ throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
20617
+ }
20769
20618
 
20770
- Elements.childContextTypes = _extends({}, injectContextTypes, elementContextTypes);
20771
- Elements.contextTypes = Provider_1.providerContextTypes;
20772
- Elements.defaultProps = {
20773
- children: null
20619
+ return ctx;
20774
20620
  };
20775
- exports.default = Elements;
20776
- });
20621
+ /**
20622
+ * The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component.
20623
+ * Render an `Elements` provider at the root of your React app so that it is available everywhere you need it.
20624
+ *
20625
+ * To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key.
20626
+ * The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object.
20627
+ * Pass the returned `Promise` to `Elements`.
20628
+ *
20629
+ * @docs https://stripe.com/docs/stripe-js/react#elements-provider
20630
+ */
20777
20631
 
20778
- unwrapExports(Elements_1);
20779
- Elements_1.elementContextTypes;
20780
- Elements_1.injectContextTypes;
20632
+ var Elements = function Elements(_ref) {
20633
+ var rawStripeProp = _ref.stripe,
20634
+ options = _ref.options,
20635
+ children = _ref.children;
20636
+ var parsed = React__default['default'].useMemo(function () {
20637
+ return parseStripeProp(rawStripeProp);
20638
+ }, [rawStripeProp]);
20781
20639
 
20782
- var inject_1 = createCommonjsModule(function (module, exports) {
20640
+ var _React$useState = React__default['default'].useState(null),
20641
+ _React$useState2 = _slicedToArray(_React$useState, 2),
20642
+ cart = _React$useState2[0],
20643
+ setCart = _React$useState2[1];
20783
20644
 
20784
- Object.defineProperty(exports, "__esModule", {
20785
- value: true
20786
- });
20645
+ var _React$useState3 = React__default['default'].useState(null),
20646
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
20647
+ cartState = _React$useState4[0],
20648
+ setCartState = _React$useState4[1]; // For a sync stripe instance, initialize into context
20787
20649
 
20788
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
20789
20650
 
20790
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
20651
+ var _React$useState5 = React__default['default'].useState(function () {
20652
+ return {
20653
+ stripe: parsed.tag === 'sync' ? parsed.stripe : null,
20654
+ elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
20655
+ };
20656
+ }),
20657
+ _React$useState6 = _slicedToArray(_React$useState5, 2),
20658
+ ctx = _React$useState6[0],
20659
+ setContext = _React$useState6[1];
20791
20660
 
20661
+ React__default['default'].useEffect(function () {
20662
+ var isMounted = true;
20792
20663
 
20664
+ var safeSetContext = function safeSetContext(stripe) {
20665
+ setContext(function (ctx) {
20666
+ // no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296)
20667
+ if (ctx.stripe) return ctx;
20668
+ return {
20669
+ stripe: stripe,
20670
+ elements: stripe.elements(options)
20671
+ };
20672
+ });
20673
+ }; // For an async stripePromise, store it in context once resolved
20793
20674
 
20794
- var _react2 = _interopRequireDefault(React__default['default']);
20795
20675
 
20676
+ if (parsed.tag === 'async' && !ctx.stripe) {
20677
+ parsed.stripePromise.then(function (stripe) {
20678
+ if (stripe && isMounted) {
20679
+ // Only update Elements context if the component is still mounted
20680
+ // and stripe is not null. We allow stripe to be null to make
20681
+ // handling SSR easier.
20682
+ safeSetContext(stripe);
20683
+ }
20684
+ });
20685
+ } else if (parsed.tag === 'sync' && !ctx.stripe) {
20686
+ // Or, handle a sync stripe instance going from null -> populated
20687
+ safeSetContext(parsed.stripe);
20688
+ }
20689
+
20690
+ return function () {
20691
+ isMounted = false;
20692
+ };
20693
+ }, [parsed, ctx, options]); // Warn on changes to stripe prop
20796
20694
 
20695
+ var prevStripe = usePrevious(rawStripeProp);
20696
+ React__default['default'].useEffect(function () {
20697
+ if (prevStripe !== null && prevStripe !== rawStripeProp) {
20698
+ console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
20699
+ }
20700
+ }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
20797
20701
 
20702
+ var prevOptions = usePrevious(options);
20703
+ React__default['default'].useEffect(function () {
20704
+ if (!ctx.elements) {
20705
+ return;
20706
+ }
20798
20707
 
20708
+ var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']);
20799
20709
 
20800
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20710
+ if (updates) {
20711
+ ctx.elements.update(updates);
20712
+ }
20713
+ }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
20801
20714
 
20802
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
20715
+ React__default['default'].useEffect(function () {
20716
+ registerWithStripeJs(ctx.stripe);
20717
+ }, [ctx.stripe]);
20718
+ return /*#__PURE__*/React__default['default'].createElement(ElementsContext.Provider, {
20719
+ value: ctx
20720
+ }, /*#__PURE__*/React__default['default'].createElement(CartElementContext.Provider, {
20721
+ value: {
20722
+ cart: cart,
20723
+ setCart: setCart,
20724
+ cartState: cartState,
20725
+ setCartState: setCartState
20726
+ }
20727
+ }, children));
20728
+ };
20729
+ Elements.propTypes = {
20730
+ stripe: PropTypes__default['default'].any,
20731
+ options: PropTypes__default['default'].object
20732
+ };
20733
+ var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
20734
+ var ctx = React__default['default'].useContext(ElementsContext);
20735
+ return parseElementsContext(ctx, useCaseMessage);
20736
+ };
20737
+ var DUMMY_CART_ELEMENT_CONTEXT = {
20738
+ cart: null,
20739
+ cartState: null,
20740
+ setCart: function setCart() {},
20741
+ setCartState: function setCartState() {}
20742
+ };
20743
+ var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) {
20744
+ var isInCustomCheckout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
20745
+ var ctx = React__default['default'].useContext(CartElementContext);
20803
20746
 
20804
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20747
+ if (isInCustomCheckout) {
20748
+ return DUMMY_CART_ELEMENT_CONTEXT;
20749
+ }
20805
20750
 
20806
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
20751
+ return parseCartElementContext(ctx, useCaseMessage);
20752
+ };
20753
+ /**
20754
+ * @docs https://stripe.com/docs/stripe-js/react#useelements-hook
20755
+ */
20807
20756
 
20808
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20757
+ var useElements = function useElements() {
20758
+ var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
20759
+ elements = _useElementsContextWi.elements;
20809
20760
 
20810
- // react-redux does a bunch of stuff with pure components / checking if it needs to re-render.
20811
- // not sure if we need to do the same.
20812
- var inject = function inject(WrappedComponent) {
20813
- var _class, _temp;
20761
+ return elements;
20762
+ };
20763
+ /**
20764
+ * @docs https://stripe.com/docs/stripe-js/react#usestripe-hook
20765
+ */
20814
20766
 
20815
- var componentOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
20816
- var _componentOptions$wit = componentOptions.withRef,
20817
- withRef = _componentOptions$wit === undefined ? false : _componentOptions$wit;
20767
+ var useStripe = function useStripe() {
20768
+ var _useElementsOrCustomC = useElementsOrCustomCheckoutSdkContextWithUseCase('calls useStripe()'),
20769
+ stripe = _useElementsOrCustomC.stripe;
20818
20770
 
20771
+ return stripe;
20772
+ };
20773
+ ({
20774
+ children: PropTypes__default['default'].func.isRequired
20775
+ });
20819
20776
 
20820
- return _temp = _class = function (_React$Component) {
20821
- _inherits(_class, _React$Component);
20777
+ var useAttachEvent = function useAttachEvent(element, event, cb) {
20778
+ var cbDefined = !!cb;
20779
+ var cbRef = React__default['default'].useRef(cb); // In many integrations the callback prop changes on each render.
20780
+ // Using a ref saves us from calling element.on/.off every render.
20822
20781
 
20823
- function _class(props, context) {
20824
- _classCallCheck(this, _class);
20782
+ React__default['default'].useEffect(function () {
20783
+ cbRef.current = cb;
20784
+ }, [cb]);
20785
+ React__default['default'].useEffect(function () {
20786
+ if (!cbDefined || !element) {
20787
+ return function () {};
20788
+ }
20825
20789
 
20826
- if (!context || !context.getRegisteredElements) {
20827
- throw new Error('It looks like you are trying to inject Stripe context outside of an Elements context.\nPlease be sure the component that calls createSource or createToken is within an <Elements> component.');
20790
+ var decoratedCb = function decoratedCb() {
20791
+ if (cbRef.current) {
20792
+ cbRef.current.apply(cbRef, arguments);
20828
20793
  }
20794
+ };
20829
20795
 
20830
- var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
20831
-
20832
- _this.parseElementOrData = function (elementOrOptions) {
20833
- return elementOrOptions && (typeof elementOrOptions === 'undefined' ? 'undefined' : _typeof(elementOrOptions)) === 'object' && elementOrOptions._frame && _typeof(elementOrOptions._frame) === 'object' && elementOrOptions._frame.id && typeof elementOrOptions._frame.id === 'string' && typeof elementOrOptions._componentName === 'string' ? { type: 'element', element: elementOrOptions } : { type: 'data', data: elementOrOptions };
20834
- };
20796
+ element.on(event, decoratedCb);
20797
+ return function () {
20798
+ element.off(event, decoratedCb);
20799
+ };
20800
+ }, [cbDefined, event, element, cbRef]);
20801
+ };
20835
20802
 
20836
- _this.findElement = function (filterBy, specifiedType) {
20837
- var allElements = _this.context.getRegisteredElements();
20838
- var filteredElements = allElements.filter(function (e) {
20839
- return e[filterBy];
20840
- });
20841
- var matchingElements = specifiedType === 'auto' ? filteredElements : filteredElements.filter(function (e) {
20842
- return e[filterBy] === specifiedType;
20843
- });
20803
+ var capitalized = function capitalized(str) {
20804
+ return str.charAt(0).toUpperCase() + str.slice(1);
20805
+ };
20844
20806
 
20845
- if (matchingElements.length === 1) {
20846
- return matchingElements[0].element;
20847
- } else if (matchingElements.length > 1) {
20848
- throw new Error('You did not specify the type of Source, Token, or PaymentMethod to create.\n We could not infer which Element you want to use for this operation.');
20849
- } else {
20850
- return null;
20851
- }
20807
+ var createElementComponent = function createElementComponent(type, isServer) {
20808
+ var displayName = "".concat(capitalized(type), "Element");
20809
+
20810
+ var ClientElement = function ClientElement(_ref) {
20811
+ var id = _ref.id,
20812
+ className = _ref.className,
20813
+ _ref$options = _ref.options,
20814
+ options = _ref$options === void 0 ? {} : _ref$options,
20815
+ onBlur = _ref.onBlur,
20816
+ onFocus = _ref.onFocus,
20817
+ onReady = _ref.onReady,
20818
+ onChange = _ref.onChange,
20819
+ onEscape = _ref.onEscape,
20820
+ onClick = _ref.onClick,
20821
+ onLoadError = _ref.onLoadError,
20822
+ onLoaderStart = _ref.onLoaderStart,
20823
+ onNetworksChange = _ref.onNetworksChange,
20824
+ onCheckout = _ref.onCheckout,
20825
+ onLineItemClick = _ref.onLineItemClick,
20826
+ onConfirm = _ref.onConfirm,
20827
+ onCancel = _ref.onCancel,
20828
+ onShippingAddressChange = _ref.onShippingAddressChange,
20829
+ onShippingRateChange = _ref.onShippingRateChange;
20830
+ var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
20831
+ var elements = 'elements' in ctx ? ctx.elements : null;
20832
+ var customCheckoutSdk = 'customCheckoutSdk' in ctx ? ctx.customCheckoutSdk : null;
20833
+
20834
+ var _React$useState = React__default['default'].useState(null),
20835
+ _React$useState2 = _slicedToArray(_React$useState, 2),
20836
+ element = _React$useState2[0],
20837
+ setElement = _React$useState2[1];
20838
+
20839
+ var elementRef = React__default['default'].useRef(null);
20840
+ var domNode = React__default['default'].useRef(null);
20841
+
20842
+ var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
20843
+ setCart = _useCartElementContex.setCart,
20844
+ setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on
20845
+ // with that callback. If the merchant ever changes the callback, removes
20846
+ // the old callback with element.off and then call element.on with the new one.
20847
+
20848
+
20849
+ useAttachEvent(element, 'blur', onBlur);
20850
+ useAttachEvent(element, 'focus', onFocus);
20851
+ useAttachEvent(element, 'escape', onEscape);
20852
+ useAttachEvent(element, 'click', onClick);
20853
+ useAttachEvent(element, 'loaderror', onLoadError);
20854
+ useAttachEvent(element, 'loaderstart', onLoaderStart);
20855
+ useAttachEvent(element, 'networkschange', onNetworksChange);
20856
+ useAttachEvent(element, 'lineitemclick', onLineItemClick);
20857
+ useAttachEvent(element, 'confirm', onConfirm);
20858
+ useAttachEvent(element, 'cancel', onCancel);
20859
+ useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange);
20860
+ useAttachEvent(element, 'shippingratechange', onShippingRateChange);
20861
+ var readyCallback;
20862
+
20863
+ if (type === 'cart') {
20864
+ readyCallback = function readyCallback(event) {
20865
+ setCartState(event);
20866
+ onReady && onReady(event);
20852
20867
  };
20868
+ } else if (onReady) {
20869
+ if (type === 'expressCheckout') {
20870
+ // Passes through the event, which includes visible PM types
20871
+ readyCallback = onReady;
20872
+ } else {
20873
+ // For other Elements, pass through the Element itself.
20874
+ readyCallback = function readyCallback() {
20875
+ onReady(element);
20876
+ };
20877
+ }
20878
+ }
20853
20879
 
20854
- _this.requireElement = function (filterBy, specifiedType) {
20855
- var element = _this.findElement(filterBy, specifiedType);
20856
- if (element) {
20857
- return element;
20858
- } else {
20859
- throw new Error('You did not specify the type of Source, Token, or PaymentMethod to create.\n We could not infer which Element you want to use for this operation.');
20880
+ useAttachEvent(element, 'ready', readyCallback);
20881
+ var changeCallback = type === 'cart' ? function (event) {
20882
+ setCartState(event);
20883
+ onChange && onChange(event);
20884
+ } : onChange;
20885
+ useAttachEvent(element, 'change', changeCallback);
20886
+ var checkoutCallback = type === 'cart' ? function (event) {
20887
+ setCartState(event);
20888
+ onCheckout && onCheckout(event);
20889
+ } : onCheckout;
20890
+ useAttachEvent(element, 'checkout', checkoutCallback);
20891
+ React__default['default'].useLayoutEffect(function () {
20892
+ if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {
20893
+ var newElement = null;
20894
+
20895
+ if (customCheckoutSdk) {
20896
+ newElement = customCheckoutSdk.createElement(type, options);
20897
+ } else if (elements) {
20898
+ newElement = elements.create(type, options);
20860
20899
  }
20861
- };
20862
20900
 
20863
- _this.wrappedCreateToken = function (stripe) {
20864
- return function () {
20865
- var tokenTypeOrOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
20866
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
20867
-
20868
- if (tokenTypeOrOptions && (typeof tokenTypeOrOptions === 'undefined' ? 'undefined' : _typeof(tokenTypeOrOptions)) === 'object') {
20869
- // First argument is options; infer the Element and tokenize
20870
- var opts = tokenTypeOrOptions;
20871
-
20872
- var tokenType = opts.type,
20873
- rest = _objectWithoutProperties(opts, ['type']);
20874
-
20875
- var specifiedType = typeof tokenType === 'string' ? tokenType : 'auto';
20876
- // Since only options were passed in, a corresponding Element must exist
20877
- // for the tokenization to succeed -- thus we call requireElement.
20878
- var element = _this.requireElement('impliedTokenType', specifiedType);
20879
- return stripe.createToken(element, rest);
20880
- } else if (typeof tokenTypeOrOptions === 'string') {
20881
- // First argument is token type; tokenize with token type and options
20882
- var _tokenType = tokenTypeOrOptions;
20883
- return stripe.createToken(_tokenType, options);
20884
- } else {
20885
- // If a bad value was passed in for options, throw an error.
20886
- throw new Error('Invalid options passed to createToken. Expected an object, got ' + (typeof tokenTypeOrOptions === 'undefined' ? 'undefined' : _typeof(tokenTypeOrOptions)) + '.');
20887
- }
20888
- };
20889
- };
20901
+ if (type === 'cart' && setCart) {
20902
+ // we know that elements.create return value must be of type StripeCartElement if type is 'cart',
20903
+ // we need to cast because typescript is not able to infer which overloaded method is used based off param type
20904
+ setCart(newElement);
20905
+ } // Store element in a ref to ensure it's _immediately_ available in cleanup hooks in StrictMode
20890
20906
 
20891
- _this.wrappedCreateSource = function (stripe) {
20892
- return function () {
20893
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
20894
20907
 
20895
- if (options && (typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
20896
- if (typeof options.type !== 'string') {
20897
- throw new Error('Invalid Source type passed to createSource. Expected string, got ' + _typeof(options.type) + '.');
20898
- }
20908
+ elementRef.current = newElement; // Store element in state to facilitate event listener attachment
20899
20909
 
20900
- var element = _this.findElement('impliedSourceType', options.type);
20901
- if (element) {
20902
- // If an Element exists for the source type, use that to create the
20903
- // corresponding source.
20904
- //
20905
- // NOTE: this prevents users from independently creating sources of
20906
- // type `foo` if an Element that can create `foo` sources exists in
20907
- // the current <Elements /> context.
20908
- return stripe.createSource(element, options);
20909
- } else {
20910
- // If no Element exists for the source type, directly create a source.
20911
- return stripe.createSource(options);
20912
- }
20913
- } else {
20914
- // If a bad value was passed in for options, throw an error.
20915
- throw new Error('Invalid options passed to createSource. Expected an object, got ' + (typeof options === 'undefined' ? 'undefined' : _typeof(options)) + '.');
20916
- }
20917
- };
20918
- };
20910
+ setElement(newElement);
20919
20911
 
20920
- _this.wrappedCreatePaymentMethod = function (stripe) {
20921
- return function (paymentMethodType, elementOrData, maybeData) {
20922
- if (paymentMethodType && (typeof paymentMethodType === 'undefined' ? 'undefined' : _typeof(paymentMethodType)) === 'object') {
20923
- return stripe.createPaymentMethod(paymentMethodType);
20924
- }
20912
+ if (newElement) {
20913
+ newElement.mount(domNode.current);
20914
+ }
20915
+ }
20916
+ }, [elements, customCheckoutSdk, options, setCart]);
20917
+ var prevOptions = usePrevious(options);
20918
+ React__default['default'].useEffect(function () {
20919
+ if (!elementRef.current) {
20920
+ return;
20921
+ }
20925
20922
 
20926
- if (!paymentMethodType || typeof paymentMethodType !== 'string') {
20927
- throw new Error('Invalid PaymentMethod type passed to createPaymentMethod. Expected a string, got ' + (typeof paymentMethodType === 'undefined' ? 'undefined' : _typeof(paymentMethodType)) + '.');
20923
+ var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']);
20924
+
20925
+ if (updates) {
20926
+ elementRef.current.update(updates);
20927
+ }
20928
+ }, [options, prevOptions]);
20929
+ React__default['default'].useLayoutEffect(function () {
20930
+ return function () {
20931
+ if (elementRef.current && typeof elementRef.current.destroy === 'function') {
20932
+ try {
20933
+ elementRef.current.destroy();
20934
+ elementRef.current = null;
20935
+ } catch (error) {// Do nothing
20928
20936
  }
20937
+ }
20938
+ };
20939
+ }, []);
20940
+ return /*#__PURE__*/React__default['default'].createElement("div", {
20941
+ id: id,
20942
+ className: className,
20943
+ ref: domNode
20944
+ });
20945
+ }; // Only render the Element wrapper in a server environment.
20929
20946
 
20930
- var elementOrDataResult = _this.parseElementOrData(elementOrData);
20931
20947
 
20932
- // Second argument is Element; use passed in Element
20933
- if (elementOrDataResult.type === 'element') {
20934
- var _element = elementOrDataResult.element;
20948
+ var ServerElement = function ServerElement(props) {
20949
+ // Validate that we are in the right context by calling useElementsContextWithUseCase.
20950
+ var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
20951
+ useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx);
20952
+ var id = props.id,
20953
+ className = props.className;
20954
+ return /*#__PURE__*/React__default['default'].createElement("div", {
20955
+ id: id,
20956
+ className: className
20957
+ });
20958
+ };
20959
+
20960
+ var Element = isServer ? ServerElement : ClientElement;
20961
+ Element.propTypes = {
20962
+ id: PropTypes__default['default'].string,
20963
+ className: PropTypes__default['default'].string,
20964
+ onChange: PropTypes__default['default'].func,
20965
+ onBlur: PropTypes__default['default'].func,
20966
+ onFocus: PropTypes__default['default'].func,
20967
+ onReady: PropTypes__default['default'].func,
20968
+ onEscape: PropTypes__default['default'].func,
20969
+ onClick: PropTypes__default['default'].func,
20970
+ onLoadError: PropTypes__default['default'].func,
20971
+ onLoaderStart: PropTypes__default['default'].func,
20972
+ onNetworksChange: PropTypes__default['default'].func,
20973
+ onCheckout: PropTypes__default['default'].func,
20974
+ onLineItemClick: PropTypes__default['default'].func,
20975
+ onConfirm: PropTypes__default['default'].func,
20976
+ onCancel: PropTypes__default['default'].func,
20977
+ onShippingAddressChange: PropTypes__default['default'].func,
20978
+ onShippingRateChange: PropTypes__default['default'].func,
20979
+ options: PropTypes__default['default'].object
20980
+ };
20981
+ Element.displayName = displayName;
20982
+ Element.__elementType = type;
20983
+ return Element;
20984
+ };
20985
+
20986
+ var isServer = typeof window === 'undefined';
20987
+
20988
+ var EmbeddedCheckoutContext = /*#__PURE__*/React__default['default'].createContext(null);
20989
+ EmbeddedCheckoutContext.displayName = 'EmbeddedCheckoutProviderContext';
20935
20990
 
20936
- if (maybeData) {
20937
- return stripe.createPaymentMethod(paymentMethodType, _element, maybeData);
20938
- } else {
20939
- return stripe.createPaymentMethod(paymentMethodType, _element);
20940
- }
20941
- }
20991
+ /**
20992
+ * Requires beta access:
20993
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
20994
+ *
20995
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
20996
+ */
20942
20997
 
20943
- // Second argument is data or undefined; infer the Element
20944
- var data = elementOrDataResult.data;
20998
+ createElementComponent('auBankAccount', isServer);
20999
+ /**
21000
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21001
+ */
20945
21002
 
20946
- var element = _this.findElement('impliedPaymentMethodType', paymentMethodType);
21003
+ createElementComponent('card', isServer);
21004
+ /**
21005
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21006
+ */
20947
21007
 
20948
- if (element) {
20949
- return data ? stripe.createPaymentMethod(paymentMethodType, element, data) : stripe.createPaymentMethod(paymentMethodType, element);
20950
- }
21008
+ createElementComponent('cardNumber', isServer);
21009
+ /**
21010
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21011
+ */
20951
21012
 
20952
- if (data && (typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
20953
- return stripe.createPaymentMethod(paymentMethodType, data);
20954
- } else if (!data) {
20955
- throw new Error('Could not find an Element that can be used to create a PaymentMethod of type: ' + paymentMethodType + '.');
20956
- } else {
20957
- // If a bad value was passed in for data, throw an error.
20958
- throw new Error('Invalid data passed to createPaymentMethod. Expected an object, got ' + (typeof data === 'undefined' ? 'undefined' : _typeof(data)) + '.');
20959
- }
20960
- };
20961
- };
21013
+ createElementComponent('cardExpiry', isServer);
21014
+ /**
21015
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21016
+ */
20962
21017
 
20963
- _this.wrappedHandleCardX = function (stripe, method) {
20964
- return function (clientSecret, elementOrData, maybeData) {
20965
- if (!clientSecret || typeof clientSecret !== 'string') {
20966
- // If a bad value was passed in for clientSecret, throw an error.
20967
- throw new Error('Invalid PaymentIntent client secret passed to handleCardPayment. Expected string, got ' + (typeof clientSecret === 'undefined' ? 'undefined' : _typeof(clientSecret)) + '.');
20968
- }
21018
+ createElementComponent('cardCvc', isServer);
21019
+ /**
21020
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21021
+ */
20969
21022
 
20970
- var elementOrDataResult = _this.parseElementOrData(elementOrData);
21023
+ createElementComponent('fpxBank', isServer);
21024
+ /**
21025
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21026
+ */
20971
21027
 
20972
- // Second argument is Element; handle with element
20973
- if (elementOrDataResult.type === 'element') {
20974
- var _element2 = elementOrDataResult.element;
21028
+ createElementComponent('iban', isServer);
21029
+ /**
21030
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21031
+ */
20975
21032
 
20976
- if (maybeData) {
20977
- return stripe[method](clientSecret, _element2, maybeData);
20978
- } else {
20979
- return stripe[method](clientSecret, _element2);
20980
- }
20981
- }
20982
-
20983
- // Second argument is data or undefined; see if we can find a mounted Element
20984
- // that can create card PaymentMethods
20985
- var data = elementOrDataResult.data;
20986
-
20987
- var element = _this.findElement('impliedPaymentMethodType', 'card');
20988
-
20989
- if (element) {
20990
- // If an Element exists that can create card PaymentMethods use it. Otherwise
20991
- // assume that we must be calling with data only.
20992
- //
20993
- // NOTE: this prevents users from using handleCard* with an existing
20994
- // Source or PaymentMethod if an Element that can create card PaymentMethods
20995
- // exists in the current <Elements /> context.
20996
- if (data) {
20997
- return stripe[method](clientSecret, element, data);
20998
- } else {
20999
- return stripe[method](clientSecret, element);
21000
- }
21001
- } else if (data) {
21002
- // if no element exists call handleCard* directly (with data)
21003
- return stripe[method](clientSecret, data);
21004
- } else {
21005
- // if no element exists call handleCard* directly (with only the clientSecret)
21006
- return stripe[method](clientSecret);
21007
- }
21008
- };
21009
- };
21010
-
21011
- if (_this.context.tag === 'sync') {
21012
- _this.state = {
21013
- stripe: _this.stripeProps(_this.context.stripe)
21014
- };
21015
- } else {
21016
- _this.state = {
21017
- stripe: null
21018
- };
21019
- }
21020
- return _this;
21021
- }
21022
-
21023
- _class.prototype.componentDidMount = function componentDidMount() {
21024
- var _this2 = this;
21033
+ createElementComponent('idealBank', isServer);
21034
+ /**
21035
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21036
+ */
21025
21037
 
21026
- if (this.context.tag === 'async') {
21027
- this.context.addStripeLoadListener(function (stripe) {
21028
- _this2.setState({
21029
- stripe: _this2.stripeProps(stripe)
21030
- });
21031
- });
21032
- }
21033
- };
21038
+ createElementComponent('p24Bank', isServer);
21039
+ /**
21040
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21041
+ */
21034
21042
 
21035
- _class.prototype.getWrappedInstance = function getWrappedInstance() {
21036
- if (!withRef) {
21037
- throw new Error('To access the wrapped instance, the `{withRef: true}` option must be set when calling `injectStripe()`');
21038
- }
21039
- return this.wrappedInstance;
21040
- };
21043
+ createElementComponent('epsBank', isServer);
21044
+ var PaymentElement = createElementComponent('payment', isServer);
21045
+ /**
21046
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21047
+ */
21041
21048
 
21042
- _class.prototype.stripeProps = function stripeProps(stripe) {
21043
- return _extends({}, stripe, {
21044
- // These are the only functions that take elements.
21045
- createToken: this.wrappedCreateToken(stripe),
21046
- createSource: this.wrappedCreateSource(stripe),
21047
- createPaymentMethod: this.wrappedCreatePaymentMethod(stripe),
21048
- handleCardPayment: this.wrappedHandleCardX(stripe, 'handleCardPayment'),
21049
- handleCardSetup: this.wrappedHandleCardX(stripe, 'handleCardSetup')
21050
- });
21051
- };
21049
+ createElementComponent('expressCheckout', isServer);
21050
+ /**
21051
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21052
+ */
21052
21053
 
21053
- // Finds an Element by the specified type, if one exists.
21054
- // Throws if multiple Elements match.
21054
+ var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
21055
+ /**
21056
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21057
+ */
21055
21058
 
21059
+ createElementComponent('linkAuthentication', isServer);
21060
+ /**
21061
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21062
+ */
21056
21063
 
21057
- // Require that exactly one Element is found for the specified type.
21058
- // Throws if no Element is found.
21064
+ createElementComponent('address', isServer);
21065
+ /**
21066
+ * @deprecated
21067
+ * Use `AddressElement` instead.
21068
+ *
21069
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21070
+ */
21059
21071
 
21072
+ createElementComponent('shippingAddress', isServer);
21073
+ /**
21074
+ * Requires beta access:
21075
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
21076
+ *
21077
+ * @docs https://stripe.com/docs/elements/cart-element
21078
+ */
21060
21079
 
21061
- // Wraps createToken in order to infer the Element that is being tokenized.
21080
+ createElementComponent('cart', isServer);
21081
+ /**
21082
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21083
+ */
21062
21084
 
21085
+ createElementComponent('paymentMethodMessaging', isServer);
21086
+ /**
21087
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21088
+ */
21063
21089
 
21064
- // Wraps createSource in order to infer the Element that is being used for
21065
- // source creation.
21090
+ createElementComponent('affirmMessage', isServer);
21091
+ /**
21092
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
21093
+ */
21066
21094
 
21095
+ createElementComponent('afterpayClearpayMessage', isServer);
21067
21096
 
21068
- // Wraps createPaymentMethod in order to infer the Element that is being
21069
- // used for PaymentMethod creation.
21097
+ var V3_URL = 'https://js.stripe.com/v3';
21098
+ var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
21099
+ var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
21100
+ var findScript = function findScript() {
21101
+ var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
21070
21102
 
21103
+ for (var i = 0; i < scripts.length; i++) {
21104
+ var script = scripts[i];
21071
21105
 
21072
- _class.prototype.render = function render() {
21073
- var _this3 = this;
21106
+ if (!V3_URL_REGEX.test(script.src)) {
21107
+ continue;
21108
+ }
21074
21109
 
21075
- return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
21076
- stripe: this.state.stripe,
21077
- elements: this.context.elements,
21078
- ref: withRef ? function (c) {
21079
- _this3.wrappedInstance = c;
21080
- } : null
21081
- }));
21082
- };
21110
+ return script;
21111
+ }
21083
21112
 
21084
- return _class;
21085
- }(_react2.default.Component), _class.contextTypes = _extends({}, Provider_1.providerContextTypes, Elements_1.injectContextTypes), _class.displayName = 'InjectStripe(' + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ')', _temp;
21113
+ return null;
21086
21114
  };
21087
21115
 
21088
- exports.default = inject;
21089
- });
21090
-
21091
- unwrapExports(inject_1);
21092
-
21093
- var isEqual_1 = createCommonjsModule(function (module, exports) {
21094
-
21095
- Object.defineProperty(exports, "__esModule", {
21096
- value: true
21097
- });
21098
-
21099
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
21100
-
21101
- var PLAIN_OBJECT_STR = '[object Object]';
21116
+ var injectScript = function injectScript(params) {
21117
+ var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
21118
+ var script = document.createElement('script');
21119
+ script.src = "".concat(V3_URL).concat(queryString);
21120
+ var headOrBody = document.head || document.body;
21102
21121
 
21103
- var isEqual = function isEqual(left, right) {
21104
- if ((typeof left === 'undefined' ? 'undefined' : _typeof(left)) !== 'object' || (typeof right === 'undefined' ? 'undefined' : _typeof(right)) !== 'object') {
21105
- return left === right;
21122
+ if (!headOrBody) {
21123
+ throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
21106
21124
  }
21107
21125
 
21108
- if (left === null || right === null) return left === right;
21109
-
21110
- var leftArray = Array.isArray(left);
21111
- var rightArray = Array.isArray(right);
21112
-
21113
- if (leftArray !== rightArray) return false;
21114
-
21115
- var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
21116
- var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
21117
-
21118
- if (leftPlainObject !== rightPlainObject) return false;
21119
-
21120
- if (!leftPlainObject && !leftArray) return false;
21121
-
21122
- var leftKeys = Object.keys(left);
21123
- var rightKeys = Object.keys(right);
21124
-
21125
- if (leftKeys.length !== rightKeys.length) return false;
21126
+ headOrBody.appendChild(script);
21127
+ return script;
21128
+ };
21126
21129
 
21127
- var keySet = {};
21128
- for (var i = 0; i < leftKeys.length; i += 1) {
21129
- keySet[leftKeys[i]] = true;
21130
- }
21131
- for (var _i = 0; _i < rightKeys.length; _i += 1) {
21132
- keySet[rightKeys[_i]] = true;
21133
- }
21134
- var allKeys = Object.keys(keySet);
21135
- if (allKeys.length !== leftKeys.length) {
21136
- return false;
21130
+ var registerWrapper = function registerWrapper(stripe, startTime) {
21131
+ if (!stripe || !stripe._registerWrapper) {
21132
+ return;
21137
21133
  }
21138
21134
 
21139
- var l = left;
21140
- var r = right;
21141
- var pred = function pred(key) {
21142
- return isEqual(l[key], r[key]);
21143
- };
21144
-
21145
- return allKeys.every(pred);
21135
+ stripe._registerWrapper({
21136
+ name: 'stripe-js',
21137
+ version: "3.0.4",
21138
+ startTime: startTime
21139
+ });
21146
21140
  };
21147
21141
 
21148
- exports.default = isEqual;
21149
- });
21150
-
21151
- unwrapExports(isEqual_1);
21152
-
21153
- var Element_1 = createCommonjsModule(function (module, exports) {
21154
-
21155
- Object.defineProperty(exports, "__esModule", {
21156
- value: true
21157
- });
21158
-
21159
-
21160
-
21161
- var _react2 = _interopRequireDefault(React__default['default']);
21162
-
21163
-
21164
-
21165
- var _propTypes2 = _interopRequireDefault(PropTypes__default['default']);
21166
-
21167
-
21168
-
21169
- var _isEqual2 = _interopRequireDefault(isEqual_1);
21170
-
21171
-
21172
-
21173
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21174
-
21175
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21176
-
21177
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
21178
-
21179
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
21180
-
21181
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
21182
-
21183
- var noop = function noop() {};
21184
-
21185
- var _extractOptions = function _extractOptions(props) {
21186
- props.id;
21187
- props.className;
21188
- props.onChange;
21189
- props.onFocus;
21190
- props.onBlur;
21191
- props.onReady;
21192
- var options = _objectWithoutProperties(props, ['id', 'className', 'onChange', 'onFocus', 'onBlur', 'onReady']);
21142
+ var stripePromise = null;
21143
+ var onErrorListener = null;
21144
+ var onLoadListener = null;
21193
21145
 
21194
- return options;
21146
+ var onError = function onError(reject) {
21147
+ return function () {
21148
+ reject(new Error('Failed to load Stripe.js'));
21149
+ };
21195
21150
  };
21196
21151
 
21197
- var capitalized = function capitalized(str) {
21198
- return str.charAt(0).toUpperCase() + str.slice(1);
21152
+ var onLoad = function onLoad(resolve, reject) {
21153
+ return function () {
21154
+ if (window.Stripe) {
21155
+ resolve(window.Stripe);
21156
+ } else {
21157
+ reject(new Error('Stripe.js not available'));
21158
+ }
21159
+ };
21199
21160
  };
21200
21161
 
21201
- var Element = function Element(type) {
21202
- var _class, _temp;
21203
-
21204
- var hocOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
21205
- return _temp = _class = function (_React$Component) {
21206
- _inherits(_class, _React$Component);
21207
-
21208
- function _class(props, context) {
21209
- _classCallCheck(this, _class);
21210
-
21211
- var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
21212
-
21213
- _this.handleRef = function (ref) {
21214
- _this._ref = ref;
21215
- };
21216
-
21217
- _this._element = null;
21162
+ var loadScript = function loadScript(params) {
21163
+ // Ensure that we only attempt to load Stripe.js at most once
21164
+ if (stripePromise !== null) {
21165
+ return stripePromise;
21166
+ }
21218
21167
 
21219
- var options = _extractOptions(_this.props);
21220
- // We keep track of the extracted options on this._options to avoid re-rendering.
21221
- // (We would unnecessarily re-render if we were tracking them with state.)
21222
- _this._options = options;
21223
- return _this;
21168
+ stripePromise = new Promise(function (resolve, reject) {
21169
+ if (typeof window === 'undefined' || typeof document === 'undefined') {
21170
+ // Resolve to null when imported server side. This makes the module
21171
+ // safe to import in an isomorphic code base.
21172
+ resolve(null);
21173
+ return;
21224
21174
  }
21225
21175
 
21226
- _class.prototype.componentDidMount = function componentDidMount() {
21227
- var _this2 = this;
21228
-
21229
- this.context.addElementsLoadListener(function (elements) {
21230
- if (!_this2._ref) {
21231
- return;
21232
- }
21233
-
21234
- var element = elements.create(type, _this2._options);
21235
- _this2._element = element;
21176
+ if (window.Stripe && params) {
21177
+ console.warn(EXISTING_SCRIPT_MESSAGE);
21178
+ }
21236
21179
 
21237
- _this2._setupEventListeners(element);
21180
+ if (window.Stripe) {
21181
+ resolve(window.Stripe);
21182
+ return;
21183
+ }
21238
21184
 
21239
- element.mount(_this2._ref);
21185
+ try {
21186
+ var script = findScript();
21240
21187
 
21241
- // Register Element for automatic token / source / paymentMethod creation
21242
- _this2.context.registerElement(element, hocOptions.impliedTokenType, hocOptions.impliedSourceType, hocOptions.impliedPaymentMethodType);
21243
- });
21244
- };
21188
+ if (script && params) {
21189
+ console.warn(EXISTING_SCRIPT_MESSAGE);
21190
+ } else if (!script) {
21191
+ script = injectScript(params);
21192
+ } else if (script && onLoadListener !== null && onErrorListener !== null) {
21193
+ var _script$parentNode;
21245
21194
 
21246
- _class.prototype.componentDidUpdate = function componentDidUpdate() {
21247
- var options = _extractOptions(this.props);
21248
- if (Object.keys(options).length !== 0 && !(0, _isEqual2.default)(options, this._options)) {
21249
- this._options = options;
21250
- if (this._element) {
21251
- this._element.update(options);
21252
- }
21253
- }
21254
- };
21195
+ // remove event listeners
21196
+ script.removeEventListener('load', onLoadListener);
21197
+ script.removeEventListener('error', onErrorListener); // if script exists, but we are reloading due to an error,
21198
+ // reload script to trigger 'load' event
21255
21199
 
21256
- _class.prototype.componentWillUnmount = function componentWillUnmount() {
21257
- if (this._element) {
21258
- var element = this._element;
21259
- element.destroy();
21260
- this.context.unregisterElement(element);
21200
+ (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
21201
+ script = injectScript(params);
21261
21202
  }
21262
- };
21263
-
21264
- _class.prototype._setupEventListeners = function _setupEventListeners(element) {
21265
- var _this3 = this;
21266
-
21267
- element.on('ready', function () {
21268
- _this3.props.onReady(_this3._element);
21269
- });
21270
-
21271
- element.on('change', function (change) {
21272
- _this3.props.onChange(change);
21273
- });
21274
-
21275
- element.on('blur', function () {
21276
- var _props;
21277
21203
 
21278
- return (_props = _this3.props).onBlur.apply(_props, arguments);
21279
- });
21280
- element.on('focus', function () {
21281
- var _props2;
21282
-
21283
- return (_props2 = _this3.props).onFocus.apply(_props2, arguments);
21284
- });
21285
- };
21286
-
21287
- _class.prototype.render = function render() {
21288
- return _react2.default.createElement('div', {
21289
- id: this.props.id,
21290
- className: this.props.className,
21291
- ref: this.handleRef
21292
- });
21293
- };
21294
-
21295
- return _class;
21296
- }(_react2.default.Component), _class.propTypes = {
21297
- id: _propTypes2.default.string,
21298
- className: _propTypes2.default.string,
21299
- onChange: _propTypes2.default.func,
21300
- onBlur: _propTypes2.default.func,
21301
- onFocus: _propTypes2.default.func,
21302
- onReady: _propTypes2.default.func
21303
- }, _class.defaultProps = {
21304
- id: undefined,
21305
- className: undefined,
21306
- onChange: noop,
21307
- onBlur: noop,
21308
- onFocus: noop,
21309
- onReady: noop
21310
- }, _class.contextTypes = Elements_1.elementContextTypes, _class.displayName = capitalized(type) + 'Element', _temp;
21311
- };
21312
-
21313
- exports.default = Element;
21314
- });
21315
-
21316
- unwrapExports(Element_1);
21317
-
21318
- var shallowEqual_1 = createCommonjsModule(function (module, exports) {
21319
-
21320
- Object.defineProperty(exports, "__esModule", {
21321
- value: true
21322
- });
21323
- var shallowEqual = function shallowEqual(a, b) {
21324
- var keysA = Object.keys(a);
21325
- var keysB = Object.keys(b);
21204
+ onLoadListener = onLoad(resolve, reject);
21205
+ onErrorListener = onError(reject);
21206
+ script.addEventListener('load', onLoadListener);
21207
+ script.addEventListener('error', onErrorListener);
21208
+ } catch (error) {
21209
+ reject(error);
21210
+ return;
21211
+ }
21212
+ }); // Resets stripePromise on error
21326
21213
 
21327
- return keysA.length === keysB.length && keysA.every(function (key) {
21328
- return b.hasOwnProperty(key) && b[key] === a[key];
21214
+ return stripePromise["catch"](function (error) {
21215
+ stripePromise = null;
21216
+ return Promise.reject(error);
21329
21217
  });
21330
21218
  };
21331
-
21332
- exports.default = shallowEqual;
21333
- });
21334
-
21335
- unwrapExports(shallowEqual_1);
21336
-
21337
- var PaymentRequestButtonElement_1 = createCommonjsModule(function (module, exports) {
21338
-
21339
- Object.defineProperty(exports, "__esModule", {
21340
- value: true
21341
- });
21342
-
21343
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
21344
-
21345
-
21346
-
21347
- var _react2 = _interopRequireDefault(React__default['default']);
21348
-
21349
-
21350
-
21351
- var _propTypes2 = _interopRequireDefault(PropTypes__default['default']);
21352
-
21353
-
21354
-
21355
- var _shallowEqual2 = _interopRequireDefault(shallowEqual_1);
21356
-
21357
-
21358
-
21359
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21360
-
21361
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21362
-
21363
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
21364
-
21365
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
21366
-
21367
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
21368
-
21369
- var noop = function noop() {};
21370
-
21371
- var _extractOptions = function _extractOptions(props) {
21372
- props.id;
21373
- props.className;
21374
- props.onBlur;
21375
- props.onClick;
21376
- props.onFocus;
21377
- props.onReady;
21378
- props.paymentRequest;
21379
- var options = _objectWithoutProperties(props, ['id', 'className', 'onBlur', 'onClick', 'onFocus', 'onReady', 'paymentRequest']);
21380
-
21381
- return options;
21382
- };
21383
-
21384
- var PaymentRequestButtonElement = function (_React$Component) {
21385
- _inherits(PaymentRequestButtonElement, _React$Component);
21386
-
21387
- function PaymentRequestButtonElement(props, context) {
21388
- _classCallCheck(this, PaymentRequestButtonElement);
21389
-
21390
- var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
21391
-
21392
- _this.handleRef = function (ref) {
21393
- _this._ref = ref;
21394
- };
21395
-
21396
- var options = _extractOptions(props);
21397
- // We keep track of the extracted options on this._options to avoid re-rendering.
21398
- // (We would unnecessarily re-render if we were tracking them with state.)
21399
- _this._options = options;
21400
- return _this;
21219
+ var initStripe = function initStripe(maybeStripe, args, startTime) {
21220
+ if (maybeStripe === null) {
21221
+ return null;
21401
21222
  }
21402
21223
 
21403
- PaymentRequestButtonElement.prototype.componentDidMount = function componentDidMount() {
21404
- var _this2 = this;
21405
-
21406
- this.context.addElementsLoadListener(function (elements) {
21407
- _this2._element = elements.create('paymentRequestButton', _extends({
21408
- paymentRequest: _this2.props.paymentRequest
21409
- }, _this2._options));
21410
- _this2._element.on('ready', function () {
21411
- _this2.props.onReady(_this2._element);
21412
- });
21413
- _this2._element.on('focus', function () {
21414
- var _props;
21415
-
21416
- return (_props = _this2.props).onFocus.apply(_props, arguments);
21417
- });
21418
- _this2._element.on('click', function () {
21419
- var _props2;
21420
-
21421
- return (_props2 = _this2.props).onClick.apply(_props2, arguments);
21422
- });
21423
- _this2._element.on('blur', function () {
21424
- var _props3;
21425
-
21426
- return (_props3 = _this2.props).onBlur.apply(_props3, arguments);
21427
- });
21428
- _this2._element.mount(_this2._ref);
21429
- });
21430
- };
21431
-
21432
- PaymentRequestButtonElement.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
21433
- if (this.props.paymentRequest !== prevProps.paymentRequest) {
21434
- console.warn('Unsupported prop change: paymentRequest is not a customizable property.');
21435
- }
21436
- var options = _extractOptions(this.props);
21437
- if (Object.keys(options).length !== 0 && !(0, _shallowEqual2.default)(options, this._options)) {
21438
- this._options = options;
21439
- this._element.update(options);
21440
- }
21441
- };
21442
-
21443
- PaymentRequestButtonElement.prototype.componentWillUnmount = function componentWillUnmount() {
21444
- this._element.destroy();
21445
- };
21446
-
21447
- PaymentRequestButtonElement.prototype.render = function render() {
21448
- return _react2.default.createElement('div', {
21449
- id: this.props.id,
21450
- className: this.props.className,
21451
- ref: this.handleRef
21452
- });
21453
- };
21454
-
21455
- return PaymentRequestButtonElement;
21456
- }(_react2.default.Component);
21457
-
21458
- PaymentRequestButtonElement.propTypes = {
21459
- id: _propTypes2.default.string,
21460
- className: _propTypes2.default.string,
21461
- onBlur: _propTypes2.default.func,
21462
- onClick: _propTypes2.default.func,
21463
- onFocus: _propTypes2.default.func,
21464
- onReady: _propTypes2.default.func,
21465
- paymentRequest: _propTypes2.default.shape({
21466
- canMakePayment: _propTypes2.default.func.isRequired,
21467
- on: _propTypes2.default.func.isRequired,
21468
- show: _propTypes2.default.func.isRequired
21469
- }).isRequired
21470
- };
21471
- PaymentRequestButtonElement.defaultProps = {
21472
- id: undefined,
21473
- className: undefined,
21474
- onBlur: noop,
21475
- onClick: noop,
21476
- onFocus: noop,
21477
- onReady: noop
21478
- };
21479
- PaymentRequestButtonElement.contextTypes = Elements_1.elementContextTypes;
21480
- exports.default = PaymentRequestButtonElement;
21481
- });
21482
-
21483
- unwrapExports(PaymentRequestButtonElement_1);
21484
-
21485
- var es = createCommonjsModule(function (module, exports) {
21486
-
21487
- Object.defineProperty(exports, "__esModule", {
21488
- value: true
21489
- });
21490
- exports.AuBankAccountElement = exports.FpxBankElement = exports.IdealBankElement = exports.IbanElement = exports.PaymentRequestButtonElement = exports.CardCVCElement = exports.CardCvcElement = exports.CardExpiryElement = exports.CardNumberElement = exports.CardElement = exports.Elements = exports.injectStripe = exports.StripeProvider = undefined;
21491
-
21492
-
21493
-
21494
- var _Provider2 = _interopRequireDefault(Provider_1);
21495
-
21496
-
21497
-
21498
- var _inject2 = _interopRequireDefault(inject_1);
21499
-
21500
-
21501
-
21502
- var _Elements2 = _interopRequireDefault(Elements_1);
21503
-
21504
-
21505
-
21506
- var _Element2 = _interopRequireDefault(Element_1);
21507
-
21508
-
21509
-
21510
- var _PaymentRequestButtonElement2 = _interopRequireDefault(PaymentRequestButtonElement_1);
21224
+ var stripe = maybeStripe.apply(undefined, args);
21225
+ registerWrapper(stripe, startTime);
21226
+ return stripe;
21227
+ }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
21511
21228
 
21512
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21229
+ var stripePromise$1;
21230
+ var loadCalled = false;
21513
21231
 
21514
- // Define Elements, and register their implied token / source types for
21515
- // automatic token / source creation.
21232
+ var getStripePromise = function getStripePromise() {
21233
+ if (stripePromise$1) {
21234
+ return stripePromise$1;
21235
+ }
21516
21236
 
21517
- // Card
21518
- var CardElement = (0, _Element2.default)('card', {
21519
- impliedTokenType: 'card',
21520
- impliedSourceType: 'card',
21521
- impliedPaymentMethodType: 'card'
21522
- });
21237
+ stripePromise$1 = loadScript(null)["catch"](function (error) {
21238
+ // clear cache on error
21239
+ stripePromise$1 = null;
21240
+ return Promise.reject(error);
21241
+ });
21242
+ return stripePromise$1;
21243
+ }; // Execute our own script injection after a tick to give users time to do their
21244
+ // own script injection.
21523
21245
 
21524
- // Split Fields
21525
- // Note: we only register the CardNumberElement for split fields so that we have
21526
- // a unique Element to infer when calling `wrappedCreateToken` or `wrappedCreateSource`.
21527
21246
 
21528
- var CardNumberElement = (0, _Element2.default)('cardNumber', {
21529
- impliedTokenType: 'card',
21530
- impliedSourceType: 'card',
21531
- impliedPaymentMethodType: 'card'
21532
- });
21533
- var CardExpiryElement = (0, _Element2.default)('cardExpiry');
21534
- var CardCvcElement = (0, _Element2.default)('cardCvc');
21535
- var CardCVCElement = CardCvcElement; // deprecated in favor of CardCvcElement which better matches Elements API
21536
-
21537
- // IBAN
21538
- var IbanElement = (0, _Element2.default)('iban', {
21539
- impliedTokenType: 'bank_account',
21540
- impliedSourceType: 'sepa_debit'
21247
+ Promise.resolve().then(function () {
21248
+ return getStripePromise();
21249
+ })["catch"](function (error) {
21250
+ if (!loadCalled) {
21251
+ console.warn(error);
21252
+ }
21541
21253
  });
21254
+ var loadStripe = function loadStripe() {
21255
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
21256
+ args[_key] = arguments[_key];
21257
+ }
21542
21258
 
21543
- // iDEAL Bank
21544
- var IdealBankElement = (0, _Element2.default)('idealBank', { impliedSourceType: 'ideal' });
21545
-
21546
- // fpx Bank
21547
- var FpxBankElement = (0, _Element2.default)('fpxBank');
21548
-
21549
- // auBankAccount
21550
- // Requires beta access. Contact Stripe support for more information:
21551
- // https://support.stripe.com
21552
- var AuBankAccountElement = (0, _Element2.default)('auBankAccount');
21553
-
21554
- exports.StripeProvider = _Provider2.default;
21555
- exports.injectStripe = _inject2.default;
21556
- exports.Elements = _Elements2.default;
21557
- exports.CardElement = CardElement;
21558
- exports.CardNumberElement = CardNumberElement;
21559
- exports.CardExpiryElement = CardExpiryElement;
21560
- exports.CardCvcElement = CardCvcElement;
21561
- exports.CardCVCElement = CardCVCElement;
21562
- exports.PaymentRequestButtonElement = _PaymentRequestButtonElement2.default;
21563
- exports.IbanElement = IbanElement;
21564
- exports.IdealBankElement = IdealBankElement;
21565
- exports.FpxBankElement = FpxBankElement;
21566
- exports.AuBankAccountElement = AuBankAccountElement;
21567
- });
21259
+ loadCalled = true;
21260
+ var startTime = Date.now(); // if previous attempts are unsuccessful, will re-load script
21568
21261
 
21569
- unwrapExports(es);
21570
- es.AuBankAccountElement;
21571
- es.FpxBankElement;
21572
- es.IdealBankElement;
21573
- es.IbanElement;
21574
- var es_5 = es.PaymentRequestButtonElement;
21575
- var es_6 = es.CardCVCElement;
21576
- es.CardCvcElement;
21577
- var es_8 = es.CardExpiryElement;
21578
- var es_9 = es.CardNumberElement;
21579
- es.CardElement;
21580
- var es_11 = es.Elements;
21581
- var es_12 = es.injectStripe;
21582
- var es_13 = es.StripeProvider;
21262
+ return getStripePromise().then(function (maybeStripe) {
21263
+ return initStripe(maybeStripe, args, startTime);
21264
+ });
21265
+ };
21583
21266
 
21584
21267
  /**
21585
21268
  * @TODO: All payment related business logic should end up moving
@@ -21609,7 +21292,7 @@ class Payment {
21609
21292
  * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
21610
21293
  */
21611
21294
  constructor(paymentGateway) {
21612
- _defineProperty$3(this, "execute", (options, callback) => {
21295
+ _defineProperty$4(this, "execute", (options, callback) => {
21613
21296
  if (!this.paymentGateway) {
21614
21297
  callback(_classPrivateFieldGet(this, _generateUserError).call(this), null);
21615
21298
  return console.error("No payment gateway provided");
@@ -21715,7 +21398,7 @@ class StripeGateway {
21715
21398
  value: PAYMENT_GATEWAYS_ENUM["stripe"]
21716
21399
  });
21717
21400
 
21718
- _defineProperty$3(this, "execute", (options, callback) => {
21401
+ _defineProperty$4(this, "execute", (options, callback) => {
21719
21402
  const types = PAYMENT_TYPES;
21720
21403
 
21721
21404
  switch (options.type) {
@@ -21921,7 +21604,7 @@ class PaypalGateway {
21921
21604
  value: PAYMENT_GATEWAYS_ENUM["paypal"]
21922
21605
  });
21923
21606
 
21924
- _defineProperty$3(this, "execute", (options, callback) => {
21607
+ _defineProperty$4(this, "execute", (options, callback) => {
21925
21608
  const types = PAYMENT_TYPES;
21926
21609
 
21927
21610
  switch (options.type) {
@@ -22038,7 +21721,7 @@ class VantivGateway {
22038
21721
  value: PAYMENT_GATEWAYS_ENUM["vantiv"]
22039
21722
  });
22040
21723
 
22041
- _defineProperty$3(this, "execute", (options, callback) => {
21724
+ _defineProperty$4(this, "execute", (options, callback) => {
22042
21725
  const types = PAYMENT_TYPES;
22043
21726
 
22044
21727
  switch (options.type) {
@@ -22273,7 +21956,7 @@ class TapGateway {
22273
21956
  value: PAYMENT_GATEWAYS_ENUM["tap"]
22274
21957
  });
22275
21958
 
22276
- _defineProperty$3(this, "execute", (options, callback) => {
21959
+ _defineProperty$4(this, "execute", (options, callback) => {
22277
21960
  const types = PAYMENT_TYPES;
22278
21961
 
22279
21962
  switch (options.type) {
@@ -22511,7 +22194,7 @@ class CybersourceGateway {
22511
22194
  value: PAYMENT_GATEWAYS_ENUM["cybersource"]
22512
22195
  });
22513
22196
 
22514
- _defineProperty$3(this, "execute", (options, callback) => {
22197
+ _defineProperty$4(this, "execute", (options, callback) => {
22515
22198
  const types = PAYMENT_TYPES;
22516
22199
 
22517
22200
  switch (options.type) {
@@ -22785,7 +22468,6 @@ const PaymentMethodContainerWithoutStripe = ({
22785
22468
  style,
22786
22469
  className = "",
22787
22470
  children,
22788
- stripe,
22789
22471
  type,
22790
22472
  onSuccess = () => {},
22791
22473
  onGiftRenewalSuccess = () => {},
@@ -22794,6 +22476,9 @@ const PaymentMethodContainerWithoutStripe = ({
22794
22476
  }) => {
22795
22477
  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
22796
22478
 
22479
+ // Get a reference to Stripe or Elements using hooks.
22480
+ const stripe = useStripe();
22481
+ const elements = useElements();
22797
22482
  const [vantivPaymentRequest, setVantivPaymentRequest] = React.useState(null);
22798
22483
  const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
22799
22484
  const {
@@ -22838,7 +22523,8 @@ const PaymentMethodContainerWithoutStripe = ({
22838
22523
  type: INIT_CONTAINER
22839
22524
  });
22840
22525
  updateTotalAmountWithTax();
22841
- }, []);
22526
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
22527
+
22842
22528
  /* ====== Start Cybersource integration ======== */
22843
22529
 
22844
22530
  const cybersourceErrorHandle = err => {
@@ -23103,6 +22789,7 @@ const PaymentMethodContainerWithoutStripe = ({
23103
22789
  const {
23104
22790
  key: jwk
23105
22791
  } = res; // SETUP MICROFORM
22792
+ // eslint-disable-next-line no-undef
23106
22793
 
23107
22794
  FLEX.microform({
23108
22795
  keyId: jwk.kid,
@@ -23772,13 +23459,15 @@ const PaymentMethodContainerWithoutStripe = ({
23772
23459
  }
23773
23460
  });
23774
23461
  }
23775
- }, [selectedPaymentMethodId]); // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
23462
+ }, [selectedPaymentMethodId]); // eslint-disable-line react-hooks/exhaustive-deps
23463
+ // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
23776
23464
 
23777
23465
  React.useEffect(() => {
23778
23466
  if (vantivPaymentRequest) {
23779
23467
  handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
23780
23468
  }
23781
- }, [vantivPaymentRequest]);
23469
+ }, [vantivPaymentRequest]); // eslint-disable-line react-hooks/exhaustive-deps
23470
+
23782
23471
  React.useEffect(() => {
23783
23472
  whenUserReady(() => {
23784
23473
  if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
@@ -23810,7 +23499,9 @@ const PaymentMethodContainerWithoutStripe = ({
23810
23499
  appendCybersourceFingerprintScripts();
23811
23500
  }
23812
23501
  });
23813
- }, [selectedPaymentMethodId]);
23502
+ }, [selectedPaymentMethodId]); // eslint-disable-line react-hooks/exhaustive-deps
23503
+
23504
+ /* ====== Start Stripe integration ======== */
23814
23505
 
23815
23506
  const initPaymentRequest = (state, dispatch) => {
23816
23507
  if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
@@ -23878,257 +23569,16 @@ const PaymentMethodContainerWithoutStripe = ({
23878
23569
  console.log("Google Pay/Apple pay isn't available/supported in this country");
23879
23570
  }
23880
23571
  };
23881
- /**
23882
- * Updates the total amount after adding taxes only if site taxes are enabled
23883
- */
23884
-
23885
-
23886
- const updateTotalAmountWithTax = () => {
23887
- var _window$Pelcro$site$r8;
23888
-
23889
- if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
23890
- const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
23891
-
23892
- if (taxesEnabled && type === "createPayment") {
23893
- dispatch({
23894
- type: DISABLE_SUBMIT,
23895
- payload: true
23896
- });
23897
- resolveTaxCalculation().then(res => {
23898
- if (res) {
23899
- dispatch({
23900
- type: SET_TAX_AMOUNT,
23901
- payload: res.taxAmount
23902
- });
23903
- dispatch({
23904
- type: SET_UPDATED_PRICE,
23905
- payload: res.totalAmountWithTax
23906
- });
23907
- dispatch({
23908
- type: UPDATE_PAYMENT_REQUEST
23909
- });
23910
- }
23911
- }).catch(error => {
23912
- handlePaymentError(error);
23913
- }).finally(() => {
23914
- dispatch({
23915
- type: DISABLE_SUBMIT,
23916
- payload: false
23917
- });
23918
- });
23919
- }
23920
- };
23921
-
23922
- const onApplyCouponCode = (state, dispatch) => {
23923
- const {
23924
- couponCode
23925
- } = state;
23926
-
23927
- const handleCouponResponse = (err, res) => {
23928
- var _res$data$coupon;
23929
-
23930
- dispatch({
23931
- type: DISABLE_COUPON_BUTTON,
23932
- payload: false
23933
- });
23934
-
23935
- if (err) {
23936
- onFailure(err); // reset the coupon code in local state
23937
-
23938
- setUpdatedCouponCode("");
23939
- dispatch({
23940
- type: SET_COUPON_ERROR,
23941
- payload: getErrorMessages(err)
23942
- }); // remove current coupon
23943
-
23944
- dispatch({
23945
- type: SET_COUPON,
23946
- payload: null
23947
- });
23948
- dispatch({
23949
- type: SET_PERCENT_OFF,
23950
- payload: ""
23951
- });
23952
- dispatch({
23953
- type: SET_UPDATED_PRICE,
23954
- payload: null
23955
- });
23956
- dispatch({
23957
- type: SET_TAX_AMOUNT,
23958
- payload: null
23959
- });
23960
- const {
23961
- currentPlan
23962
- } = state;
23963
-
23964
- if (currentPlan) {
23965
- var _currentPlan$quantity;
23966
-
23967
- const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
23968
- const price = currentPlan.amount;
23969
- dispatch({
23970
- type: SET_UPDATED_PRICE,
23971
- // set original plan price
23972
- payload: price * quantity
23973
- });
23974
- dispatch({
23975
- type: UPDATE_PAYMENT_REQUEST
23976
- }); // update the new amount with taxes if site has taxes enabled
23977
-
23978
- updateTotalAmountWithTax();
23979
- }
23980
-
23981
- return;
23982
- }
23983
-
23984
- dispatch({
23985
- type: SET_COUPON_ERROR,
23986
- payload: ""
23987
- });
23988
- dispatch({
23989
- type: SHOW_ALERT,
23990
- payload: {
23991
- type: "error",
23992
- content: ""
23993
- }
23994
- });
23995
- dispatch({
23996
- type: SET_COUPON,
23997
- payload: res.data.coupon
23998
- }); // set the coupon code in local state to be able to use with Vantiv
23999
-
24000
- setUpdatedCouponCode(res.data.coupon.code);
24001
- dispatch({
24002
- type: SET_PERCENT_OFF,
24003
- payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
24004
- });
24005
- dispatch({
24006
- type: SET_TAX_AMOUNT,
24007
- payload: res.data.taxes
24008
- });
24009
- dispatch({
24010
- type: SET_UPDATED_PRICE,
24011
- payload: res.data.total
24012
- });
24013
- dispatch({
24014
- type: UPDATE_PAYMENT_REQUEST
24015
- });
24016
- };
24017
-
24018
- if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
24019
- dispatch({
24020
- type: SET_COUPON,
24021
- payload: null
24022
- });
24023
- dispatch({
24024
- type: SET_PERCENT_OFF,
24025
- payload: ""
24026
- });
24027
- dispatch({
24028
- type: SET_UPDATED_PRICE,
24029
- payload: null
24030
- });
24031
- dispatch({
24032
- type: SET_TAX_AMOUNT,
24033
- payload: null
24034
- });
24035
- dispatch({
24036
- type: UPDATE_PAYMENT_REQUEST
24037
- });
24038
- updateTotalAmountWithTax();
24039
- }
24040
-
24041
- if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
24042
- dispatch({
24043
- type: DISABLE_COUPON_BUTTON,
24044
- payload: true
24045
- });
24046
-
24047
- if (type === "createPayment") {
24048
- window.Pelcro.order.create({
24049
- auth_token: window.Pelcro.user.read().auth_token,
24050
- plan_id: plan.id,
24051
- campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
24052
- coupon_code: couponCode,
24053
- address_id: selectedAddressId
24054
- }, handleCouponResponse);
24055
- } else if (type === "orderCreate") {
24056
- const isQuickPurchase = !Array.isArray(order);
24057
- const mappedOrderItems = isQuickPurchase ? [{
24058
- sku_id: order.id,
24059
- quantity: order.quantity
24060
- }] : order.map(item => ({
24061
- sku_id: item.id,
24062
- quantity: item.quantity
24063
- }));
24064
- window.Pelcro.ecommerce.order.createSummary({
24065
- items: mappedOrderItems,
24066
- coupon_code: couponCode
24067
- }, handleCouponResponse);
24068
- }
24069
- }
24070
- };
24071
-
24072
- const debouncedApplyCouponCode = React.useRef(debounce$1(onApplyCouponCode, 1000)).current;
24073
-
24074
- const removeAppliedCoupon = state => {
24075
- state.couponCode = ""; // reset the coupon code in local state
24076
-
24077
- setUpdatedCouponCode("");
24078
- dispatch({
24079
- type: SET_COUPON_ERROR,
24080
- payload: ""
24081
- });
24082
- dispatch({
24083
- type: SHOW_COUPON_FIELD,
24084
- payload: false
24085
- });
24086
- dispatch({
24087
- type: SET_COUPON,
24088
- payload: null
24089
- });
24090
- dispatch({
24091
- type: SET_PERCENT_OFF,
24092
- payload: ""
24093
- });
24094
- dispatch({
24095
- type: SET_UPDATED_PRICE,
24096
- payload: null
24097
- });
24098
- dispatch({
24099
- type: SET_TAX_AMOUNT,
24100
- payload: null
24101
- });
24102
- const {
24103
- currentPlan
24104
- } = state;
24105
-
24106
- if (currentPlan) {
24107
- var _currentPlan$quantity2;
24108
-
24109
- const quantity = (_currentPlan$quantity2 = currentPlan.quantity) !== null && _currentPlan$quantity2 !== void 0 ? _currentPlan$quantity2 : 1;
24110
- const price = currentPlan.amount;
24111
- dispatch({
24112
- type: SET_UPDATED_PRICE,
24113
- // set original plan price
24114
- payload: price * quantity
24115
- });
24116
- dispatch({
24117
- type: UPDATE_PAYMENT_REQUEST
24118
- }); // update the new amount with taxes if site has taxes enabled
24119
-
24120
- updateTotalAmountWithTax();
24121
- }
24122
- };
24123
23572
  /**
24124
23573
  * Attempt to confirm a Stripe card payment via it's PaymentIntent.
24125
23574
  * Only trigger method if PaymentIntent status is `requires_action`.
24126
23575
  *
24127
23576
  * @see https://stripe.com/docs/payments/intents#intent-statuses
24128
23577
  *
24129
- * @param response
24130
- * @param error
24131
- * @returns {*}
23578
+ * @param {Object} response
23579
+ * @param {Object} error
23580
+ * @param {boolean} isSubCreate
23581
+ * @return {*}
24132
23582
  */
24133
23583
 
24134
23584
 
@@ -24433,90 +23883,6 @@ const PaymentMethodContainerWithoutStripe = ({
24433
23883
 
24434
23884
  return false;
24435
23885
  };
24436
- /**
24437
- * Handles subscriptions from PayPal gateway
24438
- * @param {PaymentStateType} state
24439
- * @param {string} paypalNonce
24440
- * @return {void}
24441
- */
24442
-
24443
-
24444
- const handlePaypalSubscription = (state, paypalNonce) => {
24445
- const payment = new Payment(new PaypalGateway());
24446
- const {
24447
- couponCode
24448
- } = state;
24449
- /**
24450
- * @TODO: Add flags for types instead of testing by properties
24451
- */
24452
-
24453
- if (giftRecipient) {
24454
- return payment.execute({
24455
- type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
24456
- token: paypalNonce,
24457
- quantity: plan.quantity,
24458
- plan,
24459
- couponCode,
24460
- product,
24461
- giftRecipient,
24462
- addressId: selectedAddressId
24463
- }, (err, res) => {
24464
- dispatch({
24465
- type: DISABLE_SUBMIT,
24466
- payload: false
24467
- });
24468
- dispatch({
24469
- type: LOADING,
24470
- payload: false
24471
- });
24472
-
24473
- if (err) {
24474
- onFailure(err);
24475
- return dispatch({
24476
- type: SHOW_ALERT,
24477
- payload: {
24478
- type: "error",
24479
- content: getErrorMessages(err)
24480
- }
24481
- });
24482
- }
24483
-
24484
- onSuccess(res);
24485
- });
24486
- }
24487
-
24488
- return payment.execute({
24489
- type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
24490
- token: paypalNonce,
24491
- quantity: plan.quantity,
24492
- plan,
24493
- couponCode,
24494
- product,
24495
- addressId: selectedAddressId
24496
- }, (err, res) => {
24497
- dispatch({
24498
- type: DISABLE_SUBMIT,
24499
- payload: false
24500
- });
24501
- dispatch({
24502
- type: LOADING,
24503
- payload: false
24504
- });
24505
-
24506
- if (err) {
24507
- onFailure(err);
24508
- return dispatch({
24509
- type: SHOW_ALERT,
24510
- payload: {
24511
- type: "error",
24512
- content: getErrorMessages(err)
24513
- }
24514
- });
24515
- }
24516
-
24517
- onSuccess(res);
24518
- });
24519
- };
24520
23886
 
24521
23887
  const purchase = (gatewayService, gatewayToken, state, dispatch) => {
24522
23888
  const isQuickPurchase = !Array.isArray(order);
@@ -24613,67 +23979,73 @@ const PaymentMethodContainerWithoutStripe = ({
24613
23979
  });
24614
23980
  };
24615
23981
 
24616
- const createPaymentSource = (state, dispatch) => {
24617
- return stripe.createSource({
24618
- type: "card"
24619
- }).then(({
24620
- source,
24621
- error
24622
- }) => {
24623
- if (error) {
24624
- return handlePaymentError(error);
24625
- } // We don't support source creation for 3D secure yet
24626
- // if (source?.card?.three_d_secure === "required") {
24627
- // return handlePaymentError({
24628
- // error: {
24629
- // message: t("messages.cardAuthNotSupported")
24630
- // }
24631
- // });
24632
- // }
23982
+ const createPaymentSource = async (state, dispatch) => {
23983
+ // Trigger form validation and wallet collection
23984
+ const {
23985
+ error: submitError
23986
+ } = await elements.submit();
24633
23987
 
23988
+ if (submitError) {
23989
+ handlePaymentError(submitError);
23990
+ return;
23991
+ }
24634
23992
 
24635
- window.Pelcro.paymentMethods.create({
24636
- auth_token: window.Pelcro.user.read().auth_token,
24637
- token: source.id
24638
- }, (err, res) => {
24639
- var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
23993
+ return stripe.createPaymentMethod({
23994
+ elements
23995
+ }).then(result => {
23996
+ if (result.error) {
23997
+ return handlePaymentError(result.error);
23998
+ }
24640
23999
 
24641
- if (err) {
24642
- dispatch({
24643
- type: DISABLE_SUBMIT,
24644
- payload: false
24645
- });
24646
- dispatch({
24647
- type: LOADING,
24648
- payload: false
24649
- });
24650
- onFailure(err);
24651
- return dispatch({
24652
- type: SHOW_ALERT,
24653
- payload: {
24654
- type: "error",
24655
- content: getErrorMessages(err)
24656
- }
24657
- });
24658
- }
24000
+ if (result.paymentMethod) {
24001
+ console.log(result.paymentMethod);
24002
+ window.Pelcro.paymentMethods.create({
24003
+ auth_token: window.Pelcro.user.read().auth_token,
24004
+ token: result.paymentMethod.id
24005
+ }, (err, res) => {
24006
+ var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
24659
24007
 
24660
- if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
24661
- confirmStripeIntentSetup(res, "create");
24662
- } else {
24663
- dispatch({
24664
- type: LOADING,
24665
- payload: false
24666
- });
24667
- dispatch({
24668
- type: SHOW_ALERT,
24669
- payload: {
24670
- type: "success",
24671
- content: t("messages.sourceCreated")
24672
- }
24673
- });
24674
- onSuccess(res);
24675
- }
24676
- });
24008
+ if (err) {
24009
+ dispatch({
24010
+ type: DISABLE_SUBMIT,
24011
+ payload: false
24012
+ });
24013
+ dispatch({
24014
+ type: LOADING,
24015
+ payload: false
24016
+ });
24017
+ onFailure(err);
24018
+ return dispatch({
24019
+ type: SHOW_ALERT,
24020
+ payload: {
24021
+ type: "error",
24022
+ content: getErrorMessages(err)
24023
+ }
24024
+ });
24025
+ }
24026
+
24027
+ if (result.paymentMethod.type == "bacs_debit") {
24028
+ createBillingAddress(result.paymentMethod.billing_details);
24029
+ }
24030
+
24031
+ if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
24032
+ confirmStripeIntentSetup(res, "create");
24033
+ } else {
24034
+ dispatch({
24035
+ type: LOADING,
24036
+ payload: false
24037
+ });
24038
+ dispatch({
24039
+ type: SHOW_ALERT,
24040
+ payload: {
24041
+ type: "success",
24042
+ content: t("messages.sourceCreated")
24043
+ }
24044
+ });
24045
+ onSuccess(res);
24046
+ }
24047
+ });
24048
+ }
24677
24049
  });
24678
24050
  };
24679
24051
 
@@ -24731,78 +24103,83 @@ const PaymentMethodContainerWithoutStripe = ({
24731
24103
  });
24732
24104
  };
24733
24105
 
24734
- const replacePaymentSource = (state, dispatch) => {
24106
+ const replacePaymentSource = async (state, dispatch) => {
24735
24107
  const {
24736
24108
  id: paymentMethodId
24737
- } = paymentMethodToDelete;
24738
- return stripe.createSource({
24739
- type: "card"
24740
- }).then(({
24741
- source,
24742
- error
24743
- }) => {
24744
- if (error) {
24745
- return handlePaymentError(error);
24746
- } // We don't support source creation for 3D secure yet
24747
- // if (source?.card?.three_d_secure === "required") {
24748
- // return handlePaymentError({
24749
- // error: {
24750
- // message: t("messages.cardAuthNotSupported")
24751
- // }
24752
- // });
24753
- // }
24109
+ } = paymentMethodToDelete; // Trigger form validation and wallet collection
24754
24110
 
24111
+ const {
24112
+ error: submitError
24113
+ } = await elements.submit();
24755
24114
 
24756
- window.Pelcro.paymentMethods.create({
24757
- auth_token: window.Pelcro.user.read().auth_token,
24758
- token: source.id
24759
- }, (err, res) => {
24760
- var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
24115
+ if (submitError) {
24116
+ handlePaymentError(submitError);
24117
+ return;
24118
+ }
24761
24119
 
24762
- if (err) {
24763
- onFailure(err);
24764
- return dispatch({
24765
- type: SHOW_ALERT,
24766
- payload: {
24767
- type: "error",
24768
- content: getErrorMessages(err)
24769
- }
24770
- });
24771
- }
24120
+ return stripe.createPaymentMethod({
24121
+ elements
24122
+ }).then(result => {
24123
+ if (result.error) {
24124
+ return handlePaymentError(result.error);
24125
+ }
24772
24126
 
24773
- if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
24774
- confirmStripeIntentSetup(res, "replace", paymentMethodId);
24775
- } else {
24776
- setTimeout(() => {
24777
- window.Pelcro.paymentMethods.deletePaymentMethod({
24778
- auth_token: window.Pelcro.user.read().auth_token,
24779
- payment_method_id: paymentMethodId
24780
- }, (err, res) => {
24781
- dispatch({
24782
- type: DISABLE_SUBMIT,
24783
- payload: false
24784
- });
24785
- dispatch({
24786
- type: LOADING,
24787
- payload: false
24788
- });
24127
+ if (result.paymentMethod) {
24128
+ window.Pelcro.paymentMethods.create({
24129
+ auth_token: window.Pelcro.user.read().auth_token,
24130
+ token: result.paymentMethod.id
24131
+ }, (err, res) => {
24132
+ var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
24789
24133
 
24790
- if (err) {
24791
- onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
24792
- return dispatch({
24793
- type: SHOW_ALERT,
24794
- payload: {
24795
- type: "error",
24796
- content: getErrorMessages(err)
24797
- }
24798
- });
24134
+ if (err) {
24135
+ onFailure(err);
24136
+ return dispatch({
24137
+ type: SHOW_ALERT,
24138
+ payload: {
24139
+ type: "error",
24140
+ content: getErrorMessages(err)
24799
24141
  }
24800
-
24801
- onSuccess(res);
24802
24142
  });
24803
- }, 2000);
24804
- }
24805
- });
24143
+ }
24144
+
24145
+ if (result.paymentMethod.type == "bacs_debit") {
24146
+ createBillingAddress(result.paymentMethod.billing_details);
24147
+ }
24148
+
24149
+ if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
24150
+ confirmStripeIntentSetup(res, "replace", paymentMethodId);
24151
+ } else {
24152
+ setTimeout(() => {
24153
+ window.Pelcro.paymentMethods.deletePaymentMethod({
24154
+ auth_token: window.Pelcro.user.read().auth_token,
24155
+ payment_method_id: paymentMethodId
24156
+ }, (err, res) => {
24157
+ dispatch({
24158
+ type: DISABLE_SUBMIT,
24159
+ payload: false
24160
+ });
24161
+ dispatch({
24162
+ type: LOADING,
24163
+ payload: false
24164
+ });
24165
+
24166
+ if (err) {
24167
+ onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
24168
+ return dispatch({
24169
+ type: SHOW_ALERT,
24170
+ payload: {
24171
+ type: "error",
24172
+ content: getErrorMessages(err)
24173
+ }
24174
+ });
24175
+ }
24176
+
24177
+ onSuccess(res);
24178
+ });
24179
+ }, 2000);
24180
+ }
24181
+ });
24182
+ }
24806
24183
  });
24807
24184
  };
24808
24185
 
@@ -24817,7 +24194,7 @@ const PaymentMethodContainerWithoutStripe = ({
24817
24194
  });
24818
24195
  };
24819
24196
 
24820
- const submitPayment = (state, dispatch) => {
24197
+ const submitPayment = async (state, dispatch) => {
24821
24198
  if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
24822
24199
  const isQuickPurchase = !Array.isArray(order);
24823
24200
  const mappedOrderItems = isQuickPurchase ? [{
@@ -24841,88 +24218,116 @@ const PaymentMethodContainerWithoutStripe = ({
24841
24218
  return onSuccess(res);
24842
24219
  });
24843
24220
  return;
24844
- }
24221
+ } // Trigger form validation and wallet collection
24845
24222
 
24846
- stripe.createSource({
24847
- type: "card"
24848
- }).then(({
24849
- source,
24850
- error
24851
- }) => {
24852
- var _ref4, _ref5, _state$updatedPrice2;
24853
-
24854
- if (error) {
24855
- return handlePaymentError(error);
24856
- }
24857
24223
 
24858
- const getOrderItemsTotal = () => {
24859
- if (!order) {
24860
- return null;
24861
- }
24224
+ const {
24225
+ error: submitError
24226
+ } = await elements.submit();
24862
24227
 
24863
- const isQuickPurchase = !Array.isArray(order);
24228
+ if (submitError) {
24229
+ handlePaymentError(submitError);
24230
+ return;
24231
+ }
24864
24232
 
24865
- if (isQuickPurchase) {
24866
- return order.price * order.quantity;
24867
- }
24233
+ stripe.createPaymentMethod({
24234
+ elements
24235
+ }).then(result => {
24236
+ if (result.error) {
24237
+ return handlePaymentError(result.error);
24238
+ }
24868
24239
 
24869
- if (order.length === 0) {
24870
- return null;
24240
+ if (result.paymentMethod) {
24241
+ if (result.paymentMethod.type == "bacs_debit") {
24242
+ createBillingAddress(result.paymentMethod.billing_details);
24871
24243
  }
24872
24244
 
24873
- return order.reduce((total, item) => {
24874
- return total + item.price * item.quantity;
24875
- }, 0);
24876
- };
24877
-
24878
- (_ref4 = (_ref5 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal();
24879
- return handlePayment(source);
24245
+ return handlePayment(result.paymentMethod);
24246
+ }
24880
24247
  }).catch(error => {
24881
24248
  return handlePaymentError(error);
24882
24249
  });
24883
24250
  };
24884
- /**
24885
- * Resolves with the total & tax amount incase taxes enabled by site
24886
- * @return {Promise}
24887
- */
24888
24251
 
24252
+ const handlePayment = stripeSource => {
24253
+ if (stripeSource && type === "createPayment") {
24254
+ subscribe(stripeSource, state, dispatch);
24255
+ } else if (stripeSource && type === "orderCreate") {
24256
+ purchase(new StripeGateway(), stripeSource.id, state, dispatch);
24257
+ } else if (stripeSource && type === "invoicePayment") {
24258
+ payInvoice(new StripeGateway(), stripeSource.id);
24259
+ }
24260
+ };
24889
24261
 
24890
- const resolveTaxCalculation = () => {
24891
- var _window$Pelcro$site$r9;
24262
+ const handlePaymentError = error => {
24263
+ var _getErrorMessages;
24892
24264
 
24893
- if (type === "invoicePayment") {
24894
- return new Promise(resolve => resolve());
24895
- }
24265
+ toggleAuthenticationSuccessPendingView(false);
24896
24266
 
24897
- const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
24898
- return new Promise((resolve, reject) => {
24899
- // resolve early if taxes isn't enabled
24900
- if (!taxesEnabled) {
24901
- return resolve(null);
24902
- }
24267
+ if (error.type === "validation_error" && // Subscription creation & renewal
24268
+ type === "createPayment") {
24269
+ var _state$couponObject;
24903
24270
 
24904
- window.Pelcro.order.create({
24905
- auth_token: window.Pelcro.user.read().auth_token,
24906
- plan_id: plan.id,
24907
- campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
24908
- coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
24909
- address_id: selectedAddressId
24910
- }, (error, res) => {
24911
- var _res$data7, _res$data8;
24271
+ const {
24272
+ updatedPrice
24273
+ } = state; // When price is 0, we allow submitting without card info
24912
24274
 
24913
- if (error) {
24914
- return reject(error);
24915
- }
24275
+ if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
24276
+ return subscribe({}, state, dispatch);
24277
+ }
24278
+ }
24916
24279
 
24917
- const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
24918
- const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
24919
- resolve({
24920
- totalAmountWithTax,
24921
- taxAmount
24922
- });
24923
- });
24280
+ onFailure(error);
24281
+ dispatch({
24282
+ type: SHOW_ALERT,
24283
+ payload: {
24284
+ type: "error",
24285
+ content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
24286
+ }
24287
+ });
24288
+ dispatch({
24289
+ type: DISABLE_SUBMIT,
24290
+ payload: false
24291
+ });
24292
+ dispatch({
24293
+ type: LOADING,
24294
+ payload: false
24924
24295
  });
24925
24296
  };
24297
+
24298
+ const createBillingAddress = billingDetails => {
24299
+ const hasBillingAddress = userHasBillingAddress();
24300
+ if (hasBillingAddress) return;
24301
+ const {
24302
+ name,
24303
+ address
24304
+ } = billingDetails;
24305
+ const [firstName, lastName] = name ? name === null || name === void 0 ? void 0 : name.split(" ") : [];
24306
+ window.Pelcro.address.create({
24307
+ auth_token: window.Pelcro.user.read().auth_token,
24308
+ type: "billing",
24309
+ first_name: firstName,
24310
+ last_name: lastName,
24311
+ line1: address === null || address === void 0 ? void 0 : address.line1,
24312
+ line2: address === null || address === void 0 ? void 0 : address.line2,
24313
+ city: address === null || address === void 0 ? void 0 : address.city,
24314
+ state: address === null || address === void 0 ? void 0 : address.state,
24315
+ country: address === null || address === void 0 ? void 0 : address.country,
24316
+ postal_code: address === null || address === void 0 ? void 0 : address.postal_code,
24317
+ is_default: true
24318
+ }, (err, res) => {
24319
+ if (err) {
24320
+ console.error(err);
24321
+ }
24322
+
24323
+ if (res) {
24324
+ console.log(res);
24325
+ }
24326
+ });
24327
+ }; // TODO: Refactor deprecated stripe implementation
24328
+
24329
+ /* Start Stripe deprecated functions */
24330
+
24926
24331
  /**
24927
24332
  * Resolves with a generated stripe 3DSecure source
24928
24333
  * @param {Object} source stripe's source object
@@ -24963,52 +24368,6 @@ const PaymentMethodContainerWithoutStripe = ({
24963
24368
  });
24964
24369
  };
24965
24370
 
24966
- const handlePayment = stripeSource => {
24967
- if (stripeSource && type === "createPayment") {
24968
- subscribe(stripeSource, state, dispatch);
24969
- } else if (stripeSource && type === "orderCreate") {
24970
- purchase(new StripeGateway(), stripeSource.id, state, dispatch);
24971
- } else if (stripeSource && type === "invoicePayment") {
24972
- payInvoice(new StripeGateway(), stripeSource.id);
24973
- }
24974
- };
24975
-
24976
- const handlePaymentError = error => {
24977
- var _getErrorMessages;
24978
-
24979
- toggleAuthenticationSuccessPendingView(false);
24980
-
24981
- if (error.type === "validation_error" && // Subscription creation & renewal
24982
- type === "createPayment") {
24983
- var _state$couponObject;
24984
-
24985
- const {
24986
- updatedPrice
24987
- } = state; // When price is 0, we allow submitting without card info
24988
-
24989
- if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
24990
- return subscribe({}, state, dispatch);
24991
- }
24992
- }
24993
-
24994
- onFailure(error);
24995
- dispatch({
24996
- type: SHOW_ALERT,
24997
- payload: {
24998
- type: "error",
24999
- content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
25000
- }
25001
- });
25002
- dispatch({
25003
- type: DISABLE_SUBMIT,
25004
- payload: false
25005
- });
25006
- dispatch({
25007
- type: LOADING,
25008
- payload: false
25009
- });
25010
- };
25011
-
25012
24371
  const retrieveSource = async (sourceId, clientSecret, paymentHandler) => {
25013
24372
  try {
25014
24373
  const {
@@ -25068,6 +24427,386 @@ const PaymentMethodContainerWithoutStripe = ({
25068
24427
  iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; z-index: 10;";
25069
24428
  cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.appendChild(iframe);
25070
24429
  };
24430
+ /* End Stripe deprecated functions */
24431
+
24432
+ /* ====== End Stripe integration ======== */
24433
+
24434
+ /* ====== Start PayPal integration ======== */
24435
+
24436
+ /**
24437
+ * Handles subscriptions from PayPal gateway
24438
+ * @param {PaymentStateType} state
24439
+ * @param {string} paypalNonce
24440
+ * @return {void}
24441
+ */
24442
+
24443
+
24444
+ const handlePaypalSubscription = (state, paypalNonce) => {
24445
+ const payment = new Payment(new PaypalGateway());
24446
+ const {
24447
+ couponCode
24448
+ } = state;
24449
+ /**
24450
+ * @TODO: Add flags for types instead of testing by properties
24451
+ */
24452
+
24453
+ if (giftRecipient) {
24454
+ return payment.execute({
24455
+ type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
24456
+ token: paypalNonce,
24457
+ quantity: plan.quantity,
24458
+ plan,
24459
+ couponCode,
24460
+ product,
24461
+ giftRecipient,
24462
+ addressId: selectedAddressId
24463
+ }, (err, res) => {
24464
+ dispatch({
24465
+ type: DISABLE_SUBMIT,
24466
+ payload: false
24467
+ });
24468
+ dispatch({
24469
+ type: LOADING,
24470
+ payload: false
24471
+ });
24472
+
24473
+ if (err) {
24474
+ onFailure(err);
24475
+ return dispatch({
24476
+ type: SHOW_ALERT,
24477
+ payload: {
24478
+ type: "error",
24479
+ content: getErrorMessages(err)
24480
+ }
24481
+ });
24482
+ }
24483
+
24484
+ onSuccess(res);
24485
+ });
24486
+ }
24487
+
24488
+ return payment.execute({
24489
+ type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
24490
+ token: paypalNonce,
24491
+ quantity: plan.quantity,
24492
+ plan,
24493
+ couponCode,
24494
+ product,
24495
+ addressId: selectedAddressId
24496
+ }, (err, res) => {
24497
+ dispatch({
24498
+ type: DISABLE_SUBMIT,
24499
+ payload: false
24500
+ });
24501
+ dispatch({
24502
+ type: LOADING,
24503
+ payload: false
24504
+ });
24505
+
24506
+ if (err) {
24507
+ onFailure(err);
24508
+ return dispatch({
24509
+ type: SHOW_ALERT,
24510
+ payload: {
24511
+ type: "error",
24512
+ content: getErrorMessages(err)
24513
+ }
24514
+ });
24515
+ }
24516
+
24517
+ onSuccess(res);
24518
+ });
24519
+ };
24520
+ /* ====== End PayPal integration ======== */
24521
+
24522
+ /* ====== General Functions Start ======== */
24523
+
24524
+ /**
24525
+ * Updates the total amount after adding taxes only if site taxes are enabled
24526
+ */
24527
+
24528
+
24529
+ const updateTotalAmountWithTax = () => {
24530
+ var _window$Pelcro$site$r8;
24531
+
24532
+ if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
24533
+ const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
24534
+
24535
+ if (taxesEnabled && type === "createPayment") {
24536
+ dispatch({
24537
+ type: DISABLE_SUBMIT,
24538
+ payload: true
24539
+ });
24540
+ resolveTaxCalculation().then(res => {
24541
+ if (res) {
24542
+ dispatch({
24543
+ type: SET_TAX_AMOUNT,
24544
+ payload: res.taxAmount
24545
+ });
24546
+ dispatch({
24547
+ type: SET_UPDATED_PRICE,
24548
+ payload: res.totalAmountWithTax
24549
+ });
24550
+ dispatch({
24551
+ type: UPDATE_PAYMENT_REQUEST
24552
+ });
24553
+ }
24554
+ }).catch(error => {
24555
+ handlePaymentError(error);
24556
+ }).finally(() => {
24557
+ dispatch({
24558
+ type: DISABLE_SUBMIT,
24559
+ payload: false
24560
+ });
24561
+ });
24562
+ }
24563
+ };
24564
+
24565
+ const onApplyCouponCode = (state, dispatch) => {
24566
+ const {
24567
+ couponCode
24568
+ } = state;
24569
+
24570
+ const handleCouponResponse = (err, res) => {
24571
+ var _res$data$coupon;
24572
+
24573
+ dispatch({
24574
+ type: DISABLE_COUPON_BUTTON,
24575
+ payload: false
24576
+ });
24577
+
24578
+ if (err) {
24579
+ onFailure(err); // reset the coupon code in local state
24580
+
24581
+ setUpdatedCouponCode("");
24582
+ dispatch({
24583
+ type: SET_COUPON_ERROR,
24584
+ payload: getErrorMessages(err)
24585
+ }); // remove current coupon
24586
+
24587
+ dispatch({
24588
+ type: SET_COUPON,
24589
+ payload: null
24590
+ });
24591
+ dispatch({
24592
+ type: SET_PERCENT_OFF,
24593
+ payload: ""
24594
+ });
24595
+ dispatch({
24596
+ type: SET_UPDATED_PRICE,
24597
+ payload: null
24598
+ });
24599
+ dispatch({
24600
+ type: SET_TAX_AMOUNT,
24601
+ payload: null
24602
+ });
24603
+ const {
24604
+ currentPlan
24605
+ } = state;
24606
+
24607
+ if (currentPlan) {
24608
+ var _currentPlan$quantity;
24609
+
24610
+ const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
24611
+ const price = currentPlan.amount;
24612
+ dispatch({
24613
+ type: SET_UPDATED_PRICE,
24614
+ // set original plan price
24615
+ payload: price * quantity
24616
+ });
24617
+ dispatch({
24618
+ type: UPDATE_PAYMENT_REQUEST
24619
+ }); // update the new amount with taxes if site has taxes enabled
24620
+
24621
+ updateTotalAmountWithTax();
24622
+ }
24623
+
24624
+ return;
24625
+ }
24626
+
24627
+ dispatch({
24628
+ type: SET_COUPON_ERROR,
24629
+ payload: ""
24630
+ });
24631
+ dispatch({
24632
+ type: SHOW_ALERT,
24633
+ payload: {
24634
+ type: "error",
24635
+ content: ""
24636
+ }
24637
+ });
24638
+ dispatch({
24639
+ type: SET_COUPON,
24640
+ payload: res.data.coupon
24641
+ }); // set the coupon code in local state to be able to use with Vantiv
24642
+
24643
+ setUpdatedCouponCode(res.data.coupon.code);
24644
+ dispatch({
24645
+ type: SET_PERCENT_OFF,
24646
+ payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
24647
+ });
24648
+ dispatch({
24649
+ type: SET_TAX_AMOUNT,
24650
+ payload: res.data.taxes
24651
+ });
24652
+ dispatch({
24653
+ type: SET_UPDATED_PRICE,
24654
+ payload: res.data.total
24655
+ });
24656
+ dispatch({
24657
+ type: UPDATE_PAYMENT_REQUEST
24658
+ });
24659
+ };
24660
+
24661
+ if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
24662
+ dispatch({
24663
+ type: SET_COUPON,
24664
+ payload: null
24665
+ });
24666
+ dispatch({
24667
+ type: SET_PERCENT_OFF,
24668
+ payload: ""
24669
+ });
24670
+ dispatch({
24671
+ type: SET_UPDATED_PRICE,
24672
+ payload: null
24673
+ });
24674
+ dispatch({
24675
+ type: SET_TAX_AMOUNT,
24676
+ payload: null
24677
+ });
24678
+ dispatch({
24679
+ type: UPDATE_PAYMENT_REQUEST
24680
+ });
24681
+ updateTotalAmountWithTax();
24682
+ }
24683
+
24684
+ if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
24685
+ dispatch({
24686
+ type: DISABLE_COUPON_BUTTON,
24687
+ payload: true
24688
+ });
24689
+
24690
+ if (type === "createPayment") {
24691
+ window.Pelcro.order.create({
24692
+ auth_token: window.Pelcro.user.read().auth_token,
24693
+ plan_id: plan.id,
24694
+ campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
24695
+ coupon_code: couponCode,
24696
+ address_id: selectedAddressId
24697
+ }, handleCouponResponse);
24698
+ } else if (type === "orderCreate") {
24699
+ const isQuickPurchase = !Array.isArray(order);
24700
+ const mappedOrderItems = isQuickPurchase ? [{
24701
+ sku_id: order.id,
24702
+ quantity: order.quantity
24703
+ }] : order.map(item => ({
24704
+ sku_id: item.id,
24705
+ quantity: item.quantity
24706
+ }));
24707
+ window.Pelcro.ecommerce.order.createSummary({
24708
+ items: mappedOrderItems,
24709
+ coupon_code: couponCode
24710
+ }, handleCouponResponse);
24711
+ }
24712
+ }
24713
+ };
24714
+
24715
+ const debouncedApplyCouponCode = React.useRef(debounce$1(onApplyCouponCode, 1000)).current;
24716
+
24717
+ const removeAppliedCoupon = state => {
24718
+ state.couponCode = ""; // reset the coupon code in local state
24719
+
24720
+ setUpdatedCouponCode("");
24721
+ dispatch({
24722
+ type: SET_COUPON_ERROR,
24723
+ payload: ""
24724
+ });
24725
+ dispatch({
24726
+ type: SHOW_COUPON_FIELD,
24727
+ payload: false
24728
+ });
24729
+ dispatch({
24730
+ type: SET_COUPON,
24731
+ payload: null
24732
+ });
24733
+ dispatch({
24734
+ type: SET_PERCENT_OFF,
24735
+ payload: ""
24736
+ });
24737
+ dispatch({
24738
+ type: SET_UPDATED_PRICE,
24739
+ payload: null
24740
+ });
24741
+ dispatch({
24742
+ type: SET_TAX_AMOUNT,
24743
+ payload: null
24744
+ });
24745
+ const {
24746
+ currentPlan
24747
+ } = state;
24748
+
24749
+ if (currentPlan) {
24750
+ var _currentPlan$quantity2;
24751
+
24752
+ const quantity = (_currentPlan$quantity2 = currentPlan.quantity) !== null && _currentPlan$quantity2 !== void 0 ? _currentPlan$quantity2 : 1;
24753
+ const price = currentPlan.amount;
24754
+ dispatch({
24755
+ type: SET_UPDATED_PRICE,
24756
+ // set original plan price
24757
+ payload: price * quantity
24758
+ });
24759
+ dispatch({
24760
+ type: UPDATE_PAYMENT_REQUEST
24761
+ }); // update the new amount with taxes if site has taxes enabled
24762
+
24763
+ updateTotalAmountWithTax();
24764
+ }
24765
+ };
24766
+ /**
24767
+ * Resolves with the total & tax amount incase taxes enabled by site
24768
+ * @return {Promise}
24769
+ */
24770
+
24771
+
24772
+ const resolveTaxCalculation = () => {
24773
+ var _window$Pelcro$site$r9;
24774
+
24775
+ if (type === "invoicePayment") {
24776
+ return new Promise(resolve => resolve());
24777
+ }
24778
+
24779
+ const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
24780
+ return new Promise((resolve, reject) => {
24781
+ // resolve early if taxes isn't enabled
24782
+ if (!taxesEnabled) {
24783
+ return resolve(null);
24784
+ }
24785
+
24786
+ window.Pelcro.order.create({
24787
+ auth_token: window.Pelcro.user.read().auth_token,
24788
+ plan_id: plan.id,
24789
+ campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
24790
+ coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
24791
+ address_id: selectedAddressId
24792
+ }, (error, res) => {
24793
+ var _res$data7, _res$data8;
24794
+
24795
+ if (error) {
24796
+ return reject(error);
24797
+ }
24798
+
24799
+ const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
24800
+ const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
24801
+ resolve({
24802
+ totalAmountWithTax,
24803
+ taxAmount
24804
+ });
24805
+ });
24806
+ });
24807
+ };
24808
+ /* ====== General Functions End ======== */
24809
+
25071
24810
 
25072
24811
  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
25073
24812
  switch (action.type) {
@@ -25108,7 +24847,7 @@ const PaymentMethodContainerWithoutStripe = ({
25108
24847
  isLoading: true
25109
24848
  }, (state, dispatch) => {
25110
24849
  if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
25111
- return submitPayment(state);
24850
+ return submitPayment();
25112
24851
  }
25113
24852
 
25114
24853
  if (getSiteCardProcessor() === "vantiv") {
@@ -25143,7 +24882,7 @@ const PaymentMethodContainerWithoutStripe = ({
25143
24882
  return replacePaymentSource(state, dispatch);
25144
24883
  }
25145
24884
 
25146
- submitPayment(state);
24885
+ submitPayment();
25147
24886
  });
25148
24887
 
25149
24888
  case HANDLE_PAYPAL_SUBSCRIPTION:
@@ -25299,14 +25038,42 @@ const PaymentMethodContainerWithoutStripe = ({
25299
25038
  })));
25300
25039
  };
25301
25040
 
25302
- const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
25303
-
25304
25041
  const PaymentMethodContainer = props => {
25305
25042
  const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
25306
25043
  const {
25307
25044
  whenUserReady
25308
25045
  } = usePelcro.getStore();
25309
- const cardProcessor = getSiteCardProcessor();
25046
+ const cardProcessor = getSiteCardProcessor(); // Create the Stripe object
25047
+
25048
+ const stripePromise = cardProcessor === "stripe" ? loadStripe(window.Pelcro.environment.stripe, {
25049
+ stripeAccount: window.Pelcro.site.read().account_id
25050
+ }) : null;
25051
+ const [clientSecret, setClientSecret] = React.useState();
25052
+ const appearance = {
25053
+ theme: "stripe"
25054
+ };
25055
+ const options = {
25056
+ clientSecret,
25057
+ paymentMethodCreation: "manual",
25058
+ appearance,
25059
+ loader: "always"
25060
+ };
25061
+ React.useEffect(() => {
25062
+ if (isStripeLoaded) {
25063
+ window.Pelcro.user.createPaymentIntent({
25064
+ auth_token: window.Pelcro.user.read().auth_token
25065
+ }, (err, res) => {
25066
+ if (err) {
25067
+ console.error(err);
25068
+ }
25069
+
25070
+ if (res) {
25071
+ setClientSecret(res.data.client_secret);
25072
+ }
25073
+ });
25074
+ }
25075
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
25076
+
25310
25077
  React.useEffect(() => {
25311
25078
  whenUserReady(() => {
25312
25079
  if (!window.Stripe && cardProcessor === "stripe") {
@@ -25315,16 +25082,15 @@ const PaymentMethodContainer = props => {
25315
25082
  });
25316
25083
  }
25317
25084
  });
25318
- }, []);
25085
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
25319
25086
 
25320
25087
  if (isStripeLoaded) {
25321
- return /*#__PURE__*/React__default['default'].createElement(es_13, {
25322
- apiKey: window.Pelcro.environment.stripe,
25323
- stripeAccount: window.Pelcro.site.read().account_id,
25324
- locale: getPageOrDefaultLanguage()
25325
- }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
25088
+ return /*#__PURE__*/React__default['default'].createElement("div", null, clientSecret ? /*#__PURE__*/React__default['default'].createElement(Elements, {
25089
+ options: options,
25090
+ stripe: stripePromise
25091
+ }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
25326
25092
  store: store$m
25327
- }, props))));
25093
+ }, props))) : /*#__PURE__*/React__default['default'].createElement(Loader, null));
25328
25094
  } else if (cardProcessor !== "stripe") {
25329
25095
  return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
25330
25096
  store: store$m
@@ -25448,53 +25214,6 @@ function YearSelect({
25448
25214
  }, placeholder), createYearsItems);
25449
25215
  }
25450
25216
 
25451
- const StripeInputStyle = {
25452
- base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded plc-bg-white pelcro-input-input",
25453
- focus: "plc-ring-2 plc-ring-primary-400",
25454
- invalid: "plc-ring-2 plc-ring-red-300 pelcro-input-invalid"
25455
- };
25456
- const PelcroCardNumber = props => {
25457
- const {
25458
- t
25459
- } = useTranslation("checkoutForm");
25460
- return /*#__PURE__*/React__default['default'].createElement("div", {
25461
- className: "plc-relative"
25462
- }, /*#__PURE__*/React__default['default'].createElement(es_9, Object.assign({
25463
- id: "pelcro-input-card-number",
25464
- classes: StripeInputStyle
25465
- }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
25466
- htmlFor: "pelcro-input-card-number",
25467
- className: "pelcro-input-card-number-label"
25468
- }, t("labels.card"), " *"));
25469
- };
25470
- const PelcroCardCVC = props => {
25471
- const {
25472
- t
25473
- } = useTranslation("checkoutForm");
25474
- return /*#__PURE__*/React__default['default'].createElement("div", {
25475
- className: "plc-relative"
25476
- }, /*#__PURE__*/React__default['default'].createElement(es_6, Object.assign({
25477
- id: "pelcro-input-cvc-number",
25478
- classes: StripeInputStyle
25479
- }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
25480
- htmlFor: "pelcro-input-cvc-number",
25481
- className: "pelcro-input-cvc-number-label"
25482
- }, t("labels.CVC"), " *"));
25483
- };
25484
- const PelcroCardExpiry = props => {
25485
- const {
25486
- t
25487
- } = useTranslation("checkoutForm");
25488
- return /*#__PURE__*/React__default['default'].createElement("div", {
25489
- className: "plc-relative"
25490
- }, /*#__PURE__*/React__default['default'].createElement(es_8, Object.assign({
25491
- id: "pelcro-input-expiry-date",
25492
- classes: StripeInputStyle
25493
- }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
25494
- htmlFor: "pelcro-input-expiry-date",
25495
- className: "pelcro-input-expiry-date-label"
25496
- }, t("labels.date"), " *"));
25497
- };
25498
25217
  const PelcroPaymentRequestButton = props => {
25499
25218
  const {
25500
25219
  state: {
@@ -25516,7 +25235,7 @@ const PelcroPaymentRequestButton = props => {
25516
25235
  };
25517
25236
 
25518
25237
  if (canMakePayment) {
25519
- return /*#__PURE__*/React__default['default'].createElement(es_5, Object.assign({
25238
+ return /*#__PURE__*/React__default['default'].createElement(PaymentRequestButtonElement, Object.assign({
25520
25239
  className: "StripeElement stripe-payment-request-btn",
25521
25240
  onClick: updatePaymentRequest,
25522
25241
  paymentRequest: paymentRequest,
@@ -25534,11 +25253,43 @@ const PelcroPaymentRequestButton = props => {
25534
25253
  const CheckoutForm = ({
25535
25254
  type
25536
25255
  }) => {
25256
+ var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$, _window4, _window4$Pelcro, _window4$Pelcro$user, _window4$Pelcro$user$, _defaultAddress$line, _defaultAddress$line2, _defaultAddress$city, _defaultAddress$state, _defaultAddress$count, _defaultAddress$posta;
25257
+
25537
25258
  const {
25538
25259
  selectedPaymentMethodId,
25539
25260
  paymentMethodToEdit
25540
25261
  } = usePelcro();
25541
25262
  const cardProcessor = getSiteCardProcessor();
25263
+ const defaultAddress = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_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$r2 = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : (_window$Pelcro$user$r3 = _window$Pelcro$user$r2.addresses) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.find(address => address.type == "billing" && address.is_default)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
25264
+ const billingDetails = {
25265
+ name: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.name,
25266
+ email: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.email,
25267
+ phone: (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$Pelcro = _window4.Pelcro) === null || _window4$Pelcro === void 0 ? void 0 : (_window4$Pelcro$user = _window4$Pelcro.user) === null || _window4$Pelcro$user === void 0 ? void 0 : (_window4$Pelcro$user$ = _window4$Pelcro$user.read()) === null || _window4$Pelcro$user$ === void 0 ? void 0 : _window4$Pelcro$user$.phone,
25268
+ address: {
25269
+ line1: (_defaultAddress$line = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line1) !== null && _defaultAddress$line !== void 0 ? _defaultAddress$line : null,
25270
+ line2: (_defaultAddress$line2 = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line2) !== null && _defaultAddress$line2 !== void 0 ? _defaultAddress$line2 : null,
25271
+ city: (_defaultAddress$city = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.city) !== null && _defaultAddress$city !== void 0 ? _defaultAddress$city : null,
25272
+ state: (_defaultAddress$state = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.state) !== null && _defaultAddress$state !== void 0 ? _defaultAddress$state : null,
25273
+ country: (_defaultAddress$count = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.country) !== null && _defaultAddress$count !== void 0 ? _defaultAddress$count : null,
25274
+ postal_code: (_defaultAddress$posta = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.postal_code) !== null && _defaultAddress$posta !== void 0 ? _defaultAddress$posta : null
25275
+ }
25276
+ };
25277
+ const paymentElementOptions = {
25278
+ layout: {
25279
+ type: "tabs",
25280
+ // or accordion
25281
+ defaultCollapsed: false
25282
+ },
25283
+ defaultValues: {
25284
+ billingDetails: billingDetails
25285
+ },
25286
+ terms: {
25287
+ applePay: "never",
25288
+ card: "never",
25289
+ googlePay: "never",
25290
+ paypal: "never"
25291
+ }
25292
+ };
25542
25293
 
25543
25294
  if (selectedPaymentMethodId) {
25544
25295
  return null;
@@ -25600,56 +25351,10 @@ const CheckoutForm = ({
25600
25351
  }))));
25601
25352
  }
25602
25353
 
25603
- return /*#__PURE__*/React__default['default'].createElement("div", {
25604
- className: "plc-mt-4"
25605
- }, /*#__PURE__*/React__default['default'].createElement("div", {
25606
- className: "plc-relative"
25607
- }, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
25608
- autoFocus: true
25609
- }), /*#__PURE__*/React__default['default'].createElement("div", {
25610
- // alt="credit_cards"
25611
- className: "plc-w-auto plc-h-8 plc-absolute plc-right-2 plc-top-1 plc-flex" // src="https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
25612
-
25613
- }, /*#__PURE__*/React__default['default'].createElement("svg", {
25614
- className: "plc-w-8",
25615
- xmlns: "http://www.w3.org/2000/svg",
25616
- viewBox: "0 0 48 48"
25617
- }, /*#__PURE__*/React__default['default'].createElement("path", {
25618
- fill: "#1565C0",
25619
- d: "M15.186 19l-2.626 7.832c0 0-.667-3.313-.733-3.729-1.495-3.411-3.701-3.221-3.701-3.221L10.726 30v-.002h3.161L18.258 19H15.186zM17.689 30L20.56 30 22.296 19 19.389 19zM38.008 19h-3.021l-4.71 11h2.852l.588-1.571h3.596L37.619 30h2.613L38.008 19zM34.513 26.328l1.563-4.157.818 4.157H34.513zM26.369 22.206c0-.606.498-1.057 1.926-1.057.928 0 1.991.674 1.991.674l.466-2.309c0 0-1.358-.515-2.691-.515-3.019 0-4.576 1.444-4.576 3.272 0 3.306 3.979 2.853 3.979 4.551 0 .291-.231.964-1.888.964-1.662 0-2.759-.609-2.759-.609l-.495 2.216c0 0 1.063.606 3.117.606 2.059 0 4.915-1.54 4.915-3.752C30.354 23.586 26.369 23.394 26.369 22.206z"
25620
- }), /*#__PURE__*/React__default['default'].createElement("path", {
25621
- fill: "#FFC107",
25622
- d: "M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z"
25623
- })), /*#__PURE__*/React__default['default'].createElement("svg", {
25624
- className: "plc-w-8",
25625
- xmlns: "http://www.w3.org/2000/svg",
25626
- viewBox: "0 0 48 48"
25627
- }, /*#__PURE__*/React__default['default'].createElement("path", {
25628
- fill: "#ff9800",
25629
- d: "M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
25630
- }), /*#__PURE__*/React__default['default'].createElement("path", {
25631
- fill: "#d50000",
25632
- d: "M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
25633
- }), /*#__PURE__*/React__default['default'].createElement("path", {
25634
- fill: "#ff3d00",
25635
- d: "M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
25636
- })), /*#__PURE__*/React__default['default'].createElement("svg", {
25637
- className: "plc-w-8",
25638
- xmlns: "http://www.w3.org/2000/svg",
25639
- viewBox: "0 0 48 48"
25640
- }, /*#__PURE__*/React__default['default'].createElement("path", {
25641
- fill: "#1976D2",
25642
- d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
25643
- }), /*#__PURE__*/React__default['default'].createElement("path", {
25644
- fill: "#FFF",
25645
- d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
25646
- })))), /*#__PURE__*/React__default['default'].createElement("div", {
25647
- className: "plc-flex plc-items-end plc-justify-between plc-my-4"
25648
- }, /*#__PURE__*/React__default['default'].createElement("div", {
25649
- className: "plc-w-6/12 plc-pr-1"
25650
- }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
25651
- className: "plc-w-6/12 plc-pl-1"
25652
- }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
25354
+ return /*#__PURE__*/React__default['default'].createElement(PaymentElement, {
25355
+ id: "payment-element",
25356
+ options: paymentElementOptions
25357
+ });
25653
25358
  }
25654
25359
 
25655
25360
  return null;
@@ -25923,7 +25628,7 @@ class PaypalClient {
25923
25628
  * @param {paypalConstructorOptions} paypalClientConfig
25924
25629
  */
25925
25630
  constructor(paypalClientConfig) {
25926
- _defineProperty$3(this, "build", async () => {
25631
+ _defineProperty$4(this, "build", async () => {
25927
25632
  if (!this.isPaypalEnabled) {
25928
25633
  console.error("Braintree/Paypal integration is currently not enabled on this site's config");
25929
25634
  return;
@@ -25943,7 +25648,7 @@ class PaypalClient {
25943
25648
  this.client = paypalClient;
25944
25649
  });
25945
25650
 
25946
- _defineProperty$3(this, "createPayment", options => {
25651
+ _defineProperty$4(this, "createPayment", options => {
25947
25652
  var _this$config$locale, _this$config$style;
25948
25653
 
25949
25654
  if (!this.client) {
@@ -26004,7 +25709,7 @@ class PaypalClient {
26004
25709
  });
26005
25710
  });
26006
25711
 
26007
- _defineProperty$3(this, "render", () => {
25712
+ _defineProperty$4(this, "render", () => {
26008
25713
  var _this$config$buttonEl;
26009
25714
 
26010
25715
  if (!this.paypalButton) {
@@ -26107,7 +25812,7 @@ class PaypalClient {
26107
25812
 
26108
25813
  }
26109
25814
 
26110
- _defineProperty$3(PaypalClient, "isPaypalEnabled", () => Boolean(window.Pelcro.site.read().braintree_tokenization));
25815
+ _defineProperty$4(PaypalClient, "isPaypalEnabled", () => Boolean(window.Pelcro.site.read().braintree_tokenization));
26111
25816
 
26112
25817
  /**
26113
25818
  * PaypalSubscribeButton component
@@ -26243,7 +25948,7 @@ function SvgLock(props) {
26243
25948
  }
26244
25949
 
26245
25950
  const SelectedPaymentMethod = () => {
26246
- var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
25951
+ var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
26247
25952
 
26248
25953
  const {
26249
25954
  t
@@ -26274,9 +25979,9 @@ const SelectedPaymentMethod = () => {
26274
25979
  className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
26275
25980
  }, /*#__PURE__*/React__default['default'].createElement("p", {
26276
25981
  className: "plc-font-semibold"
26277
- }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
25982
+ }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default['default'].createElement("p", {
26278
25983
  className: "plc-text-sm plc-text-gray-500"
26279
- }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))), /*#__PURE__*/React__default['default'].createElement(Button, {
25984
+ }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))), /*#__PURE__*/React__default['default'].createElement(Button, {
26280
25985
  onClick: () => switchView("payment-method-select"),
26281
25986
  disabled: isLoading,
26282
25987
  variant: "ghost",
@@ -27889,27 +27594,27 @@ class DefaultNewsLetter extends React.Component {
27889
27594
 
27890
27595
  super(props);
27891
27596
 
27892
- _defineProperty$3(this, "componentDidMount", () => {
27597
+ _defineProperty$4(this, "componentDidMount", () => {
27893
27598
  document.addEventListener("keydown", this.handleSubmit);
27894
27599
  });
27895
27600
 
27896
- _defineProperty$3(this, "componentWillUnmount", () => {
27601
+ _defineProperty$4(this, "componentWillUnmount", () => {
27897
27602
  document.removeEventListener("keydown", this.handleSubmit);
27898
27603
  });
27899
27604
 
27900
- _defineProperty$3(this, "handleSubmit", e => {
27605
+ _defineProperty$4(this, "handleSubmit", e => {
27901
27606
  if (e.key === "Enter" && !this.state.disableSubmit) this.submitNewsletter();
27902
27607
  });
27903
27608
 
27904
- _defineProperty$3(this, "displayLoginView", () => {
27609
+ _defineProperty$4(this, "displayLoginView", () => {
27905
27610
  this.props.setView("login");
27906
27611
  });
27907
27612
 
27908
- _defineProperty$3(this, "displaySelectView", () => {
27613
+ _defineProperty$4(this, "displaySelectView", () => {
27909
27614
  this.props.setView("plan-select");
27910
27615
  });
27911
27616
 
27912
- _defineProperty$3(this, "submitNewsletter", () => {
27617
+ _defineProperty$4(this, "submitNewsletter", () => {
27913
27618
  this.setState({
27914
27619
  disableSubmit: true
27915
27620
  });
@@ -27952,30 +27657,30 @@ class DefaultNewsLetter extends React.Component {
27952
27657
  });
27953
27658
  });
27954
27659
 
27955
- _defineProperty$3(this, "postSubmit", () => {
27660
+ _defineProperty$4(this, "postSubmit", () => {
27956
27661
  window.Pelcro.paywall.setNewsletterExtraVisits(true);
27957
27662
  this.props.setView("meter");
27958
27663
  });
27959
27664
 
27960
- _defineProperty$3(this, "onEmailChange", event => {
27665
+ _defineProperty$4(this, "onEmailChange", event => {
27961
27666
  this.setState({
27962
27667
  email: event.target.value
27963
27668
  });
27964
27669
  });
27965
27670
 
27966
- _defineProperty$3(this, "onFirstNameChange", event => {
27671
+ _defineProperty$4(this, "onFirstNameChange", event => {
27967
27672
  this.setState({
27968
27673
  firstName: event.target.value
27969
27674
  });
27970
27675
  });
27971
27676
 
27972
- _defineProperty$3(this, "onLastNameChange", event => {
27677
+ _defineProperty$4(this, "onLastNameChange", event => {
27973
27678
  this.setState({
27974
27679
  lastName: event.target.value
27975
27680
  });
27976
27681
  });
27977
27682
 
27978
- _defineProperty$3(this, "onPostalCodeChange", event => {
27683
+ _defineProperty$4(this, "onPostalCodeChange", event => {
27979
27684
  this.setState({
27980
27685
  postalCode: event.target.value
27981
27686
  });
@@ -28561,7 +28266,7 @@ const SubscriptionManageMembersContainer = ({
28561
28266
  } = usePelcro();
28562
28267
  const subscription_id = subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : subscriptionToManageMembers.id;
28563
28268
 
28564
- const handleListMembers = ({}, dispatch) => {
28269
+ const handleListMembers = (state, dispatch) => {
28565
28270
  var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
28566
28271
 
28567
28272
  window.Pelcro.subscription.listMembers({
@@ -33843,7 +33548,7 @@ const PaymentMethodSelectList = () => {
33843
33548
  return /*#__PURE__*/React__default['default'].createElement("div", {
33844
33549
  className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll plc-max-h-80 pelcro-payment-method-select-wrapper"
33845
33550
  }, paymentMethods.map(paymentMethod => {
33846
- var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
33551
+ var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
33847
33552
 
33848
33553
  const isSelected = selectedPaymentMethodId === String(paymentMethod.id);
33849
33554
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -33861,9 +33566,9 @@ const PaymentMethodSelectList = () => {
33861
33566
  className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
33862
33567
  }, /*#__PURE__*/React__default['default'].createElement("p", {
33863
33568
  className: "plc-font-semibold"
33864
- }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
33569
+ }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default['default'].createElement("p", {
33865
33570
  className: "plc-text-sm plc-text-gray-500"
33866
- }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
33571
+ }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
33867
33572
  }));
33868
33573
  };
33869
33574
 
@@ -34209,7 +33914,7 @@ const PaymentMethodDeleteList = props => {
34209
33914
  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
34210
33915
  className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
34211
33916
  }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
34212
- var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
33917
+ var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
34213
33918
 
34214
33919
  const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
34215
33920
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -34227,9 +33932,9 @@ const PaymentMethodDeleteList = props => {
34227
33932
  className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
34228
33933
  }, /*#__PURE__*/React__default['default'].createElement("p", {
34229
33934
  className: "plc-font-semibold"
34230
- }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
33935
+ }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default['default'].createElement("p", {
34231
33936
  className: "plc-text-sm plc-text-gray-500"
34232
- }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
33937
+ }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
34233
33938
  })), /*#__PURE__*/React__default['default'].createElement("div", {
34234
33939
  className: "plc-px-3"
34235
33940
  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
@@ -34582,7 +34287,6 @@ const DashboardContainer = ({
34582
34287
  type: SET_DISABLESUBMIT,
34583
34288
  payload: false
34584
34289
  });
34585
- onClose();
34586
34290
 
34587
34291
  if (err) {
34588
34292
  onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
@@ -36083,7 +35787,6 @@ const SubscriptionsItems = ({
36083
35787
  return switchView("email-verify");
36084
35788
  }
36085
35789
 
36086
- switchView(null);
36087
35790
  onClose === null || onClose === void 0 ? void 0 : onClose();
36088
35791
  notify.confirm((onSuccess, onFailure) => {
36089
35792
  dispatch({
@@ -37129,12 +36832,14 @@ const PaymentCardsMenu = props => {
37129
36832
  setPaymentMethodToEdit,
37130
36833
  setPaymentMethodToDelete
37131
36834
  } = usePelcro();
37132
- const [sources, setSources] = React.useState([]); // const source = window.Pelcro.user.read().source;
37133
-
36835
+ const [sources, setSources] = React.useState([]);
36836
+ const [isLoading, setIsLoading] = React.useState(true);
37134
36837
  React.useEffect(() => {
37135
36838
  window.Pelcro.paymentMethods.list({
37136
36839
  auth_token: window.Pelcro.user.read().auth_token
37137
36840
  }, (err, res) => {
36841
+ setIsLoading(false);
36842
+
37138
36843
  if (err) {
37139
36844
  return console.error(err);
37140
36845
  }
@@ -37191,9 +36896,9 @@ const PaymentCardsMenu = props => {
37191
36896
 
37192
36897
  return /*#__PURE__*/React__default['default'].createElement(Card, {
37193
36898
  id: "pelcro-dashboard-payment-menu",
37194
- className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
36899
+ className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto plc-relative",
37195
36900
  title: t("labels.paymentSource")
37196
- }, /*#__PURE__*/React__default['default'].createElement(PaymentCardsItems, {
36901
+ }, isLoading ? /*#__PURE__*/React__default['default'].createElement(Loader, null) : /*#__PURE__*/React__default['default'].createElement(PaymentCardsItems, {
37197
36902
  displaySourceEdit: displaySourceEdit,
37198
36903
  onDeletePaymentMethodClick: onDeletePaymentMethodClick,
37199
36904
  sources: sources
@@ -37204,39 +36909,48 @@ const PaymentCardsMenu = props => {
37204
36909
  };
37205
36910
 
37206
36911
  const PaymentCardsItems = props => {
37207
- useTranslation("dashboard");
37208
- return props.sources.map((source, index) => {
37209
- var _source$properties, _source$properties2;
36912
+ const {
36913
+ t
36914
+ } = useTranslation("dashboard");
37210
36915
 
37211
- return /*#__PURE__*/React__default['default'].createElement("div", {
37212
- key: "dashboard-source-" + source.id,
37213
- className: `plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark`
37214
- }, /*#__PURE__*/React__default['default'].createElement("div", {
37215
- className: "plc-flex plc-items-center"
37216
- }, /*#__PURE__*/React__default['default'].createElement("p", {
37217
- className: "plc-mr-6"
37218
- }, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default['default'].createElement("p", {
37219
- className: "plc-ml-1 plc-text-lg plc-tracking-widest"
37220
- }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4)), /*#__PURE__*/React__default['default'].createElement("div", {
37221
- className: "plc-flex-grow"
37222
- }), /*#__PURE__*/React__default['default'].createElement(Button, {
37223
- id: "pelcro-button-update-source-" + index,
37224
- variant: "icon",
37225
- className: "plc-text-gray-500",
37226
- "data-key": source.id,
37227
- icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
37228
- onClick: props === null || props === void 0 ? void 0 : props.displaySourceEdit
37229
- }), /*#__PURE__*/React__default['default'].createElement(Button, {
37230
- id: "pelcro-button-update-source-" + index,
37231
- variant: "icon",
37232
- className: "plc-text-gray-500",
37233
- "data-key": source.id,
37234
- icon: /*#__PURE__*/React__default['default'].createElement(SvgTrashCan, null),
37235
- onClick: () => {
37236
- props === null || props === void 0 ? void 0 : props.onDeletePaymentMethodClick(source);
37237
- }
37238
- }));
37239
- });
36916
+ if (props.sources.length > 0) {
36917
+ return props.sources.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map((source, index) => {
36918
+ var _source$properties, _source$properties2, _source$properties3, _source$properties4;
36919
+
36920
+ return /*#__PURE__*/React__default['default'].createElement("div", {
36921
+ key: "dashboard-source-" + source.id,
36922
+ className: "plc-relative plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 plc-bg-white plc-shadow-md_dark"
36923
+ }, source.is_default && /*#__PURE__*/React__default['default'].createElement("span", {
36924
+ className: "plc-absolute plc--top-3 plc-right-3 plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-h-7 plc-my-auto plc-items-start plc-py-1 plc-px-4 plc-text-sm"
36925
+ }, t("labels.default")), /*#__PURE__*/React__default['default'].createElement("div", {
36926
+ className: "plc-flex plc-items-center"
36927
+ }, /*#__PURE__*/React__default['default'].createElement("p", {
36928
+ className: "plc-mr-6"
36929
+ }, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default['default'].createElement("p", {
36930
+ className: "plc-ml-1 plc-text-lg plc-tracking-widest"
36931
+ }, (source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", source === null || source === void 0 ? void 0 : (_source$properties3 = source.properties) === null || _source$properties3 === void 0 ? void 0 : _source$properties3.last4)), /*#__PURE__*/React__default['default'].createElement("span", {
36932
+ className: "plc-flex-grow"
36933
+ }), (source === null || source === void 0 ? void 0 : (_source$properties4 = source.properties) === null || _source$properties4 === void 0 ? void 0 : _source$properties4.brand) !== "bacs_debit" && /*#__PURE__*/React__default['default'].createElement(Button, {
36934
+ id: "pelcro-button-update-source-" + index,
36935
+ variant: "icon",
36936
+ className: "plc-text-gray-500",
36937
+ "data-key": source.id,
36938
+ icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
36939
+ onClick: props === null || props === void 0 ? void 0 : props.displaySourceEdit
36940
+ }), /*#__PURE__*/React__default['default'].createElement(Button, {
36941
+ id: "pelcro-button-update-source-" + index,
36942
+ variant: "icon",
36943
+ className: "plc-text-gray-500",
36944
+ "data-key": source.id,
36945
+ icon: /*#__PURE__*/React__default['default'].createElement(SvgTrashCan, null),
36946
+ onClick: () => {
36947
+ props === null || props === void 0 ? void 0 : props.onDeletePaymentMethodClick(source);
36948
+ }
36949
+ }));
36950
+ });
36951
+ } else {
36952
+ return /*#__PURE__*/React__default['default'].createElement("div", null, "you didn't add payment methods yet");
36953
+ }
37240
36954
  };
37241
36955
 
37242
36956
  var mode = {
@@ -42428,9 +42142,6 @@ exports.PaymentMethodView = PaymentMethodView;
42428
42142
  exports.PaymentSuccessModal = PaymentSuccessModal;
42429
42143
  exports.PaymentSuccessView = PaymentSuccessView;
42430
42144
  exports.PaypalSubscribeButton = PaypalSubscribeButton;
42431
- exports.PelcroCardCVC = PelcroCardCVC;
42432
- exports.PelcroCardExpiry = PelcroCardExpiry;
42433
- exports.PelcroCardNumber = PelcroCardNumber;
42434
42145
  exports.PelcroModalController = PelcroModalController;
42435
42146
  exports.PelcroPaymentRequestButton = PelcroPaymentRequestButton;
42436
42147
  exports.ProfilePicChangeButton = ProfilePicChangeButton;