diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx')
| -rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx | 256 |
1 files changed, 166 insertions, 90 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx index 60be23c21..bca90e352 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx @@ -15,33 +15,33 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { format } from 'date-fns'; -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { format } from "date-fns"; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { DatePicker } from "../../../../components/picker/DatePicker.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from '../../../../i18n/index.js'; +import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface ListPageProps { - errorOrderId: string | undefined, + errorOrderId: string | undefined; - onShowAll: () => void, - onShowPaid: () => void, - onShowRefunded: () => void, - onShowNotWired: () => void, + onShowAll: () => void; + onShowPaid: () => void; + onShowRefunded: () => void; + onShowNotWired: () => void; onCopyURL: (id: string) => void; - isAllActive: string, - isPaidActive: string, - isRefundedActive: string, - isNotWiredActive: string, + isAllActive: string; + isPaidActive: string; + isRefundedActive: string; + isNotWiredActive: string; - jumpToDate?: Date, - onSelectDate: (date?: Date) => void, + jumpToDate?: Date; + onSelectDate: (date?: Date) => void; orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[]; onLoadMoreBefore?: () => void; @@ -55,92 +55,168 @@ export interface ListPageProps { onCreate: () => void; } -export function ListPage({ orders, errorOrderId, isAllActive, onSelectOrder, onRefundOrder, onSearchOrderById, jumpToDate, onCopyURL, onShowAll, onShowPaid, onShowRefunded, onShowNotWired, onSelectDate, isPaidActive, isRefundedActive, isNotWiredActive, onCreate }: ListPageProps): VNode { +export function ListPage({ + orders, + errorOrderId, + isAllActive, + onSelectOrder, + onRefundOrder, + onSearchOrderById, + jumpToDate, + onCopyURL, + onShowAll, + onShowPaid, + onShowRefunded, + onShowNotWired, + onSelectDate, + isPaidActive, + isRefundedActive, + isNotWiredActive, + onCreate, +}: ListPageProps): VNode { const i18n = useTranslator(); const dateTooltip = i18n`select date to show nearby orders`; const [pickDate, setPickDate] = useState(false); - const [orderId, setOrderId] = useState<string>(''); - - return <section class="section is-main-section"> + const [orderId, setOrderId] = useState<string>(""); - <div class="level"> - <div class="level-left"> - <div class="level-item"> - <div class="field has-addons"> - <div class="control"> - <input class={errorOrderId ? "input is-danger" : "input"} type="text" value={orderId} onChange={e => setOrderId(e.currentTarget.value)} placeholder={i18n`order id`} /> - {errorOrderId && <p class="help is-danger">{errorOrderId}</p>} + return ( + <section class="section is-main-section"> + <div class="level"> + <div class="level-left"> + <div class="level-item"> + <div class="field has-addons"> + <div class="control"> + <input + class={errorOrderId ? "input is-danger" : "input"} + type="text" + value={orderId} + onChange={(e) => setOrderId(e.currentTarget.value)} + placeholder={i18n`order id`} + /> + {errorOrderId && <p class="help is-danger">{errorOrderId}</p>} + </div> + <span + class="has-tooltip-bottom" + data-tooltip={i18n`jump to order with the given order ID`} + > + <button + class="button" + onClick={(e) => onSearchOrderById(orderId)} + > + <span class="icon"> + <i class="mdi mdi-arrow-right" /> + </span> + </button> + </span> </div> - <span class="has-tooltip-bottom" data-tooltip={i18n`jump to order with the given order ID`}> - <button class="button" onClick={(e) => onSearchOrderById(orderId)}> - <span class="icon"><i class="mdi mdi-arrow-right" /></span> - </button> - </span> </div> </div> </div> - </div> - <div class="columns"> - <div class="column is-two-thirds"> - <div class="tabs" style={{overflow:'inherit'}}> - <ul> - <li class={isAllActive}> - <div class="has-tooltip-right" data-tooltip={i18n`remove all filters`}> - <a onClick={onShowAll}><Translate>All</Translate></a> - </div> - </li> - <li class={isPaidActive}> - <div class="has-tooltip-right" data-tooltip={i18n`only show paid orders`}> - <a onClick={onShowPaid}><Translate>Paid</Translate></a> - </div> - </li> - <li class={isRefundedActive}> - <div class="has-tooltip-right" data-tooltip={i18n`only show orders with refunds`}> - <a onClick={onShowRefunded}><Translate>Refunded</Translate></a> + <div class="columns"> + <div class="column is-two-thirds"> + <div class="tabs" style={{ overflow: "inherit" }}> + <ul> + <li class={isAllActive}> + <div + class="has-tooltip-right" + data-tooltip={i18n`remove all filters`} + > + <a onClick={onShowAll}> + <Translate>All</Translate> + </a> + </div> + </li> + <li class={isPaidActive}> + <div + class="has-tooltip-right" + data-tooltip={i18n`only show paid orders`} + > + <a onClick={onShowPaid}> + <Translate>Paid</Translate> + </a> + </div> + </li> + <li class={isRefundedActive}> + <div + class="has-tooltip-right" + data-tooltip={i18n`only show orders with refunds`} + > + <a onClick={onShowRefunded}> + <Translate>Refunded</Translate> + </a> + </div> + </li> + <li class={isNotWiredActive}> + <div + class="has-tooltip-left" + data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`} + > + <a onClick={onShowNotWired}> + <Translate>Not wired</Translate> + </a> + </div> + </li> + </ul> + </div> + </div> + <div class="column "> + <div class="buttons is-right"> + <div class="field has-addons"> + {jumpToDate && ( + <div class="control"> + <a class="button" onClick={() => onSelectDate(undefined)}> + <span class="icon" data-tooltip={i18n`clear date filter`}> + <i class="mdi mdi-close" /> + </span> + </a> + </div> + )} + <div class="control"> + <span class="has-tooltip-top" data-tooltip={dateTooltip}> + <input + class="input" + type="text" + readonly + value={!jumpToDate ? "" : format(jumpToDate, "yyyy/MM/dd")} + placeholder={i18n`date (YYYY/MM/DD)`} + onClick={() => { + setPickDate(true); + }} + /> + </span> </div> - </li> - <li class={isNotWiredActive}> - <div class="has-tooltip-left" data-tooltip={i18n`only show orders where customers paid, but wire payments from payment provider are still pending`}> - <a onClick={onShowNotWired}><Translate>Not wired</Translate></a> + <div class="control"> + <span class="has-tooltip-left" data-tooltip={dateTooltip}> + <a + class="button" + onClick={() => { + setPickDate(true); + }} + > + <span class="icon"> + <i class="mdi mdi-calendar" /> + </span> + </a> + </span> </div> - </li> - </ul> - </div> - </div> - <div class="column "> - <div class="buttons is-right"> - <div class="field has-addons"> - {jumpToDate && <div class="control"> - <a class="button" onClick={() => onSelectDate(undefined)}> - <span class="icon" data-tooltip={i18n`clear date filter`}><i class="mdi mdi-close" /></span> - </a> - </div>} - <div class="control"> - <span class="has-tooltip-top" data-tooltip={dateTooltip}> - <input class="input" type="text" readonly value={!jumpToDate ? '' : format(jumpToDate, 'yyyy/MM/dd')} placeholder={i18n`date (YYYY/MM/DD)`} onClick={() => { setPickDate(true); }} /> - </span> - </div> - <div class="control"> - <span class="has-tooltip-left" data-tooltip={dateTooltip}> - <a class="button" onClick={() => { setPickDate(true); }}> - <span class="icon"><i class="mdi mdi-calendar" /></span> - </a> - </span> </div> </div> </div> </div> - </div> - <DatePicker - opened={pickDate} - closeFunction={() => setPickDate(false)} - dateReceiver={onSelectDate} /> + <DatePicker + opened={pickDate} + closeFunction={() => setPickDate(false)} + dateReceiver={onSelectDate} + /> - <CardTable orders={orders} - onCreate={onCreate} - onCopyURL={onCopyURL} - onSelect={onSelectOrder} - onRefund={onRefundOrder} /> - </section>; + <CardTable + orders={orders} + onCreate={onCreate} + onCopyURL={onCopyURL} + onSelect={onSelectOrder} + onRefund={onRefundOrder} + /> + </section> + ); } |