@pelcro/react-pelcro-js 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/index.cjs.js

@@ -4395,7 +4395,8 @@ var labels$t = {
 	save: "Upload Photo",
 	selectImage: "Upload new photo",
 	removeImage: "Remove current photo",
-	zoom: "Zoom"
+	zoom: "Zoom",
+	tin: "Tax Identification Number"
 };
 var messages$w = {
 	userUpdated: "Thanks! Your profile was updated successfully.",
@@ -4421,7 +4422,8 @@ var labels$s = {
 	save: "Téléverser une photo",
 	selectImage: "Télécharger une nouvelle photo",
 	removeImage: "supprimer la photo actuelle",
-	zoom: "Zoom"
+	zoom: "Zoom",
+	tin: "Numéro d'identification fiscale"
 };
 var messages$v = {
 	userUpdated: "Votre profil a été mis à jour avec succès.",
@@ -4447,7 +4449,8 @@ var labels$r = {
 	save: "사진 업로드",
 	selectImage: "새로운 사진 업로드",
 	removeImage: "기존 사진 제거",
-	zoom: "확대"
+	zoom: "확대",
+	tin: "세금 식별 번호"
 };
 var messages$u = {
 	userUpdated: "감사합니다! 프로필이 성공적으로 업데이트되었습니다.",
@@ -8095,6 +8098,7 @@ class PelcroActions {
       } = this.get();
       switchView(null);
       resetState();
+      window.sessionStorage.setItem("paywall_conversion_id", null);
     });
 
     _defineProperty$3(this, "switchToPaymentView", () => {
@@ -10907,6 +10911,8 @@ const initPaywalls = () => {
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
       switchView("newsletter");
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
+      const paywallId = window.Pelcro.paywall.read().id;
+      window.sessionStorage.setItem("paywall_conversion_id", paywallId);
       switchView("plan-select");
     }
   }
@@ -11695,6 +11701,7 @@ const SET_LAST_NAME = "SET_LAST_NAME";
 const SET_START_DATE = "SET_START_DATE";
 const SET_GIFT_MESSAGE = "SET_GIFT_MESSAGE";
 const SET_PHONE = "SET_PHONE";
+const SET_TIN = "SET_TIN";
 const GET_COUNTRIES_SUCCESS = "GET_COUNTRIES_SUCCESS";
 const GET_COUNTRIES_FETCH = "GET_COUNTRIES_FETCH";
 const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
@@ -15317,6 +15324,10 @@ class SelectModal extends React.Component {
         });
       }
 
+      if (this.state.productList.length === 0 && !window.Pelcro.user.isAuthenticated()) {
+        this.props.setView('register');
+      }
+
       document.addEventListener("keydown", this.handleSubmit);
     });
 
@@ -18702,6 +18713,23 @@ const PaymentMethodContainerWithoutStripe = ({
       updateTotalAmountWithTax();
     }
   };
+
+  const trackPaywallConversion = subscriptionId => {
+    const paywallId = window.sessionStorage.getItem("paywall_conversion_id");
+    const userId = window.Pelcro.user.read().id;
+    const planId = plan.id;
+    const productId = product.id;
+
+    if (paywallId) {
+      window.Pelcro.insight.track(`Paywall Conversion: ${paywallId}`, {
+        userId,
+        subscriptionId,
+        planId,
+        productId
+      });
+      window.sessionStorage.setItem("paywall_conversion_id", null);
+    }
+  };
   /**
    * Attempt to confirm a Stripe card payment via it's PaymentIntent.
    * Only trigger method if PaymentIntent status is `requires_action`.
@@ -18722,6 +18750,8 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_action" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
         stripe.confirmCardPayment(paymentIntent.client_secret).then(res => {
+          var _response$data2;
+
           if (!isSubCreate) {
             dispatch({
               type: DISABLE_SUBMIT,
@@ -18745,6 +18775,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion((_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.id);
           onSuccess(res);
         });
       } else if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_payment_method" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
@@ -18767,9 +18798,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
+        var _response$data3;
+
+        trackPaywallConversion((_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.id);
         onSuccess(response);
       }
     } else {
+      var _response$data4;
+
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -18790,6 +18826,7 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      trackPaywallConversion((_response$data4 = response.data) === null || _response$data4 === void 0 ? void 0 : _response$data4.id);
       onSuccess(response);
     }
   };
@@ -18849,6 +18886,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion(subscriptionIdToRenew);
           onGiftRenewalSuccess(res);
         });
       } else {
@@ -18882,6 +18920,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion(subscriptionIdToRenew);
           onSuccess(res);
         });
       }
@@ -21916,7 +21955,7 @@ function SubscriptionCreateModal({
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
+var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
 const initialState$f = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
@@ -21927,6 +21966,7 @@ const initialState$f = {
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
   phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
   phoneError: null,
+  tin: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.tin,
   buttonDisabled: false,
   textFields: {},
   alert: {
@@ -21957,23 +21997,26 @@ const UserUpdateContainer = ({
   }, []);
 
   const loadUserDataIntoFields = () => {
-    var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+    var _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
 
     const fields = [{
       type: SET_EMAIL,
-      payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email
+      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.email
     }, {
       type: SET_FIRST_NAME,
-      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.first_name
+      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.first_name
     }, {
       type: SET_LAST_NAME,
-      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.last_name
+      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.last_name
     }, {
       type: SET_DISPLAY_NAME,
-      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.display_name
+      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.display_name
     }, {
       type: SET_PHONE,
-      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.phone
+      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.phone
+    }, {
+      type: SET_TIN,
+      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.tin
     }];
     fields.filter(field => Boolean(field.payload)).forEach(field => {
       dispatch(field);
@@ -21985,6 +22028,7 @@ const UserUpdateContainer = ({
     firstName,
     lastName,
     phone,
+    tin,
     textFields,
     displayName
   }, dispatch) => {
@@ -21995,6 +22039,7 @@ const UserUpdateContainer = ({
       last_name: lastName,
       display_name: displayName,
       phone: phone,
+      tin: tin,
       metadata: {
         updated: "updated",
         ...textFields
@@ -22083,6 +22128,11 @@ const UserUpdateContainer = ({
           phoneError: null
         });
 
+      case SET_TIN:
+        return lib_7({ ...state,
+          tin: action.payload
+        });
+
       case SET_PHONE_ERROR:
         return lib_7({ ...state,
           phoneError: action.payload,
@@ -22267,6 +22317,66 @@ const UserUpdateProfilePic = ({
   })));
 };
 
+function Tin({
+  initWithUserTin = true,
+  store,
+  ...otherProps
+}) {
+  useTranslation$1("common");
+  const {
+    dispatch,
+    state: {
+      tin: stateTin
+    }
+  } = React.useContext(store);
+  const [tin, setTin] = React.useState(stateTin);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setTin(value);
+
+    if (finishedTyping) {
+      dispatch({
+        type: SET_TIN,
+        payload: tin
+      });
+    }
+  }, [dispatch, tin, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(tin);
+  }, [finishedTyping, tin, handleInputChange]); // Initialize tin field with user's tin (Tax Identification Number)
+
+  const loadTinIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().tin);
+    dispatch({
+      type: SET_TIN,
+      payload: window.Pelcro.user.read().tin
+    });
+  };
+
+  React.useEffect(() => {
+    if (initWithUserTin) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadTinIntoField();
+      });
+      loadTinIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: "text",
+    value: tin,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
+const UserUpdateTin = props => /*#__PURE__*/React__default['default'].createElement(Tin, Object.assign({
+  store: store$f
+}, props));
+
 const UserUpdateView = props => {
   var _window$Pelcro$site$r;
 
@@ -22304,6 +22414,11 @@ const UserUpdateView = props => {
     errorId: "pelcro-input-phone-error",
     label: t("labels.phone"),
     required: supportsTap ? true : false
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(UserUpdateTin, {
+    id: "pelcro-input-tin",
+    label: t("labels.tin")
   })), /*#__PURE__*/React__default['default'].createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",
@@ -28355,14 +28470,14 @@ const SubscriptionsItems = ({
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew")), sub.shipments_suspended_until && sub.shipments_remaining > 0 && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.renew")), sub.shipments_suspended_until && isDateAfterToday(sub.shipments_suspended_until) && sub.shipments_remaining > 0 && /*#__PURE__*/React__default['default'].createElement(Button$1, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
       onClick: onUnSuspendClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.unsuspend")), !sub.shipments_suspended_until && sub.shipments_remaining > 0 && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.unsuspend")), (!sub.shipments_suspended_until && sub.shipments_remaining > 0 || sub.shipments_suspended_until && !isDateAfterToday(sub.shipments_suspended_until)) && /*#__PURE__*/React__default['default'].createElement(Button$1, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null),
@@ -28422,6 +28537,12 @@ function getNonDonationSubs() {
   return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => !sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
 }
 
+function isDateAfterToday(date) {
+  const today = new Date().setHours(0, 0, 0, 0);
+  const newDate = new Date(date).setHours(0, 0, 0, 0);
+  return newDate === today ? true : newDate > today;
+}
+
 /**
  * @typedef {Object} AccordionPropsType
  * @property {string} initialActiveMenu the initial active menu

package/dist/index.esm.js

@@ -4365,7 +4365,8 @@ var labels$t = {
 	save: "Upload Photo",
 	selectImage: "Upload new photo",
 	removeImage: "Remove current photo",
-	zoom: "Zoom"
+	zoom: "Zoom",
+	tin: "Tax Identification Number"
 };
 var messages$w = {
 	userUpdated: "Thanks! Your profile was updated successfully.",
@@ -4391,7 +4392,8 @@ var labels$s = {
 	save: "Téléverser une photo",
 	selectImage: "Télécharger une nouvelle photo",
 	removeImage: "supprimer la photo actuelle",
-	zoom: "Zoom"
+	zoom: "Zoom",
+	tin: "Numéro d'identification fiscale"
 };
 var messages$v = {
 	userUpdated: "Votre profil a été mis à jour avec succès.",
@@ -4417,7 +4419,8 @@ var labels$r = {
 	save: "사진 업로드",
 	selectImage: "새로운 사진 업로드",
 	removeImage: "기존 사진 제거",
-	zoom: "확대"
+	zoom: "확대",
+	tin: "세금 식별 번호"
 };
 var messages$u = {
 	userUpdated: "감사합니다! 프로필이 성공적으로 업데이트되었습니다.",
@@ -8065,6 +8068,7 @@ class PelcroActions {
       } = this.get();
       switchView(null);
       resetState();
+      window.sessionStorage.setItem("paywall_conversion_id", null);
     });
 
     _defineProperty$3(this, "switchToPaymentView", () => {
@@ -10877,6 +10881,8 @@ const initPaywalls = () => {
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
       switchView("newsletter");
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
+      const paywallId = window.Pelcro.paywall.read().id;
+      window.sessionStorage.setItem("paywall_conversion_id", paywallId);
       switchView("plan-select");
     }
   }
@@ -11665,6 +11671,7 @@ const SET_LAST_NAME = "SET_LAST_NAME";
 const SET_START_DATE = "SET_START_DATE";
 const SET_GIFT_MESSAGE = "SET_GIFT_MESSAGE";
 const SET_PHONE = "SET_PHONE";
+const SET_TIN = "SET_TIN";
 const GET_COUNTRIES_SUCCESS = "GET_COUNTRIES_SUCCESS";
 const GET_COUNTRIES_FETCH = "GET_COUNTRIES_FETCH";
 const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
@@ -15287,6 +15294,10 @@ class SelectModal extends Component {
         });
       }
 
+      if (this.state.productList.length === 0 && !window.Pelcro.user.isAuthenticated()) {
+        this.props.setView('register');
+      }
+
       document.addEventListener("keydown", this.handleSubmit);
     });
 
@@ -18672,6 +18683,23 @@ const PaymentMethodContainerWithoutStripe = ({
       updateTotalAmountWithTax();
     }
   };
+
+  const trackPaywallConversion = subscriptionId => {
+    const paywallId = window.sessionStorage.getItem("paywall_conversion_id");
+    const userId = window.Pelcro.user.read().id;
+    const planId = plan.id;
+    const productId = product.id;
+
+    if (paywallId) {
+      window.Pelcro.insight.track(`Paywall Conversion: ${paywallId}`, {
+        userId,
+        subscriptionId,
+        planId,
+        productId
+      });
+      window.sessionStorage.setItem("paywall_conversion_id", null);
+    }
+  };
   /**
    * Attempt to confirm a Stripe card payment via it's PaymentIntent.
    * Only trigger method if PaymentIntent status is `requires_action`.
@@ -18692,6 +18720,8 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_action" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
         stripe.confirmCardPayment(paymentIntent.client_secret).then(res => {
+          var _response$data2;
+
           if (!isSubCreate) {
             dispatch({
               type: DISABLE_SUBMIT,
@@ -18715,6 +18745,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion((_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.id);
           onSuccess(res);
         });
       } else if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_payment_method" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
@@ -18737,9 +18768,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
+        var _response$data3;
+
+        trackPaywallConversion((_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.id);
         onSuccess(response);
       }
     } else {
+      var _response$data4;
+
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -18760,6 +18796,7 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      trackPaywallConversion((_response$data4 = response.data) === null || _response$data4 === void 0 ? void 0 : _response$data4.id);
       onSuccess(response);
     }
   };
@@ -18819,6 +18856,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion(subscriptionIdToRenew);
           onGiftRenewalSuccess(res);
         });
       } else {
@@ -18852,6 +18890,7 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
+          trackPaywallConversion(subscriptionIdToRenew);
           onSuccess(res);
         });
       }
@@ -21886,7 +21925,7 @@ function SubscriptionCreateModal({
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
+var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
 const initialState$f = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
@@ -21897,6 +21936,7 @@ const initialState$f = {
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
   phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
   phoneError: null,
+  tin: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.tin,
   buttonDisabled: false,
   textFields: {},
   alert: {
@@ -21927,23 +21967,26 @@ const UserUpdateContainer = ({
   }, []);
 
   const loadUserDataIntoFields = () => {
-    var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+    var _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
 
     const fields = [{
       type: SET_EMAIL,
-      payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email
+      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.email
     }, {
       type: SET_FIRST_NAME,
-      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.first_name
+      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.first_name
     }, {
       type: SET_LAST_NAME,
-      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.last_name
+      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.last_name
     }, {
       type: SET_DISPLAY_NAME,
-      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.display_name
+      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.display_name
     }, {
       type: SET_PHONE,
-      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.phone
+      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.phone
+    }, {
+      type: SET_TIN,
+      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.tin
     }];
     fields.filter(field => Boolean(field.payload)).forEach(field => {
       dispatch(field);
@@ -21955,6 +21998,7 @@ const UserUpdateContainer = ({
     firstName,
     lastName,
     phone,
+    tin,
     textFields,
     displayName
   }, dispatch) => {
@@ -21965,6 +22009,7 @@ const UserUpdateContainer = ({
       last_name: lastName,
       display_name: displayName,
       phone: phone,
+      tin: tin,
       metadata: {
         updated: "updated",
         ...textFields
@@ -22053,6 +22098,11 @@ const UserUpdateContainer = ({
           phoneError: null
         });
 
+      case SET_TIN:
+        return lib_7({ ...state,
+          tin: action.payload
+        });
+
       case SET_PHONE_ERROR:
         return lib_7({ ...state,
           phoneError: action.payload,
@@ -22237,6 +22287,66 @@ const UserUpdateProfilePic = ({
   })));
 };
 
+function Tin({
+  initWithUserTin = true,
+  store,
+  ...otherProps
+}) {
+  useTranslation$1("common");
+  const {
+    dispatch,
+    state: {
+      tin: stateTin
+    }
+  } = useContext(store);
+  const [tin, setTin] = useState(stateTin);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = useCallback(value => {
+    setTin(value);
+
+    if (finishedTyping) {
+      dispatch({
+        type: SET_TIN,
+        payload: tin
+      });
+    }
+  }, [dispatch, tin, finishedTyping]);
+  useEffect(() => {
+    handleInputChange(tin);
+  }, [finishedTyping, tin, handleInputChange]); // Initialize tin field with user's tin (Tax Identification Number)
+
+  const loadTinIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().tin);
+    dispatch({
+      type: SET_TIN,
+      payload: window.Pelcro.user.read().tin
+    });
+  };
+
+  useEffect(() => {
+    if (initWithUserTin) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadTinIntoField();
+      });
+      loadTinIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    type: "text",
+    value: tin,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
+const UserUpdateTin = props => /*#__PURE__*/React__default.createElement(Tin, Object.assign({
+  store: store$f
+}, props));
+
 const UserUpdateView = props => {
   var _window$Pelcro$site$r;
 
@@ -22274,6 +22384,11 @@ const UserUpdateView = props => {
     errorId: "pelcro-input-phone-error",
     label: t("labels.phone"),
     required: supportsTap ? true : false
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(UserUpdateTin, {
+    id: "pelcro-input-tin",
+    label: t("labels.tin")
   })), /*#__PURE__*/React__default.createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",
@@ -28325,14 +28440,14 @@ const SubscriptionsItems = ({
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew")), sub.shipments_suspended_until && sub.shipments_remaining > 0 && /*#__PURE__*/React__default.createElement(Button$1, {
+    }, t("labels.renew")), sub.shipments_suspended_until && isDateAfterToday(sub.shipments_suspended_until) && sub.shipments_remaining > 0 && /*#__PURE__*/React__default.createElement(Button$1, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
       onClick: onUnSuspendClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.unsuspend")), !sub.shipments_suspended_until && sub.shipments_remaining > 0 && /*#__PURE__*/React__default.createElement(Button$1, {
+    }, t("labels.unsuspend")), (!sub.shipments_suspended_until && sub.shipments_remaining > 0 || sub.shipments_suspended_until && !isDateAfterToday(sub.shipments_suspended_until)) && /*#__PURE__*/React__default.createElement(Button$1, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default.createElement(SvgCalendar, null),
@@ -28392,6 +28507,12 @@ function getNonDonationSubs() {
   return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => !sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
 }
 
+function isDateAfterToday(date) {
+  const today = new Date().setHours(0, 0, 0, 0);
+  const newDate = new Date(date).setHours(0, 0, 0, 0);
+  return newDate === today ? true : newDate > today;
+}
+
 /**
  * @typedef {Object} AccordionPropsType
  * @property {string} initialActiveMenu the initial active menu

package/package.json

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