payment-kit 1.20.10 → 1.20.12

package/doc/vendor_fulfillment_system.md

@@ -1,63 +1,63 @@
-# 多供应商发货系统完整实现方案
+# Multi-Vendor Fulfillment System Complete Implementation
 
-## 📋 项目概述
+## 📋 Project Overview
 
-本文档总结了 Payment Kit 中多供应商发货系统的完整实现，包括架构设计、流程逻辑、技术实现和问题解决方案。
+This document summarizes the complete implementation of the multi-vendor fulfillment system in Payment Kit, including architecture design, process logic, technical implementation, and problem-solving solutions.
 
-## 🎯 系统目标
+## 🎯 System Goals
 
-### 核心需求
+### Core Requirements
 
-1. **多供应商支持**: 一个订单可以包含多个供应商的商品
-2. **异步发货**: 不同供应商可以独立、并行发货
-3. **状态协调**: 统一管理所有供应商的发货状态
-4. **容错机制**: 处理发货失败、重试、超时等异常情况
-5. **分成处理**: 所有供应商发货完成后，自动进行佣金分成
-6. **退款保障**: 任何供应商失败即全额退款，确保用户权益
+1. **Multi-vendor Support**: A single order can contain products from multiple vendors
+2. **Asynchronous Fulfillment**: Different vendors can fulfill orders independently and in parallel
+3. **State Coordination**: Unified management of fulfillment status across all vendors
+4. **Fault Tolerance**: Handle fulfillment failures, retries, timeouts, and other exceptional situations
+5. **Commission Processing**: Automatic commission distribution after all vendors complete fulfillment
+6. **Refund Protection**: Full refund if any vendor fails, ensuring user rights
 
-### 业务规则
+### Business Rules
 
-- **全部成功**: 所有供应商发货成功 → 进行佣金分成
-- **任何失败**: 有任何供应商失败、超时或超过重试次数 → **对已成功的供应商发起退货请求** → 全额退款给用户
-- **超时时间**: 5分钟无响应视为超时
-- **重试次数**: 最多3次重试
-- **退货机制**: 对已完成发货的供应商发起退货请求
+- **All Success**: All vendors fulfill successfully → Process commission distribution
+- **Any Failure**: If any vendor fails, times out, or exceeds retry limit → **Initiate return requests for successful vendors** → Full refund to user
+- **Timeout Period**: 5 minutes of no response is considered timeout
+- **Retry Limit**: Maximum 3 retries
+- **Return Mechanism**: Initiate return requests for vendors that have completed fulfillment
 
-## 🏗️ 系统架构
+## 🏗️ System Architecture
 
-### 架构模式: 协调器模式 (Coordinator Pattern)
+### Architecture Pattern: Coordinator Pattern
 
-#### 🔄 **核心流程 (文字版)**
+#### 🔄 **Core Process Flow (Text Version)**
 
 ```
 1. Payment Success
    ↓
 2. vendor-commission.ts
-   ├─ 检查供应商配置
-   ├─ 无供应商 → 直接冷钱包转账 ✅
-   └─ 有供应商 → 调用协调器
+   ├─ Check vendor configuration
+   ├─ No vendors → Direct cold wallet transfer ✅
+   └─ Has vendors → Call coordinator
 
 3. vendor-fulfillment-coordinator.ts
-   ├─ 启动发货流程
-   ├─ 初始化 vendor_info 状态
-   ├─ 为每个供应商创建发货任务
-   └─ 被动等待通知
+   ├─ Start fulfillment process
+   ├─ Initialize vendor_info status
+   ├─ Create fulfillment tasks for each vendor
+   └─ Wait passively for notifications
 
-4. vendor-fulfillment.ts (并行执行)
-   ├─ 供应商A发货 → 通知协调器 ✅
-   ├─ 供应商B发货 → 通知协调器 ✅
-   ├─ 供应商C发货 → 通知协调器 ❌
-   └─ 重试机制 (最多3次)
+4. vendor-fulfillment.ts (parallel execution)
+   ├─ Vendor A fulfills → Notify coordinator ✅
+   ├─ Vendor B fulfills → Notify coordinator ✅
+   ├─ Vendor C fulfills → Notify coordinator ❌
+   └─ Retry mechanism (max 3 times)
 
 5. vendor-fulfillment-coordinator.ts
-   ├─ 接收所有通知
-   ├─ 更新 vendor_info 状态 (事务+锁)
-   ├─ 检查整体状态
-   ├─ 全部成功 → 分成 + 冷钱包 ✅
-   └─ 任何失败 → 🔄 对已成功供应商发起退货请求 → 全额退款 ❌
+   ├─ Receive all notifications
+   ├─ Update vendor_info status (transaction + lock)
+   ├─ Check overall status
+   ├─ All success → Commission distribution + cold wallet ✅
+   └─ Any failure → 🔄 Initiate return requests for successful vendors → Full refund ❌
 ```
 
-#### 📊 **详细架构图**
+#### 📊 **Detailed Architecture Diagram**
 
 ```mermaid
 graph TD

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.10",
+  "version": "1.20.12",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -45,32 +45,32 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@arcblock/did": "^1.24.9",
-    "@arcblock/did-connect-react": "^3.1.40",
+    "@arcblock/did": "^1.25.1",
+    "@arcblock/did-connect-react": "^3.1.41",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.24.9",
-    "@arcblock/jwt": "^1.24.9",
-    "@arcblock/ux": "^3.1.40",
-    "@arcblock/validator": "^1.24.9",
-    "@blocklet/did-space-js": "^1.1.23",
+    "@arcblock/did-util": "^1.25.1",
+    "@arcblock/jwt": "^1.25.1",
+    "@arcblock/ux": "^3.1.41",
+    "@arcblock/validator": "^1.25.1",
+    "@blocklet/did-space-js": "^1.1.24",
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/logger": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/payment-react": "1.20.10",
-    "@blocklet/payment-vendor": "1.20.10",
+    "@blocklet/payment-react": "1.20.12",
+    "@blocklet/payment-vendor": "1.20.12",
     "@blocklet/sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/ui-react": "^3.1.40",
-    "@blocklet/uploader": "^0.2.10",
+    "@blocklet/ui-react": "^3.1.41",
+    "@blocklet/uploader": "^0.2.11",
     "@blocklet/xss": "^0.2.7",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.24.9",
-    "@ocap/client": "^1.24.9",
-    "@ocap/mcrypto": "^1.24.9",
-    "@ocap/util": "^1.24.9",
-    "@ocap/wallet": "^1.24.9",
+    "@ocap/asset": "^1.25.1",
+    "@ocap/client": "^1.25.1",
+    "@ocap/mcrypto": "^1.25.1",
+    "@ocap/util": "^1.25.1",
+    "@ocap/wallet": "^1.25.1",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -126,7 +126,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.20.10",
+    "@blocklet/payment-types": "1.20.12",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -157,7 +157,7 @@
     "vite": "^7.0.0",
     "vite-node": "^3.2.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.10.1",
+    "vite-plugin-blocklet": "^0.11.0",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
@@ -173,5 +173,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "1659d63120ced92167ec8681e51db96801b910ec"
+  "gitHead": "e6c432f89c2bf305efc903c0809f4a0557c07774"
 }

package/src/app.tsx

@@ -58,6 +58,8 @@ function App() {
             <Route key="admin-index" path="/admin" element={<AdminPage />} />,
             <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
             <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+            <Route key="admin-detail" path="/admin/:group/:page/:id" element={<AdminPage />} />,
+            <Route key="admin-nested" path="/admin/:group/:page/:subpage/:id" element={<AdminPage />} />,
             <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
             <Route key="integrations-index" path="/integrations" element={<IntegrationsPage />} />
             <Route key="integrations-tabs" path="/integrations/:group" element={<IntegrationsPage />} />

package/src/components/customer/link.tsx

@@ -40,7 +40,7 @@ export default function CustomerLink({
       popupInfoType={InfoType.Minimal}
       showDid={size !== 'small'}
       popupShowDid
-      {...(customer.metadata.anonymous === true
+      {...(customer?.metadata?.anonymous === true
         ? {
             user: {
               fullName: customer.name || customer.email,

package/src/components/discount/discount-info.tsx

@@ -0,0 +1,178 @@
+import { Box, Typography, Stack } from '@mui/material';
+import { LocalOfferOutlined } from '@mui/icons-material';
+import { formatTime, formatAmount, findCurrency, usePaymentContext, useMobile } from '@blocklet/payment-react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+type DiscountStats = {
+  subscription_id: string;
+  total_discount_records: number;
+  total_savings: Record<
+    string,
+    {
+      amount: string;
+      currency: any;
+      formattedAmount: string;
+    }
+  >;
+  coupons_used: string[];
+  promotion_codes_used: any[];
+  discount_records: any[];
+};
+
+type DiscountInfoProps = {
+  discountStats?: DiscountStats | null;
+};
+
+export default function DiscountInfo({ discountStats = null }: DiscountInfoProps) {
+  const { t } = useLocaleContext();
+  const { settings } = usePaymentContext();
+  const { isMobile } = useMobile();
+
+  if (!discountStats || discountStats.total_discount_records === 0) {
+    return null;
+  }
+
+  // Get primary coupon info
+  const primaryRecord = discountStats.discount_records?.[0];
+  const coupon = primaryRecord?.coupon;
+
+  if (!coupon) {
+    return null;
+  }
+
+  // Use coupon name instead of promotion code
+  const couponName = coupon.name || t('admin.coupon.discount');
+
+  // Format discount type
+  const getDiscountType = () => {
+    if (coupon.percent_off && coupon.percent_off > 0) {
+      return t('admin.coupon.couponTermsPercentage', { percent: coupon.percent_off });
+    }
+    if (coupon.amount_off && coupon.amount_off !== '0') {
+      const currency = findCurrency(settings.paymentMethods, coupon.currency_id) || settings.baseCurrency;
+      return t('admin.coupon.couponTermsFixedAmount', {
+        amount: formatAmount(coupon.amount_off, currency.decimal),
+        symbol: currency.symbol,
+      });
+    }
+    return t('admin.coupon.noDiscount');
+  };
+
+  // Format duration
+  const getDuration = () => {
+    if (coupon.duration === 'repeating' && coupon.duration_in_months) {
+      return t(`admin.coupon.couponTermsDuration.${coupon.duration}`, { months: coupon.duration_in_months });
+    }
+    return t(`admin.coupon.couponTermsDuration.${coupon.duration}`);
+  };
+
+  // Format total savings
+  const totalSavingsEntries = Object.entries(discountStats.total_savings);
+  const savingsText =
+    totalSavingsEntries.length > 0
+      ? totalSavingsEntries.map(([, savings]) => savings.formattedAmount).join(', ')
+      : '--';
+
+  // Get validity period
+  const getValidityPeriod = () => {
+    if (coupon.duration !== 'repeating') {
+      return '';
+    }
+    if (primaryRecord?.discount_start && primaryRecord?.discount_end) {
+      const startDate = formatTime(primaryRecord.discount_start * 1000);
+      const endDate = formatTime(primaryRecord.discount_end * 1000);
+      return `${startDate} ~ ${endDate}`;
+    }
+    return '';
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'grey.50',
+        borderRadius: 1.5,
+        p: 2.5,
+        my: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+      }}>
+      <Stack spacing={1}>
+        <Stack
+          direction={isMobile ? 'column' : 'row'}
+          spacing={2}
+          sx={{
+            alignItems: isMobile ? 'flex-start' : 'center',
+          }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              alignItems: 'center',
+              flex: 1,
+            }}>
+            <LocalOfferOutlined sx={{ color: 'primary.main', fontSize: 20 }} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+              {couponName}
+            </Typography>
+          </Stack>
+
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
+              {getDiscountType()}
+            </Typography>
+            {getDuration() && (
+              <>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.disabled',
+                  }}>
+                  |
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {getDuration()}
+                </Typography>
+              </>
+            )}
+          </Box>
+        </Stack>
+
+        <Stack
+          direction={isMobile ? 'column' : 'row'}
+          spacing={2}
+          sx={{
+            alignItems: isMobile ? 'flex-start' : 'center',
+          }}>
+          <Box sx={{ flex: 1 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('admin.discount.totalSaved')}:{' '}
+              <Typography component="span" sx={{ color: 'success.main', fontWeight: 600, ml: 0.5 }}>
+                {savingsText}
+              </Typography>
+            </Typography>
+          </Box>
+
+          {getValidityPeriod() && (
+            <Box>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.primary',
+                }}>
+                {t('admin.coupon.discountPeriod')}: {getValidityPeriod()}
+              </Typography>
+            </Box>
+          )}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

package/src/components/invoice/table.tsx

@@ -63,7 +63,7 @@ export function getAppliedBalance(invoice: TInvoiceExpanded) {
   return '0';
 }
 
-export function getInvoiceRows(invoice: TInvoiceExpanded) {
+export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => string) {
   const detail: InvoiceDetailItem[] = invoice.lines.map((line) => {
     const price = line.quantity
       ? toBN(line.amount).div(toBN(line.quantity)).toString()
@@ -99,14 +99,61 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
     {
       key: 'common.subtotal',
       value: formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal),
-      color: 'text.primary',
-    },
-    {
-      key: 'common.total',
-      value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
-      color: 'text.primary',
+      color: 'text.secondary',
     },
   ];
+
+  // Add discount information from discountDetails
+  if ((invoice as any).discountDetails && (invoice as any).discountDetails.length > 0) {
+    (invoice as any).discountDetails.forEach((discount: any) => {
+      if (discount.coupon) {
+        let discountAmount = '0';
+
+        // Calculate discount amount from total_discount_amounts
+        if (invoice.total_discount_amounts && invoice.total_discount_amounts.length > 0) {
+          const matchingDiscount = invoice.total_discount_amounts.find(
+            (tda: any) => tda.discount === discount.id || tda.coupon === discount.coupon_id
+          );
+          if (matchingDiscount) {
+            discountAmount = matchingDiscount.amount.toString();
+          }
+        }
+
+        if (toBN(discountAmount).gt(toBN(0))) {
+          const couponName = discount.coupon.name || t('common.coupon');
+          const formattedDiscountAmount = formatAmount(discountAmount, invoice.paymentCurrency.decimal);
+
+          // Format discount display following Stripe style: coupon_name (discount_type)
+          let discountLabel = couponName;
+          if (discount.coupon.percent_off) {
+            const discountText = (t as any)('admin.coupon.couponTermsPercentage', {
+              percent: discount.coupon.percent_off,
+            });
+            discountLabel = `${couponName} (${discountText})`;
+          } else if (discount.coupon.amount_off) {
+            const fixedAmount = formatAmount(discount.coupon.amount_off, invoice.paymentCurrency.decimal);
+            const discountText = (t as any)('admin.coupon.couponTermsFixedAmount', {
+              amount: fixedAmount,
+              symbol: invoice.paymentCurrency.symbol,
+            });
+            discountLabel = `${couponName} (${discountText})`;
+          }
+
+          summary.push({
+            key: discountLabel,
+            value: `-${formattedDiscountAmount}`,
+            color: 'text.secondary',
+          });
+        }
+      }
+    });
+  }
+
+  summary.push({
+    key: 'common.total',
+    value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
+    color: 'text.secondary',
+  });
   if (invoice.amount_paid !== '0') {
     summary.push({
       key: 'payment.customer.invoice.amountPaid',
@@ -126,7 +173,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
   summary.push({
     key: 'payment.customer.invoice.amountDue',
     value: formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal),
-    color: 'text.primary',
+    color: invoice.amount_remaining !== '0' ? 'text.primary' : 'text.secondary',
   });
 
   return {
@@ -137,7 +184,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
 
 export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '' }: Props) {
   const { t, locale } = useLocaleContext();
-  const { detail, summary } = getInvoiceRows(invoice);
+  const { detail, summary } = getInvoiceRows(invoice, t);
   const [state, setState] = useSetState({
     subscriptionId: '',
     subscriptionItemId: '',
@@ -246,6 +293,34 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
       width: 200,
       align: 'right',
     },
+    {
+      label: t('common.discount'),
+      name: 'discount',
+      width: 200,
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = detail[index] as InvoiceDetailItem;
+          // Calculate discount amount for this line item
+          let itemDiscountAmount = toBN(0);
+          if (item.raw.discount_amounts && item.raw.discount_amounts.length > 0) {
+            item.raw.discount_amounts.forEach((discount: any) => {
+              if (discount.amount) {
+                itemDiscountAmount = itemDiscountAmount.add(toBN(discount.amount));
+              }
+            });
+          }
+
+          return (
+            <Typography component="span" sx={{ color: 'text.secondary' }}>
+              {itemDiscountAmount.gt(toBN(0))
+                ? `-${formatAmount(itemDiscountAmount.toString(), invoice.paymentCurrency.decimal)}`
+                : '-'}
+            </Typography>
+          );
+        },
+      },
+    },
     {
       label: t('common.amount'),
       name: 'amount',
@@ -299,49 +374,72 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
         emptyNodeText={emptyNodeText || t('payment.customer.invoice.emptyList')}
       />
       {!isEmpty(detail) && invoice.status !== 'void' && (
-        <Stack
+        <Box
           className="invoice-summary"
           sx={{
             display: 'flex',
-            flexDirection: {
-              xs: 'column',
-              md: 'row',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            float: 'right',
+            pr: 2,
+            mt: {
+              xs: 1,
+              md: 1,
             },
-            justifyContent: 'flex-end',
-            alignItems: {
-              xs: 'flex-end',
-              md: 'center',
+            width: {
+              xs: '100%',
+              md: 'auto',
             },
-            gap: {
-              xs: 1,
-              md: 3,
+            minWidth: {
+              md: '280px',
             },
-            mt: {
-              xs: 1,
-              md: 2,
+            maxWidth: {
+              xs: '100%',
+              md: '400px',
             },
           }}>
-          {summary.map((line) => (
-            <Box key={line.key}>
-              <Typography
-                component="span"
-                variant="body1"
-                sx={{
-                  color: 'text.secondary',
-                }}>
-                {t(line.key)}:&nbsp;
-              </Typography>
-              <Typography
-                component="span"
-                variant="body1"
+          {summary.map((line, index) => {
+            const isTotal = line.key === 'common.total';
+            const showDivider = isTotal && index > 0;
+
+            return (
+              <Stack
+                key={line.key}
+                direction="row"
                 sx={{
-                  color: 'text.primary',
+                  justifyContent: 'flex-end',
+                  width: '100%',
+                  py: 0.5,
+
+                  ...(showDivider && {
+                    borderTop: '1px solid',
+                    borderTopColor: 'divider',
+                    pt: 1,
+                    mt: 0.5,
+                  }),
                 }}>
-                {line.value}
-              </Typography>
-            </Box>
-          ))}
-        </Stack>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.primary',
+                    fontWeight: isTotal ? 500 : 400,
+                  }}>
+                  {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.primary',
+                    fontWeight: isTotal ? 500 : 400,
+                    minWidth: '80px',
+                    textAlign: 'right',
+                  }}>
+                  {line.value}
+                </Typography>
+              </Stack>
+            );
+          })}
+        </Box>
       )}
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
@@ -359,9 +457,6 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
 }
 
 const Root = styled(Box)`
-  .invoice-summary {
-    padding-right: 16px;
-  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
       > div {
@@ -370,8 +465,5 @@ const Root = styled(Box)`
         font-size: 14px;
       }
     }
-    .invoice-summary {
-      padding-right: 20px;
-    }
   }
 `;

package/src/components/invoice-pdf/styles.ts

@@ -4,6 +4,7 @@ export const colorDark = '#222';
 export const colorDark2 = '#888';
 export const colorGray = '#e3e3e3';
 export const colorWhite = '#fff';
+export const colorGreen = '#4caf50';
 
 export const pdfStyles: InvoiceStyles = {
   template: {
@@ -29,6 +30,9 @@ export const pdfStyles: InvoiceStyles = {
   gray: {
     color: colorDark2,
   },
+  green: {
+    color: colorGreen,
+  },
   'bg-dark': {
     backgroundColor: colorDark2,
   },
@@ -55,8 +59,10 @@ export const pdfStyles: InvoiceStyles = {
   'w-60': { width: '60%' },
   'w-40': { width: '40%' },
   'w-48': { width: '48%' },
+  'w-38': { width: '38%' },
   'w-17': { width: '17%' },
   'w-18': { width: '18%' },
+  'w-15': { width: '15%' },
   row: {
     borderBottom: `1px solid ${colorGray}`,
     marginBottom: '2px',