From 9b62a712b8aac9dde21edb9c08d013695411ea73 Mon Sep 17 00:00:00 2001
From: Vincent Scavinner <vincent.scavinner@qonto.com>
Date: Wed, 21 Feb 2024 20:14:37 +0100
Subject: [PATCH] fix: hide currency element and decrease padding if currency
 argument is empty

---
 ember-amount-input/src/components/amount-input.css  |  6 +++++-
 ember-amount-input/src/components/amount-input.hbs  | 13 +++++++++----
 ember-amount-input/src/components/amount-input.ts   |  8 ++++++++
 .../components/amount-input/component-test.ts       |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ember-amount-input/src/components/amount-input.css b/ember-amount-input/src/components/amount-input.css
index e777e610..9a5ae77f 100644
--- a/ember-amount-input/src/components/amount-input.css
+++ b/ember-amount-input/src/components/amount-input.css
@@ -22,7 +22,7 @@
 .amount-input__value {
   width: 100%;
   font-size: 13px;
-  padding: 6px 12px 6px 41px;
+  padding: 6px 12px;
   border: 1px solid #e9eaf0; /* TODO: import as variable? */
   border-radius: 3px;
   transition: border-color 0.5s;
@@ -42,6 +42,10 @@
   cursor: not-allowed;
 }
 
+.amount-input__value.with-currency {
+  padding-left: 41px;
+}
+
 /* Remove spin button  */
 
 .amount-input input[type='number']::-webkit-inner-spin-button,
diff --git a/ember-amount-input/src/components/amount-input.hbs b/ember-amount-input/src/components/amount-input.hbs
index a2c43572..75caa265 100644
--- a/ember-amount-input/src/components/amount-input.hbs
+++ b/ember-amount-input/src/components/amount-input.hbs
@@ -1,10 +1,15 @@
 <div class='amount-input' ...attributes>
-  <span class='amount-input__currency {{if @value "black"}}'>
-    {{this.currency}}
-  </span>
+  {{#unless this.isCurrencyEmpty}}
+    <span class='amount-input__currency {{if @value "black"}}'>
+      {{this.currency}}
+    </span>
+  {{/unless}}
 
   <input
-    class='amount-input__value {{@inputClass}} {{if @disabled "disabled"}}'
+    class='amount-input__value
+      {{@inputClass}}
+      {{if @disabled "disabled"}}
+      {{unless this.isCurrencyEmpty "with-currency"}}'
     id={{this.inputId}}
     type='number'
     value={{@value}}
diff --git a/ember-amount-input/src/components/amount-input.ts b/ember-amount-input/src/components/amount-input.ts
index 976161ff..65ef3986 100644
--- a/ember-amount-input/src/components/amount-input.ts
+++ b/ember-amount-input/src/components/amount-input.ts
@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 import './amount-input.css';
 
 const KEY_CODE_E = 69;
@@ -94,6 +95,13 @@ export default class AmountInput extends Component<AmountInputSignature> {
     return this.argOrDefault('currency', 'EUR');
   }
 
+  /**
+   * Returns true if the currency is an empty string, null, or undefined.
+   */
+  get isCurrencyEmpty(): boolean {
+    return isEmpty(this.currency);
+  }
+
   /**
    * A custom id applied on the input.
    * Defaults to `amount-input`.
diff --git a/test-app/tests/integration/components/amount-input/component-test.ts b/test-app/tests/integration/components/amount-input/component-test.ts
index 878c69e9..515842a3 100644
--- a/test-app/tests/integration/components/amount-input/component-test.ts
+++ b/test-app/tests/integration/components/amount-input/component-test.ts
@@ -73,7 +73,7 @@ module('Integration | Component | amount-input', function (hooks) {
       />
     `);
 
-    assert.dom('.amount-input__currency').hasText('');
+    assert.dom('.amount-input__currency').doesNotExist();
     assert.dom('input').hasNoAttribute('placeholder');
     assert.dom('input').hasNoAttribute('id');