From e7d8519c11d4cf62b33e8f9d582f042212d5b0a4 Mon Sep 17 00:00:00 2001
From: Ayushya Amitabh <ayushyamitabh@gmail.com>
Date: Mon, 7 Sep 2020 01:53:11 -0400
Subject: [PATCH] v1.7.0/finalize donations

---
 website/donate/index.html     | 25 ++++++++++++++++++++-----
 website/styles/extrasmall.css | 20 ++++++++++++++++++++
 website/styles/large.css      |  5 +++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/website/donate/index.html b/website/donate/index.html
index 4f29997..8cd2fd4 100644
--- a/website/donate/index.html
+++ b/website/donate/index.html
@@ -96,7 +96,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       }
     </style>
     <title>Watch Party | Donate</title>
-    <script src="https://www.paypal.com/sdk/js?client-id=AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE"></script>
+    
+    <!-- AS8qXxrxPOe9yb0yyJwQY_fRkRuXB8AFgeSmCLtkU0_ag9OVYTB3VeNjGwtL34KJZ9EdRYwEC89wfYZE live -->
+    <script src="https://www.paypal.com/sdk/js?client-id=ASTxEXKWhaXzdXe4CG6wkest7Hmi_agjiPqHjY524USsslz9fnLul_wrG8tauvZ6PCAxIQEanDPvazkh&disable-funding=credit"></script>
     <script>
       /*
        * G O O G L E 
@@ -145,7 +147,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             shape: 'pill',
           },
             onInit: function(data, actions) {
-              document.querySelector('#paypal-donate').style.opacity= "0.4";
+                document.querySelector('#paypal-donate').style.opacity= "0.4";
                 actions.disable();
                 document.querySelector('#donate input').addEventListener('input', function (ev) {
                   validateAndUpdate(ev, actions);
@@ -153,6 +155,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
                 document.querySelector('#donate input').addEventListener('change', function (ev) {
                   validateAndUpdate(ev, actions, true);
                 });
+                document.querySelector('#paypal-donate').parentElement.style.display = "flex";
             },
             createOrder: function(data, actions) {
                 return actions.order.create({
@@ -165,7 +168,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             },
             onApprove: function(data, actions) {
                 return actions.order.capture().then(function(details) {
-                    alert('Transaction completed by ' + details.payer.name.given_name);
+                    document.querySelector('.info.alert').querySelector('h1.sub-title').innerText += details.payer.name.given_name.toUpperCase() + "!";
+                    document.querySelector('.info.alert').querySelector('p.body').innerHTML += `<br /> You donated (${details.purchase_units[0].amount.currency_code}) ${details.purchase_units[0].amount.value}.`;
+                    document.querySelector('.info.alert').querySelector('a.underlink').setAttribute('href', `mailto:admin@chromewatchparty.com?subject=Question About Donation&body=DONATION DETAILS%0D%0A NAME: ${details.payer.name.given_name + " " + details.payer.name.surname}%0D%0A EMAIL: ${details.payer.email_address}%0D%0A DONATION: (${details.purchase_units[0].amount.currency_code}) ${details.purchase_units[0].amount.value}%0D%0A DATE: ${details.create_time}`);
+                    document.querySelector('.info.alert').setAttribute('data-active', true);
                 });
             },
         })
@@ -254,14 +260,23 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             <h1 class="title" data-font="sans-bold">DONATE</h1>
         </div>
       </div>
+      <div class="info alert" data-if="success">
+        <div class="info-text">
+          <div>
+            <h1 class="sub-title" data-font="sans-bold">🎉 THANK YOU FOR YOUR DONATION, </h1>
+            <p class="body" data-font="sans">You helped keep Watch Party alive and free for everyone.</p>
+            <a target="_blank" class="underlink" href="mailto:admin@chromewatchparty.com?subject=Question About Donation" data-font="sans-bold">QUESTION ABOUT DONATION</a>
+          </div>
+        </div>
+      </div>
       <div class="info">
         <div class="info-text">
           <div>
             <h4 class="sub-title" data-font="sans-bold">AMOUNT <code>$(US)</code></h4>
-            <input step="0.5" type="number" data-font="sans-bold" value="1.00" min="1.00" required />
+            <input step="0.5" type="number" data-font="sans-bold" value="0.00" min="1.00" required />
             <a style="display: block;" data-font="sans-bold" class="underlink">MINIMUM DONATION OF $1.00</a>
           </div>
-          <div class="description">
+          <div style="display: none; flex-direction: column;" class="description">
             <div id="paypal-donate"></div>
             <a data-font="sans-bold" class="underlink">
               WATCH PARTY DOES NOT HANDLE ANY OF YOUR BILLING INFORMATION
diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css
index 306c811..a448300 100644
--- a/website/styles/extrasmall.css
+++ b/website/styles/extrasmall.css
@@ -160,6 +160,17 @@ a.big-button::after {
   margin-bottom: 10rem;
 }
 
+.info.alert {
+  background-color: var(--color-secondary);
+  padding-bottom: 2.5rem;
+  padding-left: 10rem;
+  max-width: calc(100% - 12.5rem);
+  border-left: 2.5rem solid var(--color-bright);
+  padding-top: 2.5rem;
+  border-radius: 2.5rem;
+  display: none;
+}
+
 .info .info-card {
   background-color: var(--color-dim);
   border-radius: 2.5rem;
@@ -171,6 +182,10 @@ a.big-button::after {
   align-items: center;
 }
 
+.info.alert[data-active=true] {
+  display: block;
+}
+
 .info .info-card {
   color: var(--color-primary);
   font-size: 15rem;
@@ -303,6 +318,11 @@ a.big-button::after {
 #paypal-donate {
   margin-top: 5rem;
   display: flex;
+  flex: 1;
+  background-color: var(--color-dim);
+  padding: 2.5rem;
+  border-radius: 2.5rem;
+  margin-bottom: 2.5rem;
 }
 
 footer {
diff --git a/website/styles/large.css b/website/styles/large.css
index 8f90fbc..2c46f6c 100644
--- a/website/styles/large.css
+++ b/website/styles/large.css
@@ -29,6 +29,11 @@ body {
   display: inline-table;
 }
 
+.info.alert {
+  padding-top: 0;
+  max-width: calc(100% - 12.5rem) !important;
+}
+
 .info:not(:last-of-type) {
   margin-right: 6rem;
 }