From 44052ba2cfd944fa1b713e198b4a537e0c3c7cce Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 28 Jun 2022 19:33:45 -0500
Subject: [PATCH] Add share group button, cleanup

---
 functions/src/on-update-user.ts              |  3 +-
 web/components/contract/contract-details.tsx |  1 -
 web/components/groups/edit-group-button.tsx  |  2 +-
 web/components/share-icon-button.tsx         | 25 +++++++++++++--
 web/pages/[username]/[contractSlug].tsx      | 10 +-----
 web/pages/group/[...slugs]/index.tsx         | 33 +++++++++++++-------
 6 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/functions/src/on-update-user.ts b/functions/src/on-update-user.ts
index 8667aadd..62c58d47 100644
--- a/functions/src/on-update-user.ts
+++ b/functions/src/on-update-user.ts
@@ -4,7 +4,6 @@ import { User } from '../../common/user'
 import { HOUSE_LIQUIDITY_PROVIDER_ID } from '../../common/antes'
 import { getValues, getContract } from './utils'
 import { createNotification } from './create-notification'
-import { removeUndefinedProps } from '../../common/util/object'
 import { ReferralTxn, Txn } from '../../common/txn'
 import { Contract } from '../../common/contract'
 const firestore = admin.firestore()
@@ -59,7 +58,7 @@ export const onUpdateUser = functions.firestore
     }
     console.log('creating referral txns')
     // TODO: change this to prod id
-    const fromId = '94YYTk1AFWfbWMpfYcvnnwI1veP2' //HOUSE_LIQUIDITY_PROVIDER_ID
+    const fromId = HOUSE_LIQUIDITY_PROVIDER_ID
     const referralAmount = 500
 
     await firestore.runTransaction(async (transaction) => {
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 013d5dea..3512efa2 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -29,7 +29,6 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { SiteLink } from 'web/components/site-link'
 import { DAY_MS } from 'common/util/time'
 import { useGroupsWithContract } from 'web/hooks/use-group'
-import { CopyLinkButton } from 'web/components/copy-link-button'
 import { ShareIconButton } from 'web/components/share-icon-button'
 import { useUser } from 'web/hooks/use-user'
 
diff --git a/web/components/groups/edit-group-button.tsx b/web/components/groups/edit-group-button.tsx
index 902cc8cc..60e6388e 100644
--- a/web/components/groups/edit-group-button.tsx
+++ b/web/components/groups/edit-group-button.tsx
@@ -46,7 +46,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
     <div className={clsx('flex p-1', className)}>
       <div
         className={clsx(
-          'btn-ghost cursor-pointer whitespace-nowrap rounded-full text-sm text-white'
+          'btn-ghost cursor-pointer whitespace-nowrap rounded-full p-1 text-sm text-gray-700'
         )}
         onClick={() => updateOpen(!open)}
       >
diff --git a/web/components/share-icon-button.tsx b/web/components/share-icon-button.tsx
index 988c5951..79698cbb 100644
--- a/web/components/share-icon-button.tsx
+++ b/web/components/share-icon-button.tsx
@@ -9,6 +9,8 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
 import { ContractDetailsButtonClassName } from 'web/components/contract/contract-info-dialog'
+import { Group } from 'common/group'
+import { groupPath } from 'web/lib/firebase/groups'
 
 function copyContractWithReferral(contract: Contract, username?: string) {
   const postFix =
@@ -19,14 +21,29 @@ function copyContractWithReferral(contract: Contract, username?: string) {
     `https://${ENV_CONFIG.domain}${contractPath(contract)}${postFix}`
   )
 }
+function copyGroupWithReferral(group: Group, username?: string) {
+  const postFix = username ? '?referrer=' + username : ''
+  copyToClipboard(
+    `https://${ENV_CONFIG.domain}${groupPath(group.slug)}${postFix}`
+  )
+}
 
 export function ShareIconButton(props: {
-  contract: Contract
+  contract?: Contract
+  group?: Group
   buttonClassName?: string
   toastClassName?: string
   username?: string
+  children?: React.ReactNode
 }) {
-  const { contract, buttonClassName, toastClassName, username } = props
+  const {
+    contract,
+    buttonClassName,
+    toastClassName,
+    username,
+    group,
+    children,
+  } = props
   const [showToast, setShowToast] = useState(false)
 
   return (
@@ -34,13 +51,15 @@ export function ShareIconButton(props: {
       <button
         className={clsx(ContractDetailsButtonClassName, buttonClassName)}
         onClick={() => {
-          copyContractWithReferral(contract, username)
+          if (contract) copyContractWithReferral(contract, username)
+          if (group) copyGroupWithReferral(group, username)
           track('copy share link')
           setShowToast(true)
           setTimeout(() => setShowToast(false), 2000)
         }}
       >
         <ShareIcon className="h-[24px] w-5" aria-hidden="true" />
+        {children}
       </button>
 
       {showToast && <ToastClipboard className={toastClassName} />}
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 05a88711..f954eb4d 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -10,13 +10,7 @@ import { useUser } from 'web/hooks/use-user'
 import { ResolutionPanel } from 'web/components/resolution-panel'
 import { Title } from 'web/components/title'
 import { Spacer } from 'web/components/layout/spacer'
-import {
-  getUserByUsername,
-  listUsers,
-  updateUser,
-  User,
-  writeReferralInfo,
-} from 'web/lib/firebase/users'
+import { listUsers, User, writeReferralInfo } from 'web/lib/firebase/users'
 import {
   Contract,
   getContractFromSlug,
@@ -49,8 +43,6 @@ import { AlertBox } from 'web/components/alert-box'
 import { useTracking } from 'web/hooks/use-tracking'
 import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
 import { useRouter } from 'next/router'
-import dayjs from 'dayjs'
-import { addUserToGroupViaSlug, getGroup } from 'web/lib/firebase/groups'
 import { useLiquidity } from 'web/hooks/use-liquidity'
 
 export const getStaticProps = fromPropz(getStaticPropz)
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 2b1fc121..0ecf013d 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -45,6 +45,7 @@ import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
 import { toast } from 'react-hot-toast'
 import { useCommentsOnGroup } from 'web/hooks/use-comments'
 import ShortToggle from 'web/components/widgets/short-toggle'
+import { ShareIconButton } from 'web/components/share-icon-button'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -332,18 +333,17 @@ function GroupOverview(props: {
 
   return (
     <Col>
-      <Row className="items-center justify-end rounded-t bg-indigo-500 px-4 py-3 text-sm text-white">
-        <Row className="flex-1 justify-start">About {group.name}</Row>
-        {isCreator && <EditGroupButton className={'ml-1'} group={group} />}
-      </Row>
       <Col className="gap-2 rounded-b bg-white p-4">
-        <Row>
-          <div className="mr-1 text-gray-500">Created by</div>
-          <UserLink
-            className="text-neutral"
-            name={creator.name}
-            username={creator.username}
-          />
+        <Row className={'justify-between'}>
+          <div className={'inline-flex items-center'}>
+            <div className="mr-1 text-gray-500">Created by</div>
+            <UserLink
+              className="text-neutral"
+              name={creator.name}
+              username={creator.username}
+            />
+          </div>
+          {isCreator && <EditGroupButton className={'ml-1'} group={group} />}
         </Row>
         <Row className={'items-center gap-1'}>
           <span className={'text-gray-500'}>Membership</span>
@@ -362,6 +362,17 @@ function GroupOverview(props: {
               {anyoneCanJoin ? 'Open' : 'Closed'}
             </span>
           )}
+          {anyoneCanJoin && user && (
+            <ShareIconButton
+              group={group}
+              username={user.username}
+              buttonClassName={'hover:bg-gray-300 !text-gray-700'}
+            >
+              <span className={' mx-2'}>
+                Invite a friend to join and earn M$500
+              </span>
+            </ShareIconButton>
+          )}
         </Row>
       </Col>
     </Col>