@notificationapi/react 0.0.34 → 0.0.36

package/dist/components/Notifications/NotificationFeed.js

@@ -1,40 +1,41 @@
-import { jsxs as d, jsx as f } from "react/jsx-runtime";
-import { useState as m, useContext as s, useEffect as h } from "react";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { useState as d, useContext as m, useEffect as h } from "react";
 import { Inbox as u } from "./Inbox.js";
-import { NotificationAPIContext as S } from "../Provider/index.js";
+import { NotificationAPIContext as p } from "../Provider/index.js";
 import { NotificationPreferencesPopup as x } from "../Preferences/NotificationPreferencesPopup.js";
-import "../Preferences/PreferenceInput.js";
-import { Filter as H } from "./interface.js";
-const v = (e) => {
-  var r, o, a, l;
-  const [c, n] = m(!1), t = s(S);
+import { D as S } from "../../assets/PreferenceInput.js";
+import { W as I, R as b } from "../../assets/WebPushOptInMessage.js";
+import { Filter as P } from "./interface.js";
+const L = (e) => {
+  var o, a, l, f;
+  const [c, r] = d(!1), i = m(p);
   if (h(() => {
-    if (!t) return;
-    t.markAsOpened();
+    if (!i) return;
+    i.markAsOpened();
     const g = setInterval(() => {
-      t.markAsOpened();
+      i.markAsOpened();
     }, 5e3);
     return () => clearInterval(g);
-  }, [t]), !t)
+  }, [i]), !i)
     return null;
-  const i = {
+  const t = {
     imageShape: e.imageShape || "circle",
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
     pagePosition: e.pagePosition || "top",
     style: e.style || {},
-    filter: e.filter || H.ALL,
+    filter: e.filter || P.ALL,
     infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
-      notification: (r = e.renderers) == null ? void 0 : r.notification
+      notification: (o = e.renderers) == null ? void 0 : o.notification
     },
     header: {
-      title: (o = e.header) == null ? void 0 : o.title,
-      button1ClickHandler: ((a = e.header) == null ? void 0 : a.button1ClickHandler) ?? t.markAsArchived,
-      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => n(!0))
+      title: (a = e.header) == null ? void 0 : a.title,
+      button1ClickHandler: ((l = e.header) == null ? void 0 : l.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((f = e.header) == null ? void 0 : f.button2ClickHandler) ?? (() => r(!0))
     }
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ s(
     "div",
     {
       style: {
@@ -44,24 +45,51 @@ const v = (e) => {
         ...e.style
       },
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ n(
           u,
           {
-            maxHeight: i.infiniteScrollHeight,
-            pagination: i.pagination,
-            filter: i.filter,
-            imageShape: i.imageShape,
-            pageSize: i.pageSize,
-            pagePosition: i.pagePosition,
-            notificationRenderer: i.renderers.notification,
-            header: i.header
+            maxHeight: t.infiniteScrollHeight,
+            pagination: t.pagination,
+            filter: t.filter,
+            imageShape: t.imageShape,
+            pageSize: t.pageSize,
+            pagePosition: t.pagePosition,
+            notificationRenderer: t.renderers.notification,
+            header: t.header
           }
         ),
-        /* @__PURE__ */ f(
+        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ n(S, { style: { margin: "10px 0" } }),
+          /* @__PURE__ */ n(
+            I,
+            {
+              hideAfterInteraction: !0,
+              icon: /* @__PURE__ */ n(b, { type: "text", style: { marginLeft: "9px" } }),
+              descriptionStyle: {
+                flexDirection: "column",
+                // Stack the elements vertically
+                justifyContent: "flex-start",
+                // Align items to the left
+                fontSize: "14px",
+                alignItems: "flex-start"
+                // Align items to the left
+              },
+              buttonContainerStyle: {
+                justifyContent: "flex-start",
+                // Align buttons to the left
+                alignItems: "flex-start",
+                // Align buttons to the left
+                marginTop: "10px"
+                // Add some space between message and buttons
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
           x,
           {
             open: c,
-            onClose: () => n(!1)
+            onClose: () => r(!1)
           }
         )
       ]
@@ -69,5 +97,5 @@ const v = (e) => {
   );
 };
 export {
-  v as NotificationFeed
+  L as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,21 +1,22 @@
-import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { Inbox as h } from "./Inbox.js";
-import { UnreadBadge as g } from "./UnreadBadge.js";
-import { useState as m, useContext as b } from "react";
-import { NotificationAPIContext as s } from "../Provider/index.js";
-import { NotificationPreferencesPopup as I } from "../Preferences/NotificationPreferencesPopup.js";
-import "../Preferences/PreferenceInput.js";
-import { R as S } from "../../assets/channelUtils.js";
-import { P } from "../../assets/index.js";
-import { B as C } from "../../assets/button.js";
-const B = (t) => {
-  var a, r, d, c;
-  const [u, o] = m(!1), n = b(s);
+import { jsx as i, jsxs as o, Fragment as h } from "react/jsx-runtime";
+import { Inbox as g } from "./Inbox.js";
+import { UnreadBadge as m } from "./UnreadBadge.js";
+import { useState as s, useContext as b } from "react";
+import { NotificationAPIContext as I } from "../Provider/index.js";
+import { NotificationPreferencesPopup as p } from "../Preferences/NotificationPreferencesPopup.js";
+import { D as x } from "../../assets/PreferenceInput.js";
+import { W as P, R as S } from "../../assets/WebPushOptInMessage.js";
+import { R as C } from "../../assets/channelUtils.js";
+import { P as W } from "../../assets/index.js";
+import { B as O } from "../../assets/button.js";
+const w = (t) => {
+  var r, d, c, u;
+  const [f, a] = s(!1), n = b(I);
   if (!n)
     return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      S,
+      C,
       {
         style: {
           fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
@@ -41,15 +42,15 @@ const B = (t) => {
     count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: t.filter || "ALL",
     header: {
-      title: (a = t.header) == null ? void 0 : a.title,
-      button1ClickHandler: ((r = t.header) == null ? void 0 : r.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
+      title: (r = t.header) == null ? void 0 : r.title,
+      button1ClickHandler: ((d = t.header) == null ? void 0 : d.button1ClickHandler) ?? n.markAsArchived,
+      button2ClickHandler: ((c = t.header) == null ? void 0 : c.button2ClickHandler) ?? (() => a(!0))
     },
     renderers: {
-      notification: (c = t.renderers) == null ? void 0 : c.notification
+      notification: (u = t.renderers) == null ? void 0 : u.notification
     }
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ o(
     "div",
     {
       style: {
@@ -60,30 +61,49 @@ const B = (t) => {
       },
       children: [
         /* @__PURE__ */ i(
-          P,
+          W,
           {
             autoAdjustOverflow: !0,
             trigger: "click",
-            content: /* @__PURE__ */ i(
-              h,
-              {
-                maxHeight: 500,
-                pagination: e.pagination,
-                filter: e.filter,
-                imageShape: e.imageShape,
-                pageSize: e.pageSize,
-                pagePosition: e.pagePosition,
-                notificationRenderer: e.renderers.notification,
-                header: e.header
-              }
-            ),
+            content: /* @__PURE__ */ o(h, { children: [
+              /* @__PURE__ */ i(
+                g,
+                {
+                  maxHeight: 500,
+                  pagination: e.pagination,
+                  filter: e.filter,
+                  imageShape: e.imageShape,
+                  pageSize: e.pageSize,
+                  pagePosition: e.pagePosition,
+                  notificationRenderer: e.renderers.notification,
+                  header: e.header
+                }
+              ),
+              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ o("div", { children: [
+                /* @__PURE__ */ i(x, { style: { margin: "10px 0" } }),
+                /* @__PURE__ */ i(
+                  P,
+                  {
+                    hideAfterInteraction: !0,
+                    icon: /* @__PURE__ */ i(
+                      S,
+                      {
+                        type: "text",
+                        style: { marginLeft: "9px" }
+                      }
+                    ),
+                    alertContainerStyle: { maxWidth: "345px" }
+                  }
+                )
+              ] })
+            ] }),
             arrow: !1,
             overlayStyle: {
               padding: "0 16px",
               minWidth: e.popupWidth
             },
-            onOpenChange: (f) => {
-              f && n.markAsOpened();
+            onOpenChange: (l) => {
+              l && n.markAsOpened();
             },
             children: /* @__PURE__ */ i(
               "div",
@@ -92,7 +112,7 @@ const B = (t) => {
                   display: "inline-block"
                 },
                 children: /* @__PURE__ */ i(
-                  g,
+                  m,
                   {
                     ...t.unreadBadgeProps,
                     style: {
@@ -101,7 +121,7 @@ const B = (t) => {
                     },
                     count: e.count,
                     children: /* @__PURE__ */ i(
-                      C,
+                      O,
                       {
                         icon: e.buttonIcon,
                         style: {
@@ -119,10 +139,10 @@ const B = (t) => {
           }
         ),
         /* @__PURE__ */ i(
-          I,
+          p,
           {
-            open: u,
-            onClose: () => o(!1)
+            open: f,
+            onClose: () => a(!1)
           }
         )
       ]
@@ -130,5 +150,5 @@ const B = (t) => {
   );
 };
 export {
-  B as NotificationLauncher
+  w as NotificationLauncher
 };

package/dist/components/Notifications/NotificationPopup.js

@@ -1,80 +1,87 @@
-import { jsx as i, jsxs as h, Fragment as f } from "react/jsx-runtime";
-import { Inbox as g } from "./Inbox.js";
+import { jsx as i, jsxs as o, Fragment as l } from "react/jsx-runtime";
+import { Inbox as f } from "./Inbox.js";
 import { UnreadBadge as m } from "./UnreadBadge.js";
 import { NotificationAPIContext as p } from "../Provider/index.js";
-import { useState as b, useContext as I } from "react";
-import { NotificationPreferencesPopup as P } from "../Preferences/NotificationPreferencesPopup.js";
-import "../Preferences/PreferenceInput.js";
-import { Filter as S } from "./interface.js";
-import { R as x } from "../../assets/channelUtils.js";
-import { P as C } from "../../assets/index.js";
-import { B as s } from "../../assets/button.js";
-const F = (t) => {
-  var a, r, c, d;
-  const [u, o] = b(!1), n = I(p);
+import { useState as b, useContext as s } from "react";
+import { NotificationPreferencesPopup as I } from "../Preferences/NotificationPreferencesPopup.js";
+import { D as P } from "../../assets/PreferenceInput.js";
+import { W as S } from "../../assets/WebPushOptInMessage.js";
+import { Filter as x } from "./interface.js";
+import { R as C } from "../../assets/channelUtils.js";
+import { P as W } from "../../assets/index.js";
+import { B as O } from "../../assets/button.js";
+const T = (e) => {
+  var a, d, c, u;
+  const [h, r] = b(!1), n = s(p);
   if (!n)
     return null;
-  const e = {
-    buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      x,
+  const t = {
+    buttonIcon: e.buttonIcon || /* @__PURE__ */ i(
+      C,
       {
         style: {
-          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
-          color: t.iconColor || "#000000"
+          fontSize: e.buttonIconSize || (e.buttonWidth ? e.buttonWidth / 2 : 20),
+          color: e.iconColor || "#000000"
         }
       }
     ),
-    buttonWidth: t.buttonWidth || 40,
-    buttonHeight: t.buttonHeight || 40,
-    popupWidth: t.popupWidth || 400,
-    popupHeight: t.popupHeight || 600,
-    buttonIconSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20),
-    imageShape: t.imageShape || "circle",
-    iconColor: t.iconColor || "#000000",
-    pagination: t.pagination || "INFINITE_SCROLL",
-    pageSize: t.pageSize || 10,
-    pagePosition: t.pagePosition || "top",
-    popupZIndex: t.popupZIndex || 1030,
-    unreadBadgeProps: t.unreadBadgeProps ?? {},
-    count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
-    filter: t.filter || S.ALL,
+    buttonWidth: e.buttonWidth || 40,
+    buttonHeight: e.buttonHeight || 40,
+    popupWidth: e.popupWidth || 400,
+    popupHeight: e.popupHeight || 600,
+    buttonIconSize: e.buttonIconSize || (e.buttonWidth ? e.buttonWidth / 2 : 20),
+    imageShape: e.imageShape || "circle",
+    iconColor: e.iconColor || "#000000",
+    pagination: e.pagination || "INFINITE_SCROLL",
+    pageSize: e.pageSize || 10,
+    pagePosition: e.pagePosition || "top",
+    popupZIndex: e.popupZIndex || 1030,
+    unreadBadgeProps: e.unreadBadgeProps ?? {},
+    count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
+    filter: e.filter || x.ALL,
     header: {
-      title: (a = t.header) == null ? void 0 : a.title,
-      button1ClickHandler: ((r = t.header) == null ? void 0 : r.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((c = t.header) == null ? void 0 : c.button2ClickHandler) ?? (() => o(!0))
+      title: (a = e.header) == null ? void 0 : a.title,
+      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? n.markAsArchived,
+      button2ClickHandler: ((c = e.header) == null ? void 0 : c.button2ClickHandler) ?? (() => r(!0))
     },
     renderers: {
-      notification: (d = t.renderers) == null ? void 0 : d.notification
+      notification: (u = e.renderers) == null ? void 0 : u.notification
     }
   };
-  return /* @__PURE__ */ h(f, { children: [
+  return /* @__PURE__ */ o(l, { children: [
     /* @__PURE__ */ i(
-      C,
+      W,
       {
         autoAdjustOverflow: !0,
         trigger: "click",
-        content: /* @__PURE__ */ i(
-          g,
-          {
-            maxHeight: e.popupHeight - 73,
-            pagination: e.pagination,
-            filter: e.filter,
-            imageShape: e.imageShape,
-            pageSize: e.pageSize,
-            pagePosition: e.pagePosition,
-            notificationRenderer: e.renderers.notification,
-            header: e.header
-          }
-        ),
-        onOpenChange: (l) => {
-          l && n.markAsOpened();
+        content: /* @__PURE__ */ o(l, { children: [
+          /* @__PURE__ */ i(
+            f,
+            {
+              maxHeight: t.popupHeight - 73,
+              pagination: t.pagination,
+              filter: t.filter,
+              imageShape: t.imageShape,
+              pageSize: t.pageSize,
+              pagePosition: t.pagePosition,
+              notificationRenderer: t.renderers.notification,
+              header: t.header
+            }
+          ),
+          n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ o("div", { children: [
+            /* @__PURE__ */ i(P, { style: { margin: "10px 0" } }),
+            /* @__PURE__ */ i(S, { hideAfterInteraction: !0 })
+          ] })
+        ] }),
+        onOpenChange: (g) => {
+          g && n.markAsOpened();
         },
         arrow: !1,
         overlayStyle: {
           padding: "0 16px",
-          width: e.popupWidth
+          width: t.popupWidth
         },
-        zIndex: t.popupZIndex,
+        zIndex: e.popupZIndex,
         children: /* @__PURE__ */ i(
           "div",
           {
@@ -84,20 +91,20 @@ const F = (t) => {
             children: /* @__PURE__ */ i(
               m,
               {
-                ...t.unreadBadgeProps,
+                ...e.unreadBadgeProps,
                 style: {
                   top: 5,
                   right: 5
                 },
-                count: e.count,
-                filter: e.filter,
+                count: t.count,
+                filter: t.filter,
                 children: /* @__PURE__ */ i(
-                  s,
+                  O,
                   {
-                    icon: e.buttonIcon,
+                    icon: t.buttonIcon,
                     style: {
-                      width: e.buttonWidth,
-                      height: e.buttonHeight
+                      width: t.buttonWidth,
+                      height: t.buttonHeight
                     },
                     shape: "circle",
                     type: "text"
@@ -110,14 +117,14 @@ const F = (t) => {
       }
     ),
     /* @__PURE__ */ i(
-      P,
+      I,
       {
-        open: u,
-        onClose: () => o(!1)
+        open: h,
+        onClose: () => r(!1)
       }
     )
   ] });
 };
 export {
-  F as NotificationPopup
+  T as NotificationPopup
 };

package/dist/components/Preferences/NotificationPreferencesInline.d.ts

@@ -1,3 +1,3 @@
 type NotificationPreferencesInlineProps = object;
-export declare function NotificationPreferencesInline(props: NotificationPreferencesInlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPreferencesInline(props: NotificationPreferencesInlineProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Preferences/NotificationPreferencesInline.js

@@ -1,8 +1,42 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Preferences as e } from "./Preferences.js";
-function t(o) {
-  return /* @__PURE__ */ r(e, {});
+import { jsxs as n, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { Preferences as i } from "./Preferences.js";
+import { W as o } from "../../assets/WebPushOptInMessage.js";
+import { useContext as s } from "react";
+import { NotificationAPIContext as f } from "../Provider/index.js";
+import { D as a } from "../../assets/PreferenceInput.js";
+function I(m) {
+  const e = s(f);
+  return e ? /* @__PURE__ */ n(r, { children: [
+    /* @__PURE__ */ t(i, {}),
+    " ",
+    e.webPushOptInMessage && /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ t(a, { style: { margin: "10px 0" } }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          hideAfterInteraction: !1,
+          descriptionStyle: {
+            flexDirection: "column",
+            // Stack the elements vertically
+            justifyContent: "flex-start",
+            // Align items to the left
+            fontSize: "14px",
+            alignItems: "flex-start"
+            // Align items to the left
+          },
+          buttonContainerStyle: {
+            justifyContent: "flex-start",
+            // Align buttons to the left
+            alignItems: "flex-start",
+            // Align buttons to the left
+            marginTop: "10px"
+            // Add some space between message and buttons
+          }
+        }
+      )
+    ] })
+  ] }) : null;
 }
 export {
-  t as NotificationPreferencesInline
+  I as NotificationPreferencesInline
 };

package/dist/components/Preferences/NotificationPreferencesPopup.d.ts

@@ -3,5 +3,5 @@ type NotificationPreferencesPopupProps = {
     onClose?: () => void;
     collapse?: boolean;
 };
-export declare function NotificationPreferencesPopup(props: NotificationPreferencesPopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPreferencesPopup(props: NotificationPreferencesPopupProps): import("react/jsx-runtime").JSX.Element | null;
 export {};