From 72a9ef57cf77db5df3e922e35280b89a53ff758c Mon Sep 17 00:00:00 2001 From: miko Date: Wed, 16 Oct 2024 13:07:42 +0300 Subject: [PATCH 1/3] Show price estimate for EUR users --- flow-typed/stripe.js | 1 + .../internal/paidContentOverlay/index.js | 11 ++++- .../internal/paidContentOverlay/view.jsx | 42 +++++++++++++++++-- .../preorderAndPurchaseContentCard/view.jsx | 6 +-- ui/redux/reducers/stripe.js | 1 + ui/redux/selectors/stripe.js | 6 +++ 6 files changed, 59 insertions(+), 8 deletions(-) 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/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/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) => { From 4bb76a996cd40db01db4c442b903a6b79649b98b Mon Sep 17 00:00:00 2001 From: miko Date: Wed, 16 Oct 2024 13:15:05 +0300 Subject: [PATCH 2/3] Set claim purchase currency to USD --- ui/redux/actions/wallet.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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, From 6178bf8c12e8069d643bbea2a1cc69bcc49eecf4 Mon Sep 17 00:00:00 2001 From: miko Date: Wed, 16 Oct 2024 13:22:38 +0300 Subject: [PATCH 3/3] Appstring --- static/app-strings.json | 1 + 1 file changed, 1 insertion(+) 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--" }