allow user to select preferred currency

ui/constants/settings.js

@@ -41,6 +41,7 @@ export const SUPPORT_OPTION = 'support_option';
 export const TILE_LAYOUT = 'tile_layout';
 export const VIDEO_THEATER_MODE = 'video_theater_mode';
 export const VIDEO_PLAYBACK_RATE = 'video_playback_rate';
+export const PREFERRED_CURRENCY = 'preferred_currency';
 
 export const SETTINGS_GRP = {
   APPEARANCE: 'appearance',

ui/constants/shared_preferences.js

@@ -31,4 +31,5 @@ export const CLIENT_SYNC_KEYS = [
   SETTINGS.AUTOMATIC_DARK_MODE_ENABLED,
   SETTINGS.LANGUAGE,
   SETTINGS.HOMEPAGE_ORDER,
+  SETTINGS.PREFERRED_CURRENCY,
 ];

ui/page/settingsStripeCard/index.js

@@ -1,23 +1,25 @@
 import { connect } from 'react-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
-import { selectosNotificationsEnabled } from 'redux/selectors/settings';
+import { selectClientSetting } from 'redux/selectors/settings';
 import { selectUserVerifiedEmail, selectUserEmail } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
 import { doToast } from 'redux/actions/notifications';
+import * as SETTINGS from 'constants/settings';
 
 import SettingsStripeCard from './view';
 
 const select = (state) => ({
-  osNotificationsEnabled: selectosNotificationsEnabled(state),
   isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
   email: selectUserEmail(state),
+  preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
 });
 
 const perform = (dispatch) => ({
-  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
-  doOpenModal,
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   doToast: (options) => dispatch(doToast(options)),
+  setPreferredCurrency: (value) => {
+    dispatch(doSetClientSetting(SETTINGS.PREFERRED_CURRENCY, value, true));
+  },
 });
 
 export default connect(select, perform)(SettingsStripeCard);

ui/page/settingsStripeCard/view.jsx

@@ -10,6 +10,7 @@ import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import * as PAGES from 'constants/pages';
+import { FormField } from 'component/common/form';
 import { STRIPE_PUBLIC_KEY } from 'config';
 import { getStripeEnvironment } from 'util/stripe';
 let stripeEnvironment = getStripeEnvironment();
@@ -51,12 +52,21 @@ class SettingsStripeCard extends React.Component<Props, State> {
       pageTitle: 'Add Card',
       userCardDetails: {},
       paymentMethodId: '',
+      preferredCurrency: 'USD',
     };
   }
 
   componentDidMount() {
     let that = this;
 
+    const { preferredCurrency } = this.props;
+
+    if (preferredCurrency) {
+      that.setState({
+        preferredCurrency: preferredCurrency,
+      });
+    }
+
     let doToast = this.props.doToast;
 
     // only add script if it doesn't already exist
@@ -345,6 +355,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
         };
       }, 0);
     }
+
   }
 
   render() {
@@ -356,9 +367,24 @@ class SettingsStripeCard extends React.Component<Props, State> {
       });
     }
 
+    const { setPreferredCurrency } = this.props;
+
+    // when user changes currency in selector
+    function onCurrencyChange(event: SyntheticInputEvent<*>) {
+      const { value } = event.target;
+
+      // update preferred currency in frontend
+      that.setState({
+        preferredCurrency: value,
+      });
+
+      // update client settings
+      setPreferredCurrency(value);
+    }
+
     const { scriptFailedToLoad, openModal } = this.props;
 
-    const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId } = this.state;
+    const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId, preferredCurrency } = this.state;
 
     return (
       <Page
@@ -439,6 +465,27 @@ class SettingsStripeCard extends React.Component<Props, State> {
               }
             />
             <br />
+
+            <div className="currency-to-use-div">
+              <h1 className="currency-to-use-header">Currency To Use:</h1>
+
+              <fieldset-section>
+                <FormField
+                  className="currency-to-use-selector"
+                  name="currency_selector"
+                  type="select"
+                  onChange={onCurrencyChange}
+                  value={preferredCurrency}
+                  // disabled={automaticDarkModeEnabled}
+                >
+                  {['USD', 'EUR'].map((currency) => (
+                    <option key={currency} value={currency}>
+                      {currency === 'USD' ? __('USD') : __('EUR')}
+                    </option>
+                  ))}
+                </FormField>
+              </fieldset-section>
+            </div>
           </div>
         )}
       </Page>

ui/redux/reducers/settings.js

@@ -8,6 +8,7 @@ import { UNSYNCED_SETTINGS } from 'config';
 
 const { CLIENT_SYNC_KEYS } = SHARED_PREFERENCES;
 const settingsToIgnore = (UNSYNCED_SETTINGS && UNSYNCED_SETTINGS.trim().split(' ')) || [];
+
 const clientSyncKeys = settingsToIgnore.length
   ? CLIENT_SYNC_KEYS.filter((k) => !settingsToIgnore.includes(k))
   : CLIENT_SYNC_KEYS;
@@ -65,6 +66,7 @@ const defaultState = {
       currency: 'LBC',
       amount: 0.1,
     },
+    [SETTINGS.PREFERRED_CURRENCY]: 'USD',
 
     // Content
     [SETTINGS.SHOW_MATURE]: false,

ui/scss/component/_stripe-card.scss

@@ -393,3 +393,16 @@ pre {
 .stripe__complete-verification-button {
   margin-right: 10px !important;
 }
+
+// currency selector
+.currency-to-use-div {
+  margin-bottom: 11px;
+}
+
+.currency-to-use-header {
+  margin-bottom: 5px;
+}
+
+.currency-to-use-selector {
+  max-width: 113px;
+}

ui/scss/init/_vars.scss

@@ -12,11 +12,11 @@
   --height-badge: 24px;
 
   // Spacing
-  --spacing-xxxs: calc(2rem / 6);
-  --spacing-xxs: calc(2rem / 5);
-  --spacing-xs: calc(2rem / 4);
-  --spacing-s: calc(2rem / 3);
-  --spacing-m: calc(2rem / 2);
+  --spacing-xxxs: calc(2rem / 6); // 0.33
+  --spacing-xxs: calc(2rem / 5); // 0.4
+  --spacing-xs: calc(2rem / 4); // 0.5
+  --spacing-s: calc(2rem / 3); // 0.66
+  --spacing-m: 1rem;
   --spacing-l: 2rem;
   --spacing-xl: 3rem;
   --spacing-xxl: 4rem;