Просмотр IPO

maksim-zakharov · Aug 11, 2024 · 6b10bc0 · 6b10bc0
1 parent bf63cbf
commit 6b10bc0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git a/src/index.less b/src/index.less
@@ -78,7 +78,7 @@
 
 
 @media only screen and (max-width: 700px) and (display-mode: standalone) {
-  .MobileFooter .ant-menu-item{
+  .MobileFooter .ant-menu-item {
     padding-bottom: 0;
   }
 }
@@ -126,7 +126,6 @@
   //  //overflow: auto;
   //  position: relative;
   //}
-
   h1 {
     padding: 0 16px;
   }
@@ -2436,7 +2435,7 @@ html.dark .container > div.qty.negative, html.dark .container > div.loss-or-prof
   width: 100%;
   overflow: auto;
 
-  &::-webkit-scrollbar{
+  &::-webkit-scrollbar {
     display: none;
   }
 }
@@ -2459,7 +2458,7 @@ html.dark .container > div.qty.negative, html.dark .container > div.loss-or-prof
     border-radius: 8px;
   }
 
-  .date{
+  .date {
     background-color: rgba(var(--pro-button-primary-bg), 1);
     //color: rgb(var(--pro-black));
     font-weight: 500;
@@ -2470,25 +2469,40 @@ html.dark .container > div.qty.negative, html.dark .container > div.loss-or-prof
     margin-bottom: 4px;
   }
 
-  h4{
+  h4 {
     margin: 0;
     font-size: 20px;
   }
 
-  .desc{
+  .desc {
     margin-top: 4px;
     display: block;
   }
 }
 
-.what-buy-container{
-  h2, h3, h4{
+.what-buy-container {
+  h2, h3, h4 {
     margin-top: 24px;
     margin-bottom: 0;
   }
+
+  .title {
+    font-weight: 600;
+    font-size: 24px;
+    padding: 16px 0;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .status {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
-.description-span{
+.description-span {
   color: rgba(var(--pro-text-01), 0.65);
   font-size: 14px;
 }
diff --git a/src/pages/WhatBuy.tsx b/src/pages/WhatBuy.tsx
@@ -10,6 +10,7 @@ import {Button} from "antd";
 import {ShareAltOutlined} from "@ant-design/icons";
 import DraggableDrawer from "../common/DraggableDrawerHOC";
 import {moneyFormat} from "../common/utils";
+import {humanize} from "../utils";
 
 const WhatBuy = ({getIsinBySymbol}) => {
     const {isMobile} = useWindowDimensions();
@@ -57,7 +58,8 @@ const WhatBuy = ({getIsinBySymbol}) => {
         <div className="pad-lr">
             <h3 style={{marginTop: 0}}>Сейчас размещаются</h3>
             <div className="ipo-container">
-                {offers.map((offer) => <div className="ipo-card" key={offer.issuer} onClick={() => onSelectOffer(offer)}>
+                {offers.map((offer) => <div className="ipo-card" key={offer.issuer}
+                                            onClick={() => onSelectOffer(offer)}>
                     <img src={`https://storage.alorbroker.ru/${offer.logo}`} alt={offer.issuer}/>
                     <div>
                         <span
@@ -86,18 +88,36 @@ const WhatBuy = ({getIsinBySymbol}) => {
                          })} icon={<ShareAltOutlined/>}/>}
         >
             <div className="description-container what-buy-container pad-lr">
-                <h2>Облигации</h2>
-                <h2>{offerById?.issuer}</h2>
+                <img src={`https://storage.alorbroker.ru/${offerById?.logo}`} alt={offerById?.issuer}/>
+
+                <div className="title">
+                    <div>Облигации</div>
+                    <div>{offerById?.issuer}</div>
+                </div>
+
+                <div className="status">
+                    <div>{new Date(offerById?.collectApplicationDateTo) > new Date() ? 'Сбор поручений' : 'Сбор закончен'}</div>
+                    <div>
+                        <div>
+                            до {moment(offerById?.collectApplicationDateTo).format('LL').split(',')[0].toLowerCase()} {moment(offerById?.collectApplicationDateTo).format('HH:mm')}
+                        </div>
+                        <span
+                            className="description-span">{humanize(moment.duration(moment(offerById?.collectApplicationDateTo).diff(moment(), 'days'), 'days'))}</span>
+                    </div>
+                </div>
 
                 <h2>{offerById?.potentialYield}%</h2>
                 <span className="description-span">Ориентировочная ставка купона</span>
 
                 <h2>{moneyFormat(offerById?.minParticipation, 0, 0)}</h2>
                 <span className="description-span">Минимальный размер участия</span>
 
-                <h2>{moment(offerById?.dateIssuance).format('LL, ddd').replaceAll(' г.', '')}</h2>
+                <h2>{moment(offerById?.dateIssuance).format('LL').replaceAll(' г.', '')}</h2>
                 <span className="description-span">Дата размещения</span>
 
+                <h3>О компании</h3>
+                <p dangerouslySetInnerHTML={{__html: offerById?.description}}/>
+
                 <h3>Дополнительно</h3>
                 <h4>Срок обращения</h4>
                 <p>{offerById?.maturity}.</p>
@@ -109,12 +129,14 @@ const WhatBuy = ({getIsinBySymbol}) => {
                 {/*<p></p>*/}
                 {/*<h4>Амортизация</h4>*/}
                 {/*<p></p>*/}
-                {/*<h4>Возможность отмены</h4>*/}
-                {/*<p></p>*/}
+                <h4>Возможность отмены</h4>
+                <p>До {moment(offerById?.collectApplicationDateTo).format('HH:mm')} мск {moment(offerById?.collectApplicationDateTo).format('LL').split(',')[0].toLowerCase()} поданное поручение может быть отменено. После этого времени Брокер приступает к исполнению поручения.</p>
                 <h4>Брокерская комиссия за сделку</h4>
                 <p>Брокерская комиссия за сделку составит {offerById?.transactionFee}</p>
-                <h4>Для квалифицированных инвесторов</h4>
-                <p></p>
+                {!offerById?.termsParticipation && <>
+                    <h4>Для квалифицированных инвесторов</h4>
+                    <p>Участие в размещении доступно только для квалифицированных инвесторов</p>
+                </>}
             </div>
         </DraggableDrawer>
     </>