Display badge if user is in subscription

.nvmrc

@@ -0,0 +1 @@
+10.15.0

src/components/MainHeader.jsx

@@ -116,6 +116,7 @@ export function MainHeader(props) {
 						src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
 						className="main-header__avatar-img"
 					/>
+					<text id="headerSubscriptionBadge" className="hide-without-subscription" style="font-size:24px">🎖</text>
 				</Button>
 			</div>
 		</div>

src/components/app.jsx

@@ -1,7 +1,7 @@
 /* global htmlCodeEl, cssCodeEl, jsCodeEl, runBtn
  */
 
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 
 import { MainHeader } from './MainHeader.jsx';
 import ContentWrap from './ContentWrap.jsx';
@@ -29,8 +29,6 @@ import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
 import { trackEvent } from '../analytics';
 import { deferred } from '../deferred';
 import { alertsService } from '../notifications';
-import firebase from 'firebase/app';
-import 'firebase/auth';
 import { Profile } from './Profile';
 import { auth } from '../auth';
 import { SupportDeveloperModal } from './SupportDeveloperModal';
@@ -45,15 +43,13 @@ import { Js13KModal } from './Js13KModal';
 import { CreateNewModal } from './CreateNewModal';
 import { Icons } from './Icons';
 import JSZip from 'jszip';
+import { firebaseAuthIntegration } from '../javascript/firebase/auth';
+import { LocalStorageKeys } from '../javascript/app/config';
 
 if (module.hot) {
 	require('preact/debug');
 }
 
-const LocalStorageKeys = {
-	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
-	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
-};
 const UNSAVED_WARNING_COUNT = 15;
 const version = '3.6.0';
 
@@ -113,52 +109,7 @@ export default class App extends Component {
 		};
 		this.prefs = {};
 
-		const firestore = firebase.firestore();
-		const settings = {timestampsInSnapshots: true};
-		firestore.settings(settings);
-		firebase.auth().onAuthStateChanged(user => {
-			this.setState({ isLoginModalOpen: false });
-			if (user) {
-				log('You are -> ', user);
-				alertsService.add('You are now logged in!');
-				this.setState({ user });
-				window.user = user;
-				if (!window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS]) {
-					this.fetchItems(false, true).then(items => {
-						if (!items.length) {
-							return;
-						}
-						this.oldSavedItems = items;
-						this.oldSavedCreationsCount = items.length;
-						this.setState({
-							isAskToImportModalOpen: true
-						});
-						trackEvent('ui', 'askToImportModalSeen');
-					});
-				}
-				window.db.getUser(user.uid).then(customUser => {
-					if (customUser) {
-						const prefs = { ...this.state.prefs };
-						Object.assign(prefs, user.settings);
-						this.setState({ prefs: prefs });
-						this.updateSetting();
-					}
-
-					if(this.onUserItemsResolved) {
-						this.onUserItemsResolved(user.items);
-					}
-				});
-			} else {
-				// User is signed out.
-				this.setState({ user: undefined });
-				delete window.user;
-
-				if(this.onUserItemsResolved) {
-					this.onUserItemsResolved(null);
-				}
-			}
-			this.updateProfileUi();
-		});
+		firebaseAuthIntegration(this);
 	}
 	componentWillMount() {
 		var lastCode;

src/javascript/app/config.js

@@ -0,0 +1,9 @@
+const LocalStorageKeys = {
+	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
+	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
+};
+
+
+export { LocalStorageKeys };
+
+

src/javascript/firebase/auth.js

@@ -0,0 +1,58 @@
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { log } from '../../utils';
+import { alertsService } from '../../notifications';
+import { trackEvent } from '../../analytics';
+import { LocalStorageKeys } from '../app/config';
+import { loadSubscriptionToApp } from './subscription';
+
+function firebaseAuthIntegration(app) {
+	firebase.auth().onAuthStateChanged(user => {
+		app.setState({ isLoginModalOpen: false });
+		if (user) {
+			log('You are -> ', user);
+			alertsService.add('You are now logged in!');
+			app.setState({ user });
+			window.user = user;
+			if (!window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS]) {
+				app.fetchItems(false, true).then(items => {
+					if (!items.length) {
+						return;
+					}
+					app.oldSavedItems = items;
+					app.oldSavedCreationsCount = items.length;
+					app.setState({
+						isAskToImportModalOpen: true
+					});
+					trackEvent('ui', 'askToImportModalSeen');
+				});
+			}
+			window.db.getUser(user.uid).then(customUser => {
+				if (customUser) {
+					const prefs = { ...app.state.prefs };
+					Object.assign(prefs, user.settings);
+					app.setState({ prefs: prefs });
+					app.updateSetting();
+				}
+
+				if (app.onUserItemsResolved) {
+					app.onUserItemsResolved(user.items);
+				}
+			});
+
+			loadSubscriptionToApp(user.uid);
+		} else {
+			// User is signed out.
+			app.setState({ user: undefined });
+			delete window.user;
+
+			if (app.onUserItemsResolved) {
+				app.onUserItemsResolved(null);
+			}
+		}
+		app.updateProfileUi();
+	});
+}
+
+
+export { firebaseAuthIntegration };

src/javascript/firebase/subscription.js

@@ -0,0 +1,42 @@
+async function retrieveSubscription(firestore, userId) {
+	const docRef = firestore.collection('user_subscriptions').doc('user-' + userId);
+	return await docRef.get().then(function(doc) {
+		let subscription;
+		if (doc.exists) {
+			// console.log('Document data:', doc.data());
+			subscription = doc.data();
+		} else {
+			// doc.data() will be undefined in this case
+			// console.log('No such document!');
+			subscription = null;
+		}
+		return subscription;
+	}).catch(function(error) {
+		// console.log('Error getting document:', error);
+		return null;
+	});
+}
+
+function updateUiWithSubcriptionStatus(subscription) {
+
+	const isSubscriptionOnGoing = subscription && subscription['ends_at'] === null;
+	const isSubscriptionValid = subscription && subscription['ends_at'] !== null && ((new Date(subscription['ends_at']) - new Date()) >= 0);
+
+
+	if (isSubscriptionOnGoing || isSubscriptionValid) {
+		document.body.classList.add('is-in-subscription');
+	} else {
+		document.body.classList.remove('is-in-subscription');
+	}
+}
+
+function loadSubscriptionToApp(userId) {
+	window.db.getDb().then(async firestore => {
+			const subscription = await retrieveSubscription(firestore, userId);
+			window.user.subscrition = subscription;
+			updateUiWithSubcriptionStatus(subscription);
+		}
+	);
+}
+
+export { loadSubscriptionToApp };