Add Site Optios base screen

login-workflow/docs/screens/site-options.md

@@ -0,0 +1,31 @@
+# SiteOptionsScreen
+
+A component to use for DERMS Auth workflow. It renders a message, an icon, and two buttons named `Create a New Organization` and `Join Existing Organization`.
+
+<!-- TODO: This needs to be updatd in Full screen story -->
+<!-- ![SiteOption](../../media/screens/success.png)
+
+## Usage
+
+```tsx
+import { SiteOptionsScreenBase } from '@brightlayer-ui/react-auth-workflow';
+
+...
+
+<SiteOptionsScreen  /> -->
+```
+
+## API
+
+| Prop Name | Type | Description | Default |
+|---|---|---|---|
+| icon | `React.ReactNode` | The icon to be displayed on the screen. |  |
+| messageTitle | `string` | The title of the success message. |  |
+| message | `ReactNode` | The success message to be displayed on the screen. |  |
+| previousButtonLabel | `string` | The label of the previous button. |  |
+| nextButtonLabel | `string` | The label of the previous button. |  |
+| onCreateNewOrganization | `() => void` | A function to be called when the previous button is clicked. |  |
+| onJoinExistingOrganization | `() => void` | A function to be called when the next button is clicked. |  |
+
+This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](../components/workflow-card.md) for more details.
+

login-workflow/docs/screens/success.md

@@ -19,8 +19,7 @@ import { SuccessScreenBase } from '@brightlayer-ui/react-auth-workflow';
 | Prop Name | Type | Description | Default |
 |---|---|---|---|
 | icon | `React.ReactNode` | The icon to be displayed on the screen. |  |
-| messageTitle | `string` | The title of the success message. |  |
-| message | `ReactNode` | The success message to be displayed on the screen. |  |
+| message | `ReactNode` | The message to be displayed on the screen. |  |
 | dismissButtonLabel | `string` | The label of the dismiss button. |  |
 | canDismiss | `boolean` | A boolean determining if the screen can be dismissed. |  |
 | onDismiss | `() => void` | A function to be called when the screen is dismissed. |  |

login-workflow/src/screens/SiteOptionsScreen/SiteOptionsScreenBase.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { SiteOptionsScreenBase } from './SiteOptionsScreenBase';
+import ChatBubbleOutline from '@mui/icons-material/ChatBubbleOutline';
+
+afterEach(cleanup);
+
+describe('Forgot Password Screen Base', () => {
+    it('renders without crashing', () => {
+        render(
+            <SiteOptionsScreenBase
+                icon={<ChatBubbleOutline color={'primary'} sx={{ fontSize: 70 }} />}
+                message={`Now that you've specified your account details, you need to add your Organization details.`}
+                WorkflowCardHeaderProps={{ title: 'Join an Organization' }}
+                WorkflowCardActionsProps={{
+                    showNext: true,
+                    nextLabel: 'Join Existing Organization',
+                    canGoNext: true,
+                    showPrevious: true,
+                    previousLabel: 'Create a New Organization',
+                    canGoPrevious: true,
+                }}
+            />
+        );
+        expect(screen.getByText('Join an Organization')).toBeInTheDocument();
+        expect(screen.getByText('Join Existing Organization')).toBeInTheDocument();
+        expect(screen.getByText(/Join Existing Organization/i)).toBeEnabled();
+        expect(screen.getByText('Create a New Organization')).toBeInTheDocument();
+        expect(screen.getByText(/Create a New Organization/i)).toBeEnabled();
+    });
+});

login-workflow/src/screens/SiteOptionsScreen/SiteOptionsScreenBase.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { SiteOptionsScreenProps } from './types';
+import {
+    WorkflowCard,
+    WorkflowCardHeader,
+    WorkflowCardBody,
+    WorkflowCardInstructions,
+    WorkflowCardActions,
+} from '../../components';
+import Box from '@mui/material/Box';
+/**
+ * Component that renders a success screen
+ *
+ * @param icon the icon to be displayed on the screen
+ * @param message success message to be displayed on the screen
+ * @param nextButtonLabel to display label for the next button
+ * @param previousButtonLabel to display label for the previous button
+ * @param onJoinExistingOrganization function to call when user wants to join existing organization
+ * @param onCreateNewOrganization function to call when user wants to create a new  organization
+ * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component
+ * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component
+ * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
+ * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
+ *
+ * @category Component
+ */
+
+export const SiteOptionsScreenBase: React.FC<React.PropsWithChildren<SiteOptionsScreenProps>> = (props) => {
+    const {
+        icon,
+        message = '',
+        nextButtonLabel = '',
+        previousButtonLabel = '',
+        onJoinExistingOrganization,
+        onCreateNewOrganization,
+    } = props;
+    const cardBaseProps = props.WorkflowCardBaseProps || {};
+    const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
+    const actionsProps = props.WorkflowCardActionsProps || {};
+    return (
+        <WorkflowCard {...cardBaseProps}>
+            <WorkflowCardHeader {...headerProps} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
+            <WorkflowCardBody>
+                {icon && <Box sx={{ m: 3, mb: 5, textAlign: 'center' }}>{icon}</Box>}
+                {message && <Box>{message}</Box>}
+            </WorkflowCardBody>
+            <WorkflowCardActions
+                {...actionsProps}
+                nextLabel={nextButtonLabel || actionsProps.nextLabel}
+                previousLabel={previousButtonLabel || actionsProps.previousLabel}
+                onNext={(): void => {
+                    if (onJoinExistingOrganization) onJoinExistingOrganization();
+                    if (actionsProps.onNext) actionsProps.onNext();
+                }}
+                onPrevious={(): void => {
+                    if (onCreateNewOrganization) onCreateNewOrganization();
+                    if (actionsProps.onPrevious) actionsProps.onPrevious();
+                }}
+            />
+        </WorkflowCard>
+    );
+};

login-workflow/src/screens/SiteOptionsScreen/index.ts

@@ -0,0 +1,2 @@
+export * from './SiteOptionsScreenBase';
+export * from './types';

login-workflow/src/screens/SiteOptionsScreen/types.ts

@@ -0,0 +1,42 @@
+import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';
+import { ErrorManagerProps } from '../../components/Error';
+import { ReactNode } from 'react';
+
+export type SiteOptionsScreenProps = WorkflowCardProps & {
+    /**
+     * The icon to display in the header
+     */
+    icon?: JSX.Element;
+
+    /**
+     * The success message to be displayed on the screen
+     */
+    message?: ReactNode;
+
+    /**
+     * To display label for the next button
+     */
+    nextButtonLabel?: string;
+
+    /**
+     * To display label for the previous button
+     */
+    previousButtonLabel?: string;
+
+    /**
+     * The function to call when user wants to join existing organization
+     * @returns void
+     */
+    onJoinExistingOrganization?: () => void;
+
+    /**
+     * The function to call when user wants to create a new  organization
+     * @returns void
+     */
+    onCreateNewOrganization?: () => void;
+
+    /**
+     * The configuration for customizing how errors are displayed
+     */
+    errorDisplayConfig?: ErrorManagerProps;
+};

login-workflow/src/screens/index.ts

@@ -13,3 +13,4 @@ export * from './ForgotPasswordScreen';
 export * from './ContactScreen';
 export * from './RegistrationSuccessScreen';
 export * from './ExistingAccountSuccessScreen';
+export * from './SiteOptionsScreen';