Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 13x 120x 120x 13x 205x 205x 205x 205x 205x 205x 205x 4x 3x 1x 205x 205x 3x 1x | import React from "react";
import { useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { NavigationContext } from "~app/contexts/navigation-context";
import { useLocale } from "~app/hooks/use-locale";
import { useTrpcMutationOptions } from "~app/hooks/use-trpc-mutation-options";
import type { DebtIntention as DebtIntentionData } from "~app/trpc-types";
import { formatCurrency } from "~app/utils/currency";
import { useTRPC } from "~app/utils/trpc";
import { Button, ButtonGroup } from "~components/button";
import { options as acceptDebtIntentionOptions } from "~mutations/debt-intentions/accept";
import { DebtIntention, SkeletonDebtIntention } from "./debt-intention";
export const SkeletonInboundDebtIntention = () => {
const { t } = useTranslation("debts");
return (
<SkeletonDebtIntention>
<ButtonGroup className="self-end" color="primary">
<Button isDisabled>{t("intentions.buttons.accept")}</Button>
<Button variant="bordered" isDisabled>
{t("intentions.buttons.acceptAndEdit")}
</Button>
<Button isDisabled variant="bordered">
{t("intentions.buttons.reject")}
</Button>
</ButtonGroup>
</SkeletonDebtIntention>
);
};
type Props = {
intention: DebtIntentionData;
};
export const InboundDebtIntention: React.FC<Props> = ({ intention }) => {
const { t } = useTranslation("debts");
const locale = useLocale();
const trpc = useTRPC();
const { useNavigate } = React.use(NavigationContext);
const navigate = useNavigate();
const acceptMutation = useMutation(
trpc.debtIntentions.accept.mutationOptions(
useTrpcMutationOptions(acceptDebtIntentionOptions, {
context: { intention },
}),
),
);
const acceptSyncIntention = React.useCallback(
(redirectToDebt = false) => {
acceptMutation.mutate(
{ id: intention.id },
{
onSuccess: () => {
Iif (!redirectToDebt) {
return;
}
navigate({ to: "/debts/$id", params: { id: intention.id } });
},
},
);
},
[acceptMutation, intention.id, navigate],
);
const { isPending } = acceptMutation;
return (
<DebtIntention intention={intention} testID="inbound-debt-intention">
<ButtonGroup className="self-end" color="primary">
<Button
isDisabled={isPending}
isLoading={isPending}
onPress={() => acceptSyncIntention()}
title={t("intentions.buttons.acceptLong", {
amount: formatCurrency(
locale,
intention.currencyCode,
intention.amount,
),
})}
>
{t("intentions.buttons.accept")}
</Button>
<Button
variant="bordered"
isDisabled={isPending}
isLoading={isPending}
onPress={() => acceptSyncIntention(true)}
title={t("intentions.buttons.acceptAndEditLong", {
amount: formatCurrency(
locale,
intention.currencyCode,
intention.amount,
),
})}
>
{t("intentions.buttons.acceptAndEdit")}
</Button>
<Button isDisabled variant="bordered">
{t("intentions.buttons.reject")}
</Button>
</ButtonGroup>
</DebtIntention>
);
};
|