diff --git a/client/src/components/AuthButton.tsx b/client/src/components/AuthButton.tsx index 7cd2e23e..ac8c71ca 100644 --- 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 index a665a341..5035fdf5 100644 --- 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 = ({ onRestoreClick, ...rest }) => { const { firebaseUser } = React.useContext(UserContext); const signOut = () => auth.signOut().then(() => console.log('signed out')); @@ -45,10 +47,31 @@ const PremiumInfo: React.FC = () => ( ); +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 = () => { const { firebaseUser } = React.useContext(UserContext); const [isLoading, setIsLoading] = React.useState(false); + const productsRef = firestore.collection('products').where('active', '==', true); + + const [products, loadingProducts] = useCollectionData(productsRef, { idField: 'id' }); + const checkoutSessionsRef = firebaseUser?.uid ? firestore .collection('customers') @@ -57,29 +80,54 @@ const AddSubsciptionButton: React.FC = () => { : 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 = () => { } }; - if (isLoading) { + if (isLoading || loadingProducts) { return ; } diff --git a/client/src/components/Paywall/Paywall.utils.ts b/client/src/components/Paywall/Paywall.utils.ts index 07e655a5..01a735f1 100644 --- 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);