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

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

@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullScreenMessage renders as expected in landscape mode 1`] = `
+<MessageWrapper
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+        "flex": 1,
+      },
+      Object {},
+      Object {},
+      Object {},
+    ]
+  }
+>
+  <MessageLayout
+    hasButtons={false}
+    hasPrimaryButton={false}
+    hasRenderableImage={false}
+    hasSecondaryButton={false}
+    layout="FULL_SCREEN"
+    orientation="landscape"
+    shouldRenderMessage={true}
+    styles={
+      Object {
+        "body": Array [
+          Object {
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 24,
+          },
+          Object {},
+          undefined,
+        ],
+        "buttonsContainer": Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        "container": Array [
+          Object {
+            "flex": 1,
+            "padding": 16,
+          },
+          Object {},
+          Object {},
+        ],
+        "contentContainer": Object {
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        "header": Array [
+          Object {
+            "fontSize": 18,
+            "fontWeight": "400",
+            "lineHeight": 27,
+          },
+          Object {},
+          undefined,
+        ],
+        "iconButton": Object {
+          "container": Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginBottom": 8,
+              "marginLeft": "auto",
+              "marginRight": 8,
+            },
+            undefined,
+          ],
+          "iconColor": undefined,
+        },
+        "image": Array [
+          Object {
+            "height": null,
+            "width": null,
+          },
+          undefined,
+        ],
+        "imageContainer": Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "margin": 12,
+        },
+        "primaryButton": Object {
+          "container": [Function],
+          "text": Array [
+            Object {
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {},
+          ],
+        },
+        "secondaryButton": Object {
+          "container": [Function],
+          "text": Array [
+            Object {
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {},
+          ],
+        },
+        "textContainer": Object {
+          "flex": 1,
+          "justifyContent": "center",
+          "paddingHorizontal": 8,
+        },
+      }
+    }
+  />
+</MessageWrapper>
+`;
+
+exports[`FullScreenMessage renders as expected in portrait mode 1`] = `
+<MessageWrapper
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+      },
+      Object {},
+      Object {},
+      Object {},
+    ]
+  }
+>
+  <MessageLayout
+    hasButtons={false}
+    hasPrimaryButton={false}
+    hasRenderableImage={false}
+    hasSecondaryButton={false}
+    layout="FULL_SCREEN"
+    orientation="portrait"
+    shouldRenderMessage={true}
+    styles={
+      Object {
+        "body": Array [
+          Object {
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 24,
+          },
+          Object {},
+          undefined,
+        ],
+        "buttonsContainer": Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "marginTop": "auto",
+        },
+        "container": Array [
+          Object {
+            "flex": 1,
+            "padding": 16,
+          },
+          Object {},
+          Object {},
+        ],
+        "contentContainer": Object {
+          "flex": 1,
+        },
+        "header": Array [
+          Object {
+            "fontSize": 18,
+            "fontWeight": "400",
+            "lineHeight": 27,
+          },
+          Object {},
+          undefined,
+        ],
+        "iconButton": Object {
+          "container": Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginBottom": 8,
+              "marginLeft": "auto",
+              "marginRight": 8,
+            },
+            undefined,
+          ],
+          "iconColor": undefined,
+        },
+        "image": Array [
+          Object {
+            "height": null,
+            "width": null,
+          },
+          undefined,
+        ],
+        "imageContainer": Object {
+          "alignItems": "center",
+          "margin": 12,
+        },
+        "primaryButton": Object {
+          "container": [Function],
+          "text": Array [
+            Object {
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {},
+          ],
+        },
+        "secondaryButton": Object {
+          "container": [Function],
+          "text": Array [
+            Object {
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {},
+          ],
+        },
+        "textContainer": Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 8,
+        },
+      }
+    }
+  />
+</MessageWrapper>
+`;

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

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

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

@@ -0,0 +1,106 @@
+import { ImageStyle } from 'react-native';
+
+import { GetDefaultStyle } from '../../hooks';
+import {
+  BORDER_RADIUS_BASE,
+  COLOR_LIGHT_GREY,
+  COLOR_WHITE,
+  FONT_SIZE_BASE,
+  FONT_SIZE_LARGE,
+  FONT_WEIGHT_BASE,
+  LINE_HEIGHT_BASE,
+  LINE_HEIGHT_LARGE,
+  SPACING_EXTRA_LARGE,
+  SPACING_LARGE,
+  SPACING_MEDIUM,
+} from '../../constants';
+
+import { FullScreenMessageStyle } from './types';
+
+const commonStyles: Omit<FullScreenMessageStyle, 'image'> = {
+  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',
+  },
+  buttonText: {
+    fontSize: FONT_SIZE_BASE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_BASE,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+    padding: SPACING_EXTRA_LARGE,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  header: {
+    fontSize: FONT_SIZE_LARGE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_LARGE,
+  },
+  iconButton: {
+    alignSelf: 'flex-start',
+    marginBottom: SPACING_MEDIUM,
+    marginLeft: 'auto',
+    marginRight: SPACING_MEDIUM,
+  },
+  imageContainer: {
+    alignItems: 'center',
+    margin: SPACING_LARGE,
+  },
+  textContainer: {
+    paddingHorizontal: SPACING_MEDIUM,
+  },
+  wrapper: {
+    backgroundColor: COLOR_WHITE,
+  },
+};
+
+export const getPortraitStyles: GetDefaultStyle = (imageDimensions) => ({
+  ...commonStyles,
+  buttonsContainer: {
+    ...commonStyles.buttonsContainer,
+    marginTop: 'auto',
+  },
+  image: imageDimensions,
+  textContainer: {
+    ...commonStyles.textContainer,
+    marginVertical: SPACING_LARGE,
+  },
+});
+
+export const getLandscapeStyles: GetDefaultStyle = (imageDimensions) => ({
+  ...commonStyles,
+  contentContainer: {
+    ...commonStyles.contentContainer,
+    flexDirection: 'row',
+  },
+  image: { ...imageDimensions } as ImageStyle,
+  imageContainer: {
+    ...commonStyles.imageContainer,
+    justifyContent: 'center',
+  },
+  textContainer: {
+    ...commonStyles.textContainer,
+    flex: 1,
+    justifyContent: 'center',
+  },
+  wrapper: {
+    ...commonStyles.wrapper,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,7 @@
+import { FullScreenMessageCommonProps } from '@aws-amplify/ui-react-core';
+import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
+
+export interface FullScreenMessageProps
+  extends FullScreenMessageCommonProps<MessageOverrideStyle | undefined> {}
+
+export interface FullScreenMessageStyle extends MessageDefaultStyle {}

package/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  handleMessageAction,
+  OnMessageAction,
+  useMessage,
+} from '@aws-amplify/ui-react-core';
+
+import { BannerMessage } from '../BannerMessage';
+import { FullScreenMessage } from '../FullScreenMessage';
+import { CarouselMessage } from '../CarouselMessage';
+import { ModalMessage } from '../ModalMessage';
+
+import handleMessageLinkAction from './handleMessageLinkAction';
+import { InAppMessageDisplayProps, MessageDefaultComponents } from './types';
+
+const platformComponents: MessageDefaultComponents = {
+  BannerMessage,
+  CarouselMessage,
+  FullScreenMessage,
+  ModalMessage,
+};
+
+const onMessageAction: OnMessageAction = ({ action, url }) => {
+  handleMessageAction({ action, url, handleMessageLinkAction });
+};
+
+function InAppMessageDisplay({
+  components: overrideComponents,
+}: InAppMessageDisplayProps): JSX.Element | null {
+  const components = React.useMemo(
+    () => ({ ...platformComponents, ...overrideComponents }),
+    [overrideComponents]
+  );
+  const { Component, props } = useMessage({
+    components,
+    onMessageAction,
+  });
+
+  return <Component {...props} />;
+}
+
+InAppMessageDisplay.BannerMessage = BannerMessage;
+InAppMessageDisplay.CarouselMessage = CarouselMessage;
+InAppMessageDisplay.FullScreenMessage = FullScreenMessage;
+InAppMessageDisplay.ModalMessage = ModalMessage;
+
+export default InAppMessageDisplay;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import TestRenderer from 'react-test-renderer';
+import { useMessage } from '@aws-amplify/ui-react-core';
+
+import InAppMessageDisplay from '../InAppMessageDisplay';
+
+// mock amplify core to turn off browser related Logger warning during tests
+jest.mock('@aws-amplify/core');
+jest.mock('@aws-amplify/ui-react-core');
+
+const mockUseMessage = useMessage as jest.Mock;
+
+describe('InAppMessageDisplay', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the expected component in the happy path', () => {
+    const Component = ({ layout }) => (
+      <View>
+        <Text>{layout}</Text>
+      </View>
+    );
+    const props = { layout: 'TEST_COMPONENT' };
+
+    mockUseMessage.mockReturnValueOnce({ Component, props });
+
+    const inAppMessageDisplay = TestRenderer.create(<InAppMessageDisplay />);
+
+    expect(inAppMessageDisplay.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InAppMessageDisplay renders the expected component in the happy path 1`] = `
+<View>
+  <Text>
+    TEST_COMPONENT
+  </Text>
+</View>
+`;

package/src/InAppMessaging/components/InAppMessageDisplay/__tests__/handleMessageLinkAction.spec.ts

@@ -0,0 +1,51 @@
+import { Linking } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+
+import handleMessageLinkAction from '../handleMessageLinkAction';
+
+jest.mock('react-native', () => ({
+  Linking: { canOpenURL: jest.fn(), openURL: jest.fn() },
+}));
+
+// use empty mockImplementation to turn off console output
+const warnSpy = jest.spyOn(Logger.prototype, 'warn').mockImplementation();
+
+const url = 'https://docs.amplify.aws/';
+const error = 'ERROR';
+
+describe('handleAction', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('logs a warning when Linking.canOpenUrl returns false', async () => {
+    (Linking.canOpenURL as jest.Mock).mockResolvedValueOnce(false);
+
+    await handleMessageLinkAction(url);
+
+    expect(Linking.canOpenURL).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(`Unsupported url provided: ${url}`);
+    expect(Linking.openURL).not.toHaveBeenCalled();
+  });
+
+  it('logs an error when Linking.canOpenUrl fails', async () => {
+    (Linking.canOpenURL as jest.Mock).mockRejectedValueOnce(error);
+
+    await handleMessageLinkAction(url);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Call to Linking.canOpenURL failed: ${error}`
+    );
+  });
+
+  it('logs an error when Linking.openUrl fails', async () => {
+    (Linking.canOpenURL as jest.Mock).mockResolvedValueOnce(true);
+    (Linking.openURL as jest.Mock).mockRejectedValue(error);
+
+    await handleMessageLinkAction(url);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Call to Linking.openURL failed: ${error}`
+    );
+  });
+});

package/src/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.ts

@@ -0,0 +1,30 @@
+import { Linking } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core';
+
+const logger = new Logger('Notifications.InAppMessaging');
+
+const handleMessageLinkAction: HandleMessageLinkAction = async (
+  url: string
+) => {
+  let supported: boolean = false;
+  try {
+    supported = await Linking.canOpenURL(url);
+  } catch (e) {
+    logger.warn(`Call to Linking.canOpenURL failed: ${e}`);
+  }
+
+  if (!supported) {
+    logger.warn(`Unsupported url provided: ${url}`);
+    return;
+  }
+
+  try {
+    logger.info(`Opening url: ${url}`);
+    await Linking.openURL(url);
+  } catch (e) {
+    logger.warn(`Call to Linking.openURL failed: ${e}`);
+  }
+};
+
+export default handleMessageLinkAction;

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

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

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

@@ -0,0 +1,32 @@
+import {
+  BannerMessageComponent,
+  CarouselMessageComponent,
+  FullScreenMessageComponent,
+  ModalMessageComponent,
+} from '@aws-amplify/ui-react-core';
+
+import { BannerMessageProps } from '../BannerMessage';
+import { CarouselMessageProps } from '../CarouselMessage';
+import { FullScreenMessageProps } from '../FullScreenMessage';
+import { ModalMessageProps } from '../ModalMessage';
+
+type BannerStyle = BannerMessageProps['style'];
+type CarouselStyle = CarouselMessageProps['style'];
+type FullScreenStyle = FullScreenMessageProps['style'];
+type ModalStyle = ModalMessageProps['style'];
+
+export interface MessageDefaultComponents {
+  BannerMessage: BannerMessageComponent<BannerStyle>;
+  CarouselMessage: CarouselMessageComponent<CarouselStyle>;
+  FullScreenMessage: FullScreenMessageComponent<FullScreenStyle>;
+  ModalMessage: ModalMessageComponent<ModalStyle>;
+}
+
+export interface MessageComponents extends Partial<MessageDefaultComponents> {}
+
+export interface InAppMessageDisplayProps {
+  /**
+   * Message override UI components
+   */
+  components?: MessageComponents;
+}

package/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { Image, Text, View } from 'react-native';
+
+import icons from '../../../assets';
+import { Button, IconButton } from '../../../primitives';
+
+import {
+  ICON_BUTTON_HIT_SLOP,
+  ICON_BUTTON_SIZE,
+  IN_APP_MESSAGING_TEST_ID,
+} from '../../constants';
+
+import { LayoutProps } from './types';
+
+export default function MessageLayout({
+  orientation,
+  ...props
+}: LayoutProps): JSX.Element {
+  const {
+    body,
+    hasButtons,
+    hasPrimaryButton,
+    hasRenderableImage,
+    hasSecondaryButton,
+    header,
+    image,
+    onClose,
+    primaryButton,
+    secondaryButton,
+    styles,
+  } = props;
+
+  const iconButton = (
+    <IconButton
+      color={styles.iconButton.iconColor}
+      hitSlop={ICON_BUTTON_HIT_SLOP}
+      onPress={onClose}
+      size={ICON_BUTTON_SIZE}
+      source={icons.close}
+      style={styles.iconButton.container}
+      testID={IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON}
+    />
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        {orientation === 'portrait' && iconButton}
+        {hasRenderableImage && (
+          <View style={styles.imageContainer}>
+            <Image
+              source={{ uri: image?.src }}
+              style={styles.image}
+              testID={IN_APP_MESSAGING_TEST_ID.IMAGE}
+            />
+          </View>
+        )}
+        <View style={styles.textContainer}>
+          {header?.content && (
+            <Text
+              style={styles.header}
+              testID={IN_APP_MESSAGING_TEST_ID.HEADER}
+            >
+              {header.content}
+            </Text>
+          )}
+          {body?.content && (
+            <Text style={styles.body} testID={IN_APP_MESSAGING_TEST_ID.BODY}>
+              {body.content}
+            </Text>
+          )}
+        </View>
+        {orientation === 'landscape' && iconButton}
+      </View>
+      {hasButtons && (
+        <View style={styles.buttonsContainer}>
+          {hasSecondaryButton && (
+            <Button
+              onPress={secondaryButton?.onAction}
+              style={styles.secondaryButton.container}
+              testID={IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON}
+              textStyle={styles.secondaryButton.text}
+            >
+              {secondaryButton?.title}
+            </Button>
+          )}
+          {hasPrimaryButton && (
+            <Button
+              onPress={primaryButton?.onAction}
+              style={styles.primaryButton.container}
+              testID={IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON}
+              textStyle={styles.primaryButton.text}
+            >
+              {primaryButton?.title}
+            </Button>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,15 @@
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
+
+import { DeviceOrientation } from '../../../hooks';
+import {
+  MessageComponentStyles,
+  MessageOverrideStyle,
+  UseMessageProps,
+} from '../../hooks';
+
+export interface LayoutProps
+  extends Omit<MessageComponentBaseProps<MessageOverrideStyle>, 'style'>,
+    Omit<UseMessageProps, 'shouldRenderMessage' | 'styles'> {
+  orientation: DeviceOrientation;
+  styles: Omit<MessageComponentStyles, 'wrapper'>;
+}