Merge pull request #18 from white-label-loyalty/feat/sdk-cross-platfo…

…rm-link-handling

Feat/sdk cross platform link handling

lib/components/atoms/BaseBanner/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
-import { Tile } from '../../../types/tile';
+import { useHandleTilePress } from '../../../hooks/useHandleTilePress';
+import { BannerTileConfig, Tile } from '../../../types/tile';
 
 const BannerContext = React.createContext<Tile | null>(null);
 
@@ -20,19 +21,30 @@ type BaseBannerProps = {
 
 const BaseBanner: React.FC<BaseBannerProps> = ({ tile, children }) => {
   const { theme } = useWllSdk();
+  const { ctaLink, ctaLinkTarget, title } =
+    tile.configuration as BannerTileConfig;
+
+  const handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
+
   return (
     <BannerContext.Provider value={tile}>
-      <View
-        style={[
+      <Pressable
+        style={({ pressed }) => [
           styles.container,
           {
             backgroundColor: theme.surface,
             borderRadius: theme.sizes.borderRadiusLg,
+            opacity: pressed ? 0.7 : 1,
           },
         ]}
+        onPress={handlePress}
+        disabled={!ctaLink}
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityLabel={`${title}${ctaLink ? ' - Click to open' : ''}`}
       >
         {children}
-      </View>
+      </Pressable>
     </BannerContext.Provider>
   );
 };

lib/components/atoms/BaseTile/index.tsx

@@ -1,6 +1,13 @@
 import React, { createContext, FC, ReactNode, useContext } from 'react';
-import { FlexStyle, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  FlexStyle,
+  Pressable,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
+import { useHandleTilePress } from '../../../hooks/useHandleTilePress';
 import { useTileSize } from '../../../hooks/useTileSize';
 import { ImagePropsNoSource } from '../../../types/common';
 import { ContentTileConfig, Tile } from '../../../types/tile';
@@ -53,11 +60,12 @@ const BaseTileRoot: FC<{ children: ReactNode; style?: ViewStyle }> = ({
   const tile = useTileContext();
   const { theme } = useWllSdk();
   const { isHalfSize } = useTileSize(tile);
-  const { artworkUrl } = tile.configuration as ContentTileConfig;
+  const { ctaLink, ctaLinkTarget, title } =
+    tile.configuration as ContentTileConfig;
+  const handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
 
   const layout: LayoutProps = {
     flexDirection: 'column',
-    // Center content vertically for half tiles, start at top for full tiles
     justifyContent: isHalfSize ? 'center' : 'flex-start',
     alignItems: 'stretch',
   };
@@ -71,20 +79,26 @@ const BaseTileRoot: FC<{ children: ReactNode; style?: ViewStyle }> = ({
   });
 
   return (
-    <View
-      style={[
+    <Pressable
+      style={({ pressed }) => [
         styles.container,
         {
           backgroundColor: theme.surface,
           borderRadius: responsiveStyles.borderRadius,
           aspectRatio: isHalfSize ? 2 : 1,
+          opacity: pressed ? 0.7 : 1,
         },
         layout,
         style,
       ]}
+      onPress={handlePress}
+      disabled={!ctaLink}
+      accessible={true}
+      accessibilityRole="button"
+      accessibilityLabel={`${title}${ctaLink ? ' - Click to open' : ''}`}
     >
       {children}
-    </View>
+    </Pressable>
   );
 };
 
@@ -170,7 +184,7 @@ const BaseTileMedia: FC<ImagePropsNoSource> = (props) => {
 const BaseTileTitle: FC = () => {
   const tile = useTileContext();
   const { theme } = useWllSdk();
-  const { title, linkURL, artworkUrl } =
+  const { title, ctaLink, artworkUrl } =
     tile.configuration as ContentTileConfig;
   const { isHalfSize } = useTileSize(tile);
 
@@ -182,7 +196,7 @@ const BaseTileTitle: FC = () => {
       <Text variant="title" accessibilityLabel={title}>
         {title}
       </Text>
-      {linkURL && (
+      {ctaLink && (
         <Icon name="ChevronRight" color={theme.derivedSurfaceText[20]} />
       )}
     </>

lib/components/molecules/Carousel/Carousel.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { SectionType } from '../../../types/section';
-import { TileHeight, TileType, UrlTarget } from '../../../types/tile';
+import { CTALinkTarget, TileHeight, TileType } from '../../../types/tile';
 import Carousel from './index';
 
 export default {
@@ -34,7 +34,7 @@ Default.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'New iPhone 15 Pro',
           ctaLink: '/products/iphone15pro',
@@ -56,7 +56,7 @@ Default.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'Unlock Your Rewards',
           ctaLink: '#member-card',
@@ -78,7 +78,7 @@ Default.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'TechCon 2024',
           ctaLink: 'https://techcon2024.com/register',
@@ -121,7 +121,7 @@ SingleItem.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'TechCon 2024',
           ctaLink: 'https://techcon2024.com/register',
@@ -164,7 +164,7 @@ ManyItems.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'New iPhone 15 Pro',
           ctaLink: '/products/iphone15pro',
@@ -186,7 +186,7 @@ ManyItems.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'Unlock Your Rewards',
           ctaLink: '#member-card',
@@ -208,7 +208,7 @@ ManyItems.args = {
         configuration: {
           defaultLocale: 'en',
           details: [],
-          ctaLinkTarget: UrlTarget.sameWindow,
+          ctaLinkTarget: CTALinkTarget.sameWindow,
           locale: 'en',
           title: 'TechCon 2024',
           ctaLink: 'https://techcon2024.com/register',

lib/components/organisms/BannerTile/BannerTile.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 import BannerTile from '.';
-import { TileHeight, TileType, UrlTarget } from '../../../types/tile';
+import { CTALinkTarget, TileHeight, TileType } from '../../../types/tile';
 
 export default {
   title: 'components/organisms/BannerTile',
@@ -27,7 +27,7 @@ Default.args = {
       description: 'Get up to 50% off on selected items!',
       ctaText: 'SHOP NOW',
       ctaLink: 'https://www.example.com',
-      ctaLinkTarget: UrlTarget.sameWindow,
+      ctaLinkTarget: CTALinkTarget.sameWindow,
     },
   },
 };
@@ -48,7 +48,7 @@ WithoutButton.args = {
       title: 'Summer Sale',
       description: 'Get up to 50% off on selected items!',
       ctaLink: 'https://www.example.com',
-      ctaLinkTarget: UrlTarget.sameWindow,
+      ctaLinkTarget: CTALinkTarget.sameWindow,
       ctaText: '',
     },
   },

lib/components/organisms/BannerTile/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Linking, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import BaseBanner from '../../../components/atoms/BaseBanner';
 import { useWllSdk } from '../../../context/WllSdkContext';
+import { useHandleTilePress } from '../../../hooks/useHandleTilePress';
 import { BannerTileConfig, Tile } from '../../../types/tile';
 import { createResponsiveStyle } from '../../../utils/responsiveHelper';
 import { Button, ProgressiveImage, Text } from '../../atoms';
@@ -76,23 +77,11 @@ const BannerTileDescription: React.FC = () => {
 
 const BannerTileCTA: React.FC = () => {
   const { configuration } = useBannerContext();
-  const { ctaText, ctaLink } = configuration as BannerTileConfig;
-
-  const handleLinkPress = async (url: string) => {
-    if (!url) return;
-    if (await Linking.canOpenURL(url)) {
-      Linking.openURL(url);
-    }
-  };
+  const { ctaText, ctaLink, ctaLinkTarget } = configuration as BannerTileConfig;
+  const handlePress = useHandleTilePress(ctaLink, ctaLinkTarget);
 
   if (!ctaText) return null;
-  return (
-    <Button
-      title={ctaText}
-      variant="accent"
-      onPress={() => handleLinkPress(ctaLink as string)}
-    />
-  );
+  return <Button title={ctaText} variant="accent" onPress={handlePress} />;
 };
 
 const styles = StyleSheet.create({

lib/components/organisms/ContentTile/ContentTile.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import ContentTile from '.';
-import { TileHeight, TileType } from '../../../types/tile';
+import { CTALinkTarget, TileHeight, TileType } from '../../../types/tile';
 import { TileWrapper } from '../../../utils/storybookHelpers';
 
 export default {
@@ -131,7 +131,8 @@ HalfSizeTextOnlyWithLink.args = {
     configuration: {
       title: 'Welcome Nick!',
       body: 'Lorem ipsum dolor sit amet',
-      linkURL: 'https://www.example.com',
+      ctaLink: 'https://www.google.com',
+      ctaLinkTarget: CTALinkTarget.sameWindow,
     },
   },
 };
@@ -151,7 +152,8 @@ FullSizeWithLink.args = {
       body: 'Click here to learn more',
       artworkUrl:
         'https://images.pexels.com/photos/1362534/pexels-photo-1362534.jpeg',
-      linkURL: 'https://www.example.com',
+      ctaLink: 'https://www.google.com',
+      ctaLinkTarget: CTALinkTarget.newWindow,
     },
   },
 };

lib/context/WllSdkContext.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { useNavigation } from '../hooks/useNavigationHandler';
 import { TGroup } from '../types/group';
+import { NavigationConfig } from '../types/navigation';
 import { TSection } from '../types/section';
 import { BaseThemeObject, ThemeContextType, ThemeObject } from '../types/theme';
-import { Tile } from '../types/tile';
+import { CTALinkTarget, Tile } from '../types/tile';
 import {
   useGetGroupByID,
   useGetSectionByID,
@@ -38,12 +40,14 @@ type WllSdkContextType = ThemeContextType & {
   getGroupByID: (id: string) => Promise<APIResponse<TGroup>>;
   getSectionByID: (id: string) => Promise<APIResponse<TSection>>;
   getTileByID: (id: string) => Promise<APIResponse<Tile>>;
+  handleNavigation: (link: string, target: CTALinkTarget) => void;
 };
 
 type WllSdkProviderProps = {
   children: React.ReactNode;
   theme?: Partial<BaseThemeObject>;
   config: SDKConfig;
+  navigationConfig?: NavigationConfig;
 };
 
 const createTheme = (baseTheme: Partial<BaseThemeObject> = {}): ThemeObject => {
@@ -84,6 +88,7 @@ export const WllSdkProvider: React.FC<WllSdkProviderProps> = ({
   children,
   theme: providedTheme,
   config,
+  navigationConfig = {},
 }) => {
   const [theme, setThemeState] = React.useState(() =>
     createTheme(providedTheme || {})
@@ -103,15 +108,25 @@ export const WllSdkProvider: React.FC<WllSdkProviderProps> = ({
     id: string
   ) => Promise<APIResponse<Tile>>;
 
+  const handleNavigation = useNavigation(navigationConfig);
+
   const contextValue = React.useMemo(
     () => ({
       theme,
       setTheme,
       getGroupByID,
       getSectionByID,
       getTileByID,
+      handleNavigation,
     }),
-    [theme, setTheme, getGroupByID, getSectionByID, getTileByID]
+    [
+      theme,
+      setTheme,
+      getGroupByID,
+      getSectionByID,
+      getTileByID,
+      handleNavigation,
+    ]
   );
   return (
     <WllSdkContext.Provider value={contextValue}>

lib/hooks/useHandleTilePress.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { useWllSdk } from '../context/WllSdkContext';
+import { CTALinkTarget } from '../types/tile';
+
+export const useHandleTilePress = (
+  ctaLink: string | null | undefined,
+  ctaLinkTarget?: string
+) => {
+  const { handleNavigation } = useWllSdk();
+
+  return useCallback(() => {
+    if (ctaLink) {
+      const target = (ctaLinkTarget as CTALinkTarget) || 'SAME_FRAME';
+      handleNavigation(ctaLink, target);
+    }
+  }, [ctaLink, ctaLinkTarget, handleNavigation]);
+};

lib/hooks/useNavigationHandler.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { NavigationConfig } from '../types/navigation';
+import { CTALinkTarget } from '../types/tile';
+import { parseNavigationLink } from '../utils/navigationHelpers';
+
+export const useNavigation = (config: NavigationConfig) => {
+  const handleNavigation = useCallback(
+    (link: string, ctaTarget: CTALinkTarget) => {
+      const { type, target } = parseNavigationLink(link);
+      const windowTarget = ctaTarget === 'SAME_FRAME' ? '_self' : '_blank';
+
+      if (config.navigationHandlers?.[type]) {
+        return config.navigationHandlers[type]({ target, windowTarget });
+      }
+    },
+    [config]
+  );
+
+  return handleNavigation;
+};