LPD-67547 Add option to create new account on Product Purchase flow

CalebJamesH · brianchandotcom · commit da82bce8fea7 · 2025-10-15T15:33:20.000-03:00
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/Checkout/AccountSelection.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/Checkout/AccountSelection.tsx
@@ -78,6 +78,7 @@ const AccountSelection: React.FC<AccountSelectionProps> = ({
 							selectedAccount?.externalReferenceCode ===
 							accountInfo.externalReferenceCode,
 						title: accountInfo.name,
+						type: accountInfo.type,
 						value: accountInfo,
 					};
 				})
@@ -116,7 +117,12 @@ const AccountSelection: React.FC<AccountSelectionProps> = ({
 					contentList={accounts.map((account) => ({
 						...account,
 						selected: selectedAccount?.id === account?.id,
-						title: <span className="h5">{account.title}</span>,
+						title: (
+							<div className='pt-2'>
+								<p className="h5 mb-1">{account.title}</p>
+								<p className="h5 text-muted mb-0 text-capitalize">{account.type}</p>
+							</div>
+						),
 					}))}
 					leftRadio
 					onSelect={handleSelectAccount}
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/ProductPurchase/Footer/index.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/ProductPurchase/Footer/index.tsx
@@ -27,8 +27,8 @@ const ProductPurchaseFooter: React.FC<ProductPurchaseFooterProps> = ({
 	const {productPurchaseCart} = useProductPurchaseOutletContext();
 
 	return (
-		<div className="d-flex flex-column mt-6 w-100">
-			<div className="align-items-center d-flex justify-content-between mt-6 w-100">
+		<div className="d-flex flex-column mt-3 w-100">
+			<div className="align-items-center d-flex justify-content-between mt-3 w-100">
 				<ClayButton
 					className="font-weight-bold"
 					displayType="unstyled"
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/RadioCardList/RadioCardList.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/RadioCardList/RadioCardList.tsx
@@ -22,7 +22,6 @@ type RadioCardContent<T = any> = {
 
 type RadioCardListProps<T> = {
 	contentList: RadioCardContent<T>[];
-	customization?: boolean;
 	leftRadio?: boolean;
 	onSelect: (value: RadioOption<T>) => void;
 	showImage?: boolean;
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/RadioCardList/components/RadioCard.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/components/RadioCardList/components/RadioCard.tsx
@@ -4,15 +4,14 @@
  */
 
 import {ClayRadio} from '@clayui/form';
+import {ReactNode} from 'react';
+import classNames from 'classnames';
+import ClayIcon from '@clayui/icon';
 import ClayLabel from '@clayui/label';
 import ClaySticker from '@clayui/sticker';
-import classNames from 'classnames';
 
 import './RadioCard.scss';
 
-import ClayIcon from '@clayui/icon';
-import {ReactNode} from 'react';
-
 interface RadioCardProps {
 	activeRadio: boolean | undefined;
 	description?: ReactNode;
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/Account.ts b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/enums/Account.ts
@@ -15,3 +15,10 @@ export enum AccountType {
 	TECHNOLOGY_PARTNER = 'Technology Partner',
 	STRATEGIC_PARTNER = 'Strategic Partner',
 }
+
+export enum AccountTypes {
+	BUSINESS = 'business',
+	GUEST = 'guest', 
+	PERSON = 'person',
+	SUPPLIER = 'supplier'
+}
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/i18n/en_US.ts b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/i18n/en_US.ts
@@ -99,6 +99,8 @@ export default {
 	'billing-email': 'Billing Email',
 	'blank-site': 'Blank Site',
 	'build': 'Build',
+	'business': 'Business',
+	'business-account': 'Business Account',
 	'business-address': 'Business Address',
 	'by-requesting-a-publisher-account-you-agree-to-the':
 		'By requesting a Publisher account, you agree to the',
@@ -200,6 +202,8 @@ export default {
 		'Design the storefront for your solution. This will set the information displayed on the solution’s page. This section is dedicated to creating the solution’s detail content.',
 	'design-the-storefront-for-your-solution-this-will-set-the-information-displayed-on-the-solutions-page-this-section-is-dedicated-to-creating-the-solutions-header':
 		'Design the storefront for your solution. This will set the information displayed on the solution’s page. This section is dedicated to creating the solution’s header.',
+	'designed-for-companies-with-a-taxvat-number-this-account-type-also-lets-you-manage-multiple-users-under-one-profile-click-the-button-below-to-create-your-first-business-account-today':
+		'Designed for companies with a Tax/VAT number, this account type also lets you manage multiple users under one profile. Click the button below to create your first Business Account today!',
 	'details': 'Details',
 	'developer-license-prices': 'Developer License Prices',
 	'developer-licenses-are-limited-to-5-unique-addresses-and-should-not-be-used-for-full-scale-production-deployments':
@@ -271,6 +275,10 @@ export default {
 	'file-not-available-for-download': 'File not available for download.',
 	'filter': 'Filter',
 	'first-name': 'First Name',
+	'for-businesses-with-a-vattax-number-this-account-type-support-multiple-users-it-also-possible-to-join-an-already-existing-business-account':
+		'For businesses with a VAT/Tax number; this account type support multiple users. It also possible to join an already existing business account',
+	'for-individuals-without-a-vattax-number-this-account-support-single-user-only':
+		'For individuals without a VAT/Tax number; this account support single user only.',
 	'form': 'Form',
 	'fragment': 'Fragment',
 	'fragment-collection-of-fragments': 'Fragment/Collection of Fragments',
@@ -440,6 +448,8 @@ export default {
 	'payment-summary': 'Payment Summary',
 	'paypal-account': 'PayPal Account',
 	'pending': 'Pending',
+	'personal': 'Personal',
+	'personal-account': 'Personal Account',
 	'phone': 'Phone',
 	'phone-number': 'Phone Number',
 	'please-be-aware-that-since-you-are-adding-a-new-version-of-the-app-the-only-section-visible-is-the-build':
@@ -677,6 +687,8 @@ export default {
 		'Unable to download your license file.  Please try again and/or contact support via the manage menu on the dashboard.',
 	'under-review': 'Under Review',
 	'uninstall': 'Uninstall',
+	'unlock-exclusive-benefits-with-a-business-account':
+		'Unlock exclusive benefits with a Business Account!',
 	'unpaid': 'Unpaid',
 	'upload-at-least-one-image-or-add-a-video-url':
 		'Upload at least one image, or add a video URL',
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/ProductPurchaseOutlet.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/ProductPurchaseOutlet.tsx
@@ -229,7 +229,7 @@ const ProductPurchaseOutlet: React.FC<ProductPurchaseOutletProps> = ({
 				className={classNames('mt-7', {'mt-7': accounts.length === 1})}
 			>
 				{isTinyDisplay && (
-					<ProductPurchase.CircleSteps
+				<ProductPurchase.CircleSteps
 						className="my-5 px-8"
 						steps={steps}
 					/>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/AccountSelection.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/AccountSelection.tsx
@@ -11,6 +11,7 @@ import ProductPurchaseFooter from '../../../components/ProductPurchase/Footer';
 import {useMarketplaceContext} from '../../../context/MarketplaceContext';
 import i18n from '../../../i18n';
 import {useProductPurchaseOutletContext} from '../ProductPurchaseOutlet';
+import CreateNewAccount from './CreateNewAccount';
 
 type ProductPurchaseAccountSelectionProps = {
 	children?: ReactNode;
@@ -57,11 +58,15 @@ const ProductPurchaseAccountSelection: React.FC<
 			}}
 			title={i18n.translate('account-selection')}
 		>
-			<AccountSelection
-				onSelectAccount={setSelectedAccount}
-				selectedAccount={selectedAccount}
-				userAccount={myUserAccount}
-			/>
+			{!!accounts.length && (
+				<AccountSelection
+					onSelectAccount={setSelectedAccount}
+					selectedAccount={selectedAccount}
+					userAccount={myUserAccount}
+				/>
+			)}
+
+			<CreateNewAccount accounts={accounts} />
 
 			{children}
 		</ProductPurchase.Shell>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/App/AccountSelection.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/App/AccountSelection.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 
-import {useEffect} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import i18n from '../../../../i18n';
@@ -13,43 +12,13 @@ import ProductPurchaseAccountSelection from '../AccountSelection';
 
 const AccountSelection = () => {
 	const {
-		accounts,
 		actions: {nextStep},
-		isSingleAccount,
 		product,
 		selectedAccount,
-		setSelectedAccount,
 	} = useProductPurchaseOutletContext();
 
 	const navigate = useNavigate();
 
-	useEffect(() => {
-		const {isFreeApp} = getProductPriceModel(product);
-
-		if (isFreeApp && isSingleAccount) {
-			if (isSingleAccount && !selectedAccount) {
-				setSelectedAccount(accounts[0]);
-			}
-
-			return navigate('summary', {replace: true});
-		}
-
-		if (isSingleAccount) {
-			if (isSingleAccount && !selectedAccount) {
-				setSelectedAccount(accounts[0]);
-			}
-
-			navigate('license', {replace: true});
-		}
-	}, [
-		accounts,
-		isSingleAccount,
-		selectedAccount,
-		product,
-		navigate,
-		setSelectedAccount,
-	]);
-
 	const {isFreeApp} = getProductPriceModel(product);
 
 	return (
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/App/PaymentMethod/OrderSummary/OrderSummary.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/App/PaymentMethod/OrderSummary/OrderSummary.tsx
@@ -69,7 +69,6 @@ const OrderSummary = () => {
 	const {
 		actions: {previousStep},
 		handlePurchase,
-		isSingleAccount,
 		marketplaceDeliveryProduct,
 		product,
 		productPurchaseCart,
@@ -129,7 +128,6 @@ const OrderSummary = () => {
 			className="product-purchase-summary select-payment-step"
 			footerProps={{
 				backButtonProps: {
-					disabled: isSingleAccount && isFreeApp,
 					onClick: previousStep,
 				},
 				continueButtonProps: {
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/CreateNewAccount.scss b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/CreateNewAccount.scss
@@ -0,0 +1,28 @@
+.create-new-account {
+	&-container {
+		gap: 24px;
+	}
+
+	&-card {
+		padding: 16px;
+		border-radius: 24px;
+
+		&-description {
+			color: #282934;
+		}
+	}
+
+	&-button {
+		background-color: #fff;
+		color: #0053f0 !important;
+		border: 1px solid #0053f0 !important;
+	}
+
+	&-button:hover {
+		background-color: #edf3fe !important;
+	}
+}
+
+.divider {
+	color: #999aa3;
+}
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/CreateNewAccount.tsx b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/pages/ProductPurchase/pages/CreateNewAccount.tsx
@@ -0,0 +1,123 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {useModal} from '@clayui/modal';
+import Button from '@clayui/button';
+
+import {AccountTypes} from '../../../enums/Account';
+import {Liferay} from '../../../liferay/liferay';
+import businessSVG from '../../../assets/icons/business.svg';
+import userSVG from '../../../assets/icons/Icon-user.svg';
+import CreateAccountModalForm from './CreateAccountModalForm';
+import i18n from '../../../i18n';
+
+import './CreateNewAccount.scss';
+
+type DisplayCardProps = {
+	description: string;
+	svg: string;
+	title: string;
+};
+
+const DisplayCard = ({svg, description, title}: DisplayCardProps) => (
+	<div className="align-items-center border create-new-account-card d-flex justify-content-center">
+		<div className="d-flex justify-content-center mr-3">
+			<img alt={title} draggable="false" src={svg} />
+		</div>
+
+		<div className="create-new-account-card-description">
+			<b>{title}</b>
+
+			<div className="mr-1">{description}</div>
+		</div>
+	</div>
+);
+
+const Divider = () => (
+	<div className="align-items-center d-flex">
+		<hr className="w-50" />
+
+		<b className="mx-2 divider">OR</b>
+
+		<hr className="w-50" />
+	</div>
+);
+
+const CreateNewAccount = ({accounts}: {accounts: any[]}) => {
+	const modal = useModal();
+
+	const content = (() => {
+		if (!accounts.length) {
+			return (
+				<>
+					<div className="mr-1">
+						There are no Liferay Marketplace accounts available for
+						<b className="ml-1">
+							{Liferay.ThemeDisplay.getUserEmailAddress()}
+						</b>
+						. You need to create a new personal or business account
+						or join an already existing Marketplace business account
+						to proceed.
+					</div>
+
+					<DisplayCard
+						description={i18n.translate(
+							'for-businesses-with-a-vattax-number-this-account-type-support-multiple-users-it-also-possible-to-join-an-already-existing-business-account'
+						)}
+						svg={businessSVG}
+						title={i18n.translate('business-account')}
+					/>
+
+					<DisplayCard
+						description={i18n.translate(
+							'for-individuals-without-a-vattax-number-this-account-support-single-user-only'
+						)}
+						svg={userSVG}
+						title={i18n.translate('personal-account')}
+					/>
+				</>
+			);
+		}
+
+		if (
+			!accounts.some((account) => account.type === AccountTypes.BUSINESS)
+		) {
+			return (
+				<>
+					<Divider />
+
+					<DisplayCard
+						description={i18n.translate(
+							'designed-for-companies-with-a-taxvat-number-this-account-type-also-lets-you-manage-multiple-users-under-one-profile-click-the-button-below-to-create-your-first-business-account-today'
+						)}
+						svg={businessSVG}
+						title={i18n.translate(
+							'unlock-exclusive-benefits-with-a-business-account'
+						)}
+					/>
+				</>
+			);
+		}
+
+		return <Divider />;
+	})();
+
+	return (
+		<div className="create-new-account-container d-flex flex-column mt-5">
+			{content}
+
+			<Button
+				className="create-new-account-button"
+				onClick={() => modal.onOpenChange(true)}
+			>
+				{i18n.translate('new-account')}
+			</Button>
+
+			<CreateAccountModalForm modal={modal} />
+		</div>
+	);
+};
+
+export default CreateNewAccount;

Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,7 @@ const ProductPurchaseOutlet: React.FC<ProductPurchaseOutletProps> = ({`
`229`	`229`	`className={classNames('mt-7', {'mt-7': accounts.length === 1})}`
`230`	`230`	`>`
`231`	`231`	`{isTinyDisplay && (`
`232`		`- <ProductPurchase.CircleSteps`
	`232`	`+ <ProductPurchase.CircleSteps`
`233`	`233`	`className="my-5 px-8"`
`234`	`234`	`steps={steps}`
`235`	`235`	`/>`