Updated some Williams-Sonoma templates.

Custom_Templates/customer_templates/WSGC - Post-New Hire/_widget_badges.html.liquid

@@ -0,0 +1,92 @@
+{% assign customer_care_badges = "https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-customer-service.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-furniture.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-registry-management.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-sales.png" %}
+
+
+<div class="badges-cont" style="max-width: 80%; align-content: space-evenly;">
+    <div class="np-dashboard-resources-title">
+      My Badges
+    </div>
+    <div class="badges">
+      <div class="badges-controls default-carousel-controls">
+        <i class="fa fa-chevron-left prev"></i>
+        <i class="fa fa-chevron-right next"></i>
+      </div>
+
+      <div class="badges-wrapper">
+        {% comment %} If user is in CCC group  {% endcomment %}
+        {% assign customer_care_badges_array = customer_care_badges | split: "," %}
+        {% for customer_care_badge in customer_care_badges_array %}
+          <div class="badge-img">
+            <div class="badge-image-container">
+              <img src="{{ customer_care_badge }}" />
+            </div>
+          </div>
+        {% endfor %}
+
+
+        {% for course in enrolled_courses %}
+          {% if course.properties.course_badge contains "http" %}
+            <div class="badge-img">
+              <div class="badge-image-container">
+                <img src="{{ course.properties.course_badge }}" />
+              </div>
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+</div>
+
+<style>
+  .badges-wrapper {
+    margin-bottom: 32px;
+  }
+
+  .badge-image-container {
+    height: 100px;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .badge-img img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .badges-wrapper {
+    width: 100% !important;
+  }
+</style>
+
+<script>
+      window.addEventListener("DOMContentLoaded", function() {
+    const badgesCarouselOptions = {
+      container: '.badges-wrapper',
+      nav: true,
+      navPosition:'bottom',
+      arrowKeys: false,
+      controls: false,
+      mouseDrag: true,
+      controlsContainer: ".badges-controls",
+      gutter: 16,
+      items: 3,
+      loop: false,
+       responsive: {
+          768: {
+            arrowKeys: true,
+            controls: true,
+            nav: false,
+            items: 6
+          },
+          1200: {
+            arrowKeys: true,
+            controls: true,
+            nav: false,
+            items: 10
+          }
+        }
+    }
+
+    createCarousel(badgesCarouselOptions)
+      });
+</script>