feat(react):#COCO-5714 beta switch

apps/docs/i18n.ts

@@ -250,7 +250,12 @@ i18n.use(initReactI18next).init({
           'Retrouvez bientôt les dernières actualités liées à votre établissement içi.',
         'homepage.widget.last-infos-list.see.more': 'Voir plus',
         'homepage.widget.last-infos-list.title': 'Dernières actualités',
-        //------------------------------------------------------
+        //----------------- BetaSwitch -----------------
+        'betaSwitch.button': 'Quittez la Bêta',
+        'betaSwitch.title': "L'ancienne version vous manque ?",
+        'betaSwitch.description':
+          'La version classique est toujours là. Revenez-y, vous pouvez repasser sur la bêta à tout moment.',
+        'betaSwitch.error': "Erreur de paramétrage de la page d'accueil",
       },
     },
   },

packages/bootstrap/src/components/homepage/_beta-switch.scss

@@ -0,0 +1,9 @@
+@use '../../abstracts/' as *;
+@use '../../vendors/bootstrap';
+
+.beta-switch {
+  background: linear-gradient(67.55deg, var(--edifice-yellow-200) 0%, var(--edifice-pink-200) 100%);
+  padding: var(--#{$prefix}spacer-16) var(--#{$prefix}spacer-12);
+  border: 1px solid var(--edifice-color-primary-default);
+  border-radius: var(--edifice-border-radius-xl);
+}

packages/bootstrap/src/components/homepage/_index.scss

@@ -1,4 +1,5 @@
-@forward 'school-space';
-@forward 'message-flash';
-@forward 'header';
 @forward '_last-infos-list';
+@forward 'beta-switch';
+@forward 'header';
+@forward 'message-flash';
+@forward 'school-space';

packages/react/src/index.ts

@@ -2,6 +2,7 @@ export * from './components';
 export * from './hooks';
 export * from './modules/modals';
 export * from './modules/multimedia';
+export * from './modules/homepage';
 export * from './providers';
 export * from './types';
 export * from './utilities';

packages/react/src/modules/homepage/components/BetaSwitch/BetaSwitch.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BetaSwitch, BetaSwitchProps } from './BetaSwitch';
+
+const meta: Meta<typeof BetaSwitch> = {
+  title: 'Modules/Homepage/BetaSwitch',
+  component: BetaSwitch,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Ce storybook documente le composant BetaSwitch, un bandeau permettant à l'utilisateur de désactiver la version bêta de la page d'accueil.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BetaSwitch>;
+
+const renderWithProps = (props: BetaSwitchProps) => () => (
+  <div style={{ maxWidth: 640 }}>
+    <BetaSwitch {...props} />
+  </div>
+);
+
+export const Default: Story = {
+  render: renderWithProps({
+    isSwitching: false,
+    onSwitchClick: () => alert('Switch clicked'),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `
+État par défaut du composant.
+<ul>
+<li>Affiche un titre, une description et un bouton</li>
+<li>Le bouton est actif et cliquable</li>
+<li>Callback déclenché au clic sur le bouton</li>
+</ul>`,
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  render: renderWithProps({
+    isSwitching: true,
+    onSwitchClick: () => alert('Switch clicked'),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `État de chargement : le bouton est désactivé et affiche un loader pendant l'appel API.`,
+      },
+    },
+  },
+};

packages/react/src/modules/homepage/components/BetaSwitch/BetaSwitch.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Flex } from '../../../..';
+
+/**
+ * BetaSwitch component displays a banner allowing the user to opt-out
+ * from the beta version of the homepage and switch back to the legacy one.
+ */
+export interface BetaSwitchProps {
+  isSwitching?: boolean;
+  onSwitchClick?: () => void;
+}
+
+export const BetaSwitch = ({
+  isSwitching = false,
+  onSwitchClick,
+}: BetaSwitchProps) => {
+  const { t } = useTranslation();
+  // const { lg } = useBreakpoint();
+
+  return (
+    <div className="beta-switch">
+      <Flex direction="row">
+        <p>
+          <strong>{t('betaSwitch.title')}</strong> {t('betaSwitch.description')}
+        </p>
+        <Button
+          data-testid="beta-switch-button"
+          isLoading={isSwitching}
+          disabled={isSwitching}
+          onClick={onSwitchClick}
+        >
+          {t('betaSwitch.button')}
+        </Button>
+      </Flex>
+    </div>
+  );
+};
+
+BetaSwitch.displayName = 'BetaSwitch';

packages/react/src/modules/homepage/components/BetaSwitch/BetaSwitchContainer.tsx

@@ -0,0 +1,10 @@
+import { BetaSwitch } from './BetaSwitch';
+import { useBetaSwitch } from './useBetaSwitch';
+
+export function BetaSwitchContainer() {
+  const props = useBetaSwitch();
+
+  return <BetaSwitch {...props} />;
+}
+
+BetaSwitchContainer.displayName = 'BetaSwitchContainer';

packages/react/src/modules/homepage/components/BetaSwitch/index.ts

@@ -0,0 +1,2 @@
+export { BetaSwitch } from './BetaSwitch';
+export { BetaSwitchContainer } from './BetaSwitchContainer';

packages/react/src/modules/homepage/components/BetaSwitch/useBetaSwitch.ts

@@ -0,0 +1,35 @@
+import { odeServices } from '@edifice.io/client';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useToast } from '../../../..';
+
+type UserPrefs = { homePage: { betaEnabled: boolean } | null };
+
+function deactivateHomepage() {
+  return odeServices.http().put<UserPrefs>('/userbook/api/preferences', {
+    homePage: { betaEnabled: false },
+  });
+}
+
+export function useBetaSwitch() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  const onSwitchClick = async () => {
+    setIsSwitching(true);
+
+    try {
+      await deactivateHomepage();
+      window.location.reload();
+    } catch {
+      toast.error(t('betaSwitch.error'));
+      setIsSwitching(false);
+    }
+  };
+
+  return {
+    isSwitching,
+    onSwitchClick,
+  };
+}

packages/react/src/modules/homepage/components/index.tsx

@@ -1 +1,2 @@
 export * from './MessageFlashList';
+export * from './BetaSwitch';