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

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

@@ -0,0 +1,274 @@
+import { StyleSheet } from 'react-native';
+import {
+  MessageComponentBaseProps,
+  MessageLayout,
+  MessagePayloadStyle,
+} from '@aws-amplify/ui-react-core';
+
+import { DEFAULT_CAROUSEL_INDICATOR_SIZE } from '../../../primitives';
+import { BUTTON_PRESSED_OPACITY, SPACING_EXTRA_LARGE } from '../../constants';
+
+import {
+  MessageButtonStyleParams,
+  MessageButtonStyleProps,
+  MessageComponentStyles,
+  MessageContainerAndWrapperStyle,
+  MessageStyleParams,
+} from './types';
+
+// Carousel page indicator size + margins
+const DEFAULT_CAROUSEL_INDICATOR_PADDING =
+  (DEFAULT_CAROUSEL_INDICATOR_SIZE * 5) / 3;
+
+/**
+ * Parse and assign appropriate button container and text style from style objects params
+ *
+ * @param {MessageButtonStyleParams} params - message styleParams and button type
+ * @returns {MessageButtonStyleProps} resolved button container and text style arrays
+ */
+export const getComponentButtonStyle = ({
+  styleParams,
+  buttonType,
+}: MessageButtonStyleParams): MessageButtonStyleProps => {
+  const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+  // default component styles defined at the UI component level
+  const {
+    buttonContainer: containerDefaultStyle = {},
+    buttonText: textDefaultStyle = {},
+  } = defaultStyle ?? {};
+
+  // message specific styles in the in-app message payload, overrides default component styles
+  const { backgroundColor, borderRadius, color } =
+    payloadStyle?.[buttonType] ?? {};
+
+  const containePayloadStyle = {
+    ...(backgroundColor ? { backgroundColor } : null),
+    ...(borderRadius ? { borderRadius } : null),
+  };
+
+  const textMessageStyle = { ...(color ? { color } : null) };
+
+  // custom component override styles passed as style prop, overrides all previous styles
+  const {
+    container: containerOverrideStyle = {},
+    text: textOverrideStyle = {},
+  } = overrideStyle?.[buttonType] ?? {};
+
+  return {
+    // the style prop of the React Native Pressable component used in the message UI accepts either a ViewStyle array
+    // or a function receiving a boolean reflecting whether the component is currently pressed, returning a ViewStyle
+    // array. Utilizing the latter, we add an opacity value to the UI message button style during press events
+    container: ({ pressed } = { pressed: false }) => {
+      // default button press interaction opacity
+      const pressedOpacity = pressed ? { opacity: BUTTON_PRESSED_OPACITY } : {};
+
+      // pass `pressed` to containerOverrideStyle and evaluate if the consumer passed a function for custom
+      // button style
+      const containerOverrideFinalStyle =
+        typeof containerOverrideStyle === 'function'
+          ? containerOverrideStyle({ pressed })
+          : containerOverrideStyle;
+
+      return [
+        pressedOpacity,
+        containerDefaultStyle,
+        containePayloadStyle,
+        containerOverrideFinalStyle,
+      ];
+    },
+    text: [textDefaultStyle, textMessageStyle, textOverrideStyle],
+  };
+};
+
+/**
+ * Utility for determining if the provided layout requires filling the entire device screen.
+ *
+ * @param {InAppMessageLayout} layout - message layout
+ * @returns {Boolean} boolean indicating whether entire screen should be filled
+ */
+
+export const shouldFillDeviceScreen = (layout: MessageLayout): boolean => {
+  switch (layout) {
+    case 'CAROUSEL':
+    case 'FULL_SCREEN': {
+      return true;
+    }
+    case 'MODAL':
+    case 'TOP_BANNER':
+    case 'MIDDLE_BANNER':
+    case 'BOTTOM_BANNER':
+    default: {
+      return false;
+    }
+  }
+};
+
+/**
+ * Parse and assign appropriate message container and wrapper style from style params
+ *
+ * @param {MessageStyleParams} params - message styleParams, layout, and device orientation
+ * @returns {ContainerAndWrapperStyle} resolved containerStyle and wrapperStyle
+ */
+
+export const getContainerAndWrapperStyle = ({
+  styleParams,
+  layout,
+}: MessageStyleParams): MessageContainerAndWrapperStyle => {
+  const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+
+  const containerDefaultStyle = defaultStyle?.container ?? {};
+  const containerPayloadStyle = payloadStyle?.container ?? {};
+  const containerOverrideStyle = overrideStyle?.container ?? {};
+
+  const wrapperDefaultStyle = defaultStyle?.wrapper ?? {};
+
+  if (!shouldFillDeviceScreen(layout)) {
+    return {
+      wrapper: wrapperDefaultStyle,
+      container: [
+        containerDefaultStyle,
+        containerPayloadStyle,
+        containerOverrideStyle,
+      ],
+    };
+  }
+
+  // in non-banner and landscape modal layouts container backgroundColor values should be applied as
+  // wrapper style to ensure that the backgroundColor is applied to the entire screen
+  const {
+    backgroundColor: defaultBackgroundColor,
+    ...restContainerDefaultStyle
+  } = containerDefaultStyle;
+  const {
+    backgroundColor: messageBackgroundColor,
+    ...restContainerPayloadStyle
+  } = containerPayloadStyle;
+
+  // flatten overrideStyle to access override backgroundColor
+  const {
+    backgroundColor: overrideBackgroundColor,
+    ...restContainerOverrideStyle
+  } = StyleSheet.flatten(containerOverrideStyle);
+
+  // all non-backgroundColor container override style are applied to the container View
+  const container: MessageContainerAndWrapperStyle['container'] = [
+    restContainerDefaultStyle,
+    restContainerPayloadStyle,
+    restContainerOverrideStyle,
+  ];
+
+  // use ternaries to prevent passing backgroundColor object with undefined or null value
+  const wrapper: MessageContainerAndWrapperStyle['wrapper'] = [
+    wrapperDefaultStyle,
+    defaultBackgroundColor ? { backgroundColor: defaultBackgroundColor } : {},
+    messageBackgroundColor ? { backgroundColor: messageBackgroundColor } : {},
+    overrideBackgroundColor ? { backgroundColor: overrideBackgroundColor } : {},
+  ];
+
+  return { wrapper, container };
+};
+
+/**
+ * Utility for extracting message payload style
+ *
+ * @param {MessageComponentBaseProps} props - message props
+ * @returns {Object} message payload specific style
+ */
+
+export const getPayloadStyle = ({
+  body,
+  container,
+  header,
+  primaryButton,
+  secondaryButton,
+}: MessageComponentBaseProps): MessagePayloadStyle => ({
+  body: body?.style ?? {},
+  container: container?.style ?? {},
+  header: header?.style ?? {},
+  primaryButton: primaryButton?.style ?? {},
+  secondaryButton: secondaryButton?.style ?? {},
+});
+
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolvement style precedence between default, payload, and custom style
+ *
+ * Style param resolve precedence from lowest to highest:
+ *   1. defaultStyle
+ *   2. messageStyle
+ *   3. overrideStyle
+ *
+ * @param {MessageStyleParams} params - message style params, layout, and device orientation
+ * @returns {MessageStyles} message style props
+ */
+
+export function getMessageStyles({
+  styleParams,
+  layout,
+}: MessageStyleParams): MessageComponentStyles {
+  // view style applied to the wrapper and primary container views
+  const { wrapper, container } = getContainerAndWrapperStyle({
+    styleParams,
+    layout,
+  });
+
+  // primary and secondary button container and text style
+  const primaryButton = getComponentButtonStyle({
+    styleParams,
+    buttonType: 'primaryButton',
+  });
+  const secondaryButton = getComponentButtonStyle({
+    styleParams,
+    buttonType: 'secondaryButton',
+  });
+
+  const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+
+  // image style composed of default and override style
+  const image = [defaultStyle?.image, overrideStyle?.image];
+
+  const iconButton = {
+    // view style applied to icon button
+    container: [defaultStyle?.iconButton, overrideStyle?.closeIconButton],
+    // close icon color, only specified as an overrideStyle
+    iconColor: overrideStyle?.closeIconColor,
+  };
+
+  // text style applied to message body and header respectively
+  const body = [defaultStyle?.body, payloadStyle?.body, overrideStyle?.body];
+  const header = [
+    defaultStyle?.header,
+    payloadStyle?.header,
+    overrideStyle?.header,
+  ];
+
+  const { buttonsContainer, contentContainer, imageContainer, textContainer } =
+    defaultStyle ?? {};
+
+  const styleProps: MessageComponentStyles = {
+    body,
+    buttonsContainer,
+    wrapper,
+    contentContainer,
+    container,
+    header,
+    iconButton,
+    image,
+    imageContainer,
+    primaryButton,
+    secondaryButton,
+    textContainer,
+  };
+
+  if (layout === 'CAROUSEL') {
+    styleProps.container = [
+      styleProps.container,
+      // Add bottom padding for carousel page indicators
+      {
+        paddingBottom: SPACING_EXTRA_LARGE + DEFAULT_CAROUSEL_INDICATOR_PADDING,
+      },
+    ];
+  }
+
+  return styleProps;
+}

package/src/InAppMessaging/index.ts

@@ -0,0 +1,14 @@
+export {
+  InAppMessagingProvider,
+  useInAppMessaging,
+} from '@aws-amplify/ui-react-core';
+
+export {
+  BannerMessageProps,
+  CarouselMessageProps,
+  FullScreenMessageProps,
+  ModalMessageProps,
+  InAppMessageDisplay,
+  MessageComponents,
+  withInAppMessaging,
+} from './components';

package/src/__mocks__/react-native-safe-area-context.ts

@@ -0,0 +1,6 @@
+jest.mock('react-native-safe-area-context');
+
+const SafeAreaProvider = 'SafeAreaProvider';
+const SafeAreaView = 'SafeAreaView';
+
+export { SafeAreaProvider, SafeAreaView };

package/src/__tests__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@aws-amplify/ui-react-native exports should match snapshot 1`] = `
+Array [
+  "BannerMessageProps",
+  "CarouselMessageProps",
+  "FullScreenMessageProps",
+  "InAppMessageDisplay",
+  "InAppMessagingProvider",
+  "MessageComponents",
+  "ModalMessageProps",
+  "useInAppMessaging",
+  "withInAppMessaging",
+]
+`;

package/src/__tests__/index.spec.ts

@@ -0,0 +1,8 @@
+import * as exported from '..';
+
+describe('@aws-amplify/ui-react-native', () => {
+  it('exports should match snapshot', () => {
+    const exportedKeys = Object.keys(exported);
+    expect(exportedKeys).toMatchSnapshot();
+  });
+});

package/src/assets/index.ts

@@ -0,0 +1,7 @@
+import { ImageSourcePropType } from 'react-native';
+
+const icons = {
+  close: require('./close.png') as ImageSourcePropType,
+};
+
+export default icons;

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export {
+  DeviceOrientation,
+  useDeviceOrientation,
+} from './useDeviceOrientation';

package/src/hooks/useDeviceOrientation/__tests__/useDeviceOrientation.spec.ts

@@ -0,0 +1,87 @@
+import { Dimensions, EventSubscription, ScaledSize } from 'react-native';
+import { renderHook } from '@testing-library/react-hooks';
+import useDeviceOrientation from '../useDeviceOrientation';
+
+const dimensions = {
+  landscape: { height: 100, width: 300 },
+  portrait: { height: 300, width: 100 },
+};
+
+describe('useDeviceOrientation', () => {
+  const subscription: Pick<EventSubscription, 'remove'> = { remove: jest.fn() };
+
+  let getSpy: jest.SpyInstance;
+  let addEventListenerSpy: jest.SpyInstance;
+  let removeEventListener: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    getSpy = jest.spyOn(Dimensions, 'get');
+
+    addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
+
+    removeEventListener = jest.spyOn(Dimensions, 'removeEventListener');
+  });
+
+  /* eslint-disable no-console */
+  // turn off console errors during tests, can be safely removed once React Native v0.64 is no longer supported
+  const consoleWarn = console.warn;
+  console.warn = jest.fn();
+  afterAll(() => {
+    console.warn = consoleWarn;
+    /* eslint-enable no-console */
+  });
+
+  it('should handle unsubscribing for React Native versions < 0.65', () => {
+    getSpy.mockImplementation((_: string) => dimensions['portrait']);
+
+    // mock an `undefined` return to simulate React Native versions < 0.65
+    addEventListenerSpy.mockReturnValueOnce(undefined);
+
+    const { unmount } = renderHook(() => useDeviceOrientation());
+
+    expect(getSpy).toHaveBeenCalledTimes(1);
+    expect(getSpy).toHaveBeenCalledWith('screen');
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    expect(removeEventListener).toHaveBeenCalledTimes(1);
+    expect(subscription.remove).not.toHaveBeenCalled();
+  });
+
+  it('should handle unsubscribing for React Native versions >= 0.65', () => {
+    getSpy.mockImplementation((_: string) => dimensions['landscape']);
+    addEventListenerSpy.mockReturnValue(subscription);
+
+    const { unmount } = renderHook(() => useDeviceOrientation());
+
+    expect(getSpy).toHaveBeenCalledTimes(1);
+    expect(getSpy).toHaveBeenCalledWith('screen');
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    expect(subscription.remove).toHaveBeenCalledTimes(1);
+    expect(removeEventListener).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ['landscape', true, false],
+    ['portrait', false, true],
+  ])(
+    'returns the expected values when the device is in %s mode',
+    (deviceOrientation, isLandscapeMode, isPortraitMode) => {
+      getSpy.mockImplementation(
+        (_: string) => dimensions[deviceOrientation] as ScaledSize
+      );
+
+      const { result } = renderHook(() => useDeviceOrientation());
+
+      expect(result.current.deviceOrientation).toBe(deviceOrientation);
+      expect(result.current.isLandscapeMode).toBe(isLandscapeMode);
+      expect(result.current.isPortraitMode).toBe(isPortraitMode);
+    }
+  );
+});

package/src/hooks/useDeviceOrientation/index.ts

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

package/src/hooks/useDeviceOrientation/useDeviceOrientation.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, EventSubscription } from 'react-native';
+
+export type DeviceOrientation = 'portrait' | 'landscape';
+const getDeviceOrientation = (): DeviceOrientation => {
+  const { height, width } = Dimensions.get('screen');
+  return height >= width ? 'portrait' : 'landscape';
+};
+
+export default function useDeviceOrientation(): {
+  deviceOrientation: DeviceOrientation;
+  isLandscapeMode: boolean;
+  isPortraitMode: boolean;
+} {
+  const [deviceOrientation, setDeviceOrientation] =
+    useState<DeviceOrientation>(getDeviceOrientation);
+  const isLandscapeMode = deviceOrientation === 'landscape';
+  const isPortraitMode = deviceOrientation === 'portrait';
+
+  useEffect(() => {
+    const handler = () => {
+      setDeviceOrientation(getDeviceOrientation);
+    };
+
+    // The below cast and conditional unsubscribe handling is due to subscription removal variation
+    // between `Dimensions.addEventListener` in React Native prior to and after v0.65.
+    //
+    // Beginning with v0.65, `Dimensions.addEventListener` returns an `EventSubscription` object,
+    // which includes a `remove` method for removing the subscription. Prior versions return
+    // `undefined`, and subscription removal is handled by `Dimensions.removeEventListener`,
+    // which is deprecated in v0.65
+    const subscription = Dimensions.addEventListener(
+      'change',
+      handler
+    ) as unknown as EventSubscription;
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove();
+      } else {
+        Dimensions.removeEventListener('change', handler);
+      }
+    };
+  }, []);
+
+  return { deviceOrientation, isLandscapeMode, isPortraitMode };
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './InAppMessaging';

package/src/primitives/Button/Button.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+
+import { styles } from './styles';
+import { ButtonProps } from './types';
+
+export default function Button({
+  children,
+  textStyle,
+  ...pressableProps
+}: ButtonProps): JSX.Element {
+  return (
+    <Pressable {...pressableProps}>
+      {typeof children === 'string' ? (
+        <Text style={[styles.text, textStyle]}>{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}

package/src/primitives/Button/__tests__/Button.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+import TestRenderer from 'react-test-renderer';
+
+import Button from '../Button';
+
+const title = 'A preesable button';
+const Title = () => <Text>{title}</Text>;
+
+describe('Button', () => {
+  it('renders as expected with a string passed as children', () => {
+    const button = TestRenderer.create(<Button>{title}</Button>);
+    expect(button.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with a component passed as children', () => {
+    const button = TestRenderer.create(
+      <Button>
+        <Title />
+      </Button>
+    );
+    expect(button.toJSON()).toMatchSnapshot();
+  });
+});

package/src/primitives/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders as expected with a component passed as children 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <Text>
+    A preesable button
+  </Text>
+</View>
+`;
+
+exports[`Button renders as expected with a string passed as children 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "alignSelf": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    A preesable button
+  </Text>
+</View>
+`;

package/src/primitives/Button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { ButtonProps, ButtonStyles } from './types';

package/src/primitives/Button/styles.ts

@@ -0,0 +1,6 @@
+import { StyleSheet } from 'react-native';
+import { ButtonStyles } from './types';
+
+export const styles: ButtonStyles = StyleSheet.create({
+  text: { alignSelf: 'center' },
+});

package/src/primitives/Button/types.ts

@@ -0,0 +1,9 @@
+import { PressableProps, StyleProp, TextStyle } from 'react-native';
+
+export interface ButtonProps extends PressableProps {
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export interface ButtonStyles {
+  text: TextStyle;
+}