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);
}
}
}