Show price estimate for EUR users

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 = {

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--"
 }

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,
   };
 };
 

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,
+                    })}
               </div>
 
               <div className="paid-content-prompt__price">
@@ -111,6 +122,10 @@ export default function PaidContentOvelay(props: Props) {
                   duration: secondsToDhms(rentalExpirationTimeInSeconds),
                   currency: fiatSymbol,
                   amount: rentalPrice,
+                })}{' '}
+                {__('(Approx. %currency%%amount%)', {
+                  currency: preferredFiatSymbol,
+                  amount: preferredCurrencyPriceEstimate,
                 })}
               </div>
 
@@ -125,6 +140,12 @@ export default function PaidContentOvelay(props: Props) {
                   amount: rentalPrice,
                   duration: secondsToDhms(rentalExpirationTimeInSeconds),
                 })}
+                {showPriceEstimateInPreferredCurrency &&
+                  ' ' +
+                    __('(Approx. %currency%%amount%)', {
+                      currency: preferredFiatSymbol,
+                      amount: preferredCurrencyPriceEstimate,
+                    })}
               </div>
 
               <ButtonPurchase label={__('Rent')} />
@@ -133,7 +154,13 @@ export default function PaidContentOvelay(props: Props) {
             <>
               <div className="paid-content-prompt__price">
                 <Icon icon={ICONS.BUY} />
-                {__('Purchase for %currency%%amount%', { currency: fiatSymbol, amount: purchaseTag })}
+                {__('Purchase for %currency%%amount%', { currency: fiatSymbol, amount: purchaseTag })}{' '}
+                {showPriceEstimateInPreferredCurrency &&
+                  ' ' +
+                    __('(Approx. %currency%%amount%)', {
+                      currency: preferredFiatSymbol,
+                      amount: preferredCurrencyPriceEstimate,
+                    })}
               </div>
 
               <ButtonPurchase label={__('Purchase')} />
@@ -151,7 +178,16 @@ export default function PaidContentOvelay(props: Props) {
                   />
                 ) : (
                   <ButtonPurchase
-                    label={__('Preorder now for %fiatSymbol%%preorderTag%', { fiatSymbol, preorderTag })}
+                    label={
+                      __('Preorder now for %fiatSymbol%%preorderTag%', { fiatSymbol, preorderTag }) +
+                      (showPriceEstimateInPreferredCurrency
+                        ? ' ' +
+                          __('(Approx. %currency%%amount%)', {
+                            currency: preferredFiatSymbol,
+                            amount: preferredCurrencyPriceEstimate,
+                          })
+                        : '')
+                    }
                   />
                 )}
               </>

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 && (

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,

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 });

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) => {