diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx | 258 |
1 files changed, 149 insertions, 109 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx index a033e7b3a..b5fe7611c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx @@ -15,18 +15,23 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, Fragment } from 'preact'; -import { useState } from 'preact/hooks'; +import { h, VNode, Fragment } from "preact"; +import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { InstanceOrderFilter, useInstanceOrders, useOrderAPI, useOrderDetails } from "../../../../hooks/order.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { + InstanceOrderFilter, + useInstanceOrders, + useOrderAPI, + useOrderDetails, +} from "../../../../hooks/order.js"; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { RefundModal } from "./Table.js"; import { ListPage } from "./ListPage.js"; @@ -39,107 +44,133 @@ interface Props { onCreate: () => void; } -export default function ({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode { - const [filter, setFilter] = useState<InstanceOrderFilter>({}) - const [orderToBeRefunded, setOrderToBeRefunded] = useState<MerchantBackend.Orders.OrderHistoryEntry | undefined>(undefined) - - const setNewDate = (date?: Date) => setFilter(prev => ({ ...prev, date })) - - const result = useInstanceOrders(filter, setNewDate) - const { refundOrder, getPaymentURL } = useOrderAPI() - - const [notif, setNotif] = useState<Notification | undefined>(undefined) - - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return <Loading /> - if (!result.ok) return onLoadError(result) - - const isPaidActive = filter.paid === 'yes' ? "is-active" : '' - const isRefundedActive = filter.refunded === 'yes' ? "is-active" : '' - const isNotWiredActive = filter.wired === 'no' ? "is-active" : '' - const isAllActive = filter.paid === undefined && filter.refunded === undefined && filter.wired === undefined ? 'is-active' : '' - - const i18n = useTranslator() - const [errorOrderId, setErrorOrderId] = useState<string | undefined>(undefined) +export default function ({ + onUnauthorized, + onLoadError, + onCreate, + onSelect, + onNotFound, +}: Props): VNode { + const [filter, setFilter] = useState<InstanceOrderFilter>({}); + const [orderToBeRefunded, setOrderToBeRefunded] = useState< + MerchantBackend.Orders.OrderHistoryEntry | undefined + >(undefined); + + const setNewDate = (date?: Date) => setFilter((prev) => ({ ...prev, date })); + + const result = useInstanceOrders(filter, setNewDate); + const { refundOrder, getPaymentURL } = useOrderAPI(); + + const [notif, setNotif] = useState<Notification | undefined>(undefined); + + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return <Loading />; + if (!result.ok) return onLoadError(result); + + const isPaidActive = filter.paid === "yes" ? "is-active" : ""; + const isRefundedActive = filter.refunded === "yes" ? "is-active" : ""; + const isNotWiredActive = filter.wired === "no" ? "is-active" : ""; + const isAllActive = + filter.paid === undefined && + filter.refunded === undefined && + filter.wired === undefined + ? "is-active" + : ""; + + const i18n = useTranslator(); + const [errorOrderId, setErrorOrderId] = useState<string | undefined>( + undefined, + ); async function testIfOrderExistAndSelect(orderId: string) { if (!orderId) { - setErrorOrderId(i18n`Enter an order id`) + setErrorOrderId(i18n`Enter an order id`); return; } try { - await getPaymentURL(orderId) - onSelect(orderId) - setErrorOrderId(undefined) + await getPaymentURL(orderId); + onSelect(orderId); + setErrorOrderId(undefined); } catch { - setErrorOrderId(i18n`order not found`) + setErrorOrderId(i18n`order not found`); } } - return <Fragment> - <NotificationCard notification={notif} /> - - <ListPage - orders={result.data.orders.map(o => ({ ...o, id: o.order_id }))} - onLoadMoreBefore={result.loadMorePrev} hasMoreBefore={!result.isReachingStart} - onLoadMoreAfter={result.loadMore} hasMoreAfter={!result.isReachingEnd} - - onSelectOrder={(order) => onSelect(order.id)} - onRefundOrder={(value) => setOrderToBeRefunded(value)} - - errorOrderId={errorOrderId} - isAllActive={isAllActive} - isNotWiredActive={isNotWiredActive} - isPaidActive={isPaidActive} - isRefundedActive={isRefundedActive} - jumpToDate={filter.date} - onCopyURL={(id) => getPaymentURL(id).then((resp) => copyToClipboard(resp.data))} - - onCreate={onCreate} - onSearchOrderById={testIfOrderExistAndSelect} - onSelectDate={setNewDate} - onShowAll={() => setFilter({})} - onShowPaid={() => setFilter({ paid: 'yes' })} - onShowRefunded={() => setFilter({ refunded: 'yes' })} - onShowNotWired={() => setFilter({ wired: 'no' })} - - /> - - {orderToBeRefunded && <RefundModalForTable - id={orderToBeRefunded.order_id} - onCancel={() => setOrderToBeRefunded(undefined)} - onConfirm={(value) => refundOrder(orderToBeRefunded.order_id, value) - .then(() => setNotif({ - message: i18n`refund created successfully`, - type: "SUCCESS" - })) - .catch((error) => setNotif({ - message: i18n`could not create the refund`, - type: "ERROR", - description: error.message - })) - .then(() => setOrderToBeRefunded(undefined))} - onLoadError={(error) => { - setNotif({ - message: i18n`could not create the refund`, - type: "ERROR", - description: error.message - }); - setOrderToBeRefunded(undefined); - return <div />; - }} - onUnauthorized={onUnauthorized} - onNotFound={() => { - setNotif({ - message: i18n`could not get the order to refund`, - type: "ERROR", - // description: error.message - }); - setOrderToBeRefunded(undefined); - return <div />; - }} />} - </Fragment> + return ( + <Fragment> + <NotificationCard notification={notif} /> + + <ListPage + orders={result.data.orders.map((o) => ({ ...o, id: o.order_id }))} + onLoadMoreBefore={result.loadMorePrev} + hasMoreBefore={!result.isReachingStart} + onLoadMoreAfter={result.loadMore} + hasMoreAfter={!result.isReachingEnd} + onSelectOrder={(order) => onSelect(order.id)} + onRefundOrder={(value) => setOrderToBeRefunded(value)} + errorOrderId={errorOrderId} + isAllActive={isAllActive} + isNotWiredActive={isNotWiredActive} + isPaidActive={isPaidActive} + isRefundedActive={isRefundedActive} + jumpToDate={filter.date} + onCopyURL={(id) => + getPaymentURL(id).then((resp) => copyToClipboard(resp.data)) + } + onCreate={onCreate} + onSearchOrderById={testIfOrderExistAndSelect} + onSelectDate={setNewDate} + onShowAll={() => setFilter({})} + onShowPaid={() => setFilter({ paid: "yes" })} + onShowRefunded={() => setFilter({ refunded: "yes" })} + onShowNotWired={() => setFilter({ wired: "no" })} + /> + + {orderToBeRefunded && ( + <RefundModalForTable + id={orderToBeRefunded.order_id} + onCancel={() => setOrderToBeRefunded(undefined)} + onConfirm={(value) => + refundOrder(orderToBeRefunded.order_id, value) + .then(() => + setNotif({ + message: i18n`refund created successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not create the refund`, + type: "ERROR", + description: error.message, + }), + ) + .then(() => setOrderToBeRefunded(undefined)) + } + onLoadError={(error) => { + setNotif({ + message: i18n`could not create the refund`, + type: "ERROR", + description: error.message, + }); + setOrderToBeRefunded(undefined); + return <div />; + }} + onUnauthorized={onUnauthorized} + onNotFound={() => { + setNotif({ + message: i18n`could not get the order to refund`, + type: "ERROR", + // description: error.message + }); + setOrderToBeRefunded(undefined); + return <div />; + }} + /> + )} + </Fragment> + ); } interface RefundProps { @@ -151,21 +182,30 @@ interface RefundProps { onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void; } -function RefundModalForTable({ id, onUnauthorized, onLoadError, onNotFound, onConfirm, onCancel }: RefundProps) { +function RefundModalForTable({ + id, + onUnauthorized, + onLoadError, + onNotFound, + onConfirm, + onCancel, +}: RefundProps) { const result = useOrderDetails(id); - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return <Loading /> - if (!result.ok) return onLoadError(result) + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return <Loading />; + if (!result.ok) return onLoadError(result); - return <RefundModal - order={result.data} - onCancel={onCancel} - onConfirm={onConfirm} - /> + return ( + <RefundModal + order={result.data} + onCancel={onCancel} + onConfirm={onConfirm} + /> + ); } async function copyToClipboard(text: string) { - return navigator.clipboard.writeText(text) + return navigator.clipboard.writeText(text); } |