feat: awaiting refund

3 files changed, 91 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx b/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
index 6b7cf4621..bc2939896 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
@@ -33,6 +33,7 @@ export const Complete = createExample(TestedComponent, {
   state: {
     status: "completed",
     amount: Amounts.parseOrThrow("USD:1"),
+    granted: Amounts.parseOrThrow("USD:1"),
     hook: undefined,
     merchantName: "the merchant",
     products: undefined,
@@ -44,9 +45,10 @@ export const InProgress = createExample(TestedComponent, {
     status: "in-progress",
     hook: undefined,
     amount: Amounts.parseOrThrow("USD:1"),
+    awaitingAmount: Amounts.parseOrThrow("USD:1"),
+    granted: Amounts.parseOrThrow("USD:0"),
     merchantName: "the merchant",
     products: undefined,
-    progress: 0.5,
   },
 });
 
@@ -58,6 +60,8 @@ export const Ready = createExample(TestedComponent, {
     ignore: {},
 
     amount: Amounts.parseOrThrow("USD:1"),
+    awaitingAmount: Amounts.parseOrThrow("USD:1"),
+    granted: Amounts.parseOrThrow("USD:0"),
     merchantName: "the merchant",
     products: [],
     orderId: "abcdef",
@@ -73,6 +77,8 @@ export const WithAProductList = createExample(TestedComponent, {
     accept: {},
     ignore: {},
     amount: Amounts.parseOrThrow("USD:1"),
+    awaitingAmount: Amounts.parseOrThrow("USD:1"),
+    granted: Amounts.parseOrThrow("USD:0"),
     merchantName: "the merchant",
     products: [
       {
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.test.ts b/packages/taler-wallet-webextension/src/cta/Refund.test.ts
index e77f8e682..864b4f12c 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Refund.test.ts
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Amounts, NotificationType, PrepareRefundResult } from "@gnu-taler/taler-util";
+import { AmountJson, Amounts, NotificationType, PrepareRefundResult } from "@gnu-taler/taler-util";
 import { expect } from "chai";
 import { mountHook } from "../test-utils.js";
 import { SubsHandler } from "./Pay.test.js";
@@ -62,10 +62,12 @@ describe("Refund CTA states", () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() =>
       useComponentState("taler://refund/asdasdas", {
         prepareRefund: async () => ({
-          total: 0,
-          applied: 0,
-          failed: 0,
-          amountEffectivePaid: 'EUR:2',
+          effectivePaid: 'EUR:2',
+          awaiting: 'EUR:2',
+          gone: 'EUR:0',
+          granted: 'EUR:0',
+          pending: false,
+          proposalId: '1',
           info: {
             contractTermsHash: '123',
             merchant: {
@@ -107,10 +109,12 @@ describe("Refund CTA states", () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() =>
       useComponentState("taler://refund/asdasdas", {
         prepareRefund: async () => ({
-          total: 0,
-          applied: 0,
-          failed: 0,
-          amountEffectivePaid: 'EUR:2',
+          effectivePaid: 'EUR:2',
+          awaiting: 'EUR:2',
+          gone: 'EUR:0',
+          granted: 'EUR:0',
+          pending: false,
+          proposalId: '1',
           info: {
             contractTermsHash: '123',
             merchant: {
@@ -161,21 +165,30 @@ describe("Refund CTA states", () => {
   });
 
   it("should be in progress when doing refresh", async () => {
-    let numApplied = 1;
+    let granted = Amounts.getZero('EUR')
+    const unit: AmountJson = { currency: 'EUR', value: 1, fraction: 0 }
+    const refunded: AmountJson = { currency: 'EUR', value: 2, fraction: 0 }
+    let awaiting: AmountJson = refunded
+    let pending = true;
+
     const subscriptions = new SubsHandler();
 
     function notifyMelt(): void {
-      numApplied++;
+      granted = Amounts.add(granted, unit).amount;
+      pending = granted.value < refunded.value;
+      awaiting = Amounts.sub(refunded, granted).amount;
       subscriptions.notifyEvent(NotificationType.RefreshMelted)
     }
 
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() =>
       useComponentState("taler://refund/asdasdas", {
         prepareRefund: async () => ({
-          total: 3,
-          applied: numApplied,
-          failed: 0,
-          amountEffectivePaid: 'EUR:2',
+          awaiting: Amounts.stringify(awaiting),
+          effectivePaid: 'EUR:2',
+          gone: 'EUR:0',
+          granted: Amounts.stringify(granted),
+          pending,
+          proposalId: '1',
           info: {
             contractTermsHash: '123',
             merchant: {
@@ -201,12 +214,12 @@ describe("Refund CTA states", () => {
     {
       const state = getLastResultOrThrow()
 
-      if (state.status !== 'in-progress') expect.fail();
+      if (state.status !== 'in-progress') expect.fail('1');
       if (state.hook) expect.fail();
       expect(state.merchantName).eq('the merchant name');
       expect(state.products).undefined;
       expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"))
-      expect(state.progress).closeTo(1 / 3, 0.01)
+      // expect(state.progress).closeTo(1 / 3, 0.01)
 
       notifyMelt()
     }
@@ -216,12 +229,12 @@ describe("Refund CTA states", () => {
     {
       const state = getLastResultOrThrow()
 
-      if (state.status !== 'in-progress') expect.fail();
+      if (state.status !== 'in-progress') expect.fail('2');
       if (state.hook) expect.fail();
       expect(state.merchantName).eq('the merchant name');
       expect(state.products).undefined;
       expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"))
-      expect(state.progress).closeTo(2 / 3, 0.01)
+      // expect(state.progress).closeTo(2 / 3, 0.01)
 
       notifyMelt()
     }
@@ -231,7 +244,7 @@ describe("Refund CTA states", () => {
     {
       const state = getLastResultOrThrow()
 
-      if (state.status !== 'completed') expect.fail();
+      if (state.status !== 'completed') expect.fail('3');
       if (state.hook) expect.fail();
       expect(state.merchantName).eq('the merchant name');
       expect(state.products).undefined;
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index f69fc4311..5387a1782 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -34,7 +34,6 @@ import { LoadingError } from "../components/LoadingError.js";
 import { LogoHeader } from "../components/LogoHeader.js";
 import { Part } from "../components/Part.js";
 import {
-  Button,
   ButtonSuccess,
   SubTitle,
   WalletAction,
@@ -99,6 +98,12 @@ export function View({ state }: ViewProps): VNode {
           <Part
             big
             title={<i18n.Translate>Total to refund</i18n.Translate>}
+            text={<Amount value={state.awaitingAmount} />}
+            kind="negative"
+          />
+          <Part
+            big
+            title={<i18n.Translate>Refunded</i18n.Translate>}
             text={<Amount value={state.amount} />}
             kind="negative"
           />
@@ -108,9 +113,9 @@ export function View({ state }: ViewProps): VNode {
             <ProductList products={state.products} />
           </section>
         ) : undefined}
-        <section>
+        {/* <section>
           <ProgressBar value={state.progress} />
-        </section>
+        </section> */}
       </WalletAction>
     );
   }
@@ -128,6 +133,14 @@ export function View({ state }: ViewProps): VNode {
             <i18n.Translate>this refund is already accepted.</i18n.Translate>
           </p>
         </section>
+        <section>
+          <Part
+            big
+            title={<i18n.Translate>Total to refunded</i18n.Translate>}
+            text={<Amount value={state.granted} />}
+            kind="negative"
+          />
+        </section>
       </WalletAction>
     );
   }
@@ -150,9 +163,23 @@ export function View({ state }: ViewProps): VNode {
       <section>
         <Part
           big
-          title={<i18n.Translate>Total to refund</i18n.Translate>}
+          title={<i18n.Translate>Order amount</i18n.Translate>}
           text={<Amount value={state.amount} />}
-          kind="negative"
+          kind="neutral"
+        />
+        {Amounts.isNonZero(state.granted) && (
+          <Part
+            big
+            title={<i18n.Translate>Already refunded</i18n.Translate>}
+            text={<Amount value={state.granted} />}
+            kind="neutral"
+          />
+        )}
+        <Part
+          big
+          title={<i18n.Translate>Refund offered</i18n.Translate>}
+          text={<Amount value={state.awaitingAmount} />}
+          kind="positive"
         />
       </section>
       {state.products && state.products.length ? (
@@ -164,9 +191,6 @@ export function View({ state }: ViewProps): VNode {
         <ButtonSuccess onClick={state.accept.onClick}>
           <i18n.Translate>Confirm refund</i18n.Translate>
         </ButtonSuccess>
-        <Button onClick={state.ignore.onClick}>
-          <i18n.Translate>Ignore</i18n.Translate>
-        </Button>
       </section>
     </WalletAction>
   );
@@ -184,6 +208,8 @@ interface Ready {
   merchantName: string;
   products: Product[] | undefined;
   amount: AmountJson;
+  awaitingAmount: AmountJson;
+  granted: AmountJson;
   accept: ButtonHandler;
   ignore: ButtonHandler;
   orderId: string;
@@ -199,7 +225,8 @@ interface InProgress {
   merchantName: string;
   products: Product[] | undefined;
   amount: AmountJson;
-  progress: number;
+  awaitingAmount: AmountJson;
+  granted: AmountJson;
 }
 interface Completed {
   status: "completed";
@@ -207,6 +234,7 @@ interface Completed {
   merchantName: string;
   products: Product[] | undefined;
   amount: AmountJson;
+  granted: AmountJson;
 }
 
 export function useComponentState(
@@ -253,25 +281,27 @@ export function useComponentState(
     };
   }
 
-  const pending = refund.total > refund.applied + refund.failed;
-  const completed = refund.total > 0 && refund.applied === refund.total;
+  const awaitingAmount = Amounts.parseOrThrow(refund.awaiting);
 
-  if (pending) {
+  if (Amounts.isZero(awaitingAmount)) {
     return {
-      status: "in-progress",
+      status: "completed",
       hook: undefined,
-      amount: Amounts.parseOrThrow(info.response.refund.amountEffectivePaid),
+      amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
+      granted: Amounts.parseOrThrow(info.response.refund.granted),
       merchantName: info.response.refund.info.merchant.name,
       products: info.response.refund.info.products,
-      progress: (refund.applied + refund.failed) / refund.total,
     };
   }
 
-  if (completed) {
+  if (refund.pending) {
     return {
-      status: "completed",
+      status: "in-progress",
       hook: undefined,
-      amount: Amounts.parseOrThrow(info.response.refund.amountEffectivePaid),
+      awaitingAmount,
+      amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
+      granted: Amounts.parseOrThrow(info.response.refund.granted),
+
       merchantName: info.response.refund.info.merchant.name,
       products: info.response.refund.info.products,
     };
@@ -280,7 +310,9 @@ export function useComponentState(
   return {
     status: "ready",
     hook: undefined,
-    amount: Amounts.parseOrThrow(info.response.refund.amountEffectivePaid),
+    amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
+    granted: Amounts.parseOrThrow(info.response.refund.granted),
+    awaitingAmount,
     merchantName: info.response.refund.info.merchant.name,
     products: info.response.refund.info.products,
     orderId: info.response.refund.info.orderId,