feat: refine creation and registration flows

2026-07-30 09:42:12 +02:00
parent 3fff09ba81
commit 761f3cc200
39 changed files with 1444 additions and 1239 deletions
@@ -0,0 +1,171 @@
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { useGlobal } from 'reactn'
+import { background } from '../assets'
+import BorderGradientButton from '../components/BorderGradientButton'
+import GradientButton from '../components/GradientButton'
+import ItemContainer from '../components/ItemContainer/ItemContainer'
+import { isWeb } from '../hooks/useLayoutType'
+import Page from '../layouts/Page'
+import { Routes } from '../navigation'
+import { navigate, reset } from '../navigation/NavigationService'
+import { Palette } from '../styles'
+import { FONT_FAMILY } from '../styles/Fonts'
+import {
+  completeRegistrationFlow,
+  getExperienceReset,
+  isGlobalListeningLaunchPeriodActive,
+} from '../utils/registrationFlow'
+
+const RegistrationChoice = () => {
+  const [loadingChoice, setLoadingChoice] = useState(null)
+  const [, setTooltip] = useGlobal('_tooltip')
+
+  const openPayment = useCallback((experience) => {
+    navigate(Routes.Payments, {
+      registrationFlow: true,
+      registrationChoice: experience,
+    })
+  }, [])
+
+  const handleListen = useCallback(async () => {
+    if (!isGlobalListeningLaunchPeriodActive()) {
+      openPayment('listen')
+      return
+    }
+
+    try {
+      setLoadingChoice('listen')
+      await completeRegistrationFlow('listen')
+      reset(getExperienceReset('listen'))
+    } catch (error) {
+      setTooltip({
+        type: 'error',
+        text: error?.message || 'Impossible d’ouvrir l’espace Écoute',
+      })
+    } finally {
+      setLoadingChoice(null)
+    }
+  }, [openPayment, setTooltip])
+
+  const handleCreation = useCallback(() => {
+    openPayment('creation')
+  }, [openPayment])
+
+  return (
+    <Page
+      width={isWeb ? 720 : null}
+      backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
+      headerType="NONE"
+      title="Choisis ton expérience"
+    >
+      <View style={styles.pageContent}>
+        <ItemContainer
+          height={isWeb ? 480 : undefined}
+          disableKeyboardHeight
+          style={styles.container}
+        >
+          <View style={styles.content}>
+            <View style={styles.heading}>
+              <Text style={styles.title}>Que veux-tu faire en premier ?</Text>
+              <Text style={styles.subtitle}>
+                Tu pourras passer librement de la création à l’écoute après cette étape.
+              </Text>
+            </View>
+
+            <View style={styles.choice}>
+              <View style={styles.choiceText}>
+                <Text style={styles.choiceTitle}>Création</Text>
+                <Text style={styles.choiceDescription}>
+                  Commence ton parcours avec les 10 crédits offerts à ton inscription.
+                </Text>
+              </View>
+              <BorderGradientButton
+                title="Créer"
+                onPress={handleCreation}
+                disabled={loadingChoice !== null}
+                containerStyle={styles.button}
+              />
+            </View>
+
+            <View style={styles.divider} />
+
+            <View style={styles.choice}>
+              <View style={styles.choiceText}>
+                <Text style={styles.choiceTitle}>Écoute</Text>
+                <Text style={styles.choiceDescription}>
+                  Retrouve les créations de la communauté dans l’espace Streaming.
+                </Text>
+              </View>
+              <GradientButton
+                title={loadingChoice === 'listen' ? 'Ouverture...' : 'Écouter'}
+                onPress={handleListen}
+                disabled={loadingChoice !== null}
+                containerStyle={styles.button}
+              />
+            </View>
+          </View>
+        </ItemContainer>
+      </View>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  pageContent: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: '100%',
+  },
+  content: {
+    gap: 24,
+    paddingHorizontal: 8,
+  },
+  heading: {
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 4,
+  },
+  title: {
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    fontSize: 24,
+    textAlign: 'center',
+  },
+  subtitle: {
+    color: Palette.gray,
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  choice: {
+    gap: 16,
+  },
+  choiceText: {
+    gap: 6,
+  },
+  choiceTitle: {
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    fontSize: 19,
+  },
+  choiceDescription: {
+    color: Palette.gray,
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  button: {
+    width: '100%',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Palette.ultraLightWhite,
+  },
+})
+
+export default RegistrationChoice