TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-23 11:55:01 +03:00
Code Issues Projects Releases Wiki Activity

Switched to left-align design for the offer cards in AdminX

Browse Source 
no issues
This commit is contained in:
Sodbileg Gansukh 2023-11-07 19:29:09 +08:00
parent 5739fbe3d2
commit d68fa7d424
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
View File

@ -23,44 +23,46 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
let discountOffer = '';
const originalPrice = cadence === 'month' ? offerTier?.monthly_price ?? 0 : offerTier?.yearly_price ?? 0;
let updatedPrice = originalPrice;
let tierName = offerTier?.name + ' ' + (cadence === 'month' ? 'Monthly' : 'Yearly') + ' - ' + (duration === 'once' ? 'First payment' : duration === 'repeating' ? 'Repeating' : 'Forever');
let tierName = offerTier?.name + ' ' + (cadence === 'month' ? 'Monthly' : 'Yearly') + ' — ' + (duration === 'once' ? 'First payment' : duration === 'repeating' ? 'Repeating' : 'Forever');
let originalPriceWithCurrency = getSymbol(currency) + numberWithCommas(currencyToDecimal(originalPrice));
const updatedPriceWithCurrency = getSymbol(currency) + numberWithCommas(currencyToDecimal(updatedPrice));
switch (type) {
case 'percent':
discountColor = 'text-green';
discountOffer = amount + '% OFF';
discountOffer = amount + '% off';
updatedPrice = originalPrice - ((originalPrice * amount) / 100);
break;
case 'fixed':
discountColor = 'text-blue';
discountOffer = numberWithCommas(currencyToDecimal(amount)) + ' ' + currency + ' OFF';
discountOffer = numberWithCommas(currencyToDecimal(amount)) + ' ' + currency + ' off';
updatedPrice = originalPrice - amount;
break;
case 'trial':
discountColor = 'text-pink';
discountOffer = amount + ' DAYS FREE';
discountOffer = amount + ' days free';
originalPriceWithCurrency = '';
break;
default:
break;
}
return <div className='flex flex-col items-center gap-6 border border-transparent bg-grey-100 p-5 text-center transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800'>
<h2 className='cursor-pointer text-[1.6rem]' onClick={onClick}>{name}</h2>
<div className=''>
<div className='flex gap-3 text-sm uppercase leading-none'>
<span className={`font-semibold ${discountColor}`}>{discountOffer}</span>
<span className='text-grey-700 line-through'>{originalPriceWithCurrency}</span>
return (
<div className='flex cursor-pointer flex-col gap-6 border border-transparent bg-grey-100 p-5 transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800' onClick={onClick}>
<div className='flex items-center justify-between'>
<h2 className='text-[1.6rem] font-semibold' onClick={onClick}>{name}</h2>
<span className={`text-xs font-semibold uppercase ${discountColor}`}>{discountOffer}</span>
</div>
<div className='flex items-baseline gap-1'>
<span className='text-4xl font-bold tracking-tight'>{updatedPriceWithCurrency}</span>
<span className='text-[1.6rem] font-medium text-grey-700 line-through'>{originalPriceWithCurrency}</span>
</div>
<div className='flex flex-col items-start text-xs'>
<span className='font-medium'>{tierName}</span>
<a className='text-grey-700 hover:underline' href={createRedemptionFilterUrl(offerId)}>{redemptionCount} redemptions</a>
</div>
<span className='text-3xl font-bold'>{updatedPriceWithCurrency}</span>
</div>
<div className='flex flex-col items-center text-xs'>
<span className='font-medium'>{tierName}</span>
<a className='text-grey-700 hover:underline' href={createRedemptionFilterUrl(offerId)}>{redemptionCount} redemptions</a>
</div>
</div>;
);
};
const OffersModal = () => {
@ -87,14 +89,14 @@ const OffersModal = () => {
{id: 'archived', title: 'Archived'}
];
const [selectedTab, setSelectedTab] = useState('active');
const handleOfferEdit = (id:string) => {
// TODO: implement
modal.remove();
updateRoute(`offers/${id}`);
};
return <Modal
return <Modal
afterClose={() => {
updateRoute('offers');
}}