payment-kit 1.18.18 → 1.18.20

package/src/pages/admin/billing/invoices/detail.tsx

@@ -36,6 +36,7 @@ import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import { goBackOrFallback } from '../../../../libs/util';
 import InfoMetric from '../../../../components/info-metric';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
@@ -185,6 +186,29 @@ export default function InvoiceDetail(props: { id: string }) {
             <InfoMetric
               label={t('common.status')}
               value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+              divider
+            />
+            {data.subscription && (
+              <InfoMetric
+                label={t('admin.subscription.name')}
+                value={
+                  <Link to={`/admin/billing/${data.subscription.id}`}>
+                    <Typography variant="body1" color="text.link">
+                      {data.subscription.description || data.subscription.id}
+                    </Typography>
+                  </Link>
+                }
+                divider
+              />
+            )}
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric
+              label={t('admin.subscription.currentPeriod')}
+              value={
+                data.period_start && data.period_end
+                  ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
+                  : ''
+              }
             />
           </Stack>
         </Box>
@@ -219,83 +243,57 @@ export default function InvoiceDetail(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',
+                  },
+                },
+                '.currency-name': {
+                  color: 'text.secondary',
                 },
               }}>
-              <InfoRow
-                label={t('admin.invoice.number')}
-                value={data.number}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.invoice.description')}
-                value={getDescription(data.description || '')}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
               <InfoRow
                 label={t('admin.invoice.billTo')}
-                value={<CustomerLink customer={data.customer} />}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.subscription.currentPeriod')}
-                value={
-                  data.period_start && data.period_end
-                    ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
-                    : ''
-                }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
+                value={<CustomerLink customer={data.customer} size={isMobile ? 'default' : 'small'} />}
               />
+              <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
+              <InfoRow label={t('admin.invoice.description')} value={getDescription(data.description || '')} />
+
+              <InfoRow label={t('admin.invoice.billing')} value={data.collection_method} />
               {data.status_transitions?.finalized_at && (
                 <InfoRow
                   label={t('admin.invoice.finalizedAt')}
                   value={formatTime(data.status_transitions.finalized_at * 1000)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
               {data.status_transitions?.paid_at && (
-                <InfoRow
-                  label={t('admin.invoice.paidAt')}
-                  value={formatTime(data.status_transitions.paid_at * 1000)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
+                <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
               )}
-              <InfoRow
-                label={t('admin.invoice.billing')}
-                value={data.collection_method}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
               <InfoRow
                 label={t('admin.paymentMethod._name')}
                 value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
               <InfoRow
                 label={t('admin.paymentCurrency.name')}
@@ -305,15 +303,11 @@ export default function InvoiceDetail(props: { id: string }) {
                     name={`${data.paymentCurrency.symbol} (${data.paymentMethod?.name})`}
                   />
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
               {(!!data.paymentIntent?.payment_details?.ethereum || !!data.paymentIntent?.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
               {data.paymentIntent && data.paymentIntent.payment_details && (
@@ -322,8 +316,6 @@ export default function InvoiceDetail(props: { id: string }) {
                   value={
                     <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
                   }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
               {['stake', 'stake_overdraft_protection'].includes(data.billing_reason) &&
@@ -338,23 +330,9 @@ export default function InvoiceDetail(props: { id: string }) {
                         method={data.paymentMethod}
                       />
                     }
-                    direction={InfoDirection}
-                    alignItems={InfoAlignItems}
                   />
                 )}
-              {data.subscription && (
-                <InfoRow
-                  label={t('admin.subscription.name')}
-                  value={
-                    <Link to={`/admin/billing/${data.subscription.id}`}>
-                      {data.subscription.description || data.subscription.id}
-                    </Link>
-                  }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-              )}
-            </Stack>
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -31,14 +31,12 @@ import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
 import SubscriptionMetrics from '../../../../components/subscription/metrics';
 import { goBackOrFallback } from '../../../../libs/util';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function SubscriptionDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -190,58 +188,47 @@ export default function SubscriptionDetail(props: { id: string }) {
           },
         }}>
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
-          <Box className="section">
-            <SectionHeader title={t('admin.details')}>
-              {/* <Button
-                variant="text"
-                color="inherit"
-                size="small"
-                sx={{ color: 'text.link' }}
-                onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
-                {t('common.edit')}
-              </Button> */}
-            </SectionHeader>
-            <Stack
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
+            <SectionHeader title={t('admin.details')} />
+            <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)',
+                },
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
                 },
-                gap: {
-                  xs: 0,
-                  md: 2,
+                '.currency-name': {
+                  color: 'text.secondary',
                 },
               }}>
               <InfoRow
                 label={t('common.customer')}
-                value={<CustomerLink customer={data.customer} />}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
+                value={<CustomerLink customer={data.customer} size={isMobile ? 'default' : 'small'} />}
               />
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
-                <InfoRow
-                  label={t('common.resumesAt')}
-                  value={formatTime(data.pause_collection.resumes_at * 1000)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-              )}
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
               <InfoRow
                 label={t('admin.subscription.currentPeriod')}
                 value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
                   ' ~ '
                 )}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
               <InfoRow
                 label={t('admin.subscription.trialingPeriod')}
@@ -250,21 +237,12 @@ export default function SubscriptionDetail(props: { id: string }) {
                     ? [formatTime(data.trial_start * 1000), formatTime(data.trial_end * 1000)].join(' ~ ')
                     : ''
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.subscription.discount')}
-                value={data.discount_id ? data.discount_id : ''}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('admin.subscription.collectionMethod')}
-                value={data.collection_method}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
+              {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
+                <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+              )}
+              <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
+              <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
               <InfoRow
                 label={t('admin.paymentCurrency.name')}
                 value={
@@ -273,15 +251,11 @@ export default function SubscriptionDetail(props: { id: string }) {
                     name={`${data.paymentCurrency.symbol} (${data.paymentMethod?.name})`}
                   />
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
               {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
                 <InfoRow
                   label={t('common.delegateTxHash')}
                   value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
               {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
@@ -293,18 +267,9 @@ export default function SubscriptionDetail(props: { id: string }) {
                       method={data.paymentMethod}
                     />
                   }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-              )}
-              {!!data.description && (
-                <InfoRow
-                  label={t('common.description')}
-                  value={data.description}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
+              {!!data.description && <InfoRow label={t('common.description')} value={data.description} />}
               {!!data.recovered_from && (
                 <InfoRow
                   label={t('common.recoverFrom')}
@@ -313,11 +278,9 @@ export default function SubscriptionDetail(props: { id: string }) {
                       {data.recovered_from}
                     </Link>
                   }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
-            </Stack>
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

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

@@ -34,6 +34,7 @@ import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
 import { goBackOrFallback } from '../../../../libs/util';
 import MetadataList from '../../../../components/metadata/list';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = async (
   id: string
@@ -278,76 +279,52 @@ export default function CustomerDetail(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)',
+                  xxl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1050px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                },
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xxl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xxl: 'center',
+                  },
+                  '@container (min-width: 1050px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
+                },
+              }}>
               <InfoRow
                 label={t('common.did')}
                 value={<DidAddress did={data.customer.did} chainId={livemode ? 'main' : 'beta'} showQrcode />}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: {
-                    xs: 'repeat(1, 1fr)',
-                    sm: 'repeat(1, 1fr)',
-                    md: 'repeat(2, 1fr)',
-                    lg: 'repeat(3, 1fr)',
-                  },
-                  gap: {
-                    xs: 0,
-                    md: 2,
-                  },
-                }}>
-                <InfoRow
-                  label={t('admin.customer.name')}
-                  value={data.customer.name}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.customer.phone')}
-                  value={data.customer.phone}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.customer.email')}
-                  value={data.customer.email}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.customer.invoicePrefix')}
-                  value={data.customer.invoice_prefix}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('common.createdAt')}
-                  value={formatTime(data.customer.created_at)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('common.updatedAt')}
-                  value={formatTime(data.customer.updated_at)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
+              <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.customer.created_at)} />
 
-                {state.editing.customer && (
-                  <EditCustomer
-                    data={data.customer}
-                    loading={state.loading.customer}
-                    onSave={onUpdateInfo}
-                    onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
-                  />
-                )}
-              </Box>
-            </Stack>
+              <InfoRow label={t('admin.customer.invoicePrefix')} value={data.customer.invoice_prefix} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} />
+              {state.editing.customer && (
+                <EditCustomer
+                  data={data.customer}
+                  loading={state.loading.customer}
+                  onSave={onUpdateInfo}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
+                />
+              )}
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

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

@@ -33,6 +33,7 @@ import PayoutList from '../../../../components/payouts/list';
 import SectionHeader from '../../../../components/section/header';
 import { goBackOrFallback } from '../../../../libs/util';
 import RefundList from '../../../../components/refund/list';
+import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = (id: string): Promise<TPaymentIntentExpanded> => {
   return api.get(`/api/payment-intents/${id}`).then((res) => res.data);
@@ -209,29 +210,34 @@ export default function PaymentIntentDetail(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('admin.paymentIntent.received')}
-                value={received}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
               <InfoRow
                 label={t('common.status')}
                 value={
@@ -256,34 +262,14 @@ export default function PaymentIntentDetail(props: { id: string }) {
                     )}
                   </Stack>
                 }
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
-              <InfoRow
-                label={t('common.description')}
-                value={data.description}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
               />
-              <InfoRow
-                label={t('common.statementDescriptor')}
-                value={data.statement_descriptor}
-                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={total} />
+              <InfoRow label={t('admin.paymentIntent.received')} value={received} />
+              <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)} />
+              <InfoRow label={t('common.statementDescriptor')} value={data.statement_descriptor} />
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">