@availity/mui-spaces 0.2.6 → 0.3.0

package/src/lib/modals/ModalProvider.tsx

@@ -0,0 +1,162 @@
+import React, { createContext, useContext, useReducer } from 'react';
+import { isAbsoluteUrl } from '@availity/resolve-url';
+import { Dialog, DialogTitle, DialogActions } from '@availity/mui-dialog';
+import { Button } from '@availity/mui-button';
+import { getUrl, getTarget, updateUrl } from '../helpers';
+import { updateTopApps } from '../topApps';
+import { DisclaimerModal } from './DisclaimerModal';
+import { MultiPayerModal } from './MultiPayerModal';
+import type {
+  ModalProviderState,
+  ModalState,
+  DisclaimerOnSubmitProps,
+  MultiPayerOnSubmitProps,
+  ModalOptions,
+  ModalTypes,
+  ModalContextType,
+  ModalReducerType,
+} from './modal-types';
+import { isModalOptions, isModalState } from './modal-types';
+
+export const MODAL_INITIAL_STATE = {
+  isOpen: false,
+  modalOptions: undefined,
+  modalState: { selectedOption: { id: '', name: '' } },
+  selectedModal: {},
+};
+
+export const ModalContext = createContext<ModalContextType | null>(null);
+
+export const useModal = () => {
+  const ctx = useContext(ModalContext);
+  if (!ctx) throw new Error('ModalContext be used inside a Provider');
+  return ctx;
+};
+
+export const MODAL_TYPES = {
+  DISCLAIMER: {
+    body: DisclaimerModal,
+    buttonProps: () => ({
+      children: 'Accept',
+    }),
+    onSubmit: ({ link, id: spaceId }: DisclaimerOnSubmitProps) => {
+      window.open(link.url?.[0] === '/' ? updateUrl(link.url, 'spaceId', spaceId) : link.url, link.target);
+    },
+  },
+  MULTI_PAYER: {
+    body: MultiPayerModal,
+    buttonProps: ({ selectedOption }: ModalState) => ({
+      children: 'Continue',
+      disabled: selectedOption === undefined,
+    }),
+    onSubmit: (
+      { metadata, link, id: spaceId, name }: MultiPayerOnSubmitProps,
+      modalState: ModalState,
+      dispatch: React.Dispatch<{ [x: string]: any; type: any }>
+    ) => {
+      if (metadata?.disclaimerId) {
+        dispatch({ type: 'OPEN_DISCLAIMER_MODAL', disclaimerId: metadata.disclaimerId, link, id: spaceId, name });
+        return;
+      }
+
+      const target = getTarget(link.target);
+
+      if (link.url) {
+        window.open(
+          !isAbsoluteUrl(link.url)
+            ? getUrl(updateUrl(link.url, 'spaceId', modalState.selectedOption.id), false, false)
+            : link.url,
+          target
+        );
+      }
+    },
+  },
+};
+
+export const modalActions = {
+  RESET: (): ModalProviderState => MODAL_INITIAL_STATE,
+  OPEN_DISCLAIMER_MODAL: (state: ModalProviderState, modalOptions: ModalOptions): ModalProviderState => ({
+    ...state,
+    isOpen: true,
+    selectedModal: MODAL_TYPES.DISCLAIMER,
+    modalOptions: { ...modalOptions, type: modalOptions.spaceType },
+  }),
+  OPEN_MULTI_PAYER_MODAL: (state: ModalProviderState, modalOptions: ModalOptions): ModalProviderState => ({
+    ...state,
+    isOpen: true,
+    selectedModal: MODAL_TYPES.MULTI_PAYER,
+    modalOptions: {
+      ...modalOptions,
+      type: modalOptions.spaceType,
+    },
+  }),
+  UPDATE_MODAL_STATE: (state: ModalProviderState, modalState: ModalState): ModalProviderState => ({
+    ...state,
+    modalState,
+  }),
+};
+
+export const modalReducer: ModalReducerType = (state, { type, ...action }) => {
+  if (type === 'RESET') return modalActions.RESET();
+  if (isModalOptions(action)) {
+    if (type === 'OPEN_MULTI_PAYER_MODAL') return modalActions.OPEN_MULTI_PAYER_MODAL(state, action);
+    else if (type === 'OPEN_DISCLAIMER_MODAL') return modalActions.OPEN_DISCLAIMER_MODAL(state, action);
+  } else if (isModalState(action)) {
+    if (type === 'UPDATE_MODAL_STATE') return modalActions.UPDATE_MODAL_STATE(state, action);
+  }
+  return state;
+};
+
+export const ModalProvider = ({ children }: { children?: React.ReactNode }) => {
+  const [{ selectedModal, modalOptions, modalState, isOpen }, dispatch] = useReducer(modalReducer, MODAL_INITIAL_STATE);
+
+  const toggle = () => dispatch({ type: 'RESET' });
+
+  const buttonProps = selectedModal?.buttonProps && selectedModal?.buttonProps({ ...modalState, modalOptions });
+
+  const Body = selectedModal?.body;
+
+  return (
+    <ModalContext.Provider
+      value={(modalType: ModalTypes, modalOptions: ModalOptions) =>
+        dispatch({ type: `OPEN_${modalType}`, ...modalOptions })
+      }
+    >
+      <Dialog open={isOpen}>
+        <DialogTitle id="disclaimer-header">{modalOptions?.title}</DialogTitle>
+        {Body && (
+          <Body
+            {...modalOptions}
+            setState={(newState: ModalState) => dispatch({ type: 'UPDATE_MODAL_STATE', ...newState })}
+            state={modalState}
+          />
+        )}
+        <DialogActions>
+          <Button onClick={toggle}>Cancel</Button>
+          <Button
+            color="primary"
+            {...buttonProps}
+            onClick={() => {
+              if (selectedModal?.onSubmit && modalOptions && modalState) {
+                selectedModal.onSubmit(modalOptions, modalState, dispatch);
+              }
+              if (modalOptions) {
+                updateTopApps(
+                  {
+                    configurationId: modalOptions.id,
+                    type: modalOptions.type,
+                    name: modalOptions.name,
+                    id: modalOptions.id,
+                  },
+                  modalOptions.user
+                );
+              }
+              toggle();
+            }}
+          />
+        </DialogActions>
+      </Dialog>
+      {children}
+    </ModalContext.Provider>
+  );
+};

package/src/lib/modals/MultiPayerModal.test.tsx

@@ -0,0 +1,61 @@
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from '../Spaces';
+import { SpacesLink } from '../SpacesLink/SpacesLink';
+
+const parentSpace2 = {
+  type: 'space',
+  name: 'parent space 2',
+  id: '2',
+  configurationId: '2',
+  images: {
+    tile: '/spaces/tile.jpg',
+  },
+};
+
+const parentSpace3 = {
+  type: 'space',
+  name: 'parent space 3',
+  id: '3',
+  configurationId: '3',
+  images: {
+    tile: '/spaces/tile.jpg',
+  },
+};
+
+const space = {
+  id: 'multipayermodal',
+  configurationId: 'multipayermodal',
+  name: 'Some Application',
+  type: 'space',
+  parents: [parentSpace2, parentSpace3],
+  link: {
+    url: '/some-url',
+    target: 'newBody',
+  },
+};
+
+const MultiPayerModal = () => {
+  const queryClient = new QueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Spaces spaces={[space, parentSpace2, parentSpace3]} clientId="my-client-id">
+        <SpacesLink spaceId="multipayermodal" clientId="my-client-id" />
+      </Spaces>
+    </QueryClientProvider>
+  );
+};
+
+describe('MultiPayerModal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('renders modal when space has payerspace parents', async () => {
+    const { getByText } = render(<MultiPayerModal />);
+
+    const link = await waitFor(() => getByText('Some Application'));
+    fireEvent.click(link);
+
+    await waitFor(() => expect(getByText('Open Some Application as:')).toBeDefined());
+  });
+});

package/src/lib/modals/MultiPayerModal.tsx

@@ -0,0 +1,19 @@
+import { DialogContent } from '@availity/mui-dialog';
+import { Grid, Box } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import { SpacesImage } from '../SpacesImage';
+import { ModalProps } from './modal-types';
+
+export const MultiPayerModal = ({ parentPayerSpaces, name, state: { selectedOption }, setState }: ModalProps) => (
+  <DialogContent>
+    <Typography>{`Open ${name} as: ${selectedOption ? selectedOption.name || selectedOption.id : ''}`}</Typography>
+    <Grid direction="row">
+      {parentPayerSpaces &&
+        parentPayerSpaces.map((payerSpace) => (
+          <Box onClick={() => setState({ selectedOption: payerSpace })}>
+            <SpacesImage spaceId={payerSpace.configurationId} imageType="images.tile" />
+          </Box>
+        ))}
+    </Grid>
+  </DialogContent>
+);

package/src/lib/modals/modal-types.tsx

@@ -0,0 +1,91 @@
+import { Link, Space } from '../spaces-types';
+
+export type ModalTypes = 'DISCLAIMER_MODAL' | 'MULTI_PAYER_MODAL';
+
+type MetadataKeys = 'disclaimerId' | string;
+
+type Metadata = Record<MetadataKeys, string>;
+
+export type ModalProps = {
+  disclaimerId?: string;
+  parentPayerSpaces?: Space[];
+  name?: string;
+  state?: any;
+  setState?: any;
+};
+
+export type ModalOptions = {
+  disclaimerId?: string;
+  description?: string;
+  parentPayerSpaces?: Space[];
+  metadata?: Metadata;
+  id: string;
+  name: string;
+  user: any;
+  spaceType: string;
+  title: string;
+  link: Link;
+};
+
+export type DisclaimerOnSubmitProps = {
+  link: Link;
+  id: string;
+};
+
+export type MultiPayerOnSubmitProps = {
+  metadata?: Metadata;
+  link: Link;
+  id: string;
+  name: string;
+};
+
+type NormalizedModalOptions = {
+  type: string;
+} & ModalOptions;
+
+export type ModalState = {
+  selectedOption: {
+    id: string;
+    name: string;
+  };
+};
+
+export type ModalProviderState = {
+  isOpen: boolean;
+  modalOptions?: NormalizedModalOptions;
+  modalState: ModalState;
+  selectedModal?: {
+    body?:
+      | (({ disclaimerId }: ModalProps) => JSX.Element)
+      | (({ parentPayerSpaces, name, state: { selectedOption }, setState }: ModalProps) => JSX.Element);
+    onSubmit?: (
+      props: ModalOptions,
+      modalState: ModalState,
+      dispatch: React.Dispatch<ModalAction | (ModalAction & ModalOptions) | (ModalAction & ModalProviderState)>
+    ) => void;
+    buttonProps?: (prop: object) => object;
+  };
+};
+
+export type ModalActions = 'RESET' | 'OPEN_DISCLAIMER_MODAL' | 'OPEN_MULTI_PAYER_MODAL' | 'UPDATE_MODAL_STATE';
+
+type ModalAction = {
+  type: ModalActions;
+};
+
+export type ModalContextType = {
+  (modalType: ModalTypes, modalOptions: ModalOptions): void;
+};
+
+export type ModalReducerType = (
+  state: ModalProviderState,
+  { type, ...action }: ModalAction | (ModalAction & ModalOptions) | (ModalAction & ModalProviderState)
+) => ModalProviderState;
+
+// type guards: https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
+export const isModalOptions = (
+  action: ModalOptions | ModalProviderState | Record<string, any>
+): action is ModalOptions => (action as ModalOptions).spaceType !== undefined;
+
+export const isModalState = (action: ModalOptions | ModalState | Record<string, any>): action is ModalState =>
+  (action as ModalState).selectedOption !== undefined;

package/src/lib/spaces-data.test.tsx

@@ -21,16 +21,21 @@ afterAll(() => {
 
 describe('getAllSpaces', () => {
   it('gets all spaces', async () => {
+    let apiCalls = 0;
+    server.events.on('request:start', () => (apiCalls += 1));
+
     const spaces = await fetchAllSpaces({
       query: configurationFindMany,
       clientId: 'clientId',
       variables: {
         types: ['space'],
+        perPage: 10,
       },
     });
     // Check correct spaces get returned
-    expect(spaces.length).toBe(10);
-    expect(spaces[0].id).toBe('1');
-    expect(spaces[spaces.length - 1].id).toBe('10');
+    expect(spaces.length).toBe(20);
+
+    // Check that it took 2 calls to return all 18
+    expect(apiCalls).toBe(2);
   });
 });

package/src/lib/spaces-types.tsx

@@ -1,8 +1,11 @@
+import { SsoTypeSpace } from './SpacesLink/spaces-link-types';
+
 export type Link = {
   /** Contains a URL or URL Fragment that the hyperlink points to. */
-  url: string;
+  url?: string;
   /** Specifies where to open the linked URL. */
-  target: string;
+  target?: string;
+  text?: string;
 };
 
 export type NameValuePair = {
@@ -45,16 +48,15 @@ export type Space = {
   mapping?: Record<string, string>;
   mappingPairs?: NameValuePair[];
   /** Whether or not the space is ghosted */
-  isGhost?: boolean;
-  link?: {
-    /** Contains a URL or URL Fragment that the hyperlink points to. */
-    url: string;
-    /** Specifies where to open the linked URL. */
-    target: string;
-  };
+  isGhosted?: boolean;
+  link?: Link;
   /** The description of the configuration. */
   description?: string;
   url?: string;
+  parents?: Space[];
+  shortName?: string;
+  activeDate?: string;
+  isNew?: boolean;
 };
 
 export type FetchSpacesProps = {
@@ -74,14 +76,14 @@ export type FetchAllSpacesProps = {
   /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
   clientId: string;
   /** The variables sent to the avWebQL endpoint. */
-  variables?: object;
+  variables?: Record<string, any>;
   /** Array of spaces to be passed into the Spaces provider. */
   _spaces?: Space[];
 };
 
 export type SpacesContextType = {
   /** Array of spaces to be passed into the Spaces provider. */
-  spaces?: Map<string, Space>;
+  spaces?: Map<string, Space | SsoTypeSpace>;
   /** Array of spaces from previous page load. */
   previousSpacesMap?: Map<string, Space>;
   /** Array of spaces organized by configurationId. */
@@ -119,7 +121,7 @@ export type SpacesProps = {
   /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
   clientId: string;
   /** Children can be a react child or render prop. */
-  children?: React.ReactNode;
+  children?: React.ReactNode | ((props: any | undefined) => React.ReactNode);
   /** Array of payerIds the Spaces provider should fetch the spaces for.
    * Any payerIds already included in spaces will not be fetched again.
    * Note: If a payerId is associated with more than one payer space, the order in which they are returned should not be relied upon.
@@ -132,3 +134,5 @@ export type SpacesProps = {
    * Useful for if you already have the spaces in your app and don't want the spaces provider to have to fetch them again. */
   spaces?: Space[];
 };
+
+export type UseSpaces = (...ids: string[]) => (Space | SsoTypeSpace)[] | undefined;