@pelcro/react-pelcro-js 3.52.0 → 3.55.0

package/dist/index.cjs.js

@@ -4087,7 +4087,7 @@ var labels$R = {
 	cancelReason: "Cancellation reason",
 	endOn: "End on",
 	endImmediately: "End immediately",
-	cancel: "Cancel",
+	cancel: "Cancel subscription",
 	subCancellation: {
 		goBack: "Go back"
 	}
@@ -18672,7 +18672,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           payload: true
         });
         try {
-          var _window$Pelcro$site$r7, _window$Pelcro$site$r8;
+          var _window$Pelcro$site$r7, _window$Pelcro$site$r8, _window$Pelcro$site$r9;
           // Ensure the DOM element exists before creating Drop-in UI
           const dropinContainer = document.querySelector("#dropin-container");
           if (!dropinContainer) {
@@ -18727,22 +18727,25 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             // Enable Google Pay for both orders and subscriptions
             googlePay: {
               googlePayVersion: 2,
-              merchantId: (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.google_merchant_id,
+              merchantId: (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : (_window$Pelcro$site$r9 = _window$Pelcro$site$r8.braintree_gateway_settings) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.google_pay_merchant_id,
               transactionInfo: {
                 totalPriceStatus: "FINAL",
                 totalPrice: googlePayAmount,
                 currencyCode: (() => {
                   const currency = getCurrencyFromPaymentType(plan, order, invoice);
                   return (currency === null || currency === void 0 ? void 0 : currency.toUpperCase()) || "USD";
-                })()
+                })(),
+                countryCode: "US" // Required for production Google Pay
               },
+
               // Add button configuration
               button: {
                 color: "black",
-                type: type === "createPayment" ? "subscribe" : "buy"
+                type: "buy" // Always use "buy" - "subscribe" type causes OR_BIBED_11 error
               }
             }
           });
+
           console.log("Setting skeleton loader to false after successful Braintree initialization");
           dispatch({
             type: SKELETON_LOADER,
@@ -18758,11 +18761,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         } catch (error) {
-          var _error$message, _error$message2, _error$message3, _error$message4;
+          var _error$message, _error$message2, _error$message3, _error$message4, _error$message5, _error$message6;
           console.error("Failed to initialize Braintree Drop-in UI:", error);
 
           // Check if it's a Google Pay specific error
-          if (error !== null && error !== void 0 && (_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes("OR_BIBED_06") || error !== null && error !== void 0 && (_error$message2 = error.message) !== null && _error$message2 !== void 0 && _error$message2.includes("Google Pay")) {
+          if (error !== null && error !== void 0 && (_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes("OR_BIBED_06") || error !== null && error !== void 0 && (_error$message2 = error.message) !== null && _error$message2 !== void 0 && _error$message2.includes("OR_BIBED_11") || error !== null && error !== void 0 && (_error$message3 = error.message) !== null && _error$message3 !== void 0 && _error$message3.includes("Google Pay")) {
             console.warn("Google Pay configuration issue detected. " + `Transaction type: ${type}. ` + "This might be due to merchant settings or unsupported payment flow.");
           }
           dispatch({
@@ -18772,7 +18775,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
           // Don't show error to user for Google Pay configuration issues
           // as it's expected for subscriptions
-          if (!(error !== null && error !== void 0 && (_error$message3 = error.message) !== null && _error$message3 !== void 0 && _error$message3.includes("OR_BIBED_06")) && !(error !== null && error !== void 0 && (_error$message4 = error.message) !== null && _error$message4 !== void 0 && _error$message4.includes("Google Pay"))) {
+          if (!(error !== null && error !== void 0 && (_error$message4 = error.message) !== null && _error$message4 !== void 0 && _error$message4.includes("OR_BIBED_06")) && !(error !== null && error !== void 0 && (_error$message5 = error.message) !== null && _error$message5 !== void 0 && _error$message5.includes("OR_BIBED_11")) && !(error !== null && error !== void 0 && (_error$message6 = error.message) !== null && _error$message6 !== void 0 && _error$message6.includes("Google Pay"))) {
             dispatch({
               type: SHOW_ALERT,
               payload: {
@@ -19471,9 +19474,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   React.useEffect(() => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r9, _window$Pelcro$site$r10;
-      const payPageId = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.vantiv_gateway_settings.report_group;
+      var _window$Pelcro$site$r10, _window$Pelcro$site$r11;
+      const payPageId = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r11 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r11 === void 0 ? void 0 : _window$Pelcro$site$r11.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19593,9 +19596,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r11;
+    var _window$Pelcro$site$r12;
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
-    const taxesEnabled = (_window$Pelcro$site$r11 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r11 === void 0 ? void 0 : _window$Pelcro$site$r11.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r12 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r12 === void 0 ? void 0 : _window$Pelcro$site$r12.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -20542,11 +20545,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r12;
+    var _window$Pelcro$site$r13;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    const taxesEnabled = (_window$Pelcro$site$r12 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r12 === void 0 ? void 0 : _window$Pelcro$site$r12.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r13 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r13 === void 0 ? void 0 : _window$Pelcro$site$r13.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -22907,13 +22910,13 @@ const SubscriptionCancelView = props => {
     subscription: subscriptionToCancel,
     hasPhases: hasPhases
   }), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-space-x-0 plc-space-y-3 md:plc-space-x-3 md:plc-space-y-0 plc-w-full plc-flex plc-flex-col md:plc-flex-row plc-items-center plc-justify-center"
+    className: "plc-gap-3 plc-w-full plc-flex plc-flex-row plc-items-center plc-justify-center"
   }, /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelButton, {
-    className: "plc-w-3/4 md:plc-w-2/5",
+    className: "plc-whitespace-nowrap",
     subscription: subscriptionToCancel
   }), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "outline",
-    className: "plc-w-3/4 md:plc-w-2/5",
+    className: "plc-whitespace-nowrap",
     onClick: () => {
       switchView("dashboard");
     }

package/dist/index.esm.js

@@ -4057,7 +4057,7 @@ var labels$R = {
 	cancelReason: "Cancellation reason",
 	endOn: "End on",
 	endImmediately: "End immediately",
-	cancel: "Cancel",
+	cancel: "Cancel subscription",
 	subCancellation: {
 		goBack: "Go back"
 	}
@@ -18642,7 +18642,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           payload: true
         });
         try {
-          var _window$Pelcro$site$r7, _window$Pelcro$site$r8;
+          var _window$Pelcro$site$r7, _window$Pelcro$site$r8, _window$Pelcro$site$r9;
           // Ensure the DOM element exists before creating Drop-in UI
           const dropinContainer = document.querySelector("#dropin-container");
           if (!dropinContainer) {
@@ -18697,22 +18697,25 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             // Enable Google Pay for both orders and subscriptions
             googlePay: {
               googlePayVersion: 2,
-              merchantId: (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.google_merchant_id,
+              merchantId: (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : (_window$Pelcro$site$r9 = _window$Pelcro$site$r8.braintree_gateway_settings) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.google_pay_merchant_id,
               transactionInfo: {
                 totalPriceStatus: "FINAL",
                 totalPrice: googlePayAmount,
                 currencyCode: (() => {
                   const currency = getCurrencyFromPaymentType(plan, order, invoice);
                   return (currency === null || currency === void 0 ? void 0 : currency.toUpperCase()) || "USD";
-                })()
+                })(),
+                countryCode: "US" // Required for production Google Pay
               },
+
               // Add button configuration
               button: {
                 color: "black",
-                type: type === "createPayment" ? "subscribe" : "buy"
+                type: "buy" // Always use "buy" - "subscribe" type causes OR_BIBED_11 error
               }
             }
           });
+
           console.log("Setting skeleton loader to false after successful Braintree initialization");
           dispatch({
             type: SKELETON_LOADER,
@@ -18728,11 +18731,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         } catch (error) {
-          var _error$message, _error$message2, _error$message3, _error$message4;
+          var _error$message, _error$message2, _error$message3, _error$message4, _error$message5, _error$message6;
           console.error("Failed to initialize Braintree Drop-in UI:", error);
 
           // Check if it's a Google Pay specific error
-          if (error !== null && error !== void 0 && (_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes("OR_BIBED_06") || error !== null && error !== void 0 && (_error$message2 = error.message) !== null && _error$message2 !== void 0 && _error$message2.includes("Google Pay")) {
+          if (error !== null && error !== void 0 && (_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes("OR_BIBED_06") || error !== null && error !== void 0 && (_error$message2 = error.message) !== null && _error$message2 !== void 0 && _error$message2.includes("OR_BIBED_11") || error !== null && error !== void 0 && (_error$message3 = error.message) !== null && _error$message3 !== void 0 && _error$message3.includes("Google Pay")) {
             console.warn("Google Pay configuration issue detected. " + `Transaction type: ${type}. ` + "This might be due to merchant settings or unsupported payment flow.");
           }
           dispatch({
@@ -18742,7 +18745,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
           // Don't show error to user for Google Pay configuration issues
           // as it's expected for subscriptions
-          if (!(error !== null && error !== void 0 && (_error$message3 = error.message) !== null && _error$message3 !== void 0 && _error$message3.includes("OR_BIBED_06")) && !(error !== null && error !== void 0 && (_error$message4 = error.message) !== null && _error$message4 !== void 0 && _error$message4.includes("Google Pay"))) {
+          if (!(error !== null && error !== void 0 && (_error$message4 = error.message) !== null && _error$message4 !== void 0 && _error$message4.includes("OR_BIBED_06")) && !(error !== null && error !== void 0 && (_error$message5 = error.message) !== null && _error$message5 !== void 0 && _error$message5.includes("OR_BIBED_11")) && !(error !== null && error !== void 0 && (_error$message6 = error.message) !== null && _error$message6 !== void 0 && _error$message6.includes("Google Pay"))) {
             dispatch({
               type: SHOW_ALERT,
               payload: {
@@ -19441,9 +19444,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   useEffect(() => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r9, _window$Pelcro$site$r10;
-      const payPageId = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.vantiv_gateway_settings.report_group;
+      var _window$Pelcro$site$r10, _window$Pelcro$site$r11;
+      const payPageId = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r11 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r11 === void 0 ? void 0 : _window$Pelcro$site$r11.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19563,9 +19566,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r11;
+    var _window$Pelcro$site$r12;
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
-    const taxesEnabled = (_window$Pelcro$site$r11 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r11 === void 0 ? void 0 : _window$Pelcro$site$r11.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r12 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r12 === void 0 ? void 0 : _window$Pelcro$site$r12.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -20512,11 +20515,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r12;
+    var _window$Pelcro$site$r13;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    const taxesEnabled = (_window$Pelcro$site$r12 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r12 === void 0 ? void 0 : _window$Pelcro$site$r12.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r13 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r13 === void 0 ? void 0 : _window$Pelcro$site$r13.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -22877,13 +22880,13 @@ const SubscriptionCancelView = props => {
     subscription: subscriptionToCancel,
     hasPhases: hasPhases
   }), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-space-x-0 plc-space-y-3 md:plc-space-x-3 md:plc-space-y-0 plc-w-full plc-flex plc-flex-col md:plc-flex-row plc-items-center plc-justify-center"
+    className: "plc-gap-3 plc-w-full plc-flex plc-flex-row plc-items-center plc-justify-center"
   }, /*#__PURE__*/React__default.createElement(SubscriptionCancelButton, {
-    className: "plc-w-3/4 md:plc-w-2/5",
+    className: "plc-whitespace-nowrap",
     subscription: subscriptionToCancel
   }), /*#__PURE__*/React__default.createElement(Button, {
     variant: "outline",
-    className: "plc-w-3/4 md:plc-w-2/5",
+    className: "plc-whitespace-nowrap",
     onClick: () => {
       switchView("dashboard");
     }

package/dist/pelcro.css

@@ -2983,6 +2983,10 @@ apple-pay-button {
   vertical-align: middle;
 }
 
+.pelcro-root .plc-whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .pelcro-root .plc-whitespace-pre-line {
   white-space: pre-line;
 }
@@ -3115,6 +3119,10 @@ apple-pay-button {
   z-index: 999999;
 }
 
+.pelcro-root .plc-gap-3 {
+  gap: 0.75rem;
+}
+
 .pelcro-root .plc-gap-x-3 {
   column-gap: 0.75rem;
 }
@@ -3324,25 +3332,6 @@ apple-pay-button {
 }
 
 @media (min-width: 768px) {
-  .pelcro-root .md\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
-  }
-
-  .pelcro-root .md\:plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .pelcro-root .md\:plc-flex-row {
-    flex-direction: row;
-  }
-
-  .pelcro-root .md\:plc-w-2\/5 {
-    width: 40%;
-  }
 }
 
 @media (min-width: 1024px) {

package/package.json

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