Add dynamic price from stripe

MayGo · Oct 4, 2021 · 00e16ab · 00e16ab
1 parent dc62744
commit 00e16ab
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/client/src/components/AuthButton.tsx b/client/src/components/AuthButton.tsx
@@ -12,7 +12,7 @@ import { setEmailToLocalStorage } from './Paywall/Paywall.utils';
 
 const sendEmail = email => {
     const actionCodeSettings = {
-        url: `https://tockler-app.firebaseapp.com/logintoapp`,
+        url: `https://tockler.io/logintoapp`,
         handleCodeInApp: true,
     };
     return firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings);

diff --git a/client/src/components/Paywall/Paywall.tsx b/client/src/components/Paywall/Paywall.tsx
@@ -7,6 +7,8 @@ import { UserContext } from './UserProvider';
 import { auth, firestore } from '../../utils/firebase.utils';
 import { APP_RETURN_URL } from './Paywall.utils';
 
+import { useCollectionData } from 'react-firebase-hooks/firestore';
+
 const PremiumButton: React.FC<any> = ({ onRestoreClick, ...rest }) => {
     const { firebaseUser } = React.useContext(UserContext);
     const signOut = () => auth.signOut().then(() => console.log('signed out'));
@@ -45,10 +47,31 @@ const PremiumInfo: React.FC<any> = () => (
     </>
 );
 
+interface PriceInterface {
+    id: string;
+    active: boolean;
+    currency: string;
+    unit_amount: number;
+}
+interface ProductInterface {
+    id: string;
+    active: boolean;
+    prices: PriceInterface[];
+}
+
+const priceConverter = {
+    toFirestore: (data: PriceInterface) => data,
+    fromFirestore: (snap: any) => snap.data() as PriceInterface,
+};
+
 const AddSubsciptionButton: React.FC<any> = () => {
     const { firebaseUser } = React.useContext(UserContext);
     const [isLoading, setIsLoading] = React.useState(false);
 
+    const productsRef = firestore.collection('products').where('active', '==', true);
+
+    const [products, loadingProducts] = useCollectionData<ProductInterface>(productsRef, { idField: 'id' });
+
     const checkoutSessionsRef = firebaseUser?.uid
         ? firestore
               .collection('customers')
@@ -57,29 +80,54 @@ const AddSubsciptionButton: React.FC<any> = () => {
         : null;
 
     const addSubscription = async () => {
-        const selectedPrice = {
-            price: 'price_1JbUlDCoQF7vf9DtQwYGsO1X',
-            quantity: 1,
-        };
-        const checkoutSession = {
-            //  automatic_tax: true,
-            //  tax_id_collection: true,
-            collect_shipping_address: false,
-            line_items: [selectedPrice],
-            success_url: APP_RETURN_URL,
-            cancel_url: APP_RETURN_URL,
-            mode: 'subscription',
-            metadata: {
-                key: 'value',
-            },
-        };
-
         if (!checkoutSessionsRef) {
             return null;
         }
 
         try {
             setIsLoading(true);
+
+            const product = products?.find(product => product.active);
+
+            if (!product) {
+                console.error('No product found');
+                alert('No product found!');
+                return;
+            }
+
+            const pricesSnapshot = await firestore
+                .collection('products')
+                .doc(product.id)
+                .collection('prices')
+                .withConverter(priceConverter)
+                .get();
+
+            const prices: any[] = pricesSnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
+            const priceId = prices?.find(price => price.active)?.id;
+
+            if (!priceId) {
+                console.error('No price found');
+                alert('No price found!');
+                return;
+            }
+
+            const selectedPrice = {
+                price: priceId,
+                quantity: 1,
+            };
+            const checkoutSession = {
+                //  automatic_tax: true,
+                //  tax_id_collection: true,
+                collect_shipping_address: false,
+                line_items: [selectedPrice],
+                success_url: APP_RETURN_URL,
+                cancel_url: APP_RETURN_URL,
+                mode: 'subscription',
+                metadata: {
+                    key: 'value',
+                },
+            };
+
             const resp = await checkoutSessionsRef.add(checkoutSession);
             resp.onSnapshot(snap => {
                 const data = snap.data();
@@ -105,7 +153,7 @@ const AddSubsciptionButton: React.FC<any> = () => {
         }
     };
 
-    if (isLoading) {
+    if (isLoading || loadingProducts) {
         return <Loader />;
     }
 

diff --git a/client/src/components/Paywall/Paywall.utils.ts b/client/src/components/Paywall/Paywall.utils.ts
@@ -20,7 +20,7 @@ export function setTrialToLocalStorage(trial) {
     (window as any).localStorage.setItem(HAS_TRIAL, trial);
 }
 
-export const APP_RETURN_URL = 'https://tockler-app.web.app/toapp';
+export const APP_RETURN_URL = 'https://tockler.io/toapp';
 
 export function getEmailFromLocalStorage(): string {
     const email = (window as any).localStorage.getItem(USER_EMAIL);