diff --git a/dist.zip b/dist.zip
index 8468042..28a2741 100644
Binary files a/dist.zip and b/dist.zip differ
diff --git a/package.json b/package.json
index 0b3d113..fc4d8ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ant-design-pro",
- "version": "4.5.121",
+ "version": "4.5.128",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
diff --git a/src/pages/travelMember/BookingMealOrder/components/orderDetailModal.tsx b/src/pages/travelMember/BookingMealOrder/components/orderDetailModal.tsx
index 4062a98..a29a0db 100644
--- a/src/pages/travelMember/BookingMealOrder/components/orderDetailModal.tsx
+++ b/src/pages/travelMember/BookingMealOrder/components/orderDetailModal.tsx
@@ -123,12 +123,28 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
width: 150,
ellipsis: true,
},
+ {
+ dataIndex: 'COMMODITY_UNIT',
+ title: '商品单位',
+ align: 'center',
+ hideInSearch: true,
+ width: 120,
+ ellipsis: true,
+ },
+ {
+ dataIndex: 'COMMODITY_RULE',
+ title: '商品规格',
+ align: 'center',
+ hideInSearch: true,
+ width: 120,
+ ellipsis: true,
+ },
{
dataIndex: 'ORDER_COUNT',
title: '数量',
align: 'center',
hideInSearch: true,
- width: 150,
+ width: 120,
ellipsis: true,
},
{
@@ -136,7 +152,7 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
title: '单价',
align: 'center',
hideInSearch: true,
- width: 150,
+ width: 120,
ellipsis: true,
},
{
@@ -144,9 +160,17 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
title: '金额',
align: 'center',
hideInSearch: true,
- width: 150,
+ width: 120,
ellipsis: true,
},
+ {
+ dataIndex: 'SALEDETAIL_DESC',
+ title: '备注',
+ align: 'center',
+ hideInSearch: true,
+ width: 150,
+ // ellipsis: true,
+ }
]
// 商品发货
@@ -384,7 +408,6 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
formRef={modalRef}
submitter={false}
request={async () => {
- console.log('currentRow', currentRow);
if (currentRow?.SALEBILL_ID || currentRow?.OrderId) {
const req: any = {
SALEBILLId: currentRow?.SALEBILL_ID || currentRow?.OrderId
@@ -398,7 +421,6 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
PageIndex: 1,
PageSize: 10,
})
- console.log('dasdas44444', addressData);
let addressObj: any = addressData.List[0]
// 物流公司和快递单号的回显
@@ -420,17 +442,6 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
setLogisticsList([{ id: '1', company: '', trackingNumber: '' }]);
}
}
-
- console.log('32131', {
- ...data,
- ORDER_PERSON: currentRow?.AddressInfo ? `${currentRow?.AddressInfo.USER_NAME}${currentRow?.AddressInfo?.MOBILEPHONE ? `【${currentRow?.AddressInfo?.MOBILEPHONE}】` : ""}` || "" : "",
- ORDER_ADDRESS: `${addressObj?.ADDRESS || ""}${addressObj?.DOORPLATE || ""}`,
- CURRENT_POINT: currentRow?.CURRENT_POINT || "",
- ORDER_DATE: currentRow?.ORDER_DATE ? moment(currentRow?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : '',
- CHANNEL_TYPE: currentRow?.CHANNEL_TYPE || "",
- });
-
-
return {
...data,
ORDER_PERSON: currentRow?.AddressInfo ? `${currentRow?.AddressInfo.USER_NAME}${currentRow?.AddressInfo?.MOBILEPHONE ? `【${currentRow?.AddressInfo?.MOBILEPHONE}】` : ""}` || "" : "",
@@ -438,7 +449,9 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
CURRENT_POINT: currentRow?.CURRENT_POINT || "",
ORDER_DATE: currentRow?.ORDER_DATE ? moment(currentRow?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : '',
CHANNEL_TYPE: currentRow?.CHANNEL_TYPE || "",
- TAKE_TYPE: data.TAKE_TYPE === 1000 ? "自提" : data.TAKE_TYPE === 3000 ? '免发货' : '邮寄'
+ TAKE_TYPE: data.TAKE_TYPE === 1000 ? "自提" : data.TAKE_TYPE === 3000 ? '免发货' : '邮寄',
+ SALEBILL_STATE: currentRow?.SALEBILL_STATE || data?.SALEBILL_STATE,
+ SALEBILL_CODELIST: currentRow?.SALEBILL_CODE || ''
}
} else {
const req: any = {
@@ -449,14 +462,12 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
PageSize: 1,
}
const data = await handeGetSALEBILLList(req)
- console.log('dasdas22222', data);
if (data.List && data.List.length > 0) {
let obj: any = data.List[0]
const req: any = {
SALEBILLId: obj?.SALEBILL_ID || currentRow?.OrderId
}
const res = await handeGetSALEBILLDetail(req)
- console.log('dasdas33333', res);
// 查地址信息
const addressData = await handeGetSALEADDRESSList({
searchParameter: {
@@ -465,15 +476,7 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
PageIndex: 1,
PageSize: 10,
})
- console.log('dasdas44444', addressData);
let addressObj: any = addressData.List && addressData.List.length > 0 ? addressData.List[0] : {}
- console.log('dmsakldmas', {
- ...res,
- ORDER_PERSON: currentRow?.AddressInfo ? `${currentRow?.AddressInfo.USER_NAME}${currentRow?.AddressInfo?.MOBILEPHONE ? `【${currentRow?.AddressInfo?.MOBILEPHONE}】` : ""}` || "" : "",
- ORDER_ADDRESS: `${addressObj?.ADDRESS || ""}${addressObj?.DOORPLATE || ""}`,
- CHANNEL_TYPE: currentRow?.CHANNEL_TYPE || "",
- });
-
return {
...res,
ORDER_PERSON: currentRow?.AddressInfo ? `${currentRow?.AddressInfo.USER_NAME}${currentRow?.AddressInfo?.MOBILEPHONE ? `【${currentRow?.AddressInfo?.MOBILEPHONE}】` : ""}` || "" : "",
@@ -481,7 +484,9 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
CURRENT_POINT: currentRow?.CURRENT_POINT || "",
ORDER_DATE: res?.ORDER_DATE ? moment(res?.ORDER_DATE).format('YYYY-MM-DD HH:mm:ss') : '',
CHANNEL_TYPE: currentRow?.CHANNEL_TYPE || "",
- TAKE_TYPE: res.TAKE_TYPE === 1000 ? "自提" : res.TAKE_TYPE === 3000 ? '免发货' : '邮寄'
+ TAKE_TYPE: res.TAKE_TYPE === 1000 ? "自提" : res.TAKE_TYPE === 3000 ? '免发货' : '邮寄',
+ SALEBILL_STATE: currentRow?.SALEBILL_STATE || data?.SALEBILL_STATE,
+ SALEBILL_CODELIST: currentRow?.SALEBILL_CODE || ''
}
} else {
message.error('当前订单数据异常,请联系管理员!')
@@ -510,21 +515,92 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
- {/*
订单信息
*/}
-
-
+ < Row gutter={8}>
+ {/* 订单信息
*/}
+ {
+ detailType === 'food' ? '' :
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ detailType === 'food' ? '' :
+
+
+
+ }
+
+
@@ -566,33 +642,48 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
/>
}
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
{
detailType === 'food' ?
<>
@@ -638,62 +729,14 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
> :
<>
-
-
-
-
-
-
-
-
-
+
+
>
}
-
-
-
-
-
-
-
-
-
+
+
+
{
detailType === 'food' ?
@@ -719,128 +762,122 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
}
-
+ {/*
-
+ */}
-
-
-
-
-
-
-
-
-
-
-
{
- showShipment ?
- <>
-
-
-
- 物流信息
- }
- size="small"
- onClick={addLogistics}
- style={{ borderStyle: 'dashed' }}
- >
- 添加物流信息
-
-
- {logisticsList.map((logistics, index) => (
-
-
-
- {index + 1}.
-
-
-
-
- updateLogistics(logistics.id, 'company', e.target.value)}
- style={{
- width: '100%',
- padding: '4px 11px',
- border: '1px solid #d9d9d9',
- borderRadius: '6px',
- fontSize: '14px'
- }}
- />
-
-
-
-
-
- updateLogistics(logistics.id, 'trackingNumber', e.target.value)}
- style={{
- width: '100%',
- padding: '4px 11px',
- border: '1px solid #d9d9d9',
- borderRadius: '6px',
- fontSize: '14px'
- }}
- />
-
-
-
- }
- onClick={() => removeLogistics(logistics.id)}
- style={{ marginTop: '24px' }}
- disabled={logisticsList.length === 1}
- >
- 删除
-
-
-
-
- ))}
-
-
- > : ""
+ detailType === 'food' ? '' :
+
+
+
}
-
+
+
+
+
+ {
+ showShipment ?
+ <>
+
+
+
+ 物流信息
+ }
+ size="small"
+ onClick={addLogistics}
+ style={{ borderStyle: 'dashed' }}
+ >
+ 添加物流信息
+
+
+ {logisticsList.map((logistics, index) => (
+
+
+
+ {index + 1}.
+
+
+
+
+ updateLogistics(logistics.id, 'company', e.target.value)}
+ style={{
+ width: '100%',
+ padding: '4px 11px',
+ border: '1px solid #d9d9d9',
+ borderRadius: '6px',
+ fontSize: '14px'
+ }}
+ />
+
+
+
+
+
+ updateLogistics(logistics.id, 'trackingNumber', e.target.value)}
+ style={{
+ width: '100%',
+ padding: '4px 11px',
+ border: '1px solid #d9d9d9',
+ borderRadius: '6px',
+ fontSize: '14px'
+ }}
+ />
+
+
+
+ }
+ onClick={() => removeLogistics(logistics.id)}
+ style={{ marginTop: '24px' }}
+ disabled={logisticsList.length === 1}
+ >
+ 删除
+
+
+
+
+ ))}
+
+
+ > : ""
+ }
+
@@ -922,9 +959,12 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailTy
| 合计 |
|
+ |
+ |
{orderDetail?.TOTAL_COUNT || orderDetail?.ORDER_COUNT || 0} |
|
{orderDetail?.ORDER_AMOUNT?.toFixed(2) || '0.00'} |
+ |
)
}}
diff --git a/src/pages/travelMember/MallOrderManage/index.tsx b/src/pages/travelMember/MallOrderManage/index.tsx
index bc6e610..6e6d980 100644
--- a/src/pages/travelMember/MallOrderManage/index.tsx
+++ b/src/pages/travelMember/MallOrderManage/index.tsx
@@ -8,7 +8,7 @@ import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import PageTitleBox from "@/components/PageTitleBox";
import moment from 'moment'
-import { handeGetCOMPANYList, handeGetMEMBERSHIPVIPList, handeGetMERCHANTSList, handeGetNestingAUTOTYPEList, handeGetSALEBILLList, handeGetSaleBillWholeList, handeGetSALEDETAILList } from "../service";
+import { handeGetCOMPANYList, handeGetMEMBERSHIPVIPList, handeGetMERCHANTSList, handeGetNestingAUTOTYPEList, handeGetOnlineBillAccountList, handeGetSALEBILLList, handeGetSaleBillWholeList, handeGetSALEDETAILList } from "../service";
import './style.less'
import Draggable from "react-draggable";
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
@@ -59,6 +59,10 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
})
+ // 获取导出数据的loading
+ const [getExportDataLoading, setGetExportDataLoading] = useState(false);
+
+
const onDraggaleStart = (event, uiData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
@@ -139,20 +143,19 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
initialValue: '0',
hideInTable: true,
},
- // {
- // title: "支付方式",
- // dataIndex: "PAYMETHOD",
- // valueType: "select",
- // valueEnum: {
- // "0": "全部",
- // "支付宝": "支付宝",
- // "微信": "微信",
- // "积分兑换": "积分兑换",
- // "余额支付": "余额支付",
- // },
- // initialValue: '0',
- // hideInTable: true,
- // },
+ {
+ title: "支付方式",
+ dataIndex: "CHANNEL_TYPE",
+ valueType: "select",
+ valueEnum: {
+ "0": "全部",
+ "工会余额": "工会余额",
+ "组合支付": "组合支付",
+ "微信": "微信"
+ },
+ initialValue: '0',
+ hideInTable: true,
+ },
{
title: "序号",
dataIndex: "index",
@@ -332,7 +335,7 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
// "余额支付": "余额支付",
// },
width: 120,
- // hideInSearch: true,
+ hideInSearch: true,
ellipsis: true,
align: "center",
},
@@ -589,189 +592,156 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
setCurrentRow(undefined);
}
- //导出的columns 普通
- const exportColumnsNomal: any = [
+
+ // 导出excel的表格内容
+ const exportColumns: any = [
{
- title: "订单编号",
- dataIndex: "",
+ title: "订单编码",
+ width: 250,
+ dataIndex: "OrderCode",
},
{
title: "会员名称",
- dataIndex: "",
+ width: 150,
+ dataIndex: "OrderPerson",
},
{
title: "收货人",
- dataIndex: "",
+ width: 150,
+ dataIndex: "ReceiverName",
},
{
title: "收货人电话",
- dataIndex: "",
+ width: 150,
+ dataIndex: "ReceiverPhone",
},
{
title: "收货地址",
- dataIndex: "",
+ width: 250,
+ dataIndex: "ReceiverAddress",
},
{
title: "物流信息",
- dataIndex: "",
+ width: 250,
+ dataIndex: "LogisticsInfo",
},
{
title: "商品名称",
- dataIndex: "",
+ width: 250,
+ dataIndex: "CommodityName",
},
{
title: "商品条码",
- dataIndex: "",
+ width: 150,
+ dataIndex: "CommodityBarcode",
},
{
title: "供货商",
- dataIndex: "",
+ width: 250,
+ dataIndex: "SupplierName",
},
{
title: "商品规格",
- dataIndex: "",
+ width: 120,
+ dataIndex: "CommodityRule",
},
+ {
+ title: "商品备注",
+ width: 120,
+ dataIndex: "DetailDesc",
+ },
+
+
{
title: "下单数量",
- dataIndex: "",
+ width: 120,
+ dataIndex: "OrderCount",
+ valueType: "digit",
},
{
title: "采购单价",
- dataIndex: "",
+ width: 120,
+ dataIndex: "PurchaseTaxPrice",
+ valueType: "digit",
},
{
title: "采购合计金额",
- dataIndex: "",
+ width: 120,
+ dataIndex: "PurchaseTotalTaxAmount",
+ valueType: "digit",
},
{
title: "采购不含税合计金额",
- dataIndex: "",
+ width: 120,
+ dataIndex: "PurchaseTotalAmount",
+ valueType: "digit",
},
{
title: "销售单价",
- dataIndex: "",
+ width: 120,
+ dataIndex: "SaleTaxPrice",
+ valueType: "digit",
},
{
title: "销售合计金额",
- dataIndex: "",
+ width: 120,
+ dataIndex: "SaleTotalTaxAmount",
+ valueType: "digit",
},
{
title: "销售不含税合计金额",
- dataIndex: "",
- },
- {
- title: "平台手续费",
- dataIndex: "",
- },
- {
- title: "财务到账含税金额",
- dataIndex: "",
+ width: 120,
+ dataIndex: "SaleTotalAmount",
+ valueType: "digit",
},
{
title: "税率",
- dataIndex: "",
- },
- {
- title: "单位名称",
- dataIndex: "",
+ width: 120,
+ dataIndex: "TaxRate",
},
{
title: "付款积分",
- dataIndex: "",
+ width: 120,
+ dataIndex: "BalancePayment",
},
{
title: "实付总金额",
- dataIndex: "",
+ width: 120,
+ dataIndex: "PayAmount",
+ valueType: "digit",
},
{
title: "支付方式",
- dataIndex: "",
+ width: 150,
+ dataIndex: "PaymentMethod",
},
{
title: "支付时间",
- dataIndex: "",
+ width: 180,
+ dataIndex: "PaymentTime",
},
{
title: "支付订单号",
- dataIndex: "",
+ width: 150,
+ dataIndex: "PaymentOrderCode",
},
{
title: "订单状态",
- dataIndex: "",
+ width: 150,
+ dataIndex: "OrderStatus",
},
{
title: "工会订单",
- dataIndex: "",
- }
- ]
+ width: 150,
+ dataIndex: "IsUnionOrder",
+ },
+ {
+ title: "订单备注",
+ width: 120,
+ dataIndex: "OrderDesc",
+ },
- //导出的columns 财务
- const exportColumns: any = [
- {
- title: "支付订单号",
- dataIndex: "PAYMENT_CODE",
- },
- {
- title: "会员名称",
- dataIndex: "ORDER_PERSON",
- },
- {
- title: "支付时间",
- dataIndex: "ORDER_DATE",
- },
- {
- title: "下单数量",
- dataIndex: "TOTAL_COUNT",
- },
- {
- title: "采购合计金额",
- dataIndex: "COST_AMOUNT",
- },
- {
- title: "采购不含税合计金额",
- dataIndex: "",
- },
- {
- title: "销售合计金额",
- dataIndex: "",
- },
- {
- title: "销售不含税合计金额",
- dataIndex: "",
- },
- {
- title: "平台手续费",
- dataIndex: "",
- },
- {
- title: "财务到账含税金额",
- dataIndex: "",
- },
- {
- title: "单位名称",
- dataIndex: "OWNERUNIT_NAME",
- },
- {
- title: "付款积分",
- dataIndex: "",
- },
- {
- title: "实付总金额",
- dataIndex: "",
- },
- {
- title: "支付方式",
- dataIndex: "",
- },
- {
- title: "订单状态",
- dataIndex: "",
- },
- {
- title: "工会订单",
- dataIndex: "",
- },
]
const exportTable = (e) => {
@@ -817,6 +787,73 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
setUserList(list)
}
+ // 跟交易台账保持一致的 导出Excel
+ const handleGetExportData = async () => {
+ setGetExportDataLoading(true)
+ const req: any = {
+ ExportType: 1,
+ OwnerUnitId: "911",
+ CompanyId: searchParams?.CompanyId || "",
+ MerchantId: currentUser?.SupplierID || "",
+ SaleBillState: searchParams?.OrderStatus === '0' ? '' : (searchParams?.OrderStatus || ""),
+ SaleBillType: searchParams?.OrderType === '0' ? '' : (searchParams?.OrderType || ""),
+ ChannelType: searchParams?.PaymentMethod || "",
+ StartDate: searchParams?.ORDER_DATE_Start || "",
+ EndDate: searchParams?.ORDER_DATE_End || "",
+ // SearchKeyName: "SupplierName,CommodityName,OrderCode",
+ // SearchKeyValue: searchParams?.searchText || "",
+ // SortStr: ""
+ }
+ console.log('reqreqreq', req);
+
+ const data = await handeGetOnlineBillAccountList(req)
+ console.log('djskadjas', data);
+ setGetExportDataLoading(false)
+ if (data && data.length > 0) {
+ // 用于导出的最后数据
+ let res: any = []
+ let enumList: any = ["PaymentMethod", "OrderStatus", "IsUnionOrder"]
+ let PaymentMethodList: any = [
+ { label: "支付宝", value: "支付宝" },
+ { label: "微信", value: "微信" },
+ { label: "积分兑换", value: "积分兑换" },
+ { label: "余额支付", value: "余额支付" },
+ ]
+ let OrderStatusList: any = [
+ { label: "订单待支付", value: 1005 },
+ { label: "订单待发货", value: 1010 },
+ { label: "订单已发货", value: 2010 },
+ { label: "订单已完成", value: 3000 },
+ { label: "退款申请中", value: 8000 },
+ { label: "订单已退款", value: 8900 },
+ { label: "订单已关闭", value: 9000 },
+ { label: "订单已撤销", value: 9999 },
+ ]
+ let IsUnionOrder: any = [
+ { label: "是", value: 1 },
+ { label: "否", value: 0 }
+ ]
+ res = formatTreeData(JSON.parse(JSON.stringify(data)), [], enumList, [PaymentMethodList, OrderStatusList, IsUnionOrder], [])
+
+ console.log('resresres', res);
+
+ exportXlsxFromProColumnsExcelJS(exportColumns,
+ res,
+ `${`商城订单报表${searchParams?.ORDER_DATE_Start}-${searchParams?.ORDER_DATE_End}`}`,
+ {
+ topTitle: `${`商城订单报表${searchParams?.ORDER_DATE_Start}-${searchParams?.ORDER_DATE_End}`}`
+ // footerItems: [
+ // { label: "审核", value: "", labelSpan: 1, valueSpan: 2, labelAlign: "left", align: "left", startCol: 7 },
+ // { label: "验收", value: "", labelSpan: 1, valueSpan: 2, labelAlign: "left", align: "left", startCol: 12 },
+ // { label: "经办", value: "", labelSpan: 1, valueSpan: 2, labelAlign: "left", align: "left", startCol: 15 }
+ // ]
+ }
+ )
+ } else {
+ message.error('暂无导出数据!')
+ }
+ }
+
return (
{
@@ -895,9 +932,9 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea
ORDER_DATE_Start: params?.ORDER_DATE_Start || "",
ORDER_DATE_End: params?.ORDER_DATE_End || "",
SALEBILL_STATES: params?.orderStatus === "0" ? "1010,2010,3000" : params?.orderStatus,
- CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD,
+ CHANNEL_TYPE: params?.CHANNEL_TYPE === "0" ? "" : params?.CHANNEL_TYPE,
SearchKeyValue: params?.searchText || "",
- MERCHANTS_IDS: params?.MERCHANTS_IDS || "",
+ MERCHANTS_IDS: currentUser?.UserPattern === 4000 ? currentUser?.SupplierID : params?.MERCHANTS_IDS || "",
MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : "",
PAYMETHOD: params?.PAYMETHOD || "",
COMPANY_IDS: params?.COMPANY_IDS || "",
@@ -940,18 +977,23 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser, isComponent?: boolea