awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improves the flow of account creation

Browse Source
This commit is contained in:
Ronit Panda
2023-10-13 11:05:24 +05:30
parent 70b9d435d1
commit 840eef7bce
2 changed files with 68 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/organization/queries.tsx
+62 -65
View File
@@ -2,11 +2,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request"; import { apiRequest } from "@app/config/request";
import { import {
BillingDetails, BillingDetails,
Invoice, Invoice,
License, License,
Organization, Organization,
OrgPlanTable, OrgPlanTable,
PlanBillingInfo, PlanBillingInfo,
PmtMethod, PmtMethod,
@@ -19,7 +19,8 @@ const organizationKeys = {
getUserOrganizations: ["organization"] as const, getUserOrganizations: ["organization"] as const,
getOrgPlanBillingInfo: (orgId: string) => [{ orgId }, "organization-plan-billing"] as const, getOrgPlanBillingInfo: (orgId: string) => [{ orgId }, "organization-plan-billing"] as const,
getOrgPlanTable: (orgId: string) => [{ orgId }, "organization-plan-table"] 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, getOrgBillingDetails: (orgId: string) => [{ orgId }, "organization-billing-details"] as const,
getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const, getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const,
getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const, getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const,
@@ -28,34 +29,36 @@ const organizationKeys = {
}; };
export const fetchOrganizations = async () => { 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; return organizations;
} };
export const useGetOrganizations = () => { export const useGetOrganizations = () => {
return useQuery({ return useQuery({
queryKey: organizationKeys.getUserOrganizations, queryKey: organizationKeys.getUserOrganizations,
queryFn: async () => { queryFn: async () => {
return fetchOrganizations(); return fetchOrganizations();
} }
}); });
} };
export const useCreateOrg = () => { export const useCreateOrg = () => {
const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async ({ mutationFn: async ({ name }: { name: string }) => {
name const {
}: { data: { organization }
name: string; } = await apiRequest.post("/api/v2/organizations", {
}) => { name
const { data: { organization } } = await apiRequest.post( });
"/api/v2/organizations",
{
name
}
);
return organization; return organization;
},
onSuccess: () => {
queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
} }
}); });
}; };
@@ -75,17 +78,13 @@ export const useRenameOrg = () => {
export const useGetOrgTrialUrl = () => { export const useGetOrgTrialUrl = () => {
return useMutation({ return useMutation({
mutationFn: async ({ mutationFn: async ({ orgId, success_url }: { orgId: string; success_url: string }) => {
orgId, const {
success_url data: { url }
}: { } = await apiRequest.post(`/api/v1/organizations/${orgId}/session/trial`, {
orgId: string;
success_url: string;
}) => {
const { data: { url } } = await apiRequest.post(`/api/v1/organizations/${orgId}/session/trial`, {
success_url success_url
}) });
return url; return url;
} }
}); });
@@ -99,11 +98,11 @@ export const useGetOrgPlanBillingInfo = (organizationId: string) => {
`/api/v1/organizations/${organizationId}/plan/billing` `/api/v1/organizations/${organizationId}/plan/billing`
); );
return data; return data;
}, },
enabled: true enabled: true
}); });
} };
export const useGetOrgPlanTable = (organizationId: string) => { export const useGetOrgPlanTable = (organizationId: string) => {
return useQuery({ return useQuery({
@@ -113,18 +112,18 @@ export const useGetOrgPlanTable = (organizationId: string) => {
`/api/v1/organizations/${organizationId}/plan/table` `/api/v1/organizations/${organizationId}/plan/table`
); );
return data; return data;
}, },
enabled: true enabled: true
}); });
} };
export const useGetOrgPlansTable = ({ export const useGetOrgPlansTable = ({
organizationId, organizationId,
billingCycle billingCycle
}: { }: {
organizationId: string; organizationId: string;
billingCycle: "monthly" | "yearly" billingCycle: "monthly" | "yearly";
}) => { }) => {
return useQuery({ return useQuery({
queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle), queryKey: organizationKeys.getOrgPlansTable(organizationId, billingCycle),
@@ -133,11 +132,11 @@ export const useGetOrgPlansTable = ({
`/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}` `/api/v1/organizations/${organizationId}/plans/table?billingCycle=${billingCycle}`
); );
return data; return data;
}, },
enabled: true enabled: true
}); });
} };
export const useGetOrgBillingDetails = (organizationId: string) => { export const useGetOrgBillingDetails = (organizationId: string) => {
return useQuery({ return useQuery({
@@ -151,7 +150,7 @@ export const useGetOrgBillingDetails = (organizationId: string) => {
}, },
enabled: true enabled: true
}); });
} };
export const useUpdateOrgBillingDetails = () => { export const useUpdateOrgBillingDetails = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -166,7 +165,7 @@ export const useUpdateOrgBillingDetails = () => {
email?: string; email?: string;
}) => { }) => {
const { data } = await apiRequest.patch( const { data } = await apiRequest.patch(
`/api/v1/organizations/${organizationId}/billing-details`, `/api/v1/organizations/${organizationId}/billing-details`,
{ {
name, name,
email email
@@ -193,7 +192,7 @@ export const useGetOrgPmtMethods = (organizationId: string) => {
}, },
enabled: true enabled: true
}); });
} };
export const useAddOrgPmtMethod = () => { export const useAddOrgPmtMethod = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -208,8 +207,10 @@ export const useAddOrgPmtMethod = () => {
success_url: string; success_url: string;
cancel_url: string; cancel_url: string;
}) => { }) => {
const { data: { url } } = await apiRequest.post( const {
`/api/v1/organizations/${organizationId}/billing-details/payment-methods`, data: { url }
} = await apiRequest.post(
`/api/v1/organizations/${organizationId}/billing-details/payment-methods`,
{ {
success_url, success_url,
cancel_url cancel_url
@@ -230,7 +231,7 @@ export const useDeleteOrgPmtMethod = () => {
return useMutation({ return useMutation({
mutationFn: async ({ mutationFn: async ({
organizationId, organizationId,
pmtMethodId, pmtMethodId
}: { }: {
organizationId: string; organizationId: string;
pmtMethodId: string; pmtMethodId: string;
@@ -245,7 +246,7 @@ export const useDeleteOrgPmtMethod = () => {
queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
} }
}); });
} };
export const useGetOrgTaxIds = (organizationId: string) => { export const useGetOrgTaxIds = (organizationId: string) => {
return useQuery({ return useQuery({
@@ -259,7 +260,7 @@ export const useGetOrgTaxIds = (organizationId: string) => {
}, },
enabled: true enabled: true
}); });
} };
export const useAddOrgTaxId = () => { export const useAddOrgTaxId = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -275,7 +276,7 @@ export const useAddOrgTaxId = () => {
value: string; value: string;
}) => { }) => {
const { data } = await apiRequest.post( const { data } = await apiRequest.post(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids`, `/api/v1/organizations/${organizationId}/billing-details/tax-ids`,
{ {
type, type,
value value
@@ -294,13 +295,7 @@ export const useDeleteOrgTaxId = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async ({ mutationFn: async ({ organizationId, taxId }: { organizationId: string; taxId: string }) => {
organizationId,
taxId,
}: {
organizationId: string;
taxId: string;
}) => {
const { data } = await apiRequest.delete( const { data } = await apiRequest.delete(
`/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}` `/api/v1/organizations/${organizationId}/billing-details/tax-ids/${taxId}`
); );
@@ -311,7 +306,7 @@ export const useDeleteOrgTaxId = () => {
queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
} }
}); });
} };
export const useGetOrgInvoices = (organizationId: string) => { export const useGetOrgInvoices = (organizationId: string) => {
return useQuery({ return useQuery({
@@ -325,7 +320,7 @@ export const useGetOrgInvoices = (organizationId: string) => {
}, },
enabled: true enabled: true
}); });
} };
export const useCreateCustomerPortalSession = () => { export const useCreateCustomerPortalSession = () => {
return useMutation({ return useMutation({
@@ -343,7 +338,7 @@ export const useGetOrgLicenses = (organizationId: string) => {
queryKey: organizationKeys.getOrgLicenses(organizationId), queryKey: organizationKeys.getOrgLicenses(organizationId),
queryFn: async () => { queryFn: async () => {
if (organizationId === "") return undefined; if (organizationId === "") return undefined;
const { data } = await apiRequest.get<License[]>( const { data } = await apiRequest.get<License[]>(
`/api/v1/organizations/${organizationId}/licenses` `/api/v1/organizations/${organizationId}/licenses`
); );
@@ -352,18 +347,16 @@ export const useGetOrgLicenses = (organizationId: string) => {
}, },
enabled: true enabled: true
}); });
} };
export const useDeleteOrgById = () => { export const useDeleteOrgById = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async ({ mutationFn: async ({ organizationId }: { organizationId: string }) => {
organizationId, const {
}: { data: { organization }
organizationId: string; } = await apiRequest.delete<{ organization: Organization }>(
}) => {
const { data: { organization } } = await apiRequest.delete<{ organization: Organization }>(
`/api/v2/organizations/${organizationId}` `/api/v2/organizations/${organizationId}`
); );
return organization; return organization;
@@ -372,8 +365,12 @@ export const useDeleteOrgById = () => {
queryClient.invalidateQueries(organizationKeys.getUserOrganizations); queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
queryClient.invalidateQueries(organizationKeys.getOrgPlanBillingInfo(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgPlanBillingInfo(dto.organizationId));
queryClient.invalidateQueries(organizationKeys.getOrgPlanTable(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(
queryClient.invalidateQueries(organizationKeys.getOrgPlansTable(dto.organizationId, "yearly")); 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.getOrgBillingDetails(dto.organizationId));
queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgPmtMethods(dto.organizationId));
queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgTaxIds(dto.organizationId));
@@ -381,4 +378,4 @@ export const useDeleteOrgById = () => {
queryClient.invalidateQueries(organizationKeys.getOrgLicenses(dto.organizationId)); queryClient.invalidateQueries(organizationKeys.getOrgLicenses(dto.organizationId));
} }
}); });
} };
frontend/src/views/Org/components/CreateOrgModal.tsx
+6 -1
View File
@@ -1,5 +1,6 @@
import { FC } from "react"; import { FC } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { useRouter } from "next/router";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup"; import * as yup from "yup";
@@ -22,6 +23,7 @@ interface CreateOrgModalProps {
export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => { export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
const { createNotification } = useNotificationContext(); const { createNotification } = useNotificationContext();
const router = useRouter();
const { const {
control, control,
@@ -48,7 +50,10 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
type: "success" 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(); reset();
onClose(); onClose();