bananas-commerce-admin
Version:
What's this, an admin for apes?
112 lines • 8.17 kB
JavaScript
import React, { useCallback, useEffect, useState } from "react";
import { SellOutlined } from "@mui/icons-material";
import CopyAllOutlinedIcon from "@mui/icons-material/CopyAllOutlined";
import { Button, Chip, Collapse, Stack } from "@mui/material";
import { DateTime } from "luxon";
import { useSnackbar } from "notistack";
import CardActions from "../../../components/Card/CardActions";
import CardCloseButton from "../../../components/Card/CardCloseButton";
import CardContent from "../../../components/Card/CardContent";
import CardFieldDate from "../../../components/Card/CardFieldDate";
import CardFieldText from "../../../components/Card/CardFieldText";
import CardRow from "../../../components/Card/CardRow";
import { useApi } from "../../../contexts/ApiContext";
import { useCardContext } from "../../../contexts/CardContext";
import { useDialog } from "../../../contexts/DialogContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { hasPermission } from "../../../util/has_permission";
import { toTitleCase } from "../../../util/to_title_case";
import { currencyFormat } from "../../pos/utils/amountToCurrencyString";
import EndSubscriptionButton from "./EndSubscriptionButton";
import ResumeSubscriptionButton from "./ResumeSubscriptionButton";
import StartSubscriptionButton from "./StartSubscriptionButton";
import SubscriptionsDialog from "./SubscriptionsDialog";
import SubscriptionsList from "./SubscriptionsList";
const SubscriptionsCardContent = ({ subscription, membership_number, refresh, }) => {
const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
const [periods, setPeriods] = useState(null);
const openDialog = useDialog();
const api = useApi();
const { user } = useUser();
const { isOpen } = useCardContext();
const { t } = useI18n();
const { enqueueSnackbar } = useSnackbar();
const handleRefresh = async () => {
refresh();
await fetchPeriods();
};
const fetchPeriods = async () => {
const response = await api.operations["subscription.period:list"].call({
params: {
subscription_id: subscription.id,
},
});
const data = await response.json();
// TODO Coerce dates
if (periods == null)
setPeriods(data.results);
};
const subscribeAgain = useCallback(async () => {
if (await openDialog(t("Subscribe"), `Are you sure you want to subscribe this member to "${subscription.name}" again?`, {
ok: t("Yes, subscribe"),
cancel: t("Cancel"),
})) {
const action = api.operations["subscription.contrib:member-subscription-create"];
if (!action) {
throw new Error('Invalid action "subscription.contrib:member-subscription-create".');
}
const response = await action.call({
params: { membership_number },
body: { reference: subscription.plan },
});
if (response.status == 201) {
refresh();
enqueueSnackbar(t("New subscription created"), { variant: "success" });
}
else if (response.status == 200) {
enqueueSnackbar(t("Member already subscribed"), { variant: "info" });
}
else {
console.error("[SUBSCRIBE_AGAIN]", response);
enqueueSnackbar(t("Failed to subscribe"), { variant: "error" });
}
}
}, [api, subscription]);
useEffect(() => {
if (periods != null)
return;
fetchPeriods();
}, [subscription, fetchPeriods, periods]);
return (React.createElement(React.Fragment, null,
React.createElement(Collapse, { in: isOpen, timeout: "auto" },
React.createElement(CardContent, null,
React.createElement(CardRow, { columns: subscription.is_cancelled ? 4 : 3 },
React.createElement(CardFieldText, { formName: "periodicity", isEditable: false, label: t("Periodicity"), required: true, size: 1, value: toTitleCase(subscription.periodicity) }),
React.createElement(CardFieldText, { formName: "frequency", isEditable: false, label: t("Frequency"), required: true, size: 1, value: String(subscription.nth) }),
React.createElement(CardFieldText, { formName: "amount", isEditable: false, label: t("Price"), size: 1, value: currencyFormat(Number.parseFloat(subscription.amount), subscription.currency) })),
React.createElement(CardRow, { columns: subscription.is_cancelled ? 4 : 3 },
React.createElement(CardFieldDate, { formName: "date_created", isEditable: false, label: t("Date created"), required: true, size: 1, value: DateTime.fromISO(subscription.date_created) }),
subscription.start_date != null && (React.createElement(CardFieldDate, { fallback: "Not started", formName: "start_date", isEditable: false, label: t("Started"), size: 1, value: DateTime.fromISO(subscription.start_date) })),
subscription.is_cancelled && (React.createElement(CardFieldDate, { formName: "date_cancelled", isEditable: false, label: t("Date cancelled"), size: 1, value: DateTime.fromISO(subscription.date_cancelled) })),
subscription.end_date && (React.createElement(CardFieldDate, { formName: "end_date", isEditable: false, label: t("End date"), size: 1, value: DateTime.fromISO(subscription.end_date) })),
!subscription.is_cancelled && subscription.state === "RUNNING" && (React.createElement(CardFieldDate, { formName: "expiry_date", isEditable: false, label: t("Next payment"), size: 1, value: DateTime.fromISO(subscription.expiry_date) }))),
subscription.voucher_codes.length > 0 && (React.createElement(Stack, { direction: "row", spacing: 1 }, subscription.voucher_codes.map((voucher) => (React.createElement(Chip, { key: voucher, color: "info", icon: React.createElement(SellOutlined, null), label: voucher, size: "small", sx: { pl: 0.5 } })))))),
React.createElement(SubscriptionsList, { periods: periods, refresh: handleRefresh }),
React.createElement(CardActions, { alwaysVisible: true },
React.createElement(Stack, { direction: "row", justifyContent: "space-between", width: "100%" },
subscription.state === "PENDING" && (React.createElement(Stack, { direction: "row", spacing: 2 },
React.createElement(StartSubscriptionButton, { refresh: handleRefresh, subscriptionId: subscription.id }),
React.createElement(EndSubscriptionButton, { refresh: handleRefresh, subscriptionId: subscription.id }))),
subscription.state === "RUNNING" && subscription.is_cancelled === false && (React.createElement(Stack, { direction: "row", spacing: 2 },
React.createElement(Button, { variant: "outlined", onClick: () => setCancelDialogOpen(true) }, "Cancel subscription"))),
subscription.state === "RUNNING" && subscription.is_cancelled === true && (React.createElement(Stack, { direction: "row", spacing: 2 },
React.createElement(ResumeSubscriptionButton, { refresh: handleRefresh, subscriptionId: subscription.id }),
React.createElement(EndSubscriptionButton, { refresh: handleRefresh, subscriptionId: subscription.id }))),
subscription.state === "ENDED" &&
hasPermission(user, "subscription.add_subscription") && (React.createElement(Button, { startIcon: React.createElement(CopyAllOutlinedIcon, null), variant: "outlined", onClick: subscribeAgain }, "Subscribe Again")),
React.createElement(CardCloseButton, null)))),
React.createElement(SubscriptionsDialog, { open: cancelDialogOpen, refresh: handleRefresh, setOpen: setCancelDialogOpen, subscriptionId: subscription.id })));
};
export default SubscriptionsCardContent;
//# sourceMappingURL=SubscriptionsCardContent.js.map