Add case where billing is disabled and usage is always null

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -30,8 +30,8 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
     setCurrentModal,
     setCurrentError,
     user,
-    edition,
     usage,
+    hasBillingEnabled,
   } = useContext(Context);
   const [isLoading, setIsLoading] = useState(true);
   const [invites, setInvites] = useState<Array<InviteType>>([]);
@@ -365,17 +365,20 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
     return mappedInviteList || [];
   }, [invites, currentProject?.id, window?.location?.host, isHTTPS, user?.id]);
 
-  const hasSeats = () => {
-    // If usage limit is 0, the project has unlimited seats. Otherwise, check
-    // the usage limit against the current usage.
-    if (usage?.limit.users === 0) {
+  const hasSeats = useMemo(() => {
+    if (!hasBillingEnabled) {
       return true;
     }
 
+    if (usage?.limit.users === 0) {
+      // If usage limit is 0, the project has unlimited seats. Otherwise, check
+      // the usage limit against the current usage.
+      return true;
+    }
     return usage?.current.users < usage?.limit.users;
-  };
+  }, [hasBillingEnabled, usage]);
 
-  if (!usage) {
+  if (hasBillingEnabled === null && usage === null) {
     <Loading height={"30%"} />;
   }
 
@@ -402,13 +405,13 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
           />
         </RoleSelectorWrapper>
         <ButtonWrapper>
-          <InviteButton disabled={!hasSeats()} onClick={() => validateEmail()}>
+          <InviteButton disabled={!hasSeats} onClick={() => validateEmail()}>
             Create Invite
           </InviteButton>
           {isInvalidEmail && (
             <Invalid>Invalid email address. Please try again.</Invalid>
           )}
-          {!hasSeats() && (
+          {!hasSeats && (
             <Invalid>
               You need to upgrade your plan to invite more users to the project
             </Invalid>