v1.7.0/finalize donations

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 
@@ -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

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 {

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;
 }