feat: improves the flow of account creation

2026-09-22 13:39:35 +00:00 · 2023-10-13 11:05:24 +05:30
parent 70b9d435d1
commit 840eef7bce
2 changed files with 68 additions and 66 deletions
--- a/frontend/src/hooks/api/organization/queries.tsx
+++ b/frontend/src/hooks/api/organization/queries.tsx
@@ -2,11 +2,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

 import { apiRequest } from "@app/config/request";

-import { 
+import {
  BillingDetails,
  Invoice,
  License,
-  Organization, 
+  Organization,
  OrgPlanTable,
  PlanBillingInfo,
  PmtMethod,
@@ -19,7 +19,8 @@ const organizationKeys = {
  getUserOrganizations: ["organization"] as const,
  getOrgPlanBillingInfo: (orgId: string) => [{ orgId }, "organization-plan-billing"] as const,
  getOrgPlanTable: (orgId: string) => [{ orgId }, "organization-plan-table"] as const,
-  getOrgPlansTable: (orgId: string, billingCycle: "monthly" | "yearly") => [{ orgId, billingCycle }, "organization-plans-table"] as const,
+  getOrgPlansTable: (orgId: string, billingCycle: "monthly" | "yearly") =>
+    [{ orgId, billingCycle }, "organization-plans-table"] as const,
  getOrgBillingDetails: (orgId: string) => [{ orgId }, "organization-billing-details"] as const,
  getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const,
  getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const,
@@ -28,34 +29,36 @@ const organizationKeys = {
 };

 export const fetchOrganizations = async () => {
-  const { data: { organizations } } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
+  const {
+    data: { organizations }
+  } = await apiRequest.get<{ organizations: Organization[] }>("/api/v1/organization");
  return organizations;
-}
+};

 export const useGetOrganizations = () => {
-  return useQuery({ 
-    queryKey: organizationKeys.getUserOrganizations, 
+  return useQuery({
+    queryKey: organizationKeys.getUserOrganizations,
    queryFn: async () => {
      return fetchOrganizations();
    }
  });
-}
+};

 export const useCreateOrg = () => {
+  const queryClient = useQueryClient();
+
  return useMutation({
-    mutationFn: async ({
-      name
-    }: {
-      name: string;
-    }) => {
-      const { data: { organization } } = await apiRequest.post(
-        "/api/v2/organizations",
-        {
-          name
-        }
-      );
+    mutationFn: async ({ name }: { name: string }) => {
+      const {
+        data: { organization }
+      } = await apiRequest.post("/api/v2/organizations", {
+        name
+      });

      return organization;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
    }
  });
 };
@@ -75,17 +78,13 @@ export const useRenameOrg = () => {

 export const useGetOrgTrialUrl = () => {
  return useMutation({
-    mutationFn: async ({ 
-      orgId, 
-      success_url 
-    }: {
-      orgId: string;
-      success_url: string;
-    }) => {
-      const { data: { url } } = await apiRequest.post(`/api/v1/organizations/${orgId}/session/trial`, {
+    mutationFn: async ({ orgId, success_url }: { orgId: string; success_url: string }) => {
+      const {
+        data: { url }
+      } = await apiRequest.post(`/api/v1/organizations/${orgId}/session/trial`, {
        success_url
-      })
-      
+      });
+
      return url;
    }
  });
@@ -99,11 +98,11 @@ export const useGetOrgPlanBillingInfo = (organizationId: string) => {
        `/api/v1/organizations/${organizationId}/plan/billing`
      );

-      return data; 
+      return data;
    },
    enabled: true
  });
-}
+};

 export const useGetOrgPlanTable = (organizationId: string) => {
  return useQuery({
@@ -113,18 +112,18 @@ export const useGetOrgPlanTable = (organizationId: string) => {
        `/api/v1/organizations/${organizationId}/plan/table`
      );

-      return data; 
+      return data;
    },
    enabled: true
  });
-}
+};

 export const useGetOrgPlansTable = ({
  organizationId,
  billingCycle
 }: {
  organizationId: string;
-  billingCycle: "monthly" | "yearly"
+  billingCycle: "monthly" | "yearly";
 }) => {
  return useQuery({
    queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle),
@@ -133,11 +132,11 @@ export const useGetOrgPlansTable = ({
        `/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}`
      );

-      return data; 
+      return data;
    },
    enabled: true
  });
-}
+};

 export const useGetOrgBillingDetails = (organizationId: string) => {
  return useQuery({
@@ -151,7 +150,7 @@ export const useGetOrgBillingDetails = (organizationId: string) => {
    },
    enabled: true
  });
-}
+};

 export const useUpdateOrgBillingDetails = () => {
  const queryClient = useQueryClient();
@@ -166,7 +165,7 @@ export const useUpdateOrgBillingDetails = () => {
      email?: string;
    }) => {
      const { data } = await apiRequest.patch(
-        `/api/v1/organizations/${organizationId}/billing-details`, 
+        `/api/v1/organizations/${organizationId}/billing-details`,
        {
          name,
          email
@@ -193,7 +192,7 @@ export const useGetOrgPmtMethods = (organizationId: string) => {
    },
    enabled: true
  });
-}
+};

 export const useAddOrgPmtMethod = () => {
  const queryClient = useQueryClient();
@@ -208,8 +207,10 @@ export const useAddOrgPmtMethod = () => {
      success_url: string;
      cancel_url: string;
    }) => {
-      const { data: { url } } = await apiRequest.post(
-        `/api/v1/organizations/${organizationId}/billing-details/payment-methods`, 
+      const {
+        data: { url }
+      } = await apiRequest.post(
+        `/api/v1/organizations/${organizationId}/billing-details/payment-methods`,
        {
          success_url,
          cancel_url
@@ -230,7 +231,7 @@ export const useDeleteOrgPmtMethod = () => {
  return useMutation({
    mutationFn: async ({
      organizationId,
-      pmtMethodId,
+      pmtMethodId
    }: {
      organizationId: string;
      pmtMethodId: string;
@@ -245,7 +246,7 @@ export const useDeleteOrgPmtMethod = () => {
      queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
    }
  });
-}
+};

 export const useGetOrgTaxIds = (organizationId: string) => {
  return useQuery({
@@ -259,7 +260,7 @@ export const useGetOrgTaxIds = (organizationId: string) => {
    },
    enabled: true
  });
-}
+};

 export const useAddOrgTaxId = () => {
  const queryClient = useQueryClient();
@@ -275,7 +276,7 @@ export const useAddOrgTaxId = () => {
      value: string;
    }) => {
      const { data } = await apiRequest.post(
-        `/api/v1/organizations/${organizationId}/billing-details/tax-ids`, 
+        `/api/v1/organizations/${organizationId}/billing-details/tax-ids`,
        {
          type,
          value
@@ -294,13 +295,7 @@ export const useDeleteOrgTaxId = () => {
  const queryClient = useQueryClient();

  return useMutation({
-    mutationFn: async ({
-      organizationId,
-      taxId,
-    }: {
-      organizationId: string;
-      taxId: string;
-    }) => {
+    mutationFn: async ({ organizationId, taxId }: { organizationId: string; taxId: string }) => {
      const { data } = await apiRequest.delete(
        `/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`
      );
@@ -311,7 +306,7 @@ export const useDeleteOrgTaxId = () => {
      queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
    }
  });
-}
+};

 export const useGetOrgInvoices = (organizationId: string) => {
  return useQuery({
@@ -325,7 +320,7 @@ export const useGetOrgInvoices = (organizationId: string) => {
    },
    enabled: true
  });
-}
+};

 export const useCreateCustomerPortalSession = () => {
  return useMutation({
@@ -343,7 +338,7 @@ export const useGetOrgLicenses = (organizationId: string) => {
    queryKey: organizationKeys.getOrgLicenses(organizationId),
    queryFn: async () => {
      if (organizationId === "") return undefined;
-      
+
      const { data } = await apiRequest.get<License[]>(
        `/api/v1/organizations/${organizationId}/licenses`
      );
@@ -352,18 +347,16 @@ export const useGetOrgLicenses = (organizationId: string) => {
    },
    enabled: true
  });
-}
+};

 export const useDeleteOrgById = () => {
  const queryClient = useQueryClient();

  return useMutation({
-    mutationFn: async ({
-      organizationId,
-    }: {
-      organizationId: string;
-    }) => {
-      const { data: { organization } } = await apiRequest.delete<{ organization: Organization }>(
+    mutationFn: async ({ organizationId }: { organizationId: string }) => {
+      const {
+        data: { organization }
+      } = await apiRequest.delete<{ organization: Organization }>(
        `/api/v2/organizations/${organizationId}`
      );
      return organization;
@@ -372,8 +365,12 @@ export const useDeleteOrgById = () => {
      queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
      queryClient.invalidateQueries(organizationKeys.getOrgPlanBillingInfo(dto.organizationId));
      queryClient.invalidateQueries(organizationKeys.getOrgPlanTable(dto.organizationId));
-      queryClient.invalidateQueries(organizationKeys.getOrgPlansTable(dto.organizationId, "monthly")); // You might need to invalidate for 'yearly' as well.
-      queryClient.invalidateQueries(organizationKeys.getOrgPlansTable(dto.organizationId, "yearly"));
+      queryClient.invalidateQueries(
+        organizationKeys.getOrgPlansTable(dto.organizationId, "monthly")
+      ); // You might need to invalidate for 'yearly' as well.
+      queryClient.invalidateQueries(
+        organizationKeys.getOrgPlansTable(dto.organizationId, "yearly")
+      );
      queryClient.invalidateQueries(organizationKeys.getOrgBillingDetails(dto.organizationId));
      queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
      queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
@@ -381,4 +378,4 @@ export const useDeleteOrgById = () => {
      queryClient.invalidateQueries(organizationKeys.getOrgLicenses(dto.organizationId));
    }
  });
-}
+};
--- a/frontend/src/views/Org/components/CreateOrgModal.tsx
+++ b/frontend/src/views/Org/components/CreateOrgModal.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -22,6 +23,7 @@ interface CreateOrgModalProps {

 export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
  const { createNotification } = useNotificationContext();
+  const router = useRouter();

  const {
    control,
@@ -48,7 +50,10 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
        type: "success"
      });

-      window.location.href = `/org/${organization._id}/overview`;
+      if (router.isReady) router.push(`/org/${organization._id}/overview`);
+      else window.location.href = `/org/${organization._id}/overview`;
+
+      localStorage.setItem("orgData.id", organization._id);

      reset();
      onClose();