/
ViewCustomers.tsx
120 lines (111 loc) · 3.41 KB
/
ViewCustomers.tsx
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
110
111
112
113
114
115
116
117
118
119
120
import React, { FC, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { Button } from "antd";
import {
useQuery,
UseQueryResult,
useQueryClient,
useMutation,
} from '@tanstack/react-query';
import { toast } from "react-toastify";
import CustomerTable from "../components/Customers/CustomerTable";
import {
CustomerTotal,
CustomerType,
CustomerCreateType,
CustomerSummary,
} from "../types/customer-type";
import { Customer } from "../api/api";
import LoadingSpinner from "../components/LoadingSpinner";
import { PageLayout } from "../components/base/PageLayout";
import CreateCustomerForm, {
CreateCustomerState,
} from "../components/Customers/CreateCustomerForm";
const ViewCustomers: FC = () => {
const queryClient = useQueryClient();
const [visible, setVisible] = useState(false);
const { data, isLoading }: UseQueryResult<CustomerSummary[]> = useQuery<
CustomerSummary[]
>(["customer_list"], () => Customer.getCustomers().then((res) => res));
const { data: customerTotals, isLoading: totalLoading } = useQuery<
CustomerTotal[]
>(["customer_totals"], () => Customer.getCustomerTotals().then((res) => res));
const mutation = useMutation(
(post: CustomerCreateType) => Customer.createCustomer(post),
{
onSuccess: () => {
setVisible(false);
queryClient.invalidateQueries(["customer_list"]);
queryClient.invalidateQueries(["customer_totals"]);
toast.success("Customer created successfully", {
position: toast.POSITION.TOP_CENTER,
});
},
onError: () => {
toast.error("Error creating customer", {
position: toast.POSITION.TOP_CENTER,
});
},
}
);
const openCustomerModal = () => {
setVisible(true);
};
const onCancel = () => {
setVisible(false);
};
const onSave = (state: CreateCustomerState) => {
const customerInstance: CustomerCreateType = {
customer_id: state.customer_id,
customer_name: state.name,
email: state.email,
};
if (state.payment_provider) {
customerInstance.payment_provider = state.payment_provider;
customerInstance.payment_provider_id = state.payment_provider_id;
}
if (state.default_currency_code) {
customerInstance.default_currency_code = state.default_currency_code;
}
mutation.mutate(customerInstance);
onCancel();
};
return (
<PageLayout
title="Customers"
extra={[
<Button
onClick={openCustomerModal}
type="primary"
id="create-cutsomer-model"
size="large"
key="create-plan"
disabled={(import.meta as any).env.VITE_IS_DEMO === "true"}
className="hover:!bg-primary-700"
style={{ background: "#C3986B", borderColor: "#C3986B" }}
>
<div className="flex items-center justify-between text-white">
<div>
<PlusOutlined className="!text-white w-12 h-12 cursor-pointer" />
Create Customer
</div>
</div>
</Button>,
]}
>
<div>
{isLoading || data === undefined ? (
<LoadingSpinner />
) : (
<CustomerTable customerArray={data} totals={customerTotals} />
)}
<CreateCustomerForm
visible={visible}
onSave={onSave}
onCancel={onCancel}
/>
</div>
</PageLayout>
);
};
export default ViewCustomers;