Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues Activity

Fixed default first product selection failing

Browse source 
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.
This commit is contained in:
Rishabh 2022-03-08 10:26:01 +05:30
parent ca29b5dc65
commit eccad13871
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ghost/portal/src/components/common/ProductsSection.js
View file

@ -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}>