diff --git a/src/authentication/upgrade-modal/index.tsx b/src/authentication/upgrade-modal/index.tsx
index 3e75a2b7c0..de69a33980 100644
--- a/src/authentication/upgrade-modal/index.tsx
+++ b/src/authentication/upgrade-modal/index.tsx
@@ -145,11 +145,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.pro.subTitle}
-
- {this.state.billingPeriod === 'monthly'
- ? powerUp.powerUps.pro.pricing['monthly']
- : powerUp.powerUps.pro.pricing['yearly']}
-
+
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.pro.pricing['monthly']
+ : powerUp.powerUps.pro.pricing['yearly']}
+
+ {this.props.componentVariant === 'OnboardingStep' && (
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.pro.pricingDiscounted[
+ 'monthly'
+ ]
+ : powerUp.powerUps.pro.pricingDiscounted[
+ 'yearly'
+ ]}
+
+ )}
+
{
@@ -178,11 +193,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.ownKey.subTitle}
-
- {this.state.billingPeriod === 'monthly'
- ? powerUp.powerUps.ownKey.pricing['monthly']
- : powerUp.powerUps.ownKey.pricing['yearly']}
-
+
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.ownKey.pricing['monthly']
+ : powerUp.powerUps.ownKey.pricing['yearly']}
+
+ {this.props.componentVariant === 'OnboardingStep' && (
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.ownKey.pricingDiscounted[
+ 'monthly'
+ ]
+ : powerUp.powerUps.ownKey.pricingDiscounted[
+ 'yearly'
+ ]}
+
+ )}
+
)
@@ -293,11 +323,26 @@ export default class UpgradeModal extends UIElement<
{powerUp.powerUps.pro.subTitle}
-
- {this.state.billingPeriod === 'monthly'
- ? powerUp.powerUps.pro.pricing['monthly']
- : powerUp.powerUps.pro.pricing['yearly']}
-
+
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.pro.pricing['monthly']
+ : powerUp.powerUps.pro.pricing['yearly']}
+
+ {this.props.componentVariant === 'OnboardingStep' && (
+
+ {this.state.billingPeriod === 'monthly'
+ ? powerUp.powerUps.pro.pricingDiscounted[
+ 'monthly'
+ ]
+ : powerUp.powerUps.pro.pricingDiscounted[
+ 'yearly'
+ ]}
+
+ )}
+
)
@@ -352,7 +397,16 @@ export default class UpgradeModal extends UIElement<
Upgrade now and never pay for Memex again
- $500
+
+
+ $500
+
+ {this.props.componentVariant === 'OnboardingStep' && (
+ $400
+ )}
+
)
@@ -478,6 +532,10 @@ const Powerups = [
monthly: '$4',
yearly: '$40',
},
+ pricingDiscounted: {
+ monthly: '$3.20',
+ yearly: '$32',
+ },
},
},
},
@@ -500,6 +558,10 @@ const Powerups = [
monthly: '$6',
yearly: '$60',
},
+ pricingDiscounted: {
+ monthly: '$4.80',
+ yearly: '$48',
+ },
},
ownKey: {
title: 'Bring your own Key',
@@ -509,6 +571,10 @@ const Powerups = [
monthly: '$2.50',
yearly: '$25',
},
+ pricingDiscounted: {
+ monthly: '$2.00',
+ yearly: '$20',
+ },
},
},
},
@@ -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;
diff --git a/src/authentication/upgrade-modal/types.ts b/src/authentication/upgrade-modal/types.ts
index 2c3ebed4c0..2d38c004fa 100644
--- a/src/authentication/upgrade-modal/types.ts
+++ b/src/authentication/upgrade-modal/types.ts
@@ -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
diff --git a/src/overview/onboarding/screens/onboarding/index.tsx b/src/overview/onboarding/screens/onboarding/index.tsx
index 37c7f3c6f1..32deab4471 100644
--- a/src/overview/onboarding/screens/onboarding/index.tsx
+++ b/src/overview/onboarding/screens/onboarding/index.tsx
@@ -201,7 +201,7 @@ export default class OnboardingScreen extends StatefulUIElement<