1240 Refactor WfoSubscriptionGeneral, use WfoSubscriptionDetailSection in form (#1410)

* Refactor the WfoSubscriptionDetail sections, now using the WfoSubscriptionDetailSection.tsx in the form

* Fix imports

* Small refactor

Author: Georgi2704

.changeset/curvy-rabbits-arrive.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Refactor WfoSubscriptionGeneral, use WfoSubscriptionDetailSection in forms

apps/wfo-ui

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019-2023 SURF.
+ * Copyright 2019-2024 SURF.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { WfoLoading, WfoSubscriptionGeneral } from '@/components';
+import { WfoLoading, WfoSubscriptionDetailSection } from '@/components';
 import { useGetSubscriptionDetailQuery } from '@/rtk';
 
 import { FieldProps } from './types';
@@ -35,14 +35,15 @@ const SubscriptionSummaryDisplay = ({
     const { data, isFetching } = useGetSubscriptionDetailQuery({
         subscriptionId,
     });
+    const subscriptionDetail = data?.subscription;
 
-    if (!data) {
+    if (!subscriptionDetail) {
         return <WfoLoading />;
     }
 
     return (
-        <WfoSubscriptionGeneral
-            subscriptionDetail={data.subscription}
+        <WfoSubscriptionDetailSection
+            subscriptionDetail={subscriptionDetail}
             isFetching={isFetching}
         />
     );

package-lock.json

@@ -1,23 +1,17 @@
 import React from 'react';
 
-import { useTranslations } from 'next-intl';
-
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
-import { WfoJsonCodeBlock } from '@/components';
-import { WfoCustomerDescriptionsField } from '@/components/WfoSubscription/WfoCustomerDescriptionsField';
-import { useSubscriptionDetailGeneralSectionConfigurationOverride } from '@/components/WfoSubscription/overrides/useSubscriptionDetailGeneralSectionConfigurationOverride';
+import {
+    WfoSubscriptionDetailSection,
+    WfoSubscriptionFixedInputSection,
+    WfoSubscriptionMetadataSection,
+    WfoSubscriptionProductInfoSection,
+    useSubscriptionDetailGeneralSectionConfigurationOverride,
+} from '@/components';
 import { WfoSubscriptionDetailGeneralConfiguration } from '@/rtk';
 import { SubscriptionDetail } from '@/types';
-import { camelToHuman, formatDate, toOptionalArrayEntry } from '@/utils';
-
-import {
-    WfoProductStatusBadge,
-    WfoSubscriptionStatusBadge,
-} from '../WfoBadges';
-import { WfoKeyValueTableDataType } from '../WfoKeyValueTable/WfoKeyValueTable';
-import { SubscriptionKeyValueBlock } from './SubscriptionKeyValueBlock';
-import { WfoInSyncField } from './WfoInSyncField';
+import { toOptionalArrayEntry } from '@/utils';
 
 interface WfoSubscriptionGeneralProps {
     subscriptionDetail: SubscriptionDetail;
@@ -35,177 +29,45 @@ export const WfoSubscriptionGeneral = ({
     subscriptionDetail,
     isFetching,
 }: WfoSubscriptionGeneralProps) => {
-    const t = useTranslations('subscriptions.detail');
     const { overrideSections } =
         useSubscriptionDetailGeneralSectionConfigurationOverride();
 
-    const hasCustomerDescriptions =
-        subscriptionDetail.customerDescriptions.length > 0;
+    const { metadata, fixedInputs, product } = subscriptionDetail;
 
-    const getSubscriptionDetailBlockData = (): WfoKeyValueTableDataType[] => [
-        {
-            key: t('subscriptionId'),
-            value: subscriptionDetail.subscriptionId,
-            textToCopy: subscriptionDetail.subscriptionId,
-        },
-        {
-            key: t('productName'),
-            value: subscriptionDetail.product.name,
-        },
-        {
-            key: t('description'),
-            value: subscriptionDetail.description,
-        },
-        {
-            key: t('startDate'),
-            value: formatDate(subscriptionDetail.startDate),
-        },
-        {
-            key: t('endDate'),
-            value: formatDate(subscriptionDetail.endDate),
-        },
-        {
-            key: t('status'),
-            value: (
-                <WfoSubscriptionStatusBadge
-                    status={subscriptionDetail.status}
-                />
-            ),
-        },
-        {
-            key: t('insync'),
-            value: (
-                <WfoInSyncField
-                    subscriptionDetail={subscriptionDetail}
-                    isFetching={isFetching}
-                />
-            ),
-        },
-        {
-            key: t('customer'),
-            value:
-                subscriptionDetail && subscriptionDetail.customer
-                    ? `${subscriptionDetail.customer?.fullname}`
-                    : '-',
-        },
-        {
-            key: t('customerUuid'),
-            value:
-                subscriptionDetail && subscriptionDetail.customer
-                    ? `${subscriptionDetail.customer?.customerId}`
-                    : '-',
-            textToCopy: subscriptionDetail.customer?.customerId,
-        },
-        ...toOptionalArrayEntry(
-            {
-                key: t('customerDescriptions'),
-                value: (
-                    <WfoCustomerDescriptionsField
-                        customerDescriptions={
-                            subscriptionDetail.customerDescriptions
-                        }
-                    />
-                ),
-            },
-            hasCustomerDescriptions,
-        ),
-        {
-            key: t('note'),
-            value: (subscriptionDetail && subscriptionDetail.note) || '-',
-        },
-    ];
-
-    const getMetadataBlockData = (): WfoKeyValueTableDataType[] =>
-        Object.entries(subscriptionDetail.metadata).map(([key, value]) => ({
-            key: camelToHuman(key),
-            value: <WfoJsonCodeBlock data={value} isBasicStyle />,
-        }));
-
-    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] =>
-        subscriptionDetail.fixedInputs.map((fixedInput) => ({
-            key: fixedInput.field,
-            value: fixedInput.value,
-        }));
-
-    const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => {
-        const product = subscriptionDetail.product;
-        return [
-            {
-                key: t('name'),
-                value: product.name,
-            },
-            {
-                key: t('description'),
-                value: product.description,
-            },
-            {
-                key: t('productType'),
-                value: product.productType,
-            },
-            {
-                key: t('tag'),
-                value: product.tag,
-            },
-            {
-                key: t('status'),
-                value: <WfoProductStatusBadge status={product.status} />,
-            },
-            {
-                key: t('created'),
-                value: formatDate(product.createdAt),
-            },
-            {
-                key: t('endDate'),
-                value: formatDate(product.endDate),
-            },
-        ];
-    };
-
-    const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
-    const hasFixedInputs = subscriptionDetail.fixedInputs.length > 0;
+    const hasMetadata = Object.entries(metadata).length > 0;
+    const hasFixedInputs = fixedInputs.length > 0;
 
     const defaultConfiguration: WfoSubscriptionDetailGeneralConfiguration[] = [
         {
             id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS,
             node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleSubscriptionDetails')}
-                    keyValues={getSubscriptionDetailBlockData()}
+                <WfoSubscriptionDetailSection
+                    subscriptionDetail={subscriptionDetail}
+                    isFetching={isFetching}
                 />
             ),
         },
         ...toOptionalArrayEntry(
             {
                 id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA,
-                node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('metadata')}
-                        keyValues={getMetadataBlockData()}
-                    />
-                ),
+                node: <WfoSubscriptionMetadataSection metadata={metadata} />,
             },
             hasMetadata,
         ),
         ...toOptionalArrayEntry(
             {
                 id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS,
                 node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('blockTitleFixedInputs')}
-                        keyValues={getFixedInputBlockData()}
+                    <WfoSubscriptionFixedInputSection
+                        fixedInputs={fixedInputs}
                     />
                 ),
             },
             hasFixedInputs,
         ),
         {
             id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO,
-            node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleProductInfo')}
-                    keyValues={getProductInfoBlockData()}
-                />
-            ),
+            node: <WfoSubscriptionProductInfoSection product={product} />,
         },
     ];