상세 태그 수정

src/entities/settlement/ui/detail/settlement-detail.tsx

@@ -132,64 +132,62 @@ export const SettlementDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
-                  <div className="txn-num-group">
-                    <div className="txn-amount">
-                      <div className="value">
-                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
-                        <NumericFormat
-                          value={ settlementAmount }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
-                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
-                      </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                      <NumericFormat
+                        value={ settlementAmount }
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                     </div>
-                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
                   </div>
-                }
-                { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
-                  <div className="txn-num-group">
-                    <div className="txn-amount">
-                      <div className="value">
-                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
-                        <NumericFormat
-                          value={ transactionAmount }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
-                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
-                      </div>
+                  <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
+                </div>
+              }
+              { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                      <NumericFormat
+                        value={ transactionAmount }
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                     </div>
-                    <div className="txn-date">{ merchantName }</div>
                   </div>
-                }
-                <div className="txn-divider minus"></div>
-                
-                <AmountInfoWrap
-                  periodType={ periodType }
-                  amountInfo={ amountInfo }
-                  settlementAmount={ settlementAmount }
-                ></AmountInfoWrap>
-                <div className="txn-divider"></div>
-                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
-                  <SettlementInfoWrap
-                    settlementInfo={ settlementInfo }
-                    isOpen={ showSettlement }
-                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
-                  ></SettlementInfoWrap>
-                }
-                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
-                  <TransactionInfoWrap
-                    transactionInfo={ transactionInfo }
-                    isOpen={ showTransaction }
-                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
-                  ></TransactionInfoWrap>
-                }
-              </div>
+                  <div className="txn-date">{ merchantName }</div>
+                </div>
+              }
+              <div className="txn-divider minus"></div>
+              
+              <AmountInfoWrap
+                periodType={ periodType }
+                amountInfo={ amountInfo }
+                settlementAmount={ settlementAmount }
+              ></AmountInfoWrap>
+              <div className="txn-divider"></div>
+              { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                <SettlementInfoWrap
+                  settlementInfo={ settlementInfo }
+                  isOpen={ showSettlement }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></SettlementInfoWrap>
+              }
+              { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                <TransactionInfoWrap
+                  transactionInfo={ transactionInfo }
+                  isOpen={ showTransaction }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></TransactionInfoWrap>
+              }
             </div>
           </div>
         </div>

src/entities/support/ui/detail/faq-detail.tsx

@@ -56,12 +56,10 @@ export const FaqDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane sub active">
-              <div className="faq-detail">
-                <div className="faq-detail__title">{ title }</div>
-                <div className="faq-detail__divider"></div>
-                <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
-              </div>
+            <div className="faq-detail">
+              <div className="faq-detail__title">{ title }</div>
+              <div className="faq-detail__divider"></div>
+              <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
             </div>
           </div>
         }

src/entities/support/ui/detail/notice-detail.tsx

@@ -62,14 +62,12 @@ export const NoticeDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane sub active">
-              <div className="option-list">
-                <div className="notice-detail">
-                  <div className="notice-detail__title">{ result.title }</div>
-                  <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
-                  <div className="notice-detail__divider"></div>
-                  <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
-                </div>
+            <div className="option-list">
+              <div className="notice-detail">
+                <div className="notice-detail__title">{ result.title }</div>
+                <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
+                <div className="notice-detail__divider"></div>
+                <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
               </div>
             </div>
           </div>

src/entities/support/ui/detail/qna-detail.tsx

@@ -63,35 +63,33 @@ export const QnaDetail = ({
                 ></FullMenuClose>
               </div>
             </div>
-            <div className="tab-pane active">
-              <div className="inq-detail">
-                <div className="inq-detail__head">
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
-                    <span className="inq-head-text bold">{ result?.title }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
-                    <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
-                    <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
-                  </div>
-                  <div className="inq-detail__row">
-                    <span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
-                    <span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
-                  </div>
+            <div className="inq-detail">
+              <div className="inq-detail__head">
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
+                  <span className="inq-head-text bold">{ result?.title }</span>
                 </div>
-                <div className="inq-detail__divider"></div>
-                <div className="inq-detail__section">
-                  <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
+                  <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
                 </div>
-                <div className="inq-detail__section">
-                  <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
+                  <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
                 </div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
+                  <span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
+                </div>
+              </div>
+              <div className="inq-detail__divider"></div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
+                <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
+              </div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
+                <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
               </div>
             </div>
           </div>

src/entities/transaction/ui/detail/all-transaction-detail.tsx

@@ -157,72 +157,71 @@ export const AllTransactionDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list pb-86">
-              <div className="txn-detail">
-                <AmountInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
-                  tid={ tid } 
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></AmountInfoSection>
-                <div className="txn-divider minus"></div>
-                <ImportantInfoSection
-                  transactionCategory={ TransactionCategory.AllTransaction }
-                  importantInfo={ importantInfo }
-                  serviceCode={ serviceCode }
-                ></ImportantInfoSection>
-                { !!paymentInfo && 
-                  <>
-                    <div className="txn-divider"></div>
-                    <PaymentInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      paymentInfo={ paymentInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showPaymentInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></PaymentInfoSection>
-                  </>
-                }
-                { !!transactionInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <TransactionInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      transactionInfo={ transactionInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showTransactionInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></TransactionInfoSection>
-                  </>
-                }
-                { !!settlementInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <SettlementInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      settlementInfo={ settlementInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showSettlementInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></SettlementInfoSection>
-                  </>
-                }
-                { !!partCancelInfo &&
-                  <>
-                    <div className="txn-divider"></div>
-                    <PartCancelInfoSection
-                      transactionCategory={ TransactionCategory.AllTransaction }
-                      partCancelInfo={ partCancelInfo }
-                      serviceCode={ serviceCode }
-                      isOpen={ showPartCancelInfo }
-                      onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                    ></PartCancelInfoSection>
-                  </>
-                }
-              </div>
+          
+          <div className="option-list pb-86">
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.AllTransaction }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                tid={ tid } 
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></AmountInfoSection>
+              <div className="txn-divider minus"></div>
+              <ImportantInfoSection
+                transactionCategory={ TransactionCategory.AllTransaction }
+                importantInfo={ importantInfo }
+                serviceCode={ serviceCode }
+              ></ImportantInfoSection>
+              { !!paymentInfo && 
+                <>
+                  <div className="txn-divider"></div>
+                  <PaymentInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    paymentInfo={ paymentInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showPaymentInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></PaymentInfoSection>
+                </>
+              }
+              { !!transactionInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <TransactionInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    transactionInfo={ transactionInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showTransactionInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></TransactionInfoSection>
+                </>
+              }
+              { !!settlementInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <SettlementInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    settlementInfo={ settlementInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showSettlementInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></SettlementInfoSection>
+                </>
+              }
+              { !!partCancelInfo &&
+                <>
+                  <div className="txn-divider"></div>
+                  <PartCancelInfoSection
+                    transactionCategory={ TransactionCategory.AllTransaction }
+                    partCancelInfo={ partCancelInfo }
+                    serviceCode={ serviceCode }
+                    isOpen={ showPartCancelInfo }
+                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                  ></PartCancelInfoSection>
+                </>
+              }
             </div>
           </div>
         </div>

src/entities/transaction/ui/detail/billing-detail.tsx

@@ -73,31 +73,29 @@ export const BillingDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <div className="txn-num-group">
-                  <div className="txn-amount">
-                    <div className="value">
-                      { i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
-                      <NumericFormat
-                        value={ amountInfo?.transactionAmount }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
-                      { i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
-                    </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <div className="txn-num-group">
+                <div className="txn-amount">
+                  <div className="value">
+                    { i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
+                    <NumericFormat
+                      value={ amountInfo?.transactionAmount }
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                    { i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
                   </div>
-                  <div className="txn-mid">
-                    <span className="value">{ amountInfo?.buyerName }</span>
-                  </div>
-                  <div className="txn-doc"></div>
                 </div>
-                <div className="txn-divider"></div>
-                <BillingInfoSection
-                  billingInfo={ billingInfo }
-                ></BillingInfoSection>
+                <div className="txn-mid">
+                  <span className="value">{ amountInfo?.buyerName }</span>
+                </div>
+                <div className="txn-doc"></div>
               </div>
+              <div className="txn-divider"></div>
+              <BillingInfoSection
+                billingInfo={ billingInfo }
+              ></BillingInfoSection>
             </div>
           </div>
         </div>

src/entities/transaction/ui/detail/cash-receit-detail.tsx

@@ -128,44 +128,42 @@ export const CashReceiptDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
-              <div className="txn-detail">
-                <AmountInfoSection
+          <div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.CashReceipt }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                purposeType={ purposeType }
+                canDownloadReceipt={ canDownloadReceipt }
+              ></AmountInfoSection>
+              <div className="txn-divider"></div>
+              <IssueInfoSection
+                transactionCategory={ TransactionCategory.CashReceipt }
+                issueInfo={ issueInfo }
+                purposeType={ purposeType }
+              ></IssueInfoSection>
+              <div className="txn-divider minus"></div>
+              { !!detailInfo &&
+                <DetailInfoSection
                   transactionCategory={ TransactionCategory.CashReceipt }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
+                  detailInfo={ detailInfo }
+                  isOpen={ showDetailInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                  purposeType={ purposeType }
-                  canDownloadReceipt={ canDownloadReceipt }
-                ></AmountInfoSection>
-                <div className="txn-divider"></div>
-                <IssueInfoSection
-                  transactionCategory={ TransactionCategory.CashReceipt }
-                  issueInfo={ issueInfo }
-                  purposeType={ purposeType }
-                ></IssueInfoSection>
-                <div className="txn-divider minus"></div>
-                { !!detailInfo &&
-                  <DetailInfoSection
-                    transactionCategory={ TransactionCategory.CashReceipt }
-                    detailInfo={ detailInfo }
-                    isOpen={ showDetailInfo }
-                    onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                  ></DetailInfoSection>
-                }
-              </div>
+                ></DetailInfoSection>
+              }
             </div>
-            { (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
-              (issueInfo?.processResult === '발급완료') &&
-              <div className="apply-row">
-                <button
-                  className="btn-50 btn-blue flex-1"
-                  onClick={ () => onClickToPurposeUpdate() }
-                >{ t('cashReceipt.changePurpose') }</button>
-              </div>
-            }
           </div>
+          { (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
+            (issueInfo?.processResult === '발급완료') &&
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToPurposeUpdate() }
+              >{ t('cashReceipt.changePurpose') }</button>
+            </div>
+          }
         </div>
       </motion.div>
       <CashReceitPurposeUpdateBottomSheet

src/entities/transaction/ui/detail/escrow-detail.tsx

@@ -152,57 +152,55 @@ export const EscrowDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <AmountInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmountInfo }
-                  tid={ tid }
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></AmountInfoSection>
-                <div className="txn-divider minus"></div>
-                <ImportantInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  importantInfo={ importantInfo }
-                ></ImportantInfoSection>
-                <div className="txn-divider minus"></div>
-                <EscrowInfoSection
-                  escrowInfo={ escrowInfo }
-                  isOpen={ showEscroInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></EscrowInfoSection>
-                <div className="txn-divider minus"></div>
-                <PaymentInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  paymentInfo={ paymentInfo }
-                  isOpen={ showPaymentInfo }
-                  serviceCode={ serviceCode }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></PaymentInfoSection>
-                <div className="txn-divider"></div>
-                <TransactionInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  transactionInfo={ transactionInfo }
-                  isOpen={ showTransactionInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></TransactionInfoSection>
-                <div className="txn-divider"></div>
-                <SettlementInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  settlementInfo={ settlementInfo }
-                  isOpen={ showSettlementInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></SettlementInfoSection>
-                <div className="txn-divider"></div>
-                <MerchantInfoSection
-                  merchantInfo={ merchantInfo }
-                  isOpen={ showMerchantInfo }
-                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
-                ></MerchantInfoSection>
-              </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <AmountInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                amountInfo={ amountInfo }
+                isOpen={ showAmountInfo }
+                tid={ tid }
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></AmountInfoSection>
+              <div className="txn-divider minus"></div>
+              <ImportantInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                importantInfo={ importantInfo }
+              ></ImportantInfoSection>
+              <div className="txn-divider minus"></div>
+              <EscrowInfoSection
+                escrowInfo={ escrowInfo }
+                isOpen={ showEscroInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></EscrowInfoSection>
+              <div className="txn-divider minus"></div>
+              <PaymentInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                paymentInfo={ paymentInfo }
+                isOpen={ showPaymentInfo }
+                serviceCode={ serviceCode }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></PaymentInfoSection>
+              <div className="txn-divider"></div>
+              <TransactionInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                transactionInfo={ transactionInfo }
+                isOpen={ showTransactionInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></TransactionInfoSection>
+              <div className="txn-divider"></div>
+              <SettlementInfoSection
+                transactionCategory={ TransactionCategory.Escrow }
+                settlementInfo={ settlementInfo }
+                isOpen={ showSettlementInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></SettlementInfoSection>
+              <div className="txn-divider"></div>
+              <MerchantInfoSection
+                merchantInfo={ merchantInfo }
+                isOpen={ showMerchantInfo }
+                onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+              ></MerchantInfoSection>
             </div>
           </div>
         </div>

src/entities/vat-return/ui/detail/tax-invoice-detail.tsx

@@ -117,25 +117,23 @@ export const TaxInvoiceDetail = ({
               ></FullMenuClose>
             </div>
           </div>
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <AmountSection
-                  detail={ detail }
-                ></AmountSection>
-                <div className="txn-divider minus"></div>
-                <IssueSection
-                  detail={ detail }
-                ></IssueSection>
-                <div className="txn-divider minus"></div>
-                <ReceiverSection
-                  detail={ detail }
-                ></ReceiverSection>
-                <div className="txn-divider"></div>
-                <SupplierSection
-                  detail={ detail }
-                ></SupplierSection>
-              </div>
+          <div className="option-list">
+            <div className="txn-detail">
+              <AmountSection
+                detail={ detail }
+              ></AmountSection>
+              <div className="txn-divider minus"></div>
+              <IssueSection
+                detail={ detail }
+              ></IssueSection>
+              <div className="txn-divider minus"></div>
+              <ReceiverSection
+                detail={ detail }
+              ></ReceiverSection>
+              <div className="txn-divider"></div>
+              <SupplierSection
+                detail={ detail }
+              ></SupplierSection>
             </div>
           </div>
         </div>