Skip to content

Commit

Permalink
fix: fixes issues with BT drop in and causes signup
Browse files Browse the repository at this point in the history 
* Fixes issue with BT drop in wrappers stuck on button loading
* Minor visual fixes to causes signup form
  • Loading branch information
Eddie Ferrer committed Nov 30, 2021
1 parent e712d7a commit f675ac1
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 96 deletions.
1 change: 1 addition & 0 deletions src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
5 changes: 3 additions & 2 deletions src/components/Causes/CausesDropInPaymentWrapper.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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 => {
Expand Down
1 change: 1 addition & 0 deletions src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
52 changes: 31 additions & 21 deletions src/components/Payment/BraintreeDropInInterface.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -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'
Expand Down
138 changes: 65 additions & 73 deletions src/pages/Causes/SignupForm.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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);
Expand Down Expand Up @@ -112,8 +106,6 @@ export default {
},
components: {
CausesDropInPaymentWrapper,
KvGrid,
KvPageContainer,
KvSelect,
},
metaInfo: {
Expand Down
1 change: 1 addition & 0 deletions src/pages/Donate/DonateFormDropInPaymentWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/pages/Settings/PaymentSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down

0 comments on commit f675ac1

Please sign in to comment.