richie-education 2.28.2-dev39 → 2.28.2-dev58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/.eslintrc.json +11 -2
  2. package/i18n/locales/ar-SA.json +209 -125
  3. package/i18n/locales/es-ES.json +210 -126
  4. package/i18n/locales/fa-IR.json +209 -125
  5. package/i18n/locales/fr-CA.json +209 -125
  6. package/i18n/locales/fr-FR.json +209 -125
  7. package/i18n/locales/ko-KR.json +209 -125
  8. package/i18n/locales/pt-PT.json +212 -128
  9. package/i18n/locales/ru-RU.json +209 -125
  10. package/i18n/locales/vi-VN.json +209 -125
  11. package/js/api/joanie.ts +14 -17
  12. package/js/api/lms/dummy.ts +1 -12
  13. package/js/components/ContractFrame/AbstractContractFrame.spec.tsx +16 -9
  14. package/js/components/ContractFrame/AbstractContractFrame.tsx +32 -25
  15. package/js/components/ContractFrame/LearnerContractFrame.tsx +2 -2
  16. package/js/components/ContractFrame/_styles.scss +6 -14
  17. package/js/components/CreditCardSelector/index.spec.tsx +7 -7
  18. package/js/components/CreditCardSelector/index.tsx +2 -2
  19. package/js/components/DownloadContractButton/index.spec.tsx +1 -1
  20. package/js/components/OpenEdxFullNameForm/index.spec.tsx +229 -0
  21. package/js/components/OpenEdxFullNameForm/index.tsx +7 -7
  22. package/js/components/PaymentInterfaces/LyraPopIn.tsx +2 -2
  23. package/js/components/PaymentInterfaces/PayplugLightbox.tsx +1 -1
  24. package/js/components/PaymentInterfaces/__mocks__/index.tsx +1 -4
  25. package/js/components/PaymentInterfaces/types.ts +5 -2
  26. package/js/components/PurchaseButton/index.spec.tsx +69 -37
  27. package/js/components/SaleTunnel/AddressSelector/index.spec.tsx +2 -1
  28. package/js/components/SaleTunnel/CertificateSaleTunnel/index.tsx +2 -2
  29. package/js/components/SaleTunnel/CredentialSaleTunnel/index.tsx +6 -10
  30. package/js/components/SaleTunnel/GenericSaleTunnel.tsx +75 -41
  31. package/js/components/SaleTunnel/SaleTunnelInformation/index.tsx +0 -30
  32. package/js/components/SaleTunnel/SaleTunnelSavePaymentMethod/_styles.scss +12 -0
  33. package/js/components/SaleTunnel/SaleTunnelSavePaymentMethod/index.tsx +160 -0
  34. package/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx +15 -29
  35. package/js/components/SaleTunnel/Sponsors/SaleTunnelSponsors.tsx +5 -0
  36. package/js/components/SaleTunnel/SubscriptionButton/_styles.scss +7 -0
  37. package/js/components/SaleTunnel/SubscriptionButton/index.tsx +202 -0
  38. package/js/components/SaleTunnel/_styles.scss +10 -1
  39. package/js/components/SaleTunnel/hooks/useTerms.tsx +0 -77
  40. package/js/components/SaleTunnel/index.credential.spec.tsx +12 -21
  41. package/js/components/SaleTunnel/index.full-process.spec.tsx +110 -48
  42. package/js/components/SaleTunnel/index.spec.tsx +330 -779
  43. package/js/components/SignContractButton/index.omniscientOrders.spec.tsx +16 -11
  44. package/js/components/SignContractButton/index.spec.tsx +16 -20
  45. package/js/components/SignContractButton/index.tsx +3 -1
  46. package/js/hooks/useCreditCards/index.spec.tsx +70 -6
  47. package/js/hooks/useCreditCards/index.ts +49 -11
  48. package/js/hooks/useOrders/index.spec.tsx +322 -0
  49. package/js/hooks/{useOrders.ts → useOrders/index.ts} +40 -14
  50. package/js/hooks/useProductOrder/index.spec.tsx +77 -60
  51. package/js/hooks/useProductOrder/index.tsx +2 -2
  52. package/js/hooks/useResources/useResourcesRoot.ts +1 -0
  53. package/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.spec.tsx +1 -1
  54. package/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.tsx +4 -2
  55. package/js/pages/TeacherDashboardContractsLayout/components/ContractActionsBar/index.spec.tsx +8 -5
  56. package/js/pages/TeacherDashboardContractsLayout/components/SignOrganizationContractButton/index.spec.tsx +8 -9
  57. package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.spec.tsx +1 -1
  58. package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.tsx +1 -6
  59. package/js/settings/settings.test.ts +11 -2
  60. package/js/translations/ar-SA.json +1 -1
  61. package/js/translations/es-ES.json +1 -1
  62. package/js/translations/fa-IR.json +1 -1
  63. package/js/translations/fr-CA.json +1 -1
  64. package/js/translations/fr-FR.json +1 -1
  65. package/js/translations/ko-KR.json +1 -1
  66. package/js/translations/pt-PT.json +1 -1
  67. package/js/translations/ru-RU.json +1 -1
  68. package/js/translations/vi-VN.json +1 -1
  69. package/js/types/Joanie.ts +49 -34
  70. package/js/utils/OrderHelper/index.ts +38 -42
  71. package/js/utils/search/getSuggestionsSection/index.spec.ts +3 -2
  72. package/js/utils/test/factories/joanie.ts +36 -51
  73. package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.tsx +8 -18
  74. package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.spec.tsx +26 -32
  75. package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx +11 -6
  76. package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx +7 -6
  77. package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx +9 -10
  78. package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.spec.tsx +3 -1
  79. package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx +6 -7
  80. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/index.tsx +28 -8
  81. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal/index.tsx +4 -6
  82. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateLearnerMessage/index.spec.tsx +18 -71
  83. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateLearnerMessage/index.tsx +34 -35
  84. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage/index.tsx +27 -24
  85. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.spec.tsx +18 -73
  86. package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.tsx +32 -16
  87. package/js/widgets/Dashboard/components/DashboardOrderLoader/index.tsx +3 -11
  88. package/js/widgets/Dashboard/components/Signature/SignatureDummy.tsx +25 -3
  89. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx +2 -6
  90. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/index.spec.tsx +7 -14
  91. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseRunItem/index.spec.tsx +7 -5
  92. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseRunItem/index.tsx +5 -7
  93. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.spec.tsx +242 -332
  94. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx +12 -13
  95. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx +10 -21
  96. package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx +2 -2
  97. package/package.json +27 -27
  98. package/scss/components/_index.scss +2 -1
  99. package/js/components/PaymentButton/_styles.scss +0 -27
  100. package/js/components/SaleTunnel/GenericPaymentButton/index.tsx +0 -333
  101. package/js/components/SaleTunnel/SaleTunnelNotValidated/index.tsx +0 -70
  102. package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader/index.tsx +0 -41
@@ -5,7 +5,6 @@ import {
5
5
  Certificate,
6
6
  CertificateDefinition,
7
7
  CertificateOrder,
8
- CertificateOrderWithPaymentInfo,
9
8
  CertificateProduct,
10
9
  Contract,
11
10
  ContractDefinition,
@@ -16,7 +15,6 @@ import {
16
15
  CourseProductRelation,
17
16
  CourseRun,
18
17
  CredentialOrder,
19
- CredentialOrderWithPaymentInfo,
20
18
  CredentialProduct,
21
19
  CreditCard,
22
20
  CreditCardBrand,
@@ -45,6 +43,9 @@ import { Payment, PaymentProviders } from 'components/PaymentInterfaces/types';
45
43
  import { CourseStateFactory } from 'utils/test/factories/richie';
46
44
  import { FactoryHelper } from 'utils/test/factories/helper';
47
45
  import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
46
+ import { SaleTunnelContextType, SaleTunnelStep } from 'components/SaleTunnel/GenericSaleTunnel';
47
+ import { SaleTunnelProps } from 'components/SaleTunnel';
48
+ import { noop } from 'utils/index';
48
49
  import { factory } from './factories';
49
50
 
50
51
  export const UserLightFactory = factory((): UserLight => {
@@ -140,7 +141,7 @@ export const ContractFactory = factory((): Contract => {
140
141
  organization_signatory: null,
141
142
  created_on: faker.date.past().toISOString(),
142
143
  definition: ContractDefinitionFactory().one(),
143
- order: NestedCredentialOrderFactory().one(),
144
+ order: NestedCredentialOrderFactory({ state: OrderState.TO_SIGN }).one(),
144
145
  };
145
146
  });
146
147
 
@@ -314,7 +315,7 @@ export const NestedCourseOrderFactory = factory((): NestedCourseOrder => {
314
315
  owner: UserLightFactory().one(),
315
316
  course_id: faker.string.uuid(),
316
317
  product_id: faker.string.uuid(),
317
- state: OrderState.VALIDATED,
318
+ state: OrderState.COMPLETED,
318
319
  enrollment_id: faker.string.uuid(),
319
320
  organization: OrganizationFactory().one(),
320
321
  certificate_id: faker.string.uuid(),
@@ -363,7 +364,7 @@ export const OrderEnrollmentFactory = factory((): OrderEnrollment => {
363
364
  return {
364
365
  id: faker.string.uuid(),
365
366
  product_id: faker.string.uuid(),
366
- state: OrderState.VALIDATED,
367
+ state: OrderState.COMPLETED,
367
368
  };
368
369
  });
369
370
 
@@ -375,19 +376,19 @@ export const OrderLiteFactory = factory((): OrderLite => {
375
376
  main_invoice_reference: faker.string.uuid(),
376
377
  total: faker.number.int(),
377
378
  product_id: faker.string.uuid(),
378
- state: OrderState.VALIDATED,
379
+ state: OrderState.COMPLETED,
379
380
  };
380
381
  });
381
382
 
382
383
  export const NestedCertificateOrderFactory = factory((): NestedCertificateOrder => {
383
384
  return {
384
385
  id: faker.string.uuid(),
385
- course: undefined,
386
+ course: null,
386
387
  enrollment: EnrollmentLightFactory().one(),
387
388
  organization: OrganizationFactory().one(),
388
389
  product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
389
390
  owner_name: faker.internet.userName(),
390
- state: OrderState.VALIDATED,
391
+ state: OrderState.COMPLETED,
391
392
  };
392
393
  });
393
394
 
@@ -395,11 +396,11 @@ export const NestedCredentialOrderFactory = factory((): NestedCredentialOrder =>
395
396
  return {
396
397
  id: faker.string.uuid(),
397
398
  course: CourseLightFactory().one(),
398
- enrollment: undefined,
399
+ enrollment: null,
399
400
  organization: OrganizationFactory().one(),
400
401
  product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
401
402
  owner_name: faker.internet.userName(),
402
- state: OrderState.VALIDATED,
403
+ state: OrderState.COMPLETED,
403
404
  };
404
405
  });
405
406
 
@@ -411,7 +412,7 @@ const AbstractOrderFactory = factory((): Order => {
411
412
  total: faker.number.int(),
412
413
  total_currency: faker.finance.currencyCode(),
413
414
  main_invoice_reference: faker.string.uuid(),
414
- state: OrderState.VALIDATED,
415
+ state: OrderState.COMPLETED,
415
416
  product_id: faker.string.uuid(),
416
417
  target_courses: TargetCourseFactory().many(5),
417
418
  target_enrollments: [],
@@ -422,56 +423,22 @@ const AbstractOrderFactory = factory((): Order => {
422
423
  };
423
424
  });
424
425
 
425
- export const CredentialOrderFactory = factory((): CredentialOrder => {
426
- const order = {
426
+ export const CredentialOrderFactory = factory(
427
+ (): CredentialOrder => ({
427
428
  ...AbstractOrderFactory().one(),
428
429
  course: CourseLightFactory().one(),
429
430
  enrollment: null,
430
431
  payment_schedule: PaymentInstallmentFactory().many(3),
431
- };
432
- return order;
433
- });
434
-
435
- export const CredentialOrderWithPaymentFactory = factory((): CredentialOrderWithPaymentInfo => {
436
- return {
437
- ...CredentialOrderFactory().one(),
438
- payment_info: PaymentFactory().one(),
439
- };
440
- });
441
-
442
- export const CredentialOrderWithOneClickPaymentFactory = factory(
443
- (): CredentialOrderWithPaymentInfo => {
444
- return {
445
- ...CredentialOrderFactory().one(),
446
- payment_info: PaymentFactory().one(),
447
- };
448
- },
432
+ }),
449
433
  );
450
434
 
451
- export const CertificateOrderFactory = factory((): CertificateOrder => {
452
- const order = {
435
+ export const CertificateOrderFactory = factory(
436
+ (): CertificateOrder => ({
453
437
  ...AbstractOrderFactory().one(),
454
438
  course: null,
455
439
  target_courses: [],
456
440
  enrollment: EnrollmentLightFactory().one(),
457
- };
458
- return order;
459
- });
460
-
461
- export const CertificateOrderWithPaymentFactory = factory((): CertificateOrderWithPaymentInfo => {
462
- return {
463
- ...CertificateOrderFactory().one(),
464
- payment_info: PaymentFactory().one(),
465
- };
466
- });
467
-
468
- export const CertificateOrderWithOneClickPaymentFactory = factory(
469
- (): CertificateOrderWithPaymentInfo => {
470
- return {
471
- ...CertificateOrderFactory().one(),
472
- payment_info: PaymentFactory().one(),
473
- };
474
- },
441
+ }),
475
442
  );
476
443
 
477
444
  export const AddressFactory = factory((): Address => {
@@ -507,3 +474,21 @@ export const PaymentFactory = factory((): Payment => {
507
474
  url: faker.internet.url(),
508
475
  };
509
476
  });
477
+
478
+ export const SaleTunnelContextFactory = factory(
479
+ (): SaleTunnelContextType => ({
480
+ webAnalyticsEventKey: 'eventKey',
481
+ order: CredentialOrderFactory().one(),
482
+ product: ProductFactory().one(),
483
+ props: {} as SaleTunnelProps,
484
+ billingAddress: undefined,
485
+ setBillingAddress: noop,
486
+ setCreditCard: noop,
487
+ onPaymentSuccess: noop,
488
+ step: SaleTunnelStep.IDLE,
489
+ registerSubmitCallback: noop,
490
+ unregisterSubmitCallback: noop,
491
+ runSubmitCallbacks: () => new Promise((resolve) => resolve()),
492
+ nextStep: noop,
493
+ }),
494
+ );
@@ -9,7 +9,6 @@ import {
9
9
  CourseRun,
10
10
  CredentialOrder,
11
11
  Enrollment,
12
- Product,
13
12
  } from 'types/Joanie';
14
13
  import { Spinner } from 'components/Spinner';
15
14
  import Banner, { BannerType } from 'components/Banner';
@@ -68,10 +67,11 @@ const messages = defineMessages({
68
67
  description: 'Text displayed when course runs list is loading',
69
68
  id: 'components.DashboardItemCourseEnrollingRun.courseRunsLoading',
70
69
  },
71
- contractUnsigned: {
72
- id: 'components.DashboardItemCourseEnrollingRun.contractUnsigned',
73
- description: 'Message displayed as disabled button title when a contract needs to be signed.',
74
- defaultMessage: 'You have to sign the training contract before enrolling to your course.',
70
+ cannotEnroll: {
71
+ id: 'components.DashboardItemCourseEnrollingRun.cannotEnroll',
72
+ description:
73
+ 'Message displayed as disabled button title when the order state does not allow enrollment.',
74
+ defaultMessage: 'You cannot enroll yet to this training.',
75
75
  },
76
76
  });
77
77
 
@@ -81,7 +81,6 @@ interface DashboardItemCourseEnrollingProps {
81
81
  course: AbstractCourse;
82
82
  activeEnrollment?: Enrollment;
83
83
  order?: CredentialOrder;
84
- product?: Product;
85
84
  writable: boolean;
86
85
  hideEnrollButtons?: boolean;
87
86
  icon?: boolean;
@@ -93,7 +92,6 @@ export const DashboardItemCourseEnrolling = ({
93
92
  activeEnrollment,
94
93
  writable,
95
94
  order,
96
- product,
97
95
  icon = false,
98
96
  notEnrolledUrl = '#',
99
97
  hideEnrollButtons,
@@ -121,7 +119,6 @@ export const DashboardItemCourseEnrolling = ({
121
119
  course={course}
122
120
  enrollments={CoursesHelper.findCourseEnrollmentsInOrder(course, order)}
123
121
  order={order}
124
- product={product}
125
122
  />
126
123
  )}
127
124
  </div>
@@ -132,14 +129,12 @@ interface DashboardItemCourseEnrollingRunsProps {
132
129
  course: AbstractCourse;
133
130
  enrollments: Enrollment[];
134
131
  order?: CredentialOrder;
135
- product?: Product;
136
132
  }
137
133
 
138
134
  const DashboardItemCourseEnrollingRuns = ({
139
135
  course,
140
136
  enrollments,
141
137
  order,
142
- product,
143
138
  }: DashboardItemCourseEnrollingRunsProps) => {
144
139
  const { enroll, isLoading, error } = useEnroll(enrollments, order);
145
140
 
@@ -176,7 +171,6 @@ const DashboardItemCourseEnrollingRuns = ({
176
171
  selected={data.selected}
177
172
  enroll={() => enroll(data.courseRun)}
178
173
  order={order}
179
- product={product}
180
174
  />
181
175
  ))}
182
176
  {isLoading && (
@@ -200,7 +194,6 @@ interface DashboardItemCourseEnrollingRunProps {
200
194
  selected: boolean;
201
195
  enroll: () => void;
202
196
  order?: CredentialOrder | CertificateOrder;
203
- product?: Product;
204
197
  }
205
198
 
206
199
  export const DashboardItemCourseEnrollingRun = ({
@@ -208,14 +201,11 @@ export const DashboardItemCourseEnrollingRun = ({
208
201
  selected,
209
202
  enroll,
210
203
  order,
211
- product,
212
204
  }: DashboardItemCourseEnrollingRunProps) => {
213
205
  const intl = useIntl();
214
206
  const formatDate = useDateFormat();
215
207
  const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
216
- const haveToSignContract = order
217
- ? OrderHelper.orderNeedsSignature(order, product?.contract_definition)
218
- : false;
208
+ const canEnroll = OrderHelper.allowEnrollment(order);
219
209
  const isOpenedForEnrollment = useMemo(
220
210
  () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
221
211
  [courseRun],
@@ -266,11 +256,11 @@ export const DashboardItemCourseEnrollingRun = ({
266
256
  ) : (
267
257
  <div>
268
258
  <Button
269
- disabled={!isOpenedForEnrollment || haveToSignContract}
259
+ disabled={!isOpenedForEnrollment || !canEnroll}
270
260
  color="tertiary"
271
261
  size="small"
272
262
  onClick={enroll}
273
- title={haveToSignContract ? intl.formatMessage(messages.contractUnsigned) : ''}
263
+ title={!canEnroll ? intl.formatMessage(messages.cannotEnroll) : ''}
274
264
  >
275
265
  <FormattedMessage {...messages.enrollRun} />
276
266
  </Button>
@@ -1,7 +1,13 @@
1
1
  import { screen, waitForElementToBeRemoved } from '@testing-library/react';
2
2
  import fetchMock from 'fetch-mock';
3
3
  import userEvent from '@testing-library/user-event';
4
- import { CertificateProduct, CourseLight, OrderState, ProductType } from 'types/Joanie';
4
+ import {
5
+ CertificateProduct,
6
+ CourseLight,
7
+ OrderState,
8
+ ProductType,
9
+ PURCHASABLE_ORDER_STATES,
10
+ } from 'types/Joanie';
5
11
  import {
6
12
  CourseStateFactory,
7
13
  RichieContextFactory as mockRichieContextFactory,
@@ -43,7 +49,7 @@ jest.mock('components/SaleTunnel', () => ({
43
49
  return;
44
50
  }
45
51
  setTimeout(() => {
46
- const order = Factories.CertificateOrderWithOneClickPaymentFactory().one();
52
+ const order = Factories.CertificateOrderFactory().one();
47
53
  onFinish?.(order);
48
54
  }, 100);
49
55
  }, [isOpen]);
@@ -135,7 +141,7 @@ describe('<ProductCertificateFooter/>', () => {
135
141
  it('should display download button for a course run with certificate.', () => {
136
142
  const order = OrderEnrollmentFactory({
137
143
  certificate_id: 'FAKE_CERTIFICATE_ID',
138
- state: OrderState.VALIDATED,
144
+ state: OrderState.COMPLETED,
139
145
  product_id: product.id,
140
146
  }).one();
141
147
  const enrollment = EnrollmentFactory({
@@ -151,35 +157,23 @@ describe('<ProductCertificateFooter/>', () => {
151
157
  expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
152
158
  });
153
159
 
154
- it('should not display purchase button for a course run with submitted order.', () => {
155
- const order = OrderEnrollmentFactory({
156
- certificate_id: undefined,
157
- product_id: product.id,
158
- state: OrderState.SUBMITTED,
159
- }).one();
160
- const enrollment = EnrollmentFactory({
161
- orders: [order],
162
- course_run: CourseRunFactory({ course }).one(),
163
- }).one();
164
- render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
165
- expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
166
- expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
167
- });
168
-
169
- it('should display purchase button for a course run with pending order.', () => {
170
- const order = OrderEnrollmentFactory({
171
- certificate_id: undefined,
172
- product_id: product.id,
173
- state: OrderState.PENDING,
174
- }).one();
175
- const enrollment = EnrollmentFactory({
176
- orders: [order],
177
- course_run: CourseRunFactory({ course }).one(),
178
- }).one();
179
- render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
180
- expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
181
- expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
182
- });
160
+ it.each(PURCHASABLE_ORDER_STATES)(
161
+ 'should display purchase button for a course run with %s order.',
162
+ (state) => {
163
+ const order = OrderEnrollmentFactory({
164
+ certificate_id: undefined,
165
+ product_id: product.id,
166
+ state,
167
+ }).one();
168
+ const enrollment = EnrollmentFactory({
169
+ orders: [order],
170
+ course_run: CourseRunFactory({ course }).one(),
171
+ }).one();
172
+ render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
173
+ expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
174
+ expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
175
+ },
176
+ );
183
177
 
184
178
  it('should not display button (download or purchase) for a course run with order but without certificate.', () => {
185
179
  const order = OrderEnrollmentFactory({
@@ -2,7 +2,12 @@ import { FormattedMessage, defineMessages } from 'react-intl';
2
2
  import { useState } from 'react';
3
3
  import PurchaseButton from 'components/PurchaseButton';
4
4
  import { Icon, IconTypeEnum } from 'components/Icon';
5
- import { CertificateProduct, Enrollment, OrderState, ProductType } from 'types/Joanie';
5
+ import {
6
+ CertificateProduct,
7
+ Enrollment,
8
+ ProductType,
9
+ PURCHASABLE_ORDER_STATES,
10
+ } from 'types/Joanie';
6
11
  import DownloadCertificateButton from 'components/DownloadCertificateButton';
7
12
  import { useCertificate } from 'hooks/useCertificates';
8
13
  import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
@@ -51,7 +56,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
51
56
  <div className="dashboard-item__course-enrolling__infos">
52
57
  <div className="dashboard-item__block__status">
53
58
  <Icon name={IconTypeEnum.CERTIFICATE} />
54
- {order?.state === OrderState.VALIDATED ? (
59
+ {OrderHelper.isActive(order) ? (
55
60
  <>
56
61
  {product.certificate_definition.title + '. '}
57
62
  <CertificateStatus certificate={certificate} productType={product.type} />
@@ -60,11 +65,11 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
60
65
  <FormattedMessage {...messages.buyProductCertificateLabel} />
61
66
  )}
62
67
  </div>
63
- {order?.state === OrderState.VALIDATED ? (
64
- order.certificate_id && (
68
+ {OrderHelper.isActive(order) ? (
69
+ order!.certificate_id && (
65
70
  <DownloadCertificateButton
66
71
  className="dashboard-item__button"
67
- certificateId={order.certificate_id}
72
+ certificateId={order!.certificate_id}
68
73
  />
69
74
  )
70
75
  ) : (
@@ -73,7 +78,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
73
78
  product={product}
74
79
  enrollment={enrollment}
75
80
  buttonProps={{ size: 'small' }}
76
- disabled={order?.state === OrderState.SUBMITTED}
81
+ disabled={order && !PURCHASABLE_ORDER_STATES.includes(order.state)}
77
82
  onFinish={(o) => {
78
83
  /**
79
84
  * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
@@ -22,8 +22,8 @@ import {
22
22
  CourseLightFactory,
23
23
  CourseRunFactory,
24
24
  CredentialOrderFactory,
25
- CredentialOrderWithPaymentFactory,
26
25
  EnrollmentFactory,
26
+ PaymentFactory,
27
27
  TargetCourseFactory,
28
28
  } from 'utils/test/factories/joanie';
29
29
  import {
@@ -91,7 +91,7 @@ describe('<DashboardItemOrder/>', () => {
91
91
 
92
92
  await screen.findByRole('heading', { level: 5, name: product.title });
93
93
  await screen.findByText('Ref. ' + (order.course as CourseLight).code);
94
- await screen.findByText('Pending');
94
+ await screen.findByText('Pending for the first direct debit');
95
95
  await screen.findByRole('link', { name: 'View details' });
96
96
  });
97
97
 
@@ -119,7 +119,7 @@ describe('<DashboardItemOrder/>', () => {
119
119
 
120
120
  await screen.findByRole('heading', { level: 5, name: product.title });
121
121
  await screen.findByText('Ref. ' + (order.course as CourseLight).code);
122
- await screen.findByText('Completed');
122
+ await screen.findByText('Successfully completed');
123
123
  await screen.findByRole('link', { name: 'View details' });
124
124
  await expectSpinner('Loading certificate...');
125
125
  deferred.resolve(certificate);
@@ -138,7 +138,7 @@ describe('<DashboardItemOrder/>', () => {
138
138
 
139
139
  await screen.findByRole('heading', { level: 5, name: product.title });
140
140
  await screen.findByText('Ref. ' + (order.course as CourseLight).code);
141
- await screen.findByText('Completed');
141
+ await screen.findByText('Successfully completed');
142
142
  await screen.findByRole('link', { name: 'View details' });
143
143
  await expectNoSpinner('Loading certificate ...');
144
144
  });
@@ -870,7 +870,8 @@ describe('<DashboardItemOrder/>', () => {
870
870
  });
871
871
 
872
872
  it('renders a writable order with failed payment and retry it successfully', async () => {
873
- const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
873
+ const order = CredentialOrderFactory().one();
874
+ const paymentInfo = PaymentFactory().one();
874
875
 
875
876
  const validOrder = { ...order };
876
877
  validOrder.payment_schedule = [
@@ -921,7 +922,7 @@ describe('<DashboardItemOrder/>', () => {
921
922
  screen.getByText(
922
923
  /The payment failed, please choose another payment method or add a new one during the payment/,
923
924
  );
924
- screen.getByText('Use another credit card during payment');
925
+ screen.getByText('Use another credit card');
925
926
 
926
927
  // Prepare for cache invalidation.
927
928
  fetchMock.get(
@@ -164,13 +164,16 @@ export const DashboardItemOrder = ({
164
164
  course_id: course.code,
165
165
  });
166
166
  const { product } = courseProductRelation || {};
167
- const needsSignature = OrderHelper.orderNeedsSignature(order, product?.contract_definition);
167
+ const needsSignature = OrderHelper.orderNeedsSignature(order);
168
+ const canEnroll = OrderHelper.allowEnrollment(order);
169
+
170
+ if (!product) return null;
168
171
 
169
172
  return (
170
173
  <div className="dashboard-item-order">
171
174
  <DashboardItem
172
175
  data-testid={`dashboard-item-order-${order.id}`}
173
- title={product?.title ?? ''}
176
+ title={product.title}
174
177
  code={'Ref. ' + course.code}
175
178
  imageUrl={course.cover?.src}
176
179
  more={
@@ -185,10 +188,7 @@ export const DashboardItemOrder = ({
185
188
  <div className="dashboard-item-order__footer">
186
189
  <div className="dashboard-item__block__status">
187
190
  <Icon name={IconTypeEnum.SCHOOL} />
188
- <OrderStateLearnerMessage
189
- order={order}
190
- contractDefinition={product?.contract_definition}
191
- />
191
+ <OrderStateLearnerMessage order={order} />
192
192
  </div>
193
193
  {showDetailsButton && (
194
194
  <RouterButton
@@ -206,7 +206,7 @@ export const DashboardItemOrder = ({
206
206
  key={`DashboardItemOrderContract_${order.id}`}
207
207
  title={product.title}
208
208
  order={order}
209
- contract_definition={product?.contract_definition!}
209
+ contract_definition={product.contract_definition!}
210
210
  contract={order.contract}
211
211
  writable={writable}
212
212
  mode="compact"
@@ -224,7 +224,6 @@ export const DashboardItemOrder = ({
224
224
  writable={writable}
225
225
  course={targetCourse}
226
226
  order={order}
227
- product={product}
228
227
  activeEnrollment={CoursesHelper.findActiveCourseEnrollmentInOrder(
229
228
  targetCourse,
230
229
  order,
@@ -232,7 +231,7 @@ export const DashboardItemOrder = ({
232
231
  notEnrolledUrl={generatePath(LearnerDashboardPaths.ORDER, {
233
232
  orderId: order.id,
234
233
  })}
235
- hideEnrollButtons={needsSignature}
234
+ hideEnrollButtons={!canEnroll}
236
235
  />
237
236
  }
238
237
  />
@@ -397,7 +396,7 @@ const ContractItem = ({ product, order }: { order: CredentialOrder; product: Pro
397
396
  return;
398
397
  }
399
398
 
400
- const needsSignature = OrderHelper.orderNeedsSignature(order, product.contract_definition);
399
+ const needsSignature = OrderHelper.orderNeedsSignature(order);
401
400
  return (
402
401
  <div
403
402
  id={`dashboard-item-contract-${order.id}`}
@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker';
3
3
  import { screen } from '@testing-library/react';
4
4
  import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
5
5
  import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
6
- import { CourseLight } from 'types/Joanie';
6
+ import { CourseLight, OrderState } from 'types/Joanie';
7
7
  import {
8
8
  ContractDefinitionFactory,
9
9
  ContractFactory,
@@ -124,6 +124,7 @@ describe('<DashboardItemOrder/> Contract', () => {
124
124
 
125
125
  it('renders a non-writable order with a contract not signed yet', async () => {
126
126
  const order = CredentialOrderFactory({
127
+ state: OrderState.TO_SIGN,
127
128
  target_courses: TargetCourseFactory().many(1),
128
129
  target_enrollments: [],
129
130
  contract: ContractFactory({ student_signed_on: undefined }).one(),
@@ -186,6 +187,7 @@ describe('<DashboardItemOrder/> Contract', () => {
186
187
  });
187
188
  it('renders a writable order with a contract not signed yet', async () => {
188
189
  const order = CredentialOrderFactory({
190
+ state: OrderState.TO_SIGN,
189
191
  target_courses: TargetCourseFactory().many(1),
190
192
  target_enrollments: [],
191
193
  contract: null,
@@ -19,6 +19,7 @@ import { render } from 'utils/test/render';
19
19
  import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
20
20
 
21
21
  import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
22
+ import { OrderState } from 'types/Joanie';
22
23
 
23
24
  jest.mock('utils/context', () => ({
24
25
  __esModule: true,
@@ -49,9 +50,10 @@ describe('<DashboardItemOrder/> Contract', () => {
49
50
  describe('writable', () => {
50
51
  it('successfully sign a contract', async () => {
51
52
  const order = CredentialOrderFactory({
53
+ state: OrderState.TO_SIGN,
52
54
  target_courses: TargetCourseFactory().many(1),
53
55
  target_enrollments: [],
54
- contract: ContractFactory({ student_signed_on: undefined }).one(),
56
+ contract: ContractFactory({ student_signed_on: null }).one(),
55
57
  }).one();
56
58
 
57
59
  // learner dashboard course page do one call to course product relation per order
@@ -82,6 +84,7 @@ describe('<DashboardItemOrder/> Contract', () => {
82
84
  `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`,
83
85
  submitDeferred.promise,
84
86
  );
87
+ fetchMock.post(`https://joanie.endpoint/api/v1.0/signature/notifications/`, 200);
85
88
 
86
89
  // delay: null is needed because as we are using fake timers it would mock the timers of
87
90
  // RTL too. See https://github.com/testing-library/user-event/issues/833.
@@ -92,11 +95,7 @@ describe('<DashboardItemOrder/> Contract', () => {
92
95
  });
93
96
 
94
97
  await expectNoSpinner('Loading orders and enrollments...');
95
-
96
- expect(
97
- await screen.findByRole('heading', { level: 5, name: product.title }),
98
- ).toBeInTheDocument();
99
-
98
+ await screen.findByRole('heading', { level: 5, name: product.title });
100
99
  // Make sure the sign button is shown.
101
100
  await user.click(screen.getByRole('link', { name: 'Sign' }));
102
101
 
@@ -212,7 +211,7 @@ describe('<DashboardItemOrder/> Contract', () => {
212
211
  // We have the success message.
213
212
  await screen.findByRole('heading', { name: 'Congratulations!' });
214
213
  screen.getByText(
215
- 'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
214
+ 'You will receive an email once your contract will be fully signed. You can now finalize your subscription.',
216
215
  );
217
216
  const nextButton = screen.getByRole('button', { name: 'Next' });
218
217