fix(Marketplace): Subscription modal wrong state (#32730)

.changeset/chilled-yaks-beg.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed issue in Marketplace that caused a subscription app to show incorrect modals when subscribing

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx

@@ -76,13 +76,13 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 		isAppPurchased,
 		onDismiss: cancelAction,
 		onSuccess: confirmAction,
+		setIsPurchased: setPurchased,
 	});
 
 	const handleAcquireApp = useCallback(() => {
 		setLoading(true);
-		setPurchased(true);
 		appInstallationHandler();
-	}, [appInstallationHandler, setLoading, setPurchased]);
+	}, [appInstallationHandler, setLoading]);
 
 	// @TODO we should refactor this to not use the label to determine the variant
 	const getStatusVariant = (status: appStatusSpanResponseProps) => {

apps/meteor/client/views/marketplace/hooks/useAppInstallationHandler.tsx

@@ -19,9 +19,17 @@ export type AppInstallationHandlerParams = {
 	isAppPurchased?: boolean;
 	onDismiss: () => void;
 	onSuccess: (action: Actions | '', appPermissions?: App['permissions']) => void;
+	setIsPurchased: (purchased: boolean) => void;
 };
 
-export function useAppInstallationHandler({ app, action, isAppPurchased, onDismiss, onSuccess }: AppInstallationHandlerParams) {
+export function useAppInstallationHandler({
+	app,
+	action,
+	isAppPurchased,
+	onDismiss,
+	onSuccess,
+	setIsPurchased,
+}: AppInstallationHandlerParams) {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const setModal = useSetModal();
 
@@ -62,15 +70,24 @@ export function useAppInstallationHandler({ app, action, isAppPurchased, onDismi
 		if (action === 'purchase' && !isAppPurchased) {
 			try {
 				const data = await appsOrchestrator.buildExternalUrl(app.id, app.purchaseType, false);
-				setModal(<IframeModal url={data.url} cancel={onDismiss} confirm={openPermissionModal} />);
+				setModal(
+					<IframeModal
+						url={data.url}
+						cancel={onDismiss}
+						confirm={() => {
+							setIsPurchased(true);
+							openPermissionModal();
+						}}
+					/>,
+				);
 			} catch (error) {
 				handleAPIError(error);
 			}
 			return;
 		}
 
 		openPermissionModal();
-	}, [action, isAppPurchased, openPermissionModal, appsOrchestrator, app.id, app.purchaseType, setModal, onDismiss]);
+	}, [action, isAppPurchased, openPermissionModal, appsOrchestrator, app.id, app.purchaseType, setModal, onDismiss, setIsPurchased]);
 
 	return useCallback(async () => {
 		if (app?.versionIncompatible) {

apps/meteor/client/views/marketplace/hooks/useAppMenu.tsx

@@ -91,10 +91,6 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 	const installationSuccess = useCallback(
 		async (action: Actions | '', permissionsGranted) => {
 			if (action) {
-				if (action === 'purchase') {
-					setPurchased(true);
-				}
-
 				if (action === 'request') {
 					setRequestedEndUser(true);
 				} else {
@@ -119,6 +115,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 		action,
 		onDismiss: closeModal,
 		onSuccess: installationSuccess,
+		setIsPurchased: setPurchased,
 	});
 
 	const handleAcquireApp = useCallback(() => {