diff --git a/apps/mobile/src/components/ClaimMintUpsellBanner.tsx b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx new file mode 100644 index 0000000000..6a2e980680 --- /dev/null +++ b/apps/mobile/src/components/ClaimMintUpsellBanner.tsx @@ -0,0 +1,116 @@ +import AsyncStorage from '@react-native-async-storage/async-storage'; +import { useCallback, useEffect, useState } from 'react'; +import { View } from 'react-native'; +import { graphql, useFragment } from 'react-relay'; +import { MCHX_CLAIM_CODE_KEY } from 'src/constants/storageKeys'; +import usePersistedState from 'src/hooks/usePersistedState'; +import { XMarkIcon } from 'src/icons/XMarkIcon'; + +import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext'; +import { ClaimMintUpsellBannerFragment$key } from '~/generated/ClaimMintUpsellBannerFragment.graphql'; +import { contexts } from '~/shared/analytics/constants'; +import colors from '~/shared/theme/colors'; + +import { Button } from './Button'; +import { GalleryTouchableOpacity } from './GalleryTouchableOpacity'; +import MintCampaignBottomSheet from './Mint/MintCampaign/MintCampaignBottomSheet'; +import { Typography } from './Typography'; + +type Props = { + queryRef: ClaimMintUpsellBannerFragment$key; +}; + +export function ClaimMintUpsellBanner({ queryRef }: Props) { + const query = useFragment( + graphql` + fragment ClaimMintUpsellBannerFragment on Query { + viewer { + ... on Viewer { + user { + __typename + } + } + } + } + `, + queryRef + ); + + + const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions(); + + const [claimCode] = usePersistedState(MCHX_CLAIM_CODE_KEY, ''); + + + const [isUpsellMintBannerDismissed, setIsUpsellMintBannerDismissed] = useState(false); + + useEffect(() => { + AsyncStorage.getItem('isUpsellMintBannerDismissed').then((value) => { + if (value === 'true') { + setIsUpsellMintBannerDismissed(true); + } + }); + }, []); + + + const handleDismissUpsellBanner = useCallback(() => { + setIsUpsellMintBannerDismissed(true); + AsyncStorage.setItem('isUpsellMintBannerDismissed', 'true'); + }, []); + + const handleClaimPress = useCallback(() => { + showBottomSheetModal({ content: }); + }, [hideBottomSheetModal, showBottomSheetModal]) + + const user = query.viewer?.user; + + + if (!user || claimCode || isUpsellMintBannerDismissed) { + return ( + + ); + } + + return ( + + + + Exclusive free mint ! + + + Claim your free generative work by MCHX + + + +