richie-education 2.33.1-dev19 → 2.33.1-dev23

package/js/components/PaymentScheduleGrid/_styles.scss

@@ -22,9 +22,10 @@
   font-weight: var(--c--theme--font--weight--semibold);
   font-size: rem-calc(12px);
 
-  &--incoming {
-    background-color: var(--c--theme--colors--grey87);
-    color: var(--c--theme--colors--charcoal);
+  &--canceled,
+  &--refunded {
+    color: var(--c--theme--colors--white);
+    background-color: var(--c--theme--colors--grey59);
   }
 
   &--paid {
@@ -37,8 +38,8 @@
     color: var(--c--theme--colors--white);
   }
 
-  &--require_payment,
-  &--failed {
+  &--refused,
+  &--error {
     background-color: var(--c--theme--colors--firebrick6);
     color: var(--c--theme--colors--white);
   }

package/js/components/PaymentScheduleGrid/index.tsx

@@ -22,6 +22,12 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Pending',
     description: 'Label displayed for pending payment state',
   },
+  [PaymentScheduleState.ERROR]: {
+    id: 'components.PaymentScheduleGrid.state.error',
+    defaultMessage: 'Pending',
+    description:
+      'Label displayed for error payment state. For learner we assume to display `pending`.',
+  },
   [PaymentScheduleState.PAID]: {
     id: 'components.PaymentScheduleGrid.state.paid',
     defaultMessage: 'Paid',
@@ -32,6 +38,16 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Refused',
     description: 'Label displayed for refused payment state',
   },
+  [PaymentScheduleState.CANCELED]: {
+    id: 'components.PaymentScheduleGrid.state.canceled',
+    defaultMessage: 'Canceled',
+    description: 'Label displayed for canceled payment state',
+  },
+  [PaymentScheduleState.REFUNDED]: {
+    id: 'components.PaymentScheduleGrid.state.refunded',
+    defaultMessage: 'Refunded',
+    description: 'Label displayed for refunded payment state',
+  },
 });
 
 export const PaymentScheduleGrid = ({ schedule }: Props) => {

package/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
-import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
+import { Enrollment, CredentialOrder, ProductType, CANCELED_ORDER_STATES } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
 
@@ -23,7 +23,7 @@ const useLearnerCoursesSearch = () => {
     query,
     orderFilters: {
       product_type: [ProductType.CREDENTIAL],
-      state_exclude: [OrderState.CANCELED],
+      state_exclude: CANCELED_ORDER_STATES,
     },
   });
 

package/js/pages/DashboardCourses/index.spec.tsx

@@ -103,7 +103,13 @@ describe('<DashboardCourses/>', () => {
   it('renders an empty placeholder', async () => {
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     const enrollmentsDeferred = new Deferred();
@@ -145,25 +151,57 @@ describe('<DashboardCourses/>', () => {
       client,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(0, perPage),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credentia&state_exclude=canceled&page=2&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=2' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=2&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=2' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage, perPage * 2),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=3' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=3' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage * 2, perPage * 3),
         next: null,
@@ -237,7 +275,13 @@ describe('<DashboardCourses/>', () => {
     jest.spyOn(console, 'error').mockImplementation(noop);
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     fetchMock.get(

package/js/types/Joanie.ts

@@ -265,6 +265,8 @@ export interface EnrollmentLight {
 export enum OrderState {
   ASSIGNED = 'assigned',
   CANCELED = 'canceled',
+  REFUNDING = 'refunding',
+  REFUNDED = 'refunded',
   COMPLETED = 'completed',
   DRAFT = 'draft',
   FAILED_PAYMENT = 'failed_payment',
@@ -294,6 +296,12 @@ export const ACTIVE_ORDER_STATES = [
 
 export const NOT_CANCELED_ORDER_STATES = [...ACTIVE_ORDER_STATES, ...PURCHASABLE_ORDER_STATES];
 
+export const CANCELED_ORDER_STATES = [
+  OrderState.CANCELED,
+  OrderState.REFUNDING,
+  OrderState.REFUNDED,
+];
+
 export const ENROLLABLE_ORDER_STATES = [
   OrderState.COMPLETED,
   OrderState.PENDING_PAYMENT,
@@ -448,8 +456,11 @@ export interface OrderPaymentInfo {
 }
 
 export enum PaymentScheduleState {
-  PENDING = 'pending',
+  CANCELED = 'canceled',
+  ERROR = 'error',
   PAID = 'paid',
+  PENDING = 'pending',
+  REFUNDED = 'refunded',
   REFUSED = 'refused',
 }
 

package/js/utils/OrderHelper/index.ts

@@ -1,5 +1,6 @@
 import {
   ACTIVE_ORDER_STATES,
+  CANCELED_ORDER_STATES,
   ENROLLABLE_ORDER_STATES,
   NestedCourseOrder,
   Order,
@@ -11,6 +12,7 @@ import {
 export enum OrderStatus {
   ASSIGNED = 'assigned',
   CANCELED = 'canceled',
+  REFUNDED = 'refunded',
   COMPLETED = 'completed',
   DRAFT = 'draft',
   FAILED_PAYMENT = 'failed_payment',
@@ -38,6 +40,8 @@ export class OrderHelper {
     const orderStatusMap = {
       [OrderState.ASSIGNED]: OrderStatus.ASSIGNED,
       [OrderState.CANCELED]: OrderStatus.CANCELED,
+      [OrderState.REFUNDING]: OrderStatus.CANCELED,
+      [OrderState.REFUNDED]: OrderStatus.REFUNDED,
       [OrderState.COMPLETED]: OrderStatus.COMPLETED,
       [OrderState.DRAFT]: OrderStatus.DRAFT,
       [OrderState.FAILED_PAYMENT]: OrderStatus.FAILED_PAYMENT,
@@ -91,6 +95,11 @@ export class OrderHelper {
     return ACTIVE_ORDER_STATES.includes(order.state);
   }
 
+  static isCanceled(order?: Order | NestedCourseOrder | OrderEnrollment) {
+    if (!order) return false;
+    return CANCELED_ORDER_STATES.includes(order.state);
+  }
+
   static isPurchasable(order?: Order | NestedCourseOrder | OrderEnrollment) {
     if (!order) return true;
     return PURCHASABLE_ORDER_STATES.includes(order.state);

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

@@ -228,7 +228,13 @@ describe('<ProductCertificateFooter/>', () => {
   // From https://github.com/openfun/richie/issues/2237
   it('should hide purchase button after payment', async () => {
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${PER_PAGE.useOrdersEnrollments}`,
       {
         results: [],
         next: null,

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -86,7 +86,13 @@ describe('<DashboardItemOrder/> Contract', () => {
       });
 
       fetchMock.get(
-        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=1' +
+          '&page_size=50',
         { results: [order], next: null, previous: null, count: 1 },
       );
 
@@ -259,7 +265,13 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       // Go back to the list view to make sure the sign button is not shown anymore.
       fetchMock.get(
-        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=1' +
+          '&page_size=50',
         { results: [signedOrder], next: null, previous: null, count: 1 },
         { overwriteRoutes: true },
       );

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

@@ -61,6 +61,7 @@ type Props = {
 
 const Installment = ({ order }: Props) => {
   const isActive = OrderHelper.isActive(order);
+  const isCanceled = OrderHelper.isCanceled(order);
   const failedInstallment = PaymentScheduleHelper.getFailedInstallment(order.payment_schedule);
   const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
   const shouldDisplayDot = needsPaymentMethod || !!failedInstallment;
@@ -80,13 +81,13 @@ const Installment = ({ order }: Props) => {
           <FormattedMessage {...messages.paymentTitle} />
         </span>
       </div>
-      {!isActive && !needsPaymentMethod && (
+      {!isActive && !isCanceled && !needsPaymentMethod && (
         <p className="dashboard-splitted-card__item__description">
           <FormattedMessage {...messages.paymentInactiveDescription} />
         </p>
       )}
       <PaymentMethodManager order={order} />
-      {isActive && <InstallmentManager order={order} />}
+      {(isActive || isCanceled) && <InstallmentManager order={order} />}
     </div>
   );
 };

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

@@ -11,7 +11,7 @@ import {
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useState, useEffect } from 'react';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
-import { CreditCard, Order } from 'types/Joanie';
+import { ACTIVE_ORDER_STATES, CreditCard, Order, OrderState } from 'types/Joanie';
 import { CreditCardSelector } from 'components/CreditCardSelector';
 import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
 import { Maybe } from 'types/utils';
@@ -54,14 +54,21 @@ export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps)
   const intl = useIntl();
   const retryModal = useModal();
   const failedInstallment = PaymentScheduleHelper.getFailedInstallment(order.payment_schedule);
+  const showPaymentMethod = ACTIVE_ORDER_STATES.filter<OrderState>(
+    (state) => state !== OrderState.COMPLETED,
+  ).includes(order.state);
 
   return (
     <>
       <Modal {...props} size={ModalSize.MEDIUM} title={intl.formatMessage(messages.title)}>
-        <h3 className="order-payment-details__title mb-s">
-          <FormattedMessage {...messages.paymentMethodTitle} />
-        </h3>
-        <CreditCardSelectorWrapper selectedCreditCardId={order.credit_card_id} />
+        {showPaymentMethod && (
+          <>
+            <h3 className="order-payment-details__title mb-s">
+              <FormattedMessage {...messages.paymentMethodTitle} />
+            </h3>
+            <CreditCardSelectorWrapper selectedCreditCardId={order.credit_card_id} />
+          </>
+        )}
         <h3 className="order-payment-details__title mb-s mt-b">
           <FormattedMessage {...messages.scheduleTitle} />
         </h3>

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

@@ -66,6 +66,11 @@ export const messages = defineMessages<MessageKeys>({
       'Status shown on the dashboard order item when order is completed and has a certificate',
     defaultMessage: 'Successfully completed',
   },
+  statusRefunded: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusRefunded',
+    description: 'Status shown on the dashboard order item when order is refunded',
+    defaultMessage: 'Refunded',
+  },
 });
 
 const OrderStateLearnerMessage = (props: OrderStateMessageBaseProps) => {

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

@@ -10,18 +10,19 @@ export interface OrderStateMessageBaseProps {
 }
 
 export type MessageKeys =
-  | 'statusDraft'
   | 'statusAssigned'
+  | 'statusCanceled'
+  | 'statusCompleted'
+  | 'statusDraft'
+  | 'statusFailedPayment'
+  | 'statusNoPayment'
+  | 'statusPassed'
   | 'statusPending'
   | 'statusPendingPayment'
-  | 'statusCompleted'
-  | 'statusWaitingSignature'
+  | 'statusRefunded'
   | 'statusWaitingCounterSignature'
   | 'statusWaitingPaymentMethod'
-  | 'statusCanceled'
-  | 'statusNoPayment'
-  | 'statusFailedPayment'
-  | 'statusPassed';
+  | 'statusWaitingSignature';
 
 interface OrderStateMessageProps extends OrderStateMessageBaseProps {
   messages: Record<MessageKeys, MessageDescriptor>;
@@ -37,13 +38,14 @@ const OrderStateMessage = ({ order, messages }: OrderStateMessageProps) => {
   const orderStatusMessagesMap = {
     [OrderStatus.ASSIGNED]: messages.statusAssigned,
     [OrderStatus.CANCELED]: messages.statusCanceled,
-    [OrderStatus.DRAFT]: messages.statusDraft,
     [OrderStatus.COMPLETED]: messages.statusCompleted,
+    [OrderStatus.DRAFT]: messages.statusDraft,
     [OrderStatus.FAILED_PAYMENT]: messages.statusFailedPayment,
     [OrderStatus.NO_PAYMENT]: messages.statusNoPayment,
     [OrderStatus.PASSED]: messages.statusPassed,
     [OrderStatus.PENDING]: messages.statusPending,
     [OrderStatus.PENDING_PAYMENT]: messages.statusPendingPayment,
+    [OrderStatus.REFUNDED]: messages.statusRefunded,
     [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
     [OrderStatus.WAITING_PAYMENT_METHOD]: messages.statusWaitingPaymentMethod,
     [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,

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

@@ -67,6 +67,11 @@ export const messages = defineMessages<MessageKeys>({
       'Status shown on the dashboard order item when order is completed with certificate',
     defaultMessage: 'Certified',
   },
+  statusRefunded: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusRefunded',
+    description: 'Status shown on the dashboard order item when order is refunded',
+    defaultMessage: 'Refunded',
+  },
 });
 
 const OrderStateTeacherMessage = (props: OrderStateMessageBaseProps) => {

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

@@ -49,7 +49,13 @@ describe('<Dashboard />', () => {
       { count: 0, results: [] },
     );
     fetchMock.get(
-      'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        '&page_size=50',
       {
         count: 0,
         results: [],

package/package.json

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