fix many paypal issues, paypal sucks

Author: KhafraDev

Synergism.css

@@ -4962,6 +4962,11 @@ form input:hover {
     text-align: center;
 }
 
+.subscriptionContainer > div > div.checkout-paypal {
+    width: 76%;
+    margin: 0 auto;
+}
+
 #pseudoCoins > #productContainer > section > * > .pseudoCoinImage {
     margin-top: 8px;
 }

src/Login.ts

@@ -69,12 +69,14 @@ const DIAMOND_SMITH_MESSIAH = '1311165096378105906'
 let ws: WebSocket | undefined
 let loggedIn = false
 let tips = 0
+let subscription: SubscriptionMetadata = null
 
 const cloudSaves: Save[] = []
 
 export const isLoggedIn = () => loggedIn
 export const getTips = () => tips
 export const setTips = (newTips: number) => tips = newTips
+export const getSubMetadata = () => subscription
 
 export const allDurableConsumables: Record<PseudoCoinConsumableNames, Consumable> = {
   HAPPY_HOUR_BELL: {
@@ -201,14 +203,19 @@ interface BonusTypes {
   quarks: number
 }
 
+type SubscriptionMetadata = {
+  provider: 'paypal' | 'stripe' | 'patreon'
+  tier: number
+} | null
+
 interface SynergismUserAPIResponse<T extends keyof AccountMetadata> {
   personalBonus: number
   globalBonus: number
   member: AccountMetadata[T]
   accountType: T
   bonus: BonusTypes
-  subscriptionTier: number
   error?: unknown
+  subscription: SubscriptionMetadata
 }
 
 const isDiscordAccount = (
@@ -244,28 +251,29 @@ export async function handleLogin () {
             personalBonus: 0,
             accountType: 'none',
             bonus: { quarks: 0 },
-            subscriptionTier: 0
+            subscription: null
           } satisfies SynergismUserAPIResponse<'none'>
         ),
         { status: 401 }
       )
   )
 
   const account = await response.json() as SynergismUserAPIResponse<keyof AccountMetadata>
-  const { globalBonus, personalBonus, subscriptionTier } = account
+  const { globalBonus, personalBonus, subscription: sub } = account
 
   setQuarkBonus(personalBonus, globalBonus)
   setInterval(() => refreshQuarkBonus(), 1000 * 60 * 15)
   player.worlds = new QuarkHandler(Number(player.worlds))
   loggedIn = hasAccount(account)
+  subscription = sub
 
   currentBonus.textContent = i18next.t('settings.quarkBonusSimple', { globalBonus })
 
   // biome-ignore lint/suspicious/noConfusingLabels: it's not confusing or suspicious
   generateSubtab: {
     if (location.hostname !== 'synergism.cc') {
-      // TODO: better error, make link clickable, etc.
-      subtabElement.textContent = 'Login is not available here, go to https://synergism.cc instead!'
+      subtabElement.innerHTML =
+        'Login is not available here, go to <a href="https://synergism.cc">https://synergism.cc</a> instead!'
     } else if (hasAccount(account)) {
       if (Object.keys(account.member).length === 0) {
         subtabElement.innerHTML = `You are logged in, but your profile couldn't be retrieved from Discord or Patreon.`
@@ -298,10 +306,10 @@ export async function handleLogin () {
       const boosted = discord && (Boolean(account.member?.premium_since) || account.member?.roles.includes(BOOSTER))
       // It is possible for someone to have the roles through the Patreon integration with Discord, yet not have their
       // patreon linked to their Synergism (Discord/email) account.
-      const hasTier1 = subscriptionTier === 1 || (discord && account.member.roles?.includes(TRANSCENDED_BALLER))
-      const hasTier2 = subscriptionTier === 2 || (discord && account.member.roles?.includes(REINCARNATED_BALLER))
-      const hasTier3 = subscriptionTier === 3 || (discord && account.member.roles?.includes(ASCENDED_BALLER))
-      const hasTier4 = subscriptionTier === 4 || (discord && account.member.roles?.includes(OMEGA_BALLER))
+      const hasTier1 = sub?.tier === 1 || (discord && account.member.roles?.includes(TRANSCENDED_BALLER))
+      const hasTier2 = sub?.tier === 2 || (discord && account.member.roles?.includes(REINCARNATED_BALLER))
+      const hasTier3 = sub?.tier === 3 || (discord && account.member.roles?.includes(ASCENDED_BALLER))
+      const hasTier4 = sub?.tier === 4 || (discord && account.member.roles?.includes(OMEGA_BALLER))
 
       const checkMark = (n: number) => {
         return `<span style="color: lime">[✔] {+${n}%}</span>`

src/mock/browser.ts

@@ -1209,7 +1209,7 @@ export const worker = setupWorker(
       bonus: {
         quarkBonus: 0
       },
-      subscriptionTier: 0
+      subscription: null
     })
   }),
   ...GETHandlers,

src/purchases/CheckoutTab.ts

@@ -4,6 +4,7 @@ import { Alert, Confirm, Notification } from '../UpdateHTML'
 import { memoize } from '../Utility'
 import { products, subscriptionProducts } from './CartTab'
 import { addToCart, clearCart, getPrice, getProductsInCart, getQuantity, removeFromCart } from './CartUtil'
+import { initializePayPal_Subscription } from './SubscriptionsSubtab'
 import { updatePseudoCoins } from './UpgradesSubtab'
 
 const tab = document.querySelector<HTMLElement>('#pseudoCoins > #cartContainer')!
@@ -98,7 +99,7 @@ export const initializeCheckoutTab = memoize(() => {
   checkoutStripe?.addEventListener('click', submitCheckout)
   checkoutNowPayments?.addEventListener('click', submitCheckout)
 
-  initializePayPal('#checkout-paypal')
+  initializePayPal_OneTime('#checkout-paypal')
 })
 
 function addItem (e: MouseEvent) {
@@ -177,55 +178,59 @@ const updateTotalPriceInCart = () => {
   totalCost!.textContent = `${formatter.format(getPrice() / 100)} USD`
 }
 
-async function initializePayPal (selector: string | HTMLElement) {
-  try {
-    const paypal = await loadScript({
-      clientId: 'AS1HYTVcH3Kqt7IVgx7DkjgG8lPMZ5kyPWamSBNEowJ-AJPpANNTJKkB_mF0C4NmQxFuWQ9azGbqH2Gr',
-      disableFunding: ['paylater', 'credit', 'card', 'venmo']
-    })
-
-    paypal?.Buttons?.({
-      style: {
-        shape: 'rect',
-        layout: 'vertical',
-        color: 'gold',
-        label: 'paypal'
-      },
-
-      async createOrder () {
-        const fd = new FormData()
-
-        for (const product of getProductsInCart()) {
-          if (product.quantity > 0 && product.subscription) {
-            throw new TypeError('skipping')
-          }
-
-          fd.set(product.id, `${product.quantity}`)
+/**
+ * https://stackoverflow.com/a/69024269
+ */
+async function initializePayPal_OneTime (selector: string | HTMLElement) {
+  const paypal = await loadScript({
+    clientId: 'AS1HYTVcH3Kqt7IVgx7DkjgG8lPMZ5kyPWamSBNEowJ-AJPpANNTJKkB_mF0C4NmQxFuWQ9azGbqH2Gr',
+    disableFunding: ['paylater', 'credit', 'card', 'venmo'],
+    dataNamespace: 'paypal_one_time'
+  })
+
+  paypal?.Buttons?.({
+    style: {
+      shape: 'rect',
+      layout: 'vertical',
+      color: 'gold',
+      label: 'paypal'
+    },
+
+    async createOrder () {
+      const fd = new FormData()
+
+      for (const product of getProductsInCart()) {
+        if (product.quantity > 0 && product.subscription) {
+          throw new TypeError('skipping')
         }
 
-        fd.set('tosAgree', radioTOSAgree.checked ? 'on' : 'off')
-        const url = 'https://synergism.cc/paypal/orders/create'
+        fd.set(product.id, `${product.quantity}`)
+      }
 
-        const response = await fetch(url, {
-          method: 'POST',
-          body: fd
-        })
+      fd.set('tosAgree', radioTOSAgree.checked ? 'on' : 'off')
+      const url = 'https://synergism.cc/paypal/orders/create'
 
-        const orderData = await response.json()
+      const response = await fetch(url, {
+        method: 'POST',
+        body: fd
+      })
 
-        if (orderData.id) {
-          return orderData.id
-        }
+      const orderData = await response.json()
 
-        const errorDetail = orderData?.details?.[0]
-        const errorMessage = errorDetail
-          ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
-          : JSON.stringify(orderData)
+      if (orderData.id) {
+        return orderData.id
+      }
+
+      const errorDetail = orderData?.details?.[0]
+      const errorMessage = errorDetail
+        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
+        : JSON.stringify(orderData)
 
-        throw new Error(errorMessage)
-      },
+      throw new Error(errorMessage)
+    },
 
-      async onApprove (data, actions) {
+    async onApprove (data, actions) {
+      try {
         const url = `https://synergism.cc/paypal/orders/${data.orderID}/capture`
 
         const response = await fetch(url, { method: 'POST' })
@@ -240,9 +245,7 @@ async function initializePayPal (selector: string | HTMLElement) {
           return actions.restart()
         } else if (errorDetail) {
           // (2) Other non-recoverable errors -> Show a failure message
-          throw new Error(
-            `${errorDetail.description} (${orderData.debug_id})`
-          )
+          throw new Error(`${errorDetail.description} (${orderData.debug_id})`)
         } else if (!orderData.purchase_units) {
           throw new Error(JSON.stringify(orderData))
         } else {
@@ -263,16 +266,26 @@ async function initializePayPal (selector: string | HTMLElement) {
 
           exponentialPseudoCoinBalanceCheck()
         }
-      },
+      } finally {
+        initializePayPal_Subscription()
+      }
+    },
+
+    onError (error) {
+      const message = []
 
-      onError (error) {
-        Notification('An error with PayPal happened. More info in console.')
-        console.log(error)
+      for (const [key, value] of Object.entries(error)) {
+        message.push(`${key}: ${value}`)
       }
-    }).render(selector)
-  } catch (e) {
-    console.error(e)
-  }
+
+      Notification(`An error with PayPal happened. More info in console. ${message.join(', ')}`)
+      console.log(error)
+    },
+
+    onCancel () {
+      initializePayPal_Subscription()
+    }
+  }).render(selector)
 }
 
 const sleep = (delay: number) => new Promise((r) => setTimeout(r, delay))