Style calculators constructor show page

app/assets/stylesheets/pages/calculator.scss

@@ -16,6 +16,28 @@
   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;
+}
+
+.dynamic-text-color {
+  color: var(--calculator-color);
+}
+
+.dynamic-background-color {
+  background-color: var(--calculator-color);
 }
 
 #calc {
@@ -61,6 +83,11 @@
   margin-right: 0px;
 }
 
+.calculator-field {
+  background-color: $light_gray !important;
+  border: 0;
+}
+
 .flex-item {
   display: flex;
   flex-wrap: wrap;

app/assets/stylesheets/pages/feature_flags.scss

@@ -41,19 +41,13 @@
 }
 
 input[type="submit"] {
-  background-color: $success;
   border: none;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   padding: 10px;
   min-width: 110px;
-  @include transition(all 0.5s ease-in-out);
-
-  &:hover {
-    background-color: $matte_lime_green;
-  }
 }
 
 .btn-grey {

app/controllers/calculators_controller.rb

@@ -14,6 +14,8 @@ def index
 
   def show
     @calculator = resource
+    add_breadcrumb t("breadcrumbs.home"), root_path
+    add_breadcrumb @calculator.name
   end
 
   def calculate

app/models/formula.rb

@@ -22,11 +22,15 @@
 #  fk_rails_...  (calculator_id => calculators.id)
 #
 class Formula < ApplicationRecord
+  include Translatable
+
   belongs_to :calculator
 
   validates_with FormulaValidator
 
   validates :uk_label, :en_label, :uk_unit, :en_unit, :expression, presence: true
   validates :uk_label, :en_label, length: { minimum: 3, maximum: 50 }
   validates :en_unit, :uk_unit, length: { minimum: 1, maximum: 30 }
+
+  translates :label, :unit
 end

app/services/calculators/calculation_service.rb

@@ -10,7 +10,7 @@ def perform
     @calculator.formulas.map do |formula|
       result = @dentaku.evaluate(formula.expression, @inputs)
 
-      { label: formula.en_label, result: result }
+      { label: formula.label, result: result, unit: formula.unit }
     end
   end
 end

app/views/calculators/partials/_calculation_results.html.erb

@@ -1,14 +1,19 @@
-<h2 class="mt-4 text-2xl font-bold text-white underline">Calculation Results</h2>
-<div class="mt-2 space-y-2 text-white">
-  <% results.each do |result| %>
-    <div class="flex gap-2 text-lg font-medium">
-      <h3>
-        <%= result[:label] %>
-      </h3>
-      =
-      <p>
-        <%= result[:result] %>
-      </p>
-    </div>
-  <% end %>
+<%# TODO: Delete this and use user provided value %>
+<% color = "#088F8F" %>
+
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
+<div style="--calculator-color: <%= color %>" class="calculation-results rounded jumbotron jumbotron-fluid position-relative">
+  <h2 class="pt-6 text-2xl font-semibold text-center dynamic-text-color">Calculation Results</h2>
+  <div class="jumbotron calculation-results result main-result-container result-container">
+    <% results.each do |result| %>
+      <div>
+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="dynamic-text-color"><%= result[:result] %></p>
+          <p class="text-2xl dynamic-text-color"><%= result[:unit] %></p>
+          <p class="diapers-font-text"><%= result[:label] %></p>
+      </div>
+    <% end %>
+  </div>
 </div>

app/views/calculators/partials/show/_constructor_calculator_description.erb

@@ -0,0 +1,21 @@
+<%# TODO: Delete this and use user provided value %>
+<% color = "#088F8F" %>
+
+<section style="--calculator-color: <%= color %>" 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: "dynamic-text-color") %> or 
+        <%= link_to_external(text: "Contact Us", url: t("layouts.description_block.contact_link"), class: "dynamic-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 dynamic-background-color text-white") %>
+    </div> 
+  </div>
+</section>

app/views/calculators/show.html.erb

@@ -1,21 +1,39 @@
-<div class="container place-items-center">
-  <h1 class="text-4xl font-bold">Calculator <%= @calculator.name %></h1><br>
+<%# TODO: Delete this and use user provided value %>
+<% color = "#088F8F" %>
 
-  <%= form_with url: calculate_calculator_path(@calculator) do |form| %>
+<%# TODO: Delete this and use user provided value %>
+<% calculator_image = "scales.png" %>
+
+<div style="--calculator-color: <%= color %>" class="rounded jumbotron jumbotron-fluid position-relative">
+  <h1 class="pt-6 text-2xl font-semibold text-center font-sans dynamic-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| %>
+    <div class="flex-item flex-column">
     <% @calculator.fields.each do |field| %>
-      <div class="space-y-4 form-inputs">
-        <h1><%= form.label field.var_name, field.label %></h1>
+        <div class="pb-2 input_lable"><%= form.label field.var_name, field.label %></div>
         <% if field.kind == 'number' %>
-          <%= form.number_field "inputs[#{field.var_name}]", placeholder: field.label %>
+          <div class="flex-row rounded flex-item w-100 age_wrapper form_fild">
+            <%= form.number_field "inputs[#{field.var_name}]", 
+                                placeholder: field.label,
+                                class: "required rounded w-100 calculator-field"
+                                %>
+          </div>
         <% else %>
-          <%= form.select "inputs[#{field.var_name}]", options_from_collection_for_select(field.categories, :price, :name) %>
+          <%= form.select "inputs[#{field.var_name}]", 
+                          options_from_collection_for_select(field.categories, :price, :name),
+                          {},
+                          class: "flex-row rounded flex-item w-100 form_fild calculator-field" %>
         <% end %>
-      </div><br>
     <% end %>
-    <div class="mt-6 form-actions">
-      <%= form.submit "Calculate", class: "bg-blue-500 text-white font-semibold px-4 py-2 rounded hover:bg-blue-700" %>
+    <%= form.submit "Calculate", class: "btn-nonito result-btn dynamic-background-color" %>
     </div>
   <% end %>
+  <%= image_tag "#{calculator_image}", class: "scales_img", alt: "Scales" %>
 
-  <%= turbo_frame_tag "calc-results" %>
+  </div>
 </div>
+
+<%= turbo_frame_tag "calc-results" %>
+
+<%= render "calculators/partials/show/constructor_calculator_description" %>

spec/helpers/calculators/calculation_service_helper_spec.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Calculators::CalculationService, type: :helper do
+  let(:calculator) { instance_double("Calculator", formulas: formulas) }
+  let(:formulas) do
+    [
+      Formula.new(en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці", expression: "x + y"),
+      Formula.new(en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці", expression: "x * y")
+    ]
+  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 do
+      I18n.with_locale(locale_en ? :en : :uk) do
+        described_class.new(calculator, inputs).perform
+      end
+    end
+
+    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, unit: "units" },
+          { label: "Multiplication", result: 15, unit: "units" }
+        ])
+      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, unit: "одиниці" },
+          { label: "Множення", result: 15, unit: "одиниці" }
+        ])
+      end
+    end
+  end
+end