feat: add invite modal #4009

CzarekDryl · 2024-12-27T11:07:15Z

Description

Added invite button to header
Added invite modal

Testing

Header Button:

Visible only to connected and joined users within a colony.
Triggers the "Invite Members" modal.

Invite Members Modal:

Includes description, number of invites remaining, and a shareable unique invite URL.
Provides an easy way to copy the URL.

Member Limits (Early Access):

Default limit: 100 members.
UI shows invites available, used, and remaining.
Notifies users if the limit is reached.
Includes a button to request more invites, linking to: https://colony.io/request-member-invites?colony={colony_name}

Resolves #3927

arrenv

@CzarekDryl Nice work, thank you for the PR, working as expected. Just a couple of points of feedback.

Can we have the hover state consistent with the other header buttons with the blue border:

The "Up to 100 people can join" is hard coded, can the number 100 be dynamic based on the actual invites available.

arrenv · 2024-12-31T12:35:10Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

  },
  modalDescription: {
    id: `${displayName}.modalDescription`,
    defaultMessage:
-      'You can invite up to 100 members to your Colony during the private beta using the invite link below.',
+      'Up to 100 people can join to follow and be apart of this colony during early access. If you exceed the limit, you can request more.',


Can the 100 be dynamic based on actual limit returned from DB.

arrenv · 2024-12-31T12:35:58Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

+            />
+          ) : (
+            <Link
+              to={`https://colony.io/request-member-invites?colony=${colonyName}`}


Can this be added to the const file with all other URLs so that it can easily be updated.

CzarekDryl · 2025-01-07T07:58:10Z

@arrenv All the things have been fixed and are it's ready for review again

mmioana

Hey @CzarekDryl really nice start on this issue 💯

The modal is working as expected

Screen.Recording.2025-01-07.at.12.24.28.mov

However I left some refactoring comments and found a couple of misalignments with Figma if you could please be so kind to tackle them 🙌

mmioana · 2025-01-07T10:55:25Z

src/components/common/Extensions/UserNavigation/UserNavigation.tsx

+      {!isActionSidebarOpen && isWalletConnected && user && isInColony ? (
+        <Button
+          text={isMobile ? undefined : MSG.invite}
+          mode="tertiary"
+          icon={UserPlus}
+          size="small"
+          isFullRounded
+          className="md:hover:!border-blue-400"
+          onClick={() => setIsInviteMembersModalOpen(true)}
+        />
+      ) : null}


I think we need to add iconSize={16} here according to Figma

mmioana · 2025-01-07T10:56:27Z

src/components/common/Extensions/UserNavigation/UserNavigation.tsx

+          icon={UserPlus}
+          size="small"
+          isFullRounded
+          className="md:hover:!border-blue-400"


And please add gap-1

mmioana · 2025-01-07T11:07:06Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

@@ -54,43 +76,76 @@ const InviteMembersModal = ({ isOpen, onClose }: Props) => {
    `/invite/${colonyName}/${colonyMemberInvite?.id}`,
  );
  const invitesUsed = 100 - (colonyMemberInvite?.invitesRemaining || 0);
+  const isOutOfInvites = invitesUsed >= invitesAvailable;


I think we could make use of the const { totalMemberCount } = useMemberContext(); here to compute how many invites are used and colonyMemberInvite?.invitesRemaining for deciding how many invites are available, thus replacing lines 74-79 with

const inviteLink = useBaseUrl( `/invite/${colonyName}/${colonyMemberInvite?.id}`, ); const { totalMemberCount } = useMemberContext(); const invitesAvailable = colonyMemberInvite?.invitesRemaining || 0; const invitesUsed = totalMemberCount; const isOutOfInvites = invitesUsed >= invitesAvailable;

@arrenv do we want to hardcode the invites limit to 100?
I think it would be best to actually use the stored remaining invites, as well as the number of existing followers and decide based on that if we are or are not out of invites

@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.

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 dev env I thought we need to account also for the existing number of followers 😶‍🌫️

So, in this case @CzarekDryl, I believe isOutOfInvites should just check if invitesAvailable is 0.

mmioana · 2025-01-07T11:22:43Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

Actually let's please refactor this component a bit, given we have lots of conditional content based on the isOutOfInvites flag

So my proposal would be the following

const InviteMembersModal = ({ isOpen, onClose }: Props) => { const { colony: { colonyMemberInvite, name: colonyName }, } = useColonyContext(); const inviteLink = useBaseUrl( `/invite/${colonyName}/${colonyMemberInvite?.id}`, ); const { totalMemberCount } = useMemberContext(); const invitesAvailable = colonyMemberInvite?.invitesRemaining || 0; const invitesUsed = totalMemberCount; const isOutOfInvites = invitesUsed >= invitesAvailable; const { handleClipboardCopy, isCopied } = useCopyToClipboard(); const commonClassName = 'rounded-lg p-2 text-sm font-medium'; const getModalSubtitle = () => { if (isOutOfInvites) { <FormattedMessage {...MSG.modalDescriptionReached} values={{ invitesAvailable }} />; } return ( <FormattedMessage {...MSG.modalDescription} values={{ invitesAvailable }} /> ); }; const getModalContent = () => { 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> ); }; 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> {getModalContent()} </Modal> ); };

Of course, bonus points if you feel like splitting the code up into partial components 💯

feat: add request button fix: modal changes, button hover fix: description copy

mmioana

Thanks for implementing my suggestions @CzarekDryl 🥇

The invite modal works really nicely 🌻

Screen.Recording.2025-01-16.at.19.46.38.mov

I took the chance to manually modify the invites remaining value

And it showed up in the modal 👍

However @CzarekDryl, due to my misunderstanding, we shouldn't account for totalMemberCount for the isOutOfInvites flag. I left a comment in the code, if you can please check 🙏

mmioana · 2025-01-16T18:58:24Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

@@ -54,43 +76,76 @@ const InviteMembersModal = ({ isOpen, onClose }: Props) => {
    `/invite/${colonyName}/${colonyMemberInvite?.id}`,
  );
  const invitesUsed = 100 - (colonyMemberInvite?.invitesRemaining || 0);
+  const isOutOfInvites = invitesUsed >= invitesAvailable;


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 dev env I thought we need to account also for the existing number of followers 😶‍🌫️

So, in this case @CzarekDryl, I believe isOutOfInvites should just check if invitesAvailable is 0.

CzarekDryl · 2025-01-18T15:02:33Z

@mmioana Fixed :)

arrenv

@CzarekDryl Thank you for the updates, looks to be working well!

Modal working well

Hover state updated

Invite works

Count updates

No invites remaining

Goes to the correct link and populates the form:

mmioana

Hey @CzarekDryl really nice work, now it behaves properly 🙌

With 100 invites available

With 12 invites available

With no invites available

Got redirected to the proper page when requesting more invites

The copy-link functionality works as expected

However @CzarekDryl I did find some mismatches according to Figma for the mobile version

The copy link action is on a new line

While in Figma
Same for Request invites

While in Figma
The invite button is fully rounded

While in Figma there is some horizontal padding

After these issues are fixed, we're good to go 🎉

CzarekDryl · 2025-01-20T13:29:05Z

@mmioana

Button unified with others so it's 46px width now:

Moved button to the side of texts in both cases:

mmioana

Nice work @CzarekDryl 🥇

Everything looks good also on mobile now 💯

rumzledz

Great start on this PR @CzarekDryl ! I left bits and bobs on your PR about areas of improvement. Give me a shout when you want me to re-test this PR! 👌

rumzledz · 2025-01-21T17:17:19Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

  },
  modalDescription: {
    id: `${displayName}.modalDescription`,
    defaultMessage:
-      'You can invite up to 100 members to your Colony during the private beta using the invite link below.',
+      '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.',


Checking with @JoinColony/product if you want "people" to be "person" if there's only 1 invite available

rumzledz · 2025-01-21T17:17:37Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

  },
  invitesUsed: {
    id: `${displayName}.invitesUsed`,
-    defaultMessage: '{invitesUsed}/{invitesAvailable} invites used',
+    defaultMessage:
+      '{invitesAvailable} {invitesAvailable, plural, one {invite} other {invites}} remaining',


rumzledz · 2025-01-21T17:18:29Z

src/components/v5/common/Modals/InviteMembersModal/partials/ModalContent.tsx

+  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.',


Same question about "people" pluralisation here @JoinColony/product

rumzledz · 2025-01-21T17:19:05Z

src/components/v5/common/Modals/InviteMembersModal/partials/ModalContent.tsx

+    id: `${displayName}.buttonText`,
+    defaultMessage: `{isCopied, select,
+      true {Link copied}
+      other {Copy link}


rumzledz · 2025-01-21T17:19:58Z

src/components/v5/common/Modals/InviteMembersModal/partials/ModalContent.tsx

+  const inviteLink = useBaseUrl(
+    `/invite/${colonyName}/${colonyMemberInvite?.id}`,
+  );
+  const commonClassName = 'rounded-lg p-2 text-sm font-medium';


You can write this outside the component since it's just a constant, so it's not part of the re-render cycle

rumzledz · 2025-01-21T17:28:57Z

src/components/common/Extensions/UserNavigation/UserNavigation.tsx

@@ -79,6 +90,18 @@ const UserNavigation: FC<UserNavigationProps> = ({

  return (
    <div data-tour={TourTargets.UserMenu} className="flex gap-1 md:relative">
+      {!isActionSidebarOpen && isWalletConnected && user && isInColony ? (


I see that this isInColony boolean is prop drilled at least 3 levels deep. I think it's better if you just use the context within this component:

const colonyContext = useColonyContext({ nullableContext: true }); const isInColony = !!colonyContext; ... {!isActionSidebarOpen && isWalletConnected && user && isInColony ? (

rumzledz · 2025-01-21T17:31:31Z

src/components/common/Extensions/UserNavigation/UserNavigation.tsx

+          iconSize={16}
+          size="small"
+          isFullRounded
+          className="gap-1 px-[0.875rem] sm:px-2.5 md:hover:!border-blue-400"


I think it's cleaner if you just do px-3.5

CzarekDryl · 2025-01-22T16:57:04Z

@rumzledz Thanks for checking, I've made changes with description pluralisation - for better UX. Please check it again :)

mmioana

Hey @CzarekDryl thanks for your latest changes. It all looks good 💯

However, after @rumzledz pointed out the messages pluralisation, realised we have unused translations in both ModalContent and InviteMembersModal. I left a few comments about what needs to be removed. Once this is done, I'll be more than happy to approve your PR 🙌 Thanks for your hard and continuous work on this issue! ✨

mmioana · 2025-01-23T09:48:38Z

src/components/v5/common/Modals/InviteMembersModal/partials/ModalContent.tsx

+  modalTitle: {
+    id: `${displayName}.modalTitle`,
+    defaultMessage: 'Invite people to this colony',
+  },
+  modalDescription: {
+    id: `${displayName}.modalDescription`,
+    defaultMessage:
+      'You can invite {invitesAvailable} more {invitesAvailable, plural, one {person} other {people}} to join and follow this colony during early access. If you run out, you will be able to request more.',
+  },
+  modalDescriptionReached: {
+    id: `${displayName}.modalDescriptionReached`,
+    defaultMessage:
+      'You have reached your invite limit during early access. If you need more, please make a request.',
+  },


Please remove these unused translations

mmioana · 2025-01-23T09:49:30Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

  invitesUsed: {
    id: `${displayName}.invitesUsed`,
-    defaultMessage: '{invitesUsed}/{invitesAvailable} invites used',
+    defaultMessage:
+      '{invitesAvailable} {invitesAvailable, plural, one {invite} other {invites}} remaining',
  },
  inviteLinkHeading: {
    id: `${displayName}.inviteLinkHeading`,
-    defaultMessage: 'Your unique invite link:',
+    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',


Please remove these unused descriptions

mmioana · 2025-01-23T09:50:32Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

+  },
+  requestMoreInvites: {
+    id: `${displayName}.requestMoreInvites`,
+    defaultMessage: 'Request more invites for your colony',
  },
  buttonText: {


Also this one

CzarekDryl · 2025-01-23T18:48:48Z

@mmioana Unused messages removed

mmioana

Thanks a lot @CzarekDryl for all your work! Good to go from my side! 🎉

bassgeta

Nice job, code looks good and almost everything works 😎

The header button shows up to logged in users ✔️
The modal shows up and looks like expected ✔️
THe only issue is that when we have 0 invites remaining, the if condition doesn't work :/

bassgeta · 2025-01-24T15:35:50Z

src/components/v5/common/Modals/InviteMembersModal/InviteMemberModal.tsx

-  const invitesUsed = 100 - (colonyMemberInvite?.invitesRemaining || 0);
+  const getModalSubtitle = () => {
+    if (isOutOfInvites) {
+      <FormattedMessage


dropped a return here, we have a tiny bug because of it 👀

arrenv

Thank you @CzarekDryl everything still looks to be working well. After fixing the bug @bassgeta raised, let's get it merged.

CzarekDryl self-assigned this Dec 27, 2024

CzarekDryl marked this pull request as ready for review December 30, 2024 14:22

CzarekDryl requested a review from a team as a code owner December 30, 2024 14:22

arrenv requested changes Dec 31, 2024

View reviewed changes

CzarekDryl requested a review from arrenv January 7, 2025 07:58

mmioana requested changes Jan 7, 2025

View reviewed changes

feat: add invite modal

2bd744a

feat: add request button fix: modal changes, button hover fix: description copy

CzarekDryl force-pushed the feat/16205063-invite-modal branch from 26ccfd5 to 2bd744a Compare January 15, 2025 15:45

refactor

1171020

CzarekDryl requested a review from mmioana January 15, 2025 16:02

mmioana requested changes Jan 16, 2025

View reviewed changes

fix: invites count

26316d8

CzarekDryl requested a review from mmioana January 18, 2025 15:02

arrenv previously approved these changes Jan 20, 2025

View reviewed changes

mmioana requested changes Jan 20, 2025

View reviewed changes

fix: ui

a1b354d

CzarekDryl dismissed arrenv’s stale review via a1b354d January 20, 2025 13:23

CzarekDryl requested a review from mmioana January 20, 2025 13:29

mmioana previously approved these changes Jan 20, 2025

View reviewed changes

rumzledz requested changes Jan 21, 2025

View reviewed changes

fix: refactor

daf434d

CzarekDryl dismissed mmioana’s stale review via daf434d January 22, 2025 16:56

CzarekDryl requested a review from rumzledz January 22, 2025 16:57

mmioana requested changes Jan 23, 2025

View reviewed changes

fix: remove unused messages

970b396

CzarekDryl requested a review from mmioana January 23, 2025 18:48

mmioana approved these changes Jan 23, 2025

View reviewed changes

bassgeta requested changes Jan 24, 2025

View reviewed changes

arrenv approved these changes Jan 27, 2025

View reviewed changes

feat: add invite modal #4009

Are you sure you want to change the base?

feat: add invite modal #4009

Conversation

CzarekDryl commented Dec 27, 2024 • edited Loading

Description

Testing

arrenv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CzarekDryl commented Jan 7, 2025

mmioana left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arrenv Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmioana left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CzarekDryl commented Jan 18, 2025

arrenv left a comment

Choose a reason for hiding this comment

Modal working well

Hover state updated

Invite works

Count updates

No invites remaining

mmioana left a comment

Choose a reason for hiding this comment

CzarekDryl commented Jan 20, 2025

mmioana left a comment

Choose a reason for hiding this comment

rumzledz left a comment

Choose a reason for hiding this comment

rumzledz Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CzarekDryl commented Jan 22, 2025

mmioana left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CzarekDryl commented Jan 23, 2025

mmioana left a comment

Choose a reason for hiding this comment

bassgeta left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arrenv left a comment

Choose a reason for hiding this comment

CzarekDryl commented Dec 27, 2024 •

edited

Loading

arrenv Jan 7, 2025 •

edited

Loading

rumzledz Jan 21, 2025 •

edited

Loading

bassgeta left a comment •

edited

Loading