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

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

@@ -0,0 +1,132 @@
+import { ImageStyle, StyleSheet } from 'react-native';
+import {
+  BORDER_RADIUS_BASE,
+  COLOR_BLACK,
+  COLOR_LIGHT_GREY,
+  COLOR_WHITE,
+  FONT_SIZE_BASE,
+  FONT_SIZE_LARGE,
+  FONT_WEIGHT_BASE,
+  LINE_HEIGHT_BASE,
+  LINE_HEIGHT_LARGE,
+  MESSAGE_ELEVATION,
+  MESSAGE_SHADOW_HEIGHT,
+  MESSAGE_SHADOW_OPACITY,
+  MESSAGE_SHADOW_RADIUS,
+  MESSAGE_SHADOW_WIDTH,
+  SPACING_EXTRA_LARGE,
+  SPACING_LARGE,
+  SPACING_MEDIUM,
+  SPACING_SMALL,
+} from '../../constants';
+
+import { ModalMessageStyle } from './types';
+
+const commonStyles: Omit<
+  ModalMessageStyle,
+  'contentContainer' | 'image' | 'textContainer'
+> = {
+  body: {
+    fontSize: FONT_SIZE_BASE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_BASE,
+  },
+  buttonContainer: {
+    backgroundColor: COLOR_LIGHT_GREY,
+    borderRadius: BORDER_RADIUS_BASE,
+    flex: 1,
+    margin: SPACING_MEDIUM,
+    padding: SPACING_LARGE,
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  container: {
+    backgroundColor: COLOR_WHITE,
+    elevation: MESSAGE_ELEVATION,
+    margin: SPACING_EXTRA_LARGE,
+    shadowColor: COLOR_BLACK,
+    shadowOffset: {
+      width: MESSAGE_SHADOW_WIDTH,
+      height: MESSAGE_SHADOW_HEIGHT,
+    },
+    shadowOpacity: MESSAGE_SHADOW_OPACITY,
+    shadowRadius: MESSAGE_SHADOW_RADIUS,
+  },
+  buttonText: {
+    fontSize: FONT_SIZE_BASE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_BASE,
+    textAlign: 'center',
+  },
+  header: {
+    fontSize: FONT_SIZE_LARGE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_LARGE,
+  },
+  iconButton: {
+    alignSelf: 'flex-start',
+    marginLeft: 'auto',
+  },
+  imageContainer: {
+    alignItems: 'center',
+    margin: SPACING_LARGE,
+  },
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+};
+
+export const getPortraitStyles = (
+  imageDimensions: ImageStyle
+): ModalMessageStyle =>
+  StyleSheet.create({
+    ...commonStyles,
+    buttonsContainer: {
+      ...commonStyles.buttonsContainer,
+      marginTop: 'auto',
+      paddingHorizontal: SPACING_SMALL,
+      paddingBottom: SPACING_SMALL,
+    },
+    container: {
+      ...commonStyles.container,
+      minHeight: '40%',
+    },
+    contentContainer: { padding: SPACING_LARGE },
+    image: { ...imageDimensions },
+    textContainer: {
+      marginTop: SPACING_LARGE,
+    },
+  });
+
+export const getLandscapeStyles = (
+  imageDimensions: ImageStyle
+): ModalMessageStyle =>
+  StyleSheet.create({
+    ...commonStyles,
+    container: {
+      ...commonStyles.container,
+      flex: 1,
+      padding: SPACING_EXTRA_LARGE,
+    },
+    contentContainer: {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    iconButton: {
+      ...commonStyles.iconButton,
+      marginRight: SPACING_MEDIUM,
+    },
+    image: { ...imageDimensions },
+    imageContainer: {
+      ...commonStyles.imageContainer,
+      justifyContent: 'center',
+    },
+    textContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      paddingHorizontal: SPACING_MEDIUM,
+    },
+  });

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

@@ -0,0 +1,8 @@
+import { ModalMessageCommonProps } from '@aws-amplify/ui-react-core';
+
+import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
+
+export interface ModalMessageProps
+  extends ModalMessageCommonProps<MessageOverrideStyle | undefined> {}
+
+export interface ModalMessageStyle extends MessageDefaultStyle {}

package/src/InAppMessaging/components/index.ts

@@ -0,0 +1,6 @@
+export { BannerMessageProps } from './BannerMessage';
+export { CarouselMessageProps } from './CarouselMessage';
+export { FullScreenMessageProps } from './FullScreenMessage';
+export { InAppMessageDisplay, MessageComponents } from './InAppMessageDisplay';
+export { ModalMessageProps } from './ModalMessage';
+export { withInAppMessaging } from './withInAppMessaging';

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withInAppMessaging renders as expected 1`] = `"example"`;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import withInAppMessaging from '../withInAppMessaging';
+
+const TestComponent = ({ title }: { title: string }) => <>{title}</>;
+
+describe('withInAppMessaging', () => {
+  it('renders as expected', () => {
+    const WrappedComponent = withInAppMessaging(TestComponent);
+    const output = TestRenderer.create(<WrappedComponent title="example" />);
+
+    expect(output.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1 @@
+export { default as withInAppMessaging } from './withInAppMessaging';

package/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InAppMessagingProvider } from '@aws-amplify/ui-react-core';
+
+import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
+
+export default function withInAppMessaging<Props>(
+  Component: (props: Props) => JSX.Element,
+  options?: { components?: MessageComponents }
+): (props: Props) => JSX.Element {
+  return function WrappedWithInAppMessaging(props: Props) {
+    return (
+      <InAppMessagingProvider>
+        <InAppMessageDisplay {...options} />
+        <Component {...props} />
+      </InAppMessagingProvider>
+    );
+  };
+}

package/src/InAppMessaging/constants.ts

@@ -0,0 +1,56 @@
+import { getLineHeight } from '../utils';
+
+// color
+export const COLOR_BLACK = '#000';
+export const COLOR_GREY = '#a1a1a1';
+export const COLOR_LIGHT_GREY = '#e8e8e8';
+export const COLOR_LIGHT_GREY_2 = '#d8d8d8';
+export const COLOR_WHITE = '#fff';
+
+// spacing
+export const SPACING_SMALL = 4;
+export const SPACING_MEDIUM = 8;
+export const SPACING_LARGE = 12;
+export const SPACING_EXTRA_LARGE = 16;
+
+// border radius
+export const BORDER_RADIUS_BASE = 4;
+
+// font
+export const FONT_SIZE_BASE = 16;
+export const FONT_SIZE_LARGE = 18;
+
+export const LINE_HEIGHT_BASE = getLineHeight(FONT_SIZE_BASE);
+export const LINE_HEIGHT_LARGE = getLineHeight(FONT_SIZE_LARGE);
+
+export const FONT_WEIGHT_BASE = '400';
+
+// icon
+export const ICON_BUTTON_SIZE = 20;
+export const ICON_BUTTON_HIT_SLOP = 10;
+
+// shadow properties
+
+// iOS shadow values
+export const MESSAGE_SHADOW_HEIGHT = 2;
+export const MESSAGE_SHADOW_WIDTH = 2;
+export const MESSAGE_SHADOW_OPACITY = 0.1;
+export const MESSAGE_SHADOW_RADIUS = 2;
+
+// android shadow values
+export const MESSAGE_ELEVATION = 3;
+
+// Message UI Buttons
+
+// default value applied in React Native TouchableOpacity
+export const BUTTON_PRESSED_OPACITY = 0.8;
+
+// Message Component Test IDs
+export const IN_APP_MESSAGING_TEST_ID = {
+  BODY: 'in-app-messaging--body',
+  CLOSE_BUTTON: 'in-app-messaging--close-button',
+  HEADER: 'in-app-messaging--header',
+  IMAGE: 'in-app-messaging--image',
+  PRIMARY_BUTTON: 'in-app-messaging--primary-button',
+  SECONDARY_BUTTON: 'in-app-messaging--secondary-button',
+};

package/src/InAppMessaging/hooks/index.ts

@@ -0,0 +1,9 @@
+export { ImageDimensions, useMessageImage } from './useMessageImage';
+export {
+  GetDefaultStyle,
+  MessageComponentStyles,
+  MessageDefaultStyle,
+  MessageOverrideStyle,
+  useMessageProps,
+  UseMessageProps,
+} from './useMessageProps';

package/src/InAppMessaging/hooks/useMessageImage/__tests__/useMessageImage.spec.ts

@@ -0,0 +1,141 @@
+import { Image } from 'react-native';
+import { renderHook } from '@testing-library/react-hooks';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { MessageImage } from '@aws-amplify/ui-react-core';
+
+import { getLayoutImageDimensions, prefetchNetworkImage } from '../utils';
+import useMessageImage from '../useMessageImage';
+
+jest.mock('react-native', () => ({
+  Dimensions: { get: jest.fn(() => ({ height: 844, width: 400 })) },
+  Image: { getSize: jest.fn() },
+}));
+jest.mock('../utils');
+
+// use empty mockImplementation to turn off console output
+const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
+
+const src = 'https://test.jpeg';
+const image = { src };
+
+describe('useMessageImage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('behaves as expected in the happy path', async () => {
+    const imageDimensions = { height: 100, width: 100 };
+    (prefetchNetworkImage as jest.Mock).mockResolvedValue('loaded');
+    (getLayoutImageDimensions as jest.Mock).mockReturnValueOnce(
+      imageDimensions
+    );
+    (Image.getSize as jest.Mock).mockImplementationOnce(
+      (_, onSuccess: () => void) => {
+        onSuccess();
+      }
+    );
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMessageImage(image, 'TOP_BANNER')
+    );
+
+    // first render
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: true,
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: true,
+      imageDimensions,
+      isImageFetching: false,
+    });
+  });
+
+  it('handles size retrieval errors as expected', async () => {
+    const error = 'ERROR';
+
+    (prefetchNetworkImage as jest.Mock).mockResolvedValue('loaded');
+    (Image.getSize as jest.Mock).mockImplementationOnce(
+      (_, __, onError: (error) => void) => {
+        onError(error);
+      }
+    );
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMessageImage(image, 'TOP_BANNER')
+    );
+
+    // first render
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: true,
+    });
+
+    await waitForNextUpdate();
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      `Unable to retrieve size for image: ${error}`
+    );
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+  });
+
+  it('handles prefetching errors as expected', async () => {
+    (prefetchNetworkImage as jest.Mock).mockResolvedValue('failed');
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useMessageImage(image, 'TOP_BANNER')
+    );
+
+    // first render
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: true,
+    });
+
+    await waitForNextUpdate();
+
+    expect(errorSpy).not.toHaveBeenCalled();
+
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+  });
+
+  it('returns the expected values when the image argument is an empty object', () => {
+    const { result } = renderHook(() =>
+      useMessageImage({} as MessageImage, 'TOP_BANNER')
+    );
+
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+  });
+
+  it('returns the expected values when the image argument is undefined', () => {
+    const { result } = renderHook(() =>
+      useMessageImage(undefined, 'TOP_BANNER')
+    );
+
+    expect(result.current).toStrictEqual({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+  });
+});

package/src/InAppMessaging/hooks/useMessageImage/__tests__/utils.spec.ts

@@ -0,0 +1,107 @@
+import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+
+import {
+  BANNER_IMAGE_SCREEN_MULTIPLIER,
+  BANNER_IMAGE_SCREEN_SIZE,
+} from '../constants';
+import { getLayoutImageDimensions, prefetchNetworkImage } from '../utils';
+
+jest.mock('react-native', () => ({
+  Dimensions: { get: jest.fn(() => ({ height: 844, width: 400 })) },
+  Image: { prefetch: jest.fn() },
+}));
+
+// use empty mockImplementation to turn off console output
+const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
+
+const url = 'https://test.jpeg';
+
+describe('prefetchNetworkImage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('behaves as expected in the happy path', async () => {
+    (Image.prefetch as jest.Mock).mockResolvedValueOnce(true);
+
+    const output = await prefetchNetworkImage(url);
+
+    expect(output).toBe('loaded');
+  });
+
+  it('handles a false response from Image.prefetch as expected', async () => {
+    (Image.prefetch as jest.Mock).mockResolvedValueOnce(false);
+
+    const output = await prefetchNetworkImage(url);
+
+    expect(errorSpy).toHaveBeenLastCalledWith(`Image failed to load: ${url}`);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+
+    expect(output).toBe('failed');
+  });
+
+  it('handles an error from Imaage.prefetch as expected', async () => {
+    const error = 'ERROR';
+    (Image.prefetch as jest.Mock).mockRejectedValueOnce(new Error(error));
+
+    const output = await prefetchNetworkImage(url);
+
+    expect(errorSpy).toHaveBeenLastCalledWith(
+      `Image.prefetch failed: Error: ${error}`
+    );
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+
+    expect(output).toBe('failed');
+  });
+});
+
+describe('getLayoutImageDimensions', () => {
+  it('returns the expected values for a square image', () => {
+    const imageHeight = 100;
+    const imageWidth = 100;
+
+    const output = getLayoutImageDimensions(
+      imageHeight,
+      imageWidth,
+      'TOP_BANNER'
+    );
+
+    expect(output).toStrictEqual({
+      height: BANNER_IMAGE_SCREEN_SIZE,
+      width: BANNER_IMAGE_SCREEN_SIZE,
+    });
+  });
+
+  it('returns the expected values for a portrait image', () => {
+    const imageHeight = 200;
+    const imageWidth = 100;
+
+    const output = getLayoutImageDimensions(
+      imageHeight,
+      imageWidth,
+      'TOP_BANNER'
+    );
+
+    expect(output).toStrictEqual({
+      height: BANNER_IMAGE_SCREEN_SIZE,
+      width: imageHeight * BANNER_IMAGE_SCREEN_MULTIPLIER,
+    });
+  });
+
+  it('returns the expected values for a landscape image', () => {
+    const imageHeight = 100;
+    const imageWidth = 200;
+
+    const output = getLayoutImageDimensions(
+      imageHeight,
+      imageWidth,
+      'TOP_BANNER'
+    );
+
+    expect(output).toStrictEqual({
+      height: imageWidth * BANNER_IMAGE_SCREEN_MULTIPLIER,
+      width: BANNER_IMAGE_SCREEN_SIZE,
+    });
+  });
+});

package/src/InAppMessaging/hooks/useMessageImage/constants.ts

@@ -0,0 +1,27 @@
+import { Dimensions } from 'react-native';
+
+// as images are not expected to be responsive to orientation changes get screen dimensions at app start
+const SCREEN_DIMENSIONS = Dimensions.get('screen');
+
+// compare screen width and height and assign the lesser of the two as the base screen dimension
+const BASE_SCREEN_DIMENSION =
+  SCREEN_DIMENSIONS.width < SCREEN_DIMENSIONS.height
+    ? SCREEN_DIMENSIONS.width
+    : SCREEN_DIMENSIONS.height;
+
+// base size that message images should fill
+// - all banner message images should fill 20 percent of the base screen dimension
+// - all other components should fill 60 percent of the base screen dimension
+export const BANNER_IMAGE_SCREEN_MULTIPLIER = 0.2;
+export const CAROUSEL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export const FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export const MODAL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+
+export const BANNER_IMAGE_SCREEN_SIZE =
+  BANNER_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const CAROUSEL_IMAGE_SCREEN_SIZE =
+  CAROUSEL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const FULL_SCREEN_IMAGE_SCREEN_SIZE =
+  FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const MODAL_IMAGE_SCREEN_SIZE =
+  MODAL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;

package/src/InAppMessaging/hooks/useMessageImage/index.ts

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

package/src/InAppMessaging/hooks/useMessageImage/types.ts

@@ -0,0 +1,18 @@
+export type ImageDimensions = {
+  height: number | undefined;
+  width: number | undefined;
+};
+
+export type ImageLoadingState = 'loaded' | 'failed';
+
+export enum ImagePrefetchStatus {
+  Failure = 'FAILURE',
+  Fetching = 'FETCHING',
+  Success = 'SUCCESS',
+}
+
+export type UseMessageImage = {
+  hasRenderableImage: boolean;
+  imageDimensions: ImageDimensions;
+  isImageFetching: boolean;
+};

package/src/InAppMessaging/hooks/useMessageImage/useMessageImage.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { Image } from 'react-native';
+
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { MessageImage, MessageLayout } from '@aws-amplify/ui-react-core';
+
+import { ImageDimensions, ImagePrefetchStatus, UseMessageImage } from './types';
+import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';
+
+const logger = new Logger('Notifications.InAppMessaging');
+
+/**
+ * Handles prefetching and dimension setting for message images
+ *
+ * @param image contains image source
+ * @param layout message layout
+ * @returns message image dimensions and rendering related booleans
+ */
+export default function useMessageImage(
+  image: MessageImage | undefined,
+  layout: MessageLayout
+): UseMessageImage {
+  const { src } = image ?? {};
+  const shouldPrefetch = !!src;
+
+  // set initial status to fetching if prefetch is required
+  const [prefetchStatus, setPrefetchStatus] =
+    useState<ImagePrefetchStatus | null>(
+      shouldPrefetch ? ImagePrefetchStatus.Fetching : null
+    );
+  const imageDimensions = useRef<ImageDimensions>({
+    height: undefined,
+    width: undefined,
+  }).current;
+
+  const isImageFetching = prefetchStatus === ImagePrefetchStatus.Fetching;
+  const hasRenderableImage = prefetchStatus === ImagePrefetchStatus.Success;
+
+  useEffect(() => {
+    if (!shouldPrefetch) {
+      return;
+    }
+
+    prefetchNetworkImage(src).then((prefetchResult) => {
+      if (prefetchResult === 'loaded') {
+        // get image size once loaded
+        Image.getSize(
+          src,
+          (imageWidth, imageHeight) => {
+            const { height, width } = getLayoutImageDimensions(
+              imageHeight,
+              imageWidth,
+              layout
+            );
+            imageDimensions.height = height;
+            imageDimensions.width = width;
+
+            setPrefetchStatus(ImagePrefetchStatus.Success);
+          },
+          (error) => {
+            // handle size retrieval error
+            logger.error(`Unable to retrieve size for image: ${error}`);
+            setPrefetchStatus(ImagePrefetchStatus.Failure);
+          }
+        );
+      } else {
+        // handle prefetch failure
+        setPrefetchStatus(ImagePrefetchStatus.Failure);
+      }
+    });
+  }, [imageDimensions, layout, shouldPrefetch, src]);
+
+  return { hasRenderableImage, imageDimensions, isImageFetching };
+}