@blocklet/payment-react 1.14.21 → 1.14.23

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.
Files changed (137) hide show
  1. package/README.md +77 -0
  2. package/es/checkout/donate.d.ts +4 -2
  3. package/es/checkout/donate.js +13 -10
  4. package/es/checkout/form.d.ts +1 -1
  5. package/es/checkout/form.js +50 -4
  6. package/es/checkout/table.d.ts +1 -1
  7. package/es/checkout/table.js +11 -1
  8. package/es/components/blockchain/tx.js +2 -1
  9. package/es/components/country-select.d.ts +16 -0
  10. package/es/components/country-select.js +82 -0
  11. package/es/components/input.d.ts +21 -21
  12. package/es/components/input.js +43 -42
  13. package/es/components/livemode.js +1 -0
  14. package/es/components/pricing-table.js +0 -2
  15. package/es/components/status.js +2 -3
  16. package/es/components/table.d.ts +2 -0
  17. package/es/components/table.js +186 -0
  18. package/es/contexts/payment.d.ts +2 -0
  19. package/es/contexts/payment.js +5 -2
  20. package/es/history/invoice/list.d.ts +3 -1
  21. package/es/history/invoice/list.js +215 -48
  22. package/es/hooks/mobile.d.ts +4 -0
  23. package/es/hooks/mobile.js +10 -0
  24. package/es/index.d.ts +5 -1
  25. package/es/index.js +7 -1
  26. package/es/libs/util.d.ts +21 -8
  27. package/es/libs/util.js +92 -28
  28. package/es/locales/en.js +22 -7
  29. package/es/locales/index.d.ts +0 -1
  30. package/es/locales/index.js +10 -1
  31. package/es/locales/zh.js +21 -6
  32. package/es/payment/error.js +2 -2
  33. package/es/payment/footer.js +1 -1
  34. package/es/payment/form/address.d.ts +9 -2
  35. package/es/payment/form/address.js +69 -69
  36. package/es/payment/form/currency.js +39 -25
  37. package/es/payment/form/index.d.ts +1 -1
  38. package/es/payment/form/index.js +83 -81
  39. package/es/payment/form/phone.js +15 -51
  40. package/es/payment/index.d.ts +3 -10
  41. package/es/payment/index.js +295 -224
  42. package/es/payment/product-card.js +4 -4
  43. package/es/payment/product-donation.js +9 -3
  44. package/es/payment/product-item.d.ts +2 -2
  45. package/es/payment/product-item.js +120 -81
  46. package/es/payment/summary.js +188 -118
  47. package/es/theme/index.css +240 -0
  48. package/es/theme/index.d.ts +14 -0
  49. package/es/theme/index.js +256 -0
  50. package/es/theme/typography.d.ts +2 -0
  51. package/es/theme/typography.js +53 -0
  52. package/es/types/index.d.ts +16 -0
  53. package/lib/checkout/donate.d.ts +4 -2
  54. package/lib/checkout/donate.js +23 -2
  55. package/lib/checkout/form.d.ts +1 -1
  56. package/lib/checkout/form.js +60 -15
  57. package/lib/checkout/table.d.ts +1 -1
  58. package/lib/checkout/table.js +22 -1
  59. package/lib/components/blockchain/tx.js +4 -1
  60. package/lib/components/country-select.d.ts +16 -0
  61. package/lib/components/country-select.js +115 -0
  62. package/lib/components/input.d.ts +21 -21
  63. package/lib/components/input.js +21 -12
  64. package/lib/components/livemode.js +1 -0
  65. package/lib/components/pricing-table.js +0 -2
  66. package/lib/components/status.js +2 -3
  67. package/lib/components/table.d.ts +2 -0
  68. package/lib/components/table.js +220 -0
  69. package/lib/contexts/payment.d.ts +2 -0
  70. package/lib/contexts/payment.js +4 -1
  71. package/lib/history/invoice/list.d.ts +3 -1
  72. package/lib/history/invoice/list.js +290 -62
  73. package/lib/hooks/mobile.d.ts +4 -0
  74. package/lib/hooks/mobile.js +17 -0
  75. package/lib/index.d.ts +5 -1
  76. package/lib/index.js +36 -0
  77. package/lib/libs/util.d.ts +21 -8
  78. package/lib/libs/util.js +115 -37
  79. package/lib/locales/en.js +22 -7
  80. package/lib/locales/index.d.ts +0 -1
  81. package/lib/locales/index.js +14 -3
  82. package/lib/locales/zh.js +21 -6
  83. package/lib/payment/error.js +5 -1
  84. package/lib/payment/footer.js +1 -1
  85. package/lib/payment/form/address.d.ts +9 -2
  86. package/lib/payment/form/address.js +67 -59
  87. package/lib/payment/form/currency.js +31 -24
  88. package/lib/payment/form/index.d.ts +1 -1
  89. package/lib/payment/form/index.js +92 -93
  90. package/lib/payment/form/phone.js +11 -59
  91. package/lib/payment/index.d.ts +3 -10
  92. package/lib/payment/index.js +302 -225
  93. package/lib/payment/product-card.js +5 -4
  94. package/lib/payment/product-donation.js +11 -7
  95. package/lib/payment/product-item.d.ts +2 -2
  96. package/lib/payment/product-item.js +38 -19
  97. package/lib/payment/summary.js +219 -127
  98. package/lib/theme/index.css +240 -0
  99. package/lib/theme/index.d.ts +14 -0
  100. package/lib/theme/index.js +273 -0
  101. package/lib/theme/typography.d.ts +2 -0
  102. package/lib/theme/typography.js +59 -0
  103. package/lib/types/index.d.ts +16 -0
  104. package/package.json +14 -11
  105. package/src/checkout/donate.tsx +25 -11
  106. package/src/checkout/form.tsx +63 -15
  107. package/src/checkout/table.tsx +20 -1
  108. package/src/components/blockchain/tx.tsx +2 -1
  109. package/src/components/country-select.tsx +93 -0
  110. package/src/components/input.tsx +49 -46
  111. package/src/components/livemode.tsx +1 -0
  112. package/src/components/pricing-table.tsx +0 -2
  113. package/src/components/status.tsx +1 -2
  114. package/src/components/table.tsx +200 -0
  115. package/src/contexts/payment.tsx +6 -1
  116. package/src/history/invoice/list.tsx +254 -49
  117. package/src/hooks/mobile.ts +13 -0
  118. package/src/index.ts +7 -0
  119. package/src/libs/util.ts +120 -31
  120. package/src/locales/en.tsx +18 -4
  121. package/src/locales/index.tsx +10 -3
  122. package/src/locales/zh.tsx +17 -3
  123. package/src/payment/error.tsx +2 -2
  124. package/src/payment/footer.tsx +1 -1
  125. package/src/payment/form/address.tsx +56 -47
  126. package/src/payment/form/currency.tsx +29 -23
  127. package/src/payment/form/index.tsx +89 -76
  128. package/src/payment/form/phone.tsx +14 -51
  129. package/src/payment/index.tsx +298 -231
  130. package/src/payment/product-card.tsx +4 -4
  131. package/src/payment/product-donation.tsx +9 -4
  132. package/src/payment/product-item.tsx +49 -20
  133. package/src/payment/summary.tsx +191 -108
  134. package/src/theme/index.css +240 -0
  135. package/src/theme/index.tsx +271 -0
  136. package/src/theme/typography.ts +56 -0
  137. package/src/types/index.ts +17 -0
package/es/libs/util.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
3
- import { PricingRenderProps } from '../types';
3
+ import { ActionProps, PricingRenderProps } from '../types';
4
4
  export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
5
5
  export declare const isPaymentKitMounted: () => any;
6
6
  export declare const getPrefix: () => string;
@@ -24,12 +24,12 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
24
24
  secondary?: string;
25
25
  quantity: string;
26
26
  };
27
- export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
28
- export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
29
- export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
30
- export declare function getPayoutStatusColor(status: string): "success" | "warning" | "default";
31
- export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
32
- export declare function getWebhookStatusColor(status: string): "success" | "default";
27
+ export declare function getSubscriptionStatusColor(status: string): "default" | "success" | "primary" | "warning" | "error";
28
+ export declare function getPaymentIntentStatusColor(status: string): "default" | "success" | "warning";
29
+ export declare function getRefundStatusColor(status: string): "default" | "success" | "warning";
30
+ export declare function getPayoutStatusColor(status: string): "default" | "success" | "warning";
31
+ export declare function getInvoiceStatusColor(status: string): "default" | "success" | "warning" | "secondary";
32
+ export declare function getWebhookStatusColor(status: string): "default" | "success";
33
33
  export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {
34
34
  subtotal: any;
35
35
  total: any;
@@ -40,11 +40,21 @@ export declare function getCheckoutAmount(items: TLineItemExpanded[], currency:
40
40
  };
41
41
  export declare function getRecurringPeriod(recurring: PriceRecurring): number;
42
42
  export declare function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymentCurrency): string;
43
+ export declare function formatMeteredThen(subscription: string, recurring: string, hasMetered: boolean, locale?: string): string;
44
+ export declare function formatPriceDisplay({ amount, then, actualAmount, showThen }: {
45
+ amount: string;
46
+ then?: string;
47
+ actualAmount: string;
48
+ showThen?: boolean;
49
+ }, recurring: string, hasMetered: boolean, locale?: string): string;
43
50
  export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
44
51
  action: string;
45
52
  amount: string;
46
53
  then?: string;
47
54
  secondary?: string;
55
+ showThen?: boolean;
56
+ actualAmount: string;
57
+ priceDisplay: string;
48
58
  };
49
59
  export declare function formatAmount(amount: string, decimals: number): string;
50
60
  export declare function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string): TPaymentCurrencyExpanded | null;
@@ -53,11 +63,13 @@ export declare function stopEvent(e: React.SyntheticEvent<any>): void;
53
63
  export declare function sleep(ms: number): Promise<unknown>;
54
64
  export declare function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength?: number): string;
55
65
  export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
56
- export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded) => {
66
+ export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded, actionProps: ActionProps) => {
57
67
  action: string;
58
68
  variant: string;
59
69
  color: string;
60
70
  canRenew: boolean;
71
+ text?: string;
72
+ sx?: any;
61
73
  } | null;
62
74
  export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
63
75
  export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
@@ -77,4 +89,5 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
77
89
  locale: string;
78
90
  }): PricingRenderProps;
79
91
  export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
92
+ export declare function formatSubscriptionStatus(status: string): string;
80
93
  export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
package/es/libs/util.js CHANGED
@@ -400,24 +400,42 @@ export function formatUpsellSaving(items, currency) {
400
400
  const after = new BN(to.total);
401
401
  return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
402
402
  }
403
+ export function formatMeteredThen(subscription, recurring, hasMetered, locale = "en") {
404
+ if (hasMetered) {
405
+ return t("payment.checkout.meteredThen", locale, { subscription, recurring });
406
+ }
407
+ return t("payment.checkout.then", locale, { subscription, recurring });
408
+ }
409
+ export function formatPriceDisplay({ amount, then, actualAmount, showThen }, recurring, hasMetered, locale = "en") {
410
+ if (Number(actualAmount) === 0 && hasMetered) {
411
+ return t("payment.checkout.metered", locale, { recurring });
412
+ }
413
+ if (showThen) {
414
+ return [amount, then].filter(Boolean).join(", ");
415
+ }
416
+ return [amount, then].filter(Boolean).join(" ");
417
+ }
403
418
  export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
404
419
  const brand = getStatementDescriptor(items);
405
420
  const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
421
+ const actualAmount = fromUnitToToken(total, currency.decimal);
406
422
  const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
407
423
  if (items.length === 0) {
408
424
  return {
409
425
  action: t("payment.checkout.empty", locale),
410
426
  amount: "0",
411
- then: ""
427
+ then: "",
428
+ actualAmount: "0",
429
+ priceDisplay: "0"
412
430
  };
413
431
  }
414
432
  const { name } = items[0]?.price.product || { name: "" };
415
433
  if (items.every((x) => x.price.type === "one_time")) {
416
434
  const action = t("payment.checkout.pay", locale, { payee: brand });
417
435
  if (items.length > 1) {
418
- return { action, amount };
436
+ return { action, amount, actualAmount, priceDisplay: amount };
419
437
  }
420
- return { action, amount, then: "" };
438
+ return { action, amount, then: "", actualAmount, priceDisplay: amount };
421
439
  }
422
440
  const item = items.find((x) => x.price.type === "recurring");
423
441
  const recurring = formatRecurring(
@@ -426,8 +444,8 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
426
444
  "per",
427
445
  locale
428
446
  );
447
+ const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
429
448
  if (items.every((x) => x.price.type === "recurring")) {
430
- const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
431
449
  const subscription2 = [
432
450
  hasMetered ? t("payment.checkout.least", locale) : "",
433
451
  fromUnitToToken(
@@ -443,29 +461,53 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
443
461
  ].filter(Boolean).join(" ");
444
462
  if (items.length > 1) {
445
463
  if (trialInDays > 0) {
446
- return {
464
+ const result4 = {
447
465
  action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
448
466
  amount: t("payment.checkout.free", locale, { count: trialInDays }),
449
- then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
467
+ then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
468
+ showThen: true,
469
+ actualAmount: "0"
470
+ };
471
+ return {
472
+ ...result4,
473
+ priceDisplay: formatPriceDisplay(result4, recurring, hasMetered, locale)
450
474
  };
451
475
  }
452
- return {
476
+ const result3 = {
453
477
  action: t("payment.checkout.sub2", locale, { name, count: items.length - 1 }),
454
478
  amount,
455
- then: recurring
479
+ then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
480
+ showThen: hasMetered,
481
+ actualAmount
482
+ };
483
+ return {
484
+ ...result3,
485
+ priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
456
486
  };
457
487
  }
458
488
  if (trialInDays > 0) {
459
- return {
489
+ const result3 = {
460
490
  action: t("payment.checkout.try1", locale, { name }),
461
491
  amount: t("payment.checkout.free", locale, { count: trialInDays }),
462
- then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
492
+ then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
493
+ showThen: true,
494
+ actualAmount: "0"
495
+ };
496
+ return {
497
+ ...result3,
498
+ priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
463
499
  };
464
500
  }
465
- return {
501
+ const result2 = {
466
502
  action: t("payment.checkout.sub1", locale, { name }),
467
503
  amount,
468
- then: recurring
504
+ then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
505
+ showThen: hasMetered,
506
+ actualAmount
507
+ };
508
+ return {
509
+ ...result2,
510
+ priceDisplay: formatPriceDisplay(result2, recurring, hasMetered, locale)
469
511
  };
470
512
  }
471
513
  const subscription = fromUnitToToken(
@@ -477,10 +519,21 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
477
519
  }, new BN(0)),
478
520
  currency.decimal
479
521
  );
480
- return {
522
+ const result = {
481
523
  action: t("payment.checkout.pay", locale, { payee: brand }),
482
524
  amount,
483
- then: t("payment.checkout.then", locale, { subscription: `${subscription} ${currency.symbol}`, recurring })
525
+ then: formatMeteredThen(
526
+ `${subscription} ${currency.symbol}`,
527
+ recurring,
528
+ hasMetered && Number(subscription) === 0,
529
+ locale
530
+ ),
531
+ showThen: true,
532
+ actualAmount
533
+ };
534
+ return {
535
+ ...result,
536
+ priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale)
484
537
  };
485
538
  }
486
539
  export function formatAmount(amount, decimals) {
@@ -516,41 +569,46 @@ export function formatSubscriptionProduct(items, maxLength = 2) {
516
569
  return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
517
570
  }
518
571
  export const getSubscriptionTimeSummary = (subscription) => {
519
- const lines = [`Started on ${formatToDate(subscription.start_date * 1e3)}`];
572
+ const lines = [`Start on ${formatToDate(subscription.start_date * 1e3, "en", "YYYY-MM-DD")}`];
573
+ const getLineTimeMessage = (time) => {
574
+ const curDay = dayjs().isSame(dayjs(time), "day");
575
+ const timeFormat = curDay ? "HH:mm:ss" : "YYYY-MM-DD";
576
+ return `${curDay ? "in" : "on"} ${formatToDate(time, "en", timeFormat)}`;
577
+ };
520
578
  if (subscription.status === "active" || subscription.status === "trialing") {
521
579
  if (subscription.cancel_at) {
522
- lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1e3)}`);
580
+ lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1e3)}`);
523
581
  } else if (subscription.cancel_at_period_end) {
524
- lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1e3)}`);
582
+ lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
525
583
  } else {
526
- lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1e3)}`);
584
+ lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
527
585
  }
528
586
  } else if (subscription.status === "past_due") {
529
- lines.push(`will cancel on ${formatToDate((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
587
+ lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
530
588
  } else if (subscription.status === "canceled") {
531
- lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1e3)}`);
589
+ lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1e3)}`);
532
590
  }
533
- return lines.join(", ");
591
+ return lines.join(",");
534
592
  };
535
- export const getSubscriptionAction = (subscription) => {
593
+ export const getSubscriptionAction = (subscription, actionProps) => {
536
594
  if (subscription.status === "active" || subscription.status === "trialing") {
537
595
  if (subscription.cancel_at_period_end) {
538
596
  if (subscription.cancelation_details?.reason === "payment_failed") {
539
597
  return null;
540
598
  }
541
- return { action: "recover", variant: "contained", color: "primary", canRenew: false };
599
+ return { action: "recover", variant: "contained", color: "primary", canRenew: false, ...actionProps?.recover };
542
600
  }
543
601
  if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
544
602
  return null;
545
603
  }
546
- return { action: "cancel", variant: "outlined", color: "inherit", canRenew: false };
604
+ return { action: "cancel", variant: "outlined", color: "inherit", canRenew: false, ...actionProps?.cancel };
547
605
  }
548
606
  if (subscription.status === "past_due") {
549
607
  const canRenew = subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end;
550
- return { action: "pastDue", variant: "contained", color: "primary", canRenew };
608
+ return { action: "pastDue", variant: "contained", color: "primary", canRenew, ...actionProps?.pastDue };
551
609
  }
552
610
  if (subscription.status !== "canceled" && subscription.cancel_at_period_end) {
553
- return { action: "recover", variant: "contained", color: "primary", canRenew: false };
611
+ return { action: "recover", variant: "contained", color: "primary", canRenew: false, ...actionProps?.recover };
554
612
  }
555
613
  return null;
556
614
  };
@@ -657,8 +715,8 @@ export function formatTotalPrice({
657
715
  }
658
716
  const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
659
717
  const currency = price?.currency ?? {};
660
- const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
661
- const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
718
+ const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol} `;
719
+ const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol} `;
662
720
  const appendUnit = (v, alt) => {
663
721
  if (product.unit_label) {
664
722
  return `${v}/${price.product.unit_label}`;
@@ -690,6 +748,12 @@ export function formatQuantityInventory(price, quantity, locale = "en") {
690
748
  }
691
749
  return "";
692
750
  }
751
+ export function formatSubscriptionStatus(status) {
752
+ if (status === "canceled") {
753
+ return "Ended";
754
+ }
755
+ return status;
756
+ }
693
757
  export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
694
758
  if (!amount) {
695
759
  return "";
package/es/locales/en.js CHANGED
@@ -60,7 +60,7 @@ export default flat({
60
60
  continue: "Continue",
61
61
  qty: "Qty {count}",
62
62
  each: "{unit} each",
63
- trial: "Free for {count} days",
63
+ trial: "Free for {count} day{count > 1 ? 's' : ''}",
64
64
  billed: "billed {rule}",
65
65
  metered: "based on usage",
66
66
  hour: "hour",
@@ -109,10 +109,12 @@ export default flat({
109
109
  subscription: "View subscription",
110
110
  invoice: "View invoice"
111
111
  },
112
+ paymentRequired: "Payment Required",
112
113
  staking: {
113
114
  title: "Staking Required",
114
115
  tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
115
116
  },
117
+ stakingConfirm: "In this payment, the staked amount is separate from the product cost.",
116
118
  donation: {
117
119
  between: "Please enter an amount between {min} and {max}.",
118
120
  custom: "Custom Amount",
@@ -129,7 +131,9 @@ export default flat({
129
131
  sub1: "Subscribe to {name}",
130
132
  sub2: "Subscribe to {name} and {count} more",
131
133
  then: "Then {subscription} {recurring}",
132
- free: "{count} days free",
134
+ meteredThen: "Then {recurring} based on usage",
135
+ metered: "{recurring} based on usage",
136
+ free: "{count} day{count > 1 ? 's' : ''} free",
133
137
  least: "continue with at least",
134
138
  completed: {
135
139
  payment: "Thanks for your purchase",
@@ -138,7 +142,7 @@ export default flat({
138
142
  donate: "Thanks for your support",
139
143
  tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
140
144
  },
141
- confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",
145
+ confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
142
146
  required: "Required",
143
147
  invalid: "Invalid",
144
148
  billing: {
@@ -178,13 +182,17 @@ export default flat({
178
182
  emptyItems: {
179
183
  title: "Nothing to show here",
180
184
  description: "Seems this checkoutSession is not configured properly"
181
- }
185
+ },
186
+ orderSummary: "Order Summary",
187
+ paymentDetails: "Payment Details",
188
+ productListTotal: "Includes {total} items"
182
189
  },
183
190
  customer: {
184
191
  payments: "Payment History",
185
192
  invoices: "Invoice History",
186
193
  details: "Details",
187
194
  summary: "Summary",
195
+ specifics: "Specifics",
188
196
  update: "Update Information",
189
197
  empty: "Seems you do not have any subscriptions or payments here",
190
198
  cancel: {
@@ -259,13 +267,17 @@ export default flat({
259
267
  renewSuccess: "You have successfully renewed the subscription",
260
268
  renewError: "Failed to renew the subscription",
261
269
  empty: "There are no invoices",
262
- next: "No invoices yet, next invoice will be generated on {date}"
270
+ next: "No invoices yet, next invoice will be generated on {date}",
271
+ invoiceNumber: "Invoice Number",
272
+ emptyList: "No Invoice"
263
273
  },
264
274
  payment: {
265
- empty: "There are no payments"
275
+ empty: "There are no payments",
276
+ emptyList: "No Payment"
266
277
  },
267
278
  refund: {
268
- empty: "There are no refunds"
279
+ empty: "There are no refunds",
280
+ emptyList: "No Refund"
269
281
  },
270
282
  subscriptions: {
271
283
  plan: "Plan",
@@ -298,5 +310,8 @@ export default flat({
298
310
  [RefundType.refund]: "Refund",
299
311
  [RefundType.stakeReturn]: "Stake Return"
300
312
  }
313
+ },
314
+ empty: {
315
+ records: "No matching records found"
301
316
  }
302
317
  });
@@ -2,7 +2,6 @@ export declare const translations: {
2
2
  zh: any;
3
3
  en: any;
4
4
  };
5
- export declare const replace: (template: string, data?: Record<string, any>) => string;
6
5
  export declare const createTranslator: ({ fallbackLocale }: {
7
6
  fallbackLocale?: string | undefined;
8
7
  }, langs?: any) => (key: string, locale?: string, data?: Record<string, any>) => string;
@@ -1,10 +1,19 @@
1
+ import { template } from "lodash";
1
2
  import en from "./en.js";
2
3
  import zh from "./zh.js";
3
4
  export const translations = {
4
5
  zh,
5
6
  en
6
7
  };
7
- export const replace = (template, data = {}) => template.replace(/{(\w*)}/g, (_, key) => data.hasOwnProperty(key) ? data[key] : "");
8
+ const replace = (t2, data = {}) => {
9
+ try {
10
+ const compiled = template(t2, { interpolate: /{([\s\S]+?)}/g, escape: /{([\s\S]+?)}/g });
11
+ return compiled(data);
12
+ } catch (e) {
13
+ console.error(`Error evaluating template: ${t2}`, e);
14
+ return "";
15
+ }
16
+ };
8
17
  export const createTranslator = ({ fallbackLocale = "en" }, langs = translations) => {
9
18
  return (key, locale = fallbackLocale, data = {}) => {
10
19
  if (!langs[locale] || !langs[locale][key]) {
package/es/locales/zh.js CHANGED
@@ -109,10 +109,12 @@ export default flat({
109
109
  subscription: "\u67E5\u770B\u8BA2\u9605",
110
110
  invoice: "\u67E5\u770B\u8D26\u5355"
111
111
  },
112
+ paymentRequired: "\u652F\u4ED8\u6570\u91CF",
112
113
  staking: {
113
114
  title: "\u8D28\u62BC\u6570\u91CF",
114
115
  tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
115
116
  },
117
+ stakingConfirm: "\u5728\u6B64\u652F\u4ED8\u4E2D\uFF0C\u8D28\u62BC\u91D1\u989D\u4E0E\u4EA7\u54C1\u8D39\u7528\u5206\u5F00",
116
118
  donation: {
117
119
  between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
118
120
  custom: "\u8F93\u5165\u91D1\u989D",
@@ -129,7 +131,9 @@ export default flat({
129
131
  sub1: "\u8BA2\u9605 {name}",
130
132
  sub2: "\u8BA2\u9605 {name} \u7B49{count}\u4E2A\u4EA7\u54C1",
131
133
  then: "\u7136\u540E {subscription} {recurring}",
132
- free: "{count} \u5929",
134
+ meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
135
+ metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
136
+ free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
133
137
  least: "\u81F3\u5C11",
134
138
  completed: {
135
139
  payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
@@ -138,7 +142,7 @@ export default flat({
138
142
  donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
139
143
  tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
140
144
  },
141
- confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
145
+ confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
142
146
  required: "\u5FC5\u586B\u9879",
143
147
  invalid: "\u65E0\u6548",
144
148
  billing: {
@@ -178,13 +182,17 @@ export default flat({
178
182
  emptyItems: {
179
183
  title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
180
184
  description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
181
- }
185
+ },
186
+ orderSummary: "\u8BA2\u5355\u6982\u89C8",
187
+ paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
188
+ productListTotal: "\u5305\u62EC {total} \u9879"
182
189
  },
183
190
  customer: {
184
191
  payments: "\u652F\u4ED8\u5386\u53F2",
185
192
  invoices: "\u8D26\u5355\u5386\u53F2",
186
193
  details: "\u8D26\u6237\u8BE6\u60C5",
187
194
  summary: "\u8BA1\u8D39\u6458\u8981",
195
+ specifics: "\u5177\u4F53\u4FE1\u606F",
188
196
  update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
189
197
  empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
190
198
  cancel: {
@@ -259,13 +267,17 @@ export default flat({
259
267
  renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
260
268
  renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
261
269
  empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
262
- next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210"
270
+ next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
271
+ invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
272
+ emptyList: "\u6CA1\u6709\u8D26\u5355"
263
273
  },
264
274
  payment: {
265
- empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
275
+ empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
276
+ emptyList: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
266
277
  },
267
278
  refund: {
268
- empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
279
+ empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55",
280
+ emptyList: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
269
281
  },
270
282
  subscriptions: {
271
283
  plan: "\u8BA2\u9605",
@@ -298,5 +310,8 @@ export default flat({
298
310
  [RefundType.refund]: "\u9000\u6B3E",
299
311
  [RefundType.stakeReturn]: "\u9000\u62BC\u91D1"
300
312
  }
313
+ },
314
+ empty: {
315
+ records: "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
301
316
  }
302
317
  });
@@ -3,7 +3,7 @@ import { Button, Link, Stack, Typography } from "@mui/material";
3
3
  function getHeightStyle(mode) {
4
4
  switch (mode) {
5
5
  case "standalone":
6
- return { height: "100vh" };
6
+ return { height: "100vh", maxHeight: "100%" };
7
7
  default:
8
8
  return { height: "auto", minHeight: 200 };
9
9
  }
@@ -13,7 +13,7 @@ export default function PaymentError({ title, description, button, mode }) {
13
13
  return /* @__PURE__ */ jsx(Stack, { sx: heightStyle, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
14
14
  /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
15
15
  /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
16
- /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })
16
+ /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", sx: { color: "text.link" }, component: Link, href: window.blocklet?.appUrl, children: button })
17
17
  ] }) });
18
18
  }
19
19
  PaymentError.defaultProps = {
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Typography } from "@mui/material";
3
3
  export default function CheckoutFooter({ ...props }) {
4
- return /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", fontSize: 12, ...props, children: [
4
+ return /* @__PURE__ */ jsxs(Typography, { color: "text.lighter", fontSize: 12, ...props, children: [
5
5
  "Powered by",
6
6
  " ",
7
7
  /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold", fontSize: 12 }, children: "ArcBlock" })
@@ -1,7 +1,14 @@
1
1
  /// <reference types="react" />
2
+ import { SxProps } from '@mui/material';
2
3
  type Props = {
3
4
  mode: string;
4
5
  stripe: boolean;
6
+ sx?: SxProps;
5
7
  };
6
- export default function AddressForm({ mode, stripe }: Props): import("react").JSX.Element | null;
7
- export {};
8
+ declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
9
+ declare namespace AddressForm {
10
+ var defaultProps: {
11
+ sx: {};
12
+ };
13
+ }
14
+ export default AddressForm;