<commit_before># Donation Components

The goal of our components is to allow easy and fast changes to our donation form so we can stand up good AB tests quickly. Because, we can then easily move them around and share their code between multiple tests. Maintain a component in one place, while multiple tests are using it.

## Form Components

These are components that handle data input. Example: fields like name, email, and donation amount. They handle their own state and validation behind an API.

### amount-buttons.jsx

Gets a donation amount from the user. Four static donation amount buttons, and a custom amount button.

### donation-frequency.jsx

Gets the donation frequency from the user, like montly or one-time.

### credit-card-info.jsx

Inputs for credit card number, expiration date, and cvc code.

### name-input.jsx

Inputs for first and last name.

### address-input.jsx

Inputs for address, country, province/state, and postal/zip code. Handles toggling state/province dropdown depending on the selected country.

### email-input.jsx

Just a single input for email.

### privacy-policy-input.jsx

Single checkbox for users accepting our privacy policy.

## Form Submission Components

Buttons that handle submission of a donation to the server.

### credit-card-button.jsx

A button for chosing credit card as a payment. Doesn't usually submit, but just moves the form along to get more info, but could submit directly if enough info has already been collected.

### paypal-button.jsx

Redirects to paypal to PayPal with donation amount and frequency, but could be setup to move to a next step.

### stripe-button.jsx

Opens Stripe widget to accept a donation, similar to the PayPal redirect.

### donate-button.jsx

A button that generally submits a donation to Stripe, this looks and works different than `credit-card-button.jsx`, in that it displays "donate now", and looks like a button and not a toggled state between tow kinds of payment providers. This is intended for use after a payment provided has been selected by the user.

## Navigation Components

Components that handle navigation between sequences, or pages. Like a newxt button, a sequence menu, or the actual displayed sequence and navigating between them.

### navigation-button.jsx

Button in the navigation header that handles going back to complete sequence pages.

### navigation-page.jsx

Displays child content as a single page, and handles the transition between multiple pages.

### next-button.jsx

Button that handles moving forward to incomplete sequence pages.

## Layout Components

Just static UI components like header, footer, and basic containers.

### navigation-container.jsx

Wraps all the navigation pages, and handles resizing of the page based on the new page content.

### navigation-menu.jsx

Just a simple bit of wrapper around the header navigation back buttons.

### footer.jsx
<commit_msg>update donation_components.md<commit_after># Donation Components

The goal of our components is to allow easy and fast changes to our donation form so we can stand up good AB tests quickly. Because, we can then easily move them around and share their code between multiple tests. Maintain a component in one place, while multiple tests are using it.

## Form Components

These are components that handle data input. Example: fields like name, email, and donation amount. They handle their own state and validation behind an API.

### amount-buttons.jsx

Gets a donation amount from the user. Four static donation amount buttons, and a custom amount button.

### donation-frequency.jsx

Gets the donation frequency from the user, like montly or one-time.

### credit-card-info.jsx

Inputs for credit card number, expiration date, and cvc code.

### name-input.jsx

Inputs for first and last name.

### address-input.jsx

Inputs for address, country, province/state, and postal/zip code. Handles toggling state/province dropdown depending on the selected country.

### email-input.jsx

Just a single input for email.

### privacy-policy-input.jsx

Single checkbox for users accepting our privacy policy.

## Form Submission Components

Buttons that handle submission of a donation to the server.

### credit-card-button.jsx

A button for chosing credit card as a payment. Doesn't usually submit, but just moves the form along to get more info, but could submit directly if enough info has already been collected.

### paypal-button.jsx

Redirects to paypal to PayPal with donation amount and frequency, but could be setup to move to a next step.

### stripe-button.jsx

Opens Stripe widget to accept a donation, similar to the PayPal redirect.

### donate-button.jsx

A button that generally submits a donation to Stripe, this looks and works different than `credit-card-button.jsx`, in that it displays "donate now", and looks like a button and not a toggled state between tow kinds of payment providers. This is intended for use after a payment provided has been selected by the user.

## Navigation Components

Components that handle navigation between sequences, or pages. Like a next button, a sequence menu, or the actual displayed sequence and navigating between them.

### navigation-button.jsx

Button in the navigation header that handles going back to complete sequence pages.

### navigation-page.jsx

Displays child content as a single page, and handles the transition between multiple pages.

### next-button.jsx

Button that handles moving forward to incomplete sequence pages.

## Layout Components

Just static UI components like header, footer, and basic containers.

### navigation-container.jsx

Wraps all the navigation pages, and handles resizing of the page based on the new page content.

### navigation-menu.jsx

Just a simple bit of wrapper around the header navigation back buttons.

### footer.jsx

{'fraction_non_alphanumeric': 0.05743185324875707, 'fraction_numerical': 0.0, 'mean_word_length': 4.347387717690192, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4524205', 'n_tokens_mistral': 1494, 'n_tokens_neox': 1448, 'n_words': 817}