[5.3] MSTR-308: Show credit card not accepted dialog on login and ref…

…resh (#1201)
2600hz · Jun 6, 2024 · a7f9fdd · a7f9fdd
1 parent cd7e270
commit a7f9fdd
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 46 deletions.
diff --git a/src/apps/myaccount/i18n/de-DE.json b/src/apps/myaccount/i18n/de-DE.json
@@ -220,7 +220,7 @@
 				"noAch": "*Based on the Billing Address above, the ACH payment method is not available."
 			},
 			"bigNotices": {
-				"noCard": "The option to use a Credit Card is not available in the following states: NY, CT, MA, ME. Debit cards are also not a valid method. Please use ACH Direct Debit"
+				"noCard": "We can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption. Note: ACH payment setup may take up to 4 days to process."
 			}
 		},
 
@@ -284,9 +284,13 @@
 			},
 			"status": {
 				"pending": "Verification pending...",
-				"verified": "Verified"
+				"verified": "Verified",
+				"failed": "Failed"
 			}
 		},
+		"awaitingSettlement": {
+			"description": "We have confirmed the deposit amounts. Please check again later."
+		},
 		"addFailure": "Unable to store this bank account information",
 		"addSuccess": "Bank account was succesfully stored",
 		"removeSuccess": "Verified bank account and payment method removed.",
@@ -295,6 +299,13 @@
 		"verificationFailure": {
 			"title": "Incorrect Amount(s)",
 			"message": "The amounts provided above do NOT match the verification records. Please double check your inputs below and try again. You have up to 4 attempts."
+		},
+		"verificationDeclined": {
+			"title": "Bank account cannot be verified",
+			"message": {
+				"gateway_rejected": "You have reached the maximum amount of confirmation attempts",
+              	"processor_declined": "Verification was declined by the processor"
+			}
 		}
 	},
 
@@ -331,7 +342,15 @@
 		"removeSuccess": "Credit card ending in {{variable}} removed as payment method.",
 		"removeFailure": "Failed to remove credit card ending in {{variable}} as payment method.",
 		"surchargeNotice": "NOTICE: We impose a surcharge of up to <span>2.6</span>% of the transaction amount on Visa and Mastercard credit card products, which is not greater than our cost of acceptance, in states where such surcharges are permitted.",
-		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card."
+		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card.",
+		"disclaimer": {
+			"title": "Changes to credit card payments",
+			"noCardTitle": "Important Update to 2600Hz Payment Options",
+			"message": "In order to continue using your current credit card as a valid payment method, you must acknowledge and agree to this surcharge. If not, you will need to update to a different payment method.",
+			"noCardMessage": "We've introduced ACH Direct Deposit as a new payment method. However, we can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption.",
+			"updatePaymentMethod": "Update payment method",
+			"saveAndContinue": "Save & continue"
+		}
 	},
 
 	"trunks": {

diff --git a/src/apps/myaccount/i18n/en-US.json b/src/apps/myaccount/i18n/en-US.json
@@ -238,7 +238,7 @@
 				"noAch": "*Based on the Billing Address above, the ACH payment method is not available."
 			},
 			"bigNotices": {
-				"noCard": "The option to use a Credit Card is not available in the following states: NY, CT, MA, ME. Debit cards are also not a valid method. Please use ACH Direct Debit"
+				"noCard": "We can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption. Note: ACH payment setup may take up to 4 days to process."
 			}
 		},
 
@@ -363,7 +363,9 @@
 		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card.",
 		"disclaimer": {
 			"title": "Changes to credit card payments",
+			"noCardTitle": "Important Update to 2600Hz Payment Options",
 			"message": "In order to continue using your current credit card as a valid payment method, you must acknowledge and agree to this surcharge. If not, you will need to update to a different payment method.",
+			"noCardMessage": "We've introduced ACH Direct Deposit as a new payment method. However, we can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption.",
 			"updatePaymentMethod": "Update payment method",
 			"saveAndContinue": "Save & continue"
 		}

diff --git a/src/apps/myaccount/i18n/fr-FR.json b/src/apps/myaccount/i18n/fr-FR.json
@@ -152,7 +152,7 @@
 				"noAch": "*Based on the Billing Address above, the ACH payment method is not available."
 			},
 			"bigNotices": {
-				"noCard": "The option to use a Credit Card is not available in the following states: NY, CT, MA, ME. Debit cards are also not a valid method. Please use ACH Direct Debit"
+				"noCard": "We can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption. Note: ACH payment setup may take up to 4 days to process."
 			}
 		},
 
@@ -216,7 +216,8 @@
 			},
 			"status": {
 				"pending": "Verification pending...",
-				"verified": "Verified"
+				"verified": "Verified",
+				"failed": "Failed"
 			}
 		},
 		"awaitingSettlement": {
@@ -276,7 +277,9 @@
 		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card.",
 		"disclaimer": {
 			"title": "Changes to credit card payments",
+			"noCardTitle": "Important Update to 2600Hz Payment Options",
 			"message": "In order to continue using your current credit card as a valid payment method, you must acknowledge and agree to this surcharge. If not, you will need to update to a different payment method.",
+			"noCardMessage": "We've introduced ACH Direct Deposit as a new payment method. However, we can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption.",
 			"updatePaymentMethod": "Update payment method",
 			"saveAndContinue": "Save & continue"
 		}

diff --git a/src/apps/myaccount/i18n/nl-NL.json b/src/apps/myaccount/i18n/nl-NL.json
@@ -142,7 +142,7 @@
 				"noAch": "*Based on the Billing Address above, the ACH payment method is not available."
 			},
 			"bigNotices": {
-				"noCard": "The option to use a Credit Card is not available in the following states: NY, CT, MA, ME. Debit cards are also not a valid method. Please use ACH Direct Debit"
+				"noCard": "We can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption. Note: ACH payment setup may take up to 4 days to process."
 			}
 		},
 
@@ -206,7 +206,8 @@
 			},
 			"status": {
 				"pending": "Verification pending...",
-				"verified": "Verified"
+				"verified": "Verified",
+				"failed": "Failed"
 			}
 		},
 		"awaitingSettlement": {
@@ -266,7 +267,9 @@
 		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card.",
 		"disclaimer": {
 			"title": "Changes to credit card payments",
+			"noCardTitle": "Important Update to 2600Hz Payment Options",
 			"message": "In order to continue using your current credit card as a valid payment method, you must acknowledge and agree to this surcharge. If not, you will need to update to a different payment method.",
+			"noCardMessage": "We've introduced ACH Direct Deposit as a new payment method. However, we can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption.",
 			"updatePaymentMethod": "Update payment method",
 			"saveAndContinue": "Save & continue"
 		}

diff --git a/src/apps/myaccount/i18n/ru-RU.json b/src/apps/myaccount/i18n/ru-RU.json
@@ -178,7 +178,7 @@
 				"noAch": "*Based on the Billing Address above, the ACH payment method is not available."
 			},
 			"bigNotices": {
-				"noCard": "The option to use a Credit Card is not available in the following states: NY, CT, MA, ME. Debit cards are also not a valid method. Please use ACH Direct Debit"
+				"noCard": "We can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption. Note: ACH payment setup may take up to 4 days to process."
 			}
 		},
 
@@ -242,7 +242,8 @@
 			},
 			"status": {
 				"pending": "Verification pending...",
-				"verified": "Verified"
+				"verified": "Verified",
+				"failed": "Failed"
 			}
 		},
 		"awaitingSettlement": {
@@ -302,7 +303,9 @@
 		"debitCardError": "We do not accept debit card payments. Please use ACH, or a Visa/Mastercard credit card.",
 		"disclaimer": {
 			"title": "Changes to credit card payments",
+			"noCardTitle": "Important Update to 2600Hz Payment Options",
 			"message": "In order to continue using your current credit card as a valid payment method, you must acknowledge and agree to this surcharge. If not, you will need to update to a different payment method.",
+			"noCardMessage": "We've introduced ACH Direct Deposit as a new payment method. However, we can no longer accept debit or credit card payments in your state. Please update your payment method to ACH Direct Deposit by July 1, 2024, to avoid service interruption.",
 			"updatePaymentMethod": "Update payment method",
 			"saveAndContinue": "Save & continue"
 		}

diff --git a/src/apps/myaccount/submodules/billing/billing.scss b/src/apps/myaccount/submodules/billing/billing.scss
@@ -176,14 +176,6 @@
 
 	.no-payment-available-small-notices {
 		margin-bottom: 1rem;
-
-		&.no-payment-available-small-notices-card .no-card-available {
-			display: none;
-		}
-
-		&.no-payment-available-small-notices-ach .no-ach-available {
-			display: none;
-		}
 	}
 
 	.no-card-available-hidden, .no-ach-available-hidden {

diff --git a/src/apps/myaccount/submodules/creditCard/creditCard.js b/src/apps/myaccount/submodules/creditCard/creditCard.js
@@ -308,11 +308,6 @@ define(function(require) {
 
 			var card = _.get(args, ['cards', 0]);
 
-			if (!expiredMode && country === 'US' && _.includes(self.appFlags.billing.usStatesDeniedCreditCards, region)) {
-				$container.find('.no-card-available')
-					.removeClass('no-card-available-hidden');
-			}
-
 			monster.waterfall([
 				function createClientInstance(next) {
 					braintreeClient.create({
@@ -361,6 +356,11 @@ define(function(require) {
 					}
 				}));
 
+				if (!expiredMode && country === 'US' && _.includes(self.appFlags.billing.usStatesDeniedCreditCards, region)) {
+					$template.filter('.no-card-available')
+						.removeClass('no-card-available-hidden');
+				}
+
 				$template.find('#credit_card_delete').on('click', function(event) {
 					event.preventDefault();
 
@@ -605,26 +605,32 @@ define(function(require) {
 					hasCreditCards = !_.chain(billing).get('credit_cards', []).isEmpty().value(),
 					country = _.get(account, ['contact', 'billing', 'country']),
 					region = _.get(account, ['contact', 'billing', 'region']),
-					surcharge = self.billingGetCreditCardSurcharge(country, region);
+					surcharge = self.billingGetCreditCardSurcharge(country, region),
+					isCardAccepted = !!surcharge;
 
-				if (!hasCreditCards || isSurchargeAccepted || country !== 'US') {
+				if (!hasCreditCards || country !== 'US' || (isCardAccepted && isSurchargeAccepted)) {
 					return;
 				}
 
 				var $template = $(self.getTemplate({
 						name: 'disclaimerDialog',
-						submodule: 'creditCard'
+						submodule: 'creditCard',
+						data: {
+							isCardAccepted: isCardAccepted
+						}
 					})),
 					$acceptButton = $template.find('#myaccount_creditcard_disclaimer_accept'),
 					$checkbox = $template.find('input[name="credit_card_accept_agreement"]'),
 					$dialog = monster.ui.dialog($template, {
-						dialogClass: 'myaccount-creditcard-dialog',
-						title: self.i18n.active().creditCard.disclaimer.title,
+						dialogClass: isCardAccepted ? 'myaccount-creditcard-dialog' : 'myaccount-creditcard-dialog-no-card',
+						title: self.i18n.active().creditCard.disclaimer[isCardAccepted ? 'title' : 'noCardTitle'],
 						isPersistent: true,
 						hideClose: true,
-						closeOnEscape: false
+						closeOnEscape: !isCardAccepted
 					}),
-					$icon = monster.ui.getSvgIconTemplate({ id: 'telicon2--warning--triangle' });
+					$icon = isCardAccepted
+						? monster.ui.getSvgIconTemplate({ id: 'telicon2--warning--triangle' })
+						: monster.ui.getSvgIconTemplate({ id: 'telicon2--x--circle' });
 
 				if (surcharge) {
 					$template.find('.disclaimer-dialog-notice span').text(surcharge);
@@ -669,6 +675,11 @@ define(function(require) {
 						});
 					});
 
+				$template.find('#myaccount_creditcard_disclaimer_cancel')
+					.on('click', function() {
+						$dialog.dialog('close');
+					});
+
 				$dialog
 					.siblings('.ui-dialog-titlebar')
 						.addClass('disclaimer-dialog-title')

diff --git a/src/apps/myaccount/submodules/creditCard/creditCard.scss b/src/apps/myaccount/submodules/creditCard/creditCard.scss
@@ -81,19 +81,28 @@
 	}
 }
 
-.myaccount-creditcard-dialog {
-	.disclaimer-dialog-title {
-		background-color: var(--sds_theme_color_warning);
-	}
-	.svg-icon {
-		float: left;
-		padding-top: 0.75rem;
-		padding-right: 0.5rem;
+.myaccount-creditcard-dialog, .myaccount-creditcard-dialog-no-card {
+	.disclaimer-dialog-title.ui-dialog-titlebar {
+		background: $white;
+		padding: 1.5rem;
+
+		.ui-dialog-title {
+			font-size: 22px;
+			line-height: 2rem;
+			color: #333;
+		}
+
+		.svg-icon {
+			float: left;
+			padding-right: 1rem;
+			width: 2rem;
+			height: 2rem;
+		}
 	}
 
 	#myaccount_creditcard_disclaimer_dialog {
-		max-width: 560px;
-		padding: 1rem;
+		max-width: 510px;
+		padding: 0 1.5rem  1.5rem 1.5rem;
 
 		.disclaimer-dialog-notice {
 			margin-bottom: 1rem;
@@ -102,15 +111,30 @@
 		.disclaimer-dialog-agreement {
 			margin-bottom: 1rem;
 
+			label {
+				font-size: 15.4px;
+				line-height: 20px;
+			}
+
 			a {
 				color: $primary-color;
 			}
 		}
 
 		.disclaimer-dialog-footer {
-			.monster-button-small {
+			margin-top: 2rem;
+
+			.monster-button {
 				margin-left: 0.5rem;
 			}
 		}
 	}
 }
+
+.myaccount-creditcard-dialog .disclaimer-dialog-title.ui-dialog-titlebar .svg-icon {
+	color: $warning-color;
+}
+
+.myaccount-creditcard-dialog-no-card .disclaimer-dialog-title.ui-dialog-titlebar .svg-icon {
+	color: $danger-color;
+}
diff --git a/src/apps/myaccount/submodules/creditCard/views/disclaimerDialog.html b/src/apps/myaccount/submodules/creditCard/views/disclaimerDialog.html
@@ -1,16 +1,27 @@
 <div id="myaccount_creditcard_disclaimer_dialog" class="clearfix">
 	<div class="disclaimer-dialog-notice">
-		{{{i18n.creditCard.surchargeNotice}}}
-		<br/><br/>
-		{{{i18n.creditCard.disclaimer.message}}}
+		{{#if isCardAccepted}}
+			{{{i18n.creditCard.surchargeNotice}}}
+			<br/><br/>
+			{{{i18n.creditCard.disclaimer.message}}}
+		{{else}}
+			{{{i18n.creditCard.disclaimer.noCardMessage}}}
+		{{/if}}
 	</div>
+{{#if isCardAccepted}}
 	<div class="disclaimer-dialog-agreement">
 		{{#monsterCheckbox "raw-label" i18n.creditCard.add.agreement}}
 			<input type="checkbox" name="credit_card_accept_agreement" />
 		{{/monsterCheckbox}}
 	</div>
+{{/if}}
 	<div class="disclaimer-dialog-footer">
-		<button id="myaccount_creditcard_disclaimer_accept" type="button" class="monster-button-primary monster-button-small pull-right" disabled>{{i18n.creditCard.disclaimer.saveAndContinue}}</button>
-		<button id="myaccount_creditcard_disclaimer_payments" type="button" class="monster-button-small pull-right">{{i18n.creditCard.disclaimer.updatePaymentMethod}}</button>
+	{{#if isCardAccepted}}
+		<button id="myaccount_creditcard_disclaimer_accept" type="button" class="monster-button monster-button-primary pull-right" disabled>{{i18n.creditCard.disclaimer.saveAndContinue}}</button>
+	{{/if}}
+		<button id="myaccount_creditcard_disclaimer_payments" type="button" class="monster-button pull-right">{{i18n.creditCard.disclaimer.updatePaymentMethod}}</button>
+	{{#unless isCardAccepted}}
+		<button id="myaccount_creditcard_disclaimer_cancel" type="button" class="monster-button monster-button-ghost pull-right">{{i18n.cancel}}</button>
+	{{/unless}}
 	</div>
 </div>