Add promo cards to HomeScene

Pending close button functionality

src/actions/AccountReferralActions.ts

@@ -215,7 +215,7 @@ export interface ValidateFuncs {
   getVersion: () => string
 }
 
-const getCountryCodeByIp = async (): Promise<string> => {
+export const getCountryCodeByIp = async (): Promise<string> => {
   const apiKey = ENV.IP_API_KEY ?? ''
   let out = '--'
   try {

src/components/ui4/PromoCardUi4.tsx

@@ -2,6 +2,7 @@ import { PromoCard2 } from 'edge-info-server/types'
 import * as React from 'react'
 import { View } from 'react-native'
 import FastImage from 'react-native-fast-image'
+import LinearGradient from 'react-native-linear-gradient'
 
 import { linkReferralWithCurrencies } from '../../actions/WalletListActions'
 import { useHandler } from '../../hooks/useHandler'
@@ -17,9 +18,10 @@ import { CardUi4 } from './CardUi4'
 interface Props {
   navigation: NavigationBase
   promoInfo: PromoCard2
+  // onClose: () => void // TODO: Implement
 }
 
-export function PromoCardUi4Component(props: Props) {
+export const PromoCardUi4 = (props: Props) => {
   const theme = useTheme()
   const styles = getStyles(theme)
   const dispatch = useDispatch()
@@ -45,29 +47,30 @@ export function PromoCardUi4Component(props: Props) {
     dispatch(linkReferralWithCurrencies(navigation, url)).catch(err => showError(err))
   })
 
-  const handleClose = useHandler(() => {})
+  const handleClose = useHandler(() => {
+    // TODO: Implement
+  })
 
   return (
     <CardUi4
       onClose={handleClose}
-      gradientBackground={{ colors: backgroundGradientColors, start: backgroundGradientStart, end: backgroundGradientEnd }}
       nodeBackground={
-        <View style={styles.backgroundContainer}>
+        <LinearGradient colors={backgroundGradientColors} start={backgroundGradientStart} end={backgroundGradientEnd} style={styles.backgroundContainer}>
           <FastImage
             source={{
               uri: imageUri
             }}
             style={styles.backgroundImage}
             resizeMode="stretch"
           />
-        </View>
+        </LinearGradient>
       }
     >
       <View style={styles.contentContainer}>
         <EdgeText numberOfLines={3}>{message}</EdgeText>
         {ctaLabel == null ? null : (
           <View style={styles.cornerButtonContainer}>
-            <ButtonUi4 layout="row" type="secondary" label={ctaLabel} onPress={handlePress} />
+            <ButtonUi4 layout="solo" type="secondary" label={ctaLabel} onPress={handlePress} />
           </View>
         )}
       </View>
@@ -85,11 +88,12 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
   contentContainer: {
     justifyContent: 'space-between',
-    width: '75%', // Leave space for right-justified background image
+    width: '70%', // Leave space for right-justified background image
+    flexGrow: 1,
+    alignSelf: 'stretch',
     margin: theme.rem(0.5)
   },
   cornerButtonContainer: {
-    marginTop: theme.rem(1),
-    alignItems: 'flex-start'
+    alignSelf: 'flex-start'
   }
 }))

src/components/ui4/scenes/HomeSceneUi4.tsx

@@ -1,10 +1,13 @@
-import { asBlogPosts, BlogPost } from 'edge-info-server/types'
+import { asArray } from 'cleaners'
+import { asBlogPosts, asPromoCard2, BlogPost, PromoCard2 } from 'edge-info-server/types'
 import * as React from 'react'
-import { View } from 'react-native'
+import { Platform, View } from 'react-native'
+import { getBuildNumber, getVersion } from 'react-native-device-info'
 import FastImage from 'react-native-fast-image'
 import { isMaestro } from 'react-native-is-maestro'
 import { useSafeAreaFrame } from 'react-native-safe-area-context'
 
+import { getCountryCodeByIp } from '../../../actions/AccountReferralActions'
 import { useAsyncEffect } from '../../../hooks/useAsyncEffect'
 import { useHandler } from '../../../hooks/useHandler'
 import { lstrings } from '../../../locales/strings'
@@ -23,6 +26,7 @@ import { BlogCard } from '../BlogCard'
 import { CarouselUi4 } from '../CarouselUi4'
 import { HomeCardUi4 } from '../HomeCardUi4'
 import { MarketsCardUi4 } from '../MarketsCardUi4'
+import { PromoCardUi4 } from '../PromoCardUi4'
 import { SectionHeaderUi4 } from '../SectionHeaderUi4'
 import { SectionView } from '../SectionView'
 import { SupportCardUi4 } from '../SupportCardUi4'
@@ -60,8 +64,9 @@ export const HomeSceneUi4 = (props: Props) => {
   })
 
   const [blogPosts, setBlogPosts] = React.useState<BlogPost[]>([])
+  const [promos, setPromos] = React.useState<PromoCard2[]>([])
 
-  // Check for AssetStatuses from info server (known sync issues, etc):
+  // Check for BlogPosts from info server:
   React.useEffect(() => {
     fetchInfo(`v1/blogPosts/${config.appId ?? 'edge'}`)
       .then(async res => {
@@ -71,6 +76,61 @@ export const HomeSceneUi4 = (props: Props) => {
       .catch(e => console.log(String(e)))
   }, [])
 
+  // Check for PromoCard2 from info server:
+  React.useEffect(() => {
+    fetchInfo(`v1/promoCards2/${config.appId ?? 'edge'}`)
+      .then(async res => {
+        const infoData = await res.json()
+        const infoPromoCards = asArray(asPromoCard2)(infoData)
+
+        const buildNumber = getBuildNumber()
+        const countryCode = await getCountryCodeByIp()
+        const osType = Platform.OS.toLowerCase()
+        const osVersion = Platform.OS === 'ios' ? Platform.Version : `api${Platform.Version}`
+        const version = getVersion()
+        const currentDate = new Date()
+
+        setPromos(
+          infoPromoCards.filter(infoPromoCard => {
+            const { appVersion, minBuildNum, maxBuildNum, exactBuildNum, countryCodes, excludeCountryCodes, osTypes, osVersions, startIsoDate, endIsoDate } =
+              infoPromoCard
+
+            const isExactVersion = (appVersion != null && appVersion === version) || (exactBuildNum != null && exactBuildNum === buildNumber)
+            const isMinVersion = minBuildNum == null || minBuildNum <= buildNumber
+            const isMaxVersion = maxBuildNum == null || maxBuildNum >= buildNumber
+            const isVersionMatch = isExactVersion || (isMinVersion && isMaxVersion)
+
+            const isCountryInclude =
+              countryCodes == null ||
+              countryCodes.length === 0 ||
+              countryCodes.map(countryCode => countryCode.toLowerCase()).includes(countryCode.toLowerCase())
+            const isCountryExclude =
+              excludeCountryCodes != null &&
+              excludeCountryCodes.length > 0 &&
+              excludeCountryCodes.map(countryCode => countryCode.toLowerCase()).includes(countryCode.toLowerCase())
+            const isCountryCodeMatch = isCountryInclude && !isCountryExclude
+
+            const isOsTypeMatch = osTypes == null || osTypes.length === 0 || osTypes.map(osType => osType.toLowerCase()).includes(osType)
+            const isOsVersionMatch = osVersions == null || osVersions.length === 0 || osVersions.includes(osVersion.toString())
+
+            const startDate = startIsoDate != null && !isNaN(Date.parse(startIsoDate)) ? new Date(startIsoDate) : null
+            const endDate = endIsoDate != null && !isNaN(Date.parse(endIsoDate)) ? new Date(endIsoDate) : null
+
+            // Ignore malformed date range?
+            if ((startIsoDate != null && startDate == null) || (endIsoDate != null && endDate == null))
+              console.error(
+                `PromoCards: Incorrect date ISO format. startIsoDate: ${startIsoDate}, endIsoDate: ${endIsoDate}. Ignoring date range filter and showing promo.`
+              )
+
+            const isWithinDateRange = (startDate == null || currentDate >= startDate) && (endDate == null || currentDate <= endDate)
+
+            return isVersionMatch && isCountryCodeMatch && isOsTypeMatch && isOsVersionMatch && isWithinDateRange
+          })
+        )
+      })
+      .catch(e => console.log(String(e)))
+  }, [])
+
   // Show the password reminder on mount if required:
   useAsyncEffect(
     async () => {
@@ -90,7 +150,7 @@ export const HomeSceneUi4 = (props: Props) => {
             <EdgeAnim enter={{ type: 'fadeInUp', distance: 120 }}>
               <BalanceCardUi4 onViewAssetsPress={handleViewAssetsPress} navigation={navigation} />
             </EdgeAnim>
-            <EdgeAnim style={[styles.homeRowContainer, { height: cardSize }]} enter={{ type: 'fadeInUp', distance: 60 }}>
+            <EdgeAnim style={[styles.homeRowContainer, { height: cardSize }]} enter={{ type: 'fadeInUp', distance: 90 }}>
               <HomeCardUi4
                 title={lstrings.buy_crypto}
                 footer={lstrings.buy_crypto_footer}
@@ -114,7 +174,7 @@ export const HomeSceneUi4 = (props: Props) => {
                 onPress={handleSellPress}
               />
             </EdgeAnim>
-            <EdgeAnim style={[styles.homeRowContainer, { height: cardSize }]} enter={{ type: 'fadeInUp', distance: 20 }}>
+            <EdgeAnim style={[styles.homeRowContainer, { height: cardSize }]} enter={{ type: 'fadeInUp', distance: 60 }}>
               <HomeCardUi4
                 title={lstrings.fio_web3}
                 footer={lstrings.fio_web3_footer}
@@ -139,11 +199,19 @@ export const HomeSceneUi4 = (props: Props) => {
               />
             </EdgeAnim>
           </>
+          {promos == null || promos.length === 0 ? null : (
+            <EdgeAnim style={{ height: theme.rem(11.5) }} enter={{ type: 'fadeInUp', distance: 30 }}>
+              <CarouselUi4 height={theme.rem(10)} width={screenWidth}>
+                {promos.map(promoInfo => (
+                  <PromoCardUi4 navigation={navigation} promoInfo={promoInfo} key={promoInfo.localeMessages[0]} />
+                ))}
+              </CarouselUi4>
+            </EdgeAnim>
+          )}
           <>
             <SectionHeaderUi4 leftTitle={lstrings.title_markets} rightNode={lstrings.see_all} onRightPress={() => navigation.navigate('marketsTab', {})} />
             <MarketsCardUi4 navigation={navigation} numRows={5} />
           </>
-          {/* TODO: Reimplement after info server is published */}
           {blogPosts == null || blogPosts.length === 0 ? null : (
             <>
               <SectionHeaderUi4 leftTitle={lstrings.title_learn} />