richie-education 3.1.3-dev3 → 3.1.3-dev30

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

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import PurchaseButton from 'components/PurchaseButton';
-import { CourseProductRelation, CredentialProduct, OrderGroup } from 'types/Joanie';
+import { Offering, CredentialProduct } from 'types/Joanie';
 import { PacedCourse } from 'types';
 
 const messages = defineMessages({
@@ -24,56 +24,41 @@ other {# remaining seats}
 
 interface CourseProductItemFooterProps {
   course: PacedCourse;
-  courseProductRelation: CourseProductRelation;
+  offering: Offering;
   canPurchase: boolean;
-  orderGroups: OrderGroup[];
-  orderGroupsAvailable: OrderGroup[];
 }
 
 const CourseProductItemFooter = ({
   course,
-  courseProductRelation,
-  orderGroups,
-  orderGroupsAvailable,
+  offering,
   canPurchase,
 }: CourseProductItemFooterProps) => {
-  if (orderGroups.length === 0) {
-    return (
-      <PurchaseButton
-        course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
-        disabled={!canPurchase}
-        buttonProps={{ fullWidth: true }}
-      />
-    );
-  }
-  if (orderGroupsAvailable.length === 0) {
+  if (!offering.rules.has_seats_left)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
       </p>
     );
-  }
-  return orderGroupsAvailable.map((orderGroup) => (
-    <div className="product-widget__footer__order-group" key={orderGroup.id}>
+  return (
+    <div className="product-widget__footer__order-group">
       <PurchaseButton
         course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
+        product={offering.product as CredentialProduct}
+        offering={offering}
+        organizations={offering.organizations}
+        isWithdrawable={offering.is_withdrawable}
         disabled={!canPurchase}
-        orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}
       />
-      <p className="product-widget__footer__message">
-        <FormattedMessage
-          {...messages.nbSeatsAvailable}
-          values={{ nb: orderGroup.nb_available_seats }}
-        />
-      </p>
+      {offering.rules.has_seat_limit && (
+        <p className="product-widget__footer__message">
+          <FormattedMessage
+            {...messages.nbSeatsAvailable}
+            values={{ nb: offering.rules.nb_available_seats }}
+          />
+        </p>
+      )}
     </div>
-  ));
+  );
 };
 export default CourseProductItemFooter;

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/_styles.scss

@@ -43,6 +43,7 @@
     background-color: r-theme-val(product-item, base-border);
     color: r-theme-val(product-item, light-color);
     justify-content: space-between;
+    text-align: center;
     padding: 1rem 0.5rem;
 
     &-main {
@@ -51,6 +52,8 @@
       font-family: $r-font-family-montserrat;
       font-weight: bold;
       justify-content: space-between;
+      text-align: initial;
+      margin-bottom: rem-calc(8px);
     }
 
     &-metadata {
@@ -64,6 +67,12 @@
       }
     }
 
+    & .product-widget__header-main {
+      display: flex;
+      justify-content: center;
+      text-align: center;
+    }
+
     & .product-widget__title {
       color: r-theme-val(product-item, light-color);
       font-size: 1.5rem;
@@ -73,11 +82,32 @@
       background-color: r-theme-val(product-item, light-color);
       border-radius: 100vw;
       color: r-theme-val(product-item, base-border);
-      font-size: 0.81rem;
-      margin-bottom: 0;
-      margin-left: rem-calc(8px);
+      font-size: 1rem;
+      margin-bottom: 0.3rem;
       padding: 0.375rem 0.81rem;
       white-space: nowrap;
+      display: inline-block;
+
+      &-discounted {
+        text-decoration: line-through;
+        margin-right: rem-calc(6px);
+        font-size: 0.73rem;
+      }
+
+      &-discount {
+        color: r-theme-val(product-item, feedback-color);
+        text-decoration: none;
+      }
+    }
+
+    &-description,
+    &-discount {
+      font-size: 1.1rem;
+      margin: 0;
+    }
+
+    &-discount {
+      font-weight: bold;
     }
   }
 
@@ -149,13 +179,10 @@
 
     &__order-group {
       text-align: center;
+      margin-bottom: 0.5rem;
 
       .product-widget__footer__message {
-        margin: 0.5rem 0;
-      }
-
-      &:last-child {
-        margin-bottom: -1rem;
+        margin: 0.5rem 0 0;
       }
     }
   }

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/CourseRunList.tsx

@@ -38,7 +38,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
       <ol className="course-runs-list">
         {Children.toArray(
           courseRuns.map((courseRun) => (
-            <li className="course-runs-item course-runs-item--inactive">
+            <li key={courseRun.id} className="course-runs-item course-runs-item--inactive">
               <strong className="course-runs-item__course-dates">
                 <span
                   className="offscreen"
@@ -68,7 +68,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </strong>
               <span
                 data-testid={`course-run-${courseRun.id}-enrollment-dates`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__enrollment-date"
               >
                 <EnrollmentDate
                   enrollment_start={courseRun.enrollment_start}
@@ -77,7 +77,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </span>
               <span
                 data-testid={`course-run-${courseRun.id}-languages`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__languages"
               >
                 <FormattedMessage
                   {...sharedMessages.language}

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/_styles.scss

@@ -113,6 +113,15 @@
       line-height: 1.4em;
     }
 
+    &__enrollment-date {
+      font-weight: bold;
+      color: #03317f;
+    }
+
+    &__languages {
+      font-weight: bold;
+    }
+
     &__feedback {
       color: r-theme-val(product-item, feedback-color);
     }