LPD-48899 Add CX and Fragment types to app table

is-solutions-delivery · Feb 28, 2025 · a80b667 · a80b667
1 parent 55d8c2f
commit a80b667
Show file tree

Hide file tree

Showing 17 changed files with 122 additions and 66 deletions.
diff --git a/...etplace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/Order.ts b/...etplace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/Order.ts
@@ -15,12 +15,24 @@ export enum ORDER_CUSTOM_FIELDS {
 
 export enum ORDER_TYPES {
 	ADDONS = 'ADDONS',
-	DXPAPP = 'DXPAPP',
+	CLIENT_EXTENSION = 'CLIENT_EXTENSION',
 	CLOUDAPP = 'CLOUDAPP',
+	DXPAPP = 'DXPAPP',
+	FRAGMENT = 'FRAGMENT',
 	SOLUTIONS7 = 'SOLUTIONS7',
 	SOLUTIONS30 = 'SOLUTIONS30',
 }
 
+export const ORDER_TYPES_LABELS: {[key: string]: string} = {
+	[ORDER_TYPES.ADDONS]: 'Add-Ons',
+	[ORDER_TYPES.CLIENT_EXTENSION]: 'Client Extension',
+	[ORDER_TYPES.CLOUDAPP]: 'Cloud',
+	[ORDER_TYPES.DXPAPP]: 'DXP',
+	[ORDER_TYPES.FRAGMENT]: 'Fragment',
+	[ORDER_TYPES.SOLUTIONS7]: 'Solutions 7',
+	[ORDER_TYPES.SOLUTIONS30]: 'Solutions 30',
+};
+
 export enum ORDER_WORKFLOW_STATUS_CODE {
 	CANCELLED = 8,
 	COMPLETED = 0,

diff --git a/...ace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/OrderType.ts b/...ace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/OrderType.ts
diff --git a/...e-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/ProductType.ts b/...e-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/ProductType.ts
@@ -4,7 +4,15 @@
  */
 
 export enum ProductType {
+	CLIENT_EXTENSION = 'client-extension',
 	CLOUD = 'cloud',
 	DXP = 'dxp',
-	FRAGMENTS = 'fragments',
+	FRAGMENT = 'fragment',
 }
+
+export const ProductTypeLabels: {[key: string]: string} = {
+	[ProductType.CLIENT_EXTENSION]: 'Client Extension',
+	[ProductType.CLOUD]: 'Cloud',
+	[ProductType.DXP]: 'DXP',
+	[ProductType.FRAGMENT]: 'Fragment',
+};
diff --git a/...feray-marketplace-custom-element/src/pages/AdministratorDashboard/pages/Metrics/index.tsx b/...feray-marketplace-custom-element/src/pages/AdministratorDashboard/pages/Metrics/index.tsx
@@ -45,8 +45,10 @@ const Metrics = () => {
 			HeadlessCommerceAdminOrderImpl.getOrders(
 				new URLSearchParams({
 					filter: SearchBuilder.in('orderTypeExternalReferenceCode', [
+						ORDER_TYPES.CLIENT_EXTENSION,
 						ORDER_TYPES.CLOUDAPP,
 						ORDER_TYPES.DXPAPP,
+						ORDER_TYPES.FRAGMENT,
 					]),
 					nestedFields: 'account,orderItems',
 					pageSize: '30',

diff --git a/...e-custom-element/src/pages/CustomerDashboard/components/OrderDetailsStatusDescription.tsx b/...e-custom-element/src/pages/CustomerDashboard/components/OrderDetailsStatusDescription.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import purchasedAppIcon from '../../../assets/icons/purchased_app_icon.svg';
 import OrderStatus from '../../../components/OrderStatus';
-import {OrderType} from '../../../enums/OrderType';
+import {ORDER_TYPES} from '../../../enums/Order';
 
 enum OrderAppTypeEnum {
 	DXPAPP = 'DXP APP',
@@ -21,11 +21,11 @@ type OrderDetailsStatusDescriptionProps = {
 };
 
 const getOrderDetailsType = (orderTypeExternalReferenceCode: string) => {
-	if (orderTypeExternalReferenceCode === OrderType.DXP) {
+	if (orderTypeExternalReferenceCode === ORDER_TYPES.DXPAPP) {
 		return OrderAppTypeEnum.DXPAPP;
 	}
 
-	if (orderTypeExternalReferenceCode === OrderType.CLOUD) {
+	if (orderTypeExternalReferenceCode === ORDER_TYPES.CLOUDAPP) {
 		return OrderAppTypeEnum.CLOUDAPP;
 	}
 };

diff --git a/...-marketplace-custom-element/src/pages/CustomerDashboard/components/PurchasedAppsTable.tsx b/...-marketplace-custom-element/src/pages/CustomerDashboard/components/PurchasedAppsTable.tsx
@@ -14,8 +14,7 @@ import OrderStatus, {
 } from '../../../components/OrderStatus';
 import Table from '../../../components/Table/Table';
 import {Analytics} from '../../../core/Analytics';
-import {ORDER_TYPES} from '../../../enums/Order';
-import {OrderType} from '../../../enums/OrderType';
+import {ORDER_TYPES, ORDER_TYPES_LABELS} from '../../../enums/Order';
 import {PRODUCT_IMAGE_FALLBACK_CATEGORIES} from '../../../enums/Product';
 import i18n from '../../../i18n';
 import {getProductImageFallback} from '../../../utils/productUtils';
@@ -91,10 +90,11 @@ const AppsTable: React.FC<AppsTableProps> = ({items}) => {
 				},
 				{
 					key: 'orderTypeExternalReferenceCode',
-					render: (orderTypeExternalReferenceCode) =>
-						orderTypeExternalReferenceCode === OrderType.DXP
-							? 'DXP'
-							: 'Cloud',
+					render: (orderTypeExternalReferenceCode) => {
+						return ORDER_TYPES_LABELS[
+							orderTypeExternalReferenceCode
+						];
+					},
 					title: i18n.translate('app-type'),
 				},
 				{
@@ -165,7 +165,7 @@ const AppsTable: React.FC<AppsTableProps> = ({items}) => {
 
 									<ClayDropDown.ItemList>
 										{orderTypeExternalReferenceCode ===
-											OrderType.DXP &&
+											ORDER_TYPES.DXPAPP &&
 											!isFreeApp && (
 												<>
 													<ClayTooltipProvider>
@@ -224,7 +224,7 @@ const AppsTable: React.FC<AppsTableProps> = ({items}) => {
 										)}
 
 										{orderTypeExternalReferenceCode ===
-											OrderType.DXP && (
+											ORDER_TYPES.DXPAPP && (
 											<ClayTooltipProvider>
 												<ClayDropDown.Item
 													data-tooltip-align="left"

diff --git a/...feray-marketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/App/AppOutlet.tsx b/...feray-marketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/App/AppOutlet.tsx
@@ -14,8 +14,10 @@ import {
 
 import Navbar, {NavbarProps} from '../../../../../components/Navbar';
 import {PageRenderer} from '../../../../../components/Page';
-import {ORDER_WORKFLOW_STATUS_CODE} from '../../../../../enums/Order';
-import {OrderType} from '../../../../../enums/OrderType';
+import {
+	ORDER_TYPES,
+	ORDER_WORKFLOW_STATUS_CODE,
+} from '../../../../../enums/Order';
 import useGetProductByOrderId from '../../../../../hooks/useGetProductByOrderId';
 import i18n from '../../../../../i18n';
 import getProductPriceModel from '../../../../GetApp/utils/getProductPriceModel';
@@ -113,7 +115,7 @@ const AppOutlet = () => {
 
 				if (
 					placedOrder.orderTypeExternalReferenceCode ===
-					OrderType.CLOUD
+					ORDER_TYPES.CLOUDAPP
 				) {
 					const isDownloadableCloud =
 						product?.productSpecifications.some((specification) => {
@@ -144,7 +146,8 @@ const AppOutlet = () => {
 				}
 
 				if (
-					placedOrder.orderTypeExternalReferenceCode === OrderType.DXP
+					placedOrder.orderTypeExternalReferenceCode ===
+					ORDER_TYPES.DXPAPP
 				) {
 					return [
 						...tabs,

diff --git a/...rketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/App/Licenses/Licenses.tsx b/...rketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/App/Licenses/Licenses.tsx
@@ -20,7 +20,6 @@ import {Statuses as OrderStatuses} from '../../../../../../components/OrderStatu
 import StatusCell from '../../../../../../components/Table/StatusCell';
 import Table from '../../../../../../components/Table/Table';
 import {useMarketplaceContext} from '../../../../../../context/MarketplaceContext';
-import {OrderType} from '../../../../../../enums/OrderType';
 import useGetProductByOrderId from '../../../../../../hooks/useGetProductByOrderId';
 import i18n from '../../../../../../i18n';
 import provisioningOAuth2 from '../../../../../../services/oauth/Provisioning';
@@ -33,6 +32,7 @@ import TitleSubtitleHeader from '../../../../components/TitleSubtitleHeader';
 import useLicenseActions from './useLicensesActions';
 
 import './Licenses.scss';
+import {ORDER_TYPES} from '../../../../../../enums/Order';
 
 type OutletContext = ReturnType<typeof useGetProductByOrderId>;
 
@@ -61,7 +61,7 @@ const Licenses = () => {
 	const product = outletContext?.product;
 
 	const keyType =
-		placedOrder?.orderTypeExternalReferenceCode === OrderType.DXP
+		placedOrder?.orderTypeExternalReferenceCode === ORDER_TYPES.DXPAPP
 			? 'On-Premise'
 			: 'Cloud';
 

diff --git a/...sions/liferay-marketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/index.tsx b/...sions/liferay-marketplace-custom-element/src/pages/CustomerDashboard/pages/Apps/index.tsx
@@ -10,6 +10,7 @@ import {useState} from 'react';
 import {DashboardPage} from '../../../../components/DashBoardPage/DashboardPage';
 import {DashboardEmptyTable} from '../../../../components/DashboardTable/DashboardEmptyTable';
 import Page from '../../../../components/Page';
+import {ORDER_TYPES} from '../../../../enums/Order';
 import {Liferay} from '../../../../liferay/liferay';
 import {getSiteURL} from '../../../../utils/site';
 import {useCustomerDashboardOutletContext} from '../../CustomerDashboardOutlet';
@@ -27,7 +28,12 @@ const Apps = () => {
 	} = usePurchasedOrders({
 		accountId: selectedAccount?.id as number,
 		channelId: Number(Liferay.CommerceContext.commerceChannelId),
-		orderTypeExternalReferenceCodes: ['CLOUDAPP', 'DXPAPP'],
+		orderTypeExternalReferenceCodes: [
+			ORDER_TYPES.CLIENT_EXTENSION,
+			ORDER_TYPES.CLOUDAPP,
+			ORDER_TYPES.DXPAPP,
+			ORDER_TYPES.FRAGMENT,
+		],
 		page,
 		pageSize: 10,
 	});

diff --git a/...ensions/liferay-marketplace-custom-element/src/pages/GetApp/utils/getProductOrderTypes.ts b/...ensions/liferay-marketplace-custom-element/src/pages/GetApp/utils/getProductOrderTypes.ts
@@ -3,12 +3,20 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 
+import {ProductType} from '../../../enums/ProductType';
+
+const productTypeERC: {[key: string]: {}} = {
+	[ProductType.CLIENT_EXTENSION]: {externalReferenceCode: 'CLIENT_EXTENSION'},
+	[ProductType.CLOUD]: {externalReferenceCode: 'CLOUDAPP'},
+	[ProductType.DXP]: {externalReferenceCode: 'DXPAPP'},
+	[ProductType.FRAGMENT]: {externalReferenceCode: 'FRAGMENT'},
+};
+
 export function getProductOrderTypes(productSpecificationValue: any) {
-	return {
-		externalReferenceCode:
-			productSpecificationValue.toLowerCase() === 'cloud'
-				? 'CLOUDAPP'
-				: 'DXPAPP',
-		name: {},
-	} as OrderType;
+	const productSpecification = productSpecificationValue.toLowerCase();
+
+	return (
+		(productTypeERC[productSpecification] as OrderType) ||
+		({externalReferenceCode: 'NOTYPE'} as OrderType)
+	);
 }
diff --git a/...iferay-marketplace-custom-element/src/pages/GetApp/utils/getProductSpecificationValues.ts b/...iferay-marketplace-custom-element/src/pages/GetApp/utils/getProductSpecificationValues.ts
@@ -6,10 +6,11 @@
 export function getProductSpecificationValues(
 	productSpecifications: DeliveryProductSpecification[]
 ) {
-	const productSpecification = productSpecifications.find(
-		({value}) =>
-			value.toLowerCase() === 'cloud' || value.toLowerCase() === 'dxp'
-	) as DeliveryProductSpecification;
+	const validValues = ['client-extension', 'cloud', 'dxp', 'fragment'];
+
+	const productSpecification = productSpecifications.find(({value}) => {
+		return validValues.includes(value.toLowerCase());
+	}) as DeliveryProductSpecification;
 
 	return productSpecification?.value ?? '';
 }
diff --git a/...ray-marketplace-custom-element/src/pages/PublisherDashboard/PublisherDashboardPageUtil.ts b/...ray-marketplace-custom-element/src/pages/PublisherDashboard/PublisherDashboardPageUtil.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 
+import {ProductTypeLabels} from '../../enums/ProductType';
 import {Liferay} from '../../liferay/liferay';
 
 export function formatDate(date: string) {
@@ -26,18 +27,11 @@ export function getProductTypeFromSpecifications(
 ) {
 	let productType = 'no type';
 
-	specifications.forEach((specification: ProductSpecification) => {
+	for (const specification of specifications) {
 		if (specification.specificationKey === 'type') {
 			productType = specification.value.en_US;
 
-			if (productType === 'cloud') {
-				productType = 'Cloud';
-			}
-			else if (productType === 'dxp') {
-				productType = 'DXP';
-			}
+			return ProductTypeLabels[productType] ?? productType;
 		}
-	});
-
-	return productType;
+	}
 }
diff --git a/...PublisherDashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/ProvideAppBuildPage.tsx b/...PublisherDashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/ProvideAppBuildPage.tsx
@@ -568,7 +568,7 @@ export function ProvideAppBuildPage({
 							<RadioCard
 								description={i18n.translate(
 									appType.value === ProductType.CLOUD ||
-										ProductType.FRAGMENTS
+										appType.value === ProductType.FRAGMENT
 										? 'use-any-local-zip-files-to-upload-max-file-size-is-500-mb'
 										: 'please-be-sure-to-specify-liferay-compatibility-through-the-appropriate-properties-or-xml-files-in-your-plugin'
 								)}
@@ -586,7 +586,7 @@ export function ProvideAppBuildPage({
 								}
 								title={
 									appType.value === ProductType.CLOUD ||
-									ProductType.FRAGMENTS
+									appType.value === ProductType.FRAGMENT
 										? i18n.translate('via-zip-upload')
 										: i18n.translate(
 												'via-liferay-plugin-packages'
@@ -652,20 +652,20 @@ export function ProvideAppBuildPage({
 					<Section
 						description={i18n.translate(
 							appType.value === ProductType.CLOUD ||
-								ProductType.FRAGMENTS
+								appType.value === ProductType.FRAGMENT
 								? 'select-a-local-file-to-upload'
 								: 'if-the-app-is-compatible-with-different-updates-of-74-please-upload-multiple-packages-for-each-update-or-update-compatibility-range'
 						)}
 						label={i18n.translate(
 							appType.value === ProductType.CLOUD ||
-								ProductType.FRAGMENTS
+								appType.value === ProductType.FRAGMENT
 								? 'upload-zip-files'
 								: 'upload-liferay-plugin-packages'
 						)}
 						required
 						tooltip={i18n.translate(
 							appType.value === ProductType.CLOUD ||
-								ProductType.FRAGMENTS
+								appType.value === ProductType.FRAGMENT
 								? 'you-can-upload-one-or-many-zip-files-max-total-size-is-500-mb'
 								: 'only-jar-war-files-are-allowed-max-file-size-is-500mb'
 						)}

diff --git a/...Dashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/components/UploadAppPackages.tsx b/...Dashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/components/UploadAppPackages.tsx
@@ -26,7 +26,7 @@ export const acceptFileTypes = {
 		'application/java-archive': ['.jar'],
 		'application/octet-stream': ['.war'],
 	},
-	[ProductType.FRAGMENTS]: {
+	[ProductType.FRAGMENT]: {
 		'application/java-archive': ['.zip'],
 	},
 };
@@ -107,7 +107,7 @@ export function UploadAppPackagesComponent({
 					buttonText={i18n.translate('select-a-file')}
 					description={
 						appType.value === ProductType.CLOUD ||
-						ProductType.FRAGMENTS
+						appType.value === ProductType.FRAGMENT
 							? i18n.translate(
 									'only-zip-files-are-allowed-max-file-size-is-500-mb'
 								)

diff --git a/...ard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/constants/offeringTypesDescriptions.ts b/...ard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/constants/offeringTypesDescriptions.ts
@@ -7,6 +7,13 @@ import {ProductType} from '../../../../../../../enums/ProductType';
 import i18n from '../../../../../../../i18n';
 
 export const offeringTypesDescription = {
+	[ProductType.CLIENT_EXTENSION]: [
+		{
+			description: 'placeholder',
+			disabled: true,
+			label: i18n.translate('liferay-self-hosted'),
+		},
+	],
 	[ProductType.CLOUD]: [
 		{
 			description: i18n.translate(
@@ -49,7 +56,7 @@ export const offeringTypesDescription = {
 			label: i18n.translate('liferay-saas'),
 		},
 	],
-	[ProductType.FRAGMENTS]: [
+	[ProductType.FRAGMENT]: [
 		{
 			description: i18n.translate(
 				'the-dxp-app-is-module-based-and-is-compatible-with-7-4-builds-of-liferay-dxp'

diff --git a/...blisherDashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/constants/productTypes.ts b/...blisherDashboard/pages/Apps/AppCreationFlow/ProvideAppBuildPage/constants/productTypes.ts
@@ -29,6 +29,6 @@ export const ProductTypeOptions: ProductTypeOption[] = [
 		description:
 			'Modular components, built with HTML, CSS, and JavaScript, offer extensible and reusable elements or collections of elements for constructing content pages and templates.',
 		label: i18n.translate('fragment-collection-of-fragments'),
-		value: ProductType.FRAGMENTS,
+		value: ProductType.FRAGMENT,
 	},
 ];