diff --git a/src/client/Cosmetics.ts b/src/client/Cosmetics.ts index c6363bc34..0f8c65bc2 100644 --- a/src/client/Cosmetics.ts +++ b/src/client/Cosmetics.ts @@ -30,7 +30,12 @@ export async function fetchPatterns( return patterns; } -export async function handlePurchase(priceId: string) { +export async function handlePurchase(pattern: Pattern) { + if (pattern.product === null) { + alert("This pattern is not available for purchase."); + return; + } + const response = await fetch( `${getApiBase()}/stripe/create-checkout-session`, { @@ -40,8 +45,8 @@ export async function handlePurchase(priceId: string) { authorization: getAuthHeader(), }, body: JSON.stringify({ - priceId: priceId, - successUrl: `${window.location.origin}#purchase-completed=true`, + priceId: pattern.product.priceId, + successUrl: `${window.location.origin}#purchase-completed=true&pattern=${pattern.name}`, cancelUrl: `${window.location.origin}#purchase-completed=false`, }), }, diff --git a/src/client/Main.ts b/src/client/Main.ts index 8e02e3d88..252d93f5e 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -89,6 +89,7 @@ class Client { private joinModal: JoinPrivateLobbyModal; private publicLobby: PublicLobby; private userSettings: UserSettings = new UserSettings(); + private patternsModal: TerritoryPatternsModal; constructor() {} @@ -205,19 +206,19 @@ class Client { flagInputModal.open(); }); - const territoryModal = document.querySelector( + this.patternsModal = document.querySelector( "territory-patterns-modal", ) as TerritoryPatternsModal; const patternButton = document.getElementById( "territory-patterns-input-preview-button", ); - territoryModal instanceof TerritoryPatternsModal; + this.patternsModal instanceof TerritoryPatternsModal; if (patternButton === null) throw new Error("territory-patterns-input-preview-button"); - territoryModal.previewButton = patternButton; - territoryModal.refresh(); + this.patternsModal.previewButton = patternButton; + this.patternsModal.refresh(); patternButton.addEventListener("click", () => { - territoryModal.open(); + this.patternsModal.open(); }); loginDiscordButton.addEventListener("click", discordLogin); @@ -303,7 +304,7 @@ class Client { loginDiscordButton.hidden = false; loginDiscordButton.translationKey = "main.login_discord"; logoutDiscordButton.hidden = true; - territoryModal.onUserMe(null); + this.patternsModal.onUserMe(null); } else { // Authorized console.log( @@ -312,7 +313,7 @@ class Client { ); loginDiscordButton.translationKey = "main.logged_in"; loginDiscordButton.hidden = true; - territoryModal.onUserMe(userMeResponse); + this.patternsModal.onUserMe(userMeResponse); } }; @@ -429,7 +430,15 @@ class Client { if (hash.startsWith("#")) { const params = new URLSearchParams(hash.slice(1)); if (params.get("purchase-completed") === "true") { - alertAndStrip("purchase succeeded"); + const patternName = params.get("pattern"); + if (patternName === null) { + alert("Something went wrong. Please contact support."); + console.error("purchase-completed=true but no pattern name"); + return; + } + alertAndStrip(`purchase succeeded: ${patternName}`); + this.userSettings.setSelectedPatternName(patternName ?? undefined); + this.patternsModal.refresh(); return; } else if (params.get("purchase-completed") === "false") { alertAndStrip("purchase failed"); diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts index 51fdfd93a..1972fdb57 100644 --- a/src/client/TerritoryPatternsModal.ts +++ b/src/client/TerritoryPatternsModal.ts @@ -97,7 +97,7 @@ export class TerritoryPatternsModal extends LitElement { this.selectPattern(p)} - .onPurchase=${(priceId: string) => handlePurchase(priceId)} + .onPurchase=${(p: Pattern) => handlePurchase(p)} > `); } diff --git a/src/client/components/PatternButton.ts b/src/client/components/PatternButton.ts index 4a6508169..00e4d5940 100644 --- a/src/client/components/PatternButton.ts +++ b/src/client/components/PatternButton.ts @@ -16,7 +16,7 @@ export class PatternButton extends LitElement { onSelect?: (pattern: Pattern | null) => void; @property({ type: Function }) - onPurchase?: (priceId: string) => void; + onPurchase?: (pattern: Pattern) => void; createRenderRoot() { return this; @@ -40,7 +40,7 @@ export class PatternButton extends LitElement { private handlePurchase(e: Event) { e.stopPropagation(); if (this.pattern?.product) { - this.onPurchase?.(this.pattern.product.priceId); + this.onPurchase?.(this.pattern); } } diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts index bd8b03bda..884900ac9 100644 --- a/src/client/graphics/layers/WinModal.ts +++ b/src/client/graphics/layers/WinModal.ts @@ -126,7 +126,7 @@ export class WinModal extends LitElement implements Layer { {}} - .onPurchase=${(priceId: string) => handlePurchase(priceId)} + .onPurchase=${(p: Pattern) => handlePurchase(p)} > `; } diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts index 70f8c9863..080c18b28 100644 --- a/src/core/game/UserSettings.ts +++ b/src/core/game/UserSettings.ts @@ -120,11 +120,11 @@ export class UserSettings { return localStorage.getItem(PATTERN_KEY) ?? undefined; } - setSelectedPatternName(base64: string | undefined): void { - if (base64 === undefined) { + setSelectedPatternName(patternName: string | undefined): void { + if (patternName === undefined) { localStorage.removeItem(PATTERN_KEY); } else { - localStorage.setItem(PATTERN_KEY, base64); + localStorage.setItem(PATTERN_KEY, patternName); } } }