From 02c7497098c755b8bc1b7e0a45d56c261f4aaf8b Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 2 Jun 2019 19:22:14 +0530
Subject: [PATCH 1/4] StripeCheckout component

---
 src/components/StripeCheckout.vue | 121 ++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/StripeCheckout.vue

diff --git a/src/components/StripeCheckout.vue b/src/components/StripeCheckout.vue
new file mode 100644
index 00000000..0c56709f
--- /dev/null
+++ b/src/components/StripeCheckout.vue
@@ -0,0 +1,121 @@
+<template>
+	<container width="500">
+		<form action="/charge" method="post" id="payment-form">
+			<div class="form-row">
+				<!-- A Stripe Element will be inserted here. -->
+				<div id="card-element"></div>
+				<!-- Used to display form errors. -->
+				<div id="card-errors" role="alert"></div>
+			</div>
+		</form>
+	</container>
+</template>
+
+<script>
+import Container from "../layouts/Container";
+
+export default {
+	name: "StripeCheckout",
+	components: {
+		Container,
+	},
+	mounted() {
+		var stripe = Stripe("pk_test_wzZNxaHTNKX0zELgEN2t7dZa00zLQBdkfq");
+		var elements = stripe.elements();
+
+		// Custom styling can be passed to options when creating an Element.
+		// (Note that this demo uses a wider set of styles than the guide below.)
+		var style = {
+			base: {
+				color: "#32325d",
+				fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+				fontSmoothing: "antialiased",
+				fontSize: "16px",
+				"::placeholder": {
+					color: "#aab7c4"
+				}
+			},
+			invalid: {
+				color: "#fa755a",
+				iconColor: "#fa755a"
+			}
+		};
+
+		// Create an instance of the card Element.
+		var card = elements.create("card", { style: style });
+
+		// Add an instance of the card Element into the `card-element` <div>.
+		card.mount("#card-element");
+
+		// Handle real-time validation errors from the card Element.
+		card.addEventListener("change", function(event) {
+			var displayError = document.getElementById("card-errors");
+			if (event.error) {
+				displayError.textContent = event.error.message;
+			} else {
+				displayError.textContent = "";
+			}
+		});
+
+		// Handle form submission.
+		var form = document.getElementById("payment-form");
+		form.addEventListener("submit", function(event) {
+			event.preventDefault();
+
+			stripe.createToken(card).then(function(result) {
+				if (result.error) {
+					// Inform the user if there was an error.
+					var errorElement = document.getElementById("card-errors");
+					errorElement.textContent = result.error.message;
+				} else {
+					// Send the token to your server.
+					stripeTokenHandler(result.token);
+				}
+			});
+		});
+
+		// Submit the form with the token ID.
+		function stripeTokenHandler(token) {
+			// Insert the token ID into the form so it gets submitted to the server
+			var form = document.getElementById("payment-form");
+			var hiddenInput = document.createElement("input");
+			hiddenInput.setAttribute("type", "hidden");
+			hiddenInput.setAttribute("name", "stripeToken");
+			hiddenInput.setAttribute("value", token.id);
+			form.appendChild(hiddenInput);
+
+			// Submit the form
+			form.submit();
+		}
+	}
+};
+</script>
+
+<style lang='sass'>
+.StripeElement
+  box-sizing: border-box
+
+  height: 40px
+
+  padding: 10px 12px
+
+  border: 1px solid transparent
+  border-radius: 4px
+  background-color: white
+
+  box-shadow: 0 1px 3px 0 #e6ebf1
+  -webkit-transition: box-shadow 150ms ease
+  transition: box-shadow 150ms ease
+
+.StripeElement--focus
+  box-shadow: 0 1px 3px 0 #cfd7df
+
+.StripeElement--invalid
+  border-color: #fa755a
+
+.StripeElement--webkit-autofill
+  background-color: #fefde5 !important
+
+#card-errors
+	margin-bottom: .5rem
+</style>

From b6ba98f64eebeda3afb88578bf3fb3ffa1d4e77f Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 2 Jun 2019 19:22:55 +0530
Subject: [PATCH 2/4] Add US dollars currency to tiers

---
 src/data/sponsor-tiers.yml | 77 ++++++++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/data/sponsor-tiers.yml b/src/data/sponsor-tiers.yml
index 5062c225..48d307e0 100644
--- a/src/data/sponsor-tiers.yml
+++ b/src/data/sponsor-tiers.yml
@@ -1,41 +1,53 @@
 - id: SPON-T1
   title: 💻 Open source lover
-  price: 100
-  currency: ₹
-  cycle: month
   description: Just supporting as open source loving person.
-  plan_id: plan_F8hYEi75B2wZMy
+  cycle: month
+  country:
+    - currency: ₹
+      price: 100
+      plan_id: plan_F8hYEi75B2wZMy
+    - currency: $
+      price: 5
   perks:
     - discord
 
 - id: SPON-T2
   title: ☕ Coffee lover
-  price: 200
-  currency: ₹
-  cycle: month
   description: ️Buy me a coffee every month.
-  plan_id: plan_F8eRgEf1NIJA72
+  cycle: month
+  country:
+    - currency: ₹
+      price: 100
+      plan_id: plan_F8eRgEf1NIJA72
+    - currency: $
+      price: 10
   perks:
     - discord
 
 - id: SPON-T3
   title: 🤗 Backer
-  price: 500
-  currency: ₹
-  cycle: month
   description: No worries, you got my back.
-  plan_id: plan_F8pmrWMggAViOC
+  cycle: month
+  country:
+    - currency: ₹
+      price: 500
+      plan_id: plan_F8pmrWMggAViOC
+    - currency: $
+      price: 50
   perks:
     - discord
     - backers
 
 - id: SPON-T4
   title: 🥉 Bronze
-  price: 3000
-  currency: ₹
-  cycle: month
   description: You rock!!!
-  plan_id: plan_F8xxa53rxGFbTq
+  cycle: month
+  country:
+    - currency: ₹
+      price: 3000
+      plan_id: plan_F8xxa53rxGFbTq
+    - currency: $
+      price: 100
   perks:
     - website
     - discord
@@ -43,11 +55,14 @@
 
 - id: SPON-T5
   title: 🥈 Silver
-  price: 5000
-  currency: ₹
-  cycle: month
   description: Work on weekdays to add more features and fix bugs.
-  plan_id: plan_F8xzbwnFUjXfYL
+  cycle: month
+  country:
+    - currency: ₹
+      price: 5000
+      plan_id: plan_F8xzbwnFUjXfYL
+    - currency: $
+      price: 200
   perks:
     - website
     - discord
@@ -55,11 +70,14 @@
 
 - id: SPON-T6
   title: 🥇 Gold
-  price: 10,000
-  currency: ₹
-  cycle: month
   description: No words 😭. Thank you so much 🙏🏻.
-  plan_id: plan_F8y0VUGruPD1ub
+  cycle: month
+  country:
+    - currency: ₹
+      price: 10,000
+      plan_id: plan_F8y0VUGruPD1ub
+    - currency: $
+      price: 500
   perks:
     - website
     - discord
@@ -67,11 +85,14 @@
 
 - id: SPON-T7
   title: 🌟 Special
-  price: 20000
-  currency: ₹
-  cycle: month
   description: A 🌟 special tier for companies, your name will appear on thermal application, along with website, backers.md and discord badge.
-  plan_id:
+  cycle: month
+  country:
+    - currency: ₹
+      price: 20,000
+      plan_id:
+    - currency: $
+      price: 1000
   perks:
     - thermal
     - website

From f451e9456915d856a8430d27c87a386eb53fba1e Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Mon, 10 Jun 2019 13:44:08 +0530
Subject: [PATCH 3/4] Remove stripe checkout form

---
 src/components/StripeCheckout.vue | 121 ------------------------------
 1 file changed, 121 deletions(-)
 delete mode 100644 src/components/StripeCheckout.vue

diff --git a/src/components/StripeCheckout.vue b/src/components/StripeCheckout.vue
deleted file mode 100644
index 0c56709f..00000000
--- a/src/components/StripeCheckout.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-	<container width="500">
-		<form action="/charge" method="post" id="payment-form">
-			<div class="form-row">
-				<!-- A Stripe Element will be inserted here. -->
-				<div id="card-element"></div>
-				<!-- Used to display form errors. -->
-				<div id="card-errors" role="alert"></div>
-			</div>
-		</form>
-	</container>
-</template>
-
-<script>
-import Container from "../layouts/Container";
-
-export default {
-	name: "StripeCheckout",
-	components: {
-		Container,
-	},
-	mounted() {
-		var stripe = Stripe("pk_test_wzZNxaHTNKX0zELgEN2t7dZa00zLQBdkfq");
-		var elements = stripe.elements();
-
-		// Custom styling can be passed to options when creating an Element.
-		// (Note that this demo uses a wider set of styles than the guide below.)
-		var style = {
-			base: {
-				color: "#32325d",
-				fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-				fontSmoothing: "antialiased",
-				fontSize: "16px",
-				"::placeholder": {
-					color: "#aab7c4"
-				}
-			},
-			invalid: {
-				color: "#fa755a",
-				iconColor: "#fa755a"
-			}
-		};
-
-		// Create an instance of the card Element.
-		var card = elements.create("card", { style: style });
-
-		// Add an instance of the card Element into the `card-element` <div>.
-		card.mount("#card-element");
-
-		// Handle real-time validation errors from the card Element.
-		card.addEventListener("change", function(event) {
-			var displayError = document.getElementById("card-errors");
-			if (event.error) {
-				displayError.textContent = event.error.message;
-			} else {
-				displayError.textContent = "";
-			}
-		});
-
-		// Handle form submission.
-		var form = document.getElementById("payment-form");
-		form.addEventListener("submit", function(event) {
-			event.preventDefault();
-
-			stripe.createToken(card).then(function(result) {
-				if (result.error) {
-					// Inform the user if there was an error.
-					var errorElement = document.getElementById("card-errors");
-					errorElement.textContent = result.error.message;
-				} else {
-					// Send the token to your server.
-					stripeTokenHandler(result.token);
-				}
-			});
-		});
-
-		// Submit the form with the token ID.
-		function stripeTokenHandler(token) {
-			// Insert the token ID into the form so it gets submitted to the server
-			var form = document.getElementById("payment-form");
-			var hiddenInput = document.createElement("input");
-			hiddenInput.setAttribute("type", "hidden");
-			hiddenInput.setAttribute("name", "stripeToken");
-			hiddenInput.setAttribute("value", token.id);
-			form.appendChild(hiddenInput);
-
-			// Submit the form
-			form.submit();
-		}
-	}
-};
-</script>
-
-<style lang='sass'>
-.StripeElement
-  box-sizing: border-box
-
-  height: 40px
-
-  padding: 10px 12px
-
-  border: 1px solid transparent
-  border-radius: 4px
-  background-color: white
-
-  box-shadow: 0 1px 3px 0 #e6ebf1
-  -webkit-transition: box-shadow 150ms ease
-  transition: box-shadow 150ms ease
-
-.StripeElement--focus
-  box-shadow: 0 1px 3px 0 #cfd7df
-
-.StripeElement--invalid
-  border-color: #fa755a
-
-.StripeElement--webkit-autofill
-  background-color: #fefde5 !important
-
-#card-errors
-	margin-bottom: .5rem
-</style>

From 008a4b7c680d141ec8d0fc13724507b5dcfc5252 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Mon, 10 Jun 2019 13:48:12 +0530
Subject: [PATCH 4/4] New layouts for showing tiers in INR & USD currency

---
 src/pages/Sponsor.vue | 191 ++++++++++++++++++++++++++++--------------
 1 file changed, 127 insertions(+), 64 deletions(-)

diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue
index 83615548..055cc21e 100644
--- a/src/pages/Sponsor.vue
+++ b/src/pages/Sponsor.vue
@@ -2,36 +2,50 @@
 	<Layout>
 		<div class="sponsors">
 			<container>
-				<div id="error-message"></div>
+				<h1 class="sponsors__heading">Sponsor Thermal Development</h1>
+
 				<div class="sponsors__tiers">
-					<h6 class="sponsors__tiers-heading">
-						Select a tier
-					</h6>
-					<div
-						v-for="item in sponsorTiers"
-						:key="item.id"
-						class="sponsors__tiers-item"
-						v-if="item.plan_id"
-					>
-						<div class="sponsors__tiers-content">
-							<div class="sponsors__tiers-cost">
-								{{ item.title }} - {{ item.currency + item.price + "/" + item.cycle }}
-							</div>
+					<div class="sponsors__currency-switch">
+						<div
+							@click="changeCountry('$')"
+							:style="{ backgroundColor: selectedCurrency('$') }"
+							class="sponsors__currency-item"
+						>
+							$
+						</div>
+						<div
+							@click="changeCountry('₹')"
+							:style="{ backgroundColor: selectedCurrency('₹') }"
+							class="sponsors__currency-item"
+						>
+							₹
+						</div>
+					</div>
+					<div class="sponsors__tiers-list">
+						<div
+							v-for="item in sponsorTiers"
+							:key="item.id"
+							class="sponsors__tiers-item"
+						>
 							<div
-								text="Select"
-								:size="1"
-								class="sponsors__tiers-button button button__outline-dark button__size-1"
-								@click="stripeCheckout(item.plan_id)"
+								v-for="currency in item.country"
+								v-if="currency.currency === country"
+								class="sponsors__tiers-cost"
 							>
-								Select
+								<div class="sponsors__tiers-price">
+									{{ currency.currency + currency.price }}
+								</div>
+								<div class="sponsors__tiers-cycle">
+									{{ "/" + item.cycle }}
+								</div>
 							</div>
-						</div>
-						<div class="sponsors__tiers-description">
-							{{ item.description }}
-						</div>
-						<div class="sponsors__tiers-perks">
-							<div v-for="perk in item.perks" class="sponsors__perks-item">
-								{{ perk }}
+							<div class="sponsors__tiers-title">
+								{{ item.title }}
+							</div>
+							<div class="sponsors__tiers-perks">
+								<div v-for="perk in item.perks" class="sponsors__perks-item">
+									{{ perk }}
+								</div>
 							</div>
 						</div>
 					</div>
@@ -39,6 +53,11 @@
 				<div class="stripe-badge">
 					<stripe-badge />
 				</div>
+				<primary-buttom
+					text="Select"
+					class="sponsors__checkout-button"
+					@click.native="stripeCheckout(plan_id)"
+				/>
 			</container>
 		</div>
 	</Layout>
@@ -46,38 +65,39 @@
 
 <script>
 import Container from "../layouts/Container";
-import SponsorTiers from "../data/sponsor-tiers.yml"
-import StripeBadge from "../../static/images/icon/stripe-badge.svg"
+import SponsorTiers from "../data/sponsor-tiers.yml";
+import PrimaryButtom from "../components/Button/PrimaryButton";
+import StripeBadge from "../../static/images/icon/stripe-badge.svg";
 
 export default {
 	name: "Sponsors",
 	metaInfo: {
 		title: "Sponsor Thermal Development"
 	},
+	data() {
+		return {
+			country: "$",
+			plan_id: ""
+		};
+	},
 	components: {
 		Container,
+		PrimaryButtom,
 		StripeBadge
 	},
 	computed: {
 		sponsorTiers() {
-			return SponsorTiers
+			return SponsorTiers;
 		}
 	},
 	methods: {
-		stripeCheckout(plan_id) {
-			var stripe = Stripe("pk_live_DLEhVwauymdEAIPdN07BsLEx00hNZ8kcwt");
-			stripe
-				.redirectToCheckout({
-					items: [{ plan: plan_id, quantity: 1 }],
-					successUrl: "https://thermal.codecarrot.net/payment/success",
-					cancelUrl: "https://thermal.codecarrot.net/payment/canceled"
-				})
-				.then(function(result) {
-					if (result.error) {
-						var displayError = document.getElementById("error-message");
-						displayError.textContent = result.error.message;
-					}
-				});
+		changeCountry(currency) {
+			this.country = currency;
+		},
+		selectedCurrency(currency) {
+			if (currency === this.country) {
+				return '#f7f7f7';
+			}
 		}
 	}
 };
@@ -86,43 +106,77 @@ export default {
 <style lang='sass'>
 .sponsors
 	margin-top: 3rem
+	text-align: center
 
-	&__tiers
-		border: 1px solid #ddd
-		border-radius: .354rem
+	&__heading
+		text-align: center
+		margin-bottom: 2rem
 
-		&-heading
-			padding: .8rem
-			border-bottom: 1px solid #ddd
-			background-color: lighten(#ddd, 10%)
-			border-top-left-radius: .354rem
-			border-top-right-radius: .354rem
+	&__currency
+		&-switch
+			display: inline-block
+			margin-bottom: .875rem
+			border:
+				width: 1px
+				style: solid
+				color: #ddd
+				radius: .354rem
 
+		&-item
+			display: inline-block
+			cursor: pointer
+			padding: 5px 10px
+
+			&:first-child
+				border-right: 1px solid #ddd
+
+			&:hover
+				background-color: lighten(#ddd, 10%)
+
+				&:nth-child(1)
+					border-top-left-radius: .354rem
+					border-bottom-left-radius: .354rem
+
+				&:nth-child(2)
+					border-top-right-radius: .354rem
+					border-bottom-right-radius: .354rem
+
+	&__tiers
 		&-item
 			padding: .8rem
+			border:
+				width: 1px
+				style: solid
+				color: #ddd
+				radius: .354rem
 
 			&:not(:last-child)
-				border-bottom: 1px solid #ddd
+				margin-bottom: .875rem
 
-		&-content
+			&:hover
+				background-color: lighten(#ddd, 10%)
+
+		&-cost
 			display: flex
 			flex-direction: row
-			align-items: center
-			margin-bottom: .5rem
+			align-items: baseline
+			justify-content: center
 
-		&-cost
-			font-weight: 500
+		&-price
+			font:
+				size: 2rem
+				weight: 500
 
-		&-button
-			margin-left: auto
-			color: #00ADB5
+		&-cycle, &-title
+			font-size: .875rem
 
-		&-description
-			margin-bottom: .5rem
+		&-title
+			margin-bottom: 1rem
 
 		&-perks
 			display: flex
 			flex-direction: row
+			justify-content: center
 
 	&__perks-item
 		font-size: .85rem
@@ -135,7 +189,16 @@ export default {
 			style: solid
 			color: #ddd
 
+	&__checkout-button
+		margin-top: 2rem
+
 .stripe-badge
 	margin-top: 1.125rem
-	text-align: center
+
+@media (min-width: 768px)
+	.sponsors__tiers-list
+		display: flex
+		flex-direction: row
+		flex-wrap: wrap
+		justify-content: space-evenly
 </style>