diff --git a/package.json b/package.json index 80bee3c9e8..897765fd42 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "matters-web", - "version": "4.11.0", + "version": "4.12.0", "description": "codebase of Matters' website", "sideEffects": false, "author": "Matters ", "engines": { - "node": ">=16.14" + "node": ">=16.14 <17.0" }, "license": "Apache-2.0", "scripts": { diff --git a/public/static/icons/64px/price.svg b/public/static/icons/64px/price.svg new file mode 100644 index 0000000000..a85cda0be2 --- /dev/null +++ b/public/static/icons/64px/price.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Empty/EmptyTransactionCurrency.tsx b/src/components/Empty/EmptyTransactionCurrency.tsx new file mode 100644 index 0000000000..90da896005 --- /dev/null +++ b/src/components/Empty/EmptyTransactionCurrency.tsx @@ -0,0 +1,14 @@ +import { Empty, IconPrice64, Translate } from '~/components' + +export const EmptyTransactionCurrency = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/EmptyTransactionSubscription.tsx b/src/components/Empty/EmptyTransactionSubscription.tsx new file mode 100644 index 0000000000..a1fa6678a3 --- /dev/null +++ b/src/components/Empty/EmptyTransactionSubscription.tsx @@ -0,0 +1,14 @@ +import { Empty, IconCircle24, Translate } from '~/components' + +export const EmptyTransactionSubscription = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/EmptyTransactionSupport.tsx b/src/components/Empty/EmptyTransactionSupport.tsx new file mode 100644 index 0000000000..f41e961b66 --- /dev/null +++ b/src/components/Empty/EmptyTransactionSupport.tsx @@ -0,0 +1,14 @@ +import { Empty, IconDonate24, Translate } from '~/components' + +export const EmptyTransactionSupport = () => ( + } + description={ + + } + /> +) diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx index 05d9793397..c632026ba3 100644 --- a/src/components/Empty/index.tsx +++ b/src/components/Empty/index.tsx @@ -15,4 +15,7 @@ export * from './EmptyTag' export * from './EmptyTagArticles' export * from './EmptyWarning' export * from './EmptyTransaction' +export * from './EmptyTransactionCurrency' +export * from './EmptyTransactionSubscription' +export * from './EmptyTransactionSupport' export * from './EmptySearch' diff --git a/src/components/Icon/IconPrice64.tsx b/src/components/Icon/IconPrice64.tsx new file mode 100644 index 0000000000..bee329bd99 --- /dev/null +++ b/src/components/Icon/IconPrice64.tsx @@ -0,0 +1,5 @@ +import { ReactComponent as Icon } from '@/public/static/icons/64px/price.svg' + +import { withIcon } from './withIcon' + +export const IconPrice64 = withIcon(Icon) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 65394d8304..859824eb07 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -111,6 +111,7 @@ export * from './IconPaywall16' export * from './IconPen16' export * from './IconPin24' export * from './IconPrice12' +export * from './IconPrice64' export * from './IconProfile24' export * from './IconReadTime12' export * from './IconRead16' diff --git a/src/views/Me/Transactions/CurrencySwitch/index.tsx b/src/views/Me/Transactions/CurrencySwitch/index.tsx index a326520de4..1f6b32516d 100644 --- a/src/views/Me/Transactions/CurrencySwitch/index.tsx +++ b/src/views/Me/Transactions/CurrencySwitch/index.tsx @@ -1,10 +1,7 @@ -import { useContext } from 'react' - import { Button, DropdownDialog, IconArrowDown16, - LanguageContext, Menu, TextIcon, Translate, @@ -14,28 +11,11 @@ import { Z_INDEX } from '~/common/enums' export enum Currency { ALL = 'ALL', + USDT = 'USDT', HKD = 'HKD', LIKE = 'LIKE', } -const CURRENT_TEXT_MAP = { - zh_hant: { - ALL: '全部', - HKD: '港幣', - LIKE: 'LIKE', - }, - zh_hans: { - ALL: '全部', - HKD: '港币', - LIKE: 'LIKE', - }, - en: { - ALL: 'ALL', - HKD: 'HKD', - LIKE: 'LIKE', - }, -} - interface CurrencySwitchProps { currency: Currency setCurrency: (currency: Currency) => void @@ -50,7 +30,6 @@ const CurrencySwitchContent: React.FC = ({ setCurrency, isInDropdown, }) => { - const { lang } = useContext(LanguageContext) return ( setCurrency(Currency.ALL)}> @@ -59,7 +38,17 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.ALL ? 'bold' : 'normal'} > - {CURRENT_TEXT_MAP[lang][Currency.ALL]} + + + + + setCurrency(Currency.USDT)}> + + {Currency.USDT} @@ -69,7 +58,7 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.HKD ? 'bold' : 'normal'} > - {CURRENT_TEXT_MAP[lang][Currency.HKD]} + {Currency.HKD} @@ -79,7 +68,7 @@ const CurrencySwitchContent: React.FC = ({ size="md" weight={currency === Currency.LIKE ? 'bold' : 'normal'} > - LIKE + {Currency.LIKE} @@ -90,7 +79,6 @@ export const CurrencySwitch: React.FC = ({ currency, setCurrency, }) => { - const { lang } = useContext(LanguageContext) return ( = ({ textPlacement="left" color="grey" > - - {CURRENT_TEXT_MAP[lang][currency]} + {currency === Currency.ALL ? ( + + ) : ( + currency + )} )} diff --git a/src/views/Me/Transactions/index.tsx b/src/views/Me/Transactions/index.tsx index dbdbd19de6..dd2395051c 100644 --- a/src/views/Me/Transactions/index.tsx +++ b/src/views/Me/Transactions/index.tsx @@ -1,27 +1,35 @@ import { useQuery } from '@apollo/react-hooks' import gql from 'graphql-tag' -// import { useState } from 'react' +import { useState } from 'react' import { EmptyTransaction, + EmptyTransactionCurrency, + EmptyTransactionSubscription, + EmptyTransactionSupport, Head, InfiniteScroll, Layout, List, Spinner, + Tabs, Transaction, + Translate, } from '~/components' import { analytics, mergeConnections } from '~/common/utils' -// import { Currency, CurrencySwitch } from './CurrencySwitch' +import { Currency, CurrencySwitch } from './CurrencySwitch' import styles from './styles.css' -// import { TransactionCurrency } from '@/__generated__/globalTypes' import { MeTransactions } from './__generated__/MeTransactions' const ME_TRANSACTIONS = gql` - query MeTransactions($after: String) { + query MeTransactions( + $after: String + $purpose: TransactionPurpose + $currency: TransactionCurrency + ) { viewer { id wallet { @@ -29,7 +37,11 @@ const ME_TRANSACTIONS = gql` input: { first: 20 after: $after - states: [canceled, failed, pending, succeeded] + filter: { + states: [canceled, failed, pending, succeeded] + purpose: $purpose + currency: $currency + } } ) { pageInfo { @@ -50,11 +62,25 @@ const ME_TRANSACTIONS = gql` ${Transaction.fragments.transaction} ` -const BaseTransactions = () => { - // const [currencyType, setCurrencyType] = useState(Currency.ALL) +export enum Purpose { + ALL = 'all', + DONATION = 'donation', + SUBSCRIPTION = 'subscriptionSplit', +} + +interface BaseTransactionsProps { + currency: Currency + purpose: Purpose +} + +const BaseTransactions = ({ currency, purpose }: BaseTransactionsProps) => { const { data, loading, fetchMore, refetch } = useQuery( ME_TRANSACTIONS, { + variables: { + currency: currency === Currency.ALL ? undefined : currency, + purpose: purpose === Purpose.ALL ? undefined : purpose, + }, fetchPolicy: 'network-only', } ) @@ -71,6 +97,18 @@ const BaseTransactions = () => { const { edges, pageInfo } = data.viewer.wallet.transactions if (!edges || edges.length <= 0 || !pageInfo) { + if (currency !== Currency.ALL) { + return + } + + if (purpose === Purpose.DONATION) { + return + } + + if (purpose === Purpose.SUBSCRIPTION) { + return + } + return } @@ -80,7 +118,9 @@ const BaseTransactions = () => { location: edges.length, }) return fetchMore({ - variables: { after: pageInfo.endCursor }, + variables: { + after: pageInfo.endCursor, + }, updateQuery: (previousResult, { fetchMoreResult }) => mergeConnections({ oldData: previousResult, @@ -90,32 +130,12 @@ const BaseTransactions = () => { }) } - // let filteredEdges = edges - // if (currencyType === Currency.HKD) { - // filteredEdges = edges.filter( - // (e) => e.node.currency === TransactionCurrency.HKD - // ) - // } - - // if (currencyType === Currency.LIKE) { - // filteredEdges = edges.filter( - // (e) => e.node.currency === TransactionCurrency.LIKE - // ) - // } - return ( - {/*
- setCurrencyType(c)} - /> -
*/} - {edges.map(({ node, cursor }) => ( @@ -128,17 +148,56 @@ const BaseTransactions = () => { ) } -const Transactions = () => ( - - } - right={} - /> +const Transactions = () => { + const [currency, setCurrency] = useState(Currency.ALL) + const [purpose, setPurpose] = useState(Purpose.ALL) - + const isALL = purpose === Purpose.ALL + const isDonaion = purpose === Purpose.DONATION + const isSubscription = purpose === Purpose.SUBSCRIPTION - - -) + return ( + + } + right={} + /> + + + + + setCurrency(c)} + /> + + } + > + setPurpose(Purpose.ALL)}> + + + + setPurpose(Purpose.DONATION)} + > + + + + setPurpose(Purpose.SUBSCRIPTION)} + > + + + + + + ) +} export default Transactions diff --git a/src/views/Me/Transactions/styles.css b/src/views/Me/Transactions/styles.css index 4ce89544d9..8c176931d7 100644 --- a/src/views/Me/Transactions/styles.css +++ b/src/views/Me/Transactions/styles.css @@ -1,5 +1,3 @@ .CurrencySwitch { @mixin flex-center-end; - - padding: var(--spacing-base); }