Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Updated product selection to work on full card

Browse source 
refs https://github.com/TryGhost/Team/issues/767

- handles product selection on full product card instead of just small surface area on checkbox
- removes dummy product card method
This commit is contained in:
Rishabh 2021-06-11 14:03:20 +05:30
parent 55298cd999
commit 950495c836
1 changed files with 9 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -264,6 +264,7 @@ function Checkbox({name, id, onProductSelect, isChecked, disabled = false}) {
disabled={disabled} disabled={disabled}
/> />
<span className='checkmark' onClick={(e) => { <span className='checkmark' onClick={(e) => {
e.stopPropagation();
if (!disabled) { if (!disabled) {
onProductSelect(e, id); onProductSelect(e, id);
} }
@ -297,7 +298,10 @@ function ProductCard({product}) {
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext); const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
return ( return (
<div className="gh-portal-product-card" key={product.id}> <div className="gh-portal-product-card" key={product.id} onClick={(e) => {
e.stopPropagation();
setSelectedProduct(product.id);
}}>
<div className="gh-portal-product-card-header"> <div className="gh-portal-product-card-header">
<Checkbox name={product.id} id={`${product.id}-checkbox`} isChecked={selectedProduct === product.id} onProductSelect={() => { <Checkbox name={product.id} id={`${product.id}-checkbox`} isChecked={selectedProduct === product.id} onProductSelect={() => {
setSelectedProduct(product.id); setSelectedProduct(product.id);
@ -318,65 +322,13 @@ function ProductCards({products}) {
}); });
} }
/** Dummy static products for UI development */
/*
function DummyProductCards({products}) {
return (
<>
<div className="gh-portal-product-card checked">
<div className="gh-portal-product-card-header">
<Checkbox name='x' id='x' isChecked={true} onPlanSelect='' />
<h4 className="gh-portal-product-name">Bronze</h4>
<div className="gh-portal-product-description">Access to all members articles</div>
</div>
<div className="gh-portal-product-card-footer">
<div className="gh-portal-product-price">
<span className="currency-sign">$</span>
<span className="amount">70</span>
<span className="billing-period">/year</span>
</div>
<div className="gh-portal-product-alternative-price">$7/month</div>
</div>
</div>
<div className="gh-portal-product-card">
<div className="gh-portal-product-card-header">
<Checkbox name='x' id='x' isChecked={false} onPlanSelect='' />
<h4 className="gh-portal-product-name">Silver</h4>
<div className="gh-portal-product-description">Access to all members articles and weekly podcast</div>
</div>
<div className="gh-portal-product-card-footer">
<div className="gh-portal-product-price">
<span className="currency-sign">$</span>
<span className="amount">120</span>
<span className="billing-period">/year</span>
</div>
<div className="gh-portal-product-alternative-price">$12/month</div>
</div>
</div>
<div className="gh-portal-product-card">
<div className="gh-portal-product-card-header">
<Checkbox name='x' id='x' isChecked={false} onPlanSelect='' />
<h4 className="gh-portal-product-name">Gold</h4>
<div className="gh-portal-product-description">Access to all members articles, weekly podcast and exclusive interviews</div>
</div>
<div className="gh-portal-product-card-footer">
<div className="gh-portal-product-price">
<span className="currency-sign">$</span>
<span className="amount">1000</span>
<span className="billing-period">/year</span>
</div>
<div className="gh-portal-product-alternative-price">$12/month</div>
</div>
</div>
</>
);
}
*/
function FreeProductCard() { function FreeProductCard() {
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext); const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
return ( return (
<div className="gh-portal-product-card"> <div className="gh-portal-product-card" onClick={(e) => {
e.stopPropagation();
setSelectedProduct('free');
}}>
<div className="gh-portal-product-card-header"> <div className="gh-portal-product-card-header">
<Checkbox name='x' id='x' isChecked={selectedProduct === 'free'} onProductSelect={() => { <Checkbox name='x' id='x' isChecked={selectedProduct === 'free'} onProductSelect={() => {
setSelectedProduct('free'); setSelectedProduct('free');