From eccad138717ecd65e3348a953c1d12138012e5be Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Tue, 8 Mar 2022 10:26:01 +0530
Subject: [PATCH] Fixed default first product selection failing

The first product selection failed in case of multiple products when viewing in preview, as the id was not updating correctly. This fixes the selected product for products section to ensure there is always valid product selected.
---
 .../src/components/common/ProductsSection.js    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index 7e9fde4885..f541a1b977 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -753,7 +753,10 @@ function getSelectedPrice({products, selectedProduct, selectedInterval}) {
     if (selectedProduct === 'free') {
         selectedPrice = {id: 'free'};
     } else {
-        const product = products.find(prod => prod.id === selectedProduct);
+        let product = products.find(prod => prod.id === selectedProduct);
+        if (!product) {
+            product = products.find(p => p.type === 'paid');
+        }
         selectedPrice = selectedInterval === 'month' ? product?.monthlyPrice : product?.yearlyPrice;
     }
     return selectedPrice;
@@ -789,14 +792,14 @@ function ProductsSection({onPlanSelect, products, type = null}) {
     const selectedPrice = getSelectedPrice({products, selectedInterval, selectedProduct});
     const activeInterval = getActiveInterval({portalPlans, selectedInterval});
 
-    useEffect(() => {
-        onPlanSelect(null, selectedPrice.id);
-    }, [selectedPrice.id, onPlanSelect]);
-
     useEffect(() => {
         setSelectedProduct(defaultProductId);
     }, [defaultProductId]);
 
+    useEffect(() => {
+        onPlanSelect(null, selectedPrice.id);
+    }, [selectedPrice.id, onPlanSelect]);
+
     if (!portalPlans.includes('monthly') && !portalPlans.includes('yearly')) {
         return null;
     }
@@ -809,10 +812,12 @@ function ProductsSection({onPlanSelect, products, type = null}) {
     if (type === 'upgrade') {
         className += ' gh-portal-upgrade-product';
     }
+
+    let finalProduct = products.find(p => p.id === selectedProduct)?.id || products.find(p => p.type === 'paid')?.id;
     return (
         <ProductsContext.Provider value={{
             selectedInterval: activeInterval,
-            selectedProduct,
+            selectedProduct: finalProduct,
             setSelectedProduct
         }}>
             <section className={className}>