Merge pull request #129 from auth0/feat/unified-hooks-org-details

feat(react): refactor org details with view props

Author: NaveenChand755

packages/react/src/components/auth0/my-organization/__tests__/organization-details-edit.test.tsx

@@ -10,8 +10,7 @@ import {
 import * as useCoreClientModule from '@/hooks/shared/use-core-client';
 import {
   createMockOrganization,
-  createMockOrganizationDetailsEditHandler,
-  createMockOrganizationDetailsEditLogic,
+  createMockOrganizationDetailsEditView,
 } from '@/tests/utils/__mocks__/my-organization/organization-management/organization-details.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 import { mockCore, mockToast } from '@/tests/utils/test-setup';
@@ -539,60 +538,44 @@ describe('OrganizationDetailsEdit', () => {
 });
 
 describe('OrganizationDetailsEditView', () => {
-  const logic = { ...createMockOrganizationDetailsEditLogic(), currentStyles: undefined };
-  const handlers = createMockOrganizationDetailsEditHandler();
+  const viewProps = createMockOrganizationDetailsEditView();
 
   it('renders the header and organization details form', () => {
-    renderWithProviders(<OrganizationDetailsEditView logic={logic} handlers={handlers} />);
+    renderWithProviders(<OrganizationDetailsEditView {...viewProps} />);
     expect(screen.getByRole('banner')).toBeInTheDocument();
     expect(screen.getByTestId('organization-details-card')).toBeInTheDocument();
   });
 
   it('renders custom card class if provided', () => {
     renderWithProviders(
       <OrganizationDetailsEditView
-        logic={{
-          ...logic,
-          styling: {
-            ...logic.styling,
-            classes: { ...logic.styling.classes, OrganizationDetails_Card: 'custom-card-class' },
-          },
+        {...viewProps}
+        styling={{
+          ...viewProps.styling,
+          classes: { ...viewProps.styling.classes, OrganizationDetails_Card: 'custom-card-class' },
         }}
-        handlers={handlers}
       />,
     );
     expect(document.querySelector('.custom-card-class')).toBeInTheDocument();
   });
 
   it('does not render header if hideHeader is true', () => {
-    renderWithProviders(
-      <OrganizationDetailsEditView logic={{ ...logic, hideHeader: true }} handlers={handlers} />,
-    );
+    renderWithProviders(<OrganizationDetailsEditView {...viewProps} hideHeader={true} />);
     expect(screen.queryByRole('banner')).not.toBeInTheDocument();
   });
 
   it('renders with customMessages', () => {
     renderWithProviders(
       <OrganizationDetailsEditView
-        logic={{
-          ...logic,
-          customMessages: {
-            header: { title: 'Custom Title', back_button_text: 'Back' },
-          },
-        }}
-        handlers={handlers}
+        {...viewProps}
+        customMessages={{ header: { title: 'Custom Title', back_button_text: 'Back' } }}
       />,
     );
     expect(screen.getByText(/custom title/i)).toBeInTheDocument();
   });
 
   it('renders loading state when isFetchLoading is true', () => {
-    renderWithProviders(
-      <OrganizationDetailsEditView
-        logic={{ ...logic, isFetchLoading: true }}
-        handlers={handlers}
-      />,
-    );
+    renderWithProviders(<OrganizationDetailsEditView {...viewProps} isFetchLoading={true} />);
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 });

packages/react/src/components/auth0/my-organization/organization-details-edit.tsx

@@ -12,13 +12,11 @@ import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
 import type {
   OrganizationDetailsEditProps,
-  OrganizationDetailsEditLogicProps,
-  OrganizationDetailsEditHandlerProps,
   OrganizationDetailsEditViewProps,
 } from '@/types/my-organization/organization-management/organization-details-edit-types';
 
 /**
- * Internal organization details edit container component.
+ * Organization details edit component.
  * @param props - Component props
  * @param props.schema - Zod validation schema
  * @param props.customMessages - Custom translation messages to override defaults
@@ -31,7 +29,7 @@ import type {
  * @returns JSX element
  * @internal
  */
-function OrganizationDetailsEditContainer(props: OrganizationDetailsEditProps): React.JSX.Element {
+function OrganizationDetailsEdit(props: OrganizationDetailsEditProps): React.JSX.Element {
   const {
     schema,
     customMessages = {},
@@ -53,47 +51,37 @@ function OrganizationDetailsEditContainer(props: OrganizationDetailsEditProps):
     customMessages,
   });
 
-  const orgDetailsEditLogicProps: OrganizationDetailsEditLogicProps = {
-    organization,
-    isFetchLoading,
-    schema,
-    styling,
-    customMessages,
-    readOnly,
-    hideHeader,
-    backButton,
-  };
-
-  const orgDetailsEditHandlerProps: OrganizationDetailsEditHandlerProps = {
-    formActions,
-  };
-
   return (
     <OrganizationDetailsEditView
-      logic={orgDetailsEditLogicProps}
-      handlers={orgDetailsEditHandlerProps}
+      organization={organization}
+      isFetchLoading={isFetchLoading}
+      schema={schema}
+      styling={styling}
+      customMessages={customMessages}
+      readOnly={readOnly}
+      hideHeader={hideHeader}
+      backButton={backButton}
+      formActions={formActions}
     />
   );
 }
 
 /**
- * OrganizationDetailsEditView — Presentational component.
- * @param props - View props with logic and handlers
- * @returns Organization Details Edit view element
  * @internal
+ * @param props - View props
+ * @returns Organization Details Edit view element
  */
-function OrganizationDetailsEditView({ logic, handlers }: OrganizationDetailsEditViewProps) {
-  const {
-    organization,
-    isFetchLoading,
-    schema,
-    styling,
-    customMessages,
-    readOnly,
-    hideHeader,
-    backButton,
-  } = logic;
-  const { formActions } = handlers;
+function OrganizationDetailsEditView({
+  organization,
+  isFetchLoading,
+  schema,
+  styling,
+  customMessages,
+  readOnly,
+  hideHeader,
+  backButton,
+  formActions,
+}: OrganizationDetailsEditViewProps) {
   const { isDarkMode } = useTheme();
   const { t } = useTranslator('organization_management.organization_details_edit', customMessages);
 
@@ -179,6 +167,4 @@ function OrganizationDetailsEditView({ logic, handlers }: OrganizationDetailsEdi
  * />
  * ```
  */
-const OrganizationDetailsEdit = OrganizationDetailsEditContainer;
-
 export { OrganizationDetailsEdit, OrganizationDetailsEditView };

packages/react/src/tests/utils/__mocks__/my-organization/organization-management/organization-details.mocks.ts

@@ -1,9 +1,6 @@
 import type { Organization } from '@auth0/universal-components-core';
 
-import type {
-  OrganizationDetailsEditLogicProps,
-  OrganizationDetailsEditHandlerProps,
-} from '@/types/my-organization/organization-management/organization-details-edit-types';
+import type { OrganizationDetailsEditViewProps } from '@/types/my-organization/organization-management/organization-details-edit-types';
 
 export const createMockOrganization = (): Organization => ({
   id: 'organization_abc123xyz456',
@@ -18,9 +15,9 @@ export const createMockOrganization = (): Organization => ({
   },
 });
 
-export function createMockOrganizationDetailsEditLogic(
-  overrides: Partial<OrganizationDetailsEditLogicProps> = {},
-): OrganizationDetailsEditLogicProps {
+export function createMockOrganizationDetailsEditView(
+  overrides: Partial<OrganizationDetailsEditViewProps> = {},
+): OrganizationDetailsEditViewProps {
   return {
     organization: { ...createMockOrganization() },
     isFetchLoading: false,
@@ -30,14 +27,6 @@ export function createMockOrganizationDetailsEditLogic(
     readOnly: false,
     hideHeader: false,
     backButton: undefined,
-    ...overrides,
-  };
-}
-
-export function createMockOrganizationDetailsEditHandler(
-  overrides: Partial<OrganizationDetailsEditHandlerProps> = {},
-): OrganizationDetailsEditHandlerProps {
-  return {
     formActions: {
       isLoading: false,
       nextAction: {

packages/react/src/types/my-organization/organization-management/organization-details-edit-types.ts

@@ -65,7 +65,7 @@ export interface UseOrganizationDetailsEditResult {
   updateOrgDetails: (data: OrganizationPrivate) => Promise<boolean>;
 }
 
-export interface OrganizationDetailsEditLogicProps {
+export interface OrganizationDetailsEditViewProps {
   organization: OrganizationPrivate;
   isFetchLoading: boolean;
   schema: Partial<OrganizationDetailsEditSchemas> | undefined;
@@ -74,13 +74,5 @@ export interface OrganizationDetailsEditLogicProps {
   readOnly: OrganizationDetailsEditProps['readOnly'];
   hideHeader: boolean;
   backButton?: OrganizationEditBackButton;
-}
-
-export interface OrganizationDetailsEditHandlerProps {
   formActions: OrganizationDetailsFormActions;
 }
-
-export interface OrganizationDetailsEditViewProps {
-  logic: OrganizationDetailsEditLogicProps;
-  handlers: OrganizationDetailsEditHandlerProps;
-}