feat(in-app-messaging): add BannerMessage UI component

packages/aws-amplify-react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+
+import icons from '../../../icons';
+import { ICON_BUTTON_HIT_SLOP, ICON_BUTTON_SIZE } from '../constants';
+import { useInAppMessageButtonStyle, useInAppMessageImage } from '../../hooks';
+import { Button, IconButton } from '../../ui';
+
+import { MessageWrapper } from '../MessageWrapper';
+import { styles } from './styles';
+import { BannerMessageProps } from './types';
+
+export default function BannerMessage({
+	body,
+	container,
+	header,
+	image,
+	layout,
+	onClose,
+	position,
+	primaryButton,
+	secondaryButton,
+	style,
+}: BannerMessageProps) {
+	const { imageStyle, shouldDelayMessageRendering, shouldRenderImage } = useInAppMessageImage(image, layout);
+	const { primaryButtonStyle, secondaryButtonStyle } = useInAppMessageButtonStyle({
+		baseButtonStyle: styles,
+		messageButtonStyle: { primaryButton: primaryButton?.style, secondaryButton: secondaryButton?.style },
+		overrideButtonStyle: style,
+	});
+
+	return shouldDelayMessageRendering ? null : (
+		<MessageWrapper>
+			<View style={[styles.positionContainer, styles[position]]}>
+				<View style={[styles.container, container?.style, style?.container]}>
+					<View style={styles.contentContainer}>
+						{shouldRenderImage && (
+							<View style={styles.imageContainer}>
+								<Image source={{ uri: image.src }} style={imageStyle} />
+							</View>
+						)}
+						<View style={styles.textContainer}>
+							{header?.content && <Text style={[styles.header, header.style, style?.header]}>{header.content}</Text>}
+							{body?.content && <Text style={[styles.message, body.style, style?.message]}>{body.content}</Text>}
+						</View>
+						<IconButton
+							color={style?.closeIconColor}
+							hitSlop={ICON_BUTTON_HIT_SLOP}
+							onPress={onClose}
+							size={ICON_BUTTON_SIZE}
+							source={icons.close}
+							style={[styles.iconButton, style?.closeIconButton]}
+						/>
+					</View>
+					{primaryButton && (
+						<View style={styles.buttonsContainer}>
+							{secondaryButton && (
+								<Button
+									onPress={secondaryButton.onPress}
+									style={secondaryButtonStyle.container}
+									textStyle={secondaryButtonStyle.text}
+								>
+									{secondaryButton.title}
+								</Button>
+							)}
+							<Button
+								onPress={primaryButton.onPress}
+								style={primaryButtonStyle.container}
+								textStyle={primaryButtonStyle.text}
+							>
+								{primaryButton.title}
+							</Button>
+						</View>
+					)}
+				</View>
+			</View>
+		</MessageWrapper>
+	);
+}

packages/aws-amplify-react-native/src/InAppMessaging/components/BannerMessage/index.ts

@@ -1 +1,2 @@
+export { default } from './BannerMessage';
 export { BannerMessageProps } from './types';

packages/aws-amplify-react-native/src/InAppMessaging/components/BannerMessage/styles.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import { StyleSheet } from 'react-native';
+
+import { getLineHeight } from '../utils';
+import {
+	BANNER_ELEVATION,
+	BANNER_SHADOW_HEIGHT,
+	BANNER_SHADOW_OPACITY,
+	BANNER_SHADOW_RADIUS,
+	BANNER_SHADOW_WIDTH,
+	BASE_SPACING,
+	BASE_FONT_SIZE,
+	BASE_FONT_WEIGHT,
+	BLACK,
+	BUTTON_BORDER_RADIUS,
+	EXTRA_LARGE_SPACING,
+	LARGE_SPACING,
+	LARGE_FONT_SIZE,
+	LIGHT_GREY,
+	SMALL_SPACING,
+	WHITE,
+} from '../constants';
+import { BannerMessageStyle } from './types';
+
+export const styles: BannerMessageStyle = StyleSheet.create({
+	// position style
+	positionContainer: {
+		flex: 1,
+		backgroundColor: 'transparent',
+	},
+	bottom: {
+		justifyContent: 'flex-end',
+	},
+	middle: {
+		justifyContent: 'center',
+	},
+	top: {
+		justifyContent: 'flex-start',
+	},
+
+	// shared style
+	buttonContainer: {
+		backgroundColor: LIGHT_GREY,
+		borderRadius: BUTTON_BORDER_RADIUS,
+		flex: 1,
+		margin: BASE_SPACING,
+		padding: LARGE_SPACING,
+	},
+	buttonsContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		paddingHorizontal: SMALL_SPACING,
+	},
+	buttonText: {
+		fontSize: BASE_FONT_SIZE,
+		fontWeight: BASE_FONT_WEIGHT,
+		lineHeight: getLineHeight(BASE_FONT_SIZE),
+		textAlign: 'center',
+	},
+	container: {
+		backgroundColor: WHITE,
+		elevation: BANNER_ELEVATION,
+		margin: EXTRA_LARGE_SPACING,
+		shadowColor: BLACK,
+		shadowOffset: {
+			width: BANNER_SHADOW_WIDTH,
+			height: BANNER_SHADOW_HEIGHT,
+		},
+		shadowOpacity: BANNER_SHADOW_OPACITY,
+		shadowRadius: BANNER_SHADOW_RADIUS,
+	},
+	contentContainer: {
+		flexDirection: 'row',
+		padding: LARGE_SPACING,
+	},
+	header: {
+		fontSize: LARGE_FONT_SIZE,
+		fontWeight: BASE_FONT_WEIGHT,
+		lineHeight: getLineHeight(LARGE_FONT_SIZE),
+	},
+	iconButton: {
+		alignSelf: 'flex-start',
+		marginLeft: 'auto',
+	},
+	imageContainer: {
+		justifyContent: 'center',
+	},
+	message: {
+		fontSize: BASE_FONT_SIZE,
+		fontWeight: BASE_FONT_WEIGHT,
+		lineHeight: getLineHeight(BASE_FONT_SIZE),
+	},
+	textContainer: {
+		marginHorizontal: SMALL_SPACING,
+		paddingLeft: BASE_SPACING,
+		flex: 1,
+	},
+});

packages/aws-amplify-react-native/src/InAppMessaging/components/BannerMessage/types.ts

@@ -11,8 +11,29 @@
  * and limitations under the License.
  */
 
+import { TextStyle, ViewStyle } from 'react-native';
 import { InAppMessageComponentPosition, InAppMessageComponentBaseProps } from '../types';
 
 export interface BannerMessageProps extends InAppMessageComponentBaseProps {
 	position: InAppMessageComponentPosition;
 }
+
+export interface BannerMessageStyle {
+	// position specific style
+	bottom: ViewStyle;
+	middle: ViewStyle;
+	top: ViewStyle;
+
+	// component style
+	buttonContainer: ViewStyle;
+	buttonsContainer: ViewStyle;
+	buttonText: TextStyle;
+	container: ViewStyle;
+	contentContainer: ViewStyle;
+	header: TextStyle;
+	iconButton: ViewStyle;
+	imageContainer: ViewStyle;
+	message: TextStyle;
+	positionContainer: ViewStyle;
+	textContainer: ViewStyle;
+}

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+
+import { styles } from './styles';
+import { MessageWrapperProps } from './types';
+
+export function MessageWrapper({ children, style }: MessageWrapperProps) {
+	return <SafeAreaView style={[styles.safeArea, style]}>{children}</SafeAreaView>;
+}

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageWrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './MessageWrapper';
+export * from './types';

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageWrapper/styles.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import { StyleSheet } from 'react-native';
+import { MessageWrapperStyle } from './types';
+
+export const styles: MessageWrapperStyle = StyleSheet.create({
+	safeArea: {
+		...StyleSheet.absoluteFillObject,
+	},
+});

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageWrapper/types.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface MessageWrapperProps {
+	children: ReactNode;
+	style?: StyleProp<ViewStyle>;
+}
+
+export interface MessageWrapperStyle {
+	safeArea: ViewStyle;
+}

packages/aws-amplify-react-native/src/InAppMessaging/components/constants.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2017-2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ *     http://aws.amazon.com/apache2.0/
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+
+/**
+ * Style constants either match or approximate the values used in the Pinpoint console preview.
+ * Some values, such as spacing, are slightly different to allow for a more mobile friendly UX
+ */
+
+// color
+export const BLACK = '#000';
+export const LIGHT_GREY = '#e8e8e8';
+export const WHITE = '#fff';
+
+// spacing
+export const SMALL_SPACING = 4;
+export const BASE_SPACING = 8;
+export const LARGE_SPACING = 12;
+export const EXTRA_LARGE_SPACING = 16;
+
+// button
+export const BUTTON_BORDER_RADIUS = 4;
+
+// font
+export const BASE_FONT_SIZE = 16;
+export const LARGE_FONT_SIZE = 18;
+export const BASE_FONT_WEIGHT = '400';
+
+export const LINE_HEIGHT_MULTIPLIER = 1.5;
+
+// icon
+export const ICON_BUTTON_SIZE = 20;
+export const ICON_BUTTON_HIT_SLOP = 10;
+
+// component specific constants
+
+// BannerMessage
+// iOS shadow values
+export const BANNER_SHADOW_HEIGHT = 2;
+export const BANNER_SHADOW_WIDTH = 2;
+export const BANNER_SHADOW_OPACITY = 0.1;
+export const BANNER_SHADOW_RADIUS = 2;
+
+// android shadow values
+export const BANNER_ELEVATION = 3;
+
+// TODO: delete these once they are no longer needed
+// pinpoint max chars 150
+export const MAX_MESSAGE =
+	'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,';
+
+// pinpoint max chars 64
+export const MAX_HEADER =
+	'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum';
+
+// pinpoint max chars 30
+export const MAX_BUTTON =
+	'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,';

packages/aws-amplify-react-native/src/InAppMessaging/components/index.ts

@@ -1,4 +1,4 @@
-export { BannerMessageProps } from './BannerMessage';
+export { default as BannerMessage, BannerMessageProps } from './BannerMessage';
 export { CarouselMessageProps } from './CarouselMessage';
 export { FullScreenMessageProps } from './FullScreenMessage';
 export { default as InAppMessageDisplay } from './InAppMessageDisplay';