Allow coming back from bundle purchase flow & improve display (#7887)

Do not show in changelog

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

@@ -420,8 +420,8 @@ const BundlePurchaseDialog = ({
         onRequestClose={onCloseDialog}
         actions={dialogActions}
         onApply={purchaseSuccessful ? onCloseDialog : onWillPurchase}
-        cannotBeDismissed // Prevent the user from continuing by clicking outside.
         flexColumnBody
+        fullscreen="never-even-on-mobile"
       >
         <LineStackLayout justifyContent="center" alignItems="center">
           {purchaseSuccessful && <Mark />}

newIDE/app/src/AssetStore/CreditsPackages/CreditsPackagePurchaseDialog.js

@@ -290,6 +290,7 @@ const CreditsPackagePurchaseDialog = ({
         onApply={purchaseSuccessful ? onClose : onWillPurchase}
         cannotBeDismissed // Prevent the user from continuing by clicking outside.
         flexColumnBody
+        fullscreen="never-even-on-mobile"
       >
         <LineStackLayout justifyContent="center" alignItems="center">
           {purchaseSuccessful && <Mark />}

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

@@ -355,6 +355,7 @@ const PrivateAssetPackPurchaseDialog = ({
         onApply={purchaseSuccessful ? onClose : onWillPurchase}
         cannotBeDismissed // Prevent the user from continuing by clicking outside.
         flexColumnBody
+        fullscreen="never-even-on-mobile"
       >
         <LineStackLayout justifyContent="center" alignItems="center">
           {purchaseSuccessful && <Mark />}

newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplatePurchaseDialog.js

@@ -356,6 +356,7 @@ const PrivateGameTemplatePurchaseDialog = ({
         onApply={purchaseSuccessful ? onClose : onWillPurchase}
         cannotBeDismissed // Prevent the user from continuing by clicking outside.
         flexColumnBody
+        fullscreen="never-even-on-mobile"
       >
         <LineStackLayout justifyContent="center" alignItems="center">
           {purchaseSuccessful && <Mark />}

newIDE/app/src/AssetStore/ProductPageHelper.js

@@ -341,9 +341,13 @@ export const getProductsIncludedInBundle = <
       ));
   if (!includedProductIds) return null;
 
-  return productListingDatas.filter(productListingData =>
-    includedProductIds.includes(productListingData.id)
-  );
+  return includedProductIds
+    .map(includedProductId =>
+      productListingDatas.find(
+        productListingData => productListingData.id === includedProductId
+      )
+    )
+    .filter(Boolean);
 };
 
 export const getProductsIncludedInBundleTiles = ({

newIDE/app/src/MainFrame/StandAloneDialog.js

@@ -39,6 +39,8 @@ const StandaloneDialog = ({ onClose }: Props) => {
   const { bundleListingDatas } = React.useContext(BundleStoreContext);
   React.useEffect(
     () => {
+      if (selectedBundleListingData) return; // We're already on a bundle page.
+
       const bundleCategory = routeArguments['bundle-category'];
       if (!bundleCategory || !bundleListingDatas) {
         return;
@@ -69,9 +71,17 @@ const StandaloneDialog = ({ onClose }: Props) => {
         priceCurrency: priceForUsageType && priceForUsageType.currency,
       });
       setSelectedBundleListingData(bundleListingData);
-      removeRouteArguments(['bundle-category']);
+      // Don't remove the route argument so that the user can come back to this page
+      // if they come back from a checkout flow.
+      // We do it in the onClose callback instead.
     },
-    [bundleListingDatas, routeArguments, onClose, removeRouteArguments]
+    [
+      selectedBundleListingData,
+      bundleListingDatas,
+      routeArguments,
+      onClose,
+      removeRouteArguments,
+    ]
   );
 
   return (
@@ -100,6 +110,7 @@ const StandaloneDialog = ({ onClose }: Props) => {
           noActions
           fastCheckout
           onCloseAfterPurchaseDone={() => {
+            removeRouteArguments(['bundle-category']);
             navigateToRoute('learn', {
               bundle: selectedBundleListingData.id,
             });

newIDE/app/src/Utils/UseOpenInitialDialog.js

@@ -73,48 +73,50 @@ const useOpenInitialDialog = ({
             try {
               const claimableToken = routeArguments['claimable-token'];
               const purchaseId = routeArguments['purchase-id'];
-              if (purchaseId && claimableToken) {
-                const bundleId = routeArguments['bundle'];
-                let claimedProduct = null;
-                if (bundleId) {
-                  const listedBundle = await getListedBundle({
-                    bundleId,
-                    visibility: 'all',
-                  });
-                  claimedProduct = listedBundle;
-                }
-
-                if (!claimedProduct) {
-                  console.error(
-                    `The bundle with id ${bundleId} does not exist. Cannot claim.`
-                  );
-                  await showAlert({
-                    title: t`Unknown bundle`,
-                    message: t`The bundle you are trying to claim does not exist anymore. Please contact support if you think this is an error.`,
-                  });
-                  return;
-                }
-
-                const claimedProductOptions = {
-                  productListingData: claimedProduct,
-                  purchaseId,
-                  claimableToken,
-                };
-
+              // If there is no purchaseId or claimableToken, just open the signup/profile.
+              if (!purchaseId || !claimableToken) {
                 if (authenticated) {
-                  onOpenPurchaseClaimDialog(claimedProductOptions);
+                  openProfileDialog();
                 } else {
-                  onOpenCreateAccountWithPurchaseClaimDialog(
-                    claimedProductOptions
-                  );
+                  onOpenCreateAccountDialog();
                 }
                 return;
               }
 
+              // Otherwise, try to claim the purchase.
+              const bundleId = routeArguments['bundle'];
+              let claimedProduct = null;
+              if (bundleId) {
+                const listedBundle = await getListedBundle({
+                  bundleId,
+                  visibility: 'all',
+                });
+                claimedProduct = listedBundle;
+              }
+
+              if (!claimedProduct) {
+                console.error(
+                  `The bundle with id ${bundleId} does not exist. Cannot claim.`
+                );
+                await showAlert({
+                  title: t`Unknown bundle`,
+                  message: t`The bundle you are trying to claim does not exist anymore. Please contact support if you think this is an error.`,
+                });
+                return;
+              }
+
+              const claimedProductOptions = {
+                productListingData: claimedProduct,
+                purchaseId,
+                claimableToken,
+              };
+
               if (authenticated) {
-                openProfileDialog();
+                onOpenPurchaseClaimDialog(claimedProductOptions);
               } else {
-                onOpenCreateAccountDialog();
+                onOpenCreateAccountWithPurchaseClaimDialog(
+                  claimedProductOptions
+                );
               }
             } finally {
               removeRouteArguments([
@@ -150,7 +152,9 @@ const useOpenInitialDialog = ({
             break;
           case 'standalone':
             openStandaloneDialog();
-            removeRouteArguments(['initial-dialog']);
+            // When on the standalone dialog,
+            // we don't remove the route argument so that the user always comes back to it
+            // when they come back from a checkout flow for instance.
             break;
           default:
             break;