Loren/embedded/SDK-248-notification-component

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  body: {
+    alignSelf: 'stretch',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+  },
+  bodyContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    flexShrink: 1,
+    gap: 4,
+    width: '100%',
+  },
+  button: {
+    borderRadius: 32,
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+    width: '100%',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+  container: {
+    alignItems: 'flex-start',
+    borderStyle: 'solid',
+    boxShadow:
+      '0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.08)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    justifyContent: 'center',
+    padding: 16,
+    width: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    lineHeight: 24,
+  },
+});

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx

@@ -0,0 +1,96 @@
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  type TextStyle,
+  type ViewStyle,
+  Pressable,
+} from 'react-native';
+
+import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
+import { styles } from './IterableEmbeddedNotification.styles';
+
+export const IterableEmbeddedNotification = ({
+  config,
+  message,
+  onButtonClick = () => {},
+  onMessageClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  const { parsedStyles, handleButtonClick, handleMessageClick } =
+    useEmbeddedView(IterableEmbeddedViewType.Notification, {
+      message,
+      config,
+      onButtonClick,
+      onMessageClick,
+    });
+
+  const buttons = message.elements?.buttons ?? [];
+
+  return (
+    <Pressable onPress={() => handleMessageClick()}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: parsedStyles.backgroundColor,
+            borderColor: parsedStyles.borderColor,
+            borderRadius: parsedStyles.borderCornerRadius,
+            borderWidth: parsedStyles.borderWidth,
+          } as ViewStyle,
+        ]}
+      >
+        {}
+        <View style={styles.bodyContainer}>
+          <Text
+            style={[
+              styles.title,
+              { color: parsedStyles.titleTextColor } as TextStyle,
+            ]}
+          >
+            {message.elements?.title}
+          </Text>
+          <Text
+            style={[
+              styles.body,
+              { color: parsedStyles.bodyTextColor } as TextStyle,
+            ]}
+          >
+            {message.elements?.body}
+          </Text>
+        </View>
+        {buttons.length > 0 && (
+          <View style={styles.buttonContainer}>
+            {buttons.map((button, index) => {
+              const backgroundColor =
+                index === 0
+                  ? parsedStyles.primaryBtnBackgroundColor
+                  : parsedStyles.secondaryBtnBackgroundColor;
+              const textColor =
+                index === 0
+                  ? parsedStyles.primaryBtnTextColor
+                  : parsedStyles.secondaryBtnTextColor;
+              return (
+                <TouchableOpacity
+                  style={[styles.button, { backgroundColor } as ViewStyle]}
+                  onPress={() => handleButtonClick(button)}
+                  key={button.id}
+                >
+                  <Text
+                    style={[
+                      styles.buttonText,
+                      { color: textColor } as TextStyle,
+                    ]}
+                  >
+                    {button.title}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+};

src/embedded/components/IterableEmbeddedNotification/index.ts

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

src/embedded/hooks/index.ts

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

src/embedded/hooks/useEmbeddedView/embeddedViewDefaults.ts

@@ -0,0 +1,85 @@
+export const embeddedBackgroundColors = {
+  notification: '#ffffff',
+  card: '#ffffff',
+  banner: '#ffffff',
+};
+
+export const embeddedBorderColors = {
+  notification: '#E0DEDF',
+  card: '#E0DEDF',
+  banner: '#E0DEDF',
+};
+
+export const embeddedPrimaryBtnBackgroundColors = {
+  notification: '#6A266D',
+  card: 'transparent',
+  banner: '#6A266D',
+};
+
+export const embeddedPrimaryBtnTextColors = {
+  notification: '#ffffff',
+  card: '#79347F',
+  banner: '#ffffff',
+};
+
+export const embeddedSecondaryBtnBackgroundColors = {
+  notification: 'transparent',
+  card: 'transparent',
+  banner: 'transparent',
+};
+
+export const embeddedSecondaryBtnTextColors = {
+  notification: '#79347F',
+  card: '#79347F',
+  banner: '#79347F',
+};
+
+export const embeddedTitleTextColors = {
+  notification: '#3D3A3B',
+  card: '#3D3A3B',
+  banner: '#3D3A3B',
+};
+
+export const embeddedBodyTextColors = {
+  notification: '#787174',
+  card: '#787174',
+  banner: '#787174',
+};
+
+export const embeddedBorderRadius = {
+  notification: 8,
+  card: 6,
+  banner: 8,
+};
+
+export const embeddedBorderWidth = {
+  notification: 1,
+  card: 1,
+  banner: 1,
+};
+
+export const embeddedMediaImageBorderColors = {
+  notification: '#E0DEDF',
+  card: '#E0DEDF',
+  banner: '#E0DEDF',
+};
+
+export const embeddedMediaImageBackgroundColors = {
+  notification: '#F5F4F4',
+  card: '#F5F4F4',
+  banner: '#F5F4F4',
+};
+
+export const embeddedStyles = {
+  backgroundColor: embeddedBackgroundColors,
+  bodyText: embeddedBodyTextColors,
+  borderColor: embeddedBorderColors,
+  borderCornerRadius: embeddedBorderRadius,
+  borderWidth: embeddedBorderWidth,
+  mediaImageBorder: embeddedMediaImageBorderColors,
+  primaryBtnBackgroundColor: embeddedPrimaryBtnBackgroundColors,
+  primaryBtnTextColor: embeddedPrimaryBtnTextColors,
+  secondaryBtnBackground: embeddedSecondaryBtnBackgroundColors,
+  secondaryBtnTextColor: embeddedSecondaryBtnTextColors,
+  titleText: embeddedTitleTextColors,
+};

src/embedded/hooks/useEmbeddedView/getMedia.ts

@@ -0,0 +1,29 @@
+import type { IterableEmbeddedMessage } from '../../types/IterableEmbeddedMessage';
+import { IterableEmbeddedViewType } from '../../enums';
+
+/**
+ * This function is used to get the media to render for a given embedded view
+ * type and message.
+ *
+ * @param viewType - The type of view to render.
+ * @param message - The message to render.
+ * @returns The media to render.
+ *
+ * @example
+ * const media = getMedia(IterableEmbeddedViewType.Notification, message);
+ * console.log(media);
+ */
+export const getMedia = (
+  /** The type of view to render. */
+  viewType: IterableEmbeddedViewType,
+  /** The message to render. */
+  message: IterableEmbeddedMessage
+) => {
+  if (viewType === IterableEmbeddedViewType.Notification) {
+    return { url: null, caption: null, shouldShow: false };
+  }
+  const url = message.elements?.mediaUrl ?? null;
+  const caption = message.elements?.mediaUrlCaption ?? null;
+  const shouldShow = !!url && url.length > 0;
+  return { url, caption, shouldShow };
+};

src/embedded/hooks/useEmbeddedView/getStyles.ts

@@ -0,0 +1,81 @@
+import type { IterableEmbeddedViewConfig } from '../../types/IterableEmbeddedViewConfig';
+import { embeddedStyles } from './embeddedViewDefaults';
+import { IterableEmbeddedViewType } from '../../enums';
+
+/**
+ * Get the default style for the embedded view type.
+ *
+ * @param viewType - The type of view to render.
+ * @param colors - The colors to use for the default style.
+ * @returns The default style.
+ */
+const getDefaultStyle = (
+  viewType: IterableEmbeddedViewType,
+  colors: {
+    banner: number | string;
+    card: number | string;
+    notification: number | string;
+  }
+) => {
+  switch (viewType) {
+    case IterableEmbeddedViewType.Notification:
+      return colors.notification;
+    case IterableEmbeddedViewType.Card:
+      return colors.card;
+    default:
+      return colors.banner;
+  }
+};
+
+/**
+ * Get the style for the embedded view type.
+ *
+ * If a style is provided in the config, it will take precedence over the default style.
+ *
+ * @param viewType - The type of view to render.
+ * @param c - The config to use for the styles.
+ * @returns The styles.
+ *
+ * @example
+ * const styles = getStyles(IterableEmbeddedViewType.Notification, {
+ *   backgroundColor: '#000000',
+ *   borderColor: '#000000',
+ *   borderWidth: 1,
+ *   borderCornerRadius: 10,
+ *   primaryBtnBackgroundColor: '#000000',
+ *   primaryBtnTextColor: '#000000',
+ * });
+ */
+export const getStyles = (
+  viewType: IterableEmbeddedViewType,
+  c?: IterableEmbeddedViewConfig | null
+) => {
+  return {
+    backgroundColor:
+      c?.backgroundColor ??
+      getDefaultStyle(viewType, embeddedStyles.backgroundColor),
+    borderColor:
+      c?.borderColor ?? getDefaultStyle(viewType, embeddedStyles.borderColor),
+    borderWidth:
+      c?.borderWidth ?? getDefaultStyle(viewType, embeddedStyles.borderWidth),
+    borderCornerRadius:
+      c?.borderCornerRadius ??
+      getDefaultStyle(viewType, embeddedStyles.borderCornerRadius),
+    primaryBtnBackgroundColor:
+      c?.primaryBtnBackgroundColor ??
+      getDefaultStyle(viewType, embeddedStyles.primaryBtnBackgroundColor),
+    primaryBtnTextColor:
+      c?.primaryBtnTextColor ??
+      getDefaultStyle(viewType, embeddedStyles.primaryBtnTextColor),
+    secondaryBtnBackgroundColor:
+      c?.secondaryBtnBackgroundColor ??
+      getDefaultStyle(viewType, embeddedStyles.secondaryBtnBackground),
+    secondaryBtnTextColor:
+      c?.secondaryBtnTextColor ??
+      getDefaultStyle(viewType, embeddedStyles.secondaryBtnTextColor),
+    titleTextColor:
+      c?.titleTextColor ?? getDefaultStyle(viewType, embeddedStyles.titleText),
+    bodyTextColor:
+      c?.bodyTextColor ?? getDefaultStyle(viewType, embeddedStyles.bodyText),
+  };
+};

src/embedded/hooks/useEmbeddedView/index.ts

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