Merge branch 'eclipse-xpanse:main' into main

WangLiNaruto · Jun 11, 2024 · 6bb41a1 · 6bb41a1
2 parents 0442bc2 + 5678283
commit 6bb41a1
Show file tree

Hide file tree

Showing 18 changed files with 455 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,12 +5,12 @@
     "type": "module",
     "dependencies": {
         "@ant-design/icons": "^5.3.7",
-        "@axa-fr/react-oidc": "^7.22.6",
+        "@axa-fr/react-oidc": "^7.22.7",
         "@tanstack/react-query": "^5.40.1",
         "antd": "^5.18.0",
         "echarts": "5.5.0",
         "echarts-for-react": "^3.0.2",
-        "rc-field-form": "^2.2.0",
+        "rc-field-form": "^2.2.1",
         "rc-menu": "^9.14.0",
         "rc-tabs": "^15.1.0",
         "react": "^18.2.0",
@@ -124,15 +124,15 @@
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "knip": "^5.17.4",
+        "knip": "^5.18.0",
         "openapi-typescript-codegen": "^0.29.0",
         "prettier": "3.3.1",
         "prettier-plugin-organize-imports": "^3.2.4",
         "release-it": "^17.3.0",
         "ts-jest": "^29.1.4",
         "typescript": "5.4.5",
         "uuid": "^9.0.1",
-        "vite": "^5.2.12"
+        "vite": "^5.2.13"
     },
     "overrides": {
         "react-scripts": {

diff --git a/src/components/content/order/common/FlavorFeatures.tsx b/src/components/content/order/common/FlavorFeatures.tsx
@@ -10,7 +10,7 @@ import flavorStyles from '../../../../styles/flavor.module.css';
 import serviceModifyStyles from '../../../../styles/service-modify.module.css';
 import { ServiceFlavor } from '../../../../xpanse-api/generated';
 
-export const FlavorFeatures = (flavor: ServiceFlavor): React.JSX.Element => {
+export const FlavorFeatures = ({ flavor }: { flavor: ServiceFlavor }): React.JSX.Element => {
     return (
         <>
             <List

diff --git a/src/components/content/order/common/FlavorPrice.tsx b/src/components/content/order/common/FlavorPrice.tsx
@@ -3,17 +3,77 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Tag } from 'antd';
+import { Tag, Typography } from 'antd';
 import React from 'react';
+import flavorStyles from '../../../../styles/flavor.module.css';
 import serviceModifyStyles from '../../../../styles/service-modify.module.css';
+import { ServiceFlavor } from '../../../../xpanse-api/generated';
+import { convertToFlavorMap, getMappedPeriod } from '../formDataHelpers/flavorHelper.ts';
+import { ServiceFlavorWithPriceResult } from '../types/ServiceFlavorWithPrice.ts';
+import { FlavorPriceRetry } from './FlavorPriceRetry.tsx';
 
-export const FlavorPrice = (): React.JSX.Element => {
+export const FlavorPrice = ({
+    flavor,
+    isSuccess,
+    priceData,
+    isError,
+    error,
+    retryRequest,
+}: {
+    flavor: ServiceFlavor;
+    isSuccess: boolean;
+    priceData?: ServiceFlavorWithPriceResult[];
+    isError: boolean;
+    error: Error | null;
+    retryRequest: () => void;
+}): React.JSX.Element => {
+    const { Text } = Typography;
+    const flavorMap = convertToFlavorMap(priceData);
     return (
         <>
-            <Tag color={'blue'} className={serviceModifyStyles.flavorPriceContent}>
-                {/* TODO Will be fixed after #1597 is fixed */}
-                {(20).toString().concat(' ').concat('EUR/').concat('hour')}
-            </Tag>
+            {isSuccess ? (
+                <div className={flavorStyles.flavorPriceContent}>
+                    {flavor.name && flavorMap[flavor.name].price.successful ? (
+                        <>
+                            {flavorMap[flavor.name].price.recurringPrice ? (
+                                <Tag color={'blue'} className={serviceModifyStyles.flavorPriceContent}>
+                                    {flavorMap[flavor.name].price.recurringPrice?.cost
+                                        .toString()
+                                        .concat(' ')
+                                        .concat(flavorMap[flavor.name].price.recurringPrice?.currency ?? '')
+                                        .concat('/')
+                                        .concat(
+                                            getMappedPeriod(flavorMap[flavor.name].price.recurringPrice?.period ?? '')
+                                        )}
+                                </Tag>
+                            ) : null}
+                            {flavorMap[flavor.name].price.oneTimePaymentPrice ? (
+                                <div className={flavorStyles.flavorOneTimePriceContent}>
+                                    <Text type={'secondary'} className={flavorStyles.antTypography}>
+                                        {flavorMap[flavor.name].price.oneTimePaymentPrice?.cost
+                                            .toString()
+                                            .concat(' ')
+                                            .concat(flavorMap[flavor.name].price.oneTimePaymentPrice?.currency ?? '')
+                                            .concat('/')
+                                            .concat(
+                                                getMappedPeriod(
+                                                    flavorMap[flavor.name].price.oneTimePaymentPrice?.period ?? ''
+                                                )
+                                            )}
+                                    </Text>
+                                </div>
+                            ) : null}
+                        </>
+                    ) : (
+                        <>
+                            <FlavorPriceRetry flavor={flavor} flavorMap={flavorMap} retryRequest={retryRequest} />
+                        </>
+                    )}
+                </div>
+            ) : null}
+            {isError ? (
+                <FlavorPriceRetry flavor={flavor} flavorMap={flavorMap} error={error} retryRequest={retryRequest} />
+            ) : null}
         </>
     );
 };
diff --git a/src/components/content/order/common/FlavorPriceRetry.tsx b/src/components/content/order/common/FlavorPriceRetry.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { CloseCircleOutlined, InfoCircleOutlined, RedoOutlined } from '@ant-design/icons';
+import { Button, Popover } from 'antd';
+import React from 'react';
+import flavorStyles from '../../../../styles/flavor.module.css';
+import { ServiceFlavor } from '../../../../xpanse-api/generated';
+import { convertStringArrayToUnorderedList } from '../../../utils/generateUnorderedList.tsx';
+import { getServicePriceErrorDetails } from '../formDataHelpers/flavorHelper.ts';
+import { ServiceFlavorWithPriceResult } from '../types/ServiceFlavorWithPrice.ts';
+
+export const FlavorPriceRetry = ({
+    flavor,
+    flavorMap,
+    error,
+    retryRequest,
+}: {
+    flavor: ServiceFlavor;
+    flavorMap: Record<string, ServiceFlavorWithPriceResult>;
+    error?: Error | null;
+    retryRequest: () => void;
+}): React.JSX.Element => {
+    return (
+        <>
+            {' '}
+            <Popover
+                content={convertStringArrayToUnorderedList(
+                    error ? getServicePriceErrorDetails(error) : [flavorMap[flavor.name].price.errorMessage ?? '']
+                )}
+                title={
+                    <>
+                        <CloseCircleOutlined className={flavorStyles.flavorPriceErrorInfo} />
+                        &nbsp;&nbsp;{'Error:'}
+                    </>
+                }
+            >
+                <Button size='small' type='text' danger={true} iconPosition={'end'} icon={<InfoCircleOutlined />}>
+                    Price Unavailable
+                </Button>
+            </Popover>
+            <Popover content={<>{'retry request'}</>} className={flavorStyles.flavorRetryPopover}>
+                <RedoOutlined
+                    className={`${flavorStyles.flavorPriceErrorInfo} ${flavorStyles.flavorPriceReload} ${flavorStyles.antPopoverInnerContent}`}
+                    onClick={() => {
+                        retryRequest();
+                    }}
+                />
+            </Popover>
+        </>
+    );
+};
diff --git a/src/components/content/order/common/FlavorSelection.tsx b/src/components/content/order/common/FlavorSelection.tsx
@@ -3,24 +3,57 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Flex, Form, Radio } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Flex, Form, Radio, Spin } from 'antd';
 import React from 'react';
 import flavorStyles from '../../../../styles/flavor.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
-import { ServiceFlavor } from '../../../../xpanse-api/generated';
-import { FlavorFeatures } from './FlavorFeatures';
+import { DeployRequest, ServiceFlavor, UserOrderableServiceVo } from '../../../../xpanse-api/generated';
+import { FlavorFeatures } from './FlavorFeatures.tsx';
 import { FlavorPrice } from './FlavorPrice';
 import { FlavorTitle } from './FlavorTitle';
+import useGetServicePricesQuery from './useGetServicePricesQuery.ts';
 
 export const FlavorSelection = ({
     selectFlavor,
     flavorList,
     onChangeFlavor,
+    selectVersion,
+    selectCsp,
+    services,
+    selectRegion,
+    selectBillingMode,
 }: {
     selectFlavor: string;
     flavorList?: ServiceFlavor[];
     onChangeFlavor?: (newFlavor: string) => void;
+    selectVersion: string;
+    selectCsp: UserOrderableServiceVo.csp;
+    services?: UserOrderableServiceVo[];
+    selectRegion: string;
+    selectBillingMode: DeployRequest.billingMode;
 }): React.JSX.Element => {
+    const getServiceTemplateId = (): string => {
+        if (services) {
+            const service = services.find((service) => service.version === selectVersion && service.csp === selectCsp);
+            return service ? service.serviceTemplateId : '';
+        }
+        return '';
+    };
+
+    const getServicePriceQuery = useGetServicePricesQuery(
+        getServiceTemplateId(),
+        selectRegion,
+        selectBillingMode,
+        flavorList
+    );
+
+    const retryRequest = () => {
+        if (selectRegion.length > 0 && getServiceTemplateId().length > 0) {
+            void getServicePriceQuery.refetch();
+        }
+    };
+
     return (
         <>
             <div
@@ -50,9 +83,29 @@ export const FlavorSelection = ({
                                             value={flavor.name}
                                             className={flavorStyles.customRadioButtonContent}
                                         >
-                                            {FlavorTitle(flavor.name)}
-                                            <div className={flavorStyles.flavorPriceContent}>{FlavorPrice()}</div>
-                                            {FlavorFeatures(flavor)}
+                                            <FlavorTitle title={flavor.name} />
+                                            {getServicePriceQuery.isLoading || getServicePriceQuery.isFetching ? (
+                                                <div className={flavorStyles.flavorSkeleton}>
+                                                    <Spin
+                                                        indicator={
+                                                            <LoadingOutlined
+                                                                className={flavorStyles.flavorPriceLoading}
+                                                                spin
+                                                            />
+                                                        }
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <FlavorPrice
+                                                    flavor={flavor}
+                                                    isSuccess={getServicePriceQuery.isSuccess}
+                                                    priceData={getServicePriceQuery.data}
+                                                    isError={getServicePriceQuery.isError}
+                                                    error={getServicePriceQuery.error}
+                                                    retryRequest={retryRequest}
+                                                />
+                                            )}
+                                            <FlavorFeatures flavor={flavor} />
                                         </Radio.Button>
                                     </div>
                                 ))}

diff --git a/src/components/content/order/common/FlavorTitle.tsx b/src/components/content/order/common/FlavorTitle.tsx
@@ -6,6 +6,6 @@
 import React from 'react';
 import flavorStyles from '../../../../styles/flavor.module.css';
 
-export const FlavorTitle = (title: string): React.JSX.Element => {
+export const FlavorTitle = ({ title }: { title: string }): React.JSX.Element => {
     return <span className={flavorStyles.flavorCardTitle}>{title}</span>;
 };