Create a standalone page that can be used for bundles

newIDE/app/src/AssetStore/Bundles/BundleInformationPage.js

@@ -85,9 +85,11 @@ type Props = {|
   ) => void,
   onCourseOpen: CourseListingData => void,
   courses: ?Array<Course>,
-  receivedCourses: ?Array<Course>,
   getCourseCompletion: (courseId: string) => CourseCompletion | null,
   noPadding?: boolean,
+  noActions?: boolean,
+  simpleCheckout?: boolean,
+  onPurchaseDone?: () => void,
 |};
 
 const BundleInformationPage = ({
@@ -99,9 +101,11 @@ const BundleInformationPage = ({
   onBundleOpen,
   onCourseOpen,
   courses,
-  receivedCourses,
   getCourseCompletion,
   noPadding,
+  noActions,
+  simpleCheckout,
+  onPurchaseDone,
 }: Props) => {
   const { windowSize, isLandscape, isMobile } = useResponsiveWindowSize();
   const { bundleListingDatas } = React.useContext(BundleStoreContext); // If archived, should use the one passed.
@@ -175,6 +179,7 @@ const BundleInformationPage = ({
             onBundleOpen,
             onCourseOpen,
             discountedPrice: true,
+            disabled: noActions,
           })
         : null,
     [
@@ -190,6 +195,7 @@ const BundleInformationPage = ({
       onGameTemplateOpen,
       onBundleOpen,
       onCourseOpen,
+      noActions,
     ]
   );
 
@@ -311,6 +317,8 @@ const BundleInformationPage = ({
             bundleListingData={bundleListingData}
             bundle={bundle}
             i18n={i18n}
+            simpleCheckout={simpleCheckout}
+            onPurchaseDone={onPurchaseDone}
           />
           <Line noMargin>
             <Text size="section-title">
@@ -339,6 +347,7 @@ const BundleInformationPage = ({
                               onCourseOpen(courseListingData);
                             }}
                             discountedPrice
+                            disabled={noActions}
                           />
                         </GridListTile>
                       );

newIDE/app/src/AssetStore/Bundles/BundlePageHeader.js

@@ -68,13 +68,17 @@ type Props = {|
   bundle: Bundle,
   simulateAppStoreProduct?: boolean,
   i18n: I18nType,
+  simpleCheckout?: boolean,
+  onPurchaseDone?: () => void,
 |};
 
 const BundlePageHeader = ({
   bundle,
   bundleListingData,
   simulateAppStoreProduct,
   i18n,
+  simpleCheckout,
+  onPurchaseDone,
 }: Props) => {
   const { privateGameTemplateListingDatas } = React.useContext(
     PrivateGameTemplateStoreContext
@@ -467,6 +471,7 @@ const BundlePageHeader = ({
                         isAlreadyReceived={isAlreadyReceived}
                         onClickBuy={onClickBuy}
                         onClickBuyWithCredits={() => {}}
+                        fullWidth
                         customLabel={
                           <Trans>
                             Buy now and save{' '}
@@ -502,6 +507,8 @@ const BundlePageHeader = ({
               bundleListingData={purchasingBundleListingData}
               usageType="default"
               onClose={() => setPurchasingBundleListingData(null)}
+              simpleCheckout={simpleCheckout}
+              onPurchaseDone={onPurchaseDone}
             />
           )}
           {isRedemptionCodesDialogOpen && (

newIDE/app/src/AssetStore/Bundles/BundlePurchaseDialog.js

@@ -1,7 +1,10 @@
 // @flow
 import * as React from 'react';
 import { t, Trans } from '@lingui/macro';
-import { type BundleListingData } from '../../Utils/GDevelopServices/Shop';
+import {
+  getStripeCheckoutUrl,
+  type BundleListingData,
+} from '../../Utils/GDevelopServices/Shop';
 import Dialog, { DialogPrimaryButton } from '../../UI/Dialog';
 import AuthenticatedUserContext from '../../Profile/AuthenticatedUserContext';
 import CreateProfile from '../../Profile/CreateProfile';
@@ -28,13 +31,17 @@ type Props = {|
   usageType: string,
   onClose: () => void,
   simulateAppStoreProduct?: boolean,
+  simpleCheckout?: boolean,
+  onPurchaseDone?: () => void,
 |};
 
 const BundlePurchaseDialog = ({
   bundleListingData,
   usageType,
   onClose,
   simulateAppStoreProduct,
+  simpleCheckout,
+  onPurchaseDone,
 }: Props) => {
   const {
     profile,
@@ -91,13 +98,21 @@ const BundlePurchaseDialog = ({
     // Purchase with web.
     try {
       setIsPurchasing(true);
-      const checkoutUrl = getPurchaseCheckoutUrl({
-        productId: bundleListingData.id,
-        priceName: price.name,
-        userId: profile.id,
-        userEmail: profile.email,
-        ...(password ? { password } : undefined),
-      });
+      const checkoutUrl = simpleCheckout
+        ? getStripeCheckoutUrl({
+            productId: bundleListingData.id,
+            priceName: price.name,
+            userId: profile.id,
+            userEmail: profile.email,
+            ...(password ? { password } : undefined),
+          })
+        : getPurchaseCheckoutUrl({
+            productId: bundleListingData.id,
+            priceName: price.name,
+            userId: profile.id,
+            userEmail: profile.email,
+            ...(password ? { password } : undefined),
+          });
       Window.openExternalURL(checkoutUrl);
     } catch (error) {
       const extractedStatusAndCode = extractGDevelopApiErrorStatusAndCode(
@@ -155,6 +170,7 @@ const BundlePurchaseDialog = ({
           // We found the purchase, the user has bought the bundle.
           // We do not close the dialog yet, as we need to trigger a refresh of the products received.
           await onPurchaseSuccessful();
+          if (onPurchaseDone) onPurchaseDone();
         }
       };
       checkIfPurchaseIsDone();
@@ -164,6 +180,7 @@ const BundlePurchaseDialog = ({
       bundlePurchases,
       bundleListingData,
       onPurchaseSuccessful,
+      onPurchaseDone,
       onRefreshBundlePurchases,
     ]
   );

newIDE/app/src/AssetStore/ProductPageHelper.js

@@ -356,6 +356,7 @@ export const getProductsIncludedInBundleTiles = ({
   onBundleOpen,
   onCourseOpen,
   discountedPrice,
+  disabled,
 }: {|
   product: ?PrivateAssetPack | PrivateGameTemplate | Bundle | Course,
   productListingDatas: ?Array<
@@ -381,6 +382,7 @@ export const getProductsIncludedInBundleTiles = ({
   onBundleOpen?: (bundleListingData: BundleListingData) => void,
   onCourseOpen?: (courseListingData: CourseListingData) => void,
   discountedPrice?: boolean,
+  disabled?: boolean,
 |}): ?Array<React.Node> => {
   if (!product || !productListingDatas) return null;
 
@@ -417,6 +419,7 @@ export const getProductsIncludedInBundleTiles = ({
             }
             owned={isProductOwned}
             discountedPrice={discountedPrice}
+            disabled={disabled}
           />
         );
       }
@@ -435,6 +438,7 @@ export const getProductsIncludedInBundleTiles = ({
             onSelect={() => onPrivateAssetPackOpen(includedProductListingData)}
             owned={isProductOwned}
             discountedPrice={discountedPrice}
+            disabled={disabled}
           />
         );
       }
@@ -453,6 +457,7 @@ export const getProductsIncludedInBundleTiles = ({
             onSelect={() => onBundleOpen(includedProductListingData)}
             owned={isProductOwned}
             discountedPrice={discountedPrice}
+            disabled={disabled}
           />
         );
       }
@@ -471,6 +476,7 @@ export const getProductsIncludedInBundleTiles = ({
             onSelect={() => onCourseOpen(includedProductListingData)}
             owned={isProductOwned}
             discountedPrice={discountedPrice}
+            disabled={disabled}
           />
         );
       }
@@ -577,6 +583,7 @@ export const PurchaseProductButtons = <
   onClickBuy,
   onClickBuyWithCredits,
   customLabel,
+  fullWidth,
 }: {|
   productListingData: T,
   selectedUsageType: string,
@@ -587,6 +594,7 @@ export const PurchaseProductButtons = <
   onClickBuy: () => void | Promise<void>,
   onClickBuyWithCredits?: () => void | Promise<void>,
   customLabel?: React.Node,
+  fullWidth?: boolean,
 |}) => {
   const { authenticated } = React.useContext(AuthenticatedUserContext);
   const shouldUseOrSimulateAppStoreProduct =
@@ -643,6 +651,15 @@ export const PurchaseProductButtons = <
         </Text>
       )}
     </LineStackLayout>
+  ) : fullWidth && !creditPrice ? (
+    <RaisedButton
+      primary
+      label={customLabel || <Trans>Buy for {formattedProductPriceText}</Trans>}
+      onClick={onClickBuy}
+      id={`buy-${productType}`}
+      size="medium"
+      fullWidth={fullWidth}
+    />
   ) : (
     <LineStackLayout noMargin>
       {creditPrice && (

newIDE/app/src/AssetStore/index.js

@@ -80,7 +80,6 @@ type Props = {|
   ) => void,
   onOpenProfile?: () => void,
   courses?: ?Array<Course>,
-  receivedCourses?: ?Array<Course>,
   onCourseOpen?: (courseId: string) => void,
   getSubscriptionPlansWithPricingSystems?: () => Array<SubscriptionPlanWithPricingSystems> | null,
   getCourseCompletion?: (courseId: string) => CourseCompletion | null,
@@ -125,7 +124,6 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
       onOpenPrivateGameTemplateListingData,
       onOpenProfile,
       courses,
-      receivedCourses,
       onCourseOpen,
       getSubscriptionPlansWithPricingSystems,
       getCourseCompletion,
@@ -975,7 +973,6 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
                     getSubscriptionPlansWithPricingSystems
                   }
                   courses={courses}
-                  receivedCourses={receivedCourses}
                   getCourseCompletion={getCourseCompletion}
                 />
               ) : null}

newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/CourseCard.js

@@ -132,6 +132,7 @@ type Props = {|
   courseListingData: ?CourseListingData,
   onClick?: () => void,
   discountedPrice?: boolean,
+  disabled?: boolean,
 |};
 
 const CourseCard = ({
@@ -140,6 +141,7 @@ const CourseCard = ({
   courseListingData,
   onClick,
   discountedPrice,
+  disabled,
 }: Props) => {
   const gdevelopTheme = React.useContext(GDevelopThemeContext);
   const specializationConfig = getSpecializationConfig(
@@ -148,8 +150,8 @@ const CourseCard = ({
   return (
     <I18n>
       {({ i18n }) => (
-        <CardWidget onClick={onClick} size={'large'}>
-          {course && courseListingData && onClick ? (
+        <CardWidget onClick={disabled ? undefined : onClick} size={'large'}>
+          {course && courseListingData ? (
             <Column expand noMargin noOverflowParent>
               <div style={styles.imageContainer}>
                 <img

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

@@ -84,7 +84,6 @@ type Props = {|
   ) => void,
   onSelectExampleShortHeader: (exampleShortHeader: ExampleShortHeader) => void,
   getSubscriptionPlansWithPricingSystems: () => Array<SubscriptionPlanWithPricingSystems> | null,
-  receivedCourses: ?Array<Course>,
   initialBundleUserFriendlySlug: ?string,
   initialBundleCategory: ?string,
   clearInitialBundleValues: () => void,
@@ -114,7 +113,6 @@ const LearnSection = ({
   onSelectPrivateGameTemplateListingData,
   onSelectExampleShortHeader,
   getSubscriptionPlansWithPricingSystems,
-  receivedCourses,
   initialBundleUserFriendlySlug,
   initialBundleCategory,
   clearInitialBundleValues,
@@ -296,7 +294,6 @@ const LearnSection = ({
         onBundleOpen={onOpenBundle}
         onCourseOpen={onOpenCourse}
         courses={courses}
-        receivedCourses={receivedCourses}
         getCourseCompletion={getCourseCompletion}
       />
     );

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

@@ -27,7 +27,6 @@ type Props = {|
   onExtensionInstalled: (extensionNames: Array<string>) => void,
   getSubscriptionPlansWithPricingSystems: () => Array<SubscriptionPlanWithPricingSystems> | null,
   onCourseOpen: (courseId: string) => void,
-  receivedCourses?: ?Array<Course>,
   courses?: ?Array<Course>,
   getCourseCompletion: (courseId: string) => CourseCompletion | null,
 |};
@@ -40,7 +39,6 @@ const StoreSection = ({
   onExtensionInstalled,
   onCourseOpen,
   courses,
-  receivedCourses,
   getSubscriptionPlansWithPricingSystems,
   getCourseCompletion,
 }: Props) => {
@@ -98,7 +96,6 @@ const StoreSection = ({
         displayPromotions
         onOpenProfile={onOpenProfile}
         courses={courses}
-        receivedCourses={receivedCourses}
         onCourseOpen={onCourseOpen}
         getSubscriptionPlansWithPricingSystems={
           getSubscriptionPlansWithPricingSystems