richie-education 2.25.0-b2.dev111 → 2.25.0-b2.dev115

package/js/components/Address/index.tsx

@@ -0,0 +1,13 @@
+import { Address } from 'types/Joanie';
+
+export const AddressView = ({ address }: { address: Address }) => {
+  return (
+    <address>
+      {address.first_name}&nbsp;{address.last_name}
+      <br />
+      {address.address}
+      <br />
+      {address.postcode} {address.city}, {address.country}
+    </address>
+  );
+};

package/js/components/SaleTunnel/components/SaleTunnelStepPayment/index.tsx

@@ -11,6 +11,7 @@ import type { Maybe, Nullable } from 'types/utils';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { useSaleTunnelContext } from 'components/SaleTunnel/context';
 import { UserHelper } from 'utils/UserHelper';
+import { AddressView } from 'components/Address';
 import { RegisteredCreditCard } from '../RegisteredCreditCard';
 
 const messages = defineMessages({
@@ -229,13 +230,9 @@ export const SaleTunnelStepPayment = ({ next }: SaleTunnelStepPaymentProps) => {
                     value: id,
                   }))}
                 />
-                <address className="SaleTunnelStepPayment__block--buyer__address-selection__address">
-                  {selectedAddress!.first_name}&nbsp;{selectedAddress!.last_name}
-                  <br />
-                  {selectedAddress!.address}
-                  <br />
-                  {selectedAddress!.postcode} {selectedAddress!.city}, {selectedAddress!.country}
-                </address>
+                <div className="SaleTunnelStepPayment__block--buyer__address-selection__address">
+                  <AddressView address={selectedAddress!} />
+                </div>
               </Fragment>
             ) : (
               <Fragment>

package/js/settings.dev.ts

@@ -0,0 +1,12 @@
+/**
+ * Available users:
+ *  * admin
+ *  * user0
+ *  * user1
+ *  * user2
+ *  * user3
+ *  * user4
+ *  * organization_owner
+ *  * student_user
+ */
+export const CURRENT_JOANIE_DEV_DEMO_USER = 'student_user';

package/js/types/Joanie.ts

@@ -30,6 +30,10 @@ export interface Organization {
   code: string;
   title: string;
   logo: Nullable<JoanieFile>;
+  contact_email: Nullable<string>;
+  contact_phone: Nullable<string>;
+  dpo_email: Nullable<string>;
+  address?: Address;
 }
 
 export interface OrganizationResourceQuery extends ResourcesQuery {
@@ -263,6 +267,7 @@ export interface Order {
   course: Maybe<CourseLight>;
   enrollment: Maybe<EnrollmentLight>;
   organization_id: Organization['id'];
+  organization: Organization;
   order_group_id?: OrderGroup['id'];
 }
 

package/js/utils/test/expectBanner.ts

@@ -1,4 +1,4 @@
-import { getByText, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { BannerType, getBannerTestId } from 'components/Banner';
 
 export const expectBannerError = async (message: string, rootElement: ParentNode = document) => {
@@ -16,7 +16,7 @@ export const expectBanner = async (
   await waitFor(async () => {
     const banner = rootElement.querySelector('.banner--' + type) as HTMLElement;
     expect(banner).not.toBeNull();
-    getByText(banner!, message);
+    expect(banner).toHaveTextContent(message);
   });
 };
 

package/js/utils/test/factories/joanie.ts

@@ -157,6 +157,10 @@ export const OrganizationFactory = factory((): Organization => {
     code: faker.string.alphanumeric(5),
     title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
     logo: JoanieFileFactory().one(),
+    contact_email: faker.internet.email(),
+    dpo_email: faker.internet.email(),
+    contact_phone: faker.phone.number(),
+    address: AddressFactory().one(),
   };
 });
 
@@ -400,6 +404,7 @@ const AbstractOrderFactory = factory((): Order => {
     enrollment: undefined,
     course: undefined,
     organization_id: faker.string.uuid(),
+    organization: OrganizationFactory().one(),
   };
 });
 

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

@@ -8,6 +8,7 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { faker } from '@faker-js/faker';
@@ -858,4 +859,27 @@ describe('<DashboardItemOrder/>', () => {
       screen.queryByTestId('dashboard-item__course-enrolling__run__' + courseRun.id),
     ).toBeNull();
   });
+
+  it('renders a writable order with organization details', async () => {
+    const order: CredentialOrder = CredentialOrderFactory().one();
+    const { product } = mockCourseProductWithOrder(order);
+
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
+      wrapper,
+    });
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+
+    const block = screen.getByTestId('organization-block');
+    within(block).getByText(order.organization!.title);
+    within(block).getByRole('link', { name: order.organization!.contact_email! });
+    within(block).getByRole('link', { name: order.organization!.dpo_email! });
+    within(block).getByRole('link', { name: order.organization!.contact_phone! });
+    within(block).getByText(new RegExp(order.organization?.address?.first_name!));
+    within(block).getByText(new RegExp(order.organization?.address?.last_name!));
+    within(block).getByText(new RegExp(order.organization?.address?.address!));
+    within(block).getByText(new RegExp(order.organization?.address?.city!));
+    within(block).getByText(new RegExp(order.organization?.address?.postcode!));
+    within(block).getByText(new RegExp(order.organization?.address?.country!));
+  });
 });

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

@@ -1,4 +1,6 @@
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import classNames from 'classnames';
 import { CourseLight, CredentialOrder, Product } from 'types/Joanie';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CoursesHelper } from 'utils/CoursesHelper';
@@ -11,7 +13,9 @@ import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessa
 import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { OrderHelper } from 'utils/OrderHelper';
-
+import ContractStatus from 'components/ContractStatus';
+import SignContractButton from 'components/SignContractButton';
+import { AddressView } from 'components/Address';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
@@ -34,6 +38,46 @@ const messages = defineMessages({
     description: 'Syllabus link label on order details',
     defaultMessage: 'Go to syllabus',
   },
+  contactDescription: {
+    id: 'components.DashboardItemOrder.contactDescription',
+    description: 'Description of the contact information for the organization',
+    defaultMessage: 'Your training reference is {name} - {email}.',
+  },
+  contactButton: {
+    id: 'components.DashboardItemOrder.contactButton',
+    description: 'Button to contact the organization',
+    defaultMessage: 'Contact',
+  },
+  organizationHeader: {
+    id: 'components.DashboardItemOrder.organizationHeader',
+    description: 'Header of the organization section',
+    defaultMessage: 'This training is provided by',
+  },
+  organizationLogoAlt: {
+    id: 'components.DashboardItemOrder.organizationLogoAlt',
+    description: 'Alt text for the organization logo',
+    defaultMessage: 'Logo of the organization',
+  },
+  trainingContractTitle: {
+    id: 'components.DashboardItemOrder.trainingContractTitle',
+    description: 'Title of the training contract section',
+    defaultMessage: 'Training contract',
+  },
+  organizationMailContactLabel: {
+    id: 'components.DashboardItemOrder.organizationMailContactLabel',
+    description: 'Label for the organization mail contact',
+    defaultMessage: 'Email',
+  },
+  organizationPhoneContactLabel: {
+    id: 'components.DashboardItemOrder.organizationPhoneContactLabel',
+    description: 'Label for the organization phone contact',
+    defaultMessage: 'Phone',
+  },
+  organizationDpoContactLabel: {
+    id: 'components.DashboardItemOrder.organizationDpoContactLabel',
+    description: 'Label for the organization DPO contact',
+    defaultMessage: 'Data protection email',
+  },
 });
 
 interface DashboardItemOrderProps {
@@ -88,27 +132,16 @@ export const DashboardItemOrder = ({
   const course = order.course as CourseLight;
 
   const intl = useIntl();
-  const {
-    item: courseProductRelation,
-    states: { isFetched: isCourseProductRelationFetched },
-  } = useCourseProduct({ product_id: order.product_id, course_id: course.code });
+  const { item: courseProductRelation } = useCourseProduct({
+    product_id: order.product_id,
+    course_id: course.code,
+  });
   const { product } = courseProductRelation || {};
   const needsSignature = OrderHelper.orderNeedsSignature(order, product?.contract_definition);
   const getRoutePath = getDashboardRoutePath(useIntl());
 
   return (
     <div className="dashboard-item-order">
-      {writable && needsSignature && (
-        <DashboardItemContract
-          key={`DashboardItemOrderContract_${order.id}`}
-          title={product.title}
-          order={order}
-          contract_definition={product?.contract_definition!}
-          contract={order.contract}
-          writable={writable}
-          mode="compact"
-        />
-      )}
       <DashboardItem
         data-testid={`dashboard-item-order-${order.id}`}
         title={product?.title ?? ''}
@@ -183,17 +216,127 @@ export const DashboardItemOrder = ({
       {showCertificate && !!product?.certificate_definition && (
         <DashboardItemOrderCertificate order={order} product={product} />
       )}
-      {writable && isCourseProductRelationFetched && order.contract?.student_signed_on && (
-        <DashboardItemContract
-          key={`DashboardItemOrderContract_${order.id}`}
-          title={product.title}
+      {writable && <OrganizationBlock order={order} product={product} />}
+    </div>
+  );
+};
+
+const OrganizationBlock = ({ order, product }: { order: CredentialOrder; product: Product }) => {
+  const { organization } = order;
+  if (!organization) {
+    return null;
+  }
+
+  const showContactsBlock =
+    organization.contact_email || organization.contact_phone || organization.dpo_email;
+
+  return (
+    <div className="dashboard-splitted-card mt-s" data-testid="organization-block">
+      <div className="dashboard-splitted-card__column order-organization__caption">
+        <div className="dashboard-item-order__organization">
+          <div className="dashboard-item-order__organization__header">
+            <FormattedMessage {...messages.organizationHeader} />
+          </div>
+          <div
+            className="dashboard-item-order__organization__logo"
+            style={{
+              backgroundImage: `url(${organization.logo?.src})`,
+            }}
+          />
+          <div className="dashboard-item-order__organization__name">{organization.title}</div>
+        </div>
+      </div>
+      <div className="dashboard-splitted-card__separator order-organization__separator" />
+      <div className="dashboard-splitted-card__column order-organization__items">
+        <ContractItem order={order} product={product} />
+        {showContactsBlock && (
+          <div className="dashboard-splitted-card__item">
+            <div className="dashboard-splitted-card__item__title">Contacts</div>
+            <div className="dashboard-splitted-card__item__description">
+              {organization.contact_email && (
+                <div className="organization-block__contact__item">
+                  <FormattedMessage {...messages.organizationMailContactLabel} />
+                  <Button
+                    size="small"
+                    color="tertiary"
+                    href={'mailto:' + (organization.contact_email ?? '')}
+                  >
+                    {organization.contact_email}
+                  </Button>
+                </div>
+              )}
+              {organization.contact_phone && (
+                <div className="organization-block__contact__item">
+                  <FormattedMessage {...messages.organizationPhoneContactLabel} />
+                  <Button
+                    size="small"
+                    color="tertiary"
+                    href={'tel:' + (organization.contact_phone ?? '')}
+                  >
+                    {organization.contact_phone}
+                  </Button>
+                </div>
+              )}
+              {organization.dpo_email && (
+                <div className="organization-block__contact__item">
+                  <FormattedMessage {...messages.organizationDpoContactLabel} />
+                  <Button
+                    size="small"
+                    color="tertiary"
+                    href={'mailto:' + (organization.dpo_email ?? '')}
+                  >
+                    {organization.dpo_email}
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        {organization.address && (
+          <div className="dashboard-splitted-card__item dashboard-splitted-card__item__address">
+            <div className="dashboard-splitted-card__item__title">Address</div>
+            <div className="dashboard-splitted-card__item__description">
+              <AddressView address={organization.address} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ContractItem = ({ product, order }: { order: CredentialOrder; product: Product }) => {
+  if (!product?.contract_definition) {
+    return;
+  }
+
+  const needsSignature = OrderHelper.orderNeedsSignature(order, product.contract_definition);
+  return (
+    <div
+      id={`dashboard-item-contract-${order.id}`}
+      className="dashboard-splitted-card__item"
+      data-testid={`dashboard-item-contract-${order.id}`}
+    >
+      <div
+        className={classNames('dashboard-splitted-card__item__title', {
+          'dashboard-splitted-card__item__title--dot': needsSignature,
+        })}
+      >
+        <span>
+          <FormattedMessage {...messages.trainingContractTitle} />
+        </span>
+      </div>
+      <div className="dashboard-splitted-card__item__description">
+        <ContractStatus contract={order.contract} />
+      </div>
+      <div className="dashboard-splitted-card__item__actions">
+        <SignContractButton
           order={order}
-          contract_definition={product?.contract_definition!}
           contract={order.contract}
-          writable={writable}
-          mode="compact"
+          writable={true}
+          className="dashboard-item__button"
         />
-      )}
+      </div>
     </div>
   );
 };

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

@@ -41,3 +41,132 @@
     }
   }
 }
+
+.dashboard-splitted-card {
+  background-color: r-theme-val(dashboard-splitted-card, background-color);
+  border-radius: 0.25rem;
+  box-shadow: r-theme-val(dashboard-splitted-card, base-shadow);
+  padding: 2rem;
+  display: flex;
+  color: r-theme-val(dashboard-splitted-card, color);
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+
+  &__separator {
+    margin: 0 2rem;
+    border-right: 1px r-theme-val(dashboard-splitted-card, separator-color) solid;
+
+    @include media-breakpoint-down(sm) {
+      margin: 2rem 0;
+      border-right: none;
+      border-bottom: 1px r-theme-val(dashboard-splitted-card, separator-color) solid;
+    }
+  }
+
+  &__column {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    @include media-breakpoint-down(sm) {
+      width: auto;
+    }
+
+    &:last-child {
+      justify-content: center;
+    }
+  }
+
+  &__item {
+    &__title {
+      font-weight: 800;
+      font-size: 1rem;
+      font-family: $r-font-family-montserrat;
+      margin-bottom: 0.5rem;
+
+      span {
+        position: relative;
+      }
+
+      &--dot {
+        span::after {
+          content: '';
+          margin-left: 0.25rem;
+          background-color: r-theme-val(dashboard-splitted-card, dot-color);
+          width: 8px;
+          height: 8px;
+          display: block;
+          border-radius: 100%;
+          position: absolute;
+          right: -12px;
+          top: -4px;
+        }
+      }
+    }
+
+    &__description {
+      font-size: 0.875rem;
+    }
+
+    &__actions {
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+.dashboard-item-order__organization {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  flex-grow: 1;
+
+  &__name {
+    font-size: 24px;
+    font-weight: 800;
+  }
+
+  &__logo {
+    min-height: 64px;
+    max-height: 128px;
+    width: 100%;
+    flex-grow: 1;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
+
+.dashboard-splitted-card__item__address {
+  address {
+    margin: 0;
+  }
+}
+
+.organization-block__contact__item {
+  font-weight: bold;
+
+  a {
+    margin-left: 0.25rem;
+  }
+}
+
+.order-organization {
+  &__caption {
+    order: 3;
+  }
+
+  &__separator {
+    order: 2;
+  }
+
+  &__misc {
+    order: 1;
+  }
+}

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

@@ -1,5 +1,14 @@
 .dashboard-order-loader__banners {
   .banner {
     margin-top: 0;
+
+    a {
+      color: white;
+      text-decoration: underline;
+
+      &:hover {
+        color: white;
+      }
+    }
   }
 }

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

@@ -17,10 +17,15 @@ const messages = defineMessages({
     id: 'components.DashboardOrderLoader.loading',
   },
   signatureNeeded: {
-    defaultMessage: 'You need to sign your contract before enrolling in a course run',
+    defaultMessage: 'You need to {signLink} before enrolling in a course run',
     description: 'Banner displayed when the contract is not signed',
     id: 'components.DashboardOrderLoader.signatureNeeded',
   },
+  signLink: {
+    defaultMessage: 'sign your contract',
+    description: 'Link to sign the contract',
+    id: 'components.DashboardOrderLoader.signLink',
+  },
   wrongLinkedProductError: {
     defaultMessage: 'This page is not available for this order.',
     description: "Error message displayed when order's linked product type is not handle.",
@@ -48,7 +53,6 @@ export const DashboardOrderLoader = () => {
     }
   }, [credentialOrder]);
   const error = errorOrder || errorCourseProduct || wrongLinkedProductError;
-
   const fetching = fetchingOrder || fetchingCourseProduct;
   const needsSignature = OrderHelper.orderNeedsSignature(
     order,
@@ -66,8 +70,19 @@ export const DashboardOrderLoader = () => {
       )}
       <div className="dashboard-order-loader__banners">
         {error && <Banner message={error} type={BannerType.ERROR} />}
-        {needsSignature && (
-          <Banner message={intl.formatMessage(messages.signatureNeeded)} type={BannerType.ERROR} />
+        {order && needsSignature && (
+          <Banner
+            message={
+              intl.formatMessage(messages.signatureNeeded, {
+                signLink: (
+                  <a href={'#dashboard-item-contract-' + order.id}>
+                    <FormattedMessage {...messages.signLink} />
+                  </a>
+                ),
+              }) as any
+            }
+            type={BannerType.ERROR}
+          />
         )}
       </div>
       {credentialOrder && (

package/package.json

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

package/scss/colors/_theme.scss

@@ -276,6 +276,13 @@ $r-theme: (
     base-border: r-color('light-grey'),
     menu-link-inline-padding: 16px,
   ),
+  dashboard-splitted-card: (
+    color: r-color('charcoal'),
+    base-shadow: 0 0 6px r-color('light-grey'),
+    background-color: r-color('white'),
+    dot-color: r-color('firebrick6'),
+    separator-color: r-color('grey87'),
+  ),
   dashboard-list: (
     background-color-loading: r-color('smoke'),
   ),