commit 69c04d0885dd73cbfd8eaba10f7c23b2cf79354a
parent 7c5c5932b8591856b95b26b4f5d957f08229f2fa
Author: Stefan Kügel <stefan.kuegel@taler.net>
Date: Mon, 11 Aug 2025 12:04:00 +0200
update README files for Taler Merchant, rectify English strings for Merchant Backoffice UI
Diffstat:
3 files changed, 64 insertions(+), 73 deletions(-)
diff --git a/packages/merchant-backend-ui/README.md b/packages/merchant-backend-ui/README.md
@@ -1,18 +1,20 @@
-Merchant Backend pages
+Taler Merchant Backend pages
# Description
-This project generate 5 templates for the merchant backend:
+This project generates templates for the Taler Merchant backend:
- OfferRefund
- RequestPayment
- ShowOrderDetails
-This pages are to be serve from the merchant-backend service and will be queried for browser that may or may not have JavaScript enabled, so we are going to do server side rendering.
-The merchant-backend service is currently supporting mustache library for server side rendering.
-We also want the be able to create a more interactive design if the browser have JavaScript enabled, so the pages will be serve with all the information in the HTML but also in JavaScript.
-
-In this scenario, we are using jsx to build the template of the page that will be build-time rendered into the mustache template. This template can the be deployed into a merchant-backend that will complete the information before send it to the browser.
+These pages are provided by the merchant-backend service and will be queried for browsers
+that either may or may not have enabled JavaScript.
+The merchant-backend service is currently supporting a mustache library for server-side rendering.
+We also want the be able to create a more interactive design given the case that browsers have JavaScript enabled,
+so the pages will be rendered with all information in HTML format as well as with JavaScript.
+In this scenario, we are using jsx to build the template of the page that will be rendered into the mustache template at build time.
+This template can then be deployed in a merchant-backend that will complete the information before it is sent to the browser.
# Building
@@ -21,6 +23,7 @@ The building process can be executed with `pnpm build`
# Testing
This project is using a JavaScript implementation of mustache that can be executed with the command `pnpm render-examples`.
-This script will take the pages previously built in `dist/pages` directory and the examples definition in the `src/pages/[exampleName].examples.ts` files and render a to-be-sent-to-the-user page like the merchant would do.
-This examples will be saved invidivualy into directory `dist/examples` and should be opened with your testing browser.
-Testing should be done with JavaScript enabled and JavaScript disabled, both should look ok.
+The script will take the pages previously built in the `dist/pages` directory and the examples definition
+in the `src/pages/[exampleName].examples.ts` files and renders a page to be sent to the user like the Taler Merchant Backend would do.
+This example will be saved individually into the directory `dist/examples` and can be opened in your test browser.
+Testing should be done with JavaScript enabled and disabled, in both cases the result should look OK.
diff --git a/packages/merchant-backoffice-ui/README.md b/packages/merchant-backoffice-ui/README.md
@@ -1,6 +1,6 @@
## Merchant Admin Frontend
-Merchant Admin Frontend is a Single Page Application (SPA) that connects with a running Merchant Backend and lets you manage instances, orders, products and tipping.
+The Merchant Admin Frontend is a Single Page Application (SPA) that connects with a running Taler Merchant Backend. It allows you to manage instances, orders, products, and tipping.
## System requirements
@@ -12,9 +12,9 @@ Merchant Admin Frontend is a Single Page Application (SPA) that connects with a
Run `pnpm install --frozen-lockfile --filter @gnu-taler/merchant-backoffice...` to install all the nodejs dependencies.
-Then the command `pnpm build` create the distribution in the `dist` folder.
+Then, entering the command `pnpm build` creates the distribution in the `dist` folder.
-By default the installation prefix will be `/usr/local/share/taler/merchant-backoffice/` but it can be overridden by `--prefix` in the configuration process:
+By default, the installation prefix will be `/usr/local/share/taler/merchant-backoffice/` but it can be overridden by `--prefix` by the configuration process:
```shell
./configure --prefix=/another/directory
@@ -24,7 +24,7 @@ To install run `make install`
## Local testing
-To point the Merchant SPA to a different server, override local storage:
+To have the Merchant SPA point to a different server, override the local storage:
```js
localStorage.setItem("merchant-base-url", "http://backend.taler.localhost:4321/");
@@ -32,19 +32,19 @@ localStorage.setItem("merchant-base-url", "http://backend.taler.localhost:4321/"
## Running develop
-To run a development server run:
+In order to run a development server you will have to apply
```shell
./dev.mjs
```
-This should start a watch process that will reload the server every time that a file is saved.
+This should start a watch process that will reload the server every time a file is saved.
-The application need to connect to a merchant-backend properly configured to run.
+The application needs to connect to a merchant-backend properly configured to run.
## Building for deploy
-To build and deploy the SPA in your local server run the install script:
+To build and deploy the SPA on your local server run the install script:
```shell
make install
@@ -58,15 +58,14 @@ make install
* SWR: React Hooks library for data fetching (stale-while-revalidate)
-* Yup: schema builder for value parsing and validation (to be deprecated)
+* Yup: Schema builder for value parsing and validation (to be deprecated)
-* Date-fns: library for manipulating javascript date
+* Date-fns: A library for manipulating javascript dates
-* qrcode-generator: simplest qr implementation based on JIS X 0510:1999
+* qrcode-generator: Simplest QR-code implementation based on JIS X 0510:1999
-* @gnu-taler/taler-util: types and tooling
+* @gnu-taler/taler-util: Types and tooling
-* history: manage the history stack, navigate, and persist state between sessions
-
-* jed: gettext like library for internationalization
+* history: Manage the history stack, navigate, and make states persist in between sessions
+* jed: gettext as a library for internationalization
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -260,9 +260,9 @@ export function ImportingAccountModal({
letter: !letter
? i18n.str`Required`
: parsed === undefined
- ? i18n.str`Letter must be a JSON string`
+ ? i18n.str`This letter must be a JSON string`
: account === undefined
- ? i18n.str`JSON string is invalid`
+ ? i18n.str`This JSON string is invalid`
: undefined,
};
return (
@@ -426,7 +426,7 @@ export function CompareAccountsModal({
)}
<tr>
<td>
- <i18n.Translate>Owner's name</i18n.Translate>
+ <i18n.Translate>The account owner's legal name</i18n.Translate>
</td>
<td>{formPayto?.params["receiver-name"] ?? "--"}</td>
<td>{testPayto.params["receiver-name"]}</td>
@@ -434,7 +434,7 @@ export function CompareAccountsModal({
{!!testPayto.params["receiver-postal-code"] && (
<tr>
<td>
- <i18n.Translate>Owner's postal code</i18n.Translate>
+ <i18n.Translate>The postal code of the account owner's address</i18n.Translate>
</td>
<td>{formPayto?.params["receiver-postal-code"] ?? "--"}</td>
<td>{testPayto.params["receiver-postal-code"]}</td>
@@ -443,7 +443,7 @@ export function CompareAccountsModal({
{!!testPayto.params["receiver-town"] && (
<tr>
<td>
- <i18n.Translate>Owner's town</i18n.Translate>
+ <i18n.Translate>Town</i18n.Translate>
</td>
<td>{formPayto?.params["receiver-town"] ?? "--"}</td>
<td>{testPayto.params["receiver-town"]}</td>
@@ -510,7 +510,7 @@ export function ValidBankAccount({
return (
<ConfirmModal
- label={i18n.str`Ok`}
+ label={i18n.str`OK`}
description={i18n.str`Validate bank account: ${from}`}
active
onCancel={onCancel}
@@ -518,8 +518,7 @@ export function ValidBankAccount({
>
<p style={{ paddingTop: 0 }}>
<i18n.Translate>
- You need to make a bank transfer with the specified subject to
- validate that you are the owner of the account.
+ In order to prove that you are the beneficial owner of the bank account, you are required to wire a small amount to a specified bank account with the subject given hereinafter.
</i18n.Translate>
</p>
<div class="table-container">
@@ -530,7 +529,7 @@ export function ValidBankAccount({
<i18n.Translate>Step 1:</i18n.Translate>
<i18n.Translate>
- Copy this string and paste it into the 'Subject' or 'Purpose' field in your banking app or on your bank's website.
+ Copy this string and paste it into the 'Subject' or 'Purpose' field in your preferred banking app or online banking website.
</i18n.Translate>
</td>
</tr>
@@ -541,7 +540,7 @@ export function ValidBankAccount({
<i18n.Translate>Step 2:</i18n.Translate>
<i18n.Translate>
- Copy and paste this IBAN and receiver information into the recipient fields in your banking app or on your website.
+ Copy and paste this IBAN and the legal name of the beneficial owner into the respective fields in your preferred banking app or online banking website.
</i18n.Translate>
</td>
</tr>
@@ -561,8 +560,7 @@ export function ValidBankAccount({
<i18n.Translate>Step 3:</i18n.Translate>
<i18n.Translate>
- Select the smallest possible amount for the wire transfer in
- your banking app or on your online banking website.
+ Select the smallest possible amount for a wire transfer in your preferred banking app or online banking website.
</i18n.Translate>
</td>
</tr>
@@ -581,10 +579,8 @@ export function ValidBankAccount({
{/* <WarningBox style={{ margin: 0 }}> */}
<b>
<i18n.Translate>
- Make sure ALL data is correct, including the subject and you
- are using your selected bank account. You can use the copy
- buttons (<CopyIcon />) to prevent typing errors or the
- "payto://" URI below to copy just one value.
+ Make sure ALL data is correct, especially the subject, and that you are choosing the bank account from which you definitely want to make the wire transfer.
+ You can use the copy buttons (<CopyIcon />) to avoid typos or make use of the "payto://" URI below to copy just one value.
</i18n.Translate>
</b>
{/* </WarningBox> */}
@@ -594,8 +590,7 @@ export function ValidBankAccount({
<tr>
<td colSpan={2} width="100%" style={{ wordBreak: "break-all" }}>
<i18n.Translate>
- Alternatively, if your bank already supports the standard
- 'PayTo URI', you can use this{" "}
+ As an alternative, in case that your bank already supports the 'PayTo URI' standard, you can use this{" "}
<a
target="_blank"
rel="noreferrer"
@@ -740,24 +735,21 @@ export function DeleteModal({
<p>
<i18n.Translate>
If you delete the instance named <b>"{element.name}"</b>{" "}
- (ID: <b>{element.id}</b>), the merchant will no longer be able to
- process orders or refunds
+ (ID: <b>{element.id}</b>), the merchant will no longer be able to process orders and refunds
</i18n.Translate>
</p>
<p>
<i18n.Translate>
- This action deletes the instance private key, but preserves all
- transaction data. You can still access that data after deleting the
- instance.
+ This action deletes the instance's private key, but preserves all transaction data.
+ You can still access the transaction data after having deleted the instance.
</i18n.Translate>
</p>
<p class="warning">
<i18n.Translate>
Deleting an instance{" "}
<b>
- <i18n.Translate>Can't be undone</i18n.Translate>
+ <i18n.Translate>This cannot be undone!</i18n.Translate>
</b>
- .
</i18n.Translate>
</p>
</ConfirmModal>
@@ -782,23 +774,20 @@ export function PurgeModal({
<p>
<i18n.Translate>
If you purge the instance named <b>"{element.name}"</b> (ID:{" "}
- <b>{element.id}</b>), you will also delete all it's transaction
- data.
+ <b>{element.id}</b>), you will also delete all of its transaction data!
</i18n.Translate>
</p>
<p>
<i18n.Translate>
- The instance will disappear from your list, and you will no longer be
- able to access it's data.
+ The instance will disappear from your list and you will no longer be able to access its data.
</i18n.Translate>
</p>
<p class="warning">
<i18n.Translate>
Purging an instance{" "}
<b>
- <i18n.Translate>Can't be undone</i18n.Translate>
+ <i18n.Translate>This cannot be undone!</i18n.Translate>
</b>
- .
</i18n.Translate>
</p>
</ConfirmModal>
@@ -830,16 +819,16 @@ export function PurgeModal({
// const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token;
// const errors = undefinedIfEmpty({
// old_token: hasInputTheCorrectOldToken
-// ? i18n.str`Is not the same as the current password`
+// ? i18n.str`This is not matching the current password`
// : undefined,
// new_token: !form.new_token
// ? i18n.str`Required`
// : form.new_token === form.old_token
-// ? i18n.str`Can't be the same as the old token`
+// ? i18n.str`The new token cannot be the old token`
// : undefined,
// repeat_token:
// form.new_token !== form.repeat_token
-// ? i18n.str`Is not the same`
+// ? i18n.str`This is not matching`
// : undefined,
// });
@@ -864,26 +853,26 @@ export function PurgeModal({
// <Input<State>
// name="old_token"
// label={i18n.str`Old password`}
-// tooltip={i18n.str`Password currently in use`}
+// tooltip={i18n.str`The password you are currently using`}
// inputType="password"
// />
// )}
// <Input<State>
// name="new_token"
// label={i18n.str`New password`}
-// tooltip={i18n.str`Next password to be used`}
+// tooltip={i18n.str`The new password to be used`}
// inputType="password"
// />
// <Input<State>
// name="repeat_token"
-// label={i18n.str`Repeat password`}
-// tooltip={i18n.str`Confirm the same password`}
+// label={i18n.str`Repeat the password`}
+// tooltip={i18n.str`Please repeat your new password`}
// inputType="password"
// />
// </FormProvider>
// <p>
// <i18n.Translate>
-// Clearing the password will mean public access to the instance
+// Leaving the password void will enable public access to the instance
// </i18n.Translate>
// </p>
// </div>
@@ -909,11 +898,11 @@ export function PurgeModal({
// new_token: !form.new_token
// ? i18n.str`Required`
// : form.new_token === form.old_token
-// ? i18n.str`Can't be the same as the old password`
+// ? i18n.str`The new password cannot be the old password`
// : undefined,
// repeat_token:
// form.new_token !== form.repeat_token
-// ? i18n.str`Is not the same`
+// ? i18n.str`This is not matching`
// : undefined,
// });
@@ -939,20 +928,20 @@ export function PurgeModal({
// <Input<State>
// name="new_token"
// label={i18n.str`New password`}
-// tooltip={i18n.str`Next password to be used`}
+// tooltip={i18n.str`The new password to be used`}
// inputType="password"
// />
// <Input<State>
// name="repeat_token"
-// label={i18n.str`Repeat password`}
-// tooltip={i18n.str`Confirm the same password`}
+// label={i18n.str`Repeat the password`}
+// tooltip={i18n.str`Please repeat your new password`}
// inputType="password"
// />
// </FormProvider>
// <p>
// <i18n.Translate>
-// With external authorization method no check will be done by
-// the merchant backend
+// Making use of the external authorization method, no check will be performed by
+// the Taler Merchant Backend
// </i18n.Translate>
// </p>
// </div>
@@ -966,7 +955,7 @@ export function PurgeModal({
// onClick={onClear}
// disabled={onClear === undefined}
// >
-// <i18n.Translate>Set external authorization</i18n.Translate>
+// <i18n.Translate>Enable external authorization</i18n.Translate>
// </button>
// )}
// <div class="buttons is-right" style={{ width: "100%" }}>
@@ -1009,7 +998,7 @@ export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode {
<Spinner />
<div class="column" />
</div>
- <p>{i18n.str`The operation will be automatically cancelled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p>
+ <p>{i18n.str`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right" style={{ width: "100%" }}>
