@dmsi/wedgekit-react 0.0.158 → 0.0.160
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/dist/{chunk-2VIJAGJ3.js → chunk-NT2ZKA4W.js} +2 -2
- package/dist/{chunk-GG5JOFS6.js → chunk-PLMGI5K5.js} +1 -1
- package/dist/{chunk-FAGNATAJ.js → chunk-RUTYNLKS.js} +1 -1
- package/dist/components/LoadingScrim.cjs +1 -1
- package/dist/components/LoadingScrim.js +1 -1
- package/dist/components/PDFViewer.cjs +203 -42
- package/dist/components/PDFViewer.js +89 -35
- package/dist/components/PaymentOnAccountModal.cjs +2 -2
- package/dist/components/PaymentOnAccountModal.js +3 -3
- package/dist/components/SelectPaymentMethod.cjs +2 -2
- package/dist/components/SelectPaymentMethod.js +2 -2
- package/dist/components/Spinner.cjs +1 -1
- package/dist/components/Spinner.js +1 -1
- package/dist/components/index.cjs +2 -2
- package/dist/components/index.js +3 -3
- package/package.json +1 -1
- package/src/components/PDFViewer.tsx +63 -17
- package/src/components/SelectPaymentMethod.tsx +1 -1
- package/src/components/Spinner.tsx +1 -1
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-BATIOCXB.js";
|
|
7
7
|
import {
|
|
8
8
|
Spinner
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-PLMGI5K5.js";
|
|
10
10
|
import {
|
|
11
11
|
HorizontalDivider
|
|
12
12
|
} from "./chunk-EPQLWHCL.js";
|
|
@@ -59,7 +59,7 @@ function SelectPaymentMethod(props) {
|
|
|
59
59
|
if (payAllWithCredits) {
|
|
60
60
|
onSelectMethod("CreditsOnly");
|
|
61
61
|
} else {
|
|
62
|
-
onSelectMethod(
|
|
62
|
+
onSelectMethod(null);
|
|
63
63
|
}
|
|
64
64
|
}, [onSelectMethod, payAllWithCredits]);
|
|
65
65
|
function handleToggle(method) {
|
|
@@ -11,7 +11,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
11
11
|
viewBox: "0 0 24 24",
|
|
12
12
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13
13
|
fill: "#1D1E1E",
|
|
14
|
-
className:
|
|
14
|
+
className: "animate-spin",
|
|
15
15
|
"aria-label": "Loading",
|
|
16
16
|
children: [
|
|
17
17
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ jsx(
|
|
@@ -48,7 +48,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
48
48
|
viewBox: "0 0 24 24",
|
|
49
49
|
xmlns: "http://www.w3.org/2000/svg",
|
|
50
50
|
fill: "#1D1E1E",
|
|
51
|
-
className:
|
|
51
|
+
className: "animate-spin",
|
|
52
52
|
"aria-label": "Loading",
|
|
53
53
|
children: [
|
|
54
54
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1154,8 +1154,118 @@ var WhichIcon = ({
|
|
|
1154
1154
|
};
|
|
1155
1155
|
Caption.displayName = "Caption";
|
|
1156
1156
|
|
|
1157
|
-
// src/components/
|
|
1157
|
+
// src/components/Spinner.tsx
|
|
1158
1158
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1159
|
+
var Spinner = ({ size = "small", testid }) => {
|
|
1160
|
+
const dimension = size === "large" ? 48 : 24;
|
|
1161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1162
|
+
"svg",
|
|
1163
|
+
{
|
|
1164
|
+
"data-testid": testid,
|
|
1165
|
+
width: dimension,
|
|
1166
|
+
height: dimension,
|
|
1167
|
+
viewBox: "0 0 24 24",
|
|
1168
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1169
|
+
fill: "#1D1E1E",
|
|
1170
|
+
className: "animate-spin",
|
|
1171
|
+
"aria-label": "Loading",
|
|
1172
|
+
children: [
|
|
1173
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1174
|
+
"animate",
|
|
1175
|
+
{
|
|
1176
|
+
attributeName: "opacity",
|
|
1177
|
+
begin: "0s",
|
|
1178
|
+
dur: "1s",
|
|
1179
|
+
from: "1",
|
|
1180
|
+
to: "0",
|
|
1181
|
+
repeatCount: "indefinite"
|
|
1182
|
+
}
|
|
1183
|
+
) }),
|
|
1184
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1185
|
+
"animate",
|
|
1186
|
+
{
|
|
1187
|
+
attributeName: "opacity",
|
|
1188
|
+
begin: "-0.875s",
|
|
1189
|
+
dur: "1s",
|
|
1190
|
+
from: "1",
|
|
1191
|
+
to: "0",
|
|
1192
|
+
repeatCount: "indefinite"
|
|
1193
|
+
}
|
|
1194
|
+
) }),
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1196
|
+
"animate",
|
|
1197
|
+
{
|
|
1198
|
+
attributeName: "opacity",
|
|
1199
|
+
begin: "-0.75s",
|
|
1200
|
+
dur: "1s",
|
|
1201
|
+
from: "1",
|
|
1202
|
+
to: "0",
|
|
1203
|
+
repeatCount: "indefinite"
|
|
1204
|
+
}
|
|
1205
|
+
) }),
|
|
1206
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1207
|
+
"animate",
|
|
1208
|
+
{
|
|
1209
|
+
attributeName: "opacity",
|
|
1210
|
+
begin: "-0.625s",
|
|
1211
|
+
dur: "1s",
|
|
1212
|
+
from: "1",
|
|
1213
|
+
to: "0",
|
|
1214
|
+
repeatCount: "indefinite"
|
|
1215
|
+
}
|
|
1216
|
+
) }),
|
|
1217
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1218
|
+
"animate",
|
|
1219
|
+
{
|
|
1220
|
+
attributeName: "opacity",
|
|
1221
|
+
begin: "-0.5s",
|
|
1222
|
+
dur: "1s",
|
|
1223
|
+
from: "1",
|
|
1224
|
+
to: "0",
|
|
1225
|
+
repeatCount: "indefinite"
|
|
1226
|
+
}
|
|
1227
|
+
) }),
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1229
|
+
"animate",
|
|
1230
|
+
{
|
|
1231
|
+
attributeName: "opacity",
|
|
1232
|
+
begin: "-0.375s",
|
|
1233
|
+
dur: "1s",
|
|
1234
|
+
from: "1",
|
|
1235
|
+
to: "0",
|
|
1236
|
+
repeatCount: "indefinite"
|
|
1237
|
+
}
|
|
1238
|
+
) }),
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1240
|
+
"animate",
|
|
1241
|
+
{
|
|
1242
|
+
attributeName: "opacity",
|
|
1243
|
+
begin: "-0.25s",
|
|
1244
|
+
dur: "1s",
|
|
1245
|
+
from: "1",
|
|
1246
|
+
to: "0",
|
|
1247
|
+
repeatCount: "indefinite"
|
|
1248
|
+
}
|
|
1249
|
+
) }),
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1251
|
+
"animate",
|
|
1252
|
+
{
|
|
1253
|
+
attributeName: "opacity",
|
|
1254
|
+
begin: "-0.125s",
|
|
1255
|
+
dur: "1s",
|
|
1256
|
+
from: "1",
|
|
1257
|
+
to: "0",
|
|
1258
|
+
repeatCount: "indefinite"
|
|
1259
|
+
}
|
|
1260
|
+
) })
|
|
1261
|
+
]
|
|
1262
|
+
}
|
|
1263
|
+
);
|
|
1264
|
+
};
|
|
1265
|
+
Spinner.displayName = "Spinner";
|
|
1266
|
+
|
|
1267
|
+
// src/components/PDFViewer.tsx
|
|
1268
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1159
1269
|
function PDFViewer(props) {
|
|
1160
1270
|
const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
|
|
1161
1271
|
const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
|
|
@@ -1163,15 +1273,20 @@ function PDFViewer(props) {
|
|
|
1163
1273
|
const handleDownload = (0, import_react6.useCallback)(() => {
|
|
1164
1274
|
setIsDownloading(true);
|
|
1165
1275
|
const link = document.createElement("a");
|
|
1166
|
-
|
|
1167
|
-
|
|
1276
|
+
const currentPdf = encodedPdfs[currentIndex];
|
|
1277
|
+
if (!currentPdf) {
|
|
1278
|
+
setIsDownloading(false);
|
|
1279
|
+
return;
|
|
1280
|
+
}
|
|
1281
|
+
link.href = `data:application/pdf;base64,${currentPdf.base64}`;
|
|
1282
|
+
link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
|
|
1168
1283
|
document.body.appendChild(link);
|
|
1169
1284
|
link.click();
|
|
1170
1285
|
document.body.removeChild(link);
|
|
1171
1286
|
setIsDownloading(false);
|
|
1172
1287
|
}, [currentIndex, encodedPdfs]);
|
|
1173
1288
|
if (!encodedPdfs.length) return null;
|
|
1174
|
-
return /* @__PURE__ */ (0,
|
|
1289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1175
1290
|
Modal,
|
|
1176
1291
|
{
|
|
1177
1292
|
testid,
|
|
@@ -1179,14 +1294,22 @@ function PDFViewer(props) {
|
|
|
1179
1294
|
onClose,
|
|
1180
1295
|
showButtons: !!customActions,
|
|
1181
1296
|
customActions,
|
|
1182
|
-
headerIcon: /* @__PURE__ */ (0,
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1297
|
+
headerIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1298
|
+
DownloadIcon,
|
|
1299
|
+
{
|
|
1300
|
+
testid: testid ? `${testid}-download-icon` : void 0,
|
|
1301
|
+
onClick: handleDownload,
|
|
1302
|
+
isDownloading
|
|
1303
|
+
}
|
|
1304
|
+
),
|
|
1305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Stack, { sizing: "layout", children: [
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1186
1308
|
Button,
|
|
1187
1309
|
{
|
|
1188
1310
|
testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
|
|
1189
1311
|
variant: index === currentIndex ? "primary" : "secondary",
|
|
1312
|
+
classNameLabel: "items-center flex flex-row gap-2",
|
|
1190
1313
|
onClick: (e) => {
|
|
1191
1314
|
setCurrentIndex(index);
|
|
1192
1315
|
requestAnimationFrame(() => {
|
|
@@ -1198,8 +1321,11 @@ function PDFViewer(props) {
|
|
|
1198
1321
|
});
|
|
1199
1322
|
});
|
|
1200
1323
|
},
|
|
1201
|
-
disabled: isDownloading || currentIndex === index,
|
|
1202
|
-
children:
|
|
1324
|
+
disabled: isDownloading || currentIndex === index || !pdf.base64,
|
|
1325
|
+
children: [
|
|
1326
|
+
!pdf.base64 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, {}),
|
|
1327
|
+
pdf.fileName
|
|
1328
|
+
]
|
|
1203
1329
|
},
|
|
1204
1330
|
`${pdf.fileName}-${index}`
|
|
1205
1331
|
)) })
|
|
@@ -1212,13 +1338,13 @@ function DownloadIcon({
|
|
|
1212
1338
|
isDownloading,
|
|
1213
1339
|
testid
|
|
1214
1340
|
}) {
|
|
1215
|
-
return /* @__PURE__ */ (0,
|
|
1341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1216
1342
|
Button,
|
|
1217
1343
|
{
|
|
1218
1344
|
testid,
|
|
1219
1345
|
iconOnly: true,
|
|
1220
1346
|
variant: "tertiary",
|
|
1221
|
-
leftIcon: /* @__PURE__ */ (0,
|
|
1347
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
|
|
1222
1348
|
onClick
|
|
1223
1349
|
}
|
|
1224
1350
|
);
|
|
@@ -1233,36 +1359,71 @@ function PDFElement({ b64, testid }) {
|
|
|
1233
1359
|
canvasRef,
|
|
1234
1360
|
scale: 1
|
|
1235
1361
|
});
|
|
1236
|
-
return /* @__PURE__ */ (0,
|
|
1237
|
-
pdfDocument ? /* @__PURE__ */ (0,
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
"
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col space-y-4", children: [
|
|
1363
|
+
pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1364
|
+
"canvas",
|
|
1365
|
+
{
|
|
1366
|
+
"data-testid": testid ? `${testid}-pdf-content` : void 0,
|
|
1367
|
+
ref: canvasRef
|
|
1368
|
+
}
|
|
1369
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
|
|
1370
|
+
(pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1371
|
+
"ul",
|
|
1372
|
+
{
|
|
1373
|
+
className: "flex flex-row justify-between items-center",
|
|
1374
|
+
"data-testid": testid ? `${testid}-pdf-pagination` : void 0,
|
|
1375
|
+
children: [
|
|
1376
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1377
|
+
"button",
|
|
1378
|
+
{
|
|
1379
|
+
"data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
|
|
1380
|
+
disabled: page === 1,
|
|
1381
|
+
onClick: () => setPage(page - 1),
|
|
1382
|
+
className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
|
|
1383
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Caption, { children: "Previous" })
|
|
1384
|
+
}
|
|
1385
|
+
) }),
|
|
1386
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1387
|
+
"li",
|
|
1388
|
+
{
|
|
1389
|
+
"data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
|
|
1390
|
+
className: "text-label-desktop text-text-on-action-primary-normal",
|
|
1391
|
+
children: [
|
|
1392
|
+
"Page",
|
|
1393
|
+
" ",
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1395
|
+
"span",
|
|
1396
|
+
{
|
|
1397
|
+
"data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
|
|
1398
|
+
children: page
|
|
1399
|
+
}
|
|
1400
|
+
),
|
|
1401
|
+
" ",
|
|
1402
|
+
"of",
|
|
1403
|
+
" ",
|
|
1404
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1405
|
+
"span",
|
|
1406
|
+
{
|
|
1407
|
+
"data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
|
|
1408
|
+
children: pdfDocument.numPages
|
|
1409
|
+
}
|
|
1410
|
+
)
|
|
1411
|
+
]
|
|
1412
|
+
}
|
|
1413
|
+
),
|
|
1414
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1415
|
+
"button",
|
|
1416
|
+
{
|
|
1417
|
+
"data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
|
|
1418
|
+
disabled: page === pdfDocument.numPages,
|
|
1419
|
+
onClick: () => setPage(page + 1),
|
|
1420
|
+
className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
|
|
1421
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Caption, { children: "Next" })
|
|
1422
|
+
}
|
|
1423
|
+
) })
|
|
1424
|
+
]
|
|
1425
|
+
}
|
|
1426
|
+
)
|
|
1266
1427
|
] });
|
|
1267
1428
|
}
|
|
1268
1429
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -7,6 +7,9 @@ import "../chunk-C4JGTH6G.js";
|
|
|
7
7
|
import "../chunk-SYEJVSE4.js";
|
|
8
8
|
import "../chunk-R7ELP5C5.js";
|
|
9
9
|
import "../chunk-ZFOANBWG.js";
|
|
10
|
+
import {
|
|
11
|
+
Spinner
|
|
12
|
+
} from "../chunk-PLMGI5K5.js";
|
|
10
13
|
import "../chunk-AZ7LVLOK.js";
|
|
11
14
|
import {
|
|
12
15
|
Caption
|
|
@@ -36,8 +39,13 @@ function PDFViewer(props) {
|
|
|
36
39
|
const handleDownload = useCallback(() => {
|
|
37
40
|
setIsDownloading(true);
|
|
38
41
|
const link = document.createElement("a");
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
const currentPdf = encodedPdfs[currentIndex];
|
|
43
|
+
if (!currentPdf) {
|
|
44
|
+
setIsDownloading(false);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
link.href = `data:application/pdf;base64,${currentPdf.base64}`;
|
|
48
|
+
link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
|
|
41
49
|
document.body.appendChild(link);
|
|
42
50
|
link.click();
|
|
43
51
|
document.body.removeChild(link);
|
|
@@ -52,14 +60,22 @@ function PDFViewer(props) {
|
|
|
52
60
|
onClose,
|
|
53
61
|
showButtons: !!customActions,
|
|
54
62
|
customActions,
|
|
55
|
-
headerIcon: /* @__PURE__ */ jsx(
|
|
63
|
+
headerIcon: /* @__PURE__ */ jsx(
|
|
64
|
+
DownloadIcon,
|
|
65
|
+
{
|
|
66
|
+
testid: testid ? `${testid}-download-icon` : void 0,
|
|
67
|
+
onClick: handleDownload,
|
|
68
|
+
isDownloading
|
|
69
|
+
}
|
|
70
|
+
),
|
|
56
71
|
children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
|
|
57
72
|
/* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
|
|
58
|
-
/* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */
|
|
73
|
+
/* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsxs(
|
|
59
74
|
Button,
|
|
60
75
|
{
|
|
61
76
|
testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
|
|
62
77
|
variant: index === currentIndex ? "primary" : "secondary",
|
|
78
|
+
classNameLabel: "items-center flex flex-row gap-2",
|
|
63
79
|
onClick: (e) => {
|
|
64
80
|
setCurrentIndex(index);
|
|
65
81
|
requestAnimationFrame(() => {
|
|
@@ -71,8 +87,11 @@ function PDFViewer(props) {
|
|
|
71
87
|
});
|
|
72
88
|
});
|
|
73
89
|
},
|
|
74
|
-
disabled: isDownloading || currentIndex === index,
|
|
75
|
-
children:
|
|
90
|
+
disabled: isDownloading || currentIndex === index || !pdf.base64,
|
|
91
|
+
children: [
|
|
92
|
+
!pdf.base64 && /* @__PURE__ */ jsx(Spinner, {}),
|
|
93
|
+
pdf.fileName
|
|
94
|
+
]
|
|
76
95
|
},
|
|
77
96
|
`${pdf.fileName}-${index}`
|
|
78
97
|
)) })
|
|
@@ -107,35 +126,70 @@ function PDFElement({ b64, testid }) {
|
|
|
107
126
|
scale: 1
|
|
108
127
|
});
|
|
109
128
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
|
|
110
|
-
pdfDocument ? /* @__PURE__ */ jsx(
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
"
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
129
|
+
pdfDocument ? /* @__PURE__ */ jsx(
|
|
130
|
+
"canvas",
|
|
131
|
+
{
|
|
132
|
+
"data-testid": testid ? `${testid}-pdf-content` : void 0,
|
|
133
|
+
ref: canvasRef
|
|
134
|
+
}
|
|
135
|
+
) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
|
|
136
|
+
(pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs(
|
|
137
|
+
"ul",
|
|
138
|
+
{
|
|
139
|
+
className: "flex flex-row justify-between items-center",
|
|
140
|
+
"data-testid": testid ? `${testid}-pdf-pagination` : void 0,
|
|
141
|
+
children: [
|
|
142
|
+
/* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
|
|
143
|
+
"button",
|
|
144
|
+
{
|
|
145
|
+
"data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
|
|
146
|
+
disabled: page === 1,
|
|
147
|
+
onClick: () => setPage(page - 1),
|
|
148
|
+
className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
|
|
149
|
+
children: /* @__PURE__ */ jsx(Caption, { children: "Previous" })
|
|
150
|
+
}
|
|
151
|
+
) }),
|
|
152
|
+
/* @__PURE__ */ jsxs(
|
|
153
|
+
"li",
|
|
154
|
+
{
|
|
155
|
+
"data-testid": testid ? `${testid}-pdf-pagination-text` : void 0,
|
|
156
|
+
className: "text-label-desktop text-text-on-action-primary-normal",
|
|
157
|
+
children: [
|
|
158
|
+
"Page",
|
|
159
|
+
" ",
|
|
160
|
+
/* @__PURE__ */ jsx(
|
|
161
|
+
"span",
|
|
162
|
+
{
|
|
163
|
+
"data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0,
|
|
164
|
+
children: page
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
" ",
|
|
168
|
+
"of",
|
|
169
|
+
" ",
|
|
170
|
+
/* @__PURE__ */ jsx(
|
|
171
|
+
"span",
|
|
172
|
+
{
|
|
173
|
+
"data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0,
|
|
174
|
+
children: pdfDocument.numPages
|
|
175
|
+
}
|
|
176
|
+
)
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
/* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
|
|
181
|
+
"button",
|
|
182
|
+
{
|
|
183
|
+
"data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
|
|
184
|
+
disabled: page === pdfDocument.numPages,
|
|
185
|
+
onClick: () => setPage(page + 1),
|
|
186
|
+
className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
|
|
187
|
+
children: /* @__PURE__ */ jsx(Caption, { children: "Next" })
|
|
188
|
+
}
|
|
189
|
+
) })
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
)
|
|
139
193
|
] });
|
|
140
194
|
}
|
|
141
195
|
export {
|
|
@@ -1964,7 +1964,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
1964
1964
|
viewBox: "0 0 24 24",
|
|
1965
1965
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1966
1966
|
fill: "#1D1E1E",
|
|
1967
|
-
className:
|
|
1967
|
+
className: "animate-spin",
|
|
1968
1968
|
"aria-label": "Loading",
|
|
1969
1969
|
children: [
|
|
1970
1970
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
@@ -2092,7 +2092,7 @@ function SelectPaymentMethod(props) {
|
|
|
2092
2092
|
if (payAllWithCredits) {
|
|
2093
2093
|
onSelectMethod("CreditsOnly");
|
|
2094
2094
|
} else {
|
|
2095
|
-
onSelectMethod(
|
|
2095
|
+
onSelectMethod(null);
|
|
2096
2096
|
}
|
|
2097
2097
|
}, [onSelectMethod, payAllWithCredits]);
|
|
2098
2098
|
function handleToggle(method) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
PaymentOnAccountModal,
|
|
3
3
|
calculateSurcharge
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-RUTYNLKS.js";
|
|
5
|
+
import "../chunk-NT2ZKA4W.js";
|
|
6
6
|
import "../chunk-WFGKIR5A.js";
|
|
7
7
|
import "../chunk-BATIOCXB.js";
|
|
8
8
|
import "../chunk-5GOJRLQO.js";
|
|
@@ -11,7 +11,7 @@ import "../chunk-C4JGTH6G.js";
|
|
|
11
11
|
import "../chunk-SYEJVSE4.js";
|
|
12
12
|
import "../chunk-R7ELP5C5.js";
|
|
13
13
|
import "../chunk-ZFOANBWG.js";
|
|
14
|
-
import "../chunk-
|
|
14
|
+
import "../chunk-PLMGI5K5.js";
|
|
15
15
|
import "../chunk-AZ7LVLOK.js";
|
|
16
16
|
import "../chunk-EPQLWHCL.js";
|
|
17
17
|
import "../chunk-WFQEE2OO.js";
|
|
@@ -1020,7 +1020,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
1020
1020
|
viewBox: "0 0 24 24",
|
|
1021
1021
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1022
1022
|
fill: "#1D1E1E",
|
|
1023
|
-
className:
|
|
1023
|
+
className: "animate-spin",
|
|
1024
1024
|
"aria-label": "Loading",
|
|
1025
1025
|
children: [
|
|
1026
1026
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
@@ -1148,7 +1148,7 @@ function SelectPaymentMethod(props) {
|
|
|
1148
1148
|
if (payAllWithCredits) {
|
|
1149
1149
|
onSelectMethod("CreditsOnly");
|
|
1150
1150
|
} else {
|
|
1151
|
-
onSelectMethod(
|
|
1151
|
+
onSelectMethod(null);
|
|
1152
1152
|
}
|
|
1153
1153
|
}, [onSelectMethod, payAllWithCredits]);
|
|
1154
1154
|
function handleToggle(method) {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
SelectPaymentMethod
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-NT2ZKA4W.js";
|
|
5
5
|
import "../chunk-WFGKIR5A.js";
|
|
6
6
|
import "../chunk-BATIOCXB.js";
|
|
7
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-PLMGI5K5.js";
|
|
8
8
|
import "../chunk-EPQLWHCL.js";
|
|
9
9
|
import "../chunk-WFQEE2OO.js";
|
|
10
10
|
import "../chunk-5UH6QUFB.js";
|
|
@@ -35,7 +35,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
35
35
|
viewBox: "0 0 24 24",
|
|
36
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
37
|
fill: "#1D1E1E",
|
|
38
|
-
className:
|
|
38
|
+
className: "animate-spin",
|
|
39
39
|
"aria-label": "Loading",
|
|
40
40
|
children: [
|
|
41
41
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -4564,7 +4564,7 @@ var Spinner = ({ size = "small", testid }) => {
|
|
|
4564
4564
|
viewBox: "0 0 24 24",
|
|
4565
4565
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4566
4566
|
fill: "#1D1E1E",
|
|
4567
|
-
className:
|
|
4567
|
+
className: "animate-spin",
|
|
4568
4568
|
"aria-label": "Loading",
|
|
4569
4569
|
children: [
|
|
4570
4570
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
@@ -4692,7 +4692,7 @@ function SelectPaymentMethod(props) {
|
|
|
4692
4692
|
if (payAllWithCredits) {
|
|
4693
4693
|
onSelectMethod("CreditsOnly");
|
|
4694
4694
|
} else {
|
|
4695
|
-
onSelectMethod(
|
|
4695
|
+
onSelectMethod(null);
|
|
4696
4696
|
}
|
|
4697
4697
|
}, [onSelectMethod, payAllWithCredits]);
|
|
4698
4698
|
function handleToggle(method) {
|
package/dist/components/index.js
CHANGED
|
@@ -6,8 +6,8 @@ import {
|
|
|
6
6
|
} from "../chunk-XH65MD2C.js";
|
|
7
7
|
import {
|
|
8
8
|
PaymentOnAccountModal
|
|
9
|
-
} from "../chunk-
|
|
10
|
-
import "../chunk-
|
|
9
|
+
} from "../chunk-RUTYNLKS.js";
|
|
10
|
+
import "../chunk-NT2ZKA4W.js";
|
|
11
11
|
import "../chunk-WFGKIR5A.js";
|
|
12
12
|
import "../chunk-BATIOCXB.js";
|
|
13
13
|
import "../chunk-5GOJRLQO.js";
|
|
@@ -16,7 +16,7 @@ import "../chunk-C4JGTH6G.js";
|
|
|
16
16
|
import "../chunk-SYEJVSE4.js";
|
|
17
17
|
import "../chunk-R7ELP5C5.js";
|
|
18
18
|
import "../chunk-ZFOANBWG.js";
|
|
19
|
-
import "../chunk-
|
|
19
|
+
import "../chunk-PLMGI5K5.js";
|
|
20
20
|
import "../chunk-AZ7LVLOK.js";
|
|
21
21
|
import "../chunk-EPQLWHCL.js";
|
|
22
22
|
import {
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import { Button } from "./Button";
|
|
|
7
7
|
import { Icon } from "./Icon";
|
|
8
8
|
import { Stack } from "./Stack";
|
|
9
9
|
import { Caption } from "./Caption";
|
|
10
|
+
import { Spinner } from "./Spinner";
|
|
10
11
|
|
|
11
12
|
type PDFViewerProps = {
|
|
12
13
|
isOpen: boolean;
|
|
@@ -24,12 +25,15 @@ export function PDFViewer(props: PDFViewerProps) {
|
|
|
24
25
|
const handleDownload = useCallback(() => {
|
|
25
26
|
setIsDownloading(true);
|
|
26
27
|
const link = document.createElement("a");
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
const currentPdf = encodedPdfs[currentIndex];
|
|
29
|
+
if (!currentPdf) {
|
|
30
|
+
setIsDownloading(false);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
link.href = `data:application/pdf;base64,${currentPdf.base64}`;
|
|
34
|
+
link.download = currentPdf.fileName.endsWith(".pdf")
|
|
35
|
+
? currentPdf.fileName
|
|
36
|
+
: `${currentPdf.fileName}.pdf`;
|
|
33
37
|
document.body.appendChild(link);
|
|
34
38
|
link.click();
|
|
35
39
|
document.body.removeChild(link);
|
|
@@ -46,7 +50,11 @@ export function PDFViewer(props: PDFViewerProps) {
|
|
|
46
50
|
showButtons={!!customActions}
|
|
47
51
|
customActions={customActions}
|
|
48
52
|
headerIcon={
|
|
49
|
-
<DownloadIcon
|
|
53
|
+
<DownloadIcon
|
|
54
|
+
testid={testid ? `${testid}-download-icon` : undefined}
|
|
55
|
+
onClick={handleDownload}
|
|
56
|
+
isDownloading={isDownloading}
|
|
57
|
+
/>
|
|
50
58
|
}
|
|
51
59
|
>
|
|
52
60
|
<Stack sizing="layout">
|
|
@@ -57,6 +65,7 @@ export function PDFViewer(props: PDFViewerProps) {
|
|
|
57
65
|
testid={testid ? `${testid}-${pdf.fileName}-button` : undefined}
|
|
58
66
|
variant={index === currentIndex ? "primary" : "secondary"}
|
|
59
67
|
key={`${pdf.fileName}-${index}`}
|
|
68
|
+
classNameLabel="items-center flex flex-row gap-2"
|
|
60
69
|
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
|
|
61
70
|
setCurrentIndex(index);
|
|
62
71
|
|
|
@@ -66,12 +75,13 @@ export function PDFViewer(props: PDFViewerProps) {
|
|
|
66
75
|
button.scrollIntoView({
|
|
67
76
|
behavior: "smooth",
|
|
68
77
|
block: "nearest",
|
|
69
|
-
inline: "center"
|
|
78
|
+
inline: "center",
|
|
70
79
|
});
|
|
71
80
|
});
|
|
72
81
|
}}
|
|
73
|
-
disabled={isDownloading || currentIndex === index}
|
|
82
|
+
disabled={isDownloading || currentIndex === index || !pdf.base64}
|
|
74
83
|
>
|
|
84
|
+
{!pdf.base64 && <Spinner />}
|
|
75
85
|
{pdf.fileName}
|
|
76
86
|
</Button>
|
|
77
87
|
))}
|
|
@@ -84,7 +94,7 @@ export function PDFViewer(props: PDFViewerProps) {
|
|
|
84
94
|
function DownloadIcon({
|
|
85
95
|
onClick,
|
|
86
96
|
isDownloading,
|
|
87
|
-
testid
|
|
97
|
+
testid,
|
|
88
98
|
}: {
|
|
89
99
|
onClick: () => void;
|
|
90
100
|
isDownloading?: boolean;
|
|
@@ -101,7 +111,7 @@ function DownloadIcon({
|
|
|
101
111
|
);
|
|
102
112
|
}
|
|
103
113
|
|
|
104
|
-
function PDFElement({ b64, testid }: { b64: string
|
|
114
|
+
function PDFElement({ b64, testid }: { b64: string; testid?: string }) {
|
|
105
115
|
const [page, setPage] = useState(1);
|
|
106
116
|
const canvasRef = useRef(null);
|
|
107
117
|
|
|
@@ -115,12 +125,26 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
|
|
|
115
125
|
|
|
116
126
|
return (
|
|
117
127
|
<div className="flex flex-col space-y-4">
|
|
118
|
-
{pdfDocument ?
|
|
128
|
+
{pdfDocument ? (
|
|
129
|
+
<canvas
|
|
130
|
+
data-testid={testid ? `${testid}-pdf-content` : undefined}
|
|
131
|
+
ref={canvasRef}
|
|
132
|
+
/>
|
|
133
|
+
) : (
|
|
134
|
+
<div data-testid={testid ? `${testid}-pdf-loading` : undefined}>
|
|
135
|
+
Loading PDF...
|
|
136
|
+
</div>
|
|
137
|
+
)}
|
|
119
138
|
{pdfDocument?.numPages && pdfDocument.numPages > 1 && (
|
|
120
|
-
<ul
|
|
139
|
+
<ul
|
|
140
|
+
className="flex flex-row justify-between items-center"
|
|
141
|
+
data-testid={testid ? `${testid}-pdf-pagination` : undefined}
|
|
142
|
+
>
|
|
121
143
|
<li className="previous">
|
|
122
144
|
<button
|
|
123
|
-
data-testid={
|
|
145
|
+
data-testid={
|
|
146
|
+
testid ? `${testid}-pdf-pagination-previous-button` : undefined
|
|
147
|
+
}
|
|
124
148
|
disabled={page === 1}
|
|
125
149
|
onClick={() => setPage(page - 1)}
|
|
126
150
|
className="not-disabled:cursor-pointer not-disabled:hover:underline "
|
|
@@ -128,12 +152,34 @@ function PDFElement({ b64, testid }: { b64: string, testid?: string }) {
|
|
|
128
152
|
<Caption>Previous</Caption>
|
|
129
153
|
</button>
|
|
130
154
|
</li>
|
|
131
|
-
<li
|
|
132
|
-
|
|
155
|
+
<li
|
|
156
|
+
data-testid={testid ? `${testid}-pdf-pagination-text` : undefined}
|
|
157
|
+
className="text-label-desktop text-text-on-action-primary-normal"
|
|
158
|
+
>
|
|
159
|
+
Page{" "}
|
|
160
|
+
<span
|
|
161
|
+
data-testid={
|
|
162
|
+
testid ? `${testid}-pdf-pagination-page-${page}` : undefined
|
|
163
|
+
}
|
|
164
|
+
>
|
|
165
|
+
{page}
|
|
166
|
+
</span>{" "}
|
|
167
|
+
of{" "}
|
|
168
|
+
<span
|
|
169
|
+
data-testid={
|
|
170
|
+
testid
|
|
171
|
+
? `${testid}-pdf-pagination-total-page-${pdfDocument!.numPages}`
|
|
172
|
+
: undefined
|
|
173
|
+
}
|
|
174
|
+
>
|
|
175
|
+
{pdfDocument!.numPages}
|
|
176
|
+
</span>
|
|
133
177
|
</li>
|
|
134
178
|
<li className="next">
|
|
135
179
|
<button
|
|
136
|
-
data-testid={
|
|
180
|
+
data-testid={
|
|
181
|
+
testid ? `${testid}-pdf-pagination-next-button` : undefined
|
|
182
|
+
}
|
|
137
183
|
disabled={page === pdfDocument!.numPages}
|
|
138
184
|
onClick={() => setPage(page + 1)}
|
|
139
185
|
className="not-disabled:cursor-pointer not-disabled:hover:underline "
|
|
@@ -15,7 +15,7 @@ export const Spinner: React.FC<SpinnerProps> = ({ size = "small", testid }) => {
|
|
|
15
15
|
viewBox="0 0 24 24"
|
|
16
16
|
xmlns="http://www.w3.org/2000/svg"
|
|
17
17
|
fill="#1D1E1E"
|
|
18
|
-
className=
|
|
18
|
+
className="animate-spin"
|
|
19
19
|
aria-label="Loading"
|
|
20
20
|
>
|
|
21
21
|
<circle cx="12" cy="4" r="2" opacity="1">
|