@pelcro/react-pelcro-js 2.6.1-beta.1 → 2.7.0-beta.10

package/dist/index.cjs.js

@@ -3620,7 +3620,8 @@ var labels$h = {
 	"for": "for",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Tax"
+	tax: "+ Tax",
+	removeCoupon: "REMOVE"
 };
 var checkoutForm_en = {
 	messages: messages$j,
@@ -3646,7 +3647,8 @@ var labels$g = {
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Taxe"
+	tax: "+ Taxe",
+	removeCoupon: "RETIRER"
 };
 var checkoutForm_fr = {
 	messages: messages$i,
@@ -3794,7 +3796,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (500 characters max)",
+		giftMessage: "Gift message (200 characters max)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3890,7 +3892,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (500 caractères max)",
+		giftMessage: "Message du cadeau (200 caractères max)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -4376,6 +4378,7 @@ var labels$3 = {
 	account: "Account",
 	purchases: "Purchases",
 	subscriptions: "Subscriptions",
+	donations: "Donations",
 	updatePaymentSource: "Update",
 	profile: "Profile",
 	updateProfile: "Edit profile",
@@ -4391,6 +4394,7 @@ var labels$3 = {
 	actions: "Actions",
 	expiresOn: "Ends",
 	startsOn: "Starts",
+	startDate: "Start date",
 	renewsOn: "Renews",
 	canceledOn: "Canceled on",
 	recipient: "Recipient",
@@ -4455,6 +4459,7 @@ var labels$2 = {
 	account: "Compte",
 	purchases: "Achats",
 	subscriptions: "Abonnements",
+	donations: "Des dons",
 	updatePaymentSource: "Mettre à jour la source de paiement",
 	profile: "Profil",
 	updateProfile: "Mettre à jour le profil",
@@ -4470,6 +4475,7 @@ var labels$2 = {
 	actions: "Actes",
 	expiresOn: "Expire le",
 	startsOn: "Débute le",
+	startDate: "Date de début",
 	renewsOn: "Renouvelle le",
 	canceledOn: "Annulé le",
 	recipient: "Destinataire",
@@ -4526,7 +4532,11 @@ var labels$1 = {
 	},
 	selectProduct: "Select a product",
 	selectPlan: "Select a plan",
-	startingAt: "Starting at"
+	startingAt: "Starting at",
+	restrictiveArticles: {
+		subscribeTo: "Subscribe to one of the following options to get access to this page",
+		or: "Or take a look at some of our other options below"
+	}
 };
 var buttons$1 = {
 	next: "Next",
@@ -4555,7 +4565,11 @@ var labels = {
 	},
 	selectProduct: "Sélectionnez un produit",
 	selectPlan: "Sélectionnez un plan",
-	starningAt: "À partir de"
+	starningAt: "À partir de",
+	restrictiveArticles: {
+		subscribeTo: "Abonnez-vous à une des options suivantes pour accéder au contenu de cette page",
+		or: "Sinon, jetez un coup d'oeil à d'autres offres ci-dessous"
+	}
 };
 var buttons = {
 	next: "Prochain",
@@ -6800,6 +6814,8 @@ class SaveToMetadataButtonClass {
     _saveToMetadata.set(this, {
       writable: true,
       value: event => {
+        var _user$metadata;
+
         const button = event.currentTarget;
         const user = window.Pelcro.user.read();
         const {
@@ -6815,7 +6831,7 @@ class SaveToMetadataButtonClass {
 
         let newMetadataValue = [buttonMetadata]; // if this key already exist in user metadata object, append to it.
 
-        const oldValue = user.metadata[`metadata_saved_${key}`];
+        const oldValue = (_user$metadata = user.metadata) === null || _user$metadata === void 0 ? void 0 : _user$metadata[`metadata_saved_${key}`];
 
         if (oldValue) {
           if (Array.isArray(oldValue)) {
@@ -6929,8 +6945,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"undefined"!=typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(})/g,a=/\/\*[^]*?\*\/|\s\s+|\n/g,n=(e,t)=>{let r,l="",a="",o="";for(let c in e){let s=e[c];"object"==typeof s?(r=t?t.replace(/([^,])+/g,e=>c.replace(/([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):c,a+="@"==c[0]?"f"==c[1]?n(s,c):c+"{"+n(s,"k"==c[1]?"":t)+"}":n(s,r)):"@"==c[0]&&"i"==c[1]?l=c+" "+s+";":(c=c.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=n.p?n.p(c,s):c+":"+s+";");}return o[0]?(r=t?t+"{"+o+"}":o,l+r+a):l+a},o={},c=e=>{let t="";for(let r in e)t+=r+("object"==typeof e[r]?c(e[r]):e[r]);return t},s=(e,t,r,s,i)=>{let p="object"==typeof e?c(e):e,u=o[p]||(o[p]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(p));if(!o[u]){let t="object"==typeof e?e:(e=>{let t,r=[{}];for(;t=l.exec(e.replace(a,""));)t[4]&&r.shift(),t[3]?r.unshift(r[0][t[3]]=r[0][t[3]]||{}):t[4]||(r[0][t[1]]=t[2]);return r[0]})(e);o[u]=n(i?{["@keyframes "+u]:t}:t,r?"":"."+u);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(o[u],t,s),u},i=(e,t,r)=>e.reduce((e,l,a)=>{let o=t[a];if(o&&o.call){let e=o(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;o=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):e;}return e+l+(null==o?"":o)},"");function p(e){let r=this||{},l=e.call?e(r.p):e;return s(l.unshift?l.raw?i(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>t?Object.assign(e,t.call?t(r.p):t):e,{}):l,t(r.target),r.g,r.o,r.k)}let u,f,d;p.bind({g:1});let b=p.bind({k:1});function h(e,t,r,l){n.p=t,u=e,f=r,d=l;}function y(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=p.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=c.as||e;return d&&i[0]&&d(c),u(i,c)}return t?t(a):a}}
 
-function _extends$v() {
-  _extends$v = Object.assign || function (target) {
+function _extends$x() {
+  _extends$x = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -6944,7 +6960,7 @@ function _extends$v() {
     return target;
   };
 
-  return _extends$v.apply(this, arguments);
+  return _extends$x.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -7034,7 +7050,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -7044,9 +7060,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$v({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$x({}, t, action.toast) : t;
         })
       });
 
@@ -7073,9 +7089,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$v({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$x({}, t, {
             visible: false
           }) : t;
         })
@@ -7083,28 +7099,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$v({}, state, {
+        return _extends$x({}, state, {
           toasts: []
         });
       }
 
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$v({}, state, {
+      return _extends$x({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$v({}, t, {
+          return _extends$x({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7151,12 +7167,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$v({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$x({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$v({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$x({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$v({}, state, {
+  return _extends$x({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7166,7 +7182,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$v({
+  return _extends$x({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7216,14 +7232,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$v({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$x({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$v({
+    toast.success(resolveValue(msgs.success, p), _extends$x({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$v({
+    toast.error(resolveValue(msgs.error, e), _extends$x({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7562,7 +7578,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$v({}, animationStyle, style, toast.style)
+    style: _extends$x({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7592,7 +7608,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$v({
+  return _extends$x({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7619,7 +7635,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$v({
+    style: _extends$x({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7654,82 +7670,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$s;
+var _path$u;
 
-function _extends$u() { _extends$u = 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; }; return _extends$u.apply(this, arguments); }
+function _extends$w() { _extends$w = 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; }; return _extends$w.apply(this, arguments); }
 
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$r;
+var _path$t;
 
-function _extends$t() { _extends$t = 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; }; return _extends$t.apply(this, arguments); }
+function _extends$v() { _extends$v = 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; }; return _extends$v.apply(this, arguments); }
 
 function SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$q;
+var _path$s;
 
-function _extends$s() { _extends$s = 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; }; return _extends$s.apply(this, arguments); }
+function _extends$u() { _extends$u = 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; }; return _extends$u.apply(this, arguments); }
 
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$p;
+var _path$r;
 
-function _extends$r() { _extends$r = 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; }; return _extends$r.apply(this, arguments); }
+function _extends$t() { _extends$t = 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; }; return _extends$t.apply(this, arguments); }
 
 function SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$o, _path2$3;
+var _path$q, _path2$3;
 
-function _extends$q() { _extends$q = 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; }; return _extends$q.apply(this, arguments); }
+function _extends$s() { _extends$s = 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; }; return _extends$s.apply(this, arguments); }
 
 function SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -8481,6 +8497,7 @@ const optionsController = options => {
 
   const optionsMethodsDict = {
     loadPaymentSDKs: loadPaymentSDKs,
+    loadAuth0SDK: loadAuth0SDK,
     enableURLTriggers: initViewFromURL,
     enableTheme: applyPelcroTheme,
     enablePaywalls: initPaywalls,
@@ -8546,6 +8563,13 @@ const loadPaymentSDKs = () => {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
   }
 };
+const loadAuth0SDK = () => {
+  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url);
+
+  if (auth0Enabled) {
+    window.Pelcro.helpers.loadSDK("https://cdn.auth0.com/js/auth0/9.18/auth0.min.js", "auth0-sdk");
+  }
+};
 const initSecuritySdk = () => {
   const {
     whenSiteReady
@@ -8842,6 +8866,7 @@ const initCartFromUrl = () => {
 
 const defaultOptions = {
   loadPaymentSDKs: true,
+  loadAuth0SDK: true,
   enableURLTriggers: true,
   enableTheme: true,
   enablePaywalls: true,
@@ -9121,6 +9146,7 @@ const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
 const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
 const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
+const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
 const SET_PERCENT_OFF = "SET_PERCENT_OFF";
 const SET_COUPON = "SET_COUPON";
 const SET_COUPON_ERROR = "SET_COUPON_ERROR";
@@ -9667,16 +9693,16 @@ const LoginPassword = props => /*#__PURE__*/React__default['default'].createElem
   store: store$f
 }, props));
 
-var _path$n;
+var _path$p;
 
-function _extends$p() { _extends$p = 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; }; return _extends$p.apply(this, arguments); }
+function _extends$r() { _extends$r = 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; }; return _extends$r.apply(this, arguments); }
 
 function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -9989,19 +10015,21 @@ const RegisterContainer = ({
  */
 
 function hasSecurityTokenEnabled$1() {
-  const hasSecuritySdkLoaded = Boolean(window.grecaptcha);
+  var _window$Pelcro$site$r2;
+
+  const hasSecuritySdkLoaded = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.security_key);
   return hasSecuritySdkLoaded;
 }
 
-var _path$m;
+var _path$o;
 
-function _extends$o() { _extends$o = 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; }; return _extends$o.apply(this, arguments); }
+function _extends$q() { _extends$q = 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; }; return _extends$q.apply(this, arguments); }
 
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -10074,15 +10102,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$l, _path2$2, _path3$1, _path4;
+var _path$n, _path2$2, _path3$1, _path4;
 
-function _extends$n() { _extends$n = 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; }; return _extends$n.apply(this, arguments); }
+function _extends$p() { _extends$p = 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; }; return _extends$p.apply(this, arguments); }
 
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -10159,17 +10187,127 @@ const GoogleLoginButton = ({
   }) : null;
 };
 
+var _path$m;
+
+function _extends$o() { _extends$o = 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; }; return _extends$o.apply(this, arguments); }
+
+function SvgAuth0Logo(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+    viewBox: "0 0 256 285",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
+  })));
+}
+
+const Auth0LoginButton = ({
+  label = "Auth0",
+  className = "",
+  labelClassName = "",
+  iconClassName = ""
+}) => {
+  if (!window.auth0 && window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url) {
+    console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
+  }
+
+  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url && window.auth0);
+  const auth0InstanceRef = React__default['default'].useRef(null);
+  React__default['default'].useEffect(() => {
+    if (auth0Enabled) {
+      auth0InstanceRef.current = new window.auth0.WebAuth({
+        domain: window.Pelcro.site.read().auth0_base_url,
+        clientID: window.Pelcro.site.read().auth0_client_id
+      });
+    }
+  }, []);
+  const {
+    dispatch: loginDispatch
+  } = React.useContext(store$f);
+  const {
+    dispatch: registerDispatch
+  } = React.useContext(store$e);
+
+  function handleClick() {
+    var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
+
+    (_auth0InstanceRef$cur = auth0InstanceRef.current) === null || _auth0InstanceRef$cur === void 0 ? void 0 : (_auth0InstanceRef$cur2 = _auth0InstanceRef$cur.popup) === null || _auth0InstanceRef$cur2 === void 0 ? void 0 : (_auth0InstanceRef$cur3 = _auth0InstanceRef$cur2.authorize) === null || _auth0InstanceRef$cur3 === void 0 ? void 0 : _auth0InstanceRef$cur3.call(_auth0InstanceRef$cur2, {
+      responseType: "token id_token",
+      owp: true // close popup when finished
+
+    }, function (error, authResult) {
+      if (error) {
+        return onFailure(error);
+      }
+
+      onSuccess(authResult);
+    });
+  }
+
+  const onSuccess = authResult => {
+    var _auth0InstanceRef$cur4, _auth0InstanceRef$cur5, _auth0InstanceRef$cur6;
+
+    const {
+      accessToken
+    } = authResult;
+    (_auth0InstanceRef$cur4 = auth0InstanceRef.current) === null || _auth0InstanceRef$cur4 === void 0 ? void 0 : (_auth0InstanceRef$cur5 = _auth0InstanceRef$cur4.client) === null || _auth0InstanceRef$cur5 === void 0 ? void 0 : (_auth0InstanceRef$cur6 = _auth0InstanceRef$cur5.userInfo) === null || _auth0InstanceRef$cur6 === void 0 ? void 0 : _auth0InstanceRef$cur6.call(_auth0InstanceRef$cur5, accessToken, (error, user) => {
+      if (error) {
+        return onFailure(error);
+      }
+
+      const {
+        email,
+        nickname
+      } = user;
+      loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
+        type: HANDLE_SOCIAL_LOGIN,
+        payload: {
+          idpName: "auth0",
+          idpToken: accessToken,
+          firstName: nickname,
+          email
+        }
+      });
+      registerDispatch === null || registerDispatch === void 0 ? void 0 : registerDispatch({
+        type: HANDLE_SOCIAL_LOGIN,
+        payload: {
+          idpName: "auth0",
+          idpToken: accessToken,
+          firstName: nickname,
+          email
+        }
+      });
+    });
+  };
+
+  const onFailure = error => {
+    console.error(error);
+  };
+
+  if (auth0Enabled) {
+    return /*#__PURE__*/React__default['default'].createElement("button", {
+      onClick: handleClick,
+      className: `plc-flex plc-items-center plc-justify-center plc-w-full plc-p-3 plc-space-x-3 plc-text-gray-700 plc-border plc-border-gray-200 plc-rounded-3xl hover:plc-bg-gray-200 pelcro-auth0-login ${className}`
+    }, /*#__PURE__*/React__default['default'].createElement(SvgAuth0Logo, {
+      className: `plc-w-6 plc-h-auto pelcro-auth0-login-icon" ${iconClassName}`
+    }), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: `pelcro-auth0-login-label ${labelClassName}`
+    }, label));
+  }
+
+  return null;
+};
+
 /**
  *
  */
 
 function LoginView(props) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
   const {
     t
   } = useTranslation("login");
-  const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id);
+  const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-login-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10213,18 +10351,18 @@ function LoginView(props) {
     className: "plc-w-full plc-border-gray-300"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-px-5 plc-mt-1 plc-space-x-3"
-  }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null))))));
+  }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null), /*#__PURE__*/React__default['default'].createElement(Auth0LoginButton, null))))));
 }
 
-var _path$k, _path2$1, _path3;
+var _path$l, _path2$1, _path3;
 
-function _extends$m() { _extends$m = 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; }; return _extends$m.apply(this, arguments); }
+function _extends$n() { _extends$n = 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; }; return _extends$n.apply(this, arguments); }
 
 function SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -10572,7 +10710,7 @@ const RegisterLastName = props => /*#__PURE__*/React__default['default'].createE
  */
 
 function RegisterView(props) {
-  var _product$paywall$regi, _product$paywall, _product$paywall$regi2, _product$paywall2, _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro, _window$Pelcro$uiSett;
+  var _product$paywall$regi, _product$paywall, _product$paywall$regi2, _product$paywall2, _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett;
 
   const {
     t
@@ -10582,7 +10720,7 @@ function RegisterView(props) {
   } = usePelcro();
   const title = (_product$paywall$regi = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.register_title) !== null && _product$paywall$regi !== void 0 ? _product$paywall$regi : t("title");
   const subtitle = (_product$paywall$regi2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.register_subtitle) !== null && _product$paywall$regi2 !== void 0 ? _product$paywall$regi2 : t("subtitle");
-  const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id);
+  const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   const showNameFields = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableNameFieldsInRegister;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-register-view"
@@ -10640,7 +10778,7 @@ function RegisterView(props) {
     className: "plc-w-full plc-border-gray-300"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-px-5 plc-mt-1 plc-space-x-3"
-  }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null))))));
+  }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null), /*#__PURE__*/React__default['default'].createElement(Auth0LoginButton, null))))));
 }
 /**
  * Checks if the current site has security token enabled
@@ -10648,9 +10786,9 @@ function RegisterView(props) {
  */
 
 function hasSecurityTokenEnabled() {
-  var _window$Pelcro$site, _window$Pelcro$site$r3;
+  var _window$Pelcro$site, _window$Pelcro$site$r4;
 
-  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.security_key);
+  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.security_key);
 }
 
 function TextInput({
@@ -10940,42 +11078,80 @@ class SelectModal extends React.Component {
       return `${startingPlan.amount_formatted}/${startingPlan.interval}`;
     });
 
+    _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+      const productButtonLabel = isPlanMode ? this.locale("buttons.back") : this.locale("buttons.select");
+      const productButtonCallback = isPlanMode ? this.goBack : this.selectProduct;
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: product.id,
+        className: `plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
+      }, product.image && /*#__PURE__*/React__default['default'].createElement("img", {
+        alt: `image of ${product.name}`,
+        src: product.image,
+        className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
+      }), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-full pelcro-select-product-header"
+      }, /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-font-bold pelcro-select-product-title"
+      }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-text-xs pelcro-select-product-description"
+      }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-end plc-w-full plc-mt-3"
+      }, product.plans && /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
+      }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+        onClick: productButtonCallback,
+        "data-key": product.id,
+        id: "pelcro-select-product-back-button",
+        className: `plc-ml-auto plc-text-xs ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+      }, index === 0 && {
+        autoFocus: true
+      }), productButtonLabel))));
+    });
+
     _defineProperty$3(this, "renderProducts", () => {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
-      const productButtonLabel = userDidSelectProduct ? this.locale("buttons.back") : this.locale("buttons.select");
-      const productButtonCallback = userDidSelectProduct ? this.goBack : this.selectProduct;
-      return productsToShow.map((product, i) => {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: product.id,
-          className: "plc-flex plc-items-start plc-p-2 plc-mt-4 plc-space-x-3 plc-text-gray-900 plc-border plc-border-solid plc-rounded plc-border-primary-500 pelcro-select-product-wrapper"
-        }, product.image && /*#__PURE__*/React__default['default'].createElement("img", {
-          alt: `image of ${product.name}`,
-          src: product.image,
-          className: "plc-object-contain plc-w-1/4 pelcro-select-product-image"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: `plc-flex plc-flex-wrap ${product.image ? "plc-w-3/4" : "plc-w-full"}`
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-w-full pelcro-select-product-header"
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-font-bold pelcro-select-product-title"
-        }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-text-xs pelcro-select-product-description"
-        }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-flex plc-items-end plc-w-full plc-mt-3"
-        }, product.plans && /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
-        }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
-          onClick: productButtonCallback,
-          "data-key": product.id,
-          id: "pelcro-select-product-back-button",
-          className: "plc-ml-auto plc-text-xs"
-        }, i === 0 && {
-          autoFocus: true
-        }), productButtonLabel))));
+      return productsToShow.map((product, index) => {
+        return this.renderOneProduct(product, index);
       });
     });
 
+    _defineProperty$3(this, "renderMatchingProductsFirst", () => {
+      const isPlanMode = Boolean(this.state.mode === "plan");
+
+      if (isPlanMode) {
+        return this.renderOneProduct(this.state.product);
+      }
+
+      const [productsThatMatchArticleTag, allProductsMinusMatched] = productsWithMatchedTaggedFirst(); // Render normal products if there are no available matching products
+
+      if (!(productsThatMatchArticleTag !== null && productsThatMatchArticleTag !== void 0 && productsThatMatchArticleTag.length)) {
+        return this.renderProducts();
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
+        emphasize: true
+      })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
+        className: "plc-my-4"
+      }), /*#__PURE__*/React__default['default'].createElement("h3", {
+        className: "plc-text-sm plc-font-semibold"
+      }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
+
+      function productsWithMatchedTaggedFirst() {
+        var _window$Pelcro$produc;
+
+        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+        const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
+        const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
+        return [productsThatMatchArticleTag, allProductsMinusMatched];
+      }
+    });
+
     _defineProperty$3(this, "renderPlans", () => {
       return this.state.planList.map(plan => {
         const isChecked = this.state.plan.id === plan.id ? true : false;
@@ -11102,7 +11278,7 @@ class SelectModal extends React.Component {
   }
 
   render() {
-    var _window$Pelcro$produc, _window$Pelcro$produc2;
+    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
     const {
       disableGifting
@@ -11136,9 +11312,9 @@ class SelectModal extends React.Component {
       className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
     }, /*#__PURE__*/React__default['default'].createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
-    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc === void 0 ? void 0 : _window$Pelcro$produc.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_subtitle))), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-products-wrapper"
-    }, this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-overflow-y-scroll plc-max-h-72 pelcro-select-plans-wrapper"
     }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-flex plc-justify-center plc-mt-2"
@@ -12844,15 +13020,50 @@ const PaymentMethodContainerWithoutStripe = ({
       });
 
       if (err) {
+        onFailure(err);
+        dispatch({
+          type: SET_COUPON_ERROR,
+          payload: getErrorMessages(err)
+        }); // remove current coupon
+
+        dispatch({
+          type: SET_COUPON,
+          payload: null
+        });
         dispatch({
           type: SET_PERCENT_OFF,
           payload: ""
         });
-        onFailure(err);
-        return dispatch({
-          type: SET_COUPON_ERROR,
-          payload: getErrorMessages(err)
+        dispatch({
+          type: SET_UPDATED_PRICE,
+          payload: null
         });
+        dispatch({
+          type: SET_TAX_AMOUNT,
+          payload: null
+        });
+        const {
+          currentPlan
+        } = state;
+
+        if (currentPlan) {
+          var _currentPlan$quantity;
+
+          const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
+          const price = currentPlan.amount;
+          dispatch({
+            type: SET_UPDATED_PRICE,
+            // set original plan price
+            payload: price * quantity
+          });
+          dispatch({
+            type: UPDATE_PAYMENT_REQUEST
+          }); // update the new amount with taxes if site has taxes enabled
+
+          updateTotalAmountWithTax();
+        }
+
+        return;
       }
 
       dispatch({
@@ -12942,6 +13153,54 @@ const PaymentMethodContainerWithoutStripe = ({
 
   const debouncedApplyCouponCode = React.useRef(debounce(onApplyCouponCode, 1000)).current;
 
+  const removeAppliedCoupon = state => {
+    state.couponCode = "";
+    dispatch({
+      type: SET_COUPON_ERROR,
+      payload: ""
+    });
+    dispatch({
+      type: SHOW_COUPON_FIELD,
+      payload: false
+    });
+    dispatch({
+      type: SET_COUPON,
+      payload: null
+    });
+    dispatch({
+      type: SET_PERCENT_OFF,
+      payload: ""
+    });
+    dispatch({
+      type: SET_UPDATED_PRICE,
+      payload: null
+    });
+    dispatch({
+      type: SET_TAX_AMOUNT,
+      payload: null
+    });
+    const {
+      currentPlan
+    } = state;
+
+    if (currentPlan) {
+      var _currentPlan$quantity2;
+
+      const quantity = (_currentPlan$quantity2 = currentPlan.quantity) !== null && _currentPlan$quantity2 !== void 0 ? _currentPlan$quantity2 : 1;
+      const price = currentPlan.amount;
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        // set original plan price
+        payload: price * quantity
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      }); // update the new amount with taxes if site has taxes enabled
+
+      updateTotalAmountWithTax();
+    }
+  };
+
   const subscribe = (stripeSource, state, dispatch) => {
     const {
       couponCode
@@ -13559,6 +13818,9 @@ const PaymentMethodContainerWithoutStripe = ({
           disableCouponButton: true
         }, (state, dispatch) => onApplyCouponCode(state, dispatch));
 
+      case REMOVE_APPLIED_COUPON:
+        return lib_5(state, () => removeAppliedCoupon(state));
+
       case SET_COUPON:
         return lib_7({ ...state,
           couponObject: action.payload
@@ -13727,6 +13989,10 @@ const DiscountedPrice = props => {
   var _order$currency, _order$, _plan$quantity;
 
   const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    dispatch,
     state: {
       updatedPrice,
       taxAmount,
@@ -13742,12 +14008,22 @@ const DiscountedPrice = props => {
   const discountedPriceWithoutTax = updatedPrice - taxAmount;
   const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
+  const onCouponRemove = () => {
+    dispatch({
+      type: REMOVE_APPLIED_COUPON
+    });
+  };
+
   if (percentOff) {
     return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-      className: "plc-flex plc-justify-center plc-mt-2 pelcro-discount"
-    }, props), "(-", percentOff, ")", " ", /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-font-bold pelcro-discounted-price"
-    }, priceFormatted));
+      className: "plc-flex plc-items-center plc-justify-center plc-mt-2 pelcro-discount"
+    }, props), "(-", percentOff, ")", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-ml-1 plc-font-bold pelcro-discounted-price"
+    }, priceFormatted), /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-ml-2 plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      onClick: onCouponRemove
+    }, "\u2715 ", t("labels.removeCoupon")));
   }
 
   return "";
@@ -13793,17 +14069,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$j;
+var _path$k;
 
-function _extends$l() { _extends$l = 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; }; return _extends$l.apply(this, arguments); }
+function _extends$m() { _extends$m = 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; }; return _extends$m.apply(this, arguments); }
 
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13885,17 +14161,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$i;
+var _path$j;
 
-function _extends$k() { _extends$k = 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; }; return _extends$k.apply(this, arguments); }
+function _extends$l() { _extends$l = 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; }; return _extends$l.apply(this, arguments); }
 
 function SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14254,16 +14530,16 @@ const BankRedirection = () => {
   }));
 };
 
-var _path$h;
+var _path$i;
 
-function _extends$j() { _extends$j = 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; }; return _extends$j.apply(this, arguments); }
+function _extends$k() { _extends$k = 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; }; return _extends$k.apply(this, arguments); }
 
 function SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -14485,12 +14761,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-var _path$g;
+var _path$h;
 
-function _extends$i() { _extends$i = 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; }; return _extends$i.apply(this, arguments); }
+function _extends$j() { _extends$j = 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; }; return _extends$j.apply(this, arguments); }
 
 function SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -14499,7 +14775,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -15498,17 +15774,17 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createEl
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$f;
+var _path$g;
 
-function _extends$h() { _extends$h = 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; }; return _extends$h.apply(this, arguments); }
+function _extends$i() { _extends$i = 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; }; return _extends$i.apply(this, arguments); }
 
 function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -18618,18 +18894,18 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].creat
   store: store$4
 }, props));
 
-var _path$e;
+var _path$f;
 
-function _extends$g() { _extends$g = 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; }; return _extends$g.apply(this, arguments); }
+function _extends$h() { _extends$h = 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; }; return _extends$h.apply(this, arguments); }
 
 function SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-5 plc-h-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -18787,7 +19063,7 @@ function GiftCreateMessage(props) {
   return /*#__PURE__*/React__default['default'].createElement(TextArea, Object.assign({
     onChange: e => handleInputChange(e.target.value),
     value: state.giftMessage,
-    maxLength: "500",
+    maxLength: "200",
     rows: 3,
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
@@ -19616,8 +19892,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$f() {
-  _extends$f = Object.assign || function (target) {
+function _extends$g() {
+  _extends$g = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -19631,7 +19907,7 @@ function _extends$f() {
     return target;
   };
 
-  return _extends$f.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19815,7 +20091,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$f({}, _rest, {
+      return _render(_extends$g({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -20343,7 +20619,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$f({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$g({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -20387,7 +20663,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$f({}, sharedProps, {
+  }, render(_extends$g({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -20514,12 +20790,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -20538,7 +20814,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -20549,19 +20825,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$f({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$g({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -20574,7 +20850,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -20613,19 +20889,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -20646,7 +20922,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -20659,10 +20935,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$f({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$g({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -20670,11 +20946,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -20687,7 +20963,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$f({}, state, {
+  return _extends$g({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -20748,18 +21024,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$d;
+var _path$e;
 
-function _extends$e() { _extends$e = 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; }; return _extends$e.apply(this, arguments); }
+function _extends$f() { _extends$f = 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; }; return _extends$f.apply(this, arguments); }
 
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20975,18 +21251,18 @@ const SavedItems = ({
   });
 };
 
-var _path$c;
+var _path$d;
 
-function _extends$d() { _extends$d = 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; }; return _extends$d.apply(this, arguments); }
+function _extends$e() { _extends$e = 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; }; return _extends$e.apply(this, arguments); }
 
 function SvgRefresh(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20994,35 +21270,35 @@ function SvgRefresh(props) {
   })));
 }
 
-var _path$b;
+var _path$c;
 
-function _extends$c() { _extends$c = 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; }; return _extends$c.apply(this, arguments); }
+function _extends$d() { _extends$d = 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; }; return _extends$d.apply(this, arguments); }
 
 function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$a;
+var _path$b;
 
-function _extends$b() { _extends$b = 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; }; return _extends$b.apply(this, arguments); }
+function _extends$c() { _extends$c = 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; }; return _extends$c.apply(this, arguments); }
 
 function SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21030,17 +21306,17 @@ function SvgPlus(props) {
   })));
 }
 
-var _path$9;
+var _path$a;
 
-function _extends$a() { _extends$a = 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; }; return _extends$a.apply(this, arguments); }
+function _extends$b() { _extends$b = 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; }; return _extends$b.apply(this, arguments); }
 
 function SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -21102,9 +21378,9 @@ const SubscriptionsItems = ({
   const {
     t
   } = useTranslation("dashboard");
-  const subs = window.Pelcro.subscription.list();
-  if (!subs || subs.length === 0) return null;
-  return window.Pelcro.subscription.list().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+  const subs = getNonDonationSubs();
+  if (subs.length === 0) return null;
+  return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     const isActive = activeMenu === sub.id; // Cancel button click handlers
 
     const onCancelClick = () => {
@@ -21235,6 +21511,12 @@ const SubscriptionsItems = ({
   });
 };
 
+function getNonDonationSubs() {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+
+  return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => !sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+}
+
 /**
  * @typedef {Object} AccordionPropsType
  * @property {string} initialActiveMenu the initial active menu
@@ -21317,18 +21599,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$8;
+var _path$9;
 
-function _extends$9() { _extends$9 = 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; }; return _extends$9.apply(this, arguments); }
+function _extends$a() { _extends$a = 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; }; return _extends$a.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21336,17 +21618,17 @@ function SvgExit(props) {
   })));
 }
 
-var _path$7;
+var _path$8;
 
-function _extends$8() { _extends$8 = 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; }; return _extends$8.apply(this, arguments); }
+function _extends$9() { _extends$9 = 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; }; return _extends$9.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21354,18 +21636,18 @@ function SvgUser(props) {
   })));
 }
 
-var _path$6;
+var _path$7;
 
-function _extends$7() { _extends$7 = 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; }; return _extends$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = 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; }; return _extends$8.apply(this, arguments); }
 
 function SvgNewsletter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21373,18 +21655,18 @@ function SvgNewsletter(props) {
   })));
 }
 
-var _path$5;
+var _path$6;
 
-function _extends$6() { _extends$6 = 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; }; return _extends$6.apply(this, arguments); }
+function _extends$7() { _extends$7 = 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; }; return _extends$7.apply(this, arguments); }
 
 function SvgPaymentCard(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21392,18 +21674,18 @@ function SvgPaymentCard(props) {
   })));
 }
 
-var _path$4, _path2;
+var _path$5, _path2;
 
-function _extends$5() { _extends$5 = 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; }; return _extends$5.apply(this, arguments); }
+function _extends$6() { _extends$6 = 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; }; return _extends$6.apply(this, arguments); }
 
 function SvgLocationPin(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21418,10 +21700,10 @@ function SvgLocationPin(props) {
 
 var _switch;
 
-function _extends$4() { _extends$4 = 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; }; return _extends$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = 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; }; return _extends$5.apply(this, arguments); }
 
 function SvgSubscription(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -21436,18 +21718,18 @@ function SvgSubscription(props) {
   }))))));
 }
 
-var _path$3;
+var _path$4;
 
-function _extends$3() { _extends$3 = 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; }; return _extends$3.apply(this, arguments); }
+function _extends$4() { _extends$4 = 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; }; return _extends$4.apply(this, arguments); }
 
 function SvgShopping(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21455,18 +21737,18 @@ function SvgShopping(props) {
   })));
 }
 
-var _path$2;
+var _path$3;
 
-function _extends$2() { _extends$2 = 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; }; return _extends$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = 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; }; return _extends$3.apply(this, arguments); }
 
 function SvgBookmark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21474,25 +21756,83 @@ function SvgBookmark(props) {
   })));
 }
 
-var _path$1;
+var _path$2;
 
-function _extends$1() { _extends$1 = 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; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = 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; }; return _extends$2.apply(this, arguments); }
 
 function SvgKey(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
     clipRule: "evenodd"
   })));
 }
 
+var _path$1;
+
+function _extends$1() { _extends$1 = 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; }; return _extends$1.apply(this, arguments); }
+
+function SvgDonate(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    width: 24,
+    height: 24,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
+  })));
+}
+
+const DonationsMenu = () => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const subscriptions = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    return /*#__PURE__*/React__default['default'].createElement("tr", {
+      key: sub.id,
+      className: "plc-w-full plc-align-top pelcro-donation-row"
+    }, /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-truncate"
+    }, sub.plan.nickname && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-semibold plc-text-gray-500 pelcro-donation-plan"
+    }, sub.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-text-xs plc-text-gray-400 pelcro-donation-price"
+    }, getFormattedPriceByLocal(sub.plan.amount * sub.quantity, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-mb-4 plc-text-gray-500 pelcro-donation-date"
+    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", null, formatStartDate(sub.start)))));
+  });
+  return /*#__PURE__*/React__default['default'].createElement("table", {
+    className: "plc-w-full plc-table-fixed pelcro-donations-table"
+  }, /*#__PURE__*/React__default['default'].createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-6/12 "
+  }, t("labels.plan")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-6/12 "
+  }, t("labels.startDate")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
+    className: "plc-h-4"
+  }), subscriptions));
+};
+
+function getDonationSubs() {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+
+  return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+}
+
+function formatStartDate(date) {
+  const startDate = new Date(date);
+  return new Intl.DateTimeFormat("en-CA").format(startDate);
+}
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
+  DONATIONS: "donations",
   PAYMENT_CARDS: "payment-cards",
   ADDRESSES: "addresses",
   GIFTS: "gifts",
@@ -22020,6 +22360,14 @@ class Dashboard extends React.Component {
         displayProductSelect: this.displayProductSelect,
         displayRedeem: this.displayRedeem
       })
+    }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
+      show: hasDonationSubs(),
+      name: SUB_MENUS.DONATIONS,
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgDonate, {
+        className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
+      }),
+      title: this.locale("labels.donations"),
+      content: /*#__PURE__*/React__default['default'].createElement(DonationsMenu, null)
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.GIFTS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, null),
@@ -22046,6 +22394,13 @@ class Dashboard extends React.Component {
 
 }
 
+function hasDonationSubs() {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  return donations.length > 0;
+}
+
 const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
 
 // The button in the lower right that shows the dashboard.
@@ -23923,6 +24278,7 @@ exports.AddressUpdateView = AddressUpdateView;
 exports.Alert = AlertWithContext;
 exports.AlertElement = Alert;
 exports.ApplyCouponButton = ApplyCouponButton;
+exports.Auth0LoginButton = Auth0LoginButton;
 exports.Badge = Badge;
 exports.BankRedirection = BankRedirection;
 exports.Button = Button;