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

package/dist/index.esm.js

@@ -3546,7 +3546,7 @@ var paymentMethod_ko = {
 var title$q = "Enter your email to subscribe to our newsletter";
 var updateTitle$2 = "Update newsletter selections";
 var subtitle$b = "We may use your email for other marketing communication";
-var labels$I = {
+var labels$L = {
 	submit: "Submit",
 	firstName: "First name",
 	lastName: "Last name",
@@ -3554,7 +3554,7 @@ var labels$I = {
 	postalCode: "Postal code",
 	required: "required"
 };
-var messages$O = {
+var messages$R = {
 	alreadyHaveAccount: "Already have an account?",
 	success: "Newsletters were successfully updated",
 	loginHere: "Login here.",
@@ -3565,14 +3565,14 @@ var newsletter_en = {
 	title: title$q,
 	updateTitle: updateTitle$2,
 	subtitle: subtitle$b,
-	labels: labels$I,
-	messages: messages$O
+	labels: labels$L,
+	messages: messages$R
 };
 
 var title$p = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
 var updateTitle$1 = "Mettre à jour son choix d'infolettres";
 var subtitle$a = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
-var labels$H = {
+var labels$K = {
 	submit: "Lire l’article !",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
@@ -3580,7 +3580,7 @@ var labels$H = {
 	postalCode: "Code postal",
 	required: "Champs obligatoires"
 };
-var messages$N = {
+var messages$Q = {
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
 	success: "Votre choix d'infolettres à été mis à jour",
 	loginHere: "Connectez-vous ici",
@@ -3591,14 +3591,14 @@ var newsletter_fr = {
 	title: title$p,
 	updateTitle: updateTitle$1,
 	subtitle: subtitle$a,
-	labels: labels$H,
-	messages: messages$N
+	labels: labels$K,
+	messages: messages$Q
 };
 
 var title$o = "Frieze 뉴스레터를 구독하려면 이메일을 입력하세요.";
 var updateTitle = "뉴스레터 선택 업데이트";
 var subtitle$9 = "귀하의 이메일은 다른 마케팅 용도로도 사용됩니다.";
-var labels$G = {
+var labels$J = {
 	submit: "제출",
 	firstName: "이름",
 	lastName: "성",
@@ -3606,7 +3606,7 @@ var labels$G = {
 	postalCode: "우편번호",
 	required: "필수 항목"
 };
-var messages$M = {
+var messages$P = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
 	success: "뉴스레터가 성공적으로 업데이트되었습니다.",
 	loginHere: "여기에서 로그인하세요.",
@@ -3617,14 +3617,14 @@ var newsletter_ko = {
 	title: title$o,
 	updateTitle: updateTitle,
 	subtitle: subtitle$9,
-	labels: labels$G,
-	messages: messages$M
+	labels: labels$J,
+	messages: messages$P
 };
 
-var labels$F = {
+var labels$I = {
 	"continue": "Continue to content"
 };
-var messages$L = {
+var messages$O = {
 	yourFreeTrial: "Subscription successful!",
 	youHaveAccess: "Hope you enjoy the subscription. Please contact us if you have any questions or concerns.",
 	clickToLearn: {
@@ -3650,15 +3650,15 @@ var errors$e = {
 	"": ""
 };
 var success_en = {
-	labels: labels$F,
-	messages: messages$L,
+	labels: labels$I,
+	messages: messages$O,
 	errors: errors$e
 };
 
-var labels$E = {
+var labels$H = {
 	"continue": "Abonnement réussi !"
 };
-var messages$K = {
+var messages$N = {
 	yourFreeTrial: "Votre essai gratuit vient de débuter",
 	youHaveAccess: "Nous espérons que vous allez apprécier votre abonnement. Veuillez nous contacter si vous avez des questions ou des préoccupations.",
 	clickToLearn: {
@@ -3684,15 +3684,15 @@ var errors$d = {
 	"": ""
 };
 var success_fr = {
-	labels: labels$E,
-	messages: messages$K,
+	labels: labels$H,
+	messages: messages$N,
 	errors: errors$d
 };
 
-var labels$D = {
+var labels$G = {
 	"continue": "콘텐츠로 돌아가기"
 };
-var messages$J = {
+var messages$M = {
 	yourFreeTrial: "유료 멤버십에 가입하셨습니다!",
 	youHaveAccess: "멤버십 혜택을 즐기시기를 바라며, 질문이나 문의 사항이 있으면 저희에게 연락주십시오.",
 	clickToLearn: {
@@ -3718,12 +3718,12 @@ var errors$c = {
 	"": ""
 };
 var success_ko = {
-	labels: labels$D,
-	messages: messages$J,
+	labels: labels$G,
+	messages: messages$M,
 	errors: errors$c
 };
 
-var messages$I = {
+var messages$L = {
 	freeVisits: "Free visits left:",
 	subscribeNow: "Subscribe",
 	alreadyHaveAccount: "Already have an account?",
@@ -3733,11 +3733,11 @@ var errors$b = {
 	"": ""
 };
 var meter_en = {
-	messages: messages$I,
+	messages: messages$L,
 	errors: errors$b
 };
 
-var messages$H = {
+var messages$K = {
 	freeVisits: "Visites gratuites restantes:",
 	subscribeNow: "Abonnez-vous maintenant !",
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
@@ -3747,11 +3747,11 @@ var errors$a = {
 	"": ""
 };
 var meter_fr = {
-	messages: messages$H,
+	messages: messages$K,
 	errors: errors$a
 };
 
-var messages$G = {
+var messages$J = {
 	freeVisits: "남은 무료 방문 기간:",
 	subscribeNow: "멤버십 가입",
 	alreadyHaveAccount: "이미 계정이 있습니까?",
@@ -3761,15 +3761,15 @@ var errors$9 = {
 	"": ""
 };
 var meter_ko = {
-	messages: messages$G,
+	messages: messages$J,
 	errors: errors$9
 };
 
-var messages$F = {
+var messages$I = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
 	bankRedirection: "Please hold, redirecting you to your bank."
 };
-var labels$C = {
+var labels$F = {
 	card: "Enter card number",
 	date: "Expiration date",
 	CVC: "CVC",
@@ -3788,15 +3788,15 @@ var labels$C = {
 	removeCoupon: "REMOVE"
 };
 var checkoutForm_en = {
-	messages: messages$F,
-	labels: labels$C
+	messages: messages$I,
+	labels: labels$F
 };
 
-var messages$E = {
+var messages$H = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
 	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
 };
-var labels$B = {
+var labels$E = {
 	card: "Entrez le numéro de carte",
 	date: "Date d’expiration",
 	CVC: "CVC",
@@ -3815,15 +3815,15 @@ var labels$B = {
 	removeCoupon: "RETIRER"
 };
 var checkoutForm_fr = {
-	messages: messages$E,
-	labels: labels$B
+	messages: messages$H,
+	labels: labels$E
 };
 
-var messages$D = {
+var messages$G = {
 	youAreSafe: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: ",
 	bankRedirection: "잠시만 기다려 주십시오. 결제 은행으로 연결 중입니다."
 };
-var labels$A = {
+var labels$D = {
 	card: "카드 번호 입력",
 	date: "만료일",
 	CVC: "CVC",
@@ -3842,8 +3842,8 @@ var labels$A = {
 	removeCoupon: "제거"
 };
 var checkoutForm_ko = {
-	messages: messages$D,
-	labels: labels$A
+	messages: messages$G,
+	labels: labels$D
 };
 
 var youAreSafe$2 = "You're safe - PCI compliant 128 SSL by";
@@ -3903,7 +3903,7 @@ var messages_ko = {
 	zeroTotalInvoice: zeroTotalInvoice
 };
 
-var labels$z = {
+var labels$C = {
 	email: "Enter email",
 	password: "Enter password",
 	required: "required",
@@ -3911,7 +3911,7 @@ var labels$z = {
 	passwordPlaceholder: "Password",
 	login: "Login"
 };
-var messages$C = {
+var messages$F = {
 	loginTo: "Login to your account",
 	welcome: "Welcome back, sign in with your existing account.",
 	dontHaveAccount: "Don't have an account yet?",
@@ -3930,12 +3930,12 @@ var errors$8 = {
 	"": ""
 };
 var login_en = {
-	labels: labels$z,
-	messages: messages$C,
+	labels: labels$C,
+	messages: messages$F,
 	errors: errors$8
 };
 
-var labels$y = {
+var labels$B = {
 	email: "Entrez votre adresse courriel",
 	password: "Entrez votre mot de passe",
 	required: "Champs obligatoires",
@@ -3943,7 +3943,7 @@ var labels$y = {
 	passwordPlaceholder: "Mot de passe",
 	login: "Connexion"
 };
-var messages$B = {
+var messages$E = {
 	loginTo: "Connectez-vous à votre compte",
 	welcome: "Bienvenue, connectez-vous avec votre compte existant.",
 	dontHaveAccount: "Vous n’avez pas encore de compte ?",
@@ -3962,12 +3962,12 @@ var errors$7 = {
 	"": ""
 };
 var login_fr = {
-	labels: labels$y,
-	messages: messages$B,
+	labels: labels$B,
+	messages: messages$E,
 	errors: errors$7
 };
 
-var labels$x = {
+var labels$A = {
 	email: "이메일 입력",
 	password: "비밀번호 입력",
 	required: "필수 항목",
@@ -3975,7 +3975,7 @@ var labels$x = {
 	passwordPlaceholder: "비밀번호",
 	login: "로그인"
 };
-var messages$A = {
+var messages$D = {
 	loginTo: "귀하의 계정에 로그인",
 	welcome: "반갑습니다. 귀하의 기존 계정으로 로그인하세요.",
 	dontHaveAccount: "아직 계정이 없으신가요?",
@@ -3994,56 +3994,56 @@ var errors$6 = {
 	"": ""
 };
 var login_ko = {
-	labels: labels$x,
-	messages: messages$A,
+	labels: labels$A,
+	messages: messages$D,
 	errors: errors$6
 };
 
-var labels$w = {
+var labels$z = {
 	title: "Verifying Passwordless Link",
 	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"
 };
-var messages$z = {
+var messages$C = {
 	resent: "Resent successfully",
 	success: "You have logged in successfully"
 };
 var verifyLinkToken_en = {
-	labels: labels$w,
-	messages: messages$z
+	labels: labels$z,
+	messages: messages$C
 };
 
-var labels$v = {
+var labels$y = {
 	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$y = {
+var messages$B = {
 	resent: "Renvoyé avec succès",
 	success: "Vous vous êtes connecté avec succès"
 };
 var verifyLinkToken_fr = {
-	labels: labels$v,
-	messages: messages$y
+	labels: labels$y,
+	messages: messages$B
 };
 
-var labels$u = {
+var labels$x = {
 	title: "비밀번호 없는 링크 확인",
 	instructions: "가는 중입니다!\n이메일 주소를 확인하겠습니다.\n이메일로 전송된 확인 링크를 클릭하세요.",
 	resend: "이메일 재전송"
 };
-var messages$x = {
+var messages$A = {
 	resent: "성공적으로 재전송",
 	success: "성공적으로 로그인했습니다"
 };
 var verifyLinkToken_ko = {
-	labels: labels$u,
-	messages: messages$x
+	labels: labels$x,
+	messages: messages$A
 };
 
 var title$n = "Create an account";
 var subtitle$8 = "Enter your email and password below";
-var labels$t = {
+var labels$w = {
 	signUpFacebook: "Sign up with Facebook",
 	signUpGoogle: "Sign up with Google",
 	signUpEmail: "Sign up with Email",
@@ -4055,7 +4055,7 @@ var labels$t = {
 	firstName: "First name",
 	lastName: "Last name"
 };
-var messages$w = {
+var messages$z = {
 	alreadyHaveAccount: "Already have an account?",
 	createAccount: "Create account",
 	loginHere: "login here. ",
@@ -4129,8 +4129,8 @@ var redeem$2 = {
 var register_en = {
 	title: title$n,
 	subtitle: subtitle$8,
-	labels: labels$t,
-	messages: messages$w,
+	labels: labels$w,
+	messages: messages$z,
 	errors: errors$5,
 	gift: gift$2,
 	redeem: redeem$2
@@ -4138,7 +4138,7 @@ var register_en = {
 
 var title$m = "Créer un compte";
 var subtitle$7 = "Entrez votre courriel et votre mot de passe ci-dessous";
-var labels$s = {
+var labels$v = {
 	signUpFacebook: "Inscrivez-vous avec Facebook",
 	signUpGoogle: "Inscrivez-vous avec Google",
 	signUpEmail: "Inscrivez-vous avec votre courriel",
@@ -4150,7 +4150,7 @@ var labels$s = {
 	firstName: "Prénom",
 	lastName: "Nom de famille"
 };
-var messages$v = {
+var messages$y = {
 	alreadyHaveAccount: "Vous avez déjà un compte?",
 	createAccount: "Créer un compte",
 	loginHere: "Connectez-vous ici",
@@ -4225,8 +4225,8 @@ var redeem$1 = {
 var register_fr = {
 	title: title$m,
 	subtitle: subtitle$7,
-	labels: labels$s,
-	messages: messages$v,
+	labels: labels$v,
+	messages: messages$y,
 	errors: errors$4,
 	gift: gift$1,
 	redeem: redeem$1
@@ -4234,7 +4234,7 @@ var register_fr = {
 
 var title$l = "계정 만들기";
 var subtitle$6 = "아래에 이메일과 비밀번호를 입력하세요.";
-var labels$r = {
+var labels$u = {
 	signUpFacebook: "Facebook으로 가입하기",
 	signUpGoogle: "Google로 가입하기",
 	signUpEmail: "이메일로 가입하기",
@@ -4246,7 +4246,7 @@ var labels$r = {
 	firstName: "이름",
 	lastName: "성"
 };
-var messages$u = {
+var messages$x = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
 	createAccount: "계정 만들기",
 	loginHere: "여기에서 로그인하세요.",
@@ -4320,14 +4320,14 @@ var redeem = {
 var register_ko = {
 	title: title$l,
 	subtitle: subtitle$6,
-	labels: labels$r,
-	messages: messages$u,
+	labels: labels$u,
+	messages: messages$x,
 	errors: errors$3,
 	gift: gift,
 	redeem: redeem
 };
 
-var labels$q = {
+var labels$t = {
 	title: "Want to update your profile?",
 	subtitle: "Enter your information below to update your profile",
 	email: "Email",
@@ -4343,17 +4343,17 @@ var labels$q = {
 	removeImage: "Remove current photo",
 	zoom: "Zoom"
 };
-var messages$t = {
+var messages$w = {
 	userUpdated: "Thanks! Your profile was updated successfully.",
 	pictureRemoved: "Your profile picture was removed successfully.",
 	pictureUpdated: "Your profile picture was updated successfully."
 };
 var userEdit_en = {
-	labels: labels$q,
-	messages: messages$t
+	labels: labels$t,
+	messages: messages$w
 };
 
-var labels$p = {
+var labels$s = {
 	title: "Voulez-vous mettre à jour votre profil ?",
 	subtitle: "Entrez vos informations ci-dessous pour mettre à jour votre profil",
 	email: "Address courriel",
@@ -4369,17 +4369,17 @@ var labels$p = {
 	removeImage: "supprimer la photo actuelle",
 	zoom: "Zoom"
 };
-var messages$s = {
+var messages$v = {
 	userUpdated: "Votre profil a été mis à jour avec succès.",
 	pictureRemoved: "Votre photo de profil a été supprimée avec succès.",
 	pictureUpdated: "Votre photo de profil a été mise à jour avec succès."
 };
 var userEdit_fr = {
-	labels: labels$p,
-	messages: messages$s
+	labels: labels$s,
+	messages: messages$v
 };
 
-var labels$o = {
+var labels$r = {
 	title: "프로파일을 업데이트하시겠습니까?",
 	subtitle: "프로필을 업데이트하려면 아래 정보를 입력하세요.",
 	email: "이메일",
@@ -4395,20 +4395,20 @@ var labels$o = {
 	removeImage: "기존 사진 제거",
 	zoom: "확대"
 };
-var messages$r = {
+var messages$u = {
 	userUpdated: "감사합니다! 프로필이 성공적으로 업데이트되었습니다.",
 	pictureRemoved: "귀하의 프로필 사진이 제거되었습니다.",
 	pictureUpdated: "귀하의 프로필 사진이 업데이트되었습니다."
 };
 var userEdit_ko = {
-	labels: labels$o,
-	messages: messages$r
+	labels: labels$r,
+	messages: messages$u
 };
 
 var title$k = "Enter your shipping address";
 var selectAddressTitle$2 = "Please select an address";
 var selectAddressSubtitle$2 = "Select one of your saved addresses, or add a new one";
-var labels$n = {
+var labels$q = {
 	address: "Address",
 	code: "Postal Code/Zip",
 	city: "City",
@@ -4424,7 +4424,7 @@ var buttons$b = {
 	selectAddress: "Select address",
 	addAddress: "Add new address"
 };
-var messages$q = {
+var messages$t = {
 	addressUpdated: "The address was successfully updated!",
 	subRedeemed: "Your subscription has been redeemed."
 };
@@ -4432,15 +4432,15 @@ var address_en = {
 	title: title$k,
 	selectAddressTitle: selectAddressTitle$2,
 	selectAddressSubtitle: selectAddressSubtitle$2,
-	labels: labels$n,
+	labels: labels$q,
 	buttons: buttons$b,
-	messages: messages$q
+	messages: messages$t
 };
 
 var title$j = "Entrez votre adresse de livraison";
 var selectAddressTitle$1 = "Veuillez sélectionner une adresse";
 var selectAddressSubtitle$1 = "Choisissez l'une de vos adresses ou créez-en une nouvelle";
-var labels$m = {
+var labels$p = {
 	address: "Adresse",
 	code: "Code postal / Zip",
 	city: "Ville",
@@ -4456,7 +4456,7 @@ var buttons$a = {
 	selectAddress: "Choisir cette adresse",
 	addAddress: "Ajouter une nouvelle adresse"
 };
-var messages$p = {
+var messages$s = {
 	addressUpdated: "Votre adresse a été mise à jour avec succès",
 	subRedeemed: "Votre abonnement a bien été activé."
 };
@@ -4464,15 +4464,15 @@ var address_fr = {
 	title: title$j,
 	selectAddressTitle: selectAddressTitle$1,
 	selectAddressSubtitle: selectAddressSubtitle$1,
-	labels: labels$m,
+	labels: labels$p,
 	buttons: buttons$a,
-	messages: messages$p
+	messages: messages$s
 };
 
 var title$i = "배송 주소를 입력하십시오.";
 var selectAddressTitle = "주소를 선택하십시오.";
 var selectAddressSubtitle = "저장된 주소에서 선택하거나 새 주소를 추가하십시오.";
-var labels$l = {
+var labels$o = {
 	address: "주소",
 	code: "우편번호",
 	city: "도시",
@@ -4488,7 +4488,7 @@ var buttons$9 = {
 	selectAddress: "주소 선택",
 	addAddress: "새 주소 추가"
 };
-var messages$o = {
+var messages$r = {
 	addressUpdated: "주소가 성공적으로 업데이트되었습니다!",
 	subRedeemed: "귀하의 유료 멤버십이 사용되었습니다."
 };
@@ -4496,9 +4496,9 @@ var address_ko = {
 	title: title$i,
 	selectAddressTitle: selectAddressTitle,
 	selectAddressSubtitle: selectAddressSubtitle,
-	labels: labels$l,
+	labels: labels$o,
 	buttons: buttons$9,
-	messages: messages$o
+	messages: messages$r
 };
 
 var title$h = "Reset your password";
@@ -4564,7 +4564,7 @@ var password$2 = "Password";
 var submit$8 = "Submit";
 var required$8 = "Required";
 var passwordResetEmailSent$2 = "Password reset instructions have been sent to your email";
-var messages$n = {
+var messages$q = {
 	alreadyHaveAccount: "Already have an account?",
 	loginHere: "login here."
 };
@@ -4575,7 +4575,7 @@ var passwordForgot_en = {
 	submit: submit$8,
 	required: required$8,
 	passwordResetEmailSent: passwordResetEmailSent$2,
-	messages: messages$n
+	messages: messages$q
 };
 
 var title$d = "Mot de passe oublié ?";
@@ -4584,7 +4584,7 @@ var password$1 = "Mot de passe";
 var submit$7 = "Soumettre";
 var required$7 = "Champs obligatoires";
 var passwordResetEmailSent$1 = "Un lien pour réinitialiser votre mot de passe vous a été envoyé. Si vous ne le recevez pas, vérifier votre courrier indésirable.";
-var messages$m = {
+var messages$p = {
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
 	loginHere: "Connectez-vous ici"
 };
@@ -4595,7 +4595,7 @@ var passwordForgot_fr = {
 	submit: submit$7,
 	required: required$7,
 	passwordResetEmailSent: passwordResetEmailSent$1,
-	messages: messages$m
+	messages: messages$p
 };
 
 var title$c = "비밀번호를 잊으셨나요?";
@@ -4604,7 +4604,7 @@ var password = "비밀번호";
 var submit$6 = "제출";
 var required$6 = "필수 항목";
 var passwordResetEmailSent = "비밀번호 재설정 안내가 귀하의 이메일로 발송되었습니다.";
-var messages$l = {
+var messages$o = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
 	loginHere: "여기에서 로그인하세요."
 };
@@ -4615,7 +4615,7 @@ var passwordForgot_ko = {
 	submit: submit$6,
 	required: required$6,
 	passwordResetEmailSent: passwordResetEmailSent,
-	messages: messages$l
+	messages: messages$o
 };
 
 var title$b = "Change your password";
@@ -4685,7 +4685,7 @@ var title$8 = "Passwordless Login";
 var email$2 = "Enter email";
 var submit$2 = "Submit";
 var required$2 = "Required";
-var messages$k = {
+var messages$n = {
 	PasswordlessLoginSuccess: "Please check your email and follow the instructions there"
 };
 var passwordlessRequest_en = {
@@ -4693,14 +4693,14 @@ var passwordlessRequest_en = {
 	email: email$2,
 	submit: submit$2,
 	required: required$2,
-	messages: messages$k
+	messages: messages$n
 };
 
 var title$7 = "Connexion sans mot de passe";
 var email$1 = "Entrez votre adresse courriel";
 var submit$1 = "Soumettre";
 var required$1 = "Champs obligatoires";
-var messages$j = {
+var messages$m = {
 	PasswordlessLoginSuccess: "Vous avez été authentifié avec succès avec la connexion sans mot de passe"
 };
 var passwordlessRequest_fr = {
@@ -4708,14 +4708,14 @@ var passwordlessRequest_fr = {
 	email: email$1,
 	submit: submit$1,
 	required: required$1,
-	messages: messages$j
+	messages: messages$m
 };
 
 var title$6 = "비밀번호 없는 로그인";
 var email = "이메일 입력";
 var submit = "제출";
 var required = "필수 항목";
-var messages$i = {
+var messages$l = {
 	PasswordlessLoginSuccess: "비밀번호 없는 로그인으로 성공적으로 인증되었습니다."
 };
 var passwordlessRequest_ko = {
@@ -4723,7 +4723,7 @@ var passwordlessRequest_ko = {
 	email: email,
 	submit: submit,
 	required: required,
-	messages: messages$i
+	messages: messages$l
 };
 
 var title$5 = "Votre panier";
@@ -4807,7 +4807,7 @@ var buttons$8 = {
 	purchase: "Purchase",
 	"continue": "Continue"
 };
-var messages$h = {
+var messages$k = {
 	orderConfirmed: {
 		title: "Order confirmed!",
 		body: "Your order has been confirmed and will be shipped within the next few days. You'll shortly receive an email confirmation of this order."
@@ -4816,14 +4816,14 @@ var messages$h = {
 	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$k = {
+var labels$n = {
 	summary: "Order summary",
 	total: "total"
 };
 var shop_en = {
 	buttons: buttons$8,
-	messages: messages$h,
-	labels: labels$k
+	messages: messages$k,
+	labels: labels$n
 };
 
 var buttons$7 = {
@@ -4832,7 +4832,7 @@ var buttons$7 = {
 	purchase: "Acheter",
 	"continue": "Continuer au contenu"
 };
-var messages$g = {
+var messages$j = {
 	orderConfirmed: {
 		title: "Votre commande est confirmée !",
 		body: "Votre commande a été confirmée et vous sera expédiée dans les prochains jours. Vous recevrez un courriel de confirmation sous peu."
@@ -4841,14 +4841,14 @@ var messages$g = {
 	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$j = {
+var labels$m = {
 	summary: "récapitulatif de commande",
 	total: "total"
 };
 var shop_fr = {
 	buttons: buttons$7,
-	messages: messages$g,
-	labels: labels$j
+	messages: messages$j,
+	labels: labels$m
 };
 
 var buttons$6 = {
@@ -4857,7 +4857,7 @@ var buttons$6 = {
 	purchase: "구매",
 	"continue": "계속"
 };
-var messages$f = {
+var messages$i = {
 	orderConfirmed: {
 		title: "주문이 확인되었습니다!",
 		body: "귀하의 주문이 확인되었으며 며칠 안에 배송될 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다."
@@ -4866,17 +4866,17 @@ var messages$f = {
 	multipleCurrencies: "장바구니에 다른 통화로만 결제가 가능한 아이템이 있습니다. 결제를 계속 진행하려면 모든 아이템의 결제 통화가 동일한지 확인하십시오.",
 	currencyMismatch: "선택하신 아이템(들)이 귀하가 설정한 기본 통화({{currency}})와 일치하지 않습니다. 기본 통화와 일치하는 아이템(들)만 선택하십시오."
 };
-var labels$i = {
+var labels$l = {
 	summary: "주문 요약",
 	total: "총계"
 };
 var shop_ko = {
 	buttons: buttons$6,
-	messages: messages$f,
-	labels: labels$i
+	messages: messages$i,
+	labels: labels$l
 };
 
-var labels$h = {
+var labels$k = {
 	cardNumber: "Numéro de carte",
 	securityCode: "Code de sécurité",
 	submit: "Soumettre",
@@ -4898,7 +4898,7 @@ var labels$h = {
 		title: "Informations de paiement"
 	}
 };
-var messages$e = {
+var messages$h = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
 	cancel: "Annuler votre abonnement en ligne à tout moment.",
 	giftSent: "Le cadeau d’abonnement a été envoyé à",
@@ -4911,12 +4911,12 @@ var errors$2 = {
 	"": ""
 };
 var payment_fr = {
-	labels: labels$h,
-	messages: messages$e,
+	labels: labels$k,
+	messages: messages$h,
 	errors: errors$2
 };
 
-var labels$g = {
+var labels$j = {
 	cardNumber: "Card number",
 	securityCode: "Security Code",
 	submit: "Submit",
@@ -4938,7 +4938,7 @@ var labels$g = {
 		title: "Payment Information"
 	}
 };
-var messages$d = {
+var messages$g = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
 	cancel: "Cancel your subscription online at anytime.",
 	giftSent: "Subscription gift has been sent to",
@@ -4951,12 +4951,12 @@ var errors$1 = {
 	"": ""
 };
 var payment_en = {
-	labels: labels$g,
-	messages: messages$d,
+	labels: labels$j,
+	messages: messages$g,
 	errors: errors$1
 };
 
-var labels$f = {
+var labels$i = {
 	cardNumber: "카드 번호",
 	securityCode: "보안 코드",
 	submit: "제출",
@@ -4978,7 +4978,7 @@ var labels$f = {
 		title: "결제 정보"
 	}
 };
-var messages$c = {
+var messages$f = {
 	youAreSafe: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: ",
 	cancel: "유료 멤버십은 언제든 온라인으로 취소가 가능합니다.",
 	giftSent: "유료 멤버십 선물이 ",
@@ -4991,12 +4991,12 @@ var errors = {
 	"": ""
 };
 var payment_ko = {
-	labels: labels$f,
-	messages: messages$c,
+	labels: labels$i,
+	messages: messages$f,
 	errors: errors
 };
 
-var labels$e = {
+var labels$h = {
 	menu: "Pelcro Menu",
 	name: "Name",
 	email: "Email",
@@ -5016,6 +5016,8 @@ var labels$e = {
 	unsubscribe: "Cancel",
 	reactivate: "Reactivate",
 	renew: "Renew",
+	suspend: "Suspend",
+	unsuspend: "UnSuspend",
 	support: "Support",
 	account: "Account",
 	purchases: "Purchases",
@@ -5075,21 +5077,27 @@ var labels$e = {
 		goBack: "Go back"
 	}
 };
-var messages$b = {
+var messages$e = {
 	noCard: "You don't have a card",
 	subCancellation: {
 		isSureToCancel: "Are you sure you want to cancel your subscription?",
 		loading: "Cancelling your subscription",
 		success: "Subscription is successfully cancelled",
 		error: "Error while cancelling your subscription"
+	},
+	subUnSuspend: {
+		isSureToUnSuspend: "Are you sure you want to unsuspend your subscription?",
+		loading: "Unsuspending your subscription",
+		success: "Subscription is successfully Unsuspended",
+		error: "Error while Unsuspending your subscription"
 	}
 };
 var dashboard_en = {
-	labels: labels$e,
-	messages: messages$b
+	labels: labels$h,
+	messages: messages$e
 };
 
-var labels$d = {
+var labels$g = {
 	menu: "Menu Pelcro",
 	name: "Nom",
 	email: "Courriel",
@@ -5109,6 +5117,8 @@ var labels$d = {
 	unsubscribe: "Se désabonner",
 	reactivate: "Réactiver",
 	renew: "Renouveler",
+	suspend: "Suspendre",
+	unsuspend: "Annuler la suspension",
 	support: "Soutien",
 	account: "Compte",
 	purchases: "Achats",
@@ -5168,21 +5178,27 @@ var labels$d = {
 		goBack: "Retourner"
 	}
 };
-var messages$a = {
+var messages$d = {
 	noCard: "Vous n’avez pas une carte",
 	subCancellation: {
 		isSureToCancel: "Êtes-vous certain de vouloir annuler votre abonnement?",
 		loading: "Annulation de l'abonnement",
 		success: "L'abonnement a été annulé avec succès",
 		error: "Une erreur s'est produite lors de l'annulation de l'abonnement"
+	},
+	subUnSuspend: {
+		isSureToUnSuspend: "Êtes-vous sûr de vouloir annuler la suspension de votre abonnement ?",
+		loading: "Annulation de la suspension de votre abonnement",
+		success: "L'abonnement a été suspendu avec succès",
+		error: "Erreur lors de l'annulation de la suspension de votre abonnement"
 	}
 };
 var dashboard_fr = {
-	labels: labels$d,
-	messages: messages$a
+	labels: labels$g,
+	messages: messages$d
 };
 
-var labels$c = {
+var labels$f = {
 	menu: "Pelcro 메뉴",
 	name: "이름",
 	email: "이메일",
@@ -5202,6 +5218,8 @@ var labels$c = {
 	unsubscribe: "취소",
 	reactivate: "재활성화",
 	renew: "갱신",
+	suspend: "유예하다",
+	unsuspend: "일시 중단 해제",
 	support: "지원",
 	account: "계정",
 	purchases: "구매",
@@ -5321,17 +5339,23 @@ var savedItems = {
 var subCancellation = {
 	goBack: "뒤로 가기"
 };
-var messages$9 = {
+var messages$c = {
 	noCard: "등록된 카드가 없습니다.",
 	subCancellation: {
 		isSureToCancel: "정말로 유료 멤버십을 취소하시겠습니까?",
 		loading: "귀하의 유료 멤버십을 취소합니다.",
 		success: "유료 멤버십이 성공적으로 취소되었습니다.",
 		error: "유료 멤버십 취소 과정에서 오류가 발생했습니다."
+	},
+	subUnSuspend: {
+		isSureToUnSuspend: "구독 일시 중단을 해제하시겠습니까?",
+		loading: "구독 일시 중단 해제",
+		success: "구독이 성공적으로 일시 중단 해제되었습니다",
+		error: "구독 일시 중단을 해제하는 동안 오류가 발생했습니다."
 	}
 };
 var dashboard_ko = {
-	labels: labels$c,
+	labels: labels$f,
 	shipments: shipments,
 	logout: logout,
 	dashboard: dashboard,
@@ -5379,15 +5403,15 @@ var dashboard_ko = {
 	orders: orders,
 	savedItems: savedItems,
 	subCancellation: subCancellation,
-	messages: messages$9
+	messages: messages$c
 };
 
-var messages$8 = {
+var messages$b = {
 	alreadyHaveAccount: "Already have an account?",
 	loginHere: "Login here",
 	checkbox: "Check this box to gift this subscription"
 };
-var labels$b = {
+var labels$e = {
 	plan: {
 		title: "Subscribe to a plan",
 		subtitle: "Select one of the plans below and click on next."
@@ -5410,17 +5434,17 @@ var buttons$5 = {
 	back: "Back"
 };
 var select_en = {
-	messages: messages$8,
-	labels: labels$b,
+	messages: messages$b,
+	labels: labels$e,
 	buttons: buttons$5
 };
 
-var messages$7 = {
+var messages$a = {
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
 	loginHere: "Connectez-vous ici",
 	checkbox: "Cochez cette case pour offrir cet abonnement"
 };
-var labels$a = {
+var labels$d = {
 	plan: {
 		title: "Abonnez-vous à un plan",
 		subtitle: "Sélectionnez l’un des plans ci-dessous et cliquez sur suivant."
@@ -5443,17 +5467,17 @@ var buttons$4 = {
 	back: "Retour"
 };
 var select_fr = {
-	messages: messages$7,
-	labels: labels$a,
+	messages: messages$a,
+	labels: labels$d,
 	buttons: buttons$4
 };
 
-var messages$6 = {
+var messages$9 = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
 	loginHere: "여기에서 로그인하세요.",
 	checkbox: "이 유료 멤버십을 선물하려면 체크하세요."
 };
-var labels$9 = {
+var labels$c = {
 	plan: {
 		title: "요금제 가입하기",
 		subtitle: "아래 요금제 중 하나를 선택하고 다음을 클릭하세요."
@@ -5476,8 +5500,8 @@ var buttons$3 = {
 	back: "뒤로"
 };
 var select_ko = {
-	messages: messages$6,
-	labels: labels$9,
+	messages: messages$9,
+	labels: labels$c,
 	buttons: buttons$3
 };
 
@@ -5511,50 +5535,50 @@ var notification_ko = {
 	confirm: confirm
 };
 
-var labels$8 = {
+var labels$b = {
 	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"
 };
-var messages$5 = {
+var messages$8 = {
 	resent: "Resent successfully",
 	success: "Email verified successfully!"
 };
 var verifyEmail_en = {
-	labels: labels$8,
-	messages: messages$5
+	labels: labels$b,
+	messages: messages$8
 };
 
-var labels$7 = {
+var labels$a = {
 	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$4 = {
+var messages$7 = {
 	resent: "Renvoyé avec succès",
 	success: "Adresse courriel vérifiée avec succès"
 };
 var verifyEmail_fr = {
-	labels: labels$7,
-	messages: messages$4
+	labels: labels$a,
+	messages: messages$7
 };
 
-var labels$6 = {
+var labels$9 = {
 	title: "이메일 주소를 인증하세요.",
 	instructions: "거의 완료되었습니다!\n이메일 주소만 인증하면 됩니다.\n다음 이메일 주소로 전송된 인증 링크를 클릭해 주십시오:",
 	resend: "이메일 재전송"
 };
-var messages$3 = {
+var messages$6 = {
 	resent: "재전송 완료",
 	success: "이메일 주소가 인증되었습니다!"
 };
 var verifyEmail_ko = {
-	labels: labels$6,
-	messages: messages$3
+	labels: labels$9,
+	messages: messages$6
 };
 
 var title$2 = "Invoice details";
-var labels$5 = {
+var labels$8 = {
 	summary: "Summary",
 	total: "Total",
 	amountPaid: "Amount paid",
@@ -5567,12 +5591,12 @@ var buttons$2 = {
 };
 var invoiceDetails_en = {
 	title: title$2,
-	labels: labels$5,
+	labels: labels$8,
 	buttons: buttons$2
 };
 
 var title$1 = "Détails de la facture";
-var labels$4 = {
+var labels$7 = {
 	summary: "Résumé",
 	total: "Total",
 	amountPaid: "Montant payé",
@@ -5585,12 +5609,12 @@ var buttons$1 = {
 };
 var invoiceDetails_fr = {
 	title: title$1,
-	labels: labels$4,
+	labels: labels$7,
 	buttons: buttons$1
 };
 
 var title = "인보이스 세부 정보";
-var labels$3 = {
+var labels$6 = {
 	summary: "요약",
 	total: "총계",
 	amountPaid: "지불된 금액",
@@ -5603,18 +5627,18 @@ var buttons = {
 };
 var invoiceDetails_ko = {
 	title: title,
-	labels: labels$3,
+	labels: labels$6,
 	buttons: buttons
 };
 
-var labels$2 = {
+var labels$5 = {
 	title: "Cancel subscription",
 	cancelReason: "Cancellation reason",
 	subCancellation: {
 		goBack: "Go back"
 	}
 };
-var messages$2 = {
+var messages$5 = {
 	subscriptionEnd: "This subscription is set to expire on",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Cancel at Period End",
@@ -5627,18 +5651,18 @@ var messages$2 = {
 	}
 };
 var subscriptionCancel_en = {
-	labels: labels$2,
-	messages: messages$2
+	labels: labels$5,
+	messages: messages$5
 };
 
-var labels$1 = {
+var labels$4 = {
 	title: "Annuler l'abonnement",
 	cancelReason: "Motif d'annulation",
 	subCancellation: {
 		goBack: "Retourner"
 	}
 };
-var messages$1 = {
+var messages$4 = {
 	subscriptionEnd: "Cet abonnement doit expirer le",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Annuler l'abonnement maintenant",
@@ -5651,18 +5675,18 @@ var messages$1 = {
 	}
 };
 var subscriptionCancel_fr = {
-	labels: labels$1,
-	messages: messages$1
+	labels: labels$4,
+	messages: messages$4
 };
 
-var labels = {
+var labels$3 = {
 	title: "구독 취소",
 	cancelReason: "취소 사유",
 	subCancellation: {
 		goBack: "돌아가기"
 	}
 };
-var messages = {
+var messages$3 = {
 	subscriptionEnd: "이 구독은 다음 날짜에 만료되도록 설정되었습니다.",
 	cancelNow: "지금 구독 취소",
 	cancelLater: "기간 종료 시 취소",
@@ -5675,6 +5699,78 @@ var messages = {
 	}
 };
 var subscriptionCancel_ko = {
+	labels: labels$3,
+	messages: messages$3
+};
+
+var labels$2 = {
+	title: "Suspend subscription",
+	suspensionDate: "Suspension date",
+	subCancellation: {
+		goBack: "Go back"
+	}
+};
+var messages$2 = {
+	suspensionEnd: "The suspension is set to expire on",
+	suspendNow: "Suspend Subscription Now",
+	suspendLater: "Suspend at Period End",
+	subCancellation: {
+		isSureToSuspendNow: "Are you sure you want to suspend your subscription immediately?",
+		isSureToSuspend: "Are you sure you want to suspend your subscription?",
+		loading: "Suspending your subscription",
+		success: "Subscription is successfully suspended",
+		error: "Error while suspending your subscription"
+	}
+};
+var subscriptionSuspend_en = {
+	labels: labels$2,
+	messages: messages$2
+};
+
+var labels$1 = {
+	title: "Suspendre l'abonnement",
+	suspensionDate: "Date de suspension",
+	subCancellation: {
+		goBack: "Revenir en arrière"
+	}
+};
+var messages$1 = {
+	suspensionEnd: "La suspension doit expirer le",
+	suspendNow: "Suspendre l'abonnement maintenant",
+	suspendLater: "Suspendre à la fin de la période",
+	subCancellation: {
+		isSureToSuspendNow: "Êtes-vous sûr de vouloir suspendre votre abonnement immédiatement ?",
+		isSureToSuspend: "Êtes-vous sûr de vouloir suspendre votre abonnement ?",
+		loading: "Suspension de votre abonnement",
+		success: "L'abonnement a été suspendu avec succès",
+		error: "Erreur lors de la suspension de votre abonnement"
+	}
+};
+var subscriptionSuspend_fr = {
+	labels: labels$1,
+	messages: messages$1
+};
+
+var labels = {
+	title: "구독 중단",
+	suspensionDate: "중단 날짜",
+	subCancellation: {
+		goBack: "돌아가기"
+	}
+};
+var messages = {
+	suspensionEnd: "일시 중지가 만료되도록 설정되었습니다.",
+	suspendNow: "지금 구독 일시 중단",
+	suspendLater: "기간 종료 시 일시 중단",
+	subCancellation: {
+		isSureToSuspendNow: "구독을 즉시 중단하시겠습니까?",
+		isSureToSuspend: "구독을 일시 중단하시겠습니까?",
+		loading: "구독 일시 중단",
+		success: "구독이 성공적으로 일시 중단되었습니다",
+		error: "구독을 일시 중단하는 동안 오류가 발생했습니다."
+	}
+};
+var subscriptionSuspend_ko = {
 	labels: labels,
 	messages: messages
 };
@@ -7075,7 +7171,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$l;
+      } = initialState$m;
       this.set(otherStateFields);
     });
 
@@ -7214,6 +7310,21 @@ class PelcroActions {
       });
     });
 
+    _defineProperty$3(this, "setSubscriptionToSuspend", id => {
+      var _window$Pelcro$subscr2;
+
+      const subscriptions = (_window$Pelcro$subscr2 = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr2 !== void 0 ? _window$Pelcro$subscr2 : [];
+      const subscriptionToSuspend = subscriptions.filter(sub => String(sub.id) === String(id))[0];
+
+      if (!subscriptionToSuspend) {
+        return console.error("invalid subscription id");
+      }
+
+      this.set({
+        subscriptionToSuspend
+      });
+    });
+
     _defineProperty$3(this, "setInvoice", id => {
       var _window$Pelcro$invoic;
 
@@ -7445,7 +7556,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$l = {
+const initialState$m = {
   // View
   view: null,
   // Plans
@@ -7479,7 +7590,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$l,
+    ...initialState$m,
     // State actions
     ...actions,
     // Callbacks
@@ -7875,7 +7986,8 @@ const resources = {
     select: select_en,
     notification: notification_en,
     invoiceDetails: invoiceDetails_en,
-    subscriptionCancel: subscriptionCancel_en
+    subscriptionCancel: subscriptionCancel_en,
+    subscriptionSuspend: subscriptionSuspend_en
   },
   fr: {
     common: common_fr,
@@ -7902,7 +8014,8 @@ const resources = {
     select: select_fr,
     notification: notification_fr,
     invoiceDetails: invoiceDetails_fr,
-    subscriptionCancel: subscriptionCancel_fr
+    subscriptionCancel: subscriptionCancel_fr,
+    subscriptionSuspend: subscriptionSuspend_fr
   },
   ko: {
     common: common_ko,
@@ -7929,7 +8042,8 @@ const resources = {
     select: select_ko,
     notification: notification_ko,
     invoiceDetails: invoiceDetails_ko,
-    subscriptionCancel: subscriptionCancel_ko
+    subscriptionCancel: subscriptionCancel_ko,
+    subscriptionSuspend: subscriptionSuspend_ko
   }
 }; // set UI language to the page language or default to the language in site settings
 
@@ -10709,8 +10823,9 @@ const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
+const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 
-const initialState$k = {
+const initialState$l = {
   email: "",
   password: "",
   emailError: null,
@@ -10721,10 +10836,10 @@ const initialState$k = {
     content: ""
   }
 };
-const store$k = /*#__PURE__*/createContext(initialState$k);
+const store$l = /*#__PURE__*/createContext(initialState$l);
 const {
-  Provider: Provider$k
-} = store$k;
+  Provider: Provider$l
+} = store$l;
 
 const LoginContainer = ({
   style,
@@ -10831,7 +10946,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$k;
+        return initialState$l;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -10849,12 +10964,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$k);
+  }, initialState$l);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$k, {
+  }, /*#__PURE__*/React__default.createElement(Provider$l, {
     value: {
       state,
       dispatch
@@ -10862,12 +10977,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$k,
+        store: store$l,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$k
+    store: store$l
   })));
 };
 
@@ -11125,7 +11240,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("login");
@@ -11183,11 +11298,11 @@ const LoginRequestLoginToken = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 var _path$r;
@@ -11264,7 +11379,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$j = {
+const initialState$k = {
   email: "",
   password: "",
   emailError: null,
@@ -11281,10 +11396,10 @@ const initialState$j = {
     content: ""
   }
 };
-const store$j = /*#__PURE__*/createContext(initialState$j);
+const store$k = /*#__PURE__*/createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 
 const RegisterContainer = ({
   style,
@@ -11467,7 +11582,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$j;
+        return initialState$k;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -11485,12 +11600,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$j, {
+  }, /*#__PURE__*/React__default.createElement(Provider$k, {
     value: {
       state,
       dispatch
@@ -11498,12 +11613,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$j,
+        store: store$k,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 /**
@@ -11543,10 +11658,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$k);
+  } = useContext(store$l);
   const {
     dispatch: registerDispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -11633,10 +11748,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$k);
+  } = useContext(store$l);
   const {
     dispatch: registerDispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -11732,10 +11847,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     dispatch: registerDispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -12044,11 +12159,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 const RegisterButton = ({
@@ -12068,7 +12183,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("register");
@@ -12206,7 +12321,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 function LastName({
@@ -12237,7 +12352,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 /**
@@ -12361,7 +12476,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$j
+    store: store$k
   }));
 };
 
@@ -14705,7 +14820,7 @@ class VantivGateway {
 
 /** @type {PaymentStateType} */
 
-const initialState$i = {
+const initialState$j = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -14724,10 +14839,10 @@ const initialState$i = {
     content: ""
   }
 };
-const store$i = /*#__PURE__*/createContext(initialState$i);
+const store$j = /*#__PURE__*/createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -14807,9 +14922,17 @@ const PaymentMethodContainerWithoutStripe = ({
       const SUCCESS_STATUS = "870";
 
       if (paymentRequest.response !== SUCCESS_STATUS) {
-        return handlePaymentError({
-          error: new Error(paymentRequest.message)
-        });
+        switch (paymentRequest.response) {
+          case "871":
+            return handlePaymentError({
+              error: new Error("Invalid account number")
+            });
+
+          default:
+            return handlePaymentError({
+              error: new Error(paymentRequest.message)
+            });
+        }
       }
     }
 
@@ -14958,7 +15081,7 @@ const PaymentMethodContainerWithoutStripe = ({
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
-        style: "enhancedStyle2",
+        style: "enhancedStyle3",
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
@@ -15985,21 +16108,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$i, {
+  }, /*#__PURE__*/React__default.createElement(Provider$j, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$i,
+    store: store$j,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 
@@ -16021,7 +16144,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$i
+      store: store$j
     }, props))));
   }
 
@@ -16074,7 +16197,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -16150,7 +16273,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     order,
     plan
@@ -16200,7 +16323,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
   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());
@@ -16250,7 +16373,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16284,7 +16407,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -16340,7 +16463,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16597,7 +16720,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     product,
     plan,
@@ -16730,7 +16853,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     switchView,
     selectedPaymentMethodId
@@ -16772,7 +16895,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     plan
   } = usePelcro();
@@ -16939,13 +17062,13 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-const initialState$h = {
+const initialState$i = {
   cancelationReason: ""
 };
-const store$h = /*#__PURE__*/createContext(initialState$h);
+const store$i = /*#__PURE__*/createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const SubscriptionCancelContainer = ({
   style,
@@ -16966,21 +17089,21 @@ const SubscriptionCancelContainer = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-subscription-cancel-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+  }, /*#__PURE__*/React__default.createElement(Provider$i, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$h,
+    store: store$i,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -17001,30 +17124,347 @@ function SvgInfoCircle(props) {
     strokeWidth: 2,
     d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
   })));
-}
-
-/**
- *
- */
-
-const Tooltip = ({
-  value,
-  className
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "pelcro-tooltip-icon"
-  }, /*#__PURE__*/React__default.createElement(SvgInfoCircle, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-p-1 plc--mt-8 plc-text-sm plc-bg-gray-100 plc-border plc-rounded-md plc-shadow-lg pelcro-tooltip"
-  }, value));
+}
+
+/**
+ *
+ */
+
+const Tooltip = ({
+  value,
+  className
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-tooltip-icon"
+  }, /*#__PURE__*/React__default.createElement(SvgInfoCircle, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-p-1 plc--mt-8 plc-text-sm plc-bg-gray-100 plc-border plc-rounded-md plc-shadow-lg pelcro-tooltip"
+  }, value));
+};
+
+/**
+ *
+ */
+
+function TextArea({
+  label = "",
+  tooltipText,
+  required,
+  id,
+  errorId,
+  error,
+  className = "",
+  labelClassName = "",
+  errorClassName = "",
+  wrapperClassName = "",
+  ...otherProps
+}) {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
+    value: tooltipText,
+    className: "plc-ml-1"
+  })), /*#__PURE__*/React__default.createElement("textarea", Object.assign({
+    type: "text",
+    id: id,
+    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    "aria-describedby": errorId,
+    "aria-invalid": Boolean(error)
+  }, otherProps)), error && /*#__PURE__*/React__default.createElement("p", {
+    id: errorId,
+    "aria-live": "assertive",
+    className: `pelcro-input-error ${errorClassName}`
+  }, error));
+}
+
+const SubscriptionCancelReason = props => {
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  const {
+    dispatch,
+    state
+  } = useContext(store$i);
+
+  const handleOnTextAreaBlur = e => {
+    dispatch({
+      type: SET_CANCEL_SUBSCRIPTION_REASON,
+      payload: e.target.value.trim()
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(TextArea, Object.assign({
+    label: t("labels.cancelReason"),
+    onBlur: e => handleOnTextAreaBlur(e)
+  }, props));
+};
+
+var _switch;
+
+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 SvgSubscription(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 125",
+    fill: "currentColor"
+  }, props), _switch || (_switch = /*#__PURE__*/React.createElement("switch", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2c0 1.8.7 3.6 2 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3 2-3.1 2-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M90.4 58.6c0-4.4-3.6-7.9-8-7.9-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-.9 0-1.8.1-2.6.4v-4.6h6c4.8 0 8.6-3.9 8.6-8.7V11.2c0-4.8-3.9-8.7-8.6-8.7H18.2c-4.8 0-8.6 3.9-8.6 8.7v20.3c0 4.8 3.9 8.7 8.6 8.7h24.6V64l-3.3-3.3c-2.7-2.7-7-3.1-10.2-1-1.9 1.3-3.1 3.3-3.5 5.5-.3 2.2.3 4.5 1.8 6.3L42 88.9c4.5 5.5 11.2 8.6 18.2 8.6h9c5.6 0 10.9-2.2 14.9-6.2s6.2-9.3 6.2-14.9l.1-17.8zm-21 33.5h-9c-5.5 0-10.6-2.4-14.1-6.6L31.9 68.1c-.5-.6-.7-1.3-.6-2.1.1-.8.5-1.4 1.1-1.8.4-.3 1-.5 1.5-.5.7 0 1.4.3 1.9.8l5.8 5.8c1.1 1.1 2.8 1.4 4.3.8 1.5-.6 2.4-2 2.4-3.6V30.1c0-1.4 1.2-2.6 2.6-2.6.7 0 1.3.3 1.8.8s.8 1.1.8 1.8v25.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6V59c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v6.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v17.8c0 4.2-1.6 8.1-4.6 11.1-3.2 2.9-7.2 4.5-11.3 4.5zM18.2 34.2c-1.5 0-2.6-1.2-2.6-2.7V11.2c0-1.5 1.2-2.7 2.6-2.7h46.5c1.5 0 2.6 1.2 2.6 2.7v20.3c0 1.5-1.2 2.7-2.6 2.7h-6v-4c0-2.1-.8-4.1-2.3-5.6-1.5-1.5-3.5-2.3-5.6-2.3-4.4 0-7.9 3.6-7.9 8v4H18.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35.5 15.5L30 21.4l-1.9-2.1c-1-1.1-2.7-1.2-3.8-.1-1.1 1-1.2 2.7-.1 3.8l3.9 4.2c.5.6 1.2.9 2 .9s1.5-.3 2-.9l7.5-8c1-1.1 1-2.8-.1-3.8s-3-1-4 .1z"
+  }))))));
+}
+
+const SubscriptionCancelNowButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = useContext(store$i);
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+
+  const cancelSubscription = (payload, onSuccess, onFailure) => {
+    window.Pelcro.subscription.cancel({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: payload.subscription_id,
+      mode: payload.mode,
+      ...(payload.reason && {
+        reason: payload.reason
+      })
+    }, (err, res) => {
+      var _ReactGA$event;
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Canceled",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+
+  const handleCancelNowClick = () => {
+    const payload = {
+      subscription_id: subscription.id,
+      mode: "now",
+      ...(cancelationReason && {
+        reason: cancelationReason
+      })
+    };
+    onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
+
+    switchView(null); //Show confirmation alert after closing the modal
+
+    notify.confirm((onSuccess, onFailure) => {
+      cancelSubscription(payload, onSuccess, onFailure);
+    }, {
+      confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
+      loadingMessage: t("messages.subCancellation.loading"),
+      successMessage: t("messages.subCancellation.success"),
+      errorMessage: t("messages.subCancellation.error")
+    }, {
+      closeButtonLabel: t("labels.subCancellation.goBack")
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelNow"));
+};
+
+const SubscriptionCancelLaterButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = useContext(store$i);
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+
+  const cancelSubscription = (payload, onSuccess, onFailure) => {
+    window.Pelcro.subscription.cancel({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: payload.subscription_id,
+      mode: payload.mode,
+      ...(payload.reason && {
+        reason: payload.reason
+      })
+    }, (err, res) => {
+      var _ReactGA$event;
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Canceled",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+
+  const handleCancelNowClick = () => {
+    const payload = {
+      subscription_id: subscription.id,
+      mode: "period_end",
+      ...(cancelationReason && {
+        reason: cancelationReason
+      })
+    };
+    onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
+
+    switchView(null); //Show confirmation alert after closing the modal
+
+    notify.confirm((onSuccess, onFailure) => {
+      cancelSubscription(payload, onSuccess, onFailure);
+    }, {
+      confirmMessage: t("messages.subCancellation.isSureToCancel"),
+      loadingMessage: t("messages.subCancellation.loading"),
+      successMessage: t("messages.subCancellation.success"),
+      errorMessage: t("messages.subCancellation.error")
+    }, {
+      closeButtonLabel: t("labels.subCancellation.goBack")
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelLater"));
+};
+
+const SubscriptionCancelView = props => {
+  const {
+    subscriptionToCancel
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-subscription-cancel-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("labels.title"), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-gray-400 plc-text-base plc-block"
+  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement(SvgSubscription, {
+    className: "plc-w-32 plc-h-32"
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-mb-3 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
+  }, t("messages.subscriptionEnd"), " ", new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }), "."), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement(SubscriptionCancelNowButton, {
+    className: "plc-mb-2",
+    subscription: subscriptionToCancel
+  }), subscriptionToCancel.cancel_at_period_end === 0 && /*#__PURE__*/React__default.createElement(SubscriptionCancelLaterButton, {
+    subscription: subscriptionToCancel
+  }))));
+};
+
+const SubscriptionCancelModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-subscription-cancel-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionCancelView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+SubscriptionCancelModal.viewId = "subscription-cancel";
+
+const initialState$h = {
+  suspendDate: null,
+  buttonDisabled: false
+};
+const store$h = /*#__PURE__*/createContext(initialState$h);
+const {
+  Provider: Provider$h
+} = store$h;
+
+const SubscriptionSuspendContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  onFailure = () => {},
+  children,
+  ...props
+}) => {
+  useTranslation("SubscriptionSuspend");
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SET_SUBSCRIPTION_SUSPEND_DATE:
+        return lib_7({ ...state,
+          suspendDate: action.payload
+        });
+
+      case DISABLE_SUBMIT:
+        return lib_7({ ...state,
+          buttonDisabled: action.payload
+        });
+
+      default:
+        return state;
+    }
+  }, initialState$h);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-subscription-suspend-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$h,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store: store$h
+  })));
 };
 
-/**
- *
- */
-
-function TextArea({
+function DatePicker({
   label = "",
   tooltipText,
   required,
@@ -17045,8 +17485,8 @@ function TextArea({
   }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
     value: tooltipText,
     className: "plc-ml-1"
-  })), /*#__PURE__*/React__default.createElement("textarea", Object.assign({
-    type: "text",
+  })), /*#__PURE__*/React__default.createElement("input", Object.assign({
+    type: "date",
     id: id,
     className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
     "aria-describedby": errorId,
@@ -17058,121 +17498,45 @@ function TextArea({
   }, error));
 }
 
-const SubscriptionCancelReason = props => {
+const nowDate$1 = new Date();
+nowDate$1.toISOString().substr(0, 10);
+const dayFromNowDateISO = new Date(new Date().setDate(nowDate$1.getDate() + 1)).toISOString().substr(0, 10);
+const SubscriptionSuspendDate = props => {
+  var _state$suspendDate;
+
   const {
     t
-  } = useTranslation("subscriptionCancel");
+  } = useTranslation("subscriptionSuspend");
   const {
     dispatch,
     state
   } = useContext(store$h);
 
-  const handleOnTextAreaBlur = e => {
-    dispatch({
-      type: SET_CANCEL_SUBSCRIPTION_REASON,
-      payload: e.target.value.trim()
-    });
-  };
-
-  return /*#__PURE__*/React__default.createElement(TextArea, Object.assign({
-    label: t("labels.cancelReason"),
-    onBlur: e => handleOnTextAreaBlur(e)
-  }, props));
-};
-
-var _switch;
-
-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 SvgSubscription(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 100 125",
-    fill: "currentColor"
-  }, props), _switch || (_switch = /*#__PURE__*/React.createElement("switch", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2c0 1.8.7 3.6 2 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3 2-3.1 2-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M90.4 58.6c0-4.4-3.6-7.9-8-7.9-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-.9 0-1.8.1-2.6.4v-4.6h6c4.8 0 8.6-3.9 8.6-8.7V11.2c0-4.8-3.9-8.7-8.6-8.7H18.2c-4.8 0-8.6 3.9-8.6 8.7v20.3c0 4.8 3.9 8.7 8.6 8.7h24.6V64l-3.3-3.3c-2.7-2.7-7-3.1-10.2-1-1.9 1.3-3.1 3.3-3.5 5.5-.3 2.2.3 4.5 1.8 6.3L42 88.9c4.5 5.5 11.2 8.6 18.2 8.6h9c5.6 0 10.9-2.2 14.9-6.2s6.2-9.3 6.2-14.9l.1-17.8zm-21 33.5h-9c-5.5 0-10.6-2.4-14.1-6.6L31.9 68.1c-.5-.6-.7-1.3-.6-2.1.1-.8.5-1.4 1.1-1.8.4-.3 1-.5 1.5-.5.7 0 1.4.3 1.9.8l5.8 5.8c1.1 1.1 2.8 1.4 4.3.8 1.5-.6 2.4-2 2.4-3.6V30.1c0-1.4 1.2-2.6 2.6-2.6.7 0 1.3.3 1.8.8s.8 1.1.8 1.8v25.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6V59c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v6.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v17.8c0 4.2-1.6 8.1-4.6 11.1-3.2 2.9-7.2 4.5-11.3 4.5zM18.2 34.2c-1.5 0-2.6-1.2-2.6-2.7V11.2c0-1.5 1.2-2.7 2.6-2.7h46.5c1.5 0 2.6 1.2 2.6 2.7v20.3c0 1.5-1.2 2.7-2.6 2.7h-6v-4c0-2.1-.8-4.1-2.3-5.6-1.5-1.5-3.5-2.3-5.6-2.3-4.4 0-7.9 3.6-7.9 8v4H18.2z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M35.5 15.5L30 21.4l-1.9-2.1c-1-1.1-2.7-1.2-3.8-.1-1.1 1-1.2 2.7-.1 3.8l3.9 4.2c.5.6 1.2.9 2 .9s1.5-.3 2-.9l7.5-8c1-1.1 1-2.8-.1-3.8s-3-1-4 .1z"
-  }))))));
-}
-
-const SubscriptionCancelNowButton = ({
-  subscription,
-  onClick,
-  className
-}) => {
-  const {
-    switchView
-  } = usePelcro();
-  const {
-    state: {
-      cancelationReason
-    },
-    dispatch
-  } = useContext(store$h);
-  const {
-    t
-  } = useTranslation("subscriptionCancel");
-
-  const cancelSubscription = (payload, onSuccess, onFailure) => {
-    window.Pelcro.subscription.cancel({
-      auth_token: window.Pelcro.user.read().auth_token,
-      subscription_id: payload.subscription_id,
-      mode: payload.mode,
-      ...(payload.reason && {
-        reason: payload.reason
-      })
-    }, (err, res) => {
-      var _ReactGA$event;
-
-      if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-      }
-
-      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-        category: "ACTIONS",
-        action: "Canceled",
-        nonInteraction: true
+  const handleInputChange = value => {
+    if (value) {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
       });
-      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-    });
-  };
-
-  const handleCancelNowClick = () => {
-    const payload = {
-      subscription_id: subscription.id,
-      mode: "now",
-      ...(cancelationReason && {
-        reason: cancelationReason
-      })
-    };
-    onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
-
-    switchView(null); //Show confirmation alert after closing the modal
-
-    notify.confirm((onSuccess, onFailure) => {
-      cancelSubscription(payload, onSuccess, onFailure);
-    }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
-      loadingMessage: t("messages.subCancellation.loading"),
-      successMessage: t("messages.subCancellation.success"),
-      errorMessage: t("messages.subCancellation.error")
-    }, {
-      closeButtonLabel: t("labels.subCancellation.goBack")
-    });
+      dispatch({
+        type: SET_SUBSCRIPTION_SUSPEND_DATE,
+        payload: value
+      });
+    }
   };
 
-  return /*#__PURE__*/React__default.createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelNow"));
+  useEffect(() => {
+    handleInputChange(dayFromNowDateISO);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(DatePicker, Object.assign({
+    label: t("labels.suspensionDate"),
+    min: dayFromNowDateISO,
+    value: (_state$suspendDate = state.suspendDate) !== null && _state$suspendDate !== void 0 ? _state$suspendDate : dayFromNowDateISO,
+    onChange: e => handleInputChange(e.target.value)
+  }, props));
 };
 
-const SubscriptionCancelLaterButton = ({
+const SubscriptionSuspendButton = ({
   subscription,
   onClick,
   className
@@ -17182,22 +17546,21 @@ const SubscriptionCancelLaterButton = ({
   } = usePelcro();
   const {
     state: {
-      cancelationReason
+      suspendDate,
+      buttonDisabled
     },
     dispatch
   } = useContext(store$h);
   const {
     t
-  } = useTranslation("subscriptionCancel");
+  } = useTranslation("subscriptionSuspend");
 
-  const cancelSubscription = (payload, onSuccess, onFailure) => {
-    window.Pelcro.subscription.cancel({
+  const suspendSubscription = (payload, onSuccess, onFailure) => {
+    window.Pelcro.subscription.update({
       auth_token: window.Pelcro.user.read().auth_token,
       subscription_id: payload.subscription_id,
-      mode: payload.mode,
-      ...(payload.reason && {
-        reason: payload.reason
-      })
+      suspend: 1,
+      shipments_suspended_until: suspendDate
     }, (err, res) => {
       var _ReactGA$event;
 
@@ -17207,29 +17570,25 @@ const SubscriptionCancelLaterButton = ({
 
       ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
         category: "ACTIONS",
-        action: "Canceled",
+        action: "Suspended",
         nonInteraction: true
       });
       onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
     });
   };
 
-  const handleCancelNowClick = () => {
+  const handleClick = () => {
     const payload = {
-      subscription_id: subscription.id,
-      mode: "period_end",
-      ...(cancelationReason && {
-        reason: cancelationReason
-      })
+      subscription_id: subscription.id
     };
     onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
 
     switchView(null); //Show confirmation alert after closing the modal
 
     notify.confirm((onSuccess, onFailure) => {
-      cancelSubscription(payload, onSuccess, onFailure);
+      suspendSubscription(payload, onSuccess, onFailure);
     }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancel"),
+      confirmMessage: t("messages.subCancellation.isSureToSuspendNow"),
       loadingMessage: t("messages.subCancellation.loading"),
       successMessage: t("messages.subCancellation.success"),
       errorMessage: t("messages.subCancellation.error")
@@ -17239,45 +17598,40 @@ const SubscriptionCancelLaterButton = ({
   };
 
   return /*#__PURE__*/React__default.createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelLater"));
+    onClick: handleClick,
+    className: `${className}`,
+    disabled: buttonDisabled
+  }, t("messages.suspendNow"));
 };
 
-const SubscriptionCancelView = props => {
+const SubscriptionSuspendView = props => {
   const {
-    subscriptionToCancel
+    subscriptionToSuspend
   } = usePelcro();
   const {
     t
-  } = useTranslation("subscriptionCancel");
+  } = useTranslation("subscriptionSuspend");
   return /*#__PURE__*/React__default.createElement("div", {
-    id: "pelcro-subscription-cancel-view"
+    id: "pelcro-subscription-suspend-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("labels.title"), /*#__PURE__*/React__default.createElement("span", {
     className: "plc-text-gray-400 plc-text-base plc-block"
-  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
+  }, "(", subscriptionToSuspend.plan.nickname, ")"))), /*#__PURE__*/React__default.createElement(SubscriptionSuspendContainer, props, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
   }, /*#__PURE__*/React__default.createElement(SvgSubscription, {
     className: "plc-w-32 plc-h-32"
   }), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-mb-3 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
-  }, t("messages.subscriptionEnd"), " ", new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  }), "."), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement(SubscriptionCancelNowButton, {
+  }, t("messages.suspensionEnd"), "."), /*#__PURE__*/React__default.createElement(SubscriptionSuspendDate, null), /*#__PURE__*/React__default.createElement(SubscriptionSuspendButton, {
     className: "plc-mb-2",
-    subscription: subscriptionToCancel
-  }), subscriptionToCancel.cancel_at_period_end === 0 && /*#__PURE__*/React__default.createElement(SubscriptionCancelLaterButton, {
-    subscription: subscriptionToCancel
+    subscription: subscriptionToSuspend
   }))));
 };
 
-const SubscriptionCancelModal = ({
+const SubscriptionSuspendModal = ({
   onDisplay,
   onClose,
   ...otherProps
@@ -17285,10 +17639,10 @@ const SubscriptionCancelModal = ({
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
-    id: "pelcro-subscription-cancel-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionCancelView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+    id: "pelcro-subscription-suspend-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionSuspendView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
 };
-SubscriptionCancelModal.viewId = "subscription-cancel";
+SubscriptionSuspendModal.viewId = "subscription-suspend";
 
 var _path$i;
 
@@ -21793,40 +22147,6 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(La
   store: store$7
 }, props));
 
-function DatePicker({
-  label = "",
-  tooltipText,
-  required,
-  id,
-  errorId,
-  error,
-  className = "",
-  labelClassName = "",
-  errorClassName = "",
-  wrapperClassName = "",
-  ...otherProps
-}) {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
-    value: tooltipText,
-    className: "plc-ml-1"
-  })), /*#__PURE__*/React__default.createElement("input", Object.assign({
-    type: "date",
-    id: id,
-    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
-    "aria-describedby": errorId,
-    "aria-invalid": Boolean(error)
-  }, otherProps)), error && /*#__PURE__*/React__default.createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 const nowDate = new Date();
 const nowDateISO = nowDate.toISOString().substr(0, 10);
 const yearFromNowDateISO = new Date(new Date().setFullYear(nowDate.getFullYear() + 1)).toISOString().substr(0, 10);
@@ -24271,6 +24591,7 @@ const SubscriptionsMenu = props => {
 const SubscriptionsItems = ({
   onClose,
   cancelSubscription,
+  unSuspendSubscription,
   reactivateSubscription,
   setProductAndPlan,
   setSubscriptionIdToRenew,
@@ -24286,6 +24607,7 @@ const SubscriptionsItems = ({
   const {
     switchView,
     setSubscriptionToCancel,
+    setSubscriptionToSuspend,
     isAuthenticated
   } = usePelcro();
   const subs = getNonDonationSubs();
@@ -24336,6 +24658,34 @@ const SubscriptionsItems = ({
       setProductAndPlan(product, plan);
       setSubscriptionIdToRenew(sub.id);
       setView("plan-select");
+    }; // Suspend click
+
+
+    const onSuspendClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
+      setSubscriptionToSuspend(sub.id);
+      return setView("subscription-suspend");
+    }; // UnSuspend click
+
+
+    const onUnSuspendClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
+      notify.confirm((onSuccess, onFailure) => {
+        unSuspendSubscription(sub.id, onSuccess, onFailure);
+      }, {
+        confirmMessage: t("messages.subUnSuspend.isSureToUnSuspend"),
+        loadingMessage: t("messages.subUnSuspend.loading"),
+        successMessage: t("messages.subUnSuspend.success"),
+        errorMessage: t("messages.subUnSuspend.error")
+      }, {
+        closeButtonLabel: t("labels.subCancellation.goBack")
+      });
     };
 
     const getPhases = () => {
@@ -24389,7 +24739,21 @@ const SubscriptionsItems = ({
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default.createElement(Button, {
+    }, t("labels.renew")), sub.shipments_suspended_until ? /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-suspend-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+      onClick: onUnSuspendClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.unsuspend")) : /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-blue-400 pelcro-dashboard-sub-suspend-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgCalendar, null),
+      onClick: onSuspendClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.suspend")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
       icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
@@ -25104,6 +25468,27 @@ class Dashboard extends Component {
       });
     });
 
+    _defineProperty$3(this, "unSuspendSubscription", (subscription_id, onSuccess, onFailure) => {
+      window.Pelcro.subscription.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        subscription_id: subscription_id,
+        suspend: 0
+      }, (err, res) => {
+        var _ReactGA$event3;
+
+        if (err) {
+          return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        }
+
+        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event3 = ReactGA.event) === null || _ReactGA$event3 === void 0 ? void 0 : _ReactGA$event3.call(ReactGA, {
+          category: "ACTIONS",
+          action: "UnSuspended",
+          nonInteraction: true
+        });
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+      });
+    });
+
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
     });
@@ -25525,6 +25910,7 @@ class Dashboard extends Component {
       content: /*#__PURE__*/React__default.createElement(SubscriptionsMenu, {
         onClose: this.props.onClose,
         cancelSubscription: this.cancelSubscription,
+        unSuspendSubscription: this.unSuspendSubscription,
         reactivateSubscription: this.reactivateSubscription,
         setProductAndPlan: this.props.setProductAndPlan,
         setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
@@ -29419,4 +29805,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, 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, LoginRequestLoginToken, 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, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, 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, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, 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, LoginRequestLoginToken, 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, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, 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, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };