allow user to save currency on client

ui/page/odyseeMembership/index.js

@@ -4,7 +4,9 @@ import OdyseeMembership from './view';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { selectMyChannelClaims, selectClaimsByUri } from 'redux/selectors/claims';
 import { doFetchUserMemberships, doCheckUserOdyseeMemberships } from 'redux/actions/user';
+import { selectClientSetting } from 'redux/selectors/settings';
 import { selectUser, selectUserLocale } from 'redux/selectors/user';
+import * as SETTINGS from 'constants/settings';
 
 const select = (state) => {
   const activeChannelClaim = selectActiveChannelClaim(state);
@@ -16,6 +18,7 @@ const select = (state) => {
     incognito: selectIncognito(state),
     user: selectUser(state),
     locale: selectUserLocale(state),
+    preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
   };
 };
 

ui/page/odyseeMembership/view.jsx

@@ -42,6 +42,7 @@ type Props = {
   updateUserOdyseeMembershipStatus: () => void,
   user: ?User,
   locale: ?LocaleInfo,
+  preferredCurrency: ?string,
 };
 
 const OdyseeMembershipPage = (props: Props) => {
@@ -55,6 +56,7 @@ const OdyseeMembershipPage = (props: Props) => {
     incognito,
     user,
     locale,
+    preferredCurrency,
   } = props;
 
   const userChannelName = activeChannelClaim ? activeChannelClaim.name : '';
@@ -196,8 +198,13 @@ const OdyseeMembershipPage = (props: Props) => {
         console.log(err);
       }
 
-      if (locale?.continent === 'EU') {
+      // use currency if set on client, otherwise use USD by default or EUR if in Europe
-        setCurrencyToUse('eur');
+      if (preferredCurrency) {
+        setCurrencyToUse(preferredCurrency.toLowerCase());
+      } else {
+        if (locale?.continent === 'EU') {
+          setCurrencyToUse('eur');
+        }
       }
 
       populateMembershipData();

ui/page/settingsStripeCard/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectClientSetting } from 'redux/selectors/settings';
-import { selectUserVerifiedEmail, selectUserEmail } from 'redux/selectors/user';
+import { selectUserVerifiedEmail, selectUserEmail, selectUserLocale } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
 import { doToast } from 'redux/actions/notifications';
 import * as SETTINGS from 'constants/settings';
@@ -12,6 +12,7 @@ const select = (state) => ({
   isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
   email: selectUserEmail(state),
   preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
+  locale: selectUserLocale(state),
 });
 
 const perform = (dispatch) => ({

ui/page/settingsStripeCard/view.jsx

@@ -29,6 +29,7 @@ type Props = {
   doOpenModal: (string, {}) => void,
   openModal: (string, {}) => void,
   setAsConfirmingCard: () => void,
+  locale: ?any,
 };
 
 // type State = {
@@ -59,12 +60,19 @@ class SettingsStripeCard extends React.Component<Props, State> {
   componentDidMount() {
     let that = this;
 
-    const { preferredCurrency } = this.props;
+    const { preferredCurrency, locale } = this.props;
 
+    // use preferredCurrency if it's set on client, otherwise use USD, unless in Europe then use EUR
     if (preferredCurrency) {
       that.setState({
         preferredCurrency: preferredCurrency,
       });
+    } else if (locale) {
+      if (locale.continent === 'EU') {
+        that.setState({
+          preferredCurrency: 'EUR',
+        });
+      }
     }
 
     let doToast = this.props.doToast;
@@ -355,7 +363,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
         };
       }, 0);
     }
-
   }
 
   render() {
@@ -370,7 +377,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
     const { setPreferredCurrency } = this.props;
 
     // when user changes currency in selector
-    function onCurrencyChange(event: SyntheticInputEvent<*>) {
+    function onCurrencyChange(event) {
       const { value } = event.target;
 
       // update preferred currency in frontend