richie-education 3.1.3-dev12 → 3.1.3-dev15

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

@@ -8,6 +8,7 @@ import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
 import { Spinner } from 'components/Spinner';
 import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   title: {
@@ -54,6 +55,7 @@ const messages = defineMessages({
 });
 
 export const SaleTunnelInformation = () => {
+  const { product } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
@@ -70,7 +72,7 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        <PaymentScheduleBlock />
+        {product.type === ProductType.CREDENTIAL && <PaymentScheduleBlock />}
         <Total />
         <WithdrawRightCheckbox />
       </div>
@@ -108,7 +110,7 @@ const Total = () => {
         </div>
         <div className="block-title">
           <FormattedNumber
-            value={offer?.discounted_price || product.price}
+            value={offer?.rules.discounted_price || product.price}
             style="currency"
             currency={product.price_currency}
           />

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

@@ -182,7 +182,9 @@ describe.each([
     nbApiCalls += 1; // useProductOrder call.
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    nbApiCalls += 1; // product payment-schedule call
+    if (product.type === ProductType.CREDENTIAL) {
+      nbApiCalls += 1; // product payment-schedule call
+    }
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -269,7 +271,9 @@ describe.each([
     nbApiCalls += 1; // useProductOrder get order with filters
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    nbApiCalls += 1; // get product payment schedule.
+    if (product.type === ProductType.CREDENTIAL) {
+      nbApiCalls += 1; // get product payment schedule.
+    }
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -403,36 +407,41 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    await screen.findByRole('heading', {
-      level: 4,
-      name: 'Payment schedule',
-    });
+    if (product.type === ProductType.CREDENTIAL) {
+      await screen.findByRole('heading', {
+        level: 4,
+        name: 'Payment schedule',
+      });
 
-    const scheduleTable = screen.getByRole('table');
-    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
-    expect(scheduleTableRows).toHaveLength(schedule.length);
+      const scheduleTable = screen.getByRole('table');
+      const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+      expect(scheduleTableRows).toHaveLength(schedule.length);
 
-    scheduleTableRows.forEach((row, index) => {
-      const installment = schedule[index];
-      // A first column should show the installment index
-      within(row).getByRole('cell', {
-        name: (index + 1).toString(),
-      });
-      // A 2nd column should show the installment amount
-      within(row).getByRole('cell', {
-        name: formatPrice(installment.amount, installment.currency),
-      });
-      // A 3rd column should show the installment withdraw date
-      within(row).getByRole('cell', {
-        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
-          ...DEFAULT_DATE_FORMAT,
-        })}`,
-      });
-      // A 4th column should show the installment state
-      within(row).getByRole('cell', {
-        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      scheduleTableRows.forEach((row, index) => {
+        const installment = schedule[index];
+        // A first column should show the installment index
+        within(row).getByRole('cell', {
+          name: (index + 1).toString(),
+        });
+        // A 2nd column should show the installment amount
+        within(row).getByRole('cell', {
+          name: formatPrice(installment.amount, installment.currency),
+        });
+        // A 3rd column should show the installment withdraw date
+        within(row).getByRole('cell', {
+          name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+            ...DEFAULT_DATE_FORMAT,
+          })}`,
+        });
+        // A 4th column should show the installment state
+        within(row).getByRole('cell', {
+          name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+        });
       });
-    });
+    } else {
+      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      expect(screen.queryByRole('table')).toBeNull();
+    }
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
@@ -449,8 +458,10 @@ describe.each([
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+      },
     }).one();
     const { product } = offer;
 
@@ -468,41 +479,43 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    await screen.findByRole('heading', {
-      level: 4,
-      name: 'Payment schedule',
-    });
+    if (product.type === ProductType.CREDENTIAL) {
+      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
 
-    const scheduleTable = screen.getByRole('table');
-    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
-    expect(scheduleTableRows).toHaveLength(schedule.length);
+      const scheduleTable = screen.getByRole('table');
+      const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+      expect(scheduleTableRows).toHaveLength(schedule.length);
 
-    scheduleTableRows.forEach((row, index) => {
-      const installment = schedule[index];
-      // A first column should show the installment index
-      within(row).getByRole('cell', {
-        name: (index + 1).toString(),
-      });
-      // A 2nd column should show the installment amount
-      within(row).getByRole('cell', {
-        name: formatPrice(installment.amount, installment.currency),
-      });
-      // A 3rd column should show the installment withdraw date
-      within(row).getByRole('cell', {
-        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
-          ...DEFAULT_DATE_FORMAT,
-        })}`,
-      });
-      // A 4th column should show the installment state
-      within(row).getByRole('cell', {
-        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      scheduleTableRows.forEach((row, index) => {
+        const installment = schedule[index];
+        // A first column should show the installment index
+        within(row).getByRole('cell', {
+          name: (index + 1).toString(),
+        });
+        // A 2nd column should show the installment amount
+        within(row).getByRole('cell', {
+          name: formatPrice(installment.amount, installment.currency),
+        });
+        // A 3rd column should show the installment withdraw date
+        within(row).getByRole('cell', {
+          name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+            ...DEFAULT_DATE_FORMAT,
+          })}`,
+        });
+        // A 4th column should show the installment state
+        within(row).getByRole('cell', {
+          name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+        });
       });
-    });
+    } else {
+      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      expect(screen.queryByRole('table')).toBeNull();
+    }
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
       'Total' +
-        formatPrice(offer!.discounted_price!, product.price_currency).replace(
+        formatPrice(offer!.rules.discounted_price!, product.price_currency).replace(
           /(\u202F|\u00a0)/g,
           ' ',
         ),

package/js/types/Joanie.ts

@@ -182,16 +182,21 @@ export interface OfferLight {
   created_on: string;
 }
 
-export interface Offer extends OfferLight {
-  is_withdrawable: boolean;
+export interface OfferRule {
   discounted_price: Nullable<number>;
   discount_rate: Nullable<number>;
   discount_amount: Nullable<number>;
   discount_start: Nullable<string>;
   discount_end: Nullable<string>;
   description: Nullable<string>;
-  nb_seats_available: Nullable<number>;
-  seats: Nullable<number>;
+  nb_available_seats: Nullable<number>;
+  has_seat_limit: boolean;
+  has_seats_left: boolean;
+}
+
+export interface Offer extends OfferLight {
+  is_withdrawable: boolean;
+  rules: OfferRule;
 }
 export function isOffer(entity: CourseListItem | OfferLight | RichieCourse): entity is OfferLight {
   return 'course' in entity && 'product' in entity;

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

@@ -317,14 +317,17 @@ export const OfferFactory = factory((): Offer => {
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
     is_withdrawable: true,
-    discounted_price: null,
-    discount_rate: null,
-    discount_amount: null,
-    discount_start: null,
-    discount_end: null,
-    description: null,
-    seats: null,
-    nb_seats_available: null,
+    rules: {
+      discounted_price: null,
+      discount_rate: null,
+      discount_amount: null,
+      discount_start: null,
+      discount_end: null,
+      description: null,
+      nb_available_seats: null,
+      has_seat_limit: false,
+      has_seats_left: true,
+    },
   };
 });
 

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

@@ -29,11 +29,7 @@ interface CourseProductItemFooterProps {
 }
 
 const CourseProductItemFooter = ({ course, offer, canPurchase }: CourseProductItemFooterProps) => {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { seats, nb_seats_available } = offer;
-  const hasSeatsLimit = seats && nb_seats_available !== undefined;
-  const hasNoSeatsAvailable = hasSeatsLimit && nb_seats_available === 0;
-  if (hasNoSeatsAvailable)
+  if (!offer.rules.has_seats_left)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
@@ -50,11 +46,11 @@ const CourseProductItemFooter = ({ course, offer, canPurchase }: CourseProductIt
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
-      {hasSeatsLimit && (
+      {offer.rules.has_seat_limit && (
         <p className="product-widget__footer__message">
           <FormattedMessage
             {...messages.nbSeatsAvailable}
-            values={{ nb: offer.nb_seats_available }}
+            values={{ nb: offer.rules.nb_available_seats }}
           />
         </p>
       )}

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

@@ -153,11 +153,13 @@ describe('CourseProductItem', () => {
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
-      description: 'Year 2023 discount',
-      discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
-      discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+        description: 'Year 2023 discount',
+        discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
+        discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      },
     }).one();
     const { product } = offer;
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
@@ -186,7 +188,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offer.discounted_price!).replace(
+      priceFormatter(product.price_currency, offer.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -211,11 +213,13 @@ describe('CourseProductItem', () => {
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_amount: 40,
-      description: 'Year 2023 discount',
-      discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
-      discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      rules: {
+        discounted_price: 800,
+        discount_amount: 40,
+        description: 'Year 2023 discount',
+        discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
+        discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      },
     }).one();
     const { product } = offer;
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
@@ -244,7 +248,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offer.discounted_price!).replace(
+      priceFormatter(product.price_currency, offer.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -774,8 +778,10 @@ describe('CourseProductItem', () => {
 
   it('renders a warning message that tells that no seats are left', async () => {
     const offer = OfferFactory({
-      seats: 2,
-      nb_seats_available: 0,
+      rules: {
+        nb_available_seats: 0,
+        has_seats_left: false,
+      },
     }).one();
     const { product } = offer;
     const order = CredentialOrderFactory({

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

@@ -27,8 +27,10 @@ const render = (args: CourseProductItemProps, options?: Maybe<{ order: Credentia
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+      },
     }).one(),
     { overwriteRoutes: true },
   );

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

@@ -103,7 +103,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
       return null;
     }
 
-    if (offer.discounted_price) {
+    if (offer.rules.discounted_price != null) {
       return (
         <>
           <span id="original-price" className="offscreen">
@@ -122,7 +122,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
           <ins aria-describedby="discount-price" className="product-widget__price-discount">
             <FormattedNumber
               currency={product.price_currency}
-              value={offer.discounted_price}
+              value={offer.rules.discounted_price}
               style="currency"
             />
           </ins>
@@ -133,7 +133,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
     return (
       <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
     );
-  }, [canPurchase, offer.discounted_price, product.price]);
+  }, [canPurchase, offer.rules.discounted_price, product.price]);
 
   return (
     <header className="product-widget__header">
@@ -144,37 +144,40 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
         {hasPurchased && <FormattedMessage {...messages.purchased} />}
         {displayPrice}
       </strong>
-      {offer?.description && (
-        <p className="product-widget__header-description">{offer.description}</p>
+      {offer?.rules.description && (
+        <p className="product-widget__header-description">{offer.rules.description}</p>
       )}
-      {offer?.discounted_price && (
+      {offer?.rules.discounted_price && (
         <p className="product-widget__header-discount">
-          {offer.discount_rate ? (
+          {offer.rules.discount_rate ? (
             <span className="product-widget__header-discount-rate">
-              <FormattedNumber value={-offer.discount_rate} style="percent" />
+              <FormattedNumber value={-offer.rules.discount_rate} style="percent" />
             </span>
           ) : (
             <span className="product-widget__header-discount-amount">
               <FormattedNumber
                 currency={product.price_currency}
-                value={-offer.discount_amount!}
+                value={-offer.rules.discount_amount!}
                 style="currency"
               />
             </span>
           )}
-          {offer.discount_start && (
+          {offer.rules.discount_start && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.from}
-                values={{ from: formatDate(offer.discount_start) }}
+                values={{ from: formatDate(offer.rules.discount_start) }}
               />
             </span>
           )}
-          {offer.discount_end && (
+          {offer.rules.discount_end && (
             <span className="product-widget__header-discount-date">
               &nbsp;
-              <FormattedMessage {...messages.to} values={{ to: formatDate(offer.discount_end) }} />
+              <FormattedMessage
+                {...messages.to}
+                values={{ to: formatDate(offer.rules.discount_end) }}
+              />
             </span>
           )}
         </p>

package/package.json

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