@pelcro/react-pelcro-js 3.0.0-beta.10 → 3.0.0-beta.13

package/dist/index.cjs.js

@@ -3670,6 +3670,7 @@ var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
 var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
 var invalidInvoice$1 = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice$1 = "You can't view an invoice of 0$";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
@@ -3677,7 +3678,8 @@ var messages_en = {
 	successfully: successfully$1,
 	entitlement: entitlement$1,
 	recaptcha: recaptcha$1,
-	invalidInvoice: invalidInvoice$1
+	invalidInvoice: invalidInvoice$1,
+	zeroTotalInvoice: zeroTotalInvoice$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3687,6 +3689,7 @@ var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
 var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
 var invalidInvoice = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice = "You can't view an invoice of 0$";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
@@ -3694,7 +3697,8 @@ var messages_fr = {
 	successfully: successfully,
 	entitlement: entitlement,
 	recaptcha: recaptcha,
-	invalidInvoice: invalidInvoice
+	invalidInvoice: invalidInvoice,
+	zeroTotalInvoice: zeroTotalInvoice
 };
 
 var labels$j = {
@@ -3808,7 +3812,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (200 characters max)",
+		giftMessage: "Gift message ({{count}} characters remaining)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3904,7 +3908,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (200 caractères max)",
+		giftMessage: "Message du cadeau ({{count}} caractères restants)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -8625,7 +8629,6 @@ var pure_1 = pure.loadStripe;
  * @param {Object} error Error object
  * @return {string}
  */
-
 const getErrorMessages = error => {
   var _error$error, _error$response, _error$response$data, _error$response3, _error$response3$data, _error$response3$data2, _error$response5, _error$response5$data;
 
@@ -8680,20 +8683,6 @@ const debounce = (func, waitTime) => {
     timeout = setTimeout(later, waitTime);
   };
 };
-function getSiteCardProcessor() {
-  var _window$Pelcro$site$r;
-
-  const {
-    view
-  } = usePelcro.getStore();
-  const temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE = view === "subscription-create";
-
-  if (temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE && (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
-    return "vantiv";
-  }
-
-  return "stripe";
-}
 
 /**
  * @typedef {Object} OptionsType
@@ -8774,26 +8763,13 @@ const loadPaymentSDKs = () => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
     }
-  }); // Load PayPal SDKs
+  }); // Load PayPal SDK's
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
   if (supportsPaypal) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
-  } // Load Vantiv SDKs
-
-
-  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
-
-  if (supportsVantiv) {
-    if (!window.jQuery) {
-      window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
-    }
-
-    if (!window.EprotectIframeClient) {
-      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
-    }
   }
 };
 const loadAuth0SDK = () => {
@@ -9154,6 +9130,17 @@ const showInvoiceDetailsFromUrl = () => {
       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");
   });
 };
@@ -12757,7 +12744,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 class Subscription {
   /**
    * Subscription service  constructor
-   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateWay)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -12778,7 +12765,7 @@ class Subscription {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
+        return gateway && !(gateway instanceof StripeGateway) && gateway && !(gateway instanceof PaypalGateWay);
       }
     });
 
@@ -12810,6 +12797,7 @@ class Subscription {
    * @property {number} [quantity]
    * @property {string} addressId
    * @property {number} invoiceId
+   * @property {boolean} isExistingSource
    */
 
   /**
@@ -12830,8 +12818,7 @@ class Subscription {
 }
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
-  paypal: "braintree",
-  vantiv: "vantiv"
+  paypal: "braintree"
 };
 /**
  * Subscription Strategies
@@ -12995,11 +12982,15 @@ class StripeGateway {
           token,
           invoiceId
         } = options;
-        window.Pelcro.invoice.pay({
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway),
           gateway_token: token,
           invoice_id: invoiceId
-        }, (err, res) => {
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
           callback(err, res);
         });
       }
@@ -13019,7 +13010,7 @@ var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _payInvoice2 = /*#__PURE__*/new WeakMap();
 
-class PaypalGateway {
+class PaypalGateWay {
   constructor() {
     _paymentGateway2.set(this, {
       writable: true,
@@ -13120,57 +13111,6 @@ class PaypalGateway {
 
 }
 
-var _paymentGateway3 = /*#__PURE__*/new WeakMap();
-
-var _createSubscription3 = /*#__PURE__*/new WeakMap();
-
-class VantivGateway {
-  constructor() {
-    _paymentGateway3.set(this, {
-      writable: true,
-      value: PAYMENT_GATEWAYS_ENUM["vantiv"]
-    });
-
-    _defineProperty$3(this, "execute", (options, callback) => {
-      const types = SUBSCRIPTION_TYPES;
-
-      switch (options.type) {
-        case types.CREATE_SUBSCRIPTION:
-          return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
-
-        default:
-          console.error("Unsupported subscriptiion method: vantiv Gateway");
-      }
-    });
-
-    _createSubscription3.set(this, {
-      writable: true,
-      value: (options, callback) => {
-        const {
-          token,
-          plan,
-          couponCode,
-          product,
-          quantity = 1,
-          addressId
-        } = options;
-        window.Pelcro.subscription.create({
-          quantity,
-          gateway_token: token,
-          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
-          auth_token: window.Pelcro.user.read().auth_token,
-          plan_id: plan.id,
-          coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
-        }, (err, res) => {
-          callback(err, res);
-        });
-      }
-    });
-  }
-
-}
-
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -13258,78 +13198,6 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
-  function submitVantivPayment() {
-    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
-
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
-  }
-
-  function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
-
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
-    }
-
-    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);
-    });
-  }
-
-  const vantivInstanceRef = React__default['default'].useRef(null);
-  React.useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
-    if (cardProcessor === "vantiv") {
-      var _window$Pelcro$site$r;
-
-      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;
-      vantivInstanceRef.current = new window.EprotectIframeClient({
-        paypageId: payPageId,
-        reportGroup: payPageId,
-        style: "pelcro",
-        height: "245",
-        timeout: 50000,
-        div: "eProtectiframe",
-        callback: handleVantivPayment,
-        showCvv: true,
-        numYears: 8,
-        placeholderText: {
-          cvv: "CVV",
-          accountNumber: "1234 1234 1234 1234"
-        },
-        enhancedUxFeatures: {
-          inlineFieldValidations: true
-        }
-      });
-    }
-  }, []);
-
   const initPaymentRequest = (state, dispatch) => {
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -13400,9 +13268,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r;
 
-    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$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13752,7 +13620,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateway());
+    const subscription = new Subscription(new PaypalGateWay());
     const {
       couponCode
     } = state;
@@ -13889,6 +13757,7 @@ const PaymentMethodContainerWithoutStripe = ({
     return subscription.execute({
       type: SUBSCRIPTION_TYPES.PAY_INVOICE,
       token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
       invoiceId: invoice.id
     }, (err, res) => {
       dispatch({
@@ -13911,9 +13780,6 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
-      set({
-        invoice: null
-      });
       onSuccess(res);
     });
   };
@@ -14018,7 +13884,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
 
-      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
+      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
 
       if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
         return resolveTaxCalculation().then(res => {
@@ -14049,13 +13915,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r3;
+    var _window$Pelcro$site$r2;
 
     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$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -14134,8 +14000,6 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const handlePaymentError = error => {
-    var _getErrorMessages;
-
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -14154,7 +14018,7 @@ const PaymentMethodContainerWithoutStripe = ({
       type: SHOW_ALERT,
       payload: {
         type: "error",
-        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
+        content: error === null || error === void 0 ? void 0 : error.message
       }
     });
     dispatch({
@@ -14258,20 +14122,16 @@ const PaymentMethodContainerWithoutStripe = ({
           }
 
           if (type === "updatePaymentSource") {
-            return updatePaymentSource(state, dispatch);
-          }
-
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
+            updatePaymentSource(state, dispatch);
+          } else {
+            submitPayment(state);
           }
-
-          submitPayment(state);
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
         return lib_5(state, (state, dispatch) => {
           if (type === "invoicePayment") {
-            payInvoice(new PaypalGateWay(), action.payload, dispatch);
+            payInvoice(new PaypalGateway(), action.payload, dispatch);
           } else {
             handlePaypalSubscription(state, action.payload);
           }
@@ -14454,35 +14314,19 @@ const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
   } = usePelcro();
-  const cardProcessor = getSiteCardProcessor();
-
-  if (selectedPaymentMethodId) {
-    return null;
-  }
-
-  if (cardProcessor === "vantiv") {
-    return /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "eProtectiframe"
-    });
-  }
-
-  if (cardProcessor === "stripe") {
-    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
-      autoFocus: true
-    }), /*#__PURE__*/React__default['default'].createElement("img", {
-      alt: "credit_cards",
-      className: "plc-w-auto plc-h-4 plc-mt-2",
-      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-6/12 plc-pr-4"
-    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-6/12 plc-pl-4"
-    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
-  }
-
-  return null;
+  return !selectedPaymentMethodId && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
+    autoFocus: true
+  }), /*#__PURE__*/React__default['default'].createElement("img", {
+    alt: "credit_cards",
+    className: "plc-h-4 plc-w-auto plc-mt-2",
+    src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-6/12 plc-pr-4"
+  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-6/12 plc-pl-4"
+  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
 };
 
 const DiscountedPrice = props => {
@@ -15132,10 +14976,9 @@ function PaymentMethodView({
   const {
     t
   } = useTranslation("checkoutForm");
-  const cardProcessor = getSiteCardProcessor();
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -19553,6 +19396,8 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
@@ -19560,6 +19405,8 @@ function GiftCreateMessage(props) {
     dispatch,
     state
   } = React.useContext(store$6);
+  const MAX_CHARS_COUNT = 200;
+  const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
   const handleInputChange = value => {
     dispatch({
@@ -19577,6 +19424,9 @@ function GiftCreateMessage(props) {
     value: state.giftMessage,
     maxLength: "200",
     rows: 3,
+    label: t("gift.labels.giftMessage", {
+      count: remainingCharsCount
+    }),
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
 }
@@ -19626,8 +19476,7 @@ const GiftCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(GiftCreateMessage, {
     autoComplete: "gift-message",
     id: "pelcro-input-gift-message",
-    errorId: "pelcro-input-gift-message-error",
-    label: t("gift.labels.giftMessage")
+    errorId: "pelcro-input-gift-message-error"
   })), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("gift.labels.required")), /*#__PURE__*/React__default['default'].createElement(GiftCreateSubmitButton, {
@@ -22399,7 +22248,7 @@ const InvoicesMenu = props => {
 };
 
 const InvoicesItems = () => {
-  var _window$Pelcro$invoic;
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
 
   const {
     t
@@ -22408,7 +22257,7 @@ const InvoicesItems = () => {
     setInvoice,
     switchView
   } = usePelcro();
-  const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  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)) {
@@ -23084,9 +22933,9 @@ class Dashboard extends React.Component {
 }
 
 function hasInvoices() {
-  var _window$Pelcro$invoic;
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
 
-  const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  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;
 }
 
@@ -25281,11 +25130,11 @@ const InvoiceDetailsView = props => {
   }, t("labels.summary")), invoice && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-mr-2 pelcro-invoice-creation-date"
   }, `${t("labels.creationDate")} ${formattedCreationDate}`), /*#__PURE__*/React__default['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-evenly pelcro-invoice-plan-wrapper"
+    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['default'].createElement("div", {
-    className: "plc-w-1/2 plc-break-words pelcro-invoice-plan-name"
+    className: "plc-break-words pelcro-invoice-plan-name"
   }, invoice.plan.nickname), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-1/5 plc-text-center pelcro-invoice-summary-price"
+    className: "plc-text-center pelcro-invoice-summary-price"
   }, calcAndFormatItemsTotal([invoice.plan], invoice.currency))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-invoice-total-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("div", {

package/dist/index.esm.js

@@ -3640,6 +3640,7 @@ var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
 var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
 var invalidInvoice$1 = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice$1 = "You can't view an invoice of 0$";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
@@ -3647,7 +3648,8 @@ var messages_en = {
 	successfully: successfully$1,
 	entitlement: entitlement$1,
 	recaptcha: recaptcha$1,
-	invalidInvoice: invalidInvoice$1
+	invalidInvoice: invalidInvoice$1,
+	zeroTotalInvoice: zeroTotalInvoice$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3657,6 +3659,7 @@ var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
 var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
 var invalidInvoice = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice = "You can't view an invoice of 0$";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
@@ -3664,7 +3667,8 @@ var messages_fr = {
 	successfully: successfully,
 	entitlement: entitlement,
 	recaptcha: recaptcha,
-	invalidInvoice: invalidInvoice
+	invalidInvoice: invalidInvoice,
+	zeroTotalInvoice: zeroTotalInvoice
 };
 
 var labels$j = {
@@ -3778,7 +3782,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (200 characters max)",
+		giftMessage: "Gift message ({{count}} characters remaining)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3874,7 +3878,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (200 caractères max)",
+		giftMessage: "Message du cadeau ({{count}} caractères restants)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -8595,7 +8599,6 @@ var pure_1 = pure.loadStripe;
  * @param {Object} error Error object
  * @return {string}
  */
-
 const getErrorMessages = error => {
   var _error$error, _error$response, _error$response$data, _error$response3, _error$response3$data, _error$response3$data2, _error$response5, _error$response5$data;
 
@@ -8650,20 +8653,6 @@ const debounce = (func, waitTime) => {
     timeout = setTimeout(later, waitTime);
   };
 };
-function getSiteCardProcessor() {
-  var _window$Pelcro$site$r;
-
-  const {
-    view
-  } = usePelcro.getStore();
-  const temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE = view === "subscription-create";
-
-  if (temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE && (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
-    return "vantiv";
-  }
-
-  return "stripe";
-}
 
 /**
  * @typedef {Object} OptionsType
@@ -8744,26 +8733,13 @@ const loadPaymentSDKs = () => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
     }
-  }); // Load PayPal SDKs
+  }); // Load PayPal SDK's
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
   if (supportsPaypal) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
-  } // Load Vantiv SDKs
-
-
-  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
-
-  if (supportsVantiv) {
-    if (!window.jQuery) {
-      window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
-    }
-
-    if (!window.EprotectIframeClient) {
-      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
-    }
   }
 };
 const loadAuth0SDK = () => {
@@ -9124,6 +9100,17 @@ const showInvoiceDetailsFromUrl = () => {
       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");
   });
 };
@@ -12727,7 +12714,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 class Subscription {
   /**
    * Subscription service  constructor
-   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateWay)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -12748,7 +12735,7 @@ class Subscription {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
+        return gateway && !(gateway instanceof StripeGateway) && gateway && !(gateway instanceof PaypalGateWay);
       }
     });
 
@@ -12780,6 +12767,7 @@ class Subscription {
    * @property {number} [quantity]
    * @property {string} addressId
    * @property {number} invoiceId
+   * @property {boolean} isExistingSource
    */
 
   /**
@@ -12800,8 +12788,7 @@ class Subscription {
 }
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
-  paypal: "braintree",
-  vantiv: "vantiv"
+  paypal: "braintree"
 };
 /**
  * Subscription Strategies
@@ -12965,11 +12952,15 @@ class StripeGateway {
           token,
           invoiceId
         } = options;
-        window.Pelcro.invoice.pay({
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway),
           gateway_token: token,
           invoice_id: invoiceId
-        }, (err, res) => {
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
           callback(err, res);
         });
       }
@@ -12989,7 +12980,7 @@ var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _payInvoice2 = /*#__PURE__*/new WeakMap();
 
-class PaypalGateway {
+class PaypalGateWay {
   constructor() {
     _paymentGateway2.set(this, {
       writable: true,
@@ -13090,57 +13081,6 @@ class PaypalGateway {
 
 }
 
-var _paymentGateway3 = /*#__PURE__*/new WeakMap();
-
-var _createSubscription3 = /*#__PURE__*/new WeakMap();
-
-class VantivGateway {
-  constructor() {
-    _paymentGateway3.set(this, {
-      writable: true,
-      value: PAYMENT_GATEWAYS_ENUM["vantiv"]
-    });
-
-    _defineProperty$3(this, "execute", (options, callback) => {
-      const types = SUBSCRIPTION_TYPES;
-
-      switch (options.type) {
-        case types.CREATE_SUBSCRIPTION:
-          return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
-
-        default:
-          console.error("Unsupported subscriptiion method: vantiv Gateway");
-      }
-    });
-
-    _createSubscription3.set(this, {
-      writable: true,
-      value: (options, callback) => {
-        const {
-          token,
-          plan,
-          couponCode,
-          product,
-          quantity = 1,
-          addressId
-        } = options;
-        window.Pelcro.subscription.create({
-          quantity,
-          gateway_token: token,
-          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
-          auth_token: window.Pelcro.user.read().auth_token,
-          plan_id: plan.id,
-          coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
-        }, (err, res) => {
-          callback(err, res);
-        });
-      }
-    });
-  }
-
-}
-
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -13228,78 +13168,6 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
-  function submitVantivPayment() {
-    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
-
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
-  }
-
-  function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
-
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
-    }
-
-    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);
-    });
-  }
-
-  const vantivInstanceRef = React__default.useRef(null);
-  useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
-    if (cardProcessor === "vantiv") {
-      var _window$Pelcro$site$r;
-
-      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;
-      vantivInstanceRef.current = new window.EprotectIframeClient({
-        paypageId: payPageId,
-        reportGroup: payPageId,
-        style: "pelcro",
-        height: "245",
-        timeout: 50000,
-        div: "eProtectiframe",
-        callback: handleVantivPayment,
-        showCvv: true,
-        numYears: 8,
-        placeholderText: {
-          cvv: "CVV",
-          accountNumber: "1234 1234 1234 1234"
-        },
-        enhancedUxFeatures: {
-          inlineFieldValidations: true
-        }
-      });
-    }
-  }, []);
-
   const initPaymentRequest = (state, dispatch) => {
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -13370,9 +13238,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r;
 
-    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$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13722,7 +13590,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateway());
+    const subscription = new Subscription(new PaypalGateWay());
     const {
       couponCode
     } = state;
@@ -13859,6 +13727,7 @@ const PaymentMethodContainerWithoutStripe = ({
     return subscription.execute({
       type: SUBSCRIPTION_TYPES.PAY_INVOICE,
       token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
       invoiceId: invoice.id
     }, (err, res) => {
       dispatch({
@@ -13881,9 +13750,6 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
-      set({
-        invoice: null
-      });
       onSuccess(res);
     });
   };
@@ -13988,7 +13854,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
 
-      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
+      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
 
       if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
         return resolveTaxCalculation().then(res => {
@@ -14019,13 +13885,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r3;
+    var _window$Pelcro$site$r2;
 
     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$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -14104,8 +13970,6 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const handlePaymentError = error => {
-    var _getErrorMessages;
-
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -14124,7 +13988,7 @@ const PaymentMethodContainerWithoutStripe = ({
       type: SHOW_ALERT,
       payload: {
         type: "error",
-        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
+        content: error === null || error === void 0 ? void 0 : error.message
       }
     });
     dispatch({
@@ -14228,20 +14092,16 @@ const PaymentMethodContainerWithoutStripe = ({
           }
 
           if (type === "updatePaymentSource") {
-            return updatePaymentSource(state, dispatch);
-          }
-
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
+            updatePaymentSource(state, dispatch);
+          } else {
+            submitPayment(state);
           }
-
-          submitPayment(state);
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
         return lib_5(state, (state, dispatch) => {
           if (type === "invoicePayment") {
-            payInvoice(new PaypalGateWay(), action.payload, dispatch);
+            payInvoice(new PaypalGateway(), action.payload, dispatch);
           } else {
             handlePaypalSubscription(state, action.payload);
           }
@@ -14424,35 +14284,19 @@ const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
   } = usePelcro();
-  const cardProcessor = getSiteCardProcessor();
-
-  if (selectedPaymentMethodId) {
-    return null;
-  }
-
-  if (cardProcessor === "vantiv") {
-    return /*#__PURE__*/React__default.createElement("div", {
-      id: "eProtectiframe"
-    });
-  }
-
-  if (cardProcessor === "stripe") {
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
-      autoFocus: true
-    }), /*#__PURE__*/React__default.createElement("img", {
-      alt: "credit_cards",
-      className: "plc-w-auto plc-h-4 plc-mt-2",
-      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-w-6/12 plc-pr-4"
-    }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-w-6/12 plc-pl-4"
-    }, /*#__PURE__*/React__default.createElement(PelcroCardCVC, null))));
-  }
-
-  return null;
+  return !selectedPaymentMethodId && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
+    autoFocus: true
+  }), /*#__PURE__*/React__default.createElement("img", {
+    alt: "credit_cards",
+    className: "plc-h-4 plc-w-auto plc-mt-2",
+    src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-6/12 plc-pr-4"
+  }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-6/12 plc-pl-4"
+  }, /*#__PURE__*/React__default.createElement(PelcroCardCVC, null))));
 };
 
 const DiscountedPrice = props => {
@@ -15102,10 +14946,9 @@ function PaymentMethodView({
   const {
     t
   } = useTranslation("checkoutForm");
-  const cardProcessor = getSiteCardProcessor();
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -19523,6 +19366,8 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
@@ -19530,6 +19375,8 @@ function GiftCreateMessage(props) {
     dispatch,
     state
   } = useContext(store$6);
+  const MAX_CHARS_COUNT = 200;
+  const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
   const handleInputChange = value => {
     dispatch({
@@ -19547,6 +19394,9 @@ function GiftCreateMessage(props) {
     value: state.giftMessage,
     maxLength: "200",
     rows: 3,
+    label: t("gift.labels.giftMessage", {
+      count: remainingCharsCount
+    }),
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
 }
@@ -19596,8 +19446,7 @@ const GiftCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(GiftCreateMessage, {
     autoComplete: "gift-message",
     id: "pelcro-input-gift-message",
-    errorId: "pelcro-input-gift-message-error",
-    label: t("gift.labels.giftMessage")
+    errorId: "pelcro-input-gift-message-error"
   })), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("gift.labels.required")), /*#__PURE__*/React__default.createElement(GiftCreateSubmitButton, {
@@ -22369,7 +22218,7 @@ const InvoicesMenu = props => {
 };
 
 const InvoicesItems = () => {
-  var _window$Pelcro$invoic;
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
 
   const {
     t
@@ -22378,7 +22227,7 @@ const InvoicesItems = () => {
     setInvoice,
     switchView
   } = usePelcro();
-  const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  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)) {
@@ -23054,9 +22903,9 @@ class Dashboard extends Component {
 }
 
 function hasInvoices() {
-  var _window$Pelcro$invoic;
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
 
-  const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  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;
 }
 
@@ -25251,11 +25100,11 @@ const InvoiceDetailsView = props => {
   }, 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", {
-    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-evenly pelcro-invoice-plan-wrapper"
+    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-w-1/2 plc-break-words pelcro-invoice-plan-name"
+    className: "plc-break-words pelcro-invoice-plan-name"
   }, invoice.plan.nickname), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-1/5 plc-text-center pelcro-invoice-summary-price"
+    className: "plc-text-center pelcro-invoice-summary-price"
   }, calcAndFormatItemsTotal([invoice.plan], invoice.currency))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-invoice-total-wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.13",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",