richie-education 2.29.1-dev32 → 2.29.1-dev37

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

@@ -0,0 +1,116 @@
+/**
+ * Test suite for DashboardItem component with an order in the state TO_SAVE_PAYMENT_METHOD.
+ */
+import fetchMock from 'fetch-mock';
+import { screen } from '@testing-library/react';
+import { within } from '@testing-library/dom';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { OrderState } from 'types/Joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
+import { expectBannerError, expectNoBannerError } from 'utils/test/expectBanner';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('DashboardItem / Save Payment Methode State', () => {
+  setupJoanieSession();
+  beforeEach(() => {
+    fetchMock.get(
+      'begin:https://joanie.endpoint/api/v1.0/enrollments/',
+      { results: [], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+  });
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  describe('non-writable', () => {
+    it('renders elements to explain that a payment method is missing', async () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.TO_SAVE_PAYMENT_METHOD,
+      }).one();
+
+      fetchMock.get('begin:https://joanie.endpoint/api/v1.0/orders/', {
+        results: [order],
+        next: null,
+        previous: null,
+        count: null,
+      });
+
+      const { product } = mockCourseProductWithOrder(order);
+
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
+
+      const dashboardItem = await screen.findByTestId(`dashboard-item-order-${order.id}`);
+      within(dashboardItem).getByRole('heading', { level: 5, name: product.title });
+      within(dashboardItem).getByText('A payment method is missing');
+      within(dashboardItem).getByText(
+        'You must define a payment method to finalize your subscription.',
+      );
+      const link = within(dashboardItem).getByRole('link', { name: 'Define' });
+      expect(link).toHaveAttribute('href', `/courses/orders/${order.id}`);
+      await expectNoBannerError(
+        'You have to define a payment method to finalize your subscription.',
+      );
+    });
+  });
+
+  describe('writable', () => {
+    it('renders elements to explain that a payment method is missing', async () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.TO_SAVE_PAYMENT_METHOD,
+      }).one();
+
+      fetchMock.get(
+        'https://joanie.endpoint/api/v1.0/orders/',
+        { results: [order], next: null, previous: null, count: null },
+        { overwriteRoutes: true },
+      );
+
+      const url = `begin:https://joanie.endpoint/api/v1.0/orders/?`;
+      fetchMock.get(url, [order]);
+
+      const { product } = mockCourseProductWithOrder(order);
+
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        {
+          wrapper: BaseJoanieAppWrapper,
+        },
+      );
+
+      const dashboardItem = await screen.findByTestId(`dashboard-item-order-${order.id}`);
+      within(dashboardItem).getByRole('heading', { level: 5, name: product.title });
+      expect(
+        within(dashboardItem).queryByText('A payment method is missing'),
+      ).not.toBeInTheDocument();
+      expect(within(dashboardItem).queryByRole('link', { name: 'Define' })).not.toBeInTheDocument();
+      await expectBannerError('You have to define a payment method to finalize your subscription.');
+      const link = screen.getByRole('link', { name: 'define a payment method' });
+      expect(link).toHaveAttribute('href', '#dashboard-item-payment-method');
+
+      // The payment block should display information about the missing payment method
+      const paymentBlock = screen.getByTestId('dashboard-item-payment-method');
+      const title = within(paymentBlock).getByText('Payment');
+      expect(title.parentElement).toHaveClass('dashboard-splitted-card__item__title--dot');
+      within(paymentBlock).getByText(
+        'To finalize your subscription, you must define a payment method.',
+      );
+      within(paymentBlock).getByRole('button', { name: 'Define' });
+    });
+  });
+});

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

@@ -0,0 +1,174 @@
+import { Alert, Button, useModal, VariantType } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { CredentialOrder, CredentialProduct, OrderState } from 'types/Joanie';
+import { OrderHelper } from 'utils/OrderHelper';
+import { useCourseProduct } from 'hooks/useCourseProducts';
+import { OrderPaymentDetailsModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal';
+import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
+import { SaleTunnel } from 'components/SaleTunnel';
+import { Spinner } from 'components/Spinner';
+
+const messages = defineMessages({
+  paymentTitle: {
+    id: 'components.DashboardItemOrder.Installment.paymentTitle',
+    description: 'Label for the payment block',
+    defaultMessage: 'Payment',
+  },
+  paymentMethodMissingMessage: {
+    id: 'components.DashboardItemOrder.Installment.paymentMethodMissingMessage',
+    description: 'Message displayed when payment method is missing',
+    defaultMessage: 'To finalize your subscription, you must define a payment method.',
+  },
+  paymentInactiveDescription: {
+    id: 'components.DashboardItemOrder.Installment.paymentInactiveDescription',
+    description:
+      'Explanation displayed when the order is not yet active and do not miss payment method',
+    defaultMessage:
+      'You will able to manage your payment installment here once your subscription is finalized.',
+  },
+  paymentNeededMessage: {
+    id: 'components.DashboardItemOrder.Installment.paymentNeededMessage',
+    description: 'Message displayed when payment is needed',
+    defaultMessage: 'A payment failed, please update your payment method',
+  },
+  paymentNeededButton: {
+    id: 'components.DashboardItemOrder.Installment.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
+  paymentLabel: {
+    id: 'components.DashboardItemOrder.Installment.paymentLabel',
+    description: 'Label for the payment block',
+    defaultMessage: 'You can see and manage all installments.',
+  },
+  paymentButton: {
+    id: 'components.DashboardItemOrder.Installment.paymentButton',
+    description: 'Button label for the payment block',
+    defaultMessage: 'Manage payment',
+  },
+  defineButton: {
+    id: 'components.DashboardItemOrder.Installment.defineButton',
+    description: 'Button label to define payment method',
+    defaultMessage: 'Define',
+  },
+});
+
+type Props = {
+  order: CredentialOrder;
+};
+
+const Installment = ({ order }: Props) => {
+  const isActive = OrderHelper.isActive(order);
+  const failedInstallment = OrderHelper.getFailedInstallment(order);
+  const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
+  const shouldDisplayDot = needsPaymentMethod || !!failedInstallment;
+
+  return (
+    <div
+      id="dashboard-item-payment-method"
+      data-testid="dashboard-item-payment-method"
+      className="dashboard-splitted-card__item"
+    >
+      <div
+        className={classNames('dashboard-splitted-card__item__title', {
+          'dashboard-splitted-card__item__title--dot': shouldDisplayDot,
+        })}
+      >
+        <span>
+          <FormattedMessage {...messages.paymentTitle} />
+        </span>
+      </div>
+      {!isActive && !needsPaymentMethod && (
+        <p className="dashboard-splitted-card__item__description">
+          <FormattedMessage {...messages.paymentInactiveDescription} />
+        </p>
+      )}
+      <PaymentMethodManager order={order} />
+      {isActive && <InstallmentManager order={order} />}
+    </div>
+  );
+};
+
+const PaymentMethodManager = ({ order }: Props) => {
+  const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
+  const { item: relation, states } = useCourseProduct({
+    course_id: order.course.code,
+    product_id: order.product_id,
+  });
+  const modal = useModal({ isOpenDefault: false });
+
+  if (!order || states.fetching) {
+    return <Spinner size="small" />;
+  }
+
+  return (
+    <>
+      {needsPaymentMethod && (
+        <div>
+          <p>
+            <FormattedMessage {...messages.paymentMethodMissingMessage} />
+          </p>
+          <Button size="small" onClick={modal.open}>
+            <FormattedMessage {...messages.defineButton} />
+          </Button>
+        </div>
+      )}
+      <SaleTunnel
+        {...modal}
+        product={relation.product as CredentialProduct}
+        course={relation.course}
+      />
+    </>
+  );
+};
+
+const InstallmentManager = ({ order }: Props) => {
+  const intl = useIntl();
+  const modal = useModal();
+  const retryModal = useModal();
+  const failedInstallment = OrderHelper.getFailedInstallment(order);
+
+  const pay = async () => {
+    retryModal.open();
+  };
+  return (
+    <>
+      {failedInstallment && (
+        <Alert
+          className="mb-t"
+          type={VariantType.ERROR}
+          buttons={
+            <Button size="small" onClick={pay}>
+              <FormattedMessage
+                {...messages.paymentNeededButton}
+                values={{
+                  amount: intl.formatNumber(failedInstallment.amount, {
+                    style: 'currency',
+                    currency: failedInstallment.currency,
+                  }),
+                }}
+              />
+            </Button>
+          }
+        >
+          <FormattedMessage {...messages.paymentNeededMessage} />
+        </Alert>
+      )}
+      <div className="dashboard-splitted-card__item__description">
+        <FormattedMessage {...messages.paymentLabel} />
+      </div>
+      <div className="dashboard-splitted-card__item__actions">
+        <Button size="small" color="secondary" onClick={modal.open}>
+          <FormattedMessage {...messages.paymentButton} />
+        </Button>
+      </div>
+      <OrderPaymentDetailsModal {...modal} order={order} />
+      {failedInstallment && (
+        <OrderPaymentRetryModal {...retryModal} installment={failedInstallment} order={order} />
+      )}
+    </>
+  );
+};
+
+export default Installment;

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

@@ -26,7 +26,7 @@ const messages = defineMessages({
   },
   scheduleTitle: {
     id: 'components.DashboardItemOrder.PaymentModal.scheduleTitle',
-    defaultMessage: 'Repayment schedule',
+    defaultMessage: 'Payment schedule',
     description: 'Title of the payment schedule',
   },
   paymentMethodTitle: {
@@ -54,6 +54,7 @@ export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps)
   const intl = useIntl();
   const retryModal = useModal();
   const failedInstallment = OrderHelper.getFailedInstallment(order);
+
   return (
     <>
       <Modal {...props} size={ModalSize.MEDIUM} title={intl.formatMessage(messages.title)}>

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

@@ -0,0 +1,150 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import { CredentialOrder, Product } from 'types/Joanie';
+import { AddressView } from 'components/Address';
+import ContractItem from '../ContractItem';
+import Installment from '../Installment';
+
+const messages = defineMessages({
+  contactDescription: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.contactDescription',
+    description: 'Description of the contact information for the organization',
+    defaultMessage: 'Your training reference is {name} - {email}.',
+  },
+  contactButton: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.contactButton',
+    description: 'Button to contact the organization',
+    defaultMessage: 'Contact',
+  },
+  organizationHeader: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationHeader',
+    description: 'Header of the organization section',
+    defaultMessage: 'This training is provided by',
+  },
+  organizationLogoAlt: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationLogoAlt',
+    description: 'Alt text for the organization logo',
+    defaultMessage: 'Logo of the organization',
+  },
+  organizationMailContactLabel: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationMailContactLabel',
+    description: 'Label for the organization mail contact',
+    defaultMessage: 'Email',
+  },
+  organizationPhoneContactLabel: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationPhoneContactLabel',
+    description: 'Label for the organization phone contact',
+    defaultMessage: 'Phone',
+  },
+  organizationDpoContactLabel: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationDpoContactLabel',
+    description: 'Label for the organization DPO contact',
+    defaultMessage: 'Data protection email',
+  },
+  organizationSubtitleAddress: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationSubtitleAddress',
+    description: 'Subtitle for the organization address section',
+    defaultMessage: 'Address',
+  },
+  organizationSubtitleContacts: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.organizationSubtitleContacts',
+    description: 'Subtitle for the organization contacts section',
+    defaultMessage: 'Contacts',
+  },
+});
+
+type Props = {
+  product: Product;
+  order: CredentialOrder;
+};
+
+const OrganizationBlock = ({ order, product }: Props) => {
+  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">
+              <FormattedMessage {...messages.organizationSubtitleContacts} />
+            </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">
+              <FormattedMessage {...messages.organizationSubtitleAddress} />
+            </div>
+            <div className="dashboard-splitted-card__item__description">
+              <AddressView address={organization.address} />
+            </div>
+          </div>
+        )}
+        <Installment order={order} />
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationBlock;

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

@@ -7,6 +7,7 @@ import Banner, { BannerType } from 'components/Banner';
 import { isCredentialOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { handle } from 'utils/errors/handle';
 import { OrderHelper } from 'utils/OrderHelper';
+import { OrderState } from 'types/Joanie';
 import { DashboardItemOrder } from '../DashboardItem/Order/DashboardItemOrder';
 
 const messages = defineMessages({
@@ -16,12 +17,12 @@ const messages = defineMessages({
     id: 'components.DashboardOrderLoader.loading',
   },
   signatureNeeded: {
-    defaultMessage: 'You need to {signLink} before enrolling in a course run',
+    defaultMessage: 'You have to {signLink} to finalize your subscription.',
     description: 'Banner displayed when the contract is not signed',
     id: 'components.DashboardOrderLoader.signatureNeeded',
   },
   signLink: {
-    defaultMessage: 'sign your contract',
+    defaultMessage: 'sign your training contract',
     description: 'Link to sign the contract',
     id: 'components.DashboardOrderLoader.signLink',
   },
@@ -30,6 +31,16 @@ const messages = defineMessages({
     description: "Error message displayed when order's linked product type is not handle.",
     id: 'components.DashboardOrderLoader.wrongLinkedProductError',
   },
+  paymentMethodMissing: {
+    defaultMessage: 'You have to {definePaymentMethodLink} to finalize your subscription.',
+    description: 'Error message displayed when no payment method is defined.',
+    id: 'components.DashboardOrderLoader.paymentMethodMissing',
+  },
+  definePaymentMethodLink: {
+    defaultMessage: 'define a payment method',
+    description: 'Link to define a payment method',
+    id: 'components.DashboardOrderLoader.definePaymentMethodLink',
+  },
 });
 
 export const DashboardOrderLoader = () => {
@@ -50,6 +61,7 @@ export const DashboardOrderLoader = () => {
   const error = errorOrder || wrongLinkedProductError;
   const fetching = fetchingOrder;
   const needsSignature = order ? OrderHelper.orderNeedsSignature(order) : false;
+  const needsPaymentMethod = order?.state === OrderState.TO_SAVE_PAYMENT_METHOD;
 
   return (
     <>
@@ -67,7 +79,7 @@ export const DashboardOrderLoader = () => {
             message={
               intl.formatMessage(messages.signatureNeeded, {
                 signLink: (
-                  <a href={'#dashboard-item-contract-' + order.id}>
+                  <a href="#dashboard-item-contract">
                     <FormattedMessage {...messages.signLink} />
                   </a>
                 ),
@@ -76,6 +88,20 @@ export const DashboardOrderLoader = () => {
             type={BannerType.ERROR}
           />
         )}
+        {order && needsPaymentMethod && (
+          <Banner
+            message={
+              intl.formatMessage(messages.paymentMethodMissing, {
+                definePaymentMethodLink: (
+                  <a href="#dashboard-item-payment-method">
+                    <FormattedMessage {...messages.definePaymentMethodLink} />
+                  </a>
+                ),
+              }) as any
+            }
+            type={BannerType.ERROR}
+          />
+        )}
       </div>
       {credentialOrder && (
         <DashboardItemOrder

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.29.1-dev32",
+  "version": "2.29.1-dev37",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -49,7 +49,7 @@
     "@formatjs/intl-relativetimeformat": "11.2.14",
     "@hookform/resolvers": "3.9.0",
     "@lyracom/embedded-form-glue": "1.4.2",
-    "@openfun/cunningham-react": "2.9.3",
+    "@openfun/cunningham-react": "2.9.4",
     "@openfun/cunningham-tokens": "2.1.1",
     "@sentry/browser": "8.26.0",
     "@sentry/types": "8.26.0",