supporting EURO icon

This commit is contained in:
Anthony 2022-03-28 22:32:01 +02:00 committed by Thomas Zarebczan
parent cc8812d751
commit 631d3cc1f3
9 changed files with 62 additions and 9 deletions

View file

@ -2,6 +2,8 @@ import { connect } from 'react-redux';
import { doOpenModal } from 'redux/actions/app';
import { makeSelectTagInClaimOrChannelForUri, selectClaimForUri } from 'redux/selectors/claims';
import ClaimSupportButton from './view';
import { selectClientSetting } from 'redux/selectors/settings';
import * as SETTINGS from 'constants/settings';
const DISABLE_SUPPORT_TAG = 'disable-support';
@ -14,6 +16,7 @@ const select = (state, props) => {
return {
disableSupport: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SUPPORT_TAG)(state),
isRepost,
preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
};
};

View file

@ -13,18 +13,32 @@ type Props = {
disableSupport: boolean,
isRepost?: boolean,
doOpenModal: (id: string, {}) => void,
preferredCurrency: ?string,
};
export default function ClaimSupportButton(props: Props) {
const { uri, fileAction, isRepost, disableSupport, doOpenModal } = props;
const { uri, fileAction, isRepost, disableSupport, doOpenModal, preferredCurrency } = props;
const currencyToUse = preferredCurrency;
const iconToUse = {
EUR: {
icon: ICONS.EURO,
iconSize: 16,
},
USD: {
icon: ICONS.FINANCE,
iconSize: fileAction ? 22 : undefined,
},
};
return disableSupport ? null : (
<Tooltip title={__('Support this claim')} arrow={false}>
<Button
button={!fileAction ? 'alt' : undefined}
className={classnames('support-claim-button', { 'button--file-action': fileAction })}
icon={ICONS.FINANCE}
iconSize={fileAction ? 22 : undefined}
icon={iconToUse[currencyToUse].icon}
iconSize={iconToUse[currencyToUse].iconSize}
label={isRepost ? __('Support Repost') : __('Support --[button to support a claim]--')}
requiresAuth
onClick={() => doOpenModal(MODALS.SEND_TIP, { uri, isSupport: true })}

View file

@ -15,6 +15,8 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
import { selectSettingsByChannelId } from 'redux/selectors/comments';
import { getChannelIdFromClaim } from 'util/claim';
import { doOpenModal } from 'redux/actions/app';
import { selectClientSetting } from 'redux/selectors/settings';
import * as SETTINGS from 'constants/settings';
const select = (state, props) => {
const { uri } = props;
@ -42,6 +44,7 @@ const select = (state, props) => {
isFetchingChannels: selectFetchingMyChannels(state),
settingsByChannelId: selectSettingsByChannelId(state),
supportDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SUPPORT_TAG)(state),
preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
};
};

View file

@ -66,6 +66,7 @@ type Props = {
doSendCashTip: (TipParams, anonymous: boolean, UserParams, claimId: string, stripe: ?string, (any) => void) => string,
doSendTip: (params: {}, isSupport: boolean, successCb: (any) => void, errorCb: (any) => void, boolean) => void,
doOpenModal: (id: string, any) => void,
preferredCurrency?: boolean,
};
export function CommentCreate(props: Props) {
@ -101,6 +102,7 @@ export function CommentCreate(props: Props) {
doSendTip,
setQuickReply,
doOpenModal,
preferredCurrency,
} = props;
const isMobile = useIsMobile();
@ -382,6 +384,9 @@ export function CommentCreate(props: Props) {
setTipSelector(false);
}
let fiatIconToUse = ICONS.FINANCE;
if (preferredCurrency === 'EUR') fiatIconToUse = ICONS.EURO;
// **************************************************************************
// Effects
// **************************************************************************
@ -640,7 +645,7 @@ export function CommentCreate(props: Props) {
<Button
{...submitButtonProps}
disabled={disabled || tipSelectorError || !minAmountMet}
icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
label={__('Review')}
onClick={() => {
setReviewingSupportComment(true);

View file

@ -1194,6 +1194,26 @@ export const icons = {
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</g>
),
[ICONS.EURO]: (props: CustomProps) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width={props.size || '16'}
height={props.size || '18'}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
stroke="currentColor"
>
<g transform="matrix(2,0,0,2,0,0)">
<path d="M19.5,23.25a11.25,11.25,0,0,1,0-22.5" />
<path d="M4.5 9.75L16.5 9.75" />
<path d="M4.5 14.25L13.5 14.25" />
</g>
</svg>
),
[ICONS.RABBIT_HOLE]: (props: CustomProps) => (
<svg
{...props}

View file

@ -2,10 +2,13 @@ import { connect } from 'react-redux';
import { selectBalance } from 'redux/selectors/wallet';
import { selectClaimForUri } from 'redux/selectors/claims';
import WalletTipAmountSelector from './view';
import { selectClientSetting } from 'redux/selectors/settings';
import * as SETTINGS from 'constants/settings';
const select = (state, props) => ({
balance: selectBalance(state),
claim: selectClaimForUri(state, props.uri),
preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
});
export default connect(select)(WalletTipAmountSelector);

View file

@ -28,13 +28,13 @@ type Props = {
customTipAmount?: number,
exchangeRate?: any,
fiatConversion?: boolean,
tipError: boolean,
tipError: string,
uri: string,
onChange: (number) => void,
setConvertedAmount?: (number) => void,
setDisableSubmitButton: (boolean) => void,
setTipError: (any) => void,
preferredCurrency?: boolean,
};
function WalletTipAmountSelector(props: Props) {
@ -52,6 +52,7 @@ function WalletTipAmountSelector(props: Props) {
setConvertedAmount,
setDisableSubmitButton,
setTipError,
preferredCurrency,
} = props;
const isMobile = useIsMobile();
@ -229,6 +230,9 @@ function WalletTipAmountSelector(props: Props) {
<div className={classnames('help', customClassName)}>{helpMessage}</div>
);
let fiatIconToUse = ICONS.FINANCE;
if (preferredCurrency === 'EUR') fiatIconToUse = ICONS.EURO;
return (
<>
<div className="section">
@ -244,7 +248,7 @@ function WalletTipAmountSelector(props: Props) {
'button-toggle--disabled': amount > balance,
})}
label={defaultAmount}
icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
onClick={() => {
handleCustomPriceChange(defaultAmount);
setUseCustomTip(false);
@ -258,7 +262,7 @@ function WalletTipAmountSelector(props: Props) {
className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': useCustomTip,
})}
icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
label={__('Custom')}
onClick={() => setUseCustomTip(true)}
/>

View file

@ -206,3 +206,4 @@ export const UPGRADE = 'Upgrade';
export const DISMISS_ALL = 'DismissAll';
export const SUBMIT = 'Submit';
export const FILTERED_BY_LANG = 'FilteredByLang';
export const EURO = 'Euro';

View file

@ -728,7 +728,7 @@ export const doSendCashTip = (tipParams, anonymous, userParams, claimId, stripeE
creator_channel_claim_id: tipParams.channelClaimId,
tipper_channel_name: anonymous ? '' : userParams.activeChannelName,
tipper_channel_claim_id: anonymous ? '' : userParams.activeChannelId,
currency: 'USD',
currency: 'EUR',
anonymous: anonymous,
source_claim_id: claimId,
environment: stripeEnvironment,
@ -738,7 +738,7 @@ export const doSendCashTip = (tipParams, anonymous, userParams, claimId, stripeE
.then((customerTipResponse) => {
dispatch(
doToast({
message: __("You sent $%tipAmount% as a tip to %tipChannelName%, I'm sure they appreciate it!", {
message: __('You sent $%tipAmount% as a tip to %tipChannelName%, I\'m sure they appreciate it!', {
tipAmount: tipParams.tipAmount,
tipChannelName: tipParams.tipChannelName,
}),