add back to premium button

ui/page/odyseeMembership/view.jsx

@@ -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' }}
                 />

ui/page/settingsStripeCard/view.jsx

@@ -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
+      <Page noFooter noSideNavigation className="card-stack" backout={{ title: __(pageTitle), backLabel: __('Back') }}>
-        noFooter
-        noSideNavigation
-        settingsPage
-        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={

ui/scss/component/_stripe-card.scss

@@ -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;
+}