better paypal error message

Author: KhafraDev

Synergism.css

@@ -5746,3 +5746,20 @@ html[data-golden-quark3-upg="false"] .goldenQuark3Upg {
     pointer-events: all;
     display: none;
 }
+
+@keyframes rainbow-border {
+    0% { border-color: #f00; }
+    16.67% { border-color: #ff7f00; }
+    33.33% { border-color: #ff0; }
+    50% { border-color: #0f0; }
+    66.67% { border-color: #00f; }
+    83.33% { border-color: #8b00ff; }
+    100% { border-color: #f00; }
+}
+
+.rainbow-border-highlight {
+    border: 3px solid #f00;
+    border-radius: 5px;
+    padding: 5px;
+    animation: rainbow-border 2s linear infinite;
+}

index.html

@@ -4542,7 +4542,7 @@ <h1 id="pCoinUpgradeName">Welcome to the PseudoShop!</h1>
 
           <p id="totalCost"></p>
 
-          <section style="display:flex;margin:0 auto">
+          <section id="tosSection" style="display:flex;margin:0 auto">
             <input type="radio" id="tosAgree" name="tosAgree" style="margin-right:2px">
             <label for="tosAgree">
               I agree to the <a href="https://synergism.cc/terms-of-service" style="color:cyan">Terms of Service</a>

src/Utility.ts

@@ -304,7 +304,7 @@ export const findInsertionIndex = (target: number, array: number[]): number => {
 /**
  * @license {MIT}
  * https://github.com/nodejs/undici/blob/6301265a20868d077faae6d51f5f6cf57ac2ebfe/lib/web/infra/index.js#L121
- * 
+ *
  * I'm stealing my own code, fuck off
  */
 export function isomorphicDecode (input: Uint8Array) {

src/mock/handlers/PaymentHandlers.ts

@@ -113,5 +113,8 @@ export const paymentHandlers: HttpHandler[] = [
         'features': []
       }
     ])
+  }),
+  http.post('https://synergism.cc/paypal/orders/create', () => {
+    return HttpResponse.json({ error: 'You did not agree to the TOS.' })
   })
 ]

src/purchases/CheckoutTab.ts

@@ -12,6 +12,7 @@ const form = tab.querySelector('div.cartList')!
 
 const checkoutStripe = form.querySelector<HTMLElement>('button#checkout')
 const checkoutNowPayments = form.querySelector<HTMLElement>('button#checkout-nowpayments')
+const tosSection = form.querySelector('section#tosSection')!
 const radioTOSAgree = form.querySelector<HTMLInputElement>('section > input[type="radio"]')!
 const totalCost = form.querySelector('p#totalCost')
 const itemList = form.querySelector('#itemList')!
@@ -99,6 +100,11 @@ export const initializeCheckoutTab = memoize(() => {
   checkoutStripe?.addEventListener('click', submitCheckout)
   checkoutNowPayments?.addEventListener('click', submitCheckout)
 
+  // Remove rainbow border highlight when TOS is clicked
+  radioTOSAgree.addEventListener('change', () => {
+    tosSection.classList.remove('rainbow-border-highlight')
+  })
+
   initializePayPal_OneTime('#checkout-paypal')
 })
 
@@ -272,14 +278,30 @@ async function initializePayPal_OneTime (selector: string | HTMLElement) {
     },
 
     onError (error) {
+      if (error instanceof Error) {
+        try {
+          const message = JSON.parse(error.message)
+
+          if (message.error) {
+            if (!radioTOSAgree.checked) {
+              tosSection.classList.add('rainbow-border-highlight')
+            }
+
+            Notification(`An error with PayPal happened. ${message.error}`)
+            return
+          }
+        } catch {
+        }
+      }
+
       const message = []
 
       for (const [key, value] of Object.entries(error)) {
         message.push(`${key}: ${value}`)
       }
 
       Notification(`An error with PayPal happened. More info in console. ${message.join(', ')}`)
-      console.log(error)
+      console.log({ error })
     },
 
     onCancel () {