lbry-desktop/ui/component/inviteNew/view.jsx

154 lines
5 KiB
React
Raw Normal View History

// @flow
2020-08-25 19:40:39 +02:00
import { URL, SITE_NAME } from 'config';
2020-01-14 21:44:07 +01:00
import React, { useEffect, useState } from 'react';
2018-04-10 22:58:34 +02:00
import Button from 'component/button';
2019-06-17 22:32:38 +02:00
import { Form, FormField } from 'component/common/form';
2019-02-20 17:18:59 +01:00
import CopyableText from 'component/copyableText';
2019-09-26 18:07:11 +02:00
import Card from 'component/common/card';
2020-01-14 21:44:07 +01:00
import SelectChannel from 'component/selectChannel';
import analytics from 'analytics';
2020-01-03 16:06:26 +01:00
import I18nMessage from 'component/i18nMessage';
2020-09-11 22:46:15 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
2017-08-18 05:31:44 +02:00
2019-11-22 22:13:00 +01:00
type Props = {
errorMessage: ?string,
inviteNew: string => void,
isPending: boolean,
referralLink: string,
2020-01-14 21:44:07 +01:00
referralCode: string,
channels: ?Array<ChannelClaim>,
2019-11-22 22:13:00 +01:00
};
2020-01-14 21:44:07 +01:00
function InviteNew(props: Props) {
const { inviteNew, errorMessage, isPending, referralCode = '', channels } = props;
2020-08-25 21:54:06 +02:00
const noChannels = !channels || !(channels.length > 0);
2020-01-14 21:44:07 +01:00
// Email
const [email, setEmail] = useState('');
function handleSubmit() {
inviteNew(email);
}
2020-01-14 21:44:07 +01:00
function handleEmailChanged(event: any) {
setEmail(event.target.value);
}
2020-01-14 21:44:07 +01:00
// Referral link
const [referralSource, setReferralSource] = useState(referralCode);
function handleReferralChange(code) {
setReferralSource(code);
// TODO: keep track of this in an array?
const matchingChannel = channels && channels.find(ch => ch.name === code);
if (matchingChannel) {
analytics.apiLogPublish(matchingChannel);
}
2017-08-18 05:31:44 +02:00
}
2020-01-14 21:44:07 +01:00
const topChannel =
channels &&
channels.reduce((top, channel) => {
const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0;
const currentClaimCount = (channel && channel.meta && channel.meta.claims_in_channel) || 0;
return topClaimCount >= currentClaimCount ? top : channel;
});
const referralString =
channels && channels.length && referralSource !== referralCode
? lookupUrlByClaimName(referralSource, channels)
: referralSource;
const referral = `${URL}/$/invite/${referralString.replace('#', ':')}`;
useEffect(() => {
// set default channel
if (topChannel) {
2020-01-14 21:44:07 +01:00
handleReferralChange(topChannel.name);
}
}, [topChannel]);
2020-01-14 21:44:07 +01:00
function lookupUrlByClaimName(name, channels) {
const claim = channels.find(channel => channel.name === name);
return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
2020-01-14 21:01:37 +01:00
}
2020-01-14 18:42:30 +01:00
2020-01-14 21:44:07 +01:00
return (
<div className={'columns'}>
<Card
2020-08-25 19:40:39 +02:00
title={__('Invites')}
2020-09-11 22:46:15 +02:00
subtitle={
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
You can use invites just like affiliate links.
</I18nMessage>
}
2020-01-14 21:44:07 +01:00
actions={
<React.Fragment>
<CopyableText label={__('Your invite link')} copyable={referral} />
2020-08-25 21:54:06 +02:00
{!noChannels && (
<SelectChannel
channel={referralSource}
onChannelChange={channel => handleReferralChange(channel)}
label={__('Customize link')}
hideAnon
injected={[referralCode]}
/>
)}
2020-01-14 21:44:07 +01:00
<p className="help">
<I18nMessage
tokens={{
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
}}
>
2020-08-25 19:40:39 +02:00
Read our %referral_faq_link% to learn more about rewards.
2020-01-14 21:44:07 +01:00
</I18nMessage>
</p>
</React.Fragment>
}
/>
2020-01-14 17:44:40 +01:00
2020-01-14 15:57:34 +01:00
<Card
2020-08-25 19:40:39 +02:00
title={__('Invite by email')}
2020-09-11 22:46:15 +02:00
subtitle={
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
</I18nMessage>
}
2020-01-14 15:57:34 +01:00
actions={
<React.Fragment>
2020-01-14 21:44:07 +01:00
<Form onSubmit={handleSubmit}>
2020-01-14 17:44:40 +01:00
<FormField
type="text"
2020-09-05 17:24:03 +02:00
label={__('Email')}
2020-01-14 17:44:40 +01:00
placeholder="youremail@example.org"
name="email"
2020-01-14 21:44:07 +01:00
value={email}
2020-01-14 17:44:40 +01:00
error={errorMessage}
2020-09-05 17:24:03 +02:00
inputButton={
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
}
2020-01-14 17:44:40 +01:00
onChange={event => {
2020-01-14 21:44:07 +01:00
handleEmailChanged(event);
2020-01-14 17:44:40 +01:00
}}
2020-01-14 15:57:34 +01:00
/>
<p className="help">
<I18nMessage
tokens={{
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
}}
>
2020-08-25 19:40:39 +02:00
Read our %referral_faq_link% to learn more about rewards.
2020-01-14 15:57:34 +01:00
</I18nMessage>
</p>
</Form>
</React.Fragment>
}
/>
2020-01-14 21:44:07 +01:00
</div>
);
2017-08-18 05:31:44 +02:00
}
export default InviteNew;