feature team widget on team page (keybase#22917)

* feature team widget on team page

* stories

* eslint

* danny feedback

shared/actions/json/teams.json

@@ -353,6 +353,9 @@
       "teamID": "Types.TeamID",
       "message": "RPCChatTypes.WelcomeMessageDisplay"
     },
+    "setJustFinishedAddMembersWizard": {
+      "justFinished": "boolean"
+    },
     "setSubteamFilter": {
       "_description": "Set filtering for the subteams tab.",
       "filter": "string",

shared/actions/teams.tsx

@@ -892,7 +892,7 @@ const setMemberPublicity = async (state: TypedState, action: TeamsGen.SetMemberP
         isShowcased: showcase,
         teamID,
       },
-      Constants.teamWaitingKeyByID(teamID, state)
+      [Constants.teamWaitingKeyByID(teamID, state), Constants.setMemberPublicityWaitingKey(teamID)]
     )
     return
   } catch (error) {

shared/common-adapters/icon.constants-gen.tsx

@@ -530,6 +530,7 @@ export type IconType =
   | 'icon-illustration-teams-216'
   | 'icon-illustration-teams-80'
   | 'icon-illustration-teams-channels-460-96'
+  | 'icon-illustration-teams-feature-profile-460-64'
   | 'icon-illustration-teams-subteams-460-96'
   | 'icon-illustration-welcome-96'
   | 'icon-illustration-zen-240-180'
@@ -5736,6 +5737,14 @@ export const iconMeta: {[k in IconType]: IconMeta} = {
       return require('../images/icons/icon-illustration-teams-channels-460-96.png')
     },
   },
+  'icon-illustration-teams-feature-profile-460-64': {
+    extension: 'png',
+    imagesDir: 'icons',
+    isFont: false,
+    get require() {
+      return require('../images/icons/icon-illustration-teams-feature-profile-460-64.png')
+    },
+  },
   'icon-illustration-teams-subteams-460-96': {
     extension: 'png',
     imagesDir: 'icons',

shared/constants/teams.tsx

@@ -27,6 +27,7 @@ export const teamWaitingKeyByID = (teamID: Types.TeamID, state: TypedState) => {
   const teamname = getTeamNameFromID(state, teamID) ?? ''
   return teamWaitingKey(teamname)
 }
+export const setMemberPublicityWaitingKey = (teamID: Types.TeamID) => `teamMemberPub:${teamID}`
 export const teamGetWaitingKey = (teamID: Types.TeamID) => `teamGet:${teamID}`
 export const teamTarsWaitingKey = (teamID: Types.TeamID) => `teamTars:${teamID}`
 export const teamCreationWaitingKey = 'teamCreate'
@@ -167,6 +168,7 @@ export const makeRetentionPolicy = (r?: Partial<RetentionPolicy>): RetentionPoli
 })
 
 const emptyState: Types.State = {
+  addMembersWizard: {justFinished: false},
   addUserToTeamsResults: '',
   addUserToTeamsState: 'notStarted',
   canPerform: new Map(),

shared/constants/types/teams.tsx

@@ -131,7 +131,12 @@ export type TeamVersion = {
   latestOffchainSeqno: number
 }
 
+export type AddMembersWizardState = {
+  justFinished: boolean
+}
+
 export type State = {
+  readonly addMembersWizard: AddMembersWizardState
   readonly addUserToTeamsState: AddUserToTeamsState
   readonly addUserToTeamsResults: string
   readonly canPerform: Map<TeamID, TeamOperations>

shared/reducers/teams.tsx

@@ -307,6 +307,9 @@ export default Container.makeReducer<
   [TeamsGen.setWelcomeMessage]: (draftState, _) => {
     draftState.errorInEditWelcomeMessage = ''
   },
+  [TeamsGen.setJustFinishedAddMembersWizard]: (draftState, action) => {
+    draftState.addMembersWizard.justFinished = action.payload.justFinished
+  },
   [EngineGen.chat1NotifyChatChatWelcomeMessageLoaded]: (draftState, action) => {
     const {teamID, message} = action.payload.params
     draftState.teamIDToWelcomeMessage.set(teamID, message)

shared/teams/team/new-header.tsx

@@ -13,6 +13,8 @@ import capitalize from 'lodash/capitalize'
 import {Activity} from '../common'
 import {appendNewTeamBuilder} from '../../actions/typed-routes'
 import flags from '../../util/feature-flags'
+import * as TeamsGen from '../../actions/teams-gen'
+import * as Types from '../../constants/types/teams'
 
 const AddPeopleButton = ({teamID}: {teamID: TeamID}) => {
   const dispatch = Container.useDispatch()
@@ -30,6 +32,51 @@ const AddPeopleButton = ({teamID}: {teamID: TeamID}) => {
     />
   )
 }
+type FeatureTeamCardProps = {teamID: Types.TeamID}
+const FeatureTeamCard = ({teamID}: FeatureTeamCardProps) => {
+  const dispatch = Container.useDispatch()
+  const onFeature = () => dispatch(TeamsGen.createSetMemberPublicity({showcase: true, teamID}))
+  const onNoThanks = React.useCallback(
+    () => dispatch(TeamsGen.createSetJustFinishedAddMembersWizard({justFinished: false})),
+    [dispatch]
+  )
+  // Automatically dismiss this when the user navigates away
+  React.useEffect(() => onNoThanks, [onNoThanks])
+  const waiting = Container.useAnyWaiting(Constants.setMemberPublicityWaitingKey(teamID))
+  return (
+    <Kb.Box2
+      direction="vertical"
+      gap={Styles.isMobile ? 'xtiny' : 'tiny'}
+      style={styles.addInviteAsFeatureTeamBox}
+      className="addInviteAndLinkBox"
+      alignItems="flex-start"
+      alignSelf="flex-end"
+    >
+      <Kb.Box style={styles.illustration}>
+        <Kb.Icon type="icon-illustration-teams-feature-profile-460-64" />
+      </Kb.Box>
+      <Kb.Text type="BodySemibold">Feature team on your profile?</Kb.Text>
+      <Kb.Text type="BodySmall">So your friends or coworkers know of your team's existence.</Kb.Text>
+      <Kb.Box2 direction="horizontal" gap="xtiny" fullWidth={true}>
+        <Kb.Button
+          label="Yes, feature it"
+          type="Success"
+          onClick={onFeature}
+          small={true}
+          style={Styles.globalStyles.flexOne}
+          waiting={waiting}
+        />
+        <Kb.Button
+          label="Later"
+          type="Dim"
+          onClick={onNoThanks}
+          small={true}
+          style={Styles.globalStyles.flexOne}
+        />
+      </Kb.Box2>
+    </Kb.Box2>
+  )
+}
 
 type HeaderTitleProps = Kb.PropsWithOverlay<{
   teamID: TeamID
@@ -48,6 +95,7 @@ const _HeaderTitle = (props: HeaderTitleProps) => {
   const meta = Container.useSelector(s => Constants.getTeamMeta(s, teamID))
   const details = Container.useSelector(s => Constants.getTeamDetails(s, teamID))
   const yourOperations = Container.useSelector(s => Constants.getCanPerformByID(s, teamID))
+  const justFinishedAddWizard = Container.useSelector(s => s.teams.addMembersWizard.justFinished)
   const activityLevel = 'active' // TODO plumbing
   const newMemberCount = 0 // TODO plumbing
 
@@ -167,41 +215,44 @@ const _HeaderTitle = (props: HeaderTitleProps) => {
     </Kb.Box2>
   )
 
-  const addInviteAndLinkBox = (
-    <Kb.Box2
-      direction="vertical"
-      gap={Styles.isMobile ? 'xtiny' : 'tiny'}
-      style={styles.addInviteAndLinkBox}
-      className="addInviteAndLinkBox"
-      alignItems="center"
-      alignSelf="flex-end"
-    >
-      <AddPeopleButton teamID={props.teamID} />
-      {flags.teamInvites && (
-        <Kb.Text type={Styles.isMobile ? 'BodyTiny' : 'BodySmall'}>
-          {Styles.isMobile ? 'or' : 'or share a link:'}
-        </Kb.Text>
-      )}
-      {flags.teamInvites &&
-        (Styles.isMobile ? (
-          <Kb.Button
-            label="Generate invite link"
-            onClick={callbacks.onManageInvites}
-            style={Styles.globalStyles.flexGrow}
-            mode="Secondary"
-            fullWidth={true}
-          />
-        ) : (
-          <Kb.Box2 direction="vertical" gap="xtiny" alignItems="flex-start">
-            <Kb.CopyText text="https://keybase.io/team/link/blahblah/" />
-            <Kb.Text type="BodyTiny">Adds as writer • Expires 10,000 ys</Kb.Text>
-            <Kb.Text type="BodyTiny" onClick={callbacks.onManageInvites} className="hover-underline">
-              Manage invite links
-            </Kb.Text>
-          </Kb.Box2>
-        ))}
-    </Kb.Box2>
-  )
+  const addInviteAndLinkBox =
+    justFinishedAddWizard && !meta.showcasing ? (
+      <FeatureTeamCard teamID={props.teamID} />
+    ) : (
+      <Kb.Box2
+        direction="vertical"
+        gap={Styles.isMobile ? 'xtiny' : 'tiny'}
+        style={styles.addInviteAndLinkBox}
+        className="addInviteAndLinkBox"
+        alignItems="center"
+        alignSelf="flex-end"
+      >
+        <AddPeopleButton teamID={props.teamID} />
+        {flags.teamInvites && (
+          <Kb.Text type={Styles.isMobile ? 'BodyTiny' : 'BodySmall'}>
+            {Styles.isMobile ? 'or' : 'or share a link:'}
+          </Kb.Text>
+        )}
+        {flags.teamInvites &&
+          (Styles.isMobile ? (
+            <Kb.Button
+              label="Generate invite link"
+              onClick={callbacks.onManageInvites}
+              style={Styles.globalStyles.flexGrow}
+              mode="Secondary"
+              fullWidth={true}
+            />
+          ) : (
+            <Kb.Box2 direction="vertical" gap="xtiny" alignItems="flex-start">
+              <Kb.CopyText text="https://keybase.io/team/link/blahblah/" />
+              <Kb.Text type="BodyTiny">Adds as writer • Expires 10,000 ys</Kb.Text>
+              <Kb.Text type="BodyTiny" onClick={callbacks.onManageInvites} className="hover-underline">
+                Manage invite links
+              </Kb.Text>
+            </Kb.Box2>
+          ))}
+      </Kb.Box2>
+    )
 
   if (Styles.isMobile) {
     return (
@@ -317,6 +368,27 @@ const styles = Styles.styleSheetCreate(
           margin: Styles.globalMargins.tiny,
         },
       }),
+      addInviteAsFeatureTeamBox: Styles.platformStyles({
+        common: {
+          borderColor: Styles.globalColors.black_10,
+          borderStyle: 'solid',
+          borderWidth: 1,
+          flexShrink: 0,
+          padding: Styles.globalMargins.tiny,
+        },
+        isElectron: {
+          borderRadius: 4,
+          height: 184,
+          marginBottom: Styles.globalMargins.xsmall,
+          marginRight: Styles.globalMargins.small,
+          width: 220,
+        },
+        isMobile: {
+          borderRadius: 8,
+          flexGrow: 1,
+          margin: Styles.globalMargins.tiny,
+        },
+      }),
       addPeopleButton: {
         flexGrow: 0,
       },
@@ -351,6 +423,7 @@ const styles = Styles.styleSheetCreate(
       header: {
         flexShrink: 1,
       },
+      illustration: {borderRadius: 4, overflow: 'hidden', width: '100%'},
       marginBottomRightTiny: {
         marginBottom: Styles.globalMargins.tiny,
         marginRight: Styles.globalMargins.tiny,

shared/teams/team/rows/member-row/index.tsx

@@ -210,7 +210,7 @@ export const TeamMemberRow = (props: Props) => {
         containerStyleOverride={styles.listItemMargin}
         type="Large"
         body={body}
-        firstItem={isOwner}
+        firstItem={isOwner /*TODO: make this accurate */}
         style={selected ? styles.selected : undefined}
         onClick={anySelected ? () => onSelect(!selected) : props.onClick}
       />