turtles Posts - Answer Overflow

turtles

Posts Comments

NNovu

•Created by turtles on 5/9/2024 in #💬│support

Notification Center Configure Settings?

10 replies

NNovu

•Created by turtles on 6/11/2023 in #💬│support

ITriggerOverrideFCM Overrides don't match Docs

Having a few issues getting FCM notifications to not trigger twice in the onBackgroundMessage listener of our app using FCM and webPush. Part of the problem that makes this more confusing is that the Docs on https://docs.novu.co/channels/push/fcm/ don't match up with the types provided.

export type ITriggerOverrideFCM = {
    type?: 'notification' | 'data';
    tag?: string;
    body?: string;
    icon?: string;
    badge?: string;
    color?: string;
    sound?: string;
    title?: string;
    bodyLocKey?: string;
    bodyLocArgs?: string;
    clickAction?: string;
    titleLocKey?: string;
    titleLocArgs?: string;
    data?: Record<string, any>;
};

export type ITriggerOverrideFCM = {
    type?: 'notification' | 'data';
    tag?: string;
    body?: string;
    icon?: string;
    badge?: string;
    color?: string;
    sound?: string;
    title?: string;
    bodyLocKey?: string;
    bodyLocArgs?: string;
    clickAction?: string;
    titleLocKey?: string;
    titleLocArgs?: string;
    data?: Record<string, any>;
};

If I ignore the types provided and follow the docs I have a notification I want to send that looks like

curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
     --header 'Authorization: ApiKey <REPLACE_WITH_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data-raw '{
        "name": "JOB_COMPLETE",
        "to": {
            "subscriberId": "######-####-#####-####-###########",
            "email": "tester.test@email.com",
            "firstName": "tester",
            "phone": "#########"
        },
        "payload": {
            "jobId": "1111",
            "jobUuid": "######-####-#####-####-###########"
        },
        "overrides": {
            "fcm": {
                "type": "data",
                "webPush": {
                    "fcmOptions": {
                        "link": "https://mywebsite.com"
                    }
                }
            }
        }
    }'

curl --location --request POST 'https://api.novu.co/v1/events/trigger' \
     --header 'Authorization: ApiKey <REPLACE_WITH_API_KEY>' \
     --header 'Content-Type: application/json' \
     --data-raw '{
        "name": "JOB_COMPLETE",
        "to": {
            "subscriberId": "######-####-#####-####-###########",
            "email": "tester.test@email.com",
            "firstName": "tester",
            "phone": "#########"
        },
        "payload": {
            "jobId": "1111",
            "jobUuid": "######-####-#####-####-###########"
        },
        "overrides": {
            "fcm": {
                "type": "data",
                "webPush": {
                    "fcmOptions": {
                        "link": "https://mywebsite.com"
                    }
                }
            }
        }
    }'

I get this error in the activity feed

{
  "code": "messaging/invalid-payload",
  "message": "data must only contain string values"
}

{
  "code": "messaging/invalid-payload",
  "message": "data must only contain string values"
}

If I remove the "type" data I get this error

{}

{}

There seems to be override and parsing errors

6 replies

NNovu

•Created by turtles on 2/9/2023 in #💬│support

EmptyState prop on PopoverNoificationCenter

If I pass a function to the notification center like

<PopoverNotificationCenter
    emptyState={() => <LookingGlassIcon/>}
/>

<PopoverNotificationCenter
    emptyState={() => <LookingGlassIcon/>}
/>

It will pass type checking but wont render on screen. The console also shows this error

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

If I pass it

<PopoverNotificationCenter
    emptyState={<LookingGlassIcon/>}
/>

<PopoverNotificationCenter
    emptyState={<LookingGlassIcon/>}
/>

It will render but fail the type check. Should the interface be emptyState?: JSX.Element; instead of emptyState?: () => JSX.Element; ? Or am I doing something wrong (header and footer prop have the same signature)

8 replies

NNovu

•Created by turtles on 1/18/2023 in #💬│support

Change new notification dot in Notification center

I using the react plugin and have been trying to change the colour of the small red dot that appears on the react notification centre and the dot on unread notifications (they seem to be the same) I've try using the props on the NotificationBell

<NotificationBell
  unseenBadgeColor={"#283CD7"}
  unseenBadgeBackgroundColor={"#283CD7"}
  colorScheme={"light"}
  unseenCount={unseenCount}
/>

<NotificationBell
  unseenBadgeColor={"#283CD7"}
  unseenBadgeBackgroundColor={"#283CD7"}
  colorScheme={"light"}
  unseenCount={unseenCount}
/>

and using the INotificationCenterStyles styles.I can change the background colour but not the actual dot. Inspecting element i can see I need to change the fill on this

<rect x="1.5" y="1.5" width="13" height="13" rx="6.5" fill="url(#paint0_linear_1722_2699)" stroke="#FFFFFF" stroke-width="3"></rect>

<rect x="1.5" y="1.5" width="13" height="13" rx="6.5" fill="url(#paint0_linear_1722_2699)" stroke="#FFFFFF" stroke-width="3"></rect>

Any one had some luck changing this icon or colour?

4 replies

NNovu

•Created by turtles on 1/11/2023 in #💬│support

React - Little bit confused about new INotificationCenterStyles we can pass in

Hey I saw its now discouraged to pass in a theme to the <PopoverNotificationCenter /> and we should pass in a style object to the <NovuProvider />. Previously if I wanted to change the brand colour in front of unread notifications I could pass in a theme to the PopoverNotificationCenter like this

const theme: INovuThemePopoverProvider = {
    light: {
        notificationItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            }
        }
    }
}

const theme: INovuThemePopoverProvider = {
    light: {
        notificationItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            }
        }
    }
}

How would I do this using the new using the INotificationCenterStyles interface? I had a quick play around but didn't get very far. Here's what I'm passing into the <NovuProvider>

const novuStyles: INotificationCenterStyles = {
    header: {
        title: {
            fontSize: FontSize.NormalLarge,
            fontWeight: 600,
        },
        markAsRead: {
            fontSize: FontSize.Small,
        },
    },
    notifications: {
        listItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            },
        },
    },
};

const novuStyles: INotificationCenterStyles = {
    header: {
        title: {
            fontSize: FontSize.NormalLarge,
            fontWeight: 600,
        },
        markAsRead: {
            fontSize: FontSize.Small,
        },
    },
    notifications: {
        listItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            },
        },
    },
};

I can see the header part working but I missing something for the notification part. Thanks in advance

4 replies

NNovu

•Created by turtles on 11/24/2022 in #💬│support

Novu Socket info

Hey I was wondering if there was more info on what kind of events we can respond to when using the react useSocket() hook I can see unseen_count_changed from the docs example. Are there more events? Here's the interface I was looking at

interface ISocket {
    on: (eventName: string, callback: (data: any) => void) => void;
    off: (eventName: string) => void;
}

interface ISocket {
    on: (eventName: string, callback: (data: any) => void) => void;
    off: (eventName: string) => void;
}

Im trying to display a toast whenever a user gets a specific type of notification. (Loving the project btw)

6 replies

Gaming

Programming