Merge pull request #11632 from artsy/feat/add-infinite-discovery-interaction-onboarding

feat: add onboarding animation

Author: araujobarret

src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx

@@ -15,17 +15,32 @@ import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSav
 import { GlobalStore } from "app/store/GlobalStore"
 import { Schema } from "app/utils/track"
 import { sizeToFit } from "app/utils/useSizeToFit"
-import { memo } from "react"
+import { memo, useEffect } from "react"
+import { ViewStyle } from "react-native"
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 
 interface InfiniteDiscoveryArtworkCardProps {
   artwork: InfiniteDiscoveryArtworkCard_artwork$key
+  containerStyle?: ViewStyle
+  // This is only used for the onboarding animation
+  isSaved?: boolean
 }
 
 export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCardProps> = memo(
-  ({ artwork: artworkProp }) => {
+  ({ artwork: artworkProp, containerStyle, isSaved: isSavedProp }) => {
     const { width: screenWidth, height: screenHeight } = useScreenDimensions()
+    const saveAnimationProgress = useSharedValue(0)
+
     const { trackEvent } = useTracking()
     const color = useColor()
     const { incrementSavedArtworksCount, decrementSavedArtworksCount } =
@@ -36,7 +51,7 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
       artworkProp
     )
 
-    const { isSaved, saveArtworkToLists } = useSaveArtworkToArtworkLists({
+    const { isSaved: isSavedToArtworkList, saveArtworkToLists } = useSaveArtworkToArtworkLists({
       artworkFragmentRef: artwork,
       onCompleted: (isArtworkSaved) => {
         trackEvent({
@@ -58,6 +73,35 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
       },
     })
 
+    const isSaved = isSavedProp !== undefined ? isSavedProp : isSavedToArtworkList
+
+    const animatedSaveButtonStyles = useAnimatedStyle(() => {
+      return {
+        transform: [
+          {
+            scale: interpolate(saveAnimationProgress.value, [0, 0.5, 1], [1, 1.2, 1]),
+          },
+        ],
+      }
+    })
+
+    useEffect(() => {
+      saveAnimationProgress.value = withTiming(isSavedProp ? 1 : 0, {
+        duration: 300,
+      })
+    }, [isSavedProp])
+
+    const savedArtworkAnimationStyles = useAnimatedStyle(() => {
+      return {
+        opacity: isSavedProp
+          ? withSequence(
+              withTiming(1, { duration: 300, easing: Easing.linear }),
+              withDelay(500, withTiming(0, { duration: 300, easing: Easing.linear }))
+            )
+          : 0,
+      }
+    })
+
     if (!artwork) {
       return null
     }
@@ -71,7 +115,7 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
     const size = sizeToFit({ width, height }, { width: screenWidth, height: MAX_ARTWORK_HEIGHT })
 
     return (
-      <Flex backgroundColor="white100" width="100%" style={{ borderRadius: 10 }}>
+      <Flex backgroundColor="white100" width="100%" style={containerStyle}>
         <Flex mx={2} my={1}>
           <ArtistListItemContainer
             artist={artwork.artists?.[0]}
@@ -83,6 +127,23 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
           />
         </Flex>
         <Flex alignItems="center" minHeight={MAX_ARTWORK_HEIGHT} justifyContent="center">
+          <Animated.View
+            style={[
+              {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "rgba(255, 255, 255, 0.5)",
+                justifyContent: "center",
+                alignItems: "center",
+                zIndex: 100,
+              },
+              savedArtworkAnimationStyles,
+            ]}
+          >
+            <HeartFillIcon height={64} width={64} fill="white100" />
+          </Animated.View>
+
           {!!src && <Image src={src} height={size.height} width={size.width} />}
         </Flex>
         <Flex flexDirection="row" justifyContent="space-between" p={1} mx={2}>
@@ -124,12 +185,14 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
               }}
             >
               {!!isSaved ? (
-                <HeartFillIcon
-                  testID="filled-heart-icon"
-                  height={HEART_ICON_SIZE}
-                  width={HEART_ICON_SIZE}
-                  fill="blue100"
-                />
+                <Animated.View style={animatedSaveButtonStyles}>
+                  <HeartFillIcon
+                    testID="filled-heart-icon"
+                    height={HEART_ICON_SIZE}
+                    width={HEART_ICON_SIZE}
+                    fill="blue100"
+                  />
+                </Animated.View>
               ) : (
                 <HeartIcon
                   testID="empty-heart-icon"

src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryOnboarding.tsx

@@ -1,51 +1,97 @@
-import {
-  Button,
-  Flex,
-  HeartIcon,
-  Spacer,
-  Text,
-  useScreenDimensions,
-  useSpace,
-} from "@artsy/palette-mobile"
+import { Flex, LinkText, Spacer, Text, useSpace } from "@artsy/palette-mobile"
+import { InfiniteDiscoveryArtworkCard } from "app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard"
+import { Swiper, SwiperRefProps } from "app/Scenes/InfiniteDiscovery/Components/Swiper/Swiper"
+import { InfiniteDiscoveryArtwork } from "app/Scenes/InfiniteDiscovery/InfiniteDiscovery"
 import { GlobalStore } from "app/store/GlobalStore"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { Modal } from "react-native"
-import { FlatList } from "react-native-gesture-handler"
 import LinearGradient from "react-native-linear-gradient"
+import { useSharedValue } from "react-native-reanimated"
 import { SafeAreaView } from "react-native-safe-area-context"
 
-export const InfiniteDiscoveryOnboarding: React.FC<{}> = () => {
+interface InfiniteDiscoveryOnboardingProps {
+  artworks: InfiniteDiscoveryArtwork[]
+}
+
+const ONBOARDING_SWIPE_ANIMATION_DURATION = 1500
+const ONBOARDING_ANIMATION_DELAY = 500
+const ONBOARDING_SAVED_HINT_DURATION = 1500
+
+export const InfiniteDiscoveryOnboarding: React.FC<InfiniteDiscoveryOnboardingProps> = ({
+  artworks,
+}) => {
+  const space = useSpace()
+  const [showSavedHint, setShowSavedHint] = useState(false)
+
+  const swiperRef = useRef<SwiperRefProps>(null)
+
+  const cards = useMemo(() => {
+    return artworks.map((artwork, i) => (
+      <InfiniteDiscoveryArtworkCard
+        artwork={artwork}
+        key={artwork.internalID}
+        containerStyle={{
+          paddingVertical: space(1),
+          borderRadius: 10,
+          shadowRadius: 3,
+          shadowColor: "black",
+          shadowOpacity: 0.2,
+          shadowOffset: { height: 0, width: 0 },
+        }}
+        // Only show the saved hint for the upper card - since the cards are reverted in the swiper,
+        // the upper card index is the last in the array
+        isSaved={i === artworks.length - 1 ? showSavedHint : false}
+      />
+    ))
+  }, [artworks, showSavedHint])
+
   const [isVisible, setIsVisible] = useState(false)
+  const isRewindRequested = useSharedValue(false)
 
   const hasInteractedWithOnboarding = GlobalStore.useAppState(
     (state) => state.infiniteDiscovery.hasInteractedWithOnboarding
   )
 
-  console.log({ hasInteractedWithOnboarding })
   useEffect(() => {
     setTimeout(() => {
       if (!hasInteractedWithOnboarding) {
         setIsVisible(true)
       }
-    }, 2000)
+    }, 1000)
   }, [hasInteractedWithOnboarding])
 
-  const space = useSpace()
-  const { width } = useScreenDimensions()
-  const flatlistRef = useRef<FlatList>(null)
-  const [index, setIndex] = useState(0)
-
-  const handleNext = () => {
-    const newIndex = index + 1
-
-    if (newIndex < STEPS.length) {
-      setIndex(newIndex)
-      flatlistRef.current?.scrollToIndex({ animated: true, index: newIndex })
-    } else {
-      setIsVisible(false)
-    }
+  const showOnboardingAnimation = () => {
+    setShowSavedHint(true)
+
+    setTimeout(() => {
+      swiperRef.current?.swipeLeftThenRight(ONBOARDING_SWIPE_ANIMATION_DURATION)
+    }, ONBOARDING_ANIMATION_DELAY + ONBOARDING_SAVED_HINT_DURATION)
+
+    setTimeout(
+      () => {
+        setShowSavedHint(false)
+      },
+      ONBOARDING_SWIPE_ANIMATION_DURATION +
+        ONBOARDING_SAVED_HINT_DURATION +
+        ONBOARDING_ANIMATION_DELAY
+    )
   }
 
+  useEffect(() => {
+    if (!isVisible) {
+      return
+    }
+
+    // Wait for a second before showing the animation
+    setTimeout(() => {
+      showOnboardingAnimation()
+      // Show the animation every 5 seconds afterwards
+      setInterval(() => {
+        showOnboardingAnimation()
+      }, 5000)
+    }, 1000)
+  }, [setShowSavedHint, isVisible])
+
   return (
     <Modal animationType="fade" visible={isVisible} transparent>
       <Flex flex={1} backgroundColor="transparent">
@@ -63,39 +109,47 @@ export const InfiniteDiscoveryOnboarding: React.FC<{}> = () => {
           <SafeAreaView
             style={{ flex: 1, justifyContent: "flex-end", backgroundColor: "transparent" }}
           >
-            <Flex
-              flex={1}
-              width="100%"
-              backgroundColor="black15"
-              alignSelf="center"
-              justifyContent="center"
-              alignItems="center"
-              opacity={0.7}
-            ></Flex>
-            <Flex justifyContent="flex-end" px={2}>
-              <FlatList
-                ref={flatlistRef}
-                data={STEPS}
-                scrollEnabled={false}
-                style={{ marginHorizontal: -space(2), flexGrow: 0 }}
-                renderItem={({ item }) => (
-                  <Flex width={width} px={2} justifyContent="flex-end">
-                    {item.title}
-                    {item.description}
-                  </Flex>
-                )}
-                keyExtractor={(item) => item.key}
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                pagingEnabled
+            <Flex flex={1} pointerEvents="none">
+              <Swiper
+                containerStyle={{ flex: 1, transform: [{ scale: 0.8 }] }}
+                cards={cards}
+                isRewindRequested={isRewindRequested}
+                onTrigger={() => {}}
+                swipedIndexCallsOnTrigger={2}
+                onNewCardReached={() => {}}
+                onRewind={() => {}}
+                onSwipe={() => {}}
+                ref={swiperRef}
               />
+            </Flex>
+
+            <Flex justifyContent="flex-end" px={2}>
+              <Text>Welcome to Discovery Daily</Text>
+
+              <Spacer y={1} />
+
+              <Text variant="lg-display">
+                Start{" "}
+                <Text variant="lg-display" fontWeight="500">
+                  swiping
+                </Text>{" "}
+                to discover art, and{" "}
+                <Text variant="lg-display" fontWeight="500">
+                  save
+                </Text>{" "}
+                the works you love.
+              </Text>
 
               <Spacer y={2} />
 
               <Flex alignItems="flex-end">
-                <Button variant="outline" onPress={handleNext}>
-                  {index === STEPS.length - 1 ? "Done" : "Next"}
-                </Button>
+                <LinkText
+                  onPress={() => {
+                    setIsVisible(false)
+                  }}
+                >
+                  Tap to get started
+                </LinkText>
               </Flex>
             </Flex>
           </SafeAreaView>
@@ -104,27 +158,3 @@ export const InfiniteDiscoveryOnboarding: React.FC<{}> = () => {
     </Modal>
   )
 }
-
-const STEPS = [
-  {
-    key: "introduction",
-    title: (
-      <Text variant="sm-display" color="black60" mb={0.5}>
-        Welcome to Discover Daily
-      </Text>
-    ),
-    description: <Text variant="lg-display">A new way of browsing works on Artsy.</Text>,
-  },
-  {
-    key: "swipeArtworks",
-    description: <Text variant="lg-display">Swipe artworks to the left to see the next work</Text>,
-  },
-  {
-    key: "favouriteArtworks",
-    description: (
-      <Text variant="lg-display">
-        Press <HeartIcon height={24} width={24} /> when you like an artwork you see
-      </Text>
-    ),
-  },
-]