get send money skeleton

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",

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} />

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>

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>
           )}

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>
   );

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>

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}

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",
+});

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>
+  );
+}

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>

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,
 ];