Notify users outside the App when there are new conversation updates

[camelPhonso]

Expected Behaviour

Users should be prompted to visit Kindly when there are updates to their conversations.

Spike

We currently have a notification system via emails that notifies users when a new conversation is started. However, extending this to notify users of unread messages could be too costly and has a large potential to drive bad user experience due to their inbox being flooded. As Kindly is not a mobile app we don't have the option to use push notifications.

Current Behaviour

Users are notified via email when someone else starts a conversation with them but no other actions trigger a notification beyond in-page displays.

Steps to Reproduce

If when logged into Kindly you start a new conversation you can find the email notification in your inbox or in the Inbucket URL link displayed when you enter supabase status onto your terminal.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[OlenaReukova]

In our application, we use Nodemailer for sending emails when a user starts a conversation. I am currently testing this functionality using Inbucket with Supabase to validate that emails are sent correctly as part of our app.

However, I'm experiencing an issue during testing. When I try to send a message as a refugee, I don't receive an email notification as a donor in the donor Inbucket inbox. What do you think could be causing Supabase Inbucket not to display incoming mail?

Actual result: The Inbucket donor inbox is empty.
Expected result: Email notification from trafalgargirls@gmail.com with the subject "New Kindly Message".

Steps to reproduce:

Test on localhost:3000.

1. Log in as the refugee account: refugee+test.reshetniak@gmail.com.
2. Search for an item.
3. Select an item.
4. Click the "Request Item" button.
5. Log out of the refugee profile.
6. Log in as the donor account: donor+test.reshetniak@gmail.com.
7. Check that a message from the refugee has been received.
8. Go to Inbucket.
9. Check the email for donor+test.reshetniak@gmail.com.

[idellien]

@OlenaReukova Hi Olena!

I did some investigation and found that the issue with the avatar image is because it’s missing from Supabase storage. This is why the image isn’t loading (you can confirm this in the Supabase Studio: http://localhost:54323/).

While I’m not certain how this affects email notifications, a quick way to unblock this error is by updating the user avatar URL in your local database. Here’s how:

1. .Go to the table editor: http://localhost:54323/project/default/editor
2. Select the profiles table.
3. In the avatar column, update the URL with an existing image. I used this one, which worked for me:
   https://undfcbmldjkujposixvn.supabase.co/storage/v1/object/public/images/test_images/toy.jpg?t=2024-07-08T12%3A48%3A39.092Z
   

After these updates, the error should be resolved!

Hopefully, this helps you get unblocked. 😊

@camelPhonso It looks like the image and bucket weren’t set up initially. Do you want me to create a task for a script to populate these items automatically in the future? Or perhaps I am missing something

[OlenaReukova]

@idellien Thank you for investigating this issue. You are correct; the image is absent in Supabase. To fix this error according to our documentation BEFORE_YOUR_FIRST_ISSUE you need to set up the Bucket manually:

Setting Up Supabase Bucket
To store and serve images, Kindly uses a bucket in Supabase. You need to create and configure this bucket manually:

Open the 'Studio URL' in your web browser
Navigate to the "Storage" section
Create a new bucket named 'images'
Set the bucket to be public to ensure it can be accessed without authentication
💡 Note: The bucket and its configuration will be lost if you reset the database or destroy the container. Make sure to create the bucket once again if you reset your environment.

I have a status code 200, which indicates that the email was sent.
My question is: how can I test Nodemailer? I tried using Supabase Inbucket, but it did not capture the email.

[camelPhonso]

@camelPhonso It looks like the image and bucket weren’t set up initially. Do you want me to create a task for a script to populate these items automatically in the future? Or perhaps I am missing something

Yes, that would actually be great. I think this is a combination of two things that happened before:

• the staging set up of our buckets is not reproduced in the containerised dev environment, so it expects developers to set up a bucket manually like Olena mentioned.

• the seed data on our local does not contain images for profiles. What we see on the page when we run dev is the fallback default image the components will render 'onError', but probably setting up actual profile images would be good for future testing scenarios.

[idellien]

@OlenaReukova Yeah I did that and even created the image with same name but for some reason it did not worked for me.

It appears that currently, the “Request Item” button doesn’t send an email notification as part of its functionality within the codebase. Instead, email notifications are handled through the send-email route, which you can find here:
send-email route

This route is triggered exclusively by the “Request Item” button:
NewConversationButton.tsx

Additionally, there’s an EnquireButton component that performs a similar function, but it currently isn’t being used anywhere in the project:
EnquireButton.tsx

if you change the step from “Click the ‘Request Item’ button” to “Click the ‘Message’ button”, you’ll notice in the logs that the email is attempted but results in a 500 error. This issue occurs because the Gmail app’s username and password are not specified.

I have tried to use trafalgargirls@gmail.com but got error "Invalid login: 535-5.7.8 Username and Password not accepted."
Maybe you know correct credentials?

[OlenaReukova]

@nichgalzin could you check trafalgargirls@gmail.com, it looks like the password is not valid, please.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[github-actions]

🤖 meep morp!

This issue has been stale for 7 days so it's being automaticaly unassigned and will return to the backlog.

💡 Once in the Backlog this issue will be available for anyone to take up - you can request it again if you have contributions ready to submit.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[github-actions]

🤖 meep morp!

This issue has been stale for 7 days so it's being automaticaly unassigned and will return to the backlog.

💡 Once in the Backlog this issue will be available for anyone to take up - you can request it again if you have contributions ready to submit.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[github-actions]

🤖 meep morp!

This issue has been stale for 7 days so it's being automaticaly unassigned and will return to the backlog.

💡 Once in the Backlog this issue will be available for anyone to take up - you can request it again if you have contributions ready to submit.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[github-actions]

🤖 meep morp!

This issue has been stale for 7 days so it's being automaticaly unassigned and will return to the backlog.

💡 Once in the Backlog this issue will be available for anyone to take up - you can request it again if you have contributions ready to submit.

[github-actions]

🤖 meep morp!

This Issue is now marked as stale because there has been no activity for a while.

🔎 The Issue will be automaticaly unassigned and moved to the Backlog if it doesn't receive new activity in the next 7 days.

💡 To unstale this Issue please push any commits that are ready or provide an update in the comments.

[github-actions]

🤖 meep morp!

This issue has been stale for 7 days so it's being automaticaly unassigned and will return to the backlog.

💡 Once in the Backlog this issue will be available for anyone to take up - you can request it again if you have contributions ready to submit.