feat: add invite modal #4009
+213
−54
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. Actually let's please refactor this component a bit, given we have lots of conditional content based on the So my proposal would be the following Of course, bonus points if you feel like splitting the code up into partial components 💯 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,14 @@ | ||
| import { SmileySticker } from '@phosphor-icons/react'; | ||
| import React from 'react'; | ||
| import { FormattedMessage, defineMessages } from 'react-intl'; | ||
|
|
||
| import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts'; | ||
| import { useMemberContext } from '~context/MemberContext/MemberContext.ts'; | ||
| import { Heading3 } from '~shared/Heading/index.ts'; | ||
| import Modal from '~v5/shared/Modal/index.ts'; | ||
|
|
||
| import { ModalContent } from './partials/ModalContent.tsx'; | ||
|
|
||
| const displayName = 'v5.common.Modals.InviteMembersModal'; | ||
|
|
||
| interface Props { | ||
|
|
@@ -20,20 +19,38 @@ interface Props { | |
| const MSG = defineMessages({ | ||
| modalTitle: { | ||
| id: `${displayName}.modalTitle`, | ||
| defaultMessage: 'Invite people to this colony', | ||
| }, | ||
| modalDescription: { | ||
| id: `${displayName}.modalDescription`, | ||
| defaultMessage: | ||
| 'You can invite {invitesAvailable} more people to join and follow this colony during early access. If you run out, you will be able to request more.', | ||
| }, | ||
|
There was a problem hiding this comment. Checking with @JoinColony/product if you want "people" to be "person" if there's only 1 invite available |
||
| modalDescriptionReached: { | ||
| id: `${displayName}.modalDescriptionReached`, | ||
| defaultMessage: | ||
| 'You have reached your invite limit during early access. If you need more, please make a request.', | ||
| }, | ||
| invitesUsed: { | ||
| id: `${displayName}.invitesUsed`, | ||
| defaultMessage: | ||
| '{invitesAvailable} {invitesAvailable, plural, one {invite} other {invites}} remaining', | ||
| }, | ||
|
|
||
| inviteLinkHeading: { | ||
| id: `${displayName}.inviteLinkHeading`, | ||
| defaultMessage: 'Unique colony invite link:', | ||
| }, | ||
| limitReached: { | ||
| id: `${displayName}.limitReached`, | ||
| defaultMessage: 'Invite limit reached', | ||
| }, | ||
| requestInvites: { | ||
| id: `${displayName}.requestInvites`, | ||
| defaultMessage: 'Request invites', | ||
| }, | ||
| requestMoreInvites: { | ||
| id: `${displayName}.requestMoreInvites`, | ||
| defaultMessage: 'Request more invites for your colony', | ||
| }, | ||
|
There was a problem hiding this comment. Please remove these unused descriptions |
||
| buttonText: { | ||
| id: `${displayName}.buttonText`, | ||
|
|
||
|
|
@@ -46,52 +63,46 @@ const MSG = defineMessages({ | |
|
|
||
| const InviteMembersModal = ({ isOpen, onClose }: Props) => { | ||
| const { | ||
| colony: { colonyMemberInvite }, | ||
| } = useColonyContext(); | ||
| const { totalMemberCount } = useMemberContext(); | ||
| const invitesAvailable = colonyMemberInvite?.invitesRemaining || 0; | ||
| const invitesUsed = totalMemberCount; | ||
| const isOutOfInvites = invitesUsed >= invitesAvailable; | ||
|
|
||
|
There was a problem hiding this comment. I think we could make use of the There was a problem hiding this comment. @arrenv do we want to hardcode the invites limit to There was a problem hiding this comment. @CzarekDryl & @mmioana no, I was not previously aware this was hardcoded, this is a value that can be increased in the database. As a result of this and to minimise impact on the database, we updated the design last week to remove the need to show the upper limit and just show the remaining available. There was a problem hiding this comment. Thanks for your response @arrenv 🙌 In this case and after looking over the code, I saw we actually have a lambda in place that will subtract 1 from the remaining invites once a user accept it. Initially, due to our So, in this case @CzarekDryl, I believe |
||
| const getModalSubtitle = () => { | ||
| if (isOutOfInvites) { | ||
| <FormattedMessage | ||
| {...MSG.modalDescriptionReached} | ||
|
There was a problem hiding this comment. dropped a |
||
| values={{ invitesAvailable }} | ||
| />; | ||
| } | ||
|
|
||
| return ( | ||
| <FormattedMessage | ||
| {...MSG.modalDescription} | ||
| values={{ invitesAvailable }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal isOpen={isOpen} onClose={() => onClose()}> | ||
| <div className="mb-8 mt-10 flex flex-col items-center"> | ||
| <SmileySticker size={42} className="mb-3" /> | ||
| <Heading3 | ||
| appearance={{ theme: 'dark' }} | ||
| className="font-semibold text-gray-900" | ||
| text={MSG.modalTitle} | ||
| /> | ||
| <p className="mt-1 text-center text-sm text-gray-600"> | ||
| {getModalSubtitle()} | ||
| </p> | ||
| </div> | ||
| <ModalContent | ||
| isOutOfInvites={isOutOfInvites} | ||
| invitesAvailable={invitesAvailable} | ||
| /> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import { CopySimple } from '@phosphor-icons/react'; | ||
| import clsx from 'clsx'; | ||
| import React, { type FC } from 'react'; | ||
| import { FormattedMessage, defineMessages } from 'react-intl'; | ||
|
|
||
| import { getRequestInvitesLink } from '~constants/externalUrls.ts'; | ||
| import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts'; | ||
| import useBaseUrl from '~hooks/useBaseUrl.ts'; | ||
| import useCopyToClipboard from '~hooks/useCopyToClipboard.ts'; | ||
| import { formatText } from '~utils/intl.ts'; | ||
| import Button from '~v5/shared/Button/index.ts'; | ||
| import CardWithCallout from '~v5/shared/CardWithCallout/index.ts'; | ||
| import Link from '~v5/shared/Link/Link.tsx'; | ||
|
|
||
| const displayName = 'v5.common.Modals.InviteMembersModal.partials.ModalContent'; | ||
|
|
||
| interface Props { | ||
| isOutOfInvites: boolean; | ||
| invitesAvailable: number; | ||
| } | ||
|
|
||
| const MSG = defineMessages({ | ||
| modalTitle: { | ||
| id: `${displayName}.modalTitle`, | ||
| defaultMessage: 'Invite people to this colony', | ||
| }, | ||
| modalDescription: { | ||
| id: `${displayName}.modalDescription`, | ||
| defaultMessage: | ||
| 'You can invite {invitesAvailable} more people to join and follow this colony during early access. If you run out, you will be able to request more.', | ||
|
There was a problem hiding this comment. Same question about "people" pluralisation here @JoinColony/product |
||
| }, | ||
| modalDescriptionReached: { | ||
| id: `${displayName}.modalDescriptionReached`, | ||
| defaultMessage: | ||
| 'You have reached your invite limit during early access. If you need more, please make a request.', | ||
| }, | ||
| invitesUsed: { | ||
| id: `${displayName}.invitesUsed`, | ||
| defaultMessage: | ||
| '{invitesAvailable} {invitesAvailable, plural, one {invite} other {invites}} remaining', | ||
| }, | ||
| inviteLinkHeading: { | ||
| id: `${displayName}.inviteLinkHeading`, | ||
| defaultMessage: 'Unique colony invite link:', | ||
| }, | ||
| limitReached: { | ||
| id: `${displayName}.limitReached`, | ||
| defaultMessage: 'Invite limit reached', | ||
| }, | ||
| requestInvites: { | ||
| id: `${displayName}.requestInvites`, | ||
| defaultMessage: 'Request invites', | ||
| }, | ||
| requestMoreInvites: { | ||
| id: `${displayName}.requestMoreInvites`, | ||
| defaultMessage: 'Request more invites for your colony', | ||
| }, | ||
| buttonText: { | ||
| id: `${displayName}.buttonText`, | ||
| defaultMessage: `{isCopied, select, | ||
| true {Link copied} | ||
| other {Copy link} | ||
|
|
||
| }`, | ||
| }, | ||
| }); | ||
|
|
||
| export const ModalContent: FC<Props> = ({ | ||
| isOutOfInvites, | ||
| invitesAvailable, | ||
| }) => { | ||
| const { | ||
| colony: { colonyMemberInvite, name: colonyName }, | ||
| } = useColonyContext(); | ||
| const { handleClipboardCopy, isCopied } = useCopyToClipboard(); | ||
|
|
||
| const inviteLink = useBaseUrl( | ||
| `/invite/${colonyName}/${colonyMemberInvite?.id}`, | ||
| ); | ||
| const commonClassName = 'rounded-lg p-2 text-sm font-medium'; | ||
|
There was a problem hiding this comment. You can write this outside the component since it's just a constant, so it's not part of the re-render cycle |
||
|
|
||
| if (isOutOfInvites) { | ||
| return ( | ||
| <CardWithCallout | ||
| title={ | ||
| <span | ||
| className={clsx( | ||
| commonClassName, | ||
| 'bg-negative-100 text-negative-400', | ||
| )} | ||
| > | ||
| <FormattedMessage | ||
| {...MSG.invitesUsed} | ||
| values={{ invitesAvailable }} | ||
| /> | ||
| </span> | ||
| } | ||
| subtitle={<FormattedMessage {...MSG.limitReached} />} | ||
| button={ | ||
| <Link | ||
| to={getRequestInvitesLink(colonyName)} | ||
| target="_blank" | ||
| className="flex min-h-8.5 items-center justify-center gap-2 whitespace-nowrap | ||
| rounded-lg border border-gray-900 bg-base-white px-2.5 py-1.5 text-sm font-medium text-gray-900 | ||
| transition-all duration-normal disabled:border-gray-300 disabled:text-gray-300 md:hover:border-gray-900 | ||
| md:hover:bg-gray-900 md:hover:!text-base-white" | ||
| > | ||
| {formatText(MSG.requestInvites)} | ||
| </Link> | ||
| } | ||
| > | ||
| <FormattedMessage {...MSG.requestMoreInvites} /> | ||
| </CardWithCallout> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <CardWithCallout | ||
| title={ | ||
| <span className={clsx(commonClassName, 'bg-blue-100 text-blue-400')}> | ||
| <FormattedMessage | ||
| {...MSG.invitesUsed} | ||
| values={{ invitesAvailable }} | ||
| /> | ||
| </span> | ||
| } | ||
| subtitle={<FormattedMessage {...MSG.inviteLinkHeading} />} | ||
| button={ | ||
| <Button | ||
| text={MSG.buttonText} | ||
| mode={isCopied ? 'completed' : 'quinary'} | ||
| icon={isCopied ? undefined : CopySimple} | ||
| onClick={() => handleClipboardCopy(inviteLink)} | ||
| size="small" | ||
| textValues={{ isCopied }} | ||
| /> | ||
| } | ||
| > | ||
| {inviteLink} | ||
| </CardWithCallout> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that this
isInColonyboolean is prop drilled at least 3 levels deep. I think it's better if you just use the context within this component: