custom amount ui prettier

[ryanbarlow97]

Description:

fixed font,
sizing,
back box wrapping,
remove "buy for"
centre the text by removing the ^ v arrows

before:

after:

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory

Please put your Discord username so you can be contacted if a bug or regression is found:

w.o.n

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 11564bf3-0e04-4ada-baf1-a9314719da56

📥 Commits

Reviewing files that changed from the base of the PR and between 8b2ee72 and 7e09fb8.

📒 Files selected for processing (4)

• resources/lang/en.json
• src/client/components/CustomCurrencyCard.ts
• src/client/components/PurchaseButton.ts
• src/client/styles.css

✅ Files skipped from review due to trivial changes (2)

• src/client/styles.css
• resources/lang/en.json

🚧 Files skipped from review as they are similar to previous changes (2)

• src/client/components/PurchaseButton.ts
• src/client/components/CustomCurrencyCard.ts

---

Walkthrough

This PR reworks the custom plutonium purchase card to use CosmeticContainer and PurchaseButton, removes the busy-state guard from the buy flow, adds direct dollar pricing support to PurchaseButton, and updates supporting styles and locale strings.

Changes

Custom Plutonium Purchase UI

Layer / File(s)	Summary
PurchaseButton dollarPrice support src/client/components/PurchaseButton.ts	Adds a public dollarPrice string property, computes displayed price from dollarPrice with fallback to product?.price, renders nothing when no price is available, and updates the dollar-button availability check to consider product ?? dollarPrice.
CustomCurrencyCard rewiring and simplified buy flow src/client/components/CustomCurrencyCard.ts	Swaps imports to use CosmeticContainer and PurchaseButton, removes the busy state field and its try/finally guard, simplifies buy() to directly call checkout and redirect, and restructures render() into a cosmetic-container layout with a purchase-button wired to dollarPrice and onPurchaseDollar.
Supporting styles and locale strings src/client/styles.css, resources/lang/en.json	Adds .custom-plutonium-input CSS to hide numeric spinner controls, removes buy_for string, renames custom_amount to "Choose Amount", and adds plutonium_amount string.

Estimated code review effort: 2 (Simple) | ~12 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CustomCurrencyCard
  participant PurchaseButton
  participant CheckoutAPI

  User->>CustomCurrencyCard: adjust amount slider/input
  User->>PurchaseButton: click purchase button
  PurchaseButton->>CustomCurrencyCard: onPurchaseDollar()
  CustomCurrencyCard->>CheckoutAPI: createCustomCurrencyCheckout(amount)
  CheckoutAPI-->>CustomCurrencyCard: checkout URL or false
  alt checkout failed
    CustomCurrencyCard->>User: alert failure
  else checkout succeeded
    CustomCurrencyCard->>User: redirect via window.location.href
  end

Loading

Possibly related PRs

• openfrontio/OpenFrontIO#4436: Both PRs modify PurchaseButton.ts’s dollar-button behavior and price text handling.
• openfrontio/OpenFrontIO#4510: Both PRs change PurchaseButton.ts click handling and purchase-button rendering rules.
• openfrontio/OpenFrontIO#4515: Both PRs touch the custom plutonium purchase flow and checkout wiring.

Suggested reviewers: evanpelle

Poem

A card once plain now shines so bright,
With amount and price in tidy sight.
No busy flag to slow the way,
Just choose, then click, and sail away.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main change: a prettier custom amount UI.
Description check	✅ Passed	The description describes the UI cleanup and copy changes in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

This PR updates the custom plutonium purchase UI to match the cosmetics store card/purchase-button styling, and extends <purchase-button> to support displaying a direct dollar price even when there’s no catalog Product.

Changes:

• Add dollarPrice support to <purchase-button> so it can render a $ price without requiring a product.
• Refactor <custom-currency-card> to use <cosmetic-container> + <purchase-button>, and switch to a number input + slider UX.
• Update shared CSS for the custom amount number input, and adjust English translations for the store.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/client/styles.css	Adds styling to make the custom amount <input type="number"> look consistent (removes spin buttons).
src/client/components/PurchaseButton.ts	Adds dollarPrice property and uses it when rendering the dollar purchase button.
src/client/components/CustomCurrencyCard.ts	Rebuilds the custom amount card UI around cosmetic-container and purchase-button, plus improved input UX.
resources/lang/en.json	Updates store strings (“Custom Amount” → “Choose Amount”) and adds store.plutonium_amount.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/client/components/CustomCurrencyCard.ts`:
- Line 92: The purchase handler in CustomCurrencyCard loses component context
because buy is a prototype method passed through onPurchaseDollar; update buy on
the CustomCurrencyCard class so it is permanently bound to the instance, and
ensure the PurchaseButton.executePurchase flow can invoke it safely without
relying on a detached this. Keep the fix localized to the buy method and the
onPurchaseDollar binding so this.amount remains accessible when the user clicks
Buy.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6ffce5da-f3cd-49c9-bbe9-7adb0c1bb352

📥 Commits

Reviewing files that changed from the base of the PR and between 274b516 and 8b2ee72.

📒 Files selected for processing (4)

• resources/lang/en.json
• src/client/components/CustomCurrencyCard.ts
• src/client/components/PurchaseButton.ts
• src/client/styles.css

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8b2ee72f7a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[evanpelle]

thanks!