@pelcro/react-pelcro-js 3.47.0 → 3.49.0

package/dist/index.cjs.js

@@ -3823,7 +3823,8 @@ var buttons$h = {
 var messages$Y = {
 	orderConfirmed: {
 		title: "Order confirmed!",
-		body: "Your order has been confirmed and will be shipped within the next few days. You'll shortly receive an email confirmation of this order."
+		body: "Your order has been confirmed and will be shipped within the next few days. You'll shortly receive an email confirmation of this order.",
+		bodyDigital: "Your order has been confirmed. You'll shortly receive an email confirmation of this order."
 	},
 	haveQuestions: "If you have any queries please don't hesitate to contact us!",
 	multipleCurrencies: "Your cart currently contains items which are available in different currencies. In order to proceed with the checkout, please make sure that all items have the same currency.",
@@ -3969,6 +3970,10 @@ var labels$V = {
 	},
 	subCancellation: {
 		goBack: "Go back"
+	},
+	emailPreferences: {
+		label: "Email Notifications",
+		description: "Select which email updates you would like to receive:"
 	}
 };
 var messages$W = {
@@ -4720,7 +4725,8 @@ var buttons$c = {
 var messages$G = {
 	orderConfirmed: {
 		title: "Votre commande est confirmée !",
-		body: "Votre commande a été confirmée et vous sera expédiée dans les prochains jours. Vous recevrez un courriel de confirmation sous peu."
+		body: "Votre commande a été confirmée et vous sera expédiée dans les prochains jours. Vous recevrez un courriel de confirmation sous peu.",
+		bodyDigital: "Votre commande a été confirmée et vous sera disponible pour téléchargement sous peu. Vous recevrez un courriel de confirmation sous peu."
 	},
 	haveQuestions: "N’hésitez pas à nous contacter pour toute question !",
 	multipleCurrencies: "Votre panier contient des articles disponibles dans différentes devises. Avant de passer à la caisse, veuillez vous assurer que tous les articles ont la même devise.",
@@ -4864,6 +4870,10 @@ var labels$E = {
 	},
 	subCancellation: {
 		goBack: "Retourner"
+	},
+	emailPreferences: {
+		label: "Notifications par courriel",
+		description: "Sélectionnez les mises à jour par courriel que vous souhaitez recevoir:"
 	}
 };
 var messages$E = {
@@ -5606,7 +5616,8 @@ var buttons$7 = {
 var messages$o = {
 	orderConfirmed: {
 		title: "주문이 확인되었습니다!",
-		body: "귀하의 주문이 확인되었으며 며칠 안에 배송될 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다."
+		body: "귀하의 주문이 확인되었으며 며칠 안에 배송될 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다.",
+		bodyDigital: "귀하의 주문이 확인되었으며 며칠 안에 다운로드 가능할 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다."
 	},
 	haveQuestions: "질문이 있으면 언제든 저희에게 연락주시기 바랍니다!",
 	multipleCurrencies: "장바구니에 다른 통화로만 결제가 가능한 아이템이 있습니다. 결제를 계속 진행하려면 모든 아이템의 결제 통화가 동일한지 확인하십시오.",
@@ -6594,7 +6605,8 @@ var buttons$2 = {
 var messages$6 = {
 	orderConfirmed: {
 		title: "¡Orden confirmada!",
-		body: "Tu orden ha sido confirmada y será enviada en los próximos días. En breve recibirás un correo electrónico de confirmación de esta orden."
+		body: "Tu orden ha sido confirmada y será enviada en los próximos días. En breve recibirás un correo electrónico de confirmación de esta orden.",
+		bodyDigital: "Tu orden ha sido confirmada y estará disponible para descargar en breve. En breve recibirás un correo electrónico de confirmación de esta orden."
 	},
 	haveQuestions: "¡Si tienes alguna pregunta, no dudes en contactarnos!",
 	multipleCurrencies: "Tu carrito actualmente contiene artículos que están disponibles en diferentes divisas. Para proceder a la compra, asegúrate de que todos los artículos tengan la misma divisa.",
@@ -27622,6 +27634,7 @@ const OrderConfirmModal = props => {
     props === null || props === void 0 ? void 0 : (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
     resetView();
   };
+  const hasShippableItems = (latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.shipping_rate) !== null;
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-order-confirm-modal",
     className: "plc-border-t-8 plc-border-primary-500",
@@ -27637,7 +27650,7 @@ const OrderConfirmModal = props => {
     className: "plc-text-center plc-text-gray-900"
   }, /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-mb-4 plc-text-3xl"
-  }, t("messages.orderConfirmed.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("messages.orderConfirmed.body")), /*#__PURE__*/React__default['default'].createElement("p", null, t("messages.haveQuestions")))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, t("messages.orderConfirmed.title")), /*#__PURE__*/React__default['default'].createElement("p", null, hasShippableItems ? t("messages.orderConfirmed.body") : t("messages.orderConfirmed.bodyDigital")), /*#__PURE__*/React__default['default'].createElement("p", null, t("messages.haveQuestions")))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mt-5 pelcro-order-summary-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-font-bold pelcro-order-summary-title"
@@ -31562,6 +31575,123 @@ function getMemberShipStatus(status) {
   };
 }
 
+const EmailPreferencesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [options, setOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState({});
+  const [alert, setAlert] = React.useState({});
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+    const options = ((_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 email = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email");
+    setIsLoading(true);
+    window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+      var _res$data$lists$split, _res$data, _res$data$lists;
+      if (err) {
+        setIsLoading(false);
+        setError(t("messages.error") || "Failed to load preferences.");
+        return;
+      }
+      const selectedIds = (_res$data$lists$split = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$lists = _res$data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+      setOptions(options.map(opt => ({
+        ...opt,
+        id: String(opt.id),
+        selected: selectedIds.includes(String(opt.id))
+      })));
+      setIsLoading(false);
+      setError(null);
+    });
+  }, [t]);
+  const handleCheckboxChange = id => e => {
+    const checked = e.target.checked;
+    setOptions(prevOptions => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+      const newOptions = prevOptions.map(opt => opt.id === id ? {
+        ...opt,
+        selected: checked
+      } : opt);
+      // Set loading for this checkbox
+      setLoading(prev => ({
+        ...prev,
+        [id]: true
+      }));
+      setAlert(prev => ({
+        ...prev,
+        [id]: null
+      }));
+      // Save to backend
+      const selectedIds = newOptions.filter(opt => opt.selected).map(opt => opt.id);
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      const requestData = {
+        email,
+        source: "web",
+        lists: selectedIds.join(",")
+      };
+
+      // Check if this is a new subscription
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        if (err) {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: "Error checking subscription status"
+          }));
+          return;
+        }
+        const didSubToNewslettersBefore = Boolean(res.data.email);
+        const callback = err => {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: err ? "Error saving" : "Saved!"
+          }));
+        };
+        if (didSubToNewslettersBefore) {
+          window.Pelcro.newsletter.update(requestData, callback);
+        } else {
+          window.Pelcro.newsletter.create(requestData, callback);
+        }
+      });
+      return newOptions;
+    });
+  };
+  if (isLoading) return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-center plc-items-center plc-h-32"
+  }, /*#__PURE__*/React__default['default'].createElement(Loader, {
+    width: 60,
+    height: 100
+  }));
+  if (error) return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-red-600 plc-p-4"
+  }, error);
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-4 plc-text-sm plc-text-gray-600"
+  }, t("labels.emailPreferences.description") || "Select which email updates you would like to receive."), options.map(opt => /*#__PURE__*/React__default['default'].createElement("div", {
+    key: opt.id,
+    className: "plc-flex plc-items-center plc-mb-2"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "checkbox",
+    id: `email-pref-${opt.id}`,
+    checked: !!opt.selected,
+    onChange: handleCheckboxChange(opt.id),
+    disabled: loading[opt.id],
+    className: "plc-mr-2"
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: `email-pref-${opt.id}`,
+    className: "plc-text-base"
+  }, opt.label))));
+};
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -31572,7 +31702,8 @@ const SUB_MENUS = {
   GIFTS: "gifts",
   ORDERS: "orders",
   INVOICES: "invoices",
-  SAVED_ITEMS: "saved-items"
+  SAVED_ITEMS: "saved-items",
+  EMAIL_PREFERENCES: "email-preferences"
 };
 
 /**
@@ -32066,13 +32197,14 @@ class Dashboard extends React.Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_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.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _window$Pelcro3, _window$Pelcro3$uiSet;
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
     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 emailNotifications = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.emailNotifications;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default['default'].createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
@@ -32150,7 +32282,7 @@ class Dashboard extends React.Component {
         }),
         className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
         onClick: this.displayChangePassword
-      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && /*#__PURE__*/React__default['default'].createElement(Button, {
+      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && emailNotifications !== true && /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default['default'].createElement(SvgNewsletter, {
           className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -32240,6 +32372,12 @@ class Dashboard extends React.Component {
       icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
       title: this.locale("labels.savedItems.label"),
       content: /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null)
+    }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
+      show: emailNotifications === true,
+      name: SUB_MENUS.EMAIL_PREFERENCES,
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
+      title: this.locale("labels.emailPreferences.label"),
+      content: /*#__PURE__*/React__default['default'].createElement(EmailPreferencesMenu, null)
     }), /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "outline",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgExit, null),

package/dist/index.esm.js

@@ -3793,7 +3793,8 @@ var buttons$h = {
 var messages$Y = {
 	orderConfirmed: {
 		title: "Order confirmed!",
-		body: "Your order has been confirmed and will be shipped within the next few days. You'll shortly receive an email confirmation of this order."
+		body: "Your order has been confirmed and will be shipped within the next few days. You'll shortly receive an email confirmation of this order.",
+		bodyDigital: "Your order has been confirmed. You'll shortly receive an email confirmation of this order."
 	},
 	haveQuestions: "If you have any queries please don't hesitate to contact us!",
 	multipleCurrencies: "Your cart currently contains items which are available in different currencies. In order to proceed with the checkout, please make sure that all items have the same currency.",
@@ -3939,6 +3940,10 @@ var labels$V = {
 	},
 	subCancellation: {
 		goBack: "Go back"
+	},
+	emailPreferences: {
+		label: "Email Notifications",
+		description: "Select which email updates you would like to receive:"
 	}
 };
 var messages$W = {
@@ -4690,7 +4695,8 @@ var buttons$c = {
 var messages$G = {
 	orderConfirmed: {
 		title: "Votre commande est confirmée !",
-		body: "Votre commande a été confirmée et vous sera expédiée dans les prochains jours. Vous recevrez un courriel de confirmation sous peu."
+		body: "Votre commande a été confirmée et vous sera expédiée dans les prochains jours. Vous recevrez un courriel de confirmation sous peu.",
+		bodyDigital: "Votre commande a été confirmée et vous sera disponible pour téléchargement sous peu. Vous recevrez un courriel de confirmation sous peu."
 	},
 	haveQuestions: "N’hésitez pas à nous contacter pour toute question !",
 	multipleCurrencies: "Votre panier contient des articles disponibles dans différentes devises. Avant de passer à la caisse, veuillez vous assurer que tous les articles ont la même devise.",
@@ -4834,6 +4840,10 @@ var labels$E = {
 	},
 	subCancellation: {
 		goBack: "Retourner"
+	},
+	emailPreferences: {
+		label: "Notifications par courriel",
+		description: "Sélectionnez les mises à jour par courriel que vous souhaitez recevoir:"
 	}
 };
 var messages$E = {
@@ -5576,7 +5586,8 @@ var buttons$7 = {
 var messages$o = {
 	orderConfirmed: {
 		title: "주문이 확인되었습니다!",
-		body: "귀하의 주문이 확인되었으며 며칠 안에 배송될 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다."
+		body: "귀하의 주문이 확인되었으며 며칠 안에 배송될 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다.",
+		bodyDigital: "귀하의 주문이 확인되었으며 며칠 안에 다운로드 가능할 예정입니다. 이 주문의 확인 이메일이 귀하에게 전송됩니다."
 	},
 	haveQuestions: "질문이 있으면 언제든 저희에게 연락주시기 바랍니다!",
 	multipleCurrencies: "장바구니에 다른 통화로만 결제가 가능한 아이템이 있습니다. 결제를 계속 진행하려면 모든 아이템의 결제 통화가 동일한지 확인하십시오.",
@@ -6564,7 +6575,8 @@ var buttons$2 = {
 var messages$6 = {
 	orderConfirmed: {
 		title: "¡Orden confirmada!",
-		body: "Tu orden ha sido confirmada y será enviada en los próximos días. En breve recibirás un correo electrónico de confirmación de esta orden."
+		body: "Tu orden ha sido confirmada y será enviada en los próximos días. En breve recibirás un correo electrónico de confirmación de esta orden.",
+		bodyDigital: "Tu orden ha sido confirmada y estará disponible para descargar en breve. En breve recibirás un correo electrónico de confirmación de esta orden."
 	},
 	haveQuestions: "¡Si tienes alguna pregunta, no dudes en contactarnos!",
 	multipleCurrencies: "Tu carrito actualmente contiene artículos que están disponibles en diferentes divisas. Para proceder a la compra, asegúrate de que todos los artículos tengan la misma divisa.",
@@ -27592,6 +27604,7 @@ const OrderConfirmModal = props => {
     props === null || props === void 0 ? void 0 : (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
     resetView();
   };
+  const hasShippableItems = (latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.shipping_rate) !== null;
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-order-confirm-modal",
     className: "plc-border-t-8 plc-border-primary-500",
@@ -27607,7 +27620,7 @@ const OrderConfirmModal = props => {
     className: "plc-text-center plc-text-gray-900"
   }, /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-mb-4 plc-text-3xl"
-  }, t("messages.orderConfirmed.title")), /*#__PURE__*/React__default.createElement("p", null, t("messages.orderConfirmed.body")), /*#__PURE__*/React__default.createElement("p", null, t("messages.haveQuestions")))), /*#__PURE__*/React__default.createElement("div", {
+  }, t("messages.orderConfirmed.title")), /*#__PURE__*/React__default.createElement("p", null, hasShippableItems ? t("messages.orderConfirmed.body") : t("messages.orderConfirmed.bodyDigital")), /*#__PURE__*/React__default.createElement("p", null, t("messages.haveQuestions")))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mt-5 pelcro-order-summary-wrapper"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-font-bold pelcro-order-summary-title"
@@ -31532,6 +31545,123 @@ function getMemberShipStatus(status) {
   };
 }
 
+const EmailPreferencesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState({});
+  const [alert, setAlert] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+    const options = ((_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 email = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email");
+    setIsLoading(true);
+    window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+      var _res$data$lists$split, _res$data, _res$data$lists;
+      if (err) {
+        setIsLoading(false);
+        setError(t("messages.error") || "Failed to load preferences.");
+        return;
+      }
+      const selectedIds = (_res$data$lists$split = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$lists = _res$data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+      setOptions(options.map(opt => ({
+        ...opt,
+        id: String(opt.id),
+        selected: selectedIds.includes(String(opt.id))
+      })));
+      setIsLoading(false);
+      setError(null);
+    });
+  }, [t]);
+  const handleCheckboxChange = id => e => {
+    const checked = e.target.checked;
+    setOptions(prevOptions => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+      const newOptions = prevOptions.map(opt => opt.id === id ? {
+        ...opt,
+        selected: checked
+      } : opt);
+      // Set loading for this checkbox
+      setLoading(prev => ({
+        ...prev,
+        [id]: true
+      }));
+      setAlert(prev => ({
+        ...prev,
+        [id]: null
+      }));
+      // Save to backend
+      const selectedIds = newOptions.filter(opt => opt.selected).map(opt => opt.id);
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      const requestData = {
+        email,
+        source: "web",
+        lists: selectedIds.join(",")
+      };
+
+      // Check if this is a new subscription
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        if (err) {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: "Error checking subscription status"
+          }));
+          return;
+        }
+        const didSubToNewslettersBefore = Boolean(res.data.email);
+        const callback = err => {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: err ? "Error saving" : "Saved!"
+          }));
+        };
+        if (didSubToNewslettersBefore) {
+          window.Pelcro.newsletter.update(requestData, callback);
+        } else {
+          window.Pelcro.newsletter.create(requestData, callback);
+        }
+      });
+      return newOptions;
+    });
+  };
+  if (isLoading) return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-center plc-items-center plc-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    width: 60,
+    height: 100
+  }));
+  if (error) return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-red-600 plc-p-4"
+  }, error);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-4 plc-text-sm plc-text-gray-600"
+  }, t("labels.emailPreferences.description") || "Select which email updates you would like to receive."), options.map(opt => /*#__PURE__*/React__default.createElement("div", {
+    key: opt.id,
+    className: "plc-flex plc-items-center plc-mb-2"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    id: `email-pref-${opt.id}`,
+    checked: !!opt.selected,
+    onChange: handleCheckboxChange(opt.id),
+    disabled: loading[opt.id],
+    className: "plc-mr-2"
+  }), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: `email-pref-${opt.id}`,
+    className: "plc-text-base"
+  }, opt.label))));
+};
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -31542,7 +31672,8 @@ const SUB_MENUS = {
   GIFTS: "gifts",
   ORDERS: "orders",
   INVOICES: "invoices",
-  SAVED_ITEMS: "saved-items"
+  SAVED_ITEMS: "saved-items",
+  EMAIL_PREFERENCES: "email-preferences"
 };
 
 /**
@@ -32036,13 +32167,14 @@ class Dashboard extends Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_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.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _window$Pelcro3, _window$Pelcro3$uiSet;
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
     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 emailNotifications = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.emailNotifications;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default.createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
@@ -32120,7 +32252,7 @@ class Dashboard extends Component {
         }),
         className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
         onClick: this.displayChangePassword
-      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && /*#__PURE__*/React__default.createElement(Button, {
+      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && emailNotifications !== true && /*#__PURE__*/React__default.createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default.createElement(SvgNewsletter, {
           className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -32210,6 +32342,12 @@ class Dashboard extends Component {
       icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
       title: this.locale("labels.savedItems.label"),
       content: /*#__PURE__*/React__default.createElement(SavedItemsMenu, null)
+    }), /*#__PURE__*/React__default.createElement(Accordion.item, {
+      show: emailNotifications === true,
+      name: SUB_MENUS.EMAIL_PREFERENCES,
+      icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
+      title: this.locale("labels.emailPreferences.label"),
+      content: /*#__PURE__*/React__default.createElement(EmailPreferencesMenu, null)
     }), /*#__PURE__*/React__default.createElement(Button, {
       variant: "outline",
       icon: /*#__PURE__*/React__default.createElement(SvgExit, null),

package/dist/pelcro.css

@@ -2838,6 +2838,11 @@ apple-pay-button {
   color: rgba(180, 48, 43, var(--tw-text-opacity));
 }
 
+.pelcro-root .plc-text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgba(139, 37, 33, var(--tw-text-opacity));
+}
+
 .pelcro-root .plc-text-red-700 {
   --tw-text-opacity: 1;
   color: rgba(98, 26, 23, var(--tw-text-opacity));

package/package.json

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