@suprsend/react
Version:
The react library for using SuprSend features like inbox, preferences etc
1,147 lines (1,146 loc) • 48.3 kB
JavaScript
import { useFeedClient as V, useFeedData as F, useFeed as kr, useTranslations as P, ApiResponseStatus as z, SuprSendFeedProvider as vr } from "@suprsend/react-core";
export * from "@suprsend/react-core";
import t, { useState as B, useEffect as M, useMemo as hr, useRef as xr, useCallback as $r } from "react";
import { usePopper as Tr } from "react-popper";
import c from "@emotion/styled";
import { keyframes as yr } from "@emotion/react";
import fr from "react-infinite-scroll-component";
import Lr from "react-markdown";
import Ar from "remark-gfm";
import Br from "rehype-raw";
import mr from "react-timeago";
const d = {
primary: "#2E70E8",
primaryText: "#1E293B",
secondaryText: "#475569",
border: "#E2E8F0",
main: "#FFFFFF",
error: "#B42318"
}, x = {
primary: "#2E70E8",
primaryText: "#EFEFEF",
secondaryText: "#CBD5E1",
border: "#3A4A61",
main: "#1D2635",
error: "#F97066"
}, I = c.p`
font-size: 14px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
line-height: 20px;
color: ${d.primaryText};
margin: 0px;
`, N = c(I)`
font-size: 12px;
color: ${d.secondaryText};
`, K = c(I)`
font-size: 16px;
font-weight: 500;
`, U = {
bell: {
color: "#fff"
},
badge: {
backgroundColor: x.primary
},
header: {
container: {
backgroundColor: x.main,
borderBottom: `0.5px solid ${x.border}`,
boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.5)"
},
headerText: {
color: x.primaryText
},
markAllReadText: {
color: x.primary
}
},
tabs: {
color: x.primaryText,
unselectedColor: x.secondaryText + "D9",
bottomColor: x.primary,
badgeColor: "rgba(100, 116, 139, 0.5)",
badgeText: x.primaryText
},
notificationsContainer: {
container: {
backgroundColor: x.main,
borderColor: x.border
},
noNotificationsText: {
color: x.primaryText
},
noNotificationsSubtext: {
color: x.secondaryText
},
loader: {
color: x.primary
}
},
notification: {
container: {
borderBottom: `1px solid ${x.border}`,
readBackgroundColor: x.main,
unreadBackgroundColor: "#273244",
hoverBackgroundColor: "#2D3A4D"
},
pinnedText: {
color: x == null ? void 0 : x.secondaryText
},
headerText: {
color: x.primaryText
},
bodyText: {
color: x.secondaryText,
blockquoteColor: "rgba(100, 116, 139, 0.5)"
},
unseenDot: {
backgroundColor: x.primary
},
createdOnText: {
color: x.secondaryText
},
subtext: {
color: "#94a3b8"
},
actions: [{
container: {
backgroundColor: x.primary
}
}, {
container: {
borderColor: x.border,
backgroundColor: "transparent",
hoverBackgroundColor: x.main
},
text: {
color: x.secondaryText
}
}],
expiresText: {
backgroundColor: "rgba(100, 116, 139, 0.5)",
color: x.secondaryText,
expiringBackgroundColor: "rgba(217, 45, 32, 0.15)",
expiringColor: x.error
},
actionsMenuIcon: {
color: x.secondaryText,
hoverBackgroundColor: "rgba(100, 116, 139, 0.5)"
},
actionsMenu: {
backgroundColor: x.main,
borderColor: x.border
},
actionsMenuItem: {
hoverBackgroundColor: "rgba(100, 116, 139, 0.2)"
},
actionsMenuItemIcon: {
color: x.secondaryText
},
actionsMenuItemText: {
color: x.secondaryText
}
},
toast: {
container: {
backgroundColor: x.main,
borderColor: x.border
},
headerText: {
color: x.primaryText
},
bodyText: {
color: x.secondaryText,
blockquoteColor: x.border,
tableBorderColor: x.border
}
}
};
function Ir({
style: r
}) {
const e = (r == null ? void 0 : r.height) || 24, n = (r == null ? void 0 : r.width) || 24, a = (r == null ? void 0 : r.color) || d.primaryText;
return /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: n, height: e, color: a, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ t.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }));
}
function Mr({
bellComponent: r,
style: e
}) {
if (r) {
const n = r;
return /* @__PURE__ */ t.createElement(n, null);
}
return /* @__PURE__ */ t.createElement(Ir, { style: e });
}
function _r({
count: r,
badgeComponent: e,
style: n
}) {
if (r <= 0) return null;
if (e) {
const a = e;
return /* @__PURE__ */ t.createElement(a, { count: r });
}
return /* @__PURE__ */ t.createElement(Hr, { style: n }, r);
}
const Hr = c(I)`
position: absolute;
right: -3px;
top: -7px;
display: inline-block;
font-size: 10px;
line-height: 1;
padding: 3px 6px;
border-radius: 50%;
background-color: ${d.primary};
color: ${d.main};
text-align: center;
`;
function Sr({
header: r,
markAllRead: e
}) {
const {
t: n
} = P();
return /* @__PURE__ */ t.createElement(Nr, { style: r == null ? void 0 : r.markAllReadText, onClick: (a) => {
a.stopPropagation(), e();
} }, n("markAllAsRead"));
}
function sr({
style: r,
tabBadgeComponent: e,
headerRightComponent: n,
showUnreadCountOnTabs: a = !0,
setPopoverOpen: w
}) {
const u = V(), s = F(), o = kr(), {
t: E
} = P(), l = u == null ? void 0 : u.feedOptions.stores, i = !!(l && l.length > 0), T = e, m = n, v = r == null ? void 0 : r.header, C = r == null ? void 0 : r.tabs;
return /* @__PURE__ */ t.createElement(Rr, { style: v == null ? void 0 : v.container }, /* @__PURE__ */ t.createElement(Vr, { hasStores: i }, /* @__PURE__ */ t.createElement(Fr, { style: v == null ? void 0 : v.headerText }, E("notifications")), m ? /* @__PURE__ */ t.createElement(m, { markAllRead: () => u == null ? void 0 : u.markAllAsRead(), closeInboxPopover: () => {
w == null || w(!1);
} }) : /* @__PURE__ */ t.createElement(Sr, { header: v, markAllRead: () => u == null ? void 0 : u.markAllAsRead() })), i && /* @__PURE__ */ t.createElement(Pr, null, l.map((b, y) => {
var A, j;
const f = (s == null ? void 0 : s.store.storeId) === b.storeId, p = (s == null ? void 0 : s.meta[b.storeId]) || 0, _ = a && p > 0, S = f ? C == null ? void 0 : C.bottomColor : "none", k = f ? C == null ? void 0 : C.color : (C == null ? void 0 : C.unselectedColor) || (C == null ? void 0 : C.color), $ = ((j = (A = o == null ? void 0 : o.stores) == null ? void 0 : A.find((R) => R.storeId === b.storeId)) == null ? void 0 : j.label) || b.label;
return /* @__PURE__ */ t.createElement(Or, { style: {
borderBottomColor: S
}, key: y, selected: f, onClick: () => {
u == null || u.changeActiveStore(b.storeId);
} }, /* @__PURE__ */ t.createElement(jr, { selected: f, style: {
...C,
color: k
} }, $), _ && (T ? /* @__PURE__ */ t.createElement(T, { count: p }) : /* @__PURE__ */ t.createElement(Ur, { style: {
backgroundColor: C == null ? void 0 : C.badgeColor,
color: C == null ? void 0 : C.badgeText
} }, /* @__PURE__ */ t.createElement(zr, { count: p }, p))));
})));
}
const Rr = c.div`
position: sticky;
top: 0;
padding: 16px;
padding-bottom: 0px;
z-index: 1000;
background-color: ${d.main};
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
`, Vr = c.div`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: ${(r) => r.hasStores ? "16px" : "0px"};
padding-bottom: ${(r) => r.hasStores ? "0px" : "16px"};
`, Pr = c.div`
display: flex;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
`, Or = c.div`
padding: 5px 15px 3px 15px;
border-bottom: ${(r) => r.selected ? `2px solid ${d.primary}` : "none"};
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
`, jr = c(I)`
font-size: 14px;
font-weight: 600;
color: ${(r) => r.selected ? d.primaryText : d.secondaryText + "D9"};
`, Fr = c(K)`
font-weight: 600;
font-size: 16px;
`, Nr = c(K)`
color: ${d.primary};
font-size: 12px;
cursor: pointer;
`, Ur = c.div`
height: 18px;
width: 20px;
border-radius: 50%;
background-color: rgba(100, 116, 139, 0.09);
display: flex;
align-items: center;
justify-content: center;
color: ${d.primaryText};
`, zr = c.p`
margin: 0px;
padding: 0px;
font-size: ${(r) => (r == null ? void 0 : r.count) > 99 ? "8px" : "10px"};
font-weight: 600;
line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
`;
function dr(r) {
if (r)
return r.startsWith("http") || r.startsWith("/") ? r : `https://${r}`;
}
async function Wr(r) {
if (!r) return !1;
const e = new window.Image();
return e.src = r, new Promise((n) => {
e.onerror = () => n(!1), e.onload = () => n(!0);
});
}
function Zr(r, e, n) {
switch (e) {
case "second":
return `1 ${n("minute")}`;
case "minute":
return r === 1 ? `${r} ${n("minute")}` : `${r} ${n("minutes")}`;
case "hour":
return r === 1 ? `${r} ${n("hour")}` : `${r} ${n("hours")}`;
case "day":
return r === 1 ? `${r} ${n("day")}` : `${r} ${n("days")}`;
case "week":
return r === 1 ? `${r} ${n("week")}` : `${r} ${n("weeks")}`;
case "month":
return r === 1 ? `${r} ${n("month")}` : `${r} ${n("months")}`;
case "year":
return r === 1 ? `${r} ${n("year")}` : `${r} ${n("years")}`;
default:
return r;
}
}
function qr(r, e) {
switch (e) {
case "second":
return "1m";
case "minute":
return `${r}m`;
case "hour":
return `${r}h`;
case "day":
return `${r}d`;
case "week":
return `${r}w`;
case "month":
return `${r}mo`;
case "year":
return `${r}y`;
default:
return r;
}
}
function W(r) {
return r && typeof r == "object" && !Array.isArray(r);
}
function O(r, e) {
const n = Object.assign({}, r);
return r && W(r) && e && W(e) && Object.keys(e).forEach((a) => {
W(e[a]) ? a in r ? n[a] = O(r[a], e[a]) : Object.assign(n, {
[a]: e[a]
}) : Object.assign(n, {
[a]: e[a]
});
}), n;
}
function Kr() {
return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}
function Gr() {
return Kr();
}
var H = /* @__PURE__ */ ((r) => (r.LIGHT = "light", r.DARK = "dark", r))(H || {});
const br = ({
type: r
}) => r === H.DARK ? /* @__PURE__ */ t.createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("circle", { cx: "18", cy: "18", r: "18", fill: "#334155" }), /* @__PURE__ */ t.createElement("path", { d: "M23.8641 14.2836C23.8641 17.3522 21.4556 19.8399 18.4844 19.8399C15.5132 19.8399 13.1047 17.3522 13.1047 14.2836C13.1047 11.215 15.5132 8.72754 18.4844 8.72754C21.4556 8.72754 23.8641 11.215 23.8641 14.2836Z", fill: "#94A3B8" }), /* @__PURE__ */ t.createElement("path", { d: "M23.8643 20.9316H13.1051C11.1039 20.9316 9.37694 22.0734 8.4502 23.75C10.6277 27.0754 14.3128 29.2659 18.4848 29.2659C22.6568 29.2659 26.3418 27.0754 28.5195 23.75C27.5913 22.0734 25.866 20.9316 23.8645 20.9316H23.8643Z", fill: "#94A3B8" })) : /* @__PURE__ */ t.createElement("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("circle", { cx: "18", cy: "18", r: "18", fill: "#CBD5E1" }), /* @__PURE__ */ t.createElement("path", { d: "M23.8641 14.2836C23.8641 17.3522 21.4556 19.8399 18.4844 19.8399C15.5132 19.8399 13.1047 17.3522 13.1047 14.2836C13.1047 11.215 15.5132 8.72754 18.4844 8.72754C21.4556 8.72754 23.8641 11.215 23.8641 14.2836Z", fill: "white" }), /* @__PURE__ */ t.createElement("path", { d: "M23.8643 20.9316H13.1051C11.1039 20.9316 9.37694 22.0734 8.4502 23.75C10.6277 27.0754 14.3128 29.2659 18.4848 29.2659C22.6568 29.2659 26.3418 27.0754 28.5195 23.75C27.5913 22.0734 25.866 20.9316 23.8645 20.9316H23.8643Z", fill: "white" })), Jr = ({
style: r
}) => {
const e = (r == null ? void 0 : r.height) || 20, n = (r == null ? void 0 : r.width) || 20, a = (r == null ? void 0 : r.color) || d.secondaryText;
return /* @__PURE__ */ t.createElement("svg", { width: n, height: e, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("path", { d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z", stroke: a, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ t.createElement("path", { d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z", stroke: a, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ t.createElement("path", { d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z", stroke: a, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
}, Qr = ({
style: r
}) => {
const e = (r == null ? void 0 : r.height) || 13, n = (r == null ? void 0 : r.width) || 13, a = (r == null ? void 0 : r.color) || "#DC6803";
return /* @__PURE__ */ t.createElement("svg", { width: n, height: e, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("path", { d: "M7.58984 2.9305C7.38193 2.44536 7.27797 2.2028 7.10998 2.09261C6.96308 1.99626 6.78408 1.96179 6.6119 1.99669C6.415 2.03661 6.22839 2.22321 5.85518 2.59643L2.42642 6.02519C2.0532 6.39841 1.86659 6.58502 1.82668 6.78191C1.79177 6.95409 1.82624 7.13309 1.9226 7.28C2.03278 7.44799 2.27535 7.55194 2.76048 7.75986L4.42339 8.47253C4.49393 8.50277 4.5292 8.51788 4.56228 8.53678C4.59166 8.55356 4.61972 8.57256 4.64622 8.59361C4.67605 8.6173 4.70318 8.64444 4.75745 8.69871L5.79805 9.7393C5.88293 9.82418 5.92537 9.86662 5.95909 9.91498C5.98903 9.9579 6.0138 10.0042 6.03291 10.0529C6.05444 10.1078 6.06621 10.1666 6.08975 10.2844L6.57835 12.7273C6.70532 13.3622 6.76881 13.6796 6.93618 13.8281C7.08198 13.9575 7.27711 14.0166 7.47019 13.9898C7.69183 13.9591 7.92074 13.7302 8.37855 13.2724L13.1024 8.54856C13.5602 8.09075 13.7891 7.86185 13.8198 7.64021C13.8466 7.44713 13.7875 7.252 13.6581 7.10619C13.5096 6.93882 13.1922 6.87534 12.5573 6.74836L10.1143 6.25977C9.99663 6.23622 9.93777 6.22445 9.88289 6.20293C9.83418 6.18382 9.78788 6.15904 9.74496 6.12911C9.69661 6.09538 9.65416 6.05294 9.56928 5.96806L8.52869 4.92747C8.47442 4.8732 8.44729 4.84606 8.42359 4.81624C8.40255 4.78974 8.38355 4.76168 8.36676 4.73229C8.34787 4.69922 8.33275 4.66395 8.30252 4.5934L7.58984 2.9305Z", fill: a }), /* @__PURE__ */ t.createElement("path", { d: "M10.7405 10.9105L14.5117 14.6817M8.52869 4.92747L9.56928 5.96806C9.65416 6.05294 9.69661 6.09538 9.74496 6.12911C9.78788 6.15904 9.83418 6.18382 9.88289 6.20293C9.93777 6.22445 9.99663 6.23622 10.1143 6.25977L12.5573 6.74836C13.1922 6.87534 13.5096 6.93882 13.6581 7.10619C13.7875 7.252 13.8466 7.44713 13.8198 7.64021C13.7891 7.86185 13.5602 8.09075 13.1024 8.54856L8.37855 13.2724C7.92074 13.7302 7.69183 13.9591 7.47019 13.9898C7.27711 14.0166 7.08198 13.9575 6.93618 13.8281C6.76881 13.6796 6.70532 13.3622 6.57835 12.7273L6.08975 10.2844C6.06621 10.1666 6.05444 10.1078 6.03291 10.0529C6.0138 10.0042 5.98903 9.9579 5.95909 9.91498C5.92537 9.86662 5.88293 9.82418 5.79805 9.7393L4.75745 8.69871C4.70318 8.64444 4.67605 8.6173 4.64622 8.59361C4.61972 8.57256 4.59166 8.55356 4.56228 8.53678C4.5292 8.51788 4.49393 8.50277 4.42339 8.47253L2.76048 7.75986C2.27535 7.55194 2.03278 7.44799 1.9226 7.28C1.82624 7.13309 1.79177 6.95409 1.82668 6.78191C1.86659 6.58502 2.0532 6.39841 2.42642 6.02519L5.85517 2.59643C6.22839 2.22321 6.415 2.03661 6.6119 1.99669C6.78408 1.96179 6.96308 1.99626 7.10998 2.09261C7.27797 2.2028 7.38193 2.44536 7.58984 2.9305L8.30252 4.5934C8.33275 4.66395 8.34787 4.69922 8.36676 4.73229C8.38355 4.76168 8.40255 4.78974 8.42359 4.81624C8.44729 4.84606 8.47442 4.8732 8.52869 4.92747Z", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }));
}, Xr = ({
style: r
}) => {
const e = (r == null ? void 0 : r.height) || 16, n = (r == null ? void 0 : r.width) || 16, a = (r == null ? void 0 : r.color) || d.primaryText;
return /* @__PURE__ */ t.createElement("svg", { width: n, height: e, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.416 3H4.00013C2.34327 3 1.00013 4.34315 1.00013 6V6.98313C0.999958 6.99375 0.999958 7.00437 1.00013 7.01499V18C1.00013 19.6569 2.34327 21 4.00013 21H20.0001C21.657 21 23.0001 19.6569 23.0001 18V9.21078H21.0001V18C21.0001 18.5523 20.5524 19 20.0001 19H4.00013C3.44784 19 3.00013 18.5523 3.00013 18V8.82027L10.4338 13.544L10.4392 13.5474C10.9071 13.8405 11.448 13.996 12.0001 13.996C12.5522 13.996 13.0932 13.8405 13.5611 13.5474L13.5665 13.544L19.5 9.21078H16.5L12.4992 11.8526L12.497 11.854C12.3479 11.9468 12.1758 11.996 12.0001 11.996C11.8245 11.996 11.6524 11.9468 11.5033 11.854L3.00013 6.45063V6C3.00013 5.44772 3.44784 5 4.00013 5H14.416V3Z", fill: a }), /* @__PURE__ */ t.createElement("circle", { cx: "20", cy: "4", r: "4", fill: a }));
}, Yr = ({
style: r
}) => {
const e = (r == null ? void 0 : r.height) || 16, n = (r == null ? void 0 : r.width) || 16, a = (r == null ? void 0 : r.color) || d.primaryText;
return /* @__PURE__ */ t.createElement("svg", { width: n, height: e, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("path", { d: "M14.1334 6.26471C14.4667 6.51805 14.6667 6.91138 14.6667 7.33138V13.998C14.6667 14.3517 14.5262 14.6908 14.2762 14.9409C14.0261 15.1909 13.687 15.3314 13.3334 15.3314H2.66671C2.31309 15.3314 1.97395 15.1909 1.7239 14.9409C1.47385 14.6908 1.33337 14.3517 1.33337 13.998V7.33138C1.33337 7.12439 1.38157 6.92024 1.47414 6.7351C1.56671 6.54995 1.70111 6.38891 1.86671 6.26471L7.20004 2.26471C7.43084 2.09162 7.71155 1.99805 8.00004 1.99805C8.28853 1.99805 8.56925 2.09162 8.80004 2.26471L14.1334 6.26471Z", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ t.createElement("path", { d: "M14.6667 7.33105L8.68668 11.1311C8.48086 11.26 8.24289 11.3284 8.00001 11.3284C7.75713 11.3284 7.51916 11.26 7.31334 11.1311L1.33334 7.33105", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }));
}, Dr = ({
style: r
}) => {
const e = (r == null ? void 0 : r.height) || 17, n = (r == null ? void 0 : r.width) || 16, a = (r == null ? void 0 : r.color) || d.secondaryText;
return /* @__PURE__ */ t.createElement("svg", { width: n, height: e, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ t.createElement("path", { d: "M14 2.33789H1.99998C1.63179 2.33789 1.33331 2.63637 1.33331 3.00456V5.00456C1.33331 5.37275 1.63179 5.67122 1.99998 5.67122H14C14.3682 5.67122 14.6666 5.37275 14.6666 5.00456V3.00456C14.6666 2.63637 14.3682 2.33789 14 2.33789Z", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ t.createElement("path", { d: "M2.66669 5.67188V13.0052C2.66669 13.3588 2.80716 13.698 3.05721 13.948C3.30726 14.1981 3.6464 14.3385 4.00002 14.3385H12C12.3536 14.3385 12.6928 14.1981 12.9428 13.948C13.1929 13.698 13.3334 13.3588 13.3334 13.0052V5.67188", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ t.createElement("path", { d: "M6.66669 8.33789H9.33335", stroke: a, strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }));
};
function re({
dateInput: r,
style: e
}) {
const [, n] = B(Date.now()), {
t: a
} = P();
if (M(() => {
const s = setInterval(() => n(Date.now()), 1e4);
return () => {
clearInterval(s);
};
}, []), typeof r != "number") return;
const w = r - Date.now() <= 36e5, u = Date.now() >= r;
return /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(le, { style: {
...e,
color: w ? (e == null ? void 0 : e.expiringColor) || d.error : (e == null ? void 0 : e.color) || d.secondaryText,
backgroundColor: w ? (e == null ? void 0 : e.expiringBackgroundColor) || "rgba(217, 45, 32, 0.09)" : (e == null ? void 0 : e.backgroundColor) || "rgba(100, 116, 139, 0.09)"
} }, a("expiresIn"), " ", u ? "a minute" : /* @__PURE__ */ t.createElement(mr, { date: r, live: !1, formatter: (s, o) => Zr(s, o, a) })));
}
function gr({
body: r,
handleActionClick: e,
style: n,
disableMarkdown: a
}) {
var o, E;
const w = (n == null ? void 0 : n.tableBorderColor) || "rgba(100, 116, 139, 0.3)", u = (n == null ? void 0 : n.blockquoteColor) || "rgba(100, 116, 139, 0.3)", s = (n == null ? void 0 : n.linkColor) || d.primary;
return /* @__PURE__ */ t.createElement(de, { style: n }, a ? r : /* @__PURE__ */ t.createElement(Lr, { remarkPlugins: [Ar], rehypePlugins: [Br], components: {
a({
children: l,
href: i,
style: T
}) {
return /* @__PURE__ */ t.createElement("span", { onClick: (m) => {
m.preventDefault(), e == null || e(m, {
type: "markdown_link",
url: i
});
}, style: {
color: s,
textDecoration: "none",
...T || {}
} }, l);
},
p({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("p", { style: {
margin: 0,
overflowWrap: "anywhere",
...i || {}
} }, l);
},
blockquote({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("blockquote", { style: {
margin: 0,
paddingLeft: 10,
borderLeft: `3px ${u} solid`,
marginBottom: 5,
marginTop: 5,
...i || {}
} }, l);
},
ul({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("ul", { style: {
whiteSpace: "normal",
margin: 0,
paddingLeft: 10,
...i || {}
} }, l);
},
ol({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("ol", { style: {
whiteSpace: "normal",
margin: 0,
paddingLeft: 10,
...i || {}
} }, l);
},
img(l) {
return /* @__PURE__ */ t.createElement("img", { style: {
maxWidth: "100%",
objectFit: "contain",
...(l == null ? void 0 : l.style) || {}
}, ...l });
},
table({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("table", { style: {
overflowWrap: "break-word",
borderCollapse: "collapse",
...i || {}
} }, l);
},
th({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("th", { style: {
textAlign: "left",
whiteSpace: "nowrap",
border: `1px solid ${w}`,
padding: 5,
...i || {}
} }, l);
},
td({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("td", { style: {
border: `1px solid ${w}`,
padding: 5,
...i || {}
} }, l);
},
h1({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h1", { style: {
margin: 0,
...i || {}
} }, l);
},
h2({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h2", { style: {
margin: 0,
...i || {}
} }, l);
},
h3({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h3", { style: {
margin: 0,
...i || {}
} }, l);
},
h4({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h4", { style: {
margin: 0,
...i || {}
} }, l);
},
h5({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h5", { style: {
margin: 0,
...i || {}
} }, l);
},
h6({
children: l,
style: i
}) {
return /* @__PURE__ */ t.createElement("h6", { style: {
margin: 0,
...i || {}
} }, l);
},
script() {
return null;
},
link() {
return null;
}
} }, (E = (o = r == null ? void 0 : r.replaceAll(`\\
`, " ")) == null ? void 0 : o.replaceAll(`
`, `
`)) == null ? void 0 : E.replaceAll(" ", `
`)));
}
function ee({
notificationData: r,
handleActionClick: e,
notificationComponent: n,
hideAvatar: a,
themeType: w,
primaryActionClickHandler: u,
secondaryActionClickHandler: s,
theme: o,
disableMarkdown: E
}) {
var J, Q, X, Y, D, rr, er, tr, or, nr, ar, cr, lr, ir;
const [l, i] = B(!1), [T, m] = B(!1), [v, C] = B(!1), b = V(), y = F(), {
t: f
} = P(), {
message: p,
read_on: _,
created_on: S
} = r, k = y == null ? void 0 : y.notifications, $ = (J = p == null ? void 0 : p.actions) == null ? void 0 : J[0], A = (Q = p == null ? void 0 : p.actions) == null ? void 0 : Q[1], j = $ || A, R = k != null && k.length ? k[k.length - 1] : null, Er = (R == null ? void 0 : R.n_id) === r.n_id;
M(() => {
var g;
Wr((g = p == null ? void 0 : p.avatar) == null ? void 0 : g.avatar_url).then((L) => i(L));
}, [r]);
const G = hr(Gr, []);
if (n) {
const h = n;
return /* @__PURE__ */ t.createElement(h, { notificationData: r, markAsRead: (g) => {
var L;
return (L = g == null ? void 0 : g.stopPropagation) == null || L.call(g), b == null ? void 0 : b.markAsRead(r.n_id);
}, markAsUnread: (g) => {
var L;
return (L = g == null ? void 0 : g.stopPropagation) == null || L.call(g), b == null ? void 0 : b.markAsUnread(r.n_id);
}, markAsArchived: (g) => {
var L;
return (L = g == null ? void 0 : g.stopPropagation) == null || L.call(g), b == null ? void 0 : b.markAsArchived(r.n_id);
}, markAsInteracted: (g) => {
var L;
return (L = g == null ? void 0 : g.stopPropagation) == null || L.call(g), b == null ? void 0 : b.markAsInteracted(r.n_id);
} });
}
return /* @__PURE__ */ t.createElement(te, { style: o == null ? void 0 : o.container, read: !!_, onMouseEnter: () => {
m(!0), C(!1);
}, onMouseLeave: () => {
m(!1), C(!1);
}, onClick: (h) => {
v && (h.stopPropagation(), C(!1));
} }, r.is_pinned && /* @__PURE__ */ t.createElement(oe, { hideAvatar: a }, /* @__PURE__ */ t.createElement(Qr, { style: o == null ? void 0 : o.pinnedIcon }), /* @__PURE__ */ t.createElement(ne, { style: o == null ? void 0 : o.pinnedText }, f("pinned"))), /* @__PURE__ */ t.createElement(ie, null, /* @__PURE__ */ t.createElement(ge, null, /* @__PURE__ */ t.createElement(Ce, null, /* @__PURE__ */ t.createElement(ue, { style: o == null ? void 0 : o.unseenDot, show: !_ }), !a && /* @__PURE__ */ t.createElement(we, { onClick: (h) => {
const g = p == null ? void 0 : p.avatar;
e(h, {
type: "avatar",
url: g == null ? void 0 : g.action_url
});
} }, (X = p == null ? void 0 : p.avatar) != null && X.avatar_url && l ? /* @__PURE__ */ t.createElement(ve, { src: p.avatar.avatar_url, alt: "avatar", style: o == null ? void 0 : o.avatar }) : /* @__PURE__ */ t.createElement(br, { type: w }))), /* @__PURE__ */ t.createElement(Ee, null, p.header && /* @__PURE__ */ t.createElement(se, { style: o == null ? void 0 : o.headerText }, p.header), /* @__PURE__ */ t.createElement(gr, { body: p.text, handleActionClick: e, style: o == null ? void 0 : o.bodyText, disableMarkdown: E }), !!((Y = p == null ? void 0 : p.subtext) != null && Y.text) && /* @__PURE__ */ t.createElement(ce, { link: (D = p == null ? void 0 : p.subtext) == null ? void 0 : D.action_url, onClick: (h) => {
const g = p == null ? void 0 : p.subtext;
e(h, {
type: "subtext",
url: g == null ? void 0 : g.action_url
});
} }, /* @__PURE__ */ t.createElement(ae, { style: o == null ? void 0 : o.subtext }, p.subtext.text)), r.expiry && (r == null ? void 0 : r.is_expiry_visible) && /* @__PURE__ */ t.createElement(re, { dateInput: r.expiry, style: o == null ? void 0 : o.expiresText }), j && /* @__PURE__ */ t.createElement(xe, null, $ && /* @__PURE__ */ t.createElement(Cr, { style: (er = (rr = o == null ? void 0 : o.actions) == null ? void 0 : rr[0]) == null ? void 0 : er.container, onClick: (h) => {
e(h, {
type: "primary_action_button",
url: $.url,
target: $.open_in_new_tab,
customClickHandler: u
});
} }, /* @__PURE__ */ t.createElement(wr, { style: (or = (tr = o == null ? void 0 : o.actions) == null ? void 0 : tr[0]) == null ? void 0 : or.text }, $.name)), A && /* @__PURE__ */ t.createElement(me, { style: (ar = (nr = o == null ? void 0 : o.actions) == null ? void 0 : nr[1]) == null ? void 0 : ar.container, onClick: (h) => {
e(h, {
type: "secondary_action_button",
url: A.url,
target: A.open_in_new_tab,
customClickHandler: s
});
} }, /* @__PURE__ */ t.createElement(be, { style: (lr = (cr = o == null ? void 0 : o.actions) == null ? void 0 : cr[1]) == null ? void 0 : lr.text }, A.name))))), /* @__PURE__ */ t.createElement(ke, null, /* @__PURE__ */ t.createElement(pe, { style: o == null ? void 0 : o.createdOnText }, /* @__PURE__ */ t.createElement(mr, { date: S, live: !1, formatter: qr })), /* @__PURE__ */ t.createElement($e, { showMore: T || G }, /* @__PURE__ */ t.createElement(Te, { hoverBGColor: (ir = o == null ? void 0 : o.actionsMenuIcon) == null ? void 0 : ir.hoverBackgroundColor, isPlatformMobile: G, onClick: (h) => {
h.stopPropagation(), C((g) => !g);
} }, /* @__PURE__ */ t.createElement(Jr, { style: o == null ? void 0 : o.actionsMenuIcon })), /* @__PURE__ */ t.createElement(he, { moreOpen: v, style: o == null ? void 0 : o.actionsMenu, isLastNotification: Er }, r.read_on ? /* @__PURE__ */ t.createElement(Z, { style: o == null ? void 0 : o.actionsMenuItem, onClick: async (h) => (h.stopPropagation(), C(!1), b == null ? void 0 : b.markAsUnread(r.n_id)) }, /* @__PURE__ */ t.createElement(Xr, { style: o == null ? void 0 : o.actionsMenuItemIcon }), /* @__PURE__ */ t.createElement(q, { style: o == null ? void 0 : o.actionsMenuItemText }, f("markAsUnread"))) : /* @__PURE__ */ t.createElement(Z, { style: o == null ? void 0 : o.actionsMenuItem, onClick: (h) => (h.stopPropagation(), C(!1), b == null ? void 0 : b.markAsRead(r.n_id)) }, /* @__PURE__ */ t.createElement(Yr, { style: o == null ? void 0 : o.actionsMenuItemIcon }), /* @__PURE__ */ t.createElement(q, { style: o == null ? void 0 : o.actionsMenuItemText }, f("markAsRead"))), !(r != null && r.archived) && /* @__PURE__ */ t.createElement(Z, { style: o == null ? void 0 : o.actionsMenuItem, onClick: (h) => (h.stopPropagation(), b == null ? void 0 : b.markAsArchived(r.n_id)) }, /* @__PURE__ */ t.createElement(Dr, { style: o == null ? void 0 : o.actionsMenuItemIcon }), /* @__PURE__ */ t.createElement(q, { style: o == null ? void 0 : o.actionsMenuItemText }, f("archive"))))))));
}
const te = c.div`
padding: 16px;
cursor: pointer;
background-color: ${(r) => {
var e, n;
return r.read ? ((e = r == null ? void 0 : r.style) == null ? void 0 : e.readBackgroundColor) || d.main : ((n = r == null ? void 0 : r.style) == null ? void 0 : n.unreadBackgroundColor) || "#edf3ff";
}};
border-bottom: 0.5px solid ${d.border};
&:hover {
background-color: ${(r) => {
var e;
return ((e = r == null ? void 0 : r.style) == null ? void 0 : e.hoverBackgroundColor) || "#DBE7FF";
}}
`, oe = c.div`
display: flex;
align-items: center;
margin-left: ${(r) => r.hideAvatar ? "0px" : "52px"};
gap: 4px;
`, ne = c(N)``, ae = c(N)`
color: #64748b;
`, ce = c.div`
text-decoration: none;
overflow-wrap: anywhere;
display: inline-block;
&:hover {
text-decoration: ${(r) => r.link ? "underline" : "none"};
text-decoration-color: ${d.secondaryText};
}
`, le = c(N)`
margin-top: 8px;
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
`, ie = c.div`
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
`, se = c(I)`
margin: 8px 0px 0px 0px;
overflow-wrap: anywhere;
line-height: 18px;
font-weight: 700;
`, de = c.div`
font-size: 14px;
line-height: 20px;
margin: 8px 0px 6px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
color: ${d.secondaryText};
`, ue = c.div`
background-color: ${d.primary};
border-radius: 50%;
width: 7px;
height: 7px;
visibility: ${(r) => r.show ? "visible" : "hidden"};
`, pe = c(N)``, xe = c.div`
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 6px;
margin-top: 12px;
overflow-wrap: anywhere;
`, Cr = c.div`
max-width: 50%;
background: ${d.primary};
border-radius: 5px;
text-decoration: none;
padding: 4px 16px;
&:hover {
background-color: ${(r) => {
var e;
return ((e = r.style) == null ? void 0 : e.hoverBackgroundColor) || "#265cbf";
}} !important;
}
`, wr = c(I)`
color: ${d.main};
text-align: center;
word-break: break-all;
font-weight: 600;
font-size: 13px;
`, me = c(Cr)`
background: ${d.main};
border-color: ${d.border};
border-style: solid;
border-width: 1.2px;
&:hover {
background-color: ${(r) => {
var e;
return ((e = r.style) == null ? void 0 : e.hoverBackgroundColor) || "#f7f7f9";
}} !important;
}
`, be = c(wr)`
color: ${d.secondaryText};
`, ge = c.div`
display: flex;
overflow-wrap: anywhere;
flex-grow: 1;
`, Ce = c.div`
display: flex;
margin-top: 8px;
margin-right: 12px;
`, we = c.div``, Ee = c.div`
flex: 1;
`, ke = c.div`
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
max-width: 40px;
gap: 5px;
`, ve = c.img`
height: 36px;
width: 36px;
border-radius: 100px;
`, he = c.div`
position: absolute;
right: ${(r) => r.isLastNotification ? "25px" : "0px"};
bottom: ${(r) => r.isLastNotification ? "-12.5px" : "auto"};
display: ${(r) => r.moreOpen ? "block" : "none"};
min-width: 150px;
padding: 2px;
background-color: ${d.main};
border: 1px solid;
border-color: ${d.border};
border-radius: 4px;
box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.1);
z-index: 100;
`, Z = c.div`
padding: 7px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
&:hover {
background-color: ${(r) => {
var e;
return ((e = r == null ? void 0 : r.style) == null ? void 0 : e.hoverBackgroundColor) || "rgba(100, 116, 139, 0.09)";
}};
}
`, q = c(I)``, $e = c.div`
position: relative;
visibility: ${(r) => r != null && r.showMore ? "visible" : "hidden"};
`, Te = c.div`
height: 20px;
width: 20px;
&:hover {
border-radius: 50%;
background-color: ${(r) => r != null && r.isPlatformMobile ? "none" : (r == null ? void 0 : r.hoverBGColor) || "rgba(100, 116, 139, 0.09)"};
}
`;
function ye(r = {}) {
const {
threshold: e = 1,
root: n = null,
rootMargin: a = "0px",
enable: w
} = r, [u, s] = B(null), o = xr(null);
return [$r((l) => {
if (w && (o.current && (o.current.disconnect(), o.current = null), (l == null ? void 0 : l.nodeType) === Node.ELEMENT_NODE)) {
const i = new IntersectionObserver(([T]) => {
s(T), T.isIntersecting && i.unobserve(T.target);
}, {
threshold: e,
root: n,
rootMargin: a
});
i.observe(l), o.current = i;
}
}, [e, n, a]), u];
}
function ur(r) {
return r ? "_blank" : "_self";
}
function fe({
notificationData: r,
notificationClickHandler: e,
notificationComponent: n,
hideAvatar: a,
themeType: w,
primaryActionClickHandler: u,
secondaryActionClickHandler: s,
theme: o,
scrollRef: E,
setUnseenNotifications: l,
unseenNotifications: i,
enableIntersectionObserver: T,
disableMarkdown: m
}) {
const v = V(), [C, b] = ye({
threshold: 1,
root: E == null ? void 0 : E.current,
rootMargin: "0px",
enable: T
});
M(() => {
b != null && b.isIntersecting && !r.seen_on && i && !(i != null && i.includes(r.n_id)) && (l == null || l((k) => [...k, r.n_id]));
}, [b == null ? void 0 : b.isIntersecting]);
const y = () => {
if (typeof e == "function")
e(r);
else {
const k = r == null ? void 0 : r.message;
if (k != null && k.url) {
const $ = ur(k == null ? void 0 : k.open_in_new_tab);
window.open(dr(k.url), $);
}
}
}, f = () => v == null ? void 0 : v.markAsInteracted(r.n_id), p = async (k) => {
k.stopPropagation(), await f(), y();
}, _ = async (k, $) => {
k.stopPropagation();
const A = ur($ == null ? void 0 : $.target);
await f(), $.customClickHandler ? $.customClickHandler(r) : $ != null && $.url ? window.open(dr($.url), A) : y();
}, S = w === H.DARK ? O(U, o) : o || {};
return /* @__PURE__ */ t.createElement("div", { onClick: p, ref: C }, /* @__PURE__ */ t.createElement(ee, { notificationData: r, handleActionClick: _, notificationComponent: n, hideAvatar: a, themeType: w, primaryActionClickHandler: u, secondaryActionClickHandler: s, theme: S, disableMarkdown: m }));
}
function ct({
notificationData: r,
hideAvatar: e,
themeType: n,
theme: a,
disableMarkdown: w
}) {
var o, E;
const u = r.message, s = n === H.DARK ? O(U.toast, a) : a || {};
return /* @__PURE__ */ t.createElement(Le, { style: s == null ? void 0 : s.container }, /* @__PURE__ */ t.createElement(Ae, null, !e && /* @__PURE__ */ t.createElement(Be, null, (o = u == null ? void 0 : u.avatar) != null && o.avatar_url ? /* @__PURE__ */ t.createElement(Ie, { src: u.avatar.avatar_url, alt: "avatar", style: s == null ? void 0 : s.avatar }) : /* @__PURE__ */ t.createElement(br, { type: n }))), /* @__PURE__ */ t.createElement(Me, null, u.header && /* @__PURE__ */ t.createElement(_e, { style: s == null ? void 0 : s.headerText }, u.header), /* @__PURE__ */ t.createElement(gr, { body: ((E = r == null ? void 0 : r.message) == null ? void 0 : E.text) || "", style: s == null ? void 0 : s.bodyText, disableMarkdown: w })));
}
const Le = c.div`
display: flex;
overflow-wrap: anywhere;
flex-grow: 1;
background-color: ${d.main};
`, Ae = c.div`
display: flex;
margin-top: 8px;
margin-right: 12px;
`, Be = c.div``, Ie = c.img`
height: 36px;
width: 36px;
border-radius: 100px;
`, Me = c.div`
flex: 1;
`, _e = c(I)`
margin: 8px 0px 0px 0px;
overflow-wrap: anywhere;
line-height: 18px;
font-weight: 700;
`, He = (r, e) => {
const [n, a] = B(r);
return M(() => {
const w = setTimeout(() => {
a(r);
}, e);
return () => {
clearTimeout(w);
};
}, [r, e]), n;
};
function pr({
style: r,
size: e
}) {
const n = r == null ? void 0 : r.color;
return /* @__PURE__ */ t.createElement(We, null, /* @__PURE__ */ t.createElement(ze, { style: r, color: n, size: e }));
}
function Se({
noNotificationsComponent: r,
notificationsContainer: e
}) {
const {
t: n
} = P();
if (r) {
const a = r;
return /* @__PURE__ */ t.createElement(a, null);
}
return /* @__PURE__ */ t.createElement(Oe, null, /* @__PURE__ */ t.createElement(je, { style: e == null ? void 0 : e.noNotificationsText }, n("noNotificationsTitle")), /* @__PURE__ */ t.createElement(Fe, { style: e == null ? void 0 : e.noNotificationsSubtext }, n("noNotificationsDescription")));
}
function Re(r) {
const e = F(), n = V(), a = xr(), [w, u] = B([]), s = He(w, 1e3);
M(() => {
const m = s;
if (m != null && m.length) {
n == null || n.markBulkAsSeen(m);
const v = w.filter((C) => !m.includes(C));
u(v);
}
}, [s]);
const o = (r == null ? void 0 : r.themeType) === H.DARK ? O(U, r.theme) : r.theme || {}, E = o == null ? void 0 : o.notificationsContainer, l = r.pagination !== !1, i = r == null ? void 0 : r.loaderComponent, T = r != null && r.popover ? Ve : Pe;
return M(() => {
var C;
const m = document.getElementById("ss-notification-container"), v = (C = e == null ? void 0 : e.pageInfo) == null ? void 0 : C.hasMore;
m != null && m.scrollHeight && (m != null && m.clientHeight) && (m == null ? void 0 : m.scrollHeight) <= (m == null ? void 0 : m.clientHeight) && v && l && (n == null || n.fetchNextPage());
}, [e]), e ? /* @__PURE__ */ t.createElement(T, { style: E == null ? void 0 : E.container, id: "ss-notification-container" }, /* @__PURE__ */ t.createElement(sr, { style: {
header: o == null ? void 0 : o.header,
tabs: o == null ? void 0 : o.tabs
}, headerRightComponent: r.headerRightComponent, showUnreadCountOnTabs: r.showUnreadCountOnTabs, tabBadgeComponent: r.tabBadgeComponent, setPopoverOpen: r == null ? void 0 : r.setPopoverOpen }), (e == null ? void 0 : e.apiStatus) === z.LOADING && /* @__PURE__ */ t.createElement(Ze, null, /* @__PURE__ */ t.createElement(pr, { size: "large", style: E == null ? void 0 : E.loader })), ((e == null ? void 0 : e.apiStatus) === z.ERROR || (e == null ? void 0 : e.apiStatus) === z.SUCCESS && !(e != null && e.notifications.length)) && /* @__PURE__ */ t.createElement(Se, { noNotificationsComponent: r == null ? void 0 : r.noNotificationsComponent, notificationsContainer: E }), (e == null ? void 0 : e.notifications.length) > 0 && /* @__PURE__ */ t.createElement(Ne, null, /* @__PURE__ */ t.createElement(fr, { scrollableTarget: "ss-notification-container", dataLength: e == null ? void 0 : e.notifications.length, next: () => n == null ? void 0 : n.fetchNextPage(), hasMore: l && (e == null ? void 0 : e.pageInfo.hasMore), loader: i ? /* @__PURE__ */ t.createElement(i, null) : /* @__PURE__ */ t.createElement(pr, { style: E == null ? void 0 : E.loader }) }, e.notifications.map((m) => /* @__PURE__ */ t.createElement(fe, { scrollRef: a, key: m.n_id, notificationData: m, notificationClickHandler: r.notificationClickHandler, primaryActionClickHandler: r.primaryActionClickHandler, secondaryActionClickHandler: r.secondaryActionClickHandler, theme: o == null ? void 0 : o.notification, hideAvatar: r.hideAvatar, notificationComponent: r.notificationComponent, themeType: r.themeType, setUnseenNotifications: u, unseenNotifications: w, enableIntersectionObserver: !0, disableMarkdown: r.disableMarkdown }))))) : /* @__PURE__ */ t.createElement(T, { style: E == null ? void 0 : E.container, id: "ss-notification-container" }, /* @__PURE__ */ t.createElement(sr, { style: {
header: o == null ? void 0 : o.header,
tabs: o == null ? void 0 : o.tabs
}, headerRightComponent: r.headerRightComponent, showUnreadCountOnTabs: r.showUnreadCountOnTabs, tabBadgeComponent: r.tabBadgeComponent, setPopoverOpen: r == null ? void 0 : r.setPopoverOpen }));
}
const Ve = c.div`
height: 500px;
width: 450px;
margin: 0px 15px;
border-radius: 5px;
background-color: ${d.main};
border: 1px solid ${d.border};
display: inline-block;
overflow: auto;
box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.1);
@media (max-width: 425px) {
width: 99.5vw;
margin: 0px;
border-radius: 0px;
}
scrollbar-color: ${(r) => {
var e;
return "rgba(120, 120, 120, 0.6) " + (((e = r == null ? void 0 : r.style) == null ? void 0 : e.backgroundColor) || d.main);
}};
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(120, 120, 120, 0.6);
border-radius: 8px;
}
&::-webkit-scrollbar-track {
background-color: ${(r) => {
var e;
return ((e = r == null ? void 0 : r.style) == null ? void 0 : e.backgroundColor) || d.main;
}};
}
`, Pe = c.div`
overflow: auto;
background-color: ${d.main};
scrollbar-color: ${(r) => {
var e;
return "rgba(120, 120, 120, 0.6) " + (((e = r == null ? void 0 : r.style) == null ? void 0 : e.backgroundColor) || d.main);
}};
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(120, 120, 120, 0.6);
border-radius: 8px;
}
&::-webkit-scrollbar-track {
background-color: ${(r) => {
var e;
return ((e = r == null ? void 0 : r.style) == null ? void 0 : e.backgroundColor) || d.main;
}};
}
`, Oe = c.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 32px;
margin-top: 40px;
`, je = c(K)`
font-weight: 600;
text-align: center;
background-color: transparent;
margin: 20px 0px;
margin-bottom: 16px;
color: ${d.primaryText};
`, Fe = c(I)`
color: ${d.secondaryText};
text-align: center;
`, Ne = c.div``, Ue = yr`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`, ze = c.div`
border: ${(r) => r.size === "large" ? `5px solid ${d.border}` : `3px solid ${d.border}`};
border-top: ${(r) => r.size === "large" ? "5px solid" : "3px solid"};
border-top-color: ${(r) => r.color ? r.color : d.primary};
border-radius: 50%;
width: ${(r) => r.size === "large" ? "20px" : "10px"};
height: ${(r) => r.size === "large" ? "20px" : "10px"};
animation: ${Ue} 1s linear infinite;
margin: 5px;
`, We = c.div`
display: flex;
justify-content: center;
align-items: center;
`, Ze = c.div`
margin-top: 32px;
`;
function qe(r, e) {
M(() => {
let n = !1, a = !1;
const w = (s) => {
n || !a || !r.current || r.current.contains(s.target) || e(s);
}, u = (s) => {
a = !!r.current, n = !!(r.current && r.current.contains(s.target));
};
return document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), document.addEventListener("click", w), () => {
document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u), document.removeEventListener("click", w);
};
}, [r, e]);
}
function Ke({
bellComponent: r,
badgeComponent: e,
popperPosition: n = "bottom",
theme: a,
...w
}) {
var f;
const [u, s] = B(null), [o, E] = B(null), l = V(), i = F(), [T, m] = B(!1);
qe({
current: o
}, () => {
m((p) => !p);
});
const {
styles: v,
attributes: C
} = Tr(u, o, {
placement: n,
modifiers: [{
name: "offset",
options: {
offset: [0, 5]
}
}]
}), b = () => {
m((p) => !p), l == null || l.resetBadgeCount();
}, y = (w == null ? void 0 : w.themeType) === H.DARK ? O(U, a) : a || {};
return /* @__PURE__ */ t.createElement(Ge, null, /* @__PURE__ */ t.createElement(Je, { onClick: b, ref: s }, /* @__PURE__ */ t.createElement(_r, { count: ((f = i == null ? void 0 : i.meta) == null ? void 0 : f.badge) || 0, badgeComponent: e, style: y == null ? void 0 : y.badge }), /* @__PURE__ */ t.createElement(Mr, { bellComponent: r, style: y == null ? void 0 : y.bell })), T && /* @__PURE__ */ t.createElement("div", { ref: E, style: {
...v.popper,
zIndex: 999
}, ...C.popper }, /* @__PURE__ */ t.createElement(Re, { ...w, theme: y, popover: !0, setPopoverOpen: m })));
}
const Ge = c.div`
position: relative;
display: inline-block;
background-color: transparent;
line-height: 1;
`, Je = c.div`
position: relative;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
`;
function lt(r) {
const {
tenantId: e = "default",
pageSize: n = 20,
stores: a,
host: w,
children: u
} = r, s = {
tenantId: e,
pageSize: n,
stores: a,
host: w
};
return /* @__PURE__ */ t.createElement(vr, { ...s }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(Ke, { ...r }), u));
}
export {
gr as BodyMarkdown,
lt as Inbox,
fe as NotificationCard,
Re as NotificationFeed,
H as ThemeType,
ct as ToastNotificationCard
};
//# sourceMappingURL=index.js.map