Introduce new subscription dialog design for creators without a plan (#…

…7316)

newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js

@@ -635,6 +635,7 @@ const PrivateAssetPackInformationPage = ({
                                         openSubscriptionDialog({
                                           analyticsMetadata: {
                                             reason: 'Claim asset pack',
+                                            recommendedPlanId: 'gdevelop_gold',
                                           },
                                           filter: 'individual',
                                         })

newIDE/app/src/Course/CourseChapterView.js

@@ -285,6 +285,7 @@ const CourseChapterView = React.forwardRef<Props, HTMLDivElement>(
                         openSubscriptionDialog({
                           analyticsMetadata: {
                             reason: 'Unlock course chapter',
+                            recommendedPlanId: 'gdevelop_silver',
                           },
                         })
                       }

newIDE/app/src/ExportAndShare/ShareDialog/InviteHome.js

@@ -323,7 +323,10 @@ const InviteHome = ({ cloudProjectId }: Props) => {
         {!hasSufficientPermissionsWithSubscription &&
           !!projectUserAcls &&
           fetchError !== 'project-not-owned' && (
-            <GetSubscriptionCard subscriptionDialogOpeningReason="Add collaborators on project">
+            <GetSubscriptionCard
+              subscriptionDialogOpeningReason="Add collaborators on project"
+              recommendedPlanIdIfNoSubscription="gdevelop_startup"
+            >
               <Text>
                 <Trans>
                   Get a startup subscription to invite collaborators into your

newIDE/app/src/GameDashboard/LeaderboardAdmin/LeaderboardAppearanceDialog.js

@@ -347,7 +347,10 @@ function LeaderboardAppearanceDialog({
               />
             </ResponsiveLineStackLayout>
             {!canUseTheme ? (
-              <GetSubscriptionCard subscriptionDialogOpeningReason="Leaderboard customization">
+              <GetSubscriptionCard
+                subscriptionDialogOpeningReason="Leaderboard customization"
+                recommendedPlanIdIfNoSubscription="gdevelop_silver"
+              >
                 <Line>
                   <Column noMargin>
                     <Text noMargin>
@@ -400,7 +403,10 @@ function LeaderboardAppearanceDialog({
               disabled={!useCustomCss || isLoading}
             />
             {!canUseCustomCss ? (
-              <GetSubscriptionCard subscriptionDialogOpeningReason="Leaderboard customization">
+              <GetSubscriptionCard
+                subscriptionDialogOpeningReason="Leaderboard customization"
+                recommendedPlanIdIfNoSubscription="gdevelop_startup"
+              >
                 <Line>
                   <Column noMargin>
                     <Text noMargin>

newIDE/app/src/GameDashboard/LeaderboardAdmin/LeaderboardOptionsDialog.js

@@ -253,7 +253,10 @@ function LeaderboardOptionsDialog({
               }
             />
             {!canDisableLoginInLeaderboard && (
-              <GetSubscriptionCard subscriptionDialogOpeningReason="Leaderboard customization">
+              <GetSubscriptionCard
+                subscriptionDialogOpeningReason="Leaderboard customization"
+                recommendedPlanIdIfNoSubscription="gdevelop_startup"
+              >
                 <Line>
                   <Column noMargin>
                     <Text noMargin>

newIDE/app/src/GameDashboard/LeaderboardAdmin/MaxLeaderboardCountAlertMessage.js

@@ -55,6 +55,7 @@ const MaxLeaderboardCountAlertMessage = () => {
             )
           }
           hideButton={!leaderboardLimits.canMaximumCountPerGameBeIncreased}
+          recommendedPlanIdIfNoSubscription="gdevelop_silver"
         >
           <Line>
             <Column noMargin expand>

newIDE/app/src/GameDashboard/Widgets/ServicesWidget.js

@@ -97,6 +97,7 @@ const ServicesWidget = ({
                     openSubscriptionDialog({
                       analyticsMetadata: {
                         reason: 'Leaderboard count per game limit reached',
+                        recommendedPlanId: 'gdevelop_silver',
                       },
                     })
                   }

newIDE/app/src/MainFrame/EditorContainers/HomePage/CreateSection/MaxProjectCountAlertMessage.js

@@ -54,6 +54,7 @@ export const MaxProjectCountAlertMessage = ({ margin }: Props) => {
         )
       }
       hideButton={!canMaximumCountBeIncreased}
+      recommendedPlanIdIfNoSubscription="gdevelop_silver"
     >
       <Line>
         <Column noMargin expand>

newIDE/app/src/MainFrame/EditorContainers/HomePage/EducationMarketingSection/index.js

@@ -240,6 +240,7 @@ const EducationMarketingSection = ({
         filter: 'education',
         analyticsMetadata: {
           reason: 'Callout in Classroom tab',
+          recommendedPlanId: 'gdevelop_education',
         },
       });
     },

newIDE/app/src/MainFrame/EditorContainers/HomePage/TeamSection/ManageEducationAccountDialog/index.js

@@ -636,6 +636,7 @@ const ManageEducationAccountDialog = ({ onClose }: Props) => {
                           openSubscriptionDialog({
                             analyticsMetadata: {
                               reason: 'Manage subscription as teacher',
+                              recommendedPlanId: 'gdevelop_education',
                             },
                             filter: 'education',
                           })

newIDE/app/src/MainFrame/RouterContext.js

@@ -22,7 +22,8 @@ type RouteKey =
   | 'game-template'
   | 'tutorial-id'
   | 'course-id'
-  | 'create-from-example';
+  | 'create-from-example'
+  | 'recommended-plan-id';
 export type RouteArguments = { [RouteKey]: string };
 
 export type Router = {|

newIDE/app/src/Profile/CurrentUsageDisplayer.js

@@ -100,7 +100,7 @@ const CurrentUsageDisplayer = ({
   if (!quota || !subscription || !usagePrice) return <PlaceholderLoader />;
 
   const isFeatureLocked = quota.max === 0;
-  const hasSubscription = hasValidSubscriptionPlan(subscription);
+  const hasValidSubscription = hasValidSubscriptionPlan(subscription);
   const remainingBuilds = Math.max(quota.max - quota.current, 0);
   const usageRatio = `${quota.current}/${quota.max}`;
   const remainingMultipleMessage =
@@ -132,7 +132,7 @@ const CurrentUsageDisplayer = ({
 
   return (
     <ColumnStackLayout noMargin>
-      {hasSubscription ? (
+      {hasValidSubscription ? (
         !quota.limitReached ? (
           <div
             style={{
@@ -172,6 +172,7 @@ const CurrentUsageDisplayer = ({
                   }
             }
             hideButton={cannotUpgradeSubscription}
+            recommendedPlanIdIfNoSubscription="gdevelop_silver"
           >
             <Line>
               {!isFeatureLocked ? (
@@ -217,6 +218,7 @@ const CurrentUsageDisplayer = ({
                   onPayWithCredits: onPurchaseBuildWithCredits,
                 }
           }
+          recommendedPlanIdIfNoSubscription="gdevelop_silver"
         >
           <Line>
             {!isFeatureLocked ? (

newIDE/app/src/Profile/RedeemCodeDialog.js

@@ -133,6 +133,7 @@ export default function RedeemCodeDialog({
                 floatingLabelFixed
                 errorText={getRedeemCodeErrorText(error)}
                 autoFocus="desktop"
+                disabled={isLoading}
               />
               {!subscription ||
               !subscription.planId ? null : !!subscription.redemptionCodeValidUntil ? ( // No subscription, do not show a warning.

newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js

@@ -12,6 +12,8 @@ import classes from './GetSubscriptionCard.module.css';
 import Paper from '../../UI/Paper';
 import CrownShining from '../../UI/CustomSvgIcons/CrownShining';
 import { useResponsiveWindowSize } from '../../UI/Responsive/ResponsiveWindowMeasurer';
+import AuthenticatedUserContext from '../AuthenticatedUserContext';
+import { hasValidSubscriptionPlan } from '../../Utils/GDevelopServices/Usage';
 
 const styles = {
   paper: {
@@ -42,6 +44,11 @@ type Props = {|
   onUpgrade?: () => void,
   forceColumnLayout?: boolean,
   filter?: 'individual' | 'team' | 'education',
+  recommendedPlanIdIfNoSubscription?:
+    | 'gdevelop_silver'
+    | 'gdevelop_gold'
+    | 'gdevelop_startup'
+    | 'gdevelop_education',
 |};
 
 const GetSubscriptionCard = ({
@@ -53,7 +60,13 @@ const GetSubscriptionCard = ({
   onUpgrade,
   forceColumnLayout,
   filter,
+  recommendedPlanIdIfNoSubscription,
 }: Props) => {
+  const { subscription } = React.useContext(AuthenticatedUserContext);
+  const actualPlanIdToRecommend = hasValidSubscriptionPlan(subscription)
+    ? // If the user already has a subscription, show the original subscription dialog.
+      undefined
+    : recommendedPlanIdIfNoSubscription;
   const { openSubscriptionDialog } = React.useContext(
     SubscriptionSuggestionContext
   );
@@ -93,6 +106,7 @@ const GetSubscriptionCard = ({
                     openSubscriptionDialog({
                       analyticsMetadata: {
                         reason: subscriptionDialogOpeningReason,
+                        recommendedPlanId: actualPlanIdToRecommend,
                       },
                       filter,
                     });