scrabble-game/ui/src/screens/Wallet.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import Modal from '../components/Modal.svelte';
  import { handleError } from '../lib/app.svelte';
  import { gateway } from '../lib/gateway';
  import { t, i18n, type MessageKey } from '../lib/i18n/index.svelte';
  import { executionContext, formatAmount, needsWebSpendWarning, type SpendContext } from '../lib/wallet';
  import { isGooglePlayBuild } from '../lib/distribution';
  import type { Wallet, Catalog, CatalogProduct } from '../lib/model';

  // The Wallet section: the context-visible chip balances, the active benefits, and the storefront.
  // Values are bought with chips (they work once the player has any); chip packs are bought with
  // money (the purchase itself arrives with payment intake — here they are shown priced only). On
  // the Google Play build the money purchases are hidden behind a RuStore stub (store policy), while
  // spending already-earned chips still works.

  let wallet = $state<Wallet | null>(null);
  let catalog = $state<Catalog | null>(null);
  let loading = $state(true);
  let busy = $state(false);
  // The value awaiting a web-spend warning confirmation (a spend that would draw vk/tg chips).
  let warnProduct = $state<CatalogProduct | null>(null);

  const context: SpendContext = executionContext();
  const gpBuild = isGooglePlayBuild();

  const values = $derived(catalog?.products.filter((p) => p.kind === 'value') ?? []);
  const packs = $derived(catalog?.products.filter((p) => p.kind === 'pack') ?? []);

  async function load() {
    try {
      const [w, c] = await Promise.all([gateway.wallet(), gateway.catalog()]);
      wallet = w;
      catalog = c;
    } catch (e) {
      handleError(e);
    } finally {
      loading = false;
    }
  }
  onMount(load);

  function sourceLabel(source: string): string {
    return t(`wallet.source.${source}` as MessageKey);
  }

  function currencyLabel(currency: string): string {
    return t(`wallet.cur.${currency}` as MessageKey);
  }

  function adsLine(): string {
    if (!wallet) return '';
    if (wallet.adsForever) return t('wallet.noAdsForever');
    if (wallet.adsPaidUntilMs > Date.now()) {
      const date = new Date(wallet.adsPaidUntilMs).toLocaleDateString(i18n.locale === 'ru' ? 'ru-RU' : 'en-US');
      return t('wallet.noAdsUntil', { date });
    }
    return t('wallet.adsOn');
  }

  function onBuy(p: CatalogProduct) {
    if (needsWebSpendWarning(context, wallet?.segments ?? [], p.chips)) {
      warnProduct = p;
      return;
    }
    void doBuy(p);
  }

  async function doBuy(p: CatalogProduct) {
    warnProduct = null;
    if (busy) return;
    busy = true;
    try {
      wallet = await gateway.walletBuy(p.productId);
    } catch (e) {
      handleError(e);
    } finally {
      busy = false;
    }
  }
</script>

<div class="wallet" data-testid="wallet">
  <section>
    <h3>{t('wallet.balance')}</h3>
    {#if wallet && wallet.segments.length > 0}
      {#each wallet.segments as s (s.source)}
        <div class="row">
          <span class="name">{sourceLabel(s.source)}</span>
          <span class="value"
            >🪙 {s.chips}{#if !s.spendable}&nbsp;<span class="muted">({t('wallet.viewOnly')})</span>{/if}</span
          >
        </div>
      {/each}
    {:else if !loading}
      <p class="empty">{t('wallet.noChips')}</p>
    {/if}
  </section>

  <section>
    <h3>{t('wallet.benefits')}</h3>
    <div class="row"><span class="name">{adsLine()}</span></div>
    <div class="row"><span class="name">{t('wallet.hints', { n: wallet?.hints ?? 0 })}</span></div>
  </section>

  <section>
    <h3>{t('wallet.store')}</h3>
    {#each values as p (p.productId)}
      <div class="row product" data-testid="product" data-kind="value" data-pid={p.productId}>
        <span class="name">{p.title}</span>
        <span class="price">🪙 {p.chips}</span>
        <button class="buy" data-testid="buy" disabled={busy} onclick={() => onBuy(p)}>{t('wallet.buy')}</button>
      </div>
    {/each}

    {#if gpBuild}
      <p class="stub" data-testid="gp-stub">{t('wallet.gpStub')}</p>
    {:else}
      {#each packs as p (p.productId)}
        <div class="row product" data-testid="product" data-kind="pack" data-pid={p.productId}>
          <span class="name">{p.title}</span>
          <span class="price">{formatAmount(p.moneyAmount, p.moneyCurrency)}&nbsp;{currencyLabel(p.moneyCurrency)}</span>
          <button class="buy" disabled>{t('wallet.soon')}</button>
        </div>
      {/each}
    {/if}

    {#if !loading && values.length === 0 && (gpBuild || packs.length === 0)}
      <p class="empty">{t('wallet.empty')}</p>
    {/if}
  </section>
</div>

{#if warnProduct}
  <Modal title={t('wallet.warnTitle')} onclose={() => (warnProduct = null)}>
    <p class="warn-body" data-testid="warn">{t('wallet.warnBody')}</p>
    <div class="warn-actions">
      <button class="cancel" onclick={() => (warnProduct = null)}>{t('wallet.warnCancel')}</button>
      <button class="buy" data-testid="warn-confirm" onclick={() => warnProduct && doBuy(warnProduct)}
        >{t('wallet.warnConfirm')}</button
      >
    </div>
  </Modal>
{/if}

<style>
  .wallet {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: var(--pad);
  }
  section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .name {
    flex: 1 1 auto;
    min-width: 0;
  }
  .value,
  .price {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
  }
  .muted {
    color: var(--text-muted);
    font-weight: 400;
  }
  .buy {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .buy:disabled {
    opacity: 0.5;
    cursor: default;
  }
  .empty,
  .stub {
    margin: 0;
    padding: 10px 12px;
    color: var(--text-muted);
  }
  .stub {
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
  }
  .warn-body {
    margin: 0 0 14px;
  }
  .warn-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .cancel {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
</style>