richie-education 2.30.1-dev9 → 2.31.1-dev4

package/js/types/Joanie.ts

@@ -174,17 +174,21 @@ export interface DefinitionResourcesProduct {
   contract_definition_id: Nullable<ContractDefinition['id']>;
 }
 
-export interface CourseProductRelation {
+export interface CourseProductRelationLight {
   id: string;
   course: CourseLight;
   organizations: Organization[];
   product: Product;
   created_on: string;
+}
+
+export interface CourseProductRelation extends CourseProductRelationLight {
   order_groups: OrderGroup[];
+  is_withdrawable: boolean;
 }
 export function isCourseProductRelation(
-  entity: CourseListItem | CourseProductRelation | RichieCourse,
-): entity is CourseProductRelation {
+  entity: CourseListItem | CourseProductRelationLight | RichieCourse,
+): entity is CourseProductRelationLight {
   return 'course' in entity && 'product' in entity;
 }
 
@@ -468,6 +472,7 @@ interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
   order_group_id?: OrderGroup['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
+  has_waived_withdrawal_right: boolean;
 }
 
 interface OrderCertificateCreationPayload extends AbstractOrderProductCreationPayload {
@@ -697,7 +702,7 @@ export interface API {
       filters?: Filters,
     ): Filters extends { id: string }
       ? Promise<Nullable<CourseProductRelation>>
-      : Promise<PaginatedResponse<CourseProductRelation>>;
+      : Promise<PaginatedResponse<CourseProductRelationLight>>;
   };
   contractDefinitions: {
     previewTemplate(id: string): Promise<File>;

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

@@ -38,7 +38,7 @@ describe('factory', () => {
     }
     return {
       fullname,
-      username: faker.internet.userName(),
+      username: faker.internet.username(),
       mainAddress: DemoAddressFactory().one(),
       addresses: DemoAddressFactory().many(3),
       favoriteColors: Array(2).fill(faker.color.human()),

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

@@ -51,7 +51,7 @@ import { factory } from './factories';
 export const UserLightFactory = factory((): UserLight => {
   return {
     id: faker.string.uuid(),
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     full_name: faker.person.fullName(),
     email: faker.internet.email(),
   };
@@ -59,7 +59,7 @@ export const UserLightFactory = factory((): UserLight => {
 export const JoanieUserProfileFactory = factory((): JoanieUserProfile => {
   return {
     id: faker.string.uuid(),
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     full_name: faker.person.fullName(),
     is_superuser: false,
     is_staff: false,
@@ -337,6 +337,7 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
     order_groups: [],
+    is_withdrawable: true,
   };
 });
 
@@ -393,7 +394,7 @@ export const NestedCertificateOrderFactory = factory((): NestedCertificateOrder
     enrollment: EnrollmentLightFactory().one(),
     organization: OrganizationFactory().one(),
     product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
-    owner_name: faker.internet.userName(),
+    owner_name: faker.internet.username(),
     state: OrderState.COMPLETED,
   };
 });
@@ -405,7 +406,7 @@ export const NestedCredentialOrderFactory = factory((): NestedCredentialOrder =>
     enrollment: null,
     organization: OrganizationFactory().one(),
     product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
-    owner_name: faker.internet.userName(),
+    owner_name: faker.internet.username(),
     state: OrderState.COMPLETED,
   };
 });
@@ -414,7 +415,7 @@ const AbstractOrderFactory = factory((): Order => {
   return {
     id: faker.string.uuid(),
     created_on: faker.date.past({ years: 1 }).toISOString(),
-    owner: faker.internet.userName(),
+    owner: faker.internet.username(),
     total: faker.number.int(),
     total_currency: faker.finance.currencyCode(),
     main_invoice_reference: faker.string.uuid(),
@@ -490,6 +491,8 @@ export const SaleTunnelContextFactory = factory(
     billingAddress: undefined,
     setBillingAddress: noop,
     setCreditCard: noop,
+    setHasWaivedWithdrawalRight: noop,
+    hasWaivedWithdrawalRight: false,
     step: SaleTunnelStep.IDLE,
     registerSubmitCallback: noop,
     unregisterSubmitCallback: noop,

package/js/utils/test/factories/openEdx.tsx

@@ -9,7 +9,7 @@ import { factory } from './factories';
 
 export const OpenEdxApiProfileFactory = factory((): OpenEdxApiProfile => {
   return {
-    username: faker.internet.userName(),
+    username: faker.internet.username(),
     name: faker.person.fullName(),
     country: faker.location.countryCode(),
     year_of_birth: faker.date.past().toISOString(),

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

@@ -154,7 +154,7 @@ export const UserFactory = factory<User>(() => ({
   access_token: faker.lorem.word(12),
   full_name: faker.person.fullName(),
   email: faker.internet.email(),
-  username: faker.internet.userName(),
+  username: faker.internet.username(),
 }));
 
 export const FonzieUserFactory = factory<User>(() => ({

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.tsx

@@ -33,13 +33,14 @@ export const DashboardItemEnrollment = ({ enrollment }: DashboardItemCourseRunPr
         </div>
       </div>,
     ];
-    enrollment.product_relations.forEach(({ product }) => {
+    enrollment.product_relations.forEach(({ product, is_withdrawable }) => {
       if (isCertificateProduct(product)) {
         partialFooterList.push(
           <ProductCertificateFooter
             key={[enrollment.id, product.id].join('_')}
             product={product}
             enrollment={enrollment}
+            isWithdrawable={is_withdrawable}
           />,
         );
       }

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

@@ -124,6 +124,7 @@ describe('<ProductCertificateFooter/>', () => {
               course,
             }).one(),
           }).one()}
+          isWithdrawable={true}
         />,
       );
       expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
@@ -155,6 +156,7 @@ describe('<ProductCertificateFooter/>', () => {
               course,
             }).one(),
           }).one()}
+          isWithdrawable={true}
         />,
       );
 
@@ -176,7 +178,9 @@ describe('<ProductCertificateFooter/>', () => {
       'https://joanie.endpoint/api/v1.0/certificates/FAKE_CERTIFICATE_ID/',
       CertificateFactory({ id: order.certificate_id }).one(),
     );
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
     expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -193,7 +197,13 @@ describe('<ProductCertificateFooter/>', () => {
         orders: [order],
         course_run: CourseRunFactory({ course }).one(),
       }).one();
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
       expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
       expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
     },
@@ -208,7 +218,9 @@ describe('<ProductCertificateFooter/>', () => {
       orders: [order],
       course_run: CourseRunFactory({ course }).one(),
     }).one();
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
     expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -274,7 +286,13 @@ describe('<ProductCertificateFooter/>', () => {
       }).one();
       const enrollment = EnrollmentFactory({ orders: [order] }).one();
 
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
 
       if (order.state === OrderState.PENDING) {
         // As the order is in pending state, the user should see the following message.
@@ -315,7 +333,13 @@ describe('<ProductCertificateFooter/>', () => {
 
       fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, order);
 
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
 
       if (order.state === OrderState.NO_PAYMENT) {
         // As the order is in no_payment state, the user should see the following message.

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

@@ -63,9 +63,14 @@ const messages = defineMessages({
 export interface ProductCertificateFooterProps {
   product: CertificateProduct;
   enrollment: Enrollment;
+  isWithdrawable: boolean;
 }
 
-const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFooterProps) => {
+const ProductCertificateFooter = ({
+  product,
+  enrollment,
+  isWithdrawable,
+}: ProductCertificateFooterProps) => {
   const [order, setOrder] = useState(
     OrderHelper.getActiveEnrollmentOrder(enrollment.orders || [], product.id),
   );
@@ -103,6 +108,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
         className="dashboard-item__button"
         product={product}
         enrollment={enrollment}
+        isWithdrawable={isWithdrawable}
         buttonProps={{ size: 'small' }}
         disabled={!isPurchasable}
         onFinish={(o) => {

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

@@ -119,6 +119,7 @@ const PaymentMethodManager = ({ order }: Props) => {
         {...modal}
         product={relation.product as CredentialProduct}
         course={relation.course}
+        isWithdrawable={relation.is_withdrawable}
       />
     </>
   );

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

@@ -43,6 +43,7 @@ const CourseProductItemFooter = ({
         course={course}
         product={courseProductRelation.product as CredentialProduct}
         organizations={courseProductRelation.organizations}
+        isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
@@ -61,6 +62,7 @@ const CourseProductItemFooter = ({
         course={course}
         product={courseProductRelation.product as CredentialProduct}
         organizations={courseProductRelation.organizations}
+        isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
         orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.1-dev9",
+  "version": "2.31.1-dev4",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -148,7 +148,8 @@
     "workerDirectory": "../richie/static/richie/js"
   },
   "volta": {
-    "node": "20.11.0"
+    "node": "20.11.0",
+    "yarn": "1.22.22"
   },
   "devDependencies": {
     "@storybook/addon-mdx-gfm": "8.3.6",

package/scss/colors/_theme.scss

@@ -147,6 +147,10 @@ $r-theme: (
     content-color: r-color('slate-grey'),
     description-color: r-color('slate-grey'),
   ),
+  simpletext-variant-box: (
+    primary-color: r-color('denim'),
+    secondary-color: r-color('white'),
+  ),
   blogpost-glimpse: (
     card-background: r-color('white'),
     title-color: r-color('black'),

package/scss/components/_index.scss

@@ -59,6 +59,7 @@
 
 @import './templates/courses/plugins/category_plugin';
 @import './templates/courses/plugins/licence_plugin';
+@import './templates/richie/simpletext/simpletext';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
 @import './templates/richie/large_banner/compacted_banner';

package/scss/components/templates/richie/_multiple-columns.scss

@@ -23,11 +23,6 @@
     padding: 1rem;
   }
 
-  // Impose tiny horizontal padding to every section row
-  .section__row {
-    padding: $cell-gutter;
-  }
-
   // ----------
   // Shared base adjustments for short columns (25+33+50)
   // ----------
@@ -117,6 +112,8 @@
   // ----------
   &__w25 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 25%);
     }
@@ -169,6 +166,8 @@
   // ----------
   &__w33 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 33.3333%);
     }
@@ -193,6 +192,8 @@
   // ----------
   &__w50 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 50%);
     }
@@ -268,6 +269,8 @@
   // ----------
   &__w75 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 75%);
     }

package/scss/components/templates/richie/simpletext/_simpletext.scss

@@ -0,0 +1,43 @@
+// CKEditor 'simple text' plugin
+//
+// This aims to only adjust every possible plugins so they correctly fit since they
+// were done for 100% size only. No colour, font or anything else should be changed
+// here.
+//
+$r-simpletext-margin-bottom: 0.5rem !default;
+$r-simpletext-variant-padding: 1rem !default;
+$r-simpletext-variant-radius: 0.75rem !default;
+
+.simple-text {
+  margin-bottom: $r-simpletext-margin-bottom;
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &__variant-round-box {
+    padding: $r-simpletext-variant-padding;
+    border: 1px solid transparent;
+    border-radius: $r-simpletext-variant-radius;
+  }
+
+  &__variant-stroked {
+    border-color: r-theme-val(simpletext-variant-box, primary-color);
+    background: r-theme-val(simpletext-variant-box, secondary-color);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: r-theme-val(simpletext-variant-box, primary-color);
+    }
+  }
+
+  &__variant-fulfilled {
+    color: r-theme-val(simpletext-variant-box, secondary-color);
+    border-color: r-theme-val(simpletext-variant-box, primary-color);
+    background: r-theme-val(simpletext-variant-box, primary-color);
+  }
+}