@ludo.ninja/components 2.3.6 → 2.3.8

package/build/api/subscriptions/SubscriberOpportunityNotification.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubscriberOpportunityNotification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("@apollo/client");
+const api_1 = require("@ludo.ninja/api");
+const notifications_1 = require("../../modules/notifications");
+const store_1 = require("../../modules/user/store");
+const env_1 = require("../../store/env");
+const ui_1 = require("../../store/ui");
+const Subscription = () => {
+    const { authToken } = api_1.authCookies.getCookies();
+    const addNotification = (0, ui_1.useUiStore)((state) => state.addNotification);
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    (0, client_1.useSubscription)(api_1.experiencesSchema.OnUserOpportunityNotificationDocument, {
+        variables: { authToken },
+        // onComplete: () => {
+        //   console.log('complete');
+        // },
+        onData: (options) => {
+            const opportunity = options.data.data?.onUserOpportunityNotification;
+            // console.log('OnUser', opportunity);
+            if (opportunity) {
+                addNotification((0, notifications_1.createOpportunityNotification)({
+                    image: opportunity.media
+                        ? `${getMediaENVDomain()}/opportunity-medias/${opportunity.media}`
+                        : '',
+                    title: opportunity.name || 'Opportunity',
+                    description: opportunity.description || '',
+                    onClick: () => {
+                        if (opportunity.projectUrl) {
+                            window.open(opportunity.projectUrl, '_blank');
+                        }
+                    },
+                }));
+            }
+        },
+    });
+    return null;
+};
+const SubscriptionCommon = () => {
+    const addNotification = (0, ui_1.useUiStore)((state) => state.addNotification);
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    (0, client_1.useSubscription)(api_1.experiencesSchema.OnCommonOpportunityNotificationDocument, {
+        onData: (options) => {
+            const opportunity = options.data.data?.onCommonOpportunityNotification;
+            // console.log('OnCommon', opportunity);
+            if (opportunity && opportunity.notificationType === 'push') {
+                addNotification((0, notifications_1.createOpportunityNotification)({
+                    image: opportunity.media
+                        ? `${getMediaENVDomain()}/opportunity-medias/${opportunity.media}`
+                        : '',
+                    title: opportunity.name || 'Opportunity',
+                    description: opportunity.description || '',
+                    onClick: () => {
+                        if (opportunity.projectUrl) {
+                            window.open(opportunity.projectUrl, '_blank');
+                        }
+                    },
+                }));
+            }
+        },
+    });
+    return null;
+};
+const SubscriberOpportunityNotification = () => {
+    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const [startSubscription, setStartSubscription] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setStartSubscription(isSignedIn);
+    }, [isSignedIn]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubscriptionCommon, {}), startSubscription && (0, jsx_runtime_1.jsx)(Subscription, {})] }));
+};
+exports.SubscriberOpportunityNotification = SubscriberOpportunityNotification;

package/build/api/subscriptions/SubscriptionNotificationSPA.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface IImageInterceptor {
+    src: string;
+    title: string;
+    fallbackSvg: ReactNode;
+}
+export declare const ImageInterceptor: ({ src, title, fallbackSvg, }: IImageInterceptor) => import("react/jsx-runtime").JSX.Element;
+export declare const Subscription: ({ routerPush }: {
+    routerPush?: (a: string) => void;
+}) => null;
+export {};

package/build/api/subscriptions/SubscriptionNotificationSPA.js

@@ -0,0 +1,142 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Subscription = exports.ImageInterceptor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const api_1 = require("@ludo.ninja/api");
+const ui_1 = require("../../store/ui");
+const env_1 = require("../../store/env");
+const store_1 = require("../../modules/user/store");
+const client_1 = require("@apollo/client");
+const OpportunitySvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/OpportunitySvg");
+const InviteCodeSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/InviteCodeSvg");
+const XPIconSvg_1 = require("@ludo.ninja/ui/build/modules/notifications/variants/XPIconSvg");
+const noContent_1 = require("./noContent");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const SImage = styled_components_1.default.div `
+  position: relative;
+  width: 62px;
+  height: 62px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  img {
+    border-radius: 4px;
+  }
+
+  & *:not(img) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const ImageInterceptor = ({ src, title, fallbackSvg, }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(SImage, { children: [isError && fallbackSvg, !isError && (0, jsx_runtime_1.jsx)("img", { width: "62", height: "62", src: src, alt: title, onLoad: () => {
+                    setIsLoading(false);
+                }, onError: () => {
+                    setIsError(true);
+                    setIsLoading(false);
+                } }), isLoading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "skeleton", width: 62, height: 62, borderRadius: 4 }))] }));
+};
+exports.ImageInterceptor = ImageInterceptor;
+const ImageNotification = ({ src, title, fallbackSvg, }) => {
+    if (!src) {
+        return fallbackSvg;
+    }
+    return (0, jsx_runtime_1.jsx)(exports.ImageInterceptor, { fallbackSvg: fallbackSvg, title: title, src: src });
+};
+const Subscription = ({ routerPush }) => {
+    const { authToken } = api_1.authCookies.getCookies();
+    const addNotification = (0, ui_1.useUiStore)((state) => state.addNotification);
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)(state => state.NEXT_PUBLIC_ENV_VALUE);
+    const { user, } = (0, store_1.useUserStore)((state) => ({
+        user: state.user,
+    }));
+    const userId = user?.userId || "";
+    const [readNotification] = api_1.notificationsSchema.useReadNotificationMutation({
+        context: {
+            uri: api_1.hosts.notificationsHost,
+        },
+    });
+    (0, client_1.useSubscription)(api_1.notificationsSchema.OnNotificationDocument, {
+        variables: { authToken, notificationTypes: [api_1.notificationsSchema.INotificationType.Push] },
+        onData: (options) => {
+            const notification = options.data.data?.onNotification;
+            // console.log("notification", notification);
+            if (notification) {
+                switch (notification.eventType) {
+                    case api_1.notificationsSchema.IEventType.CommonOpportunity:
+                    case api_1.notificationsSchema.IEventType.UserOpportunity:
+                        addNotification({
+                            icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Opportunity updated", fallbackSvg: (0, jsx_runtime_1.jsx)(OpportunitySvg_1.OpportunitySvg, {}) }),
+                            title: notification.name || "Opportunity updated",
+                            description: notification.description || "",
+                            onClick: () => {
+                                if (notification.link) {
+                                    window.open(notification.link, "_blank");
+                                }
+                            },
+                        });
+                        break;
+                    case api_1.notificationsSchema.IEventType.UserInvitee:
+                        addNotification({
+                            icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Invite code used", fallbackSvg: (0, jsx_runtime_1.jsx)(InviteCodeSvg_1.InviteCodeSvg, {}) }),
+                            title: notification.name || "Invite code used",
+                            description: notification.description || "",
+                            onClick: () => {
+                                const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
+                                if (domain === window.origin) {
+                                    routerPush?.(`/invite-codes`);
+                                }
+                                else {
+                                    window.open(`${domain}/invite-codes`, "_self");
+                                }
+                            },
+                        });
+                        break;
+                    case api_1.notificationsSchema.IEventType.UserXpIncrement:
+                    case api_1.notificationsSchema.IEventType.UserXps:
+                        addNotification({
+                            icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "XP updated", fallbackSvg: (0, jsx_runtime_1.jsx)(XPIconSvg_1.XpIconSvg, {}) }),
+                            title: notification.name || "XP updated",
+                            description: notification.description || "",
+                            onClick: () => {
+                                const domain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
+                                if (domain === window.origin) {
+                                    routerPush?.(`/rewards/${userId}`);
+                                }
+                                else {
+                                    window.open(`${domain}/rewards/${userId}`, "_self");
+                                }
+                            },
+                        });
+                        break;
+                    default:
+                        addNotification({
+                            icon: (0, jsx_runtime_1.jsx)(ImageNotification, { src: notification.media || "", title: notification.name || "Ludo updated", fallbackSvg: (0, jsx_runtime_1.jsx)(noContent_1.NoContentSvg, {}) }),
+                            title: notification.name || "",
+                            description: notification.description || "",
+                            onClick: () => {
+                                if (notification.link) {
+                                    window.open(notification.link, "_blank");
+                                }
+                            },
+                        });
+                }
+                readNotification({ variables: { notificationId: notification.notificationId } });
+            }
+        },
+    });
+    return null;
+};
+exports.Subscription = Subscription;

package/build/api/subscriptions/noContent.d.ts

@@ -0,0 +1 @@
+export declare const NoContentSvg: () => import("react/jsx-runtime").JSX.Element;