bitsnap-react 1.0.0 → 1.2.0
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 +0 -3
- package/dist/index.css +2051 -836
- package/dist/index.css.map +1 -1
- package/dist/index.js +167 -119
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +150 -102
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -3
package/dist/index.js
CHANGED
|
@@ -102,7 +102,6 @@ var PublicApiClient;
|
|
|
102
102
|
// src/components/checkout/CartProvider.tsx
|
|
103
103
|
var import_protobuf = require("@bufbuild/protobuf");
|
|
104
104
|
var import_react = require("react");
|
|
105
|
-
var import_react_query = require("react-query");
|
|
106
105
|
var import_zod = __toESM(require("zod"));
|
|
107
106
|
|
|
108
107
|
// src/components/checkout/constants.ts
|
|
@@ -360,6 +359,7 @@ function mapGooglePayDisplayItems(items, methods, deliveryMethod, couponCode, co
|
|
|
360
359
|
}
|
|
361
360
|
|
|
362
361
|
// src/components/checkout/CartProvider.tsx
|
|
362
|
+
var import_react_query = require("@tanstack/react-query");
|
|
363
363
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
364
364
|
var MARKETING_AGREEMENT_ID = "__m_a";
|
|
365
365
|
var CartProviderContext = (0, import_react.createContext)(void 0);
|
|
@@ -1084,7 +1084,7 @@ function resolveProductDetailsFromSingleProduct(id, product) {
|
|
|
1084
1084
|
}
|
|
1085
1085
|
|
|
1086
1086
|
// src/components/checkout/ApplePay.tsx
|
|
1087
|
-
var import_react_query2 = require("react-query");
|
|
1087
|
+
var import_react_query2 = require("@tanstack/react-query");
|
|
1088
1088
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
1089
1089
|
function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick }) {
|
|
1090
1090
|
const {
|
|
@@ -1098,7 +1098,10 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
|
|
|
1098
1098
|
setPostalCode,
|
|
1099
1099
|
clearCart
|
|
1100
1100
|
} = useCartProvider();
|
|
1101
|
-
const { data: isApplePayAvailable } = (0, import_react_query2.useQuery)(
|
|
1101
|
+
const { data: isApplePayAvailable } = (0, import_react_query2.useQuery)({
|
|
1102
|
+
queryKey: ["is-apple-pay-available"],
|
|
1103
|
+
queryFn: checkIfApplePayIsAvailable
|
|
1104
|
+
});
|
|
1102
1105
|
if (isApplePayAvailable != true) {
|
|
1103
1106
|
return null;
|
|
1104
1107
|
}
|
|
@@ -1271,8 +1274,34 @@ var ApplePay_default = Wrapper;
|
|
|
1271
1274
|
|
|
1272
1275
|
// src/components/checkout/GooglePay.tsx
|
|
1273
1276
|
var import_button_react = __toESM(require("@google-pay/button-react"));
|
|
1274
|
-
|
|
1277
|
+
|
|
1278
|
+
// src/ui/spinner.tsx
|
|
1279
|
+
var import_lucide_react = require("lucide-react");
|
|
1280
|
+
|
|
1281
|
+
// src/lib/utils.ts
|
|
1282
|
+
var import_clsx = require("clsx");
|
|
1283
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
1284
|
+
function cn(...inputs) {
|
|
1285
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
// src/ui/spinner.tsx
|
|
1275
1289
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1290
|
+
function Spinner({ className, ...props }) {
|
|
1291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1292
|
+
import_lucide_react.Loader2Icon,
|
|
1293
|
+
{
|
|
1294
|
+
role: "status",
|
|
1295
|
+
"aria-label": "Loading",
|
|
1296
|
+
className: cn("size-4 animate-spin", className),
|
|
1297
|
+
...props
|
|
1298
|
+
}
|
|
1299
|
+
);
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
// src/components/checkout/GooglePay.tsx
|
|
1303
|
+
var import_react_query3 = require("@tanstack/react-query");
|
|
1304
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1276
1305
|
function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, test }) {
|
|
1277
1306
|
const {
|
|
1278
1307
|
getGooglePayConfiguration,
|
|
@@ -1284,20 +1313,25 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
|
|
|
1284
1313
|
setPostalCode,
|
|
1285
1314
|
clearCart
|
|
1286
1315
|
} = useCartProvider();
|
|
1287
|
-
const { data: googlePayConfiguration } = (0, import_react_query3.useQuery)(
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1316
|
+
const { data: googlePayConfiguration } = (0, import_react_query3.useQuery)({
|
|
1317
|
+
queryKey: ["get-google-pay-configuration", items.map((el) => el.id).join(",")],
|
|
1318
|
+
queryFn: () => getGooglePayConfiguration({
|
|
1319
|
+
items: items.map((el) => ({
|
|
1320
|
+
...el,
|
|
1321
|
+
id: void 0,
|
|
1322
|
+
productID: el.id
|
|
1323
|
+
}))
|
|
1324
|
+
})
|
|
1325
|
+
});
|
|
1326
|
+
const { mutateAsync: completeGooglePayPaymentAsync, isPending } = (0, import_react_query3.useMutation)({
|
|
1327
|
+
mutationFn: completeGooglePayPayment
|
|
1328
|
+
});
|
|
1295
1329
|
if (googlePayConfiguration == null || googlePayConfiguration.isAvailable != true) {
|
|
1296
1330
|
console.log("google pay configuration is not available", googlePayConfiguration);
|
|
1297
1331
|
return null;
|
|
1298
1332
|
}
|
|
1299
|
-
return /* @__PURE__ */ (0,
|
|
1300
|
-
/* @__PURE__ */ (0,
|
|
1333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
1334
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1301
1335
|
import_button_react.default,
|
|
1302
1336
|
{
|
|
1303
1337
|
buttonSizeMode,
|
|
@@ -1350,11 +1384,11 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
|
|
|
1350
1384
|
}
|
|
1351
1385
|
}
|
|
1352
1386
|
),
|
|
1353
|
-
|
|
1387
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, {}) : null
|
|
1354
1388
|
] });
|
|
1355
1389
|
}
|
|
1356
1390
|
function Wrapper2(props) {
|
|
1357
|
-
return /* @__PURE__ */ (0,
|
|
1391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GooglePayButtonComponent, { ...props }) }) });
|
|
1358
1392
|
}
|
|
1359
1393
|
var GooglePay_default = Wrapper2;
|
|
1360
1394
|
|
|
@@ -1369,12 +1403,11 @@ var import_react_dom = require("react-dom");
|
|
|
1369
1403
|
// src/components/checkout/CartComponentContent.tsx
|
|
1370
1404
|
var import_react4 = require("@formkit/auto-animate/react");
|
|
1371
1405
|
var import_react5 = __toESM(require("react"));
|
|
1372
|
-
var import_react_query4 = require("react-query");
|
|
1373
1406
|
|
|
1374
1407
|
// src/components/checkout/CountrySelector.tsx
|
|
1375
1408
|
var import_framer_motion = require("framer-motion");
|
|
1376
1409
|
var import_react2 = require("react");
|
|
1377
|
-
var
|
|
1410
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1378
1411
|
function CountrySelector({
|
|
1379
1412
|
id,
|
|
1380
1413
|
open: open2,
|
|
@@ -1407,8 +1440,8 @@ function CountrySelector({
|
|
|
1407
1440
|
}
|
|
1408
1441
|
}, []);
|
|
1409
1442
|
const [query, setQuery] = (0, import_react2.useState)("");
|
|
1410
|
-
return /* @__PURE__ */ (0,
|
|
1411
|
-
/* @__PURE__ */ (0,
|
|
1443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1412
1445
|
"button",
|
|
1413
1446
|
{
|
|
1414
1447
|
type: "button",
|
|
@@ -1419,8 +1452,8 @@ function CountrySelector({
|
|
|
1419
1452
|
onClick: onToggle,
|
|
1420
1453
|
disabled,
|
|
1421
1454
|
children: [
|
|
1422
|
-
/* @__PURE__ */ (0,
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1455
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "truncate flex items-center", children: [
|
|
1456
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1424
1457
|
"img",
|
|
1425
1458
|
{
|
|
1426
1459
|
alt: `${selectedValue}`,
|
|
@@ -1430,11 +1463,11 @@ function CountrySelector({
|
|
|
1430
1463
|
),
|
|
1431
1464
|
(_a = countries.find((el) => el.code === selectedValue)) == null ? void 0 : _a.name
|
|
1432
1465
|
] }),
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1466
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1434
1467
|
"span",
|
|
1435
1468
|
{
|
|
1436
1469
|
className: `absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none ${disabled ? "hidden" : ""}`,
|
|
1437
|
-
children: /* @__PURE__ */ (0,
|
|
1470
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1438
1471
|
"svg",
|
|
1439
1472
|
{
|
|
1440
1473
|
className: "h-5 w-5 text-light-purple",
|
|
@@ -1442,7 +1475,7 @@ function CountrySelector({
|
|
|
1442
1475
|
viewBox: "0 0 20 20",
|
|
1443
1476
|
fill: "currentColor",
|
|
1444
1477
|
"aria-hidden": "true",
|
|
1445
|
-
children: /* @__PURE__ */ (0,
|
|
1478
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1446
1479
|
"path",
|
|
1447
1480
|
{
|
|
1448
1481
|
fillRule: "evenodd",
|
|
@@ -1457,7 +1490,7 @@ function CountrySelector({
|
|
|
1457
1490
|
]
|
|
1458
1491
|
}
|
|
1459
1492
|
),
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1493
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_framer_motion.AnimatePresence, { children: open2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1461
1494
|
import_framer_motion.motion.ul,
|
|
1462
1495
|
{
|
|
1463
1496
|
initial: { opacity: 0 },
|
|
@@ -1470,8 +1503,8 @@ function CountrySelector({
|
|
|
1470
1503
|
"aria-labelledby": "listbox-label",
|
|
1471
1504
|
"aria-activedescendant": "listbox-option-3",
|
|
1472
1505
|
children: [
|
|
1473
|
-
/* @__PURE__ */ (0,
|
|
1474
|
-
/* @__PURE__ */ (0,
|
|
1506
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sticky top-0 z-10 bg-white dark:bg-neutral-800", children: [
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "dark:text-neutral-200 text-neutral-900 cursor-default select-none relative py-2 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1475
1508
|
"input",
|
|
1476
1509
|
{
|
|
1477
1510
|
type: "search",
|
|
@@ -1482,18 +1515,18 @@ function CountrySelector({
|
|
|
1482
1515
|
onChange: (e) => setQuery(e.target.value)
|
|
1483
1516
|
}
|
|
1484
1517
|
) }),
|
|
1485
|
-
/* @__PURE__ */ (0,
|
|
1518
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", {})
|
|
1486
1519
|
] }),
|
|
1487
|
-
/* @__PURE__ */ (0,
|
|
1520
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1488
1521
|
"div",
|
|
1489
1522
|
{
|
|
1490
1523
|
className: "max-h-64 scrollbar scrollbar-track-gray-100 scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-600 scrollbar-thumb-rounded scrollbar-thin overflow-y-scroll",
|
|
1491
1524
|
children: countries.filter(
|
|
1492
1525
|
(country) => country.name.toLowerCase().startsWith(query.toLowerCase())
|
|
1493
|
-
).length === 0 ? /* @__PURE__ */ (0,
|
|
1526
|
+
).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "text-light-purple cursor-default select-none relative py-2 pl-3 pr-9", children: "No countries found" }) : countries.filter(
|
|
1494
1527
|
(country) => country.name.toLowerCase().startsWith(query.toLowerCase())
|
|
1495
1528
|
).map((value, index) => {
|
|
1496
|
-
return /* @__PURE__ */ (0,
|
|
1529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1497
1530
|
"li",
|
|
1498
1531
|
{
|
|
1499
1532
|
className: "text-dark-blue cursor-default select-none relative py-2 pl-3 pr-9 flex items-center hover:bg-extra-light-white transition",
|
|
@@ -1505,7 +1538,7 @@ function CountrySelector({
|
|
|
1505
1538
|
onToggle();
|
|
1506
1539
|
},
|
|
1507
1540
|
children: [
|
|
1508
|
-
/* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1509
1542
|
"img",
|
|
1510
1543
|
{
|
|
1511
1544
|
alt: `${value.code}`,
|
|
@@ -1513,12 +1546,12 @@ function CountrySelector({
|
|
|
1513
1546
|
className: "inline mr-2 h-4 rounded-sm"
|
|
1514
1547
|
}
|
|
1515
1548
|
),
|
|
1516
|
-
/* @__PURE__ */ (0,
|
|
1517
|
-
value.code === selectedValue ? /* @__PURE__ */ (0,
|
|
1549
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal truncate", children: value.name }),
|
|
1550
|
+
value.code === selectedValue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1518
1551
|
"span",
|
|
1519
1552
|
{
|
|
1520
1553
|
className: "text-blue-600 absolute inset-y-0 right-0 flex items-center pr-8",
|
|
1521
|
-
children: /* @__PURE__ */ (0,
|
|
1554
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1522
1555
|
"svg",
|
|
1523
1556
|
{
|
|
1524
1557
|
className: "h-5 w-5",
|
|
@@ -1526,7 +1559,7 @@ function CountrySelector({
|
|
|
1526
1559
|
viewBox: "0 0 20 20",
|
|
1527
1560
|
fill: "currentColor",
|
|
1528
1561
|
"aria-hidden": "true",
|
|
1529
|
-
children: /* @__PURE__ */ (0,
|
|
1562
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1530
1563
|
"path",
|
|
1531
1564
|
{
|
|
1532
1565
|
fillRule: "evenodd",
|
|
@@ -1554,17 +1587,17 @@ var CountrySelector_default = CountrySelector;
|
|
|
1554
1587
|
|
|
1555
1588
|
// src/components/checkout/SingleProduct.tsx
|
|
1556
1589
|
var import_react3 = require("react");
|
|
1557
|
-
var
|
|
1590
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1558
1591
|
var SingleProduct = ({ quantity, details, shouldUpdate }) => {
|
|
1559
1592
|
var _a;
|
|
1560
|
-
return /* @__PURE__ */ (0,
|
|
1561
|
-
/* @__PURE__ */ (0,
|
|
1562
|
-
/* @__PURE__ */ (0,
|
|
1563
|
-
/* @__PURE__ */ (0,
|
|
1564
|
-
/* @__PURE__ */ (0,
|
|
1565
|
-
/* @__PURE__ */ (0,
|
|
1566
|
-
/* @__PURE__ */ (0,
|
|
1567
|
-
/* @__PURE__ */ (0,
|
|
1593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { className: "aspect-auto max-w-[30%] max-w-32 max-h-32", src: (_a = details.image_url) != null ? _a : "", alt: details.name }),
|
|
1595
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: details.name }),
|
|
1597
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm", children: formatCurrency(details.price, details.currency) }),
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between", children: [
|
|
1599
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuantityComponent, { className: "", quantity, shouldUpdate }),
|
|
1600
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "text-sm font-medium", onClick: () => shouldUpdate(0), children: "Usu\u0144" })
|
|
1568
1601
|
] })
|
|
1569
1602
|
] })
|
|
1570
1603
|
] });
|
|
@@ -1612,9 +1645,9 @@ var QuantityComponent = ({
|
|
|
1612
1645
|
setQuantityString(quantity.toString());
|
|
1613
1646
|
setQuantityValue(quantity);
|
|
1614
1647
|
}
|
|
1615
|
-
return /* @__PURE__ */ (0,
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1617
|
-
/* @__PURE__ */ (0,
|
|
1648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex ${className} items-center border dark:border-neutral-400 border-neutral-700 rounded-md my-1`, children: [
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: decreaseQuantity, className: "px-2 py-1", children: "-" }),
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1618
1651
|
"input",
|
|
1619
1652
|
{
|
|
1620
1653
|
className: "w-8 bg-transparent text-center",
|
|
@@ -1625,14 +1658,14 @@ var QuantityComponent = ({
|
|
|
1625
1658
|
type: "text"
|
|
1626
1659
|
}
|
|
1627
1660
|
),
|
|
1628
|
-
/* @__PURE__ */ (0,
|
|
1661
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: increaseQuantity, className: "px-2 py-1", children: "+" })
|
|
1629
1662
|
] });
|
|
1630
1663
|
};
|
|
1631
1664
|
|
|
1632
1665
|
// src/components/checkout/Skeleton.tsx
|
|
1633
|
-
var
|
|
1666
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1634
1667
|
function Skeleton({ className, ...props }) {
|
|
1635
|
-
return /* @__PURE__ */ (0,
|
|
1668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1636
1669
|
"div",
|
|
1637
1670
|
{
|
|
1638
1671
|
"data-slot": "skeleton",
|
|
@@ -1643,32 +1676,47 @@ function Skeleton({ className, ...props }) {
|
|
|
1643
1676
|
}
|
|
1644
1677
|
|
|
1645
1678
|
// src/components/checkout/CartComponentContent.tsx
|
|
1646
|
-
var
|
|
1679
|
+
var import_react_query4 = require("@tanstack/react-query");
|
|
1680
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1647
1681
|
var CartComponentContent = ({ className }) => {
|
|
1648
1682
|
var _a, _b, _c, _d, _e;
|
|
1649
1683
|
const provider = useCartProvider();
|
|
1650
|
-
const { mutateAsync: removeProduct } = (0, import_react_query4.useMutation)(
|
|
1651
|
-
provider.removeProductFromCart
|
|
1652
|
-
);
|
|
1653
|
-
const { mutateAsync: updateQuantity } = (0, import_react_query4.useMutation)(
|
|
1654
|
-
|
|
1655
|
-
|
|
1684
|
+
const { mutateAsync: removeProduct } = (0, import_react_query4.useMutation)({
|
|
1685
|
+
mutationFn: provider.removeProductFromCart
|
|
1686
|
+
});
|
|
1687
|
+
const { mutateAsync: updateQuantity } = (0, import_react_query4.useMutation)({
|
|
1688
|
+
mutationFn: provider.updateQuantity
|
|
1689
|
+
});
|
|
1690
|
+
const { mutateAsync: setCountryAsync } = (0, import_react_query4.useMutation)({
|
|
1691
|
+
mutationFn: provider.setCountry
|
|
1692
|
+
});
|
|
1693
|
+
const { mutateAsync: clearCart } = (0, import_react_query4.useMutation)({
|
|
1694
|
+
mutationFn: provider.clearCart
|
|
1695
|
+
});
|
|
1656
1696
|
const [errMsg, setErrMsg] = import_react5.default.useState("");
|
|
1657
1697
|
const [isCountryOpen, setIsCountryOpen] = import_react5.default.useState(false);
|
|
1658
1698
|
const {
|
|
1659
1699
|
mutateAsync: continueToCheckoutAsync,
|
|
1660
|
-
|
|
1661
|
-
} = (0, import_react_query4.useMutation)(
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
const { data:
|
|
1669
|
-
"cart-
|
|
1670
|
-
provider.
|
|
1671
|
-
);
|
|
1700
|
+
isPending: isContinueToCheckoutLoading
|
|
1701
|
+
} = (0, import_react_query4.useMutation)({
|
|
1702
|
+
mutationFn: provider.redirectToNextStep
|
|
1703
|
+
});
|
|
1704
|
+
const { data: availableCountries } = (0, import_react_query4.useQuery)({
|
|
1705
|
+
queryKey: ["cart-available-countries"],
|
|
1706
|
+
queryFn: provider.getAvailableCountries
|
|
1707
|
+
});
|
|
1708
|
+
const { data: isApplePayAvailable } = (0, import_react_query4.useQuery)({
|
|
1709
|
+
queryKey: ["cart-one-click-payment"],
|
|
1710
|
+
queryFn: provider.checkIfApplePayIsAvailable
|
|
1711
|
+
});
|
|
1712
|
+
const { data, isLoading, refetch } = (0, import_react_query4.useQuery)({
|
|
1713
|
+
queryKey: ["cart"],
|
|
1714
|
+
queryFn: provider.getProducts
|
|
1715
|
+
});
|
|
1716
|
+
const { data: countryData, refetch: refetchCountry } = (0, import_react_query4.useQuery)({
|
|
1717
|
+
queryKey: ["cart-country"],
|
|
1718
|
+
queryFn: provider.getCountry
|
|
1719
|
+
});
|
|
1672
1720
|
const [productsParent] = (0, import_react4.useAutoAnimate)(
|
|
1673
1721
|
/* optional config */
|
|
1674
1722
|
);
|
|
@@ -1715,18 +1763,18 @@ var CartComponentContent = ({ className }) => {
|
|
|
1715
1763
|
setErrMsg(`${e}`);
|
|
1716
1764
|
}
|
|
1717
1765
|
}
|
|
1718
|
-
return /* @__PURE__ */ (0,
|
|
1719
|
-
isLoading && /* @__PURE__ */ (0,
|
|
1720
|
-
/* @__PURE__ */ (0,
|
|
1721
|
-
/* @__PURE__ */ (0,
|
|
1766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${className} flex flex-col`, ref: productsParent, children: [
|
|
1767
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex w-full justify-center flex-col gap-4", children: [
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { className: "w-full h-32" }),
|
|
1769
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { className: "w-full h-32" })
|
|
1722
1770
|
] }),
|
|
1723
|
-
!isLoading && (products == null || products.length == 0) && /* @__PURE__ */ (0,
|
|
1724
|
-
/* @__PURE__ */ (0,
|
|
1771
|
+
!isLoading && (products == null || products.length == 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dark:text-neutral-400 text-neutral-700", children: "Brak produkt\xF3w w koszyku." }) }),
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1725
1773
|
"div",
|
|
1726
1774
|
{
|
|
1727
1775
|
className: "max-h-[70vh] overflow-clip overflow-y-scroll",
|
|
1728
|
-
children: products != null && products.length > 0 && /* @__PURE__ */ (0,
|
|
1729
|
-
/* @__PURE__ */ (0,
|
|
1776
|
+
children: products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "mt-5", children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.default.Fragment, { children: product.details != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "mb-3", children: [
|
|
1777
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1730
1778
|
SingleProduct_default,
|
|
1731
1779
|
{
|
|
1732
1780
|
quantity: product.quantity,
|
|
@@ -1736,46 +1784,46 @@ var CartComponentContent = ({ className }) => {
|
|
|
1736
1784
|
}
|
|
1737
1785
|
}
|
|
1738
1786
|
),
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1787
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "h-1 dark:border-neutral-700 border-neutral-400" })
|
|
1740
1788
|
] }) }, product.id)) })
|
|
1741
1789
|
}
|
|
1742
1790
|
),
|
|
1743
|
-
/* @__PURE__ */ (0,
|
|
1744
|
-
sumOfProducts > 0 && currency != null && /* @__PURE__ */ (0,
|
|
1745
|
-
/* @__PURE__ */ (0,
|
|
1791
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grow" }),
|
|
1792
|
+
sumOfProducts > 0 && currency != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
1793
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mx-3 flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1746
1794
|
"div",
|
|
1747
1795
|
{
|
|
1748
1796
|
className: "flex flex-row justify-between text-lg",
|
|
1749
1797
|
children: [
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1798
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1751
1799
|
"p",
|
|
1752
1800
|
{
|
|
1753
1801
|
className: "dark:text-neutral-200 text-neutral-800 text-xl",
|
|
1754
1802
|
children: "Suma:"
|
|
1755
1803
|
}
|
|
1756
1804
|
),
|
|
1757
|
-
/* @__PURE__ */ (0,
|
|
1758
|
-
/* @__PURE__ */ (0,
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-end", children: [
|
|
1806
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1759
1807
|
"p",
|
|
1760
1808
|
{
|
|
1761
1809
|
className: "dark:text-neutral-200 text-neutral-800 font-medium",
|
|
1762
1810
|
children: formatCurrency(sumOfProducts, currency)
|
|
1763
1811
|
}
|
|
1764
1812
|
),
|
|
1765
|
-
isSomeProductDeliverable && /* @__PURE__ */ (0,
|
|
1813
|
+
isSomeProductDeliverable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "opacity-70 text-right text-base", children: "+ dostawa" })
|
|
1766
1814
|
] })
|
|
1767
1815
|
]
|
|
1768
1816
|
}
|
|
1769
1817
|
) }),
|
|
1770
|
-
countries && (countries == null ? void 0 : countries.length) > 1 && /* @__PURE__ */ (0,
|
|
1771
|
-
/* @__PURE__ */ (0,
|
|
1818
|
+
countries && (countries == null ? void 0 : countries.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
|
|
1819
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1772
1820
|
"h4",
|
|
1773
1821
|
{
|
|
1774
1822
|
className: "ml-3 text-sm dark:text-neutral-400 text-neutral-700",
|
|
1775
1823
|
children: "Wybierz kraj"
|
|
1776
1824
|
}
|
|
1777
1825
|
),
|
|
1778
|
-
/* @__PURE__ */ (0,
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1779
1827
|
CountrySelector_default,
|
|
1780
1828
|
{
|
|
1781
1829
|
id: Math.random().toString(),
|
|
@@ -1793,8 +1841,8 @@ var CartComponentContent = ({ className }) => {
|
|
|
1793
1841
|
}
|
|
1794
1842
|
)
|
|
1795
1843
|
] }),
|
|
1796
|
-
/* @__PURE__ */ (0,
|
|
1797
|
-
isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ (0,
|
|
1844
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mb-3 flex flex-col", children: [
|
|
1845
|
+
isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ApplePay_default, { colorType: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
|
|
1798
1846
|
var _a2, _b2, _c2, _d2, _e2, _f;
|
|
1799
1847
|
return {
|
|
1800
1848
|
name: (_b2 = (_a2 = el.details) == null ? void 0 : _a2.name) != null ? _b2 : "",
|
|
@@ -1805,7 +1853,7 @@ var CartComponentContent = ({ className }) => {
|
|
|
1805
1853
|
metadata: el.metadata
|
|
1806
1854
|
};
|
|
1807
1855
|
}) }) }),
|
|
1808
|
-
products != null && products.length > 0 && /* @__PURE__ */ (0,
|
|
1856
|
+
products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GooglePay_default, { buttonSizeMode: "fill", buttonColor: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
|
|
1809
1857
|
var _a2, _b2, _c2, _d2, _e2, _f;
|
|
1810
1858
|
return {
|
|
1811
1859
|
name: (_b2 = (_a2 = el.details) == null ? void 0 : _a2.name) != null ? _b2 : "",
|
|
@@ -1816,16 +1864,16 @@ var CartComponentContent = ({ className }) => {
|
|
|
1816
1864
|
metadata: el.metadata
|
|
1817
1865
|
};
|
|
1818
1866
|
}) }) }),
|
|
1819
|
-
/* @__PURE__ */ (0,
|
|
1867
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1820
1868
|
"button",
|
|
1821
1869
|
{
|
|
1822
1870
|
onClick: continueToCheckout,
|
|
1823
1871
|
disabled: isLoading || isContinueToCheckoutLoading || selectedCountry == null,
|
|
1824
1872
|
className: "px-3 py-2 my-2 mx-2 rounded-md disabled:opacity-40 disabled:cursor-not-allowed dark:bg-neutral-300 dark:hover:bg-neutral-100 dark:text-neutral-800 hover:bg-neutral-900 text-neutral-200 bg-neutral-800 transition font-bold",
|
|
1825
|
-
children: isContinueToCheckoutLoading ?
|
|
1873
|
+
children: isContinueToCheckoutLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, {}) : "Nast\u0119pny krok"
|
|
1826
1874
|
}
|
|
1827
1875
|
),
|
|
1828
|
-
errMsg.length > 0 && /* @__PURE__ */ (0,
|
|
1876
|
+
errMsg.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-red-500 text-sm text-center", children: errMsg })
|
|
1829
1877
|
] })
|
|
1830
1878
|
] })
|
|
1831
1879
|
] });
|
|
@@ -1833,36 +1881,36 @@ var CartComponentContent = ({ className }) => {
|
|
|
1833
1881
|
var CartComponentContent_default = CartComponentContent;
|
|
1834
1882
|
|
|
1835
1883
|
// src/components/checkout/CartComponent.tsx
|
|
1836
|
-
var
|
|
1884
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1837
1885
|
function CartComponent({ isVisible, shouldHide }) {
|
|
1838
1886
|
const [parent] = (0, import_react6.useAutoAnimate)(
|
|
1839
1887
|
/* optional config */
|
|
1840
1888
|
);
|
|
1841
|
-
return /* @__PURE__ */ (0,
|
|
1842
|
-
/* @__PURE__ */ (0,
|
|
1889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: parent, className: "bitsnap-checkout dark", style: { zIndex: 999999 }, children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
1890
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1843
1891
|
"div",
|
|
1844
1892
|
{
|
|
1845
|
-
className: "fixed top-0 right-0 left-0 bottom-0 bg-black/30 cursor-pointer",
|
|
1893
|
+
className: "fixed top-0 right-0 left-0 bottom-0 bg-black/30 cursor-pointer z-10",
|
|
1846
1894
|
onClick: shouldHide
|
|
1847
1895
|
}
|
|
1848
1896
|
),
|
|
1849
|
-
/* @__PURE__ */ (0,
|
|
1897
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1850
1898
|
"div",
|
|
1851
1899
|
{
|
|
1852
|
-
className: "fixed top-0 right-0 bottom-0 w-full md:w-[350px] xl:w-[420px] dark:bg-neutral-900 bg-neutral-300 dark:text-neutral-200 text-neutral-900 flex flex-col",
|
|
1900
|
+
className: "fixed z-20 top-0 right-0 bottom-0 w-full md:w-[350px] xl:w-[420px] dark:bg-neutral-900 bg-neutral-300 dark:text-neutral-200 text-neutral-900 flex flex-col",
|
|
1853
1901
|
children: [
|
|
1854
|
-
/* @__PURE__ */ (0,
|
|
1902
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1855
1903
|
"div",
|
|
1856
1904
|
{
|
|
1857
1905
|
className: "mx-3 mt-7 flex justify-between items-center",
|
|
1858
1906
|
children: [
|
|
1859
|
-
/* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
1907
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-2xl font-medium", children: "Koszyk" }),
|
|
1908
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1861
1909
|
"button",
|
|
1862
1910
|
{
|
|
1863
1911
|
className: "rounded-full dark:hover:bg-neutral-700 hover:bg-neutral-400 p-2 transition",
|
|
1864
1912
|
onClick: shouldHide,
|
|
1865
|
-
children: /* @__PURE__ */ (0,
|
|
1913
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1866
1914
|
"svg",
|
|
1867
1915
|
{
|
|
1868
1916
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1876,8 +1924,8 @@ function CartComponent({ isVisible, shouldHide }) {
|
|
|
1876
1924
|
strokeLinejoin: "round",
|
|
1877
1925
|
className: "lucide lucide-x",
|
|
1878
1926
|
children: [
|
|
1879
|
-
/* @__PURE__ */ (0,
|
|
1880
|
-
/* @__PURE__ */ (0,
|
|
1927
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1881
1929
|
]
|
|
1882
1930
|
}
|
|
1883
1931
|
)
|
|
@@ -1886,7 +1934,7 @@ function CartComponent({ isVisible, shouldHide }) {
|
|
|
1886
1934
|
]
|
|
1887
1935
|
}
|
|
1888
1936
|
),
|
|
1889
|
-
/* @__PURE__ */ (0,
|
|
1937
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartComponentContent_default, { className: "grow" })
|
|
1890
1938
|
]
|
|
1891
1939
|
}
|
|
1892
1940
|
)
|
|
@@ -1897,14 +1945,14 @@ var WrapperCartComponent = (props) => {
|
|
|
1897
1945
|
return null;
|
|
1898
1946
|
}
|
|
1899
1947
|
return (0, import_react_dom.createPortal)(
|
|
1900
|
-
/* @__PURE__ */ (0,
|
|
1948
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartComponent, { ...props }) }),
|
|
1901
1949
|
document.body
|
|
1902
1950
|
);
|
|
1903
1951
|
};
|
|
1904
1952
|
var CartComponent_default = WrapperCartComponent;
|
|
1905
1953
|
|
|
1906
1954
|
// src/components/checkout/BitsnapCart.tsx
|
|
1907
|
-
var
|
|
1955
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1908
1956
|
var cartAddToCartSchema = import_zod2.default.object({
|
|
1909
1957
|
id: import_zod2.default.string(),
|
|
1910
1958
|
isSubscription: import_zod2.default.boolean().default(false),
|
|
@@ -2031,13 +2079,13 @@ function BitsnapCart({
|
|
|
2031
2079
|
}
|
|
2032
2080
|
}
|
|
2033
2081
|
}, []);
|
|
2034
|
-
return /* @__PURE__ */ (0,
|
|
2035
|
-
/* @__PURE__ */ (0,
|
|
2082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
2083
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2036
2084
|
"button",
|
|
2037
2085
|
{
|
|
2038
2086
|
onClick: () => isCartVisible ? hideCart() : showCart(),
|
|
2039
|
-
className: className != null ? className : "relative rounded-full hover:bg-neutral-300 transition p-1",
|
|
2040
|
-
children: children ? /* @__PURE__ */ (0,
|
|
2087
|
+
className: ["bitsnap-checkout", className != null ? className : "relative rounded-full hover:bg-neutral-300 transition p-1"].join(" "),
|
|
2088
|
+
children: children ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
2041
2089
|
"svg",
|
|
2042
2090
|
{
|
|
2043
2091
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2051,15 +2099,15 @@ function BitsnapCart({
|
|
|
2051
2099
|
strokeLinejoin: "round",
|
|
2052
2100
|
className: "lucide lucide-shopping-cart",
|
|
2053
2101
|
children: [
|
|
2054
|
-
/* @__PURE__ */ (0,
|
|
2055
|
-
/* @__PURE__ */ (0,
|
|
2056
|
-
/* @__PURE__ */ (0,
|
|
2102
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "8", cy: "21", r: "1" }),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "19", cy: "21", r: "1" }),
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
|
|
2057
2105
|
]
|
|
2058
2106
|
}
|
|
2059
2107
|
)
|
|
2060
2108
|
}
|
|
2061
2109
|
),
|
|
2062
|
-
/* @__PURE__ */ (0,
|
|
2110
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2063
2111
|
CartComponent_default,
|
|
2064
2112
|
{
|
|
2065
2113
|
isVisible: isCartVisible,
|