From fd683294686e2f3b9512bb3c4164c905adc8503d Mon Sep 17 00:00:00 2001
From: Beth Qiang <beth.qiang@lob.com>
Date: Thu, 18 Jan 2024 08:56:08 -0700
Subject: [PATCH] GC-2176/Add ability to remove dollar sign from CurrencyInput
 component (#433)

* Add prop and test to remove dollar sign from CurrencyInput

* Update version and changelog

* Oooops left on one too many zeros in versions
---
 CHANGELOG.md                                    |  4 ++++
 package-lock.json                               |  4 ++--
 package.json                                    |  2 +-
 src/components/CurrencyInput/CurrencyInput.vue  | 17 ++++++++++++++---
 .../__tests__/CurrencyInput.spec.js             | 15 +++++++++++++++
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d70e18ad..5090816a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.0
+- Removing beta tag since this is no longer in beta
+- Adds a `showDollarSign` prop to the `CurrencyInput` component so we can hide it at will
+
 ## v2.0.0-beta.64
 - Fixes import of `UserCircle` icon
 
diff --git a/package-lock.json b/package-lock.json
index e971be9ee..ede6bee75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.64",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.0-beta.64",
+      "version": "2.0.0",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index de108bb2d..8b2a66424 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.64",
+  "version": "2.0.0",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"
diff --git a/src/components/CurrencyInput/CurrencyInput.vue b/src/components/CurrencyInput/CurrencyInput.vue
index 950a50c17..78ee47810 100644
--- a/src/components/CurrencyInput/CurrencyInput.vue
+++ b/src/components/CurrencyInput/CurrencyInput.vue
@@ -56,6 +56,10 @@ export default {
     selectOnFocus: {
       type: Boolean,
       default: true
+    },
+    showDollarSign: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue', 'input', 'change', 'focus', 'blur'],
@@ -132,7 +136,7 @@ export default {
         return;
       }
 
-      const formattedValue = this.formatter.format(value);
+      let formattedValue = this.formatter.format(value);
 
       const { type, prevValue, editIndex }  = stringDiff(this.formattedValue, formattedValue);
 
@@ -148,9 +152,11 @@ export default {
       const separatorOffset = countOccurrences(formattedValue, ',') - countOccurrences(this.formattedValue, ',');
       let newCaretPosition = inputEl.selectionStart + separatorOffset;
 
-      // If the user is inputting or deleting at the 0th index (the `$` sign), increment the caret position by an additional 1
-      if (newCaretPosition === 0 || newCaretPosition === 1) {
+      // If the user is inputting or deleting at the 0th index (the `$` sign), increment the caret position by an additional 1 unless showDollarSign is false
+      if (this.showDollarSign && (newCaretPosition === 0 || newCaretPosition === 1)) {
         newCaretPosition = 2;
+      } else if (!this.showDollarSign && newCaretPosition === 0) {
+        newCaretPosition = 1;
       }
 
       // If the user replaces a '0' value, keep the caret position on the integer side of the decimal
@@ -158,6 +164,11 @@ export default {
         newCaretPosition--;
       }
 
+      // If showDollarSign is false, remove it from formatted value
+      if (!this.showDollarSign) {
+        formattedValue = formattedValue.slice(1);
+      }
+
       // Update the value and formatted value
       this.$emit('update:modelValue', this.formatter.parse(formattedValue));
       this.formattedValue = formattedValue;
diff --git a/src/components/CurrencyInput/__tests__/CurrencyInput.spec.js b/src/components/CurrencyInput/__tests__/CurrencyInput.spec.js
index 403c8f1ca..b738e2cdd 100644
--- a/src/components/CurrencyInput/__tests__/CurrencyInput.spec.js
+++ b/src/components/CurrencyInput/__tests__/CurrencyInput.spec.js
@@ -65,4 +65,19 @@ describe('Currency input', () => {
     expect(helperText).toBeInTheDocument();
   });
 
+  describe('if show dollar sign is false', () => {
+
+    it('does not show the dollar sign', async () => {
+      const props = { ...initialProps, showDollarSign: false };
+      const { getByLabelText } = render(CurrencyInput, {
+        props
+      });
+      const currencyInput = getByLabelText(props.inputProps.label);
+
+      await fireEvent.update(currencyInput, '6.00');
+      expect(currencyInput.value).toEqual('6.00');
+    });
+
+  });
+
 });