From fa90e507c7075fa4ffa634f6e9b2914fa2ad65f0 Mon Sep 17 00:00:00 2001
From: OlexanderVanzuriak <sashavanzuriak@gmail.com>
Date: Wed, 27 Nov 2024 14:22:57 +0200
Subject: [PATCH] Added change color logic

---
 app/assets/stylesheets/pages/calculator.scss  | 14 ++++
 .../stylesheets/pages/feature_flags.scss      |  6 --
 .../partials/_calculation_results.html.erb    | 14 ++--
 .../_constructor_calculator_description.erb   | 21 ++++++
 app/views/calculators/show.html.erb           | 16 +++--
 config/tailwind.config.js                     |  8 +++
 .../calculation_service_helper_spec.rb        | 71 +++++++++----------
 7 files changed, 99 insertions(+), 51 deletions(-)
 create mode 100644 app/views/calculators/partials/show/_constructor_calculator_description.erb

diff --git a/app/assets/stylesheets/pages/calculator.scss b/app/assets/stylesheets/pages/calculator.scss
index 2c425ccab..960acabe5 100644
--- a/app/assets/stylesheets/pages/calculator.scss
+++ b/app/assets/stylesheets/pages/calculator.scss
@@ -16,6 +16,20 @@
   font-style: normal;
   transition: transform 0.5s ease-in-out;
   max-width: 300px;
+  @include transition(all 0.5s ease-in-out);
+
+  &:hover {
+    background-color: $matte_lime_green;
+  }
+}
+
+.btn-nonito {
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-family: "Nunito", sans-serif;
+  font-style: normal;
 }
 
 #calc {
diff --git a/app/assets/stylesheets/pages/feature_flags.scss b/app/assets/stylesheets/pages/feature_flags.scss
index a68714537..53a8ce168 100644
--- a/app/assets/stylesheets/pages/feature_flags.scss
+++ b/app/assets/stylesheets/pages/feature_flags.scss
@@ -41,7 +41,6 @@
 }
 
 input[type="submit"] {
-  background-color: $success;
   border: none;
   border-radius: 4px;
   color: #fff;
@@ -49,11 +48,6 @@ input[type="submit"] {
   font-size: 16px;
   padding: 10px;
   min-width: 110px;
-  @include transition(all 0.5s ease-in-out);
-
-  &:hover {
-    background-color: $matte_lime_green;
-  }
 }
 
 .btn-grey {
diff --git a/app/views/calculators/partials/_calculation_results.html.erb b/app/views/calculators/partials/_calculation_results.html.erb
index f436abc40..ea52d5516 100644
--- a/app/views/calculators/partials/_calculation_results.html.erb
+++ b/app/views/calculators/partials/_calculation_results.html.erb
@@ -1,11 +1,17 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
 <div class="calculation-results rounded jumbotron jumbotron-fluid position-relative">
-  <h2 class="pt-6 text-2xl font-semibold text-center text-success">Calculation Results</h2>
+  <h2 class="pt-6 text-2xl font-semibold text-center text-<%= color %>">Calculation Results</h2>
   <div class="jumbotron calculation-results result main-result-container result-container">
     <% results.each do |result| %>
       <div>
-          <%= image_tag "money_to_spent_2.png", class: "img-margin", alt: "icon" %>
-          <p><%= result[:result] %></p>
-          <p class="text-2xl"><%= result[:en_unit] %></p>
+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="text-<%= color %>"><%= result[:result] %></p>
+          <p class="text-2xl text-<%= color %>"><%= result[:en_unit] %></p>
           <p class="diapers-font-text"><%= result[:label] %></p>
       </div>
     <% end %>
diff --git a/app/views/calculators/partials/show/_constructor_calculator_description.erb b/app/views/calculators/partials/show/_constructor_calculator_description.erb
new file mode 100644
index 000000000..46d09286b
--- /dev/null
+++ b/app/views/calculators/partials/show/_constructor_calculator_description.erb
@@ -0,0 +1,21 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<section class="description-section">
+  <div class="description-block">
+    <div class="description-content-box">
+      <p data-type="description_block_html" class="description-text">
+        <%# TODO: Change description text and links %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu iaculis placerat euismod. Pellentesque nibh arcu, varius ac arcu a, eleifend semper leo. Aliquam ultricies lacus at mi ornare, sit amet vestibulum est fermentum. Praesent sed dapibus elit. Curabitur congue ante non metus posuere porttitor. Etiam non lacus imperdiet turpis pellentesque viverra. Nulla in velit mi. Suspendisse molestie tempor ornare. 
+        <%= link_to_external(text: "Calculate Method", url: t("layouts.description_block.method_link"), class: "text-#{color}") %> or 
+        <%= link_to_external(text: "Contact Us", url: t("layouts.description_block.contact_link"), class: "text-#{color}") %>
+      </p>
+    </div>
+    <div class="description-btn-box">
+      <%# TODO: Change link here %>
+      <%= link_to_external(text: t('layouts.description_block.use_less'), 
+                           url: t("layouts.description_block.use_less_link"), 
+                           class: "action-button rounded bg-#{color} text-white") %>
+    </div> 
+  </div>
+</section>
diff --git a/app/views/calculators/show.html.erb b/app/views/calculators/show.html.erb
index 9a92be166..c29a6c530 100644
--- a/app/views/calculators/show.html.erb
+++ b/app/views/calculators/show.html.erb
@@ -1,5 +1,11 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>
+
+<%# TODO: Delete this and use user provided value %>
+<% calculator_image = "scales.png" %>
+
 <div class="rounded jumbotron jumbotron-fluid position-relative">
-  <h1 class="pt-6 text-2xl font-semibold text-center text-success">Calculator <%= @calculator.name %> <%= @text %></h1>
+  <h1 class="pt-6 text-2xl font-semibold text-center font-sans text-<%= color %>">Calculator <%= @calculator.name %> <%= @text %></h1>
   <div class="flex-wrap d-flex justify-content-around calculator_wrap ms-5">
 
   <%= form_with html: { class: "simple_form_calculator"}, url: calculate_calculator_path(@calculator) do |form| %>
@@ -15,19 +21,19 @@
           </div>
         <% else %>
           <%= form.select "inputs[#{field.var_name}]", 
-                           options_from_collection_for_select(field.categories, :price, :name),
+                          options_from_collection_for_select(field.categories, :price, :name),
                           {},
                           class: "flex-row rounded flex-item w-100 form_fild calculator-field" %>
         <% end %>
     <% end %>
-    <%= form.submit "Calculate", class: "calculate-btn result-btn" %>
+    <%= form.submit "Calculate", class: "btn-nonito result-btn bg-#{color}" %>
     </div>
   <% end %>
-  <%= image_tag "scales.png", class: "scales_img", alt: "Scales" %>
+  <%= image_tag "#{calculator_image}", class: "scales_img", alt: "Scales" %>
 
   </div>
 </div>
 
 <%= turbo_frame_tag "calc-results" %>
 
-<%= render "layouts/description_block" %>
+<%= render "calculators/partials/show/constructor_calculator_description" %>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 1f926b862..8e7fa7416 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -7,6 +7,14 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.erb'
   ],
+  safelist: [
+    {
+      pattern: /bg-.*/,
+    },
+    {
+      pattern: /text-.*/,
+    },
+  ],
   theme: {
     extend: {
       fontFamily: {
diff --git a/spec/helpers/calculators/calculation_service_helper_spec.rb b/spec/helpers/calculators/calculation_service_helper_spec.rb
index d095e2bb3..a5be8a8d0 100644
--- a/spec/helpers/calculators/calculation_service_helper_spec.rb
+++ b/spec/helpers/calculators/calculation_service_helper_spec.rb
@@ -3,43 +3,42 @@
 require "rails_helper"
 
 RSpec.describe Calculators::CalculationService, type: :helper do
-    let(:calculator) { instance_double("Calculator", formulas: formulas) }
-    let(:formulas) do
-      [
-        instance_double("Formula", expression: "x + y", en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці"),
-        instance_double("Formula", expression: "x * y", en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці")
-      ]
-    end
-    let(:inputs) { ActionController::Parameters.new({ x: 5, y: 3 }) }
-    
-    before do
-      allow_any_instance_of(ApplicationHelper).to receive(:current_locale?).with(:en).and_return(locale_en)
-    end
-  
-    describe "#perform" do
-      subject { described_class.new(calculator, inputs).perform }
-  
-      context "when locale is English" do
-        let(:locale_en) { true }
-  
-        it "returns results with English labels and units" do
-          expect(subject).to eq([
-            { label: "Addition", result: 8, en_unit: "units" },
-            { label: "Multiplication", result: 15, en_unit: "units" }
-          ])
-        end
+  let(:calculator) { instance_double("Calculator", formulas: formulas) }
+  let(:formulas) do
+    [
+      instance_double("Formula", expression: "x + y", en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці"),
+      instance_double("Formula", expression: "x * y", en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці")
+    ]
+  end
+  let(:inputs) { ActionController::Parameters.new({ x: 5, y: 3 }) }
+
+  before do
+    allow_any_instance_of(ApplicationHelper).to receive(:current_locale?).with(:en).and_return(locale_en)
+  end
+
+  describe "#perform" do
+    subject { described_class.new(calculator, inputs).perform }
+
+    context "when locale is English" do
+      let(:locale_en) { true }
+
+      it "returns results with English labels and units" do
+        expect(subject).to eq([
+          { label: "Addition", result: 8, en_unit: "units" },
+          { label: "Multiplication", result: 15, en_unit: "units" }
+        ])
       end
-  
-      context "when locale is Ukrainian" do
-        let(:locale_en) { false }
-  
-        it "returns results with Ukrainian labels and units" do
-          expect(subject).to eq([
-            { label: "Додавання", result: 8, en_unit: "одиниці" },
-            { label: "Множення", result: 15, en_unit: "одиниці" }
-          ])
-        end
+    end
+
+    context "when locale is Ukrainian" do
+      let(:locale_en) { false }
+
+      it "returns results with Ukrainian labels and units" do
+        expect(subject).to eq([
+          { label: "Додавання", result: 8, en_unit: "одиниці" },
+          { label: "Множення", result: 15, en_unit: "одиниці" }
+        ])
       end
     end
   end
-  
\ No newline at end of file
+end