stripe updates

NP_Custom_Templates/customer_templates/Stripe/_courses_partnertraining_index.html.liquid

@@ -42,7 +42,6 @@
 			{% if show_learning_paths_section or show_events_section %}
 				
 				<div class="blocks-layout">
-
 					{% if show_learning_paths_section %}
 						<div class="{{ learning_path_section_classes }}">
 							<h2 class="np-dashboard-resources-title">
@@ -51,17 +50,18 @@
 							{% include "learning_paths_index", items: learning_paths.enrolled, card_classes: learning_path_card_classes %}
 						</div>
 					{% endif %}
-
 					{% if show_events_section %}
 						<div class="{{ event_section_classes }}">
 							<h2 class="np-dashboard-resources-title">
 								Upcoming Events
 							</h2>
-							{% include "training_events_dashboard", card_classes: event_card_classes %}
+							{% include "training_events_dashboard", card_classes: event_card_classes %}					
-						</div>					
 					{% endif %}
-
+					<div class="np-dashboard-resources-title">Recent Achievements</div>
+					{% include "widget_achievements" %}
+					</div>
 				</div>
+			</div>
 
 			{% endif %}
 			

NP_Custom_Templates/customer_templates/Stripe/_widget_achievements.html.liquid

@@ -0,0 +1,134 @@
+{% comment %} 
+  For this widget to work you must import Slick CSS and JS  
+{% endcomment %}
+
+<div class="np-card card--training-event col-x-sm-6 col-sm-6 col-md-12 col-lg-6">
+  <div class="np-card">
+    <div class="np-card-container np-dashboard-border">
+      {% if courses.enrolled.any? %}
+        <div class="np-card-content-achievements">
+          <div class="achivements-carousel">
+            {% for course in courses.enrolled %}
+              {% if course.progress == 100 %}
+                <div>
+                  <div class="np-card-content-title col-12">
+                    {{ course.name }}
+                  </div>
+                  <div class="col-12 ">
+                      <img class="np-achievement-icon" src="{{ course.properties.course_badge }}" />
+                  </div>             
+                </div>
+              {% endif %}
+            {% endfor %}
+          </div>
+          <a href="#" class="np-view-all-achievements">View All</a>
+        {% else %}
+          {% capture message %}
+            {% t shared.zero_state.courses.index,
+              key: current_school.course_vocabulary
+            %}
+          {% endcapture %}
+          {% include "courses_zero_state", message: message %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function() {
+        $('.achivements-carousel').slick({
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            dots: false,
+            infinite: true,
+            autoplay: false,
+            autoplaySpeed: 5000,
+            cssEase: 'linear',
+            prevArrow: '<i class="fal fa-chevron-left"></i>',
+            nextArrow: '<i class="fal fa-chevron-right"></i>',
+            responsive: [{
+                breakpoint: 991,
+                settings: {
+
+                    dots: false
+                }
+            }]
+        })
+    });
+</script>
+
+<style>
+  .np-card-content-achievements .np-card-content-title {
+    font-size: 0.937rem;
+    color:#fff;
+    text-align:center;
+    font-weight:500;
+  }
+
+  .np-achievement-icon {
+    color: #bec2c6;
+    margin:14px auto 26px;
+    width:130px;
+  }
+
+  .np-card-content-achievements .slick-slider {
+    width:100%;
+    max-width: 375px;
+    margin: auto;
+  }
+
+  .np-view-all-achievements {
+    color:#2BB24C;
+    font-size:0.75rem;
+    text-transform:uppercase;
+    text-align:center;
+    text-decoration:none;
+    margin-bottom:1.5rem;
+  }
+
+  .np-card-content-achievements {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 2rem .5rem;
+  }
+
+  .achievements-total-points-display {
+    color:#2BB24C;
+    font-size:0.812rem;
+    text-transform:uppercase;
+    text-align:center;
+    margin-bottom:1.5rem;
+    font-weight:bold;
+  }
+
+  .achievements-total-points {
+    font-size:10px;
+    color:#fff;
+    padding:3px 5px;
+    display:inline-block;
+    border-radius:2px;
+  }
+
+  .slick-arrow {
+    color: rgba(255, 255, 255, 0.5);
+    opacity: 0.5;
+    font-size: 1.5rem;
+    position: absolute;
+    height: 100%;
+    top: 50%;
+    cursor:pointer;
+  }
+
+  .slick-arrow.fa-chevron-left { left:0 }
+  .slick-arrow.fa-chevron-right { right:0; }
+
+  @media (min-width:1024px) {
+    .np-card-content-achievements .slick-slider {
+      max-width: none;
+      margin: 0;
+    }
+  }
+
+</style>