From 5aebba9b2a63a58c1c478758293828ee6de28668 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Mon, 11 Jan 2021 19:03:22 +0100
Subject: [PATCH 01/12] chore: adds stripe ENVs

---
 .env.local |  1 -
 .gitignore |  1 +
 readme.md  | 12 ++++++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 delete mode 100644 .env.local

diff --git a/.env.local b/.env.local
deleted file mode 100644
index 61b4d79..0000000
--- a/.env.local
+++ /dev/null
@@ -1 +0,0 @@
-# GA_MEASUREMENT_ID=UA-169820463-3
diff --git a/.gitignore b/.gitignore
index 1f1d315..fb730e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 .next
 node_modules
+.env
\ No newline at end of file
diff --git a/readme.md b/readme.md
index f087cbd..b04b995 100644
--- a/readme.md
+++ b/readme.md
@@ -1,3 +1,15 @@
 # TBD
 
 To Be Documented.
+
+# Local development
+
+1. Install dependencies
+```sh
+yarn
+```
+2. Create `/.env` file based on `/.env.template`
+3. Run
+```sh
+yarn develop
+```
\ No newline at end of file

From 1cb19ff2225c46c2d2c1cc54d27452cc340b0a08 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Mon, 11 Jan 2021 19:04:44 +0100
Subject: [PATCH 02/12] feat: forwards to Stripe checkout upon donation

---
 components/Payment/Payment.js | 73 +++++++++++++++--------------------
 data/de.json                  |  5 +--
 hooks/index.js                |  1 +
 hooks/usePayment.js           | 37 ++++++++++++++++++
 package.json                  |  4 +-
 pages/_document.js            | 12 +++++-
 pages/api/payment.js          | 40 +++++++++++++++++++
 pages/success.js              |  8 ++++
 yarn.lock                     | 23 +++++++++++
 9 files changed, 156 insertions(+), 47 deletions(-)
 create mode 100644 hooks/usePayment.js
 create mode 100644 pages/api/payment.js
 create mode 100644 pages/success.js

diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index eee08d2..3f3bcf5 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useTrip, useTranslation } from '../../hooks';
+import { usePayment, useTrip, useTranslation } from '../../hooks';
 
 import { Select } from '../Select';
 
@@ -12,57 +12,48 @@ import {
   button,
 } from './Payment.module.css';
 
-function usePayment() {
-  const { t, formatNumber } = useTranslation();
-  const {
-    trip: { cost },
-  } = useTrip();
-  const [recipient, setRecipient] = useState('trees');
-  const getUrl = () => {
-    const amount = formatNumber(cost, 2);
-    const language = t('lang');
-    switch (recipient) {
-      case 'trees':
-        return `https://donorbox.org/trees-for-lure?amount=${amount}&language=${language}`;
-      case 'greenpeace':
-        return `https://www.greenpeace.de/spenden?betrag=${amount}`;
-      default:
-        throw new Error('unknown recipient');
-    }
-  };
-  return {
-    options: {
-      trees: t('donateTrees'),
-      greenpeace: t('donateToGreenpeace'),
-    },
-    value: recipient,
-    onChange: setRecipient,
-    href: getUrl(),
-  };
-}
+// function usePayment() {
+//   const { t, formatNumber } = useTranslation();
+//   const {
+//     trip: { cost },
+//   } = useTrip();
+//   const [recipient, setRecipient] = useState('trees');
+//   const getUrl = () => {
+//     const amount = formatNumber(cost, 2);
+//     const language = t('lang');
+//     switch (recipient) {
+//       case 'trees':
+//         return `https://donorbox.org/trees-for-lure?amount=${amount}&language=${language}`;
+//       case 'greenpeace':
+//         return `https://www.greenpeace.de/spenden?betrag=${amount}`;
+//       default:
+//         throw new Error('unknown recipient');
+//     }
+//   };
+//   return {
+//     options: {
+//       trees: t('donateTrees'),
+//       greenpeace: t('donateToGreenpeace'),
+//     },
+//     value: recipient,
+//     onChange: setRecipient,
+//     href: getUrl(),
+//   };
+// }
 
 export default function Payment() {
   const { t, formatNumber } = useTranslation();
   const {
     trip: { cost },
   } = useTrip();
-  const { options, value, onChange, href } = usePayment();
+  const { process } = usePayment();
   return (
     <div className={wrapper}>
       <h3 className={headline}>{t('paymentHeadline')}</h3>
       <p className={amount}>{formatNumber(cost, 2)} €</p>
-      <Select
-        value={value}
-        options={options}
-        onChange={onChange}
-        invert={true}
-        hideLabel={true}
-        className={select}
-        label={t('chooseOrganization')}
-      />
-      <a href={href} className={button}>
+      <button className={button} onClick={()=> process(cost, 1)}>
         {t('makeDonation')}
-      </a>
+      </button>
     </div>
   );
 }
diff --git a/data/de.json b/data/de.json
index 76e0419..f3764f0 100644
--- a/data/de.json
+++ b/data/de.json
@@ -6,14 +6,11 @@
   "analysis": "Analyse",
   "business": "Business",
   "calculateEmissions": "Emissionen berechnen",
-  "chooseOrganization": "Organisation auswählen",
   "cookieConsentButton": "Cookies Akzeptieren",
   "ch4": "Methan",
   "co2": "Kohlendioxid",
   "destination": "Zielflughafen",
   "distance": "Entfernung",
-  "donateToGreenpeace": "Greenpeace unterstützen",
-  "donateTrees": "Bäume pflanzen",
   "economy": "Economy",
   "emissions": "Emissionen",
   "first": "First",
@@ -25,6 +22,8 @@
   "origin": "Abflughafen",
   "passengers": "Passagiere",
   "paymentHeadline": "Offsetting-Kosten",
+  "paymentName": "CO2-Kompensation",
+  "paymentDescription": "Reise über {{ airports }}",
   "premium": "Economy Premium",
   "removeStopover": "Zwischenstop entfernen",
   "roundTrip": "Rückflug",
diff --git a/hooks/index.js b/hooks/index.js
index b5ff0bd..79f261b 100644
--- a/hooks/index.js
+++ b/hooks/index.js
@@ -1,3 +1,4 @@
+export { usePayment } from './usePayment';
 export { useSuggestions } from './useSuggestions';
 export { useTracking, withTracking } from './useTracking';
 export { useTranslation, withTranslation } from './useTranslation';
diff --git a/hooks/usePayment.js b/hooks/usePayment.js
new file mode 100644
index 0000000..86119eb
--- /dev/null
+++ b/hooks/usePayment.js
@@ -0,0 +1,37 @@
+import { useState } from 'react';	
+
+function getPaymentURL(e = 1, n) {	
+  const params = new URLSearchParams({ e: Number(e) });	
+  if (n) params.set('n', Number(n));	
+  return `/api/payment?${params.toString()}`;	
+}	
+
+async function fetchPaymentSession(e, n) {	
+  const response = await fetch(getPaymentURL(e, n));	
+  return response.ok	
+    ? response.json()	
+    : Promise.reject(new Error(response.statusText));	
+}	
+
+async function processPayment(e, n) {	
+  try {	
+    const { loadStripe } = await import('@stripe/stripe-js');	
+    const [stripe, { sessionId }] = await Promise.all([	
+      loadStripe(window.stripeKey),	
+      fetchPaymentSession(e, n),	
+    ]);	
+    stripe.redirectToCheckout({ sessionId });	
+  } catch (error) {	
+    console.error(error);	
+  }	
+}	
+
+export function usePayment() {	
+  const [processing, setProcessing] = useState(false);	
+  const process = (e, n) => {	
+    if (processing) return;	
+    setProcessing(true);	
+    processPayment(e, n);	
+  };	
+  return { processing, process };	
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 21d4816..fbebe3b 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@mdx-js/loader": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
     "@next/mdx": "^9.5.2",
+    "@stripe/stripe-js": "^1.11.0",
     "@turf/distance": "^6.0.1",
     "browserslist": "^4.14.0",
     "cookie": "^0.4.1",
@@ -42,7 +43,8 @@
     "postcss-preset-env": "^6.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "snakecase-keys": "^3.2.0"
+    "snakecase-keys": "^3.2.0",
+    "stripe": "^8.130.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.2",
diff --git a/pages/_document.js b/pages/_document.js
index c45c9f7..b6062e5 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -6,12 +6,13 @@ export default withTranslation(
   class FlygoodDocument extends Document {
     static async getInitialProps(ctx) {
       const initialProps = await Document.getInitialProps(ctx);
+      const stripeApiKey = process.env.STRIPE_PUBLIC_KEY;
       const trackingId = process.env.GA_MEASUREMENT_ID;
       const mapboxToken = process.env.MAPBOX_TOKEN;
-      return { ...initialProps, trackingId, mapboxToken };
+      return { ...initialProps, trackingId, stripeApiKey, mapboxToken };
     }
     render() {
-      const { trackingId, mapboxToken, t } = this.props;
+      const { stripeApiKey, trackingId, mapboxToken, t } = this.props;
       return (
         <Html>
           <Head lang={t('lang')}>
@@ -49,6 +50,13 @@ export default withTranslation(
           <body>
             <Main />
             <NextScript />
+            {stripeApiKey ? (	
+              <script	
+                dangerouslySetInnerHTML={{	
+                  __html: `window.stripeKey = "${stripeApiKey}";`,	
+                }}	
+              />	
+            ) : null}
             {trackingId ? (
               <script
                 dangerouslySetInnerHTML={{
diff --git a/pages/api/payment.js b/pages/api/payment.js
new file mode 100644
index 0000000..001c8a3
--- /dev/null
+++ b/pages/api/payment.js
@@ -0,0 +1,40 @@
+import Stripe from 'stripe';	
+
+import { useTranslation } from '../../hooks';
+
+const stripe = new Stripe(process.env.STRIPE_PRIVATE_KEY);	
+
+const getSuccessUrl = (referer) => {	
+  const url = new URL(referer);	
+  url.pathname = 'success';	
+  return url.toString();	
+};	
+
+const getDescription = (referer) => {	
+  const { t } = useTranslation();
+  const url = new URL(referer);	
+  const trip = url.searchParams.get('a') || '';	
+  return t('paymentDescription').replace('{{ airports }}', trip.split(',').join(', '));	
+};	
+
+export default async (req, res) => {
+  const { t } = useTranslation();
+  const { e = 1, n = 1 } = req.query;	
+  const { referer } = req.headers;	
+  const { id: sessionId } = await stripe.checkout.sessions.create({	
+    submit_type: 'donate',	
+    payment_method_types: ['card'],	
+    line_items: [	
+      {	
+        name: t('paymentName'),	
+        description: getDescription(referer),	
+        amount: e * 100,	
+        currency: 'eur',	
+        quantity: n,	
+      },	
+    ],	
+    success_url: getSuccessUrl(referer),	
+    cancel_url: referer,	
+  });	
+  res.json({ sessionId });	
+};
\ No newline at end of file
diff --git a/pages/success.js b/pages/success.js
new file mode 100644
index 0000000..8936dc6
--- /dev/null
+++ b/pages/success.js
@@ -0,0 +1,8 @@
+import {} from '../components';	
+import { withLoadedTrip } from '../hooks';	
+
+export default withLoadedTrip(function Success() {	
+  return <></>;	
+});	
+
+export { loadTrip as getServerSideProps } from '../hooks';
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 99ac03b..300e5c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1359,6 +1359,11 @@
   resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.2.tgz#5d92d8ad0f2bd79de2290614e74e5a12a0cda02b"
   integrity sha512-ch/16u3OVy/aIXJROwqXZjGw/tFMyG7qy2IGDA2RFjvQMtPyJJrklmwX2EcfH4+4spRI2MZKes2soI+0w2/MDQ==
 
+"@stripe/stripe-js@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.11.0.tgz#00e812d72a7760dae08237875066d263671478ee"
+  integrity sha512-SDNZKuETBEVkernd1tq8tL6wNfVKrl24Txs3p+4NYxoaIbNaEO7mrln/2Y/WRcQBWjagvhDIM5I6+X1rfK0qhQ==
+
 "@turf/distance@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@turf/distance/-/distance-6.0.1.tgz#0761f28784286e7865a427c4e7e3593569c2dea8"
@@ -1408,6 +1413,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
+"@types/node@>=8.1.0":
+  version "14.14.20"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.20.tgz#f7974863edd21d1f8a494a73e8e2b3658615c340"
+  integrity sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -5825,6 +5835,11 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@^6.6.0:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
+  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -6718,6 +6733,14 @@ strip-json-comments@^3.1.0:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+stripe@^8.130.0:
+  version "8.130.0"
+  resolved "https://registry.yarnpkg.com/stripe/-/stripe-8.130.0.tgz#e52a5ee6538a70ce76379364bd3839ca7ea925ab"
+  integrity sha512-9e283EFhxDz7SUcgNiUFRdTZ/kS2IkoT0KBMOJHdf3vY+mvURq355s2E0Zyy9rtNmt+CEZ0nCMiZ3PqIqpp6Pg==
+  dependencies:
+    "@types/node" ">=8.1.0"
+    qs "^6.6.0"
+
 style-loader@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"

From 1c7c05f373edea51da50306287af365af079be51 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Mon, 11 Jan 2021 19:09:27 +0100
Subject: [PATCH 03/12] chore: removes disabled code

---
 components/Payment/Payment.js | 28 ----------------------------
 1 file changed, 28 deletions(-)

diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index 3f3bcf5..7e868b6 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -12,34 +12,6 @@ import {
   button,
 } from './Payment.module.css';
 
-// function usePayment() {
-//   const { t, formatNumber } = useTranslation();
-//   const {
-//     trip: { cost },
-//   } = useTrip();
-//   const [recipient, setRecipient] = useState('trees');
-//   const getUrl = () => {
-//     const amount = formatNumber(cost, 2);
-//     const language = t('lang');
-//     switch (recipient) {
-//       case 'trees':
-//         return `https://donorbox.org/trees-for-lure?amount=${amount}&language=${language}`;
-//       case 'greenpeace':
-//         return `https://www.greenpeace.de/spenden?betrag=${amount}`;
-//       default:
-//         throw new Error('unknown recipient');
-//     }
-//   };
-//   return {
-//     options: {
-//       trees: t('donateTrees'),
-//       greenpeace: t('donateToGreenpeace'),
-//     },
-//     value: recipient,
-//     onChange: setRecipient,
-//     href: getUrl(),
-//   };
-// }
 
 export default function Payment() {
   const { t, formatNumber } = useTranslation();

From 7b7c716f0999d22027c9804d024895c784bd5a7c Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Mon, 11 Jan 2021 19:09:37 +0100
Subject: [PATCH 04/12] chore: ignores local env file

---
 .gitignore | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index fb730e2..46e66c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 .DS_Store
-.next
-node_modules
-.env
\ No newline at end of file
+/.next
+/node_modules
+/.env
\ No newline at end of file

From 94c17d581b62cc8c9eb51635e0e386f1d537a537 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:39:37 +0100
Subject: [PATCH 05/12] feat: adds stripe support

---
 components/ConditionalWrapper.js  |  3 ++
 components/Itinerary/Itinerary.js | 54 ++++++++++++++++++++-----------
 components/Payment/Payment.js     |  2 +-
 components/ThankYou/ThankYou.js   | 12 +++++++
 components/ThankYou/index.js      |  1 +
 components/index.js               |  1 +
 data/de.json                      |  2 ++
 pages/success.js                  | 23 ++++++++++---
 pages/trip.js                     |  2 +-
 readme.md                         |  2 +-
 10 files changed, 76 insertions(+), 26 deletions(-)
 create mode 100644 components/ConditionalWrapper.js
 create mode 100644 components/ThankYou/ThankYou.js
 create mode 100644 components/ThankYou/index.js

diff --git a/components/ConditionalWrapper.js b/components/ConditionalWrapper.js
new file mode 100644
index 0000000..b5e1de9
--- /dev/null
+++ b/components/ConditionalWrapper.js
@@ -0,0 +1,3 @@
+// Thanks to https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2
+const ConditionalWrapper = ({ condition, wrapper, children }) => 
+  condition ? wrapper(children) : children;
\ No newline at end of file
diff --git a/components/Itinerary/Itinerary.js b/components/Itinerary/Itinerary.js
index bf20b6a..3f965c2 100644
--- a/components/Itinerary/Itinerary.js
+++ b/components/Itinerary/Itinerary.js
@@ -13,36 +13,52 @@ import {
   lines,
 } from './Itinerary.module.css';
 
-export default function Itinerary() {
+export default function Itinerary({clickToEdit}) {
   const { query } = useRouter();
   const { t, formatNumber } = useTranslation();
   const {
     trip: { airports, distance, flightClass, passengers },
   } = useTrip();
+
+  const WrappedAirportCard = (airport, key) =>
+    <div className={airportWrapper} key={key}>
+      <AirportCard airport={airport} />
+    </div>;
+
+  const stats =
+    <Lines
+      items={{
+        [t('distance')]: `${formatNumber(distance, 1)} km`,
+        [t('passengers')]: passengers,
+        [t('flightClass')]: t(flightClass),
+      }}
+      className={lines}
+    />;
+
   return (
     <>
       <h3 className={headline}>{t('itinerary')}</h3>
-      {airports.map((airport, index) => (
-        <Link href={{ pathname: '/', query }} key={index}>
+      {clickToEdit
+      ?
+      <>
+        {airports.map((airport, index) => (
+          <Link href={{ pathname: '/', query }} key={index}>
+            <a className={formlink}>
+              {WrappedAirportCard(airport, index)}
+            </a>
+          </Link>
+        ))}
+        <Link href={{ pathname: '/', query }}>
           <a className={formlink}>
-            <div className={airportWrapper}>
-              <AirportCard airport={airport} />
-            </div>
+            {stats}
           </a>
         </Link>
-      ))}
-      <Link href={{ pathname: '/', query }}>
-        <a className={formlink}>
-          <Lines
-            items={{
-              [t('distance')]: `${formatNumber(distance, 1)} km`,
-              [t('passengers')]: passengers,
-              [t('flightClass')]: t(flightClass),
-            }}
-            className={lines}
-          />
-        </a>
-      </Link>
+        </>
+      : <>
+        {airports.map(WrappedAirportCard)}
+        {stats}
+        </>
+      }
     </>
   );
 }
diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index 7e868b6..49d38eb 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -8,7 +8,6 @@ import {
   wrapper,
   headline,
   amount,
-  select,
   button,
 } from './Payment.module.css';
 
@@ -19,6 +18,7 @@ export default function Payment() {
     trip: { cost },
   } = useTrip();
   const { process } = usePayment();
+
   return (
     <div className={wrapper}>
       <h3 className={headline}>{t('paymentHeadline')}</h3>
diff --git a/components/ThankYou/ThankYou.js b/components/ThankYou/ThankYou.js
new file mode 100644
index 0000000..e557dd5
--- /dev/null
+++ b/components/ThankYou/ThankYou.js
@@ -0,0 +1,12 @@
+import { useTranslation } from '../../hooks';
+
+export default function ThankYou() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h3>{t('thankYouHeadline')}</h3>
+      <p>{t('thankYouDescription')}</p>
+    </div>
+  );
+}
diff --git a/components/ThankYou/index.js b/components/ThankYou/index.js
new file mode 100644
index 0000000..4a84688
--- /dev/null
+++ b/components/ThankYou/index.js
@@ -0,0 +1 @@
+export { default as ThankYou } from './ThankYou';
diff --git a/components/index.js b/components/index.js
index 147dfbc..3306b8a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -6,3 +6,4 @@ export { TripForm } from './TripForm';
 export { Itinerary } from './Itinerary';
 export { Payment } from './Payment';
 export { EmissionData } from './EmissionData';
+export { ThankYou } from './ThankYou';
diff --git a/data/de.json b/data/de.json
index f3764f0..7b65ac3 100644
--- a/data/de.json
+++ b/data/de.json
@@ -29,5 +29,7 @@
   "roundTrip": "Rückflug",
   "stopover": "Zwischenstopp",
   "trees": "Baum-Äquivalent",
+  "thankYouHeadline": "Danke für's Spenden!",
+  "thankYouDescription": "Die Spendenquittung kommt im nächsten Januar per E-Mail. 💚",
   "yes": "Ja"
 }
diff --git a/pages/success.js b/pages/success.js
index 8936dc6..fb39592 100644
--- a/pages/success.js
+++ b/pages/success.js
@@ -1,8 +1,23 @@
-import {} from '../components';	
-import { withLoadedTrip } from '../hooks';	
+import Info from '../contents/info.md';
 
-export default withLoadedTrip(function Success() {	
-  return <></>;	
+import { Section, Itinerary, ThankYou, EmissionData } from '../components';
+import { withTrip } from '../hooks';	
+
+export default withTrip(function Success() {	
+  return (
+    <>
+      <Section>
+        <Itinerary clickToEdit={false} />
+      </Section>
+      <Section type="action">
+        <ThankYou />
+      </Section>
+      <Section type="content">
+        <EmissionData />
+        <Info />
+      </Section>
+    </>
+  );
 });	
 
 export { loadTrip as getServerSideProps } from '../hooks';
\ No newline at end of file
diff --git a/pages/trip.js b/pages/trip.js
index 8b3e15d..9292d3c 100644
--- a/pages/trip.js
+++ b/pages/trip.js
@@ -7,7 +7,7 @@ export default withTrip(function Trip() {
   return (
     <>
       <Section>
-        <Itinerary />
+        <Itinerary clickToEdit={true} />
       </Section>
       <Section type="action">
         <Payment />
diff --git a/readme.md b/readme.md
index b04b995..06fbb9d 100644
--- a/readme.md
+++ b/readme.md
@@ -12,4 +12,4 @@ yarn
 3. Run
 ```sh
 yarn develop
-```
\ No newline at end of file
+```

From ec956621cd635f5f7f90de11c386b79eca304d05 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:41:22 +0100
Subject: [PATCH 06/12] chore: removes unused comp

---
 components/ConditionalWrapper.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 components/ConditionalWrapper.js

diff --git a/components/ConditionalWrapper.js b/components/ConditionalWrapper.js
deleted file mode 100644
index b5e1de9..0000000
--- a/components/ConditionalWrapper.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Thanks to https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2
-const ConditionalWrapper = ({ condition, wrapper, children }) => 
-  condition ? wrapper(children) : children;
\ No newline at end of file

From 32244c7767b1bbc62c2779b316ba76683f36d515 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:47:50 +0100
Subject: [PATCH 07/12] refactor: descriptive payment variables

---
 hooks/usePayment.js  | 17 ++++++++---------
 pages/api/payment.js |  8 ++++----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/hooks/usePayment.js b/hooks/usePayment.js
index 86119eb..f4c4d8b 100644
--- a/hooks/usePayment.js
+++ b/hooks/usePayment.js
@@ -1,24 +1,23 @@
 import { useState } from 'react';	
 
-function getPaymentURL(e = 1, n) {	
-  const params = new URLSearchParams({ e: Number(e) });	
-  if (n) params.set('n', Number(n));	
+function getPaymentURL(amount) {	
+  const params = new URLSearchParams({ amount: Number(amount) });	
   return `/api/payment?${params.toString()}`;	
 }	
 
-async function fetchPaymentSession(e, n) {	
-  const response = await fetch(getPaymentURL(e, n));	
+async function fetchPaymentSession(amount) {	
+  const response = await fetch(getPaymentURL(amount));	
   return response.ok	
     ? response.json()	
     : Promise.reject(new Error(response.statusText));	
 }	
 
-async function processPayment(e, n) {	
+async function processPayment(amount) {	
   try {	
     const { loadStripe } = await import('@stripe/stripe-js');	
     const [stripe, { sessionId }] = await Promise.all([	
       loadStripe(window.stripeKey),	
-      fetchPaymentSession(e, n),	
+      fetchPaymentSession(amount),	
     ]);	
     stripe.redirectToCheckout({ sessionId });	
   } catch (error) {	
@@ -28,10 +27,10 @@ async function processPayment(e, n) {
 
 export function usePayment() {	
   const [processing, setProcessing] = useState(false);	
-  const process = (e, n) => {	
+  const process = (amount) => {	
     if (processing) return;	
     setProcessing(true);	
-    processPayment(e, n);	
+    processPayment(amount);	
   };	
   return { processing, process };	
 }
\ No newline at end of file
diff --git a/pages/api/payment.js b/pages/api/payment.js
index 001c8a3..98c8aa2 100644
--- a/pages/api/payment.js
+++ b/pages/api/payment.js
@@ -19,7 +19,7 @@ const getDescription = (referer) => {
 
 export default async (req, res) => {
   const { t } = useTranslation();
-  const { e = 1, n = 1 } = req.query;	
+  const { amount } = req.query;	
   const { referer } = req.headers;	
   const { id: sessionId } = await stripe.checkout.sessions.create({	
     submit_type: 'donate',	
@@ -28,9 +28,9 @@ export default async (req, res) => {
       {	
         name: t('paymentName'),	
         description: getDescription(referer),	
-        amount: e * 100,	
-        currency: 'eur',	
-        quantity: n,	
+        amount: amount * 100,
+        currency: 'eur',
+        quantity: 1,
       },	
     ],	
     success_url: getSuccessUrl(referer),	

From 0b57074200052513d8131c84adb43f560e4beb2f Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:47:57 +0100
Subject: [PATCH 08/12] feat: payment wording

---
 data/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/data/de.json b/data/de.json
index 7b65ac3..d59fe4d 100644
--- a/data/de.json
+++ b/data/de.json
@@ -23,7 +23,7 @@
   "passengers": "Passagiere",
   "paymentHeadline": "Offsetting-Kosten",
   "paymentName": "CO2-Kompensation",
-  "paymentDescription": "Reise über {{ airports }}",
+  "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}",
   "premium": "Economy Premium",
   "removeStopover": "Zwischenstop entfernen",
   "roundTrip": "Rückflug",

From ea34e6185749253d102ab74339ccd7abe6f6f8d3 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:48:43 +0100
Subject: [PATCH 09/12] chore: whitespace

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 46e66c0..bc8c3c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 .DS_Store
 /.next
 /node_modules
-/.env
\ No newline at end of file
+/.env

From ede2c16d3602d53e8ab5efba84a74306b2e65ade Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:49:39 +0100
Subject: [PATCH 10/12] refactor: variable name

---
 components/Itinerary/Itinerary.js | 4 ++--
 pages/success.js                  | 2 +-
 pages/trip.js                     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Itinerary/Itinerary.js b/components/Itinerary/Itinerary.js
index 3f965c2..3809f87 100644
--- a/components/Itinerary/Itinerary.js
+++ b/components/Itinerary/Itinerary.js
@@ -13,7 +13,7 @@ import {
   lines,
 } from './Itinerary.module.css';
 
-export default function Itinerary({clickToEdit}) {
+export default function Itinerary({linkToEdit}) {
   const { query } = useRouter();
   const { t, formatNumber } = useTranslation();
   const {
@@ -38,7 +38,7 @@ export default function Itinerary({clickToEdit}) {
   return (
     <>
       <h3 className={headline}>{t('itinerary')}</h3>
-      {clickToEdit
+      {linkToEdit
       ?
       <>
         {airports.map((airport, index) => (
diff --git a/pages/success.js b/pages/success.js
index fb39592..2a3b248 100644
--- a/pages/success.js
+++ b/pages/success.js
@@ -7,7 +7,7 @@ export default withTrip(function Success() {
   return (
     <>
       <Section>
-        <Itinerary clickToEdit={false} />
+        <Itinerary linkToEdit={false} />
       </Section>
       <Section type="action">
         <ThankYou />
diff --git a/pages/trip.js b/pages/trip.js
index 9292d3c..81fcefb 100644
--- a/pages/trip.js
+++ b/pages/trip.js
@@ -7,7 +7,7 @@ export default withTrip(function Trip() {
   return (
     <>
       <Section>
-        <Itinerary clickToEdit={true} />
+        <Itinerary linkToEdit={true} />
       </Section>
       <Section type="action">
         <Payment />

From fe06987ff70af38bd4b1365030808b41932de183 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 14:51:53 +0100
Subject: [PATCH 11/12] refactor: small cleanups

---
 components/Itinerary/Itinerary.js | 2 +-
 components/Payment/Payment.js     | 2 +-
 hooks/usePayment.js               | 2 +-
 pages/api/payment.js              | 2 +-
 pages/success.js                  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Itinerary/Itinerary.js b/components/Itinerary/Itinerary.js
index 3809f87..ad8bead 100644
--- a/components/Itinerary/Itinerary.js
+++ b/components/Itinerary/Itinerary.js
@@ -27,12 +27,12 @@ export default function Itinerary({linkToEdit}) {
 
   const stats =
     <Lines
+      className={lines}
       items={{
         [t('distance')]: `${formatNumber(distance, 1)} km`,
         [t('passengers')]: passengers,
         [t('flightClass')]: t(flightClass),
       }}
-      className={lines}
     />;
 
   return (
diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index 49d38eb..dc798ef 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -23,7 +23,7 @@ export default function Payment() {
     <div className={wrapper}>
       <h3 className={headline}>{t('paymentHeadline')}</h3>
       <p className={amount}>{formatNumber(cost, 2)} €</p>
-      <button className={button} onClick={()=> process(cost, 1)}>
+      <button className={button} onClick={()=> process(cost)}>
         {t('makeDonation')}
       </button>
     </div>
diff --git a/hooks/usePayment.js b/hooks/usePayment.js
index f4c4d8b..5ed303a 100644
--- a/hooks/usePayment.js
+++ b/hooks/usePayment.js
@@ -33,4 +33,4 @@ export function usePayment() {
     processPayment(amount);	
   };	
   return { processing, process };	
-}
\ No newline at end of file
+}
diff --git a/pages/api/payment.js b/pages/api/payment.js
index 98c8aa2..5c42e81 100644
--- a/pages/api/payment.js
+++ b/pages/api/payment.js
@@ -37,4 +37,4 @@ export default async (req, res) => {
     cancel_url: referer,	
   });	
   res.json({ sessionId });	
-};
\ No newline at end of file
+};
diff --git a/pages/success.js b/pages/success.js
index 2a3b248..55d7d6c 100644
--- a/pages/success.js
+++ b/pages/success.js
@@ -20,4 +20,4 @@ export default withTrip(function Success() {
   );
 });	
 
-export { loadTrip as getServerSideProps } from '../hooks';
\ No newline at end of file
+export { loadTrip as getServerSideProps } from '../hooks';

From 1e301600eb1f619e6445d7ab52ebead0c013b84c Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 13 Jan 2021 15:01:16 +0100
Subject: [PATCH 12/12] docs: updates readme to trigger staging deploy

---
 readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 06fbb9d..4e26769 100644
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,4 @@
-# TBD
+# FlyGood (TBD)
 
 To Be Documented.