@pelcro/react-pelcro-js 3.0.0 → 3.1.0-beta.1

package/dist/index.esm.js

@@ -3216,7 +3216,7 @@ var validation$1 = {
 	enterEmail: "Un courriel est requis.",
 	enterPassword: "Mot de passe requis."
 };
-var buttons$7 = {
+var buttons$9 = {
 	account: "Accès abonné(e)s",
 	login: "Se connecter"
 };
@@ -3293,7 +3293,7 @@ var confirm$5 = {
 };
 var common_fr = {
 	validation: validation$1,
-	buttons: buttons$7,
+	buttons: buttons$9,
 	dashboard: dashboard$1,
 	select: select$3,
 	confirm: confirm$5
@@ -3304,7 +3304,7 @@ var validation = {
 	enterEmail: "Email address is required.",
 	enterPassword: "Password is required."
 };
-var buttons$6 = {
+var buttons$8 = {
 	account: "My account",
 	login: "Login"
 };
@@ -3381,7 +3381,7 @@ var confirm$4 = {
 };
 var common_en = {
 	validation: validation,
-	buttons: buttons$6,
+	buttons: buttons$8,
 	dashboard: dashboard,
 	select: select$2,
 	confirm: confirm$4
@@ -3431,10 +3431,10 @@ var paymentMethod_fr = {
 	select: select
 };
 
-var title$d = "Enter your email to subscribe to our newsletter";
+var title$f = "Enter your email to subscribe to our newsletter";
 var updateTitle$1 = "Update newsletter selections";
 var subtitle$7 = "We may use your email for other marketing communication";
-var labels$n = {
+var labels$p = {
 	submit: "Submit",
 	firstName: "First name",
 	lastName: "Last name",
@@ -3450,17 +3450,17 @@ var messages$r = {
 	here: "here"
 };
 var newsletter_en = {
-	title: title$d,
+	title: title$f,
 	updateTitle: updateTitle$1,
 	subtitle: subtitle$7,
-	labels: labels$n,
+	labels: labels$p,
 	messages: messages$r
 };
 
-var title$c = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
+var title$e = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
 var updateTitle = "Mettre à jour son choix d'infolettres";
 var subtitle$6 = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
-var labels$m = {
+var labels$o = {
 	submit: "Lire l’article !",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
@@ -3476,14 +3476,14 @@ var messages$q = {
 	here: "ici"
 };
 var newsletter_fr = {
-	title: title$c,
+	title: title$e,
 	updateTitle: updateTitle,
 	subtitle: subtitle$6,
-	labels: labels$m,
+	labels: labels$o,
 	messages: messages$q
 };
 
-var labels$l = {
+var labels$n = {
 	"continue": "Continue to content"
 };
 var messages$p = {
@@ -3502,18 +3502,22 @@ var messages$p = {
 	giftRedeem: {
 		title: "Congratulations",
 		content: "You have successfully redeemed your gift subscription. Enjoy!"
+	},
+	invoicePayment: {
+		title: "Invoice paid successfully",
+		content: "Please contact us if you have any questions or concerns."
 	}
 };
 var errors$9 = {
 	"": ""
 };
 var success_en = {
-	labels: labels$l,
+	labels: labels$n,
 	messages: messages$p,
 	errors: errors$9
 };
 
-var labels$k = {
+var labels$m = {
 	"continue": "Abonnement réussi !"
 };
 var messages$o = {
@@ -3532,13 +3536,17 @@ var messages$o = {
 	giftRedeem: {
 		title: "Félicitations",
 		content: "Vous avez validé votre abonnement cadeau. Profitez-en!"
+	},
+	invoicePayment: {
+		title: "Invoice paid successfully",
+		content: "Please contact us if you have any questions or concerns."
 	}
 };
 var errors$8 = {
 	"": ""
 };
 var success_fr = {
-	labels: labels$k,
+	labels: labels$m,
 	messages: messages$o,
 	errors: errors$8
 };
@@ -3575,7 +3583,7 @@ var messages$l = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
 	bankRedirection: "Please hold, redirecting you to your bank."
 };
-var labels$j = {
+var labels$l = {
 	card: "Enter card number",
 	date: "Expiration date",
 	CVC: "CVC",
@@ -3595,14 +3603,14 @@ var labels$j = {
 };
 var checkoutForm_en = {
 	messages: messages$l,
-	labels: labels$j
+	labels: labels$l
 };
 
 var messages$k = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
 	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
 };
-var labels$i = {
+var labels$k = {
 	card: "Entrez le numéro de carte",
 	date: "Date d’expiration",
 	CVC: "CVC",
@@ -3622,7 +3630,7 @@ var labels$i = {
 };
 var checkoutForm_fr = {
 	messages: messages$k,
-	labels: labels$i
+	labels: labels$k
 };
 
 var youAreSafe$1 = "You're safe - PCI compliant 128 SSL by";
@@ -3631,13 +3639,17 @@ var giftSent$1 = "Subscription gift has been sent to";
 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,
 	giftSent: giftSent$1,
 	successfully: successfully$1,
 	entitlement: entitlement$1,
-	recaptcha: recaptcha$1
+	recaptcha: recaptcha$1,
+	invalidInvoice: invalidInvoice$1,
+	zeroTotalInvoice: zeroTotalInvoice$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3646,16 +3658,20 @@ var giftSent = "Le cadeau d’abonnement a été envoyé à";
 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,
 	giftSent: giftSent,
 	successfully: successfully,
 	entitlement: entitlement,
-	recaptcha: recaptcha
+	recaptcha: recaptcha,
+	invalidInvoice: invalidInvoice,
+	zeroTotalInvoice: zeroTotalInvoice
 };
 
-var labels$h = {
+var labels$j = {
 	email: "Enter email",
 	password: "Enter password",
 	required: "required",
@@ -3682,12 +3698,12 @@ var errors$5 = {
 	"": ""
 };
 var login_en = {
-	labels: labels$h,
+	labels: labels$j,
 	messages: messages$j,
 	errors: errors$5
 };
 
-var labels$g = {
+var labels$i = {
 	email: "Entrez votre adresse courriel",
 	password: "Entrez votre mot de passe",
 	required: "Champs obligatoires",
@@ -3714,14 +3730,14 @@ var errors$4 = {
 	"": ""
 };
 var login_fr = {
-	labels: labels$g,
+	labels: labels$i,
 	messages: messages$i,
 	errors: errors$4
 };
 
-var title$b = "Create an account";
+var title$d = "Create an account";
 var subtitle$5 = "Enter your email and password below";
-var labels$f = {
+var labels$h = {
 	signUpFacebook: "Sign up with Facebook",
 	signUpGoogle: "Sign up with Google",
 	signUpEmail: "Sign up with Email",
@@ -3766,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",
@@ -3805,18 +3821,18 @@ var redeem$1 = {
 	}
 };
 var register_en = {
-	title: title$b,
+	title: title$d,
 	subtitle: subtitle$5,
-	labels: labels$f,
+	labels: labels$h,
 	messages: messages$h,
 	errors: errors$3,
 	gift: gift$1,
 	redeem: redeem$1
 };
 
-var title$a = "Créer un compte";
+var title$c = "Créer un compte";
 var subtitle$4 = "Entrez votre courriel et votre mot de passe ci-dessous";
-var labels$e = {
+var labels$g = {
 	signUpFacebook: "Inscrivez-vous avec Facebook",
 	signUpGoogle: "Inscrivez-vous avec Google",
 	signUpEmail: "Inscrivez-vous avec votre courriel",
@@ -3862,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",
@@ -3901,16 +3917,16 @@ var redeem = {
 	}
 };
 var register_fr = {
-	title: title$a,
+	title: title$c,
 	subtitle: subtitle$4,
-	labels: labels$e,
+	labels: labels$g,
 	messages: messages$g,
 	errors: errors$2,
 	gift: gift,
 	redeem: redeem
 };
 
-var labels$d = {
+var labels$f = {
 	title: "Want to update your profile?",
 	subtitle: "Enter your information below to update your profile",
 	email: "Email",
@@ -3932,11 +3948,11 @@ var messages$f = {
 	pictureUpdated: "Your profile picture was updated successfully."
 };
 var userEdit_en = {
-	labels: labels$d,
+	labels: labels$f,
 	messages: messages$f
 };
 
-var labels$c = {
+var labels$e = {
 	title: "Voulez-vous mettre à jour votre profil ?",
 	subtitle: "Entrez vos informations ci-dessous pour mettre à jour votre profil",
 	email: "Address courriel",
@@ -3958,14 +3974,14 @@ var messages$e = {
 	pictureUpdated: "Votre photo de profil a été mise à jour avec succès."
 };
 var userEdit_fr = {
-	labels: labels$c,
+	labels: labels$e,
 	messages: messages$e
 };
 
-var title$9 = "Enter your shipping address";
+var title$b = "Enter your shipping address";
 var selectAddressTitle$1 = "Please select an address";
 var selectAddressSubtitle$1 = "Select one of your saved addresses, or add a new one";
-var labels$b = {
+var labels$d = {
 	address: "Address",
 	code: "Postal Code/Zip",
 	city: "City",
@@ -3975,7 +3991,7 @@ var labels$b = {
 	lastName: "Last name",
 	required: "required"
 };
-var buttons$5 = {
+var buttons$7 = {
 	submit: "Submit",
 	selectAddress: "Select address",
 	addAddress: "Add new address"
@@ -3985,18 +4001,18 @@ var messages$d = {
 	subRedeemed: "Your subscription has been redeemed."
 };
 var address_en = {
-	title: title$9,
+	title: title$b,
 	selectAddressTitle: selectAddressTitle$1,
 	selectAddressSubtitle: selectAddressSubtitle$1,
-	labels: labels$b,
-	buttons: buttons$5,
+	labels: labels$d,
+	buttons: buttons$7,
 	messages: messages$d
 };
 
-var title$8 = "Entrez votre adresse de livraison";
+var title$a = "Entrez votre adresse de livraison";
 var selectAddressTitle = "Veuillez sélectionner une adresse";
 var selectAddressSubtitle = "Choisissez l'une de vos adresses ou créez-en une nouvelle";
-var labels$a = {
+var labels$c = {
 	address: "Adresse",
 	code: "Code postal / Zip",
 	city: "Ville",
@@ -4006,7 +4022,7 @@ var labels$a = {
 	lastName: "Nom de famille",
 	required: "Champs obligatoires"
 };
-var buttons$4 = {
+var buttons$6 = {
 	submit: "Valider",
 	selectAddress: "Choisir cette adresse",
 	addAddress: "Ajouter une nouvelle adresse"
@@ -4016,15 +4032,15 @@ var messages$c = {
 	subRedeemed: "Votre abonnement a bien été activé."
 };
 var address_fr = {
-	title: title$8,
+	title: title$a,
 	selectAddressTitle: selectAddressTitle,
 	selectAddressSubtitle: selectAddressSubtitle,
-	labels: labels$a,
-	buttons: buttons$4,
+	labels: labels$c,
+	buttons: buttons$6,
 	messages: messages$c
 };
 
-var title$7 = "Reset your password";
+var title$9 = "Reset your password";
 var subtitle$3 = "Enter a new password below";
 var email$3 = "Email";
 var password$3 = "Password";
@@ -4033,7 +4049,7 @@ var submit$5 = "Submit";
 var required$5 = "Required";
 var passwordUpdated$1 = "Password has been updated, please login with the new password";
 var passwordReset_en = {
-	title: title$7,
+	title: title$9,
 	subtitle: subtitle$3,
 	email: email$3,
 	password: password$3,
@@ -4043,7 +4059,7 @@ var passwordReset_en = {
 	passwordUpdated: passwordUpdated$1
 };
 
-var title$6 = "Réinitialiser votre mot de passe";
+var title$8 = "Réinitialiser votre mot de passe";
 var subtitle$2 = "Entrez un nouveau mot de passe ci-dessous";
 var email$2 = "Adresse courriel";
 var password$2 = "Mot de passe";
@@ -4052,7 +4068,7 @@ var submit$4 = "Soumettre";
 var required$4 = "Champs obligatoires";
 var passwordUpdated = "Votre mot de passe a été mis à jour, veuillez vous connecter avec celui-ci";
 var passwordReset_fr = {
-	title: title$6,
+	title: title$8,
 	subtitle: subtitle$2,
 	email: email$2,
 	password: password$2,
@@ -4062,7 +4078,7 @@ var passwordReset_fr = {
 	passwordUpdated: passwordUpdated
 };
 
-var title$5 = "Forgot your password?";
+var title$7 = "Forgot your password?";
 var email$1 = "Email";
 var password$1 = "Password";
 var submit$3 = "Submit";
@@ -4073,7 +4089,7 @@ var messages$b = {
 	loginHere: "login here."
 };
 var passwordForgot_en = {
-	title: title$5,
+	title: title$7,
 	email: email$1,
 	password: password$1,
 	submit: submit$3,
@@ -4082,7 +4098,7 @@ var passwordForgot_en = {
 	messages: messages$b
 };
 
-var title$4 = "Mot de passe oublié ?";
+var title$6 = "Mot de passe oublié ?";
 var email = "Courriel";
 var password = "Mot de passe";
 var submit$2 = "Soumettre";
@@ -4093,7 +4109,7 @@ var messages$a = {
 	loginHere: "Connectez-vous ici"
 };
 var passwordForgot_fr = {
-	title: title$4,
+	title: title$6,
 	email: email,
 	password: password,
 	submit: submit$2,
@@ -4102,7 +4118,7 @@ var passwordForgot_fr = {
 	messages: messages$a
 };
 
-var title$3 = "Change your password";
+var title$5 = "Change your password";
 var currentPassword$1 = "Current password";
 var newPassword$1 = "New password";
 var confirmNewPassword$1 = "Confirm new password";
@@ -4112,7 +4128,7 @@ var passwordChanged$1 = "Password has been changed, please login with the new pa
 var passwordsNotMatching$1 = "Passwords don't match";
 var weakPassword$1 = "Your password must contain at least 6 characters";
 var passwordChange_en = {
-	title: title$3,
+	title: title$5,
 	currentPassword: currentPassword$1,
 	newPassword: newPassword$1,
 	confirmNewPassword: confirmNewPassword$1,
@@ -4123,7 +4139,7 @@ var passwordChange_en = {
 	weakPassword: weakPassword$1
 };
 
-var title$2 = "Changez votre mot de passe";
+var title$4 = "Changez votre mot de passe";
 var currentPassword = "Mot de passe actuel";
 var newPassword = "Nouveau mot de passe";
 var confirmNewPassword = "Confirmer le nouveau mot de passe";
@@ -4133,7 +4149,7 @@ var passwordChanged = "Le mot de passe a été modifié, veuillez vous connecter
 var passwordsNotMatching = "Les mots de passe ne correspondent pas";
 var weakPassword = "Votre mot de passe doit contenir au moins 6";
 var passwordChange_fr = {
-	title: title$2,
+	title: title$4,
 	currentPassword: currentPassword,
 	newPassword: newPassword,
 	confirmNewPassword: confirmNewPassword,
@@ -4144,7 +4160,7 @@ var passwordChange_fr = {
 	weakPassword: weakPassword
 };
 
-var title$1 = "Votre panier";
+var title$3 = "Votre panier";
 var subtitle$1 = "Terminez votre achat ci-dessous";
 var name$1 = "Produit";
 var quantity$1 = "Quantité";
@@ -4156,7 +4172,7 @@ var confirm$3 = "Passer à la caisse";
 var empty$1 = "Votre panier est vide.";
 var removeAll$1 = "Vider";
 var cart_fr = {
-	title: title$1,
+	title: title$3,
 	subtitle: subtitle$1,
 	name: name$1,
 	quantity: quantity$1,
@@ -4169,7 +4185,7 @@ var cart_fr = {
 	removeAll: removeAll$1
 };
 
-var title = "Your shopping cart";
+var title$2 = "Your shopping cart";
 var subtitle = "Comple your purchase below";
 var name = "Name";
 var quantity = "Quantity";
@@ -4181,7 +4197,7 @@ var confirm$2 = "Checkout";
 var empty = "Your cart is empty.";
 var removeAll = "Remove all";
 var cart_en = {
-	title: title,
+	title: title$2,
 	subtitle: subtitle,
 	name: name,
 	quantity: quantity,
@@ -4194,7 +4210,7 @@ var cart_en = {
 	removeAll: removeAll
 };
 
-var buttons$3 = {
+var buttons$5 = {
 	select: "Select",
 	added: "Added to cart",
 	purchase: "Purchase",
@@ -4209,17 +4225,17 @@ var messages$9 = {
 	multipleCurrencies: "Your cart currently contains items which are available in different currencies. In order to proceed with the checkout, please make sure that all items have the same currency.",
 	currencyMismatch: "The selected item(s) do not match your current default currency ({{currency}}). Please choose item(s) only matching this currency."
 };
-var labels$9 = {
+var labels$b = {
 	summary: "Order summary",
 	total: "total"
 };
 var shop_en = {
-	buttons: buttons$3,
+	buttons: buttons$5,
 	messages: messages$9,
-	labels: labels$9
+	labels: labels$b
 };
 
-var buttons$2 = {
+var buttons$4 = {
 	select: "Choisir",
 	added: "Ajouté au panier",
 	purchase: "Acheter",
@@ -4234,17 +4250,17 @@ var messages$8 = {
 	multipleCurrencies: "Votre panier contient des articles disponibles dans différentes devises. Avant de passer à la caisse, veuillez vous assurer que tous les articles ont la même devise.",
 	currencyMismatch: "Les articles sélectionnés ne sont pas compatibles avec la devise associée à votre compte ({{currency}}). Veuillez choisir des articles uniquement offerts dans cette devise."
 };
-var labels$8 = {
+var labels$a = {
 	summary: "récapitulatif de commande",
 	total: "total"
 };
 var shop_fr = {
-	buttons: buttons$2,
+	buttons: buttons$4,
 	messages: messages$8,
-	labels: labels$8
+	labels: labels$a
 };
 
-var labels$7 = {
+var labels$9 = {
 	cardNumber: "Numéro de carte",
 	securityCode: "Code de sécurité",
 	submit: "Soumettre",
@@ -4279,12 +4295,12 @@ var errors$1 = {
 	"": ""
 };
 var payment_fr = {
-	labels: labels$7,
+	labels: labels$9,
 	messages: messages$7,
 	errors: errors$1
 };
 
-var labels$6 = {
+var labels$8 = {
 	cardNumber: "Card number",
 	securityCode: "Security Code",
 	submit: "Submit",
@@ -4319,12 +4335,12 @@ var errors = {
 	"": ""
 };
 var payment_en = {
-	labels: labels$6,
+	labels: labels$8,
 	messages: messages$6,
 	errors: errors
 };
 
-var labels$5 = {
+var labels$7 = {
 	menu: "Pelcro Menu",
 	name: "Name",
 	email: "Email",
@@ -4349,6 +4365,16 @@ var labels$5 = {
 	purchases: "Purchases",
 	subscriptions: "Subscriptions",
 	donations: "Donations",
+	invoices: "Invoices",
+	details: "Details",
+	view: "View",
+	paid: "Paid",
+	open: "Open",
+	draft: "Draft",
+	scheduled: "Scheduled",
+	uncollectible: "Uncollectible",
+	"void": "Void",
+	pastDue: "Past due",
 	updatePaymentSource: "Update",
 	profile: "Profile",
 	updateProfile: "Edit profile",
@@ -4401,11 +4427,11 @@ var messages$5 = {
 	}
 };
 var dashboard_en = {
-	labels: labels$5,
+	labels: labels$7,
 	messages: messages$5
 };
 
-var labels$4 = {
+var labels$6 = {
 	menu: "Menu Pelcro",
 	name: "Nom",
 	email: "Courriel",
@@ -4430,6 +4456,16 @@ var labels$4 = {
 	purchases: "Achats",
 	subscriptions: "Abonnements",
 	donations: "Des dons",
+	invoices: "Invoices",
+	details: "Details",
+	view: "View",
+	paid: "Paid",
+	open: "open",
+	draft: "Draft",
+	scheduled: "Scheduled",
+	uncollectible: "Uncollectible",
+	"void": "Void",
+	pastDue: "Past due",
 	updatePaymentSource: "Mettre à jour la source de paiement",
 	profile: "Profil",
 	updateProfile: "Mettre à jour le profil",
@@ -4482,7 +4518,7 @@ var messages$4 = {
 	}
 };
 var dashboard_fr = {
-	labels: labels$4,
+	labels: labels$6,
 	messages: messages$4
 };
 
@@ -4491,7 +4527,7 @@ var messages$3 = {
 	loginHere: "Login here",
 	checkbox: "Check this box to gift this subscription"
 };
-var labels$3 = {
+var labels$5 = {
 	plan: {
 		title: "Subscribe to a plan",
 		subtitle: "Select one of the plans below and click on next."
@@ -4508,15 +4544,15 @@ var labels$3 = {
 		or: "Or take a look at some of our other options below"
 	}
 };
-var buttons$1 = {
+var buttons$3 = {
 	next: "Next",
 	select: "Select",
 	back: "Back"
 };
 var select_en = {
 	messages: messages$3,
-	labels: labels$3,
-	buttons: buttons$1
+	labels: labels$5,
+	buttons: buttons$3
 };
 
 var messages$2 = {
@@ -4524,7 +4560,7 @@ var messages$2 = {
 	loginHere: "Connectez-vous ici",
 	checkbox: "Cochez cette case pour offrir cet abonnement"
 };
-var labels$2 = {
+var labels$4 = {
 	plan: {
 		title: "Abonnez-vous à un plan",
 		subtitle: "Sélectionnez l’un des plans ci-dessous et cliquez sur suivant."
@@ -4541,15 +4577,15 @@ var labels$2 = {
 		or: "Sinon, jetez un coup d'oeil à d'autres offres ci-dessous"
 	}
 };
-var buttons = {
+var buttons$2 = {
 	next: "Prochain",
 	select: "Choisir",
 	back: "Retour"
 };
 var select_fr = {
 	messages: messages$2,
-	labels: labels$2,
-	buttons: buttons
+	labels: labels$4,
+	buttons: buttons$2
 };
 
 var confirm$1 = {
@@ -4572,7 +4608,7 @@ var notification_fr = {
 	confirm: confirm
 };
 
-var labels$1 = {
+var labels$3 = {
 	title: "Verify your email",
 	instructions: "You're on your way!\nLet's confirm your email address.\nClick on the verification link we've sent to your email:",
 	resend: "Resend email"
@@ -4582,24 +4618,60 @@ var messages$1 = {
 	success: "Email verified successfully!"
 };
 var verifyEmail_en = {
-	labels: labels$1,
+	labels: labels$3,
 	messages: messages$1
 };
 
-var labels = {
-	title: "Vérifiez votre e-mail",
-	instructions: "Vous êtes en route!\nConfirmons votre adresse e-mail.\nCliquez sur le lien de vérification que nous vous avons envoyé par e-mail:",
-	resend: "Ré-envoyer l'email"
+var labels$2 = {
+	title: "Confirmez votre courriel",
+	instructions: "Confirmez votre courriel.\nVeuillez cliquer sur le lien de vérification, qui vous a été envoyé à:",
+	resend: "Renvoyer le courriel"
 };
 var messages = {
 	resent: "Renvoyé avec succès",
-	success: "Email vérifié avec succès!"
+	success: "Adresse courriel vérifiée avec succès"
 };
 var verifyEmail_fr = {
-	labels: labels,
+	labels: labels$2,
 	messages: messages
 };
 
+var title$1 = "Invoice details";
+var labels$1 = {
+	summary: "Summary",
+	total: "Total",
+	amountPaid: "Amount paid",
+	amountDue: "Amount due",
+	creationDate: "Created on:"
+};
+var buttons$1 = {
+	download: "Download",
+	pay: "Pay now"
+};
+var invoiceDetails_en = {
+	title: title$1,
+	labels: labels$1,
+	buttons: buttons$1
+};
+
+var title = "Invoice details";
+var labels = {
+	summary: "Summary",
+	total: "Total",
+	amountPaid: "Amount paid",
+	amountDue: "Amount due",
+	creationDate: "Created on:"
+};
+var buttons = {
+	download: "Download",
+	pay: "Pay now"
+};
+var invoiceDetails_fr = {
+	title: title,
+	labels: labels,
+	buttons: buttons
+};
+
 function create$1(createState) {
   let state;
   const listeners = new Set();
@@ -5949,7 +6021,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$h;
+      } = initialState$i;
       this.set(otherStateFields);
     });
 
@@ -5993,10 +6065,11 @@ class PelcroActions {
         resetView,
         switchToCheckoutForm,
         product,
-        order
+        order,
+        invoice
       } = this.get();
 
-      if (product || order) {
+      if (product || order || invoice) {
         // direct user to stripe checkout form when there are no existing cards
         if (!userHasPaymentMethod()) {
           return switchToCheckoutForm();
@@ -6013,7 +6086,8 @@ class PelcroActions {
         switchView,
         product,
         subscriptionIdToRenew,
-        order
+        order,
+        invoice
       } = this.get();
 
       if (product && subscriptionIdToRenew) {
@@ -6027,6 +6101,10 @@ class PelcroActions {
       if (order) {
         return switchView("order-create");
       }
+
+      if (invoice) {
+        return switchView("invoice-payment");
+      }
     });
 
     _defineProperty$3(this, "switchToAddressView", () => {
@@ -6057,6 +6135,23 @@ class PelcroActions {
       });
     });
 
+    _defineProperty$3(this, "setInvoice", id => {
+      var _window$Pelcro$invoic;
+
+      const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+      const invoice = invoices.find(inv => String(inv.id) === String(id));
+
+      if (!invoice) {
+        console.error("invalid invoice id");
+        return false;
+      }
+
+      this.set({
+        invoice
+      });
+      return true;
+    });
+
     _defineProperty$3(this, "logout", () => {
       var _ReactGA$event;
 
@@ -6245,7 +6340,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$h = {
+const initialState$i = {
   // View
   view: null,
   // Plans
@@ -6260,6 +6355,8 @@ const initialState$h = {
   cartItems: [],
   order: null,
   // null | SKU[] | SKU,
+  // invoices
+  invoice: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -6273,7 +6370,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$h,
+    ...initialState$i,
     // State actions
     ...actions,
     // Callbacks
@@ -6424,7 +6521,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
  */
 
 const isValidViewFromURL = viewID => {
-  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
+  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify", "invoice-details"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
     return true;
   }
 
@@ -6651,7 +6748,8 @@ const resources = {
     payment: payment_en,
     dashboard: dashboard_en,
     select: select_en,
-    notification: notification_en
+    notification: notification_en,
+    invoiceDetails: invoiceDetails_en
   },
   fr: {
     common: common_fr,
@@ -6674,7 +6772,8 @@ const resources = {
     payment: payment_fr,
     dashboard: dashboard_fr,
     select: select_fr,
-    notification: notification_fr
+    notification: notification_fr,
+    invoiceDetails: invoiceDetails_fr
   }
 }; // set UI language to the page language or default to the language in site settings
 
@@ -6965,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];
 
@@ -6980,7 +7079,7 @@ function _extends$y() {
     return target;
   };
 
-  return _extends$y.apply(this, arguments);
+  return _extends$z.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -7070,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)
       });
 
@@ -7080,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;
         })
       });
 
@@ -7109,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;
         })
@@ -7119,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
           });
         })
@@ -7187,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
   });
 };
@@ -7202,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,
@@ -7252,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));
   });
@@ -7598,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
@@ -7628,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',
@@ -7655,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,
@@ -7690,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",
@@ -8799,6 +8898,10 @@ const initViewFromURL = () => {
         return verifyEmailTokenFromUrl();
       }
 
+      if (view === "invoice-details") {
+        return showInvoiceDetailsFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -8975,6 +9078,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,
@@ -9314,7 +9454,7 @@ const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
 const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 
-const initialState$g = {
+const initialState$h = {
   email: "",
   password: "",
   emailError: null,
@@ -9325,10 +9465,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/createContext(initialState$g);
+const store$h = /*#__PURE__*/createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 
 const LoginContainer = ({
   style,
@@ -9435,7 +9575,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$g;
+        return initialState$h;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9453,12 +9593,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$g, {
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -9466,12 +9606,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -9716,7 +9856,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     t
   } = useTranslation("login");
@@ -9737,23 +9877,23 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$g
+  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"
@@ -9818,7 +9958,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$f = {
+const initialState$g = {
   email: "",
   password: "",
   emailError: null,
@@ -9835,10 +9975,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/createContext(initialState$f);
+const store$g = /*#__PURE__*/createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 
 const RegisterContainer = ({
   style,
@@ -10021,7 +10161,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$f;
+        return initialState$g;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -10039,12 +10179,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$f, {
+  }, /*#__PURE__*/React__default.createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -10052,12 +10192,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 /**
@@ -10072,15 +10212,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"
   })));
@@ -10097,10 +10237,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -10153,15 +10293,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", {
@@ -10187,10 +10327,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -10238,15 +10378,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"
   })));
 }
@@ -10286,10 +10426,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -10422,15 +10562,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"
@@ -10577,11 +10717,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const RegisterButton = ({
@@ -10601,7 +10741,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     t
   } = useTranslation("register");
@@ -10739,7 +10879,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function LastName({
@@ -10770,7 +10910,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 /**
@@ -10894,7 +11034,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
@@ -12563,7 +12703,8 @@ const SUBSCRIPTION_TYPES = {
   CREATE_SUBSCRIPTION: "CREATE_SUBSCRIPTION",
   CREATE_GIFTED_SUBSCRIPTION: "CREATE_GIFTED_SUBSCRIPTION",
   RENEW_SUBSCRIPTION: "RENEW_SUBSCRIPTION",
-  RENEW_GIFTED_SUBSCRIPTION: "RENEW_GIFTED_SUBSCRIPTION"
+  RENEW_GIFTED_SUBSCRIPTION: "RENEW_GIFTED_SUBSCRIPTION",
+  PAY_INVOICE: "PAY_INVOICE"
 };
 
 var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
@@ -12625,6 +12766,8 @@ class Subscription {
    * @property {number} [subscriptionIdToRenew]
    * @property {number} [quantity]
    * @property {string} addressId
+   * @property {number} invoiceId
+   * @property {boolean} isExistingSource
    */
 
   /**
@@ -12665,6 +12808,8 @@ var _renewSubscription = /*#__PURE__*/new WeakMap();
 
 var _renewGiftedSubscription = /*#__PURE__*/new WeakMap();
 
+var _payInvoice = /*#__PURE__*/new WeakMap();
+
 class StripeGateway {
   constructor() {
     _paymentGateway.set(this, {
@@ -12688,6 +12833,9 @@ class StripeGateway {
         case types.RENEW_GIFTED_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _renewGiftedSubscription).call(this, options, callback);
 
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice).call(this, options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: Stripe Gateway");
       }
@@ -12796,6 +12944,27 @@ class StripeGateway {
         });
       }
     });
+
+    _payInvoice.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, _paymentGateway),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
   }
 
 }
@@ -12809,6 +12978,8 @@ var _createSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
+var _payInvoice2 = /*#__PURE__*/new WeakMap();
+
 class PaypalGateWay {
   constructor() {
     _paymentGateway2.set(this, {
@@ -12826,6 +12997,9 @@ class PaypalGateWay {
         case types.CREATE_GIFTED_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createGiftedSubscription2).call(this, options, callback);
 
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice2).call(this, options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: PayPal Gateway");
       }
@@ -12886,6 +13060,23 @@ class PaypalGateWay {
         });
       }
     });
+
+    _payInvoice2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        window.Pelcro.invoice.pay({
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway2),
+          gateway_token: token,
+          invoice_id: invoiceId
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
   }
 
 }
@@ -12910,7 +13101,7 @@ class PaypalGateWay {
 
 /** @type {PaymentStateType} */
 
-const initialState$e = {
+const initialState$f = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -12929,10 +13120,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/createContext(initialState$e);
+const store$f = /*#__PURE__*/createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -12945,7 +13136,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -12962,6 +13153,7 @@ const PaymentMethodContainerWithoutStripe = ({
   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 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(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -13530,6 +13722,38 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
+  const payInvoice = (gatewayService, gatewayToken, dispatch) => {
+    const subscription = new Subscription(gatewayService);
+    return subscription.execute({
+      type: SUBSCRIPTION_TYPES.PAY_INVOICE,
+      token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
+      invoiceId: invoice.id
+    }, (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)
+          }
+        });
+      }
+
+      onSuccess(res);
+    });
+  };
+
   const updatePaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
@@ -13604,13 +13828,17 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _ref, _state$updatedPrice, _source$card3;
+      var _ref, _ref2, _state$updatedPrice, _source$card3;
 
       if (error) {
         return handlePaymentError(error);
       }
 
       const getOrderItemsTotal = () => {
+        if (!order) {
+          return null;
+        }
+
         const isQuickPurchase = !Array.isArray(order);
 
         if (isQuickPurchase) {
@@ -13626,7 +13854,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
 
-      const totalAmount = (_ref = (_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 && _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 => {
@@ -13659,6 +13887,10 @@ const PaymentMethodContainerWithoutStripe = ({
   const resolveTaxCalculation = () => {
     var _window$Pelcro$site$r2;
 
+    if (type === "invoicePayment") {
+      return new Promise(resolve => resolve());
+    }
+
     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
@@ -13732,6 +13964,8 @@ const PaymentMethodContainerWithoutStripe = ({
       subscribe(stripeSource, state, dispatch);
     } else if (stripeSource && type === "orderCreate") {
       purchase(stripeSource, state, dispatch);
+    } else if (stripeSource && type === "invoicePayment") {
+      payInvoice(new StripeGateway(), stripeSource.id, dispatch);
     }
   };
 
@@ -13865,7 +14099,13 @@ const PaymentMethodContainerWithoutStripe = ({
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
-        return lib_5(state, () => handlePaypalSubscription(state, action.payload));
+        return lib_5(state, (state, dispatch) => {
+          if (type === "invoicePayment") {
+            payInvoice(new PaypalGateway(), action.payload, dispatch);
+          } else {
+            handlePaypalSubscription(state, action.payload);
+          }
+        });
 
       case SET_UPDATED_PRICE:
         return lib_7({ ...state,
@@ -13923,21 +14163,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$e, {
+  }, /*#__PURE__*/React__default.createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -13959,7 +14199,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$e
+      store: store$f
     }, props))));
   }
 
@@ -14012,7 +14252,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -14072,7 +14312,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     order,
     plan
@@ -14122,7 +14362,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -14143,17 +14383,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,
@@ -14172,7 +14412,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14206,7 +14446,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -14235,17 +14475,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,
@@ -14262,7 +14502,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14519,17 +14759,18 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     product,
     plan,
+    invoice,
     selectedAddressId
   } = usePelcro();
   useEffect(() => {
-    var _ref, _state$updatedPrice, _props$plan, _props$selectedAddres;
+    var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
     // sometimes, price is updated. eg. Coupon codes.
-    const updatedPrice = (_ref = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref !== void 0 ? _ref : plan.amount;
+    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice.amount_remaining;
     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 () => {
@@ -14538,7 +14779,7 @@ const PaypalSubscribeButton = props => {
       const paypalCheckoutInstance = new PaypalClient({
         buttonElementID: (_props$buttonElementI = props.buttonElementID) !== null && _props$buttonElementI !== void 0 ? _props$buttonElementI : "pelcro-paypal-button",
         style: props.buttonStyle,
-        enableShippingAddress: (_props$product$addres = (_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.address_required) !== null && _props$product$addres !== void 0 ? _props$product$addres : product.address_required,
+        enableShippingAddress: (_props$product$addres = (_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.address_required) !== null && _props$product$addres !== void 0 ? _props$product$addres : product === null || product === void 0 ? void 0 : product.address_required,
         shippingAddressEditable: props.makeAddressEditable,
         displayName: props.merchantDisplayName,
         locale: props.locale,
@@ -14548,9 +14789,9 @@ const PaypalSubscribeButton = props => {
       await paypalCheckoutInstance.build(); // Create paypal payment
 
       paypalCheckoutInstance.createPayment({
-        product: (_props$plan2 = props.plan) !== null && _props$plan2 !== void 0 ? _props$plan2 : plan,
+        product: invoice ? invoice.plan : (_props$plan2 = props.plan) !== null && _props$plan2 !== void 0 ? _props$plan2 : plan,
         amount: updatedPrice,
-        address: selectedAddress,
+        address: invoice ? null : selectedAddress,
         onButtonClick: () => {
           dispatch({
             type: DISABLE_SUBMIT,
@@ -14604,16 +14845,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"
@@ -14630,7 +14871,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     switchView,
     selectedPaymentMethodId
@@ -14672,7 +14913,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     plan
   } = usePelcro();
@@ -14835,12 +15076,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",
@@ -14849,7 +15090,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"
   })));
 }
@@ -14887,10 +15128,13 @@ const getCurrentFlow = () => {
   const {
     product,
     giftRecipient,
-    giftCode
+    giftCode,
+    invoice
   } = usePelcro.getStore();
 
-  if (giftRecipient) {
+  if (invoice) {
+    return "invoicePayment";
+  } else if (giftRecipient) {
     return "giftCreate";
   } else if (giftCode) {
     return "giftRedeem";
@@ -14927,6 +15171,13 @@ const getSuccessContent = i18n => {
       }),
       successTitle: i18n("messages.giftRedeem.title"),
       successContent: i18n("messages.giftRedeem.content")
+    },
+    invoicePayment: {
+      successIcon: /*#__PURE__*/React__default.createElement(SvgCheckSolid, {
+        className: "plc-w-32 plc-my-4 plc-text-green-500"
+      }),
+      successTitle: i18n("messages.invoicePayment.title"),
+      successContent: i18n("messages.invoicePayment.title")
     }
   };
   return wordingDictionary[flow];
@@ -15180,7 +15431,7 @@ class DefaultNewsLetter extends Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$d = {
+const initialState$e = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -15190,10 +15441,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/createContext(initialState$d);
+const store$e = /*#__PURE__*/createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const NewsletterUpdateContainer = ({
   style,
@@ -15306,7 +15557,7 @@ const NewsletterUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -15350,7 +15601,7 @@ const NewsletterUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$d, {
+  }, /*#__PURE__*/React__default.createElement(Provider$e, {
     value: {
       state,
       dispatch
@@ -15358,12 +15609,12 @@ const NewsletterUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$d,
+        store: store$e,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
@@ -15378,7 +15629,7 @@ const NewsletterUpdateButton = ({
       isSubmitting,
       isListLoading
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const {
     t
   } = useTranslation("newsletter");
@@ -15408,7 +15659,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   if (isListLoading) {
     return /*#__PURE__*/React__default.createElement(Loader, {
@@ -15612,7 +15863,7 @@ function SubscriptionCreateModal({
 SubscriptionCreateModal.viewId = "subscription-create";
 
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
-const initialState$c = {
+const initialState$d = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
@@ -15625,10 +15876,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/createContext(initialState$c);
+const store$d = /*#__PURE__*/createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const UserUpdateContainer = ({
   style,
@@ -15760,27 +16011,27 @@ const UserUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+  }, /*#__PURE__*/React__default.createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const UserUpdateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   disabled: true,
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateButton = ({
@@ -15793,7 +16044,7 @@ const UserUpdateButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("userEdit");
@@ -15810,11 +16061,11 @@ const UserUpdateButton = ({
 };
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 function Phone({
@@ -15843,22 +16094,22 @@ function Phone({
 }
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 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"
   })));
 }
@@ -15990,16 +16241,16 @@ function DisplayName({
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$c
+    store: store$d
   }));
 };
 
-const initialState$b = {
+const initialState$c = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16024,10 +16275,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/createContext(initialState$b);
+const store$c = /*#__PURE__*/createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 
@@ -16234,7 +16485,7 @@ const AddressCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -16266,16 +16517,16 @@ const AddressCreateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$b, {
+  }, /*#__PURE__*/React__default.createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -16286,7 +16537,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16329,7 +16580,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16372,7 +16623,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16415,7 +16666,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16458,7 +16709,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16504,7 +16755,7 @@ const AddressCreateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
   const {
     t
   } = useTranslation("address");
@@ -16615,7 +16866,7 @@ function CountrySelect({
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 function StateSelect({
@@ -16703,7 +16954,7 @@ function StateSelect({
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const AddressCreateView = props => {
@@ -16808,18 +17059,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$b
+    store: store$c
   }, props));
 };
 
-const initialState$a = {
+const initialState$b = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16844,10 +17095,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/createContext(initialState$a);
+const store$b = /*#__PURE__*/createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 
 const AddressUpdateContainer = ({
   style,
@@ -16899,7 +17150,7 @@ const AddressUpdateContainer = ({
       const thisAddress = addresses[address];
 
       if (+thisAddress.id === +addressId) {
-        const newState = { ...initialState$a,
+        const newState = { ...initialState$b,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -17032,7 +17283,7 @@ const AddressUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -17064,21 +17315,21 @@ const AddressUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$a, {
+  }, /*#__PURE__*/React__default.createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -17088,7 +17339,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17131,7 +17382,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17174,7 +17425,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17214,7 +17465,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$a
+    store: store$b
   }));
 };
 
@@ -17225,7 +17476,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17268,7 +17519,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17314,7 +17565,7 @@ const AddressUpdateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$a);
+  } = useContext(store$b);
   const {
     t
   } = useTranslation("address");
@@ -17330,7 +17581,7 @@ const AddressUpdateSubmit = ({
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const AddressUpdateView = props => {
@@ -17413,7 +17664,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$a
+    store: store$b
   }));
 };
 
@@ -17496,7 +17747,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$9 = {
+const initialState$a = {
   email: "",
   password: "",
   passwordError: null,
@@ -17509,10 +17760,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/createContext(initialState$9);
+const store$a = /*#__PURE__*/createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 
 const PasswordResetContainer = ({
   style,
@@ -17569,7 +17820,7 @@ const PasswordResetContainer = ({
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$9.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$a.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -17629,26 +17880,26 @@ const PasswordResetContainer = ({
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$9, {
+  }, /*#__PURE__*/React__default.createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordResetButton = ({
@@ -17661,7 +17912,7 @@ const PasswordResetButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$9);
+  } = useContext(store$a);
   const {
     t
   } = useTranslation("passwordReset");
@@ -17678,14 +17929,14 @@ const PasswordResetButton = ({
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$9
+  store: store$a
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default.createElement(ConfirmPassword, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordResetView = props => {
@@ -17737,7 +17988,7 @@ const PasswordResetModal = ({
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$8 = {
+const initialState$9 = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -17746,10 +17997,10 @@ const initialState$8 = {
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/createContext(initialState$8);
+const store$9 = /*#__PURE__*/createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 
 const PasswordForgotContainer = ({
   style,
@@ -17827,21 +18078,21 @@ const PasswordForgotContainer = ({
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$8, {
+  }, /*#__PURE__*/React__default.createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -17857,7 +18108,7 @@ const PasswordForgotButton = ({
       emailError
     },
     dispatch
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -17878,7 +18129,7 @@ const PasswordForgotButton = ({
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$8
+  store: store$9
 }, props));
 
 const PasswordForgotView = props => {
@@ -17928,7 +18179,7 @@ const PasswordForgotModal = ({
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$7 = {
+const initialState$8 = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -17942,10 +18193,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/createContext(initialState$7);
+const store$8 = /*#__PURE__*/createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 const PasswordChangeContainer = ({
   style,
   className = "",
@@ -18097,21 +18348,21 @@ const PasswordChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$7, {
+  }, /*#__PURE__*/React__default.createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -18122,7 +18373,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -18156,7 +18407,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -18190,7 +18441,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -18231,7 +18482,7 @@ const PasswordChangeButton = ({
       confirmNewPasswordError
     },
     dispatch
-  } = useContext(store$7);
+  } = useContext(store$8);
   const {
     t
   } = useTranslation("passwordChange");
@@ -18297,17 +18548,17 @@ const PasswordChangeModal = ({
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$6 = {
+const initialState$7 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/createContext(initialState$6);
+const store$7 = /*#__PURE__*/createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 
 const CartContainer = ({
   style,
@@ -18398,21 +18649,21 @@ const CartContainer = ({
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$6, {
+  }, /*#__PURE__*/React__default.createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -18449,7 +18700,7 @@ const CartSubmit = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$6);
+  } = useContext(store$7);
   const {
     t
   } = useTranslation("cart");
@@ -18480,7 +18731,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = useContext(store$6);
+  } = useContext(store$7);
   const {
     cartItems
   } = usePelcro();
@@ -18793,7 +19044,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$5 = {
+const initialState$6 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -18805,10 +19056,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/createContext(initialState$5);
+const store$6 = /*#__PURE__*/createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 
 const GiftCreateContainer = ({
   style,
@@ -18912,21 +19163,21 @@ const GiftCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$5, {
+  }, /*#__PURE__*/React__default.createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -18940,7 +19191,7 @@ const GiftCreateSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
   const {
     t
   } = useTranslation("register");
@@ -18957,29 +19208,29 @@ const GiftCreateSubmitButton = ({
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$5
+  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,
@@ -19050,7 +19301,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$5);
+  } = useContext(store$6);
 
   const handleInputChange = value => {
     dispatch({
@@ -19115,13 +19366,17 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
   const {
     dispatch,
     state
-  } = useContext(store$5);
+  } = 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({
@@ -19139,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));
 }
@@ -19188,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, {
@@ -19241,7 +19498,7 @@ const GiftCreateModal = ({
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$4 = {
+const initialState$5 = {
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -19249,10 +19506,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/createContext(initialState$4);
+const store$5 = /*#__PURE__*/createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 
 const GiftRedeemContainer = ({
   style,
@@ -19317,21 +19574,21 @@ const GiftRedeemContainer = ({
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+  }, /*#__PURE__*/React__default.createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -19368,7 +19625,7 @@ function GiftCode({
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default.createElement(GiftCode, Object.assign({
-  store: store$4
+  store: store$5
 }, props));
 
 const GiftRedeemSubmitButton = ({
@@ -19381,7 +19638,7 @@ const GiftRedeemSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
   const {
     t
   } = useTranslation("register");
@@ -19474,7 +19731,7 @@ const moveDefaultAddressToStart = addresses => {
   return [defaultAddress, ...addressesWithoutDefault];
 };
 
-const initialState$3 = {
+const initialState$4 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -19483,10 +19740,10 @@ const initialState$3 = {
     content: ""
   }
 };
-const store$3 = /*#__PURE__*/createContext(initialState$3);
+const store$4 = /*#__PURE__*/createContext(initialState$4);
 const {
-  Provider: Provider$3
-} = store$3;
+  Provider: Provider$4
+} = store$4;
 
 const AddressSelectContainer = ({
   style,
@@ -19581,7 +19838,7 @@ const AddressSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$3);
+  }, initialState$4);
   useEffect(() => {
     var _window$Pelcro$user$r;
 
@@ -19594,16 +19851,16 @@ const AddressSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$3, {
+  }, /*#__PURE__*/React__default.createElement(Provider$4, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$3,
+    store: store$4,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$3
+    store: store$4
   })));
 };
 
@@ -19614,7 +19871,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = useContext(store$3);
+  } = useContext(store$4);
 
   const handleAddressSelect = event => {
     dispatch({
@@ -19658,7 +19915,7 @@ const AddressSelectSubmit = ({
       selectedAddressId,
       isSubmitting
     }
-  } = useContext(store$3);
+  } = useContext(store$4);
   const {
     t
   } = useTranslation("address");
@@ -19754,7 +20011,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
-const initialState$2 = {
+const initialState$3 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -19763,10 +20020,10 @@ const initialState$2 = {
     content: ""
   }
 };
-const store$2 = /*#__PURE__*/createContext(initialState$2);
+const store$3 = /*#__PURE__*/createContext(initialState$3);
 const {
-  Provider: Provider$2
-} = store$2;
+  Provider: Provider$3
+} = store$3;
 
 const PaymentMethodSelectContainer = ({
   style,
@@ -19811,7 +20068,7 @@ const PaymentMethodSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$2);
+  }, initialState$3);
   useEffect(() => {
     var _window$Pelcro$user$r4;
 
@@ -19824,16 +20081,16 @@ const PaymentMethodSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$2, {
+  }, /*#__PURE__*/React__default.createElement(Provider$3, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$2,
+    store: store$3,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$2
+    store: store$3
   })));
 };
 
@@ -19847,7 +20104,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = useContext(store$2);
+  } = useContext(store$3);
 
   const handlePaymentMethodSelect = event => {
     dispatch({
@@ -19897,7 +20154,7 @@ const PaymentMethodSelectSubmit = ({
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = useContext(store$2);
+  } = useContext(store$3);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -19971,8 +20228,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];
 
@@ -19986,7 +20243,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -20170,7 +20427,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'
@@ -20698,7 +20955,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) {
@@ -20742,7 +20999,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)));
@@ -20869,12 +21126,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) {
@@ -20893,7 +21150,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -20904,19 +21161,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
@@ -20929,7 +21186,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;
@@ -20968,19 +21225,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) {
@@ -21001,7 +21258,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -21014,10 +21271,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
   });
@@ -21025,11 +21282,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
@@ -21042,7 +21299,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;
@@ -21103,18 +21360,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,
@@ -21330,18 +21587,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,
@@ -21349,35 +21606,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,
@@ -21385,17 +21642,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"
@@ -21690,18 +21947,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$a;
+var _path$b;
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  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$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21709,13 +21966,32 @@ function SvgExit(props) {
   })));
 }
 
+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 SvgUser(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+    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"
+  })));
+}
+
 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"
@@ -21723,7 +21999,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"
   })));
 }
 
@@ -21731,10 +22007,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"
@@ -21742,7 +22018,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"
   })));
 }
 
@@ -21910,9 +22186,11 @@ const DonationsMenu = () => {
 };
 
 function getDonationSubs() {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
 
-  return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  return [...donations, ...canceledDonations];
 }
 
 function formatStartDate(date) {
@@ -21920,6 +22198,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",
@@ -21928,6 +22338,7 @@ const SUB_MENUS = {
   ADDRESSES: "addresses",
   GIFTS: "gifts",
   ORDERS: "orders",
+  INVOICES: "invoices",
   SAVED_ITEMS: "saved-items"
 };
 /**
@@ -22470,6 +22881,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),
@@ -22485,11 +22902,19 @@ 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;
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 
-  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
-  return donations.length > 0;
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
+  return donations.length > 0 || canceledDonations.length > 0;
 }
 
 const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
@@ -22519,7 +22944,7 @@ const DashboardOpenButton = () => {
 };
 DashboardOpenButton.viewId = "dashboard-open";
 
-const initialState$1 = {
+const initialState$2 = {
   imageSrc: null,
   crop: {
     x: 0,
@@ -22533,10 +22958,10 @@ const initialState$1 = {
     content: ""
   }
 };
-const store$1 = /*#__PURE__*/createContext(initialState$1);
+const store$2 = /*#__PURE__*/createContext(initialState$2);
 const {
-  Provider: Provider$1
-} = store$1;
+  Provider: Provider$2
+} = store$2;
 
 const ProfilePicChangeContainer = ({
   style,
@@ -22670,21 +23095,21 @@ const ProfilePicChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$1);
+  }, initialState$2);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-profile-picture-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$1, {
+  }, /*#__PURE__*/React__default.createElement(Provider$2, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$1,
+    store: store$2,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$1
+    store: store$2
   })));
 };
 /**
@@ -22746,7 +23171,7 @@ const ProfilePicChangeButton = ({
       isSubmitting
     },
     dispatch
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24114,7 +24539,7 @@ const ProfilePicChangeCropper = ({
       zoom
     },
     dispatch
-  } = useContext(store$1);
+  } = useContext(store$2);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `plc-relative plc-w-full plc-h-52 sm:plc-h-96 ${className}`
   }, /*#__PURE__*/React__default.createElement(Cropper, Object.assign({
@@ -24156,7 +24581,7 @@ const ProfilePicChangeZoom = ({
       zoom
     },
     dispatch
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24208,7 +24633,7 @@ const ProfilePicChangeSelectButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24250,7 +24675,7 @@ const ProfilePicChangeRemoveButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24273,7 +24698,7 @@ const ProfilePicChangeWrapper = () => {
     state: {
       imageSrc
     }
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24335,17 +24760,17 @@ function ProfilePicChangeModal({
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
-const initialState = {
+const initialState$1 = {
   isSubmitting: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store = /*#__PURE__*/createContext(initialState);
+const store$1 = /*#__PURE__*/createContext(initialState$1);
 const {
-  Provider
-} = store;
+  Provider: Provider$1
+} = store$1;
 
 const EmailVerifyContainer = ({
   style,
@@ -24408,21 +24833,21 @@ const EmailVerifyContainer = ({
       default:
         return state;
     }
-  }, initialState);
+  }, initialState$1);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-email-verify-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider, {
+  }, /*#__PURE__*/React__default.createElement(Provider$1, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store,
+    store: store$1,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store
+    store: store$1
   })));
 };
 
@@ -24436,7 +24861,7 @@ const EmailVerifyResendButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store);
+  } = useContext(store$1);
   const {
     t
   } = useTranslation("verifyEmail");
@@ -24511,4 +24936,233 @@ const EmailVerifyModal = ({
 };
 EmailVerifyModal.viewId = "email-verify";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, notify, unauthenticatedButtons, usePelcro };
+const InvoicePaymentContainer = props => /*#__PURE__*/React__default.createElement(PaymentMethodContainer, Object.assign({
+  type: "invoicePayment",
+  className: "pelcro-invoice-payment-container"
+}, props));
+
+const InvoicePaymentView = props => {
+  const {
+    t
+  } = useTranslation("payment");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-invoice-payment-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-2xl plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", null, t("labels.checkout.title"))), /*#__PURE__*/React__default.createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
+    type: "invoicePayment",
+    showCoupon: false,
+    showExternalPaymentMethods: true
+  }, props))));
+};
+
+const InvoicePaymentModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+
+  const onSuccess = () => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps);
+    return switchView("subscription-success");
+  };
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    id: "pelcro-invoice-payment-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(InvoicePaymentView, Object.assign({}, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+InvoicePaymentModal.viewId = "invoice-payment";
+
+const invoicePaymentSubmitButton = props => {
+  return /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, props);
+};
+
+const initialState = {};
+const store = /*#__PURE__*/createContext(initialState);
+const {
+  Provider
+} = store;
+
+const InvoiceDetailsContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  children,
+  ...props
+}) => {
+  const onPayButtonClick = () => {
+    return onSuccess();
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case HANDLE_SUBMIT:
+        return lib_4((state, dispatch) => onPayButtonClick());
+
+      default:
+        return state;
+    }
+  }, initialState);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-invoice-details-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store
+  })));
+};
+
+const InvoiceDetailsDownloadButton = ({
+  name,
+  url,
+  className,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  const {
+    invoice
+  } = usePelcro();
+  return /*#__PURE__*/React__default.createElement(Link, Object.assign({
+    className: `plc-px-6 plc-py-2 plc-uppercase plc-bg-transparent plc-text-primary-500 plc-border plc-border-primary-500 plc-rounded focus:plc-outline-none focus:plc-ring-2 focus:plc-ring-primary-300 plc-tracking-wider hover:plc-bg-primary-600 focus:plc-bg-primary-600 hover:plc-text-white focus:plc-text-white hover:plc-shadow-none plc-no-underline ${className}`,
+    id: "pelcro-download-invoice-link",
+    href: url !== null && url !== void 0 ? url : invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.download"));
+};
+
+const InvoiceDetailsPayButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.pay"));
+};
+
+const InvoiceDetailsView = props => {
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  const {
+    invoice
+  } = usePelcro();
+  const showPayButton = canPayInvoice(invoice);
+  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", {
+    id: "pelcro-invoice-details-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("title"))), /*#__PURE__*/React__default.createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default.createElement(InvoiceDetailsContainer, props, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mt-5 pelcro-invoice-summary-wrapper"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    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", {
+    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"
+  }, invoice.plan.nickname), /*#__PURE__*/React__default.createElement("div", {
+    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", {
+    className: "plc-mr-2 plc-flex plc-flex-col"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-invoice-total-text"
+  }, t("labels.total")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-invoice-total-text"
+  }, t("labels.amountPaid")), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-font-semibold pelcro-invoice-total-text"
+  }, t("labels.amountDue"))), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-invoice-total"
+  }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-invoice-total"
+  }, getFormattedPriceByLocal(invoice.amount_paid, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("p", {
+    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, {
+    url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
+    className: "plc-w-full plc-text-center"
+  }), showPayButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsPayButton, {
+    role: "submit",
+    className: "plc-ml-4 plc-w-full",
+    id: "pelcro-submit"
+  })))));
+};
+
+function canPayInvoice(invoice) {
+  return (invoice === null || invoice === void 0 ? void 0 : invoice.status) === "open" || (invoice === null || invoice === void 0 ? void 0 : invoice.status) === "past_due";
+}
+
+const InvoiceDetailsModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchToPaymentView
+  } = usePelcro();
+
+  const onSuccess = () => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps);
+    switchToPaymentView();
+  };
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-invoice-details-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(InvoiceDetailsView, Object.assign({}, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+InvoiceDetailsModal.viewId = "invoice-details";
+
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };