@musetax/compass-widget 0.1.218

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # Widget-Package
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ interface AddTransactionFormProps {
3
+ userId: string;
4
+ accessToken: string;
5
+ onSuccess: () => void;
6
+ onError?: (msg: string) => void;
7
+ }
8
+ declare const AddTransactionForm: React.FC<AddTransactionFormProps>;
9
+ export default AddTransactionForm;
@@ -0,0 +1,317 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { useState } from "react";
12
+ import showToast from "./ShowToast";
13
+ import api from "./api";
14
+ const defaultFormData = {
15
+ account_id: "",
16
+ amount: 0,
17
+ iso_currency_code: "USD",
18
+ datetime: new Date().toISOString(),
19
+ date: new Date().toISOString(),
20
+ name: "",
21
+ merchant_name: "",
22
+ payment_channel: "",
23
+ transaction_id: "",
24
+ transaction_type: "",
25
+ personal_finance_category: {
26
+ primary: "",
27
+ detailed: "",
28
+ },
29
+ };
30
+ const AddTransactionForm = ({ userId, accessToken, onSuccess, onError, }) => {
31
+ const [formData, setFormData] = useState(defaultFormData);
32
+ const [submitting, setSubmitting] = useState(false);
33
+ const [error, setError] = useState("");
34
+ const [fieldErrors, setFieldErrors] = useState({});
35
+ const validate = () => {
36
+ const errors = {};
37
+ if (!formData.name.trim())
38
+ errors.name = "Transaction name is required.";
39
+ if (!formData.merchant_name.trim())
40
+ errors.merchant_name = "Merchant name is required.";
41
+ if (!formData.amount || formData.amount <= 0)
42
+ errors.amount = "Amount must be greater than 0.";
43
+ if (!formData.account_id.trim())
44
+ errors.account_id = "Account ID is required.";
45
+ if (!formData.transaction_id.trim())
46
+ errors.transaction_id = "Transaction ID is required.";
47
+ if (!formData.payment_channel.trim())
48
+ errors.payment_channel = "Payment channel is required.";
49
+ if (!formData.transaction_type.trim())
50
+ errors.transaction_type = "Transaction type is required.";
51
+ if (!formData.personal_finance_category.primary.trim())
52
+ errors.primary = "Primary category is required.";
53
+ if (!formData.personal_finance_category.detailed.trim())
54
+ errors.detailed = "Detailed category is required.";
55
+ setFieldErrors(errors);
56
+ return Object.keys(errors).length === 0;
57
+ };
58
+ const clearError = (field) => {
59
+ if (fieldErrors[field]) {
60
+ setFieldErrors((prev) => (Object.assign(Object.assign({}, prev), { [field]: "" })));
61
+ }
62
+ };
63
+ const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
64
+ var _a, _b;
65
+ if (!validate())
66
+ return;
67
+ setSubmitting(true);
68
+ setError("");
69
+ const payload = {
70
+ user_id: userId,
71
+ transactions: [formData],
72
+ };
73
+ try {
74
+ const response = yield api.post("/transactions", payload);
75
+ const data = response.data;
76
+ setFormData(defaultFormData);
77
+ setFieldErrors({});
78
+ onSuccess();
79
+ showToast("success", "Transaction added successfully");
80
+ }
81
+ catch (err) {
82
+ const msg = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) || "Failed to add transaction";
83
+ setError(msg);
84
+ onError === null || onError === void 0 ? void 0 : onError(msg);
85
+ showToast("error", msg);
86
+ }
87
+ finally {
88
+ setSubmitting(false);
89
+ }
90
+ });
91
+ return (_jsxs("div", Object.assign({ style: {
92
+ width: "100%",
93
+ maxHeight: "70vh",
94
+ backgroundColor: "#fff",
95
+ borderRadius: "12px",
96
+ boxShadow: "0 0 2px rgba(0,0,0,0.2)",
97
+ margin: "auto",
98
+ zIndex: 9998,
99
+ padding: "0",
100
+ overflowY: "auto",
101
+ } }, { children: [_jsx("h2", Object.assign({ style: {
102
+ fontSize: "1.125rem",
103
+ fontWeight: "500",
104
+ color: "#042567",
105
+ margin: "0px",
106
+ backgroundColor: "#F1F7FB",
107
+ padding: "16px 24px",
108
+ display: "flex",
109
+ justifyContent: "space-between",
110
+ alignItems: "center",
111
+ borderBottom: "1px solid #BFDBFE",
112
+ marginBottom: "18px",
113
+ } }, { children: "Add New Transaction" })), _jsxs("div", Object.assign({ style: { padding: "8px 16px" } }, { children: [error && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: error }))), _jsxs("div", Object.assign({ style: {
114
+ display: "flex",
115
+ alignItems: "start",
116
+ gap: "16px",
117
+ marginBottom: "12px",
118
+ } }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
119
+ fontSize: "14px",
120
+ fontWeight: "500",
121
+ color: "#042567",
122
+ marginBottom: "5px",
123
+ display: "block",
124
+ } }, { children: "Transaction Name" })), _jsx("input", { type: "text", placeholder: "Transaction Name", value: formData.name, onChange: (e) => {
125
+ setFormData(Object.assign(Object.assign({}, formData), { name: e.target.value }));
126
+ clearError("name");
127
+ }, style: {
128
+ width: "calc(100% - 35px)",
129
+ padding: "10px 16px",
130
+ border: "1px solid #E6E7EA",
131
+ borderRadius: "10px",
132
+ fontSize: "0.875rem",
133
+ color: "#042567",
134
+ outline: "none",
135
+ } })] })), fieldErrors.name && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.name })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
136
+ fontSize: "14px",
137
+ fontWeight: "500",
138
+ color: "#042567",
139
+ marginBottom: "5px",
140
+ display: "block",
141
+ } }, { children: "Merchant Name" })), _jsx("input", { placeholder: "Merchant Name", value: formData.merchant_name, onChange: (e) => {
142
+ setFormData(Object.assign(Object.assign({}, formData), { merchant_name: e.target.value }));
143
+ clearError("merchant_name");
144
+ }, style: {
145
+ width: "calc(100% - 35px)",
146
+ padding: "10px 16px",
147
+ border: "1px solid #E6E7EA",
148
+ borderRadius: "10px",
149
+ fontSize: "0.875rem",
150
+ color: "#042567",
151
+ outline: "none",
152
+ } })] })), fieldErrors.merchant_name && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.merchant_name })))] }))] })), _jsxs("div", Object.assign({ style: {
153
+ display: "flex",
154
+ alignItems: "start",
155
+ gap: "16px",
156
+ marginBottom: "12px",
157
+ } }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
158
+ fontSize: "14px",
159
+ fontWeight: "500",
160
+ color: "#042567",
161
+ marginBottom: "5px",
162
+ display: "block",
163
+ } }, { children: "Amount" })), _jsx("input", { placeholder: "Amount", type: "number", value: formData.amount, onChange: (e) => {
164
+ setFormData(Object.assign(Object.assign({}, formData), { amount: parseFloat(e.target.value) }));
165
+ clearError("amount");
166
+ }, style: {
167
+ width: "calc(100% - 35px)",
168
+ padding: "10px 16px",
169
+ border: "1px solid #E6E7EA",
170
+ borderRadius: "10px",
171
+ fontSize: "0.875rem",
172
+ color: "#042567",
173
+ outline: "none",
174
+ } })] })), fieldErrors.amount && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.amount })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
175
+ fontSize: "14px",
176
+ fontWeight: "500",
177
+ color: "#042567",
178
+ marginBottom: "5px",
179
+ display: "block",
180
+ } }, { children: "Account ID" })), _jsx("input", { placeholder: "Account ID", value: formData.account_id, onChange: (e) => {
181
+ setFormData(Object.assign(Object.assign({}, formData), { account_id: e.target.value }));
182
+ clearError("account_id");
183
+ }, style: {
184
+ width: "calc(100% - 35px)",
185
+ padding: "10px 16px",
186
+ border: "1px solid #E6E7EA",
187
+ borderRadius: "10px",
188
+ fontSize: "0.875rem",
189
+ color: "#042567",
190
+ outline: "none",
191
+ } })] })), fieldErrors.account_id && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.account_id })))] }))] })), _jsxs("div", Object.assign({ style: {
192
+ display: "flex",
193
+ alignItems: "start",
194
+ gap: "16px",
195
+ marginBottom: "12px",
196
+ } }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
197
+ fontSize: "14px",
198
+ fontWeight: "500",
199
+ color: "#042567",
200
+ marginBottom: "5px",
201
+ display: "block",
202
+ } }, { children: "Transaction ID" })), _jsx("input", { placeholder: "Transaction ID", value: formData.transaction_id, onChange: (e) => {
203
+ setFormData(Object.assign(Object.assign({}, formData), { transaction_id: e.target.value }));
204
+ clearError("transaction_id");
205
+ }, style: {
206
+ width: "calc(100% - 35px)",
207
+ padding: "10px 16px",
208
+ border: "1px solid #E6E7EA",
209
+ borderRadius: "10px",
210
+ fontSize: "0.875rem",
211
+ color: "#042567",
212
+ outline: "none",
213
+ } })] })), fieldErrors.transaction_id && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.transaction_id })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
214
+ fontSize: "14px",
215
+ fontWeight: "500",
216
+ color: "#042567",
217
+ marginBottom: "5px",
218
+ display: "block",
219
+ } }, { children: "Payment Channel" })), _jsx("input", { placeholder: "Payment Channel", value: formData.payment_channel, onChange: (e) => {
220
+ setFormData(Object.assign(Object.assign({}, formData), { payment_channel: e.target.value }));
221
+ clearError("payment_channel");
222
+ }, style: {
223
+ width: "calc(100% - 35px)",
224
+ padding: "10px 16px",
225
+ border: "1px solid #E6E7EA",
226
+ borderRadius: "10px",
227
+ fontSize: "0.875rem",
228
+ color: "#042567",
229
+ outline: "none",
230
+ } })] })), fieldErrors.payment_channel && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.payment_channel })))] }))] })), _jsxs("div", Object.assign({ style: {
231
+ display: "flex",
232
+ alignItems: "start",
233
+ gap: "16px",
234
+ marginBottom: "12px",
235
+ } }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
236
+ fontSize: "14px",
237
+ fontWeight: "500",
238
+ color: "#042567",
239
+ marginBottom: "5px",
240
+ display: "block",
241
+ } }, { children: "Transaction Type" })), _jsx("input", { placeholder: "Transaction Type", value: formData.transaction_type, onChange: (e) => {
242
+ setFormData(Object.assign(Object.assign({}, formData), { transaction_type: e.target.value }));
243
+ clearError("transaction_type");
244
+ }, style: {
245
+ width: "calc(100% - 35px)",
246
+ padding: "10px 16px",
247
+ border: "1px solid #E6E7EA",
248
+ borderRadius: "10px",
249
+ fontSize: "0.875rem",
250
+ color: "#042567",
251
+ outline: "none",
252
+ } })] })), fieldErrors.transaction_type && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.transaction_type })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
253
+ fontSize: "14px",
254
+ fontWeight: "500",
255
+ color: "#042567",
256
+ marginBottom: "5px",
257
+ display: "block",
258
+ } }, { children: "Primary Category" })), _jsx("input", { placeholder: "Primary Category", value: formData.personal_finance_category.primary, onChange: (e) => {
259
+ setFormData(Object.assign(Object.assign({}, formData), { personal_finance_category: Object.assign(Object.assign({}, formData.personal_finance_category), { primary: e.target.value }) }));
260
+ clearError("primary");
261
+ }, style: {
262
+ width: "calc(100% - 35px)",
263
+ padding: "10px 16px",
264
+ border: "1px solid #E6E7EA",
265
+ borderRadius: "10px",
266
+ fontSize: "0.875rem",
267
+ color: "#042567",
268
+ outline: "none",
269
+ } })] })), fieldErrors.primary && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.primary })))] }))] })), _jsxs("div", Object.assign({ style: {
270
+ display: "block",
271
+ marginBottom: "0px",
272
+ } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
273
+ fontSize: "14px",
274
+ fontWeight: "500",
275
+ color: "#042567",
276
+ marginBottom: "5px",
277
+ display: "block",
278
+ } }, { children: "Detailed Category" })), _jsx("input", { placeholder: "Detailed Category", value: formData.personal_finance_category.detailed, onChange: (e) => {
279
+ setFormData(Object.assign(Object.assign({}, formData), { personal_finance_category: Object.assign(Object.assign({}, formData.personal_finance_category), { detailed: e.target.value }) }));
280
+ clearError("detailed");
281
+ }, style: {
282
+ width: "calc(100% - 35px)",
283
+ padding: "10px 16px",
284
+ border: "1px solid #E6E7EA",
285
+ borderRadius: "10px",
286
+ fontSize: "0.875rem",
287
+ color: "#042567",
288
+ outline: "none",
289
+ } })] })), fieldErrors.detailed && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.detailed })))] }))] })), _jsxs("div", Object.assign({ style: {
290
+ display: "flex",
291
+ alignItems: "center",
292
+ justifyContent: "center",
293
+ marginTop: "20px",
294
+ marginBottom: "20px",
295
+ gap: "10px",
296
+ } }, { children: [_jsx("button", Object.assign({ disabled: submitting, onClick: onSuccess, style: {
297
+ border: "1px solid #5387F1",
298
+ backgroundColor: "white",
299
+ color: "#5387F1",
300
+ fontSize: "0.875rem",
301
+ fontWeight: 500,
302
+ padding: "8px 16px",
303
+ borderRadius: 8,
304
+ cursor: "pointer",
305
+ } }, { children: "Cancel" })), _jsx("button", Object.assign({ onClick: handleSubmit, disabled: submitting, style: {
306
+ backgroundColor: "#5387F1",
307
+ border: "1px solid #5387F1",
308
+ color: "white",
309
+ fontSize: "0.875rem",
310
+ fontWeight: 500,
311
+ padding: "8px 16px",
312
+ borderRadius: 8,
313
+ marginRight: 8,
314
+ cursor: "pointer",
315
+ } }, { children: submitting ? "Submitting..." : "Submit" }))] }))] })));
316
+ };
317
+ export default AddTransactionForm;
package/dist/App.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare function App(): import("react/jsx-runtime").JSX.Element;
2
+ export default App;
package/dist/App.js ADDED
@@ -0,0 +1,5 @@
1
+ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
+ function App() {
3
+ return _jsx(_Fragment, {});
4
+ }
5
+ export default App;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { render, screen } from '@testing-library/react';
3
+ import App from './App';
4
+ test('renders learn react link', () => {
5
+ render(_jsx(App, {}));
6
+ const linkElement = screen.getByText(/learn react/i);
7
+ expect(linkElement).toBeInTheDocument();
8
+ });
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ interface Props {
3
+ userId: string;
4
+ access_token: string;
5
+ onError?: (msg: string) => void;
6
+ }
7
+ declare const ClientAuthForm: React.FC<Props>;
8
+ export default ClientAuthForm;