diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx | 75 |
1 files changed, 44 insertions, 31 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx index 69e9df52e..4ed78b002 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -19,7 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { AmountJson, Amounts, stringifyRefundUri } from "@gnu-taler/taler-util"; +import { + AmountJson, + Amounts, + TalerMerchantApi, + stringifyRefundUri, +} from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { format, formatDistance } from "date-fns"; import { Fragment, VNode, h } from "preact"; @@ -34,27 +39,29 @@ import { InputLocation } from "../../../../components/form/InputLocation.js"; import { TextField } from "../../../../components/form/TextField.js"; import { ProductList } from "../../../../components/product/ProductList.js"; import { useSessionContext } from "../../../../context/session.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { datetimeFormatForSettings, usePreference } from "../../../../hooks/preference.js"; +import { + datetimeFormatForSettings, + usePreference, +} from "../../../../hooks/preference.js"; import { mergeRefunds } from "../../../../utils/amount.js"; import { RefundModal } from "../list/Table.js"; import { Event, Timeline } from "./Timeline.js"; -type Entity = MerchantBackend.Orders.MerchantOrderStatusResponse; -type CT = MerchantBackend.ContractTerms; +type Entity = TalerMerchantApi.MerchantOrderStatusResponse; +type CT = TalerMerchantApi.ContractTerms; interface Props { onBack: () => void; selected: Entity; id: string; - onRefund: (id: string, value: MerchantBackend.Orders.RefundRequest) => void; + onRefund: (id: string, value: TalerMerchantApi.RefundRequest) => void; } -type Paid = MerchantBackend.Orders.CheckPaymentPaidResponse & { +type Paid = TalerMerchantApi.CheckPaymentPaidResponse & { refund_taken: string; }; -type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse; -type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse; +type Unpaid = TalerMerchantApi.CheckPaymentUnpaidResponse; +type Claimed = TalerMerchantApi.CheckPaymentClaimedResponse; function ContractTerms({ value }: { value: CT }) { const { i18n } = useTranslationContext(); @@ -149,7 +156,7 @@ function ClaimedPage({ order, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentClaimedResponse; + order: TalerMerchantApi.CheckPaymentClaimedResponse; }) { const events: Event[] = []; if (order.contract_terms.timestamp.t_s !== "never") { @@ -193,7 +200,7 @@ function ClaimedPage({ const [value, valueHandler] = useState<Partial<Claimed>>(order); const { i18n } = useTranslationContext(); - const [settings] = usePreference() + const [settings] = usePreference(); return ( <div> @@ -237,10 +244,14 @@ function ClaimedPage({ <b> <i18n.Translate>claimed at</i18n.Translate>: </b>{" "} - {format( - new Date(order.contract_terms.timestamp.t_s * 1000), - datetimeFormatForSettings(settings) - )} + {order.contract_terms.timestamp.t_s === "never" + ? "never" + : format( + new Date( + order.contract_terms.timestamp.t_s * 1000, + ), + datetimeFormatForSettings(settings), + )} </p> </div> </div> @@ -311,7 +322,7 @@ function PaidPage({ onRefund, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentPaidResponse; + order: TalerMerchantApi.CheckPaymentPaidResponse; onRefund: (id: string) => void; }) { const events: Event[] = []; @@ -365,8 +376,8 @@ function PaidPage({ }); if (order.wire_details && order.wire_details.length) { if (order.wire_details.length > 1) { - let last: MerchantBackend.Orders.TransactionWireTransfer | null = null; - let first: MerchantBackend.Orders.TransactionWireTransfer | null = null; + let last: TalerMerchantApi.TransactionWireTransfer | null = null; + let first: TalerMerchantApi.TransactionWireTransfer | null = null; let total: AmountJson | null = null; order.wire_details.forEach((w) => { @@ -410,10 +421,10 @@ function PaidPage({ } } - const now = new Date() + const now = new Date(); const nextEvent = events.find((e) => { - return e.when.getTime() > now.getTime() - }) + return e.when.getTime() > now.getTime(); + }); const [value, valueHandler] = useState<Partial<Paid>>(order); const { @@ -422,9 +433,10 @@ function PaidPage({ const refundurl = stringifyRefundUri({ merchantBaseUrl: backendUrl, - orderId: order.contract_terms.order_id - }) + orderId: order.contract_terms.order_id, + }); const refundable = + order.contract_terms.refund_deadline.t_s !== "never" && new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000; const { i18n } = useTranslationContext(); @@ -506,15 +518,16 @@ function PaidPage({ textOverflow: "ellipsis", }} > - {nextEvent && + {nextEvent && ( <p> - <i18n.Translate>Next event in </i18n.Translate> {formatDistance( + <i18n.Translate>Next event in </i18n.Translate>{" "} + {formatDistance( nextEvent.when, new Date(), // "yyyy/MM/dd HH:mm:ss", )} </p> - } + )} </div> </div> </div> @@ -610,11 +623,11 @@ function UnpaidPage({ order, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentUnpaidResponse; + order: TalerMerchantApi.CheckPaymentUnpaidResponse; }) { const [value, valueHandler] = useState<Partial<Unpaid>>(order); const { i18n } = useTranslationContext(); - const [settings] = usePreference() + const [settings] = usePreference(); return ( <div> <section class="hero is-hero-bar"> @@ -662,9 +675,9 @@ function UnpaidPage({ {order.creation_time.t_s === "never" ? "never" : format( - new Date(order.creation_time.t_s * 1000), - datetimeFormatForSettings(settings) - )} + new Date(order.creation_time.t_s * 1000), + datetimeFormatForSettings(settings), + )} </p> </div> </div> |