From 285ce1633aabf4b3722c55b05cad9d1bac579a57 Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Wed, 24 Aug 2022 10:15:02 -0600 Subject: [PATCH] Show contract follow modal for first time following --- common/user.ts | 1 + firestore.rules | 2 +- web/components/NotificationSettings.tsx | 82 ++++++++++++------- .../contract/follow-market-modal.tsx | 33 ++++++++ web/components/follow-market-button.tsx | 18 +++- web/hooks/use-notifications.ts | 1 + 6 files changed, 107 insertions(+), 30 deletions(-) create mode 100644 web/components/contract/follow-market-modal.tsx diff --git a/common/user.ts b/common/user.ts index 9927a3d3..b278300c 100644 --- a/common/user.ts +++ b/common/user.ts @@ -42,6 +42,7 @@ export type User = { shouldShowWelcome?: boolean lastBetTime?: number currentBettingStreak?: number + hasSeenContractFollowModal?: boolean } export type PrivateUser = { diff --git a/firestore.rules b/firestore.rules index 84113d01..0e5a759b 100644 --- a/firestore.rules +++ b/firestore.rules @@ -23,7 +23,7 @@ service cloud.firestore { allow read; allow update: if userId == request.auth.uid && request.resource.data.diff(resource.data).affectedKeys() - .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories', 'lastPingTime','shouldShowWelcome']); + .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle', 'followedCategories', 'lastPingTime','shouldShowWelcome', 'hasSeenContractFollowModal']); // User referral rules allow update: if userId == request.auth.uid && request.resource.data.diff(resource.data).affectedKeys() diff --git a/web/components/NotificationSettings.tsx b/web/components/NotificationSettings.tsx index 7a839a7a..6d8aa25f 100644 --- a/web/components/NotificationSettings.tsx +++ b/web/components/NotificationSettings.tsx @@ -9,6 +9,8 @@ import { Row } from 'web/components/layout/row' import clsx from 'clsx' import { CheckIcon, XIcon } from '@heroicons/react/outline' import { ChoicesToggleGroup } from 'web/components/choices-toggle-group' +import { Col } from 'web/components/layout/col' +import { FollowMarketModal } from 'web/components/contract/follow-market-modal' export function NotificationSettings() { const user = useUser() @@ -17,6 +19,7 @@ export function NotificationSettings() { const [emailNotificationSettings, setEmailNotificationSettings] = useState('all') const [privateUser, setPrivateUser] = useState(null) + const [showModal, setShowModal] = useState(false) useEffect(() => { if (user) listenForPrivateUser(user.id, setPrivateUser) @@ -121,12 +124,20 @@ export function NotificationSettings() { } function NotificationSettingLine(props: { - label: string + label: string | React.ReactNode highlight: boolean + onClick?: () => void }) { - const { label, highlight } = props + const { label, highlight, onClick } = props return ( - + {highlight ? : } {label} @@ -148,31 +159,45 @@ export function NotificationSettings() { toggleClassName={'w-24'} />
-
-
- You will receive notifications for: - - - - - -
-
+ + + You will receive notifications for these general events: + + + + You will receive new comment, answer, & resolution notifications on + questions: + + + That you follow - you + auto-follow questions if: + + } + onClick={() => setShowModal(true)} + /> + + • You create it + • You bet, comment on, or answer it + • You add liquidity to it + + • If you select 'Less' and you've commented on or answered a + question, you'll only receive notification on direct replies to + your comments or answers + + +
Email Notifications
+ ) } diff --git a/web/components/contract/follow-market-modal.tsx b/web/components/contract/follow-market-modal.tsx new file mode 100644 index 00000000..3dfb7ff4 --- /dev/null +++ b/web/components/contract/follow-market-modal.tsx @@ -0,0 +1,33 @@ +import { Col } from 'web/components/layout/col' +import { Modal } from 'web/components/layout/modal' +import React from 'react' + +export const FollowMarketModal = (props: { + open: boolean + setOpen: (b: boolean) => void + title?: string +}) => { + const { open, setOpen, title } = props + return ( + + + ❤️ + {title ? title : 'Following questions'} + + • What is following? + + You can receive notifications on questions you're interested in by + clicking the ❤️ button on a question. + + + • What types of notifications will I receive? + + + You'll receive in-app notifications for new comments, answers, and + updates to the question. + + + + + ) +} diff --git a/web/components/follow-market-button.tsx b/web/components/follow-market-button.tsx index 82397339..0a8ff4b4 100644 --- a/web/components/follow-market-button.tsx +++ b/web/components/follow-market-button.tsx @@ -9,8 +9,10 @@ import { CheckIcon, HeartIcon } from '@heroicons/react/outline' import clsx from 'clsx' import { User } from 'common/user' import { useContractFollows } from 'web/hooks/use-follows' -import { firebaseLogin } from 'web/lib/firebase/users' +import { firebaseLogin, updateUser } from 'web/lib/firebase/users' import { track } from 'web/lib/service/analytics' +import { FollowMarketModal } from 'web/components/contract/follow-market-modal' +import { useState } from 'react' export const FollowMarketButton = (props: { contract: Contract @@ -18,6 +20,7 @@ export const FollowMarketButton = (props: { }) => { const { contract, user } = props const followers = useContractFollows(contract.id) + const [open, setOpen] = useState(false) return ( ) } diff --git a/web/hooks/use-notifications.ts b/web/hooks/use-notifications.ts index ecc4ce2a..32500943 100644 --- a/web/hooks/use-notifications.ts +++ b/web/hooks/use-notifications.ts @@ -147,6 +147,7 @@ export function useUnseenPreferredNotifications( const lessPriorityReasons = [ 'on_contract_with_users_comment', 'on_contract_with_users_answer', + // Notifications not currently generated for users who've sold their shares 'on_contract_with_users_shares_out', // Not sure if users will want to see these w/ less: // 'on_contract_with_users_shares_in',