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<