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

Updated the copy and logic for the CTAs

Browse Source 
refs https://github.com/TryGhost/Team/issues/1754
This commit is contained in:
James Morris 2022-08-09 18:29:07 +01:00
parent fbdb70330f
commit 82cc974549
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/comments-ui/src/components/CTABox.js
View File

@ -2,7 +2,7 @@ import {useContext} from 'react';
import AppContext from '../AppContext';
const CTABox = (props) => {
const {accentColor, publication} = useContext(AppContext);
const {accentColor, publication, member} = useContext(AppContext);
const buttonStyle = {
backgroundColor: accentColor
@ -14,8 +14,8 @@ const CTABox = (props) => {
const titleText = (props.isFirst ? 'Start the conversation' : 'Join the discussion');
const handleSubscribeClick = (event) => {
window.location.href = props.isPaid ? '#/portal/account/plans' : '#/portal/signup';
const handleSignUpClick = (event) => {
window.location.href = (props.isPaid && member) ? '#/portal/account/plans' : '#/portal/signup';
};
const handleSignInClick = (event) => {
@ -23,20 +23,20 @@ const CTABox = (props) => {
};
return (
<section className={`flex flex-col items-center pt-[40px] pb-[48px] px-8 border-t-2 border-gray-100 dark:border-gray-100/10 border-b-2`}>
<section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} px-8 border-t-2 border-gray-100 dark:border-gray-100/10 border-b-2`}>
<h1 className={`mb-[8px] text-center text-black text-[24px] font-sans tracking-tight dark:text-[rgba(255,255,255,0.85)] ${props.isFirst ? 'font-semibold' : 'font-bold'}`}>
{titleText}
</h1>
<p className="mb-[28px] px-8 max-w-screen-sm font-sans text-[16px] text-center leading-normal text-neutral-600 dark:text-[rgba(255,255,255,0.85)]">
Become a {props.isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
</p>
<button onClick={handleSubscribeClick} className="mb-[12px] text-white font-san py-[14px] px-5 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
{props.isPaid ? 'Choose a plan' : 'Subscribe now'}
<button onClick={handleSignUpClick} className="mb-[12px] text-white font-san py-[14px] px-5 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
{(props.isPaid && member) ? 'Upgrade now' : 'Sign up now'}
</button>
<p className="text-sm font-sans text-center text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{!member && (<p className="text-sm font-sans text-center text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
<span className='inline-block mr-1 text-[15px]'>Already a member?</span>
<button onClick={handleSignInClick} className="rounded-md hover:opacity-90 transition-all text-sm font-semibold" style={linkStyle}>Sign in</button>
</p>
</p>)}
</section>
);
};