From 1f4572bdb91a805f6858622e1c957b77b018e0f5 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 20 Jan 2021 18:00:05 +0100
Subject: [PATCH 1/2] feat: allows to select donation recipient

---
 components/Payment/Payment.js | 25 +++++++++++++++++++++----
 data/de.json                  |  5 ++++-
 hooks/index.js                |  2 +-
 hooks/usePayment.js           | 33 ++++++++++++++++++++++++---------
 pages/api/payment.js          | 14 +++++++++-----
 5 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index dc798ef..2201dc1 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -1,6 +1,8 @@
-import { useState } from 'react';
-
-import { usePayment, useTrip, useTranslation } from '../../hooks';
+import {
+  createContext,
+  useContext,
+} from 'react';
+import { usePayment, useTrip, useTranslation, usePaymentTranslations } from '../../hooks';
 
 import { Select } from '../Select';
 
@@ -11,6 +13,7 @@ import {
   button,
 } from './Payment.module.css';
 
+const PaymentContext = createContext({});
 
 export default function Payment() {
   const { t, formatNumber } = useTranslation();
@@ -18,12 +21,26 @@ export default function Payment() {
     trip: { cost },
   } = useTrip();
   const { process } = usePayment();
+  const { recipients } = usePaymentTranslations();
+  
+  // Destination is view-only and we'll individually reach out to donors
+  let { recipient } = useContext(PaymentContext);
+  recipient = Object.keys(recipients)[0];
 
   return (
     <div className={wrapper}>
       <h3 className={headline}>{t('paymentHeadline')}</h3>
       <p className={amount}>{formatNumber(cost, 2)} €</p>
-      <button className={button} onClick={()=> process(cost)}>
+      <Select
+        value={recipient}
+        options={recipients}
+        onChange={newValue => recipient = newValue}
+        invert={true}
+        hideLabel={true}
+        // className={select}
+        label={t('chooseOrganization')}
+      />
+      <button className={button} onClick={()=> process(cost, recipient)}>
         {t('makeDonation')}
       </button>
     </div>
diff --git a/data/de.json b/data/de.json
index d59fe4d..fa5974e 100644
--- a/data/de.json
+++ b/data/de.json
@@ -6,11 +6,14 @@
   "analysis": "Analyse",
   "business": "Business",
   "calculateEmissions": "Emissionen berechnen",
+  "chooseOrganization": "Organisation auswählen",
   "cookieConsentButton": "Cookies Akzeptieren",
   "ch4": "Methan",
   "co2": "Kohlendioxid",
   "destination": "Zielflughafen",
   "distance": "Entfernung",
+  "donationRecipient_greenpeace": "Greenpeace unterstützen",
+  "donationRecipient_atmosfair": "Atmosfair unterstützen",
   "economy": "Economy",
   "emissions": "Emissionen",
   "first": "First",
@@ -23,7 +26,7 @@
   "passengers": "Passagiere",
   "paymentHeadline": "Offsetting-Kosten",
   "paymentName": "CO2-Kompensation",
-  "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}",
+  "paymentDescription": "Flugreise mit diesen Stationen: {{ airports }}. Diese Spende wird {{ recipient }}",
   "premium": "Economy Premium",
   "removeStopover": "Zwischenstop entfernen",
   "roundTrip": "Rückflug",
diff --git a/hooks/index.js b/hooks/index.js
index 79f261b..d863ce4 100644
--- a/hooks/index.js
+++ b/hooks/index.js
@@ -1,4 +1,4 @@
-export { usePayment } from './usePayment';
+export { usePayment, usePaymentTranslations } 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
index 5ed303a..19454f1 100644
--- a/hooks/usePayment.js
+++ b/hooks/usePayment.js
@@ -1,36 +1,51 @@
 import { useState } from 'react';	
+import { useTranslation } from './useTranslation';
 
-function getPaymentURL(amount) {	
-  const params = new URLSearchParams({ amount: Number(amount) });	
+function getPaymentURL(amount, recipient) {	
+  const params = new URLSearchParams({
+    amount: Number(amount),
+    recipient: recipient.replace(/[^a-z]+/gi, '')
+  });	
   return `/api/payment?${params.toString()}`;	
 }	
 
-async function fetchPaymentSession(amount) {	
-  const response = await fetch(getPaymentURL(amount));	
+async function fetchPaymentSession(amount, recipient) {	
+  const response = await fetch(getPaymentURL(amount, recipient));	
   return response.ok	
     ? response.json()	
     : Promise.reject(new Error(response.statusText));	
 }	
 
-async function processPayment(amount) {	
+async function processPayment(amount, recipient) {	
   try {	
     const { loadStripe } = await import('@stripe/stripe-js');	
     const [stripe, { sessionId }] = await Promise.all([	
       loadStripe(window.stripeKey),	
-      fetchPaymentSession(amount),	
+      fetchPaymentSession(amount, recipient),	
     ]);	
     stripe.redirectToCheckout({ sessionId });	
   } catch (error) {	
     console.error(error);	
   }	
-}	
+}
+
 
 export function usePayment() {	
   const [processing, setProcessing] = useState(false);	
-  const process = (amount) => {	
+  const process = (amount, recipient) => {	
     if (processing) return;	
     setProcessing(true);	
-    processPayment(amount);	
+    processPayment(amount, recipient);	
   };	
   return { processing, process };	
 }
+
+export function usePaymentTranslations() {
+  const { t } = useTranslation();
+  return {
+    recipients: {
+      atmosfair: t("donationRecipient_atmosfair"),
+      greenpeace: t("donationRecipient_greenpeace"),
+    }
+  };
+}
\ No newline at end of file
diff --git a/pages/api/payment.js b/pages/api/payment.js
index 5c42e81..d4e78ef 100644
--- a/pages/api/payment.js
+++ b/pages/api/payment.js
@@ -1,6 +1,6 @@
 import Stripe from 'stripe';	
 
-import { useTranslation } from '../../hooks';
+import { usePaymentTranslations, useTranslation } from '../../hooks';
 
 const stripe = new Stripe(process.env.STRIPE_PRIVATE_KEY);	
 
@@ -10,16 +10,20 @@ const getSuccessUrl = (referer) => {
   return url.toString();	
 };	
 
-const getDescription = (referer) => {	
+const getDescription = (referer, recipient) => {	
   const { t } = useTranslation();
   const url = new URL(referer);	
   const trip = url.searchParams.get('a') || '';	
-  return t('paymentDescription').replace('{{ airports }}', trip.split(',').join(', '));	
+  
+  return t('paymentDescription')
+    .replace('{{ airports }}', trip.split(',').join(', '))
+    .replace('{{ recipient }}', recipient);	
 };	
 
 export default async (req, res) => {
   const { t } = useTranslation();
-  const { amount } = req.query;	
+  const { recipients } = usePaymentTranslations();
+  const { amount, recipient } = req.query;
   const { referer } = req.headers;	
   const { id: sessionId } = await stripe.checkout.sessions.create({	
     submit_type: 'donate',	
@@ -27,7 +31,7 @@ export default async (req, res) => {
     line_items: [	
       {	
         name: t('paymentName'),	
-        description: getDescription(referer),	
+        description: getDescription(referer, recipients[recipient.replace(/[^a-z]+/gi, '')]),	
         amount: amount * 100,
         currency: 'eur',
         quantity: 1,

From 36f406a066267d70bf6a6790ee78976928995dd2 Mon Sep 17 00:00:00 2001
From: Alexander Thiel <me@alexthiel.de>
Date: Wed, 20 Jan 2021 18:01:09 +0100
Subject: [PATCH 2/2] feat: smaller recipient select box

---
 components/Payment/Payment.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Payment/Payment.js b/components/Payment/Payment.js
index 2201dc1..8d569ae 100644
--- a/components/Payment/Payment.js
+++ b/components/Payment/Payment.js
@@ -10,6 +10,7 @@ import {
   wrapper,
   headline,
   amount,
+  select,
   button,
 } from './Payment.module.css';
 
@@ -37,7 +38,7 @@ export default function Payment() {
         onChange={newValue => recipient = newValue}
         invert={true}
         hideLabel={true}
-        // className={select}
+        className={select}
         label={t('chooseOrganization')}
       />
       <button className={button} onClick={()=> process(cost, recipient)}>