@pelcro/react-pelcro-js 2.6.0-beta.3 → 2.6.0-beta.4

package/dist/index.cjs.js

@@ -6327,13 +6327,34 @@ const getAddressById = id => {
 };
 /**
  * Transforms locale names stored in our backend like
- * "en_US" into the standerd accepted in core i18n methods: "en-US"
+ * "en_US" into the standard accepted in core i18n methods: "en-US"
  * @param {string} localeName
  * @return {string | undefined}
  * @example getCanonicalLocaleFormat("en_US") => "en-US"
  */
 
 const getCanonicalLocaleFormat = localeName => localeName === null || localeName === void 0 ? void 0 : localeName.replace("_", "-");
+/**
+ * @param {string} localeName
+ * @return {string | undefined}
+ * @example getLanguageWithoutRegion("en-US") => "en"
+ */
+
+const getLanguageWithoutRegion = localeName => {
+  var _getCanonicalLocaleFo;
+
+  return (_getCanonicalLocaleFo = getCanonicalLocaleFormat(localeName)) === null || _getCanonicalLocaleFo === void 0 ? void 0 : _getCanonicalLocaleFo.split("-")[0];
+};
+/**
+ * Gets the current page language or fallbacks to site default
+ * @return {string | undefined}
+ */
+
+const getPageOrDefaultLanguage = () => {
+  var _window$Pelcro$helper, _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
+
+  return (_window$Pelcro$helper = window.Pelcro.helpers.getHtmlLanguageAttribute()) !== null && _window$Pelcro$helper !== void 0 ? _window$Pelcro$helper : getLanguageWithoutRegion((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.call(_window$Pelcro$site)) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.default_locale);
+};
 /**
  * Returns a formatted price string depending on locale
  * @param {number} amount
@@ -6343,7 +6364,7 @@ const getCanonicalLocaleFormat = localeName => localeName === null || localeName
  * @example getFormattedPriceByLocal(10, 'USD', 'en-US') => "$10.00"
  */
 
-const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en-US") => {
+const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en") => {
   const formatter = new Intl.NumberFormat(getCanonicalLocaleFormat(locale), {
     style: "currency",
     currency
@@ -6368,8 +6389,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
     totalWithoutDividingBy100 += parseFloat(item.price ? (item.price * item.quantity).toFixed(2) : item.amount.toFixed(2));
   }
 
-  const locale = window.Pelcro.site.read().default_locale;
-  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, locale);
+  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
 };
 /**
  * returns true if the URL contains a supported view trigger URL
@@ -6383,12 +6403,15 @@ const isValidViewFromURL = viewID => {
   }
 
   return false;
+  /**
+   *
+   */
 
   function hasValidNewsletterUpdateUrl() {
-    var _window$Pelcro, _window$Pelcro$uiSett;
+    var _window$Pelcro2, _window$Pelcro2$uiSet;
 
     if (viewID !== "newsletter-update") return false;
-    const newsletters = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters;
+    const newsletters = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.newsletters;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
 
     if (!siteHasNewslettersDefined) {
@@ -6562,9 +6585,8 @@ const getPaymentCardIcon$1 = name => {
   }));
 };
 
-var _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
 const resources = {
-  "en-US": {
+  en: {
     common: common_en,
     paymentMethod: paymentMethod_en,
     newsletter: newsletter_en,
@@ -6586,7 +6608,7 @@ const resources = {
     select: select_en,
     notification: notification_en
   },
-  "fr-CA": {
+  fr: {
     common: common_fr,
     paymentMethod: paymentMethod_fr,
     newsletter: newsletter_fr,
@@ -6608,13 +6630,14 @@ const resources = {
     select: select_fr,
     notification: notification_fr
   }
-};
-let locale = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.call(_window$Pelcro$site)) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.default_locale;
-if (!locale) locale = "en-US";
+}; // set UI language to the page language or default to the language in site settings
+
+const locale = getPageOrDefaultLanguage();
 i18next.use(initReactI18next) // passes i18n down to react-i18next,
 .init({
   resources,
-  lng: getCanonicalLocaleFormat(locale),
+  lng: locale,
+  fallbackLng: "en",
   // debug: true,
   interpolation: {
     escapeValue: false // react already safes from xss
@@ -6625,6 +6648,16 @@ i18next.use(initReactI18next) // passes i18n down to react-i18next,
 
   }
 });
+const pageLanguageObserver = new MutationObserver(mutationsList => {
+  mutationsList.forEach(mutationRecord => {
+    if (mutationRecord.attributeName === "lang") {
+      i18next.changeLanguage(window.Pelcro.helpers.getHtmlLanguageAttribute());
+    }
+  });
+});
+pageLanguageObserver.observe(document.documentElement, {
+  attributes: true
+});
 
 function _classPrivateFieldGet(receiver, privateMap) {
   var descriptor = privateMap.get(receiver);
@@ -9920,7 +9953,7 @@ const FacebookLoginButton = ({
   labelClassName = "",
   iconClassName = ""
 }) => {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r;
 
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
@@ -9959,7 +9992,7 @@ const FacebookLoginButton = ({
 
   return facebookLoginEnabled ? /*#__PURE__*/React__default['default'].createElement(FacebookLogin, {
     appId: window.Pelcro.site.read().facebook_app_id,
-    language: (_window$Pelcro$site$r2 = window.Pelcro.site.read().default_locale) !== null && _window$Pelcro$site$r2 !== void 0 ? _window$Pelcro$site$r2 : "en_US",
+    language: getPageOrDefaultLanguage(),
     fields: "first_name,last_name,email,picture",
     callback: onSuccess,
     onFailure: onFailure,
@@ -13493,7 +13526,7 @@ const PaymentMethodContainer = props => {
     return /*#__PURE__*/React__default['default'].createElement(es_13, {
       apiKey: window.Pelcro.environment.stripe,
       stripeAccount: window.Pelcro.site.read().account_id,
-      locale: getCanonicalLocaleFormat(window.Pelcro.site.read().default_locale)
+      locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
       store: store$d
     }, props))));
@@ -13605,9 +13638,6 @@ const DiscountedPrice = props => {
       percentOff
     }
   } = React.useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const {
     order,
     plan
@@ -13615,7 +13645,7 @@ const DiscountedPrice = props => {
   const ecommOrderCurrency = (_order$currency = order === null || order === void 0 ? void 0 : order.currency) !== null && _order$currency !== void 0 ? _order$currency : order === null || order === void 0 ? void 0 : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const discountedPriceWithoutTax = updatedPrice - taxAmount;
-  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
   if (percentOff) {
     return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
@@ -13648,12 +13678,9 @@ const SubmitPaymentMethod = ({
       updatedPrice
     }
   } = React.useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
-  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -13898,7 +13925,7 @@ class PaypalClient {
       this.paypalButton = window.paypal.Buttons({
         fundingSource: window.paypal.FUNDING.PAYPAL,
         // button locale
-        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : this.siteInfo.default_locale,
+        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : getPageOrDefaultLanguage(),
         // button style
         style: (_this$config$style = this.config.style) !== null && _this$config$style !== void 0 ? _this$config$style : defaultButtonStyle,
         // create payment handler
@@ -13995,7 +14022,7 @@ class PaypalClient {
           } : undefined,
           shippingAddressEditable: this.config.shippingAddressEditable,
           displayName: (_this$config$displayN = this.config.displayName) !== null && _this$config$displayN !== void 0 ? _this$config$displayN : this.siteInfo.name,
-          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : this.siteInfo.default_locale
+          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : getPageOrDefaultLanguage()
         };
       }
     });
@@ -14004,7 +14031,7 @@ class PaypalClient {
       writable: true,
       value: () => {
         const totalAmount = (this.product.quantity || 1) * this.amount;
-        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, this.siteInfo.default_locale);
+        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, getPageOrDefaultLanguage());
         const autoRenewed = this.product.auto_renew;
         const {
           interval,
@@ -14201,14 +14228,11 @@ const TaxAmount = () => {
       taxAmount
     }
   } = React.useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const {
     plan
   } = usePelcro();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
-  const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
   if (taxAmount) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -15081,10 +15105,7 @@ const SubscriptionCreateView = ({
       interval,
       count: interval_count
     });
-    const {
-      default_locale
-    } = Pelcro.site.read();
-    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
     return /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-gray-600"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
@@ -18261,7 +18282,6 @@ const OrderConfirmModal = props => {
   const userOrders = window.Pelcro.user.read().orders;
   const latestOrder = userOrders === null || userOrders === void 0 ? void 0 : userOrders[userOrders.length - 1];
   const latestOrderDiscount = latestOrder === null || latestOrder === void 0 ? void 0 : (_latestOrder$coupon = latestOrder.coupon) === null || _latestOrder$coupon === void 0 ? void 0 : _latestOrder$coupon.percent_off;
-  const locale = window.Pelcro.site.read().default_locale;
   const {
     t
   } = useTranslation("shop");
@@ -18320,7 +18340,7 @@ const OrderConfirmModal = props => {
     className: "plc-mr-1 pelcro-summary-total-text"
   }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "pelcro-summary-total"
-  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, locale)))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-6"
   }, /*#__PURE__*/React__default['default'].createElement(Button, {
     id: "pelcro-submit",
@@ -20689,7 +20709,6 @@ const OrderItems = ({
   const {
     t
   } = useTranslation("dashboard");
-  const site = window.Pelcro.site.read();
   return !(orders !== null && orders !== void 0 && orders.length) ? /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
     colSpan: "3",
     className: "plc-text-center plc-text-gray-500"
@@ -20705,7 +20724,7 @@ const OrderItems = ({
       className: "plc-py-4 plc-pl-2"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xl plc-font-semibold "
-    }, getFormattedPriceByLocal(order.amount, order.currency, site.default_locale)), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+    }, getFormattedPriceByLocal(order.amount, order.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xs plc-text-gray-400 plc-uppercase"
     }, t("labels.orders.itemsAmount", {
       count: getItemsAmount(order.id)
@@ -20734,7 +20753,7 @@ const OrderItems = ({
         className: ""
       }, item.product_sku_name))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-font-semibold"
-      }, getFormattedPriceByLocal(item.amount, order.currency, site.default_locale))));
+      }, getFormattedPriceByLocal(item.amount, order.currency, getPageOrDefaultLanguage()))));
     }), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
       colSpan: "3"
     }, /*#__PURE__*/React__default['default'].createElement("hr", {
@@ -21461,7 +21480,7 @@ class Dashboard extends React.Component {
           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, this.site.default_locale)))), /*#__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", null, /*#__PURE__*/React__default['default'].createElement("span", {
           className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${this.getSubscriptionStatus(sub).bgColor} plc-uppercase ${this.getSubscriptionStatus(sub).textColor} plc-rounded-lg`
         }, this.getSubscriptionStatus(sub).icon, this.getSubscriptionStatus(sub).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-mb-4 plc-text-xs plc-text-gray-500"
@@ -21564,7 +21583,7 @@ class Dashboard extends React.Component {
           className: "plc-font-semibold plc-text-gray-500"
         }, recipient.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-text-xs plc-text-gray-400"
-        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, this.site.default_locale)))), recipient.status && /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, getPageOrDefaultLanguage())))), recipient.status && /*#__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 ${this.getSubscriptionStatus(recipient).bgColor} plc-uppercase ${this.getSubscriptionStatus(recipient).textColor} plc-rounded-lg`
         }, this.getSubscriptionStatus(recipient).icon, this.getSubscriptionStatus(recipient).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-mb-4 plc-text-xs plc-text-gray-500"

package/dist/index.esm.js

@@ -6297,13 +6297,34 @@ const getAddressById = id => {
 };
 /**
  * Transforms locale names stored in our backend like
- * "en_US" into the standerd accepted in core i18n methods: "en-US"
+ * "en_US" into the standard accepted in core i18n methods: "en-US"
  * @param {string} localeName
  * @return {string | undefined}
  * @example getCanonicalLocaleFormat("en_US") => "en-US"
  */
 
 const getCanonicalLocaleFormat = localeName => localeName === null || localeName === void 0 ? void 0 : localeName.replace("_", "-");
+/**
+ * @param {string} localeName
+ * @return {string | undefined}
+ * @example getLanguageWithoutRegion("en-US") => "en"
+ */
+
+const getLanguageWithoutRegion = localeName => {
+  var _getCanonicalLocaleFo;
+
+  return (_getCanonicalLocaleFo = getCanonicalLocaleFormat(localeName)) === null || _getCanonicalLocaleFo === void 0 ? void 0 : _getCanonicalLocaleFo.split("-")[0];
+};
+/**
+ * Gets the current page language or fallbacks to site default
+ * @return {string | undefined}
+ */
+
+const getPageOrDefaultLanguage = () => {
+  var _window$Pelcro$helper, _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
+
+  return (_window$Pelcro$helper = window.Pelcro.helpers.getHtmlLanguageAttribute()) !== null && _window$Pelcro$helper !== void 0 ? _window$Pelcro$helper : getLanguageWithoutRegion((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.call(_window$Pelcro$site)) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.default_locale);
+};
 /**
  * Returns a formatted price string depending on locale
  * @param {number} amount
@@ -6313,7 +6334,7 @@ const getCanonicalLocaleFormat = localeName => localeName === null || localeName
  * @example getFormattedPriceByLocal(10, 'USD', 'en-US') => "$10.00"
  */
 
-const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en-US") => {
+const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en") => {
   const formatter = new Intl.NumberFormat(getCanonicalLocaleFormat(locale), {
     style: "currency",
     currency
@@ -6338,8 +6359,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
     totalWithoutDividingBy100 += parseFloat(item.price ? (item.price * item.quantity).toFixed(2) : item.amount.toFixed(2));
   }
 
-  const locale = window.Pelcro.site.read().default_locale;
-  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, locale);
+  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
 };
 /**
  * returns true if the URL contains a supported view trigger URL
@@ -6353,12 +6373,15 @@ const isValidViewFromURL = viewID => {
   }
 
   return false;
+  /**
+   *
+   */
 
   function hasValidNewsletterUpdateUrl() {
-    var _window$Pelcro, _window$Pelcro$uiSett;
+    var _window$Pelcro2, _window$Pelcro2$uiSet;
 
     if (viewID !== "newsletter-update") return false;
-    const newsletters = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters;
+    const newsletters = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.newsletters;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
 
     if (!siteHasNewslettersDefined) {
@@ -6532,9 +6555,8 @@ const getPaymentCardIcon$1 = name => {
   }));
 };
 
-var _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
 const resources = {
-  "en-US": {
+  en: {
     common: common_en,
     paymentMethod: paymentMethod_en,
     newsletter: newsletter_en,
@@ -6556,7 +6578,7 @@ const resources = {
     select: select_en,
     notification: notification_en
   },
-  "fr-CA": {
+  fr: {
     common: common_fr,
     paymentMethod: paymentMethod_fr,
     newsletter: newsletter_fr,
@@ -6578,13 +6600,14 @@ const resources = {
     select: select_fr,
     notification: notification_fr
   }
-};
-let locale = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.call(_window$Pelcro$site)) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.default_locale;
-if (!locale) locale = "en-US";
+}; // set UI language to the page language or default to the language in site settings
+
+const locale = getPageOrDefaultLanguage();
 i18next.use(initReactI18next) // passes i18n down to react-i18next,
 .init({
   resources,
-  lng: getCanonicalLocaleFormat(locale),
+  lng: locale,
+  fallbackLng: "en",
   // debug: true,
   interpolation: {
     escapeValue: false // react already safes from xss
@@ -6595,6 +6618,16 @@ i18next.use(initReactI18next) // passes i18n down to react-i18next,
 
   }
 });
+const pageLanguageObserver = new MutationObserver(mutationsList => {
+  mutationsList.forEach(mutationRecord => {
+    if (mutationRecord.attributeName === "lang") {
+      i18next.changeLanguage(window.Pelcro.helpers.getHtmlLanguageAttribute());
+    }
+  });
+});
+pageLanguageObserver.observe(document.documentElement, {
+  attributes: true
+});
 
 function _classPrivateFieldGet(receiver, privateMap) {
   var descriptor = privateMap.get(receiver);
@@ -9890,7 +9923,7 @@ const FacebookLoginButton = ({
   labelClassName = "",
   iconClassName = ""
 }) => {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r;
 
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
@@ -9929,7 +9962,7 @@ const FacebookLoginButton = ({
 
   return facebookLoginEnabled ? /*#__PURE__*/React__default.createElement(FacebookLogin, {
     appId: window.Pelcro.site.read().facebook_app_id,
-    language: (_window$Pelcro$site$r2 = window.Pelcro.site.read().default_locale) !== null && _window$Pelcro$site$r2 !== void 0 ? _window$Pelcro$site$r2 : "en_US",
+    language: getPageOrDefaultLanguage(),
     fields: "first_name,last_name,email,picture",
     callback: onSuccess,
     onFailure: onFailure,
@@ -13463,7 +13496,7 @@ const PaymentMethodContainer = props => {
     return /*#__PURE__*/React__default.createElement(es_13, {
       apiKey: window.Pelcro.environment.stripe,
       stripeAccount: window.Pelcro.site.read().account_id,
-      locale: getCanonicalLocaleFormat(window.Pelcro.site.read().default_locale)
+      locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
       store: store$d
     }, props))));
@@ -13575,9 +13608,6 @@ const DiscountedPrice = props => {
       percentOff
     }
   } = useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const {
     order,
     plan
@@ -13585,7 +13615,7 @@ const DiscountedPrice = props => {
   const ecommOrderCurrency = (_order$currency = order === null || order === void 0 ? void 0 : order.currency) !== null && _order$currency !== void 0 ? _order$currency : order === null || order === void 0 ? void 0 : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const discountedPriceWithoutTax = updatedPrice - taxAmount;
-  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
   if (percentOff) {
     return /*#__PURE__*/React__default.createElement("div", Object.assign({
@@ -13618,12 +13648,9 @@ const SubmitPaymentMethod = ({
       updatedPrice
     }
   } = useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
-  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -13868,7 +13895,7 @@ class PaypalClient {
       this.paypalButton = window.paypal.Buttons({
         fundingSource: window.paypal.FUNDING.PAYPAL,
         // button locale
-        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : this.siteInfo.default_locale,
+        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : getPageOrDefaultLanguage(),
         // button style
         style: (_this$config$style = this.config.style) !== null && _this$config$style !== void 0 ? _this$config$style : defaultButtonStyle,
         // create payment handler
@@ -13965,7 +13992,7 @@ class PaypalClient {
           } : undefined,
           shippingAddressEditable: this.config.shippingAddressEditable,
           displayName: (_this$config$displayN = this.config.displayName) !== null && _this$config$displayN !== void 0 ? _this$config$displayN : this.siteInfo.name,
-          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : this.siteInfo.default_locale
+          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : getPageOrDefaultLanguage()
         };
       }
     });
@@ -13974,7 +14001,7 @@ class PaypalClient {
       writable: true,
       value: () => {
         const totalAmount = (this.product.quantity || 1) * this.amount;
-        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, this.siteInfo.default_locale);
+        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, getPageOrDefaultLanguage());
         const autoRenewed = this.product.auto_renew;
         const {
           interval,
@@ -14171,14 +14198,11 @@ const TaxAmount = () => {
       taxAmount
     }
   } = useContext(store$d);
-  const {
-    default_locale
-  } = Pelcro.site.read();
   const {
     plan
   } = usePelcro();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
-  const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
   if (taxAmount) {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -15051,10 +15075,7 @@ const SubscriptionCreateView = ({
       interval,
       count: interval_count
     });
-    const {
-      default_locale
-    } = Pelcro.site.read();
-    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
     return /*#__PURE__*/React__default.createElement("p", {
       className: "plc-text-gray-600"
     }, /*#__PURE__*/React__default.createElement("span", {
@@ -18231,7 +18252,6 @@ const OrderConfirmModal = props => {
   const userOrders = window.Pelcro.user.read().orders;
   const latestOrder = userOrders === null || userOrders === void 0 ? void 0 : userOrders[userOrders.length - 1];
   const latestOrderDiscount = latestOrder === null || latestOrder === void 0 ? void 0 : (_latestOrder$coupon = latestOrder.coupon) === null || _latestOrder$coupon === void 0 ? void 0 : _latestOrder$coupon.percent_off;
-  const locale = window.Pelcro.site.read().default_locale;
   const {
     t
   } = useTranslation("shop");
@@ -18290,7 +18310,7 @@ const OrderConfirmModal = props => {
     className: "plc-mr-1 pelcro-summary-total-text"
   }, t("labels.total")), /*#__PURE__*/React__default.createElement("p", {
     className: "pelcro-summary-total"
-  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, locale)))), /*#__PURE__*/React__default.createElement("div", {
+  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-6"
   }, /*#__PURE__*/React__default.createElement(Button, {
     id: "pelcro-submit",
@@ -20659,7 +20679,6 @@ const OrderItems = ({
   const {
     t
   } = useTranslation("dashboard");
-  const site = window.Pelcro.site.read();
   return !(orders !== null && orders !== void 0 && orders.length) ? /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: "3",
     className: "plc-text-center plc-text-gray-500"
@@ -20675,7 +20694,7 @@ const OrderItems = ({
       className: "plc-py-4 plc-pl-2"
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "plc-text-xl plc-font-semibold "
-    }, getFormattedPriceByLocal(order.amount, order.currency, site.default_locale)), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    }, getFormattedPriceByLocal(order.amount, order.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
       className: "plc-text-xs plc-text-gray-400 plc-uppercase"
     }, t("labels.orders.itemsAmount", {
       count: getItemsAmount(order.id)
@@ -20704,7 +20723,7 @@ const OrderItems = ({
         className: ""
       }, item.product_sku_name))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
         className: "plc-font-semibold"
-      }, getFormattedPriceByLocal(item.amount, order.currency, site.default_locale))));
+      }, getFormattedPriceByLocal(item.amount, order.currency, getPageOrDefaultLanguage()))));
     }), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
       colSpan: "3"
     }, /*#__PURE__*/React__default.createElement("hr", {
@@ -21431,7 +21450,7 @@ class Dashboard extends Component {
           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, this.site.default_locale)))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
+        }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
           className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${this.getSubscriptionStatus(sub).bgColor} plc-uppercase ${this.getSubscriptionStatus(sub).textColor} plc-rounded-lg`
         }, this.getSubscriptionStatus(sub).icon, this.getSubscriptionStatus(sub).title), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
           className: "plc-mb-4 plc-text-xs plc-text-gray-500"
@@ -21534,7 +21553,7 @@ class Dashboard extends Component {
           className: "plc-font-semibold plc-text-gray-500"
         }, recipient.plan.nickname), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
           className: "plc-text-xs plc-text-gray-400"
-        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, this.site.default_locale)))), recipient.status && /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
+        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, getPageOrDefaultLanguage())))), recipient.status && /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("span", {
           className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${this.getSubscriptionStatus(recipient).bgColor} plc-uppercase ${this.getSubscriptionStatus(recipient).textColor} plc-rounded-lg`
         }, this.getSubscriptionStatus(recipient).icon, this.getSubscriptionStatus(recipient).title), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
           className: "plc-mb-4 plc-text-xs plc-text-gray-500"

package/package.json

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