invite onbording flow

showtime-xyz · Oct 12, 2023 · 500c3e2 · 500c3e2
1 parent 2a02ee3
commit 500c3e2
Show file tree

Hide file tree

Showing 21 changed files with 188 additions and 140 deletions.
diff --git a/apps/next/src/pages/_app.tsx b/apps/next/src/pages/_app.tsx
@@ -38,7 +38,6 @@ import { CreatorChannelsMessageReactionsScreen } from "app/screens/creator-chann
 import { CreatorChannelsSettingsScreen } from "app/screens/creator-channels-settings";
 import { CreatorChannelsShareScreen } from "app/screens/creator-channles-share";
 import { CreatorTokenBuyScreen } from "app/screens/creator-token/buy-creator-token";
-import { InviteCreatorTokenScreen } from "app/screens/creator-token/invite-creator-token";
 import { CreatorTokenInviteSignInScreen } from "app/screens/creator-token/invite-sign-in";
 import { ReviewCreatorTokenScreen } from "app/screens/creator-token/review-creator-token";
 import { CreatorTokensExplanationScreen } from "app/screens/creator-tokens-explanation";
@@ -263,7 +262,6 @@ function App({ Component, pageProps, router }: AppProps) {
         <EditProfileScreen />
         <OnboardingScreen />
         <ReviewCreatorTokenScreen />
-        <InviteCreatorTokenScreen />
         <AddEmailScreen />
         <VerifyPhoneNumberScreen />
         <UnlockedChannelScreen />

diff --git a/apps/next/src/pages/profile/invite-creator-token.tsx b/apps/next/src/pages/profile/invite-creator-token.tsx
@@ -1 +1 @@
-export { Fragment as default } from "react";
+export { default } from "app/pages/creator-token/invite-creator-token";
diff --git a/packages/app/components/creator-token/creator-tokens-share.tsx b/packages/app/components/creator-token/creator-tokens-share.tsx
@@ -10,6 +10,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Avatar } from "@showtime-xyz/universal.avatar";
+import { Button } from "@showtime-xyz/universal.button";
 import { UnLocked, Showtime } from "@showtime-xyz/universal.icon";
 import { useRouter } from "@showtime-xyz/universal.router";
 import {
@@ -37,13 +38,17 @@ import { toast } from "design-system/toast";
 
 import { CloseButton } from "../close-button";
 
+export type TokenShareType = "collected" | "launched" | "channel";
 const { useParam } = createParam<{
   username: string;
+  type: TokenShareType;
 }>();
 
 export const CreatorTokensShareModal = memo(function CreatorTokens() {
   const linearOpaticy = useSharedValue(0);
   const [username] = useParam("username");
+  const [type] = useParam("type");
+
   const { data: userInfo } = useUserProfile({ address: username });
   const profileData = userInfo?.data?.profile;
   const { top } = useSafeAreaInsets();
@@ -52,6 +57,8 @@ export const CreatorTokensShareModal = memo(function CreatorTokens() {
   const viewRef = useRef<any>(null);
   const url = useMemo(() => "", []);
   const { shareImageToIG } = useShareImage(viewRef);
+  console.log(type);
+
   const shareWithTwitterIntent = useCallback(() => {
     Linking.openURL(
       getTwitterIntent({
@@ -114,34 +121,61 @@ export const CreatorTokensShareModal = memo(function CreatorTokens() {
           </View>
           <View tw="mt-6">
             <Text tw="text-center text-2xl font-bold text-gray-900">
-              You just collected 2 tokens!
+              {type === "launched"
+                ? "You just launched your Creator Token!"
+                : type === "collected"
+                ? `You just collected 1 token!`
+                : "Share your Creator Token to grow your channel"}
             </Text>
             <View tw="mt-4 flex-row items-center justify-center px-8">
-              <UnLocked width={14} height={14} color="#000" />
-              <Text tw="ml-1 text-gray-900">Unlocked</Text>
-              <Text
-                tw="mx-1 font-medium"
-                onPress={() => router.push(`/@${profileData?.username}`)}
-              >
-                @{profileData?.username}
-              </Text>
-              {profileData?.verified ? (
+              {type === "launched" ? (
+                <>
+                  <Text
+                    tw="text-gray-900"
+                    onPress={() => router.push(`/@${profileData?.username}`)}
+                  >
+                    Share with your fans to kickstart your channel. Plus, you've
+                    got
+                    <Text
+                      tw="mx-1 font-medium"
+                      onPress={() => router.push(`/@${profileData?.username}`)}
+                    >
+                      {` 3 invites `}
+                    </Text>
+                    for creator friends!
+                  </Text>
+                </>
+              ) : type === "collected" ? (
                 <>
-                  <VerificationBadge
-                    fillColor="#fff"
-                    bgColor="#000"
-                    style={{ marginTop: -2 }}
-                    size={14}
-                    className="inline-block"
-                  />
+                  <UnLocked width={14} height={14} color="#000" />
+                  <Text tw="ml-1 text-gray-900">Unlocked</Text>
+                  <Text
+                    tw="mx-1 font-medium"
+                    onPress={() => router.push(`/@${profileData?.username}`)}
+                  >
+                    @{profileData?.username}
+                  </Text>
+                  {profileData?.verified ? (
+                    <>
+                      <VerificationBadge
+                        fillColor="#fff"
+                        bgColor="#000"
+                        style={{ marginTop: -2 }}
+                        size={14}
+                        className="inline-block"
+                      />
+                    </>
+                  ) : null}
+                  <Text
+                    tw="ml-1 font-medium text-gray-900"
+                    onPress={() => router.push(`/@${profileData?.username}`)}
+                  >
+                    channel!
+                  </Text>
                 </>
-              ) : null}
-              <Text
-                tw="ml-1 font-medium"
-                onPress={() => router.push(`/@${profileData?.username}`)}
-              >
-                channel!
-              </Text>
+              ) : (
+                <></>
+              )}
             </View>
           </View>
         </View>
@@ -151,7 +185,29 @@ export const CreatorTokensShareModal = memo(function CreatorTokens() {
             <InstagramButton onPress={shareSingleImage} />
           ) : null}
           <CopyLinkButton theme="dark" onPress={onCopyLink} />
-          <AccessChannelButton theme="light" tw="mt-4" onPress={viewChannel} />
+          {type === "collected" ? (
+            <AccessChannelButton
+              theme="light"
+              tw="mt-4"
+              onPress={viewChannel}
+            />
+          ) : (
+            <Button
+              theme="light"
+              tw="mt-4"
+              size="regular"
+              onPress={() => {
+                if (Platform.OS === "web") {
+                  router.replace(`/profile/@${username}`);
+                } else {
+                  router.pop();
+                  router.push(`/profile/@${username}`);
+                }
+              }}
+            >
+              View Profile
+            </Button>
+          )}
         </View>
       </SafeAreaView>
       <View

diff --git a/packages/app/components/creator-token/invite-creator-token.tsx b/packages/app/components/creator-token/invite-creator-token.tsx
@@ -9,6 +9,7 @@ import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { ChevronRight } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
 import { useRouter } from "@showtime-xyz/universal.router";
+import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
 import { ScrollView } from "@showtime-xyz/universal.scroll-view";
 import { colors } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
@@ -129,8 +130,11 @@ const InviteCreatorTokenClaimedItem = ({
 };
 
 export const InviteCreatorToken = () => {
+  const { top, bottom } = useSafeAreaInsets();
   return (
-    <ScrollView>
+    <ScrollView
+      contentContainerStyle={{ paddingTop: top + 40, paddingBottom: bottom }}
+    >
       <View tw="p-4">
         <View tw="items-center">
           <InviteCreatorTokenHeader />

diff --git a/packages/app/components/creator-token/review-creator-token.tsx b/packages/app/components/creator-token/review-creator-token.tsx
@@ -6,10 +6,14 @@ import { ErrorText, Fieldset } from "@showtime-xyz/universal.fieldset";
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { AddPhoto } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
+import { useRouter } from "@showtime-xyz/universal.router";
+import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
 import { colors } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
+import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creator-tokens-share-screen";
+import { useUser } from "app/hooks/use-user";
 import { DropFileZone } from "app/lib/drop-file-zone";
 import { useFilePicker } from "app/lib/file-picker";
 
@@ -25,11 +29,20 @@ export const ReviewCreatorToken = () => {
     reValidateMode: "onChange",
     shouldFocusError: true,
   });
+  const router = useRouter();
   const pickFile = useFilePicker();
   const isDark = useIsDarkMode();
-  const handleSubmitForm = () => {};
+  const { user } = useUser();
+  const redirectToCreatorTokensShare = useRedirectToCreatorTokensShare();
+  const handleSubmitForm = () => {
+    if (user?.data.profile.username) {
+      redirectToCreatorTokensShare(user?.data.profile.username, "launched");
+    }
+  };
+  const { top } = useSafeAreaInsets();
+
   return (
-    <View tw="p-4">
+    <View tw="p-4" style={{ paddingTop: top + 20 }}>
       <Text tw="text-2xl font-bold">Review your Token</Text>
       <View tw="h-4" />
       <Text>

diff --git a/packages/app/components/creator-token/self-serve-explainer.tsx b/packages/app/components/creator-token/self-serve-explainer.tsx
@@ -74,7 +74,10 @@ export const SelfServeExplainer = () => {
           tw="w-full"
           onPress={() => {
             if (user?.data.profile.username) {
-              redirectToCreatorTokensShare(user?.data.profile.username);
+              redirectToCreatorTokensShare(
+                user?.data.profile.username,
+                "launched"
+              );
             }
           }}
         >

diff --git a/packages/app/components/home/header.tsx b/packages/app/components/home/header.tsx
@@ -35,8 +35,8 @@ const CreatorTokensBanner = () => {
       </View>
       <Text
         onPress={() => {
-          // router.push("/creator-token/self-serve-explainer");
-          router.push("/creator-token/imalan/invite-sign-in");
+          router.push("/creator-token/self-serve-explainer");
+          // router.push("/creator-token/imalan/invite-sign-in");
         }}
         tw="text-13 ml-2 font-bold text-gray-900 underline"
       >

diff --git a/packages/app/components/profile/profile-top.tsx b/packages/app/components/profile/profile-top.tsx
@@ -51,6 +51,7 @@ type ProfileTopProps = {
   isError: boolean;
   isLoading: boolean;
   savedSongs?: number;
+  isSelf: boolean;
 };
 export const ProfileCover = ({
   uri,
@@ -109,21 +110,17 @@ export const ProfileTop = ({
   isError,
   isLoading,
   savedSongs,
+  isSelf = false,
 }: ProfileTopProps) => {
-  const { mutate: mutateUserProfile } = useUserProfile({ address });
   const isDark = useIsDarkMode();
   const router = useRouter();
-  const userId = useCurrentUserId();
   const name = getProfileName(profileData?.profile);
   const username = profileData?.profile.username;
   const bio = profileData?.profile.bio;
   const { width, height: screenHeight } = useWindowDimensions();
   const contentWidth = useContentWidth();
   const isProfileMdScreen = contentWidth > DESKTOP_PROFILE_WIDTH - 10;
 
-  const profileId = profileData?.profile.profile_id;
-  const isSelf = userId === profileId;
-
   const bioWithMentions = useMemo(() => linkifyDescription(bio), [bio]);
   // for iPhone 14+
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { Fragment as default } from "react";
		export { default } from "app/pages/creator-token/invite-creator-token";