Mission Bit Donation Portal

Setup

• Recommended: Set up Visual Studio Code
• Install Node.js
• Check out a local copy of this repository (e.g. with Github Desktop)
• Run npm install from the Terminal (or Integrated Terminal)

Usage

These are the Terminal commands to work with the site:

Update the dependencies (make sure to do this if package.json has changed, often after a git pull):

npm install

Run the development server:

npm run dev

Fix any formatting or lint issues:

npm run fix

Run a full build of the site:

npm run build

Run the static export of the site:

npm run export

Visual Studio Code Setup

Visual Studio Code is the editor we recommend for working on this site.

Download Visual Studio Code from code.visualstudio.com

For each of the following commands, launch VS Code Quick Open (⌘+P), paste the command, and press enter:

ext install Divlo.vscode-styled-jsx-syntax
ext install Divlo.vscode-styled-jsx-languageserver
ext install msjsdiag.debugger-for-chrome
ext install editorconfig.editorconfig
ext install dbaeumer.vscode-eslint
ext install esbenp.prettier-vscode
ext install bungcip.better-toml

Coding Conventions

This site is built with the Next.js framework in Typescript using React.

The user interface is primarily built using components from Headless UI and we use Sass modules to manage CSS, much of it is ported from the missionbit.org Wordpress theme.

Code formatting and style is managed automatically with Prettier and ESLint. This is automatically run before each git commit by husky.

Timestamps are represented in ISO 8601 format, such as "2020-06-20T08:00-07:00" for June 20, 2020 at 8am Pacific Daylight Time or "2020-11-12T18:00-08:00" for November 12 at 6pm Pacific Standard Time.

Asset Conventions

PDFs, zip files, and other data formats that are not displayed inline on the web are stored in the public folder. These URLs map directly to the website, e.g. public/favicon.ico is available from https://donate.missionbit.org/favicon.ico.

Icons and user interface elements should be in SVG format. It's recommended to embed these as React components as that makes it possible to apply styles to them from the document. One example would be the expand button we use on FAQs, if it was not an inline SVG we would have to have a separate file for each color. See components/icons/ for examples of this technique.

Fonts should be hosted locally in woff and woff2 formats. The files should be stored in the public/fonts/ folder, the styles can be added to site using a component components/fonts/ that is referenced from the main Layout component. Take care to only include font weights that are in use on the site, and choose the files carefully as fonts are large. Generally we only depend on the Latin character set so we may use fonts that only include those glyphs.

For vector content (diagrams, logos, etc.), it's preferable to use an SVG formatted file. These are generally smaller than their bitmap counterpart (JPG, PNG) and are scalable up or down without loss of quality. If drawn by hand or generated by processing a bitmap image, the paths should be simplified first using Illustrator or a similar tool. See public/images/ for examples of these. Generally the images are in a folder with the same name as the page it is associated with.

Other images (JPG, PNG) such as photos on the site are passed through next-optimized-images. The source resolution on our site is typically the highest resolution that they may be displayed. For example, the team headshots are currently saved at 400x400, which is much smaller than the original photos. Ideally, we host at least two versions of each image (jpg or png, and webp) as an optimization for modern browsers. In some cases, such as the large photos for student testimonials, we also have multiple sizes of each image. This is a trade-off that allows us to improve load times for users who have smaller screens. In the future we may be able to generate these resized images automatically, but the current next-optimized-images can resize an image or convert it to webp but not both. See public/images/ for examples of these. Generally the images are in a folder with the same name as the page it is associated with.

Runbook

The site is deployed by Vercel for both production and PR deployment previews.

The Vercel dashboard is at vercel.com/missionbit/donate-missionbit-org. Contact bob@missionbit.org if you need access to this team for some reason.

The deployment configuration is at vercel.com/missionbit/donate-missionbit-org/settings/environment-variables. These environment variables are used by APIs on the site:

• SENTRY_AUTH_TOKEN - Sentry authorization token (for marking releases)
• SENTRY_ORG - Set to mission-bit
• SENTRY_PROJECT - Set to mission-bit
• SENDGRID_API_KEY - API key for sending email
• STRIPE_PK_LIVE - Publishable key for missionbit.org
• STRIPE_SK_LIVE - Secret key for missionbit.org
• STRIPE_WEBHOOK_SIGNING_SECRET_LIVE - Webhook signing key for missionbit.org
• STRIPE_WEBHOOK_SIGNING_SECRET_SALESFORCE - Webhook signing secret for the Salesforce hooks
• STRIPE_PK_TEST - Publishable key for testing (PR builds)
• STRIPE_SK_TEST - Secret key for testing (PR builds)
• STRIPE_WEBHOOK_SIGNING_SECRET_TEST - Webhook signing key for testing (PR builds)
• EVENTBRITE_TOKEN - An Eventbrite API key "Private token" for processing webhooks
• SLACK_TOKEN - A Slack token for processing Eventbrite webhooks
• SALESFORCE_INSTANCE_URL - Salesforce instance for syncing opportunities
• SALESFORCE_CLIENT_ID - Salesforce credentials for syncing opportunities
• SALESFORCE_CLIENT_SECRET - Salesforce credentials for syncing opportunities
• GIVEBUTTER_API_KEY - Givebutter API key for syncing

The webhook for Stripe should be at https://donate.missionbit.org/api/webhook for the following event types:

• checkout.session.completed
• invoice.payment_succeeded
• invoice.payment_failed

DNS is currently hosted by:

• Cloudflare (missionbit.com, missionbit.org)

Errors are collected with sentry.io at https://sentry.io/organizations/mission-bit/projects/donatemissionbitorg/

Donations are processed with Stripe.

In order to test the Stripe integration locally, you must set the environment variables below. You can find their values from Stripe's Developer settings while viewing test data.

With local and PR deployments the Stripe integration is in test mode, so test cards should be used such as 4242 4242 4242 4242.

You should use the STRIPE_WEBHOOK_SIGNING_SECRET_TEST key generated by having Stripe CLI listen in a separate terminal before starting the dev server:

stripe listen --forward-to=http://localhost:3000/api/webhook

The easiest way to ensure they are set is to create a .env file in this directory with the following format (actual key suffixes replaced by REDACTED):

STRIPE_PK_TEST=pk_test_REDACTED
STRIPE_SK_TEST=sk_test_REDACTED
STRIPE_WEBHOOK_SIGNING_SECRET_TEST=whsec_REDACTED
SENDGRID_API_KEY=REDACTED

Salesforce Notes

• Create a Sandbox
• Create API Only User profile
• Create API Only user https://help.salesforce.com/s/articleView?id=000386144&type=1
• Create the App in the sandbox
• Client Credentials flow https://help.salesforce.com/s/articleView?id=sf.remoteaccess_oauth_client_credentials_flow.htm&type=5&language=en_US
• Create Stripe_Customer_ID custom field on Contact
• Create Stripe_Charge_ID custom field on Opportunity
• Create Stripe_Subscription_ID custom field on Recurring Donation
• Update Page Layouts for Contact, Opportunity, Recurring Donation

npx @salesforce/cli login org --instance-url=https://missionbit--stripedev.sandbox.my.salesforce.com --set-default

TODO - update salesforce notes