[SALAD-21966] WebApp - Add paypal notification (#1208)

SaladTechnologies · Sep 30, 2024 · a804e5e · a804e5e
1 parent 319dd82
commit a804e5e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/packages/web-app/src/modules/notifications/models/NotificationMessage.tsx b/packages/web-app/src/modules/notifications/models/NotificationMessage.tsx
@@ -14,6 +14,10 @@ export enum NotificationMessageCategory {
   ReferralCodeInvalid = 'Referral Code Invalid',
   ReferralCodeDoesNotExist = 'Referral Code Does Not Exist',
   ReferralCodeError = 'Referral Code Error',
+  PayPalSuccess = 'PayPalSuccess',
+  PayPalRetry = 'PayPalRetry',
+  PayPalFailure = 'PayPalFailure',
+  PayPalAccountInUse = 'PayPalAccountInUse',
 }
 
 export interface NotificationMessage {

diff --git a/packages/web-app/src/modules/profile/ProfileStore.tsx b/packages/web-app/src/modules/profile/ProfileStore.tsx
@@ -10,6 +10,10 @@ import {
   avatarsEndpointPath,
   avatarsSelectedEndpointPath,
   novuSignaturesEndpointPath,
+  paypalAccountInUseNotification,
+  paypalFailureNotification,
+  paypalRetryNotification,
+  paypalSuccessNotification,
   paypalUsersEndpointPath,
   profileEndpointPath,
   protectRewardsRedemptionEndpointPath,
@@ -287,11 +291,37 @@ export class ProfileStore {
     this.isMinecraftUserNameSubmitSuccess = false
   }
 
+  @action
+  private showPaypalNotification = () => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+    const paypalActionStatus = urlSearchParams.get('paypalAction')
+
+    if (paypalActionStatus) {
+      this.store.routing.replace('/account/summary')
+
+      switch (paypalActionStatus) {
+        case 'success':
+          this.store.notifications.sendNotification(paypalSuccessNotification)
+          break
+        case 'retry':
+          this.store.notifications.sendNotification(paypalRetryNotification)
+          break
+        case 'failure':
+          this.store.notifications.sendNotification(paypalFailureNotification)
+          break
+        case 'account_in_use':
+          this.store.notifications.sendNotification(paypalAccountInUseNotification)
+          break
+      }
+    }
+  }
+
   @action.bound
   loadPayPalId = flow(function* (this: ProfileStore) {
     try {
       const res: AxiosResponse<payPalResponse> = yield this.axios.get(paypalUsersEndpointPath) as payPalResponse
       this.payPalId = res?.data?.email
+      this.showPaypalNotification()
     } catch (err) {
       console.log(err)
     }
@@ -314,6 +344,7 @@ export class ProfileStore {
           payPalLoadRetries++
           this.timeoutId = setTimeout(loadPayPalIdWithRetry, 5000)
         } else {
+          this.store.notifications.sendNotification(paypalSuccessNotification)
           clearTimeout(this.timeoutId)
           return
         }

diff --git a/packages/web-app/src/modules/profile/constants.tsx b/packages/web-app/src/modules/profile/constants.tsx
@@ -1,7 +1,56 @@
+import type { NotificationMessage } from '../notifications/models'
+import { NotificationMessageCategory } from '../notifications/models'
+
 export const novuSignaturesEndpointPath = '/api/v2/novu-signatures'
 export const avatarsEndpointPath = '/api/v2/avatars'
 export const avatarsSelectedEndpointPath = '/api/v2/avatars/selected'
 export const profileEndpointPath = '/api/v1/profile'
 export const paypalUsersEndpointPath = '/api/v2/paypal/users'
 export const authenticationExternalEndpointPath = '/api/v2/authentication/external'
 export const protectRewardsRedemptionEndpointPath = '/api/v1/profile/redemptions/tfa'
+
+export const paypalSuccessNotification: NotificationMessage = {
+  category: NotificationMessageCategory.PayPalSuccess,
+  title: 'Congratulations!',
+  message: 'You have successfully linked your PayPal account to Salad.',
+}
+
+export const paypalRetryNotification: NotificationMessage = {
+  category: NotificationMessageCategory.PayPalRetry,
+  title: `Oops! Let's fix that`,
+  message:
+    'You managed to log in to PayPal, but your browser appears to have prevented us from linking your account to Salad. Check out our support guide for help with this issue.',
+  type: 'error',
+  onClick: () =>
+    window.open(
+      'https://support.salad.com/article/226-i-cant-connect-my-paypal-account?_gl=1*30ymmm*_gcl_au*MjAzODc4MDA4MS4xNzI1NTUwOTE2',
+      '_blank',
+      'noopener, noreferrer',
+    ),
+}
+
+export const paypalFailureNotification: NotificationMessage = {
+  category: NotificationMessageCategory.PayPalFailure,
+  title: `Let's try that again`,
+  message: `We weren't able to connect your PayPal account to Salad. Feel free to try again whenever you like. If the problem persists, please contact Salad Support.`,
+  type: 'error',
+  onClick: () =>
+    window.open(
+      'https://support.salad.com/?_gl=1*mtbbt7*_gcl_au*MjAzODc4MDA4MS4xNzI1NTUwOTE2',
+      '_blank',
+      'noopener, noreferrer',
+    ),
+}
+
+export const paypalAccountInUseNotification: NotificationMessage = {
+  category: NotificationMessageCategory.PayPalAccountInUse,
+  title: `Let's try that again`,
+  message: 'This PayPal account cannot be linked to this Salad account. Learn More.',
+  type: 'error',
+  onClick: () =>
+    window.open(
+      'https://support.salad.com/article/228-faq-on-paypal-rewards?_gl=1*8ttjos*_gcl_au*MjAzODc4MDA4MS4xNzI1NTUwOTE2',
+      '_blank',
+      'noopener, noreferrer',
+    ),
+}