richie 2.25.1__py2.py3-none-any.whl → 2.26.0__py2.py3-none-any.whl

frontend/js/components/SaleTunnel/index.stories.tsx

@@ -0,0 +1,32 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { CourseFactory, ProductFactory } from 'utils/test/factories/joanie';
+import { SaleTunnel, SaleTunnelProps } from './index';
+
+export default {
+  // component: SaleTunnel,
+  render: (props?: SaleTunnelProps) => {
+    const defaultProps: SaleTunnelProps = {
+      isOpen: true,
+      product: ProductFactory().one(),
+      onClose: () => {},
+      course: CourseFactory().one(),
+      // enrollment?: Enrollment;
+      // product: CredentialProduct | CertificateProduct;
+      // orderGroup?: OrderGroup;
+      // onFinish?: (order: Order) => void;
+    };
+    return (
+      <BaseJoanieAppWrapper>
+        <SaleTunnel {...{ ...defaultProps, ...props }} />
+      </BaseJoanieAppWrapper>
+    );
+  },
+  // argTypes: {},
+} as Meta<typeof SaleTunnel>;
+
+type Story = StoryObj<typeof SaleTunnel>;
+
+export const Default: Story = {
+  args: {},
+};

frontend/js/components/SaleTunnel/index.tsx

@@ -1,203 +1,40 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { useQueryClient } from '@tanstack/react-query';
-import { Modal } from 'components/Modal';
+import { ModalProps } from '@openfun/cunningham-react';
 import {
-  CourseLight,
-  Order,
-  OrderGroup,
   CertificateProduct,
+  CourseLight,
   CredentialProduct,
   Enrollment,
+  Order,
+  OrderGroup,
+  Organization,
+  Product,
   ProductType,
 } from 'types/Joanie';
-import { useOmniscientOrders, useOrders } from 'hooks/useOrders';
-import { IconTypeEnum } from 'components/Icon';
-import WebAnalyticsAPIHandler from 'api/web-analytics';
-import { CourseProductEvent } from 'types/web-analytics';
-import { Manifest, useStepManager } from 'hooks/useStepManager';
-import useProductOrder from 'hooks/useProductOrder';
-import { SaleTunnelContext, SaleTunnelContextType } from './context';
-import { StepBreadcrumb } from './components/StepBreadcrumb';
-import { SaleTunnelStepValidation } from './components/SaleTunnelStepValidation';
-import { SaleTunnelStepPayment } from './components/SaleTunnelStepPayment';
-import { SaleTunnelStepResume } from './components/SaleTunnelStepResume';
-
-const messages = defineMessages({
-  stepValidation: {
-    defaultMessage: 'Validation',
-    description: 'Label of the Validation step',
-    id: 'components.SaleTunnel.stepValidation',
-  },
-  stepPayment: {
-    defaultMessage: 'Payment',
-    description: 'Label of the Payment step',
-    id: 'components.SaleTunnel.stepPayment',
-  },
-  stepResume: {
-    defaultMessage: 'Resume',
-    description: 'Label of the Resume step',
-    id: 'components.SaleTunnel.stepResume',
-  },
-});
-
-type TunnelSteps = 'validation' | 'payment' | 'resume';
+import { CredentialSaleTunnel } from 'components/SaleTunnel/CredentialSaleTunnel';
+import { CertificateSaleTunnel } from 'components/SaleTunnel/CertificateSaleTunnel';
 
-const focusCurrentStep = (container: HTMLElement) => {
-  const currentStep = container.querySelector<HTMLElement>('.StepBreadcrumb [aria-current="step"]');
-  if (currentStep) {
-    currentStep.focus();
-  }
-};
+export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  product: Product;
+  organizations?: Organization[];
 
-export interface SaleTunnelProps {
-  isOpen: boolean;
-  onClose: () => void;
   course?: CourseLight;
   enrollment?: Enrollment;
-  product: CredentialProduct | CertificateProduct;
   orderGroup?: OrderGroup;
   onFinish?: (order: Order) => void;
 }
 
-const SaleTunnel = ({
-  product,
-  course,
-  isOpen = false,
-  onClose,
-  enrollment,
-  orderGroup,
-  onFinish,
-}: SaleTunnelProps) => {
-  const intl = useIntl();
-  const {
-    methods: { refetch: refetchOmniscientOrders },
-  } = useOmniscientOrders();
-  const {
-    methods: { invalidate: invalidateOrders },
-  } = useOrders(undefined, { enabled: false });
-  const key = `${product.type === ProductType.CREDENTIAL ? course!.code : enrollment!.id}+${
-    product.id
-  }`;
-  const queryClient = useQueryClient();
-  const { item: order } = useProductOrder({
-    courseCode: course?.code,
-    enrollmentId: enrollment?.id,
-    productId: product.id,
-  });
-
-  const manifest: Manifest<TunnelSteps> = {
-    start: 'validation',
-    steps: {
-      validation: {
-        icon: IconTypeEnum.CHECKLIST,
-        label: intl.formatMessage(messages.stepValidation),
-        next: 'payment',
-      },
-      payment: {
-        icon: IconTypeEnum.CREDIT_CARD,
-        label: intl.formatMessage(messages.stepPayment),
-        next: 'resume',
-        onEnter: () => {
-          WebAnalyticsAPIHandler()?.sendCourseProductEvent(
-            CourseProductEvent.PAYMENT_STEP_DISPLAYED,
-            key,
-          );
-        },
-      },
-      resume: {
-        icon: IconTypeEnum.CHECK,
-        label: intl.formatMessage(messages.stepResume),
-        next: null,
-        onEnter: () => {
-          WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.PAYMENT_SUCCEED, key);
-          // Once the user has completed the purchase, we need to refetch the orders
-          // to update the ordersQuery cache
-          invalidateOrders();
-          refetchOmniscientOrders();
-          queryClient.invalidateQueries({ queryKey: ['user', 'enrollments'] });
-          onFinish?.(order!);
-        },
-        onExit: () => {
-          handleModalClose();
-        },
-      },
-    },
-  };
-  const { step, next, reset } = useStepManager(manifest);
-
-  const modalRef = useRef<HTMLDivElement | null>(null);
-
-  const handleModalClose = (track: boolean = false) => {
-    if (track) {
-      WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.CLOSE_SALE_TUNNEL, key);
-    }
-    onClose();
-    reset();
-  };
-
-  const context: SaleTunnelContextType = useMemo(() => {
-    if (product.type === ProductType.CREDENTIAL) {
-      return {
-        product: product as CredentialProduct,
-        order,
-        orderGroup,
-        key,
-        course: course!,
-        enrollment: undefined,
-      };
-    } else {
-      return {
-        product: product as CertificateProduct,
-        order,
-        orderGroup,
-        key,
-        course: undefined,
-        enrollment: enrollment!,
-      };
-    }
-  }, [product, order]);
-
-  /**
-   * correctly handle keyboard/screen reader users navigation on step change.
-   * Without this, since elements are removed from the DOM from step to step,
-   * focus is set back to the <body> tag by the browser. We also do this
-   * in the `onAfterOpen` modal prop to correctly focus the first step
-   */
-  useEffect(() => {
-    if (!modalRef.current) {
-      return;
-    }
-    focusCurrentStep(modalRef.current);
-  }, [step]);
-
+/**
+ * This is just a simple wrapper that will render the correct SaleTunnel based on the product type.
+ */
+export const SaleTunnel = (props: SaleTunnelProps) => {
   return (
-    <Modal
-      className="SaleTunnel__modal"
-      isOpen={isOpen}
-      onAfterOpen={(options) => {
-        WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.OPEN_SALE_TUNNEL, key);
-        if (!options) {
-          return;
-        }
-        focusCurrentStep(options.contentEl);
-      }}
-      contentRef={(ref) => (modalRef.current = ref)}
-      onRequestClose={() => handleModalClose(true)}
-      shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc={false}
-      testId="SaleTunnel__modal"
-    >
-      <SaleTunnelContext.Provider value={context}>
-        <div className="SaleTunnel__modal-body">
-          <StepBreadcrumb manifest={manifest} step={step} />
-          {step === 'validation' && <SaleTunnelStepValidation next={next} />}
-          {step === 'payment' && <SaleTunnelStepPayment next={next} />}
-          {step === 'resume' && <SaleTunnelStepResume next={next} />}
-        </div>
-      </SaleTunnelContext.Provider>
-    </Modal>
+    <>
+      {props.product.type === ProductType.CREDENTIAL && (
+        <CredentialSaleTunnel {...props} product={props.product as CredentialProduct} />
+      )}
+      {props.product.type === ProductType.CERTIFICATE && (
+        <CertificateSaleTunnel {...props} product={props.product as CertificateProduct} />
+      )}
+    </>
   );
 };
-
-export default SaleTunnel;

frontend/js/components/SearchInput/index.tsx

@@ -19,7 +19,7 @@ const messages = defineMessages({
  * @param onClick Handler to call when the user clicks on the search icon.
  */
 export const SearchInput = ({
-  inputProps, // just a passthrough from react-autosuggest to react-autosuggest
+  inputProps: { key, ...inputProps }, // just a passthrough from react-autosuggest to react-autosuggest
   onClick = () => {}, // by default, do nothing, this will just remove focus and close suggestions
 }: { inputProps: any; onClick?: () => void } & CommonDataProps) => (
   <div className="search-input">

frontend/js/components/Tabs/_styles.scss

@@ -0,0 +1,34 @@
+$tabs-scheme: map-get($themes, 'default', 'components', 'tabs');
+
+.tabs {
+  display: flex;
+  gap: rem-calc(16px);
+  border-bottom: 2px solid map-get($tabs-scheme, 'border-bottom-color');
+
+  &__tab {
+    margin-bottom: rem-calc(-2px);
+    flex: 0 0 auto;
+  }
+}
+
+.c__button {
+  &--tab {
+    border-bottom: 2px solid transparent;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    &:hover,
+    &:focus-visible,
+    &:active,
+    &.c__button--active,
+    &:disabled {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.c__button--active {
+      border-left-color: transparent;
+      border-top-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+}

frontend/js/components/Tabs/index.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
+import Tabs from './index';
+
+export default {
+  component: Tabs,
+} as Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => {
+    const [tabContent, setTabContent] = useState('This is the first tab content');
+    return (
+      <RouterWrapper>
+        <Tabs initialActiveTabName="first-tab">
+          <Tabs.Tab name="first-tab" onClick={() => setTabContent('This is the first tab content')}>
+            First tab
+          </Tabs.Tab>
+          <Tabs.Tab
+            name="second-tab"
+            onClick={() => setTabContent('This is the second tab content')}
+          >
+            Second tab
+          </Tabs.Tab>
+        </Tabs>
+        {tabContent}
+      </RouterWrapper>
+    );
+  },
+};

frontend/js/components/Tabs/index.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@openfun/cunningham-react';
+import classNames from 'classnames';
+import {
+  Children,
+  Dispatch,
+  PropsWithChildren,
+  ReactElement,
+  SetStateAction,
+  cloneElement,
+  useState,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+import { noop } from 'utils';
+
+interface TabProps extends PropsWithChildren {
+  name: string;
+  href?: string;
+  isActive?: boolean;
+  setActiveTabName?: Dispatch<SetStateAction<string>>;
+  onClick?: () => void;
+}
+
+/**
+ * Tab must be used inside a Tabs component.
+ * `isActive` and `setActiveTabName` shouldn't be given to Tab component.
+ * These props are populated by Tabs parent component.
+ */
+const Tab = ({
+  name,
+  href,
+  onClick,
+  isActive = false,
+  setActiveTabName = noop,
+  children,
+}: TabProps) => {
+  const navigate = useNavigate();
+  const handleOnClick = () => {
+    setActiveTabName?.(name);
+    onClick?.();
+    if (href) {
+      navigate(href);
+    }
+  };
+
+  return (
+    <div className="tabs__tab">
+      <Button
+        color="tertiary-text"
+        onClick={handleOnClick}
+        className={classNames('c__button--tab', {
+          'c__button--active': isActive,
+        })}
+      >
+        {children}
+      </Button>
+    </div>
+  );
+};
+
+interface TabsProps {
+  initialActiveTabName?: string;
+  children: ReactElement<TabProps>[];
+}
+
+const Tabs = ({ initialActiveTabName, children }: TabsProps) => {
+  const [activeTabName, setActiveTabName] = useState(
+    initialActiveTabName ?? children[0].props.name,
+  );
+  return (
+    <div className="tabs" data-testid="tabs-header">
+      {Children.map(children, (child) =>
+        cloneElement(child, { isActive: child.props.name === activeTabName, setActiveTabName }),
+      )}
+    </div>
+  );
+};
+
+Tabs.Tab = Tab;
+
+export default Tabs;

frontend/js/hooks/useCertificates/index.tsx

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
-import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-import { API, Certificate, PaginatedResourceQuery } from 'types/Joanie';
+import { QueryOptions, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { API, Certificate, CertificateResourcesQuery } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 
 const messages = defineMessages({
@@ -16,12 +16,22 @@ const messages = defineMessages({
   },
 });
 
-const props: UseResourcesProps<Certificate, PaginatedResourceQuery, API['user']['certificates']> = {
+const props: UseResourcesProps<
+  Certificate,
+  CertificateResourcesQuery,
+  API['user']['certificates']
+> = {
   queryKey: ['certificates'],
   apiInterface: () => useJoanieApi().user.certificates,
   session: true,
   messages,
 };
 
-export const useCertificates = useResources(props);
+export const useCertificates = (
+  filters: CertificateResourcesQuery,
+  queryOptions?: QueryOptions<Certificate>,
+) => {
+  return useResources(props)(filters, queryOptions);
+};
+
 export const useCertificate = useResource(props);

frontend/js/hooks/useContractArchive/index.ts

@@ -1,4 +1,5 @@
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { CourseProductRelation, Organization } from 'types/Joanie';
 import { browserDownloadFromBlob } from 'utils/download';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { handle } from 'utils/errors/handle';
@@ -50,9 +51,13 @@ const useContractArchive = () => {
           return true;
         }
       },
-      create: async (organizationId: string): Promise<string> => {
+      create: async (
+        organizationId?: Organization['id'],
+        courseProductRelationId?: CourseProductRelation['id'],
+      ): Promise<string> => {
         const response = await api.user.contracts.zip_archive.create({
           organization_id: organizationId,
+          course_product_relation_id: courseProductRelationId,
         });
 
         return extractArchiveId(response.url);

frontend/js/hooks/useCourseRunOrder/index.spec.tsx

@@ -0,0 +1,55 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  CourseRunFactory,
+} from 'utils/test/factories/richie';
+import {
+  CourseLightFactory,
+  CredentialOrderFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import useCourseRunOrder from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+    lms_backends: [
+      {
+        backend: 'joanie',
+        course_regexp: '^.*/api/v1.0((?:/(?:courses|course-runs|products)/[^/]+)+)/?$',
+        endpoint: 'https://joanie.endpoint',
+      },
+    ],
+  }).one(),
+}));
+
+describe('useCourseRunOrder', () => {
+  setupJoanieSession();
+
+  it('should return an order for a joanie product course run', async () => {
+    const product = ProductFactory().one();
+    const joanieCourse = CourseLightFactory().one();
+    const richieCourseRun = CourseRunFactory({
+      resource_link: `https://joanie.endpoint/api/v1.0/courses/${joanieCourse.code}/products/${product.id}`,
+    }).one();
+    const order = CredentialOrderFactory().one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?course_code=${joanieCourse.code}&product_id=${product.id}`,
+      [order],
+    );
+    const { result } = renderHook(() => useCourseRunOrder(richieCourseRun), {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.states.isFetched).toBe(true);
+    });
+
+    expect(result.current.item).toStrictEqual(order);
+  });
+});

frontend/js/hooks/useCourseRunOrder/index.tsx

@@ -0,0 +1,27 @@
+import { isJoanieEnabled } from 'api/joanie';
+import { extractResourceMetadata } from 'api/lms/joanie';
+import { useSession } from 'contexts/SessionContext';
+import { useOrders } from 'hooks/useOrders';
+import { CourseRun } from 'types';
+
+const useCourseRunOrder = (courseRun: CourseRun) => {
+  const { user } = useSession();
+  const resourceLinkResources = extractResourceMetadata(courseRun.resource_link);
+  const isProduct = !!(resourceLinkResources?.course && resourceLinkResources?.product);
+
+  if (!isJoanieEnabled || !isProduct || !user) {
+    return { item: undefined, undefined, states: { fetching: false, isFetched: true } };
+  }
+
+  const {
+    items: orders,
+    states: { fetching, isFetched },
+  } = useOrders({
+    course_code: resourceLinkResources?.course,
+    product_id: resourceLinkResources?.product,
+  });
+
+  return { item: orders.length > 0 ? orders[0] : undefined, states: { fetching, isFetched } };
+};
+
+export default useCourseRunOrder;

frontend/js/hooks/useDashboardAddressForm.tsx

@@ -5,6 +5,7 @@ import * as Yup from 'yup';
 import countries from 'i18n-iso-countries';
 import { Checkbox } from '@openfun/cunningham-react';
 
+import { useEffect } from 'react';
 import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
 import { messages as managementMessages } from 'components/AddressesManagement';
 import { messages as formMessages } from 'components/Form/messages';
@@ -63,6 +64,10 @@ export const useDashboardAddressForm = (address?: Address) => {
   });
   const { register, handleSubmit, formState } = form;
 
+  useEffect(() => {
+    form.reset(address ?? defaultValues);
+  }, [address]);
+
   const FormView = (
     <FormProvider {...form}>
       <Form noValidate>
@@ -143,5 +148,6 @@ export const useDashboardAddressForm = (address?: Address) => {
   return {
     FormView,
     handleSubmit,
+    reset: form.reset,
   };
 };

frontend/js/hooks/useJoanieUserAbilities/index.spec.tsx

@@ -1,14 +1,13 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { JoanieUserProfileFactory } from 'utils/test/factories/joanie';
-import { JoanieUserApiAbilityActions } from 'types/User';
+import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
 import { JoanieUserProfileActions } from 'utils/AbilitiesHelper/types';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { Deferred } from 'utils/test/deferred';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { useJoanieUserAbilities } from '.';
 
@@ -21,9 +20,12 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('useJoanieUserAbilities', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
+  const Wrapper = ({
+    children,
+    joanieUserProfile,
+  }: PropsWithChildren & { joanieUserProfile: JoanieUserProfile }) => (
     <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <QueryClientProvider client={createTestQueryClient({ user: true, joanieUserProfile })}>
         <JoanieSessionProvider>{children}</JoanieSessionProvider>
       </QueryClientProvider>
     </IntlProvider>
@@ -41,27 +43,21 @@ describe('useJoanieUserAbilities', () => {
   });
 
   it("should return an entity with joanie's profile rights", async () => {
-    const responseDeferred = new Deferred();
-    fetchMock.get('https://joanie.endpoint/api/v1.0/users/me/', responseDeferred.promise);
-
     const { result } = renderHook(() => useJoanieUserAbilities(), {
-      wrapper: Wrapper,
-    });
-    expect(result.current).toBeUndefined();
-
-    await act(async () => {
-      responseDeferred.resolve(
-        JoanieUserProfileFactory({
-          abilities: {
-            [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
-            [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
-          },
-        }).one(),
-      );
+      wrapper: ({ children }: PropsWithChildren) => (
+        <Wrapper
+          joanieUserProfile={JoanieUserProfileFactory({
+            abilities: {
+              [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
+              [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
+            },
+          }).one()}
+        >
+          {children}
+        </Wrapper>
+      ),
     });
 
-    await waitFor(() => expect(result.current).not.toBeUndefined());
-
     expect(result.current?.can(JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD)).toBe(true);
     expect(result.current?.cannot(JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD)).toBe(false);
   });

frontend/js/hooks/useMatchMedia.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { matchMedia } from 'utils/indirection/window';
+import { tokens } from 'utils/cunningham-tokens';
 
 /**
  * Hook which listens if a mediaQuery matched.
@@ -34,4 +35,7 @@ const useMatchMedia = (query: string): boolean => {
   return matches;
 };
 
+export const useMatchMediaLg = () =>
+  useMatchMedia(`(max-width: ${tokens.themes.default.theme.breakpoints.lg})`);
+
 export default useMatchMedia;