From bb5291ac6f25d87a284d58ab579a6be839ce7491 Mon Sep 17 00:00:00 2001
From: AlexandreS <32449369+AlexandreSi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:38:21 +0200
Subject: [PATCH] Improve Max projects callout (#7096)

Don't show in changelog
---
 .../HomePage/BuildSection/index.js            | 15 +++++++++++-
 .../src/QuickCustomization/QuickPublish.js    | 23 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
index 22e29cb7ca04..f5ead751e995 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
@@ -449,7 +449,7 @@ const BuildSection = ({
     <SectionContainer
       showUrgentAnnouncements={shouldDisplayAnnouncements}
       renderFooter={
-        limits && hasTooManyCloudProjects
+        !isMobile && limits && hasTooManyCloudProjects
           ? () => (
               <Line>
                 <Column expand>
@@ -618,6 +618,19 @@ const BuildSection = ({
                     }
                   />
                 ))}
+                {isMobile && limits && hasTooManyCloudProjects && (
+                  <MaxProjectCountAlertMessage
+                    margin="dense"
+                    limits={limits}
+                    onUpgrade={() =>
+                      openSubscriptionDialog({
+                        analyticsMetadata: {
+                          reason: 'Cloud Project limit reached',
+                        },
+                      })
+                    }
+                  />
+                )}
               </List>
             </Column>
           </Line>
diff --git a/newIDE/app/src/QuickCustomization/QuickPublish.js b/newIDE/app/src/QuickCustomization/QuickPublish.js
index 32f8605a1fb5..12e2acefc1c1 100644
--- a/newIDE/app/src/QuickCustomization/QuickPublish.js
+++ b/newIDE/app/src/QuickCustomization/QuickPublish.js
@@ -68,6 +68,10 @@ export const QuickPublish = ({
   const eventsFunctionsExtensionsState = React.useContext(
     EventsFunctionsExtensionsContext
   );
+  const [
+    numberOfCloudProjectsBeforeSavingCustomizedGame,
+    setNumberOfCloudProjectsBeforeSavingCustomizedGame,
+  ] = React.useState<number | null>(null);
   const [exportState, setExportState] = React.useState<
     '' | 'started' | 'succeeded' | 'errored'
   >('');
@@ -94,12 +98,29 @@ export const QuickPublish = ({
     />
   );
 
+  React.useEffect(
+    () => {
+      if (!cloudProjects) {
+        setNumberOfCloudProjectsBeforeSavingCustomizedGame(null);
+      } else if (numberOfCloudProjectsBeforeSavingCustomizedGame === null) {
+        setNumberOfCloudProjectsBeforeSavingCustomizedGame(
+          cloudProjects.filter(cloudProject => !cloudProject.deletedAt).length
+        );
+      }
+    },
+    // Store the number of cloud projects **before** the user saved this quick-customized
+    // game. Otherwise, they might reach the max number saving it, and the callout would
+    // be displayed instead of the game link.
+    [cloudProjects, numberOfCloudProjectsBeforeSavingCustomizedGame]
+  );
+
   const isLoadingCloudProjects = !!profile && !cloudProjects;
   const isCloudProjectsMaximumReached =
     !!limits &&
     !!cloudProjects &&
     limits.capabilities.cloudProjects.maximumCount > 0 &&
-    cloudProjects.filter(cloudProject => !cloudProject.deletedAt).length >=
+    numberOfCloudProjectsBeforeSavingCustomizedGame !== null &&
+    numberOfCloudProjectsBeforeSavingCustomizedGame >=
       limits.capabilities.cloudProjects.maximumCount;
   const shouldSaveAndLaunchExport =
     !!profile &&