refactor: implement session warning in IterableEmbeddedView

Author: lposen

src/embedded/components/EmbeddedSessionDevWarning/EmbeddedSessionDevWarning.tsx

@@ -20,7 +20,7 @@ export const EmbeddedSessionDevWarning = ({
     return null;
   }
 
-  const message = `[Iterable] ${componentName}: wrap this view in <EmbeddedSessionManager> so embedded session tracking works correctly.`;
+  const message = `[Iterable] ${componentName}: wrap this component in <EmbeddedSessionManager> so embedded session tracking works correctly.`;
 
   return (
     <View

src/embedded/components/EmbeddedSessionDevWarning/index.ts

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

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx

@@ -1,27 +1,23 @@
 import {
   Image,
+  PixelRatio,
+  Pressable,
   Text,
   TouchableOpacity,
   View,
   type TextStyle,
   type ViewStyle,
-  PixelRatio,
-  Pressable,
 } from 'react-native';
 
 import { IterableEmbeddedViewType } from '../../enums';
 import { useEmbeddedView } from '../../hooks/useEmbeddedView';
-import { useWarnIfOutsideEmbeddedSession } from '../../hooks/useWarnIfOutsideEmbeddedSession';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
-import { EmbeddedSessionDevWarning } from '../EmbeddedSessionDevWarning/EmbeddedSessionDevWarning';
 import {
-  styles,
   IMAGE_HEIGHT,
   IMAGE_WIDTH,
+  styles,
 } from './IterableEmbeddedBanner.styles';
 
-const COMPONENT_NAME = 'IterableEmbeddedBanner';
-
 /**
  * TODO: figure out how default action works.
  */
@@ -32,9 +28,6 @@ export const IterableEmbeddedBanner = ({
   onButtonClick,
   onMessageClick,
 }: IterableEmbeddedComponentProps) => {
-  const showEmbeddedSessionWarning =
-    useWarnIfOutsideEmbeddedSession(COMPONENT_NAME);
-
   const { parsedStyles, media, handleButtonClick, handleMessageClick } =
     useEmbeddedView(IterableEmbeddedViewType.Banner, {
       message,
@@ -45,12 +38,6 @@ export const IterableEmbeddedBanner = ({
 
   const buttons = message.elements?.buttons ?? [];
 
-  if (showEmbeddedSessionWarning) {
-    return (
-      <EmbeddedSessionDevWarning visible componentName={COMPONENT_NAME} />
-    );
-  }
-
   return (
     <Pressable onPress={handleMessageClick}>
       <View

src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx

@@ -12,13 +12,9 @@ import {
 import { IterableLogoGrey } from '../../../core/assets';
 import { IterableEmbeddedViewType } from '../../enums';
 import { useEmbeddedView } from '../../hooks/useEmbeddedView';
-import { useWarnIfOutsideEmbeddedSession } from '../../hooks/useWarnIfOutsideEmbeddedSession';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
-import { EmbeddedSessionDevWarning } from '../EmbeddedSessionDevWarning/EmbeddedSessionDevWarning';
 import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles';
 
-const COMPONENT_NAME = 'IterableEmbeddedCard';
-
 /**
  * TODO: Add default action click handler.  See IterableEmbeddedView for functionality.
  */
@@ -29,28 +25,15 @@ export const IterableEmbeddedCard = ({
   onButtonClick = () => {},
   onMessageClick = () => {},
 }: IterableEmbeddedComponentProps) => {
-  const showEmbeddedSessionWarning =
-    useWarnIfOutsideEmbeddedSession(COMPONENT_NAME);
-
-  const {
-    handleButtonClick,
-    handleMessageClick,
-    media,
-    parsedStyles,
-  } = useEmbeddedView(IterableEmbeddedViewType.Card, {
-    message,
-    config,
-    onButtonClick,
-    onMessageClick,
-  });
+  const { handleButtonClick, handleMessageClick, media, parsedStyles } =
+    useEmbeddedView(IterableEmbeddedViewType.Card, {
+      message,
+      config,
+      onButtonClick,
+      onMessageClick,
+    });
   const buttons = message?.elements?.buttons ?? [];
 
-  if (showEmbeddedSessionWarning) {
-    return (
-      <EmbeddedSessionDevWarning visible componentName={COMPONENT_NAME} />
-    );
-  }
-
   return (
     <Pressable onPress={() => handleMessageClick()}>
       <View
@@ -77,8 +60,7 @@ export const IterableEmbeddedCard = ({
                     uri: media.url as string,
                     height: PixelRatio.getPixelSizeForLayoutSize(IMAGE_HEIGHT),
                   }
-                :
-                IterableLogoGrey
+                : IterableLogoGrey
             }
             style={
               media.shouldShow

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx

@@ -1,30 +1,23 @@
 import {
+  Pressable,
   Text,
   TouchableOpacity,
   View,
   type TextStyle,
   type ViewStyle,
-  Pressable,
 } from 'react-native';
 
 import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
 import { useEmbeddedView } from '../../hooks/useEmbeddedView';
-import { useWarnIfOutsideEmbeddedSession } from '../../hooks/useWarnIfOutsideEmbeddedSession';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
-import { EmbeddedSessionDevWarning } from '../EmbeddedSessionDevWarning/EmbeddedSessionDevWarning';
 import { styles } from './IterableEmbeddedNotification.styles';
 
-const COMPONENT_NAME = 'IterableEmbeddedNotification';
-
 export const IterableEmbeddedNotification = ({
   config,
   message,
   onButtonClick,
   onMessageClick,
 }: IterableEmbeddedComponentProps) => {
-  const showEmbeddedSessionWarning =
-    useWarnIfOutsideEmbeddedSession(COMPONENT_NAME);
-
   const { parsedStyles, handleButtonClick, handleMessageClick } =
     useEmbeddedView(IterableEmbeddedViewType.Notification, {
       message,
@@ -35,12 +28,6 @@ export const IterableEmbeddedNotification = ({
 
   const buttons = message.elements?.buttons ?? [];
 
-  if (showEmbeddedSessionWarning) {
-    return (
-      <EmbeddedSessionDevWarning visible componentName={COMPONENT_NAME} />
-    );
-  }
-
   return (
     <Pressable onPress={() => handleMessageClick()}>
       <View

src/embedded/components/IterableEmbeddedView.tsx

@@ -1,11 +1,15 @@
 import { useMemo } from 'react';
 
 import { IterableEmbeddedViewType } from '../enums/IterableEmbeddedViewType';
+import { useWarnIfOutsideEmbeddedSession } from '../hooks';
 import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
+import { EmbeddedSessionDevWarning } from './EmbeddedSessionDevWarning';
 import { IterableEmbeddedBanner } from './IterableEmbeddedBanner';
 import { IterableEmbeddedCard } from './IterableEmbeddedCard';
 import { IterableEmbeddedNotification } from './IterableEmbeddedNotification';
 
+const COMPONENT_NAME = 'IterableEmbeddedView';
+
 /**
  * The props for the IterableEmbeddedView component.
  */
@@ -29,6 +33,9 @@ export const IterableEmbeddedView = ({
   viewType,
   ...props
 }: IterableEmbeddedViewProps) => {
+  const showEmbeddedSessionWarning =
+    useWarnIfOutsideEmbeddedSession(COMPONENT_NAME);
+
   const Cmp = useMemo(() => {
     switch (viewType) {
       case IterableEmbeddedViewType.Card:
@@ -42,5 +49,11 @@ export const IterableEmbeddedView = ({
     }
   }, [viewType]);
 
+  if (showEmbeddedSessionWarning) {
+    return (
+      <EmbeddedSessionDevWarning visible componentName={COMPONENT_NAME} />
+    );
+  }
+
   return Cmp ? <Cmp {...props} /> : null;
 };