From bea522f5c0cef6ae46897aeb6312dbe2c1be20f7 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Mon, 19 Nov 2018 11:42:38 -0800
Subject: [PATCH] Moved customer support to its own accordion (#2214)

* Related to #2137 - moved customer support to its own accordion
---
 .../templates/fragments/product-contact.html  | 66 +++++++++++++++++++
 .../buyersguide/templates/product_page.html   | 57 +---------------
 2 files changed, 67 insertions(+), 56 deletions(-)
 create mode 100644 network-api/networkapi/buyersguide/templates/fragments/product-contact.html

diff --git a/network-api/networkapi/buyersguide/templates/fragments/product-contact.html b/network-api/networkapi/buyersguide/templates/fragments/product-contact.html
new file mode 100644
index 00000000000..305ae176356
--- /dev/null
+++ b/network-api/networkapi/buyersguide/templates/fragments/product-contact.html
@@ -0,0 +1,66 @@
+<div class="criterion criterion-contact">
+  <div class="primary-info">
+    <div class="d-flex align-items-center">
+      <span>Company makes it easy to contact customer support</span>
+    </div>
+    <div class="rating">
+      <button class="toggle mr-0"></button>
+    </div>
+  </div>
+  <div class="helptext mt-2">
+    <div class="row mt-4 mb-3">
+        <div class="col-12 col-md-3">
+          <div class="spy">
+            <img src="/_images/buyers-guide/icon-phone.svg" width="28" height="28" />
+            <div>
+              <strong class="d-block">Phone Number</strong>
+              {% if product.phone_number %}
+              {{ product.phone_number }}
+              {% else %}
+              No
+              {% endif %}
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-3">
+          <div class="spy">
+            <img src="/_images/buyers-guide/icon-chat.svg" width="31" height="26" />
+            <div>
+              <strong class="d-block">Live Chat</strong>
+              {% if product.live_chat %}
+              <a id="product-live-chat" target="_blank" href={{ product.live_chat }}>Yes</a>
+              {% else %}
+              No
+              {% endif %}
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-3">
+          <div class="spy">
+            <img src="/_images/buyers-guide/icon-mail.svg" width="31" height="23" />
+            <div>
+              <strong class="d-block">Email</strong>
+              {% if product.email %}
+              <a href="{{ product.email }}">Yes</a>
+              {% else %}
+              No
+              {% endif %}
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-3">
+          <div class="spy">
+            <img src="/_images/buyers-guide/icon-twitter.svg" width="31" height="23" />
+            <div>
+              <strong class="d-block">Twitter</strong>
+              {% if product.twitter %}
+              <a href="https://twitter.com/{{product.twitter}}">Yes</a>
+              {% else %}
+              No
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</div>
diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
index e7ec2d5f99a..e6db5fe5ffd 100644
--- a/network-api/networkapi/buyersguide/templates/product_page.html
+++ b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -112,62 +112,7 @@ <h3 class="h3-heading h3-heading-small">Company shows it cares about its custome
 
       <div class="mb-5">
           {% include "fragments/product-criterion.html"  with  value=product.manage_security  bad=False  help=product.manage_security_helptext label="Company manages security vulnerabilities"%}
-      </div>
-
-      <h4 class="normal">Company makes it easy to contact customer support</h4>
-      <div class="row mb-5">
-        <div class="col-12 col-md-3">
-          <div class="spy">
-            <img src="/_images/buyers-guide/icon-phone.svg" width="28" height="28" />
-            <div>
-              <strong class="d-block">Phone Number</strong>
-              {% if product.phone_number %}
-              {{ product.phone_number }}
-              {% else %}
-              No
-              {% endif %}
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-md-3">
-          <div class="spy">
-            <img src="/_images/buyers-guide/icon-chat.svg" width="31" height="26" />
-            <div>
-              <strong class="d-block">Live Chat</strong>
-              {% if product.live_chat %}
-              <a id="product-live-chat" target="_blank" href={{ product.live_chat }}>Yes</a>
-              {% else %}
-              No
-              {% endif %}
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-md-3">
-          <div class="spy">
-            <img src="/_images/buyers-guide/icon-mail.svg" width="31" height="23" />
-            <div>
-              <strong class="d-block">Email</strong>
-              {% if product.email %}
-              <a href="{{ product.email }}">Yes</a>
-              {% else %}
-              No
-              {% endif %}
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-md-3">
-          <div class="spy">
-            <img src="/_images/buyers-guide/icon-twitter.svg" width="31" height="23" />
-            <div>
-              <strong class="d-block">Twitter</strong>
-              {% if product.twitter %}
-              <a href="https://twitter.com/{{product.twitter}}">Yes</a>
-              {% else %}
-              No
-              {% endif %}
-            </div>
-          </div>
-        </div>
+          {% include "fragments/product-contact.html" with product=product %}
       </div>
 
       <h3 class="h3-heading h3-heading-small">What could happen if something went wrong</h3>