feat(admin-react):show account setup screen on first AAP login

packages/reva-admin-react/src/app/(aap)/_components/account-setup/AccountSetup.tsx

@@ -0,0 +1,57 @@
+"use client";
+import Button from "@codegouvfr/react-dsfr/Button";
+import { useAccountSetup } from "./accountSetup.hook";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import Image from "next/image";
+
+export default function AccountSetup({
+  maisonMereAAPId,
+  headAgencyId,
+}: {
+  maisonMereAAPId: string;
+  headAgencyId: string;
+}) {
+  const { updateAccount } = useAccountSetup();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  return (
+    <div className="grid grid-cols-3 grid-rows-1 w-11/12 mx-auto">
+      <div className="col-span-2">
+        <h1 className="">Bienvenue sur votre compte administrateur</h1>
+        <p className="text-lg">Pour recevoir vos premières candidatures, commencez par paramétrer votre compte. </p>
+        <ul className="text-lg ml-4 mb-8">
+            <li>Définissez vos modalités d’accompagnement (présentiel ou à distance)</li>
+            <li>Sélectionnez vos filières et vos niveaux de certification</li>
+            <li>Ajoutez des lieux d’accueil et gérez leur visibilité dans les recherches</li>
+        </ul>
+        <p className="text-sm">💡 Quand vous ajoutez un nouveau lieu d’accueil, pensez à utiliser une nouvelle adresse mail. Sinon, vous rencontrerez des difficultés pour vous connecter.</p>
+        <Button
+          disabled={updateAccount.isPending}
+          className="mt-4"
+          onClick={() => {
+            updateAccount.mutate({
+              showAccountSetup: false,
+              maisonMereAAPId: maisonMereAAPId,
+            }, {
+              onSuccess: () => {
+                // Needed to avoid race condition - Otherwise, candidacy list will render immediately, and because
+                // it performs a router.replace, it will highjack the router.push() below
+                setTimeout(() => {
+                  queryClient.invalidateQueries({ queryKey: ["organisms"] });
+                }, 100);
+                router.push(
+                  `/agencies-settings/${headAgencyId}/informations-generales/distance`,
+                );
+              }
+            });
+          }}
+        >
+          Paramétrer mon compte
+        </Button>
+      </div>
+      <div className="m-auto"><Image src="/admin2/components/account-setup.svg" alt="AAP logo" width={282} height={319} /></div>
+    </div>
+  );
+}

packages/reva-admin-react/src/app/(aap)/_components/account-setup/accountSetup.hook.tsx

@@ -0,0 +1,29 @@
+import { graphql } from "@/graphql/generated";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { useRouter } from "next/navigation";
+
+const updateAccounSetupMutation = graphql(`
+  mutation updateAccountSetupAfterFirstLogin(
+    $data: UpdateMaisonMereAccountSetupInput!
+  ) {
+    organism_updateMaisonMereAccountSetup(data: $data) {
+      showAccountSetup
+    }
+  }
+`);
+
+export const useAccountSetup = () => {
+  const { graphqlClient } = useGraphQlClient();
+
+  const updateAccount = useMutation({
+    mutationFn: (params: {
+      showAccountSetup: boolean;
+      maisonMereAAPId: string;
+    }) => graphqlClient.request(updateAccounSetupMutation, {
+      data: params
+    }),
+  });
+
+  return { updateAccount };
+};

packages/reva-admin-react/src/app/(aap)/layout.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useAuth } from "@/components/auth/auth";
+import { useFeatureflipping } from "@/components/feature-flipping/featureFlipping";
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+import { useQuery } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import AccountSetup from "./_components/account-setup/AccountSetup";
+const accountWithMaisonMereQuery = graphql(`
+  query getAccountInfo {
+    account_getAccountForConnectedUser {
+      organism {
+        id
+      }
+      maisonMereAAP {
+        showAccountSetup
+        id
+        organisms {
+          id
+          isHeadAgency
+          label
+          informationsCommerciales {
+            nom
+          }
+        }
+      }
+    }
+  }
+`);
+
+const AapLayout = ({ children }: { children: ReactNode }) => {
+  const { isGestionnaireMaisonMereAAP } = useAuth();
+  const { isFeatureActive } = useFeatureflipping();
+  const { graphqlClient } = useGraphQlClient();
+
+  const { data: accountWithMaisonMereResponse } = useQuery({
+    queryKey: ["organisms"],
+    queryFn: () => graphqlClient.request(accountWithMaisonMereQuery),
+  });
+
+  if (!accountWithMaisonMereResponse) {
+    return <p>Chargement...</p>;
+  }
+
+  if (
+    isGestionnaireMaisonMereAAP &&
+    accountWithMaisonMereResponse?.account_getAccountForConnectedUser
+      ?.maisonMereAAP?.showAccountSetup &&
+    isFeatureActive("AAP_INTERVENTION_ZONE_UPDATE")
+  ) {
+    return (
+      <AccountSetup
+        headAgencyId={
+          accountWithMaisonMereResponse?.account_getAccountForConnectedUser
+            ?.organism?.id
+        }
+        maisonMereAAPId={
+          accountWithMaisonMereResponse.account_getAccountForConnectedUser
+            .maisonMereAAP.id
+        }
+      />
+    );
+  }
+
+  return <div className="flex flex-col md:flex-row w-full">{children}</div>;
+};
+
+export default AapLayout;