add back to premium button
This commit is contained in:
parent
5a2684643e
commit
d88b14ccc7
3 changed files with 33 additions and 27 deletions
|
@ -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' }}
|
||||
/>
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue