From a04fd783d05cadeab904c452520d52609057a666 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tomrndom@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:22:50 -0300
Subject: [PATCH] remove text fit mode fields, add shrink at line fields (#538)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/components/forms/badge-settings-form.js   | 83 +++++++++++--------
 src/i18n/en.json                              |  9 +-
 src/reducers/badges/badge-settings-reducer.js |  8 +-
 3 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/components/forms/badge-settings-form.js b/src/components/forms/badge-settings-form.js
index 94ff13e08..a64d37435 100644
--- a/src/components/forms/badge-settings-form.js
+++ b/src/components/forms/badge-settings-form.js
@@ -195,11 +195,6 @@ class BadgeSettingsForm extends React.Component {
       { label: "Uppercase", value: "UPPERCASE" }
     ];
 
-    const ddlTextFitMode = [
-      { label: "Single", value: "SINGLE" },
-      { label: "Multi", value: "MULTI" }
-    ];
-
     const ddlNameDisplayMode = [
       { label: "Full Name", value: "FULL_NAME" },
       { label: "Stacked", value: "STACKED" },
@@ -543,16 +538,23 @@ class BadgeSettingsForm extends React.Component {
               <div className="col-md-6">
                 <label>
                   {T.translate(
-                    "badge_settings.badge_template_first_name_text_fit_mode"
-                  )}
+                    "badge_settings.badge_template_first_name_shrink_at_line"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.shrink_info")}
+                  />
                 </label>
                 <br />
-                <Dropdown
-                  id="BADGE_TEMPLATE_FIRST_NAME_TEXT_FIT_MODE"
-                  value={entity?.BADGE_TEMPLATE_FIRST_NAME_TEXT_FIT_MODE?.value}
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE"
+                  value={
+                    entity?.BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE?.value
+                  }
                   onChange={this.handleChange}
-                  options={ddlTextFitMode}
-                  isClearable
                 />
               </div>
             </div>
@@ -695,16 +697,21 @@ class BadgeSettingsForm extends React.Component {
               <div className="col-md-6">
                 <label>
                   {T.translate(
-                    "badge_settings.badge_template_last_name_text_fit_mode"
-                  )}
+                    "badge_settings.badge_template_last_name_shrink_at_line"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.shrink_info")}
+                  />
                 </label>
                 <br />
-                <Dropdown
-                  id="BADGE_TEMPLATE_LAST_NAME_TEXT_FIT_MODE"
-                  value={entity?.BADGE_TEMPLATE_LAST_NAME_TEXT_FIT_MODE?.value}
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE"
+                  value={entity?.BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE?.value}
                   onChange={this.handleChange}
-                  options={ddlTextFitMode}
-                  isClearable
                 />
               </div>
             </div>
@@ -843,16 +850,21 @@ class BadgeSettingsForm extends React.Component {
               <div className="col-md-6">
                 <label>
                   {T.translate(
-                    "badge_settings.badge_template_company_text_fit_mode"
-                  )}
+                    "badge_settings.badge_template_company_shrink_at_line"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.shrink_info")}
+                  />
                 </label>
                 <br />
-                <Dropdown
-                  id="BADGE_TEMPLATE_COMPANY_TEXT_FIT_MODE"
-                  value={entity?.BADGE_TEMPLATE_COMPANY_TEXT_FIT_MODE?.value}
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE"
+                  value={entity?.BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE?.value}
                   onChange={this.handleChange}
-                  options={ddlTextFitMode}
-                  isClearable
                 />
               </div>
             </div>
@@ -1008,16 +1020,21 @@ class BadgeSettingsForm extends React.Component {
               <div className="col-md-6">
                 <label>
                   {T.translate(
-                    "badge_settings.badge_template_title_text_fit_mode"
-                  )}
+                    "badge_settings.badge_template_title_shrink_at_line"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.shrink_info")}
+                  />
                 </label>
                 <br />
-                <Dropdown
-                  id="BADGE_TEMPLATE_TITLE_TEXT_FIT_MODE"
-                  value={entity?.BADGE_TEMPLATE_TITLE_TEXT_FIT_MODE?.value}
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE"
+                  value={entity?.BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE?.value}
                   onChange={this.handleChange}
-                  options={ddlTextFitMode}
-                  isClearable
                 />
               </div>
             </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 486ea0ba6..4c4f5f04f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2366,28 +2366,28 @@
     "badge_template_title_font_casing": "BADGE_TEMPLATE_TITLE_FONT_CASING",
     "badge_template_title_font_size_min": "BADGE_TEMPLATE_TITLE_FONT_SIZE_MIN",
     "badge_template_title_font_size_max": "BADGE_TEMPLATE_TITLE_FONT_SIZE_MAX",
-    "badge_template_title_text_fit_mode": "BADGE_TEMPLATE_TITLE_TEXT_FIT_MODE",
+    "badge_template_title_text_fit_mode": "BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE",
     "badge_template_title_font_family": "BADGE_TEMPLATE_TITLE_FONT_FAMILY",
     "badge_template_first_name_padding": "BADGE_TEMPLATE_FIRST_NAME_PADDING",
     "badge_template_first_name_text_align": "BADGE_TEMPLATE_FIRST_NAME_TEXT_ALIGN",
     "badge_template_first_name_font_casing": "BADGE_TEMPLATE_FIRST_NAME_FONT_CASING",
     "badge_template_first_name_font_size_min": "BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MIN",
     "badge_template_first_name_font_size_max": "BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MAX",
-    "badge_template_first_name_text_fit_mode": "BADGE_TEMPLATE_FIRST_NAME_TEXT_FIT_MODE",
+    "badge_template_first_name_shrink_at_line": "BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE",
     "badge_template_first_name_font_family": "BADGE_TEMPLATE_FIRST_NAME_FONT_FAMILY",
     "badge_template_last_name_padding": "BADGE_TEMPLATE_LAST_NAME_PADDING",
     "badge_template_last_name_text_align": "BADGE_TEMPLATE_LAST_NAME_TEXT_ALIGN",
     "badge_template_last_name_font_casing": "BADGE_TEMPLATE_LAST_NAME_FONT_CASING",
     "badge_template_last_name_font_size_min": "BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MIN",
     "badge_template_last_name_font_size_max": "BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MAX",
-    "badge_template_last_name_text_fit_mode": "BADGE_TEMPLATE_LAST_NAME_TEXT_FIT_MODE",
+    "badge_template_last_name_shrink_at_line": "BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE",
     "badge_template_last_name_font_family": "BADGE_TEMPLATE_LAST_NAME_FONT_FAMILY",
     "badge_template_company_padding": "BADGE_TEMPLATE_COMPANY_PADDING",
     "badge_template_company_text_align": "BADGE_TEMPLATE_COMPANY_TEXT_ALIGN",
     "badge_template_company_font_casing": "BADGE_TEMPLATE_COMPANY_FONT_CASING",
     "badge_template_company_font_size_min": "BADGE_TEMPLATE_COMPANY_FONT_SIZE_MIN",
     "badge_template_company_font_size_max": "BADGE_TEMPLATE_COMPANY_FONT_SIZE_MAX",
-    "badge_template_company_text_fit_mode": "BADGE_TEMPLATE_COMPANY_TEXT_FIT_MODE",
+    "badge_template_company_text_fit_mode": "BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE",
     "badge_template_company_font_family": "BADGE_TEMPLATE_COMPANY_FONT_FAMILY",
     "badge_template_font_family": "BADGE_TEMPLATE_FONT_FAMILY",
     "badge_template_qr_display": "BADGE_TEMPLATE_QR_DISPLAY",
@@ -2414,6 +2414,7 @@
     "css_length_info": "a CSS length (e.g., px, %, mm)",
     "margin_padding_info": "Enter 1 to 4 CSS lengths (e.g., 8mm for all sides, 5mm 2mm for top/bottom and left/right, 86mm 5mm 0px for top, left/right, bottom, or 10mm 5mm 8mm 5mm for top, right, bottom, left). Use units like mm, px, or %.",
     "integer_value_info": "Integer value only (represents pixels, e.g., 20 for 20px)",
+    "shrink_info": "Sets the maximum number of lines allowed before text size starts to shrink.",
     "url_info": "URL to file image at a CDN",
     "badge_template_settings_updated": "Badge settings updated."
   },
diff --git a/src/reducers/badges/badge-settings-reducer.js b/src/reducers/badges/badge-settings-reducer.js
index 0645e348f..49562d928 100644
--- a/src/reducers/badges/badge-settings-reducer.js
+++ b/src/reducers/badges/badge-settings-reducer.js
@@ -45,28 +45,28 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_TITLE_FONT_CASING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_TITLE_FONT_SIZE_MIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_TITLE_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
-  BADGE_TEMPLATE_TITLE_TEXT_FIT_MODE: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_TITLE_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_CASING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
-  BADGE_TEMPLATE_FIRST_NAME_TEXT_FIT_MODE: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_CASING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
-  BADGE_TEMPLATE_LAST_NAME_TEXT_FIT_MODE: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_CASING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_SIZE_MIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
-  BADGE_TEMPLATE_COMPANY_TEXT_FIT_MODE: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_QR_DISPLAY: { id: 0, value: "", type: "TEXT" },