add support developer modal

webmaker/src/components/Footer.jsx

@@ -197,7 +197,7 @@ export default class Footer extends Component {
 					</svg>
 				</a>
 				<a
-					d-click="openSupportDeveloperModal"
+					onClick={this.props.supportDeveloperBtnClickHandler}
 					data-event-action="supportDeveloperFooterBtnClick"
 					class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile"
 					aria-label="Support the developer by pledging some amount"

webmaker/src/components/SupportDeveloperModal.jsx

@@ -0,0 +1,54 @@
+import { h, Component } from 'preact';
+import Modal from './Modal';
+
+export default class SupportDeveloperModal extends Component {
+	render() {
+		return (
+			<Modal show={this.props.isOpen} closeHandler={this.props.closeHandler}>
+				<div class="tac">
+					<h1>Support the Developer</h1>
+					<p>
+						Hi,{' '}
+						<a href="https://kushagragour.in" target="_blank">
+							Kushagra
+						</a>{' '}
+						here! Web Maker is a free and open-source project. To keep myself
+						motivated for working on such open-source and free{' '}
+						<a href="https://kushagragour.in/lab/" target="_blank">
+							side projects
+						</a>, I am accepting donations. Your pledge, no matter how small,
+						will act as an appreciation towards my work and keep me going
+						forward making Web Maker more awesome🔥. So please consider
+						donating. 🙏🏼 (could be as small as $1/month).
+					</p>
+
+					<div
+						class="flex flex-h-center"
+						id="onboardDontShowInTabOptionBtn"
+						d-click="onDontShowInTabClicked"
+					>
+						<a
+							class="onboard-selection"
+							href="https://patreon.com/kushagra"
+							target="_blank"
+							aria-label="Make a monthly pledge on Patreon"
+						>
+							<img src="patreon.png" height="60" alt="Become a patron image" />
+							<h3 class="onboard-selection-text">
+								Make a monthly pledge on Patreon
+							</h3>
+						</a>
+					</div>
+
+					<a
+						href="https://www.paypal.me/kushagragour"
+						target="_blank"
+						aria-label="Make a one time donation on Paypal"
+					>
+						Or, make a one time donation
+					</a>
+				</div>
+			</Modal>
+		);
+	}
+}

webmaker/src/components/app.jsx

@@ -22,6 +22,7 @@ import firebase from 'firebase/app';
 import 'firebase/auth';
 import Profile from './Profile';
 import { auth } from '../auth';
+import SupportDeveloperModal from './SupportDeveloperModal';
 
 if (module.hot) {
 	require('preact/debug');
@@ -46,6 +47,7 @@ export default class App extends Component {
 			isNotificationsModalOpen: false,
 			isLoginModalOpen: false,
 			isProfileModalOpen: false,
+			isSupportDeveloperModalOpen: false,
 			prefs: {},
 			currentItem: {
 				title: '',
@@ -117,7 +119,6 @@ export default class App extends Component {
 			this.updateProfileUi();
 		});
 	}
-
 	componentWillMount() {
 		var lastCode;
 		window.onunload = () => {
@@ -744,7 +745,7 @@ export default class App extends Component {
 	detachedPreviewBtnHandler() {
 		trackEvent('ui', 'detachPreviewBtnClick');
 
-		this.contentWrap.detachPreview()
+		this.contentWrap.detachPreview();
 	}
 
 	render() {
@@ -784,6 +785,11 @@ export default class App extends Component {
 						notificationsBtnClickHandler={() =>
 							this.setState({ isNotificationsModalOpen: true })
 						}
+						supportDeveloperBtnClickHandler={() =>
+							this.setState({
+								isSupportDeveloperModalOpen: true
+							})
+						}
 						detachedPreviewBtnHandler={this.detachedPreviewBtnHandler.bind(
 							this
 						)}
@@ -867,6 +873,12 @@ export default class App extends Component {
 					show={this.state.isHelpModalOpen}
 					closeHandler={() => this.setState({ isHelpModalOpen: false })}
 				/>
+				<SupportDeveloperModal
+					isOpen={this.state.isSupportDeveloperModalOpen}
+					closeHandler={() =>
+						this.setState({ isSupportDeveloperModalOpen: false })
+					}
+				/>
 
 				<div class="modal-overlay" />