Merge pull request #132 from effective-altruism-australia/master

Bring live in line with master

.devcontainer/default/devcontainer.json

@@ -1,31 +1,30 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-dockerfile
 {
-	"name": "ubuntu16.04",
-	"build": {
-		// Sets the run context to one level up instead of the .devcontainer folder.
-		"context": "../..",
-		// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
-		"dockerfile": "../../Dockerfile"
-	},
-
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [8000],
-
-	// Uncomment the next line to run commands after the container is created.
-	"postCreateCommand": "cat /etc/os-release",
-
-	// Configure tool-specific properties.
-	// "customizations": {},
-
-	"extensions": [
-    "ms-python.python@2021.9.1246542782",
-    "ms-python.debugpy@2023.1.12492010"
-  ]
-
-	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "devcontainer"
-}
+  "name": "ubuntu16.04",
+  "build": {
+    // Sets the run context to one level up instead of the .devcontainer folder.
+    "context": "../..",
+    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
+    "dockerfile": "../../Dockerfile"
+  },
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [
+    8000
+  ],
+  // Uncomment the next line to run commands after the container is created.
+  "postCreateCommand": "cat /etc/os-release",
+  // Configure tool-specific properties.
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "ms-python.python@2021.9.1246542782",
+        "ms-python.debugpy@2023.1.12492010"
+      ]
+    }
+  }
+  // Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "devcontainer"
+}

.devcontainer/ubuntu24.04/devcontainer.json

@@ -8,19 +8,23 @@
 		// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
 		"dockerfile": "../../Dockerfile.ubuntu24.04"
 	},
-
 	// Features to add to the dev container. More info: https://containers.dev/features.
 	// "features": {},
-
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [8000],
-
+	"forwardPorts": [
+		8000
+	],
 	// Uncomment the next line to run commands after the container is created.
-	"postCreateCommand": "cat /etc/os-release"
-
+	"postCreateCommand": "cat /etc/os-release",
 	// Configure tool-specific properties.
-	// "customizations": {},
-
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-python.python@2021.9.1246542782",
+				"ms-python.debugpy@2023.1.12492010"
+			]
+		}
+	}
 	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
 	// "remoteUser": "devcontainer"
-}
+}

.gitignore

@@ -67,3 +67,12 @@ venv/
 
 # Salt
 deploy/pillar/eaa.sls*
+
+donation_portal_env
+
+# Frontend
+frontend/node_modules/
+frontend/test-results/
+frontend/playwright-report/
+frontend/blob-report/
+frontend/playwright/.cache/

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "python.pythonPath": "/workspaces/donation_portal-2/donation_portal_env/bin/python2.7"
+  "python.pythonPath": "/workspaces/donation_portal-2/donation_portal_env/bin/python2.7",
+  "python.linting.enabled": true
 }

Dockerfile

@@ -1,6 +1,6 @@
 # For local development and testing only.
 
-FROM ubuntu:16.04
+FROM --platform=linux/amd64 ubuntu:16.04
 
 # Install sudo
 RUN apt-get update && apt-get install -y sudo
@@ -39,7 +39,9 @@ RUN sudo apt-get update && sudo apt-get install -y \
 USER postgres
 RUN service postgresql start && \
   psql -c "ALTER USER postgres PASSWORD 'password';" && \
-  psql -c "CREATE DATABASE eaa;"
+  psql -c "CREATE ROLE eaa WITH LOGIN PASSWORD 'password';" && \
+  psql -c "CREATE DATABASE donations;" && \
+  psql -c "GRANT ALL PRIVILEGES ON DATABASE donations TO eaa;"
 USER devuser
 
 # Upgrade pip to the last version that supports Python 2.7 and install the last
@@ -65,6 +67,9 @@ RUN mkdir $NVM_DIR && \
 #   pip install -r deps/pip.base && \
 #   pip install -r deps/pip
 
+# Fix "missing locales" errors in this Ubuntu image
+RUN sudo locale-gen "en_US.UTF-8"
+
 # Document that the service listens on port 8000. Note, this doesn't actually
 # open the port - you'll need to run `docker run -p 8000:8000 <image name>`.
 EXPOSE 8000

Dockerfile.ubuntu24.04

@@ -60,7 +60,9 @@ RUN pyenv global 2.7.18
 USER postgres
 RUN service postgresql start && \
   psql -c "ALTER USER postgres PASSWORD 'password';" && \
-  psql -c "CREATE DATABASE eaa;"
+  psql -c "CREATE ROLE eaa WITH LOGIN PASSWORD 'password';" && \
+  psql -c "CREATE DATABASE donations;" && \
+  psql -c "GRANT ALL PRIVILEGES ON DATABASE donations TO eaa;"
 USER devuser
 
 # Upgrade pip to the last version that supports Python 2.7 and install the last

donation/views/pledge.py

@@ -195,6 +195,12 @@ def process_session_completed(data):
 @app.task()
 def process_payment_intent_succeeded(data, org):
     print(org)
+
+    # Ignore duplicate events (Stripe sometimes sends the same event multiple times).
+    # See here for more: https://docs.stripe.com/webhooks#handle-duplicate-events
+    if StripeTransaction.objects.filter(payment_intent_id=data['id']).exists():
+        return
+
     stripe.api_key = settings.STRIPE_API_KEY_DICT.get(org)
 
     if org == "eaa":

frontend/README.md

@@ -0,0 +1,52 @@
+# A simple dependency free donation form
+This form is designed to replace our react-based donation form. The goals of this form are to be:
+
+**Dependency free** - no need to regularly update dependencies.
+**Easy to deploy** - just copy and paste the HTML into the WordPress site.
+**Visually improved** - and matches the design of the rest of our WordPress site.
+**Accessible** - follows best practices for accessibility.
+**Easy to customise** - just clone this repo and change the HTML/CSS/JS as needed.
+**Easy to maintain** - only a few hundred lines of simple code that beginners can grok.
+
+## Allocation terminology
+| Term   | Description   |
+|--------|---------------|
+| Most effective (default) | This option allocates the donation to the most effective charities (according to us), based on evidence and need. This option is selected by default in the standard form. |
+| Specific charity (or charities)  | This option allows donors to allocate their donation to our various partner charities. This option can be selected in the standard form. |
+| Direct link charity | A direct link charity is an EAA partner charity selected by visiting our  `/donate`  url with  `?charity=charity_name`  appended to the end. Direct link charities are not relevant to the standard form. |
+
+## Compatibility
+We try to only use features that are "Widely available" according to [Baseline](https://web.dev/baseline) to ensure compatibility with all modern browsers.
+
+## Requirements
+- NodeJS version v22.9.01 (this only used to concat the files and for development convenience. We will replace all need for NodeJS with Python once the rest of the project has moved to Python 3).
+
+## Deployment
+__Note: the deployment process has changed to allow us to avoid iframes and to move beyond NodeJS version 8 (the latest version available for our current server). To deploy, do the following on your *local* machine:__
+
+1. Run `npm run build` to concatenate the src files into a single file that will be located at `donation/templates/donation_form.html`.
+2. Copy the section between the relevant comments in `donation/templates/donation_form.html` into the WordPress site.
+
+## Development
+
+### Without Django (recommended)
+If you're just working on the frontend, you can avoid setting up Django.
+1. Run `npx http-server -p 8000 ../donation/templates/` from the `frontend` directory to serve the files.
+2. Run `npm run dev` from the `frontend` directory to watch files for changes and rebuild the concatenated file at `donation/templates/donation_form.html`.
+3. Visit the page at `localhost:8000/donation_form.html` to see the form.
+
+### With Django
+1. Follow the instructions to setup and run the Django server (`python manage.py runserver`).
+2. Run `npm run dev` from the `frontend` directory to watch files for changes and rebuild the concatenated file at `donation/templates/donation_form.html`.
+3. Visit the page at `localhost:8000/pledge_new` to see the form.
+
+## Testing
+
+### With VSCode Playwright extension (recommended)
+1. Run `npm install` and then `npx playwright install` to install the necessary dependencies.
+2. Install the Playwright VSCode extension. This is particularly useful for creating new tests as it lets you record your actions in the browser.
+3. Run the tests from VSCode's "Testing" sidebar.
+
+### Commandline
+1. Run `npm install` and then `npx playwright install` to install the necessary dependencies.
+2. Run `npx playwright test` to run the tests from the command line.

frontend/build.js

@@ -0,0 +1,80 @@
+const fs = require("fs");
+
+// Note: The "Paste this into WordPress" instructions below are for the final
+// output. Do not copy and paste any of the code in this file into WordPress.
+const donationFormHtml = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EAA Donation Form</title>
+    <!-- These styles are just for local development (i.e. when viewing outside of WordPress) -->
+    <style>
+      #donation-form-host {
+        max-width: 720px;
+        margin: 0 auto;
+        padding: 32px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Paste this into WordPress: START -->
+
+    <!-- WARNING: If you're looking at this from within WordPress, please note that any changes you make here will be lost! Please submit changes as pull requests to: https://github.com/effective-altruism-australia/donation_portal -->
+
+    <template id="donation-form">
+      <style>
+        ${fs.readFileSync("./src/styles/main.css", "utf8")}
+        ${fs.readFileSync("./src/styles/utilities.css", "utf8")}
+        ${fs.readFileSync("./src/styles/custom-inputs.css", "utf8")}
+      </style>
+
+      <form onsubmit="return formController.handleFormSubmit();">
+        ${fs.readFileSync("./src/donation-frequency-section.html", "utf8")}
+        ${fs.readFileSync("./src/allocation-section.html", "utf8")}
+        ${fs.readFileSync("./src/direct-link-charity-section.html", "utf8")}
+        ${fs.readFileSync("./src/amount-section.html", "utf8")}
+        ${fs.readFileSync("./src/specific-allocation-section.html", "utf8")}
+        ${fs.readFileSync("./src/amplify-impact-section.html", "utf8")}
+        ${fs.readFileSync("./src/total-amount-section.html", "utf8")}
+        ${fs.readFileSync("./src/personal-details-section.html", "utf8")}
+        ${fs.readFileSync("./src/communications-section.html", "utf8")}
+        ${fs.readFileSync("./src/payment-method-section.html", "utf8")}
+        ${fs.readFileSync("./src/gift-section.html", "utf8")}
+        ${fs.readFileSync("./src/festive-gift-section.html", "utf8")}
+        ${fs.readFileSync("./src/donate-button-section.html", "utf8")}
+        ${fs.readFileSync("./src/bank-instructions-section.html", "utf8")}
+        ${fs.readFileSync("./src/thankyou-section.html", "utf8")}
+        ${fs.readFileSync("./src/error-section.html", "utf8")}
+        ${fs.readFileSync("./src/loader.html", "utf8")}
+      </form>
+    </template>
+
+    <div id="donation-form-host"></div>
+
+    <script src="https://js.stripe.com/v3/"></script>
+    <script>
+      const STRIPE_API_KEY_EAAE = "${process.env.STRIPE_API_KEY_EAAE}";
+      const STRIPE_API_KEY_EAA = "${process.env.STRIPE_API_KEY_EAA}";
+      const ORIGIN = "${process.env.ORIGIN}";
+      ${fs.readFileSync("./src/scripts/utilities.js", "utf8")}
+      ${fs.readFileSync("./src/scripts/FormController.js", "utf8")}
+    </script>
+
+    <!-- Paste this into WordPress: END -->
+  
+  </body>
+</html>`;
+
+fs.writeFileSync(
+  "../donation/templates/donation_form.html",
+  donationFormHtml,
+  "utf8"
+);
+
+console.log("Build finished!");

frontend/dev.env

@@ -0,0 +1,4 @@
+# DEV VARIABLES
+STRIPE_API_KEY_EAA=pk_test_51I1Q7kEO8N9VNJdmyMo0YEudkFMpRHZrkC4mstwlONj5kR81SRzebGlCQbJBSk6d5qT6QUObEqV9Q3tjPQiFmGZH00wvKu7GSr
+STRIPE_API_KEY_EAAE=pk_test_51MbDLyBiXhYHr2MDkG96cSLklsnxVpXvYQAqFoAoPIxca0fG0LO4AGozaA7mGdKg5zzpddRy611y7fzU6cMo881K00ZCan1Kuj
+ORIGIN=http://localhost:8000

frontend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "eaa-donation-form",
+  "version": "1.0.0",
+  "description": "A simple dependency free donation form",
+  "engines": {
+    "node": ">=22.4.1"
+  },
+  "main": "build.js",
+  "scripts": {
+    "build": "node --env-file=prod.env build.js",
+    "dev": "node --env-file=dev.env --watch-path=./src build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Nathan Sherburn",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.48.0",
+    "@types/node": "^22.7.4"
+  }
+}