Improve Max projects callout (#7096)

Don't show in changelog
4ian · Oct 22, 2024 · bb5291a · bb5291a
1 parent a2ea751
commit bb5291a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git 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
@@ -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 &&