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

Updated signup cta for tiers with free trial

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

- updates cta for tiers which include a free trial period
This commit is contained in:
Rishabh 2022-08-05 17:35:08 +05:30
parent 3ff111291c
commit 2310fa2416
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -531,6 +531,7 @@ function ProductCardPrice({product}) {
const {selectedInterval} = useContext(ProductsContext);
const monthlyPrice = product.monthlyPrice;
const yearlyPrice = product.yearlyPrice;
const trialDays = product.trial_days;
const activePrice = selectedInterval === 'month' ? monthlyPrice : yearlyPrice;
const alternatePrice = selectedInterval === 'month' ? yearlyPrice : monthlyPrice;
if (!monthlyPrice || !yearlyPrice) {
@ -540,6 +541,21 @@ function ProductCardPrice({product}) {
const yearlyDiscount = calculateDiscount(product.monthlyPrice.amount, product.yearlyPrice.amount);
const currencySymbol = getCurrencySymbol(activePrice.currency);
if (trialDays) {
return (
<>
<div className="gh-portal-product-card-pricecontainer">
<div className="gh-portal-product-price">
<span className="amount trial-duration">{trialDays} days free</span>
</div>
{(selectedInterval === 'year' ? <YearlyDiscount discount={yearlyDiscount} /> : '')}
<ProductCardAlternatePrice price={alternatePrice} />
</div>
<span className="after-trial-amount">Then {currencySymbol}{formatNumber(getStripeAmount(activePrice.amount))}/{activePrice.interval}</span>
</>
);
}
return (
<div className="gh-portal-product-card-pricecontainer">
<div className="gh-portal-product-price">
@ -550,15 +566,6 @@ function ProductCardPrice({product}) {
{(selectedInterval === 'year' ? <YearlyDiscount discount={yearlyDiscount} /> : '')}
<ProductCardAlternatePrice price={alternatePrice} />
</div>
// Static HTML template for variant of product card for tiers with free trial enabled
// <div className="gh-portal-product-card-pricecontainer">
// <div className="gh-portal-product-price">
// <span className="amount trial-duration">30 days free</span>
// </div>
// {(selectedInterval === 'year' ? <YearlyDiscount discount={yearlyDiscount} /> : '')}
// <ProductCardAlternatePrice price={alternatePrice} />
// </div>
// <span className="after-trial-amount">Then $30/month</span>
);
}