trycourier / courier-react Goto Github PK

View Code? Open in Web Editor NEW

38.0 38.0 14.0 4.76 MB

License: MIT License

JavaScript 2.98% TypeScript 92.84% CSS 1.55% HTML 2.59% Shell 0.04%

courier-react's People

Contributors

Stargazers

Watchers

Forkers

suhasdeshpande remoteambition vaibhavantil2 vahnag sterlingconwell joeruello codebelt bwebs aldricharisgar soheilhasankhani jonath0n vojty paige12345

courier-react's Issues

Improve docs for courierConfig.userSignature

README at https://github.com/trycourier/courier-react/tree/main/packages/components doesn't mention userSignature

ReactToastify.css.map missing when using react-scripts 5.0.1

It seems like the babel inlined ReactToastify.css from react-toastify could use the ReactToastify.css.map being added to the courier-toast dist.

react-scripts start

Compiled with warnings.

Failed to parse source map from '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/Toast/ReactToastify.css.map' file: Error: ENOENT: no such file or directory, open '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/Toast/ReactToastify.css.map'

Failed to parse source map from '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/ReactToastify.css.map' file: Error: ENOENT: no such file or directory, open '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/ReactToastify.css.map'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@trycourier/react-toast/dist/components/Toast/index.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/Toast/ReactToastify.css.map' file: Error: ENOENT: no such file or directory, open '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/Toast/ReactToastify.css.map'

WARNING in ./node_modules/@trycourier/react-toast/dist/components/index.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/ReactToastify.css.map' file: Error: ENOENT: no such file or directory, open '/Users/kevin/perkup-app/node_modules/@trycourier/react-toast/dist/components/ReactToastify.css.map'

temporary workaround

GENERATE_SOURCEMAP=false react-scripts start

CourierProvider missing children property with React 18

Receiving this error Property 'children' does not exist on type 'IntrinsicAttributes & ICourierProviderProps' when using CourierProvider.

Looking for a work around if one exists or I can create a PR if given some guidance.

Some advice online indicates to simply extending PropsWithChildren.
I'm unsure how to keep that backwards with earlier versions of React.

Package @trycourier/courier-provider

Support for angular

Hii courier team,

I am using an angular application, I am already using courier email and it works flawlessly.
I wanted to integrate the courier inbox, but I am not able to. I went to the documentation but it didn't work, it throwed an error.

v3.9.1.js:2  Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')
    at v3.9.1.js:2:261530
    at f (v3.9.1.js:2:6744)
    at Generator.<anonymous> (v3.9.1.js:2:8062)
    at Generator.next (v3.9.1.js:2:7154)
    at e (v3.9.1.js:2:249976)
    at u (v3.9.1.js:2:261900)
    at v3.9.1.js:2:261959
    at new Promise (<anonymous>)
    at v3.9.1.js:2:261840
    at v3.9.1.js:2:262002

I would love to see an example or a guide I can follow.
Thank you.

Edit:

I further debugged and fix this issue. It still doesn't works in angular.
The only issue is when <courier-toast> and <courier-inbox> are inside app component or any other component they don't work but the backend works, I can see notification arriving in the network tab.

When I moved this two in index.html they worked till the app-root was loading.

Create a domain for browser sdks to make it easier for CSP headers

Hello there!
Thank you for your work! I am writing to you with a specific problem. Currently, we use courier-react in our frontend apps. When we were working on our Content Security Policy, we noticed that all requests are sent to this url: "https://fxw3r7gdm9.execute-api.us-east-1.amazonaws.com/production";. Do you plan to set up some of yours domains before it? Something like https://client.courier.com/, `https://api.courier.com/client? The AWS domain can change as far as we understand.

Cheers!

Product demo

Hi, is there any ready demo that would allow me to test end to end the whole Courier notification experience?

feat(Right-to-Left (RTL) Layout Support for Inbox

Description:

Issue Overview:
I propose the addition of a new feature to enhance Courier Inbox by introducing support for Right-to-Left (RTL) layouts. This improvement involves adding a "rtl" property of type boolean to the theme object in the inbox configuration.

Details:

Feature Description:

Introduce a "rtl" property to the theme object in the inbox configuration.
When set to true, the Courier Inbox layout will switch to Right-to-Left (RTL) mode.
This feature aims to enhance user experience for audiences that prefer RTL languages or layouts.

Failed to execute 'createElement' on 'Document

Hi courier team,

I am using @trycourier/react-inbox and @trycourier/react-provider to show notifications. I am constantly getting error with rendering the inbox. It used to work fine until 9 Aug, 2023. Suddenly it started complaining after I installed them again in my repository.

It says Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/index.03c051b94ee5090ce746.cjs') is not a valid name.

You can take a look at my code here. I have also attached a screenshot of error below.

import React from "react";
import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";
const AvInbox = ({ userId }) => {
  return (
    <div className="w-full my-4">
      {userId &&  (
        <CourierProvider
          userId={userId}
          clientKey={process.env.REACT_APP_COURIER_CLIENT_KEY}
        >
          <Inbox isOpen={true} defaultIcon={false} title="AV Inbox" />
        </CourierProvider>
      )}
    </div>

Fix docs link

Link in this section is broken

TypeError: undefined is not an object (evaluating 'Is.payload.messages.map')

Filing this issue affecting the courier react experience. We are getting following exception when calling fetchMessages

TypeError: undefined is not an object (evaluating 'Is.payload.messages.map')

We are using the useInbox as following

let {
    unreadMessageCount,
    getUnreadMessageCount,
    fetchMessages,
    messages = [],
    setView,
    lastMessagesFetched,
    markAllAsRead,
    startCursor,
    markMessageRead,
  } = useInbox();

  useEffect(() => {
    const now = new Date().getTime();
    const dateDiff = lastMessagesFetched
      ? now - lastMessagesFetched
      : undefined;
    setView('messages');
    if (!dateDiff || dateDiff > 3600000) {
      fetchMessages();
      getUnreadMessageCount();
    }
  }, []);

  useEffect(() => {
    if (startCursor) {
      const timeOutSub = setTimeout(() => {
        fetchMessages({
          after: startCursor,
        });
        clearTimeout(timeOutSub);
      }, 100);
    }
  }, [startCursor]);

The exception trace is as following:

Crashed in non-app: ../../node_modules/@trycourier/react-inbox/dist/components/Inbox/LazyTippy.js in Es
[native code] in Promise
Called from: ../../node_modules/graphql/language/blockString.mjs in printBlockString
5
[native code] in promiseReactionJob

Browser Info:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15

[Inbox] Long Titles overlap with message-actions

Messages with long titles in the inbox overlap with the relative date time and action buttons.

Current workaround is to add padding to the theme for messages

        <Inbox
            theme={{
                message: {
                    title: {
                        paddingRight: '54px',
                    },
                },
            }}
        />

Main Readme link is broken

Check out how to do Embedded Integration

Goes to a non existent page.

@trycourier/react-preferences Cannot find module "date-fns/format" in v5.1.0

Hey all, I recently updated to v5.1.0 of @trycourier/react-preferences and started getting a Cannot find module date-fns/format error.

I was able to install it by installing date-fns myself, but it appears like in v5.0.0 that date-fns/format was imported in format_digest.ts of react-preferences. But the package isn't listed as a dependency or peer dependency in the package.json.

It looks like it's only marked as a dependency of react-inbox. I wonder if it got hoisted by yarn workspaces or something?

Would love to have an update so I don't have to have a secret peer dependency installed in my app 😄 I could make the update myself, but not sure if all want that dependency or not in this specific package.

Courier Websocket Error when web app is left open for long time

We use the CourierProvider component, along with the Toast and Inbox. We have noticed that our users are getting a lot of "Courier Websocket errors" as console errors. It seems to happen when they leave the browser tab open for a long time and possibly if they're connectivity is patchy.

My guess as to what is happening is that the websocket loses connection when the user's device goes to sleep, but is then not able to reestablish that websocket connection when it opens back up.

As far as I can tell, this impacts the Toast component. Once the error has been observed, new notifications don't trigger a toast pop-up until the browser page has been refreshed. The Inbox seems to work just fine.

Here is an example of such a message (I've edited it to redact the client key)

Courier websocket error {
  target: {
    _listeners: { error: [], message: [], open: [], close: [] },
    _retryCount: 1,
    _shouldReconnect: true,
    _connectLock: true,
    _binaryType: 'blob',
    _closeCalled: false,
    _messageQueue: [
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
      '{"action":"subscribe","data":{"channel":"a395aa8a-446f-4bf5-b3fc-d65b02765887","clientSourceId":"0e3a1247-b2a3-4cee-bc88-e4115959a061","clientKey":"<REDACTED>","event":"*","version":5}}',
    ],
    _protocols: [],
    _options: {},
    _ws: {},
    _connectTimeout: 81,
  },
  type: 'error',
  message: 'TIMEOUT',
  error: {},
}

Has anyone seen this before and/or can help with this? Thanks!

useInbox only pulling last ten messages

We are unable to receive more than 10 notifications. The notification count is at 36 but only recent ten notifications blocks are pulled form Courier. The implementation is as following

const {
  unreadMessageCount,
  getUnreadMessageCount,
  fetchMessages,
  messages = [],
  markAllAsRead,
  markMessageRead,
  isLoading,
} = useInbox();

useEffect(() => {
  getUnreadMessageCount();
  fetchMessages();
}, []);

@trycourier/react-elements has wrong React dependency

Hello,

The version 57 of all the packages require react@17, except the @trycourier/react-elements workspace, that requires react@18. This means that this package will always throw a warning, since you can't have both react@17 and react@18 in the same project.

Is it possible to change the dependency of @trycourier/react-elements to require @react@17, like all the other packages?

Thanks in advance!

Add support for URQL 4

courier-react/packages/client-graphql/src/client.ts

Lines 68 to 79 in 7507a73

 return createClient({ 

 url: 

 params.apiUrl || 

 defaults?.apiUrl || 

 `${process.env.API_URL || `https://api.courier.com`}/client/q`, 

 requestPolicy: "network-only", 

 fetchOptions: () => { 

 return { 

 headers, 

 }; 

 }, 

 });

The newer version of URQL requires that you explicitly define exchanges, and will no longer default.

We use v4 in our app, and we had to add a resolution to avoid issues with this library.

The following would fix it:

import { createClient, cacheExchange, fetchExchange } from '@urql/core'

const client = createClient({
  url: '',
  exchanges: [cacheExchange, fetchExchange],
})

See the release notes: urql-graphql/urql#3114 (comment)

Websocket typing

Hi,

I believe the typings here for websocket messages may be incorrect...

Here's an example with the typings and a payload we inspected...

export interface ITextBlock {
  type: 'text'
  text: string
}

export interface IActionBlock {
  type: 'action'
  text: string
  url: string
}

export interface ICourierMessage {
  event?: string
  body?: string | React.ReactElement
  blocks?: Array<ITextBlock | IActionBlock>
  icon?: string | false
  title?: string | React.ReactElement
  data?: {
    clickAction?: string
    clickTrackingId?: string
    readTrackingId?: string
    deliverTrackingId?: string
  }
  brand?: any // dropped for simplicity in example
}

export const courierMessageEvent: ICourierMessage = {
  blocks: [],
  title: '...',
  data: {
    brandId: '...',
    trackingIds: {
      clickTrackingId: '...',
      deliverTrackingId: '...',
      readTrackingId: '...',
      unreadTrackingId: '...'
    }
  },
  event: '...'
}

	return createClient({
	url:
	params.apiUrl \|\|
	defaults?.apiUrl \|\|
	`${process.env.API_URL \|\| `https://api.courier.com`}/client/q`,
	requestPolicy: "network-only",
	fetchOptions: () => {
	return {
	headers,
	};
	},
	});