@owlmeans/web-payment 0.1.18-rc.20 → 0.1.18-rc.21

package/tests/harness/consumer.tsx

@@ -0,0 +1,197 @@
+import { useState, type ReactElement } from 'react'
+import type { RegisteredEntrypoint } from '@owlmeans/entrypoint'
+import type {
+  CancellationBody, DeclarationReceipt, PerformanceConsentBody, PerformanceConsentResponse, PerformanceConsentView,
+  PriceEstimate, WithdrawalBody, WithdrawalCandidateList,
+} from '@owlmeans/payment'
+import { AmountCheckoutDialog, PriceEstimateSummary, usePriceEstimate } from '../../src/index.js'
+import {
+  CancellationForm, PerformanceConsentDialog, PerformanceConsentProvider, SubscriptionStartDialog, WithdrawalDialog,
+  WithdrawalForm, WithdrawalFunctionButton, isConsentDeclined, useCancellation, useConsentGate, useWithdrawal,
+} from '../../src/consumer/index.js'
+import {
+  BLOCKED_LIMIT, LINKS, PER_PURCHASE_LIMIT, POLICY, cancellationReceipt, consentView, lockedEstimate, publicReceipt,
+  startView, withdrawalList, withdrawalReceipt,
+} from './consumer-fixtures.js'
+
+const params = new URLSearchParams(window.location.search)
+const lng = params.get('lng') ?? 'en'
+
+/** A fake bound protocol: records the request and answers after a short, real delay. */
+const fake = <Response,>(answer: (request: { body?: unknown }) => Response, record?: (request: unknown) => void) => ({
+  call: async (request: { body?: unknown } = {}) => {
+    record?.(request)
+    await new Promise(resolve => setTimeout(resolve, 50))
+    return answer(request)
+  },
+}) as unknown as RegisteredEntrypoint<any, Response>
+
+const Output = ({ id, value }: { id: string, value: unknown }) =>
+  <output id={id}>{value == null ? '' : typeof value === 'string' ? value : JSON.stringify(value)}</output>
+
+const ConsentCase = () => {
+  const [open, setOpen] = useState(true)
+  const [result, setResult] = useState<unknown>(null)
+  return <main className="p-6">
+    <Output id="consent-result" value={result} />
+    <Output id="dialog-state" value={open ? 'open' : 'closed'} />
+    <PerformanceConsentDialog
+      open={open} onOpenChange={setOpen} view={consentView(lng)} links={LINKS}
+      onConfirm={body => { setResult(body); setOpen(false) }}
+      onDecline={() => { setResult('declined'); setOpen(false) }}
+    />
+  </main>
+}
+
+const StartCase = () => {
+  const [open, setOpen] = useState(true)
+  const [result, setResult] = useState<unknown>(null)
+  return <main className="p-6">
+    <Output id="start-result" value={result} />
+    <SubscriptionStartDialog
+      open={open} onOpenChange={setOpen} view={startView(lng)} planTitle="Pro" links={LINKS}
+      price={<span>€20.00 / month</span>}
+      onConfirm={body => { setResult(body); setOpen(false) }}
+      onDecline={() => { setResult('declined'); setOpen(false) }}
+    />
+  </main>
+}
+
+const WithdrawalCase = () => {
+  const [open, setOpen] = useState(false)
+  const [sent, setSent] = useState<unknown>(null)
+  const [entries] = useState(() => ({
+    list: fake<WithdrawalCandidateList>(() => withdrawalList(lng)),
+    withdraw: fake<DeclarationReceipt>(() => withdrawalReceipt, request => setSent((request as { body: WithdrawalBody }).body)),
+  }))
+  const withdrawal = useWithdrawal(entries.list, entries.withdraw, { enabled: true })
+  return <main className="grid gap-4 p-6">
+    <Output id="withdrawal-body" value={sent} />
+    <div><WithdrawalFunctionButton language={lng} onClick={() => setOpen(true)} /></div>
+    <WithdrawalDialog
+      open={open} onOpenChange={next => { setOpen(next); if (!next) withdrawal.reset() }}
+      mode="in-app" language={lng} {...withdrawal.form}
+    />
+  </main>
+}
+
+const WithdrawalPublicCase = () => {
+  const [sent, setSent] = useState<unknown>(null)
+  const [entry] = useState(() => fake<DeclarationReceipt>(() => publicReceipt, request => setSent((request as { body: WithdrawalBody }).body)))
+  const withdrawal = useWithdrawal(null, entry)
+  return <main className="p-6">
+    <Output id="withdrawal-body" value={sent} />
+    <WithdrawalForm mode="public" language={lng} {...withdrawal.form} />
+  </main>
+}
+
+const CancellationCase = () => {
+  const [sent, setSent] = useState<unknown>(null)
+  const [printed, setPrinted] = useState(false)
+  const [entry] = useState(() => fake<DeclarationReceipt>(() => cancellationReceipt, request => setSent((request as { body: CancellationBody }).body)))
+  const cancellation = useCancellation(entry)
+  return <main className="p-6">
+    <Output id="cancellation-body" value={sent} />
+    <Output id="printed" value={printed ? 'printed' : ''} />
+    <CancellationForm mode="public" language={lng} onPrint={() => setPrinted(true)} {...cancellation.form} />
+  </main>
+}
+
+const LimitCase = () => {
+  const [open, setOpen] = useState(true)
+  const [confirmed, setConfirmed] = useState<number | null>(null)
+  const blocked = params.get('blocked') === 'true'
+  return <main className="p-6">
+    <Output id="confirmed" value={confirmed == null ? '' : String(confirmed)} />
+    <AmountCheckoutDialog
+      open={open} onOpenChange={setOpen} policy={POLICY} onConfirm={setConfirmed}
+      limit={blocked ? BLOCKED_LIMIT : PER_PURCHASE_LIMIT}
+      legalNote={<span data-harness-legal-note="">Only unused credits are reimbursed on withdrawal.</span>}
+    />
+  </main>
+}
+
+const CountryLockedCase = () => {
+  const [requested, setRequested] = useState<string[]>([])
+  const [entry] = useState(() => fake<PriceEstimate>(
+    () => lockedEstimate(2_000),
+    request => setRequested(held => [...held, (request as { body?: { country?: string } }).body?.country ?? '']),
+  ))
+  const estimate = usePriceEstimate(entry, { enabled: true })
+  return <main className="p-6">
+    <Output id="requested" value={requested} />
+    <Output id="locked" value={String(estimate.locked === true)} />
+    <PriceEstimateSummary control={estimate} subtotalMinor={2_000} currency="usd" />
+  </main>
+}
+
+/** `withConsent` against a protocol refused ONCE with a bare 428 — a production incident body. */
+const GateButtons = () => {
+  const gate = useConsentGate()
+  const [result, setResult] = useState('')
+  const [calls, setCalls] = useState(0)
+  const [refusals] = useState(() => ({ left: 1 }))
+  const run = async () => {
+    let made = 0
+    try {
+      await gate.withConsent(async () => {
+        made++
+        setCalls(made)
+        if (refusals.left > 0) {
+          refusals.left--
+          throw new Error('api:client:status:428:0b6f8a3e-8f0e-4b9f-9c55-2f1f0f6f2a11')
+        }
+        return 'done'
+      })
+      setResult(`ok:${made}`)
+    } catch (e) {
+      setResult(isConsentDeclined(e) ? `declined:${made}` : `error:${made}`)
+    }
+  }
+  const ensure = async () => { setResult(`ensure:${String(await gate.ensure())}`) }
+  return <>
+    <Output id="gate-result" value={result} />
+    <Output id="gate-calls" value={String(calls)} />
+    <button type="button" id="gate-run" onClick={() => void run()}>Run</button>
+    <button type="button" id="gate-ensure" onClick={() => void ensure()}>Ensure</button>
+  </>
+}
+
+const ConsentGateCase = () => {
+  const [state] = useState(() => ({ consented: false }))
+  const [recorded, setRecorded] = useState<unknown>(null)
+  const [entries] = useState(() => ({
+    view: fake<PerformanceConsentView>(() => JSON.parse(JSON.stringify(
+      state.consented ? { ...consentView(lng), required: false, purchases: [] } : consentView(lng),
+    ))),
+    record: fake<PerformanceConsentResponse>(request => {
+      state.consented = true
+      const body = (request as { body: PerformanceConsentBody }).body
+      return { consentId: 'cons_1', consentedAt: new Date().toISOString(), purchaseIds: body.purchaseIds, mailed: true } as never
+    }, request => setRecorded((request as { body: unknown }).body)),
+  }))
+  return <main className="grid gap-2 p-6">
+    <Output id="recorded" value={recorded} />
+    <PerformanceConsentProvider view={entries.view} record={entries.record} options={{ links: LINKS }}>
+      <GateButtons />
+    </PerformanceConsentProvider>
+  </main>
+}
+
+const CASES: Record<string, () => ReactElement> = {
+  consent: ConsentCase,
+  start: StartCase,
+  withdrawal: WithdrawalCase,
+  'withdrawal-public': WithdrawalPublicCase,
+  cancellation: CancellationCase,
+  limit: LimitCase,
+  'country-locked': CountryLockedCase,
+  'consent-gate': ConsentGateCase,
+}
+
+export const isConsumerCase = (name: string | null): name is string => name != null && name in CASES
+
+export const ConsumerCase = ({ name }: { name: string }) => {
+  const Case = CASES[name]
+  return <Case />
+}

package/tests/harness/mount.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { I18nContext } from '@owlmeans/client-i18n'
 import { AmountCheckoutDialog } from '../../src/index.js'
+import { ConsumerCase, isConsumerCase } from './consumer.js'
 import { EntitlementCase } from './entitlement.js'
 import { ESTIMATE_FIXTURES } from './estimate-fixtures.js'
 
@@ -31,8 +32,14 @@ const Dialog = () => {
   </>
 }
 
-const App = () => <I18nContext config={{ service: 'web-payment-test', i18n: { defaultLng: 'en' } } as never}>
-  {scenario == null ? <Dialog /> : <EntitlementCase name={scenario} />}
+/** `?ui=` is the interface language; `?lng=` (read by the consumer cases) the contract language. */
+const ui = params.get('ui') ?? 'en'
+const LANGUAGES = ['en', 'pl', 'ru', 'be', 'uk', 'es', 'de', 'fr']
+
+const App = () => <I18nContext config={{ service: 'web-payment-test', i18n: { defaultLng: ui, supportedLngs: LANGUAGES } } as never}>
+  {scenario == null
+    ? <Dialog />
+    : isConsumerCase(scenario) ? <ConsumerCase name={scenario} /> : <EntitlementCase name={scenario} />}
 </I18nContext>
 
 createRoot(document.getElementById('root')!).render(<App />)

package/tests/i18n.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'bun:test'
+import { CancellationStatus, PurchaseKind, WithdrawalStatus } from '@owlmeans/payment'
 import en from '../src/i18n/en.json'
 import pl from '../src/i18n/pl.json'
 import ru from '../src/i18n/ru.json'
@@ -6,6 +7,7 @@ import be from '../src/i18n/be.json'
 import uk from '../src/i18n/uk.json'
 import es from '../src/i18n/es.json'
 import de from '../src/i18n/de.json'
+import fr from '../src/i18n/fr.json'
 
 type Messages = { [key: string]: string | Messages }
 
@@ -26,14 +28,25 @@ const leaves = (messages: Messages, prefix = ''): Map<string, unknown> => {
 const placeholders = (message: string): string[] =>
   [...message.matchAll(/\{\{\s*([\w-]+)\s*\}\}/g)].map(match => match[1]).sort()
 
+/**
+ * What no payment text may say in any language (UCPD art. 6(1)(g)): the right of withdrawal
+ * EXPIRES for what was used, and unused credits ARE reimbursed — nothing is "non-refundable".
+ */
+const FORBIDDEN = /non-?refundable|nicht erstattungsf|non rembours|bezzwrotn|no reembolsable|невозвратн|неповоротн|незваротн/i
+
 describe('web-payment localization', () => {
-  const translations: Record<string, Messages> = { en, pl, ru, be, uk, es, de }
+  const translations: Record<string, Messages> = { en, pl, ru, be, uk, es, de, fr }
   const reference = leaves(en)
 
-  test('ships all seven library languages with exact key parity at every depth', () => {
-    expect(Object.keys(translations).sort()).toEqual(['be', 'de', 'en', 'es', 'pl', 'ru', 'uk'])
-    expect(reference.has('amount-checkout.title')).toBe(true)
-    expect(reference.has('entitlement.status.renews-on')).toBe(true)
+  test('ships all eight library languages with exact key parity at every depth', () => {
+    expect(Object.keys(translations).sort()).toEqual(['be', 'de', 'en', 'es', 'fr', 'pl', 'ru', 'uk'])
+    for (const key of [
+      'amount-checkout.title', 'amount-checkout.above-limit', 'entitlement.status.renews-on', 'estimate.country-locked',
+      'checkout-limit.note', 'checkout-limit.reason.per-purchase', 'checkout-limit.reason.window', 'checkout-limit.reason.hold',
+      'consumer.show-in', 'consumer.review', 'consumer.receipt', 'withdrawal.status.refunded', 'cancellation.status.scheduled',
+    ]) {
+      expect({ key, present: reference.has(key) }).toEqual({ key, present: true })
+    }
     for (const [lng, messages] of Object.entries(translations)) {
       const found = leaves(messages)
       expect({ lng, keys: [...found.keys()].sort() }).toEqual({ lng, keys: [...reference.keys()].sort() })
@@ -52,4 +65,27 @@ describe('web-payment localization', () => {
       }
     }
   })
+
+  test('phrases every status and kind a receipt or a candidate can carry, in every language', () => {
+    const required = [
+      ...Object.values(WithdrawalStatus).map(status => `withdrawal.status.${status}`),
+      ...Object.values(CancellationStatus).map(status => `cancellation.status.${status}`),
+      ...Object.values(PurchaseKind).map(kind => `withdrawal.kind.${kind}`),
+    ]
+    expect(required).toContain('cancellation.status.review')
+    for (const [lng, messages] of Object.entries(translations)) {
+      const found = leaves(messages)
+      for (const key of required) {
+        expect({ lng, key, present: typeof found.get(key) === 'string' }).toEqual({ lng, key, present: true })
+      }
+    }
+  })
+
+  test('never calls anything non-refundable, in any language', () => {
+    for (const [lng, messages] of Object.entries(translations)) {
+      for (const [key, message] of leaves(messages)) {
+        expect({ lng, key, forbidden: FORBIDDEN.test(String(message)) }).toEqual({ lng, key, forbidden: false })
+      }
+    }
+  })
 })