From b3fceaa0dc33f6ec8d34d4dd8f6445af299131f4 Mon Sep 17 00:00:00 2001
From: Kyungmin Kim <kmin905@gmail.com>
Date: Thu, 29 Jan 2015 17:15:15 -0800
Subject: [PATCH] Fixes #1634 & fixes #1572: Update 'on statement as' field

---
 app/templates/modals/add-funds-modal.hbs      | 14 +++-----------
 .../bank-account-credit-create-modal.hbs      |  8 ++++++--
 .../modals/card-debit-create-modal.hbs        |  8 ++++++--
 .../modals/credit-customer-modal.hbs          |  8 ++++++--
 .../modals/credit-funding-instrument.hbs      |  8 ++++++--
 app/templates/modals/credit-order-modal.hbs   |  6 +++++-
 app/templates/modals/debit-customer-modal.hbs | 10 +++++++---
 .../modals/debit-funding-instrument.hbs       |  8 ++++++--
 app/templates/modals/debit-order-modal.hbs    |  8 ++++++--
 app/templates/modals/withdraw-funds-modal.hbs |  7 +++----
 .../statement-descriptor-text-form-field.js   | 19 +++++++++++++++++++
 app/views/form-fields/textarea-form-field.js  |  5 +++--
 app/views/modals/add-funds-modal.js           |  3 ---
 .../bank-account-credit-create-modal.js       |  5 -----
 app/views/modals/card-debit-create-modal.js   |  5 -----
 app/views/modals/credit-customer-modal.js     |  4 ----
 .../modals/credit-funding-instrument-modal.js |  6 +-----
 app/views/modals/credit-order-modal.js        |  2 ++
 app/views/modals/debit-customer-modal.js      |  4 ----
 .../modals/debit-funding-instrument-modal.js  |  5 +----
 app/views/modals/debit-order-modal.js         |  5 -----
 app/views/modals/withdraw-funds-modal.js      |  4 ----
 22 files changed, 80 insertions(+), 72 deletions(-)
 create mode 100644 app/views/form-fields/statement-descriptor-text-form-field.js

diff --git a/app/templates/modals/add-funds-modal.hbs b/app/templates/modals/add-funds-modal.hbs
index 63c90d23c..c7608dd13 100644
--- a/app/templates/modals/add-funds-modal.hbs
+++ b/app/templates/modals/add-funds-modal.hbs
@@ -1,4 +1,4 @@
-{{#view "form-fields/form-section" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength debitableBankAccounts=view.debitableBankAccounts model=view.model sectionTitle="Payment information"}}
+{{#view "form-fields/form-section" debitableBankAccounts=view.debitableBankAccounts model=view.model sectionTitle="Payment information" sectionDescription="Funds will appear in your balance in 3-5 business days."}}
 	{{#if view.debitableBankAccounts}}
 		{{view "form-fields/select-form-field"
 			model=view.model
@@ -32,12 +32,10 @@
 		field="dollar_amount"
 	}}
 
-	{{view "form-fields/text-form-field"
+	{{view "form-fields/statement-descriptor-text-form-field"
 		model=view.model
-		labelText=view.appearsOnStatementAsLabelText
 		field="appears_on_statement_as"
-		inputClassNames="full"
-		maxlength=view.appearsOnStatementAsMaxLength
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
 	}}
 
 	{{view "form-fields/text-form-field"
@@ -47,9 +45,3 @@
 		field="description"
 	}}
 {{/view}}
-
-{{#view "form-fields/form-section" sectionTitle="Note"}}
-	<div class="form-group">
-		<p>Funds will appear in your balance in 3-5 business days.</p>
-	</div>
-{{/view}}
diff --git a/app/templates/modals/bank-account-credit-create-modal.hbs b/app/templates/modals/bank-account-credit-create-modal.hbs
index 3d540d7dd..f338cca7f 100644
--- a/app/templates/modals/bank-account-credit-create-modal.hbs
+++ b/app/templates/modals/bank-account-credit-create-modal.hbs
@@ -1,4 +1,4 @@
-{{#view "form-fields/form-section" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText bankAccountTypes=view.bankAccountTypes model=view.model sectionTitle="Credit information" sectionDescription="Funds will appear in the bank account by the next business day. First time credits to new accounts may take 3-5 business days."}}
+{{#view "form-fields/form-section" bankAccountTypes=view.bankAccountTypes model=view.model sectionTitle="Credit information" sectionDescription="Funds will appear in the bank account by the next business day. First time credits to new accounts may take 3-5 business days."}}
 	{{view "form-fields/text-form-field" model=view.model field="name" labelText="Name on account" inputClassNames="full"}}
 	{{view "form-fields/text-form-field" model=view.model field="routing_number" labelText="Routing number" inputClassNames="full" tooltipTitle="Where is the routing number?" tooltipContent='<img src="images/bank-account-instructions.png" alt="Bank Account Instructions"/>'}}
 	{{view "form-fields/text-form-field" model=view.model field="account_number" labelText="Account number" inputClassNames="full" tooltipTitle="Where is the account number?" tooltipContent='<img src="images/bank-account-instructions.png" alt="Bank Account Instructions"/>'}}
@@ -16,7 +16,11 @@
 
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.appearsOnStatementAsMaxLength inputClassNames="full"}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="description" labelText="Internal description" inputClassNames="full"}}
 {{/view}}
diff --git a/app/templates/modals/card-debit-create-modal.hbs b/app/templates/modals/card-debit-create-modal.hbs
index c4a0b7845..9a289e130 100644
--- a/app/templates/modals/card-debit-create-modal.hbs
+++ b/app/templates/modals/card-debit-create-modal.hbs
@@ -20,10 +20,14 @@
 	{{view "form-fields/text-form-field" model=view.model field="postal_code" labelText="Billing zip code" explanationText="Required for American Express cards"}}
 {{/view}}
 
-{{#view "form-fields/form-section" sectionTitle="Debit information" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength model=view.model}}
+{{#view "form-fields/form-section" sectionTitle="Debit information" model=view.model}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.appearsOnStatementAsMaxLength inputClassNames="full"}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="debit_description" labelText="Internal description" inputClassNames="full"}}
 {{/view}}
diff --git a/app/templates/modals/credit-customer-modal.hbs b/app/templates/modals/credit-customer-modal.hbs
index d6bd0fb86..a0b1d8ff7 100644
--- a/app/templates/modals/credit-customer-modal.hbs
+++ b/app/templates/modals/credit-customer-modal.hbs
@@ -40,10 +40,14 @@
 	{{/if}}
 {{/view}}
 
-{{#view "form-fields/form-section" appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText model=view.model sectionTitle="Credit information"}}
+{{#view "form-fields/form-section" model=view.model sectionTitle="Credit information"}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount" explanationText=view.parentView.orderBalanceText}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxLength=view.appearsOnStatementAsMaxLength inputClassNames="full" maxlength=view.appearsOnStatementAsMaxLength}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="credit_description" labelText="Internal description" maxlength=Constants.MAXLENGTH.DESCRIPTION inputClassNames="full"}}
 {{/view}}
diff --git a/app/templates/modals/credit-funding-instrument.hbs b/app/templates/modals/credit-funding-instrument.hbs
index 3b3320252..2eb9c73c2 100644
--- a/app/templates/modals/credit-funding-instrument.hbs
+++ b/app/templates/modals/credit-funding-instrument.hbs
@@ -1,7 +1,11 @@
-{{#view "form-fields/form-section" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText model=view.model sectionTitle="Credit information" sectionDescription=view.expectedDateText}}
+{{#view "form-fields/form-section" model=view.model sectionTitle="Credit information" sectionDescription=view.expectedDateText}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.model.destination.appears_on_statement_max_length inputClassNames="full"}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="description" labelText="Internal description" inputClassNames="full" maxlength=Constants.MAXLENGTH.DESCRIPTION}}
 {{/view}}
diff --git a/app/templates/modals/credit-order-modal.hbs b/app/templates/modals/credit-order-modal.hbs
index 05f3ddded..341fd60a1 100644
--- a/app/templates/modals/credit-order-modal.hbs
+++ b/app/templates/modals/credit-order-modal.hbs
@@ -28,7 +28,11 @@
 {{#view "form-fields/form-section" model=view.model sectionTitle="Credit information" sectionDescription="Funds will appear in the bank account by the next business day. First time credits to new accounts may take 3-5 business days."}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.parentView.appearsOnStatementAsLabelText maxLength=view.parentView.appearsOnStatementAsMaxLength inputClassNames="full" maxlength=view.appearsOnStatementAsMaxLength}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="description" labelText="Internal description" maxlength=Constants.MAXLENGTH.DESCRIPTION inputClassNames="full"}}
 {{/view}}
diff --git a/app/templates/modals/debit-customer-modal.hbs b/app/templates/modals/debit-customer-modal.hbs
index ca6a1494c..6946253a8 100644
--- a/app/templates/modals/debit-customer-modal.hbs
+++ b/app/templates/modals/debit-customer-modal.hbs
@@ -40,10 +40,14 @@
 	{{/if}}
 {{/view}}
 
-{{#view "form-fields/form-section" sectionTitle="Debit information" appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText model=view.model}}
+{{#view "form-fields/form-section" sectionTitle="Debit information" model=view.model}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
-
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.appearsOnStatementAsMaxLength inputClassNames="full"}}
+	{{view.model}} || {{view.parentView.appearsOnStatementAsMaxLength}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="debit_description" labelText="Internal description" inputClassNames="full" maxlength=Constants.MAXLENGTH.DESCRIPTION}}
 {{/view}}
diff --git a/app/templates/modals/debit-funding-instrument.hbs b/app/templates/modals/debit-funding-instrument.hbs
index dd45447e2..8cd97e0b4 100644
--- a/app/templates/modals/debit-funding-instrument.hbs
+++ b/app/templates/modals/debit-funding-instrument.hbs
@@ -6,10 +6,14 @@
 	{{view "form-fields/email-form-field" model=view.model field="seller_email_address" labelText="Merchant's email address" inputClassNames="full"}}
 {{/view}}
 
-{{#view "form-fields/form-section" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText model=view.model sectionTitle="Debit information"}}
+{{#view "form-fields/form-section" model=view.model sectionTitle="Debit information"}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.model.source.appears_on_statement_max_length inputClassNames="full"}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="description" labelText="Internal description" inputClassNames="full" maxlength=Constants.MAXLENGTH.DESCRIPTION}}
 {{/view}}
diff --git a/app/templates/modals/debit-order-modal.hbs b/app/templates/modals/debit-order-modal.hbs
index b6e8632a3..12bec41b8 100644
--- a/app/templates/modals/debit-order-modal.hbs
+++ b/app/templates/modals/debit-order-modal.hbs
@@ -13,10 +13,14 @@
 	{{view "form-fields/text-form-field" model=view.model field="postal_code" labelText="Billing zip code" explanationText="Required for American Express cards"}}
 {{/view}}
 
-{{#view "form-fields/form-section" sectionTitle="Debit information" appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength model=view.model}}
+{{#view "form-fields/form-section" sectionTitle="Debit information" model=view.model}}
 	{{view "form-fields/amount-form-field" model=view.model field="dollar_amount" labelText="Amount"}}
 
-	{{view "form-fields/text-form-field" model=view.model field="appears_on_statement_as" labelText=view.appearsOnStatementAsLabelText maxlength=view.appearsOnStatementAsMaxLength inputClassNames="full"}}
+	{{view "form-fields/statement-descriptor-text-form-field"
+		model=view.model
+		field="appears_on_statement_as"
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
+	}}
 
 	{{view "form-fields/text-form-field" model=view.model field="debit_description" labelText="Internal description" inputClassNames="full"}}
 {{/view}}
diff --git a/app/templates/modals/withdraw-funds-modal.hbs b/app/templates/modals/withdraw-funds-modal.hbs
index 6123ea011..aaddfc96d 100644
--- a/app/templates/modals/withdraw-funds-modal.hbs
+++ b/app/templates/modals/withdraw-funds-modal.hbs
@@ -1,4 +1,4 @@
-{{#view "form-fields/form-section" availableBalance=view.availableBalance appearsOnStatementAsLabelText=view.appearsOnStatementAsLabelText appearsOnStatementAsMaxLength=view.appearsOnStatementAsMaxLength bankAccounts=view.bankAccounts model=view.model sectionTitle="Payment information"}}
+{{#view "form-fields/form-section" availableBalance=view.availableBalance bankAccounts=view.bankAccounts model=view.model sectionTitle="Payment information"}}
 	{{#if view.bankAccounts}}
 		{{view "form-fields/select-form-field"
 			model=view.model
@@ -35,11 +35,10 @@
 		explanationText=view.availableBalance
 	}}
 
-	{{view "form-fields/text-form-field"
+	{{view "form-fields/statement-descriptor-text-form-field"
 		model=view.model
-		labelText=view.appearsOnStatementAsLabelText
 		field="appears_on_statement_as"
-		maxlength=view.appearsOnStatementAsMaxLength
+		maxlength=view.parentView.appearsOnStatementAsMaxLength
 	}}
 
 	{{view "form-fields/text-form-field"
diff --git a/app/views/form-fields/statement-descriptor-text-form-field.js b/app/views/form-fields/statement-descriptor-text-form-field.js
new file mode 100644
index 000000000..e46dfc9c8
--- /dev/null
+++ b/app/views/form-fields/statement-descriptor-text-form-field.js
@@ -0,0 +1,19 @@
+import TextFormFieldView from "./text-form-field";
+
+var StatementDescriptorTextFormFieldView = TextFormFieldView.extend({
+	maxlength: 0,
+	labelText: "On statement as",
+	explanationText: function() {
+		var maxLength = this.get('maxlength');
+
+		if (maxLength > 0) {
+			var noteLength = this.get('value') ? this.get('value.length') : 0;
+			var remaining = maxLength - noteLength;
+			var unit = (remaining === 1) ? "character" : "characters";
+
+			return "%@ %@ remaining".fmt(remaining, unit);
+		}
+	}.property('value.length'),
+});
+
+export default StatementDescriptorTextFormFieldView;
diff --git a/app/views/form-fields/textarea-form-field.js b/app/views/form-fields/textarea-form-field.js
index 7c2636cec..80284842d 100644
--- a/app/views/form-fields/textarea-form-field.js
+++ b/app/views/form-fields/textarea-form-field.js
@@ -9,10 +9,11 @@ var TextAreaFormFieldView = BaseFormFieldView.extend({
 		if (maxLength > 0) {
 			var noteLength = this.get('value') ? this.get('value.length') : 0;
 			var remaining = maxLength - noteLength;
-			return "%@ characters remaining".fmt(remaining);
+			var unit = (remaining === 1) ? "character" : "characters";
+
+			return "%@ %@ remaining".fmt(remaining, unit);
 		}
 	}.property('value.length'),
-
 });
 
 export default TextAreaFormFieldView;
diff --git a/app/views/modals/add-funds-modal.js b/app/views/modals/add-funds-modal.js
index 81bf45c4b..e2f8a6f5d 100644
--- a/app/views/modals/add-funds-modal.js
+++ b/app/views/modals/add-funds-modal.js
@@ -14,9 +14,6 @@ var AddFundsModalView = ModalBaseView.extend(Full, Form, Action, {
 	submitButtonText: "Add",
 
 	appearsOnStatementAsMaxLength: Constants.MAXLENGTH.APPEARS_ON_STATEMENT_BANK_ACCOUNT,
-	appearsOnStatementAsLabelText: function() {
-		return "Appears on statement as (%@ characters max)".fmt(this.get("appearsOnStatementAsMaxLength"));
-	}.property("appearsOnStatementAsMaxLength"),
 
 	debitableBankAccounts: Ember.computed.readOnly("marketplace.owner_customer.debitable_bank_accounts"),
 	debitableBankAccountsForSelect: Ember.computed.map("debitableBankAccounts", function(bankAccount) {
diff --git a/app/views/modals/bank-account-credit-create-modal.js b/app/views/modals/bank-account-credit-create-modal.js
index 5746600f0..5a7da5709 100644
--- a/app/views/modals/bank-account-credit-create-modal.js
+++ b/app/views/modals/bank-account-credit-create-modal.js
@@ -23,11 +23,6 @@ var BankAccountCreditCreateModalView = ModalBaseView.extend(Save, Full, Form, {
 		};
 	}),
 
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
-
 	appearsOnStatementAsMaxLength: Constants.MAXLENGTH.APPEARS_ON_STATEMENT_BANK_ACCOUNT,
 
 	actions: {
diff --git a/app/views/modals/card-debit-create-modal.js b/app/views/modals/card-debit-create-modal.js
index d332c483c..74f529798 100644
--- a/app/views/modals/card-debit-create-modal.js
+++ b/app/views/modals/card-debit-create-modal.js
@@ -18,11 +18,6 @@ var CardDebitCreateModalView = ModalBaseView.extend(Save, Full, Form, {
 
 	appearsOnStatementAsMaxLength: Constants.MAXLENGTH.APPEARS_ON_STATEMENT_CARD,
 
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
-
 	actions: {
 		save: function() {
 			var controller = this.get("controller");
diff --git a/app/views/modals/credit-customer-modal.js b/app/views/modals/credit-customer-modal.js
index 439c9d3a3..434a79b76 100644
--- a/app/views/modals/credit-customer-modal.js
+++ b/app/views/modals/credit-customer-modal.js
@@ -32,10 +32,6 @@ var CreditCustomerModalView = ModalBaseView.extend(Full, Form, Save, {
 	}.property("model.order.amount_escrowed"),
 
 	appearsOnStatementAsMaxLength: Ember.computed.oneWay("model.appears_on_statement_max_length"),
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
 
 	creditableOrders: function() {
 		return this.get("customer").getOrdersLoader().get("results");
diff --git a/app/views/modals/credit-funding-instrument-modal.js b/app/views/modals/credit-funding-instrument-modal.js
index 65f2775d8..bfd3d0351 100644
--- a/app/views/modals/credit-funding-instrument-modal.js
+++ b/app/views/modals/credit-funding-instrument-modal.js
@@ -16,11 +16,7 @@ var CreditFundingInstrumentModalView = BaseFundingInstrumentModalView.extend({
 		return "This credit is expected to appear on %@.".fmt(Utils.humanReadableDate(creditDate));
 	}.property("model.destination.expected_credit_date"),
 
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("model.destination.appears_on_statement_max_length");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("model.destination.appears_on_statement_max_length"),
-
+	appearsOnStatementAsMaxLength: Ember.computed.reads("model.destination.appears_on_statement_max_length"),
 });
 
 CreditFundingInstrumentModalView.reopenClass({
diff --git a/app/views/modals/credit-order-modal.js b/app/views/modals/credit-order-modal.js
index 30d9e3ffc..6a300dfbd 100644
--- a/app/views/modals/credit-order-modal.js
+++ b/app/views/modals/credit-order-modal.js
@@ -7,6 +7,8 @@ var CreditOrderModalView = CreditCustomerModalView.extend({
 	elementId: "credit-order",
 	title: "Credit from this order",
 
+	appearsOnStatementAsMaxLength: Ember.computed.reads("model.appears_on_statement_max_length"),
+
 	model: function() {
 		return CreditExistingFundingInstrumentTransactionFactory.create({
 			customer: this.get("recipient"),
diff --git a/app/views/modals/debit-customer-modal.js b/app/views/modals/debit-customer-modal.js
index 852dd345b..2fee94470 100644
--- a/app/views/modals/debit-customer-modal.js
+++ b/app/views/modals/debit-customer-modal.js
@@ -14,10 +14,6 @@ var DebitCustomerModalView = ModalBaseView.extend(Full, Form, Save, {
 	submitButtonText: "Debit",
 
 	appearsOnStatementAsMaxLength: Ember.computed.oneWay("model.appears_on_statement_max_length"),
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
 
 	transactionFactoryClass: function() {
 		if (this.get("isDisplayExistingFundingInstruments")) {
diff --git a/app/views/modals/debit-funding-instrument-modal.js b/app/views/modals/debit-funding-instrument-modal.js
index 8779c3dfc..70349474d 100644
--- a/app/views/modals/debit-funding-instrument-modal.js
+++ b/app/views/modals/debit-funding-instrument-modal.js
@@ -10,10 +10,7 @@ var DebitFundingInstrumentModalView = BaseFundingInstrumentModalView.extend({
 	cancelButtonText: "Cancel",
 	submitButtonText: "Debit",
 
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("model.source.appears_on_statement_max_length");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("model.source.appears_on_statement_max_length"),
+	appearsOnStatementAsMaxLength: Ember.computed.reads("model.source.appears_on_statement_max_length"),
 });
 
 DebitFundingInstrumentModalView.reopenClass({
diff --git a/app/views/modals/debit-order-modal.js b/app/views/modals/debit-order-modal.js
index 0d829a958..c42c2795a 100644
--- a/app/views/modals/debit-order-modal.js
+++ b/app/views/modals/debit-order-modal.js
@@ -20,11 +20,6 @@ var DebitOrderModalView = ModalBaseView.extend(Save, Full, Form, {
 
 	appearsOnStatementAsMaxLength: Constants.MAXLENGTH.APPEARS_ON_STATEMENT_CARD,
 
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
-
 	actions: {
 		save: function() {
 			var controller = this.get("controller");
diff --git a/app/views/modals/withdraw-funds-modal.js b/app/views/modals/withdraw-funds-modal.js
index 61ab94412..21c2c2ff4 100644
--- a/app/views/modals/withdraw-funds-modal.js
+++ b/app/views/modals/withdraw-funds-modal.js
@@ -14,10 +14,6 @@ var WithdrawFundsModalView = ModalBaseView.extend(Full, Form, {
 	submitButtonText: "Withdraw",
 
 	appearsOnStatementAsMaxLength: Constants.MAXLENGTH.APPEARS_ON_STATEMENT_BANK_ACCOUNT,
-	appearsOnStatementAsLabelText: function() {
-		var length = this.get("appearsOnStatementAsMaxLength");
-		return "Appears on statement as (%@ characters max)".fmt(length);
-	}.property("appearsOnStatementAsMaxLength"),
 
 	bankAccounts: Ember.computed.readOnly('marketplace.owner_customer.bank_accounts'),
 	availableBalance: function() {