@pelcro/react-pelcro-js 3.9.4 → 3.10.0-beta.1

package/dist/index.cjs.js

@@ -3806,7 +3806,8 @@ var meter_ko = {
 
 var messages$I = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
-	bankRedirection: "Please hold, redirecting you to your bank."
+	bankRedirection: "Please hold, redirecting you to your bank.",
+	bankAuthenticationSuccess: "Please wait while we process your request."
 };
 var labels$F = {
 	card: "Enter card number",
@@ -3836,7 +3837,8 @@ var checkoutForm_en = {
 
 var messages$H = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
-	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
+	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque.",
+	bankAuthenticationSuccess: "Veuillez patienter pendant que nous accédons à votre requête."
 };
 var labels$E = {
 	card: "Entrez le numéro de carte",
@@ -3866,7 +3868,8 @@ var checkoutForm_fr = {
 
 var messages$G = {
 	youAreSafe: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: ",
-	bankRedirection: "잠시만 기다려 주십시오. 결제 은행으로 연결 중입니다."
+	bankRedirection: "잠시만 기다려 주십시오. 결제 은행으로 연결 중입니다.",
+	bankAuthenticationSuccess: "요청을 처리하는 동안 기다려 주십시오."
 };
 var labels$D = {
 	card: "카드 번호 입력",
@@ -15516,6 +15519,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 if (data.message === "3DS-authentication-complete") {
                   const tapID = data.tapID;
                   toggleAuthenticationPendingView(false);
+                  toggleAuthenticationSuccessPendingView(true);
                   window.removeEventListener("message", retrieveSourceInfoFromIframe);
                   dispatch({
                     type: SHOW_ALERT,
@@ -16793,6 +16797,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const handlePaymentError = error => {
     var _getErrorMessages;
 
+    toggleAuthenticationSuccessPendingView(false);
+
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -16862,6 +16868,18 @@ const PaymentMethodContainerWithoutStripe = ({
     }
   };
 
+  const toggleAuthenticationSuccessPendingView = show => {
+    const cardAuthContainer = document.querySelector(".card-authentication-success-container");
+
+    if (show) {
+      cardAuthContainer.classList.remove("plc-hidden");
+      cardAuthContainer.classList.add("plc-flex");
+    } else {
+      cardAuthContainer.classList.add("plc-hidden");
+      cardAuthContainer.classList.remove("plc-flex");
+    }
+  };
+
   const injectCardAuthenticationIframe = source => {
     var _source$redirect;
 
@@ -17778,6 +17796,17 @@ const BankRedirection = () => {
   }));
 };
 
+const BankAuthenticationSuccess = () => {
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-absolute plc-inset-0 plc-flex-col plc-items-center plc-justify-center plc-hidden plc-text-lg plc-bg-white plc-z-max plc-text-primary-500 card-authentication-success-container"
+  }, t("messages.bankAuthenticationSuccess"), /*#__PURE__*/React__default['default'].createElement(SvgSpinner, {
+    className: "plc-w-10 plc-h-10 plc-mt-5 plc-animate-spin"
+  }));
+};
+
 var _path$l;
 
 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); }
@@ -17919,7 +17948,7 @@ function PaymentMethodView({
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
     onFailure: onFailure
-  }, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
+  }, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
   }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
@@ -30847,6 +30876,7 @@ exports.AlertElement = Alert;
 exports.ApplyCouponButton = ApplyCouponButton;
 exports.Auth0LoginButton = Auth0LoginButton;
 exports.Badge = Badge;
+exports.BankAuthenticationSuccess = BankAuthenticationSuccess;
 exports.BankRedirection = BankRedirection;
 exports.Button = Button;
 exports.CartContainer = CartContainer;

package/dist/index.esm.js

@@ -3776,7 +3776,8 @@ var meter_ko = {
 
 var messages$I = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
-	bankRedirection: "Please hold, redirecting you to your bank."
+	bankRedirection: "Please hold, redirecting you to your bank.",
+	bankAuthenticationSuccess: "Please wait while we process your request."
 };
 var labels$F = {
 	card: "Enter card number",
@@ -3806,7 +3807,8 @@ var checkoutForm_en = {
 
 var messages$H = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
-	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
+	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque.",
+	bankAuthenticationSuccess: "Veuillez patienter pendant que nous accédons à votre requête."
 };
 var labels$E = {
 	card: "Entrez le numéro de carte",
@@ -3836,7 +3838,8 @@ var checkoutForm_fr = {
 
 var messages$G = {
 	youAreSafe: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: ",
-	bankRedirection: "잠시만 기다려 주십시오. 결제 은행으로 연결 중입니다."
+	bankRedirection: "잠시만 기다려 주십시오. 결제 은행으로 연결 중입니다.",
+	bankAuthenticationSuccess: "요청을 처리하는 동안 기다려 주십시오."
 };
 var labels$D = {
 	card: "카드 번호 입력",
@@ -15486,6 +15489,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 if (data.message === "3DS-authentication-complete") {
                   const tapID = data.tapID;
                   toggleAuthenticationPendingView(false);
+                  toggleAuthenticationSuccessPendingView(true);
                   window.removeEventListener("message", retrieveSourceInfoFromIframe);
                   dispatch({
                     type: SHOW_ALERT,
@@ -16763,6 +16767,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const handlePaymentError = error => {
     var _getErrorMessages;
 
+    toggleAuthenticationSuccessPendingView(false);
+
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -16832,6 +16838,18 @@ const PaymentMethodContainerWithoutStripe = ({
     }
   };
 
+  const toggleAuthenticationSuccessPendingView = show => {
+    const cardAuthContainer = document.querySelector(".card-authentication-success-container");
+
+    if (show) {
+      cardAuthContainer.classList.remove("plc-hidden");
+      cardAuthContainer.classList.add("plc-flex");
+    } else {
+      cardAuthContainer.classList.add("plc-hidden");
+      cardAuthContainer.classList.remove("plc-flex");
+    }
+  };
+
   const injectCardAuthenticationIframe = source => {
     var _source$redirect;
 
@@ -17748,6 +17766,17 @@ const BankRedirection = () => {
   }));
 };
 
+const BankAuthenticationSuccess = () => {
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-absolute plc-inset-0 plc-flex-col plc-items-center plc-justify-center plc-hidden plc-text-lg plc-bg-white plc-z-max plc-text-primary-500 card-authentication-success-container"
+  }, t("messages.bankAuthenticationSuccess"), /*#__PURE__*/React__default.createElement(SvgSpinner, {
+    className: "plc-w-10 plc-h-10 plc-mt-5 plc-animate-spin"
+  }));
+};
+
 var _path$l;
 
 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); }
@@ -17889,7 +17918,7 @@ function PaymentMethodView({
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
     onFailure: onFailure
-  }, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(AlertWithContext, {
+  }, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
   }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
@@ -30779,4 +30808,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, IncludeFirstName, IncludeLastName, IncludePhone, 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, SubscriptionSuspendContainer, 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 };
+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, BankAuthenticationSuccess, 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, IncludeFirstName, IncludeLastName, IncludePhone, 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, SubscriptionSuspendContainer, 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 };

package/package.json

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