payment-kit 1.16.3 → 1.16.5

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

@@ -220,14 +220,16 @@ export default function PricingTableDetail(props: { id: string }) {
                           sort: false,
                           customBodyRenderLite: (_: any, index: number) => {
                             const item = data.items[index] as any;
+                            const itemCurrency = data?.currency || settings.baseCurrency;
                             return (
-                              <Link to={`/admin/products/${item.product_id}`}>
+                              <Link
+                                to={`/admin/products/${item.product_id}?currency_id=${itemCurrency?.id}&price_id=${item.price.id}`}>
                                 <InfoCard
                                   name={item.product.name}
                                   description={formatProductPrice(
                                     // @ts-ignore
                                     { ...item.product, prices: [item.price] },
-                                    settings.baseCurrency,
+                                    itemCurrency,
                                     locale
                                   )}
                                   logo={item.product.images[0]}

package/src/pages/admin/products/products/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, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined } from '@mui/icons-material';
 import { Box, Button, Divider, Typography } from '@mui/material';
 import { cloneDeep } from 'lodash';
@@ -83,9 +83,12 @@ export default function ProductsCreate() {
                   if (expanded) {
                     return t('admin.price.detail');
                   }
+                  const priceItem = getPrice(index);
+                  const currency =
+                    findCurrency(settings.paymentMethods, priceItem?.currency_id || '') || settings.baseCurrency;
 
                   // @ts-ignore
-                  return formatPrice(getPrice(index), settings.baseCurrency, getValues().unit_label, 1, false, locale);
+                  return formatPrice(priceItem as any, currency, getValues().unit_label, 1, false, locale);
                 }}>
                 <PriceForm prefix={`prices.${index}`} />
               </Collapse>

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

@@ -1,8 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined } from '@mui/icons-material';
+import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
 import {
   Alert,
   AlertTitle,
@@ -13,6 +13,7 @@ import {
   Divider,
   Grid,
   Stack,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/system';
@@ -114,6 +115,9 @@ export default function ProductDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
+  const defaultCurrency =
+    findCurrency(settings.paymentMethods, data?.default_price?.currency_id) || settings.baseCurrency;
+
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -173,7 +177,7 @@ export default function ProductDetail(props: { id: string }) {
                   {data.name}
                 </Typography>
                 <Typography variant="subtitle1" color="text.lighter">
-                  {formatProductPrice(data as any, settings.baseCurrency, locale)}
+                  {formatProductPrice(data as any, defaultCurrency, locale)}
                 </Typography>
               </Stack>
             </Stack>
@@ -372,7 +376,25 @@ export default function ProductDetail(props: { id: string }) {
         {isMobile && <Divider />}
         <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
-            <SectionHeader title={t('admin.product.cross_sell.title')} />
+            <SectionHeader
+              title={
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontSize: {
+                        xs: '18px',
+                        md: '1.25rem',
+                      },
+                    }}>
+                    {t('admin.product.cross_sell.title')}
+                  </Typography>
+                  <Tooltip title={t('admin.product.currencyNotAligned')}>
+                    <InfoOutlined sx={{ color: 'text.lighter' }} fontSize="small" />
+                  </Tooltip>
+                </Stack>
+              }
+            />
             <Box className="section-body">
               <ProductCrossSell data={data} onChange={runAsync} />
             </Box>

package/src/pages/admin/products/products/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 { TProductExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -75,11 +75,13 @@ export default function ProductsList() {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TProductExpanded;
+          const currency =
+            findCurrency(settings.paymentMethods, item.prices[0]?.currency_id ?? '') || settings.baseCurrency;
           return (
             <Link to={`/admin/products/${item.id}`}>
               <InfoCard
                 name={item.name}
-                description={formatProductPrice(item as any, settings.baseCurrency, locale)}
+                description={formatProductPrice(item as any, currency!, locale)}
                 logo={item.images[0]}
               />
             </Link>