feat: new home

src/layouts/Page.js

@@ -8,6 +8,7 @@ import { subBadges } from "../assets";
 import BaseHeader from "../components/BaseHeader";
 import CreditAmount from "../components/CreditAmount";
 import ConnectBtn from "../components/ConnectBtn.js";
+import GradientButton from "../components/GradientButton";
 import CoinPackModal from "../components/modal/CoinPackModal";
 import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
@@ -48,6 +49,8 @@ export default ({
   blurIntensity = 0,
   backgroundColor = "#000",
   showCoin = true,
+  showReturnHome = false,
+  onReturnHome = null,
 }) => {
   const { currentUID = null, currentUserData = null } = useUserData?.() || {};
 
@@ -66,6 +69,8 @@ export default ({
   }, [currentUserData?.coins]);
 
   const showCoinBadge = isWeb && !!currentUID && showCoin;
+  const showReturnHomeButton = isWeb && showReturnHome;
+  const coinBadgeContainerVisible = showCoinBadge || showReturnHomeButton;
   const [isCoinModalVisible, setCoinModalVisible] = React.useState(false);
 
   const subscriptionBadgeSource = React.useMemo(() => {
@@ -80,14 +85,14 @@ export default ({
 
     const nestedSubscription =
       currentUserData?.subscription &&
-        typeof currentUserData.subscription === "object"
+      typeof currentUserData.subscription === "object"
         ? currentUserData.subscription
         : null;
 
     const stripeMetadata =
       currentUserData?.stripeSubscription &&
-        typeof currentUserData.stripeSubscription === "object" &&
-        typeof currentUserData.stripeSubscription.metadata === "object"
+      typeof currentUserData.stripeSubscription === "object" &&
+      typeof currentUserData.stripeSubscription.metadata === "object"
         ? currentUserData.stripeSubscription.metadata
         : null;
 
@@ -100,18 +105,18 @@ export default ({
 
     const nestedCandidates = nestedSubscription
       ? ["level", "plan", "pack", "type"].map((key) =>
-        pickLevel(nestedSubscription?.[key]),
-      )
+          pickLevel(nestedSubscription?.[key])
+        )
       : [];
 
     const metadataCandidates = stripeMetadata
       ? [
-        "level",
-        "subscriptionLevel",
-        "subscription_level",
-        "pack",
-        "Pack",
-      ].map((key) => pickLevel(stripeMetadata?.[key]))
+          "level",
+          "subscriptionLevel",
+          "subscription_level",
+          "pack",
+          "Pack",
+        ].map((key) => pickLevel(stripeMetadata?.[key]))
       : [];
 
     const resolvedLevel = [
@@ -132,6 +137,14 @@ export default ({
     setCoinModalVisible(false);
   }, []);
 
+  const handleReturnHomePress = React.useCallback(() => {
+    if (typeof onReturnHome === "function") {
+      onReturnHome();
+      return;
+    }
+    navigate(Routes.LandingPage);
+  }, [onReturnHome]);
+
   React.useEffect(() => {
     if (!showCoinBadge && isCoinModalVisible) {
       setCoinModalVisible(false);
@@ -170,15 +183,15 @@ export default ({
 
   const resolvedContainerStyle = React.useMemo(
     () => StyleSheet.flatten(containerStyle) || {},
-    [containerStyle],
+    [containerStyle]
   );
   const resolvedHeaderStyle = React.useMemo(
     () => StyleSheet.flatten(headerStyle) || {},
-    [headerStyle],
+    [headerStyle]
   );
   const resolvedContentContainerStyle = React.useMemo(
     () => StyleSheet.flatten(contentContainerStyle) || {},
-    [contentContainerStyle],
+    [contentContainerStyle]
   );
 
   return (
@@ -207,54 +220,45 @@ export default ({
           }}
         />
       ) : null}
-      {showCoinBadge ? (
-        <View
-          style={{
-            position: "absolute",
-            top: gutters,
-            left: gutters,
-            flexDirection: "row",
-            alignItems: "center",
-            gap: 6,
-            zIndex: 20,
-          }}
-        >
-          <Pressable
-            onPress={handleCoinPress}
-            accessibilityRole="button"
-            style={{
-              paddingHorizontal: 14,
-              paddingVertical: 8,
-              borderRadius: 20,
-              backgroundColor: "rgba(12, 14, 18, 0.72)",
-              borderWidth: 1,
-              borderColor: "rgba(255, 255, 255, 0.1)",
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 8,
-            }}
-          >
-            <CreditAmount
-              value={coinBalance}
-              iconSize={22}
-              textStyle={{
-                color: "#ffffff",
-                fontFamily: FONT_FAMILY.InterSemiBold,
-                fontSize: 14,
-              }}
+      {coinBadgeContainerVisible ? (
+        <View style={styles.coinBadgeContainer}>
+          {showCoinBadge ? (
+            <View style={styles.coinRow}>
+              <Pressable
+                onPress={handleCoinPress}
+                accessibilityRole="button"
+                style={styles.coinButton}
+              >
+                <CreditAmount
+                  value={coinBalance}
+                  iconSize={22}
+                  textStyle={{
+                    color: "#ffffff",
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                    fontSize: 14,
+                  }}
+                />
+              </Pressable>
+              {subscriptionBadgeSource ? (
+                <Pressable
+                  onPress={() => navigate(Routes.ManageSubscription)}
+                  accessibilityRole="button"
+                  style={styles.subscriptionBadge}
+                >
+                  <Image
+                    source={subscriptionBadgeSource}
+                    style={{ height: 50, width: 50, resizeMode: "contain" }}
+                  />
+                </Pressable>
+              ) : null}
+            </View>
+          ) : null}
+          {showReturnHomeButton ? (
+            <GradientButton
+              title="retour à l'accueil"
+              onPress={handleReturnHomePress}
+              containerStyle={styles.returnHomeButton}
             />
-          </Pressable>
-          {subscriptionBadgeSource ? (
-            <Pressable
-              onPress={() => navigate(Routes.ManageSubscription)}
-              accessibilityRole="button"
-              style={{ paddingVertical: 4 }}
-            >
-              <Image
-                source={subscriptionBadgeSource}
-                style={{ height: 50, width: 50, resizeMode: "contain" }}
-              />
-            </Pressable>
           ) : null}
         </View>
       ) : null}
@@ -293,11 +297,11 @@ export default ({
           style={{ flex: 1, ...resolvedContentContainerStyle }}
           {...(scrollEnabled
             ? {
-              scrollEventThrottle: 80,
-              showsVerticalScrollIndicator: false,
-              contentContainerStyle: { paddingBottom: responsiveHeight(55) },
-              keyboardDismissMode: "on-drag",
-            }
+                scrollEventThrottle: 80,
+                showsVerticalScrollIndicator: false,
+                contentContainerStyle: { paddingBottom: responsiveHeight(55) },
+                keyboardDismissMode: "on-drag",
+              }
             : {})}
         >
           {children}
@@ -328,3 +332,37 @@ export default ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  coinBadgeContainer: {
+    position: "absolute",
+    top: gutters,
+    left: gutters,
+    alignItems: "flex-start",
+    gap: 10,
+    zIndex: 20,
+  },
+  coinRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  coinButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20,
+    backgroundColor: "rgba(12, 14, 18, 0.72)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  subscriptionBadge: {
+    paddingVertical: 4,
+  },
+  returnHomeButton: {
+    width: 220,
+    alignSelf: "flex-start",
+  },
+});