diff --git a/flow-typed/stripe.js b/flow-typed/stripe.js
index 67895bdbbd..7cb2fb1365 100644
--- a/flow-typed/stripe.js
+++ b/flow-typed/stripe.js
@@ -9,6 +9,7 @@ declare type StripeState = {
customerStatusFetching: ?boolean,
customerStatus: any,
customerSetupResponse: ?StripeCustomerSetupResponse,
+ currencyRates: {[fromCurrency: string]: {[toCurrency: string]: number}},
};
declare type StripeAccountInfo = {
diff --git a/static/app-strings.json b/static/app-strings.json
index 6ffecd1759..d856c92c4d 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2955,6 +2955,7 @@
"Are you a supermodel or rockstar that received a custom Credits code? Claim it here.": "Are you a supermodel or rockstar that received a custom Credits code? Claim it here.",
"Default action when clicking a playlist.": "Default action when clicking a playlist.",
"Default playlist action": "Default playlist action",
+ "Approx. %currency%%amount%": "Approx. %currency%%amount%",
"--end--": "--end--"
}
diff --git a/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/index.js b/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/index.js
index ec1135f0fb..4391387dbd 100644
--- a/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/index.js
+++ b/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/index.js
@@ -10,19 +10,26 @@ import {
import PaidContentOvelay from './view';
import { doOpenModal } from 'redux/actions/app';
import { selectPreferredCurrency } from 'redux/selectors/settings';
+import { selectCurrencyRate } from 'redux/selectors/stripe';
const select = (state, props) => {
const { uri } = props;
const preorderContentClaimId = selectPreorderContentClaimIdForUri(state, uri);
+ const preferredCurrency = selectPreferredCurrency(state);
+ const estimatedRate = selectCurrencyRate(state, 'USD', preferredCurrency);
+ const purchaseTag = selectPurchaseTagForUri(state, uri);
+
+ const preferredCurrencyPriceEstimate = (estimatedRate * purchaseTag).toFixed(2);
return {
- preferredCurrency: selectPreferredCurrency(state),
+ preferredCurrency,
preorderContentClaim: selectClaimForId(state, preorderContentClaimId),
preorderTag: selectPreorderTagForUri(state, uri),
- purchaseTag: selectPurchaseTagForUri(state, uri),
+ purchaseTag,
rentalTag: selectRentalTagForUri(state, uri),
costInfo: selectCostInfoForUri(state, uri),
+ preferredCurrencyPriceEstimate,
};
};
diff --git a/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/view.jsx b/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/view.jsx
index fbd2bc55ea..6f134d3bf3 100644
--- a/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/view.jsx
+++ b/ui/hocs/withStreamClaimRender/internal/paidContentOverlay/view.jsx
@@ -22,6 +22,7 @@ type Props = {
purchaseTag: string,
rentalTag: RentalTagParams,
costInfo: any,
+ preferredCurrencyPriceEstimate: number,
doOpenModal: (string, {}) => void,
};
@@ -36,14 +37,18 @@ export default function PaidContentOvelay(props: Props) {
purchaseTag, // the price of the purchase
rentalTag,
costInfo,
+ preferredCurrencyPriceEstimate,
doOpenModal,
} = props;
const isEmbed = React.useContext(EmbedContext);
- const { icon: fiatIconToUse, symbol: fiatSymbol } = STRIPE.CURRENCY[preferredCurrency];
+ const { symbol: preferredFiatSymbol } = STRIPE.CURRENCY[preferredCurrency];
+ const { icon: fiatIconToUse, symbol: fiatSymbol } = STRIPE.CURRENCY['USD'];
const sdkFeeRequired = costInfo && costInfo.cost > 0;
+ const showPriceEstimateInPreferredCurrency = preferredCurrency !== 'USD';
+
// setting as 0 so flow doesn't complain, better approach?
let rentalPrice,
rentalExpirationTimeInSeconds = 0;
@@ -103,6 +108,12 @@ export default function PaidContentOvelay(props: Props) {
currency: fiatSymbol,
amount: purchaseTag,
})}
+ {showPriceEstimateInPreferredCurrency &&
+ ' ' +
+ __('(Approx. %currency%%amount%)', {
+ currency: preferredFiatSymbol,
+ amount: preferredCurrencyPriceEstimate,
+ })}
@@ -111,6 +122,10 @@ export default function PaidContentOvelay(props: Props) {
duration: secondsToDhms(rentalExpirationTimeInSeconds),
currency: fiatSymbol,
amount: rentalPrice,
+ })}{' '}
+ {__('(Approx. %currency%%amount%)', {
+ currency: preferredFiatSymbol,
+ amount: preferredCurrencyPriceEstimate,
})}
@@ -125,6 +140,12 @@ export default function PaidContentOvelay(props: Props) {
amount: rentalPrice,
duration: secondsToDhms(rentalExpirationTimeInSeconds),
})}
+ {showPriceEstimateInPreferredCurrency &&
+ ' ' +
+ __('(Approx. %currency%%amount%)', {
+ currency: preferredFiatSymbol,
+ amount: preferredCurrencyPriceEstimate,
+ })}
@@ -133,7 +154,13 @@ export default function PaidContentOvelay(props: Props) {
<>
- {__('Purchase for %currency%%amount%', { currency: fiatSymbol, amount: purchaseTag })}
+ {__('Purchase for %currency%%amount%', { currency: fiatSymbol, amount: purchaseTag })}{' '}
+ {showPriceEstimateInPreferredCurrency &&
+ ' ' +
+ __('(Approx. %currency%%amount%)', {
+ currency: preferredFiatSymbol,
+ amount: preferredCurrencyPriceEstimate,
+ })}
@@ -151,7 +178,16 @@ export default function PaidContentOvelay(props: Props) {
/>
) : (
)}
>
diff --git a/ui/modal/modalPreorderAndPurchaseContent/internal/preorderAndPurchaseContentCard/view.jsx b/ui/modal/modalPreorderAndPurchaseContent/internal/preorderAndPurchaseContentCard/view.jsx
index 3ce201832b..f2f6544b6d 100644
--- a/ui/modal/modalPreorderAndPurchaseContent/internal/preorderAndPurchaseContentCard/view.jsx
+++ b/ui/modal/modalPreorderAndPurchaseContent/internal/preorderAndPurchaseContentCard/view.jsx
@@ -66,7 +66,7 @@ export default function PreorderAndPurchaseContentCard(props: Props) {
const {
uri,
claimId,
- preferredCurrency,
+ // preferredCurrency,
rentalTag,
purchaseTag,
preorderTag,
@@ -116,7 +116,7 @@ export default function PreorderAndPurchaseContentCard(props: Props) {
? secondsToDhms(tags.rentalTag.expirationTimeInSeconds)
: '';
- const fiatSymbol = STRIPE.CURRENCY[preferredCurrency].symbol;
+ const fiatSymbol = STRIPE.CURRENCY['USD'].symbol;
function handleSubmit(forceRental) {
// if it's both purchase/rent, use purchase, for rent we will force it
@@ -209,7 +209,7 @@ const SubmitArea = withCreditCard((props: any) => (
amount: props.tipAmount.toString(),
duration: props.rentDuration,
})}
- icon={props.tags.rentalTag ? ICONS.BUY : ICONS.TIME}
+ icon={props.tags.rentalTag ? ICONS.TIME : ICONS.BUY}
/>
{props.tags.purchaseTag && props.tags.rentalTag && (
diff --git a/ui/redux/actions/wallet.js b/ui/redux/actions/wallet.js
index 9187382fcb..07f003e9c2 100644
--- a/ui/redux/actions/wallet.js
+++ b/ui/redux/actions/wallet.js
@@ -27,7 +27,7 @@ import {
selectPurchaseTagForUri,
selectRentalTagForUri,
} from 'redux/selectors/claims';
-import { selectPreferredCurrency } from 'redux/selectors/settings';
+// import { selectPreferredCurrency } from 'redux/selectors/settings';
import { selectActiveChannelClaim } from 'redux/selectors/app';
import { getChannelFromClaim } from 'util/claim';
import { doFetchChannelListMine, doFetchClaimListMine, doClaimSearch } from 'redux/actions/claims';
@@ -896,7 +896,7 @@ export const doPurchaseClaimForUri =
const { claim_id: channelClaimId, name: tipChannelName } = channelClaim;
const activeChannelClaim = selectActiveChannelClaim(state);
- const preferredCurrency = selectPreferredCurrency(state);
+ // const preferredCurrency = selectPreferredCurrency(state);
const preorderTag = selectPreorderTagForUri(state, uri);
const purchaseTag = selectPurchaseTagForUri(state, uri);
@@ -933,7 +933,7 @@ export const doPurchaseClaimForUri =
...(activeChannelClaim
? { tipper_channel_name: activeChannelClaim.name, tipper_channel_claim_id: activeChannelClaim.claim_id }
: { anonymous: true }),
- currency: preferredCurrency || 'USD',
+ currency: 'USD', // preferredCurrency || 'USD',
environment: stripeEnvironment,
source_claim_id: claim.claim_id,
target_claim_id: claim.claim_id,
diff --git a/ui/redux/reducers/stripe.js b/ui/redux/reducers/stripe.js
index 6782d0e92e..8473157998 100644
--- a/ui/redux/reducers/stripe.js
+++ b/ui/redux/reducers/stripe.js
@@ -14,6 +14,7 @@ const defaultState: StripeState = {
customerStatusFetching: undefined,
customerStatus: undefined,
customerSetupResponse: undefined,
+ currencyRates: { USD: { EUR: 0.9123 } },
};
reducers[ACTIONS.STRIPE_ACCOUNT_STATUS_START] = (state, action) => ({ ...state, accountStatusFetching: true });
diff --git a/ui/redux/selectors/stripe.js b/ui/redux/selectors/stripe.js
index bf64728112..9b1f326e85 100644
--- a/ui/redux/selectors/stripe.js
+++ b/ui/redux/selectors/stripe.js
@@ -11,6 +11,7 @@ export const selectAccountTransactions = (state: State) => selectState(state).ac
export const selectCustomerStatus = (state: State) => selectState(state).customerStatus;
export const selectCustomerStatusFetching = (state: State) => selectState(state).customerStatusFetching;
export const selectCustomerSetupResponse = (state: State) => selectState(state).customerSetupResponse;
+export const selectCurrencyRates = (state: State) => selectState(state).currencyRates;
export const selectAccountStatus = (state: State) => selectState(state).accountStatus;
export const selectAccountStatusFetching = (state: State) => selectState(state).accountStatusFetching;
@@ -25,6 +26,11 @@ export const selectAccountDefaultCurrency = (state: State) => {
return accountInfo && accountInfo.default_currency;
};
+export const selectCurrencyRate = (state: State, from: string, to: string) => {
+ const rates = selectCurrencyRates(state);
+ return from in rates ? rates[from][to] : null;
+};
+
export const selectAccountUnpaidBalance = (state: State) => selectAccountStatus(state)?.total_received_unpaid || 0;
export const selectAccountChargesEnabled = (state: State) => {