payment-kit 1.18.18 → 1.18.20

package/src/pages/admin/payments/payouts/detail.tsx

@@ -32,6 +32,7 @@ import MetadataList from '../../../../components/metadata/list';
 import SectionHeader from '../../../../components/section/header';
 import { getAppInfo, getCustomerProfileUrl, goBackOrFallback } from '../../../../libs/util';
 import InfoCard from '../../../../components/info-card';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (
   id: string
@@ -284,23 +285,34 @@ export default function PayoutDetail(props: { id: string }) {
           },
         }}>
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
-          <Box className="section">
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
-            <Stack
+            <InfoRowGroup
               sx={{
                 display: 'grid',
                 gridTemplateColumns: {
                   xs: 'repeat(1, 1fr)',
-                  sm: 'repeat(1, 1fr)',
-                  md: 'repeat(2, 1fr)',
-                  lg: 'repeat(3, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
                 },
-                gap: {
-                  xs: 0,
-                  md: 2,
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
                 },
               }}>
-              <InfoRow label={t('common.amount')} value={total} direction={InfoDirection} alignItems={InfoAlignItems} />
               <InfoRow
                 label={t('common.status')}
                 value={
@@ -318,34 +330,13 @@ export default function PayoutDetail(props: { id: string }) {
                     )}
                   </Stack>
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
-              <InfoRow
-                label={t('common.description')}
-                value={data.description}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.updatedAt')}
-                value={formatTime(data.updated_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.customer')}
-                value={renderCustomer()}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-            </Stack>
+              <InfoRow label={t('common.amount')} value={total} />
+              <InfoRow label={t('common.customer')} value={renderCustomer()} />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow label={t('common.description')} value={data.description} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

package/src/pages/admin/payments/refunds/detail.tsx

@@ -31,6 +31,7 @@ import MetadataList from '../../../../components/metadata/list';
 import RefundActions from '../../../../components/refund/actions';
 import SectionHeader from '../../../../components/section/header';
 import { goBackOrFallback } from '../../../../libs/util';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TRefundExpanded> => {
   return api.get(`/api/refunds/${id}`).then((res) => res.data);
@@ -207,28 +208,34 @@ export default function RefundDetail(props: { id: string }) {
           },
         }}>
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
-          <Box className="section">
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
-            <Stack
+            <InfoRowGroup
               sx={{
                 display: 'grid',
                 gridTemplateColumns: {
                   xs: 'repeat(1, 1fr)',
-                  sm: 'repeat(1, 1fr)',
-                  md: 'repeat(2, 1fr)',
-                  lg: 'repeat(3, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
                 },
-                gap: {
-                  xs: 0,
-                  md: 2,
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
                 },
               }}>
-              <InfoRow
-                label={t('common.amount')}
-                value={amount}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
               <InfoRow
                 label={t('common.status')}
                 value={
@@ -255,34 +262,13 @@ export default function RefundDetail(props: { id: string }) {
                     )}
                   </Stack>
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.type')}
-                value={t(`refund.type.${data.type}`)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
-              <InfoRow
-                label={t('common.description')}
-                value={data.description}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.updatedAt')}
-                value={formatTime(data.updated_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-            </Stack>
+              <InfoRow label={t('common.amount')} value={amount} />
+              <InfoRow label={t('common.type')} value={t(`refund.type.${data.type}`)} />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow label={t('common.description')} value={data.description} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

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

@@ -22,14 +22,12 @@ import AddPrice from '../../../../components/product/add-price';
 import SectionHeader from '../../../../components/section/header';
 import { formatPaymentLinkPricing, formatProductPrice, goBackOrFallback } from '../../../../libs/util';
 import InfoMetric from '../../../../components/info-metric';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TPaymentLinkExpanded> => {
   return api.get(`/api/payment-links/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function PaymentLinkDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
@@ -296,77 +294,54 @@ export default function PaymentLinkDetail(props: { id: string }) {
               <Divider />
               <Box className="section">
                 <SectionHeader title={t('admin.details')} />
-                <Stack
+                <InfoRowGroup
                   sx={{
                     display: 'grid',
                     gridTemplateColumns: {
                       xs: 'repeat(1, 1fr)',
-                      sm: 'repeat(1, 1fr)',
-                      md: 'repeat(2, 1fr)',
-                      lg: 'repeat(3, 1fr)',
+                      xl: 'repeat(2, 1fr)',
+                    },
+                    '@container (min-width: 1000px)': {
+                      gridTemplateColumns: 'repeat(2, 1fr)',
                     },
-                    gap: {
-                      xs: 0,
-                      md: 2,
+                    '.info-row-wrapper': {
+                      gap: 1,
+                      flexDirection: {
+                        xs: 'column',
+                        xl: 'row',
+                      },
+                      alignItems: {
+                        xs: 'flex-start',
+                        xl: 'center',
+                      },
+                      '@container (min-width: 1000px)': {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                      },
                     },
                   }}>
                   <InfoRow
-                    sizes={[1, 1]}
                     label={t('admin.paymentLink.allowPromotionCodes')}
                     value={data.allow_promotion_codes ? t('common.yes') : t('common.no')}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('admin.paymentLink.requireBillingAddress')}
-                    value={data.billing_address_collection ? t('common.yes') : t('common.no')}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('admin.paymentLink.requirePhoneNumber')}
-                    value={data.phone_number_collection?.enabled ? t('common.yes') : t('common.no')}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
                   />
                   <InfoRow
-                    sizes={[1, 1]}
                     label={t('admin.paymentLink.includeFreeTrial')}
                     value={data.subscription_data?.trial_period_days ? t('common.yes') : t('common.no')}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('admin.paymentLink.showConfirmPage')}
-                    value={data.after_completion?.type}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('admin.paymentLink.mintNft')}
-                    value={data.nft_mint_settings?.factory || ''}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
                   />
                   <InfoRow
-                    sizes={[1, 1]}
-                    label={t('common.createdAt')}
-                    value={formatTime(data.created_at)}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
+                    label={t('admin.paymentLink.requireBillingAddress')}
+                    value={data.billing_address_collection ? t('common.yes') : t('common.no')}
                   />
                   <InfoRow
-                    sizes={[1, 1]}
-                    label={t('common.updatedAt')}
-                    value={formatTime(data.updated_at)}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
+                    label={t('admin.paymentLink.requirePhoneNumber')}
+                    value={data.phone_number_collection?.enabled ? t('common.yes') : t('common.no')}
                   />
-                </Stack>
+
+                  <InfoRow label={t('admin.paymentLink.showConfirmPage')} value={data.after_completion?.type} />
+                  <InfoRow label={t('admin.paymentLink.mintNft')} value={data.nft_mint_settings?.factory || ''} />
+                  <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+                  <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+                </InfoRowGroup>
               </Box>
               <Divider />
               <Box className="section">

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

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, formatTime, Table, useMobile } from '@blocklet/payment-react';
-import type { TPrice, TPriceExpanded } from '@blocklet/payment-types';
+import { api, formatError, formatPrice, formatRecurring, formatTime, Table, useMobile } from '@blocklet/payment-react';
+import type { PriceRecurring, TPrice, TPriceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -13,6 +13,7 @@ import Currency from '../../../../components/currency';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
+import InfoRowGroup from '../../../../components/info-row-group';
 import MetadataEditor from '../../../../components/metadata/editor';
 import MetadataList from '../../../../components/metadata/list';
 import PriceUpsell from '../../../../components/price/upsell';
@@ -25,9 +26,6 @@ const fetchData = (id: string): Promise<TPriceExpanded> => {
   return api.get(`/api/prices/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function PriceDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -85,6 +83,16 @@ export default function PriceDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
+  const renderType = (type: string) => {
+    if (type === 'recurring') {
+      return t('admin.price.types.recurring');
+    }
+    if (type === 'one_time') {
+      return t('admin.price.types.onetime');
+    }
+    return type;
+  };
+
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -204,7 +212,7 @@ export default function PriceDetail(props: { id: string }) {
           },
         }}>
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
-          <Box className="section">
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')}>
               <Button
                 variant="text"
@@ -215,56 +223,41 @@ export default function PriceDetail(props: { id: string }) {
                 {t('common.edit')}
               </Button>
             </SectionHeader>
-            <Stack
+            <InfoRowGroup
               sx={{
                 display: 'grid',
                 gridTemplateColumns: {
                   xs: 'repeat(1, 1fr)',
-                  sm: 'repeat(1, 1fr)',
-                  md: 'repeat(2, 1fr)',
-                  lg: 'repeat(3, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
                 },
-                gap: {
-                  xs: 0,
-                  md: 2,
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
                 },
               }}>
-              <InfoRow
-                label={t('admin.price.type')}
-                value={data.type}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.price.recurring.interval')}
-                value={data.recurring?.interval}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.price.nickname.label')}
-                value={data.nickname}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.price.lookupKey')}
-                value={data.lookup_key}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.updatedAt')}
-                value={formatTime(data.updated_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
+              <InfoRow label={t('admin.price.type')} value={renderType(data.type)} />
+              {data.type === 'recurring' && (
+                <InfoRow
+                  label={t('admin.price.recurring.interval')}
+                  value={formatRecurring(data.recurring as PriceRecurring, true, 'per', locale)}
+                />
+              )}
+              <InfoRow label={t('admin.price.lookupKey')} value={data.lookup_key} />
+              <InfoRow label={t('admin.price.nickname.label')} value={data.nickname} />
               {state.editing.price && (
                 <EditPrice
                   // @ts-ignore
@@ -274,7 +267,7 @@ export default function PriceDetail(props: { id: string }) {
                   onCancel={() => setState((prev) => ({ editing: { ...prev.editing, price: false } }))}
                 />
               )}
-            </Stack>
+            </InfoRowGroup>
           </Box>
 
           <Divider />

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

@@ -21,14 +21,12 @@ import PricingTablePreview from '../../../../components/pricing-table/preview';
 import SectionHeader from '../../../../components/section/header';
 import { formatProductPrice, goBackOrFallback } from '../../../../libs/util';
 import InfoMetric from '../../../../components/info-metric';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TPricingTableExpanded> => {
   return api.get(`/api/pricing-tables/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function PricingTableDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
@@ -256,35 +254,35 @@ export default function PricingTableDetail(props: { id: string }) {
               <Divider />
               <Box className="section">
                 <SectionHeader title={t('admin.details')} />
-                <Stack
+                <InfoRowGroup
                   sx={{
                     display: 'grid',
                     gridTemplateColumns: {
                       xs: 'repeat(1, 1fr)',
-                      sm: 'repeat(1, 1fr)',
-                      md: 'repeat(2, 1fr)',
-                      lg: 'repeat(3, 1fr)',
+                      xl: 'repeat(2, 1fr)',
                     },
-                    gap: {
-                      xs: 0,
-                      md: 2,
+                    '@container (min-width: 1000px)': {
+                      gridTemplateColumns: 'repeat(2, 1fr)',
+                    },
+                    '.info-row-wrapper': {
+                      gap: 1,
+                      flexDirection: {
+                        xs: 'column',
+                        xl: 'row',
+                      },
+                      alignItems: {
+                        xs: 'flex-start',
+                        xl: 'center',
+                      },
+                      '@container (min-width: 1000px)': {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                      },
                     },
                   }}>
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('common.createdAt')}
-                    value={formatTime(data.created_at)}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                  <InfoRow
-                    sizes={[1, 1]}
-                    label={t('common.updatedAt')}
-                    value={formatTime(data.updated_at)}
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
-                  />
-                </Stack>
+                  <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+                  <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+                </InfoRowGroup>
               </Box>
               <Divider />
               <Box className="section">