fix: Use override for school name and url (#18)

edx · Jul 26, 2023 · 019ab93 · 019ab93
1 parent 08c6243
commit 019ab93
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
@@ -1,3 +1,8 @@
+.card-image-cap .pgn__card-logo-cap {
+  // This prevents stretching of the logo image
+  object-fit: contain;
+}
+
 .skills-builder-modal {
   button[aria-label="Close"][type="button"]{
     color: $white;

diff --git a/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx b/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx
@@ -13,11 +13,17 @@ const RecommendationCard = ({
     marketing_url: marketingUrl,
     active_run_key: courseKey,
     owners,
+    organization_short_code_override: organizationShortCodeOverride,
+    organization_logo_override: organizationLogoOverride,
     partner,
     title,
   } = rec;
 
-  const { logoImageUrl } = owners[0];
+  const schoolName = organizationShortCodeOverride
+  || owners?.[0]?.name
+  || partner?.[0];
+  const schoolLogoUrl = organizationLogoOverride
+  || owners[0].logoImageUrl;
 
   return (
     <Card
@@ -30,18 +36,16 @@ const RecommendationCard = ({
     >
       <Card.ImageCap
         src={cardImageUrl}
-        logoSrc={logoImageUrl}
+        logoSrc={schoolLogoUrl}
         fallbackSrc={cardImageCapFallbackSrc}
         fallbackLogoSrc={cardImageCapFallbackSrc}
+        className="card-image-cap"
       />
       <Card.Header title={title} size="sm" />
       <Card.Section>
-        {partner.map((orgName, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Chip key={index} className="chip-max-width">
-            {orgName}
-          </Chip>
-        ))}
+        <Chip className="chip-max-width">
+          {schoolName}
+        </Chip>
       </Card.Section>
     </Card>
   );
@@ -56,8 +60,11 @@ RecommendationCard.propTypes = {
     owners: PropTypes.arrayOf(PropTypes.shape({
       key: PropTypes.string,
       logoImageUrl: PropTypes.string,
+      name: PropTypes.string,
     })),
-    active_run_key: PropTypes.string.isRequired,
+    active_run_key: PropTypes.string,
+    organization_short_code_override: PropTypes.string,
+    organization_logo_override: PropTypes.string,
   }).isRequired,
   productType: PropTypes.string.isRequired,
   handleCourseCardClick: PropTypes.func.isRequired,