OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed default prices in tier previews (#19586)

Browse Source 
fixes ENG-558
This commit is contained in:
Sag 2024-01-25 20:42:18 +01:00 committed by GitHub
parent 18d6d72c41
commit 360e02db4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx
View File

@ -257,6 +257,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
title='Monthly price'
valueInCents={formState.monthly_price || ''}
hideTitle
onBlur={event => ((event.target.value === '') ? updateForm(state => ({...state, monthly_price: 0})) : null)}
onChange={price => updateForm(state => ({...state, monthly_price: price}))}
onKeyDown={() => clearError('monthly_price')}
/>
@ -268,6 +269,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
title='Yearly price'
valueInCents={formState.yearly_price || ''}
hideTitle
onBlur={event => ((event.target.value === '') ? updateForm(state => ({...state, yearly_price: 0})) : null)}
onChange={price => updateForm(state => ({...state, yearly_price: price}))}
onKeyDown={() => clearError('yearly_price')}
/>

8
apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx
View File

@ -76,8 +76,10 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier, isFreeTier})
const currencySymbol = currency ? getSymbol(currency) : '$';
const benefits = tier?.benefits || [];
const monthlyPrice = currencyToDecimal(tier?.monthly_price ?? 500);
const yearlyPrice = currencyToDecimal(tier?.yearly_price ?? 5000);
const defaultMonthlyPrice = isFreeTier ? 0 : 500;
const defaultYearlyPrice = isFreeTier ? 0 : 5000;
const monthlyPrice = currencyToDecimal(tier?.monthly_price ?? defaultMonthlyPrice);
const yearlyPrice = currencyToDecimal(tier?.yearly_price ?? defaultYearlyPrice);
const yearlyDiscount = tier?.monthly_price && tier?.yearly_price
? Math.ceil(((monthlyPrice * 12 - yearlyPrice) / (monthlyPrice * 12)) * 100)
: 0;
@ -96,7 +98,7 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier, isFreeTier})
<div className="min-h-[56px] w-full">
<h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!name && 'opacity-30'}`}>{name || (isFreeTier ? 'Free' : 'Bronze')}</h4>
<div className="mt-4 flex w-full flex-row flex-wrap items-end justify-between gap-x-1 gap-y-[10px]">
<div className={`flex flex-wrap text-black ${!yearlyPrice && !monthlyPrice && !isFreeTier && 'opacity-30'}`}>
<div className={`flex flex-wrap text-black ${((showingYearly && tier?.yearly_price === undefined) || (!showingYearly && tier?.monthly_price === undefined)) && !isFreeTier ? 'opacity-30' : ''}`}>
<span className="self-start text-[2.7rem] font-bold uppercase leading-[1.115]">{currencySymbol}</span>
<span className="break-all text-[3.4rem] font-bold leading-none tracking-tight">{showingYearly ? numberWithCommas(yearlyPrice) : numberWithCommas(monthlyPrice)}</span>
{!isFreeTier && <span className="ml-1 self-end text-[1.5rem] leading-snug text-grey-800">/{showingYearly ? 'year' : 'month'}</span>}