feat: new pricing features (#9176)

* feat: new pricing

feat: invite check

fix: fixes based on comments

feat： invite_not_permitted event

fix: sync user info after trial

Popup for upgrade plan when creating a git project

change wording

fix theme color

feat: add segment events

feat: report user local git project count

fix theme issue

feat: INS-1582 new design for upgrade modal

Add pop-up for inviting members

feat: add the plan indicator

feat: new design of top-right corner

fix: fix quota

fix: fix top-right corner width

* fix: remove button

* Add upgrade plan banner in invite modal

* fix type issue

* fix smoke test

* Remove console.log

* fix: fix quota issue

* update useIsLightTheme

* fix type

* add annotation

* move doc link

* fix: fix source

---------

Co-authored-by: yaoweiprc <[email protected]>

Author: xiaodemen

packages/insomnia-smoke-test/server/insomnia-api.ts

@@ -635,4 +635,10 @@ export default (app: Application) => {
   app.delete('/v1/desktop/organizations/:organizationId/collaborators/:collaboratorId/unlink', (_req, res) => {
     res.json(null);
   });
+
+  app.post('/v1/organizations/:organizationId/check-seats', (_req, res) => {
+    res.json({
+      isAllowed: true,
+    });
+  });
 };

packages/insomnia/src/basic-components/icon.tsx

@@ -0,0 +1,2 @@
+export * from '../ui/components/icon';
+// https://fontawesome.com/search?q=user&ic=free&o=r

packages/insomnia/src/basic-components/modal.tsx

@@ -0,0 +1,69 @@
+import classnames from 'classnames';
+import type React from 'react';
+import { Button, Dialog, Heading, Modal as RAModal, ModalOverlay } from 'react-aria-components';
+
+import { Icon } from '~/basic-components/icon';
+
+interface Props {
+  isOpen: boolean;
+  onClose?: () => void;
+  title?: React.ReactNode;
+  closable?: boolean;
+  className?: string;
+}
+
+export const Modal: React.FC<React.PropsWithChildren<Props>> = ({
+  isOpen,
+  onClose,
+  className,
+  title,
+  closable,
+  children,
+}) => {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={isOpen => {
+        !isOpen && onClose?.();
+      }}
+      isDismissable
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
+    >
+      <RAModal
+        onOpenChange={isOpen => {
+          !isOpen && onClose?.();
+        }}
+        className={classnames(
+          'flex flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]',
+          className,
+        )}
+      >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
+          {({ close }) => (
+            <>
+              <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+                {' '}
+                <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                  {title && (
+                    <Heading slot="title" className="text-3xl">
+                      {title}
+                    </Heading>
+                  )}
+                  {closable && (
+                    <Button
+                      className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      onPress={() => close()}
+                    >
+                      <Icon icon="x" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+              {children}
+            </>
+          )}
+        </Dialog>
+      </RAModal>
+    </ModalOverlay>
+  );
+};

packages/insomnia/src/basic-components/progress.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+
+interface Props {
+  percent: number;
+  className?: string;
+  status?: 'success' | 'error' | 'normal';
+}
+
+export const Progress = ({ className, percent, status }: Props) => {
+  return (
+    <div
+      // FIXME: use css variables for colors
+      className={classNames(
+        'h-[10px] flex-grow overflow-hidden rounded-full bg-[#f1e6ff]',
+        status === 'error' && 'bg-[#db110040]',
+        status === 'success' && 'bg-[#00bf7340]',
+        className,
+      )}
+    >
+      <div
+        className={classNames(
+          'transition-width h-full rounded-full bg-[--color-surprise] duration-1000 ease-in-out',
+          status === 'error' && 'bg-[--color-danger]',
+          status === 'success' && 'bg-[--color-success]',
+        )}
+        style={{
+          width: `${percent}%`,
+        }}
+      />
+    </div>
+  );
+};

packages/insomnia/src/common/documentation.ts

@@ -14,6 +14,8 @@ export const docsIntroductionToInsoCLI = insomniaDocs('/inso-cli/introduction');
 export const docsPreRequestScript = insomniaDocs('/insomnia/pre-request-script');
 export const docsAfterResponseScript = insomniaDocs('/insomnia/after-response-script');
 export const docsMcpClient = insomniaDocs('/insomnia/mcp-clients-in-insomnia');
+export const docsPricingLearnMoreLink =
+  'https://developer.konghq.com/insomnia/storage/#what-are-the-user-and-git-sync-limits-for-the-essentials-plan';
 
 export const docsGitAccessToken = {
   github: 'https://docs.github.com/github/authenticating-to-github/creating-a-personal-access-token',

packages/insomnia/src/common/import.ts

@@ -130,6 +130,7 @@ interface ResourceCacheType {
 
 let resourceCacheList: ResourceCacheType[] = [];
 
+// All models that can be exported should be listed here
 export const MODELS_BY_EXPORT_TYPE: Record<AllExportTypes, AllTypes> = {
   request: 'Request',
   websocket_payload: 'WebSocketPayload',

packages/insomnia/src/models/organization.ts

@@ -65,7 +65,7 @@ export type PersonalPlanType = 'free' | 'individual' | 'team' | 'enterprise' | '
 export const formatCurrentPlanType = (type: PersonalPlanType) => {
   switch (type) {
     case 'free': {
-      return 'Hobby';
+      return 'Essentials';
     }
     case 'individual': {
       return 'Individual';
@@ -94,4 +94,6 @@ export interface CurrentPlan {
   quantity: number;
   type: PersonalPlanType;
   planName: string;
+  status: 'trialing' | 'active';
+  trialingEnd: string;
 }

packages/insomnia/src/models/request-version.ts

@@ -10,6 +10,11 @@ import { isRequest, type Request } from './request';
 import { isSocketIORequest, type SocketIORequest } from './socket-io-request';
 import { isWebSocketRequest, type WebSocketRequest } from './websocket-request';
 
+/* When viewing a specific request, the user can click the Send button to test-send it.
+Each time the user sends the request, the parameters may differ—they might edit the body, headers, and so on—and Insomnia records every sent request as history.
+When the user browses the send history for a request and selects one of the entries, the current request is restored to the exact state it had when that request was sent, including the body, headers, and other settings.
+A Request Version is essentially a snapshot of the request at the moment it was test-sent. */
+
 export const name = 'Request Version';
 
 export const type = 'RequestVersion';

packages/insomnia/src/routes/organization.$organizationId.collaborators-check-seats.tsx

@@ -0,0 +1,47 @@
+import { href } from 'react-router';
+import { v4 as uuidv4 } from 'uuid';
+
+import { userSession } from '~/models';
+import { insomniaFetch } from '~/ui/insomniaFetch';
+import { createFetcherLoadHook } from '~/utils/router';
+
+import type { Route } from './+types/organization.$organizationId.collaborators-check-seats';
+
+export const needsToUpgrade = 'NEEDS_TO_UPGRADE';
+export const needsToIncreaseSeats = 'NEEDS_TO_INCREASE_SEATS';
+
+export interface CheckSeatsResponse {
+  isAllowed: boolean;
+  code?: typeof needsToUpgrade | typeof needsToIncreaseSeats;
+}
+
+export async function clientLoader({ params }: Route.ClientLoaderArgs) {
+  const { id: sessionId } = await userSession.get();
+
+  const { organizationId } = params;
+
+  try {
+    // Check whether the user can add a new collaborator
+    // Use a random email to avoid hitting any existing member emails
+    const checkResponseData = await insomniaFetch<CheckSeatsResponse>({
+      method: 'POST',
+      path: `/v1/organizations/${organizationId}/check-seats`,
+      data: { emails: [`insomnia-mock-check-seats-${uuidv4()}@example.net`] },
+      sessionId,
+      onlyResolveOnSuccess: true,
+    });
+    return checkResponseData;
+  } catch {
+    return { isAllowed: true };
+  }
+}
+
+export const useCollaboratorsCheckSeatsLoaderFetcher = createFetcherLoadHook(
+  load =>
+    ({ organizationId, query }: { organizationId: string; query?: string }) => {
+      return load(
+        `${href(`/organization/:organizationId/collaborators-check-seats`, { organizationId })}?${encodeURIComponent(query || '')}`,
+      );
+    },
+  clientLoader,
+);

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.delete.tsx

@@ -3,6 +3,7 @@ import { href, redirect } from 'react-router';
 import { database } from '~/common/database';
 import { projectLock } from '~/common/project';
 import * as models from '~/models';
+import { reportGitProjectCount } from '~/routes/organization.$organizationId.project.new';
 import { insomniaFetch } from '~/ui/insomniaFetch';
 import { invariant } from '~/utils/invariant';
 import { createFetcherSubmitHook, getInitialRouteForOrganization } from '~/utils/router';
@@ -53,6 +54,8 @@ export async function clientAction({ params }: Route.ClientActionArgs) {
 
     await database.flushChanges(bufferId);
 
+    project.gitRepositoryId && reportGitProjectCount(organizationId, sessionId);
+
     // When redirect to `/organizations/:organizationId`, it sometimes doesn't reload the index loader, so manually redirect to the initial route for the organization
     const initialOrganizationRoute = await getInitialRouteForOrganization({ organizationId });
     return redirect(initialOrganizationRoute);