Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

YPP video upload multipliers #4656

Merged
merged 1 commit into from
Aug 17, 2023
Merged

YPP video upload multipliers #4656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/atlas/atlas.config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ features:
- Get rewarded for every new video synced to $VITE_APP_NAME. Min length of rewarded video is 5 minutes. Sync rewards capped to 3 per week.
baseAmount: null
baseUsdAmount: 1
customMultiplier: [1, 5, 10]
customMultiplier: [1, 2, 5]
- title: Refer another YouTube creator
shortDescription: Get JOY for every new creator who signs up to YPP program using your referral link. Referrals multiplier depends on the popularity tier of the channel signed up using referral link.
stepsDescription: Earn when another YouTube creator signs up to the program by using your your referral link.
Expand Down
24 changes: 15 additions & 9 deletions packages/atlas/src/views/global/YppLandingView/YppRewardSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const YppRewardSection: FC = () => {
const mdMatch = useMediaMatch('md')
const tiers = atlasConfig.features.ypp.tiersDefinition?.tiers
const rewards = atlasConfig.features.ypp.rewards
const [rewardMultiplier, setRewardMultiplier] = useState<number>(tiers ? tiers[tiers.length - 1].multiplier : 1)
const [activeTier, setActiveTier] = useState<number>((tiers && tiers.length - 1) || 0)
const ref = useRef<HTMLDivElement>(null)

if (!rewards?.length) {
Expand Down Expand Up @@ -75,12 +75,13 @@ export const YppRewardSection: FC = () => {
{tiers.map((tier, idx, tierArray) => {
const isFirstTier = idx === 0
const isLastTier = idx === tierArray.length - 1
const isActiveTier = idx === activeTier
if (isFirstTier) {
return (
<BenefitsCardButton
variant={rewardMultiplier === tier.multiplier ? 'primary' : 'tertiary'}
variant={isActiveTier ? 'primary' : 'tertiary'}
key={tier.minimumSubscribers}
onClick={() => setRewardMultiplier(tier.multiplier)}
onClick={() => setActiveTier(idx)}
>
&lt;
<NumberFormat
Expand All @@ -97,9 +98,9 @@ export const YppRewardSection: FC = () => {
if (isLastTier) {
return (
<BenefitsCardButton
variant={rewardMultiplier === tier.multiplier ? 'primary' : 'tertiary'}
variant={isActiveTier ? 'primary' : 'tertiary'}
key={tier.minimumSubscribers}
onClick={() => setRewardMultiplier(tier.multiplier)}
onClick={() => setActiveTier(idx)}
>
&gt;
<NumberFormat
Expand All @@ -115,9 +116,9 @@ export const YppRewardSection: FC = () => {
}
return (
<BenefitsCardButton
variant={rewardMultiplier === tier.multiplier ? 'primary' : 'tertiary'}
variant={isActiveTier ? 'primary' : 'tertiary'}
key={tier.minimumSubscribers}
onClick={() => setRewardMultiplier(tier.multiplier)}
onClick={() => setActiveTier(idx)}
>
<NumberFormat
as="span"
Expand All @@ -143,14 +144,19 @@ export const YppRewardSection: FC = () => {
<LayoutGrid data-aos="fade-up" data-aos-delay="200" data-aos-offset="80" data-aos-easing="atlas-easing">
<BenefitsCardsContainerGridItem colStart={{ lg: 2 }} colSpan={{ base: 12, lg: 10 }}>
{rewards.map((reward) => {
const customMultiplier = reward.customMultiplier && reward.customMultiplier[activeTier]
const currentMultiplier = tiers ? tiers[activeTier].multiplier : 1
const rewardAmount = reward.baseAmount
? typeof reward.baseAmount === 'number'
? { type: 'number' as const, amount: reward.baseAmount * rewardMultiplier }
? {
type: 'number' as const,
amount: reward.baseAmount * (customMultiplier || currentMultiplier),
}
: { type: 'range' as const, min: reward.baseAmount.min, max: reward.baseAmount.max }
: null
const rewardAmountUsd = reward.baseUsdAmount
? typeof reward.baseUsdAmount === 'number'
? { type: 'number' as const, amount: reward.baseUsdAmount * rewardMultiplier }
? { type: 'number' as const, amount: reward.baseUsdAmount * (customMultiplier || currentMultiplier) }
: { type: 'range' as const, min: reward.baseUsdAmount.min, max: reward.baseUsdAmount.max }
: null
return (
Expand Down