fix of the day, payment + sub + music generation

src/screens/Profile/ManageSubscription.js

@@ -12,6 +12,8 @@ import { useUserData } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { formatDate, toDate } from "../../utils/dateFormatting";
+import { Image as ExpoImage } from "expo-image";
+import { isWeb } from "../../hooks/useLayoutType";
 
 const FUNCTIONS_REGION = "europe-west1";
 
@@ -183,9 +185,9 @@ const ManageSubscription = ({ navigation }) => {
       setRemoteError(null);
 
       try {
-        const callable = getFunctionsClient(
-          FUNCTIONS_REGION,
-        ).httpsCallable("subscription-getActiveSubscription");
+        const callable = getFunctionsClient(FUNCTIONS_REGION).httpsCallable(
+          "subscription-getActiveSubscription",
+        );
         const { data } = await callable();
         if (!isMounted) {
           return;
@@ -232,7 +234,9 @@ const ManageSubscription = ({ navigation }) => {
       pickString(currentUserData?.stripeSubscriptionStatus) ||
       pickString(remoteSubscription?.status) ||
       pickString(currentUserData?.stripeSubscription?.status) ||
-      pickString(currentUserData?.stripeSubscription?.stripeSubscriptionStatus) ||
+      pickString(
+        currentUserData?.stripeSubscription?.stripeSubscriptionStatus,
+      ) ||
       pickString(rawSubscription?.status) ||
       null;
 
@@ -349,8 +353,7 @@ const ManageSubscription = ({ navigation }) => {
         ? computeFirstAnnualGrantFromCreation(createdAtDate)
         : null;
     const futureFallbackGrant =
-      fallbackInitialGrant &&
-      fallbackInitialGrant.getTime() >= now.getTime()
+      fallbackInitialGrant && fallbackInitialGrant.getTime() >= now.getTime()
         ? fallbackInitialGrant
         : null;
 
@@ -418,9 +421,9 @@ const ManageSubscription = ({ navigation }) => {
     setSuccessMessage(null);
 
     try {
-      const callable = getFunctionsClient(
-        FUNCTIONS_REGION,
-      ).httpsCallable("subscription-cancelActiveSubscription");
+      const callable = getFunctionsClient(FUNCTIONS_REGION).httpsCallable(
+        "subscription-cancelActiveSubscription",
+      );
       const payload = subscriptionInfo.subscriptionId
         ? { subscriptionId: subscriptionInfo.subscriptionId }
         : {};
@@ -446,9 +449,7 @@ const ManageSubscription = ({ navigation }) => {
         error?.message || error,
       );
       const message =
-        error?.message ||
-        error?.codeMessage ||
-        "Impossible d'annuler l'abonnement pour le moment.";
+        error?.message || "Impossible d'annuler l'abonnement pour le moment.";
       setErrorMessage(message);
     } finally {
       setIsCancelling(false);
@@ -491,14 +492,17 @@ const ManageSubscription = ({ navigation }) => {
   const cancelButtonTitle = subscriptionInfo.cancelAtPeriodEnd
     ? "Annulation programmée"
     : isCancelling
-    ? "Annulation..."
-    : "Annuler l'abonnement";
+      ? "Annulation..."
+      : "Annuler l'abonnement";
 
   const cancelTitleColor = subscriptionInfo.cancelAtPeriodEnd
     ? Palette.grayMid
     : Palette.red;
 
-  const backgroundImage = background.bgTrans;
+  const HOME_BACKGROUND_WIDTH = isWeb ? 1280 : 520;
+  const HOME_BACKGROUND_HEIGHT = isWeb ? 760 : 360;
+  const HOME_BACKGROUND_STYLE_WIDTH = HOME_BACKGROUND_WIDTH + 120;
+  const HOME_BACKGROUND_STYLE_HEIGHT = HOME_BACKGROUND_HEIGHT + 80;
 
   return (
     <Page
@@ -506,8 +510,27 @@ const ManageSubscription = ({ navigation }) => {
       title="Mon abonnement"
       scrollEnabled
       backgroundColor={PAGE_BACKGROUND_COLOR}
-      backgroundImg={backgroundImage}
+      // backgroundImg={backgroundImage}
     >
+      <ExpoImage
+        source={background.bgTrans}
+        contentFit="cover"
+        style={{
+          width: HOME_BACKGROUND_STYLE_WIDTH,
+          height: HOME_BACKGROUND_STYLE_HEIGHT,
+          borderRadius: 22,
+          overflow: "hidden",
+          position: "absolute",
+          top: isWeb ? "45%" : "50%",
+          left: "50%",
+          transform: [
+            { translateX: -HOME_BACKGROUND_STYLE_WIDTH / 2 },
+            { translateY: -HOME_BACKGROUND_STYLE_HEIGHT / 2 },
+          ],
+          pointerEvents: "none",
+          zIndex: 0,
+        }}
+      />
       <View style={styles.container}>
         {subscriptionInfo.hasAnySubscription ? (
           <>
@@ -645,7 +668,6 @@ const ManageSubscription = ({ navigation }) => {
               containerStyle={styles.cancelButton}
               titleStyle={{ color: cancelTitleColor }}
             />
-
           </>
         ) : (
           <View style={styles.card}>