stripe

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,24 @@
 							{% 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 %}
-						</div>					
+						</div>
+					</div>					
 					{% endif %}
-
+					{% comment %}
-				</div>
+					<div class="col-md-4 col-lg-6">
+						<div class="np-dashboard-resources-title">Recent Achievements</div>
+							<div class="blocks-layout">
+								{% include "widget_achievements" %}
+							</div>
+					</div> 
+					{% endcomment %}
+			</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>

NP_Custom_Templates/customer_templates/Stripe/homepage.html.liquid

@@ -5,10 +5,27 @@
 			<div class="np-homepage-headline np-header-font-color" style="color: #fff">
 				{{ homepage.headline }}
 			</div>
+			{% assign role = current_person.properties.role %}
+			{% case role %}	
+			{% when 'developer', 'architect' %}
 			<div class="np-homepage-subheadline np-header-font-color">
 				Hi {{ current_person.display_name }}, how is the weather in {{ current_person.properties.location }}?
 				Here is the training you are eligible for in your role as {{ current_person.properties.role }}.
 			</div>
+			{% else %}
+			<div class="np-homepage-subheadline np-header-font-color">
+				Hi {{ current_person.display_name }}, how is the weather in {{ current_person.properties.location }}?
+				Here is the training you are eligible for in your role as 
+					<div class="dropdown">
+					<button class="dropbtn">Select Role ▼ </button>
+					<div class="dropdown-content">
+						<a href="#">Developer</a>
+						<a href="#">Architect</a>
+						<a href="#">Partner</a>
+					</div>
+				</div>
+			</div>
+			{% endcase %}
 		</div>
 	</div>
 	{% comment %} <svg class="homepage-waves__wave-1-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
@@ -120,4 +137,43 @@ main {
 		background-position: 0% 79%;
 	}
 }
+
+.dropbtn {
+	background-color: transparent;
+	color: #1B2759;
+	border: black;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+	position: relative;
+	display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background-color: #635bff60;
+	min-width: 100%;
+	box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
+	z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+	color: black;
+	padding: 12px 16px;
+	text-decoration: none;
+	display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #635bffc6;}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {background-color: #635bff;}
 </style>