合同模板申请接口接入

src/pages/transaction/electronicContracts/addContract/index.tsx

@@ -120,7 +120,7 @@ const AddContract: React.FC<{}> = (props) => {
   }
   /**预览 */
   const onView = (file: any) => {
-    
+    window.location.href = `/api/order/contractTemplate/preview?contractName=${file.name}&contractUrl=${file.file}`
   }
 
   return (
@@ -165,8 +165,8 @@ const AddContract: React.FC<{}> = (props) => {
                       <span>{uploadFile.name}</span>
                     </div>
                     <div className={styles.upload_right}>
-                      <span>预览</span>
-                      <DeleteOutlined onClick={delectContract} />
+                      <span onClick={()=> onView(uploadFile)}>预览</span>
+                      {type && <DeleteOutlined onClick={delectContract} />}
                     </div>
                   </div>
                 }

src/pages/transaction/electronicContracts/apply/index.tsx

@@ -50,6 +50,7 @@ const Apply = () => {
       if(vaildDetail) {
         await PublicApi.postOrderSignatureAuthApply({}).then(res => {
           setSignatureAuthLogId(res.data.signatureAuthLogId);
+          sessionStorage.setItem('signatureAuthLogId', res.data.signatureAuthLogId.toString())
           history.push(`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`)
         })
       }
@@ -88,10 +89,10 @@ const Apply = () => {
             <div className={styles.apply_item}>
               <Descriptions title="申请信息" column={1}>
                 <Descriptions.Item label="公司名称">{data.orgName}</Descriptions.Item>
-                <Descriptions.Item label="统一社会信用代码">{data.orgIdNumber}</Descriptions.Item>
-                <Descriptions.Item label="法人姓名">{data.proposerName}</Descriptions.Item>
-                <Descriptions.Item label="法人手机号">{data.proposerMobile}</Descriptions.Item>
-                <Descriptions.Item label="法人身份证号">{data.proposerIdNumber}</Descriptions.Item>
+                <Descriptions.Item label="统一社会信用代码">{data.orgCode}</Descriptions.Item>
+                <Descriptions.Item label="法人姓名">{data.legalRepName}</Descriptions.Item>
+                <Descriptions.Item label="法人手机号">{data.legalRepMobile}</Descriptions.Item>
+                <Descriptions.Item label="法人身份证号">{data.legalRepIdNo}</Descriptions.Item>
                 <Descriptions.Item label="认证方式">-</Descriptions.Item>
                 <Descriptions.Item label="验证方式">-</Descriptions.Item>
               </Descriptions>
@@ -104,9 +105,9 @@ const Apply = () => {
         {authType === 3 &&
           <div className={styles.apply_item}>
             <Descriptions title="申请信息" column={1}>
-              <Descriptions.Item label="姓名">{data.proposerName}</Descriptions.Item>
-              <Descriptions.Item label="手机号">{data.proposerMobile}</Descriptions.Item>
-              <Descriptions.Item label="身份证号">{data.proposerIdNumber}</Descriptions.Item>
+              <Descriptions.Item label="姓名">{data.legalRepName}</Descriptions.Item>
+              <Descriptions.Item label="手机号">{data.legalRepMobile}</Descriptions.Item>
+              <Descriptions.Item label="身份证号">{data.legalRepIdNo}</Descriptions.Item>
               <Descriptions.Item label="验证方式">-</Descriptions.Item>
             </Descriptions>
           </div>

src/pages/transaction/electronicContracts/components/corporate/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Button, Row, Col, Form, Input, Select } from 'antd'
 import styles from '../index.less'
 import cx from 'classnames'
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
 
 interface queryProps {
   authType: number,
   authTypeFn: Function,
   checkPayWayFn: Function,
+  updateData: Function,
   data: any
 }
 
 const Corporate: React.FC<queryProps> = (props) => {
   const { Option } = Select;
-  const { authType, authTypeFn, checkPayWayFn, data } = props;
-  
+  const { authType, authTypeFn, checkPayWayFn, data , updateData} = props;
+  const [options,setOptions] = useState<any>([])
   const [form] = Form.useForm();
   const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
 
+  // 手机号码验证
+  const userPhoneRule = (rule, value) => {
+    const RegExp = /^1[345678]\d{9}$/gi;
+    if (!value) {
+      return Promise.reject(new Error('请输入您的手机号'))
+    }
+    if (!RegExp.test(value)) {
+      return Promise.reject(new Error('手机号码格式不正确'))
+    }
+    return Promise.resolve();
+  }
+
   // 测试表当提交效果
   const onSubmit = async () => {
     const value = await form.validateFields();
-    console.log(value)
+    if (value) {
+      const query: any = {  
+        signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')),
+        authType: authType,
+        ...data
+      };
+      delete value.code;
+      const parmas = Object.assign(query, value);
+      updateData(parmas)
+      PublicApi.postOrderSignatureAuthAgentAuth(parmas).then(res => {
+        if (res.code === 1000) {
+          authTypeFn(2, 2, 'company')
+          setPayWay(3)
+          checkPayWayFn(3)
+        }
+      })
+    }
   }
   // 切换支付认证方式
   const CheckPayWay = (type: number) => {
@@ -29,6 +59,13 @@ const Corporate: React.FC<queryProps> = (props) => {
     checkPayWayFn(type)
   }
 
+  useEffect(() => {
+    CheckPayWay(1);
+    PublicApi.getManageGetTelCode().then(res => {
+      setOptions(res.data)
+    })
+  }, [])
+
   return (
     <>
       {/**企业认证方式*/}
@@ -40,16 +77,16 @@ const Corporate: React.FC<queryProps> = (props) => {
                 <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
                 <div className={styles.item_control}>
                   <Row className={styles.card_checkbox}>
-                    <Col className={cx(styles.card_checkbox_item, payWay===1&&styles.active)} onClick={()=>CheckPayWay(1)}>支付宝验证</Col>
-                    <Col className={cx(styles.card_checkbox_item, payWay===2&&styles.active)} onClick={()=>CheckPayWay(2)}>对公账户验证</Col>
+                    <Col className={cx(styles.card_checkbox_item, payWay === 1 && styles.active)} onClick={() => CheckPayWay(1)}>支付宝验证</Col>
+                    <Col className={cx(styles.card_checkbox_item, payWay === 2 && styles.active)} onClick={() => CheckPayWay(2)}>对公账户验证</Col>
                   </Row>
                 </div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}></div>
                 <div className={styles.item_control}>
-                  <Button type='primary' onClick={()=>authTypeFn('', 2)}>下一步</Button>
-                  <Button onClick={()=>authTypeFn('', 0)}>上一步</Button>
+                  <Button type='primary' onClick={() => authTypeFn('', 2, 'company')}>下一步</Button>
+                  <Button onClick={() => authTypeFn('', 0, 'stepUp')}>上一步</Button>
                 </div>
               </div>
             </div>
@@ -64,11 +101,11 @@ const Corporate: React.FC<queryProps> = (props) => {
             <div className={styles.info_item_con}>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>公司名称：</div>
-                <div className={styles.item_control}>温州市隆昌皮业有限公司</div>
+                <div className={styles.item_control}>{data.orgName}</div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>统一社会信用代码：</div>
-                <div className={styles.item_control}>4324324325425435</div>
+                <div className={styles.item_control}>{data.orgCode}</div>
               </div>
             </div>
           </div>
@@ -76,10 +113,10 @@ const Corporate: React.FC<queryProps> = (props) => {
             <div className={styles.info_item_title}>经办人信息核验</div>
             <div className={styles.info_item_con}>
               <Form form={form}>
-                <Form.Item label='经办人' name='name' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
+                <Form.Item label='经办人' name='transactorName' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
                   <Input />
                 </Form.Item>
-                <Form.Item label='身份证号码' name='num' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
+                <Form.Item label='身份证号码' name='transactorIdNumber' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
                   <Input />
                 </Form.Item>
                 <Form.Item label='手机号码' colon={false} required={true}>
@@ -87,13 +124,14 @@ const Corporate: React.FC<queryProps> = (props) => {
                     <Col span={7}>
                       <Form.Item style={{ width: '150px' }} name='code' rules={[{ required: true, message: '请选择区号' }]}>
                         <Select style={{ width: '100%' }}>
-                          <Option value="Zhejiang">Zhejiang</Option>
-                          <Option value="Jiangsu">Jiangsu</Option>
+                          {options.map(v => (
+                            <Option key={v} value={v}>{v}</Option>
+                          ))}
                         </Select>
                       </Form.Item>
                     </Col>
                     <Col span={17}>
-                      <Form.Item style={{ width: '398px' }} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
+                      <Form.Item style={{ width: '398px' }} name='transactorMobile' rules={[{ required: true, validator: userPhoneRule, }]}>
                         <Input />
                       </Form.Item>
                     </Col>

src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx

@@ -32,7 +32,7 @@ const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>统一社会信用代码：</div>
-                <div className={styles.item_control}>{data.orgIdNumber}</div>
+                <div className={styles.item_control}>{data.orgCode}</div>
               </div>
             </div>
           </div>
@@ -41,15 +41,15 @@ const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
             <div className={styles.info_item_con}>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>法人姓名：</div>
-                <div className={styles.item_control}>{data.proposerName}</div>
+                <div className={styles.item_control}>{data.legalRepName}</div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>法人手机号：</div>
-                <div className={styles.item_control}>+{data.code} {data.proposerMobile}</div>
+                <div className={styles.item_control}>+{data.code} {data.legalRepMobile}</div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}>法人身份证号：</div>
-                <div className={styles.item_control}>{data.proposerIdNumber}</div>
+                <div className={styles.item_control}>{data.legalRepIdNo}</div>
               </div>
             </div>
           </div>
@@ -67,7 +67,7 @@ const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
               <div className={styles.item_con}>
                 <div className={styles.item_label}></div>
                 <div className={styles.item_control}>
-                  <Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1)}>下一步</Button>
+                  <Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1, 'company')}>下一步</Button>
                 </div>
               </div>
             </div>

src/pages/transaction/electronicContracts/components/index.less

@@ -36,6 +36,7 @@
     justify-content: center;
     border: 1px solid #EBECF0;
     box-sizing: border-box;
+    overflow: hidden;
   }
 
   .alipay_wran {

src/pages/transaction/electronicContracts/components/publicAccount/index.tsx

-import React from 'react'
-import { Result, Button, Form, Input, Row, Col } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { history } from 'umi'
+import { Result, Button, Form, Input, Row, Col, Alert } from 'antd'
 import styles from '../index.less'
 import { AlipaySquareFilled } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
+import QRCode, { QRCodeToDataURLOptions } from 'qrcode';
 
 interface queryProps {
   payWay: number,
-  authType: number
+  authType: number,
+  authTypeFn: Function,
+  data: any
 }
 
 const PublicAccount: React.FC<queryProps> = (props) => {
-  const { payWay, authType } = props;
+  const { payWay, authType, authTypeFn, data } = props;
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+  const [qrCode, setQrCode] = useState<string>('');
+  const [paymentVerify, setPaymentVerify] = useState<number>(0); // 0.确认对公银行账号与开户银行 1.输入对公银行账号收到的转账金额
+  const [query, setQuery] = useState<any>({
+    signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')),
+    bankName: '中国工商银行广州粤秀支行',
+    cardNo: '3602015009201436525',
+    orgName: '广州麦多网络科技有限公司'
+  })
+
+  useEffect(() => {
+    if (payWay === 1) {
+      const options: QRCodeToDataURLOptions = {
+        errorCorrectionLevel: "L",
+        margin: 1,
+        width: 240,
+        height: 240,
+        scal: 177,
+        color: {
+          dark: '#000', // 二维码背景颜色
+          // light: '#000' // 二维码前景颜色
+        },
+        rendererOpts: {
+          quality: 0.9
+        }
+      }
+      PublicApi.postOrderSignatureAuthFaceVerify({ signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')) }).then(res => {
+        QRCode.toDataURL(res.data.authUrl, options).then((url: any) => {
+          setQrCode(url)
+          console.log(res.data.authUrl)
+        })
+          .catch((err: any) => {
+            console.error(err)
+          })
+      })
+    }
+    console.log(authType, payWay)
+  }, [])
+
+  /**发起对公打款验证 */
+  const paymentVerifyFn = () => {
+    delete query.orgName;
+    PublicApi.postOrderSignatureAuthPaymentVerify(query).then(res => {
+      if(res.code === 1000) {
+        setPaymentVerify(1)
+      }
+    })
+  }
+
+  /**对公银行账号收到的转账金额 */
+  const paymentVerifyAmountFn = async () => {
+    const value = await form.validateFields();
+    if(value) {
+      const parmas = {
+        signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')),
+        amount: value.amount
+      }
+      PublicApi.postOrderSignatureAuthPaymentVerifyAmount(parmas).then(res => {
+        if(res.code === 1000) {
+          history.goBack()
+        }
+      })
+    }
+    
+  }
+
+  /**发起手机认证 */
+  const mobileVerifyFn = () => {
+    const parmas = {
+      signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')),
+      legalRepMobile: data.legalRepMobile,
+      agentName: data.transactorName,
+      agentIdNo: data.transactorIdNumber,
+    }
+    PublicApi.postOrderSignatureAuthLegalRepSignVerify(parmas).then(res => {
+      if(res.code === 1000) {
+        setVisible(true)
+        console.log('发送成功')
+      }
+    })
+  }
+
   return (
     <>
       {payWay === 1 &&
@@ -21,7 +109,9 @@ const PublicAccount: React.FC<queryProps> = (props) => {
               <div key='key'>
                 <div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
                 <div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的提示进行验证</div>
-                <div className={styles.alipay_qrcode} />
+                <div className={styles.alipay_qrcode}>
+                  <img src={qrCode} alt="" />
+                </div>
                 <div className={styles.alipay_wran}>
                   <AlipaySquareFilled
                     style={{
@@ -32,6 +122,9 @@ const PublicAccount: React.FC<queryProps> = (props) => {
                   />
                   支付宝扫一扫
                 </div>
+                <div className={styles.bank_btn} style={{ textAlign: 'center' }}>
+                  <Button style={{ marginTop: '24px' }} onClick={() => authTypeFn('', 1, 'stepUp')}>上一步</Button>
+                </div>
               </div>
             ]}
           />
@@ -39,6 +132,7 @@ const PublicAccount: React.FC<queryProps> = (props) => {
       }
       {(authType === 1 && payWay === 2) &&
         <>
+          {paymentVerify === 0 &&
             <div className={styles.info_wrap}>
               {/** 对公账户确认*/}
               <Result
@@ -50,25 +144,27 @@ const PublicAccount: React.FC<queryProps> = (props) => {
                     <div className={styles.bank_info}>
                       <div className={styles.bank_info_item}>
                         <div className={styles.bank_info_label}>账户名称：</div>
-                      <div className={styles.bank_info_control}>温州市隆昌皮具有限公司</div>
+                        <div className={styles.bank_info_control}>{data.orgName}</div>
                       </div>
                       <div className={styles.bank_info_item}>
                         <div className={styles.bank_info_label}>银行账号：</div>
-                      <div className={styles.bank_info_control}>622203 43324 42343</div>
+                        <div className={styles.bank_info_control}>{data.bankName}</div>
                       </div>
                       <div className={styles.bank_info_item}>
                         <div className={styles.bank_info_label}>开户行：</div>
-                      <div className={styles.bank_info_control}>中国建设银行广州市分行营业部</div>
+                        <div className={styles.bank_info_control}>{data.cardNo}</div>
                       </div>
                     </div>
                     <div className={styles.bank_btn}>
-                    <Button type='primary'>下一步</Button>
-                    <Button>上一步</Button>
+                      <Button type='primary' onClick={paymentVerifyFn}>下一步</Button>
+                      <Button onClick={() => authTypeFn('', 1, 'stepUp')}>上一步</Button>
                     </div>
                   </div>
                 ]}
               />
             </div>
+          }
+          {paymentVerify === 1 &&
             <div className={styles.info_wrap}>
               {/** 对公账户打款*/}
               <Result
@@ -78,20 +174,21 @@ const PublicAccount: React.FC<queryProps> = (props) => {
                     <div className={styles.info_wran}>受银行结算时间的影响，到账时间为5分钟-72小时不等，请耐心等候</div>
                     <div className={styles.info_wran}>如果打款未到账，可在4小时后&nbsp;<span style={{ color: '#00B37A' }}>重新申请打款</span></div>
                     <div className={styles.bank_info_le} style={{ backgroundColor: '#FFF', marginBottom: '0px' }}>
-                    <Form>
-                      <Form.Item colon={false} label='转账金额' name="PRICE" rules={[{ required: true, message: '请输入转账金额' }]}>
+                      <Form form={form}>
+                        <Form.Item colon={false} label='转账金额' name="amount" rules={[{ required: true, message: '请输入转账金额' }]}>
                           <Input placeholder='请输入您收到的转账金额' />
                         </Form.Item>
                       </Form>
                     </div>
                     <div className={styles.bank_btn} style={{ width: '230px' }}>
-                    <Button type='primary'>下一步</Button>
-                    <Button>上一步</Button>
+                      <Button type='primary' onClick={paymentVerifyAmountFn}>下一步</Button>
+                      <Button onClick={() => authTypeFn('', 1, 'stepUp')}>上一步</Button>
                     </div>
                   </div>
                 ]}
               />
             </div>
+          }
         </>
       }
 
@@ -105,15 +202,29 @@ const PublicAccount: React.FC<queryProps> = (props) => {
                 <div className={styles.info_wran}>法人收到验证短信后，根据短信中的链接，在手机端完成委托书签署</div>
                 <div className={styles.info_phone_number}>
                   <div>法人手机号：</div>
-                  <div>+86 186 7700 2345</div>
+                  <div>+86 {data.transactorMobile}</div>
                 </div>
                 <div className={styles.bank_btn} style={{ textAlign: 'center' }}>
-                  <Button type='primary'>发送授权短信</Button>
+                  <Button type='primary' onClick={mobileVerifyFn}>发送授权短信</Button>
                   <Button style={{ width: '116px' }}>返回</Button>
                 </div>
               </div>
             ]}
           />
+          {visible && 
+            <Alert 
+              style={{width:'420px',margin: 'auto'}} 
+              message="短信发送成功" type="success" 
+              description={
+                <>
+                  <span>请等待法人在手机页面完成授权书签署，</span><br/>
+                  <span>您可点击返回按钮回到电子签章申请页查看认证结果</span>
+                </>
+              }
+              showIcon 
+              closable 
+            />
+          }
         </div>
       }
 
@@ -152,6 +263,8 @@ const PublicAccount: React.FC<queryProps> = (props) => {
           />
         </div>
       }
+
+      
     </>
   )
 }

src/pages/transaction/electronicContracts/components/test/index.tsx

@@ -65,10 +65,10 @@ const Test:React.FC<queryProps> = (props) => {
             <Form.Item label='公司名称' name='orgName' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
               <Input />
             </Form.Item>
-            <Form.Item label='统一社会信用代码' name='orgIdNumber' colon={false} rules={[{ required: true, message: '统一社会信用代码' }]}>
+            <Form.Item label='统一社会信用代码' name='orgCode' colon={false} rules={[{ required: true, message: '统一社会信用代码' }]}>
               <Input />
             </Form.Item>
-            <Form.Item label='法人姓名' name='proposerName' colon={false} rules={[{ required: true, message: '法人姓名' }]}>
+            <Form.Item label='法人姓名' name='legalRepName' colon={false} rules={[{ required: true, message: '法人姓名' }]}>
               <Input />
             </Form.Item>
             <Form.Item label='法人手机号' colon={false} required={true} style={{marginBottom: '0px'}}>
@@ -83,13 +83,13 @@ const Test:React.FC<queryProps> = (props) => {
                   </Form.Item>
                 </Col>
                 <Col span={17}>
-                  <Form.Item style={{ width: '398px' }} name='proposerMobile' rules={[{ required: true, validator: userPhoneRule, }]}>
+                  <Form.Item style={{ width: '398px' }} name='legalRepMobile' rules={[{ required: true, validator: userPhoneRule, }]}>
                     <Input />
                   </Form.Item>
                 </Col>
               </Row>
             </Form.Item>
-            <Form.Item label='法人身份证号' name='proposerIdNumber' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
+            <Form.Item label='法人身份证号' name='legalRepIdNo' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
               <Input />
             </Form.Item>
           </Form>

src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx

@@ -17,24 +17,40 @@ const EnterpriseCertified = () => {
 
   /**电子签章认证查询 */
   useEffect(() => {
-    // PublicApi.getOrderSignatureAuthGet({}).then((res:any) => {
-    //   setData(res.data)
-    // })
     const formdata = JSON.parse(sessionStorage.getItem('formdata'));
     setData(formdata)
   },[])
 
   //认证方式切换Fn
-  const authTypeFn = (type: number, steps: number) => {
+  const authTypeFn = (type: number, steps: number, name: string) => {
     if (type) { setAuthType(type); }
+    if(name === 'company' && type === 1) {
+      delete data.code;
+      const parmas = {
+        signatureAuthLogId: Number(sessionStorage.getItem('signatureAuthLogId')),
+        authType,
+        ...data
+      }
+      PublicApi.postOrderSignatureAuthLegalRepAuth(parmas).then(res => {
+        if(res.code === 1000) {
+          setStep(steps)
+        }
+      })
+    } else if(name === 'stepUp' || (name === 'company' && type === 2) || name === 'company') {
       setStep(steps)
     }
+  }
 
   //切换支付方式
   const checkPayWayFn = (type: number) => {
     setPayWay(type)
   }
 
+  /**更新选择法人认证的时候更新data */
+  const updateData = (parmas: any) => {
+    setData(parmas)
+  }
+
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
@@ -54,12 +70,15 @@ const EnterpriseCertified = () => {
           data={data}
           checkPayWayFn={checkPayWayFn}
           authTypeFn={authTypeFn}
+          updateData={updateData}
         />
       }
       {step === 2 &&
         <PublicAccount
           authType={authType}
+          authTypeFn={authTypeFn}
           payWay={payWay}
+          data={data}
         />}
     </PageHeaderWrapper>
   )