💡 [Feat: Idée] Ajout d'un support pour le "multi-service"

.github/workflows/checks.yml

@@ -18,13 +18,13 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Pnpm setup
-        uses: pnpm/action-setup@v2
+      - name: NPM setup
+        uses: actions/setup-node@v2
         with:
-          version: latest
+          version: 20
 
       - name: Environnement setup
-        run: pnpm install
+        run: npm install
 
       - name: Typescript and Eslint scanning
-        run: pnpm lint
+        run: npm run lint

package.json

@@ -1,6 +1,6 @@
 {
   "name": "papillonvex",
-  "version": "7.8.2",
+  "version": "7.9.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -80,7 +80,7 @@
     "react-native-barcode-svg": "^0.0.15",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-draglist": "^3.6.1",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "^2.22.1",
     "react-native-htmlview": "^0.17.0",
     "react-native-infinite-pager": "^0.3.16",
     "react-native-pager-view": "6.3.0",

src/components/Global/AccountItem.tsx

@@ -0,0 +1,120 @@
+import {Image, StyleProp, Text, View, ViewStyle} from "react-native";
+import { animPapillon } from "@/utils/ui/animations";
+
+import Reanimated, {
+  FadeOut,
+  ZoomIn
+} from "react-native-reanimated";
+import {PrimaryAccount, AccountService} from "@/stores/account/types";
+import {defaultProfilePicture} from "@/utils/ui/default-profile-picture";
+import {Check} from "lucide-react-native";
+import React from "react";
+import {useTheme} from "@react-navigation/native";
+
+const AccountItem: React.FC<{
+  account: PrimaryAccount,
+  additionalStyles?: StyleProp<ViewStyle>,
+  endCheckMark: boolean
+}> = ({
+  account,
+  additionalStyles,
+  endCheckMark
+}) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={{
+        ...(additionalStyles || {} as any),
+        flexDirection: "row",
+        padding: 9,
+        borderStyle: "solid",
+        alignItems: "center",
+      }}
+    >
+      <View
+        style={{
+          width: 30,
+          height: 30,
+          borderRadius: 80,
+          backgroundColor: "#000000",
+          marginRight: 10,
+        }}
+      >
+        <Image
+          source={
+            account.personalization.profilePictureB64 ?
+              { uri: account.personalization.profilePictureB64 } :
+              defaultProfilePicture(account.service, account.identityProvider?.name || "")}
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: 80,
+          }}
+          resizeMode="cover"
+        />
+      </View>
+      <View
+        style={{
+          flexDirection: "column",
+          gap: 2,
+        }}
+      >
+        <View style={{
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          minWidth: "90%",
+          maxWidth: "75%"
+        }}>
+          <Text
+            style={{
+              fontSize: 16,
+              fontFamily: "semibold",
+              color: theme.colors.text,
+              flexShrink: 1
+            }}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {account.studentName?.first || "Utilisateur"}{" "}
+            {account.studentName?.last || ""}
+          </Text>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 15,
+            fontWeight: 500,
+            color: theme.colors.text + "50",
+            fontFamily: "medium",
+            maxWidth: "70%",
+          }}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {AccountService[account.service] !== "Local" ?
+            AccountService[account.service] :
+            account.identityProvider?.name ?? "Compte local"
+          }
+        </Text>
+      </View>
+      {endCheckMark &&
+      <Reanimated.View
+        style={{
+          position: "absolute",
+          right: 15,
+        }}
+        entering={animPapillon(ZoomIn)}
+        exiting={FadeOut.duration(200)}
+      >
+        <Check
+          size={22}
+          strokeWidth={3.0}
+          color={theme.colors.primary}
+        />
+      </Reanimated.View>
+      }
+    </View>
+  );
+};
+
+export default AccountItem;

src/components/Global/AnimatedNumber.tsx

@@ -43,7 +43,7 @@ const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
       }, contentContainerStyle]}
       layout={shouldAnimate ? animPapillon(LinearTransition) : undefined}
     >
-      {value.toString().split("").map((n: number, i: number) => (
+      {value.toString().split("").map((n: string, i: number) => (
         <Reanimated.View
           key={`${value}_${i}`}
           entering={shouldAnimate ? animPapillon(FadeInDown).delay(i * 20 + 20).mass(1).damping(30).stiffness(700) : undefined}
@@ -59,4 +59,4 @@ const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
   );
 };
 
-export default AnimatedNumber;
+export default AnimatedNumber;

src/components/Home/AccountSwitcherContextMenu.tsx

@@ -209,7 +209,7 @@ const ContextMenu: React.FC<{
                         numberOfLines={1}
                         ellipsizeMode="tail"
                       >
-                        {AccountService[account.service] !== "Local" ?
+                        {AccountService[account.service] !== "Local" && account.service !== AccountService.PapillonMultiService ?
                           AccountService[account.service] :
                           account.identityProvider ?
                             account.identityProvider.name :

src/components/News/Beta.tsx

@@ -3,10 +3,10 @@ import { Text } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 
 
-const BetaIndicator = () => {
+const BetaIndicator: React.FC<{ colors?: string[] }> = (props) => {
   return (
     <LinearGradient
-      colors={["#00AADC", "#A6FFC4"]}
+      colors={props.colors || ["#00AADC", "#A6FFC4"]}
       start={[0, 0]}
       end={[0, 2]}
       style={{ borderRadius: 8, paddingHorizontal: 6, paddingVertical: 4 }}
@@ -16,4 +16,4 @@ const BetaIndicator = () => {
   );
 };
 
-export default BetaIndicator;
+export default BetaIndicator;

src/components/Settings/MultiServiceContainerCard.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+
+import { View } from "react-native";
+import LottieView from "lottie-react-native";
+import { NativeItem, NativeList, NativeText } from "../Global/NativeComponents";
+import { LinearGradient } from "expo-linear-gradient";
+import BetaIndicator from "../News/Beta";
+
+const MultiServiceContainerCard = ({ theme }: { theme: any }) => {
+  const { colors } = theme;
+  const animationref = React.useRef<LottieView>(null);
+
+  useEffect(() => {
+    animationref.current?.play();
+  }, []);
+
+  return (
+    <NativeList>
+      <LinearGradient
+        colors={["#cb7712", "#dec46d"]}
+      >
+        <View style={{
+          height: 200,
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+        }}>
+          <NativeText>Maybe une image ici, là j'attend l'avis des #designers</NativeText>
+          {/*<Image*/}
+          {/*  source={require("@/../assets/images/settings/magic_header.png")}*/}
+          {/*  style={{*/}
+          {/*    width: "90%",*/}
+          {/*    height: 230,*/}
+          {/*    resizeMode: "contain",*/}
+          {/*    marginTop: 75,*/}
+          {/*  }}*/}
+          {/*/>*/}
+        </View>
+      </LinearGradient>
+      <NativeItem>
+        <View
+          style={{
+            flexDirection: "row",
+            gap: 10,
+            alignItems: "center",
+          }}
+        >
+          <NativeText variant="title">
+            Activer le multi service
+          </NativeText>
+          <BetaIndicator colors={["#cb7712", "#dec46d"]} />
+        </View>
+        <NativeText variant="subtitle">
+          Rassemble tes services scolaires en un espace virtuel unique, géré par Papillon.
+        </NativeText>
+      </NativeItem>
+    </NativeList>
+  );
+};
+
+export default MultiServiceContainerCard;

src/router/helpers/types.ts

@@ -14,6 +14,7 @@ import {Client} from "pawrd";
 import { Host } from "turboself-api";
 import {Evaluation} from "@/services/shared/Evaluation";
 import { ThemesMeta } from "@/utils/chat/themes/Themes.types";
+import {MultiServiceSpace} from "@/stores/multiService/types";
 
 export type RouteParameters = {
   // welcome.index
@@ -127,6 +128,8 @@ export type RouteParameters = {
   SettingsSubjects: undefined;
   SettingsExternalServices: undefined;
   SettingsMagic: undefined;
+  SettingsMultiService: undefined;
+  SettingsMultiServiceSpace: { space: MultiServiceSpace };
   SettingsFlags: undefined;
   SettingsFlagsInfos: { title: string; value: any };
   SettingsAddons: undefined;

src/router/screens/settings/index.ts

@@ -28,6 +28,8 @@ import SettingsReactions from "@/views/settings/SettingsReactions";
 import TurboselfAccountSelector from "@/views/settings/ExternalAccount/TurboselfAccountSelector";
 import SettingsApparence from "@/views/settings/SettingsApparence";
 import ExternalAliseLogin from "@/views/settings/ExternalAccount/Alise";
+import SettingsMultiService from "@/views/settings/SettingsMultiService";
+import SettingsMultiServiceSpace from "@/views/settings/SettingsMultiServiceSpace";
 
 const settingsScreens = [
   createScreen("Settings", Settings, {
@@ -67,6 +69,12 @@ const settingsScreens = [
   createScreen("SettingsMagic", SettingsMagic, {
     headerTitle: "Papillon Magic",
   }),
+  createScreen("SettingsMultiService", SettingsMultiService, {
+    headerTitle: "Multiservice",
+  }),
+  createScreen("SettingsMultiServiceSpace", SettingsMultiServiceSpace, {
+    headerTitle: "Gérer l'environnement multi-service",
+  }),
   createScreen("SettingsAddons", SettingsAddons, {
     headerTitle: "Extensions",
   }),

src/router/screens/views/index.ts

@@ -65,6 +65,7 @@ export default [
     animation: "slide_from_bottom",
     sheetGrabberVisible: false,
     sheetInitialDetentIndex: 0,
+    // @ts-expect-error IDK why it is a list of number, it should be SheetDetentTypes
     sheetAllowedDetents: [0.5, 1.0],
     headerShown: false,
   }),
@@ -75,6 +76,7 @@ export default [
     animation: "slide_from_bottom",
     sheetGrabberVisible: false,
     sheetInitialDetentIndex: 0,
+    // @ts-expect-error IDK why it is a list of number, it should be SheetDetentTypes
     sheetAllowedDetents: [0.5, 1.0],
     headerShown: false,
   }),
@@ -85,6 +87,7 @@ export default [
     animation: "slide_from_bottom",
     sheetGrabberVisible: true,
     sheetInitialDetentIndex: 0,
+    // @ts-expect-error IDK why it is a list of number, it should be SheetDetentTypes
     sheetAllowedDetents: [0.5, 1.0],
   }),
   createScreen("GradeDocument", GradeDocument, {
@@ -94,6 +97,7 @@ export default [
     animation: "slide_from_bottom",
     sheetGrabberVisible: false,
     sheetInitialDetentIndex: 0,
+    // @ts-expect-error IDK why it is a list of number, it should be SheetDetentTypes
     sheetAllowedDetents: [0.5, 1.0],
     headerShown: Platform.OS !== "ios",
   }),