store popup

[ryanbarlow97]

Description:

change the generic popup:

into a popup i added for clan system:

caps doesn't have a "buy" button:

also works for win modal:

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

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

The purchase flow now returns structured insufficient-currency results, shows a reusable dialog for them, and updates the store text used by that dialog. ConfirmDialog gained new display options, and the button/container wiring now handles async purchase outcomes.

Changes

Insufficient Currency Purchase Flow

Layer / File(s)	Summary
Purchase result contract and store copy src/client/Cosmetics.ts, resources/lang/en.json	Defines InsufficientCurrency and PurchaseResult, changes purchaseCosmetic() to return the new result, and replaces the store copy with separate insufficient-currency title/body keys.
ConfirmDialog UI options src/client/components/ConfirmDialog.ts	Adds configurable heading, confirm text, close control, width mode, and button modes, and updates header/footer rendering to match those options.
InsufficientCurrencyDialog component src/client/components/InsufficientCurrencyDialog.ts	Adds the new custom element, disables shadow DOM, emits close events, and renders translated insufficient-currency content with top-up-specific confirm behavior.
Purchase UI wiring src/client/components/CosmeticButton.ts, src/client/components/CosmeticContainer.ts, src/client/components/PurchaseButton.ts	Updates purchase callbacks to return Promise<PurchaseResult>, tracks insufficient purchases in state, and renders the insufficient-currency dialog from the purchase UI.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• openfrontio/OpenFrontIO#3918: Also changes src/client/Cosmetics.ts purchase flow logic in the same function.

Suggested reviewers

• evanpelle

Poem

A coin runs short, then words appear,
A dialog steps in, crisp and clear.
Buttons wait, and top-ups glow,
While purchase paths now gently flow.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is generic and does not clearly describe the main change.	Use a more specific title such as adding an insufficient-currency store popup or purchase dialog.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is related to the popup UI, localized text, and tests in this change.
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.}

[evanpelle]

instead can we use this as an elemnt like:

return html<confirm-dialogue> ... </confirm-dialogue>

[ryanbarlow97]

yes, but split it out into src/client/components/InsufficientCurrencyDialog.ts, which now renders declaratively

[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/Cosmetics.ts`:
- Around line 159-161: The `InsufficientCurrencyDialog.show` call in
`Cosmetics.ts` is formatting `shortfall` too early with `toLocaleString()`,
which can leak browser-locale separators into the dialog. Pass the raw numeric
value from `(price - balance)` into `shortfall` and let the translation/message
formatting handle localization inside the dialog text.

🪄 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: 934a37bf-3e59-4ec5-8885-bc3394196440

📥 Commits

Reviewing files that changed from the base of the PR and between bbd8b2a and 8c510e9.

📒 Files selected for processing (2)

• src/client/Cosmetics.ts
• src/client/components/InsufficientCurrencyDialog.ts