MNTOR-3556: Front end integration #4995

mansaj · 2024-08-29T21:34:48Z

An example for @codemist to help integrate

Visit localhost:6060/unsubscribe-email/monthly-report-free

github-actions · 2024-08-29T21:51:18Z

Preview URL 🚀 : https://blurts-server-pr-4995-mgjlpikfea-uk.a.run.app

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

flodolo · 2024-09-10T11:55:39Z

locales/en/unsubscribe-from-monthly-report.ftl

Is there a specific reason to keep these strings isolated in a separate file?

These strings exist on a dedicated/separate page, similar to limitations-apply-premium.ftl.

codemist · 2024-09-10T14:55:03Z

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

+  const handleUnsubscription = async () => {
+    try {
+      const response = await fetch(`/api/unsubscribe?token=${token}`, {
+        method: "GET",
+      });
+
+      if (response.ok) {
+        setUnsubscribeSuccess(true);
+      }
+    } catch (e) {
+      console.error("Error during unsubscription:", e);
+    }
+  };
+


@mansaj You mentioned that we don't need a unsuccessful state if the unsubscription doesn't work, so do we still need this if (response.ok) logic?

If I'm understanding this correctly, this is calling the API? If so, yes, we do have to handle both success and failure. There are three possible responses: 200, 400, or 500

Fixed in 48443a6

Added a react-toastify component here, which should handle the error state.

mansaj · 2024-09-10T15:23:59Z

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

+  const handleUnsubscription = async () => {
+    try {
+      const response = await fetch(`/api/unsubscribe?token=${token}`, {
+        method: "GET",
+      });
+
+      if (response.ok) {
+        setUnsubscribeSuccess(true);
+      }
+    } catch (e) {
+      console.error("Error during unsubscription:", e);
+    }
+  };
+


If I'm understanding this correctly, this is calling the API? If so, yes, we do have to handle both success and failure. There are three possible responses: 200, 400, or 500

mansaj · 2024-09-10T15:24:39Z

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

+
+  const handleUnsubscription = async () => {
+    try {
+      const response = await fetch(`/api/unsubscribe?token=${token}`, {


Is this url correct? The API is at api/v1/user/unsubscribe-email?

Ah, you're right! Fixed in 05d3925

mansaj · 2024-09-10T15:28:14Z

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/page.tsx

+  if (session?.user?.subscriber) {
+    const unsubLink = await generateUnsubscribeLinkForSubscriber(
+      session.user.subscriber,
+    );
+    console.info({ unsubLink });


This is only for testing right? I think we should only generate the link when the email is crafted

Should remove after testing, because everytime generateUnsubscribeLinkForSubscriber is called, it replaces the old token

fixed in e7d4bd5

codemist · 2024-09-11T17:39:12Z

src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx

+      <ToastContainer
+        position="top-center"
+        theme="colored"
+        autoClose={false}
+        toastClassName={styles.toastBody}
+      />


@flozia @Vinnl Added the react-toastify container here in the main shell. In future components, we should be able to just call toast("Message here").

Vinnl

I have one blocker, unfortunately: we'll want to put the settings checkbox behind a flag (for free users), so that we can hide it until we've actually added the email.

locales/en/settings.ftl

locales/en/unsubscribe-from-monthly-report.ftl

...app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/AlertAddressForm.tsx

src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

Vinnl · 2024-09-12T13:10:15Z

src/app/(proper_react)/(redesign)/(public)/unsubscribe-from-monthly-report/page.tsx

Could we move this to /unsubscribe-email/monthly-report-free/page.tsx? Just to have some URL consistency with future email unsubscribes, and potentially being able to handle them all with a single route? I also imagine we'll want to allow someone to unsubscribe from all emails in one go at some point, which could then be handled by plain /unsubscribe-email/.

Fixed in 84c36c4

@Vinnl For some reason this broke the override CSS styles for the toast component...

codemist · 2024-09-12T13:28:37Z

@Vinnl Good call - added a feature flag MonthlyReportFreeUser here: 344025a

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx

* fix: gurantee boolean value * fix: update should upsert too * fix: delete primary_email field * fix: remove dup primary_email from new table * fix: generate the link for the unsub page instead * feat: some example code for FE * extract data from the right table * Unsubscription from monthly report confirmation page * pass in the right function * fix unit tests * fix unit tests --------- Co-authored-by: Joey Zhou <[email protected]>

codemist · 2024-09-12T14:40:54Z

...)/(redesign)/(public)/unsubscribe-email/monthly-report-free/UnsubscribeMonthlyReportView.tsx

-              <Button
-                variant="link"
-                onPress={() => void handleUnsubscription()}
+              <button


I decided to resort to a default <button> element here as opposed to using the pre-made Button component + link variant because this is a unique button that's in white, which would require overriding the blue-set colour to the link <Button> variant.

flozia

This looks good to me and seems to work as intended — good job!

github-actions · 2024-09-13T15:21:27Z

Cleanup completed - database 'blurts-server-pr-4995' destroyed, cloud run service 'blurts-server-pr-4995' destroyed

mansaj changed the base branch from main to MNTOR-1800-2 August 29, 2024 21:35

mansaj added the 🛑 Do Not Merge Do not merge this PR, even if approved. label Aug 29, 2024

codemist requested review from codemist and removed request for codemist August 30, 2024 12:19

codemist changed the title ~~MNTOR-3556:~~ MNTOR-3556: Front end integration Sep 5, 2024

codemist force-pushed the MNTOR-3556 branch from 9703461 to 26b6a73 Compare September 5, 2024 11:54

codemist marked this pull request as ready for review September 5, 2024 11:56

codemist requested a review from flodolo as a code owner September 5, 2024 11:56

Base automatically changed from MNTOR-1800-2 to main September 5, 2024 16:19

codemist force-pushed the MNTOR-3556 branch from 26b6a73 to 2c05749 Compare September 5, 2024 18:53

codemist reviewed Sep 5, 2024

View reviewed changes

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx Outdated Show resolved Hide resolved

flodolo reviewed Sep 10, 2024

View reviewed changes

codemist requested a review from Vinnl September 10, 2024 13:19

codemist reviewed Sep 10, 2024

View reviewed changes

mansaj commented Sep 10, 2024

View reviewed changes

codemist requested a review from flozia September 11, 2024 17:37

codemist removed the 🛑 Do Not Merge Do not merge this PR, even if approved. label Sep 11, 2024

codemist reviewed Sep 11, 2024

View reviewed changes

codemist force-pushed the MNTOR-3556 branch from c883003 to ad0f10e Compare September 11, 2024 17:58

Vinnl reviewed Sep 12, 2024

View reviewed changes

..._react)/(redesign)/(public)/unsubscribe-from-monthly-report/UnsubscribeMonthlyReportView.tsx Outdated Show resolved Hide resolved

mansaj and others added 6 commits September 12, 2024 10:00

feat: some example code for FE

f9e6186

extract data from the right table

e2d14bd

pass subscriber data

bbccb59

return void

f826724

add toast

fbd3776

codemist added 10 commits September 12, 2024 10:00

correct api endpoint

7f0b7ba

remove debugging comments

d0c43de

add try again link

232f39e

add feature flag

9529d0f

rename file

b73466a

override css variables

5b5ead7

wrap in try catch

0a0912e

add loader

2a3e019

fixup

7a9f920

add toat if catch error

86f5cb4

codemist force-pushed the MNTOR-3556 branch from 3652b36 to 86f5cb4 Compare September 12, 2024 14:02

codemist added 4 commits September 12, 2024 10:06

remove original css override styles

60674fe

move to /unsubscribe-email folder

84c36c4

lint

d501a06

add try again styling

3e7886f

codemist reviewed Sep 12, 2024

View reviewed changes

codemist requested review from Vinnl and flodolo September 12, 2024 14:41

codemist added 2 commits September 12, 2024 11:26

use plus language for header

d5c4a42

unit test

dbd5653

flozia approved these changes Sep 13, 2024

View reviewed changes

flodolo approved these changes Sep 13, 2024

View reviewed changes

codemist merged commit 3e66114 into main Sep 13, 2024
15 checks passed

codemist deleted the MNTOR-3556 branch September 13, 2024 15:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MNTOR-3556: Front end integration #4995

MNTOR-3556: Front end integration #4995

mansaj commented Aug 29, 2024 •

edited by codemist

Loading

github-actions bot commented Aug 29, 2024

flodolo Sep 10, 2024

codemist Sep 10, 2024 •

edited

Loading

codemist Sep 10, 2024 •

edited

Loading

mansaj Sep 10, 2024

codemist Sep 10, 2024

codemist Sep 10, 2024

mansaj Sep 10, 2024

mansaj Sep 10, 2024

codemist Sep 10, 2024 •

edited

Loading

mansaj Sep 10, 2024

mansaj Sep 10, 2024

codemist Sep 10, 2024

codemist Sep 11, 2024

Vinnl left a comment

Vinnl Sep 12, 2024

codemist Sep 12, 2024

codemist Sep 12, 2024

codemist commented Sep 12, 2024

codemist Sep 12, 2024 •

edited

Loading

flozia left a comment

github-actions bot commented Sep 13, 2024

MNTOR-3556: Front end integration #4995

MNTOR-3556: Front end integration #4995

Conversation

mansaj commented Aug 29, 2024 • edited by codemist Loading

github-actions bot commented Aug 29, 2024

Choose a reason for hiding this comment

codemist Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

codemist Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codemist commented Sep 12, 2024

codemist Sep 12, 2024 • edited Loading

Choose a reason for hiding this comment

flozia left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 13, 2024

mansaj commented Aug 29, 2024 •

edited by codemist

Loading

codemist Sep 10, 2024 •

edited

Loading

codemist Sep 10, 2024 •

edited

Loading

codemist Sep 10, 2024 •

edited

Loading

codemist Sep 12, 2024 •

edited

Loading