From 0cfa931fe13aa3c4319960da5ef2a75086a9266b Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Mon, 26 Apr 2021 15:53:35 +1000
Subject: [PATCH] Donate button use iAP in TWA

---
 crabfit-frontend/public/index.html            |   1 +
 .../src/components/Donate/Donate.tsx          | 109 ++++++++++++++++--
 crabfit-frontend/src/stores/index.ts          |   5 +
 3 files changed, 103 insertions(+), 12 deletions(-)

diff --git a/crabfit-frontend/public/index.html b/crabfit-frontend/public/index.html
index d1017e1..7e8066b 100644
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@@ -13,6 +13,7 @@
       name="description"
       content="Enter your availability to find a time that works for everyone!"
     >
+    <meta http-equiv="origin-trial" content="AhWOaJkK9UupntsXcPeoI5jB0QriKWpjKihquvBAZt2CXCXljDoV7BasrVwECNBngkQ/Bxehaq12s0kdC0U8vAwAAABOeyJvcmlnaW4iOiJodHRwczovL2NyYWIuZml0OjQ0MyIsImZlYXR1cmUiOiJEaWdpdGFsR29vZHMiLCJleHBpcnkiOjE2MjYyMjA3OTl9">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 
diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx
index 8843abe..5d0b194 100644
--- a/crabfit-frontend/src/components/Donate/Donate.tsx
+++ b/crabfit-frontend/src/components/Donate/Donate.tsx
@@ -1,16 +1,101 @@
+import { useEffect } from 'react';
 import { Button } from 'components';
+import { useTWAStore } from 'stores';
 
-const Donate = () => (
-	<div style={{ marginTop: 6, marginLeft: 12 }}>
-		<a onClick={() => gtag('event', 'donate', { 'event_category': 'donate' })} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">
-			<Button
-				buttonHeight="30px"
-				buttonWidth="90px"
-				type="button"
-				tabIndex="-1"
-			>Donate</Button>
-		</a>
-	</div>
-);
+const PAYMENT_METHOD = 'https://play.google.com/billing';
+const SKU = 'crab_donation';
+
+const Donate = () => {
+  const store = useTWAStore();
+
+  useEffect(() => {
+    if (store.TWA === undefined) {
+      store.setTWA(document.referrer.includes('android-app://fit.crab'));
+    }
+  }, [store]);
+
+  const acknowledge = async (token, type='repeatable', onComplete = () => {}) => {
+    try {
+      let service = await window.getDigitalGoodsService(PAYMENT_METHOD);
+      await service.acknowledge(token, type);
+      onComplete();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  const purchase = () => {
+    if (!window.PaymentRequest) return false;
+    if (!window.getDigitalGoodsService) return false;
+
+    const supportedInstruments = [{
+      supportedMethods: PAYMENT_METHOD,
+      data: {
+        sku: SKU
+      }
+    }];
+
+    const details = {
+      total: {
+        label: 'Total',
+        amount: { currency: 'AUD', value: '0' }
+      },
+    };
+
+    const request = new PaymentRequest(supportedInstruments, details);
+
+    request.show()
+      .then(response => {
+        response
+          .complete('success')
+          .then(() => {
+            console.log(`Payment done: ${JSON.stringify(response, undefined, 2)}`);
+            if (response.details && response.details.token) {
+              const token = response.details.token;
+              console.log(`Read Token: ${token.substring(0, 6)}...`);
+              alert('Thank you for your donation! Without you, Crab Fit wouldn\'t be free, so thank you and keep being super awesome!');
+              acknowledge(token);
+            }
+          })
+          .catch(e => {
+            console.error(e.message);
+            alert('Cannot make donation through Google. Please try donating through the website crab.fit 🦀');
+          });
+      })
+      .catch(e => {
+        console.error(e);
+        alert('Cannot make donation through Google. Please try donating through the website crab.fit 🦀');
+      });
+  };
+
+  return (
+  	<div style={{ marginTop: 6, marginLeft: 12 }}>
+  		<a
+        onClick={event => {
+          gtag('event', 'donate', { 'event_category': 'donate' });
+          if (store.TWA) {
+            event.preventDefault();
+            if (window.confirm('Did you know that Crab Fit costs more that $100 per month? If it\'s helped you out at all, consider donating to help keep it running. 🦀')) {
+              if (purchase() === false) {
+                alert('Cannot make donation through Google. Please try donating through the website crab.fit 🦀');
+              }
+            }
+          }
+        }}
+        href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD"
+        target="_blank"
+        rel="noreferrer"
+      >
+  			<Button
+  				buttonHeight="30px"
+  				buttonWidth="90px"
+  				type="button"
+  				tabIndex="-1"
+          title="Every amount counts :)"
+  			>Donate</Button>
+  		</a>
+  	</div>
+  );
+}
 
 export default Donate;
diff --git a/crabfit-frontend/src/stores/index.ts b/crabfit-frontend/src/stores/index.ts
index 2ebd22a..28b128d 100644
--- a/crabfit-frontend/src/stores/index.ts
+++ b/crabfit-frontend/src/stores/index.ts
@@ -32,3 +32,8 @@ export const useRecentsStore = create(persist(
   }),
   { name: 'crabfit-recent' },
 ));
+
+export const useTWAStore = create(set => ({
+  TWA: undefined,
+  setTWA: TWA => set({ TWA }),
+}));