web/satellite: update storj deposit form with support info
Coinpayments is not working properly; This change replaces the storj deposit form with a message to contact support. see: https://github.com/storj/storj-private/issues/43 Change-Id: If3792d05282c102c1d5ca0664bd8c70ad103f61c
This commit is contained in:
wilfredasomani
parent
452c243d57
commit
1bd609c00b
@ -3,38 +3,41 @@
|
||||
|
||||
<template>
|
||||
<div class="add-storj-area">
|
||||
<div class="add-storj-area__selection-container">
|
||||
<p class="add-storj-area__selection-container__label">Deposit STORJ Tokens via Coin Payments</p>
|
||||
<TokenDepositSelection
|
||||
class="add-storj-area__selection-container__form"
|
||||
:payment-options="paymentOptions"
|
||||
@onChangeTokenValue="onChangeTokenValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="add-storj-area__submit-area">
|
||||
<img
|
||||
v-if="isLoading"
|
||||
class="loading-image"
|
||||
src="@/../static/images/account/billing/loading.gif"
|
||||
alt="loading gif"
|
||||
>
|
||||
<VButton
|
||||
class="confirm-add-storj-button"
|
||||
label="Continue to Coin Payments"
|
||||
width="251px"
|
||||
height="48px"
|
||||
:on-press="onConfirmAddSTORJ"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
<p class="add-storj-area__support-info">Please contact <a target="_blank" href="mailto:supportdcs@storj.io">supportdcs@storj.io</a> to deposit STORJ tokens into your account</p>
|
||||
<!-- TODO: Introduce variable to toggle btn support-info and selection-container -->
|
||||
<!-- see: https://github.com/storj/storj-private/issues/43 -->
|
||||
<!-- <div class="add-storj-area__selection-container">
|
||||
<p class="add-storj-area__selection-container__label">Deposit STORJ Tokens via Coin Payments</p>
|
||||
<TokenDepositSelection
|
||||
class="add-storj-area__selection-container__form"
|
||||
:payment-options="paymentOptions"
|
||||
@onChangeTokenValue="onChangeTokenValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="add-storj-area__submit-area">
|
||||
<img
|
||||
v-if="isLoading"
|
||||
class="loading-image"
|
||||
src="@/../static/images/account/billing/loading.gif"
|
||||
alt="loading gif"
|
||||
>
|
||||
<VButton
|
||||
class="confirm-add-storj-button"
|
||||
label="Continue to Coin Payments"
|
||||
width="251px"
|
||||
height="48px"
|
||||
:on-press="onConfirmAddSTORJ"
|
||||
:is-disabled="isLoading"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
import TokenDepositSelection from '@/components/account/billing/paymentMethods/TokenDepositSelection.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
// import TokenDepositSelection from '@/components/account/billing/paymentMethods/TokenDepositSelection.vue';
|
||||
// import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
|
||||
import { PaymentAmountOption } from '@/types/payments';
|
||||
@ -47,8 +50,8 @@ const {
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
TokenDepositSelection,
|
||||
VButton,
|
||||
// TokenDepositSelection,
|
||||
// VButton,
|
||||
},
|
||||
})
|
||||
export default class AddStorjForm extends Vue {
|
||||
@ -154,7 +157,7 @@ export default class AddStorjForm extends Vue {
|
||||
}
|
||||
|
||||
.add-storj-area {
|
||||
margin-top: 44px;
|
||||
margin: 20px 0;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
display: flex;
|
||||
max-height: 52px;
|
||||
@ -180,6 +183,17 @@ export default class AddStorjForm extends Vue {
|
||||
align-items: center;
|
||||
min-width: 135px;
|
||||
}
|
||||
|
||||
&__support-info {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
color: #0149ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-image {
|
||||
|
||||
@ -416,7 +416,9 @@ export default class PaymentMethods extends Vue {
|
||||
}
|
||||
|
||||
.extended {
|
||||
height: 300px;
|
||||
height: 200px; // TODO: should be based on whether storj payment is allowed or not
|
||||
// see https://github.com/storj/storj-private/issues/43
|
||||
// height: 300px;
|
||||
}
|
||||
|
||||
.reduced {
|
||||
|
||||
@ -2,40 +2,12 @@
|
||||
|
||||
exports[`AddStorjForm renders correctly 1`] = `
|
||||
<div class="add-storj-area">
|
||||
<div class="add-storj-area__selection-container">
|
||||
<p class="add-storj-area__selection-container__label">Deposit STORJ Tokens via Coin Payments</p>
|
||||
<div class="form-container add-storj-area__selection-container__form">
|
||||
<div class="selected-container">
|
||||
<div class="selected-container__label-container">
|
||||
<p class="selected-container__label-container__label">USD $10</p>
|
||||
<div class="selected-container__label-container__svg"><svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-storj-area__submit-area">
|
||||
<!---->
|
||||
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!---->Continue to Coin Payments</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="add-storj-area__support-info">Please contact <a target="_blank" href="mailto:supportdcs@storj.io">supportdcs@storj.io</a> to deposit STORJ tokens into your account</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`AddStorjForm renders correctly after continue To Coin Payments click 1`] = `
|
||||
<div class="add-storj-area">
|
||||
<div class="add-storj-area__selection-container">
|
||||
<p class="add-storj-area__selection-container__label">Deposit STORJ Tokens via Coin Payments</p>
|
||||
<tokendepositselection-stub paymentoptions="[object Object],[object Object],[object Object],[object Object],[object Object]" class="add-storj-area__selection-container__form"></tokendepositselection-stub>
|
||||
</div>
|
||||
<div class="add-storj-area__submit-area"><img src="@/../static/images/account/billing/loading.gif" alt="loading gif" class="loading-image">
|
||||
<vbutton-stub label="Continue to Coin Payments" width="251px" height="48px" fontsize="16px" borderradius="6px" icon="none" isdisabled="true" onpress="[Function]" class="confirm-add-storj-button"></vbutton-stub>
|
||||
</div>
|
||||
<p class="add-storj-area__support-info">Please contact <a target="_blank" href="mailto:supportdcs@storj.io">supportdcs@storj.io</a> to deposit STORJ tokens into your account</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -22,29 +22,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-storj-area">
|
||||
<div class="add-storj-area__selection-container">
|
||||
<p class="add-storj-area__selection-container__label">Deposit STORJ Tokens via Coin Payments</p>
|
||||
<div class="form-container add-storj-area__selection-container__form">
|
||||
<div class="selected-container">
|
||||
<div class="selected-container__label-container">
|
||||
<p class="selected-container__label-container__label">USD $10</p>
|
||||
<div class="selected-container__label-container__svg"><svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-storj-area__submit-area">
|
||||
<!---->
|
||||
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;">
|
||||
<!---->
|
||||
<!----> <span class="label"><!----> <!----> <!----> <!----> <!---->Continue to Coin Payments</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="add-storj-area__support-info">Please contact <a target="_blank" href="mailto:supportdcs@storj.io">supportdcs@storj.io</a> to deposit STORJ tokens into your account</p>
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user