JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: fix invalid access of Stripe card input element

Browse Source 
This change resolves an issue where an error would be shown to the
user due to inappropriate removal of the Stripe card input element
upon attempted submission of credit card info.

Change-Id: I479ea58bfd2a457da5cb6a9c7bff476269c63b23
This commit is contained in:
Jeremy Wharton 2022-09-15 03:38:24 -05:00 committed by Storj Robot
parent 9b520b2114
commit 71bf43bcc6
1 changed files with 11 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -48,15 +48,14 @@
/> />
</div> </div>
<div class="payments-area__container__new-payments"> <div class="payments-area__container__new-payments">
<v-loader v-if="isLoading" class="payments-area__container__new-payments__payment-loading-image" /> <div v-if="!isAddingPayment" class="payments-area__container__new-payments__text-area">
<div v-else-if="!isAddingPayment" class="payments-area__container__new-payments__text-area">
<span class="payments-area__container__new-payments__text-area__plus-icon">+&nbsp;</span> <span class="payments-area__container__new-payments__text-area__plus-icon">+&nbsp;</span>
<span <span
class="payments-area__container__new-payments__text-area__text" class="payments-area__container__new-payments__text-area__text"
@click="addPaymentMethodHandler" @click="addPaymentMethodHandler"
>Add New Payment Method</span> >Add New Payment Method</span>
</div> </div>
<div v-else-if="isAddingPayment" class="payments-area__container__new-payments__add-card"> <div v-else class="payments-area__container__new-payments__add-card">
<div class="close-add-payment" @click="closeAddPayment"> <div class="close-add-payment" @click="closeAddPayment">
<CloseCrossIcon /> <CloseCrossIcon />
</div> </div>
@ -67,13 +66,15 @@
class="add-card-area__stripe stripe_input" class="add-card-area__stripe stripe_input"
:on-stripe-response-callback="addCard" :on-stripe-response-callback="addCard"
/> />
<div <VButton
v-if="!isAddCardClicked"
class="add-card-button" class="add-card-button"
@click="onConfirmAddStripe" label="Add Credit Card"
> width="115px"
<span class="add-card-button__text">Add Credit Card</span> height="30px"
</div> font-size="13px"
:on-press="onConfirmAddStripe"
:is-disabled="isLoading"
/>
</div> </div>
</div> </div>
</div> </div>
@ -420,6 +421,7 @@ export default class PaymentMethods extends Vue {
} }
public async onConfirmAddStripe(): Promise<void> { public async onConfirmAddStripe(): Promise<void> {
if (this.isLoading) return;
this.isLoading = true; this.isLoading = true;
await this.$refs.stripeCardInput.onSubmit().then(() => {this.isLoading = false;}); await this.$refs.stripeCardInput.onSubmit().then(() => {this.isLoading = false;});
} }
@ -770,37 +772,7 @@ $align: center;
} }
.add-card-button { .add-card-button {
grid-row: 4;
grid-column: 1;
width: 115px;
height: 30px;
margin-top: 2px; margin-top: 2px;
cursor: pointer;
border-radius: 6px;
background-color: #0149ff;
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #fff;
user-select: none;
transition: top 0.5s ease-in-out;
&:hover {
background-color: #0059d0;
}
&__text {
margin-top: 4px;
margin-left: 9px;
font-family: 'font-medium', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 29px;
display: $flex;
align-items: $align;
letter-spacing: -0.02em;
}
} }
.active-discount { .active-discount {
@ -889,10 +861,6 @@ $align: center;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
&__payment-loading-image {
padding: 40px;
}
&__text-area { &__text-area {
display: flex; display: flex;
align-items: center; align-items: center;