add back to premium button

This commit is contained in:
Anthony 2022-03-23 21:14:15 +01:00 committed by Thomas Zarebczan
parent 5a2684643e
commit d88b14ccc7
3 changed files with 33 additions and 27 deletions

View file

@ -599,20 +599,6 @@ const OdyseeMembershipPage = (props: Props) => {
{formatDate(membership.Subscription.current_period_end * 1000)}
</h4>
{!stillWaitingFromBackend && membership.type === 'yearly' && (
<>
<h4 className="membership_info">
<b>{__('Membership Period Options')}:</b> {__('Yearly')}
</h4>
{/* TODO: this looks wrong, should support EUR as well */}
<h4 className="membership_info">
{__('%yearly_cost% USD For A One Year Membership (%monthly_cost% Per Month)', {
yearly_cost: (membership.cost_usd * 12) / 100,
monthly_cost: membership.cost_usd / 100,
})}
</h4>
</>
)}
{/* cancel membership button */}
<Button
button="alt"
@ -670,13 +656,11 @@ const OdyseeMembershipPage = (props: Props) => {
{__('Please save a card as a payment method so you can join Odysee Premium')}
</h2>
<h2 className={'getPaymentCard'}>{__('After the card is added, click Back')}</h2>
<Button
button="primary"
label={__('Add a Card')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}?returnTo=premium`}
className="membership_button"
style={{ maxWidth: '151px' }}
/>

View file

@ -133,7 +133,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
that.setState({
currentFlowStage: 'cardConfirmed',
pageTitle: 'Tip History',
pageTitle: 'Payment Methods',
userCardDetails: cardDetails,
paymentMethodId: customerStatusResponse.PaymentMethods[0].id,
});
@ -352,7 +352,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
that.setState({
currentFlowStage: 'cardConfirmed',
pageTitle: 'Tip History',
pageTitle: 'Payment Methods',
userCardDetails: cardDetails,
paymentMethodId: customerStatusResponse.PaymentMethods[0].id,
});
@ -368,6 +368,9 @@ class SettingsStripeCard extends React.Component<Props, State> {
render() {
let that = this;
const returnToValue = new URLSearchParams(this.props.location.search).get('returnTo');
let shouldShowBackToMembershipButton = returnToValue === 'premium';
function setAsConfirmingCard() {
that.setState({
currentFlowStage: 'confirmingCard',
@ -394,13 +397,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId, preferredCurrency } = this.state;
return (
<Page
noFooter
noSideNavigation
settingsPage
className="card-stack"
backout={{ title: __(pageTitle), backLabel: __('Back') }}
>
<Page noFooter noSideNavigation className="card-stack" backout={{ title: __(pageTitle), backLabel: __('Back') }}>
{/* if Stripe javascript didn't load */}
<div>
{scriptFailedToLoad && (
@ -437,6 +434,16 @@ class SettingsStripeCard extends React.Component<Props, State> {
{/* if the user has already confirmed their card */}
{currentFlowStage === 'cardConfirmed' && (
<div className="successCard">
{/* back to membership button */}
{shouldShowBackToMembershipButton && (
<Button
button="primary"
label={__('Back To Odysee Premium')}
icon={ICONS.UPGRADE}
navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`}
style={{ marginBottom: '20px' }}
/>
)}
<Card
title={__('Card Details')}
body={

View file

@ -4,7 +4,7 @@
}
.jp-card-container {
margin: 0 !important;
margin: 0 auto !important;
margin-top: 8px !important;
}
@ -406,3 +406,18 @@ pre {
.currency-to-use-selector {
max-width: 113px;
}
.successCard {
text-align: center;
margin: 0 auto;
display: block;
}
.card__header--between,
.card__title-section {
display: block;
}
.currency-to-use-selector {
margin: 0 auto;
}