From 91d621332e77c45e234c9bd27d84037f9452908d Mon Sep 17 00:00:00 2001 From: Pierre A Date: Wed, 10 Jul 2024 15:04:42 +0200 Subject: [PATCH] feat(admin-react):show account setup screen on first AAP login --- packages/reva-admin-react/package-lock.json | 14 ++-- .../public/components/account-setup.svg | 23 +++++++ .../account-setup/AccountSetup.tsx | 57 ++++++++++++++++ .../account-setup/accountSetup.hook.tsx | 29 ++++++++ .../reva-admin-react/src/app/(aap)/layout.tsx | 68 +++++++++++++++++++ 5 files changed, 184 insertions(+), 7 deletions(-) create mode 100644 packages/reva-admin-react/public/components/account-setup.svg create mode 100644 packages/reva-admin-react/src/app/(aap)/_components/account-setup/AccountSetup.tsx create mode 100644 packages/reva-admin-react/src/app/(aap)/_components/account-setup/accountSetup.hook.tsx create mode 100644 packages/reva-admin-react/src/app/(aap)/layout.tsx diff --git a/packages/reva-admin-react/package-lock.json b/packages/reva-admin-react/package-lock.json index 7e39d8186..4f9f6f3e0 100644 --- a/packages/reva-admin-react/package-lock.json +++ b/packages/reva-admin-react/package-lock.json @@ -3408,20 +3408,20 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.29.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.29.0.tgz", - "integrity": "sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==", + "version": "5.50.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.50.1.tgz", + "integrity": "sha512-lpfhKPrJlyV2DSVcQb/HuozH3Av3kws4ge22agx+lNGpFkS4vLZ7St0l3GLwlAD+bqB+qXGex3JdRKUNtMviEQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "5.29.2", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.29.2.tgz", - "integrity": "sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==", + "version": "5.50.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.50.1.tgz", + "integrity": "sha512-s0DW3rVBDPReDDovUjVqItVa3R2nPfUANK9nqGvarO2DwTiY9U4EBTsqizMxItRCoGgK5apeM7D3mxlHrSKpdQ==", "dependencies": { - "@tanstack/query-core": "5.29.0" + "@tanstack/query-core": "5.50.1" }, "funding": { "type": "github", diff --git a/packages/reva-admin-react/public/components/account-setup.svg b/packages/reva-admin-react/public/components/account-setup.svg new file mode 100644 index 000000000..6efbe31bb --- /dev/null +++ b/packages/reva-admin-react/public/components/account-setup.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/reva-admin-react/src/app/(aap)/_components/account-setup/AccountSetup.tsx b/packages/reva-admin-react/src/app/(aap)/_components/account-setup/AccountSetup.tsx new file mode 100644 index 000000000..41d3ba17c --- /dev/null +++ b/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 ( +
+
+

Bienvenue sur votre compte administrateur

+

Pour recevoir vos premières candidatures, commencez par paramétrer votre compte.

+
    +
  • Définissez vos modalités d’accompagnement (présentiel ou à distance)
    • +
  • Sélectionnez vos filières et vos niveaux de certification
    • +
  • Ajoutez des lieux d’accueil et gérez leur visibilité dans les recherches
    • +
+

💡 Quand vous ajoutez un nouveau lieu d’accueil, pensez à utiliser une nouvelle adresse mail. Sinon, vous rencontrerez des difficultés pour vous connecter.

+ +
+
AAP logo
+
+ ); +} diff --git a/packages/reva-admin-react/src/app/(aap)/_components/account-setup/accountSetup.hook.tsx b/packages/reva-admin-react/src/app/(aap)/_components/account-setup/accountSetup.hook.tsx new file mode 100644 index 000000000..607880119 --- /dev/null +++ b/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 }; +}; diff --git a/packages/reva-admin-react/src/app/(aap)/layout.tsx b/packages/reva-admin-react/src/app/(aap)/layout.tsx new file mode 100644 index 000000000..8dd1df2f2 --- /dev/null +++ b/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

Chargement...

; + } + + if ( + isGestionnaireMaisonMereAAP && + accountWithMaisonMereResponse?.account_getAccountForConnectedUser + ?.maisonMereAAP?.showAccountSetup && + isFeatureActive("AAP_INTERVENTION_ZONE_UPDATE") + ) { + return ( + + ); + } + + return
{children}
; +}; + +export default AapLayout;