@pelcro/react-pelcro-js 4.0.0-alpha.72 → 4.0.0-alpha.74

package/dist/index.cjs.js

@@ -25262,7 +25262,8 @@ const PaymentMethodContainer = props => {
 
   const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
   const {
-    whenUserReady
+    whenUserReady,
+    selectedPaymentMethodId
   } = usePelcro.getStore();
   const cardProcessor = getSiteCardProcessor(); // Create the Stripe object
 
@@ -25284,7 +25285,7 @@ const PaymentMethodContainer = props => {
     loader: "always"
   };
   React.useEffect(() => {
-    if (isStripeLoaded) {
+    if (isStripeLoaded && !selectedPaymentMethodId) {
       window.Pelcro.user.createSetupIntent({
         auth_token: window.Pelcro.user.read().auth_token
       }, (err, res) => {
@@ -25310,7 +25311,7 @@ const PaymentMethodContainer = props => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (isStripeLoaded) {
-    return /*#__PURE__*/React__default['default'].createElement("div", null, clientSecret ? /*#__PURE__*/React__default['default'].createElement(Elements, {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, clientSecret || selectedPaymentMethodId ? /*#__PURE__*/React__default['default'].createElement(Elements, {
       options: options,
       stripe: stripePromise
     }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
@@ -34728,12 +34729,12 @@ const PaymentMethodDeleteBack = ({
     t
   } = useTranslation("paymentMethod");
   const {
-    switchView
+    switchDashboardView
   } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     variant: "outline",
     onClick: () => {
-      switchView("dashboard");
+      switchDashboardView("payment-cards");
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
     className: "plc-w-full"
@@ -36323,7 +36324,6 @@ const DashboardContent = ({
   const {
     switchView,
     dashboardView,
-    switchDashboardView,
     logout
   } = usePelcro();
   const {
@@ -36376,14 +36376,16 @@ const DashboardContent = ({
     dispatch({
       type: CLOSE_DASHBOARD
     });
-  };
+  }; // useEffect(() => {
   //   return () => {
   //     document.removeEventListener("click", hideMenuIfClickedOutside);
   //   };
   // }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Transition, {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-modal-overlay"
+  }, /*#__PURE__*/React__default['default'].createElement(Transition, {
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max ${dashboardLayout == "left" ? "plc-left-0" : "plc-right-0"}`,
     show: isOpen,
     enter: "plc-transform plc-transition plc-duration-500",
@@ -36415,7 +36417,7 @@ const DashboardContent = ({
   }, userHasName && /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-font-bold plc-break-all"
   }, user.first_name, " ", user.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
-    className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
+    className: `plc-m-0 plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-sm plc-font-bold plc-mt-auto"}`
   }, user.email)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "ghost",
     type: "button",
@@ -36436,10 +36438,10 @@ const DashboardContent = ({
     title: t("labels.logout"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }))), dashboardView && isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-view-dashboard-submenus",
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto ${dashboardLayout == "left" ? "plc-right-0" : "plc-left-0"}`
-  }, dashboardView && isOpen && /*#__PURE__*/React__default['default'].createElement(DashboardViewController, null, subView !== null && subView !== void 0 && subView.length ? subView.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+  }, /*#__PURE__*/React__default['default'].createElement(DashboardViewController, null, subView !== null && subView !== void 0 && subView.length ? subView.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
     store: store$4,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(subView, {

package/dist/index.esm.js

@@ -25232,7 +25232,8 @@ const PaymentMethodContainer = props => {
 
   const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
   const {
-    whenUserReady
+    whenUserReady,
+    selectedPaymentMethodId
   } = usePelcro.getStore();
   const cardProcessor = getSiteCardProcessor(); // Create the Stripe object
 
@@ -25254,7 +25255,7 @@ const PaymentMethodContainer = props => {
     loader: "always"
   };
   useEffect(() => {
-    if (isStripeLoaded) {
+    if (isStripeLoaded && !selectedPaymentMethodId) {
       window.Pelcro.user.createSetupIntent({
         auth_token: window.Pelcro.user.read().auth_token
       }, (err, res) => {
@@ -25280,7 +25281,7 @@ const PaymentMethodContainer = props => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (isStripeLoaded) {
-    return /*#__PURE__*/React__default.createElement("div", null, clientSecret ? /*#__PURE__*/React__default.createElement(Elements, {
+    return /*#__PURE__*/React__default.createElement("div", null, clientSecret || selectedPaymentMethodId ? /*#__PURE__*/React__default.createElement(Elements, {
       options: options,
       stripe: stripePromise
     }, /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
@@ -34698,12 +34699,12 @@ const PaymentMethodDeleteBack = ({
     t
   } = useTranslation("paymentMethod");
   const {
-    switchView
+    switchDashboardView
   } = usePelcro();
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     variant: "outline",
     onClick: () => {
-      switchView("dashboard");
+      switchDashboardView("payment-cards");
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
     className: "plc-w-full"
@@ -36293,7 +36294,6 @@ const DashboardContent = ({
   const {
     switchView,
     dashboardView,
-    switchDashboardView,
     logout
   } = usePelcro();
   const {
@@ -36346,14 +36346,16 @@ const DashboardContent = ({
     dispatch({
       type: CLOSE_DASHBOARD
     });
-  };
+  }; // useEffect(() => {
   //   return () => {
   //     document.removeEventListener("click", hideMenuIfClickedOutside);
   //   };
   // }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Transition, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-modal-overlay"
+  }, /*#__PURE__*/React__default.createElement(Transition, {
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max ${dashboardLayout == "left" ? "plc-left-0" : "plc-right-0"}`,
     show: isOpen,
     enter: "plc-transform plc-transition plc-duration-500",
@@ -36385,7 +36387,7 @@ const DashboardContent = ({
   }, userHasName && /*#__PURE__*/React__default.createElement("p", {
     className: "plc-font-bold plc-break-all"
   }, user.first_name, " ", user.last_name), /*#__PURE__*/React__default.createElement("p", {
-    className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
+    className: `plc-m-0 plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-sm plc-font-bold plc-mt-auto"}`
   }, user.email)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     type: "button",
@@ -36406,10 +36408,10 @@ const DashboardContent = ({
     title: t("labels.logout"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), dashboardView && isOpen && /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-view-dashboard-submenus",
     className: `plc-fixed plc-inset-y-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto ${dashboardLayout == "left" ? "plc-right-0" : "plc-left-0"}`
-  }, dashboardView && isOpen && /*#__PURE__*/React__default.createElement(DashboardViewController, null, subView !== null && subView !== void 0 && subView.length ? subView.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+  }, /*#__PURE__*/React__default.createElement(DashboardViewController, null, subView !== null && subView !== void 0 && subView.length ? subView.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
     store: store$4,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(subView, {

package/package.json

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