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

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

@@ -0,0 +1,80 @@
+import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { MessageLayout } from '@aws-amplify/ui-react-core';
+
+import {
+  BANNER_IMAGE_SCREEN_SIZE,
+  CAROUSEL_IMAGE_SCREEN_SIZE,
+  FULL_SCREEN_IMAGE_SCREEN_SIZE,
+  MODAL_IMAGE_SCREEN_SIZE,
+} from './constants';
+import { ImageDimensions, ImageLoadingState } from './types';
+
+const logger = new Logger('Notifications.InAppMessaging');
+
+const inAppMessageImageSizes: Record<MessageLayout, number> = {
+  BOTTOM_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+  MIDDLE_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+  TOP_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+  CAROUSEL: CAROUSEL_IMAGE_SCREEN_SIZE,
+  FULL_SCREEN: FULL_SCREEN_IMAGE_SCREEN_SIZE,
+  MODAL: MODAL_IMAGE_SCREEN_SIZE,
+};
+
+export const prefetchNetworkImage = async (
+  url: string
+): Promise<ImageLoadingState> => {
+  try {
+    const loaded = await Image.prefetch(url);
+    if (loaded) {
+      return 'loaded';
+    }
+
+    logger.error(`Image failed to load: ${url}`);
+    return 'failed';
+  } catch (e) {
+    logger.error(`Image.prefetch failed: ${e}`);
+    return 'failed';
+  }
+};
+
+export const getLayoutImageDimensions = (
+  imageHeight: number,
+  imageWidth: number,
+  layout: MessageLayout
+): ImageDimensions => {
+  // determine aspect ratio for scaling rendered image
+  const aspectRatio = imageWidth / imageHeight;
+  const isSquare = aspectRatio === 1;
+  const isPortrait = imageHeight > imageWidth;
+  const isLandscape = imageWidth > imageHeight;
+
+  // an image that has smaller dimensions than the max image dimension (e.g. 10px x 10px)
+  // will be scaled up in size to match the size the message component expects.
+  // While this could lead to pixelated images, it was ultimately a product decision,
+  // ideally the message creator would follow the image guidelines in the pinpoint console
+  const maxImageDimension = inAppMessageImageSizes[layout];
+
+  let height: ImageDimensions['height'] = undefined;
+  let width: ImageDimensions['width'] = undefined;
+
+  // set square image dimensions
+  if (isSquare) {
+    height = maxImageDimension;
+    width = maxImageDimension;
+  }
+
+  // set portrait image dimensions
+  if (isPortrait) {
+    height = maxImageDimension;
+    width = maxImageDimension * aspectRatio;
+  }
+
+  // set landscape image dimensions
+  if (isLandscape) {
+    height = maxImageDimension / aspectRatio;
+    width = maxImageDimension;
+  }
+
+  return { height, width };
+};

package/src/InAppMessaging/hooks/useMessageProps/__tests__/__snapshots__/utils.spec.ts.snap

@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getMessageStyles adds a bottom padding for carousel page indicators 1`] = `
+Object {
+  "body": Array [
+    Object {
+      "color": "fuschia",
+    },
+    undefined,
+    undefined,
+  ],
+  "buttonsContainer": Object {
+    "backgroundColor": "teal",
+  },
+  "container": Array [
+    Array [
+      Object {
+        "borderRadius": 1,
+      },
+      Object {},
+      Object {},
+    ],
+    Object {
+      "paddingBottom": 36,
+    },
+  ],
+  "contentContainer": Object {
+    "backgroundColor": "lightblue",
+  },
+  "header": Array [
+    Object {
+      "backgroundColor": "purple",
+    },
+    undefined,
+    undefined,
+  ],
+  "iconButton": Object {
+    "container": Array [
+      Object {
+        "backgroundColor": "blue",
+      },
+      undefined,
+    ],
+    "iconColor": undefined,
+  },
+  "image": Array [
+    Object {
+      "backgroundColor": "yellow",
+    },
+    undefined,
+  ],
+  "imageContainer": Object {
+    "backgroundColor": "green",
+  },
+  "primaryButton": Object {
+    "container": [Function],
+    "text": Array [
+      Object {
+        "color": "pink",
+      },
+      Object {},
+      Object {},
+    ],
+  },
+  "secondaryButton": Object {
+    "container": [Function],
+    "text": Array [
+      Object {
+        "color": "pink",
+      },
+      Object {},
+      Object {},
+    ],
+  },
+  "textContainer": Object {
+    "backgroundColor": "antiquewhite",
+  },
+  "wrapper": Array [
+    Object {
+      "backgroundColor": "gray",
+    },
+    Object {
+      "backgroundColor": "red",
+    },
+    Object {},
+    Object {},
+  ],
+}
+`;
+
+exports[`getMessageStyles returns the expected output in the happy path 1`] = `
+Object {
+  "body": Array [
+    Object {
+      "color": "fuschia",
+    },
+    Object {
+      "textAlign": "left",
+    },
+    Object {
+      "color": "white",
+    },
+  ],
+  "buttonsContainer": Object {
+    "backgroundColor": "teal",
+  },
+  "container": Array [
+    Object {
+      "borderRadius": 1,
+    },
+    Object {
+      "borderRadius": 2,
+    },
+    Object {
+      "borderRadius": 3,
+    },
+  ],
+  "contentContainer": Object {
+    "backgroundColor": "lightblue",
+  },
+  "header": Array [
+    Object {
+      "backgroundColor": "purple",
+    },
+    Object {
+      "textAlign": "center",
+    },
+    Object {
+      "backgroundColor": "lightpink",
+    },
+  ],
+  "iconButton": Object {
+    "container": Array [
+      Object {
+        "backgroundColor": "blue",
+      },
+      Object {
+        "backgroundColor": "turquoise",
+      },
+    ],
+    "iconColor": "darkcyan",
+  },
+  "image": Array [
+    Object {
+      "backgroundColor": "yellow",
+    },
+    Object {
+      "backgroundColor": "royalblue",
+    },
+  ],
+  "imageContainer": Object {
+    "backgroundColor": "green",
+  },
+  "primaryButton": Object {
+    "container": [Function],
+    "text": Array [
+      Object {
+        "color": "pink",
+      },
+      Object {
+        "color": "olive",
+      },
+      Object {
+        "color": "black",
+      },
+    ],
+  },
+  "secondaryButton": Object {
+    "container": [Function],
+    "text": Array [
+      Object {
+        "color": "pink",
+      },
+      Object {
+        "color": "peru",
+      },
+      Object {
+        "color": "orchid",
+      },
+    ],
+  },
+  "textContainer": Object {
+    "backgroundColor": "antiquewhite",
+  },
+  "wrapper": Array [
+    Object {
+      "backgroundColor": "gray",
+    },
+    Object {
+      "backgroundColor": "red",
+    },
+    Object {
+      "backgroundColor": "lightgray",
+    },
+    Object {
+      "backgroundColor": "lawngreen",
+    },
+  ],
+}
+`;
+
+exports[`getPayloadStyle returns the expected output in the happy path 1`] = `
+Object {
+  "body": Object {
+    "textAlign": "left",
+  },
+  "container": Object {
+    "backgroundColor": "lightgray",
+    "borderRadius": 2,
+  },
+  "header": Object {
+    "textAlign": "center",
+  },
+  "primaryButton": Object {
+    "backgroundColor": "salmon",
+    "color": "olive",
+  },
+  "secondaryButton": Object {
+    "backgroundColor": "sand",
+    "color": "peru",
+  },
+}
+`;

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

@@ -0,0 +1,162 @@
+import { renderHook } from '@testing-library/react-hooks';
+import {
+  MessageButtonProps,
+  MessageComponentBaseProps,
+} from '@aws-amplify/ui-react-core';
+
+import { useMessageImage } from '../../useMessageImage';
+import { MessageOverrideStyle } from '../types';
+import useMessageProps from '../useMessageProps';
+
+jest.mock('../../useMessageImage');
+jest.mock('../../../../hooks/useDeviceOrientation');
+
+type TestComponentProps = MessageComponentBaseProps<MessageOverrideStyle>;
+
+const mockUseMessageImage = useMessageImage as jest.Mock;
+
+const onDisplay = jest.fn();
+const getDefaultStyle = jest.fn();
+
+describe('useMessageProps', () => {
+  beforeEach(() => {
+    mockUseMessageImage.mockReturnValue({
+      hasRenderableImage: false,
+      imageDimensions: null,
+      isImageFetching: false,
+    });
+    onDisplay.mockClear();
+  });
+
+  it('behaves as expected in the happy path', () => {
+    const props: TestComponentProps = {
+      layout: 'MIDDLE_BANNER',
+      onDisplay,
+    };
+
+    const { result } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    expect(onDisplay).toHaveBeenCalledTimes(1);
+    expect(result.current).toEqual({
+      hasButtons: false,
+      hasPrimaryButton: false,
+      hasRenderableImage: false,
+      hasSecondaryButton: false,
+      shouldRenderMessage: true,
+      styles: expect.any(Object) as MessageOverrideStyle,
+    });
+  });
+
+  it('behaves as expected when props includes an image', () => {
+    mockUseMessageImage.mockReturnValue({
+      hasRenderableImage: false,
+      imageDimensions: null,
+      isImageFetching: true,
+    });
+
+    const props: TestComponentProps = {
+      image: { src: 'https://test.png' },
+      layout: 'MIDDLE_BANNER',
+      onDisplay,
+    };
+
+    const { result, rerender } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    // first render
+    expect(onDisplay).not.toHaveBeenCalled();
+    expect(result.current).toEqual({
+      hasButtons: false,
+      hasPrimaryButton: false,
+      hasRenderableImage: false,
+      hasSecondaryButton: false,
+      shouldRenderMessage: false,
+      styles: null,
+    });
+
+    mockUseMessageImage.mockReturnValue({
+      hasRenderableImage: true,
+      imageDimensions: { height: 12, width: 12 },
+      isImageFetching: false,
+    });
+
+    rerender();
+
+    expect(onDisplay).toHaveBeenCalledTimes(1);
+    expect(result.current).toEqual({
+      hasButtons: false,
+      hasPrimaryButton: false,
+      hasRenderableImage: true,
+      hasSecondaryButton: false,
+      shouldRenderMessage: true,
+      styles: expect.any(Object) as MessageOverrideStyle,
+    });
+  });
+
+  it('returns the expected values when props includes buttons', () => {
+    const props: TestComponentProps = {
+      layout: 'MIDDLE_BANNER',
+
+      primaryButton: { title: 'primary', onAction: jest.fn() },
+      secondaryButton: { title: 'secondary', onAction: jest.fn() },
+    };
+
+    const { result } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    expect(result.current.hasButtons).toBe(true);
+    expect(result.current.hasPrimaryButton).toBe(true);
+    expect(result.current.hasSecondaryButton).toBe(true);
+  });
+
+  it('returns the expected values when props includes empty buttons', () => {
+    const props: TestComponentProps = {
+      layout: 'MIDDLE_BANNER',
+
+      primaryButton: {} as MessageButtonProps,
+      secondaryButton: {} as MessageButtonProps,
+    };
+
+    const { result } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    expect(result.current.hasButtons).toBe(false);
+    expect(result.current.hasPrimaryButton).toBe(false);
+    expect(result.current.hasSecondaryButton).toBe(false);
+  });
+
+  it('returns the expected values when props includes only a primary button', () => {
+    const props: TestComponentProps = {
+      layout: 'MIDDLE_BANNER',
+      primaryButton: { title: 'primary', onAction: jest.fn() },
+    };
+
+    const { result } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    expect(result.current.hasButtons).toBe(true);
+    expect(result.current.hasPrimaryButton).toBe(true);
+    expect(result.current.hasSecondaryButton).toBe(false);
+  });
+
+  it('returns the expected values when props includes only a secondary button', () => {
+    const props: TestComponentProps = {
+      layout: 'MIDDLE_BANNER',
+      secondaryButton: { title: 'primary', onAction: jest.fn() },
+    };
+
+    const { result } = renderHook(() =>
+      useMessageProps(props, getDefaultStyle)
+    );
+
+    expect(result.current.hasButtons).toBe(true);
+    expect(result.current.hasPrimaryButton).toBe(false);
+    expect(result.current.hasSecondaryButton).toBe(true);
+  });
+});