@pelcro/react-pelcro-js 3.2.0-beta.1 → 3.2.0-beta.12

package/dist/index.esm.js

@@ -4654,17 +4654,17 @@ var invoiceDetails_en = {
 	buttons: buttons$1
 };
 
-var title = "Invoice details";
+var title = "Détails de la facture";
 var labels = {
-	summary: "Summary",
+	summary: "Résumé",
 	total: "Total",
-	amountPaid: "Amount paid",
-	amountDue: "Amount due",
-	creationDate: "Created on:"
+	amountPaid: "Montant payé",
+	amountDue: "Montant dû",
+	creationDate: "Créé le:"
 };
 var buttons = {
-	download: "Download",
-	pay: "Pay now"
+	download: "Télécharger",
+	pay: "Payer"
 };
 var invoiceDetails_fr = {
 	title: title,
@@ -7064,8 +7064,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$y() {
-  _extends$y = Object.assign || function (target) {
+function _extends$z() {
+  _extends$z = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7079,7 +7079,7 @@ function _extends$y() {
     return target;
   };
 
-  return _extends$y.apply(this, arguments);
+  return _extends$z.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -7169,7 +7169,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -7179,9 +7179,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$y({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$z({}, t, action.toast) : t;
         })
       });
 
@@ -7208,9 +7208,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$y({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$z({}, t, {
             visible: false
           }) : t;
         })
@@ -7218,28 +7218,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$y({}, state, {
+        return _extends$z({}, state, {
           toasts: []
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$y({}, t, {
+          return _extends$z({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7286,12 +7286,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$y({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$z({}, 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$y({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$z({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$y({}, state, {
+  return _extends$z({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7301,7 +7301,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$y({
+  return _extends$z({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7351,14 +7351,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$y({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$z({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$y({
+    toast.success(resolveValue(msgs.success, p), _extends$z({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$y({
+    toast.error(resolveValue(msgs.error, e), _extends$z({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7697,7 +7697,7 @@ var ToastBar = /*#__PURE__*/memo(function (_ref2) {
   var message = createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$y({}, animationStyle, style, toast.style)
+    style: _extends$z({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7727,7 +7727,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$y({
+  return _extends$z({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7754,7 +7754,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return createElement("div", {
-    style: _extends$y({
+    style: _extends$z({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7789,82 +7789,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$v;
+var _path$w;
 
-function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
+function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
 
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.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$u;
+var _path$v;
 
-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 _extends$x() { _extends$x = 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$x.apply(this, arguments); }
 
 function SvgXIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.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$t;
+var _path$u;
 
-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 _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 SvgXIconSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.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$s;
+var _path$t;
 
-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$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 SvgExclamation(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     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$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.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$r, _path2$4;
+var _path$s, _path2$4;
 
-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$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 SvgSpinner(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -8619,6 +8619,10 @@ const getErrorMessages = error => {
     return error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : (_error$response4$data2 = _error$response4$data.error) === null || _error$response4$data2 === void 0 ? void 0 : _error$response4$data2.message;
   }
 
+  if (error !== null && error !== void 0 && error.message) {
+    return error.message;
+  }
+
   const errorMessages = []; // enumerable error (ex: validation errors)
 
   Object.values(error === null || error === void 0 ? void 0 : (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : (_error$response5$data = _error$response5.data) === null || _error$response5$data === void 0 ? void 0 : _error$response5$data.errors).forEach(([errorMessage]) => {
@@ -8657,7 +8661,7 @@ const debounce = (func, waitTime) => {
 function getSiteCardProcessor() {
   var _window$Pelcro$site$r;
 
-  if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
+  if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
     return "vantiv";
   }
 
@@ -8753,7 +8757,7 @@ const loadPaymentSDKs = () => {
   } // Load Vantiv SDKs
 
 
-  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
+  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
 
   if (supportsVantiv) {
     if (!window.jQuery) {
@@ -8761,7 +8765,10 @@ const loadPaymentSDKs = () => {
     }
 
     if (!window.EprotectIframeClient) {
-      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
+      const PRELIVE_URL = "https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js";
+      const PRODUCTION_URL = "https://request.eprotect.vantivcnp.com/eProtect/js/eProtect-iframe-client4.min.js";
+      const scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? PRODUCTION_URL : PRELIVE_URL;
+      window.Pelcro.helpers.loadSDK(scriptUrlToUse, "vantiv-eprotect-sdk");
     }
   }
 };
@@ -8922,8 +8929,7 @@ const initViewFromURL = () => {
       }
 
       if (view === "invoice-details") {
-        // FIXME: commented out to remove from the release
-        return false; // return showInvoiceDetailsFromUrl();
+        return showInvoiceDetailsFromUrl();
       }
 
       switchView(view);
@@ -9102,6 +9108,43 @@ const verifyEmailTokenFromUrl = () => {
   });
 };
 
+const showInvoiceDetailsFromUrl = () => {
+  const {
+    isAuthenticated,
+    setInvoice,
+    whenSiteReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+
+    const invoiceId = window.Pelcro.helpers.getURLParameter("id");
+    const wasSetSuccessfully = setInvoice(invoiceId);
+
+    if (!wasSetSuccessfully) {
+      const errorMessage = i18next.t("messages:invalidInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    const {
+      invoice
+    } = usePelcro.getStore();
+
+    if (invoice.total === 0) {
+      const errorMessage = i18next.t("messages:zeroTotalInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    return switchView("invoice-details");
+  });
+};
+
 const defaultOptions = {
   loadPaymentSDKs: true,
   loadAuth0SDK: true,
@@ -9871,16 +9914,16 @@ const LoginPassword = props => /*#__PURE__*/React__default.createElement(Passwor
   store: store$h
 }, props));
 
-var _path$q;
+var _path$r;
 
-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$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 SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.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"
@@ -10199,15 +10242,15 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
 
-var _path$p;
+var _path$q;
 
-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$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 SvgFacebookLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.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"
   })));
@@ -10280,15 +10323,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$o, _path2$3, _path3$1, _path4;
+var _path$p, _path2$3, _path3$1, _path4;
 
-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$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 SvgGoogleLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.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$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
@@ -10365,15 +10408,15 @@ const GoogleLoginButton = ({
   }) : null;
 };
 
-var _path$n;
+var _path$o;
 
-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$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 SvgAuth0Logo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.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"
   })));
 }
@@ -10549,15 +10592,15 @@ function LoginView(props) {
   }, /*#__PURE__*/React__default.createElement(GoogleLoginButton, null), /*#__PURE__*/React__default.createElement(FacebookLoginButton, null), /*#__PURE__*/React__default.createElement(Auth0LoginButton, null))))));
 }
 
-var _path$m, _path2$2, _path3;
+var _path$n, _path2$2, _path3;
 
-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$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 SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.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"
@@ -12677,20 +12720,21 @@ var es_12 = es.injectStripe;
 var es_13 = es.StripeProvider;
 
 /**
- * @TODO: All subscription related business logic should end up moving
+ * @TODO: All payment related business logic should end up moving
  * to this service, and out of react components.
  */
 
 /**
- * Enum for subscription types
+ * Enum for payment types
  * @readonly
  * @enum {string}
  */
-const SUBSCRIPTION_TYPES = {
+const PAYMENT_TYPES = {
   CREATE_SUBSCRIPTION: "CREATE_SUBSCRIPTION",
   CREATE_GIFTED_SUBSCRIPTION: "CREATE_GIFTED_SUBSCRIPTION",
   RENEW_SUBSCRIPTION: "RENEW_SUBSCRIPTION",
   RENEW_GIFTED_SUBSCRIPTION: "RENEW_GIFTED_SUBSCRIPTION",
+  PURCHASE_ECOMMERCE_ORDER: "PURCHASE_ECOMMERCE_ORDER",
   PAY_INVOICE: "PAY_INVOICE"
 };
 
@@ -12698,9 +12742,8 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 
 var _generateUserError = /*#__PURE__*/new WeakMap();
 
-class Subscription {
+class Payment {
   /**
-   * Subscription service  constructor
    * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
    */
   constructor(paymentGateway) {
@@ -12712,7 +12755,7 @@ class Subscription {
 
       if (!options.type) {
         callback(_classPrivateFieldGet(this, _generateUserError).call(this), null);
-        return console.error("No subscription type provided");
+        return console.error("No payment type provided");
       } // delegate execution to paymentgateway
 
 
@@ -12730,21 +12773,21 @@ class Subscription {
       writable: true,
       value: () => {
         return {
-          error: new Error("An error has occured in the subscription service, please try again later")
+          error: new Error("An error has occured in the payment service, please try again later")
         };
       }
     });
 
     if (_classPrivateFieldGet(this, _isPaymentGatewayInvalid).call(this, paymentGateway)) {
       this.paymentGateway = null;
-      console.error("Incompatible subscription gateway");
+      console.error("Incompatible payment gateway");
     } else {
       this.paymentGateway = paymentGateway;
     }
   }
   /**
-   * @typedef subscriptionOptions
-   * @property {SUBSCRIPTION_TYPES} type
+   * @typedef paymentOptions
+   * @property {PAYMENT_TYPES} type
    * @property {string} token
    * @property {object} plan
    * @property {object} [product]
@@ -12755,6 +12798,7 @@ class Subscription {
    * @property {string} addressId
    * @property {number} invoiceId
    * @property {boolean} isExistingSource
+   * @property {Array} items
    */
 
   /**
@@ -12765,8 +12809,8 @@ class Subscription {
    */
 
   /**
-   * Subscription execution method
-   * @param {subscriptionOptions} options subscription options
+   * Payment execution method
+   * @param {paymentOptions} options payment options
    * @param {executeCallback} callback
    * @return {void}
    */
@@ -12779,7 +12823,7 @@ const PAYMENT_GATEWAYS_ENUM = {
   vantiv: "vantiv"
 };
 /**
- * Subscription Strategies
+ * Payment Strategies
  */
 
 /**
@@ -12796,6 +12840,8 @@ var _renewSubscription = /*#__PURE__*/new WeakMap();
 
 var _renewGiftedSubscription = /*#__PURE__*/new WeakMap();
 
+var _purchaseEcommerceOrder = /*#__PURE__*/new WeakMap();
+
 var _payInvoice = /*#__PURE__*/new WeakMap();
 
 class StripeGateway {
@@ -12806,7 +12852,7 @@ class StripeGateway {
     });
 
     _defineProperty$3(this, "execute", (options, callback) => {
-      const types = SUBSCRIPTION_TYPES;
+      const types = PAYMENT_TYPES;
 
       switch (options.type) {
         case types.CREATE_SUBSCRIPTION:
@@ -12821,11 +12867,14 @@ class StripeGateway {
         case types.RENEW_GIFTED_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _renewGiftedSubscription).call(this, options, callback);
 
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder).call(this, options, callback);
+
         case types.PAY_INVOICE:
           return _classPrivateFieldGet(this, _payInvoice).call(this, options, callback);
 
         default:
-          console.error("Unsupported subscriptiion method: Stripe Gateway");
+          console.error("Unsupported payment method: Stripe Gateway");
       }
     });
 
@@ -12847,6 +12896,7 @@ class StripeGateway {
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           address_id: product.address_required ? addressId : null
         }, (err, res) => {
           callback(err, res);
@@ -12873,6 +12923,7 @@ class StripeGateway {
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           gift_recipient_email: giftRecipient.email,
           gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
           gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
@@ -12900,6 +12951,7 @@ class StripeGateway {
           stripe_token: token,
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           coupon_code: couponCode,
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? addressId : null
@@ -12933,6 +12985,36 @@ class StripeGateway {
       }
     });
 
+    _purchaseEcommerceOrder.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
     _payInvoice.set(this, {
       writable: true,
       value: (options, callback) => {
@@ -12976,7 +13058,7 @@ class PaypalGateway {
     });
 
     _defineProperty$3(this, "execute", (options, callback) => {
-      const types = SUBSCRIPTION_TYPES;
+      const types = PAYMENT_TYPES;
 
       switch (options.type) {
         case types.CREATE_SUBSCRIPTION:
@@ -13010,6 +13092,7 @@ class PaypalGateway {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway2),
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           coupon_code: couponCode,
           address_id: product.address_required ? addressId : null
         }, (err, res) => {
@@ -13037,6 +13120,7 @@ class PaypalGateway {
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           gift_recipient_email: giftRecipient.email,
           gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
           gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
@@ -13073,6 +13157,16 @@ var _paymentGateway3 = /*#__PURE__*/new WeakMap();
 
 var _createSubscription3 = /*#__PURE__*/new WeakMap();
 
+var _renewSubscription2 = /*#__PURE__*/new WeakMap();
+
+var _createGiftedSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _renewGiftedSubscription2 = /*#__PURE__*/new WeakMap();
+
+var _purchaseEcommerceOrder2 = /*#__PURE__*/new WeakMap();
+
+var _payInvoice3 = /*#__PURE__*/new WeakMap();
+
 class VantivGateway {
   constructor() {
     _paymentGateway3.set(this, {
@@ -13081,14 +13175,29 @@ class VantivGateway {
     });
 
     _defineProperty$3(this, "execute", (options, callback) => {
-      const types = SUBSCRIPTION_TYPES;
+      const types = PAYMENT_TYPES;
 
       switch (options.type) {
         case types.CREATE_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
 
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription2).call(this, options, callback);
+
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription3).call(this, options, callback);
+
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription2).call(this, options, callback);
+
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder2).call(this, options, callback);
+
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice3).call(this, options, callback);
+
         default:
-          console.error("Unsupported subscriptiion method: vantiv Gateway");
+          console.error("Unsupported payment method: vantiv Gateway");
       }
     });
 
@@ -13101,21 +13210,180 @@ class VantivGateway {
           couponCode,
           product,
           quantity = 1,
-          addressId
+          addressId,
+          isExistingSource
         } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
         window.Pelcro.subscription.create({
           quantity,
-          gateway_token: token,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _createGiftedSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
         }, (err, res) => {
           callback(err, res);
         });
       }
     });
+
+    _renewGiftedSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _purchaseEcommerceOrder2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _payInvoice3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
   }
 
 }
@@ -13175,7 +13443,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -13191,6 +13459,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
+  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
   useEffect(() => {
@@ -13207,60 +13476,185 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
-  function submitVantivPayment() {
+  const submitUsingVantiv = () => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using vantiv
+      return handleVantivPayment(null);
+    }
+
     if (!vantivInstanceRef.current) {
       return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
     }
 
-    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
 
     vantivInstanceRef.current.getPaypageRegistrationId({
       id: orderId,
       orderId: orderId
     });
-  }
+  };
+
+  function handleVantivPayment(paymentRequest) {
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
+
+      if (paymentRequest.response !== SUCCESS_STATUS) {
+        return handlePaymentError({
+          error: new Error(paymentRequest.message)
+        });
+      }
+    }
+
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
+    } else if (type === "updatePaymentSource") {
+      createNewVantivCard();
+    }
+
+    function createNewVantivCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
+
+    function handleVantivSubscription() {
+      const payment = new Payment(new VantivGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
 
-  function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
 
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
-    }
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
 
-    const subscription = new Subscription(new VantivGateway());
-    const {
-      couponCode
-    } = state;
-    return subscription.execute({
-      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
-      token: paymentRequest,
-      quantity: plan.quantity,
-      plan,
-      couponCode,
-      product,
-      addressId: selectedAddressId
-    }, (err, res) => {
-      if (err) {
-        return handlePaymentError(err);
+          onSuccess(res);
+        });
       }
-
-      onSuccess(res);
-    });
+    }
   }
 
   const vantivInstanceRef = React__default.useRef(null);
   useEffect(() => {
     const cardProcessor = getSiteCardProcessor();
 
-    if (cardProcessor === "vantiv") {
-      var _window$Pelcro$site$r;
+    if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
+      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_pay_page_id;
+      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
-        reportGroup: payPageId,
+        reportGroup: reportGroup,
         style: "pelcro",
         height: "245",
         timeout: 50000,
@@ -13277,7 +13671,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, []);
+  }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
     try {
@@ -13349,9 +13743,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r3;
 
-    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13508,6 +13902,7 @@ const PaymentMethodContainerWithoutStripe = ({
         window.Pelcro.order.create({
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           coupon_code: couponCode,
           address_id: selectedAddressId
         }, handleCouponResponse);
@@ -13589,6 +13984,7 @@ const PaymentMethodContainerWithoutStripe = ({
         stripe_token: !stripeSource.isExistingSource ? stripeSource.id : undefined,
         auth_token: window.Pelcro.user.read().auth_token,
         plan_id: plan.id,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
         quantity: plan.quantity,
         coupon_code: couponCode,
         gift_recipient_email: giftRecipient ? giftRecipient.email : null,
@@ -13660,6 +14056,7 @@ const PaymentMethodContainerWithoutStripe = ({
           stripe_token: !stripeSource.isExistingSource ? stripeSource.id : undefined,
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           coupon_code: couponCode,
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? selectedAddressId : null
@@ -13701,7 +14098,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateway());
+    const payment = new Payment(new PaypalGateway());
     const {
       couponCode
     } = state;
@@ -13710,8 +14107,8 @@ const PaymentMethodContainerWithoutStripe = ({
      */
 
     if (giftRecipient) {
-      return subscription.execute({
-        type: SUBSCRIPTION_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+      return payment.execute({
+        type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
         token: paypalNonce,
         quantity: plan.quantity,
         plan,
@@ -13744,8 +14141,8 @@ const PaymentMethodContainerWithoutStripe = ({
       });
     }
 
-    return subscription.execute({
-      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+    return payment.execute({
+      type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
       token: paypalNonce,
       quantity: plan.quantity,
       plan,
@@ -13777,7 +14174,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  const purchase = (stripeSource, state, dispatch) => {
+  const purchase = (gatewayService, gatewayToken, state, dispatch) => {
     const isQuickPurchase = !Array.isArray(order);
     const mappedOrderItems = isQuickPurchase ? [{
       sku_id: order.id,
@@ -13789,14 +14186,14 @@ const PaymentMethodContainerWithoutStripe = ({
     const {
       couponCode
     } = state;
-    window.Pelcro.ecommerce.order.create({
-      source_id: stripeSource.isExistingSource ? stripeSource.id : undefined,
-      stripe_token: !stripeSource.isExistingSource ? stripeSource.id : undefined,
+    const payment = new Payment(gatewayService);
+    payment.execute({
+      type: PAYMENT_TYPES.PURCHASE_ECOMMERCE_ORDER,
+      token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
       items: mappedOrderItems,
-      coupon_code: couponCode,
-      ...(selectedAddressId && {
-        address_id: selectedAddressId
-      })
+      addressId: selectedAddressId,
+      couponCode
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -13834,9 +14231,9 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const payInvoice = (gatewayService, gatewayToken, dispatch) => {
-    const subscription = new Subscription(gatewayService);
-    return subscription.execute({
-      type: SUBSCRIPTION_TYPES.PAY_INVOICE,
+    const payment = new Payment(gatewayService);
+    return payment.execute({
+      type: PAYMENT_TYPES.PAY_INVOICE,
       token: gatewayToken,
       isExistingSource: Boolean(selectedPaymentMethodId),
       invoiceId: invoice.id
@@ -13881,7 +14278,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : (_source$card2 = source.card) === null || _source$card2 === void 0 ? void 0 : _source$card2.three_d_secure) === "required") {
         return handlePaymentError({
-          message: t("messages.cardAuthNotSupported")
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
         });
       }
 
@@ -13996,13 +14395,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r3;
+    var _window$Pelcro$site$r4;
 
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
 
-    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -14012,6 +14411,7 @@ const PaymentMethodContainerWithoutStripe = ({
       window.Pelcro.order.create({
         auth_token: window.Pelcro.user.read().auth_token,
         plan_id: plan.id,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
@@ -14074,7 +14474,7 @@ const PaymentMethodContainerWithoutStripe = ({
     if (stripeSource && type === "createPayment") {
       subscribe(stripeSource, state, dispatch);
     } else if (stripeSource && type === "orderCreate") {
-      purchase(stripeSource, state, dispatch);
+      purchase(new StripeGateway(), stripeSource.id, state, dispatch);
     } else if (stripeSource && type === "invoicePayment") {
       payInvoice(new StripeGateway(), stripeSource.id, dispatch);
     }
@@ -14125,7 +14525,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : source.status) === "failed") {
         return handlePaymentError({
-          message: t("messages.cardAuthFailed")
+          error: {
+            message: t("messages.cardAuthFailed")
+          }
         });
       }
 
@@ -14196,6 +14598,10 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitUsingVantiv();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -14208,10 +14614,6 @@ const PaymentMethodContainerWithoutStripe = ({
             return updatePaymentSource(state, dispatch);
           }
 
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
-          }
-
           submitPayment(state);
         });
 
@@ -14516,17 +14918,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$l;
+var _path$m;
 
-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$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 SvgArrowLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14608,17 +15010,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$k;
+var _path$l;
 
-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 SvgTicket(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14907,7 +15309,7 @@ const PaypalSubscribeButton = props => {
     const selectedAddress = getAddressById((_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : selectedAddressId); // initialize paypal client, then render paypal button.
 
     const initializePaypal = async () => {
-      var _props$buttonElementI, _props$product$addres, _props$product, _props$plan2;
+      var _props$buttonElementI, _props$product$addres, _props$product;
 
       const paypalCheckoutInstance = new PaypalClient({
         buttonElementID: (_props$buttonElementI = props.buttonElementID) !== null && _props$buttonElementI !== void 0 ? _props$buttonElementI : "pelcro-paypal-button",
@@ -14917,12 +15319,33 @@ const PaypalSubscribeButton = props => {
         displayName: props.merchantDisplayName,
         locale: props.locale,
         billingAgreementDescription: props.billingDescription
-      }); // Await building paypal instance
+      });
+
+      const getProduct = () => {
+        if (invoice) {
+          invoice.plan = null;
+
+          if (invoice.plan) {
+            return invoice.plan;
+          } else {
+            // standalone invoices dont have a plan
+            return {
+              currency: invoice.currency,
+              nickname: `invoice #${invoice.id}`
+            };
+          }
+        } else if (props.plan) {
+          return props.plan;
+        } else {
+          return plan;
+        }
+      }; // Await building paypal instance
+
 
       await paypalCheckoutInstance.build(); // Create paypal payment
 
       paypalCheckoutInstance.createPayment({
-        product: invoice ? invoice.plan : (_props$plan2 = props.plan) !== null && _props$plan2 !== void 0 ? _props$plan2 : plan,
+        product: getProduct(),
         amount: updatedPrice,
         address: invoice ? null : selectedAddress,
         onButtonClick: () => {
@@ -14978,16 +15401,16 @@ const BankRedirection = () => {
   }));
 };
 
-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 SvgLock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.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"
@@ -15210,12 +15633,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-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 SvgGift(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -15224,7 +15647,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.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"
   })));
 }
@@ -16233,17 +16656,17 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone
 
 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$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 SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.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"
   })));
 }
@@ -19353,18 +19776,18 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(La
   store: store$6
 }, props));
 
-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 SvgInfoCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     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$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20376,8 +20799,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -20391,7 +20814,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -20575,7 +20998,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$h({}, _rest, {
+      return _render(_extends$i({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -21103,7 +21526,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default.createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$i({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -21147,7 +21570,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default.createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$i({}, sharedProps, {
     as: Fragment,
     children: React__default.createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -21274,12 +21697,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -21298,7 +21721,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -21309,19 +21732,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$h({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -21334,7 +21757,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -21373,19 +21796,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$h({}, state, {
+  return _extends$i({}, 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$h({}, state, {
+  return _extends$i({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -21406,7 +21829,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -21419,10 +21842,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$h({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -21430,11 +21853,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -21447,7 +21870,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -21508,18 +21931,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$f;
+var _path$g;
 
-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 SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     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$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21735,18 +22158,18 @@ const SavedItems = ({
   });
 };
 
-var _path$e;
+var _path$f;
 
-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 _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 SvgRefresh(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     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$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21754,35 +22177,35 @@ function SvgRefresh(props) {
   })));
 }
 
-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 SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     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$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.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$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 SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     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$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21790,17 +22213,17 @@ function SvgPlus(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 SvgCheckMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     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$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.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"
@@ -22095,13 +22518,31 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
+var _path$b;
+
+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 SvgExit(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    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$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+  })));
+}
+
 var _path$a;
 
 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 SvgExit(props) {
+function SvgUser(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$b({
-    className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -22110,7 +22551,7 @@ function SvgExit(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
   })));
 }
 
@@ -22118,9 +22559,10 @@ var _path$9;
 
 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 SvgUser(props) {
+function SvgNewsletter(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -22128,7 +22570,7 @@ function SvgUser(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
   })));
 }
 
@@ -22136,10 +22578,10 @@ var _path$8;
 
 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 SvgNewsletter(props) {
+function SvgDocument(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-5 plc-w-5",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -22147,7 +22589,7 @@ function SvgNewsletter(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
   })));
 }
 
@@ -22327,6 +22769,138 @@ function formatStartDate(date) {
   return new Intl.DateTimeFormat("en-CA").format(startDate);
 }
 
+const InvoicesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed"
+  }, /*#__PURE__*/React__default.createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.details")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.status.title")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+    className: "plc-h-4"
+  }), /*#__PURE__*/React__default.createElement(InvoicesItems, props)));
+};
+
+const InvoicesItems = () => {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const {
+    t
+  } = useTranslation("dashboard");
+  const {
+    setInvoice,
+    switchView
+  } = usePelcro();
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+
+  const showInvoiceDetails = event => {
+    if (setInvoice(event.target.dataset.id)) {
+      switchView("invoice-details");
+    }
+  };
+
+  if (invoices.length === 0) return null;
+  return invoices.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).map(invoice => {
+    const invoiceStatus = getInvoiceStatus(invoice);
+    const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(new Date(invoice.created_at));
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: invoice.id,
+      className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50`
+    }, /*#__PURE__*/React__default.createElement("td", {
+      className: "plc-truncate"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-font-semibold plc-text-gray-500"
+    }, `#${invoice.id}`), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, formattedCreationDate)), /*#__PURE__*/React__default.createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${invoiceStatus.bgColor} plc-uppercase ${invoiceStatus.textColor} plc-rounded-lg`
+    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-blue-400 focus:plc-ring-blue-400 pelcro-dashboard-view-invoice-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgDocument, {
+        className: "plc-w-4 plc-h-4"
+      }),
+      onClick: showInvoiceDetails,
+      "data-id": invoice.id
+    }, t("labels.view"))));
+  });
+};
+
+function getInvoiceStatus(invoice) {
+  const translations = i18next.t("dashboard:labels", {
+    returnObjects: true
+  });
+
+  switch (invoice.status) {
+    case "paid":
+      return {
+        textColor: "plc-text-green-700",
+        bgColor: "plc-bg-green-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null),
+        title: translations.paid
+      };
+
+    case "past_due":
+      return {
+        textColor: "plc-text-orange-700",
+        bgColor: "plc-bg-orange-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null),
+        title: translations.pastDue
+      };
+
+    case "open":
+      return {
+        textColor: "plc-text-yellow-700",
+        bgColor: "plc-bg-yellow-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null),
+        title: translations.open
+      };
+
+    case "draft":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
+        title: translations.draft
+      };
+
+    case "scheduled":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgCalendar, null),
+        title: translations.scheduled
+      };
+
+    case "uncollectible":
+      return {
+        textColor: "plc-text-red-700",
+        bgColor: "plc-bg-red-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+        title: translations.uncollectible
+      };
+
+    case "void":
+      return {
+        textColor: "plc-text-gray-700",
+        bgColor: "plc-bg-gray-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+        title: translations.void
+      };
+  }
+}
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -22880,6 +23454,12 @@ class Dashboard extends Component {
       icon: /*#__PURE__*/React__default.createElement(SvgShopping, null),
       title: this.locale("labels.orders.label"),
       content: /*#__PURE__*/React__default.createElement(OrdersMenu, null)
+    }), /*#__PURE__*/React__default.createElement(Accordion.item, {
+      show: hasInvoices(),
+      name: SUB_MENUS.INVOICES,
+      icon: /*#__PURE__*/React__default.createElement(SvgDocument, null),
+      title: this.locale("labels.invoices"),
+      content: /*#__PURE__*/React__default.createElement(InvoicesMenu, null)
     }), /*#__PURE__*/React__default.createElement(Accordion.item, {
       name: SUB_MENUS.SAVED_ITEMS,
       icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
@@ -22895,6 +23475,13 @@ class Dashboard extends Component {
 
 }
 
+function hasInvoices() {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  return invoices.length > 0;
+}
+
 function hasDonationSubs() {
   var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 
@@ -25068,6 +25655,8 @@ const InvoiceDetailsView = props => {
     invoice
   } = usePelcro();
   const showPayButton = canPayInvoice(invoice);
+  const showDownloadButton = Boolean(invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf);
+  const hasPlanDetails = Boolean(invoice.plan);
   const creationDate = new Date(invoice === null || invoice === void 0 ? void 0 : invoice.created_at);
   const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(creationDate);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -25085,7 +25674,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-bold pelcro-invoice-summary-title"
   }, t("labels.summary")), invoice && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-mr-2 pelcro-invoice-creation-date"
-  }, `${t("labels.creationDate")} ${formattedCreationDate}`), /*#__PURE__*/React__default.createElement("div", {
+  }, `${t("labels.creationDate")} ${formattedCreationDate}`), hasPlanDetails && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-pt-2 plc-mt-2 plc-border-t plc-border-gray-400 plc-min-h-12 plc-justify-between pelcro-invoice-plan-wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-break-words pelcro-invoice-plan-name"
@@ -25111,7 +25700,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-semibold pelcro-invoice-total"
   }, getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-justify-center plc-mt-4"
-  }, /*#__PURE__*/React__default.createElement(InvoiceDetailsDownloadButton, {
+  }, showDownloadButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsDownloadButton, {
     url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
     className: "plc-w-full plc-text-center"
   }), showPayButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsPayButton, {