richie-education 2.25.0-b2.dev83 → 2.25.0-b2.dev91

package/js/components/CourseGlimpseList/index.spec.tsx

@@ -59,7 +59,7 @@ describe('widgets/Search/components/CourseGlimpseList', () => {
     expect(srOnlyCount).toHaveAttribute('aria-live', 'polite');
     expect(srOnlyCount).toHaveAttribute('aria-atomic', 'true');
     // the message shown in the UI
-    expect(container.querySelector('.course-glimpse-list__count')).toHaveAttribute(
+    expect(container.querySelector('.list__count-description')).toHaveAttribute(
       'aria-hidden',
       'true',
     );

package/js/components/CourseGlimpseList/index.tsx

@@ -61,7 +61,7 @@ export const CourseGlimpseList = ({
               }}
             />
           </div>
-          <div className="course-glimpse-list__count" aria-hidden="true">
+          <div className="course-glimpse-list__count list__count-description" aria-hidden="true">
             <FormattedMessage
               {...messages.courseCount}
               values={{

package/js/pages/TeacherDashboardContractsLayout/components/ContractFiltersBar/index.tsx

@@ -1,10 +1,9 @@
 import { Select, SelectProps } from '@openfun/cunningham-react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useEffect } from 'react';
-import { useOrganizations } from 'hooks/useOrganizations';
+import FiltersBar from 'widgets/Dashboard/components/FiltersBar';
 import { ContractState } from 'types/Joanie';
 import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
-import { Spinner } from 'components/Spinner';
+import FilterOrganization from 'widgets/Dashboard/components/FilterOrganization';
 
 export const messages = defineMessages({
   organizationFilterLabel: {
@@ -31,11 +30,6 @@ interface ContractFiltersBarProps {
   hideFilterSignatureState?: boolean;
 }
 
-interface FilterProps {
-  defaultValue?: SelectProps['defaultValue'];
-  onChange: (value: Partial<ContractListFilters>) => void;
-}
-
 const ContractFiltersBar = ({
   defaultValues,
   onFiltersChange,
@@ -43,9 +37,9 @@ const ContractFiltersBar = ({
   hideFilterSignatureState = false,
 }: ContractFiltersBarProps) => {
   return (
-    <div className="dashboard__page__actions-row dashboard__page__actions-row--end">
+    <FiltersBar>
       {!hideFilterOrganization && (
-        <OrganizationContractFilter
+        <FilterOrganization
           defaultValue={defaultValues?.organization_id}
           onChange={onFiltersChange}
         />
@@ -56,49 +50,16 @@ const ContractFiltersBar = ({
           onChange={onFiltersChange}
         />
       )}
-    </div>
+    </FiltersBar>
   );
 };
 
-const OrganizationContractFilter = ({ defaultValue, onChange }: FilterProps) => {
-  const intl = useIntl();
-  const {
-    items: organizations,
-    states: { isFetched },
-  } = useOrganizations();
-
-  const organizationOptions = organizations.map((organization) => ({
-    label: organization.title,
-    value: organization.id,
-  }));
-
-  const handleChange: SelectProps['onChange'] = (e) => {
-    const value = e.target.value as string;
-    onChange({ organization_id: value });
-  };
-
-  useEffect(() => {
-    if (isFetched && defaultValue === undefined) {
-      onChange({ organization_id: organizationOptions[0]?.value });
-    }
-  }, [defaultValue, isFetched]);
-
-  if (!isFetched) return <Spinner />;
-
-  return (
-    <Select
-      label={intl.formatMessage(messages.organizationFilterLabel)}
-      options={organizationOptions}
-      defaultValue={defaultValue || organizationOptions[0].value}
-      onChange={handleChange}
-      disabled={!isFetched}
-      clearable={false}
-      searchable={true}
-    />
-  );
-};
+interface ContractFilterProps {
+  defaultValue?: SelectProps['defaultValue'];
+  onChange: (value: Partial<ContractListFilters>) => void;
+}
 
-const SignatureStateFilter = ({ defaultValue, onChange }: FilterProps) => {
+const SignatureStateFilter = ({ defaultValue, onChange }: ContractFilterProps) => {
   const intl = useIntl();
   const contractStateOptions = Object.values(ContractState)
     .filter((value) => value !== ContractState.UNSIGNED)

package/js/utils/OrderHelper/index.ts

@@ -0,0 +1,32 @@
+import {
+  OrderEnrollment,
+  ACTIVE_ORDER_STATES,
+  Order,
+  OrderState,
+  ContractDefinition,
+} from 'types/Joanie';
+
+/**
+ * Helper class for orders
+ */
+export class OrderHelper {
+  /**
+   * return an Order from the given list that match given productId
+   */
+  static getActiveEnrollmentOrder(orders: OrderEnrollment[], productId: string) {
+    const filter = (order: OrderEnrollment) =>
+      ACTIVE_ORDER_STATES.includes(order.state) && order.product_id === productId;
+    return orders.find(filter);
+  }
+
+  /**
+   * tell us if a order need to be sign by it's owner (the learner user).
+   */
+  static orderNeedsSignature(order: Order, contractDefinition?: ContractDefinition) {
+    return (
+      order?.state === OrderState.VALIDATED &&
+      contractDefinition &&
+      !(order.contract && order.contract.student_signed_on)
+    );
+  }
+}

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

@@ -1,12 +1,13 @@
-$avatar-size: 100px;
+// when parent em-value is 40px, $avatar-size is 100px
+$avatar-size: 2.5em;
 
 .dashboard {
   &__avatar {
     box-shadow: r-theme-val(dashboard-sidebar, base-shadow);
     background-color: r-theme-val(dashboard-avatar, background-color);
     border-radius: 100%;
-    width: $avatar-size;
     height: $avatar-size;
+    width: $avatar-size;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -14,7 +15,7 @@ $avatar-size: 100px;
     padding: rem-calc(3px);
 
     &__letter {
-      font-size: 2.5rem;
+      font-size: 1em;
       font-family: $r-font-family-montserrat;
       font-weight: $font-weight-boldest;
       line-height: 1;

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

@@ -8,7 +8,7 @@ export enum DashboardAvatarVariantEnum {
   SQUARE = 'square',
 }
 
-interface DashboardAvatarProps {
+export interface DashboardAvatarProps {
   title: string;
   image?: Nullable<JoanieFile>;
   variant?: DashboardAvatarVariantEnum;

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

@@ -14,10 +14,11 @@ import {
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
 import { Icon, IconTypeEnum } from 'components/Icon';
+
 import useDateFormat from 'hooks/useDateFormat';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
 import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
 import { useEnroll } from 'widgets/Dashboard/hooks/useEnroll';
+import { OrderHelper } from 'utils/OrderHelper';
 import useCourseRunPeriodMessage from './hooks/useCourseRunPeriodMessage';
 
 const messages = defineMessages({
@@ -212,7 +213,9 @@ export const DashboardItemCourseEnrollingRun = ({
   const intl = useIntl();
   const formatDate = useDateFormat();
   const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
-  const haveToSignContract = order ? orderNeedsSignature(order, product) : false;
+  const haveToSignContract = order
+    ? OrderHelper.orderNeedsSignature(order, product?.contract_definition)
+    : false;
   const isOpenedForEnrollment = useMemo(
     () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
     [courseRun],

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

@@ -6,8 +6,8 @@ import { CertificateProduct, Enrollment, ProductType } from 'types/Joanie';
 import DownloadCertificateButton from 'components/DownloadCertificateButton';
 import { useCertificate } from 'hooks/useCertificates';
 import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
+import { OrderHelper } from 'utils/OrderHelper';
 import CertificateStatus from '../../CertificateStatus';
-import { getActiveEnrollmentOrder } from '../../utils/order';
 
 const messages = defineMessages({
   buyProductCertificateLabel: {
@@ -37,7 +37,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
     return null;
   }
   const [activeOrder, setActiveOrder] = useState(
-    getActiveEnrollmentOrder(enrollment.orders || [], product.id),
+    OrderHelper.getActiveEnrollmentOrder(enrollment.orders || [], product.id),
   );
   const { item: certificate } = useCertificate(activeOrder?.certificate_id);
 

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -10,7 +10,7 @@ import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { useCourseProduct } from 'hooks/useCourseProducts';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { OrderHelper } from 'utils/OrderHelper';
 
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
@@ -88,7 +88,7 @@ export const DashboardItemOrder = ({
     states: { isFetched: isCourseProductRelationFetched },
   } = useCourseProduct({ product_id: order.product_id, course_id: course.code });
   const { product } = courseProductRelation || {};
-  const needsSignature = orderNeedsSignature(order, product);
+  const needsSignature = OrderHelper.orderNeedsSignature(order, product?.contract_definition);
   const getRoutePath = getDashboardRoutePath(useIntl());
 
   return (
@@ -98,7 +98,7 @@ export const DashboardItemOrder = ({
           key={`DashboardItemOrderContract_${order.id}`}
           title={product.title}
           order={order}
-          contract_definition={product.contract_definition!}
+          contract_definition={product?.contract_definition!}
           contract={order.contract}
           writable={writable}
           mode="compact"
@@ -114,7 +114,10 @@ export const DashboardItemOrder = ({
             <div className="dashboard-item-order__footer">
               <div className="dashboard-item__block__status">
                 <Icon name={IconTypeEnum.SCHOOL} />
-                <OrderStateMessage order={order} product={product} />
+                <OrderStateMessage
+                  order={order}
+                  contractDefinition={product?.contract_definition}
+                />
               </div>
               {showDetailsButton && (
                 <RouterButton
@@ -132,7 +135,7 @@ export const DashboardItemOrder = ({
                 key={`DashboardItemOrderContract_${order.id}`}
                 title={product.title}
                 order={order}
-                contract_definition={product.contract_definition!}
+                contract_definition={product?.contract_definition!}
                 contract={order.contract}
                 writable={writable}
                 mode="compact"
@@ -173,7 +176,7 @@ export const DashboardItemOrder = ({
           key={`DashboardItemOrderContract_${order.id}`}
           title={product.title}
           order={order}
-          contract_definition={product.contract_definition!}
+          contract_definition={product?.contract_definition!}
           contract={order.contract}
           writable={writable}
           mode="compact"

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

@@ -5,7 +5,6 @@ import {
   ContractDefinitionFactory,
   ContractFactory,
   CredentialOrderFactory,
-  ProductFactory,
 } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
 import OrderStateMessage, { messages } from '.';
@@ -74,13 +73,11 @@ describe('<DashboardItemOrder/>', () => {
       contract: null,
     }).one();
 
-    const product = ProductFactory({
-      contract_definition: ContractDefinitionFactory().one(),
-    }).one();
+    const contractDefinition = ContractDefinitionFactory().one();
 
     render(
       <Wrapper>
-        <OrderStateMessage order={order} product={product} />
+        <OrderStateMessage order={order} contractDefinition={contractDefinition} />
       </Wrapper>,
     );
     expect(screen.getByText('Signature required')).toBeInTheDocument();

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

@@ -1,9 +1,9 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { useEffect } from 'react';
-import { CertificateOrder, CredentialOrder, OrderState, Product } from 'types/Joanie';
+import { CertificateOrder, CredentialOrder, OrderState, ContractDefinition } from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 import { handle } from 'utils/errors/handle';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { OrderHelper } from 'utils/OrderHelper';
 
 export const messages = defineMessages({
   statusDraft: {
@@ -53,10 +53,10 @@ export const messages = defineMessages({
 
 interface OrderStateMessageProps {
   order: CredentialOrder | CertificateOrder;
-  product?: Product;
+  contractDefinition?: ContractDefinition;
 }
 
-const OrderStateMessage = ({ order, product }: OrderStateMessageProps) => {
+const OrderStateMessage = ({ order, contractDefinition }: OrderStateMessageProps) => {
   const { certificate_id: certificateId } = order;
   const orderStatusMessages = {
     [OrderState.DRAFT]: messages.statusDraft,
@@ -72,7 +72,7 @@ const OrderStateMessage = ({ order, product }: OrderStateMessageProps) => {
   }, [order.state]);
 
   if (order.state === OrderState.VALIDATED) {
-    if (orderNeedsSignature(order, product)) {
+    if (OrderHelper.orderNeedsSignature(order, contractDefinition)) {
       return <FormattedMessage {...messages.statusWaitingSignature} />;
     }
 

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/index.tsx

@@ -7,7 +7,7 @@ import Banner, { BannerType } from 'components/Banner';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { isCredentialOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { handle } from 'utils/errors/handle';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { OrderHelper } from 'utils/OrderHelper';
 import { DashboardItemOrder } from '../DashboardItem/Order/DashboardItemOrder';
 
 const messages = defineMessages({
@@ -50,7 +50,10 @@ export const DashboardOrderLoader = () => {
   const error = errorOrder || errorCourseProduct || wrongLinkedProductError;
 
   const fetching = fetchingOrder || fetchingCourseProduct;
-  const needsSignature = orderNeedsSignature(order, courseProduct?.product);
+  const needsSignature = OrderHelper.orderNeedsSignature(
+    order,
+    courseProduct?.product.contract_definition,
+  );
 
   return (
     <>

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

@@ -30,6 +30,8 @@
       &__avatar {
         position: absolute;
         top: calc($avatar-size / -2);
+        // avatar's parent font-size define the avatar size.
+        font-size: rem-calc(40px);
       }
 
       h3 {

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

@@ -0,0 +1,58 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Select, SelectProps } from '@openfun/cunningham-react';
+import { useEffect } from 'react';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { Spinner } from 'components/Spinner';
+
+export const messages = defineMessages({
+  organizationFilterLabel: {
+    defaultMessage: 'Organization',
+    description: 'Use as organization filter label',
+    id: 'components.ListFilterOrganization.organizationFilterLabel',
+  },
+});
+
+interface FilterOrganizationProps {
+  defaultValue?: string;
+  onChange: ({ organization_id }: { organization_id?: string }) => void;
+}
+
+const FilterOrganization = ({ defaultValue, onChange }: FilterOrganizationProps) => {
+  const intl = useIntl();
+  const {
+    items: organizations,
+    states: { isFetched },
+  } = useOrganizations();
+
+  const organizationOptions = organizations.map((organization) => ({
+    label: organization.title,
+    value: organization.id,
+  }));
+
+  const handleChange: SelectProps['onChange'] = (e) => {
+    const value = e.target.value as string;
+    onChange({ organization_id: value });
+  };
+
+  useEffect(() => {
+    if (isFetched && defaultValue === undefined) {
+      onChange({ organization_id: organizationOptions[0]?.value });
+    }
+  }, [defaultValue, isFetched]);
+
+  if (!isFetched) return <Spinner />;
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.organizationFilterLabel)}
+      options={organizationOptions}
+      defaultValue={defaultValue || organizationOptions[0].value}
+      onChange={handleChange}
+      disabled={!isFetched}
+      clearable={false}
+      searchable={true}
+    />
+  );
+};
+
+export default FilterOrganization;

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+const FiltersBar = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="dashboard__page__actions-row dashboard__page__actions-row--end">{children}</div>
+  );
+};
+
+export default FiltersBar;

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx

@@ -12,7 +12,7 @@ import { IntlHelper } from 'utils/IntlHelper';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
 import EnrollmentDate from 'components/EnrollmentDate';
 import { Product } from 'types/Joanie';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { OrderHelper } from 'utils/OrderHelper';
 import { messages as sharedMessages } from '../CourseRunItem';
 import CourseRunSection, { messages as sectionMessages } from './CourseRunSection';
 
@@ -60,7 +60,9 @@ const EnrollableCourseRunList = ({ courseRuns, order, product }: Props) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
   const formRef = useRef<HTMLFormElement>(null);
-  const needsSignature = order ? orderNeedsSignature(order, product) : false;
+  const needsSignature = order
+    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
+    : false;
 
   const [selectedCourseRun, setSelectedCourseRun] = useState<Maybe<Joanie.CourseRun>>();
   const [submitted, setSubmitted] = useState(false);

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -16,7 +16,7 @@ import { Maybe } from 'types/utils';
 import useDateFormat from 'hooks/useDateFormat';
 import { ProductHelper } from 'utils/ProductHelper';
 import useProductOrder from 'hooks/useProductOrder';
-import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
+import { OrderHelper } from 'utils/OrderHelper';
 import { handle } from 'utils/errors/handle';
 import { ProductSignatureHeader } from 'widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader';
 import CertificateItem from './components/CourseProductCertificateItem';
@@ -129,7 +129,9 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
   );
 };
 const Content = ({ product, order }: { product: Product; order?: CredentialOrder }) => {
-  const needsSignature = order ? orderNeedsSignature(order, product) : false;
+  const needsSignature = order
+    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
+    : false;
   const targetCourses = useMemo(() => {
     if (order) {
       return order.target_courses;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev83",
+  "version": "2.25.0-b2.dev91",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/components/_index.scss

@@ -33,6 +33,7 @@
 @import '../../js/widgets/Dashboard/components/DashboardItem/Contract/_styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/styles';
 @import '../../js/widgets/Dashboard/components/DashboardLayout/styles';
+@import '../../js/widgets/Dashboard/components/DashboardListAvatar/styles';
 @import '../../js/widgets/Dashboard/components/DashboardOrderLoader/styles';
 @import '../../js/widgets/Dashboard/components/DashboardBreadcrumbs/styles';
 @import '../../js/widgets/Dashboard/components/DashboardSidebar/styles';

package/scss/objects/_course_glimpses.scss

@@ -28,14 +28,7 @@ $r-course-glimpse-gutter: 0.8rem !default;
 
   &__count {
     margin-right: $r-course-glimpse-gutter;
-    padding: 0;
-    flex-basis: 100%; // Should not wrap with actual course glimpses
-    color: r-theme-val(course-glimpse-list, count-color);
-    text-align: right;
-
     @include media-breakpoint-up(lg) {
-      padding: 0;
-
       &:first-child {
         margin-top: -1rem; // Cancel out top padding
       }

package/scss/objects/_index.scss

@@ -2,6 +2,7 @@
 @import './banner';
 @import './breadcrumbs';
 @import './dashboard';
+@import './list';
 @import './course_glimpses';
 @import './blogpost_glimpses';
 @import './organization_glimpses';

package/scss/objects/_list.scss

@@ -0,0 +1,8 @@
+.list {
+  &__count-description {
+    flex-basis: 100%; // Should not wrap as mozaic list elements
+    color: r-theme-val(course-glimpse-list, count-color);
+    text-align: right;
+    align-self: self-end;
+  }
+}

package/js/widgets/Dashboard/components/DashboardItem/utils/order.ts

@@ -1,15 +0,0 @@
-import { OrderEnrollment, ACTIVE_ORDER_STATES, Order, Product, OrderState } from 'types/Joanie';
-
-export const getActiveEnrollmentOrder = (orders: OrderEnrollment[], productId: string) => {
-  const filter = (order: OrderEnrollment) =>
-    ACTIVE_ORDER_STATES.includes(order.state) && order.product_id === productId;
-  return orders.find(filter);
-};
-
-export const orderNeedsSignature = (order: Order, product?: Product) => {
-  return (
-    order?.state === OrderState.VALIDATED &&
-    product?.contract_definition &&
-    !(order.contract && order.contract.student_signed_on)
-  );
-};