diff --git a/client/src/assets/images/components/bear-block-completion-modal.tsx b/client/src/assets/images/components/bear-block-completion-modal.tsx new file mode 100644 index 00000000000..fef6afe4e93 --- /dev/null +++ b/client/src/assets/images/components/bear-block-completion-modal.tsx @@ -0,0 +1,139 @@ +import React from 'react'; + +function BearBlockCompletion( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +BearBlockCompletion.displayName = 'BearBlockCompletion'; + +export default BearBlockCompletion; diff --git a/client/src/assets/images/components/bear-progress-modal.tsx b/client/src/assets/images/components/bear-progress-modal.tsx new file mode 100644 index 00000000000..b3fcd31ae6a --- /dev/null +++ b/client/src/assets/images/components/bear-progress-modal.tsx @@ -0,0 +1,181 @@ +import React from 'react'; + +function BearProgressModal( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +BearProgressModal.displayName = 'BearProgressModal'; + +export default BearProgressModal; diff --git a/client/src/components/Donation/donation-modal.tsx b/client/src/components/Donation/donation-modal.tsx index e0e2e80dfb1..ce11c514abb 100644 --- a/client/src/components/Donation/donation-modal.tsx +++ b/client/src/components/Donation/donation-modal.tsx @@ -13,6 +13,8 @@ import { } from '../../../../config/donation-settings'; import Cup from '../../assets/icons/cup'; import Heart from '../../assets/icons/heart'; +import BearProgressModal from '../../assets/images/components/bear-progress-modal'; +import BearBlockCompletion from '../../assets/images/components/bear-block-completion-modal'; import { closeDonationModal, executeGA } from '../../redux/actions'; import { @@ -55,7 +57,6 @@ type DonateModalProps = { const GetCommonDonationText = ({ ctaNumber }: { ctaNumber: number }) => { const { t } = useTranslation(); - // const useFeature; const rotateProgressModalCta = useFeature('progress-modal-cta-rotation').on; if (rotateProgressModalCta) return {t(`donate.progress-modal-cta-${ctaNumber}`)}; @@ -71,6 +72,22 @@ const GetCommonDonationText = ({ ctaNumber }: { ctaNumber: number }) => { } }; +const RenderIlustration = ({ + recentlyClaimedBlock +}: { + recentlyClaimedBlock: RecentlyClaimedBlock; +}) => { + const showModalBears = useFeature('show-modal-bears').on; + if (showModalBears) { + if (recentlyClaimedBlock !== null) return ; + else return ; + } else if (recentlyClaimedBlock !== null) { + return ; + } else { + return ; + } +}; + function getctaNumberBetween1To10() { const min = 1; const max = 10; @@ -118,11 +135,7 @@ function DonateModal({ const donationText = (
- {recentlyClaimedBlock !== null ? ( - - ) : ( - - )} +
{!closeLabel && (