diff --git a/web/sdk/react/components/organization/general/index.tsx b/web/sdk/react/components/organization/general/index.tsx index 54c531c3b..54665016b 100644 --- a/web/sdk/react/components/organization/general/index.tsx +++ b/web/sdk/react/components/organization/general/index.tsx @@ -1,135 +1,10 @@ 'use client'; -import { useMemo } from 'react'; -import { - Button, - Tooltip, - Separator, - Skeleton, - Text, - Flex -} from '@raystack/apsara'; -import { Outlet, useNavigate } from '@tanstack/react-router'; -import { useFrontier } from '~/react/contexts/FrontierContext'; -import { usePermissions } from '~/react/hooks/usePermissions'; -import { PERMISSIONS, shouldShowComponent } from '~/utils'; -import { GeneralOrganization } from './general.workspace'; -import { AuthTooltipMessage } from '~/react/utils'; -import { useTerminology } from '~/react/hooks/useTerminology'; -import { PageHeader } from '~/react/components/common/page-header'; -import sharedStyles from '../styles.module.css'; +import { GeneralPage } from '~/react/views/general'; export default function GeneralSetting() { - const t = useTerminology(); - const { activeOrganization: organization, isActiveOrganizationLoading } = - useFrontier(); - - const resource = `app/organization:${organization?.id}`; - - const listOfPermissionsToCheck = useMemo(() => { - return [ - { - permission: PERMISSIONS.UpdatePermission, - resource: resource - }, - { - permission: PERMISSIONS.DeletePermission, - resource: resource - } - ]; - }, [resource]); - - const { permissions, isFetching: isPermissionsFetching } = usePermissions( - listOfPermissionsToCheck, - !!organization?.id - ); - - const { canUpdateWorkspace, canDeleteWorkspace } = useMemo(() => { - return { - canUpdateWorkspace: shouldShowComponent( - permissions, - `${PERMISSIONS.UpdatePermission}::${resource}` - ), - canDeleteWorkspace: shouldShowComponent( - permissions, - `${PERMISSIONS.DeletePermission}::${resource}` - ) - }; - }, [permissions, resource]); - - const isLoading = isActiveOrganizationLoading || isPermissionsFetching; - - return ( - - - - - - - - - - - - - ); + return { + // @ts-ignore + window.location = window.location.origin; + }}/>; } - -export const GeneralDeleteOrganization = ({ - isLoading, - canDelete -}: { - isLoading?: boolean; - canDelete: boolean; -}) => { - const t = useTerminology(); - const navigate = useNavigate({ from: '/' }); - return ( - <> - - {isLoading ? ( - - ) : ( - - If you want to permanently delete this{' '} - {t.organization({ case: 'lower' })} and all of its data. - - )} - {isLoading ? ( - - ) : ( - - - - )} - - - - ); -}; diff --git a/web/sdk/react/components/organization/routes.tsx b/web/sdk/react/components/organization/routes.tsx index 721856712..81e994cb8 100644 --- a/web/sdk/react/components/organization/routes.tsx +++ b/web/sdk/react/components/organization/routes.tsx @@ -13,7 +13,6 @@ import Domain from './domain'; import { AddDomain } from './domain/add-domain'; import { VerifyDomain } from './domain/verify-domain'; import GeneralSetting from './general'; -import { DeleteOrganization } from './general/delete'; import WorkspaceMembers from './members'; import { InviteMember } from './members/invite'; import UserPreferences from './preferences'; @@ -148,12 +147,6 @@ const indexRoute = createRoute({ component: GeneralSetting }); -const deleteOrgRoute = createRoute({ - getParentRoute: () => indexRoute, - path: '/delete', - component: DeleteOrganization -}); - const securityRoute = createRoute({ getParentRoute: () => rootRoute, path: '/security', @@ -367,7 +360,7 @@ interface getRootTreeOptions { export function getRootTree({ customScreens = [] }: getRootTreeOptions) { return rootRoute.addChildren([ - indexRoute.addChildren([deleteOrgRoute]), + indexRoute, securityRoute, sessionsRoute.addChildren([revokeSessionRoute]), membersRoute.addChildren([inviteMemberRoute, removeMemberRoute]), diff --git a/web/sdk/react/components/organization/shared/types.ts b/web/sdk/react/components/organization/shared/types.ts new file mode 100644 index 000000000..7ffa037f7 --- /dev/null +++ b/web/sdk/react/components/organization/shared/types.ts @@ -0,0 +1,7 @@ +export type OnNavigate = (to: string, params?: Record) => void; + +export interface BasePageProps { + organizationId: string; + onNavigate?: OnNavigate; +} + diff --git a/web/sdk/react/components/organization/general/delete.tsx b/web/sdk/react/views/general/delete-organization-dialog.tsx similarity index 92% rename from web/sdk/react/components/organization/general/delete.tsx rename to web/sdk/react/views/general/delete-organization-dialog.tsx index aaebfb357..c5057c8c6 100644 --- a/web/sdk/react/components/organization/general/delete.tsx +++ b/web/sdk/react/views/general/delete-organization-dialog.tsx @@ -10,7 +10,6 @@ import { } from '@raystack/apsara'; import { yupResolver } from '@hookform/resolvers/yup'; -import { useNavigate } from '@tanstack/react-router'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { useFrontier } from '~/react/contexts/FrontierContext'; @@ -30,7 +29,17 @@ const orgSchema = yup }) .required(); -export const DeleteOrganization = () => { +export interface DeleteOrganizationDialogProps { + open: boolean; + onOpenChange: (value: boolean) => void; + onDeleteSuccess?: () => void; +} + +export const DeleteOrganizationDialog = ({ + open, + onOpenChange, + onDeleteSuccess +}: DeleteOrganizationDialogProps) => { const { watch, handleSubmit, @@ -40,7 +49,6 @@ export const DeleteOrganization = () => { } = useForm({ resolver: yupResolver(orgSchema) }); - const navigate = useNavigate({ from: '/delete' }); const t = useTerminology(); const { activeOrganization: organization } = useFrontier(); const { mutateAsync: deleteOrganization } = useMutation( @@ -62,8 +70,7 @@ export const DeleteOrganization = () => { await deleteOrganization(req); toast.success(`${t.organization({ case: 'capital' })} deleted`); - // @ts-ignore - window.location = window.location.origin; + onDeleteSuccess?.(); } catch (error: any) { toast.error('Something went wrong', { description: @@ -75,14 +82,13 @@ export const DeleteOrganization = () => { const title = watch('title', ''); return ( - + Verify {t.organization({ case: 'lower' })} deletion navigate({ to: '/' })} data-test-id="frontier-sdk-delete-organization-close-btn" /> @@ -139,3 +145,4 @@ export const DeleteOrganization = () => { ); }; + diff --git a/web/sdk/react/components/organization/general/general.workspace.tsx b/web/sdk/react/views/general/general-organization.tsx similarity index 98% rename from web/sdk/react/components/organization/general/general.workspace.tsx rename to web/sdk/react/views/general/general-organization.tsx index 8bc28fae8..1d94fcf9b 100644 --- a/web/sdk/react/components/organization/general/general.workspace.tsx +++ b/web/sdk/react/views/general/general-organization.tsx @@ -26,7 +26,7 @@ import { } from '@raystack/proton/frontier'; import { create } from '@bufbuild/protobuf'; import { AuthTooltipMessage } from '~/react/utils'; -import { AvatarUpload } from '../../avatar-upload'; +import { AvatarUpload } from '~/react/components/avatar-upload'; import { getInitials } from '~/utils'; import { useTerminology } from '~/react/hooks/useTerminology'; import styles from './general.module.css'; @@ -41,7 +41,7 @@ const generalSchema = yup type FormData = yup.InferType; -interface GeneralOrganizationProps { +export interface GeneralOrganizationProps { organization?: Organization; isLoading?: boolean; canUpdateWorkspace?: boolean; @@ -201,3 +201,4 @@ export const GeneralOrganization = ({ ); }; + diff --git a/web/sdk/react/views/general/general-page.tsx b/web/sdk/react/views/general/general-page.tsx new file mode 100644 index 000000000..5873dd431 --- /dev/null +++ b/web/sdk/react/views/general/general-page.tsx @@ -0,0 +1,127 @@ +'use client'; + +import { useMemo, useState } from 'react'; +import { + Button, + Tooltip, + Separator, + Skeleton, + Text, + Flex +} from '@raystack/apsara'; +import { useFrontier } from '~/react/contexts/FrontierContext'; +import { usePermissions } from '~/react/hooks/usePermissions'; +import { PERMISSIONS, shouldShowComponent } from '~/utils'; +import { GeneralOrganization } from './general-organization'; +import { AuthTooltipMessage } from '~/react/utils'; +import { useTerminology } from '~/react/hooks/useTerminology'; +import { PageHeader } from '~/react/components/common/page-header'; +import { DeleteOrganizationDialog } from './delete-organization-dialog'; +import sharedStyles from '../../components/organization/styles.module.css'; + +export interface GeneralPageProps { + onDeleteSuccess?: () => void; +} + +export function GeneralPage({ onDeleteSuccess }: GeneralPageProps = {}) { + const t = useTerminology(); + const { activeOrganization: organization, isActiveOrganizationLoading } = + useFrontier(); + + const resource = `app/organization:${organization?.id}`; + + const listOfPermissionsToCheck = useMemo(() => { + return [ + { + permission: PERMISSIONS.UpdatePermission, + resource: resource + }, + { + permission: PERMISSIONS.DeletePermission, + resource: resource + } + ]; + }, [resource]); + + const { permissions, isFetching: isPermissionsFetching } = usePermissions( + listOfPermissionsToCheck, + !!organization?.id + ); + + const { canUpdateWorkspace, canDeleteWorkspace } = useMemo(() => { + return { + canUpdateWorkspace: shouldShowComponent( + permissions, + `${PERMISSIONS.UpdatePermission}::${resource}` + ), + canDeleteWorkspace: shouldShowComponent( + permissions, + `${PERMISSIONS.DeletePermission}::${resource}` + ) + }; + }, [permissions, resource]); + + const isLoading = isActiveOrganizationLoading || isPermissionsFetching; + + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + + return ( + + + + + + + + + + {isLoading ? ( + + ) : ( + + If you want to permanently delete this{' '} + {t.organization({ case: 'lower' })} and all of its data. + + )} + {isLoading ? ( + + ) : ( + + + + )} + + + + + + ); +} + diff --git a/web/sdk/react/components/organization/general/general.module.css b/web/sdk/react/views/general/general.module.css similarity index 99% rename from web/sdk/react/components/organization/general/general.module.css rename to web/sdk/react/views/general/general.module.css index dcbcd9b58..e396d0f3b 100644 --- a/web/sdk/react/components/organization/general/general.module.css +++ b/web/sdk/react/views/general/general.module.css @@ -49,3 +49,4 @@ .deleteFooter { flex-direction: column; } + diff --git a/web/sdk/react/views/general/index.ts b/web/sdk/react/views/general/index.ts new file mode 100644 index 000000000..f18f55af0 --- /dev/null +++ b/web/sdk/react/views/general/index.ts @@ -0,0 +1,8 @@ +export { GeneralPage } from './general-page'; +export type { GeneralPageProps } from './general-page'; + +export { GeneralOrganization } from './general-organization'; +export type { GeneralOrganizationProps } from './general-organization'; + +export { DeleteOrganizationDialog } from './delete-organization-dialog'; +export type { DeleteOrganizationDialogProps } from './delete-organization-dialog';