[WEB-4448] Track correct package after purchase (#968)

## Motivation / Description

See thread here
https://revenuecat.slack.com/archives/C08H0L0RV09/p1782487589364049

**Problem**
When a Web Paywall user switches away from the default package and then
purchases via the express checkout button (Apple Pay / Google Pay), the
returned PaywallPurchaseResult reports the default package instead of
the one actually purchased. The charge and entitlements are correct —
only the returned metadata is wrong — which corrupts downstream
ad/analytics attribution for customers.

**Root cause**
Two stale closures captured the package selected at render time rather
than purchase time:

getWalletButtonRender (src/main.ts) — the wallet button is rendered once
with the initially selected package. When the user switches packages,
the Svelte action's update() forwards the new package to the button via
buttonUpdater.updatePurchase(), so the charge is correct — but the
success handler still spread the pkg captured at first render into
selectedPackage.
presentExpressPurchaseButton's onFinished — built
storeTransaction.productIdentifier from the rcPackage argument (also the
initial package), ignoring operationResult.productIdentifier, which the
backend already returns with the actual purchased product.

**Fix**
getWalletButtonRender now tracks the currently selected package in the
render closure (updated alongside updatePurchase()) and reports it as
selectedPackage on success.
onFinished now uses operationResult.productIdentifier (backend-reported,
reflects what was actually charged) for
storeTransaction.productIdentifier instead of the captured package.


https://www.loom.com/share/d9341d0479c54f52873484ba1e56e153

## Changes introduced

## Linear ticket (if any)

## Additional comments

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches purchase success payloads used for analytics/attribution;
billing behavior is unchanged but incorrect metadata previously affected
downstream tracking.
> 
> **Overview**
> Fixes **wrong `PaywallPurchaseResult` metadata** when a paywall user
changes the selected package and completes purchase via Apple Pay /
Google Pay. Charges and entitlements were already correct; only the
returned package and product id were stale.
> 
> **`presentExpressPurchaseButton`**:
`storeTransaction.productIdentifier` now comes from
**`operationResult.productIdentifier`** (backend) instead of the
initially passed `rcPackage`.
> 
> **`getWalletButtonRender`**: maintains **`currentPkg`** in the render
closure, updated whenever `update()` calls
`buttonUpdater.updatePurchase()`, and returns that as
**`selectedPackage`** on success instead of the package captured at
first render.
> 
> Adds **`wallet-button-render.test.ts`** covering package switch vs no
switch.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
1d4f261. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: james-od

src/main.ts

@@ -1407,7 +1407,7 @@ export class Purchases {
           attributionMetadata: operationResult.attributionMetadata,
           storeTransaction: {
             storeTransactionId: operationResult.storeTransactionIdentifier,
-            productIdentifier: rcPackage.webBillingProduct.identifier,
+            productIdentifier: operationResult.productIdentifier,
             purchaseDate: operationResult.purchaseDate,
           },
         };
@@ -1475,6 +1475,8 @@ export class Purchases {
         return {};
       }
 
+      let currentPkg = pkg;
+
       let buttonUpdater: ExpressPurchaseButtonUpdater | null = null;
       this.presentExpressPurchaseButton({
         rcPackage: pkg,
@@ -1488,7 +1490,7 @@ export class Purchases {
         walletButtonTheme,
       })
         .then((purchaseResult) => {
-          onSuccess({ ...purchaseResult, selectedPackage: pkg });
+          onSuccess({ ...purchaseResult, selectedPackage: currentPkg });
         })
         .catch(onError);
 
@@ -1504,6 +1506,7 @@ export class Purchases {
             }
             const purchaseOptionToUse =
               pkg.webBillingProduct.defaultPurchaseOption;
+            currentPkg = pkg;
             buttonUpdater.updatePurchase(pkg, purchaseOptionToUse);
           }
         },

src/tests/wallet-button-render.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { mount } from "svelte";
+import { configurePurchases } from "./base.purchases_test";
+import { createMonthlyPackageMock } from "./mocks/offering-mock-provider";
+import type { Purchases } from "../main";
+import type { Offering, Package } from "../entities/offerings";
+import type { PaywallPurchaseResult } from "../entities/purchase-result";
+import type { ExpressPurchaseButtonProps } from "../ui/express-purchase-button/express-purchase-button-props";
+
+vi.mock("svelte", () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}));
+
+const monthlyPackage = createMonthlyPackageMock();
+const annualPackage: Package = {
+  ...monthlyPackage,
+  identifier: "$rc_annual",
+  rcBillingProduct: {
+    ...monthlyPackage.rcBillingProduct,
+    identifier: "annual",
+  },
+  webBillingProduct: {
+    ...monthlyPackage.webBillingProduct,
+    identifier: "annual",
+  },
+};
+
+const offering = {
+  packagesById: {
+    [monthlyPackage.identifier]: monthlyPackage,
+    [annualPackage.identifier]: annualPackage,
+  },
+} as unknown as Offering;
+
+describe("Purchases.getWalletButtonRender()", () => {
+  let purchases: Purchases;
+  let buttonProps: ExpressPurchaseButtonProps | undefined;
+  let onSuccess: ReturnType<
+    typeof vi.fn<(result: PaywallPurchaseResult) => void>
+  >;
+
+  beforeEach(() => {
+    purchases = configurePurchases();
+    buttonProps = undefined;
+    onSuccess = vi.fn();
+    vi.mocked(mount).mockImplementation((_component, options) => {
+      buttonProps = options.props as ExpressPurchaseButtonProps;
+      return {} as ReturnType<typeof mount>;
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderButton = async () => {
+    const render = purchases.getWalletButtonRender(offering, onSuccess);
+    const action = render!(document.createElement("div"), {
+      selectedPackageId: monthlyPackage.identifier,
+      onReady: vi.fn(),
+    });
+    await vi.waitFor(() => expect(buttonProps).toBeDefined());
+    // Simulates the wallet button becoming ready, which delivers the updater.
+    buttonProps!.onReady?.(true);
+    return action;
+  };
+
+  const completePurchase = (purchasedPackage: Package) => {
+    buttonProps!.onFinished({
+      redemptionInfo: null,
+      operationSessionId: "test-operation-session-id",
+      storeTransactionIdentifier: "test-store-transaction-id",
+      productIdentifier: purchasedPackage.webBillingProduct.identifier,
+      purchaseDate: new Date("2024-01-01T00:00:00.000Z"),
+    });
+  };
+
+  test("reports the package selected at purchase time after switching packages", async () => {
+    const action = await renderButton();
+
+    action.update?.({ selectedPackageId: annualPackage.identifier });
+    completePurchase(annualPackage);
+
+    await vi.waitFor(() => expect(onSuccess).toHaveBeenCalled());
+    const result = onSuccess.mock.calls[0]![0];
+    expect(result.selectedPackage).toBe(annualPackage);
+    expect(result.storeTransaction.productIdentifier).toBe("annual");
+  });
+
+  test("reports the initially selected package when it is never switched", async () => {
+    await renderButton();
+
+    completePurchase(monthlyPackage);
+
+    await vi.waitFor(() => expect(onSuccess).toHaveBeenCalled());
+    const result = onSuccess.mock.calls[0]![0];
+    expect(result.selectedPackage).toBe(monthlyPackage);
+    expect(result.storeTransaction.productIdentifier).toBe("monthly");
+  });
+});