@aws-amplify/ui-react-native 0.0.0-in-app-messaging-20220826014803

package/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Modal, ModalPropsIOS } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+import { styles } from './styles';
+import { MessageWrapperProps } from './types';
+
+const SUPPORTED_ORIENTATIONS: ModalPropsIOS['supportedOrientations'] = [
+  'portrait',
+  'portrait-upside-down',
+  'landscape',
+  'landscape-left',
+  'landscape-right',
+];
+
+export default function MessageWrapper({
+  children,
+  disableSafeAreaView,
+  style,
+}: MessageWrapperProps): JSX.Element {
+  return (
+    <Modal transparent visible supportedOrientations={SUPPORTED_ORIENTATIONS}>
+      <SafeAreaProvider>
+        {disableSafeAreaView ? (
+          children
+        ) : (
+          <SafeAreaView style={[styles.messageWrapper, style]}>
+            {children}
+          </SafeAreaView>
+        )}
+      </SafeAreaProvider>
+    </Modal>
+  );
+}

package/src/InAppMessaging/components/MessageWrapper/__tests__/MessageWrapper.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { Text } from 'react-native';
+
+import MessageWrapper from '../MessageWrapper';
+
+const Children = () => <Text>Children</Text>;
+
+describe('MessageWrapper', () => {
+  it('renders as expected', () => {
+    const renderer = TestRenderer.create(
+      <MessageWrapper>
+        <Children />
+      </MessageWrapper>
+    );
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+});

package/src/InAppMessaging/components/MessageWrapper/__tests__/__snapshots__/MessageWrapper.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageWrapper renders as expected 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  supportedOrientations={
+    Array [
+      "portrait",
+      "portrait-upside-down",
+      "landscape",
+      "landscape-left",
+      "landscape-right",
+    ]
+  }
+  transparent={true}
+  visible={true}
+>
+  <SafeAreaProvider>
+    <SafeAreaView
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text>
+        Children
+      </Text>
+    </SafeAreaView>
+  </SafeAreaProvider>
+</Modal>
+`;

package/src/InAppMessaging/components/MessageWrapper/index.ts

@@ -0,0 +1,2 @@
+export { default as MessageWrapper } from './MessageWrapper';
+export { MessageWrapperProps, MessageWrapperStyle } from './types';

package/src/InAppMessaging/components/MessageWrapper/styles.ts

@@ -0,0 +1,7 @@
+import { MessageWrapperStyle } from './types';
+
+export const styles: MessageWrapperStyle = {
+  messageWrapper: {
+    flex: 1,
+  },
+};

package/src/InAppMessaging/components/MessageWrapper/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface MessageWrapperProps {
+  children: ReactNode;
+  disableSafeAreaView?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface MessageWrapperStyle {
+  messageWrapper: ViewStyle;
+}

package/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useDeviceOrientation } from '../../../hooks';
+import { useMessageProps } from '../../hooks';
+import { MessageLayout } from '../MessageLayout';
+import { MessageWrapper } from '../MessageWrapper';
+
+import { getLandscapeStyles, getPortraitStyles } from './styles';
+import { ModalMessageProps } from './types';
+
+export default function ModalMessage(
+  props: ModalMessageProps
+): JSX.Element | null {
+  const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
+  const messageProps = useMessageProps(
+    props,
+    isPortraitMode ? getPortraitStyles : getLandscapeStyles
+  );
+  const { shouldRenderMessage, styles } = messageProps;
+
+  if (!shouldRenderMessage) {
+    return null;
+  }
+
+  const { wrapper, ...messageStyles } = styles!;
+
+  return (
+    <MessageWrapper style={wrapper}>
+      <MessageLayout
+        {...props}
+        {...messageProps}
+        orientation={deviceOrientation}
+        styles={messageStyles}
+      />
+    </MessageWrapper>
+  );
+}

package/src/InAppMessaging/components/ModalMessage/__tests__/ModalMessage.spec.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
+import { useDeviceOrientation } from '../../../../hooks';
+import { useMessageImage } from '../../../hooks';
+
+import ModalMessage from '../ModalMessage';
+
+jest.mock('../../../../hooks');
+jest.mock('../../../hooks/useMessageImage');
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+
+const mockUseMessageImage = useMessageImage as jest.Mock;
+const onAction = jest.fn();
+const onClose = jest.fn();
+
+const baseProps = { layout: 'MODAL' as const, onClose };
+
+describe('ModalMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    ['landscape', false],
+    ['portrait', true],
+  ])('renders as expected in %s mode', (deviceOrientation, isPortraitMode) => {
+    (useDeviceOrientation as jest.Mock).mockReturnValue({
+      deviceOrientation,
+      isPortraitMode,
+    });
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a message as expected with an image', () => {
+    (useDeviceOrientation as jest.Mock).mockReturnValue({
+      deviceOrientation: 'portrait',
+      isPortraitMode: true,
+    });
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: true,
+      imageDimensions: { height: 100, width: 100 },
+      isImageFetching: false,
+    });
+
+    const src = 'asset.png';
+    const props = { ...baseProps, image: { src } };
+
+    const renderer = TestRenderer.create(<ModalMessage {...props} />);
+
+    const image = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.IMAGE,
+    });
+
+    expect(image.props).toEqual(
+      expect.objectContaining({ source: { uri: src } })
+    );
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('returns null while an image is fetching', () => {
+    (useDeviceOrientation as jest.Mock).mockReturnValue({
+      deviceOrientation: 'portrait',
+      isPortraitMode: true,
+    });
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: true,
+    });
+
+    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toBeNull();
+  });
+
+  it.each([
+    [
+      'header',
+      IN_APP_MESSAGING_TEST_ID.HEADER,
+      {
+        testProps: { content: 'header content' },
+        expectedProps: { children: 'header content' },
+      },
+    ],
+    [
+      'body',
+      IN_APP_MESSAGING_TEST_ID.BODY,
+      {
+        testProps: { content: 'body content' },
+        expectedProps: { children: 'body content' },
+      },
+    ],
+    [
+      'primaryButton',
+      IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON,
+      {
+        testProps: { onAction, title: 'primary button' },
+        expectedProps: { children: 'primary button', onPress: onAction },
+      },
+    ],
+    [
+      'secondaryButton',
+      IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON,
+      {
+        testProps: { onAction, title: 'secondary button' },
+        expectedProps: { children: 'secondary button', onPress: onAction },
+      },
+    ],
+  ])(
+    'correctly handles a %s prop',
+    (key, testID, { testProps, expectedProps }) => {
+      mockUseMessageImage.mockReturnValueOnce({
+        hasRenderableImage: false,
+        imageDimensions: { height: null, width: null },
+        isImageFetching: false,
+      });
+
+      const props = { ...baseProps, [key]: testProps };
+
+      const renderer = TestRenderer.create(<ModalMessage {...props} />);
+      const testElement = renderer.root.findByProps({ testID });
+
+      expect(testElement.props).toEqual(expect.objectContaining(expectedProps));
+    }
+  );
+
+  it('calls onClose when the close button is pressed', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
+    const closeButton = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON,
+    });
+
+    TestRenderer.act(() => {
+      (closeButton.props as { onPress: () => void }).onPress();
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/InAppMessaging/components/ModalMessage/__tests__/__snapshots__/ModalMessage.spec.tsx.snap

@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalMessage renders a message as expected with an image 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "minHeight": "40%",
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginLeft": "auto",
+            },
+            undefined,
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          source={
+            Object {
+              "testUri": "../../../src/assets/close.png",
+            }
+          }
+          style={
+            Object {
+              "height": 20,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 20,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "margin": 12,
+          }
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": "asset.png",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "height": 100,
+                "width": 100,
+              },
+              undefined,
+            ]
+          }
+          testID="in-app-messaging--image"
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      />
+    </View>
+  </View>
+</MessageWrapper>
+`;
+
+exports[`ModalMessage renders as expected in landscape mode 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "flex": 1,
+          "margin": 16,
+          "padding": 16,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingHorizontal": 8,
+          }
+        }
+      />
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginLeft": "auto",
+              "marginRight": 8,
+            },
+            undefined,
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          source={
+            Object {
+              "testUri": "../../../src/assets/close.png",
+            }
+          }
+          style={
+            Object {
+              "height": 20,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 20,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</MessageWrapper>
+`;
+
+exports[`ModalMessage renders as expected in portrait mode 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "minHeight": "40%",
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginLeft": "auto",
+            },
+            undefined,
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          source={
+            Object {
+              "testUri": "../../../src/assets/close.png",
+            }
+          }
+          style={
+            Object {
+              "height": 20,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 20,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      />
+    </View>
+  </View>
+</MessageWrapper>
+`;

package/src/InAppMessaging/components/ModalMessage/index.ts

@@ -0,0 +1,2 @@
+export { default as ModalMessage } from './ModalMessage';
+export { ModalMessageProps } from './types';