[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated: add styles to show or
|
From: |
gnunet |
|
Subject: |
[taler-merchant-backoffice] branch master updated: add styles to show order deatils |
|
Date: |
Wed, 29 Sep 2021 21:42:18 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
The following commit(s) were added to refs/heads/master by this push:
new 9b99c7a add styles to show order deatils
9b99c7a is described below
commit 9b99c7ad54c1421e35978b632aac5d06ff239092
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Sep 29 16:42:09 2021 -0300
add styles to show order deatils
---
packages/backend/package.json | 1 +
packages/backend/render-mustache.js | 18 +++
packages/backend/rollup.config.js | 8 +-
.../backend/src/pages/ShowOrderDetails.stories.tsx | 103 ++++++++++++--
packages/backend/src/pages/ShowOrderDetails.tsx | 156 +++++++++++++++------
packages/backend/src/styled/index.tsx | 94 ++++++++++---
pnpm-lock.yaml | 7 +
7 files changed, 307 insertions(+), 80 deletions(-)
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 6a78f5f..f84c238 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -106,6 +106,7 @@
"inline-chunk-html-plugin": "^1.1.1",
"jest": "^26.6.3",
"jest-preset-preact": "^4.0.2",
+ "mustache": "^4.2.0",
"po2json": "^0.4.5",
"preact-cli": "^3.0.5",
"preact-render-to-json": "^3.6.6",
diff --git a/packages/backend/render-mustache.js
b/packages/backend/render-mustache.js
new file mode 100644
index 0000000..74b68dd
--- /dev/null
+++ b/packages/backend/render-mustache.js
@@ -0,0 +1,18 @@
+const mustache = require('mustache')
+const fs = require('fs')
+
+const htmlFile = process.argv[2]
+const exampleJson = process.argv[3]
+
+if (!htmlFile || !exampleJson) {
+ console.log('usage: render-mustache <htmlFile> <exampleJson>')
+ return 1
+}
+
+const html = fs.readFileSync(htmlFile, 'utf8')
+const json = fs.readFileSync(exampleJson, 'utf8')
+const example = JSON.parse(json)
+
+const output = mustache.render(html, example);
+
+console.log(output)
diff --git a/packages/backend/rollup.config.js
b/packages/backend/rollup.config.js
index f5227ba..a324422 100644
--- a/packages/backend/rollup.config.js
+++ b/packages/backend/rollup.config.js
@@ -104,9 +104,9 @@ const pageDefinition = (name) => ({
});
export default [
- pageDefinition("OfferTip"),
- pageDefinition("OfferRefund"),
- pageDefinition("DepletedTip"),
- pageDefinition("RequestPayment"),
+ // pageDefinition("OfferTip"),
+ // pageDefinition("OfferRefund"),
+ // pageDefinition("DepletedTip"),
+ // pageDefinition("RequestPayment"),
pageDefinition("ShowOrderDetails"),
]
diff --git a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
index a78618f..5274a71 100644
--- a/packages/backend/src/pages/ShowOrderDetails.stories.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.stories.tsx
@@ -21,14 +21,14 @@
import { FunctionalComponent, h } from 'preact';
import { MerchantBackend } from '../declaration';
-import { ShowOrderDetails as TestedComponent } from './ShowOrderDetails';
-
+import { Props, ShowOrderDetails as TestedComponent } from
'./ShowOrderDetails';
export default {
title: 'ShowOrderDetails',
component: TestedComponent,
argTypes: {
},
+ excludeStories: /.*Data$/,
};
function createExample<Props>(Component: FunctionalComponent<Props>, props:
Partial<Props>) {
@@ -37,17 +37,90 @@ function createExample<Props>(Component:
FunctionalComponent<Props>, props: Part
return r
}
-export const Example = createExample(TestedComponent, {
- order_summary: 'here goes the order summary',
- refund_amount: 'USD:10',
- contract_terms: {
- amount: 'USD:10',
- summary: 'this is a short summary',
- pay_deadline: {
- t_ms: new Date().getTime() + 6*24*60*60*1000
+const defaultContractTerms: MerchantBackend.ContractTerms = {
+ order_id: 'XRS8876388373',
+ amount: 'USD:10',
+ summary: 'this is a short summary',
+ pay_deadline: {
+ t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+ },
+ merchant: {
+ name: 'the merchant (inc)',
+ address: {},
+ jurisdiction: {},
+ }
+};
+
+
+export const exampleData: { [name: string]: Props } = {
+ Simplest: {
+ order_summary: 'here goes the order summary',
+ contract_terms: defaultContractTerms,
+ },
+ WithRefundAmount: {
+ order_summary: 'here goes the order summary',
+ refund_amount: 'USD:10',
+ contract_terms: defaultContractTerms,
+ },
+ WithDeliveryDate: {
+ order_summary: 'here goes the order summary',
+ contract_terms: {
+ ...defaultContractTerms,
+ delivery_date: {
+ t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+ }
},
- merchant: {
- name: 'the merchant (inc)'
- }
- } as MerchantBackend.ContractTerms
-});
+ },
+ WithDeliveryLocation: {
+ order_summary: 'here goes the order summary',
+ contract_terms: {
+ ...defaultContractTerms,
+ delivery_location: {
+ address_lines: ['addr1', 'addr2', 'addr3', 'addr4', 'addr5', 'addr6',
'addr7'],
+ building_name: 'building-name',
+ building_number: 'building-number',
+ country: 'country',
+ country_subdivision: 'country sub',
+ district: 'district',
+ post_code: 'post-code',
+ street: 'street',
+ town: 'town',
+ town_location: 'town loc',
+ },
+ },
+ },
+ WithThreeProducts: {
+ order_summary: 'here goes the order summary',
+ contract_terms: {
+ order_id: 'XRS8876388373',
+ amount: 'USD:10',
+ summary: 'this is a short summary',
+ pay_deadline: {
+ t_ms: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
+ },
+ merchant: {
+ name: 'the merchant (inc)'
+ },
+ products: [{
+ description: 'description of the first product',
+ price: '5:USD',
+ quantity: 1,
+ delivery_date: { t_ms: new Date().getTime() }
+ }, {
+ description: 'another description',
+ price: '10:USD',
+ quantity: 5,
+ }, {
+ description: 'one last description',
+ price: '10:USD',
+ quantity: 5
+ }]
+ } as MerchantBackend.ContractTerms
+ },
+}
+
+export const Simplest = createExample(TestedComponent, exampleData.Simplest);
+export const WithRefundAmount = createExample(TestedComponent,
exampleData.WithRefundAmount);
+export const WithDeliveryDate = createExample(TestedComponent,
exampleData.WithDeliveryDate);
+export const WithDeliveryLocation = createExample(TestedComponent,
exampleData.WithDeliveryLocation);
+export const WithThreeProducts = createExample(TestedComponent,
exampleData.WithThreeProducts);
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx
b/packages/backend/src/pages/ShowOrderDetails.tsx
index 58f2831..b791c91 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -18,6 +18,7 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { Product } from '@gnu-taler/taler-util';
import { format } from 'date-fns';
import { Fragment, h, render, VNode } from 'preact';
import { render as renderToString } from 'preact-render-to-string';
@@ -25,7 +26,7 @@ import { Footer } from '../components/Footer';
import "../css/pure-min.css";
import "../css/style.css";
import { MerchantBackend } from '../declaration';
-import { Center, Page } from '../styled';
+import { Page, InfoBox, TableExpanded, TableSimple } from '../styled';
/**
* This page creates a payment request QR code
@@ -43,7 +44,8 @@ import { Center, Page } from '../styled';
* - order_summary
*/
-interface Props {
+export interface Props {
+ btr?: boolean; // build time rendering flag
order_summary?: string;
refund_amount?: string;
contract_terms?: MerchantBackend.ContractTerms;
@@ -60,46 +62,116 @@ function Head({ order_summary }: { order_summary?: string
}): VNode {
</Fragment>
}
-export function ShowOrderDetails({ order_summary, refund_amount,
contract_terms }: Props): VNode {
- const pay_deadline = contract_terms?.pay_deadline.t_ms === 'never' ||
contract_terms?.pay_deadline.t_ms === undefined ? undefined :
- format(new Date(contract_terms?.pay_deadline.t_ms), 'dd/MM/yyyy HH:mm:ss')
-
+export function ShowOrderDetails({ order_summary, refund_amount,
contract_terms, btr }: Props): VNode {
+ const productList = (btr ? [{} as Product] : (contract_terms?.products ||
[]))
return <Page>
- <div>
- <h1>Order details</h1>
-
- <div>
- This is the default status page for your order for <b>{order_summary ?
order_summary : `{{ order_summary }}`}</b>.
- </div>
-
-
- <h2>Refund status</h2>
- <div>
- The merchant has granted you refunds on the purchase of
<b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
- </div>
-
- <h2>Full contract details</h2>
-
- <Center>
- <pre>
- <table>
- <tr>
- <td>amount</td><td>{contract_terms?.amount || `{{
contract_terms.amount }}`}</td>
- </tr>
- <tr>
- <td>summary</td><td>{contract_terms?.summary || `{{
contract_terms.summary }}`}</td>
- </tr>
- <tr>
- <td>pay deadline</td><td>{pay_deadline || `{{
contract_terms.pay_deadline.t_ms }}`}</td>
- </tr>
- <tr>
- <td>merchant name</td><td>{contract_terms?.merchant?.name || `{{
contract_terms.merchant.name }}`}</td>
- </tr>
- </table>
- </pre>
- </Center>
-
- </div>
+ <header>
+ <h1>Details of order {contract_terms?.order_id || `{{
contract_terms.order_id }}`}</h1>
+ </header>
+
+ <section>
+ {btr && `{{#refund_amount}}`}
+ {(btr || refund_amount) && <section>
+ <InfoBox>
+ <b>Refunded:</b> The merchant refunded you <b>{refund_amount || `{{
refund_amount }}`}</b>.
+ </InfoBox>
+ </section>}
+ {btr && `{{/refund_amount}}`}
+
+ <section>
+ <TableExpanded>
+ <dt>Order summary:</dt>
+ <dd>{contract_terms?.summary || `{{ contract_terms.summary }}`}</dd>
+ <dt>Amount paid:</dt>
+ <dd>{contract_terms?.amount || `{{ contract_terms.amount }}`}</dd>
+ <dt>Merchant name:</dt>
+ <dd>{contract_terms?.merchant.name || `{{
contract_terms.merchant.name }}`}</dd>
+
+ {btr && `{{#contract_terms.delivery_location}}`}
+ {(btr || contract_terms?.delivery_location) && <Fragment>
+ <dt>Delivery address:</dt>
+
+ {btr && `{{#contract_terms.delivery_location.building_name}}`}
+ <dd>{contract_terms?.delivery_location?.building_name || `{{
contract_terms.delivery_location.building_name }}`}
{contract_terms?.delivery_location?.building_number || `{{
contract_terms.delivery_location.building_number }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.building_name}}`}
+
+ {btr && `{{#contract_terms.delivery_location.country}}`}
+ <dd>{contract_terms?.delivery_location?.country || `{{
contract_terms.delivery_location.country }}`}
{contract_terms?.delivery_location?.country_subdivision || `{{
contract_terms.delivery_location.country_subdivision }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.country}}`}
+
+ {btr && `{{#contract_terms.delivery_location.district}}`}
+ <dd>{contract_terms?.delivery_location?.district || `{{
contract_terms.delivery_location.district }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.district}}`}
+
+ {btr && `{{#contract_terms.delivery_location.post_code}}`}
+ <dd>{contract_terms?.delivery_location?.post_code || `{{
contract_terms.delivery_location.post_code }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.post_code}}`}
+
+ {btr && `{{#contract_terms.delivery_location.street}}`}
+ <dd>{contract_terms?.delivery_location?.street || `{{
contract_terms.delivery_location.street }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.street}}`}
+
+ {btr && `{{#contract_terms.delivery_location.town}}`}
+ <dd>{contract_terms?.delivery_location?.town || `{{
contract_terms.delivery_location.town }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.town}}`}
+
+ {btr && `{{#contract_terms.delivery_location.town_location}}`}
+ <dd>{contract_terms?.delivery_location?.town_location || `{{
contract_terms.delivery_location.town_location }}`}</dd>
+ {btr && `{{/contract_terms.delivery_location.town_location}}`}
+ </Fragment>}
+ {btr && `{{/contract_terms.delivery_location}}`}
+
+ {btr && `{{#contract_terms.delivery_date}}`}
+ {(btr || contract_terms?.delivery_date) && <Fragment>
+ <dt>Delivery date:</dt>
+ <dd>{contract_terms?.delivery_date ?
+ (contract_terms?.delivery_date.t_ms != 'never' ?
+ format(contract_terms?.delivery_date.t_ms, 'dd MMM yyyy
HH:mm:ss') :
+ 'never')
+ : `{{ contract_terms.delivery_date }}`} </dd>
+
+ </Fragment>}
+ {btr && `{{/contract_terms.delivery_date}}`}
+ </TableExpanded>
+ </section>
+
+ {btr && `{{#contract_terms.products.0}}`}
+ {!productList.length ? null : <section>
+ <h2>Products purchased</h2>
+ <TableSimple>
+ {btr && `{{#contract_terms.products}}`}
+ {productList.map((p, i) => {
+ return <Fragment key={i}>
+ <p>{p.description || `{{description}}`}</p>
+ <dl>
+
+ <dt>Amount:</dt>
+ <dd>{p.quantity || `{{description}}`}</dd>
+
+ <dt>Price:</dt>
+ <dd>{p.price || `{{quantity}}`}</dd>
+
+ {btr && `{{#delivery_date}}`}
+ {(btr || p.delivery_date) && <Fragment>
+ <dt>Delivered on:</dt>
+ <dd>{p.delivery_date ?
+ (p.delivery_date.t_ms != 'never' ?
+ format(p.delivery_date.t_ms, 'dd MMM yyyy HH:mm:ss') :
+ 'never')
+ : `{{ delivery_date }}`} </dd>
+ </Fragment>}
+ {btr && `{{/delivery_date}}`}
+
+ </dl>
+ </Fragment>
+ })}
+ {btr && `{{/contract_terms.products}}`}
+ </TableSimple>
+
+ </section>}
+ {btr && `{{/contract_terms.products.0}}`}
+ </section>
+
<Footer />
</Page>
@@ -131,6 +203,6 @@ export function mount(): void {
export function buildTimeRendering(): { head: string, body: string } {
return {
head: renderToString(<Head />),
- body: renderToString(<ShowOrderDetails />)
+ body: renderToString(<ShowOrderDetails btr />)
}
}
diff --git a/packages/backend/src/styled/index.tsx
b/packages/backend/src/styled/index.tsx
index 2323d0d..55803b9 100644
--- a/packages/backend/src/styled/index.tsx
+++ b/packages/backend/src/styled/index.tsx
@@ -1,3 +1,23 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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 { styled } from '@linaria/react'
export const QRPlaceholder = styled.div`
@@ -26,37 +46,38 @@ export const Page = styled.div`
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
- text-align: center;
-
+ align-items: center;
+
a:link,
a:visited,
a:hover,
a:active {
color: black;
}
- & > section > p {
- margin-top: 30px;
- margin-bottom: 30px;
+
+ section {
+ text-align: center;
+ width: 600px;
+ /* margin: auto; */
+ /* margin-top: 0px; */
+ margin-bottom: auto;
+ /* overflow: auto; */
+ }
+ section:not(:first-of-type) {
+ margin-top: 2em;
}
& > header {
- flex-direction: column;
- justify-content: space-between;
display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ text-align: center;
}
-
- table > tr > td {
- text-align: left;
- }
- table > tr > td:first-child {
- text-align: right;
- font-weight: bold;
- padding-right: 20px;
- }
-
& > footer {
- flex-direction: row;
- justify-content: center;
display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ width: 100%;
+ margin-bottom: 0px;
}
`
export const Center = styled.div`
@@ -120,3 +141,38 @@ export const WalletLink = styled.a<{ upperCased?: boolean
}>`
border-color: #000;
`;
+export const InfoBox = styled.div`
+ border-radius: 0.25em;
+ flex-direction: column;
+ /* margin: 0.5em; */
+ padding: 1em;
+ /* width: 100%; */
+ border:solid 1px #b8daff;
+ background-color:#cce5ff;
+ color:#004085;
+`
+
+export const TableExpanded = styled.dl`
+ text-align: left;
+ dt {
+ font-weight: bold;
+ margin-top: 1em;
+ }
+ dd {
+ margin-inline-start: 0px;
+ }
+`
+
+export const TableSimple = styled.dl`
+ text-align: left;
+ dt {
+ font-weight: bold;
+ display: inline-block;
+ width:30%;
+ }
+ dd {
+ margin-inline-start: 0px;
+ display: inline-block;
+ width:70%;
+ }
+`
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db80473..e92d486 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,7 @@ importers:
jed: ^1.1.1
jest: ^26.6.3
jest-preset-preact: ^4.0.2
+ mustache: ^4.2.0
po2json: ^0.4.5
preact: ^10.5.13
preact-cli: ^3.0.5
@@ -150,6 +151,7 @@ importers:
inline-chunk-html-plugin: 1.1.1
jest: 26.6.3
jest-preset-preact: 4.0.2_669f037bdb6c36f0a67e918c516dafdd
+ mustache: 4.2.0
po2json: 0.4.5
preact-cli: 3.0.5_c069246dc1d99535ac277c76f8ef56e0
preact-render-to-json: 3.6.6_preact@10.5.13
@@ -11476,6 +11478,11 @@ packages:
thunky: 1.1.0
dev: true
+ /mustache/4.2.0:
+ resolution: {integrity:
sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
+ hasBin: true
+ dev: true
+
/mute-stream/0.0.8:
resolution: {integrity:
sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
dev: true
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-merchant-backoffice] branch master updated: add styles to show order deatils,
gnunet <=