richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/DashboardItem/_styles.scss

@@ -40,6 +40,16 @@
       &__code {
         order: 1;
       }
+
+      &__more {
+        position: absolute;
+        right: 1rem;
+        top: 0.5rem;
+
+        .selector__list {
+          right: -1rem;
+        }
+      }
     }
 
     &__status {
@@ -52,6 +62,11 @@
       }
     }
   }
+
+  &__button {
+    justify-content: center;
+    min-width: rem-calc(140px);
+  }
 }
 
 .dashboard-sub-item-list {
@@ -116,15 +131,21 @@
     padding: 0.5rem 1rem;
     min-height: 3.75rem;
 
+    &:first-child {
+      border-top: 0;
+    }
+
     @include media-breakpoint-down(sm) {
       flex-direction: column;
 
-      .button {
+      .button,
+      .dashboard-item__button {
         width: 100%;
       }
     }
 
-    .button {
+    .button,
+    .dashboard-item__button {
       flex-shrink: 0;
     }
 
@@ -160,6 +181,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.5rem 1rem;
+    font-size: rem-calc(13px);
+
+    &_title {
+      align-items: flex-start;
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 0;
+    }
 
     &:not(:last-child) {
       border-bottom: $onepixel solid r-theme-val(dashboard-item, base-border);
@@ -169,42 +198,10 @@
       color: r-theme-val(product-item, feedback-color);
     }
 
-    &__enrolled {
-      display: flex;
-      gap: 0.5rem;
-      padding: 0.7rem 1.3rem;
+    &__icon-enrolled {
       color: r-theme-val(dashboard-item-course-enrolling-run, enrolled-color);
-      font-family: $r-font-family-montserrat;
-    }
-  }
-}
-
-.dashboard-item-order {
-  &__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    min-height: 3.75rem;
-
-    @include media-breakpoint-down(sm) {
-      flex-direction: column;
-
-      .button {
-        width: 100%;
-      }
-    }
-
-    .button {
-      flex-shrink: 0;
-    }
-  }
-
-  &__certificate__container {
-    padding-top: 1rem;
-
-    .dashboard-item__block__head {
-      display: none;
+      height: 1rem;
+      width: 1rem;
     }
   }
 }

package/js/widgets/Dashboard/components/DashboardItem/index.spec.tsx

@@ -1,19 +1,48 @@
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { userEvent } from '@storybook/testing-library';
 import { DashboardSubItemsList } from './DashboardSubItemsList';
 import { DashboardSubItem } from './DashboardSubItem';
 import { DashboardItem, DEMO_IMAGE_URL } from '.';
 
 describe('<DashboardItem />', () => {
-  it('renders a basic DashboardItem', () => {
-    render(<DashboardItem title="Become a React pro" code="Ref. 123" imageUrl={DEMO_IMAGE_URL} />);
+  it('renders a DashboardItem in "full" mode', () => {
+    render(
+      <DashboardItem
+        title="Become a React pro"
+        code="Ref. 123"
+        imageUrl={DEMO_IMAGE_URL}
+        footer="Hi, i'm the footer"
+      />,
+    );
 
-    screen.getByText('Become a React pro');
-    screen.getByText('Ref. 123');
+    expect(screen.getByText('Become a React pro')).toBeInTheDocument();
+    expect(screen.getByText('Ref. 123')).toBeInTheDocument();
+    expect(screen.getByText("Hi, i'm the footer")).toBeInTheDocument();
     expect(screen.getByTestId('dashboard-item__block__head__thumbnail')).toHaveAttribute(
       'src',
       DEMO_IMAGE_URL,
     );
   });
+
+  it('renders a DashboardItem in "compact" mode', () => {
+    render(
+      <DashboardItem
+        title="Become a React pro"
+        code="Ref. 123"
+        imageUrl={DEMO_IMAGE_URL}
+        footer="Hi, i'm the footer"
+        mode="compact"
+      />,
+    );
+
+    expect(screen.getByText("Hi, i'm the footer")).toBeInTheDocument();
+
+    expect(screen.queryByText('Become a React pro')).not.toBeInTheDocument();
+    expect(screen.queryByText('Ref. 123')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('dashboard-item__block__head__thumbnail')).not.toBeInTheDocument();
+  });
+
   it('renders a DashboardItem with children', () => {
     render(
       <DashboardItem title="Become a React pro" code="Ref. 123" imageUrl={DEMO_IMAGE_URL}>
@@ -31,4 +60,45 @@ describe('<DashboardItem />', () => {
     screen.getByText('Sub 2');
     screen.getByText('Sub 3');
   });
+
+  it('renders a DashboardItem with more dropdown', async () => {
+    render(
+      <IntlProvider locale="en">
+        <DashboardItem
+          title="Become a React pro"
+          code="Ref. 123"
+          imageUrl={DEMO_IMAGE_URL}
+          more={
+            <>
+              <li>
+                <div className="selector__list__link">Copy</div>
+              </li>
+              <li>
+                <div className="selector__list__link">Duplicate</div>
+              </li>
+              <li>
+                <div className="selector__list__link">Delete</div>
+              </li>
+            </>
+          }
+        />
+        ,
+      </IntlProvider>,
+    );
+
+    expect(screen.queryByText('Copy')).not.toBeInTheDocument();
+    expect(screen.queryByText('Duplicate')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+
+    const moreButton = screen.getByRole('combobox', {
+      name: 'See additional options',
+    });
+
+    const user = userEvent.setup();
+    await user.click(moreButton);
+
+    screen.getByText('Copy');
+    screen.getByText('Duplicate');
+    screen.getByText('Delete');
+  });
 });

package/js/widgets/Dashboard/components/DashboardItem/index.stories.tsx

@@ -22,3 +22,21 @@ export const Default: Story = {};
 export const WithImage: Story = {
   args: { imageUrl: DEMO_IMAGE_URL },
 };
+export const WithMore: Story = {
+  args: {
+    imageUrl: DEMO_IMAGE_URL,
+    more: (
+      <>
+        <li>
+          <div className="selector__list__link">Copy</div>
+        </li>
+        <li>
+          <div className="selector__list__link">Duplicate</div>
+        </li>
+        <li>
+          <div className="selector__list__link">Delete</div>
+        </li>
+      </>
+    ),
+  },
+};

package/js/widgets/Dashboard/components/DashboardItem/index.tsx

@@ -1,43 +1,108 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { PropsWithTestId } from 'types/utils';
+import { Button } from '@openfun/cunningham-react';
+import { useSelect } from 'downshift';
+import { defineMessages, useIntl } from 'react-intl';
+import { JoanieFile } from 'types/Joanie';
+import { Nullable, PropsWithTestId } from 'types/utils';
+import { Icon, IconTypeEnum } from 'components/Icon';
 
-type Props = PropsWithTestId<{
-  title: string;
-  code: string;
+const messages = defineMessages({
+  moreLabel: {
+    id: 'components.DashboardItem.more_label',
+    description: 'Accessible label for the more button on the dashboard item',
+    defaultMessage: 'See additional options',
+  },
+});
+
+export type DashboardItemProps = PropsWithTestId<{
+  title: ReactNode;
+  code?: string;
   imageUrl?: string;
+  imageFile?: Nullable<JoanieFile>;
   footer?: ReactNode;
+  mode?: 'full' | 'compact';
+  more?: ReactNode;
 }>;
 
 // This is temporary due to the fact that backend doesn't give this attribute yet.
 export const DEMO_IMAGE_URL =
   'https://dz03nossv7tsm.cloudfront.net/media/filer_public_thumbnails/filer_public/12/32/123267a1-bc28-49ca-bfca-679568c34043/logo_upsaclay-2020.jpg__200x113_q85_replace_alpha-%23FFFFFF_subsampling-2_upscale.jpg';
 
-export const DashboardItem = (props: PropsWithChildren<Props>) => {
+export const DashboardItem = ({
+  title,
+  code,
+  imageUrl,
+  imageFile,
+  footer,
+  mode = 'full',
+  children,
+  more,
+  ...props
+}: PropsWithChildren<DashboardItemProps>) => {
   return (
     <div className="dashboard-item" data-testid={props['data-testid']}>
       <div className="dashboard-item__block">
-        <header
-          className={[
-            'dashboard-item__block__head',
-            props.imageUrl ? 'dashboard-item__block__head--with-image' : '',
-          ].join(' ')}
-        >
-          {!!props.imageUrl && (
-            <img
-              data-testid="dashboard-item__block__head__thumbnail"
-              className="dashboard-item__block__head__thumbnail"
-              src={props.imageUrl}
-              alt=""
-            />
-          )}
-          <div className="dashboard-item__block__head__captions">
-            <h5 className="dashboard-item__block__head__title">{props.title}</h5>
-            <div className="dashboard-item__block__head__code">{props.code}</div>
-          </div>
-        </header>
-        <footer className="dashboard-item__block__footer">{props.footer}</footer>
+        {mode === 'full' && (
+          <header
+            className={[
+              'dashboard-item__block__head',
+              imageUrl ? 'dashboard-item__block__head--with-image' : '',
+            ].join(' ')}
+          >
+            {imageFile ? (
+              <img
+                data-testid="dashboard-item__block__head__thumbnail"
+                className="dashboard-item__block__head__thumbnail"
+                sizes={imageFile.size + ''}
+                src={imageFile.src}
+                srcSet={imageFile.srcset}
+                alt=""
+              />
+            ) : (
+              imageUrl && (
+                <img
+                  data-testid="dashboard-item__block__head__thumbnail"
+                  className="dashboard-item__block__head__thumbnail"
+                  src={imageUrl}
+                  alt=""
+                />
+              )
+            )}
+            <div className="dashboard-item__block__head__captions">
+              <h5 className="dashboard-item__block__head__title">{title}</h5>
+              <div className="dashboard-item__block__head__code">{code}</div>
+            </div>
+            {more && <DashboardItemMore more={more} />}
+          </header>
+        )}
+        <footer className="dashboard-item__block__footer">{footer}</footer>
       </div>
-      {props.children}
+      {children}
+    </div>
+  );
+};
+
+const DashboardItemMore = ({ more }: { more: ReactNode }) => {
+  const intl = useIntl();
+  const { isOpen, getToggleButtonProps, getMenuProps } = useSelect({
+    items: [],
+  });
+
+  return (
+    <div className="selector dashboard-item__block__head__more">
+      <Button
+        icon={<Icon name={IconTypeEnum.MORE} />}
+        color="tertiary"
+        size="small"
+        aria-label={intl.formatMessage(messages.moreLabel)}
+        {...getToggleButtonProps()}
+      />
+      <ul
+        {...getMenuProps()}
+        className={`selector__list ${isOpen ? '' : 'selector__list--is-closed'}`}
+      >
+        {isOpen && more}
+      </ul>
     </div>
   );
 };

package/js/widgets/Dashboard/components/DashboardItem/stories.mock.ts

@@ -7,6 +7,7 @@ export const enrollment: Enrollment = {
   is_active: true,
   was_created_by_order: true,
   created_on: '2022-09-09T12:00:00+00:00',
+  orders: [],
   course_run: {
     id: '18cede01-231e-4061-92d1-5716cd990e33',
     title: '',
@@ -20,15 +21,10 @@ export const enrollment: Enrollment = {
       id: '1cc49d2b-fc08-46d2-9fb8-594d90494cd3',
       code: '09391',
       title: 'Learn disruptive technologies',
-      products: [],
-      course_runs: [],
-      organizations: [
-        {
-          code: '111',
-          title: '111',
-        },
-      ],
+      cover: null,
     },
     languages: ['en'],
   },
+  product_relations: [],
+  certificate_id: null,
 };

package/js/widgets/Dashboard/components/DashboardLayout/_styles.scss

@@ -1,9 +1,12 @@
-$dashboard-breadcrumb-height: rem-calc(32.4px);
+$dashboard-breadcrumb-height: rem-calc(24px);
 $dashboard-breadcrumb-filters-spacing: rem-calc(30px);
 $dashboard-filters-height: rem-calc(48px);
 $dashboard-header-spacing: rem-calc(16px);
-$sidebar-spacing-top: $dashboard-breadcrumb-height + $dashboard-filters-height +
-  $dashboard-header-spacing + $dashboard-breadcrumb-filters-spacing;
+$sidebar-spacing-top: $dashboard-breadcrumb-height + $dashboard-header-spacing;
+
+.richie-react--dashboard {
+  min-height: 100%;
+}
 
 .dashboard {
   @include make-container();
@@ -27,6 +30,7 @@ $sidebar-spacing-top: $dashboard-breadcrumb-height + $dashboard-filters-height +
 
     @include media-breakpoint-down(lg) {
       width: auto;
+      margin-right: 0;
     }
   }
 
@@ -45,11 +49,14 @@ $sidebar-spacing-top: $dashboard-breadcrumb-height + $dashboard-filters-height +
   &__filters {
     min-height: $dashboard-filters-height;
     margin-top: $dashboard-breadcrumb-filters-spacing;
+    display: flex;
+    flex-direction: row;
+    gap: rem-calc(15px);
+    justify-content: right;
   }
 
   &__main {
     flex-grow: 1;
-    overflow: hidden;
 
     @include media-breakpoint-down(lg) {
       padding: rem-calc(16px) 0 0 0;
@@ -58,11 +65,13 @@ $sidebar-spacing-top: $dashboard-breadcrumb-height + $dashboard-filters-height +
     > header {
       // Padding instead of margin to give room to the scrollbar.
       padding-bottom: $dashboard-header-spacing;
-      overflow: auto;
     }
   }
 
   &__content {
     padding-right: rem-calc(32px);
+    @include media-breakpoint-down(lg) {
+      padding-right: 0;
+    }
   }
 }

package/js/widgets/Dashboard/components/DashboardLayout/index.tsx

@@ -1,22 +1,29 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
+import c from 'classnames';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
 import { DashboardBreadcrumbs } from 'widgets/Dashboard/components/DashboardBreadcrumbs';
 
 interface DashboardLayoutProps extends PropsWithChildren<any> {
   sidebar?: ReactNode;
   filters?: ReactNode;
+  className?: string;
 }
 
-export const DashboardLayout = ({ children, sidebar, filters }: DashboardLayoutProps) => {
+export const DashboardLayout = ({
+  children,
+  sidebar,
+  filters,
+  className,
+}: DashboardLayoutProps) => {
   const location = useLocation();
   return (
-    <div className="dashboard">
+    <div className={c('dashboard', className)}>
       <div className="dashboard__sidebar">{sidebar || <LearnerDashboardSidebar />}</div>
       <main className="dashboard__main">
         <header>
           <DashboardBreadcrumbs />
-          <div className="dashboard__filters">{filters}</div>
+          {!!filters && <div className="dashboard__filters">{filters}</div>}
         </header>
         <div className="dashboard__content" data-testid={`location-display-${location.pathname}`}>
           {children}

package/js/widgets/Dashboard/components/DashboardListAvatar/_styles.scss

@@ -0,0 +1,8 @@
+.dashboard-list-avatar {
+  &__container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    font-size: rem-calc(12px);
+  }
+}

package/js/widgets/Dashboard/components/DashboardListAvatar/index.tsx

@@ -0,0 +1,11 @@
+import { DashboardAvatar, DashboardAvatarProps } from '../DashboardAvatar';
+
+const DashboardListAvatar = (props: DashboardAvatarProps) => {
+  return (
+    <div className="dashboard-list-avatar__container">
+      <DashboardAvatar {...props} />
+    </div>
+  );
+};
+
+export default DashboardListAvatar;

package/js/widgets/Dashboard/components/DashboardOrderLoader/_styles.scss

@@ -0,0 +1,5 @@
+.dashboard-order-loader__banners {
+  .banner {
+    margin-top: 0;
+  }
+}

package/js/widgets/Dashboard/components/DashboardOrderLoader/index.tsx

@@ -1,10 +1,13 @@
 import { useParams } from 'react-router-dom';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { useOrder } from 'hooks/useOrders';
-import { useProduct } from 'hooks/useProduct';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useMemo } from 'react';
+import { useOmniscientOrder } from 'hooks/useOrders';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import { CourseLight } from 'types/Joanie';
+import { useCourseProduct } from 'hooks/useCourseProducts';
+import { isCredentialOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
+import { handle } from 'utils/errors/handle';
+import { OrderHelper } from 'utils/OrderHelper';
 import { DashboardItemOrder } from '../DashboardItem/Order/DashboardItemOrder';
 
 const messages = defineMessages({
@@ -13,31 +16,64 @@ const messages = defineMessages({
     description: 'Message displayed while loading an order',
     id: 'components.DashboardOrderLoader.loading',
   },
+  signatureNeeded: {
+    defaultMessage: 'You need to sign your contract before enrolling in a course run',
+    description: 'Banner displayed when the contract is not signed',
+    id: 'components.DashboardOrderLoader.signatureNeeded',
+  },
+  wrongLinkedProductError: {
+    defaultMessage: 'This page is not available for this order.',
+    description: "Error message displayed when order's linked product type is not handle.",
+    id: 'components.DashboardOrderLoader.wrongLinkedProductError',
+  },
 });
 
 export const DashboardOrderLoader = () => {
   const params = useParams<{ orderId: string }>();
-  const order = useOrder(params.orderId);
-  const course = order.item?.course as CourseLight;
-  const product = useProduct(order.item?.product, { course: course?.code });
-  const fetching = order.states.fetching || product.states.fetching;
+  const {
+    item: order,
+    states: { fetching: fetchingOrder, error: errorOrder },
+  } = useOmniscientOrder(params.orderId);
+  const {
+    item: courseProduct,
+    states: { fetching: fetchingCourseProduct, error: errorCourseProduct },
+  } = useCourseProduct({ course_id: order?.course?.code, product_id: order?.product_id });
+  const intl = useIntl();
+
+  const credentialOrder = order && isCredentialOrder(order) ? order : undefined;
+  const wrongLinkedProductError = useMemo(() => {
+    if (order && !credentialOrder) {
+      handle(new Error("Order's details page only accept order linked to CREDENTIAL product."));
+      return intl.formatMessage(messages.wrongLinkedProductError);
+    }
+  }, [credentialOrder]);
+  const error = errorOrder || errorCourseProduct || wrongLinkedProductError;
+
+  const fetching = fetchingOrder || fetchingCourseProduct;
+  const needsSignature = OrderHelper.orderNeedsSignature(
+    order,
+    courseProduct?.product.contract_definition,
+  );
 
   return (
     <>
-      {fetching && !order.item && (
+      {fetching && !order && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">
             <FormattedMessage {...messages.loading} />
           </span>
         </Spinner>
       )}
-      {(order.states.error || product.states.error) && (
-        <Banner message={(order.states.error ?? product.states.error)!} type={BannerType.ERROR} />
-      )}
-      {order.item && (
+      <div className="dashboard-order-loader__banners">
+        {error && <Banner message={error} type={BannerType.ERROR} />}
+        {needsSignature && (
+          <Banner message={intl.formatMessage(messages.signatureNeeded)} type={BannerType.ERROR} />
+        )}
+      </div>
+      {credentialOrder && (
         <DashboardItemOrder
           writable={true}
-          order={order.item}
+          order={credentialOrder}
           showDetailsButton={false}
           showCertificate={true}
         />