LPD-67547 Refactor

CalebJamesH · brianchandotcom · commit 4f9720460d5d · 2025-10-15T15:33:20.000-03:00
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/assets/icons/user.svg b/workspaces/liferay-marketplace-workspace/client-extensions/liferay-marketplace-custom-element/src/assets/icons/user.svg
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
@@ -202,7 +202,7 @@ 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':
 		'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',
@@ -275,9 +275,9 @@ 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 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':
 		'For individuals without a VAT/Tax number; this account support single user only.',
 	'form': 'Form',
 	'fragment': 'Fragment',
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
@@ -1,6 +1,12 @@
 .create-new-account {
-	&-container {
-		gap: 24px;
+	&-button {
+		background-color: #fff;
+		border: 1px solid #0053f0 !important;
+		color: #0053f0 !important;
+	}
+
+	&-button:hover {
+		background-color: #edf3fe !important;
 	}
 
 	&-card {
@@ -12,14 +18,8 @@
 		}
 	}
 
-	&-button {
-		background-color: #fff;
-		border: 1px solid #0053f0 !important;
-		color: #0053f0 !important;
-	}
-
-	&-button:hover {
-		background-color: #edf3fe !important;
+	&-container {
+		gap: 24px;
 	}
 }
 
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
@@ -6,8 +6,8 @@
 import Button from '@clayui/button';
 import {useModal} from '@clayui/modal';
 
-import userSVG from '../../../assets/icons/Icon-user.svg';
-import businessSVG from '../../../assets/icons/business.svg';
+import businessIcon from '../../../assets/icons/business.svg';
+import userIcon from '../../../assets/icons/user.svg';
 import {AccountTypes} from '../../../enums/Account';
 import i18n from '../../../i18n';
 import {Liferay} from '../../../liferay/liferay';
@@ -45,12 +45,17 @@ const Divider = () => (
 	</div>
 );
 
-const CreateNewAccount = ({accounts}: {accounts: any[]}) => {
+const CreateNewAccount = ({accounts}: {accounts: Account[]}) => {
 	const modal = useModal();
 
-	const content = (() => {
-		if (!accounts.length) {
-			return (
+	const hasAccounts = !!accounts.length;
+	const isBusinessAccount = accounts.some(
+		(account) => account.type === AccountTypes.BUSINESS
+	);
+
+	return (
+		<div className="create-new-account-container d-flex flex-column mt-5">
+			{!hasAccounts && (
 				<>
 					<div className="mr-1">
 						There are no Liferay Marketplace accounts available for
@@ -64,49 +69,39 @@ const CreateNewAccount = ({accounts}: {accounts: any[]}) => {
 
 					<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'
+							'for-businesses-with-a-vat-tax-number-this-account-type-support-multiple-users-it-also-possible-to-join-an-already-existing-business-account'
 						)}
-						svg={businessSVG}
+						svg={businessIcon}
 						title={i18n.translate('business-account')}
 					/>
 
 					<DisplayCard
 						description={i18n.translate(
-							'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'
 						)}
-						svg={userSVG}
+						svg={userIcon}
 						title={i18n.translate('personal-account')}
 					/>
 				</>
-			);
-		}
+			)}
 
-		if (
-			!accounts.some((account) => account.type === AccountTypes.BUSINESS)
-		) {
-			return (
+			{hasAccounts && !isBusinessAccount && (
 				<>
 					<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'
+							'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'
 						)}
-						svg={businessSVG}
+						svg={businessIcon}
 						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}
+			{hasAccounts && isBusinessAccount && <Divider />}
 
 			<Button
 				className="create-new-account-button"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,12 @@`
`1`	`1`	`.create-new-account {`
`2`		`- &-container {`
`3`		`- gap: 24px;`
	`2`	`+ &-button {`
	`3`	`+ background-color: #fff;`
	`4`	`+ border: 1px solid #0053f0 !important;`
	`5`	`+ color: #0053f0 !important;`
	`6`	`+ }`
	`7`	`+`
	`8`	`+ &-button:hover {`
	`9`	`+ background-color: #edf3fe !important;`
`4`	`10`	`}`
`5`	`11`
`6`	`12`	`&-card {`
`@@ -12,14 +18,8 @@`
`12`	`18`	`}`
`13`	`19`	`}`
`14`	`20`
`15`		`- &-button {`
`16`		`- background-color: #fff;`
`17`		`- border: 1px solid #0053f0 !important;`
`18`		`- color: #0053f0 !important;`
`19`		`- }`
`20`		`-`
`21`		`- &-button:hover {`
`22`		`- background-color: #edf3fe !important;`
	`21`	`+ &-container {`
	`22`	`+ gap: 24px;`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`