From 0ed99b840d8de13465f010a6434dea50c72b3f62 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 3 Jul 2024 19:05:19 -0700
Subject: New user progress guides (#4716)

* Add the animated checkmark svg

* Add progress guide list and task components

* Add ProgressGuide Toast component

* Implement progress-guide controller

* Add 7 follows to the progress guide

* Wire up action captures

* Wire up progress-guide persistence

* Trigger progress guide on account creation

* Clear the progress guide from storage on complete

* Add progress guide interstitial, put behind gate

* Fix: read progress guide state from prefs

* Some defensive type checks

* Create separate toast for completion

* List tweaks

* Only show on Discover

* Spacing and progress tweaks

* Completely hide when complete

* Capture the progress guide in local state, and only render toasts while guide is active

* Fix: ensure persisted hydrates into local state

* Gate

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 src/components/ProgressGuide/Task.tsx | 50 +++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/ProgressGuide/Task.tsx

(limited to 'src/components/ProgressGuide/Task.tsx')

diff --git a/src/components/ProgressGuide/Task.tsx b/src/components/ProgressGuide/Task.tsx
new file mode 100644
index 000000000..d286b8842
--- /dev/null
+++ b/src/components/ProgressGuide/Task.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import {View} from 'react-native'
+import * as Progress from 'react-native-progress'
+
+import {atoms as a, useTheme} from '#/alf'
+import {AnimatedCheck} from '../anim/AnimatedCheck'
+import {Text} from '../Typography'
+
+export function ProgressGuideTask({
+  current,
+  total,
+  title,
+  subtitle,
+}: {
+  current: number
+  total: number
+  title: string
+  subtitle?: string
+}) {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_row, a.gap_sm, !subtitle && a.align_center]}>
+      {current === total ? (
+        <AnimatedCheck playOnMount fill={t.palette.primary_500} width={24} />
+      ) : (
+        <Progress.Circle
+          progress={current / total}
+          color={t.palette.primary_400}
+          size={20}
+          thickness={3}
+          borderWidth={0}
+          unfilledColor={t.palette.contrast_50}
+        />
+      )}
+
+      <View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}>
+        <Text style={[a.text_sm, a.font_semibold, a.leading_tight]}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
+            {subtitle}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
-- 
cgit 1.4.1