@blocklet/payment-react 1.13.168 → 1.13.169

package/es/history/mini-invoice/list.js

@@ -45,7 +45,7 @@ export default function MiniInvoiceList() {
       value: /* @__PURE__ */ jsx(Status, { label: subscription.status, color: getSubscriptionStatusColor(subscription.status) })
     }
   ];
-  if (subscription.status === "active" || subscription.status === "trailing") {
+  if (subscription.status === "active" || subscription.status === "trialing") {
     infoList.push({
       name: t("payment.customer.subscriptions.nextInvoice"),
       value: /* @__PURE__ */ jsx(

package/es/payment/index.js

@@ -6,7 +6,7 @@ import { Box, Fade, Stack } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
 import api from "../api.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../util.js";
@@ -138,7 +138,7 @@ export function PaymentInner({
       )
     }
   });
-  const currencyId = methods.watch("payment_currency");
+  const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const onUpsell = async (from, to) => {
     try {

package/es/payment/summary.js

@@ -132,7 +132,7 @@ export default function PaymentSummary({
           }
         )
       },
-      x.price_id
+      `${x.price_id}-${currency.id}`
     )) }),
     data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
       Stack,

package/es/util.js

@@ -120,7 +120,10 @@ export function getPriceUintAmountByCurrency(price, currency) {
   if (option) {
     return option.unit_amount;
   }
-  return price.unit_amount;
+  if (price.currency_id === currency.id) {
+    return price.unit_amount;
+  }
+  throw new Error(`Currency option ${currency.id} not configured for price ${price.id}`);
 }
 export function getPriceCurrencyOptions(price) {
   if (Array.isArray(price.currency_options)) {

package/lib/history/mini-invoice/list.js

@@ -62,7 +62,7 @@ function MiniInvoiceList() {
       color: (0, _util2.getSubscriptionStatusColor)(subscription.status)
     })
   }];
-  if (subscription.status === "active" || subscription.status === "trailing") {
+  if (subscription.status === "active" || subscription.status === "trialing") {
     infoList.push({
       name: t("payment.customer.subscriptions.nextInvoice"),
       value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/payment/index.js

@@ -162,7 +162,11 @@ function PaymentInner({
       })
     }
   });
-  const currencyId = methods.watch("payment_currency");
+  const currencyId = (0, _reactHookForm.useWatch)({
+    control: methods.control,
+    name: "payment_currency",
+    defaultValue: defaultCurrencyId
+  });
   const currency = (0, _util.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
   const onUpsell = async (from, to) => {
     try {

package/lib/payment/summary.js

@@ -175,7 +175,7 @@ function PaymentSummary({
             onClick: handleCancelCrossSell,
             children: t("payment.checkout.cross_sell.remove")
           })
-        }, x.price_id))
+        }, `${x.price_id}-${currency.id}`))
       }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
         in: true,
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {

package/lib/util.js

@@ -170,7 +170,10 @@ function getPriceUintAmountByCurrency(price, currency) {
   if (option) {
     return option.unit_amount;
   }
-  return price.unit_amount;
+  if (price.currency_id === currency.id) {
+    return price.unit_amount;
+  }
+  throw new Error(`Currency option ${currency.id} not configured for price ${price.id}`);
 }
 function getPriceCurrencyOptions(price) {
   if (Array.isArray(price.currency_options)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.168",
+  "version": "1.13.169",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.168",
+    "@blocklet/payment-types": "1.13.169",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "ba4ab8d0dda39aa44636e62f9a4c56e2295432b7"
+  "gitHead": "77c7dea2d2c9dda8754c29fec007ffbc4ba0d442"
 }

package/src/history/mini-invoice/list.tsx

@@ -64,7 +64,7 @@ export default function MiniInvoiceList() {
     },
   ];
 
-  if (subscription.status === 'active' || subscription.status === 'trailing') {
+  if (subscription.status === 'active' || subscription.status === 'trialing') {
     infoList.push({
       name: t('payment.customer.subscriptions.nextInvoice'),
       value: (

package/src/payment/index.tsx

@@ -12,7 +12,7 @@ import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { LiteralUnion } from 'type-fest';
 
 import api from '../api';
@@ -173,7 +173,7 @@ export function PaymentInner({
     },
   });
 
-  const currencyId = methods.watch('payment_currency') as string;
+  const currencyId = useWatch({ control: methods.control, name: 'payment_currency', defaultValue: defaultCurrencyId });
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
     settings.baseCurrency;

package/src/payment/summary.tsx

@@ -143,7 +143,7 @@ export default function PaymentSummary({
         <Stack spacing={2}>
           {items.map((x: TLineItemExpanded) => (
             <ProductItem
-              key={x.price_id}
+              key={`${x.price_id}-${currency.id}`}
               item={x}
               items={items}
               trialInDays={trialInDays}

package/src/util.ts

@@ -192,7 +192,10 @@ export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCu
     return option.unit_amount;
   }
 
-  return price.unit_amount;
+  if (price.currency_id === currency.id) {
+    return price.unit_amount;
+  }
+  throw new Error(`Currency option ${currency.id} not configured for price ${price.id}`);
 }
 
 export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {