From f675ac197a969ba3d3527ae1c4eb2c39caaf4753 Mon Sep 17 00:00:00 2001
From: Eddie Ferrer <eddieferrer@user.noreply.github.com>
Date: Mon, 29 Nov 2021 15:34:36 -0800
Subject: [PATCH] fix: fixes issues with BT drop in and causes signup

* Fixes issue with BT drop in wrappers stuck on button loading
* Minor visual fixes to causes signup form
---
 .../AutoDepositDropInPaymentWrapper.vue       |   1 +
 .../Causes/CausesDropInPaymentWrapper.vue     |   5 +-
 .../MonthlyGoodDropInPaymentWrapper.vue       |   1 +
 .../Payment/BraintreeDropInInterface.vue      |  52 ++++---
 src/pages/Causes/SignupForm.vue               | 138 +++++++++---------
 .../Donate/DonateFormDropInPaymentWrapper.vue |   1 +
 src/pages/Settings/PaymentSettings.vue        |   1 +
 7 files changed, 103 insertions(+), 96 deletions(-)

diff --git a/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue b/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
index 7ca60ae0c3..467f2d7831 100644
--- a/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
+++ b/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
@@ -103,6 +103,7 @@ export default {
 						this.doBraintreeAutoDeposit(transactionNonce, deviceData, paymentType);
 					}
 				}).catch(btSubmitError => {
+					this.submitting = false;
 					console.error(btSubmitError);
 					// Fire specific exception to Sentry/Raven
 					Sentry.withScope(scope => {
diff --git a/src/components/Causes/CausesDropInPaymentWrapper.vue b/src/components/Causes/CausesDropInPaymentWrapper.vue
index 36d0851050..bab9fbb525 100644
--- a/src/components/Causes/CausesDropInPaymentWrapper.vue
+++ b/src/components/Causes/CausesDropInPaymentWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="dropin-payment-holder">
+	<div class="dropin-payment-holder tw-px-0 tw-max-w-md">
 		<braintree-drop-in-interface
 			v-if="isClientReady"
 			ref="braintreeDropInInterface"
@@ -9,7 +9,7 @@
 			:preselect-vaulted-payment-method="action === 'Registration'"
 			@transactions-enabled="enableConfirmButton = $event"
 		/>
-		<div id="dropin-button" class="tw-w-full">
+		<div id="dropin-submit" class="tw-w-full">
 			<kv-button
 				:state="buttonState"
 				@click="submitDropInCauses"
@@ -99,6 +99,7 @@ export default {
 						this.doBraintreeCausesSubscription(transactionNonce, deviceData, paymentType);
 					}
 				}).catch(btSubmitError => {
+					this.submitting = false;
 					console.error(btSubmitError);
 					// Fire specific exception to Sentry/Raven
 					Sentry.withScope(scope => {
diff --git a/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue b/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue
index 6f23553277..efc200b0b7 100644
--- a/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue
+++ b/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue
@@ -113,6 +113,7 @@ export default {
 						this.doBraintreeMonthlyGood(transactionNonce, deviceData, paymentType);
 					}
 				}).catch(btSubmitError => {
+					this.submitting = false;
 					console.error(btSubmitError);
 					// Fire specific exception to Sentry/Raven
 					Sentry.withScope(scope => {
diff --git a/src/components/Payment/BraintreeDropInInterface.vue b/src/components/Payment/BraintreeDropInInterface.vue
index 8067d94a4e..6f71e888ac 100644
--- a/src/components/Payment/BraintreeDropInInterface.vue
+++ b/src/components/Payment/BraintreeDropInInterface.vue
@@ -131,6 +131,7 @@ export default {
 				dataCollector: {
 					kount: true // Required if Kount fraud data collection is enabled
 				},
+				// vaultManager: true, - Useful for testing and removing payment methods easily.
 				paymentOptionPriority: this.paymentTypes,
 				preselectVaultedPaymentMethod: this.preselectVaultedPaymentMethod,
 				card: {
@@ -281,27 +282,6 @@ $border-width: 1px;
 			}
 		}
 
-		// Payment method form headers
-		[data-braintree-id="paypal-sheet-header"],
-		[data-braintree-id="apple-pay-sheet-header"],
-		[data-braintree-id="google-pay-sheet-header"],
-		[data-braintree-id="card-sheet-header"] {
-			padding: 0 0 1rem 0;
-			border: 0;
-			background-color: transparent;
-
-			// Payment Method logo in header
-			.braintree-sheet__logo--header {
-				display: none;
-				visibility: hidden;
-			}
-
-			// Moves credit card icons to new line.
-			.braintree-sheet__header-label {
-				width: 100%;
-			}
-		}
-
 		// Payment method 'sheet' or main content area
 		[data-braintree-id="paypal"],
 		[data-braintree-id="applePay"],
@@ -432,6 +412,36 @@ $border-width: 1px;
 		@apply tw-text-h4 tw-text-primary tw-text-left;
 	}
 
+	/* Payment method container */
+	#dropin-container [data-braintree-id="sheet-container"] {
+		@apply tw-bg-white;
+	}
+
+	/* Payment method form headers */
+	#dropin-container [data-braintree-id="paypal-sheet-header"],
+	#dropin-container [data-braintree-id="apple-pay-sheet-header"],
+	#dropin-container [data-braintree-id="google-pay-sheet-header"],
+	#dropin-container [data-braintree-id="card-sheet-header"] {
+		/* bottom padding and bottom margin creates spacing around the BT loading indicator */
+		@apply tw-bg-transparent tw-border-0 tw-p-0 tw-pb-1 tw-mb-1;
+	}
+
+	/* Payment Method logo in header */
+	#dropin-container [data-braintree-id="paypal-sheet-header"] .braintree-sheet__logo--header,
+	#dropin-container [data-braintree-id="apple-pay-sheet-header"] .braintree-sheet__logo--header,
+	#dropin-container [data-braintree-id="google-pay-sheet-header"] .braintree-sheet__logo--header,
+	#dropin-container [data-braintree-id="card-sheet-header"] .braintree-sheet__logo--header {
+		@apply tw-hidden;
+	}
+
+	/* Moves credit card icons to new line. */
+	#dropin-container [data-braintree-id="paypal-sheet-header"] .braintree-sheet__header-label,
+	#dropin-container [data-braintree-id="apple-pay-sheet-header"] .braintree-sheet__header-label,
+	#dropin-container [data-braintree-id="google-pay-sheet-header"] .braintree-sheet__header-label,
+	#dropin-container [data-braintree-id="card-sheet-header"] .braintree-sheet__header-label {
+		@apply tw-w-full;
+	}
+
 	/* Payment method form headers text
 	'Pay with card'
 	'Paypal'
diff --git a/src/pages/Causes/SignupForm.vue b/src/pages/Causes/SignupForm.vue
index 38483c3baf..c7ac93b03b 100644
--- a/src/pages/Causes/SignupForm.vue
+++ b/src/pages/Causes/SignupForm.vue
@@ -1,77 +1,73 @@
 <template>
-	<section class="tw-relative">
-		<kv-page-container class="tw-mt-4 md:tw-mt-6 lg:tw-mt-8">
-			<kv-grid class="tw-grid-cols-12">
-				<div :class="[
-					'tw-px-1',
-					'tw-mb-6',
-					'tw-col-span-12',
-					'md:tw-col-span-6',
-					'md:tw-col-start-4'
-				]"
-				>
-					<!-- Sign Up Form -->
-					<img
-						class="tw-h-16 tw-w-16 tw-mx-auto tw-mb-4"
-						:src="causesIconImgRequire(`./lend-icon.svg`)"
-					>
+	<section>
+		<div :class="[
+			'tw-mx-auto',
+			'tw-px-1',
+			'tw-mb-6',
+			'tw-mt-6',
+			'tw-max-w-md'
+		]"
+		>
+			<!-- Sign Up Form -->
+			<img
+				class="tw-h-16 tw-w-16 tw-mx-auto tw-mb-4"
+				:src="causesIconImgRequire(`./lend-icon.svg`)"
+			>
 
-					<h3 v-if="cause === 'climate'">
-						Are you ready to take action and fund climate loans each month?
-					</h3>
-					<h3 v-if="cause === 'education'">
-						Are you ready to take action and fund education loans each month?
-					</h3>
-					<h3 v-if="cause === 'women'">
-						Are you ready to take action and fund loans to women each month?
-					</h3>
+			<h3 v-if="cause === 'climate'">
+				Are you ready to take action and fund climate loans each month?
+			</h3>
+			<h3 v-if="cause === 'education'">
+				Are you ready to take action and fund education loans each month?
+			</h3>
+			<h3 v-if="cause === 'women'">
+				Are you ready to take action and fund loans to women each month?
+			</h3>
 
-					<form
-						class="tw-mt-2"
-						@submit.prevent=""
-						novalidate
+			<form
+				class="tw-mt-2"
+				@submit.prevent=""
+				novalidate
+			>
+				<fieldset :disabled="success">
+					<label
+						class="tw-text-h4"
+						for="amount"
+					>
+						Monthly Amount
+					</label>
+					<kv-select
+						class="tw-w-full tw-mt-2"
+						id="amount"
+						v-model.number="amount"
 					>
-						<fieldset :disabled="success">
-							<label
-								class="tw-text-h4"
-								for="amount"
-							>
-								Monthly Amount
-							</label>
-							<kv-select
-								class="tw-w-full tw-mt-2"
-								id="amount"
-								v-model="amount"
-							>
-								<option
-									v-for="(option, index) in mgAmountOptions"
-									:value="option.value"
-									:key="index"
-								>
-									{{ option.label }}
-								</option>
-							</kv-select>
+						<option
+							v-for="(option, index) in mgAmountOptions"
+							:value="option.value"
+							:key="index"
+						>
+							{{ option.label }}
+						</option>
+					</kv-select>
 
-							<p class="tw-mt-2 tw-text-base" v-if="dayOfMonth < 29">
-								<!-- eslint-disable-next-line max-len -->
-								Your subscription will renew automatically every month on the {{ dayOfMonth | numeral('Oo') }}. You can cancel any time.
-							</p>
-							<p class="tw-mt-2 tw-text-base" v-else>
-								<!-- eslint-disable-next-line max-len -->
-								Your subscription will renew automatically on the {{ dayOfMonth | numeral('Oo') }}, or the last day of the month. You can cancel any time.
-							</p>
-							<causes-drop-in-payment-wrapper
-								class="tw-mt-4 tw-mx-auto"
-								:amount="amount"
-								:day-of-month="dayOfMonth"
-								:cause-category-id="causeCategoryId"
-								@complete-transaction="completeCausesBraintree"
-							/>
-						</fieldset>
-					</form>
-				</div>
-			</kv-grid>
-		</kv-page-container>
+					<p class="tw-mt-2 tw-text-base" v-if="dayOfMonth < 29">
+						<!-- eslint-disable-next-line max-len -->
+						Your subscription will renew automatically every month on the {{ dayOfMonth | numeral('Oo') }}. You can cancel any time.
+					</p>
+					<p class="tw-mt-2 tw-text-base" v-else>
+						<!-- eslint-disable-next-line max-len -->
+						Your subscription will renew automatically on the {{ dayOfMonth | numeral('Oo') }}, or the last day of the month. You can cancel any time.
+					</p>
+					<causes-drop-in-payment-wrapper
+						class="tw-mt-4 tw-mx-auto"
+						:amount="amount"
+						:day-of-month="dayOfMonth"
+						:cause-category-id="causeCategoryId"
+						@complete-transaction="completeCausesBraintree"
+					/>
+				</fieldset>
+			</form>
+		</div>
 	</section>
 </template>
 
@@ -83,8 +79,6 @@ import numeral from 'numeral';
 import { required } from 'vuelidate/lib/validators';
 
 import CausesDropInPaymentWrapper from '@/components/Causes/CausesDropInPaymentWrapper';
-import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 import KvSelect from '~/@kiva/kv-components/vue/KvSelect';
 
 const causesIconImgRequire = require.context('@/assets/images/causes-icons/', true);
@@ -112,8 +106,6 @@ export default {
 	},
 	components: {
 		CausesDropInPaymentWrapper,
-		KvGrid,
-		KvPageContainer,
 		KvSelect,
 	},
 	metaInfo: {
diff --git a/src/pages/Donate/DonateFormDropInPaymentWrapper.vue b/src/pages/Donate/DonateFormDropInPaymentWrapper.vue
index edf5bc7782..a7a9f640ed 100644
--- a/src/pages/Donate/DonateFormDropInPaymentWrapper.vue
+++ b/src/pages/Donate/DonateFormDropInPaymentWrapper.vue
@@ -168,6 +168,7 @@ export default {
 						this.doBraintreeAutoDeposit(transactionNonce, deviceData, paymentType);
 					}
 				}).catch(btSubmitError => {
+					this.submitting = false;
 					console.error(btSubmitError);
 					// TODO: alert user about error?
 					// Fire specific exception to Sentry/Raven
diff --git a/src/pages/Settings/PaymentSettings.vue b/src/pages/Settings/PaymentSettings.vue
index bf8aa2fb32..bb0d18e696 100644
--- a/src/pages/Settings/PaymentSettings.vue
+++ b/src/pages/Settings/PaymentSettings.vue
@@ -358,6 +358,7 @@ export default {
 						this.doBraintreeAddACard(transactionNonce, deviceData, paymentType);
 					}
 				}).catch(btSubmitError => {
+					this.isProcessing = false;
 					console.error(btSubmitError);
 					// Fire specific exception to Sentry/Raven
 					Sentry.withScope(scope => {