internetarchive
diff --git a/‎.claude/Apr 6, 2026.md‎
Lines changed: 32 additions & 0 deletions b/‎.claude/Apr 6, 2026.md‎
Lines changed: 32 additions & 0 deletions
diff --git a/‎.claude/Mar 16, 2026.md‎
Lines changed: 35 additions & 0 deletions b/‎.claude/Mar 16, 2026.md‎
Lines changed: 35 additions & 0 deletions
diff --git a/‎.claude/Mar 17, 2026.md‎
Lines changed: 65 additions & 0 deletions b/‎.claude/Mar 17, 2026.md‎
Lines changed: 65 additions & 0 deletions
diff --git a/‎.claude/Mar 9, 2026.md‎
Lines changed: 49 additions & 0 deletions b/‎.claude/Mar 9, 2026.md‎
Lines changed: 49 additions & 0 deletions
diff --git a/‎demo/index.html‎
Lines changed: 11 additions & 5 deletions b/‎demo/index.html‎
Lines changed: 11 additions & 5 deletions
diff --git a/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions b/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 1 deletion b/‎package.json‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/form-sections/parts/braintree-manager.ts‎
Lines changed: 72 additions & 10 deletions b/‎src/form-sections/parts/braintree-manager.ts‎
Lines changed: 72 additions & 10 deletions
@@ -0,0 +1,32 @@
+# Session Notes - Apr 6, 2026
+
+## Branch: `claude/competent-swanson` (PayPal vault flow)
+
+### Work Done
+
+**Code review fixes (post-feature):**
+- Fixed race condition in `braintree-manager.ts`: `paypalButtonRendered` now set optimistically before async call, reset to `false` on error
+- Fixed copy-paste bug in `plans.ts`: Venmo link was displaying `paypalEmail` instead of `venmoUsername`
+- Replaced `self = this` alias with arrow functions in PayPal delegate
+- Removed unused `setupPaymentHandlers()` method
+- Replaced string literals (`'creditCard'`, `'Venmo'`) with `PaymentProvider` enum in `plans.ts`
+- Removed debug `console.log('contactFormSectioncontactFormSection', ...)` from `payment-method.ts`
+- Fixed import order ESLint errors in `plan.ts` and `plans.ts`
+
+**Tests added:**
+- `plan.test.ts`: PayPal email `'not_found'` fallback, old btData snapshot on PayPal switch, Venmo provider switch
+- `edit-plan-flow-payment-method.test.ts`: `PayPalVaultError` sets `updateStatus = 'fail'`, submit button hidden for PayPal
+
+### Key Decisions
+- `paypalButtonRendered` set optimistically (before async) to prevent infinite retry; reset on error so retries are possible after failure
+- `PaymentProvider` enum used consistently throughout — no more string literals for payment method types
+- Tests bypass Braintree SDK entirely by dispatching events directly on components
+
+### Commits on this branch
+- `fix: correct PayPal email fallback test to assert 'not_found'`
+- `fix: resolve high priority code review issues in PayPal payment flow`
+- `fix: resolve remaining code review issues`
+
+### Pending
+- PRs not yet created for any of the feature branches (`competent-swanson`, `venmo-integration`, `google-pay-integration`, `apple-pay-integration`)
+- `npm run test` not yet verified (sandbox blocks port 8000 — must be run manually)
@@ -0,0 +1,35 @@
+# Session Notes — Mar 16, 2026
+
+## Branch: `display-cents`
+
+## Summary
+Code reviewed the `display-cents` branch and addressed all review items from the initial review.
+
+## Code Review Items & Resolutions
+
+1. **`Receipt.amount` and `Receipt.amountFormatted` identical** — Removed `amountFormatted`, kept `amount`. Updated `receipts.ts` reference. (commit `2d3c8ff`)
+
+2. **`Receipt.currencySymbol` / `MonthlyPlan.currencySymbol` dead code** — Removed both getters and their tests since `formatCurrency` handles symbols via `Intl.NumberFormat`. (commit `bdf4a2e`)
+
+3. **Unsafe `as number` cast in `coveredFeesText`** — Replaced with falsy check. `undefined`, `null`, and `0` now return fallback text `"I'll generously cover the fees."`. Added 3 unit tests. (commit `df00ed3`)
+
+4. **"Invalid amount" as user-facing text** — Decided to keep current behavior.
+
+5. **Hardcoded `'en-US'` locale** — Added `currencyToLocale` map (USD only) with `en-US` fallback. Added unit tests for `formatCurrency`. (commit `04605e0`)
+
+6. **No unit tests for `formatCurrency()`** — Added `test/utils/currency-format.test.ts` with 11 tests covering USD, EUR, GBP, zero, negative, NaN, Infinity, rounding, and `currencyToSymbol` map. (commit `04605e0`)
+
+7. **Hardcoded `$` prefix in input form (nit)** — Added `currencyToSymbol` map, replaced hardcoded `$` with map lookup. (commit `62a5dcc`)
+
+## Key Decisions
+- Keep `amount` over `amountFormatted` on Receipt model
+- `coveredFeesText` uses fallback text when fee is `0` (not `$0.00`)
+- `currencyToLocale` and `currencyToSymbol` maps only contain USD for now
+- "Invalid amount" string kept as-is for non-finite inputs
+
+## Commits (5 new)
+- `04605e0` add currency-to-locale map and unit tests for formatCurrency
+- `df00ed3` fix unsafe cast in coveredFeesText and add unit tests
+- `bdf4a2e` remove dead currencySymbol getters from Plan and Receipt models
+- `2d3c8ff` remove duplicate amountFormatted getter from Receipt model
+- `62a5dcc` replace hardcoded $ prefix with currencyToSymbol map lookup
@@ -0,0 +1,65 @@
+# Session Notes - Mar 17, 2026
+
+## Branch: `display-cents`
+
+## Changes Made
+
+### coveredFeesText refactor
+- Updated `coveredFeesText` getter in `amount.ts` to derive fee from `this.newAmount` using `DonationPaymentInfo.calculateFeeAmount()` instead of `this.donationPaymentInfo?.feeAmountCovered`
+- Shows generic text when `newAmount` is 0, dynamic fee text when filled
+- Updated tests accordingly, removed unused `DonationType` import
+- Commit: `0a9f138`
+
+### Currency code display
+- Added currency code (e.g. `USD`) before `amountFormatted` in three locations:
+  - Plan info display in `amount.ts` (line 71)
+  - "Current donation amount:" in edit form in `amount.ts` (line 272)
+  - "Total:" in edit form in `amount.ts` (line 307)
+  - Plans list in `plans.ts` (line 36)
+- Added unit tests for each display area
+- Commits: `4923843`, `f90a9f6`, `236eacc`
+
+### Receipts cleanup
+- Renamed `donation` parameter to `receipt` in `.map()` callback in `receipts.ts`
+- No test changes needed (tests reference DOM selectors, not variable names)
+- Commit: `40dd2f4`
+
+### Demo data fix
+- Fixed duplicate receipt IDs in `demo/index.html` — first two receipts shared the same JWT token as `id`, causing "Sent" label to appear on wrong row
+- Gave them unique IDs: `foo-id-1`/`foo-token-1` and `foo-id-4`/`foo-token-4`
+- Commit: `e6ce922`
+
+## Branch: `edit-plan-flow-error-handling-tests`
+
+### State persistence across views tests
+- Created `test/state-persistence-across-views.test.ts` with 4 tests covering view transitions
+- Extracted `navigateBackToPlans` into shared helpers (`test/helpers/edit-plan-helpers.ts`)
+- Refactored `edit-plan-flow.test.ts` to use shared helper
+- Commit: `f489140`
+
+### Cancel / hasBeenCancelled tests
+- Added 2 tests to `edit-plan-flow.test.ts` covering the cancel code path in `updateReceived` (lines 125-128 of `monthly-giving-circle.ts`)
+  1. `action: 'cancel'` — clears `editingThisPlan`, navigates to plans view
+  2. `plan.cancelPlan()` + non-cancel action — exercises `hasBeenCancelled` branch, verifies `cancelled` CSS class on plan `<li>`
+- Added `IauxMgcPlans` type import for proper typing
+- Commit: `d41fa0b`
+- All 110 tests passing
+
+### Remaining cleanup items
+1. ~~**`beforeEach` in `edit-plan-flow.test.ts`** — all 5 tests repeat the same fixture setup~~ (done in `ffb4f96`)
+2. ~~**Missing test: `dateUpdate` success closes date form**~~ (done in `ffb4f96`)
+3. ~~**Missing test: `cancel` via `updateReceived`**~~ (done in `d41fa0b`)
+4. ~~**`import type` in `state-persistence`**~~ (already fixed — currently uses `import type`)
+
+### Session 3 (this session)
+- Implemented cancel/hasBeenCancelled tests per plan from plan mode
+- Confirmed `import type` in state-persistence was already fixed
+- All 4 cleanup items now complete
+- Saved preference: never disable sandbox without explicit permission; use local `node_modules/.bin/`
+
+## Previous session (display-cents branch)
+
+### Changes Made
+- coveredFeesText refactor, currency code display, receipts cleanup, demo data fix
+- Cover fees checkbox `?disabled` attribute was added then removed per user request
+- All 80 tests passing
@@ -0,0 +1,49 @@
+# Session Notes - Mar 9, 2026
+
+## Task
+Standardize currency amount formatting across all donation displays in `iaux-monthly-giving-circle`.
+
+## Key Decisions
+- Created shared `formatCurrency` utility in `src/utils/currency-format.ts` using `new Intl.NumberFormat` with `style: 'currency'`
+- Added `Number.isFinite` guard that returns `'Invalid amount'` for non-finite values (not silently defaulting to $0.00)
+- Kept existing `currencySymbol` getters in Plan and Receipt models (not removed)
+- Removed hardcoded `USD $` prefixes from templates — `Intl.NumberFormat` handles currency symbol automatically
+
+## Files Changed
+- **Created**: `src/utils/currency-format.ts`
+- **Modified**: `src/models/plan.ts`, `src/models/receipt.ts`, `src/form-sections/amount.ts`, `src/plans.ts`
+- **Tests updated**: `test/models/plan.test.ts`, `test/models/receipt.test.ts`
+
+## Progress
+- All 71 tests passing
+- Lint, prettier, and circular dependency checks all pass
+- Branch: `display-cents`
+
+## Notes
+- `dist/test/receipts.test.js` was a stale compiled artifact with no source `.ts` file on current branch or main (only existed on `unit-tests-2` branch). Was deleted during debugging — gets regenerated by `tsc` if source exists.
+- `DonationPaymentInfo` (feeAmountCovered, calculateTotal) comes from external package `@internetarchive/donation-form-data-models` — cannot be modified in this repo.
+
+---
+
+## Session 2 - Time Display Audit & Fixes
+
+### Task
+Audit all places where time/dates are displayed and fix locale/timezone issues.
+
+### Key Decisions
+- Fixed invalid `'US-EN'` locale tags to `'en-US'` (BCP 47) in `demo/index.html`
+- Switched `nextBillingDateLocale` and `lastBillingDateLocale` from `Date.toLocaleDateString()` to `Intl.DateTimeFormat` with `timeZone: 'UTC'` to prevent off-by-one-day display for users west of UTC
+- Added try/catch to return `"Invalid date"` instead of throwing `RangeError` on bad date strings
+- Added early return pattern to `lastBillingDateLocale` to match `nextBillingDateLocale` style
+
+### Files Changed
+- **Modified**: `demo/index.html`, `src/models/plan.ts`, `test/models/plan.test.ts`
+
+### Progress
+- All 38 plan model tests passing (4 new tests added)
+- Full test suite (73+ tests) passing
+- Squashed into single commit `8ae7c84` on branch `pin-us-locale`
+
+### Audit Findings (for future work)
+- `date.ts:217-228`: "second donation this month" validation compares local-time user input against UTC server date — potential timezone mismatch near month boundaries
+- Receipt dates (`receipt.ts`) are raw strings passed through from consumers — no formatting done in the model
@@ -133,7 +133,7 @@
             "timezone": "UTC"
           },
           "status": "Active",
-          "paymentMethodType": "Paypal",
+          "paymentMethodType": "PayPal",
           "last4": null,
           "cardType": null,
           "expirationMonth": null,
@@ -423,14 +423,20 @@
     });
 
     mgcComponent.addEventListener('UpdatePaymentMethod', (e) => {
+      console.log('UpdatePaymentMethod received:', e.detail);
       const { plan, newPaymentMethodRequest } = e.detail;
 
-
-      const heads = flipCoin() === 1;
+      const isPayPal = newPaymentMethodRequest?.paymentProvider === 'PayPal';
+      const heads = isPayPal ? true : flipCoin() === 1;
       const successOrFail = heads ? 'success' : 'fail';
       const returnTiming = heads ? 1500 : 4000;
 
-      uxMessageInfoArea.innerText = `Updating payment method for plan: ${plan ? plan.id : 'no plan'} -- Update will return ${successOrFail} in ${returnTiming} ms`; 
+      const paypalEmail = newPaymentMethodRequest?.paymentMethodInfo?.details?.email;
+      const paypalNonce = newPaymentMethodRequest?.paymentMethodInfo?.nonce;
+      const methodLabel = isPayPal
+        ? `PayPal (${paypalEmail}, nonce: ${paypalNonce})`
+        : 'payment method';
+      uxMessageInfoArea.innerText = `Updating ${methodLabel} for plan: ${plan ? plan.id : 'no plan'} -- Update will return ${successOrFail} in ${returnTiming} ms`;
       const message = successOrFail === 'success' ? 'Payment method updated' : 'Payment method failed to update';
 
       if (heads && plan) {
@@ -450,7 +456,7 @@
 
       setTimeout(() => {
         mgcComponent.updateReceived(update);
-        console.log('Amount Update Request --- index.html ----', update);
+        console.log('UpdatePaymentMethod --- index.html ----', update);
         uxMessageInfoArea.innerText = '';
       }, returnTiming);
     });
 
@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "7.6.1",
+  "version": "0.0.0-paypal-payment-method-4",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
 
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { LitElement, html, css, CSSResult, PropertyValueMap } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
@@ -10,6 +11,10 @@ import {
   BraintreeManagerInterface,
   HostingEnvironment,
 } from '@internetarchive/donation-form';
+import {
+  DonationPaymentInfo,
+  DonationType,
+} from '@internetarchive/donation-form-data-models';
 import type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
 import type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
 
@@ -249,6 +254,73 @@ export class MGCBraintreeManager extends LitElement {
     `;
   }
 
+  async renderPayPalVaultButton(): Promise<void> {
+    console.log('[PayPal] renderPayPalVaultButton called');
+
+    const handler =
+      await this.braintreeManager?.paymentProviders.paypalHandler.get();
+    console.log('[PayPal] handler:', handler);
+    if (!handler) return;
+
+    const container = document.querySelector('#ia-mgc-paypal-button');
+    console.log('[PayPal] container element:', container);
+
+    const donationInfo = new DonationPaymentInfo({
+      donationType: DonationType.Monthly,
+      amount: this.plan?.amount ?? 0,
+      coverFees: false,
+    });
+
+    const dataSource = await handler.renderPayPalButton({
+      selector: '#ia-mgc-paypal-button',
+      style: { color: 'blue', shape: 'rect', size: 'medium' },
+      donationInfo,
+    });
+    console.log('[PayPal] dataSource:', dataSource);
+
+    if (!dataSource) return;
+
+    dataSource.delegate = {
+      payPalPaymentStarted: async () => {
+        console.log('PayPal payment started');
+      },
+      payPalPaymentAuthorized: async (_ds: any, payload: any) => {
+        this.handlePayPalAuthorized(payload);
+      },
+      payPalPaymentConfirmed: async (_ds: any, payload: any) => {
+        this.handlePayPalAuthorized(payload);
+      },
+      payPalPaymentCancelled: async () => {
+        console.log('PayPal payment cancelled');
+      },
+      payPalPaymentError: async (_ds: any, error: unknown) => {
+        console.error('PayPal vault error:', error);
+        this.dispatchEvent(
+          new CustomEvent('PayPalVaultError', { detail: { error } }),
+        );
+      },
+    };
+  }
+
+  private handlePayPalAuthorized(payload: {
+    nonce: string;
+    type: string;
+    details: { email: string };
+  }): void {
+    this.dispatchEvent(
+      new CustomEvent('PayPalVaultAuthorized', {
+        detail: {
+          paymentMethodInfo: {
+            description: `PayPal - ${payload.details.email}`,
+            nonce: payload.nonce,
+            type: payload.type,
+            details: { email: payload.details.email },
+          },
+        },
+      }),
+    );
+  }
+
   private async setupBraintreeManager(): Promise<void> {
     this.braintreeManager = new BraintreeManager({
       paymentClients:
@@ -313,14 +385,4 @@ export class MGCBraintreeManager extends LitElement {
   get contactForm(): HTMLFormElement | null {
     return this.querySelector('form[name="contact-form"]');
   }
-
-  async setupPaymentHandlers() {
-    // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;
-    const creditCardHandler =
-      await this.braintreeManager?.paymentProviders.creditCardHandler.get();
-    creditCardHandler?.hideErrorMessage();
-    // const valid = this.contactForm?.reportValidity();
-    // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();
-    // console.log("CC hostedFieldsResponse", hostedFieldsResponse);
-  }
 }
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@internetarchive/donation-monthly-portal",`
`3`		`- "version": "7.6.1",`
	`3`	`+ "version": "0.0.0-paypal-payment-method-4",`
`4`	`4`	`"description": "The Internet Archive Monthly Portal",`
`5`	`5`	`"license": "AGPL-3.0-only",`
`6`	`6`	`"main": "dist/index.js",`