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

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

@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerMessage renders a message as expected with an image 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "justifyContent": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": "asset.png",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "height": 100,
+                "width": 100,
+              },
+              undefined,
+            ]
+          }
+          testID="in-app-messaging--image"
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 8,
+          }
+        }
+      />
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginLeft": "auto",
+            },
+            undefined,
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          source={
+            Object {
+              "testUri": "../../../src/assets/close.png",
+            }
+          }
+          style={
+            Object {
+              "height": 20,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 20,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</MessageWrapper>
+`;
+
+exports[`BannerMessage renders a message as expected without an image 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "justifyContent": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 8,
+          }
+        }
+      />
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "flex-start",
+              "marginLeft": "auto",
+            },
+            undefined,
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          source={
+            Object {
+              "testUri": "../../../src/assets/close.png",
+            }
+          }
+          style={
+            Object {
+              "height": 20,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 20,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</MessageWrapper>
+`;

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

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

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

@@ -0,0 +1,105 @@
+import { ViewStyle } from 'react-native';
+
+import { GetDefaultStyle } from '../../hooks';
+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 { BannerMessagePositionStyle } from './types';
+
+export const positionStyle: BannerMessagePositionStyle = {
+  bottom: {
+    justifyContent: 'flex-end',
+  },
+  middle: {
+    justifyContent: 'center',
+  },
+  top: {
+    justifyContent: 'flex-start',
+  },
+};
+
+export const getStyles: GetDefaultStyle<{ position: ViewStyle }> = (
+  imageDimensions,
+  additionalStyle
+) => ({
+  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',
+    padding: SPACING_SMALL,
+  },
+  buttonText: {
+    fontSize: FONT_SIZE_BASE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_BASE,
+    textAlign: '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,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    padding: SPACING_LARGE,
+  },
+  header: {
+    fontSize: FONT_SIZE_LARGE,
+    fontWeight: FONT_WEIGHT_BASE,
+    lineHeight: LINE_HEIGHT_LARGE,
+  },
+  iconButton: {
+    alignSelf: 'flex-start',
+    marginLeft: 'auto',
+  },
+  image: {
+    ...imageDimensions,
+  },
+  imageContainer: {
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: SPACING_MEDIUM,
+  },
+  wrapper: {
+    ...additionalStyle?.position,
+    backgroundColor: 'transparent',
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,15 @@
+import { ViewStyle } from 'react-native';
+import { BannerMessageCommonProps } from '@aws-amplify/ui-react-core';
+
+import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
+
+export interface BannerMessageProps
+  extends BannerMessageCommonProps<MessageOverrideStyle | undefined> {}
+
+export interface BannerMessageStyle extends MessageDefaultStyle {}
+
+export interface BannerMessagePositionStyle {
+  bottom: ViewStyle;
+  middle: ViewStyle;
+  top: ViewStyle;
+}

package/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { MessageContentProps } from '@aws-amplify/ui-react-core';
+
+import { Carousel } from '../../../primitives';
+
+import { MessageWrapper } from '../MessageWrapper';
+import CarouselMessageItem from './CarouselMessageItem';
+import { defaultStyle } from './styles';
+import { CarouselMessageProps } from './types';
+
+export default function CarouselMessage(
+  props: CarouselMessageProps
+): JSX.Element {
+  const { data, ...rest } = props;
+  const { style } = rest;
+
+  const indicatorStyle = useMemo(
+    () => ({
+      active: [defaultStyle.pageIndicatorActive, style?.pageIndicatorActive],
+      inactive: [
+        defaultStyle.pageIndicatorInactive,
+        style?.pageIndicatorInactive,
+      ],
+    }),
+    [style]
+  );
+
+  const renderItem = ({ item }: { item: MessageContentProps }) => (
+    <CarouselMessageItem {...item} {...rest} />
+  );
+
+  return (
+    <MessageWrapper disableSafeAreaView>
+      <Carousel
+        data={data ?? []}
+        renderItem={renderItem}
+        indicatorActiveStyle={indicatorStyle.active}
+        indicatorInactiveStyle={indicatorStyle.inactive}
+      />
+    </MessageWrapper>
+  );
+}

package/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useDeviceOrientation } from '../../../hooks';
+import { useMessageProps } from '../../hooks';
+import { MessageLayout } from '../MessageLayout';
+
+import { getLandscapeStyles, getPortraitStyles } from './styles';
+import { CarouselMessageItemProps } from './types';
+
+export default function CarouselMessageItem(
+  props: CarouselMessageItemProps
+): JSX.Element | null {
+  const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
+  const messageProps = useMessageProps(
+    props,
+    isPortraitMode ? getPortraitStyles : getLandscapeStyles
+  );
+  const { shouldRenderMessage, styles } = messageProps;
+
+  if (!shouldRenderMessage) {
+    return null;
+  }
+
+  const { wrapper, ...messageStyles } = styles!;
+
+  return (
+    <SafeAreaView style={wrapper}>
+      <MessageLayout
+        {...props}
+        {...messageProps}
+        orientation={deviceOrientation}
+        styles={messageStyles}
+      />
+    </SafeAreaView>
+  );
+}

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

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import { act, create, ReactTestRenderer } from 'react-test-renderer';
+
+import { Carousel } from '../../../../primitives';
+import CarouselMessage from '../CarouselMessage';
+
+jest.mock('../../../../primitives', () => ({ Carousel: 'Carousel' }));
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+jest.mock('../CarouselMessageItem', () => 'CarouselMessageItem');
+
+const baseProps = { layout: 'CAROUSEL' as const, data: [] };
+
+describe('CarouselMessage', () => {
+  let carouselMessage: ReactTestRenderer;
+  let itemRenderer: ReactTestRenderer;
+
+  it('renders as expected', () => {
+    act(() => {
+      carouselMessage = create(<CarouselMessage {...baseProps} />);
+    });
+
+    expect(carouselMessage.toJSON()).toMatchSnapshot();
+  });
+
+  it('allows style overrides', () => {
+    const overrides = {
+      pageIndicatorActive: { backgroundColor: 'red' },
+      pageIndicatorInactive: { backgroundColor: 'blue' },
+    };
+    act(() => {
+      carouselMessage = create(
+        <CarouselMessage {...baseProps} style={overrides} />
+      );
+    });
+
+    expect(carouselMessage.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders items', () => {
+    act(() => {
+      carouselMessage = create(<CarouselMessage {...baseProps} />);
+    });
+    const carousel = carouselMessage.root.findByType(Carousel);
+    const Item = () =>
+      (carousel.props as { renderItem: (data) => ReactElement }).renderItem({
+        item: { image: { src: 'image-src' } },
+      });
+
+    act(() => {
+      itemRenderer = create(<Item />);
+    });
+
+    expect(itemRenderer.toJSON()).toMatchSnapshot();
+  });
+});

package/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessageItem.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { act, create, ReactTestRenderer } from 'react-test-renderer';
+
+import { useDeviceOrientation } from '../../../../hooks';
+import { useMessageImage } from '../../../hooks/useMessageImage';
+
+import CarouselMessageItem from '../CarouselMessageItem';
+
+jest.mock('../../../../hooks');
+jest.mock('../../../hooks/useMessageImage');
+jest.mock('../../MessageLayout', () => ({ MessageLayout: 'MessageLayout' }));
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+
+const baseProps = { layout: 'CAROUSEL' as const };
+
+describe('CarouselMessageItem', () => {
+  let carouselMessageItem: ReactTestRenderer;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    ['landscape', false],
+    ['portrait', true],
+  ])('renders as expected in %s mode', (deviceOrientation, isPortraitMode) => {
+    (useDeviceOrientation as jest.Mock).mockReturnValue({
+      deviceOrientation,
+      isPortraitMode,
+    });
+    (useMessageImage as jest.Mock).mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: false,
+    });
+
+    act(() => {
+      carouselMessageItem = create(<CarouselMessageItem {...baseProps} />);
+    });
+
+    expect(carouselMessageItem.toJSON()).toMatchSnapshot();
+  });
+
+  it('returns null if message is not ready for rendering', () => {
+    (useMessageImage as jest.Mock).mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: true,
+    });
+    act(() => {
+      carouselMessageItem = create(<CarouselMessageItem {...baseProps} />);
+    });
+
+    expect(carouselMessageItem.toJSON()).toBeNull();
+  });
+});

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselMessage allows style overrides 1`] = `
+<MessageWrapper
+  disableSafeAreaView={true}
+>
+  <Carousel
+    data={Array []}
+    indicatorActiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        Object {
+          "backgroundColor": "red",
+        },
+      ]
+    }
+    indicatorInactiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        Object {
+          "backgroundColor": "blue",
+        },
+      ]
+    }
+    renderItem={[Function]}
+  />
+</MessageWrapper>
+`;
+
+exports[`CarouselMessage renders as expected 1`] = `
+<MessageWrapper
+  disableSafeAreaView={true}
+>
+  <Carousel
+    data={Array []}
+    indicatorActiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    indicatorInactiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    renderItem={[Function]}
+  />
+</MessageWrapper>
+`;
+
+exports[`CarouselMessage renders items 1`] = `
+<CarouselMessageItem
+  image={
+    Object {
+      "src": "image-src",
+    }
+  }
+  layout="CAROUSEL"
+/>
+`;