get send money skeleton

2022-08-14 10:10:37 -03:00 · 2022-08-14 10:10:37 -03:00 · 004b1544f3
commit 004b1544f3
parent 9bb9d149d2
11 changed files with 128 additions and 17 deletions
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@ -94,6 +94,12 @@ export const Pages = {
  balanceTransaction: pageDefinition<{ tid: string }>(
    "/balance/transaction/:tid",
  ),
+  sendCash: pageDefinition<{ currency?: string }>(
+    "/destination/send/:currency?",
+  ),
+  receiveCash: pageDefinition<{ currency?: string }>(
+    "/destination/get/:currency?",
+  ),
  dev: "/dev",

  backup: "/backup",
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@ -358,7 +358,7 @@ function ButtonsSection({
            onClick={state.payHandler.onClick}
          >
            <i18n.Translate>
-              Send &nbsp;
+              Pay &nbsp;
              {<Amount value={state.payStatus.amountEffective} />}
            </i18n.Translate>
          </Button>
@ -395,7 +395,7 @@ function ButtonsSection({
            color="success"
            onClick={() => goToWalletManualWithdraw(state.amount.currency)}
          >
-            <i18n.Translate>Withdraw digital cash</i18n.Translate>
+            <i18n.Translate>Get digital cash</i18n.Translate>
          </Button>
        </section>
        <PayWithMobile state={state} />
--- a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
@ -169,7 +169,7 @@ export function ReadyView(state: State.Ready): VNode {
          onClick={state.accept.onClick}
        >
          <i18n.Translate>
-            Receive &nbsp; <Amount value={state.amount} />
+            Accept &nbsp; <Amount value={state.amount} />
          </i18n.Translate>
        </Button>
      </section>
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@ -172,7 +172,7 @@ export function SuccessView(state: State.Success): VNode {
              onClick={state.doWithdrawal.onClick}
            >
              <i18n.Translate>
-                Receive &nbsp; <Amount value={state.toBeReceived} />
+                Withdraw &nbsp; <Amount value={state.toBeReceived} />
              </i18n.Translate>
            </Button>
          )}
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@ -18,7 +18,6 @@ import { Amounts, Balance, NotificationType } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable.js";
-import { JustInDevMode } from "../components/JustInDevMode.js";
 import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import { MultiActionButton } from "../components/MultiActionButton.js";
@ -173,20 +172,15 @@ export function BalanceView(state: State.Balances): VNode {
          variant="contained"
          onClick={state.goToWalletManualWithdraw.onClick}
        >
-          <i18n.Translate>Withdraw</i18n.Translate>
+          <i18n.Translate>Get</i18n.Translate>
        </Button>
        {currencyWithNonZeroAmount.length > 0 && (
          <MultiActionButton
-            label={(s) => <i18n.Translate>Deposit {s}</i18n.Translate>}
+            label={(s) => <i18n.Translate>Send {s}</i18n.Translate>}
            actions={currencyWithNonZeroAmount}
            onClick={(c) => state.goToWalletDeposit(c)}
          />
        )}
-        <JustInDevMode>
-          <Button onClick={state.addAction.onClick}>
-            <i18n.Translate>Enter URI</i18n.Translate>
-          </Button>
-        </JustInDevMode>
      </footer>
    </Fragment>
  );
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@ -40,7 +40,7 @@ export function NoBalanceHelp({
          variant="outlined"
          onClick={goToWalletManualWithdraw.onClick}
        >
-          <Typography>Withdraw</Typography>
+          <Typography>Get digital cash</Typography>
        </Button>
      </Alert>
    </Paper>
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@ -53,6 +53,10 @@ import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
 import { QrReaderPage } from "./QrReader.js";
 import { platform } from "../platform/api.js";
+import {
+  DestinationSelectionGetCash,
+  DestinationSelectionSendCash,
+} from "./DestinationSelection.js";

 export function Application(): VNode {
  const [globalNotification, setGlobalNotification] = useState<
@ -126,12 +130,20 @@ export function Application(): VNode {
                path={Pages.balanceHistory.pattern}
                component={HistoryPage}
                goToWalletDeposit={(currency: string) =>
-                  redirectTo(Pages.balanceDeposit({ currency }))
+                  redirectTo(Pages.sendCash({ currency }))
                }
                goToWalletManualWithdraw={(currency?: string) =>
-                  redirectTo(Pages.balanceManualWithdraw({ currency }))
+                  redirectTo(Pages.receiveCash({ currency }))
                }
              />
+              <Route
+                path={Pages.sendCash.pattern}
+                component={DestinationSelectionSendCash}
+              />
+              <Route
+                path={Pages.receiveCash.pattern}
+                component={DestinationSelectionGetCash}
+              />
              <Route
                path={Pages.balanceTransaction.pattern}
                component={TransactionPage}
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createExample } from "../test-utils.js";
+import {
+  DestinationSelectionGetCash,
+  DestinationSelectionSendCash,
+} from "./DestinationSelection.js";
+
+export default {
+  title: "wallet/destination",
+};
+
+export const GetCash = createExample(DestinationSelectionGetCash, {
+  currency: "usd",
+});
+export const SendCash = createExample(DestinationSelectionSendCash, {
+  currency: "eur",
+});
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@ -0,0 +1,60 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { styled } from "@linaria/react";
+import { Fragment, h, VNode } from "preact";
+import { Paper } from "../mui/Paper.js";
+
+const QrVideo = styled.video`
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8px;
+  background-color: black;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > * {
+    margin: 8px;
+  }
+`;
+
+interface Props {
+  action: "send" | "get";
+  currency?: string;
+}
+
+export function DestinationSelectionGetCash({ currency }: Props): VNode {
+  return (
+    <Container>
+      <p>Request {currency} from:</p>
+      <Paper style={{ padding: 8 }}>Bank account</Paper>
+      <Paper style={{ padding: 8 }}>Another person</Paper>
+    </Container>
+  );
+}
+
+export function DestinationSelectionSendCash({ currency }: Props): VNode {
+  return (
+    <Container>
+      <p>Sending {currency} to:</p>
+      <Paper style={{ padding: 8 }}>Bank account</Paper>
+      <Paper style={{ padding: 8 }}>Another person</Paper>
+    </Container>
+  );
+}
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@ -210,7 +210,7 @@ export function HistoryView({
              // style={{ marginLeft: 0, marginTop: 8 }}
              onClick={() => goToWalletManualWithdraw(selectedCurrency)}
            >
-              <i18n.Translate>Withdraw</i18n.Translate>
+              <i18n.Translate>Get</i18n.Translate>
            </Button>
            {currencyAmount && Amounts.isNonZero(currencyAmount) && (
              <Button
@ -219,7 +219,7 @@ export function HistoryView({
                // style={{ marginLeft: 0, marginTop: 8 }}
                onClick={() => goToWalletDeposit(selectedCurrency)}
              >
-                <i18n.Translate>Deposit</i18n.Translate>
+                <i18n.Translate>Send</i18n.Translate>
              </Button>
            )}
          </div>
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@ -35,6 +35,7 @@ import * as a14 from "./Welcome.stories.js";
 import * as a15 from "./AddNewActionView.stories.js";
 import * as a16 from "./DeveloperPage.stories.js";
 import * as a17 from "./QrReader.stories.js";
+import * as a18 from "./DestinationSelection.stories.js";

 export default [
  a1,
@ -53,4 +54,5 @@ export default [
  a15,
  a16,
  a17,
+  a18,
 ];