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

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

@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselMessageItem renders as expected in landscape mode 1`] = `
+<SafeAreaView
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+        "flex": 1,
+      },
+      Object {},
+      Object {},
+      Object {},
+    ]
+  }
+>
+  <MessageLayout
+    hasButtons={false}
+    hasPrimaryButton={false}
+    hasRenderableImage={false}
+    hasSecondaryButton={false}
+    layout="CAROUSEL"
+    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 [
+          Array [
+            Object {
+              "flex": 1,
+              "padding": 16,
+            },
+            Object {},
+            Object {},
+          ],
+          Object {
+            "paddingBottom": 36,
+          },
+        ],
+        "contentContainer": Object {
+          "alignContent": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        "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,
+        },
+      }
+    }
+  />
+</SafeAreaView>
+`;
+
+exports[`CarouselMessageItem renders as expected in portrait mode 1`] = `
+<SafeAreaView
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+        "flex": 1,
+      },
+      Object {},
+      Object {},
+      Object {},
+    ]
+  }
+>
+  <MessageLayout
+    hasButtons={false}
+    hasPrimaryButton={false}
+    hasRenderableImage={false}
+    hasSecondaryButton={false}
+    layout="CAROUSEL"
+    orientation="portrait"
+    shouldRenderMessage={true}
+    styles={
+      Object {
+        "body": Array [
+          Object {
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 24,
+          },
+          Object {},
+          undefined,
+        ],
+        "buttonsContainer": Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        "container": Array [
+          Array [
+            Object {
+              "flex": 1,
+              "padding": 16,
+            },
+            Object {},
+            Object {},
+          ],
+          Object {
+            "paddingBottom": 36,
+          },
+        ],
+        "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,
+        },
+      }
+    }
+  />
+</SafeAreaView>
+`;

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

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

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

@@ -0,0 +1,125 @@
+import { ImageStyle, StyleSheet } from 'react-native';
+import {
+  BORDER_RADIUS_BASE,
+  COLOR_GREY,
+  COLOR_LIGHT_GREY,
+  COLOR_LIGHT_GREY_2,
+  COLOR_WHITE,
+  FONT_SIZE_BASE,
+  FONT_SIZE_LARGE,
+  FONT_WEIGHT_BASE,
+  LINE_HEIGHT_BASE,
+  LINE_HEIGHT_LARGE,
+  SPACING_EXTRA_LARGE,
+  SPACING_LARGE,
+  SPACING_MEDIUM,
+  SPACING_SMALL,
+} from '../../constants';
+
+import { CarouselMessageStyle, CarouselMessageComponentStyle } from './types';
+
+export const defaultStyle: CarouselMessageComponentStyle = StyleSheet.create({
+  pageIndicatorActive: {
+    backgroundColor: COLOR_GREY,
+    borderRadius: SPACING_LARGE / 2,
+    height: SPACING_LARGE,
+    margin: SPACING_SMALL,
+    width: SPACING_LARGE,
+  },
+  pageIndicatorInactive: {
+    backgroundColor: COLOR_LIGHT_GREY_2,
+    borderRadius: SPACING_LARGE / 2,
+    height: SPACING_LARGE,
+    margin: SPACING_SMALL,
+    width: SPACING_LARGE,
+  },
+});
+
+const commonStyles: Omit<CarouselMessageStyle, '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,
+    flex: 1,
+  },
+};
+
+export const getPortraitStyles = (
+  imageDimensions: ImageStyle
+): CarouselMessageStyle =>
+  StyleSheet.create({
+    ...commonStyles,
+    image: { ...imageDimensions },
+    textContainer: {
+      ...commonStyles.textContainer,
+      marginVertical: SPACING_LARGE,
+    },
+  });
+
+export const getLandscapeStyles = (
+  imageDimensions: ImageStyle
+): CarouselMessageStyle =>
+  StyleSheet.create({
+    ...commonStyles,
+    contentContainer: {
+      ...commonStyles.contentContainer,
+      alignContent: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+    },
+    image: { ...imageDimensions },
+    imageContainer: {
+      ...commonStyles.imageContainer,
+      justifyContent: 'center',
+    },
+    textContainer: {
+      ...commonStyles.textContainer,
+      flex: 1,
+      justifyContent: 'center',
+    },
+  });

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

@@ -0,0 +1,28 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+import {
+  CarouselMessageCommonProps,
+  MessageComponentBaseProps,
+} from '@aws-amplify/ui-react-core';
+
+import { MessageDefaultStyle, MessageOverrideStyle } from '../../hooks';
+
+interface CarouselMessageOverrideStyle extends MessageOverrideStyle {
+  pageIndicatorActive?: StyleProp<ViewStyle>;
+  pageIndicatorInactive?: StyleProp<ViewStyle>;
+}
+
+export interface CarouselMessageProps
+  extends CarouselMessageCommonProps<
+    CarouselMessageOverrideStyle | undefined
+  > {}
+
+export interface CarouselMessageItemProps
+  extends MessageComponentBaseProps<CarouselMessageOverrideStyle> {}
+
+export interface CarouselMessageStyle extends MessageDefaultStyle {}
+
+export interface CarouselMessageComponentStyle {
+  pageIndicatorActive: ViewStyle;
+  pageIndicatorInactive: ViewStyle;
+}

package/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useDeviceOrientation } from '../../../hooks';
+
+import { useMessageProps } from '../../hooks';
+import { MessageLayout } from '../MessageLayout';
+import { MessageWrapper } from '../MessageWrapper';
+
+import { getLandscapeStyles, getPortraitStyles } from './styles';
+import { FullScreenMessageProps } from './types';
+
+export default function FullScreenMessage(
+  props: FullScreenMessageProps
+): 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 (
+    <MessageWrapper style={wrapper}>
+      <MessageLayout
+        {...props}
+        {...messageProps}
+        orientation={deviceOrientation}
+        styles={messageStyles}
+      />
+    </MessageWrapper>
+  );
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { useDeviceOrientation } from '../../../../hooks';
+import { useMessageImage } from '../../../hooks';
+
+import FullScreenMessage from '../FullScreenMessage';
+
+jest.mock('../../../../hooks');
+jest.mock('../../../hooks/useMessageImage');
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+jest.mock('../../MessageLayout', () => ({ MessageLayout: 'MessageLayout' }));
+
+const baseProps = { layout: 'FULL_SCREEN' as const };
+
+const mockUseMessageImage = useMessageImage as jest.Mock;
+
+describe('FullScreenMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    ['landscape', false],
+    ['portrait', true],
+  ])('renders as expected in %s mode', (deviceOrientation, isPortraitMode) => {
+    (useDeviceOrientation as jest.Mock).mockReturnValue({
+      deviceOrientation,
+      isPortraitMode,
+    });
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<FullScreenMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('returns null while an image is fetching', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: null, width: null },
+      isImageFetching: true,
+    });
+
+    const renderer = TestRenderer.create(<FullScreenMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toBeNull();
+  });
+});