wip

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -23,6 +23,7 @@ import { DurationProvider } from "app/Components/Countdown"
 import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 
 import { OpaqueImageView as NewOpaqueImageView } from "app/Components/OpaqueImageView2"
+import { ProgressiveOnboardingSaveArtwork } from "app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork"
 import { GlobalStore } from "app/store/GlobalStore"
 import { PageableRouteProps } from "app/system/navigation/useNavigateToPageableRoute"
 import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBidding"
@@ -350,6 +351,14 @@ export const Artwork: React.FC<ArtworkProps> = ({
                         width={SAVE_ICON_SIZE}
                         fill="blue100"
                       />
+                    ) : itemIndex === 0 ? (
+                      <ProgressiveOnboardingSaveArtwork>
+                        <HeartIcon
+                          testID="empty-heart-icon"
+                          height={SAVE_ICON_SIZE}
+                          width={SAVE_ICON_SIZE}
+                        />
+                      </ProgressiveOnboardingSaveArtwork>
                     ) : (
                       <HeartIcon
                         testID="empty-heart-icon"

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx

@@ -0,0 +1,33 @@
+import { Flex, Popover, Text } from "@artsy/palette-mobile"
+// import { GlobalStore } from "app/store/GlobalStore"
+// import { PROGRESSIVE_ONBOARDING_SAVE_ARTWORK } from "app/store/ProgressiveOnboardingModel"
+import { useState } from "react"
+
+export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => {
+  const [visible, setVisible] = useState(true)
+  // const { dismiss } = GlobalStore.actions.progressiveOnboarding
+  // const { isDismissed } = GlobalStore.useAppState((state) => state.progressiveOnboarding)
+
+  // const visible = isDismissed(PROGRESSIVE_ONBOARDING_SAVE_ARTWORK).status
+
+  if (!visible) {
+    ;<>{children}</>
+  }
+
+  return (
+    <Popover
+      visible={visible}
+      // onDismiss={() => dismiss({ key: "save-artwork" })}
+      onDismiss={() => setVisible(false)}
+      onPressOutside={() => setVisible(false)}
+      title={
+        <Text weight="medium" color="white100">
+          Like what you see?
+        </Text>
+      }
+      content={<Text color="white100">Hit the heart to save an artwork.</Text>}
+    >
+      <Flex>{children}</Flex>
+    </Popover>
+  )
+}

src/app/store/GlobalStoreModel.ts

@@ -12,6 +12,10 @@ import {
   SubmissionModel,
 } from "app/Scenes/SellWithArtsy/utils/submissionModelState"
 import { unsafe__getEnvironment } from "app/store/GlobalStore"
+import {
+  ProgressiveOnboardingModel,
+  getProgressiveOnboardingModel,
+} from "app/store/ProgressiveOnboardingModel"
 import { Action, action, createStore, State, thunkOn, ThunkOn } from "easy-peasy"
 import { ArtsyPrefsModel, getArtsyPrefsModel } from "./ArtsyPrefsModel"
 import { AuthModel, getAuthModel } from "./AuthModel"
@@ -52,6 +56,7 @@ interface GlobalStoreStateModel {
   artworkSubmission: SubmissionModel
   requestedPriceEstimates: RequestedPriceEstimatesModel
   recentPriceRanges: RecentPriceRangesModel
+  progressiveOnboarding: ProgressiveOnboardingModel
 }
 export interface GlobalStoreModel extends GlobalStoreStateModel {
   rehydrate: Action<this, DeepPartial<State<GlobalStoreStateModel>>>
@@ -139,6 +144,7 @@ export const getGlobalStoreModel = (): GlobalStoreModel => ({
   artworkSubmission: getSubmissionModel(),
   requestedPriceEstimates: getRequestedPriceEstimatesModel(),
   recentPriceRanges: getRecentPriceRangesModel(),
+  progressiveOnboarding: getProgressiveOnboardingModel(),
 
   setSessionState: action((state, payload) => {
     state.sessionState = { ...state.sessionState, ...payload }

src/app/store/ProgressiveOnboardingModel.ts

@@ -0,0 +1,62 @@
+import { GlobalStore } from "app/store/GlobalStore"
+import { Action, Computed, action, computed } from "easy-peasy"
+import { uniqBy } from "lodash"
+
+interface DismissedKey {
+  key: ProgressiveOnboardingKey
+  timestamp: number
+}
+
+interface DismissedKeyStatus {
+  status: boolean
+  timestamp: number
+}
+
+export interface ProgressiveOnboardingModel {
+  dismissed: Record<string, DismissedKey[]>
+  dismiss: Action<this, { key: ProgressiveOnboardingKey | readonly ProgressiveOnboardingKey[] }>
+  isDismissed: Computed<this, (key: ProgressiveOnboardingKey) => DismissedKeyStatus>
+}
+
+export const getProgressiveOnboardingModel = (): ProgressiveOnboardingModel => ({
+  dismissed: {},
+  dismiss: action((state, { key }) => {
+    const userId = GlobalStore.useAppState((state) => state.auth.userID)
+    if (!userId) {
+      return
+    }
+
+    const keys = Array.isArray(key) ? key : [key]
+    const timestamp = Date.now()
+
+    state.dismissed = {
+      ...state.dismissed,
+      [userId]: uniqBy(
+        [...state.dismissed[userId], ...keys.map((k) => ({ key: k, timestamp }))],
+        (d) => d.key
+      ),
+    }
+  }),
+  isDismissed: computed(({ dismissed }) => {
+    return (key) => {
+      const userId = GlobalStore.useAppState((state) => state.auth.userID)
+      if (!userId || !dismissed[userId]) {
+        return { status: false, timestamp: 0 }
+      }
+
+      const dismissedKey = dismissed[userId].find((d) => d.key === key)
+
+      return dismissedKey
+        ? { status: true, timestamp: dismissedKey.timestamp }
+        : { status: false, timestamp: 0 }
+    }
+  }),
+})
+
+// Saves
+export const PROGRESSIVE_ONBOARDING_SAVE_ARTWORK = "save-artwork"
+export const PROGRESSIVE_ONBOARDING_SAVE_CHAIN = [PROGRESSIVE_ONBOARDING_SAVE_ARTWORK]
+
+export const PROGRESSIVE_ONBOARDING_KEYS = [PROGRESSIVE_ONBOARDING_SAVE_ARTWORK] as const
+
+export type ProgressiveOnboardingKey = typeof PROGRESSIVE_ONBOARDING_KEYS[number]