@pelcro/react-pelcro-js 2.6.0-beta.9 → 2.6.2

package/dist/index.cjs.js

@@ -3658,12 +3658,14 @@ var cancel$1 = "Cancel your subscription online at anytime.";
 var giftSent$1 = "Subscription gift has been sent to";
 var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
+var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
 	giftSent: giftSent$1,
 	successfully: successfully$1,
-	entitlement: entitlement$1
+	entitlement: entitlement$1,
+	recaptcha: recaptcha$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3671,12 +3673,14 @@ var cancel = "Annuler votre abonnement en ligne à tout moment.";
 var giftSent = "Le cadeau d’abonnement a été envoyé à";
 var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
+var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
 	giftSent: giftSent,
 	successfully: successfully,
-	entitlement: entitlement
+	entitlement: entitlement,
+	recaptcha: recaptcha
 };
 
 var labels$f = {
@@ -9783,7 +9787,7 @@ const RegisterContainer = ({
       selectFields
     } = filteredData;
 
-    if (!hasSecurityTokenEnabled()) {
+    if (!hasSecurityTokenEnabled$1()) {
       sendRegisterRequest();
       return;
     }
@@ -9984,8 +9988,10 @@ const RegisterContainer = ({
  * @return {boolean}
  */
 
-function hasSecurityTokenEnabled() {
-  const hasSecuritySdkLoaded = Boolean(window.grecaptcha);
+function hasSecurityTokenEnabled$1() {
+  var _window$Pelcro$site$r2;
+
+  const hasSecuritySdkLoaded = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.security_key);
   return hasSecuritySdkLoaded;
 }
 
@@ -10614,7 +10620,17 @@ function RegisterView(props) {
     className: "plc-w-full plc-mt-2",
     id: "pelcro-submit",
     name: t("messages.createAccount")
-  }), socialLoginEnabled && /*#__PURE__*/React__default['default'].createElement("div", {
+  }), hasSecurityTokenEnabled() && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-gray-500 plc-mt-1"
+  }, /*#__PURE__*/React__default['default'].createElement(Trans, {
+    i18nKey: "messages:recaptcha"
+  }, "This site is protected by reCAPTCHA and the Google", /*#__PURE__*/React__default['default'].createElement(Link, {
+    href: "https://policies.google.com/privacy",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Privacy Policy"), "and", /*#__PURE__*/React__default['default'].createElement(Link, {
+    href: "https://policies.google.com/terms",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Terms of Service"), "apply.")), socialLoginEnabled && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mt-5"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-justify-between "
@@ -10628,6 +10644,16 @@ function RegisterView(props) {
     className: "plc-flex plc-justify-center plc-px-5 plc-mt-1 plc-space-x-3"
   }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null))))));
 }
+/**
+ * Checks if the current site has security token enabled
+ * @return {boolean}
+ */
+
+function hasSecurityTokenEnabled() {
+  var _window$Pelcro$site, _window$Pelcro$site$r3;
+
+  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.security_key);
+}
 
 function TextInput({
   store,
@@ -13691,7 +13717,7 @@ const CheckoutForm = () => {
     className: "plc-h-4 plc-w-auto plc-mt-2",
     src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-justify-between plc-my-2"
+    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-w-6/12 plc-pr-4"
   }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -15450,13 +15476,11 @@ function Phone({
   const {
     dispatch,
     state: {
-      phone: stateValue
+      phone
     }
   } = React.useContext(store);
-  const [value, setValue] = React.useState(stateValue);
 
   const handleInputChange = value => {
-    setValue(value);
     dispatch({
       type: SET_PHONE,
       payload: value
@@ -15465,7 +15489,7 @@ function Phone({
 
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "tel",
-    value: value || window.Pelcro.user.read().phone,
+    value: phone,
     onChange: e => handleInputChange(e.target.value)
   }, otherProps));
 }
@@ -21008,6 +21032,23 @@ function SvgPlus(props) {
   })));
 }
 
+var _path$9;
+
+function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
+
+function SvgCheckMark(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
 const SubscriptionsMenu = props => {
   const {
     t
@@ -21098,28 +21139,36 @@ const SubscriptionsItems = ({
       setView("plan-select");
     };
 
-    const getFuturePhases = () => {
+    const getPhases = () => {
       if (!sub.schedule) return [];
       const currentPhaseStartDate = sub.schedule.current_phase.start_date;
-      return sub.schedule.phases.filter(phase => {
+      const currentPhase = sub.schedule.phases.find(phase => {
+        return phase.start_date === currentPhaseStartDate;
+      });
+      const futurePhases = sub.schedule.phases.filter(phase => {
         return phase.start_date > currentPhaseStartDate;
       });
+      return [currentPhase, ...futurePhases];
     };
 
-    const hasFuturePhases = getFuturePhases().length > 0;
+    const hasPhases = getPhases().length > 0;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
       key: sub.id
     }, /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
-      onClick: () => toggleActiveMenu(sub.id),
+      onClick: () => {
+        if (hasPhases) toggleActiveMenu(sub.id);
+      },
       key: sub.id,
       className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header ${isActive ? "plc-bg-gray-100" : "hover:plc-bg-gray-50"}`
     }, /*#__PURE__*/React__default['default'].createElement("td", {
-      className: "plc-truncate plc-py-2"
+      className: "plc-truncate"
     }, sub.plan.nickname && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-font-semibold plc-text-gray-500"
     }, sub.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xs plc-text-gray-400"
-    }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
+    }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getSubscriptionStatus(sub).bgColor} plc-uppercase ${getSubscriptionStatus(sub).textColor} plc-rounded-lg`
     }, getSubscriptionStatus(sub).icon, getSubscriptionStatus(sub).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-text-xs plc-text-gray-500"
@@ -21148,31 +21197,38 @@ const SubscriptionsItems = ({
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew"))), /*#__PURE__*/React__default['default'].createElement("td", null, hasFuturePhases && /*#__PURE__*/React__default['default'].createElement("div", {
+    }, t("labels.renew"))), /*#__PURE__*/React__default['default'].createElement("td", null, hasPhases && /*#__PURE__*/React__default['default'].createElement("div", {
       className: `plc-flex plc-items-center plc-justify-center plc-transition-transform plc-ease-out plc-transform plc-rounded-full plc-w-7 plc-h-7 ${isActive ? "plc-flex plc-place-items-center plc-w-7 plc-h-7 plc-p-1 plc-bg-primary-400 plc-rounded-full" : "accordion-chevron"}`
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: `plc-transition plc-ease-out  ${isActive && "plc-text-white plc-transform plc-rotate-90"}`
-    }, /*#__PURE__*/React__default['default'].createElement(SvgChevronRight, null)))))), /*#__PURE__*/React__default['default'].createElement("tbody", null, isActive && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getFuturePhases().map(phase => {
+    }, /*#__PURE__*/React__default['default'].createElement(SvgChevronRight, null)))))), /*#__PURE__*/React__default['default'].createElement("tbody", null, isActive && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getPhases().map((phase, i) => {
       var _phase$plans;
 
       const plan = (_phase$plans = phase.plans) === null || _phase$plans === void 0 ? void 0 : _phase$plans[0].plan;
+      const isCurrentPhase = i === 0;
       const startDate = new Date(Number(`${phase.start_date}000`));
+      const endDate = new Date(Number(`${phase.end_date}000`));
       const formattedStartDate = new Intl.DateTimeFormat("en-CA").format(startDate);
+      const formattedEndDate = new Intl.DateTimeFormat("en-CA").format(endDate);
       const startDateString = `${t("labels.startsOn")} ${formattedStartDate}`;
+      const endDateString = `${t("labels.expiresOn")} ${formattedEndDate}`;
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: `${phase.start_date}-${phase.end_date}`,
         className: "pelcro-sub-phase-row plc-w-full plc-align-middle"
       }, /*#__PURE__*/React__default['default'].createElement("td", {
-        className: "plc-truncate plc-py-2"
+        className: "plc-truncate"
       }, plan.nickname && /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-font-semibold plc-text-gray-500"
-      }, plan.nickname)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold plc-text-blue-700 plc-bg-blue-100 plc-uppercase plc-rounded-lg"
-      }, /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null), t("labels.status.scheduled")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, plan.nickname)), /*#__PURE__*/React__default['default'].createElement("td", {
+        className: "plc-py-2"
+      }, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold plc-uppercase plc-rounded-lg ${isCurrentPhase ? "plc-text-green-700 plc-bg-green-100" : "plc-text-blue-700 plc-bg-blue-100"}
+                             `
+      }, isCurrentPhase ? /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null) : /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null), isCurrentPhase ? t("labels.status.active") : t("labels.status.scheduled")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-text-xs plc-text-gray-500"
       }, /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-inline-block plc-mt-1 plc-underline"
-      }, startDateString))));
+      }, isCurrentPhase ? endDateString : startDateString))));
     }), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
       colSpan: "4"
     }, /*#__PURE__*/React__default['default'].createElement("hr", {
@@ -21263,18 +21319,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$9;
+var _path$8;
 
-function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
+function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21282,23 +21338,6 @@ function SvgExit(props) {
   })));
 }
 
-var _path$8;
-
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
-
-function SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-    clipRule: "evenodd"
-  })));
-}
-
 var _path$7;
 
 function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }

package/dist/index.esm.js

@@ -3628,12 +3628,14 @@ var cancel$1 = "Cancel your subscription online at anytime.";
 var giftSent$1 = "Subscription gift has been sent to";
 var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
+var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
 	giftSent: giftSent$1,
 	successfully: successfully$1,
-	entitlement: entitlement$1
+	entitlement: entitlement$1,
+	recaptcha: recaptcha$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3641,12 +3643,14 @@ var cancel = "Annuler votre abonnement en ligne à tout moment.";
 var giftSent = "Le cadeau d’abonnement a été envoyé à";
 var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
+var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
 	giftSent: giftSent,
 	successfully: successfully,
-	entitlement: entitlement
+	entitlement: entitlement,
+	recaptcha: recaptcha
 };
 
 var labels$f = {
@@ -9753,7 +9757,7 @@ const RegisterContainer = ({
       selectFields
     } = filteredData;
 
-    if (!hasSecurityTokenEnabled()) {
+    if (!hasSecurityTokenEnabled$1()) {
       sendRegisterRequest();
       return;
     }
@@ -9954,8 +9958,10 @@ const RegisterContainer = ({
  * @return {boolean}
  */
 
-function hasSecurityTokenEnabled() {
-  const hasSecuritySdkLoaded = Boolean(window.grecaptcha);
+function hasSecurityTokenEnabled$1() {
+  var _window$Pelcro$site$r2;
+
+  const hasSecuritySdkLoaded = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.security_key);
   return hasSecuritySdkLoaded;
 }
 
@@ -10584,7 +10590,17 @@ function RegisterView(props) {
     className: "plc-w-full plc-mt-2",
     id: "pelcro-submit",
     name: t("messages.createAccount")
-  }), socialLoginEnabled && /*#__PURE__*/React__default.createElement("div", {
+  }), hasSecurityTokenEnabled() && /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-gray-500 plc-mt-1"
+  }, /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "messages:recaptcha"
+  }, "This site is protected by reCAPTCHA and the Google", /*#__PURE__*/React__default.createElement(Link, {
+    href: "https://policies.google.com/privacy",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Privacy Policy"), "and", /*#__PURE__*/React__default.createElement(Link, {
+    href: "https://policies.google.com/terms",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Terms of Service"), "apply.")), socialLoginEnabled && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mt-5"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-justify-between "
@@ -10598,6 +10614,16 @@ function RegisterView(props) {
     className: "plc-flex plc-justify-center plc-px-5 plc-mt-1 plc-space-x-3"
   }, /*#__PURE__*/React__default.createElement(GoogleLoginButton, null), /*#__PURE__*/React__default.createElement(FacebookLoginButton, null))))));
 }
+/**
+ * Checks if the current site has security token enabled
+ * @return {boolean}
+ */
+
+function hasSecurityTokenEnabled() {
+  var _window$Pelcro$site, _window$Pelcro$site$r3;
+
+  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.security_key);
+}
 
 function TextInput({
   store,
@@ -13661,7 +13687,7 @@ const CheckoutForm = () => {
     className: "plc-h-4 plc-w-auto plc-mt-2",
     src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-justify-between plc-my-2"
+    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-w-6/12 plc-pr-4"
   }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
@@ -15420,13 +15446,11 @@ function Phone({
   const {
     dispatch,
     state: {
-      phone: stateValue
+      phone
     }
   } = useContext(store);
-  const [value, setValue] = useState(stateValue);
 
   const handleInputChange = value => {
-    setValue(value);
     dispatch({
       type: SET_PHONE,
       payload: value
@@ -15435,7 +15459,7 @@ function Phone({
 
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "tel",
-    value: value || window.Pelcro.user.read().phone,
+    value: phone,
     onChange: e => handleInputChange(e.target.value)
   }, otherProps));
 }
@@ -20978,6 +21002,23 @@ function SvgPlus(props) {
   })));
 }
 
+var _path$9;
+
+function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
+
+function SvgCheckMark(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
 const SubscriptionsMenu = props => {
   const {
     t
@@ -21068,28 +21109,36 @@ const SubscriptionsItems = ({
       setView("plan-select");
     };
 
-    const getFuturePhases = () => {
+    const getPhases = () => {
       if (!sub.schedule) return [];
       const currentPhaseStartDate = sub.schedule.current_phase.start_date;
-      return sub.schedule.phases.filter(phase => {
+      const currentPhase = sub.schedule.phases.find(phase => {
+        return phase.start_date === currentPhaseStartDate;
+      });
+      const futurePhases = sub.schedule.phases.filter(phase => {
         return phase.start_date > currentPhaseStartDate;
       });
+      return [currentPhase, ...futurePhases];
     };
 
-    const hasFuturePhases = getFuturePhases().length > 0;
+    const hasPhases = getPhases().length > 0;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: sub.id
     }, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
-      onClick: () => toggleActiveMenu(sub.id),
+      onClick: () => {
+        if (hasPhases) toggleActiveMenu(sub.id);
+      },
       key: sub.id,
       className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header ${isActive ? "plc-bg-gray-100" : "hover:plc-bg-gray-50"}`
     }, /*#__PURE__*/React__default.createElement("td", {
-      className: "plc-truncate plc-py-2"
+      className: "plc-truncate"
     }, sub.plan.nickname && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
       className: "plc-font-semibold plc-text-gray-500"
     }, sub.plan.nickname), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
       className: "plc-text-xs plc-text-gray-400"
-    }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
+    }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default.createElement("span", {
       className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getSubscriptionStatus(sub).bgColor} plc-uppercase ${getSubscriptionStatus(sub).textColor} plc-rounded-lg`
     }, getSubscriptionStatus(sub).icon, getSubscriptionStatus(sub).title), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
       className: "plc-text-xs plc-text-gray-500"
@@ -21118,31 +21167,38 @@ const SubscriptionsItems = ({
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew"))), /*#__PURE__*/React__default.createElement("td", null, hasFuturePhases && /*#__PURE__*/React__default.createElement("div", {
+    }, t("labels.renew"))), /*#__PURE__*/React__default.createElement("td", null, hasPhases && /*#__PURE__*/React__default.createElement("div", {
       className: `plc-flex plc-items-center plc-justify-center plc-transition-transform plc-ease-out plc-transform plc-rounded-full plc-w-7 plc-h-7 ${isActive ? "plc-flex plc-place-items-center plc-w-7 plc-h-7 plc-p-1 plc-bg-primary-400 plc-rounded-full" : "accordion-chevron"}`
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `plc-transition plc-ease-out  ${isActive && "plc-text-white plc-transform plc-rotate-90"}`
-    }, /*#__PURE__*/React__default.createElement(SvgChevronRight, null)))))), /*#__PURE__*/React__default.createElement("tbody", null, isActive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getFuturePhases().map(phase => {
+    }, /*#__PURE__*/React__default.createElement(SvgChevronRight, null)))))), /*#__PURE__*/React__default.createElement("tbody", null, isActive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getPhases().map((phase, i) => {
       var _phase$plans;
 
       const plan = (_phase$plans = phase.plans) === null || _phase$plans === void 0 ? void 0 : _phase$plans[0].plan;
+      const isCurrentPhase = i === 0;
       const startDate = new Date(Number(`${phase.start_date}000`));
+      const endDate = new Date(Number(`${phase.end_date}000`));
       const formattedStartDate = new Intl.DateTimeFormat("en-CA").format(startDate);
+      const formattedEndDate = new Intl.DateTimeFormat("en-CA").format(endDate);
       const startDateString = `${t("labels.startsOn")} ${formattedStartDate}`;
+      const endDateString = `${t("labels.expiresOn")} ${formattedEndDate}`;
       return /*#__PURE__*/React__default.createElement("tr", {
         key: `${phase.start_date}-${phase.end_date}`,
         className: "pelcro-sub-phase-row plc-w-full plc-align-middle"
       }, /*#__PURE__*/React__default.createElement("td", {
-        className: "plc-truncate plc-py-2"
+        className: "plc-truncate"
       }, plan.nickname && /*#__PURE__*/React__default.createElement("span", {
         className: "plc-font-semibold plc-text-gray-500"
-      }, plan.nickname)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
-        className: "plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold plc-text-blue-700 plc-bg-blue-100 plc-uppercase plc-rounded-lg"
-      }, /*#__PURE__*/React__default.createElement(SvgCalendar, null), t("labels.status.scheduled")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
+      }, plan.nickname)), /*#__PURE__*/React__default.createElement("td", {
+        className: "plc-py-2"
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold plc-uppercase plc-rounded-lg ${isCurrentPhase ? "plc-text-green-700 plc-bg-green-100" : "plc-text-blue-700 plc-bg-blue-100"}
+                             `
+      }, isCurrentPhase ? /*#__PURE__*/React__default.createElement(SvgCheckMark, null) : /*#__PURE__*/React__default.createElement(SvgCalendar, null), isCurrentPhase ? t("labels.status.active") : t("labels.status.scheduled")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
         className: "plc-text-xs plc-text-gray-500"
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "plc-inline-block plc-mt-1 plc-underline"
-      }, startDateString))));
+      }, isCurrentPhase ? endDateString : startDateString))));
     }), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
       colSpan: "4"
     }, /*#__PURE__*/React__default.createElement("hr", {
@@ -21233,18 +21289,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$9;
+var _path$8;
 
-function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
+function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21252,23 +21308,6 @@ function SvgExit(props) {
   })));
 }
 
-var _path$8;
-
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
-
-function SvgCheckMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-    clipRule: "evenodd"
-  })));
-}
-
 var _path$7;
 
 function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }

package/dist/pelcro.css

@@ -648,6 +648,10 @@ Add the correct display in Chrome and Safari.
   --plc-primary-lightness: 44%;
 }
 
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
 /* sub-components and components */
 
 .pelcro-root .pelcro-badge-wrapper {

package/package.json

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