fix(fsengagement): RNN2 - fix deeplinking animations from story

packages/fsengagement/package.json

@@ -17,8 +17,9 @@
     "react": "16.8.3",
     "react-native": "0.59.10",
     "react-native-animatable": "^1.3.2",
-    "react-native-device-info": "^0.21.5",
+    "react-native-device-info": "^3.1.4",
     "react-native-fcm": "16.0.0",
+    "react-native-localize": "^1.3.0",
     "react-native-navigation": "2.26.3",
     "react-native-snap-carousel": "^3.8.0",
     "react-native-video": "^4.0.0",

packages/fsengagement/src/EngagementComp.tsx

@@ -7,6 +7,7 @@ import {
   Dimensions,
   FlatList,
   Image,
+  ImageBackground,
   Linking,
   ListRenderItem,
   Platform,
@@ -68,6 +69,12 @@ const styles = StyleSheet.create({
     width: Dimensions.get('screen').width + 45,
     height: Dimensions.get('screen').height + 60
   },
+  fullScreenDeeplink: {
+    width: Dimensions.get('screen').width + 45,
+    height: Dimensions.get('screen').height + 60,
+    backgroundColor: '#000',
+    overflow: 'hidden'
+  },
   backIcon: {
     width: 14,
     height: 25
@@ -141,6 +148,19 @@ const styles = StyleSheet.create({
   },
   activeProgress: {
     backgroundColor: 'rgba(79, 79, 79, .8)'
+  },
+  imageStyle: {
+    transform: [{ scale: 1.06 }],
+    opacity: 0.8,
+    marginTop: 20
+  },
+  deeplinkStory: {
+    marginTop: -(Dimensions.get('screen').height + 60)
+  },
+  storyFooter: {
+    marginBottom: -35,
+    height: 40,
+    backgroundColor: '#fff'
   }
 });
 
@@ -391,7 +411,7 @@ export default function(
     }
 
     renderBlockItem: ListRenderItem<BlockItem> = ({ item, index }) => {
-      if (this.props.animate) {
+      if (this.props.animate || (this.props.json && this.props.json.fullScreenCardImage)) {
         item.wrapper = true;
         item.animateIndex = index;
       }
@@ -425,6 +445,7 @@ export default function(
       }
       if (item.animateIndex) {
         props.animateIndex = item.animateIndex;
+        props.onBack = this.onAnimatedClose;
       }
       if (item.wrapper) {
         delete item.wrapper;
@@ -538,12 +559,19 @@ export default function(
       });
     }
 
+    renderFlatlistFooterPadding = (): JSX.Element => {
+      return (
+        <View style={styles.storyFooter} />
+      );
+    }
+
     // tslint:disable-next-line:cyclomatic-complexity
     renderScrollView(): JSX.Element {
       const { json } = this.props;
       const storyGradient = json && json.storyGradient;
       const tabbedItems = json && json.tabbedItems;
       const empty: any = json && json.empty || {};
+      const fullScreenCardImage = json && json.fullScreenCardImage;
 
       if (this.props.renderType && this.props.renderType === 'carousel') {
         const autoplay = this.props.autoplay || false;
@@ -608,6 +636,36 @@ export default function(
             {this.renderBlocks()}
           </FlatList>
         );
+      } else if (fullScreenCardImage) {
+        return (
+          <Fragment>
+            <ImageBackground
+              source={fullScreenCardImage}
+              imageStyle={styles.imageStyle}
+              style={styles.fullScreenDeeplink}
+            />
+            <FlatList
+              data={this.props.json && this.props.json.private_blocks || []}
+              keyExtractor={this.dataKeyExtractor}
+              renderItem={this.renderBlockItem}
+              style={[styles.growStretch, styles.deeplinkStory]}
+              ListFooterComponent={this.renderFlatlistFooterPadding}
+              ListEmptyComponent={(
+                <Text style={[styles.emptyMessage, empty && empty.textStyle]}>
+                  {empty && empty.message || 'No content found.'}</Text>
+              )}
+              refreshControl={
+                this.props.refreshControl && <RefreshControl
+                  refreshing={this.props.isLoading}
+                  onRefresh={this.props.refreshControl}
+                />
+              }
+            >
+              {this.renderBlocks()}
+            </FlatList>
+          </Fragment>
+        );
+
       }
       return (
         <FlatList
@@ -628,7 +686,6 @@ export default function(
         >
           {this.renderBlocks()}
         </FlatList>
-
       );
     }
 
@@ -707,6 +764,7 @@ export default function(
         json && json.pageCounterStyle ? json.pageCounterStyle : this.pageCounterStyle;
       this.pageNumberStyle =
         json && json.pageNumberStyle ? json.pageNumberStyle : this.pageNumberStyle;
+      const navBarTitleStyle = json && json.navBarTitleStyle || {};
       return (
         <Fragment>
           {this.renderContent()}
@@ -725,7 +783,7 @@ export default function(
             </Animatable.View>
           }
             <Animatable.Text
-              style={[styles.navBarTitle, json.navBarTitleStyle]}
+              style={[styles.navBarTitle, navBarTitleStyle]}
               ref={this.handleNavTitleRef}
               useNativeDriver
             >

packages/fsengagement/src/EngagementService.ts

@@ -2,6 +2,8 @@ import FCM, { FCMEvent } from 'react-native-fcm';
 import AsyncStorage from '@react-native-community/async-storage';
 import FSNetwork from '@brandingbrand/fsnetwork';
 import DeviceInfo from 'react-native-device-info';
+import * as RNLocalize from 'react-native-localize';
+
 import {
   EngagementMessage,
   EngagementProfile,
@@ -148,21 +150,22 @@ export class EngagementService {
       this.profileId = savedProfileId;
       return Promise.resolve(savedProfileId);
     }
-
-    return this.networkClient.post(`/App/${this.appId}/getProfile`, {
-      locale: DeviceInfo.getDeviceLocale(),
-      country: DeviceInfo.getDeviceCountry(),
-      timezone: DeviceInfo.getTimezone(),
-      deviceIdentifier: DeviceInfo.getUniqueID(),
+    const profileInfo: any = {
       accountId,
+      locale: RNLocalize.getLocales() && RNLocalize.getLocales().length &&
+        RNLocalize.getLocales()[0].languageTag,
+      country: RNLocalize.getCountry(),
+      timezone: RNLocalize.getTimeZone(),
+      deviceIdentifier: await DeviceInfo.getUniqueId(),
       deviceInfo: JSON.stringify({
-        model: DeviceInfo.getModel(),
-        appName: DeviceInfo.getBundleId(),
-        appVersion: DeviceInfo.getReadableVersion(),
-        osName: DeviceInfo.getSystemName(),
-        osVersion: DeviceInfo.getSystemVersion()
+        model: await DeviceInfo.getModel(),
+        appName: await DeviceInfo.getBundleId(),
+        appVersion: await DeviceInfo.getReadableVersion(),
+        osName: await DeviceInfo.getSystemName(),
+        osVersion: await DeviceInfo.getSystemVersion()
       })
-    })
+    };
+    return this.networkClient.post(`/App/${this.appId}/getProfile`, profileInfo)
       .then((r: any) => r.data)
       .then((data: any) => {
         this.profileId = data.id;
@@ -178,9 +181,10 @@ export class EngagementService {
       });
   }
 
-  setPushToken(pushToken: string): void {
+  async setPushToken(pushToken: string): Promise<any> {
+    const uniqueId = await DeviceInfo.getUniqueId();
     const device = this.profileData && this.profileData.devices &&
-      this.profileData.devices[DeviceInfo.getUniqueID()];
+      this.profileData.devices[uniqueId];
     if (device) {
       if (!device.pushToken || device.pushToken !== pushToken) {
         this.networkClient
@@ -260,6 +264,7 @@ export class EngagementService {
       JSON.stringify(attributes))
       .then((r: any) => r.data)
       .then((list: any) => list.map((data: any) => {
+        console.log(data.published);
         return {
           id: data.id,
           published: new Date(data.published),

packages/fsengagement/src/carousel/RenderProduct.tsx

@@ -1,7 +1,7 @@
 /* tslint:disable */
 import React, { Component } from 'react';
 import {
-  Dimensions, Image, Text, StyleProp, TextStyle, TouchableOpacity, View
+  Dimensions, Image, Linking, Text, StyleProp, TextStyle, TouchableOpacity, View
 } from 'react-native';
 import styles from './SliderEntry.style';
 
@@ -14,6 +14,7 @@ export interface RenderProductProps {
   even?: boolean;
   priceStyle?: StyleProp<TextStyle>;
   titleStyle?: StyleProp<TextStyle>;
+  onBackPress?: () => void;
 }
 
 const { height: viewportHeight } = Dimensions.get('window');
@@ -28,8 +29,23 @@ export default class RenderProduct extends Component<RenderProductProps> {
       />
     );
   }
-  onImagePress = (): void => {
-
+  onProductPress = (): void => {
+    const { data } = this.props;
+    if (!data.deepLinkUrl) {
+      return;
+    }
+    const deeplink = data.deepLinkUrl + data.productId;
+    Linking.canOpenURL(deeplink).then(supported => {
+      if (!supported) {
+        alert('An error occurred: can\'t handle url ' + deeplink);
+        return false;
+      } else {
+        if (this.props.onBackPress) {
+          this.props.onBackPress();
+        }
+        return Linking.openURL(deeplink);
+      }
+    }).catch(err => alert('An error occurred: ' + err));
   }
   render() {
     const {
@@ -65,7 +81,7 @@ export default class RenderProduct extends Component<RenderProductProps> {
       <TouchableOpacity
         activeOpacity={1}
         style={itemStyle}
-        onPress={this.onImagePress}
+        onPress={this.onProductPress}
       >
         <View style={styles.imageContainerNoCard}>
           {this.image}

packages/fsengagement/src/carousel/SliderEntry.style.ts

@@ -64,6 +64,7 @@ export default StyleSheet.create({
   subtitle: {
     marginTop: 6,
     color: colors.black,
-    fontSize: 12
+    fontSize: 12,
+    fontFamily: 'Arial-BoldMT'
   }
 });

packages/fsengagement/src/inboxblocks/CTABlock.tsx

@@ -49,6 +49,8 @@ export interface CTABlockProps extends ScreenProps, EmitterProps {
   textStyle?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   actions: Action;
+  animateIndex?: number;
+  onBack?: () => void;
 }
 
 export default class CTABlock extends Component<CTABlockProps> {
@@ -80,7 +82,14 @@ export default class CTABlock extends Component<CTABlockProps> {
 
   handleActionNoStory = (actions: Action) => {
     const { handleAction, cardActions } = this.context;
+    if (actions && !actions.value) {
+      return;
+    }
     if (actions && actions.type) {
+      if (this.props.animateIndex && this.props.onBack && !~actions.value.indexOf('applyPromo')) {
+        this.props.onBack();
+      }
+
       return handleAction({
         ...actions,
         name: this.props.name,

packages/fsengagement/src/inboxblocks/FullScreenImageCard.tsx

@@ -153,31 +153,32 @@ export default class FullScreenImageCard extends Component<FullScreenCardProps>
     const { handleAction } = this.context;
     const { actions, story, storyGradient, storyType } = this.props;
 
-    if (!(story && story.tabbedItems && story.tabbedItems.length)) {
-      this.AnimatedImage.transitionTo({
-        scale: 1.2,
-        opacity: 0.75
-      }, 700, 'ease-out');
-    }
-
-    this.AnimatedText.transitionTo({
-      opacity: 0
-    }, 320, 'linear');
-
-    this.props.AnimatedPageCounter.transitionTo(
-      { opacity: 0 },
-      400, 'linear');
-
-    this.props.AnimatedNavTitle.transitionTo(
-      { opacity: 0, translateY: -10 },
-      400, 'linear');
-
     // if there is a story attached and either
     //    1) no actions object
     //    2) actions.type is null or 'story' (new default tappable cards)
     if (story &&
       (!actions || (actions && (actions.type === null || actions.type === 'story')))
     ) {
+
+      if (!(story && story.tabbedItems && story.tabbedItems.length)) {
+        this.AnimatedImage.transitionTo({
+          scale: 1.2,
+          opacity: 0.75
+        }, 700, 'ease-out');
+      }
+
+      this.AnimatedText.transitionTo({
+        opacity: 0
+      }, 320, 'linear');
+
+      this.props.AnimatedPageCounter.transitionTo(
+        { opacity: 0 },
+        400, 'linear');
+
+      this.props.AnimatedNavTitle.transitionTo(
+        { opacity: 0, translateY: -10 },
+        400, 'linear');
+
       this.handleStoryAction({
         ...story,
         storyGradient,