mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-15 03:37:48 +00:00
d60260ac3c
## Summary Two related streams of FE-934 checkout/billing work on this branch: https://github.com/user-attachments/assets/af629def-543e-4bcd-894d-b35aa032fe0a 1. **Team-plan subscribe** wired to the BE-1254 credit-stop contract (replaces the "coming soon" toast stub). 2. **Checkout / confirm screen redesign** aligned to the updated DES mockup — yearly pricing display, dialog navigation, and the plan-change confirm. <img width="1078" height="427" alt="team subscribe" src="https://github.com/user-attachments/assets/2b5f7192-3c91-4e2d-b495-832ca5a26657" /> ## Changes ### Team-plan subscribe (credit-stop contract) - Team subscribe sends `{ plan_slug: team_per_credit_monthly | team_per_credit_annual, team_credit_stop_id, billing_cycle }` to `POST /api/billing/subscribe` and handles the response like the personal path (`subscribed` → success, `needs_payment_method` → payment URL, `pending_payment` → poll). Slider stops come from `GET /api/billing/plans → team_credit_stops` via `mapApiTeamCreditStops`, falling back to the hardcoded DES-197 stops so OSS / pre-deploy still render. `preview-subscribe` is unchanged — the team confirm step is display-only. - **Internal API change**: `workspaceApi.subscribe(planSlug, returnUrl?, cancelUrl?)` → `subscribe(planSlug, options?: SubscribeOptions)`; the billing facade (`useBillingContext` / `useWorkspaceBilling` / `useLegacyBilling`) and callers were updated to match. ### Checkout / confirm screen redesign (DES mockup) - **Yearly confirm**: headline is now the ÷12 monthly-equivalent with a `{total} Billed yearly` (yearly) / `Billed monthly` (monthly) subtitle; credits show `Each year credits refill to` (×12) for yearly; `Starting today` → `Starts today`. The team confirm now receives the active billing cycle (the subtitle was missing because it wasn't passed), and the redundant header credits/month line was dropped. - **Navigation**: the pricing table stays mounted (`v-show`, not `v-if`) so the plan / billing-cycle / credit-stop selection survives a round trip to the confirm step and back; **Backspace** mirrors the back arrow (ignored while an input/textarea/contenteditable is focused). - **Plan-change confirm**: rewritten from the 2-column current→new comparison to the **single-plan layout**, branching on `previewData.is_immediate` — immediate upgrades show prorated line items (`new_plan.price_cents − cost_today_cents` = credit) + upfront (yearly) / monthly credit refill + a prorated total ("Confirm upgrade"); scheduled downgrades show `Starts {date}`, $0 due today, and an "After that" block ("Confirm change"). - **Storybook**: `SubscriptionCheckoutSteps` stories for each new-sub / upgrade / downgrade variation (props-driven, no API). ## Review Focus - **Merge gate (team subscribe)** — ✅ **resolved**: BE-1254 is now merged in cloud `main`. The live `GET /api/billing/plans` returns `team_credit_stops` (`TeamCreditStop` struct + validation in `common/billing/catalog/catalog.go`, served for every workspace, asserted by the `billing_credit_stops_contract` smoke test). The gate is lifted. - **Fallback safety**: with the contract live, the hardcoded DES-197 stops are now purely the OSS / pre-deploy fallback — they render only when the API doesn't supply `team_credit_stops`. In that window a real subscribe is still impossible (no stop `id`) and surfaces a `teamPlan.unavailable` toast. Open question retained: hide/disable the team CTA in that window instead of toasting? - **Plan-change scope**: the single-plan confirm redesign covers **personal** changes (the real `previewSubscribe` path). **Team** plan changes route through the display-only team confirm and aren't wired to `previewSubscribe` (BE left `PreviewSubscribeRequest` as `plan_slug` only) — team-change proration is a follow-up. - **Dead locale keys**: the old 2-column transition keys (`everyMonthStarting`, `youllBeCharged`, `proratedRefund`, `proratedCharge`, `creditsRefillTo`, `switchToPlan`, `starting`, `ends`, `confirmPlanChange`) are now unused — can be removed in a follow-up cleanup. - **Out of scope**: the success "Your change is scheduled" variant from the mockup. - Based on `fe-934-unified-pricing-table`; base + `main` merged in to resolve conflicts (PR is now mergeable). ## Verification - Confirm / transition component tests green (`SubscriptionAddPaymentPreviewWorkspace`, `SubscriptionTransitionPreviewWorkspace`); oxlint / oxfmt clean locally; full typecheck runs in CI. - Each variation viewable in Storybook → `Components/SubscriptionCheckoutSteps`. --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com>