TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 11:22:19 +03:00
Code Issues Projects Releases Wiki Activity

Added placeholders for Tier Preview values

Browse Source 
refs https://github.com/TryGhost/Product/issues/3580
This commit is contained in:
Djordje Vlaisavljevic 2023-07-13 13:20:45 +01:00
parent 873f3f4ae3
commit 0a79fc8ce7
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import Button from '../../../../admin-x-ds/global/Button';
import Heading from '../../../../admin-x-ds/global/Heading';
import Icon from '../../../../admin-x-ds/global/Icon';
import React, {useState} from 'react';
import {Tier} from '../../../../types/api';
@ -28,7 +29,14 @@ const TrialDaysLabel: React.FC<{trialDays: number}> = ({trialDays}) => {
const TierBenefits: React.FC<{benefits: string[]}> = ({benefits}) => {
if (!benefits?.length) {
return null;
return (
<div className="mt-4 w-full text-md leading-snug text-grey-900 opacity-30">
<div className="mb-2.5 flex items-start">
<Icon className="mr-[10px] mt-[3px] !h-3.5 !w-3.5 min-w-[14px] overflow-visible !stroke-[3px]" name='check' />
<div>Expert analysis</div>
</div>
</div>
);
}
return (
<>
@ -74,19 +82,19 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier}) => {
: 0;
return (
<div className="mt-[-6px]">
<div className="mt-[-5px]">
<div className="flex items-baseline justify-between">
<h4 className="z-10 pb-3 text-2xs font-semibold uppercase tracking-wide text-grey-700">Tier preview</h4>
<Heading className="pb-2" level={6} grey>Tier preview</Heading>
<div className="flex">
<Button label="Monthly" onClick={() => setShowingYearly(false)} />
<Button label="Yearly" onClick={() => setShowingYearly(true)} />
<Button className={`${showingYearly === true ? 'text-grey-500' : 'text-grey-900'}`} label="Monthly" link onClick={() => setShowingYearly(false)} />
<Button className={`ml-2 ${showingYearly === true ? 'text-grey-900' : 'text-grey-500'}`} label="Yearly" link onClick={() => setShowingYearly(true)} />
</div>
</div>
<div className="flex-column relative flex min-h-[200px] w-full max-w-[420px] items-start justify-stretch rounded border border-grey-200 bg-white p-8">
<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}</h4>
<h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!name && 'opacity-30'}`}>{name || '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">
<div className={`flex flex-wrap text-black ${!yearlyPrice && !monthlyPrice && '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 ? yearlyPrice : monthlyPrice}</span>
<span className="ml-1 self-end text-[1.5rem] leading-snug text-grey-800">/{showingYearly ? 'year' : 'month'}</span>
@ -97,7 +105,7 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier}) => {
</div>
<div className="flex-column flex w-full flex-1">
<div className="flex-1">
<div className="mt-4 w-full text-[1.55rem] font-semibold leading-snug text-grey-900">{description}</div>
<div className={`mt-4 w-full text-[1.55rem] font-semibold leading-snug text-grey-900 ${!description && 'opacity-30'}`}>{description || 'Full access to premium content'}</div>
<TierBenefits benefits={benefits} />
</div>
</div>