From 6bb65062367e8418945daf8bee7825a785dd99b8 Mon Sep 17 00:00:00 2001
From: WangLiNaruto <wl-naruto@outlook.com>
Date: Tue, 14 May 2024 18:47:52 +0800
Subject: [PATCH] pricing changes to ISV and CSP role

---
 .../catalog/services/details/ServiceDetail.tsx  |  2 +-
 .../content/common/ocl/BillingText.tsx          | 17 ++++++++++-------
 .../content/common/ocl/DisplayOclData.tsx       |  2 +-
 .../order/common/BillingModeSelection.tsx       |  2 +-
 .../common/MigrateServiceSubmitBillingMode.tsx  |  2 +-
 src/components/content/order/scale/Scale.tsx    | 10 +++++-----
 .../content/review/ServiceReviewsDetails.tsx    |  2 +-
 7 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/content/catalog/services/details/ServiceDetail.tsx b/src/components/content/catalog/services/details/ServiceDetail.tsx
index e1d8c3eba..a2bf2552e 100644
--- a/src/components/content/catalog/services/details/ServiceDetail.tsx
+++ b/src/components/content/catalog/services/details/ServiceDetail.tsx
@@ -62,7 +62,7 @@ function ServiceDetail({ serviceDetails }: { serviceDetails: ServiceTemplateDeta
                 <Descriptions.Item label='Flavors'>
                     <FlavorsText flavors={serviceDetails.flavors.serviceFlavors} />
                 </Descriptions.Item>
-                <Descriptions.Item label='Billing'>
+                <Descriptions.Item label='Billing Modes'>
                     <BillingText billing={serviceDetails.billing} />
                 </Descriptions.Item>
                 <Descriptions.Item label={'Service API'}>
diff --git a/src/components/content/common/ocl/BillingText.tsx b/src/components/content/common/ocl/BillingText.tsx
index d1c8e71b7..26048e1e4 100644
--- a/src/components/content/common/ocl/BillingText.tsx
+++ b/src/components/content/common/ocl/BillingText.tsx
@@ -5,7 +5,7 @@
 
 import { Billing } from '../../../../xpanse-api/generated';
 import YAML from 'yaml';
-import { Button, Popover } from 'antd';
+import { Col, Row, Tag } from 'antd';
 import React from 'react';
 
 export function BillingText({ billing }: { billing: Billing }): React.JSX.Element {
@@ -16,12 +16,15 @@ export function BillingText({ billing }: { billing: Billing }): React.JSX.Elemen
         // @ts-expect-error
         yamlDocument.contents = billing;
         return (
-            <Popover content={<pre>{yamlDocument.toString()}</pre>} title={'Billing'} trigger='hover'>
-                <Button className={'ocl-data-hover'} type={'link'}>
-                    {/* TODO Will be fixed in #1591 or #1592 */}
-                    {billing.billingModes[0]}
-                </Button>
-            </Popover>
+            <Row>
+                {billing.billingModes.map((billingMode) => {
+                    return (
+                        <Col key={billingMode}>
+                            <Tag color={'blue'}>{billingMode}</Tag>
+                        </Col>
+                    );
+                })}
+            </Row>
         );
     }
     return <></>;
diff --git a/src/components/content/common/ocl/DisplayOclData.tsx b/src/components/content/common/ocl/DisplayOclData.tsx
index ee03fbf24..be62df105 100644
--- a/src/components/content/common/ocl/DisplayOclData.tsx
+++ b/src/components/content/common/ocl/DisplayOclData.tsx
@@ -95,7 +95,7 @@ function DisplayOclData({ ocl }: { ocl: Ocl }): React.JSX.Element | string {
                             <Descriptions.Item label='Flavors'>
                                 <FlavorsText flavors={ocl.flavors.serviceFlavors} />
                             </Descriptions.Item>
-                            <Descriptions.Item label='Billing'>
+                            <Descriptions.Item label='Billing Modes'>
                                 <BillingText billing={ocl.billing} />
                             </Descriptions.Item>
                             <Descriptions.Item label='Deployment'>
diff --git a/src/components/content/order/common/BillingModeSelection.tsx b/src/components/content/order/common/BillingModeSelection.tsx
index 167da4c15..7c9e3eb4a 100644
--- a/src/components/content/order/common/BillingModeSelection.tsx
+++ b/src/components/content/order/common/BillingModeSelection.tsx
@@ -24,7 +24,7 @@ export const BillingModeSelection = ({
         <>
             <Form.Item
                 key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'BillingMode'}</p>}
+                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
                 required={true}
                 rules={[
                     {
diff --git a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
index 8d04a345b..ecf865914 100644
--- a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
+++ b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
@@ -11,7 +11,7 @@ export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBill
         <>
             <Form.Item
                 key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'BillingMode'}</p>}
+                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
                 required={true}
             >
                 <Flex vertical gap='middle'>
diff --git a/src/components/content/order/scale/Scale.tsx b/src/components/content/order/scale/Scale.tsx
index 4f03c151c..5c9f92a9c 100644
--- a/src/components/content/order/scale/Scale.tsx
+++ b/src/components/content/order/scale/Scale.tsx
@@ -167,8 +167,10 @@ export const Scale = ({
                                                                     <Tag color={'blue'}>
                                                                         {/* TODO Will be fixed after #1597 is fixed */}
                                                                         {(20).toString()}
-                                                                        {/* TODO Will be fixed in #1591 or #1592 */}
-                                                                        {currentBilling.billingModes[0]}
+                                                                        {
+                                                                            currentSelectedService.deployRequest
+                                                                                .billingMode
+                                                                        }
                                                                     </Tag>
                                                                 </>
                                                             ) : (
@@ -186,9 +188,7 @@ export const Scale = ({
                                                             <Tag color={'blue'}>
                                                                 {/* TODO Will be fixed after #1597 is fixed */}
                                                                 {(20).toString()}
-                                                                {/* TODO Will be fixed in #1591 or #1592 */}
-                                                                {currentBilling.billingModes[0]}
-                                                                in #1591 or #1592
+                                                                {currentSelectedService.deployRequest.billingMode}
                                                             </Tag>
                                                         </>
                                                     ) : (
diff --git a/src/components/content/review/ServiceReviewsDetails.tsx b/src/components/content/review/ServiceReviewsDetails.tsx
index 50f61ab7a..338384eda 100644
--- a/src/components/content/review/ServiceReviewsDetails.tsx
+++ b/src/components/content/review/ServiceReviewsDetails.tsx
@@ -166,7 +166,7 @@ export const ServiceReviewsDetails = ({
                         <Descriptions.Item label='Flavors'>
                             <FlavorsText flavors={currentServiceTemplateVo.flavors.serviceFlavors} />
                         </Descriptions.Item>
-                        <Descriptions.Item label='Billing'>
+                        <Descriptions.Item label='Billing Modes'>
                             <BillingText billing={currentServiceTemplateVo.billing} />
                         </Descriptions.Item>
                         <Descriptions.Item label='Deployment'>