Skip to content

Commit

Permalink
add discounted pricing to onboarding step
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed May 7, 2024
1 parent d9f64d1 commit 4d6860e
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 19 deletions.
128 changes: 111 additions & 17 deletions src/authentication/upgrade-modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,11 +145,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.pro.subTitle}
</PowerUpSubTitle>
</PowerUpTitleBox>
<PowerUpPricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricing['monthly']
: powerUp.powerUps.pro.pricing['yearly']}
</PowerUpPricing>
<PowerUpPricingBox>
<PowerUpPricing
componentVariant={this.props.componentVariant}
>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricing['monthly']
: powerUp.powerUps.pro.pricing['yearly']}
</PowerUpPricing>
{this.props.componentVariant === 'OnboardingStep' && (
<AlternativePricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricingDiscounted[
'monthly'
]
: powerUp.powerUps.pro.pricingDiscounted[
'yearly'
]}
</AlternativePricing>
)}
</PowerUpPricingBox>
</PowerUpItem>
<PowerUpItem
onClick={() => {
Expand Down Expand Up @@ -178,11 +193,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.ownKey.subTitle}
</PowerUpSubTitle>
</PowerUpTitleBox>
<PowerUpPricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.ownKey.pricing['monthly']
: powerUp.powerUps.ownKey.pricing['yearly']}
</PowerUpPricing>
<PowerUpPricingBox>
<PowerUpPricing
componentVariant={this.props.componentVariant}
>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.ownKey.pricing['monthly']
: powerUp.powerUps.ownKey.pricing['yearly']}
</PowerUpPricing>
{this.props.componentVariant === 'OnboardingStep' && (
<AlternativePricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.ownKey.pricingDiscounted[
'monthly'
]
: powerUp.powerUps.ownKey.pricingDiscounted[
'yearly'
]}
</AlternativePricing>
)}
</PowerUpPricingBox>
</PowerUpItem>
</PowerUpOptions>
)
Expand Down Expand Up @@ -293,11 +323,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.pro.subTitle}
</PowerUpSubTitle>
</PowerUpTitleBox>
<PowerUpPricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricing['monthly']
: powerUp.powerUps.pro.pricing['yearly']}
</PowerUpPricing>
<PowerUpPricingBox>
<PowerUpPricing
componentVariant={this.props.componentVariant}
>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricing['monthly']
: powerUp.powerUps.pro.pricing['yearly']}
</PowerUpPricing>
{this.props.componentVariant === 'OnboardingStep' && (
<AlternativePricing>
{this.state.billingPeriod === 'monthly'
? powerUp.powerUps.pro.pricingDiscounted[
'monthly'
]
: powerUp.powerUps.pro.pricingDiscounted[
'yearly'
]}
</AlternativePricing>
)}
</PowerUpPricingBox>
</PowerUpItem>
</PowerUpOptions>
)
Expand Down Expand Up @@ -352,7 +397,16 @@ export default class UpgradeModal extends UIElement<
Upgrade now and never pay for Memex again
</PowerUpSubTitle>
</PowerUpTitleBox>
<PowerUpPricing>$500</PowerUpPricing>
<PowerUpPricingBox>
<PowerUpPricing
componentVariant={this.props.componentVariant}
>
$500
</PowerUpPricing>
{this.props.componentVariant === 'OnboardingStep' && (
<AlternativePricing>$400</AlternativePricing>
)}
</PowerUpPricingBox>
</PowerUpItem>
</PowerUpOptions>
)
Expand Down Expand Up @@ -478,6 +532,10 @@ const Powerups = [
monthly: '$4',
yearly: '$40',
},
pricingDiscounted: {
monthly: '$3.20',
yearly: '$32',
},
},
},
},
Expand All @@ -500,6 +558,10 @@ const Powerups = [
monthly: '$6',
yearly: '$60',
},
pricingDiscounted: {
monthly: '$4.80',
yearly: '$48',
},
},
ownKey: {
title: 'Bring your own Key',
Expand All @@ -509,6 +571,10 @@ const Powerups = [
monthly: '$2.50',
yearly: '$25',
},
pricingDiscounted: {
monthly: '$2.00',
yearly: '$20',
},
},
},
},
Expand Down Expand Up @@ -625,7 +691,35 @@ const PowerUpSubTitle = styled.div`
width: 100%;
font-size: 13px;
`
const PowerUpPricing = styled.div`

const PowerUpPricingBox = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
grid-gap: 3px;
align-items: flex-end;
`

const PowerUpPricing = styled.div<{
componentVariant?: string
}>`
color: ${(props) => props.theme.colors.prime1};
font-size: 18px;
font-weight: 700;
min-width: 60px;
text-align: right;
${(props) =>
props.componentVariant === 'OnboardingStep' &&
css`
text-decoration: line-through;
color: ${(props) => props.theme.colors.greyScale5};
font-size: 15px;
`}
`
const AlternativePricing = styled.div<{
componentVariant?: string
}>`
color: ${(props) => props.theme.colors.prime1};
font-size: 18px;
font-weight: 700;
Expand Down
2 changes: 1 addition & 1 deletion src/authentication/upgrade-modal/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface PromptTemplatesDependencies {
selectedPremiumPlans: PremiumPlans[],
doNotOpen: boolean,
) => Promise<'error' | 'success'>
componentVariant: 'Modal' | 'PricingList' | 'AccountPage'
componentVariant: 'Modal' | 'PricingList' | 'AccountPage' | 'OnboardingStep'
getRootElement?: () => HTMLElement
closeComponent?: () => void
authBG: AuthRemoteFunctionsInterface
Expand Down
2 changes: 1 addition & 1 deletion src/overview/onboarding/screens/onboarding/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export default class OnboardingScreen extends StatefulUIElement<
</DescriptionText>
<UpgradeModalContainer>
<UpgradeModal
componentVariant="PricingList"
componentVariant="OnboardingStep"
authBG={this.props.authBG}
powerUpType="Bookmarks"
createCheckOutLink={
Expand Down

0 comments on commit 4d6860e

Please sign in to comment.