payment-kit 1.16.3 → 1.16.5

package/src/components/price/currency-select.tsx

@@ -5,35 +5,88 @@ import { ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/materia
 import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
+import { flatten } from 'lodash';
 import { getSupportedPaymentMethods } from '../../libs/util';
 import Currency from '../currency';
 
 type Props = {
-  mode: LiteralUnion<'waiting' | 'selecting', string>;
+  mode: LiteralUnion<'waiting' | 'selecting' | 'selected', string>;
   hasSelected: (currency: any) => boolean;
   onSelect: (currencyId: string) => void;
+  value: string;
+  width?: string;
+  disabled?: boolean;
 };
 
-export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+CurrencySelect.defaultProps = {
+  width: '100%',
+  disabled: false,
+};
+
+export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect, value, width, disabled }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
   const handleSelect = (e: any) => {
-    setMode('waiting');
+    if (disabled) {
+      return;
+    }
+    setMode(initialMode);
     onSelect(e.target.value);
   };
 
+  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+
+  const selectedCurrency = currencies.find((x) => x.id === value);
+
+  const selectedPaymentMethod = settings.paymentMethods.find((x) => x.payment_currencies.some((c) => c.id === value));
+
+  const extraCurrencies = getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x));
+
+  const canSelect = extraCurrencies.length > 0 && !disabled;
+
+  if (mode === 'selected') {
+    return (
+      <Typography
+        fontSize="12px"
+        onClick={() => {
+          if (canSelect) {
+            setMode('selecting');
+          }
+        }}
+        sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
+        {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+      </Typography>
+    );
+  }
+
+  if (!canSelect) {
+    return null;
+  }
+
   if (mode === 'selecting') {
     return (
-      <Select value="" sx={{ width: 260 }} size="small" onChange={handleSelect}>
-        {getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x)).map((method) => [
+      <Select
+        size="small"
+        value={value}
+        renderValue={() => (
+          <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
+            {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+          </Typography>
+        )}
+        onChange={handleSelect}
+        open
+        sx={{ width }}
+        disabled={disabled}
+        onClose={() => setMode(initialMode)}>
+        {extraCurrencies.map((method) => [
           <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
             {method.name}
           </ListSubheader>,
           ...method.payment_currencies.map((currency) => (
             <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }}>
+              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }} gap={2}>
                 <Currency logo={currency.logo} name={currency.name} />
                 <Typography fontWeight="bold">{currency.symbol}</Typography>
               </Stack>

package/src/components/price/form.tsx

@@ -118,13 +118,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const isCustomInterval = useWatch({ control, name: getFieldName('recurring.interval_config') }) === 'month_2';
   const model = useWatch({ control, name: getFieldName('model') });
   const intervalSelectValue = useWatch({ control, name: getFieldName('recurring.interval') });
+  const defaultCurrencyId = useWatch({ control, name: getFieldName('currency_id') });
+  const defaultCurrency = findCurrency(settings.paymentMethods, defaultCurrencyId);
   const quantityPositive = (v: number | undefined) => !v || v.toString().match(/^(0|[1-9]\d*)$/);
   const intervalCountPositive = (v: number) => Number.isInteger(Number(v)) && v > 0;
 
-  const basePaymentMethod = settings.paymentMethods.find((x) =>
-    x.payment_currencies.some((c) => c.id === settings.baseCurrency.id)
-  );
-
   const isLocked = priceLocked && window.blocklet?.PAYMENT_CHANGE_LOCKED_PRICE !== '1';
 
   const validateAmount = (v: number, currency: { maximum_precision?: number }) => {
@@ -143,6 +141,20 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
     trigger(getFieldName('recurring.interval_config'));
   };
 
+  const handleCurrencyChange = (index: number, currencyId: string) => {
+    const update = {
+      currency_id: currencyId,
+    };
+    // @ts-ignore
+    if (currencies?.fields?.[index]?.currency) {
+      // @ts-ignore
+      update.currency = findCurrency(settings.paymentMethods, currencyId);
+    }
+    currencies.update(index, {
+      ...currencies.fields[index],
+      ...update,
+    });
+  };
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
@@ -176,7 +188,13 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           control={control}
           rules={{
             required: t('admin.price.unit_amount.required'),
-            validate: (v) => validateAmount(v, settings.baseCurrency),
+            validate: (v) => {
+              const hasStripError = !stripeCurrencyValidate(v, defaultCurrency);
+              if (hasStripError) {
+                return t('admin.price.unit_amount.stripeTip');
+              }
+              return validateAmount(v, defaultCurrency ?? {});
+            },
           }}
           disabled={isLocked}
           render={({ field }) => (
@@ -201,14 +219,33 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position="end">
-                      {settings.baseCurrency.symbol} ({basePaymentMethod?.name})
+                      <CurrencySelect
+                        mode="selected"
+                        hasSelected={(currency) =>
+                          currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                          currency.id === defaultCurrencyId
+                        }
+                        onSelect={(currencyId) => {
+                          const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
+                          if (index > -1) {
+                            // @ts-ignore
+                            handleCurrencyChange(index, currencyId);
+                          }
+                          setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
+                            shouldValidate: true,
+                          });
+                          setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
+                        }}
+                        value={defaultCurrencyId}
+                        disabled={isLocked}
+                      />
                     </InputAdornment>
                   ),
                 }}
                 onChange={(e) => {
                   const { value } = e.target;
                   field.onChange(value);
-                  const index = currencies.fields.findIndex((x: any) => x.currency_id === settings.baseCurrency.id);
+                  const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
                   if (index === -1) {
                     return;
                   }
@@ -244,7 +281,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
       {hasMoreCurrency(settings.paymentMethods) && (
         <Stack direction="column" spacing={2}>
           {currencies.fields.map((item: any, index: number) => {
-            if (item.currency_id === settings.baseCurrency.id) {
+            if (item.currency_id === defaultCurrencyId) {
               return null;
             }
             const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
@@ -277,7 +314,24 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                         InputProps={{
                           endAdornment: (
                             <InputAdornment position="end">
-                              {currency?.symbol} ({currency?.paymentMethod?.name})
+                              <CurrencySelect
+                                mode="selected"
+                                hasSelected={(c) =>
+                                  currencies.fields.some((x: any) => x.currency_id === c.id) ||
+                                  c.id === defaultCurrencyId
+                                }
+                                onSelect={(currencyId) => {
+                                  const cIndex = currencies.fields.findIndex(
+                                    (x: any) => x.currency_id === currency?.id
+                                  );
+                                  if (cIndex > -1) {
+                                    // @ts-ignore
+                                    handleCurrencyChange(cIndex, currencyId);
+                                  }
+                                }}
+                                value={currency?.id!}
+                                disabled={isLocked}
+                              />
                             </InputAdornment>
                           ),
                         }}
@@ -285,9 +339,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     );
                   }}
                 />
-                <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
-                  <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-                </IconButton>
+                {!isLocked && (
+                  <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
+                    <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                  </IconButton>
+                )}
               </Stack>
             );
           })}
@@ -295,10 +351,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             <CurrencySelect
               mode="waiting"
               hasSelected={(currency) =>
-                currencies.fields.some((x: any) => x.currency_id === currency.id) ||
-                currency.id === settings.baseCurrency.id
+                currencies.fields.some((x: any) => x.currency_id === currency.id) || currency.id === defaultCurrencyId
               }
               onSelect={(currencyId) => currencies.append({ currency_id: currencyId, unit_amount: 0 })}
+              value=""
+              width="260px"
             />
           )}
         </Stack>

package/src/components/price/upsell-select.tsx

@@ -92,7 +92,7 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
         </MenuItem>
         {filteredData.map((x) => (
           <MenuItem key={x.id} value={x.id}>
-            {formatPrice(x, x.currency)}
+            {formatPrice(x, price.currency || x.currency)}
           </MenuItem>
         ))}
       </Select>

package/src/components/price/upsell.tsx

@@ -1,5 +1,5 @@
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPriceExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
@@ -44,10 +44,12 @@ export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange:
     return <CircularProgress />;
   }
 
+  const defaultCurrency = findCurrency(settings.paymentMethods, data?.currency_id || '') || settings.baseCurrency;
+
   if (data.upsell?.upsells_to_id) {
     return (
       <Stack spacing={1} direction="row" alignItems="center">
-        <Typography>{formatPrice(data.upsell.upsells_to, settings.baseCurrency)}</Typography>
+        <Typography>{formatPrice(data.upsell.upsells_to, defaultCurrency)}</Typography>
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>
           <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
         </IconButton>

package/src/components/pricing-table/payment-settings.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct } from '@blocklet/payment-types';
 import { Box, Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
@@ -125,7 +125,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
               fullWidth
               size="small"
               error={!!get(errors, field.name)}
-              helperText={get(errors, field.name)?.message || t('admin.paymentLink.customMessageTip')}
+              helperText={(get(errors, field.name)?.message as string) || t('admin.paymentLink.customMessageTip')}
               inputProps={{
                 maxLength: 200,
               }}
@@ -217,11 +217,14 @@ export function ProductPaymentSettings({ product, prices }: { product: TProduct;
   const { settings } = usePaymentContext();
   const { products } = useProductsContext();
   const [current, setCurrent] = useState(prices[0]?.id);
-  const tabs = prices.map((x: any) => ({
-    value: x.id,
-    label: formatPrice(getPriceFromProducts(products, x.price_id) as TPrice, settings.baseCurrency),
-    component: <PricePaymentSettings index={x.index} />,
-  }));
+  const tabs = prices.map((x: any) => {
+    const currency = findCurrency(settings.paymentMethods, x.currency_id);
+    return {
+      value: x.id,
+      label: formatPrice(getPriceFromProducts(products, x.price_id) as TPrice, currency || settings.baseCurrency),
+      component: <PricePaymentSettings index={x.index} />,
+    };
+  });
 
   return (
     <Box sx={{ px: 2, py: 0, border: '1px solid #eee', borderRadius: 2 }}>

package/src/components/pricing-table/price-item.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { FormInput, findCurrency, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { Box, Checkbox, FormControlLabel, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
@@ -23,10 +23,11 @@ export default function PriceItem({ prefix, price, onRemove }: Props) {
   } = useFormContext();
   const includeFreeTrial = useWatch({ control, name: getFieldName('include_free_trial') });
 
+  const currency = findCurrency(settings.paymentMethods, price?.currency_id ?? '') || settings.baseCurrency;
   return (
     <Box sx={{ width: '100%' }}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
-        <Typography>{formatPrice(price, settings.baseCurrency)}</Typography>
+        <Typography>{formatPrice(price, currency!)}</Typography>
         <IconButton size="small" onClick={onRemove}>
           <DeleteOutlineOutlined color="inherit" sx={{ opacity: 0.75 }} />
         </IconButton>

package/src/components/pricing-table/product-settings.tsx

@@ -41,9 +41,11 @@ export default function PricingTableProductSettings({
     } else if (priceId) {
       const product = getProductByPriceId(products, priceId);
       if (product) {
+        const price = product?.prices.find((x) => x.id === priceId);
         items.append({
           price_id: priceId,
           product_id: product.id,
+          currency_id: price?.currency_id,
           is_highlight: false,
           highlight_text: 'popular',
           adjustable_quantity: {

package/src/components/product/cross-sell-select.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { FormControl, MenuItem, Select, Stack, Typography } from '@mui/material';
 
 import { useProductsContext } from '../../contexts/products';
-import { formatProductPrice } from '../../libs/util';
+import { formatProductPrice, isProductCurrenciesMatched } from '../../libs/util';
 import InfoCard from '../info-card';
 
 type Props = {
@@ -27,6 +27,9 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
     }
   };
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id || '') || settings.baseCurrency;
+
   return (
     <FormControl error={!valid} sx={{ width: '100%' }}>
       <Select
@@ -41,12 +44,12 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
           </Stack>
         </MenuItem>
         {products
-          .filter((x) => x.id !== data.id)
+          .filter((x) => x.id !== data.id && isProductCurrenciesMatched(x, data))
           .map((x: TProductExpanded) => (
             <MenuItem key={x.id} value={x.id}>
               <InfoCard
                 name={x.name}
-                description={formatProductPrice(x as any, settings.baseCurrency, locale)}
+                description={formatProductPrice(x as any, defaultCurrency, locale)}
                 logo={x.images[0]}
               />
             </MenuItem>

package/src/components/product/cross-sell.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
@@ -58,13 +58,16 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
     return <CircularProgress />;
   }
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id || '') || settings.baseCurrency;
+
   if (data.cross_sell?.cross_sells_to_id) {
     const to = data.cross_sell.cross_sells_to;
     return (
       <Stack spacing={1} direction="row" alignItems="center">
         <InfoCard
           name={to.name}
-          description={formatProductPrice(to as any, settings.baseCurrency, locale)}
+          description={formatProductPrice(to as any, defaultCurrency, locale)}
           logo={to.images[0]}
         />
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>

package/src/components/section/header.tsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 
 type Props = {
-  title: string;
+  title: string | ReactNode;
   children?: ReactNode;
   mb?: number;
   mt?: number;
@@ -25,7 +25,8 @@ export default function SectionHeader(props: Props) {
             xs: '18px',
             md: '1.25rem',
           },
-        }}>
+        }}
+        component="div">
         {props.title}
       </Typography>
       {props.children}

package/src/components/subscription/list.tsx

@@ -29,6 +29,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscript
 
 type SearchProps = {
   status?: string;
+  price_id?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
@@ -75,6 +76,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       customer_id,
       pageSize: defaultPageSize,
       page: 1,
+      price_id: '',
     },
   });
 
@@ -213,6 +215,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-metadata': text,
                 'like-description': text,
@@ -222,6 +225,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
             });
           } else {
             setSearch({
+              ...search!,
               status: '',
               customer_id,
               pageSize: 100,

package/src/pages/admin/products/links/create.tsx

@@ -85,6 +85,7 @@ export default function CreatePaymentLink() {
     'subscription_data',
     'billing_address_collection',
     'phone_number_collection',
+    'currency_id',
   ]);
 
   useEffect(() => {

package/src/pages/admin/products/links/detail.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import { api, formatError, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Grid, Stack, Typography } from '@mui/material';
@@ -96,7 +96,8 @@ export default function PaymentLinkDetail(props: { id: string }) {
     }
   };
 
-  const result = formatPaymentLinkPricing(data, settings.baseCurrency, locale);
+  const currency = findCurrency(settings.paymentMethods, data?.currency_id ?? '');
+  const result = formatPaymentLinkPricing(data, currency!, locale);
 
   const handleEditMetadata = () => {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
@@ -233,14 +234,17 @@ export default function PaymentLinkDetail(props: { id: string }) {
                           sort: false,
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.line_items[index] as TLineItemExpanded;
+                            const itemCurrency =
+                              currency || findCurrency(settings.paymentMethods, item?.price?.currency_id ?? '');
                             return (
-                              <Link to={`/admin/products/${item.price.product_id}`}>
+                              <Link
+                                to={`/admin/products/${item.price.product_id}?currency_id=${itemCurrency?.id}&price_id=${item.price.id}`}>
                                 <InfoCard
                                   name={item.price.product.name}
                                   description={formatProductPrice(
                                     // @ts-ignore
                                     { ...item.price.product, prices: [item.price] },
-                                    settings.baseCurrency,
+                                    itemCurrency,
                                     locale
                                   )}
                                   logo={item.price.product.images[0]}
@@ -253,10 +257,12 @@ export default function PaymentLinkDetail(props: { id: string }) {
                       {
                         label: t('common.quantity'),
                         name: 'quantity',
+                        align: 'right',
                       },
                       {
                         label: t('admin.paymentLink.adjustable'),
                         name: 'price_id',
+                        align: 'right',
                         options: {
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.line_items[index];

package/src/pages/admin/products/links/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import { Status, api, formatTime, usePaymentContext, Table, findCurrency } from '@blocklet/payment-react';
 import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
@@ -97,7 +97,8 @@ function PaymentLinks() {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentLinkExpanded;
-          const result = formatPaymentLinkPricing(item, settings.baseCurrency, locale);
+          const currency = findCurrency(settings.paymentMethods, item?.currency_id ?? '') || settings.baseCurrency;
+          const result = formatPaymentLinkPricing(item, currency!, locale);
           return <Link to={`/admin/products/${item.id}`}>{result.priceDisplay}</Link>;
         },
       },

package/src/pages/admin/products/prices/list.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, formatPrice, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
+import {
+  Status,
+  formatPrice,
+  formatTime,
+  Table,
+  getQueryParams,
+  usePaymentContext,
+  findCurrency,
+} from '@blocklet/payment-react';
 import { LockOutlined } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
@@ -12,6 +20,7 @@ import PriceActions from './actions';
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
+  const query = getQueryParams(window.location.href);
 
   const columns = [
     {
@@ -22,16 +31,22 @@ export default function PricesList({ product, onChange }: { product: Product; on
         sort: false,
         customBodyRenderLite: (_: any, index: number) => {
           const price = product.prices[index] as any;
+          const showHighlight = query.price_id === price.id && query.currency_id;
+          const priceCurrency = showHighlight
+            ? findCurrency(settings.paymentMethods, query.currency_id || '')
+            : price.currency;
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
-              <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
+              <Stack direction="row" alignItems="center" spacing={1}>
                 {price.locked && (
                   <Tooltip title={t('admin.price.locked')}>
                     <LockOutlined sx={{ color: 'text.secondary' }} />
                   </Tooltip>
                 )}
-                <Typography component="span">
-                  {formatPrice(price, settings.baseCurrency, '', 1, true, locale)}
+                <Typography
+                  component="span"
+                  sx={{ backgroundColor: showHighlight ? '#FFF9C4' : 'transparent', whiteSpace: 'nowrap' }}>
+                  {formatPrice(price, priceCurrency || price.currency, '', 1, true, locale)}
                 </Typography>
                 <Typography component="span">
                   {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TPricingTable } from '@blocklet/payment-types';
 import { AddOutlined, Fullscreen, FullscreenExit } from '@mui/icons-material';
 import { Box, Button, Stack, Typography } from '@mui/material';
@@ -27,6 +27,7 @@ export default function CreatePricingTable() {
   const [stashed, setStashed] = useState(0);
   const fullScreenRef = useRef(null);
   const [errors, triggerError] = useSetState({});
+  const { settings } = usePaymentContext();
 
   const methods = useForm<TPricingTable & any>({
     shouldUnregister: false,
@@ -42,11 +43,19 @@ export default function CreatePricingTable() {
       highlight_product_id: '',
       highlight_text: 'popular',
       items: [],
-      metadata: [], // FIXME:
+      metadata: [],
+      currency_id: settings.baseCurrency.id,
     },
   });
 
-  const changes = methods.watch(['items', 'branding_settings', 'highlight', 'highlight_product_id', 'highlight_text']);
+  const changes = methods.watch([
+    'items',
+    'branding_settings',
+    'highlight',
+    'highlight_product_id',
+    'highlight_text',
+    'currency_id',
+  ]);
 
   useEffect(() => {
     api.post('/api/pricing-tables/stash', methods.getValues()).then(() => {
@@ -115,7 +124,7 @@ export default function CreatePricingTable() {
           <Stack height="92vh" spacing={2} direction="row">
             <Box flex={2} sx={{ borderRight: '1px solid #eee' }} position="relative">
               <Stack height="100%" spacing={2}>
-                <Box overflow="auto" sx={{ pr: 2 }}>
+                <Box overflow="auto" sx={{ pr: 2, pb: 8 }}>
                   {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
                   {step === 1 && <PricingTablePaymentSettings />}
                   {/* {step === 2 && <PricingTableCustomerSettings />} */}