allow user to select preferred currency
This commit is contained in:
parent
f9d32abbf6
commit
fed8fafe6c
7 changed files with 76 additions and 10 deletions
|
@ -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',
|
||||
|
|
|
@ -31,4 +31,5 @@ export const CLIENT_SYNC_KEYS = [
|
|||
SETTINGS.AUTOMATIC_DARK_MODE_ENABLED,
|
||||
SETTINGS.LANGUAGE,
|
||||
SETTINGS.HOMEPAGE_ORDER,
|
||||
SETTINGS.PREFERRED_CURRENCY,
|
||||
];
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue