@thinkingcat/subscription-ui 1.0.6 → 1.0.8
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/index.js +42 -5
- package/dist/index.mjs +42 -5
- package/package.json +8 -3
package/dist/index.js
CHANGED
|
@@ -95,7 +95,10 @@ function SubscribePage({
|
|
|
95
95
|
const res = await fetch(cardsApiPath, {
|
|
96
96
|
method: "POST",
|
|
97
97
|
headers: { "Content-Type": "application/json" },
|
|
98
|
-
body: JSON.stringify(
|
|
98
|
+
body: JSON.stringify({
|
|
99
|
+
...cardForm,
|
|
100
|
+
cardNumber: cardForm.cardNumber.replace(/\s/g, "")
|
|
101
|
+
})
|
|
99
102
|
});
|
|
100
103
|
const data = await res.json();
|
|
101
104
|
if (!data.success) {
|
|
@@ -287,7 +290,22 @@ function SubscribePage({
|
|
|
287
290
|
type,
|
|
288
291
|
placeholder,
|
|
289
292
|
value: cardForm[key],
|
|
290
|
-
onChange: (e) =>
|
|
293
|
+
onChange: (e) => {
|
|
294
|
+
const val = e.target.value;
|
|
295
|
+
if (key === "cardNumber") {
|
|
296
|
+
const formatted = val.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 ").slice(0, 19);
|
|
297
|
+
setCardForm((f) => ({ ...f, [key]: formatted }));
|
|
298
|
+
} else if (key === "expiryDate") {
|
|
299
|
+
const digits = val.replace(/\D/g, "");
|
|
300
|
+
let formatted = digits;
|
|
301
|
+
if (digits.length > 2) {
|
|
302
|
+
formatted = `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
|
|
303
|
+
}
|
|
304
|
+
setCardForm((f) => ({ ...f, [key]: formatted.slice(0, 5) }));
|
|
305
|
+
} else {
|
|
306
|
+
setCardForm((f) => ({ ...f, [key]: val }));
|
|
307
|
+
}
|
|
308
|
+
},
|
|
291
309
|
className: "w-full bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-3 py-2 text-gray-900 dark:text-white text-sm placeholder-gray-300 dark:placeholder-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500 transition-colors"
|
|
292
310
|
}
|
|
293
311
|
)
|
|
@@ -486,7 +504,7 @@ function SubscriptionManagement({
|
|
|
486
504
|
setError(data.error || "\uAD6C\uB3C5 \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
|
|
487
505
|
return;
|
|
488
506
|
}
|
|
489
|
-
await fetchSubscriptions();
|
|
507
|
+
await Promise.all([fetchSubscriptions(), fetchPayments()]);
|
|
490
508
|
} catch {
|
|
491
509
|
setError("\uAD6C\uB3C5 \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
|
|
492
510
|
} finally {
|
|
@@ -545,7 +563,10 @@ function SubscriptionManagement({
|
|
|
545
563
|
const res = await fetch(cardsApiPath, {
|
|
546
564
|
method: "POST",
|
|
547
565
|
headers: { "Content-Type": "application/json" },
|
|
548
|
-
body: JSON.stringify(
|
|
566
|
+
body: JSON.stringify({
|
|
567
|
+
...cardForm,
|
|
568
|
+
cardNumber: cardForm.cardNumber.replace(/\s/g, "")
|
|
569
|
+
})
|
|
549
570
|
});
|
|
550
571
|
const data = await res.json();
|
|
551
572
|
if (!data.success) {
|
|
@@ -569,6 +590,7 @@ function SubscriptionManagement({
|
|
|
569
590
|
}
|
|
570
591
|
function statusBadge(status) {
|
|
571
592
|
if (status === "ACTIVE") return { cls: "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400", label: "\uD65C\uC131" };
|
|
593
|
+
if (status === "INACTIVE") return { cls: "bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400", label: "\uC911\uB2E8\uB428" };
|
|
572
594
|
if (status === "CANCELLED") return { cls: "bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
|
|
573
595
|
return { cls: "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400", label: status };
|
|
574
596
|
}
|
|
@@ -687,7 +709,22 @@ function SubscriptionManagement({
|
|
|
687
709
|
type,
|
|
688
710
|
placeholder,
|
|
689
711
|
value: cardForm[key],
|
|
690
|
-
onChange: (e) =>
|
|
712
|
+
onChange: (e) => {
|
|
713
|
+
const val = e.target.value;
|
|
714
|
+
if (key === "cardNumber") {
|
|
715
|
+
const formatted = val.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 ").slice(0, 19);
|
|
716
|
+
setCardForm((f) => ({ ...f, [key]: formatted }));
|
|
717
|
+
} else if (key === "expiryDate") {
|
|
718
|
+
const digits = val.replace(/\D/g, "");
|
|
719
|
+
let formatted = digits;
|
|
720
|
+
if (digits.length > 2) {
|
|
721
|
+
formatted = `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
|
|
722
|
+
}
|
|
723
|
+
setCardForm((f) => ({ ...f, [key]: formatted.slice(0, 5) }));
|
|
724
|
+
} else {
|
|
725
|
+
setCardForm((f) => ({ ...f, [key]: val }));
|
|
726
|
+
}
|
|
727
|
+
},
|
|
691
728
|
className: "w-full bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-3 py-2 text-gray-900 dark:text-white text-sm placeholder-gray-300 dark:placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
|
|
692
729
|
}
|
|
693
730
|
)
|
package/dist/index.mjs
CHANGED
|
@@ -69,7 +69,10 @@ function SubscribePage({
|
|
|
69
69
|
const res = await fetch(cardsApiPath, {
|
|
70
70
|
method: "POST",
|
|
71
71
|
headers: { "Content-Type": "application/json" },
|
|
72
|
-
body: JSON.stringify(
|
|
72
|
+
body: JSON.stringify({
|
|
73
|
+
...cardForm,
|
|
74
|
+
cardNumber: cardForm.cardNumber.replace(/\s/g, "")
|
|
75
|
+
})
|
|
73
76
|
});
|
|
74
77
|
const data = await res.json();
|
|
75
78
|
if (!data.success) {
|
|
@@ -261,7 +264,22 @@ function SubscribePage({
|
|
|
261
264
|
type,
|
|
262
265
|
placeholder,
|
|
263
266
|
value: cardForm[key],
|
|
264
|
-
onChange: (e) =>
|
|
267
|
+
onChange: (e) => {
|
|
268
|
+
const val = e.target.value;
|
|
269
|
+
if (key === "cardNumber") {
|
|
270
|
+
const formatted = val.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 ").slice(0, 19);
|
|
271
|
+
setCardForm((f) => ({ ...f, [key]: formatted }));
|
|
272
|
+
} else if (key === "expiryDate") {
|
|
273
|
+
const digits = val.replace(/\D/g, "");
|
|
274
|
+
let formatted = digits;
|
|
275
|
+
if (digits.length > 2) {
|
|
276
|
+
formatted = `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
|
|
277
|
+
}
|
|
278
|
+
setCardForm((f) => ({ ...f, [key]: formatted.slice(0, 5) }));
|
|
279
|
+
} else {
|
|
280
|
+
setCardForm((f) => ({ ...f, [key]: val }));
|
|
281
|
+
}
|
|
282
|
+
},
|
|
265
283
|
className: "w-full bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-3 py-2 text-gray-900 dark:text-white text-sm placeholder-gray-300 dark:placeholder-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500 transition-colors"
|
|
266
284
|
}
|
|
267
285
|
)
|
|
@@ -460,7 +478,7 @@ function SubscriptionManagement({
|
|
|
460
478
|
setError(data.error || "\uAD6C\uB3C5 \uCDE8\uC18C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
|
|
461
479
|
return;
|
|
462
480
|
}
|
|
463
|
-
await fetchSubscriptions();
|
|
481
|
+
await Promise.all([fetchSubscriptions(), fetchPayments()]);
|
|
464
482
|
} catch {
|
|
465
483
|
setError("\uAD6C\uB3C5 \uCDE8\uC18C \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
|
|
466
484
|
} finally {
|
|
@@ -519,7 +537,10 @@ function SubscriptionManagement({
|
|
|
519
537
|
const res = await fetch(cardsApiPath, {
|
|
520
538
|
method: "POST",
|
|
521
539
|
headers: { "Content-Type": "application/json" },
|
|
522
|
-
body: JSON.stringify(
|
|
540
|
+
body: JSON.stringify({
|
|
541
|
+
...cardForm,
|
|
542
|
+
cardNumber: cardForm.cardNumber.replace(/\s/g, "")
|
|
543
|
+
})
|
|
523
544
|
});
|
|
524
545
|
const data = await res.json();
|
|
525
546
|
if (!data.success) {
|
|
@@ -543,6 +564,7 @@ function SubscriptionManagement({
|
|
|
543
564
|
}
|
|
544
565
|
function statusBadge(status) {
|
|
545
566
|
if (status === "ACTIVE") return { cls: "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400", label: "\uD65C\uC131" };
|
|
567
|
+
if (status === "INACTIVE") return { cls: "bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400", label: "\uC911\uB2E8\uB428" };
|
|
546
568
|
if (status === "CANCELLED") return { cls: "bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400", label: "\uCDE8\uC18C\uB428" };
|
|
547
569
|
return { cls: "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400", label: status };
|
|
548
570
|
}
|
|
@@ -661,7 +683,22 @@ function SubscriptionManagement({
|
|
|
661
683
|
type,
|
|
662
684
|
placeholder,
|
|
663
685
|
value: cardForm[key],
|
|
664
|
-
onChange: (e) =>
|
|
686
|
+
onChange: (e) => {
|
|
687
|
+
const val = e.target.value;
|
|
688
|
+
if (key === "cardNumber") {
|
|
689
|
+
const formatted = val.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 ").slice(0, 19);
|
|
690
|
+
setCardForm((f) => ({ ...f, [key]: formatted }));
|
|
691
|
+
} else if (key === "expiryDate") {
|
|
692
|
+
const digits = val.replace(/\D/g, "");
|
|
693
|
+
let formatted = digits;
|
|
694
|
+
if (digits.length > 2) {
|
|
695
|
+
formatted = `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;
|
|
696
|
+
}
|
|
697
|
+
setCardForm((f) => ({ ...f, [key]: formatted.slice(0, 5) }));
|
|
698
|
+
} else {
|
|
699
|
+
setCardForm((f) => ({ ...f, [key]: val }));
|
|
700
|
+
}
|
|
701
|
+
},
|
|
665
702
|
className: "w-full bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-3 py-2 text-gray-900 dark:text-white text-sm placeholder-gray-300 dark:placeholder-gray-600 focus:outline-none focus:border-blue-500 transition-colors"
|
|
666
703
|
}
|
|
667
704
|
)
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.8",
|
|
7
7
|
"description": "Subscription UI components for ThinkingCat services",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.mjs",
|
|
@@ -20,7 +20,12 @@
|
|
|
20
20
|
"dev": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external next --watch",
|
|
21
21
|
"prepublishOnly": "npm run build"
|
|
22
22
|
},
|
|
23
|
-
"keywords": [
|
|
23
|
+
"keywords": [
|
|
24
|
+
"subscription",
|
|
25
|
+
"ui",
|
|
26
|
+
"react",
|
|
27
|
+
"thinkingcat"
|
|
28
|
+
],
|
|
24
29
|
"author": "ThinkingCat",
|
|
25
30
|
"license": "MIT",
|
|
26
31
|
"peerDependencies": {
|
|
@@ -41,4 +46,4 @@
|
|
|
41
46
|
"dist",
|
|
42
47
|
"README.md"
|
|
43
48
|
]
|
|
44
|
-
}
|
|
49
|
+
}
|