From 5ae9eb4257f6717bce4b7be3f861c7acf01fa2e1 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Tue, 8 Mar 2022 12:43:18 +0000
Subject: [PATCH] Implement new color picker in listings category form, cleanup
 old code (#16770)

* remove old color picker initializer

* update listing category picker

* remove old color picker styles
---
 app/assets/javascripts/initializePage.js      |  3 +--
 .../initializers/initializeColorPicker.js     | 21 ----------------
 app/assets/stylesheets/components/forms.scss  | 25 -------------------
 .../admin/listing_categories/_form.html.erb   |  3 ++-
 .../apps/editListingCategory.spec.js          | 23 +++++++++++++++++
 5 files changed, 26 insertions(+), 49 deletions(-)
 delete mode 100644 app/assets/javascripts/initializers/initializeColorPicker.js
 create mode 100644 cypress/integration/seededFlows/adminFlows/apps/editListingCategory.spec.js

diff --git a/app/assets/javascripts/initializePage.js b/app/assets/javascripts/initializePage.js
index 4dd114b6d..c8ae1b2eb 100644
--- a/app/assets/javascripts/initializePage.js
+++ b/app/assets/javascripts/initializePage.js
@@ -12,7 +12,7 @@
   initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
   nextPage:writable, fetching:writable, done:writable, adClicked:writable,
   initializePaymentPointers, initializeBroadcast, initializeDateHelpers,
-  initializeColorPicker, Runtime
+  Runtime
 */
 
 function callInitializers() {
@@ -35,7 +35,6 @@ function callInitializers() {
   initializeHeroBannerClose();
   initializeOnboardingTaskCard();
   initializeDateHelpers();
-  initializeColorPicker();
 }
 
 function initializePage() {
diff --git a/app/assets/javascripts/initializers/initializeColorPicker.js b/app/assets/javascripts/initializers/initializeColorPicker.js
deleted file mode 100644
index 7c8905835..000000000
--- a/app/assets/javascripts/initializers/initializeColorPicker.js
+++ /dev/null
@@ -1,21 +0,0 @@
-'use strict';
-
-function initializeColorPicker() {
-  var pickers = Array.from(document.getElementsByClassName('js-color-field'));
-
-  function colorValueChange(e) {
-    var field = e.target;
-    var sibling = '';
-    if (field.nextElementSibling) {
-      sibling = field.nextElementSibling;
-    } else {
-      sibling = field.previousElementSibling;
-    }
-
-    sibling.value = field.value;
-  }
-
-  pickers.forEach(function (picker) {
-    picker.addEventListener('change', colorValueChange);
-  });
-}
diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index ea977c6c5..057a4786a 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -253,31 +253,6 @@ textarea.crayons-textfield.crayons-textfield--ghost {
   white-space: pre-wrap;
 }
 
-///////////////////////////////////////////////////
-.crayons-color-selector {
-  --swatch-width: var(--su-6);
-  --swatch-height: var(--su-6);
-  @extend %form-styling;
-  padding: calc(0.5em - var(--border-width)) 0.5em;
-  height: 40px;
-
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-    width: var(--swatch-width);
-    height: var(--swatch-height);
-  }
-
-  &::-webkit-color-swatch {
-    border: 0;
-  }
-
-  &--full {
-    width: 100%;
-    --swatch-width: 100%;
-  }
-}
-
-// TODO: cleanup duplicated .crayons-color-selector styles once usages have been replaced with the new component
 .c-color-picker {
   --swatch-width: var(--su-7);
   --swatch-height: var(--su-7);
diff --git a/app/views/admin/listing_categories/_form.html.erb b/app/views/admin/listing_categories/_form.html.erb
index 92f5cf08a..cb0736642 100644
--- a/app/views/admin/listing_categories/_form.html.erb
+++ b/app/views/admin/listing_categories/_form.html.erb
@@ -20,10 +20,11 @@
 
 <div class="form-group">
   <%= label_tag :social_preview_color, "Social preview color" %>
-  <%= color_field_tag :social_preview_color, @listing_category.social_preview_color, class: "form-control" %>
+  <%= text_field_tag :social_preview_color, @listing_category.social_preview_color || "#000000", class: "crayons-textfield", placeholder: "#000000", data: { color_picker: true, label_text: "Social preview color" } %>
 </div>
 
 <div class="form-group">
   <%= label_tag :social_preview_description, "Description" %>
   <%= text_area_tag :social_preview_description, @listing_category.social_preview_description, size: "100x10", class: "form-control" %>
 </div>
+<%= javascript_packs_with_chunks_tag "enhanceColorPickers", defer: true %>
diff --git a/cypress/integration/seededFlows/adminFlows/apps/editListingCategory.spec.js b/cypress/integration/seededFlows/adminFlows/apps/editListingCategory.spec.js
new file mode 100644
index 000000000..f4d2e06d8
--- /dev/null
+++ b/cypress/integration/seededFlows/adminFlows/apps/editListingCategory.spec.js
@@ -0,0 +1,23 @@
+describe('Edit listing category', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/adminUser.json').as('user');
+
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/admin/apps/listings/categories/1/edit');
+    });
+  });
+
+  it('Changes the social preview color', () => {
+    // Both a button and an input should exist
+    cy.findByRole('button', { name: 'Social preview color' });
+    cy.findByRole('textbox', { name: 'Social preview color' })
+      .clear()
+      .type('#32a852')
+      .blur();
+    cy.findByRole('button', { name: 'Update Listing Category' }).click();
+    cy.findByText('Listing Category has been updated!').should('exist');
+    // Check the table entry reflects the new color
+    cy.findByRole('cell', { name: '#32a852' });
+  });
+});