diff --git a/src/assets/qrCord/a12.png b/src/assets/qrCord/a12.png new file mode 100644 index 0000000000..bb8dbaaacc Binary files /dev/null and b/src/assets/qrCord/a12.png differ diff --git a/src/assets/qrCord/a36.png b/src/assets/qrCord/a36.png new file mode 100644 index 0000000000..60dafb7408 Binary files /dev/null and b/src/assets/qrCord/a36.png differ diff --git a/src/assets/qrCord/a50.png b/src/assets/qrCord/a50.png new file mode 100644 index 0000000000..3dc6a0f75d Binary files /dev/null and b/src/assets/qrCord/a50.png differ diff --git a/src/assets/qrCord/a6.png b/src/assets/qrCord/a6.png new file mode 100644 index 0000000000..ec3adcb35a Binary files /dev/null and b/src/assets/qrCord/a6.png differ diff --git a/src/assets/qrCord/a66.png b/src/assets/qrCord/a66.png new file mode 100644 index 0000000000..f9f4b3e91d Binary files /dev/null and b/src/assets/qrCord/a66.png differ diff --git a/src/assets/qrCord/w12.png b/src/assets/qrCord/w12.png new file mode 100644 index 0000000000..09fbc74e5a Binary files /dev/null and b/src/assets/qrCord/w12.png differ diff --git a/src/assets/qrCord/w36.png b/src/assets/qrCord/w36.png new file mode 100644 index 0000000000..f704327b46 Binary files /dev/null and b/src/assets/qrCord/w36.png differ diff --git a/src/assets/qrCord/w50.png b/src/assets/qrCord/w50.png new file mode 100644 index 0000000000..cd2d974963 Binary files /dev/null and b/src/assets/qrCord/w50.png differ diff --git a/src/assets/qrCord/w6.png b/src/assets/qrCord/w6.png new file mode 100644 index 0000000000..3e9dc48b13 Binary files /dev/null and b/src/assets/qrCord/w6.png differ diff --git a/src/assets/qrCord/w66.png b/src/assets/qrCord/w66.png new file mode 100644 index 0000000000..a7cb22614b Binary files /dev/null and b/src/assets/qrCord/w66.png differ diff --git a/src/assets/sticker.jpg b/src/assets/sticker.jpg new file mode 100644 index 0000000000..324e682689 Binary files /dev/null and b/src/assets/sticker.jpg differ diff --git a/src/assets/sticker2.jpg b/src/assets/sticker2.jpg new file mode 100644 index 0000000000..1fae143d0e Binary files /dev/null and b/src/assets/sticker2.jpg differ diff --git a/src/components/DonateCard/index.tsx b/src/components/DonateCard/index.tsx index 1d77eeb57f..2548fc8c1f 100644 --- a/src/components/DonateCard/index.tsx +++ b/src/components/DonateCard/index.tsx @@ -1,6 +1,7 @@ +import type { AmountType } from '../DonatingCard' +import { DonatingCard } from '../DonatingCard' +import { StickerButton } from '../DonatingCard/components/StickerButton' import { useChapterNumber, useDayFromFirstWordRecord, useSumWrongCount, useWordNumber } from './hooks/useWordStats' -import alipay from '@/assets/alipay.jpg' -import weChat from '@/assets/weChat.jpg' import { DONATE_DATE } from '@/constants' import { reportDonateCard } from '@/utils' import noop from '@/utils/noop' @@ -12,6 +13,7 @@ import IconParty from '~icons/logos/partytown-icon' export const DonateCard = () => { const [show, setShow] = useState(false) + const [amount, setAmount] = useState(undefined) const chapterNumber = useChapterNumber() const wordNumber = useWordNumber() @@ -35,6 +37,7 @@ export const DonateCard = () => { sumWrongCount, dayFromFirstWord, dayFromQwerty, + amount: amount ?? 0, }) setShow(false) @@ -50,11 +53,16 @@ export const DonateCard = () => { sumWrongCount, dayFromFirstWord, dayFromQwerty, + amount: amount ?? 0, }) setShow(false) } + const onAmountChange = (amount: AmountType) => { + setAmount(amount) + } + useLayoutEffect(() => { if (chapterNumber && chapterNumber !== 0 && chapterNumber % 10 === 0) { const storedDate = window.localStorage.getItem(DONATE_DATE) @@ -99,8 +107,8 @@ export const DonateCard = () => { leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - -
+ +

{`${chapterNumber} Chapters Achievement !`}

@@ -116,20 +124,25 @@ export const DonateCard = () => {

Qwerty Learner 已经坚持 开放源码、无广告、无商业化 运营 {dayFromQwerty} 天， - 我们的目标是为所有学习者提供一个高效、便捷、无干扰的学习环境。 + 我们的目标是为所有学习者提供一个高效、便捷、无干扰的学习环境。我们诚挚地邀请您考虑进行捐赠，捐赠将直接用于维持 Qwerty + 的日常运营以及未来发展，让 Qwerty 与您一起成长。

-

- 如果您喜欢 Qwerty，那么我们诚挚地邀请您考虑进行捐赠，您的捐赠将直接用于维持 Qwerty 的日常运营以及未来的发展，让 Qwerty - 与您一起成长。 +

+ 为了感谢您的慷慨，单次 50 rmb 及以上的捐赠， 我们将回赠 Qwerty 的定制贴纸 5 枚 + （仅限大陆地区），希望您可以跟朋友分享您的快乐

+
+ +
-
- alipay - weChat -
-
- + ) +} diff --git a/src/components/DonatingCard/components/StickerButton.tsx b/src/components/DonatingCard/components/StickerButton.tsx new file mode 100644 index 0000000000..03c47ec15e --- /dev/null +++ b/src/components/DonatingCard/components/StickerButton.tsx @@ -0,0 +1,37 @@ +import sticker2 from '@/assets/sticker2.jpg' +import sticker1 from '@/assets/sticker.jpg' +import { Tooltip } from 'react-tooltip' +import 'react-tooltip/dist/react-tooltip.css' +import IconInfo from '~icons/ic/outline-info' +import SolarStickerSmileSquareOutline from '~icons/solar/sticker-smile-square-outline' + +export const StickerButton = ({ className }: { className?: string }) => { + return ( + <> +
+ + 查看贴纸 +
+ +
+ alipay + alipay +
+ + + 此贴纸非商品，仅用于感谢您的捐赠，不可用于任何商业用途 + + + + ) +} diff --git a/src/components/DonatingCard/index.tsx b/src/components/DonatingCard/index.tsx new file mode 100644 index 0000000000..0701f7ef32 --- /dev/null +++ b/src/components/DonatingCard/index.tsx @@ -0,0 +1,50 @@ +import { AmountImageMap } from './AmountQrMap' +import { Amount } from './components/Amount' +import { useEffect, useState } from 'react' + +export type AmountType = -1 | 6 | 12 | 36 | 50 | 66 +const displayAmount: AmountType[] = [6, 12, 36, 50, 66, -1] + +export const DonatingCard = ({ className, onAmountChange }: { className?: string; onAmountChange?: (amount: AmountType) => void }) => { + const [amount, setAmount] = useState(undefined) + + const onClickAmount = (amount: AmountType) => { + setAmount(amount) + } + + useEffect(() => { + onAmountChange && amount && onAmountChange(amount as AmountType) + }, [amount, onAmountChange]) + + return ( +
+

选择您的捐赠金额：

+
+ {displayAmount.map((a) => { + return + })} +
+ +
+ {amount && ( +
+ alipay + weChat +
+ )} +
+ {amount && (amount >= 50 || amount === -1) && ( + + + 贴纸寄送地址问卷 + + + )} +
+ ) +} diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 401e53d913..03a7c8b2f5 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,6 +1,6 @@ -import alipay from '@/assets/alipay.jpg' +import { DonatingCard } from '../DonatingCard' +import { StickerButton } from '../DonatingCard/components/StickerButton' import redBookCode from '@/assets/redBook-code.jpg' -import weChat from '@/assets/weChat.jpg' import InfoPanel from '@/components/InfoPanel' import Tooltip from '@/components/Tooltip' import { infoPanelStateAtom } from '@/store' @@ -49,21 +49,26 @@ const Footer: React.FC = () => { iconClassName="text-amber-500 bg-amber-100 dark:text-amber-300 dark:bg-amber-500" onClose={() => handleCloseInfoPanel('donate')} > -

+

非常感谢大家使用 Qwerty Learner，目前该网站使用业余时间在维护，为了保证网站能够持续地提供给大家高质量的服务，我们需要您的帮助！
您的捐款将有助于我们支付网站的运营成本，改进网站的功能和设计，并提高用户体验。


-

+

我们相信，共同的努力可以让 Qwerty Learner 成为更好的学习平台，也相信您的支持将给予我们持续前进的动力。 感谢您的支持！


-
- alipay - weChat +

+ 为了感谢您的慷慨，单次 50 rmb 及以上的捐赠， 我们将回赠 Qwerty 的定制贴纸 5 枚（仅限大陆地区） + ，希望您可以跟朋友分享您的快乐 +

+
+
+ + = ({ openState, title, onClose, icon:
-
diff --git a/src/utils/mixpanel.ts b/src/utils/mixpanel.ts index f6a9f0c6a7..66cffd8196 100644 --- a/src/utils/mixpanel.ts +++ b/src/utils/mixpanel.ts @@ -62,6 +62,7 @@ export type donateCardInfo = { sumWrongCount: number dayFromFirstWord: number dayFromQwerty: number + amount: number } export function reportDonateCard(info: donateCardInfo) {